部门管理模块增删改查完成

src/api/system/dept/index.js

@@ -1,6 +1,6 @@
 import { defAxios as request } from '@/utils/http'
 /**
- * 获取部门分页数据接口
+ * 获取部门管理数据接口
  * @returns 部门分页
  */
 export function getDeptList(params) {

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="请输入用户账号"
-          />
-        </n-form-item>
-        <n-form-item
-          label="登录密码:"
-          path="password"
-        >
-          <n-input
-            v-model:value="form.password"
-            type="password"
-            :maxlength="20"
-            placeholder="请输入登录密码"
+            placeholder="请输入部门名称"
           />
         </n-form-item>
-        <n-form-item label="用户姓名:" path="realname">
+        <n-form-item label="部门全称:" path="fullname">
           <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')

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>

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') {

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