From 44e11fa043228eca659136847e9f5fbac845398a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E8=8F=B2?= <1622041228@qq.com>
Date: Tue, 24 May 2022 17:19:33 +0800
Subject: [PATCH 01/14] =?UTF-8?q?UserModal=E7=BB=84=E4=BB=B6=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/user/components/UserModal.vue      | 42 ++++++++++---------
 src/views/system/user/index.vue               |  7 ++++
 2 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/views/system/user/components/UserModal.vue b/src/views/system/user/components/UserModal.vue
index 59b9837..eb67550 100644
--- a/src/views/system/user/components/UserModal.vue
+++ b/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: {
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 5ea6e4e..fa45103 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -175,6 +175,13 @@ export default {
     })
 
     return { data, loadDataTable, handleUser, rowData, modalTitle }
+  },
+  methods: {
+    // 批量删除用户
+    deleteUsers() {
+      
+    },
+
   }
 }
 </script>

From 32be584c98461411df5bf3e9879cd013cabbac82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E8=8F=B2?= <1622041228@qq.com>
Date: Tue, 24 May 2022 18:02:23 +0800
Subject: [PATCH 02/14] =?UTF-8?q?modal=E6=A0=87=E9=A2=98=E6=9B=BF=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/user/components/UserModal.vue      |  9 +----
 src/views/system/user/index.vue               | 33 ++++++++++++-------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/views/system/user/components/UserModal.vue b/src/views/system/user/components/UserModal.vue
index eb67550..d39c1e0 100644
--- a/src/views/system/user/components/UserModal.vue
+++ b/src/views/system/user/components/UserModal.vue
@@ -13,12 +13,9 @@
         >
           <n-upload
             action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
-            :default-file-list="previewFileList"
             list-type="image-card"
-            @preview="handlePreview"
           />
           <n-modal
-            v-model:show="showModal"
             preset="card"
             style="width: 600px"
             title="头像"
@@ -153,10 +150,6 @@ export default defineComponent({
     row: {
       type: Object,
       default: () => {}
-    },
-    title: {
-      type: String,
-      default: '添加用户'
     }
   },
   emits: {
@@ -167,7 +160,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const getModalOptions = computed(() => {
       return {
-        title: props.title,
+        title: Object.keys(props.row).length === 0 ? '添加用户' : '编辑用户',
         show: props.visible
       }
     })
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index bf288c8..96d4da7 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -15,7 +15,7 @@
     </n-card>
   </div>
   <!-- 新增、编辑弹窗 -->
-  <user-modal v-if="data.modalShow" v-model:visible="data.modalShow" :row="rowData" :title="modalTitle" />
+  <user-modal v-if="data.modalShow" v-model:visible="data.modalShow" :row="rowData" />
 </template>
 
 <script>
@@ -24,7 +24,7 @@ import TableAction from '@/components/DataTable/tools/Action.vue'
 import TableImage from '@/components/DataTable/tools/Image.vue'
 import TableTags from '@/components/DataTable/tools/Tags.vue'
 import { getUserList } from '@/api/system/user/index.js'
-import { h, unref, ref } from 'vue'
+import { h, unref, toRefs } from 'vue'
 import { reactive } from 'vue'
 import UserModal from './components/UserModal.vue'
 export default {
@@ -74,7 +74,17 @@ export default {
           align: 'center',
           render(row) {
             return h(TableTags, {
-              data: row.roles
+              data: row.roles,
+              rowKey: 'name',
+              filters: [
+                {
+                  key: '超级管理员',
+                  label: '123',
+                  color: {
+                    textColor: 'red'
+                  }
+                }
+              ]
             })
           }
         },
@@ -131,12 +141,12 @@ export default {
       ],
       modalShow: false
     })
-    const modalTitle = ref('添加用户')
-    let rowData = reactive({})
+    const modalData = reactive({
+      rowData: {}
+    })
     // 打开编辑弹窗
     function play(row) {
-      rowData = row
-      modalTitle.value = '编辑用户'
+      modalData.rowData = row
       console.log('编辑弹窗内容：', row)
       data.modalShow = true
     }
@@ -153,18 +163,17 @@ export default {
       return await getUserList(_params)
     }
     function handleUser() {
-      rowData = {}
-      modalTitle.value = '添加用户'
+      modalData.rowData = {}
       data.modalShow = true
     }
 
-    return { data, loadDataTable, handleUser, rowData, modalTitle }
+    return { data, loadDataTable, handleUser, ...toRefs(modalData) }
   },
   methods: {
     // 批量删除用户
     deleteUsers() {
-      
-    },
+
+    }
 
   }
 }

From 0159932ab28ecc32e3a10d77681f44bde21308c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E8=8F=B2?= <1622041228@qq.com>
Date: Wed, 25 May 2022 14:38:40 +0800
Subject: [PATCH 03/14] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   1 +
 src/components/CardModal/index.vue            |   8 +-
 src/views/login/index.vue                     |  64 +++---
 .../system/user/components/UserModal.vue      | 198 +++++++++---------
 src/views/system/user/index.vue               |   6 +-
 5 files changed, 142 insertions(+), 135 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 907fbcf..9edaef5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,6 +12,7 @@
 <script setup>
 import themeOverrides from '@/utils/ui/theme.js'
 import LoadingBar from '@/components/LoadingBar/index.vue'
+
 </script>
 
 <style lang="scss">
diff --git a/src/components/CardModal/index.vue b/src/components/CardModal/index.vue
index 722712b..2ed7e19 100644
--- a/src/components/CardModal/index.vue
+++ b/src/components/CardModal/index.vue
@@ -9,8 +9,8 @@
     <n-card :bordered="false">
       <slot name="Context" />
       <n-space style="float: right">
-        <n-button>取消</n-button>
-        <n-button type="primary">确认</n-button>
+        <n-button @click="handleClose">取消</n-button>
+        <n-button type="primary" @click="handleClick">确认</n-button>
       </n-space>
     </n-card>
   </n-modal>
