UserModal组件更改

src/views/system/user/components/UserModal.vue

@@ -49,6 +49,17 @@
             placeholder="请输入用户账号"
           />
         </n-form-item>
+        <n-form-item
+          label="登录密码:"
+          path="password"
+        >
+          <n-input
+            v-model:value="form.password"
+            type="password"
+            :maxlength="20"
+            placeholder="请输入登录密码"
+          />
+        </n-form-item>
         <n-form-item label="角色:" path="roleIds">
           <n-select
             v-model:value="form.roleIds"
@@ -86,17 +97,7 @@
             <n-radio :value="2">禁用</n-radio>
           </n-radio-group>
         </n-form-item>
-        <n-form-item
-          label="登录密码:"
-          path="password"
-        >
-          <n-input
-            v-model:value="form.password"
-            type="password"
-            :maxlength="20"
-            placeholder="请输入登录密码"
-          />
-        </n-form-item>
+
         <n-form-item label="用户类型" path="type">
           <n-radio-group
             v-model:value="form.type"
@@ -136,7 +137,7 @@
 </template>
 
 <script>
-import { defineComponent, computed, onMounted, reactive } from 'vue'
+import { defineComponent, computed, onMounted, reactive, toRefs } from 'vue'
 import Modal from '@/components/CardModal/index.vue'
 import { getDeptAll } from '@/api/system/dept/index'
 import { getRoleAll } from '@/api/system/role/index'
@@ -155,7 +156,7 @@ export default defineComponent({
     },
     title: {
       type: String,
-      default: '添加'
+      default: '添加用户'
     }
   },
   emits: {
@@ -192,19 +193,21 @@ export default defineComponent({
 
     })
 
+    const optionsList = reactive({
+      deptOptions: [],
+      rolesOptions: []
+    })
     // 获取部门列表
-    let deptOptions = reactive([])
     async function getDeptOptions() {
       const res = await getDeptAll()
-      deptOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
-      console.log('部门选项：', deptOptions)
+      optionsList.deptOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
+      console.log('部门选项：', optionsList.deptOptions)
     }
 
     // 获取角色列表
-    let rolesOptions = reactive([])
     async function getRoleOptions() {
       const res = await getRoleAll()
-      rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
+      optionsList.rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
     }
 
     onMounted(() => {
@@ -239,8 +242,7 @@ export default defineComponent({
         }
       }),
       handleUpload,
-      deptOptions,
-      rolesOptions
+      ...toRefs(optionsList)
     }
   },
   methods: {

src/views/system/user/index.vue

@@ -175,6 +175,13 @@ export default {
     })
 
     return { data, loadDataTable, handleUser, rowData, modalTitle }
+  },
+  methods: {
+    // 批量删除用户
+    deleteUsers() {
+      
+    },
+
   }
 }
 </script>