用户管理模块分配权限功能完成

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>

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 {

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)
+      })
     }
   }
 })

src/views/system/user/index.vue

@@ -201,7 +201,7 @@ export default {
       return await getUserList(_params)
     }
 
-    // 新增用户
+    // 新增
     function handleModal() {
       data.rowData = {}
       data.modalShow = true