@@ -28,7 +28,7 @@ export default defineComponent({
     }
   },
   emits: {
-    click: null, // click事件没有检验
+    save: null, // click事件没有检验
     onClose: (value) => {
       return value
     }
@@ -41,7 +41,7 @@ export default defineComponent({
       }
     })
     const handleClick = function() {
-      emit('click')
+      emit('save')
     }
     const handleClose = function() {
       emit('onClose', true)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 8108522..b9d4976 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -38,38 +38,19 @@
 <script>
 import { userLogin, userCaptcha } from '@/api/login/index.js'
 import { setToken } from '@/utils/token'
-import { ref, reactive, onMounted } from 'vue'
+import { ref, toRefs, reactive, onMounted } from 'vue'
 export default {
   name: 'LoginPage',
   setup() {
-    const loginForm = reactive({
-      username: '',
-      password: '',
-      key: '',
-      captcha: '',
-      remember: false
-    })
-    onMounted(() => {
-      changeCode(loginForm)
-    })
-    // 获取图形验证码
-    const captcha = ref('')
-    async function changeCode(form) {
-      const params = {
-        username: form.username,
-        password: form.password,
-        captcha: form.captcha
-      }
-      const captForm = await userCaptcha(params)
-      captcha.value = captForm.data.captcha
-      loginForm.key = captForm.data.key
-    }
-
-    return {
-      loginForm,
-      captcha,
-      changeCode,
-      rules: reactive({
+    const data = reactive({
+      loginForm: {
+        username: '',
+        password: '',
+        key: '',
+        captcha: '',
+        remember: false
+      },
+      rules: {
         username: {
           required: true,
           trigger: ['blur', 'input'],
@@ -85,12 +66,33 @@ export default {
           trigger: ['blur', 'input'],
           message: '请输入验证码'
         }
-      })
+      }
+    })
+    onMounted(() => {
+      changeCode(data.loginForm)
+    })
+    // 获取图形验证码
+    const captcha = ref('')
+    async function changeCode(form) {
+      const params = {
+        username: form.username,
+        password: form.password,
+        captcha: form.captcha
+      }
+      const captForm = await userCaptcha(params)
+      captcha.value = captForm.data.captcha
+      data.loginForm.key = captForm.data.key
+    }
+
+    return {
+      ...toRefs(data),
+      captcha,
+      changeCode
+
     }
   },
   methods: {
     handleLogin() {
-      console.log(this.loginForm)
       userLogin(this.loginForm).then((res) => {
         if (res.code === 0) {
           // 登录成功存储token，跳转首页
diff --git a/src/views/system/user/components/UserModal.vue b/src/views/system/user/components/UserModal.vue
index d39c1e0..b7858b7 100644
--- a/src/views/system/user/components/UserModal.vue
+++ b/src/views/system/user/components/UserModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal :options="getModalOptions" @on-close="handleClose">
+  <Modal :options="getModalOptions" @on-close="handleClose" @save="submitForm">
     <template #Context>
       <n-form
         ref="formRef"
@@ -31,13 +31,6 @@
             placeholder="请输入用户编号"
           />
         </n-form-item>
-        <n-form-item label="所属部门:" path="deptId">
-          <n-select
-            v-model:value="form.deptId"
-            :options="deptOptions"
-            placeholder="请选择所属部门"
-          />
-        </n-form-item>
         <n-form-item label="用户账号:" path="username">
           <n-input
             v-model:value="form.username"
@@ -57,6 +50,21 @@
             placeholder="请输入登录密码"
           />
         </n-form-item>
+        <n-form-item label="用户姓名:" path="realname">
+          <n-input
+            v-model:value="form.realname"
+            clearable
+            :maxlength="20"
+            placeholder="请输入用户姓名"
+          />
+        </n-form-item>
+        <n-form-item label="所属部门:" path="deptId">
+          <n-select
+            v-model:value="form.deptId"
+            :options="deptOptions"
+            placeholder="请选择所属部门"
+          />
+        </n-form-item>
         <n-form-item label="角色:" path="roleIds">
           <n-select
             v-model:value="form.roleIds"
@@ -66,26 +74,6 @@
             placeholder="请选择角色"
           />
         </n-form-item>
-        <n-form-item
-          v-if="form.type==2"
-          label="驾照类型："
-          path="driverType"
-        >
-          <n-select
-            v-model:value="form.driverType"
-            clearable
-            :options="[1, 2]"
-            placeholder="请选择驾照类型"
-          />
-        </n-form-item>
-        <n-form-item label="用户姓名:" path="realname">
-          <n-input
-            v-model:value="form.realname"
-            clearable
-            :maxlength="20"
-            placeholder="请输入用户姓名"
-          />
-        </n-form-item>
         <n-form-item label="状态" path="status">
           <n-radio-group
             v-model:value="form.status"
@@ -94,31 +82,8 @@
             <n-radio :value="2">禁用</n-radio>
           </n-radio-group>
         </n-form-item>
-
-        <n-form-item label="用户类型" path="type">
-          <n-radio-group
-            v-model:value="form.type"
-          >
-            <n-radio :value="1">普通用户</n-radio>
-            <n-radio :value="2">飞手</n-radio>
-          </n-radio-group>
-        </n-form-item>
-        <n-form-item
-          v-if="form.type==2"
-          label="驾照编号:"
-          path="driverCode"
-        >
-          <n-input
-            v-model:value="form.driverCode"
-            clearable
-            :maxlength="20"
-            placeholder="请输入驾照编号"
-          />
-        </n-form-item>
         <n-form-item
           label="备注:"
-          :label-col="{sm: {span: 3}, xs: {span: 6}}"
-          :wrapper-col="{sm: {span: 21}, xs: {span: 18}}"
         >
           <n-input
             v-model:value="form.note"
@@ -138,6 +103,7 @@ 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'
+import { addUser, editUser } from '@/api/system/user/index'
 import { dataToSelect } from '@/utils/handleData.js'
 export default defineComponent({
   name: 'UserModal',
@@ -155,13 +121,30 @@ export default defineComponent({
   emits: {
     'update:visible': null,
     onClose: null,
-    done: null
+    'done': null
   },
   setup(props, { emit }) {
+    const data = reactive({
+      form: {
+        avatar: '/images/user/20211011/20211011151447698.jpg',
+        code: '',
+        deptId: null,
+        username: '',
+        realname: '',
+        password: '',
+        roleIds: [],
+        status: 1,
+        note: ''
+
+      },
+      deptOptions: [],
+      rolesOptions: []
+    })
     const getModalOptions = computed(() => {
       return {
         title: Object.keys(props.row).length === 0 ? '添加用户' : '编辑用户',
-        show: props.visible
+        show: props.visible,
+        form: Object.assign(data.form, props.row)
       }
     })
 
@@ -170,37 +153,16 @@ export default defineComponent({
       emit('update:visible', false)
     }
 
-    const form = reactive({
-      avatar: '',
-      code: '',
-      deptId: null,
-      username: '',
-      realname: '',
-      password: '',
-      roleIds: [],
-      driverType: null,
-      driverCode: '',
-      type: 1,
-      status: 1,
-      note: ''
-
-    })
-
-    const optionsList = reactive({
-      deptOptions: [],
-      rolesOptions: []
-    })
     // 获取部门列表
     async function getDeptOptions() {
       const res = await getDeptAll()
-      optionsList.deptOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
-      console.log('部门选项：', optionsList.deptOptions)
+      data.deptOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
     }
 
     // 获取角色列表
     async function getRoleOptions() {
       const res = await getRoleAll()
-      optionsList.rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
+      data.rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
     }
 
     onMounted(() => {
@@ -209,37 +171,79 @@ export default defineComponent({
     })
 
     // 上传文件
-    const handleUpload = ({ file, event }) => {
-      console.log(event)
-      form.avatar = file.url
+    const handleUpload = ({ file }) => {
+      console.log(file)
+      // data.form.avatar = file.url
     }
+
     return {
       getModalOptions,
       handleClose,
-      form,
+      ...toRefs(data),
       rules: reactive({
-        avatar: {
-          required: true,
-          trigger: 'blur',
-          message: '请上传头像'
-        },
-        code: {
-          required: true,
-          trigger: ['blur', 'input'],
-          message: '请输入用户编号'
-        },
-        deptId: {
-          required: true,
-          trigger: 'blur',
-          message: '请选择部门'
-        }
+        avatar: [
+          { required: true, message: '请选择头像', type: 'string', trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '请输入编号', trigger: 'blur' }
+        ],
+        realname: [
+          { required: true, message: '请输入用户姓名', type: 'string', trigger: 'blur' }
+        ],
+        deptId: [
+          { required: true, message: '请选择部门', type: 'number', trigger: 'blur' }
+        ],
+        status: [
+          { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
+        ],
+        roleIds: [
+          { required: true, message: '请选择角色', type: 'array', trigger: 'blur' }
+        ],
+        username: [
+          { required: true, message: '请输入用户账号', type: 'string', trigger: 'blur' }
+        ]
       }),
-      handleUpload,
-      ...toRefs(optionsList)
+      handleUpload
     }
   },
   methods: {
+    // 表单提交
+    submitForm() {
+      const type = Object.keys(this.row).length === 0 ? 'add' : 'edit'
+      // this.$refs.formRef.validate((errors) => {
+      //   console.log(errors, '++++++++')
+      // })
 
+      console.log(this.form)
+      if (type === 'add') {
+        addUser(this.form).then(res => {
+          if (res.data.code === 0) {
+            // this.$message.success(res.data.msg)
+            this.updateVisible(false)
+            this.$emit('done')
+          } else {
+            console.log(res.data.msg)
+            // this.$message.error(res.data.msg)
+          }
+        }).catch(e => {
+          console.log(e)
+        })
+      } else if (type === 'edit') {
+        editUser(this.form).then(res => {
+          if (res.data.code === 0) {
+            // this.$message.success(res.data.msg)
+            this.updateVisible(false)
+            this.$emit('done')
+          } else {
+            // this.$message.error(res.data.msg)
+          }
+        })
+      }
+    },
+    /* 更新visible */
+    updateVisible(value) {
+      this.$emit('update:visible', value)
+    }
   }
 })
 </script>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 96d4da7..f227908 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -15,7 +15,7 @@
     </n-card>
   </div>
   <!-- 新增、编辑弹窗 -->
-  <user-modal v-if="data.modalShow" v-model:visible="data.modalShow" :row="rowData" />
+  <user-modal v-if="data.modalShow" v-model:visible="data.modalShow" :row="rowData" @done="loadDataTable"/>
 </template>
 
 <script>
@@ -147,12 +147,12 @@ export default {
     // 打开编辑弹窗
     function play(row) {
       modalData.rowData = row
-      console.log('编辑弹窗内容：', row)
       data.modalShow = true
     }
 
     const params = reactive({
-      name: ''
+      page: 1,
+      limit: 10
     })
 
     const loadDataTable = async(res) => {

From e8b0a1e53f28b09e4630df5592115aec0677fd0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E8=8F=B2?= <1622041228@qq.com>
Date: Wed, 25 May 2022 18:59:04 +0800
Subject: [PATCH 04/14] =?UTF-8?q?=E6=B7=BB=E5=8A=A0select=E9=80=89?=
 =?UTF-8?q?=E4=B8=AD=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/role/index.vue               |  20 +--
 src/views/system/role/table.js                |   1 +
 .../system/user/components/UserModal.vue      |   6 +-
 src/views/system/user/index.vue               | 121 +++++++++++++-----
 src/views/system/user/info.js                 |  39 ++++++
 5 files changed, 145 insertions(+), 42 deletions(-)
 create mode 100644 src/views/system/user/info.js

diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 0c9e410..853a07a 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -49,7 +49,7 @@ export default {
             return h(TableAction, {
               actions: [
                 {
-                  label: '添加',
+                  label: '修改',
                   type: 'button',
                   props: {
                     type: 'primary',
@@ -57,14 +57,14 @@ export default {
                   },
                   auth: 'basic_list'
                 },
-                {
-                  label: '修改',
-                  auth: 'basic_list'
-                },
                 {
                   label: '删除',
                   type: 'popconfirm',
-                  auth: 'basic_list'
+                  auth: 'basic_list',
+                  props: {
+                    negativeText: '取消',
+                    positiveText: '确认'
+                  }
                 }
               ],
               align: 'center'
@@ -72,11 +72,14 @@ export default {
           }
         }
       ],
-      info: ref(info)
+      info: ref(info),
+      modalShow: false,
+      rowData: {}
     })
 
     function play(row) {
-      console.log(row)
+      data.rowData = row
+      data.modalShow = true
     }
 
     const params = ref({})
@@ -87,7 +90,6 @@ export default {
       params.value = {
         ...data
       }
-      console.log(params.value)
       tableRef.value.reFetch({ ...unref(params) })
     }
 
diff --git a/src/views/system/role/table.js b/src/views/system/role/table.js
index 04c91b2..a0b35ac 100644
--- a/src/views/system/role/table.js
+++ b/src/views/system/role/table.js
@@ -3,6 +3,7 @@ import { h } from 'vue'
 
 const data = {
   columns: [
+    { type: 'selection' },
     {
       title: '用户编号',
       key: 'code',
diff --git a/src/views/system/user/components/UserModal.vue b/src/views/system/user/components/UserModal.vue
index 7504f18..ccd92b3 100644
--- a/src/views/system/user/components/UserModal.vue
+++ b/src/views/system/user/components/UserModal.vue
@@ -225,8 +225,9 @@ export default defineComponent({
               if (res.code === 0) {
                 this.handleClose()
                 this.$emit('done')
+                $message.success(res.data.msg)
               } else {
-                console.log(res.data.msg)
+                $message.error(res.data.msg)
               }
             }).catch(e => {
               console.log(e)
@@ -236,8 +237,9 @@ export default defineComponent({
               if (res.code === 0) {
                 this.handleClose()
                 this.$emit('done')
+                $message.success(res.data.msg)
               } else {
-                console.log(res.data.msg)
+                $message.error(res.data.msg)
               }
             })
           }
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 41cf769..e7d1368 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,43 +1,59 @@
 <template>
   <div>
     <n-card>
+      <headSearch :info="data.info" @search="handleSearch" />
       <data-table
         :columns="data.columns"
         :row-key="(row) => row.id"
         :request="loadDataTable"
         size="large"
+        @update:checked-row-keys="handleCheck"
       >
         <template #tableTitle>
           <n-button type="primary" @click="handleUser"> 新建 </n-button>
           <n-popconfirm
-            @positive-click="handlePositiveClick"
-            @negative-click="handleNegativeClick"
+            negative-text="取消"
+            positive-text="确认"
+            @positive-click="deleteUsers('plural')"
           >
-            <n-button type="primary" @click="deleteUsers"> 删除 </n-button>
+            <template #trigger>
+              <n-button type="primary" @click="deleteUsers"> 删除 </n-button>
+            </template>
+            确认要批量删除吗？
           </n-popconfirm>
         </template>
       </data-table>
     </n-card>
   </div>
   <!-- 新增、编辑弹窗 -->
-  <user-modal v-if="data.modalShow" v-model:visible="data.modalShow" :row="rowData" @done="loadDataTable" />
+  <user-modal
+    v-if="data.modalShow"
+    v-model:visible="data.modalShow"
+    :row="rowData"
+    @done="loadDataTable"
+  />
 </template>
 
 <script>
+import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
 import TableImage from '@/components/DataTable/tools/Image.vue'
 import TableTags from '@/components/DataTable/tools/Tags.vue'
-import { getUserList } from '@/api/system/user/index.js'
-import { h, unref, toRefs } from 'vue'
+import { getUserList, deleteUser } from '@/api/system/user/index.js'
+import { h, unref, toRefs, ref } from 'vue'
 import { reactive } from 'vue'
 import UserModal from './components/UserModal.vue'
+import info from './info.js'
 export default {
   name: 'MenuPage',
-  components: { dataTable, UserModal },
+  components: { dataTable, UserModal, headSearch },
   setup() {
     const data = reactive({
       columns: [
+        {
+          type: 'selection'
+        },
         {
           title: '用户编号',
           key: 'code',
@@ -69,21 +85,12 @@ export default {
         },
         {
           title: '角色',
-          key: 'roles',
+          key: 'roleList',
           align: 'center',
           render(row) {
             return h(TableTags, {
-              data: row.roles,
+              data: row.roleList,
               rowKey: 'name'
-              // filters: [
-              //   {
-              //     key: '管理员',
-              //     label: '123',
-              //     color: {
-              //       textColor: 'red'
-              //     }
-              //   }
-              // ]
             })
           }
         },
@@ -91,7 +98,22 @@ export default {
           title: '状态',
           key: 'status',
           align: 'center',
-          width: 100
+          width: 100,
+          render(row) {
+            return h(TableTags, {
+              data: row.status,
+              filters: [
+                {
+                  key: 1,
+                  label: '启用'
+                },
+                {
+                  key: 2,
+                  label: '禁用'
+                }
+              ]
+            })
+          }
         },
         {
           title: '部门',
@@ -130,7 +152,12 @@ export default {
                 {
                   label: '删除',
                   type: 'popconfirm',
-                  auth: 'basic_list'
+                  auth: 'basic_list',
+                  props: {
+                    negativeText: '取消',
+                    positiveText: '确认',
+                    onPositiveClick: deleteSingle.bind(row)
+                  }
                 }
               ],
               align: 'center'
@@ -138,21 +165,28 @@ export default {
           }
         }
       ],
-      modalShow: false
-    })
-    const modalData = reactive({
+      info: ref(info),
+      modalShow: false,
       rowData: {}
     })
     // 打开编辑弹窗
     function play(row) {
-      modalData.rowData = row
+      data.rowData = row
       data.modalShow = true
     }
 
-    const params = reactive({
+    const params = ref({
       page: 1,
       limit: 10
     })
+    const tableRef = ref()
+
+    function handleSearch(data) {
+      params.value = {
+        ...data
+      }
+      tableRef.value.reFetch({ ...unref(params) })
+    }
 
     const loadDataTable = async(res) => {
       const _params = {
@@ -162,17 +196,42 @@ export default {
       return await getUserList(_params)
     }
     function handleUser() {
-      modalData.rowData = {}
+      data.rowData = {}
       data.modalShow = true
     }
 
-    return { data, loadDataTable, handleUser, ...toRefs(modalData) }
+    function deleteUsers(type) {
+      console.log(type)
+      // deleteUser({ data: [] }).then((res) => {
+      //   if (res.code === 0) {
+      //     $message.success(res.data.msg)
+      //     this.reload()
+      //   } else {
+      //     $message.error(res.data.msg)
+      //   }
+      // })
+    }
+    function deleteSingle(type, row) {
+      console.log(type, row, '++000+++')
+    }
+
+    const checkedRows = ref([])
+    function handleCheck(rowKeys) {
+      checkedRows.value = rowKeys
+      console.log(rowKeys)
+    }
+
+    return {
+      data,
+      loadDataTable,
+      handleUser,
+      ...toRefs(data),
+      handleSearch,
+      deleteUsers,
+      handleCheck
+    }
   },
   methods: {
-    // 批量删除用户
-    deleteUsers() {
-
-    }
 
   }
 }
diff --git a/src/views/system/user/info.js b/src/views/system/user/info.js
new file mode 100644
index 0000000..88d45a3
--- /dev/null
+++ b/src/views/system/user/info.js
@@ -0,0 +1,39 @@
+import { getRoleAll } from '@/api/system/role/index'
+import { dataToSelect } from '@/utils/handleData.js'
+const res = await getRoleAll()
+const rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
+const data = [
+  {
+    label: '用户姓名',
+    key: 'realname',
+    props: {
+      placeholder: '请输入角色名称'
+    }
+  },
+  {
+    label: '用户姓名',
+    key: 'realname',
+    props: {
+      placeholder: '请输入角色名称'
+    }
+  },
+  {
+    label: '用户角色',
+    type: 'select',
+    key: 'roleId',
+    props: {
+      options: rolesOptions
+    }
+  }
+//   {
+//     label: '角色类型',
+//     type: 'date',
+//     key: 'date',
+//     props: {
+//       type: 'date'
+//     }
+//   }
+]
+
+export default data
+

From f13c7e862fa257fd82255cad0749ec50a85688b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E8=8F=B2?= <1622041228@qq.com>
Date: Thu, 26 May 2022 10:55:04 +0800
Subject: [PATCH 05/14] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=A2=9E=E5=88=A0=E6=94=B9=E6=9F=A5=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=AF=B9=E6=8E=A5=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/user/index.js    |  4 +-
 src/components/Search/index.vue |  2 +-
 src/views/system/user/index.vue | 65 ++++++++++++++++++++-------------
 src/views/system/user/info.js   | 18 ++++++---
 4 files changed, 55 insertions(+), 34 deletions(-)

diff --git a/src/api/system/user/index.js b/src/api/system/user/index.js
index 6707513..e12c1d7 100644
--- a/src/api/system/user/index.js
+++ b/src/api/system/user/index.js
@@ -39,9 +39,9 @@ export function editUser(data) {
  * 删除用户
  * params
  */
-export function deleteUser(id) {
+export function deleteUser(idList) {
   return request({
-    url: `/user/delete${[id]}`,
+    url: `/user/delete/${idList}`,
     method: 'DELETE'
   })
 }
diff --git a/src/components/Search/index.vue b/src/components/Search/index.vue
index 8d785eb..e14aaa0 100644
--- a/src/components/Search/index.vue
+++ b/src/components/Search/index.vue
@@ -50,7 +50,7 @@ export default {
     /* 初始化搜索表单信息 */
     function initForm() {
       data.info.forEach((item) => {
-        form.value[item.key] = ''
+        form.value[item.key] = null
       })
     }
 
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index e7d1368..4906fd7 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -3,6 +3,7 @@
     <n-card>
       <headSearch :info="data.info" @search="handleSearch" />
       <data-table
+        ref="tableRef"
         :columns="data.columns"
         :row-key="(row) => row.id"
         :request="loadDataTable"
@@ -17,9 +18,9 @@
             @positive-click="deleteUsers('plural')"
           >
             <template #trigger>
-              <n-button type="primary" @click="deleteUsers"> 删除 </n-button>
+              <n-button type="primary"> 删除 </n-button>
             </template>
-            确认要批量删除吗？
+            确认要删除选中数据吗？
           </n-popconfirm>
         </template>
       </data-table>
@@ -30,7 +31,7 @@
     v-if="data.modalShow"
     v-model:visible="data.modalShow"
     :row="rowData"
-    @done="loadDataTable"
+    @done="handleSearch"
   />
 </template>
 
@@ -156,7 +157,7 @@ export default {
                   props: {
                     negativeText: '取消',
                     positiveText: '确认',
-                    onPositiveClick: deleteSingle.bind(row)
+                    onPositiveClick: deleteSingle.bind(null, row.id)
                   }
                 }
               ],
@@ -175,10 +176,8 @@ export default {
       data.modalShow = true
     }
 
-    const params = ref({
-      page: 1,
-      limit: 10
-    })
+    const params = ref({})
+
     const tableRef = ref()
 
     function handleSearch(data) {
@@ -195,30 +194,43 @@ export default {
       }
       return await getUserList(_params)
     }
+
+    // 新增用户
     function handleUser() {
       data.rowData = {}
       data.modalShow = true
     }
 
-    function deleteUsers(type) {
-      console.log(type)
-      // deleteUser({ data: [] }).then((res) => {
-      //   if (res.code === 0) {
-      //     $message.success(res.data.msg)
-      //     this.reload()
-      //   } else {
-      //     $message.error(res.data.msg)
-      //   }
-      // })
+    // 选择表格数据
+    const selectedIds = ref([])
+    function handleCheck(rowKeys) {
+      selectedIds.value = rowKeys
     }
-    function deleteSingle(type, row) {
-      console.log(type, row, '++000+++')
+    // 批量删除用户
+    function deleteUsers() {
+      if (selectedIds.value.length) {
+        deleteData(selectedIds.value)
+      } else {
+        $message.warning('请至少选中一条数据')
+      }
+    }
+    // 单个删除数据
+    function deleteSingle(id) {
+      deleteData([id])
     }
 
-    const checkedRows = ref([])
-    function handleCheck(rowKeys) {
-      checkedRows.value = rowKeys
-      console.log(rowKeys)
+    // 删除用户接口
+    function deleteData(data) {
+      deleteUser(data).then((res) => {
+        if (res.code === 0) {
+          handleSearch()
+          $message.success(res.data.msg)
+        } else {
+          $message.error(res.data.msg)
+        }
+      }).catch(e => {
+        console.log(e)
+      })
     }
 
     return {
@@ -226,9 +238,12 @@ export default {
       loadDataTable,
       handleUser,
       ...toRefs(data),
+      tableRef,
       handleSearch,
       deleteUsers,
-      handleCheck
+      handleCheck,
+      selectedIds,
+      deleteData
     }
   },
   methods: {
diff --git a/src/views/system/user/info.js b/src/views/system/user/info.js
index 88d45a3..b0ecaab 100644
--- a/src/views/system/user/info.js
+++ b/src/views/system/user/info.js
@@ -1,20 +1,25 @@
 import { getRoleAll } from '@/api/system/role/index'
 import { dataToSelect } from '@/utils/handleData.js'
-const res = await getRoleAll()
-const rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
+import { ref } from 'vue'
+const rolesOptions = ref([])
+async function getRolesOption() {
+  const res = await getRoleAll()
+  rolesOptions.value = dataToSelect(res.data, { label: 'name', value: 'id' })
+}
+getRolesOption()
 const data = [
   {
-    label: '用户姓名',
-    key: 'realname',
+    label: '用户账号',
+    key: 'username',
     props: {
-      placeholder: '请输入角色名称'
+      placeholder: '请输入用户账号'
     }
   },
   {
     label: '用户姓名',
     key: 'realname',
     props: {
-      placeholder: '请输入角色名称'
+      placeholder: '请输入用户姓名'
     }
   },
   {
@@ -22,6 +27,7 @@ const data = [
     type: 'select',
     key: 'roleId',
     props: {
+      placeholder: '请选择用户角色',
       options: rolesOptions
     }
   }

From 2523c4880645d0d9003ff243fcfad3a14f0db1bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E8=8F=B2?= <1622041228@qq.com>
Date: Thu, 26 May 2022 14:57:01 +0800
Subject: [PATCH 06/14] =?UTF-8?q?=E8=A7=92=E8=89=B2=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=88=A0=E9=99=A4=E6=8E=A5=E5=8F=A3=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/dept/index.js                  |   2 +-
 src/api/system/menu/index.js                  |   2 +-
 src/api/system/role/index.js                  |   4 +-
 .../system/role/components/RoleModal.vue      | 250 ++++++++++++++++++
 src/views/system/role/index.vue               | 121 +++++++--
 src/views/system/role/table.js                |   6 -
 .../system/user/components/UserModal.vue      |  19 +-
 src/views/system/user/index.vue               |  84 +++---
 8 files changed, 415 insertions(+), 73 deletions(-)
 create mode 100644 src/views/system/role/components/RoleModal.vue

diff --git a/src/api/system/dept/index.js b/src/api/system/dept/index.js
index 1570eaf..f9d3ff1 100644
--- a/src/api/system/dept/index.js
+++ b/src/api/system/dept/index.js
@@ -53,7 +53,7 @@ export function editDept(data) {
  */
 export function deleteDept(id) {
   return request({
-    url: `/dept/delete${[id]}`,
+    url: `/dept/delete/${id}`,
     method: 'DELETE'
   })
 }
diff --git a/src/api/system/menu/index.js b/src/api/system/menu/index.js
index 6854bb6..e11607b 100644
--- a/src/api/system/menu/index.js
+++ b/src/api/system/menu/index.js
@@ -53,7 +53,7 @@ export function editMenu(data) {
  */
 export function deleteMenu(id) {
   return request({
-    url: `/menu/delete${[id]}`,
+    url: `/menu/delete/${id}`,
     method: 'DELETE'
   })
 }
diff --git a/src/api/system/role/index.js b/src/api/system/role/index.js
index 421e1a3..878e891 100644
--- a/src/api/system/role/index.js
+++ b/src/api/system/role/index.js
@@ -63,9 +63,9 @@ export function setRoleStatus(data) {
  * 删除角色
  * params
  */
-export function deleteRole(id) {
+export function deleteRole(data) {
   return request({
-    url: `/role/delete${[id]}`,
+    url: `/role/delete/${data}`,
     method: 'DELETE'
   })
 }
diff --git a/src/views/system/role/components/RoleModal.vue b/src/views/system/role/components/RoleModal.vue
new file mode 100644
index 0000000..333f3a6
--- /dev/null
+++ b/src/views/system/role/components/RoleModal.vue
@@ -0,0 +1,250 @@
+<template>
+  <Modal
+    :options="getModalOptions"
+    :on-positive-click="handleConfirm"
+    :on-negative-click="handleClose"
+    :on-close="handleClose"
+  >
+    <template #Context>
+      <n-form
+        ref="formRef"
+        :model="form"
+        label-placement="left"
+        :rules="rules"
+        :on-positive-click="handleConfirm"
+        :on-negative-click="handleClose"
+      >
+        <n-form-item
+          label="头像:"
+          path="avatar"
+        >
+          <uploadImage
+            :options="{
+              max:1,
+              action: '/upload/uploadImage/demo',
+            }"
+            size="2"
+          />
+        </n-form-item>
+        <n-form-item label="用户编号:" path="code">
+          <n-input
+            v-model:value="form.code"
+            clearable
+            :maxlength="20"
+            placeholder="请输入用户编号"
+          />
+        </n-form-item>
+        <n-form-item label="用户账号:" path="username">
+          <n-input
+            v-model:value="form.username"
+            clearable
+            :maxlength="20"
+            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="realname">
+          <n-input
+            v-model:value="form.realname"
+            clearable
+            :maxlength="20"
+            placeholder="请输入用户姓名"
+          />
+        </n-form-item>
+        <n-form-item label="所属部门:" path="deptId">
+          <n-select
+            v-model:value="form.deptId"
+            :options="deptOptions"
+            placeholder="请选择所属部门"
+          />
+        </n-form-item>
+        <n-form-item label="角色:" path="roleIds">
+          <n-select
+            v-model:value="form.roleIds"
+            clearable
+            :multiple="true"
+            :options="rolesOptions"
+            placeholder="请选择角色"
+          />
+        </n-form-item>
+        <n-form-item label="状态" path="status">
+          <n-radio-group
+            v-model:value="form.status"
+          >
+            <n-radio :value="1">正常</n-radio>
+            <n-radio :value="2">禁用</n-radio>
+          </n-radio-group>
+        </n-form-item>
+        <n-form-item
+          label="备注:"
+        >
+          <n-input
+            v-model:value="form.note"
+            type="textarea"
+            :rows="3"
+            :maxlength="200"
+            placeholder="请输入备注"
+          />
+        </n-form-item>
+      </n-form>
+    </template>
+  </Modal>
+</template>
+
+<script>
+import { defineComponent, computed, onMounted, reactive, toRefs } from 'vue'
+import Modal from '@/components/Modal/index.vue'
+import uploadImage from '@/components/ImgUpload/index.vue'
+import { getDeptAll } from '@/api/system/dept/index'
+import { getRoleAll } from '@/api/system/role/index'
+import { addUser, editUser } from '@/api/system/user/index'
+import { dataToSelect } from '@/utils/handleData.js'
+export default defineComponent({
+  name: 'UserModal',
+  components: { Modal, uploadImage },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    row: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  emits: {
+    'update:visible': null,
+    'done': null
+  },
+  setup(props, { emit }) {
+    const data = reactive({
+      form: {
+        avatar: '/images/user/20211011/20211011151447698.jpg',
+        code: '',
+        deptId: null,
+        username: '',
+        realname: '',
+        password: '',
+        roleIds: [],
+        status: 1,
+        note: ''
+
+      },
+      deptOptions: [],
+      rolesOptions: []
+    })
+    const getModalOptions = computed(() => {
+      return {
+        title: Object.keys(props.row).length === 0 ? '添加用户' : '编辑用户',
+        show: props.visible,
+        form: Object.assign(data.form, props.row),
+        negativeText: '取消',
+        positiveText: '确认'
+      }
+    })
+
+    /* 关闭弹窗 */
+    const handleClose = () => {
+      emit('update:visible', false)
+    }
+
+    // 获取部门列表
+    async function getDeptOptions() {
+      const res = await getDeptAll()
+      data.deptOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
+    }
+
+    // 获取角色列表
+    async function getRoleOptions() {
+      const res = await getRoleAll()
+      data.rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
+    }
+
+    onMounted(() => {
+      getDeptOptions()
+      getRoleOptions()
+    })
+
+    // 上传文件
+    const handleUpload = ({ file }) => {
+      console.log(file)
+      // data.form.avatar = file.url
+    }
+
+    return {
+      getModalOptions,
+      handleClose,
+      ...toRefs(data),
+      rules: reactive({
+        avatar: [
+          { required: true, message: '请选择头像', type: 'string', trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '请输入编号', trigger: 'blur' }
+        ],
+        realname: [
+          { required: true, message: '请输入用户姓名', type: 'string', trigger: 'blur' }
+        ],
+        deptId: [
+          { required: true, message: '请选择部门', type: 'number', trigger: 'blur' }
+        ],
+        status: [
+          { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
+        ],
+        roleIds: [
+          { required: true, message: '请选择角色', type: 'array', trigger: 'blur' }
+        ],
+        username: [
+          { required: true, message: '请输入用户账号', type: 'string', trigger: 'blur' }
+        ]
+      }),
+      handleUpload
+    }
+  },
+  methods: {
+    // 表单提交
+    handleConfirm() {
+      const type = Object.keys(this.row).length === 0 ? 'add' : 'edit'
+      this.$refs.formRef.validate((errors) => {
+        if (!errors) {
+          if (type === 'add') {
+            addUser(this.form).then(res => {
+              if (res.code === 0) {
+                this.handleClose()
+                this.$emit('done')
+                $message.success(res.msg)
+              } else {
+                $message.error(res.msg)
+              }
+            }).catch(e => {
+              console.log(e)
+            })
+          } else if (type === 'edit') {
+            editUser(this.form).then(res => {
+              if (res.code === 0) {
+                this.handleClose()
+                this.$emit('done')
+                $message.success(res.msg)
+              } else {
+                $message.error(res.msg)
+              }
+            })
+          }
+        }
+      })
+    }
+  }
+})
+</script>
+<style scoped lang='scss'>
+</style>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 853a07a..829b51e 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,45 +1,72 @@
 <template>
   <div>
     <n-card>
-      <headSearch :info="data.info" @search="handleSearch" />
-
+      <headSearch :info="info" @search="handleSearch" />
       <data-table
         ref="tableRef"
-        :columns="data.columns"
+        :columns="columns"
         :row-key="(row) => row.id"
         :request="loadDataTable"
         size="large"
         scroll-x="1200"
+        @update:checked-row-keys="handleCheck"
       >
         <template #tableTitle>
-          <n-button type="primary">
-            新建
-          </n-button>
-          <n-button type="primary">
-            删除
-          </n-button>
+          <n-button type="primary" @click="handleModal"> 新建 </n-button>
+          <n-popconfirm
+            negative-text="取消"
+            positive-text="确认"
+            @positive-click="deleteComplex"
+          >
+            <template #trigger>
+              <n-button type="primary">删除</n-button>
+            </template>
+            确定删除选中的数据吗?
+          </n-popconfirm>
         </template>
       </data-table>
     </n-card>
   </div>
+  <!-- 新增、编辑弹窗 -->
+  <role-modal
+    v-if="modalShow"
+    v-model:visible="modalShow"
+    :row="rowData"
+    @done="handleSearch"
+  />
 </template>
 
 <script>
 import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
-import { getRoleList } from '@/api/system/role/index'
-import { h, ref, unref } from 'vue'
-import { reactive } from 'vue'
+import { getRoleList, deleteRole } from '@/api/system/role/index'
+import { h, ref, unref, toRefs, reactive } from 'vue'
+import { NSwitch } from 'naive-ui'
 import table from './table.js'
 import info from './info.js'
+import RoleModal from './components/RoleModal.vue'
+
 export default {
   name: 'MenuPage',
-  components: { headSearch, dataTable },
+  components: { headSearch, dataTable, RoleModal },
   setup() {
     const data = reactive({
       columns: [
         ...table.columns,
+        {
+          title: '状态',
+          key: 'status',
+          align: 'center',
+          width: 100,
+          render(row) {
+            return h(NSwitch, {
+              data: row.status,
+              value: row.status === 1,
+              onChange: setStatus.bind(row)
+            })
+          }
+        },
         {
           title: '操作',
           align: 'center',
@@ -61,9 +88,11 @@ export default {
                   label: '删除',
                   type: 'popconfirm',
                   auth: 'basic_list',
+                  tip: '确定删除这条数据吗?',
                   props: {
                     negativeText: '取消',
-                    positiveText: '确认'
+                    positiveText: '确认',
+                    onPositiveClick: deleteSingle.bind(null, row.id)
                   }
                 }
               ],
@@ -101,13 +130,69 @@ export default {
       return await getRoleList(_params)
     }
 
-    return { data, tableRef, loadDataTable, handleSearch }
+    // 新增用户
+    function handleModal() {
+      data.rowData = {}
+      data.modalShow = true
+    }
+
+    // 选择表格数据
+    const selectedIds = ref([])
+    function handleCheck(rowKeys) {
+      selectedIds.value = rowKeys
+    }
+    // 批量删除
+    function deleteComplex() {
+      if (selectedIds.value.length) {
+        deleteData(selectedIds.value)
+      } else {
+        $message.warning('请至少选中一条数据')
+      }
+    }
+    // 单个删除数据
+    function deleteSingle(id) {
+      deleteData([id])
+    }
+
+    // 删除接口
+    function deleteData(data) {
+      deleteRole(data)
+        .then((res) => {
+          if (res.code === 0) {
+            handleSearch()
+            $message.success(res.msg)
+          } else {
+            $message.error(res.msg)
+          }
+        })
+        .catch((e) => {
+          console.log(e)
+        })
+    }
+
+    // 设置状态
+    function setStatus(e, row) {
+      console.log(e, row, '状态+++++++++++++=')
+    }
+
+    return {
+      ...toRefs(data),
+      tableRef,
+      loadDataTable,
+      handleSearch,
+      handleModal,
+      handleCheck,
+      selectedIds,
+      deleteSingle,
+      deleteComplex,
+      deleteData,
+      setStatus
+    }
   }
 }
-
 </script>
 <style scoped lang='scss'>
-.n-button+.n-button{
-    margin-left: 10px;
+.n-button + .n-button {
+  margin-left: 10px;
 }
 </style>
diff --git a/src/views/system/role/table.js b/src/views/system/role/table.js
index a0b35ac..c2cda2a 100644
--- a/src/views/system/role/table.js
+++ b/src/views/system/role/table.js
@@ -45,12 +45,6 @@ const data = {
       align: 'center'
 
     },
-    {
-      title: '状态',
-      key: 'status',
-      align: 'center',
-      width: 100
-    },
     {
       title: '部门',
       key: 'deptName',
diff --git a/src/views/system/user/components/UserModal.vue b/src/views/system/user/components/UserModal.vue
index 6c98893..333f3a6 100644
--- a/src/views/system/user/components/UserModal.vue
+++ b/src/views/system/user/components/UserModal.vue
@@ -25,17 +25,6 @@
             }"
             size="2"
           />
-          <!-- <n-upload
-            action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
-            list-type="image-card"
-          />
-          <n-modal
-            preset="card"
-            style="width: 600px"
-            title="头像"
-          >
-            <img :src="form.avatar" style="width: 100%">
-          </n-modal> -->
         </n-form-item>
         <n-form-item label="用户编号:" path="code">
           <n-input
@@ -233,9 +222,9 @@ export default defineComponent({
               if (res.code === 0) {
                 this.handleClose()
                 this.$emit('done')
-                $message.success(res.data.msg)
+                $message.success(res.msg)
               } else {
-                $message.error(res.data.msg)
+                $message.error(res.msg)
               }
             }).catch(e => {
               console.log(e)
@@ -245,9 +234,9 @@ export default defineComponent({
               if (res.code === 0) {
                 this.handleClose()
                 this.$emit('done')
-                $message.success(res.data.msg)
+                $message.success(res.msg)
               } else {
-                $message.error(res.data.msg)
+                $message.error(res.msg)
               }
             })
           }
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 4906fd7..23a59a1 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,26 +1,26 @@
 <template>
   <div>
     <n-card>
-      <headSearch :info="data.info" @search="handleSearch" />
+      <headSearch :info="info" @search="handleSearch" />
       <data-table
         ref="tableRef"
-        :columns="data.columns"
+        :columns="columns"
         :row-key="(row) => row.id"
         :request="loadDataTable"
         size="large"
         @update:checked-row-keys="handleCheck"
       >
         <template #tableTitle>
-          <n-button type="primary" @click="handleUser"> 新建 </n-button>
+          <n-button type="primary" @click="handleModal"> 新建 </n-button>
           <n-popconfirm
             negative-text="取消"
             positive-text="确认"
-            @positive-click="deleteUsers('plural')"
+            @positive-click="deleteComplex"
           >
             <template #trigger>
               <n-button type="primary"> 删除 </n-button>
             </template>
-            确认要删除选中数据吗？
+            确认要删除选中数据吗?
           </n-popconfirm>
         </template>
       </data-table>
@@ -28,8 +28,8 @@
   </div>
   <!-- 新增、编辑弹窗 -->
   <user-modal
-    v-if="data.modalShow"
-    v-model:visible="data.modalShow"
+    v-if="modalShow"
+    v-model:visible="modalShow"
     :row="rowData"
     @done="handleSearch"
   />
@@ -41,11 +41,11 @@ import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
 import TableImage from '@/components/DataTable/tools/Image.vue'
 import TableTags from '@/components/DataTable/tools/Tags.vue'
-import { getUserList, deleteUser } from '@/api/system/user/index.js'
-import { h, unref, toRefs, ref } from 'vue'
-import { reactive } from 'vue'
+import { getUserList, deleteUser, resetPassword } from '@/api/system/user/index.js'
+import { h, unref, toRefs, ref, reactive } from 'vue'
 import UserModal from './components/UserModal.vue'
 import info from './info.js'
+import { NSwitch } from 'naive-ui'
 export default {
   name: 'MenuPage',
   components: { dataTable, UserModal, headSearch },
@@ -101,18 +101,10 @@ export default {
           align: 'center',
           width: 100,
           render(row) {
-            return h(TableTags, {
+            return h(NSwitch, {
               data: row.status,
-              filters: [
-                {
-                  key: 1,
-                  label: '启用'
-                },
-                {
-                  key: 2,
-                  label: '禁用'
-                }
-              ]
+              value: row.status === 1,
+              onChange: setStatus.bind(row)
             })
           }
         },
@@ -150,10 +142,22 @@ export default {
                   },
                   auth: 'basic_list'
                 },
+                {
+                  label: '重置密码',
+                  type: 'popconfirm',
+                  auth: 'basic_list',
+                  tip: '确定要重置为123456吗?',
+                  props: {
+                    negativeText: '取消',
+                    positiveText: '确认',
+                    onPositiveClick: resetPsw.bind(null, row.id)
+                  }
+                },
                 {
                   label: '删除',
                   type: 'popconfirm',
                   auth: 'basic_list',
+                  tip: '确定删除这条数据吗?',
                   props: {
                     negativeText: '取消',
                     positiveText: '确认',
@@ -196,7 +200,7 @@ export default {
     }
 
     // 新增用户
-    function handleUser() {
+    function handleModal() {
       data.rowData = {}
       data.modalShow = true
     }
@@ -206,8 +210,8 @@ export default {
     function handleCheck(rowKeys) {
       selectedIds.value = rowKeys
     }
-    // 批量删除用户
-    function deleteUsers() {
+    // 批量删除
+    function deleteComplex() {
       if (selectedIds.value.length) {
         deleteData(selectedIds.value)
       } else {
@@ -224,26 +228,46 @@ export default {
       deleteUser(data).then((res) => {
         if (res.code === 0) {
           handleSearch()
-          $message.success(res.data.msg)
+          $message.success(res.msg)
         } else {
-          $message.error(res.data.msg)
+          $message.error(res.msg)
         }
       }).catch(e => {
         console.log(e)
       })
     }
 
+    // 重置密码
+    function resetPsw(id) {
+      resetPassword({ id }).then(res => {
+        if (res.code === 0) {
+          handleSearch()
+          $message.success(res.msg)
+        } else {
+          $message.error(res.msg)
+        }
+      }).catch(e => {
+        console.log(e)
+      })
+    }
+
+    // 设置状态
+    function setStatus(e, row) {
+      console.log(e, row, '状态+++++++++++++=')
+    }
+
     return {
       data,
       loadDataTable,
-      handleUser,
+      handleModal,
       ...toRefs(data),
       tableRef,
       handleSearch,
-      deleteUsers,
-      handleCheck,
       selectedIds,
-      deleteData
+      deleteComplex,
+      handleCheck,
+      deleteData,
+      setStatus
     }
   },
   methods: {

From 3108937e3267fa84ae34554cabd4d812dcbd2099 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E8=8F=B2?= <1622041228@qq.com>
Date: Thu, 26 May 2022 15:46:48 +0800
Subject: [PATCH 07/14] =?UTF-8?q?=E7=94=A8=E6=88=B7=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E8=AE=BE=E7=BD=AE=E3=80=81=E9=87=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=AF=86=E7=A0=81=E3=80=81=E8=A7=92=E8=89=B2=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E5=A2=9E=E5=88=A0=E6=94=B9=E6=9F=A5=E5=8A=9F=E8=83=BD=E7=BB=93?=
 =?UTF-8?q?=E6=9D=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/role/components/ConfigModal.vue    |   0
 .../system/role/components/RoleModal.vue      | 138 ++++--------------
 src/views/system/role/index.vue               |  46 ++++--
 src/views/system/role/table.js                |  48 +-----
 .../system/user/components/UserModal.vue      |  49 +++----
 src/views/system/user/index.vue               |  21 ++-
 6 files changed, 108 insertions(+), 194 deletions(-)
 create mode 100644 src/views/system/role/components/ConfigModal.vue

diff --git a/src/views/system/role/components/ConfigModal.vue b/src/views/system/role/components/ConfigModal.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/system/role/components/RoleModal.vue b/src/views/system/role/components/RoleModal.vue
index 333f3a6..4d2a38b 100644
--- a/src/views/system/role/components/RoleModal.vue
+++ b/src/views/system/role/components/RoleModal.vue
@@ -14,67 +14,20 @@
         :on-positive-click="handleConfirm"
         :on-negative-click="handleClose"
       >
-        <n-form-item
-          label="头像:"
-          path="avatar"
-        >
-          <uploadImage
-            :options="{
-              max:1,
-              action: '/upload/uploadImage/demo',
-            }"
-            size="2"
-          />
-        </n-form-item>
-        <n-form-item label="用户编号:" path="code">
+        <n-form-item label="角色编号:" path="code">
           <n-input
             v-model:value="form.code"
             clearable
             :maxlength="20"
-            placeholder="请输入用户编号"
+            placeholder="请输入角色编号"
           />
         </n-form-item>
-        <n-form-item label="用户账号:" path="username">
+        <n-form-item label="角色名称:" path="name">
           <n-input
-            v-model:value="form.username"
+            v-model:value="form.name"
             clearable
             :maxlength="20"
-            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="realname">
-          <n-input
-            v-model:value="form.realname"
-            clearable
-            :maxlength="20"
-            placeholder="请输入用户姓名"
-          />
-        </n-form-item>
-        <n-form-item label="所属部门:" path="deptId">
-          <n-select
-            v-model:value="form.deptId"
-            :options="deptOptions"
-            placeholder="请选择所属部门"
-          />
-        </n-form-item>
-        <n-form-item label="角色:" path="roleIds">
-          <n-select
-            v-model:value="form.roleIds"
-            clearable
-            :multiple="true"
-            :options="rolesOptions"
-            placeholder="请选择角色"
+            placeholder="请输入角色名称"
           />
         </n-form-item>
         <n-form-item label="状态" path="status">
@@ -102,16 +55,12 @@
 </template>
 
 <script>
-import { defineComponent, computed, onMounted, reactive, toRefs } from 'vue'
+import { defineComponent, computed, reactive, toRefs } from 'vue'
 import Modal from '@/components/Modal/index.vue'
-import uploadImage from '@/components/ImgUpload/index.vue'
-import { getDeptAll } from '@/api/system/dept/index'
-import { getRoleAll } from '@/api/system/role/index'
-import { addUser, editUser } from '@/api/system/user/index'
-import { dataToSelect } from '@/utils/handleData.js'
+import { addRole, editRole } from '@/api/system/role/index'
 export default defineComponent({
-  name: 'UserModal',
-  components: { Modal, uploadImage },
+  name: 'RoleModal',
+  components: { Modal },
   props: {
     visible: {
       type: Boolean,
@@ -129,23 +78,26 @@ export default defineComponent({
   setup(props, { emit }) {
     const data = reactive({
       form: {
-        avatar: '/images/user/20211011/20211011151447698.jpg',
         code: '',
-        deptId: null,
-        username: '',
-        realname: '',
-        password: '',
-        roleIds: [],
+        name: '',
         status: 1,
         note: ''
-
       },
-      deptOptions: [],
-      rolesOptions: []
+      rules: {
+        code: [
+          { required: true, message: '请输入角色编号', trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: '请输入角色名称', type: 'string', trigger: 'blur' }
+        ],
+        status: [
+          { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
+        ]
+      }
     })
     const getModalOptions = computed(() => {
       return {
-        title: Object.keys(props.row).length === 0 ? '添加用户' : '编辑用户',
+        title: Object.keys(props.row).length === 0 ? '添加角色' : '编辑角色',
         show: props.visible,
         form: Object.assign(data.form, props.row),
         negativeText: '取消',
@@ -158,57 +110,21 @@ export default defineComponent({
       emit('update:visible', false)
     }
 
-    // 获取部门列表
-    async function getDeptOptions() {
-      const res = await getDeptAll()
-      data.deptOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
-    }
-
-    // 获取角色列表
-    async function getRoleOptions() {
-      const res = await getRoleAll()
-      data.rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
-    }
-
-    onMounted(() => {
-      getDeptOptions()
-      getRoleOptions()
-    })
-
-    // 上传文件
-    const handleUpload = ({ file }) => {
-      console.log(file)
-      // data.form.avatar = file.url
-    }
-
     return {
       getModalOptions,
       handleClose,
       ...toRefs(data),
       rules: reactive({
-        avatar: [
-          { required: true, message: '请选择头像', type: 'string', trigger: 'blur' }
-        ],
         code: [
-          { required: true, message: '请输入编号', trigger: 'blur' }
+          { required: true, message: '请输入角色编号', trigger: 'blur' }
         ],
-        realname: [
-          { required: true, message: '请输入用户姓名', type: 'string', trigger: 'blur' }
-        ],
-        deptId: [
-          { required: true, message: '请选择部门', type: 'number', trigger: 'blur' }
+        name: [
+          { required: true, message: '请输入角色名称', type: 'string', trigger: 'blur' }
         ],
         status: [
           { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
-        ],
-        roleIds: [
-          { required: true, message: '请选择角色', type: 'array', trigger: 'blur' }
-        ],
-        username: [
-          { required: true, message: '请输入用户账号', type: 'string', trigger: 'blur' }
         ]
-      }),
-      handleUpload
+      })
     }
   },
   methods: {
@@ -218,7 +134,7 @@ export default defineComponent({
       this.$refs.formRef.validate((errors) => {
         if (!errors) {
           if (type === 'add') {
-            addUser(this.form).then(res => {
+            addRole(this.form).then(res => {
               if (res.code === 0) {
                 this.handleClose()
                 this.$emit('done')
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 829b51e..9f36f87 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -40,9 +40,9 @@
 import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
-import { getRoleList, deleteRole } from '@/api/system/role/index'
+import TableSwitch from '@/components/DataTable/tools/Switch.vue'
+import { getRoleList, deleteRole, addRole, editRole, setRoleStatus } from '@/api/system/role/index'
 import { h, ref, unref, toRefs, reactive } from 'vue'
-import { NSwitch } from 'naive-ui'
 import table from './table.js'
 import info from './info.js'
 import RoleModal from './components/RoleModal.vue'
@@ -60,9 +60,11 @@ export default {
           align: 'center',
           width: 100,
           render(row) {
-            return h(NSwitch, {
-              data: row.status,
-              value: row.status === 1,
+            return h(TableSwitch, {
+              data: { id: row.id, status: row.status },
+              rowKey: 'status',
+              checkedValue: 1,
+              uncheckedValue: 2,
               onChange: setStatus.bind(row)
             })
           }
@@ -84,6 +86,16 @@ export default {
                   },
                   auth: 'basic_list'
                 },
+                {
+                  label: '分配权限',
+                  type: 'button',
+                  props: {
+                    type: 'primary',
+                    ghost: true,
+                    onClick: configure.bind(null, row)
+                  },
+                  auth: 'basic_list'
+                },
                 {
                   label: '删除',
                   type: 'popconfirm',
@@ -103,18 +115,24 @@ export default {
       ],
       info: ref(info),
       modalShow: false,
+      configModalShow: false,
       rowData: {}
     })
 
+    // 编辑
     function play(row) {
       data.rowData = row
       data.modalShow = true
     }
 
+    // 配置权限
+    function configure(row) {
+      data.rowData = row
+      data.configModalShow = true
+    }
+
     const params = ref({})
-
     const tableRef = ref()
-
     function handleSearch(data) {
       params.value = {
         ...data
@@ -171,8 +189,18 @@ export default {
     }
 
     // 设置状态
-    function setStatus(e, row) {
-      console.log(e, row, '状态+++++++++++++=')
+    function setStatus(row) {
+      console.log(row)
+      setRoleStatus({ id: row.data.id, status: row.value }).then(res => {
+        if (res.code === 0) {
+          handleSearch()
+          $message.success(res.msg)
+        } else {
+          $message.error(res.msg)
+        }
+      }).catch(e => {
+        console.log(e)
+      })
     }
 
     return {
diff --git a/src/views/system/role/table.js b/src/views/system/role/table.js
index c2cda2a..7c1a4f8 100644
--- a/src/views/system/role/table.js
+++ b/src/views/system/role/table.js
@@ -1,66 +1,28 @@
-import TableImage from '@/components/DataTable/tools/Image.vue'
-import { h } from 'vue'
 
 const data = {
   columns: [
     { type: 'selection' },
     {
-      title: '用户编号',
+      title: '角色编号',
       key: 'code',
       align: 'center'
     },
     {
-      title: '头像',
-      key: 'avatar',
-      align: 'center',
-      render(row) {
-        return h(TableImage, {
-          images: {
-            width: 36,
-            height: 36,
-            src: row.avatar
-          }
-        })
-      }
-    },
-    {
-      title: '用户账号',
-      key: 'username',
-      align: 'center'
-    },
-    {
-      title: '用户姓名',
-      key: 'realname',
-      align: 'center'
-    },
-    {
-      title: '用户类型',
-      key: 'type',
-      align: 'center',
-      width: 100
-    },
-    {
-      title: '角色',
-      key: 'roles',
-      align: 'center'
-
-    },
-    {
-      title: '部门',
-      key: 'deptName',
+      title: '角色名称',
+      key: 'name',
       align: 'center'
     },
     {
       title: '创建时间',
       key: 'createTime',
       align: 'center',
-      width: 160
+      Minwidth: 160
     },
     {
       title: '更新时间',
       key: 'updateTime',
       align: 'center',
-      width: 160
+      Minwidth: 160
     }
   ]
 }
diff --git a/src/views/system/user/components/UserModal.vue b/src/views/system/user/components/UserModal.vue
index 333f3a6..1eef361 100644
--- a/src/views/system/user/components/UserModal.vue
+++ b/src/views/system/user/components/UserModal.vue
@@ -23,7 +23,6 @@
               max:1,
               action: '/upload/uploadImage/demo',
             }"
-            size="2"
           />
         </n-form-item>
         <n-form-item label="用户编号:" path="code">
@@ -141,7 +140,30 @@ export default defineComponent({
 
       },
       deptOptions: [],
-      rolesOptions: []
+      rolesOptions: [],
+      rules: {
+        avatar: [
+          { required: true, message: '请选择头像', type: 'string', trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '请输入编号', trigger: 'blur' }
+        ],
+        realname: [
+          { required: true, message: '请输入用户姓名', type: 'string', trigger: 'blur' }
+        ],
+        deptId: [
+          { required: true, message: '请选择部门', type: 'number', trigger: 'blur' }
+        ],
+        status: [
+          { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
+        ],
+        roleIds: [
+          { required: true, message: '请选择角色', type: 'array', trigger: 'blur' }
+        ],
+        username: [
+          { required: true, message: '请输入用户账号', type: 'string', trigger: 'blur' }
+        ]
+      }
     })
     const getModalOptions = computed(() => {
       return {
@@ -185,29 +207,6 @@ export default defineComponent({
       getModalOptions,
       handleClose,
       ...toRefs(data),
-      rules: reactive({
-        avatar: [
-          { required: true, message: '请选择头像', type: 'string', trigger: 'blur' }
-        ],
-        code: [
-          { required: true, message: '请输入编号', trigger: 'blur' }
-        ],
-        realname: [
-          { required: true, message: '请输入用户姓名', type: 'string', trigger: 'blur' }
-        ],
-        deptId: [
-          { required: true, message: '请选择部门', type: 'number', trigger: 'blur' }
-        ],
-        status: [
-          { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
-        ],
-        roleIds: [
-          { required: true, message: '请选择角色', type: 'array', trigger: 'blur' }
-        ],
-        username: [
-          { required: true, message: '请输入用户账号', type: 'string', trigger: 'blur' }
-        ]
-      }),
       handleUpload
     }
   },
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index f907bf7..0018abc 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -42,11 +42,10 @@ import TableAction from '@/components/DataTable/tools/Action.vue'
 import TableImage from '@/components/DataTable/tools/Image.vue'
 import TableTags from '@/components/DataTable/tools/Tags.vue'
 import TableSwitch from '@/components/DataTable/tools/Switch.vue'
-import { getUserList } from '@/api/system/user/index.js'
+import { getUserList, resetPassword, deleteUser, setUserStatus } from '@/api/system/user/index.js'
 import { h, unref, ref, toRefs, reactive } from 'vue'
 import UserModal from './components/UserModal.vue'
 import info from './info.js'
-import { NSwitch } from 'naive-ui'
 export default {
   name: 'MenuPage',
   components: { dataTable, UserModal, headSearch },
@@ -103,11 +102,11 @@ export default {
           width: 100,
           render(row) {
             return h(TableSwitch, {
-              data: row,
+              data: { id: row.id, status: row.status },
               rowKey: 'status',
               checkedValue: 1,
               uncheckedValue: 2,
-              onGetRow: setStatus.bind(row)
+              onChange: setStatus.bind(row)
             })
           }
         },
@@ -255,8 +254,17 @@ export default {
     }
 
     // 设置状态
-    function setStatus(e, row) {
-      console.log(e, row, '状态+++++++++++++=')
+    function setStatus(row) {
+      setUserStatus({ id: row.data.id, status: row.value }).then(res => {
+        if (res.code === 0) {
+          handleSearch()
+          $message.success(res.msg)
+        } else {
+          $message.error(res.msg)
+        }
+      }).catch(e => {
+        console.log(e)
+      })
     }
 
     return {
@@ -270,6 +278,7 @@ export default {
       deleteComplex,
       handleCheck,
       deleteData,
+      resetPsw,
       setStatus
     }
   },

From 7d922dcd2863b9b4094741577e03af9dd334d1d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E8=8F=B2?= <1622041228@qq.com>
Date: Thu, 26 May 2022 17:28:45 +0800
Subject: [PATCH 08/14] =?UTF-8?q?=E8=A7=92=E8=89=B2=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E6=96=B0=E5=A2=9E=E5=88=86=E9=85=8D=E6=9D=83?=
 =?UTF-8?q?=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/role/components/ConfigModal.vue    | 108 ++++++++++++++++++
 .../system/role/components/RoleModal.vue      |   2 +-
 src/views/system/role/index.vue               |  13 ++-
 .../system/user/components/UserModal.vue      |   2 +-
 4 files changed, 120 insertions(+), 5 deletions(-)

diff --git a/src/views/system/role/components/ConfigModal.vue b/src/views/system/role/components/ConfigModal.vue
index e69de29..047c783 100644
--- a/src/views/system/role/components/ConfigModal.vue
+++ b/src/views/system/role/components/ConfigModal.vue
@@ -0,0 +1,108 @@
+<template>
+  <Modal
+    :options="getModalOptions"
+    :on-positive-click="handleConfirm"
+    :on-negative-click="handleClose"
+    :on-close="handleClose"
+  >
+    <template #Context>
+      <n-tree
+        block-line
+        cascade
+        checkable
+        :data="allTreeData"
+        key-field="id"
+        label-field="title"
+        :default-expand-all="true"
+        :default-checked-keys="checkedTreeData"
+        @update:checked-keys="handleCheckTree"
+      />
+    </template>
+  </Modal>
+</template>
+<script>
+import { defineComponent, computed, onBeforeMount, reactive, toRefs } from 'vue'
+import { getRolePermission, savePermission } from '@/api/system/role/index'
+import { getMenu } from '@/api/system/menu/index'
+import Modal from '@/components/Modal/index.vue'
+import { toTreeData } from '@/utils/handleData.js'
+export default defineComponent({
+  name: 'ConfigModal',
+  components: { Modal },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    row: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  emits: {
+    'update:visible': null,
+    'done': null
+  },
+  setup(props, { emit }) {
+    const data = reactive({
+      menuIds: [],
+      checkedTreeData: [],
+      allTreeData: []
+    })
+    const getModalOptions = computed(() => {
+      return {
+        title: '权限分配',
+        show: props.visible,
+        form: Object.assign(data.form, props.row),
+        negativeText: '取消',
+        positiveText: '确认'
+      }
+    })
+    onBeforeMount(() => {
+      getMenuByRoleId()
+      getMenuAllData()
+    })
+
+    // 获取当前角色的权限菜单列表
+    async function getMenuByRoleId() {
+      const res = await getRolePermission(props.row.id)
+      const checkedArr = res.data
+      if (checkedArr.length) {
+        checkedArr.forEach((item) => {
+          data.checkedTreeData.push(item.id)
+        })
+      }
+      data.menuIds = data.checkedTreeData
+    }
+
+    // 获取全部菜单数据
+    async function getMenuAllData() {
+      const res = await getMenu()
+      data.allTreeData = toTreeData(res.data, 'id', 'pid', 'children')
+    }
+
+    // 勾选节点
+    function handleCheckTree(keys, options) {
+      console.log(keys, options)
+    }
+
+    /* 关闭弹窗 */
+    const handleClose = () => {
+      emit('update:visible', false)
+    }
+
+    return {
+      ...toRefs(data),
+      getModalOptions,
+      handleClose,
+      handleCheckTree
+    }
+  },
+  methods: {
+    // 提交
+    handleConfirm() {
+      console.log(this.checkedTreeData)
+    }
+  }
+})
+</script>
diff --git a/src/views/system/role/components/RoleModal.vue b/src/views/system/role/components/RoleModal.vue
index 4d2a38b..66ccaae 100644
--- a/src/views/system/role/components/RoleModal.vue
+++ b/src/views/system/role/components/RoleModal.vue
@@ -146,7 +146,7 @@ export default defineComponent({
               console.log(e)
             })
           } else if (type === 'edit') {
-            editUser(this.form).then(res => {
+            editRole(this.form).then(res => {
               if (res.code === 0) {
                 this.handleClose()
                 this.$emit('done')
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 9f36f87..367b692 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -34,6 +34,13 @@
     :row="rowData"
     @done="handleSearch"
   />
+  <!-- 分配权限 -->
+  <config-modal
+    v-if="configModalShow"
+    v-model:visible="configModalShow"
+    :row="rowData"
+    @done="handleSearch"
+  />
 </template>
 
 <script>
@@ -41,15 +48,16 @@ import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
 import TableSwitch from '@/components/DataTable/tools/Switch.vue'
-import { getRoleList, deleteRole, addRole, editRole, setRoleStatus } from '@/api/system/role/index'
+import { getRoleList, deleteRole, setRoleStatus } from '@/api/system/role/index'
 import { h, ref, unref, toRefs, reactive } from 'vue'
 import table from './table.js'
 import info from './info.js'
 import RoleModal from './components/RoleModal.vue'
+import ConfigModal from './components/ConfigModal.vue'
 
 export default {
   name: 'MenuPage',
-  components: { headSearch, dataTable, RoleModal },
+  components: { headSearch, dataTable, RoleModal, ConfigModal },
   setup() {
     const data = reactive({
       columns: [
@@ -118,7 +126,6 @@ export default {
       configModalShow: false,
       rowData: {}
     })
-
     // 编辑
     function play(row) {
       data.rowData = row
diff --git a/src/views/system/user/components/UserModal.vue b/src/views/system/user/components/UserModal.vue
index 1eef361..d610d81 100644
--- a/src/views/system/user/components/UserModal.vue
+++ b/src/views/system/user/components/UserModal.vue
@@ -204,9 +204,9 @@ export default defineComponent({
     }
 
     return {
+      ...toRefs(data),
       getModalOptions,
       handleClose,
-      ...toRefs(data),
       handleUpload
     }
   },

From d4c0ffffefd7da8b846fb521dce359b37df9f0d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E8=8F=B2?= <1622041228@qq.com>
Date: Thu, 26 May 2022 17:56:55 +0800
Subject: [PATCH 09/14] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=88=86=E9=85=8D=E6=9D=83=E9=99=90=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/dept/components/DeptModal.vue      | 249 ++++++++++++++++++
 src/views/system/dept/index.vue               |   5 +-
 .../system/role/components/ConfigModal.vue    |  31 ++-
 src/views/system/user/index.vue               |   2 +-
 4 files changed, 270 insertions(+), 17 deletions(-)
 create mode 100644 src/views/system/dept/components/DeptModal.vue

diff --git a/src/views/system/dept/components/DeptModal.vue b/src/views/system/dept/components/DeptModal.vue
new file mode 100644
index 0000000..d610d81
--- /dev/null
+++ b/src/views/system/dept/components/DeptModal.vue
@@ -0,0 +1,249 @@
+<template>
+  <Modal
+    :options="getModalOptions"
+    :on-positive-click="handleConfirm"
+    :on-negative-click="handleClose"
+    :on-close="handleClose"
+  >
+    <template #Context>
+      <n-form
+        ref="formRef"
+        :model="form"
+        label-placement="left"
+        :rules="rules"
+        :on-positive-click="handleConfirm"
+        :on-negative-click="handleClose"
+      >
+        <n-form-item
+          label="头像:"
+          path="avatar"
+        >
+          <uploadImage
+            :options="{
+              max:1,
+              action: '/upload/uploadImage/demo',
+            }"
+          />
+        </n-form-item>
+        <n-form-item label="用户编号:" path="code">
+          <n-input
+            v-model:value="form.code"
+            clearable
+            :maxlength="20"
+            placeholder="请输入用户编号"
+          />
+        </n-form-item>
+        <n-form-item label="用户账号:" path="username">
+          <n-input
+            v-model:value="form.username"
+            clearable
+            :maxlength="20"
+            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="realname">
+          <n-input
+            v-model:value="form.realname"
+            clearable
+            :maxlength="20"
+            placeholder="请输入用户姓名"
+          />
+        </n-form-item>
+        <n-form-item label="所属部门:" path="deptId">
+          <n-select
+            v-model:value="form.deptId"
+            :options="deptOptions"
+            placeholder="请选择所属部门"
+          />
+        </n-form-item>
+        <n-form-item label="角色:" path="roleIds">
+          <n-select
+            v-model:value="form.roleIds"
+            clearable
+            :multiple="true"
+            :options="rolesOptions"
+            placeholder="请选择角色"
+          />
+        </n-form-item>
+        <n-form-item label="状态" path="status">
+          <n-radio-group
+            v-model:value="form.status"
+          >
+            <n-radio :value="1">正常</n-radio>
+            <n-radio :value="2">禁用</n-radio>
+          </n-radio-group>
+        </n-form-item>
+        <n-form-item
+          label="备注:"
+        >
+          <n-input
+            v-model:value="form.note"
+            type="textarea"
+            :rows="3"
+            :maxlength="200"
+            placeholder="请输入备注"
+          />
+        </n-form-item>
+      </n-form>
+    </template>
+  </Modal>
+</template>
+
+<script>
+import { defineComponent, computed, onMounted, reactive, toRefs } from 'vue'
+import Modal from '@/components/Modal/index.vue'
+import uploadImage from '@/components/ImgUpload/index.vue'
+import { getDeptAll } from '@/api/system/dept/index'
+import { getRoleAll } from '@/api/system/role/index'
+import { addUser, editUser } from '@/api/system/user/index'
+import { dataToSelect } from '@/utils/handleData.js'
+export default defineComponent({
+  name: 'UserModal',
+  components: { Modal, uploadImage },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    row: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  emits: {
+    'update:visible': null,
+    'done': null
+  },
+  setup(props, { emit }) {
+    const data = reactive({
+      form: {
+        avatar: '/images/user/20211011/20211011151447698.jpg',
+        code: '',
+        deptId: null,
+        username: '',
+        realname: '',
+        password: '',
+        roleIds: [],
+        status: 1,
+        note: ''
+
+      },
+      deptOptions: [],
+      rolesOptions: [],
+      rules: {
+        avatar: [
+          { required: true, message: '请选择头像', type: 'string', trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '请输入编号', trigger: 'blur' }
+        ],
+        realname: [
+          { required: true, message: '请输入用户姓名', type: 'string', trigger: 'blur' }
+        ],
+        deptId: [
+          { required: true, message: '请选择部门', type: 'number', trigger: 'blur' }
+        ],
+        status: [
+          { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
+        ],
+        roleIds: [
+          { required: true, message: '请选择角色', type: 'array', trigger: 'blur' }
+        ],
+        username: [
+          { required: true, message: '请输入用户账号', type: 'string', trigger: 'blur' }
+        ]
+      }
+    })
+    const getModalOptions = computed(() => {
+      return {
+        title: Object.keys(props.row).length === 0 ? '添加用户' : '编辑用户',
+        show: props.visible,
+        form: Object.assign(data.form, props.row),
+        negativeText: '取消',
+        positiveText: '确认'
+      }
+    })
+
+    /* 关闭弹窗 */
+    const handleClose = () => {
+      emit('update:visible', false)
+    }
+
+    // 获取部门列表
+    async function getDeptOptions() {
+      const res = await getDeptAll()
+      data.deptOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
+    }
+
+    // 获取角色列表
+    async function getRoleOptions() {
+      const res = await getRoleAll()
+      data.rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
+    }
+
+    onMounted(() => {
+      getDeptOptions()
+      getRoleOptions()
+    })
+
+    // 上传文件
+    const handleUpload = ({ file }) => {
+      console.log(file)
+      // data.form.avatar = file.url
+    }
+
+    return {
+      ...toRefs(data),
+      getModalOptions,
+      handleClose,
+      handleUpload
+    }
+  },
+  methods: {
+    // 表单提交
+    handleConfirm() {
+      const type = Object.keys(this.row).length === 0 ? 'add' : 'edit'
+      this.$refs.formRef.validate((errors) => {
+        if (!errors) {
+          if (type === 'add') {
+            addUser(this.form).then(res => {
+              if (res.code === 0) {
+                this.handleClose()
+                this.$emit('done')
+                $message.success(res.msg)
+              } else {
+                $message.error(res.msg)
+              }
+            }).catch(e => {
+              console.log(e)
+            })
+          } else if (type === 'edit') {
+            editUser(this.form).then(res => {
+              if (res.code === 0) {
+                this.handleClose()
+                this.$emit('done')
+                $message.success(res.msg)
+              } else {
+                $message.error(res.msg)
+              }
+            })
+          }
+        }
+      })
+    }
+  }
+})
+</script>
+<style scoped lang='scss'>
+</style>
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index b1a85cb..4a7968d 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -12,8 +12,7 @@
         scroll-x="1200"
       >
         <template #tableTitle>
-          <n-button type="primary"> 新建 </n-button>
-          <n-button type="primary"> 删除 </n-button>
+          <n-button type="primary" @click="handleModal"> 新建 </n-button>
         </template>
       </data-table>
     </n-card>
@@ -23,7 +22,7 @@
 <script>
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
-import { getDeptList } from '@/api/system/index.js'
+import { getDeptList } from '@/api/system/dept/index.js'
 import { h, onMounted, unref } from 'vue'
 import { reactive } from 'vue'
 export default {
diff --git a/src/views/system/role/components/ConfigModal.vue b/src/views/system/role/components/ConfigModal.vue
index 047c783..247627f 100644
--- a/src/views/system/role/components/ConfigModal.vue
+++ b/src/views/system/role/components/ConfigModal.vue
@@ -23,7 +23,6 @@
 <script>
 import { defineComponent, computed, onBeforeMount, reactive, toRefs } from 'vue'
 import { getRolePermission, savePermission } from '@/api/system/role/index'
-import { getMenu } from '@/api/system/menu/index'
 import Modal from '@/components/Modal/index.vue'
 import { toTreeData } from '@/utils/handleData.js'
 export default defineComponent({
@@ -53,37 +52,32 @@ export default defineComponent({
       return {
         title: '权限分配',
         show: props.visible,
-        form: Object.assign(data.form, props.row),
         negativeText: '取消',
         positiveText: '确认'
       }
     })
     onBeforeMount(() => {
       getMenuByRoleId()
-      getMenuAllData()
     })
 
     // 获取当前角色的权限菜单列表
     async function getMenuByRoleId() {
       const res = await getRolePermission(props.row.id)
+      data.allTreeData = toTreeData(res.data, 'id', 'pid', 'children')
       const checkedArr = res.data
       if (checkedArr.length) {
         checkedArr.forEach((item) => {
-          data.checkedTreeData.push(item.id)
+          if (item.checked) {
+            data.checkedTreeData.push(item.id)
+          }
         })
       }
       data.menuIds = data.checkedTreeData
     }
 
-    // 获取全部菜单数据
-    async function getMenuAllData() {
-      const res = await getMenu()
-      data.allTreeData = toTreeData(res.data, 'id', 'pid', 'children')
-    }
-
     // 勾选节点
-    function handleCheckTree(keys, options) {
-      console.log(keys, options)
+    function handleCheckTree(keys) {
+      data.menuIds = keys
     }
 
     /* 关闭弹窗 */
@@ -101,7 +95,18 @@ export default defineComponent({
   methods: {
     // 提交
     handleConfirm() {
-      console.log(this.checkedTreeData)
+      console.log(this.menuIds, this.checkedTreeData)
+      savePermission({ roleId: this.row.id, menuIds: this.menuIds }).then(res => {
+        if (res.code === 0) {
+          this.handleClose()
+          this.$emit('done')
+          $message.success(res.msg)
+        } else {
+          $message.error(res.msg)
+        }
+      }).catch(e => {
+        console.log(e)
+      })
     }
   }
 })
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 0018abc..0af4106 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -201,7 +201,7 @@ export default {
       return await getUserList(_params)
     }
 
-    // 新增用户
+    // 新增
     function handleModal() {
       data.rowData = {}
       data.modalShow = true

From 25bade764411f3748e641020bd7828ce7a7a743f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E8=8F=B2?= <1622041228@qq.com>
Date: Fri, 27 May 2022 15:05:48 +0800
Subject: [PATCH 10/14] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=A2=9E=E5=88=A0=E6=94=B9=E6=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/menu/index.js                  |   4 +-
 .../DataTable/tools/useDataSource.js          |   5 +-
 src/views/system/dept/index.vue               |  61 +++---
 src/views/system/dept/info.js                 |  30 +++
 .../system/menu/components/MenuModal.vue      | 152 ++++++-------
 src/views/system/menu/index.vue               | 200 +++++++++++++-----
 src/views/system/menu/info.js                 |  12 ++
 src/views/system/role/info.js                 |  18 --
 .../system/user/components/UserModal.vue      |   2 +
 src/views/system/user/index.vue               |   1 -
 10 files changed, 316 insertions(+), 169 deletions(-)
 create mode 100644 src/views/system/dept/info.js
 create mode 100644 src/views/system/menu/info.js

diff --git a/src/api/system/menu/index.js b/src/api/system/menu/index.js
index e11607b..350e803 100644
--- a/src/api/system/menu/index.js
+++ b/src/api/system/menu/index.js
@@ -1,7 +1,7 @@
 import { defAxios as request } from '@/utils/http'
 /**
- * 获取菜单分页数据接口
- * @returns 菜单分页数据
+ * 获取菜单管理数据接口
+ * @returns 菜单数据
  */
 export function getMenuList(params) {
   return request({
diff --git a/src/components/DataTable/tools/useDataSource.js b/src/components/DataTable/tools/useDataSource.js
index c0ed56a..1e792a8 100644
--- a/src/components/DataTable/tools/useDataSource.js
+++ b/src/components/DataTable/tools/useDataSource.js
@@ -44,7 +44,7 @@ export function useDataSource(propsRef, { getPaginationInfo, setPagination, setL
         }
       }
       // 处理数据结构
-      const resultInfo = res[listField] ? res[listField] : []
+      const resultInfo = res[listField] ? res[listField] : res
       dataSourceRef.value = dataType === 'tree' ? dealTree(resultInfo) : resultInfo
       setPagination({
         [pageField]: currentPage,
@@ -74,7 +74,7 @@ export function useDataSource(propsRef, { getPaginationInfo, setPagination, setL
    * @returns 返回树形结构数据
    */
   function dealTree(info) {
-    const tree = toTreeData(info.data, 'id', 'pid', 'children')
+    const tree = toTreeData(info, 'id', 'pid', 'children')
     return tree
   }
 
@@ -106,7 +106,6 @@ export function useDataSource(propsRef, { getPaginationInfo, setPagination, setL
   }
 
   async function reFetch(opt) {
-    console.log('opt', opt)
     const { paginationSetting } = unref(propsRef)
     const pageField = paginationSetting.pageField
     const sizeField = paginationSetting.sizeField
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 4a7968d..6be2d4a 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <n-card>
+      <headSearch :info="info" @search="handleSearch" />
       <data-table
-        :columns="data.columns"
-        :data="data.data"
-        :pagination="data.pagination"
+        :columns="columns"
+        :data="data"
         :request="loadDataTable"
         :row-key="(row) => row.id"
         data-type="tree"
@@ -17,17 +17,26 @@
       </data-table>
     </n-card>
   </div>
+  <!-- 新增、编辑弹窗 -->
+  <dept-modal
+    v-if="modalShow"
+    v-model:visible="modalShow"
+    :row="rowData"
+    @done="handleSearch"
+  />
 </template>
 
 <script>
+import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
-import { getDeptList } from '@/api/system/dept/index.js'
-import { h, onMounted, unref } from 'vue'
-import { reactive } from 'vue'
+import { getDeptList, deleteDept } from '@/api/system/dept/index.js'
+import { h, unref, toRefs, ref, reactive } from 'vue'
+import DeptModal from './components/DeptModal.vue'
+import info from './info.js'
 export default {
   name: 'MenuPage',
-  components: { dataTable },
+  components: { dataTable, DeptModal, headSearch},
   setup() {
     const data = reactive({
       columns: [
@@ -108,30 +117,36 @@ export default {
         }
       ],
       data: [],
-      pagination: {
-        pageSize: 10
-      }
+      info: ref(info),
+      modalShow: false,
+      rowData: {}
     })
 
+    // 新增
+    function handleModal() {
+      data.modalShow = true
+    }
+
+    // 编辑
     function play(row) {
-      console.log(row)
+      data.rowData = row
+      data.modalShow = true
     }
 
     /**
      * @description: 获取部门数据并做树形结构处理
      * @return {*}
      */
-    async function fetchList() {
-      const params = {
-        page: 1,
-        limit: 10
+    const params = ref({})
+
+    const tableRef = ref()
+
+    function handleSearch(data) {
+      params.value = {
+        ...data
       }
-      const res = await getDeptList(params)
-      data.data = res.data
+      tableRef.value.reFetch({ ...unref(params) })
     }
-    const params = reactive({
-      name: 'xiaoMa'
-    })
 
     const loadDataTable = async(res) => {
       const _params = {
@@ -141,11 +156,7 @@ export default {
       return await getDeptList(_params)
     }
 
-    onMounted(() => {
-      fetchList()
-    })
-
-    return { data, loadDataTable }
+    return { ...toRefs(data), loadDataTable, handleSearch, handleModal }
   }
 }
 </script>
diff --git a/src/views/system/dept/info.js b/src/views/system/dept/info.js
new file mode 100644
index 0000000..42342d3
--- /dev/null
+++ b/src/views/system/dept/info.js
@@ -0,0 +1,30 @@
+const data = [
+  {
+    label: '部门名称',
+    key: 'name',
+    props: {
+      placeholder: '请输入部门名称'
+    }
+  }
+  // {
+  //   label: '角色类型',
+  //   type: 'select',
+  //   key: 'op',
+  //   props: {
+  //     options: [{
+  //       label: 11, value: 1
+  //     }]
+  //   }
+  // },
+  // {
+  //   label: '角色类型',
+  //   type: 'date',
+  //   key: 'date',
+  //   props: {
+  //     type: 'date'
+  //   }
+  // }
+]
+
+export default data
+
diff --git a/src/views/system/menu/components/MenuModal.vue b/src/views/system/menu/components/MenuModal.vue
index bf4296e..554a607 100644
--- a/src/views/system/menu/components/MenuModal.vue
+++ b/src/views/system/menu/components/MenuModal.vue
@@ -6,12 +6,12 @@
     :on-negative-click="handleClose"
   >
     <template #Context>
-      <n-form ref="formRef" :model="menuForm" :rules="menuRules" require-mark-placement="left" :label-width="80" label-placement="left">
+      <n-form ref="formRef" :model="form" :rules="rules" require-mark-placement="left" :label-width="80" label-placement="left">
         <n-grid x-gap="12" :cols="2">
           <n-gi>
             <n-form-item label="上级菜单" path="pid">
               <n-select
-                v-model:value="menuForm.pid"
+                v-model:value="form.pid"
                 placeholder="请选择上级菜单"
                 :options="getMenuList"
               />
@@ -19,8 +19,8 @@
           </n-gi>
           <n-gi>
             <n-form-item label="菜单类型" path="type">
-              <n-radio-group v-model:value="menuForm.type" name="type">
-                <n-radio v-for="item in typeOptions" :key="`type_${item.key}`" :value="item.key">
+              <n-radio-group v-model:value="form.type" name="type">
+                <n-radio v-for="item in typeOptions" :key="item.key" :value="item.key">
                   {{ item.label }}
                 </n-radio>
               </n-radio-group>
@@ -28,13 +28,13 @@
           </n-gi>
           <n-gi>
             <n-form-item label="菜单名称" path="title">
-              <n-input v-model:value="menuForm.title" placeholder="请输入菜单名称" />
+              <n-input v-model:value="form.title" placeholder="请输入菜单名称" />
             </n-form-item>
           </n-gi>
           <n-gi>
             <n-form-item label="打开方式" path="target">
-              <n-radio-group v-model:value="menuForm.target" name="target">
-                <n-radio v-for="item in openOptions" :key="`target_${item.key}`" :value="item.key">
+              <n-radio-group v-model:value="form.target" name="target">
+                <n-radio v-for="item in openOptions" :key="item.key" :value="item.key">
                   {{ item.label }}
                 </n-radio>
               </n-radio-group>
@@ -42,33 +42,33 @@
           </n-gi>
           <n-gi>
             <n-form-item label="菜单图标" path="icon">
-              <n-input v-model:value="menuForm.icon" placeholder="请选择菜单图标" />
+              <n-input v-model:value="form.icon" :disabled="form.type === 1" placeholder="请选择菜单图标" />
             </n-form-item>
           </n-gi>
           <n-gi>
             <n-form-item label="权限标识" path="permission">
-              <n-input v-model:value="menuForm.permission" placeholder="请输入权限标识" />
+              <n-input v-model:value="form.permission" :disabled="form.type === 0" placeholder="请输入权限标识" />
             </n-form-item>
           </n-gi>
           <n-gi>
             <n-form-item label="路由地址" path="path">
-              <n-input v-model:value="menuForm.path" placeholder="请输入路由地址" />
+              <n-input v-model:value="form.path" :disabled="form.type === 1" placeholder="请输入路由地址" />
             </n-form-item>
           </n-gi>
           <n-gi>
             <n-form-item label="排序号" path="sort">
-              <n-input v-model:value="menuForm.sort" placeholder="请输入排序号" />
+              <n-input-number v-model:value="form.sort" placeholder="请输入排序号" />
             </n-form-item>
           </n-gi>
           <n-gi>
             <n-form-item label="组件路径" path="component">
-              <n-input v-model:value="menuForm.component" placeholder="请输入组件路径" />
+              <n-input v-model:value="form.component" :disabled="form.type === 1" placeholder="请输入组件路径" />
             </n-form-item>
           </n-gi>
           <n-gi>
             <n-form-item label="是否可见" path="hide">
-              <n-radio-group v-model:value="menuForm.hide" name="hide">
-                <n-radio v-for="item in visibleOptions" :key="`hide_${item.key}`" :value="item.key">
+              <n-radio-group v-model:value="form.hide" name="hide">
+                <n-radio v-for="item in visibleOptions" :key="item.key" :value="item.key">
                   {{ item.label }}
                 </n-radio>
               </n-radio-group>
@@ -76,8 +76,8 @@
           </n-gi>
           <n-gi>
             <n-form-item label="菜单状态" path="status">
-              <n-radio-group v-model:value="menuForm.status" name="status">
-                <n-radio v-for="item in statusOptions" :key="`status_${item.key}`" :value="item.key">
+              <n-radio-group v-model:value="form.status" name="status">
+                <n-radio v-for="item in statusOptions" :key="item.key" :value="item.key">
                   {{ item.label }}
                 </n-radio>
               </n-radio-group>
@@ -91,9 +91,9 @@
 </template>
 
 <script>
-import { defineComponent, computed, reactive, toRefs, ref } from 'vue'
+import { defineComponent, computed, reactive, toRefs } from 'vue'
 import Modal from '@/components/Modal/index.vue'
-import { addMenu } from '@/api/system/menu/index.js'
+import { addMenu, editMenu } from '@/api/system/menu/index.js'
 export default defineComponent({
   name: 'MenuModal',
   components: { Modal },
@@ -114,59 +114,48 @@ export default defineComponent({
     }
   },
   emits: {
-    'update:visible': null
+    'update:visible': null,
+    'done': null
   },
   setup(props, { emit }) {
     const data = reactive({
-      menuForm: {
-        pid: null,
-        type: '0',
-        title: '',
-        target: '0',
-        icon: '',
-        permission: '',
-        path: '',
-        sort: '',
-        component: '',
-        hide: '0',
-        status: '1'
-      },
-      menuRules: {
-        title: {
+      form: {},
+      rules: {
+        title: [{
           required: true,
           message: '请输入菜单名称',
-          trigger: ['blur']
-        },
-        sort: {
+          trigger: 'blur'
+        }],
+        sort: [{
           required: true,
           message: '请输入排序号',
-          trigger: ['blur']
-        }
+          trigger: 'blur'
+        }]
       },
       typeOptions: [
-        { key: '0', label: '菜单' },
-        { key: '1', label: '按钮' }
+        { key: 0, label: '菜单' },
+        { key: 1, label: '按钮' }
       ],
       openOptions: [
-        { key: '0', label: '组件' },
-        { key: '1', label: '内链' },
-        { key: '2', label: '外链' }
+        { key: '1', label: '内部' },
+        { key: '2', label: '外部' }
       ],
       visibleOptions: [
-        { key: '0', label: '可见' },
-        { key: '1', label: '不可见' }
+        { key: 0, label: '可见' },
+        { key: 1, label: '不可见' }
       ],
       statusOptions: [
-        { key: '1', label: '在用' },
-        { key: '2', label: '停用' }
-      ]
+        { key: 1, label: '在用' },
+        { key: 2, label: '停用' }
+      ],
+      menuList: []
     })
 
     const getMenuList = computed(() => {
       const list = props.menuList.map((item) => {
         const menu = {
           label: item.title,
-          value: item.pid
+          value: item.id
         }
         return menu
       })
@@ -174,9 +163,14 @@ export default defineComponent({
     })
 
     const getModalOptions = computed(() => {
+      const row = props.data
+      if (props.data.pid === 0) {
+        row.pid = null
+      }
       return {
         show: props.visible,
-        title: props.data ? '修改菜单' : '新建菜单',
+        title: props.data.title ? '修改菜单' : '添加菜单',
+        form: Object.assign(data.form, row),
         width: 700,
         negativeText: '取消',
         positiveText: '确认'
@@ -187,31 +181,47 @@ export default defineComponent({
     const handleClose = () => {
       emit('update:visible', false)
     }
-    const formRef = ref()
-    const handleConfirm = () => {
-      formRef.value?.validate((errors) => {
-        if (!errors) {
-          const params = {
-            ...data.menuForm
-          }
-          addMenu(params)
-            .then(res => {
-              handleClose()
-            })
-        } else {
-          $message.error('清先完成校验')
-        }
-      })
-      return false
-    }
 
     return {
       ...toRefs(data),
-      formRef,
       getMenuList,
       getModalOptions,
-      handleClose,
-      handleConfirm
+      handleClose
+    }
+  },
+  methods: {
+    // 表单提交
+    handleConfirm() {
+      const type = this.data.title ? 'add' : 'edit'
+      this.$refs.formRef.validate((errors) => {
+        if (!errors) {
+          if (type === 'add') {
+            addMenu(this.form).then(res => {
+              if (res.code === 0) {
+                this.handleClose()
+                this.$emit('done')
+                $message.success(res.msg)
+              } else {
+                $message.error(res.msg)
+              }
+            }).catch(e => {
+              console.log(e)
+            })
+          } else if (type === 'edit') {
+            editMenu(this.form).then(res => {
+              if (res.code === 0) {
+                this.handleClose()
+                this.$emit('done')
+                $message.success(res.msg)
+              } else {
+                $message.error(res.msg)
+              }
+            })
+          }
+        } else {
+          $message.error('请完善必填信息')
+        }
+      })
     }
   }
 })
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index fdab71f..7a4ce6b 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,29 +1,41 @@
 <template>
   <div>
     <n-card>
-      <data-table :columns="data.columns" :pagination="false" :data="data.data" size="large" @fetch-success="getFechData">
+      <headSearch :info="info" @search="handleSearch" />
+      <data-table
+        ref="tableRef"
+        :columns="columns"
+        :pagination="false"
+        data-type="tree"
+        :request="loadDataTable"
+      >
         <template #tableTitle>
-          <n-button type="primary" @click="handlleRoleAdd">
-            添加菜单
-          </n-button>
+          <n-button type="primary" @click="handlleRoleAdd"> 添加菜单 </n-button>
         </template>
       </data-table>
     </n-card>
   </div>
 
-  <RoleModal v-model:visible="data.modalShow" :data="data.selectRow" :menu-list="data.data" />
+  <MenuModal
+    v-model:visible="modalShow"
+    :data="rowData"
+    :menu-list="menuList"
+    @done="handleSearch"
+  />
 </template>
 
 <script>
+import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
-import RoleModal from './components/MenuModal.vue'
+import MenuModal from './components/MenuModal.vue'
+import TableTags from '@/components/DataTable/tools/Tags.vue'
 import Action from '@/components/DataTable/tools/Action.vue'
-import { getMenuList } from '@/api/system/index.js'
-import { h, onMounted } from 'vue'
-import { reactive } from 'vue'
+import { getMenu, getMenuList, deleteMenu } from '@/api/system/menu/index.js'
+import { h, ref, unref, reactive, toRefs, onMounted } from 'vue'
+import info from './info.js'
 export default {
   name: 'MenuPage',
-  components: { dataTable, RoleModal },
+  components: { dataTable, MenuModal, headSearch },
   setup() {
     const data = reactive({
       columns: [
@@ -37,13 +49,22 @@ export default {
           title: '菜单类型',
           key: 'type',
           align: 'center',
-          width: 100
-        },
-        {
-          title: '请求方式',
-          key: 'method',
-          align: 'center',
-          width: 100
+          width: 100,
+          render(row) {
+            return h(TableTags, {
+              data: row.type,
+              filters: [
+                {
+                  key: 0,
+                  label: '菜单'
+                },
+                {
+                  key: 1,
+                  label: '节点'
+                }
+              ]
+            })
+          }
         },
         {
           title: '路由地址',
@@ -57,17 +78,26 @@ export default {
           align: 'center',
           width: 200
         },
-        {
-          title: '权限标识',
-          key: 'permission',
-          align: 'center',
-          width: 200
-        },
         {
           title: '状态',
           key: 'status',
           align: 'center',
-          width: 100
+          width: 100,
+          render(row) {
+            return h(TableTags, {
+              data: row.status,
+              filters: [
+                {
+                  key: 1,
+                  label: '在用'
+                },
+                {
+                  key: 2,
+                  label: '停用'
+                }
+              ]
+            })
+          }
         },
         {
           title: '排序',
@@ -76,10 +106,25 @@ export default {
           width: 100
         },
         {
-          title: '可见',
+          title: '是否可见',
           key: 'hide',
           align: 'center',
-          width: 100
+          width: 100,
+          render(row) {
+            return h(TableTags, {
+              data: row.hide,
+              filters: [
+                {
+                  key: 1,
+                  label: '可见'
+                },
+                {
+                  key: 2,
+                  label: '不可见'
+                }
+              ]
+            })
+          }
         },
         {
           title: '创建时间',
@@ -100,18 +145,29 @@ export default {
                   type: 'button',
                   props: {
                     type: 'primary',
-                    onClick: play.bind(null, row)
+                    onClick: add.bind(null, row)
                   },
                   auth: 'basic_list'
                 },
                 {
                   label: '修改',
+                  type: 'button',
+                  props: {
+                    type: 'primary',
+                    onClick: play.bind(null, row)
+                  },
                   auth: 'basic_list'
                 },
                 {
                   label: '删除',
                   type: 'popconfirm',
-                  auth: 'basic_list'
+                  auth: 'basic_list',
+                  tip: '确定删除这条数据吗?',
+                  props: {
+                    negativeText: '取消',
+                    positiveText: '确认',
+                    onPositiveClick: deleteSingle.bind(null, row.id)
+                  }
                 }
               ],
               align: 'center'
@@ -119,48 +175,94 @@ export default {
           }
         }
       ],
-      data: [],
+      info: ref(info),
       modalShow: false,
-      selectRow: null
+      menuList: [],
+      rowData: {
+        status: 1,
+        type: 0,
+        hide: 0
+      }
     })
 
-    function play(row) {
-      console.log(row)
+    // 获取全部菜单信息
+    async function getMenuAll() {
+      const list = await getMenu()
+      data.menuList = list.data
     }
+    onMounted(() => {
+      getMenuAll()
+    })
 
     /**
      * @description: 获取菜单数据
      * @return {*}
      */
-    async function fetchList() {
-      const res = await getMenuList()
-      data.data = res.data
+    const params = ref({})
+    const tableRef = ref()
+
+    function handleSearch(data) {
+      params.value = {
+        ...data
+      }
+      tableRef.value.reFetch({ ...unref(params) })
     }
+
+    const loadDataTable = async(res) => {
+      const _params = {
+        ...unref(params),
+        ...res
+      }
+      return await getMenuList(_params)
+    }
+
+    // 打开新增弹框
     function handlleRoleAdd() {
       data.modalShow = true
+      data.rowData = {}
+    }
+    // 行内新增
+    function add(row) {
+      data.modalShow = true
+      data.rowData = {}
+      data.rowData.pid = row.id
+    }
+    // 编辑
+    function play(row) {
+      data.rowData = row
+      data.modalShow = true
+    }
+    // 单个删除数据
+    function deleteSingle(id) {
+      deleteData(id)
     }
 
-    /**
-     * @description: 获取表单数据
-     * @param {*} data
-     * @return {*}
-     */
-    function getFechData(data) {
-
+    // 删除方法
+    function deleteData(id) {
+      deleteMenu(id)
+        .then((res) => {
+          if (res.code === 0) {
+            handleSearch({})
+            $message.success(res.msg)
+          } else {
+            $message.error(res.msg)
+          }
+        })
+        .catch((e) => {
+          console.log(e)
+        })
     }
 
-    onMounted(() => {
-      fetchList()
-    })
-
     return {
-      data,
+      ...toRefs(data),
+      tableRef,
+      loadDataTable,
+      handleSearch,
       handlleRoleAdd,
-      getFechData
+      deleteSingle
     }
   }
 }
-
 </script>
 <style scoped lang='scss'>
 </style>
diff --git a/src/views/system/menu/info.js b/src/views/system/menu/info.js
new file mode 100644
index 0000000..94939bf
--- /dev/null
+++ b/src/views/system/menu/info.js
@@ -0,0 +1,12 @@
+const data = [
+  {
+    label: '菜单名称',
+    key: 'title',
+    props: {
+      placeholder: '请输入菜单名称'
+    }
+  }
+]
+
+export default data
+
diff --git a/src/views/system/role/info.js b/src/views/system/role/info.js
index 211910b..d80fb79 100644
--- a/src/views/system/role/info.js
+++ b/src/views/system/role/info.js
@@ -6,24 +6,6 @@ const data = [
       placeholder: '请输入角色名称'
     }
   }
-  // {
-  //   label: '角色类型',
-  //   type: 'select',
-  //   key: 'op',
-  //   props: {
-  //     options: [{
-  //       label: 11, value: 1
-  //     }]
-  //   }
-  // },
-  // {
-  //   label: '角色类型',
-  //   type: 'date',
-  //   key: 'date',
-  //   props: {
-  //     type: 'date'
-  //   }
-  // }
 ]
 
 export default data
diff --git a/src/views/system/user/components/UserModal.vue b/src/views/system/user/components/UserModal.vue
index d610d81..2278a5b 100644
--- a/src/views/system/user/components/UserModal.vue
+++ b/src/views/system/user/components/UserModal.vue
@@ -239,6 +239,8 @@ export default defineComponent({
               }
             })
           }
+        } else {
+          $message.error('请完善必填信息')
         }
       })
     }
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 0af4106..ee1330d 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -268,7 +268,6 @@ export default {
     }
 
     return {
-      data,
       loadDataTable,
       handleModal,
       ...toRefs(data),

From bcd60063f440e295e5590b73cd775612fd780115 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E8=8F=B2?= <1622041228@qq.com>
Date: Fri, 27 May 2022 16:02:02 +0800
Subject: [PATCH 11/14] =?UTF-8?q?=E9=83=A8=E9=97=A8=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=A2=9E=E5=88=A0=E6=94=B9=E6=9F=A5=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/dept/index.js                  |   2 +-
 .../system/dept/components/DeptModal.vue      | 151 ++++++------------
 src/views/system/dept/index.vue               | 108 +++++++++----
 .../system/menu/components/MenuModal.vue      |   5 +-
 src/views/system/menu/index.vue               |   6 +-
 5 files changed, 129 insertions(+), 143 deletions(-)

diff --git a/src/api/system/dept/index.js b/src/api/system/dept/index.js
index f9d3ff1..8e7dd20 100644
--- a/src/api/system/dept/index.js
+++ b/src/api/system/dept/index.js
@@ -1,6 +1,6 @@
 import { defAxios as request } from '@/utils/http'
 /**
- * 获取部门分页数据接口
+ * 获取部门管理数据接口
  * @returns 部门分页
  */
 export function getDeptList(params) {
diff --git a/src/views/system/dept/components/DeptModal.vue b/src/views/system/dept/components/DeptModal.vue
index d610d81..7b10d78 100644
--- a/src/views/system/dept/components/DeptModal.vue
+++ b/src/views/system/dept/components/DeptModal.vue
@@ -14,75 +14,39 @@
         :on-positive-click="handleConfirm"
         :on-negative-click="handleClose"
       >
-        <n-form-item
-          label="头像:"
-          path="avatar"
-        >
-          <uploadImage
-            :options="{
-              max:1,
-              action: '/upload/uploadImage/demo',
-            }"
-          />
-        </n-form-item>
-        <n-form-item label="用户编号:" path="code">
+        <n-form-item label="部门编号:" path="code">
           <n-input
             v-model:value="form.code"
             clearable
             :maxlength="20"
-            placeholder="请输入用户编号"
+            placeholder="请输入部门编号"
           />
         </n-form-item>
-        <n-form-item label="用户账号:" path="username">
+        <n-form-item label="部门名称:" path="name">
           <n-input
-            v-model:value="form.username"
+            v-model:value="form.name"
             clearable
             :maxlength="20"
-            placeholder="请输入用户账号"
+            placeholder="请输入部门名称"
           />
         </n-form-item>
-        <n-form-item
-          label="登录密码:"
-          path="password"
-        >
+        <n-form-item label="部门全称:" path="fullname">
           <n-input
-            v-model:value="form.password"
-            type="password"
-            :maxlength="20"
-            placeholder="请输入登录密码"
-          />
-        </n-form-item>
-        <n-form-item label="用户姓名:" path="realname">
-          <n-input
-            v-model:value="form.realname"
+            v-model:value="form.fullname"
             clearable
             :maxlength="20"
-            placeholder="请输入用户姓名"
+            placeholder="请输入部门全称"
           />
         </n-form-item>
-        <n-form-item label="所属部门:" path="deptId">
+        <n-form-item label="所属部门:" path="pid">
           <n-select
-            v-model:value="form.deptId"
-            :options="deptOptions"
+            v-model:value="form.pid"
+            :options="getDeptList"
             placeholder="请选择所属部门"
           />
         </n-form-item>
-        <n-form-item label="角色:" path="roleIds">
-          <n-select
-            v-model:value="form.roleIds"
-            clearable
-            :multiple="true"
-            :options="rolesOptions"
-            placeholder="请选择角色"
-          />
-        </n-form-item>
-        <n-form-item label="状态" path="status">
-          <n-radio-group
-            v-model:value="form.status"
-          >
-            <n-radio :value="1">正常</n-radio>
-            <n-radio :value="2">禁用</n-radio>
-          </n-radio-group>
+        <n-form-item label="排序号" path="sort">
+          <n-input-number v-model:value="form.sort" placeholder="请输入排序号" />
         </n-form-item>
         <n-form-item
           label="备注:"
@@ -101,16 +65,12 @@
 </template>
 
 <script>
-import { defineComponent, computed, onMounted, reactive, toRefs } from 'vue'
+import { defineComponent, computed, reactive, toRefs } from 'vue'
 import Modal from '@/components/Modal/index.vue'
-import uploadImage from '@/components/ImgUpload/index.vue'
-import { getDeptAll } from '@/api/system/dept/index'
-import { getRoleAll } from '@/api/system/role/index'
-import { addUser, editUser } from '@/api/system/user/index'
-import { dataToSelect } from '@/utils/handleData.js'
+import { addDept, editDept } from '@/api/system/dept/index'
 export default defineComponent({
   name: 'UserModal',
-  components: { Modal, uploadImage },
+  components: { Modal },
   props: {
     visible: {
       type: Boolean,
@@ -119,6 +79,10 @@ export default defineComponent({
     row: {
       type: Object,
       default: () => {}
+    },
+    deptList: {
+      type: Array,
+      default: () => []
     }
   },
   emits: {
@@ -142,34 +106,38 @@ export default defineComponent({
       deptOptions: [],
       rolesOptions: [],
       rules: {
-        avatar: [
-          { required: true, message: '请选择头像', type: 'string', trigger: 'blur' }
-        ],
         code: [
-          { required: true, message: '请输入编号', trigger: 'blur' }
+          { required: true, message: '请输入部门编号', trigger: 'blur' }
         ],
-        realname: [
-          { required: true, message: '请输入用户姓名', type: 'string', trigger: 'blur' }
+        name: [
+          { required: true, message: '请输入部门名称', type: 'string', trigger: 'blur' }
         ],
-        deptId: [
-          { required: true, message: '请选择部门', type: 'number', trigger: 'blur' }
-        ],
-        status: [
-          { required: true, message: '请选择状态', type: 'number', trigger: 'blur' }
-        ],
-        roleIds: [
-          { required: true, message: '请选择角色', type: 'array', trigger: 'blur' }
-        ],
-        username: [
-          { required: true, message: '请输入用户账号', type: 'string', trigger: 'blur' }
+        sort: [
+          { required: true, type: 'number', message: '请输入排序号', trigger: 'blur' }
         ]
       }
     })
+    // 获取部门选项
+    const getDeptList = computed(() => {
+      const list = props.deptList.map((item) => {
+        const menu = {
+          label: item.name,
+          value: item.id
+        }
+        return menu
+      })
+      return list
+    })
+
     const getModalOptions = computed(() => {
+      const row = props.row
+      if (props.row.pid === 0) {
+        row.pid = null
+      }
       return {
-        title: Object.keys(props.row).length === 0 ? '添加用户' : '编辑用户',
+        title: props.row.name ? '编辑部门' : '添加部门',
         show: props.visible,
-        form: Object.assign(data.form, props.row),
+        form: Object.assign(data.form, row),
         negativeText: '取消',
         positiveText: '确认'
       }
@@ -180,44 +148,21 @@ export default defineComponent({
       emit('update:visible', false)
     }
 
-    // 获取部门列表
-    async function getDeptOptions() {
-      const res = await getDeptAll()
-      data.deptOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
-    }
-
-    // 获取角色列表
-    async function getRoleOptions() {
-      const res = await getRoleAll()
-      data.rolesOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
-    }
-
-    onMounted(() => {
-      getDeptOptions()
-      getRoleOptions()
-    })
-
-    // 上传文件
-    const handleUpload = ({ file }) => {
-      console.log(file)
-      // data.form.avatar = file.url
-    }
-
     return {
       ...toRefs(data),
+      getDeptList,
       getModalOptions,
-      handleClose,
-      handleUpload
+      handleClose
     }
   },
   methods: {
     // 表单提交
     handleConfirm() {
-      const type = Object.keys(this.row).length === 0 ? 'add' : 'edit'
+      const type = this.row.name ? 'edit' : 'add'
       this.$refs.formRef.validate((errors) => {
         if (!errors) {
           if (type === 'add') {
-            addUser(this.form).then(res => {
+            addDept(this.form).then(res => {
               if (res.code === 0) {
                 this.handleClose()
                 this.$emit('done')
@@ -229,7 +174,7 @@ export default defineComponent({
               console.log(e)
             })
           } else if (type === 'edit') {
-            editUser(this.form).then(res => {
+            editDept(this.form).then(res => {
               if (res.code === 0) {
                 this.handleClose()
                 this.$emit('done')
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 6be2d4a..5a8f06f 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -3,10 +3,10 @@
     <n-card>
       <headSearch :info="info" @search="handleSearch" />
       <data-table
+        ref="tableRef"
         :columns="columns"
-        :data="data"
         :request="loadDataTable"
-        :row-key="(row) => row.id"
+        :pagination="false"
         data-type="tree"
         size="large"
         scroll-x="1200"
@@ -22,6 +22,7 @@
     v-if="modalShow"
     v-model:visible="modalShow"
     :row="rowData"
+    :dept-list="deptList"
     @done="handleSearch"
   />
 </template>
@@ -30,13 +31,13 @@
 import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
-import { getDeptList, deleteDept } from '@/api/system/dept/index.js'
-import { h, unref, toRefs, ref, reactive } from 'vue'
+import { getDeptList, getDeptAll, deleteDept } from '@/api/system/dept/index.js'
+import { h, unref, toRefs, ref, reactive, onMounted } from 'vue'
 import DeptModal from './components/DeptModal.vue'
 import info from './info.js'
 export default {
   name: 'MenuPage',
-  components: { dataTable, DeptModal, headSearch},
+  components: { dataTable, DeptModal, headSearch },
   setup() {
     const data = reactive({
       columns: [
@@ -55,34 +56,22 @@ export default {
           key: 'fullname',
           align: 'center'
         },
-        {
-          title: '部门类型',
-          key: 'type',
-          align: 'center',
-          width: 100
-        },
         {
           title: '排序',
           key: 'sort',
           align: 'center'
         },
-        {
-          title: '备注',
-          key: 'note',
-          align: 'center',
-          width: 100
-        },
         {
           title: '创建时间',
           key: 'createTime',
           align: 'center',
-          width: 160
+          minWidth: 120
         },
         {
           title: '更新时间',
           key: 'updateTime',
           align: 'center',
-          width: 160
+          minWidth: 120
         },
         {
           title: '操作',
@@ -97,18 +86,29 @@ export default {
                   type: 'button',
                   props: {
                     type: 'primary',
-                    onClick: play.bind(null, row)
+                    onClick: add.bind(null, row)
                   },
                   auth: 'basic_list'
                 },
                 {
                   label: '修改',
+                  type: 'button',
+                  props: {
+                    type: 'primary',
+                    onClick: play.bind(null, row)
+                  },
                   auth: 'basic_list'
                 },
                 {
                   label: '删除',
                   type: 'popconfirm',
-                  auth: 'basic_list'
+                  auth: 'basic_list',
+                  tip: '确定删除这条数据吗?',
+                  props: {
+                    negativeText: '取消',
+                    positiveText: '确认',
+                    onPositiveClick: deleteSingle.bind(null, row.id)
+                  }
                 }
               ],
               align: 'center'
@@ -116,23 +116,24 @@ export default {
           }
         }
       ],
-      data: [],
       info: ref(info),
       modalShow: false,
-      rowData: {}
+      rowData: {
+        status: 1,
+        type: 0,
+        hide: 0
+      },
+      deptList: []
     })
 
-    // 新增
-    function handleModal() {
-      data.modalShow = true
+    // 获取全部菜单信息
+    async function getDept() {
+      const list = await getDeptAll()
+      data.deptList = list.data
     }
-
-    // 编辑
-    function play(row) {
-      data.rowData = row
-      data.modalShow = true
-    }
-
+    onMounted(() => {
+      getDept()
+    })
     /**
      * @description: 获取部门数据并做树形结构处理
      * @return {*}
@@ -156,7 +157,46 @@ export default {
       return await getDeptList(_params)
     }
 
-    return { ...toRefs(data), loadDataTable, handleSearch, handleModal }
+    // 新增
+    function handleModal() {
+      data.modalShow = true
+      data.rowData = {}
+    }
+    // 行内新增
+    function add(row) {
+      data.modalShow = true
+      data.rowData = {}
+      data.rowData.pid = row.id
+    }
+
+    // 编辑
+    function play(row) {
+      data.rowData = row
+      data.modalShow = true
+    }
+
+    // 单个删除数据
+    function deleteSingle(id) {
+      deleteData(id)
+    }
+
+    // 删除方法
+    function deleteData(id) {
+      deleteDept(id)
+        .then((res) => {
+          if (res.code === 0) {
+            handleSearch({})
+            $message.success(res.msg)
+          } else {
+            $message.error(res.msg)
+          }
+        })
+        .catch((e) => {
+          console.log(e)
+        })
+    }
+
+    return { ...toRefs(data), tableRef, loadDataTable, handleSearch, handleModal, deleteSingle }
   }
 }
 </script>
diff --git a/src/views/system/menu/components/MenuModal.vue b/src/views/system/menu/components/MenuModal.vue
index 554a607..41c5507 100644
--- a/src/views/system/menu/components/MenuModal.vue
+++ b/src/views/system/menu/components/MenuModal.vue
@@ -12,8 +12,8 @@
             <n-form-item label="上级菜单" path="pid">
               <n-select
                 v-model:value="form.pid"
-                placeholder="请选择上级菜单"
                 :options="getMenuList"
+                placeholder="请选择上级菜单"
               />
             </n-form-item>
           </n-gi>
@@ -128,6 +128,7 @@ export default defineComponent({
         }],
         sort: [{
           required: true,
+          type: 'number',
           message: '请输入排序号',
           trigger: 'blur'
         }]
@@ -192,7 +193,7 @@ export default defineComponent({
   methods: {
     // 表单提交
     handleConfirm() {
-      const type = this.data.title ? 'add' : 'edit'
+      const type = this.data.title ? 'edit' : 'add'
       this.$refs.formRef.validate((errors) => {
         if (!errors) {
           if (type === 'add') {
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 7a4ce6b..a706c23 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -10,7 +10,7 @@
         :request="loadDataTable"
       >
         <template #tableTitle>
-          <n-button type="primary" @click="handlleRoleAdd"> 添加菜单 </n-button>
+          <n-button type="primary" @click="handleModal"> 添加菜单 </n-button>
         </template>
       </data-table>
     </n-card>
@@ -217,7 +217,7 @@ export default {
     }
 
     // 打开新增弹框
-    function handlleRoleAdd() {
+    function handleModal() {
       data.modalShow = true
       data.rowData = {}
     }
@@ -258,7 +258,7 @@ export default {
       tableRef,
       loadDataTable,
       handleSearch,
-      handlleRoleAdd,
+      handleModal,
       deleteSingle
     }
   }

From 200ecb667d4962743499f79795218313b2e4f9fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E8=8F=B2?= <1622041228@qq.com>
Date: Mon, 30 May 2022 10:38:48 +0800
Subject: [PATCH 12/14] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/dept/components/DeptModal.vue      |  10 +-
 src/views/system/dept/index.vue               |  34 +-----
 src/views/system/dept/info.js                 |  18 ----
 src/views/system/dept/table.js                |  30 ++++++
 .../system/menu/components/MenuModal.vue      |  14 ++-
 src/views/system/menu/index.vue               |  96 +----------------
 src/views/system/menu/table.js                | 101 ++++++++++++++++++
 7 files changed, 146 insertions(+), 157 deletions(-)
 create mode 100644 src/views/system/dept/table.js
 create mode 100644 src/views/system/menu/table.js

diff --git a/src/views/system/dept/components/DeptModal.vue b/src/views/system/dept/components/DeptModal.vue
index 7b10d78..97f0b42 100644
--- a/src/views/system/dept/components/DeptModal.vue
+++ b/src/views/system/dept/components/DeptModal.vue
@@ -30,14 +30,6 @@
             placeholder="请输入部门名称"
           />
         </n-form-item>
-        <n-form-item label="部门全称:" path="fullname">
-          <n-input
-            v-model:value="form.fullname"
-            clearable
-            :maxlength="20"
-            placeholder="请输入部门全称"
-          />
-        </n-form-item>
         <n-form-item label="所属部门:" path="pid">
           <n-select
             v-model:value="form.pid"
@@ -135,7 +127,7 @@ export default defineComponent({
         row.pid = null
       }
       return {
-        title: props.row.name ? '编辑部门' : '添加部门',
+        title: props.row.name ? '修改部门' : '添加部门',
         show: props.visible,
         form: Object.assign(data.form, row),
         negativeText: '取消',
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 5a8f06f..284278b 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -35,44 +35,14 @@ import { getDeptList, getDeptAll, deleteDept } from '@/api/system/dept/index.js'
 import { h, unref, toRefs, ref, reactive, onMounted } from 'vue'
 import DeptModal from './components/DeptModal.vue'
 import info from './info.js'
+import table from './table.js'
 export default {
   name: 'MenuPage',
   components: { dataTable, DeptModal, headSearch },
   setup() {
     const data = reactive({
       columns: [
-        {
-          title: '部门编号',
-          key: 'code',
-          align: 'center'
-        },
-        {
-          title: '部门名称',
-          key: 'name',
-          align: 'center'
-        },
-        {
-          title: '部门全称',
-          key: 'fullname',
-          align: 'center'
-        },
-        {
-          title: '排序',
-          key: 'sort',
-          align: 'center'
-        },
-        {
-          title: '创建时间',
-          key: 'createTime',
-          align: 'center',
-          minWidth: 120
-        },
-        {
-          title: '更新时间',
-          key: 'updateTime',
-          align: 'center',
-          minWidth: 120
-        },
+        ...table.columns,
         {
           title: '操作',
           align: 'center',
diff --git a/src/views/system/dept/info.js b/src/views/system/dept/info.js
index 42342d3..7286b30 100644
--- a/src/views/system/dept/info.js
+++ b/src/views/system/dept/info.js
@@ -6,24 +6,6 @@ const data = [
       placeholder: '请输入部门名称'
     }
   }
-  // {
-  //   label: '角色类型',
-  //   type: 'select',
-  //   key: 'op',
-  //   props: {
-  //     options: [{
-  //       label: 11, value: 1
-  //     }]
-  //   }
-  // },
-  // {
-  //   label: '角色类型',
-  //   type: 'date',
-  //   key: 'date',
-  //   props: {
-  //     type: 'date'
-  //   }
-  // }
 ]
 
 export default data
diff --git a/src/views/system/dept/table.js b/src/views/system/dept/table.js
new file mode 100644
index 0000000..cb0cc9b
--- /dev/null
+++ b/src/views/system/dept/table.js
@@ -0,0 +1,30 @@
+const table = {
+  columns: [{
+    title: '部门编号',
+    key: 'code',
+    align: 'center'
+  },
+  {
+    title: '部门名称',
+    key: 'name',
+    align: 'center'
+  },
+  {
+    title: '排序',
+    key: 'sort',
+    align: 'center'
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    align: 'center',
+    minWidth: 120
+  },
+  {
+    title: '更新时间',
+    key: 'updateTime',
+    align: 'center',
+    minWidth: 120
+  }]
+}
+export default table
diff --git a/src/views/system/menu/components/MenuModal.vue b/src/views/system/menu/components/MenuModal.vue
index 41c5507..a761abf 100644
--- a/src/views/system/menu/components/MenuModal.vue
+++ b/src/views/system/menu/components/MenuModal.vue
@@ -119,7 +119,15 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const data = reactive({
-      form: {},
+      form: {
+        title: '',
+        icon: '',
+        permission: '',
+        path: '',
+        component: '',
+        hide: 0,
+        status: 1
+      },
       rules: {
         title: [{
           required: true,
@@ -148,8 +156,7 @@ export default defineComponent({
       statusOptions: [
         { key: 1, label: '在用' },
         { key: 2, label: '停用' }
-      ],
-      menuList: []
+      ]
     })
 
     const getMenuList = computed(() => {
@@ -172,7 +179,6 @@ export default defineComponent({
         show: props.visible,
         title: props.data.title ? '修改菜单' : '添加菜单',
         form: Object.assign(data.form, row),
-        width: 700,
         negativeText: '取消',
         positiveText: '确认'
       }
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index a706c23..52d4941 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -28,110 +28,18 @@
 import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
 import MenuModal from './components/MenuModal.vue'
-import TableTags from '@/components/DataTable/tools/Tags.vue'
 import Action from '@/components/DataTable/tools/Action.vue'
 import { getMenu, getMenuList, deleteMenu } from '@/api/system/menu/index.js'
 import { h, ref, unref, reactive, toRefs, onMounted } from 'vue'
 import info from './info.js'
+import table from './table.js'
 export default {
   name: 'MenuPage',
   components: { dataTable, MenuModal, headSearch },
   setup() {
     const data = reactive({
       columns: [
-        {
-          title: '菜单标题',
-          key: 'title',
-          align: 'center',
-          width: 200
-        },
-        {
-          title: '菜单类型',
-          key: 'type',
-          align: 'center',
-          width: 100,
-          render(row) {
-            return h(TableTags, {
-              data: row.type,
-              filters: [
-                {
-                  key: 0,
-                  label: '菜单'
-                },
-                {
-                  key: 1,
-                  label: '节点'
-                }
-              ]
-            })
-          }
-        },
-        {
-          title: '路由地址',
-          key: 'path',
-          align: 'center',
-          width: 200
-        },
-        {
-          title: '组件路径',
-          key: 'component',
-          align: 'center',
-          width: 200
-        },
-        {
-          title: '状态',
-          key: 'status',
-          align: 'center',
-          width: 100,
-          render(row) {
-            return h(TableTags, {
-              data: row.status,
-              filters: [
-                {
-                  key: 1,
-                  label: '在用'
-                },
-                {
-                  key: 2,
-                  label: '停用'
-                }
-              ]
-            })
-          }
-        },
-        {
-          title: '排序',
-          key: 'sort',
-          align: 'center',
-          width: 100
-        },
-        {
-          title: '是否可见',
-          key: 'hide',
-          align: 'center',
-          width: 100,
-          render(row) {
-            return h(TableTags, {
-              data: row.hide,
-              filters: [
-                {
-                  key: 1,
-                  label: '可见'
-                },
-                {
-                  key: 2,
-                  label: '不可见'
-                }
-              ]
-            })
-          }
-        },
-        {
-          title: '创建时间',
-          key: 'createTime',
-          align: 'center',
-          width: 160
-        },
+        ...table.columns,
         {
           title: '操作',
           align: 'center',
diff --git a/src/views/system/menu/table.js b/src/views/system/menu/table.js
new file mode 100644
index 0000000..6a87500
--- /dev/null
+++ b/src/views/system/menu/table.js
@@ -0,0 +1,101 @@
+import { h } from 'vue'
+import TableTags from '@/components/DataTable/tools/Tags.vue'
+const table = {
+  columns: [
+    {
+      title: '菜单标题',
+      key: 'title',
+      align: 'center',
+      width: 200
+    },
+    {
+      title: '菜单类型',
+      key: 'type',
+      align: 'center',
+      width: 100,
+      render(row) {
+        return h(TableTags, {
+          data: row.type,
+          filters: [
+            {
+              key: 0,
+              label: '菜单'
+            },
+            {
+              key: 1,
+              label: '节点'
+            }
+          ]
+        })
+      }
+    },
+    {
+      title: '路由地址',
+      key: 'path',
+      align: 'center',
+      width: 200
+    },
+    {
+      title: '组件路径',
+      key: 'component',
+      align: 'center',
+      width: 200
+    },
+    {
+      title: '状态',
+      key: 'status',
+      align: 'center',
+      width: 100,
+      render(row) {
+        return h(TableTags, {
+          data: row.status,
+          filters: [
+            {
+              key: 1,
+              label: '在用'
+            },
+            {
+              key: 2,
+              label: '停用'
+            }
+          ]
+        })
+      }
+    },
+    {
+      title: '排序',
+      key: 'sort',
+      align: 'center',
+      width: 100
+    },
+    {
+      title: '是否可见',
+      key: 'hide',
+      align: 'center',
+      width: 100,
+      render(row) {
+        return h(TableTags, {
+          data: row.hide,
+          filters: [
+            {
+              key: 1,
+              label: '可见'
+            },
+            {
+              key: 2,
+              label: '不可见'
+            }
+          ]
+        })
+      }
+    },
+    {
+      title: '创建时间',
+      key: 'createTime',
+      align: 'center',
+      width: 160
+    }
+  ]
+}
+
+export default table

From 59912db464a3676c54da87076cc5f40451c0603d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E8=8F=B2?= <1622041228@qq.com>
Date: Mon, 30 May 2022 13:35:34 +0800
Subject: [PATCH 13/14] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=BC=B9=E7=AA=97=E7=BB=84=E4=BB=B6=E5=8A=A0?=
 =?UTF-8?q?v-if=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Menu/index.vue          |  1 +
 .../system/dept/components/DeptModal.vue      |  1 +
 src/views/system/dept/index.vue               | 15 ++++++++--
 .../system/menu/components/MenuModal.vue      |  3 +-
 src/views/system/menu/index.vue               |  1 +
 src/views/system/role/index.vue               | 28 +++++++++++--------
 6 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/layout/components/Menu/index.vue b/src/layout/components/Menu/index.vue
index 5571a5d..aaa1812 100644
--- a/src/layout/components/Menu/index.vue
+++ b/src/layout/components/Menu/index.vue
@@ -1,6 +1,7 @@
 <template>
   <n-menu
     :mode="menuMode"
+    :accordion="true"
     :value="(currentRoute.title && currentRoute.meta.activeMenu) || currentRoute.title"
     :options="getMenuOptions"
     @update:value="handleMenuSelect"
diff --git a/src/views/system/dept/components/DeptModal.vue b/src/views/system/dept/components/DeptModal.vue
index 97f0b42..61c8bbb 100644
--- a/src/views/system/dept/components/DeptModal.vue
+++ b/src/views/system/dept/components/DeptModal.vue
@@ -126,6 +126,7 @@ export default defineComponent({
       if (props.row.pid === 0) {
         row.pid = null
       }
+      console.log('====部门计算属性触发了====', row)
       return {
         title: props.row.name ? '修改部门' : '添加部门',
         show: props.visible,
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 284278b..3ccdb7e 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -31,7 +31,11 @@
 import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
-import { getDeptList, getDeptAll, deleteDept } from '@/api/system/dept/index.js'
+import {
+  getDeptList,
+  getDeptAll,
+  deleteDept
+} from '@/api/system/dept/index.js'
 import { h, unref, toRefs, ref, reactive, onMounted } from 'vue'
 import DeptModal from './components/DeptModal.vue'
 import info from './info.js'
@@ -166,7 +170,14 @@ export default {
         })
     }
 
-    return { ...toRefs(data), tableRef, loadDataTable, handleSearch, handleModal, deleteSingle }
+    return {
+      ...toRefs(data),
+      tableRef,
+      loadDataTable,
+      handleSearch,
+      handleModal,
+      deleteSingle
+    }
   }
 }
 </script>
diff --git a/src/views/system/menu/components/MenuModal.vue b/src/views/system/menu/components/MenuModal.vue
index a761abf..e62c0e9 100644
--- a/src/views/system/menu/components/MenuModal.vue
+++ b/src/views/system/menu/components/MenuModal.vue
@@ -175,9 +175,10 @@ export default defineComponent({
       if (props.data.pid === 0) {
         row.pid = null
       }
+      console.log('菜单页面计算属性触发：', row)
       return {
-        show: props.visible,
         title: props.data.title ? '修改菜单' : '添加菜单',
+        show: props.visible,
         form: Object.assign(data.form, row),
         negativeText: '取消',
         positiveText: '确认'
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 52d4941..6a79288 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -17,6 +17,7 @@
   </div>
 
   <MenuModal
+    v-if="modalShow"
     v-model:visible="modalShow"
     :data="rowData"
     :menu-list="menuList"
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 367b692..8337fb8 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -48,7 +48,11 @@ import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
 import TableSwitch from '@/components/DataTable/tools/Switch.vue'
-import { getRoleList, deleteRole, setRoleStatus } from '@/api/system/role/index'
+import {
+  getRoleList,
+  deleteRole,
+  setRoleStatus
+} from '@/api/system/role/index'
 import { h, ref, unref, toRefs, reactive } from 'vue'
 import table from './table.js'
 import info from './info.js'
@@ -198,16 +202,18 @@ export default {
     // 设置状态
     function setStatus(row) {
       console.log(row)
-      setRoleStatus({ id: row.data.id, status: row.value }).then(res => {
-        if (res.code === 0) {
-          handleSearch()
-          $message.success(res.msg)
-        } else {
-          $message.error(res.msg)
-        }
-      }).catch(e => {
-        console.log(e)
-      })
+      setRoleStatus({ id: row.data.id, status: row.value })
+        .then((res) => {
+          if (res.code === 0) {
+            handleSearch()
+            $message.success(res.msg)
+          } else {
+            $message.error(res.msg)
+          }
+        })
+        .catch((e) => {
+          console.log(e)
+        })
     }
 
     return {

From 6d3c05d9a033d2a764e6c84b2c65020c7d1b9058 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E8=8F=B2?= <1622041228@qq.com>
Date: Mon, 30 May 2022 15:47:00 +0800
Subject: [PATCH 14/14] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E6=A8=A1=E5=9D=97=E8=A1=A8=E6=A0=BC=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ImgUpload/index.vue |  6 +--
 src/views/system/user/index.vue    | 66 ++--------------------------
 src/views/system/user/table.js     | 69 ++++++++++++++++++++++++++++++
 3 files changed, 74 insertions(+), 67 deletions(-)
 create mode 100644 src/views/system/user/table.js

diff --git a/src/components/ImgUpload/index.vue b/src/components/ImgUpload/index.vue
index 37a7280..129e482 100644
--- a/src/components/ImgUpload/index.vue
+++ b/src/components/ImgUpload/index.vue
@@ -9,7 +9,6 @@
       点击上传
     </n-upload>
     <n-modal
-      v-model:show="showModal"
       preset="card"
       style="width: 600px"
     >
@@ -50,8 +49,8 @@ export default defineComponent({
         }
       }
     })
-    function handleChange(file) {
-      console.log(222, file)
+    function handleChange(res) {
+      console.log('已选择的文件：', res.file.file)
     }
     /**
      * @description: 上传前判断文件是否符合条件
@@ -60,7 +59,6 @@ export default defineComponent({
      */
     function handleBeforeUpload(options) {
       const { file, fileList } = options
-      console.log(11, file, fileList)
       if (props.size) {
         const size = file.file.size
         if (size < props.size * 1024 * 1024) {
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index ee1330d..61d118f 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -38,63 +38,20 @@
 <script>
 import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
-import TableAction from '@/components/DataTable/tools/Action.vue'
-import TableImage from '@/components/DataTable/tools/Image.vue'
-import TableTags from '@/components/DataTable/tools/Tags.vue'
 import TableSwitch from '@/components/DataTable/tools/Switch.vue'
+import TableAction from '@/components/DataTable/tools/Action.vue'
 import { getUserList, resetPassword, deleteUser, setUserStatus } from '@/api/system/user/index.js'
 import { h, unref, ref, toRefs, reactive } from 'vue'
 import UserModal from './components/UserModal.vue'
 import info from './info.js'
+import table from './table.js'
 export default {
   name: 'MenuPage',
   components: { dataTable, UserModal, headSearch },
   setup() {
     const data = reactive({
       columns: [
-        {
-          type: 'selection'
-        },
-        {
-          title: '用户编号',
-          key: 'code',
-          align: 'center'
-        },
-        {
-          title: '头像',
-          key: 'avatar',
-          align: 'center',
-          render(row) {
-            return h(TableImage, {
-              images: {
-                width: 36,
-                height: 36,
-                src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiKrYt-fEfJ4SZhF9KfLLaX9f15KV6Ve1ptA&usqp=CAU'
-              }
-            })
-          }
-        },
-        {
-          title: '用户账号',
-          key: 'username',
-          align: 'center'
-        },
-        {
-          title: '用户姓名',
-          key: 'realname',
-          align: 'center'
-        },
-        {
-          title: '角色',
-          key: 'roleList',
-          align: 'center',
-          render(row) {
-            return h(TableTags, {
-              data: row.roleList,
-              rowKey: 'name'
-            })
-          }
-        },
+        ...table.columns,
         {
           title: '状态',
           key: 'status',
@@ -110,23 +67,6 @@ export default {
             })
           }
         },
-        {
-          title: '部门',
-          key: 'deptName',
-          align: 'center'
-        },
-        {
-          title: '创建时间',
-          key: 'createTime',
-          align: 'center',
-          width: 160
-        },
-        {
-          title: '更新时间',
-          key: 'updateTime',
-          align: 'center',
-          width: 160
-        },
         {
           title: '操作',
           align: 'center',
diff --git a/src/views/system/user/table.js b/src/views/system/user/table.js
new file mode 100644
index 0000000..f9b23d4
--- /dev/null
+++ b/src/views/system/user/table.js
@@ -0,0 +1,69 @@
+import { h } from 'vue'
+import TableImage from '@/components/DataTable/tools/Image.vue'
+import TableTags from '@/components/DataTable/tools/Tags.vue'
+
+const table = {
+  columns: [
+    {
+      type: 'selection'
+    },
+    {
+      title: '用户编号',
+      key: 'code',
+      align: 'center'
+    },
+    {
+      title: '头像',
+      key: 'avatar',
+      align: 'center',
+      render(row) {
+        return h(TableImage, {
+          images: {
+            width: 36,
+            height: 36,
+            src: row.avatar
+          }
+        })
+      }
+    },
+    {
+      title: '用户账号',
+      key: 'username',
+      align: 'center'
+    },
+    {
+      title: '用户姓名',
+      key: 'realname',
+      align: 'center'
+    },
+    {
+      title: '角色',
+      key: 'roleList',
+      align: 'center',
+      render(row) {
+        return h(TableTags, {
+          data: row.roleList,
+          rowKey: 'name'
+        })
+      }
+    },
+    {
+      title: '部门',
+      key: 'deptName',
+      align: 'center'
+    },
+    {
+      title: '创建时间',
+      key: 'createTime',
+      align: 'center',
+      width: 160
+    },
+    {
+      title: '更新时间',
+      key: 'updateTime',
+      align: 'center',
+      width: 160
+    }
+  ]
+}
+export default table