-前端提交：部门管理

kicc-ui/src/api/system/dept.ts

@@ -1,25 +1,58 @@
 import { DepartVO, DeptDto, Depart, DeptListItem, DeptListGetResultModel } from './model/deptModel';
 import { defHttp } from '/@/utils/http/axios';
+import {listToTree} from "/@/utils/helper/treeHelper";
+import {isDef} from "/@/utils/is";
+
+const prefix = '/system_proxy/system';
 
 enum Api {
-  list = '/system_proxy/system/dept/list',
+  List = '/dept/list',
-  List = '/mate-system/depart/list',
+  Save = '/dept/save',
-  Set = '/mate-system/depart/set',
+  Update = '/dept/update',
-  Del = '/mate-system/depart/del',
+  Remove = '/dept/remove',
-  DeptList = '/mate-system/depart/list',
+  DeptList = '/dept/deptTree',
 }
 
-// 菜单树
+//获取部门根据id
-export const departList = (params?: DepartVO) => defHttp.get({ url: Api.List, params });
+export const getDeptById = (params: {id: string}) =>
+    defHttp.get({url: prefix + `/dept/${params.id}` })
 
-// 保存
+//部门列表
-export const departSet = (params: Depart) => defHttp.post<Depart>({ url: Api.Set, params });
+export const deptList = (params?: Partial<DeptDto>) => defHttp.get({ url: prefix + Api.List, params });
 
-// 删除
+// 部门树
-export const departDel = (params: { ids: String }) =>
+export const departTreeList = (params?: DepartVO) => {
-  defHttp.post<boolean>({ url: Api.Del + `?ids=${params.ids}` });
+  return defHttp.get({ url: prefix + Api.List, params }).then(data => {
+    return listToTree(data, {
+      id: 'deptId',
+      children: 'children',
+      parentId: 'parentId',
+    }) as any[];
+  });
+}
+
+export const departTreeHasTop = (params?: DepartVO) => {
+  return defHttp.get({ url: prefix + Api.List, params }).then(data => {
+    data.unshift({ deptId: '0', sort: 0, name: '顶级部门', children: [] });
+    return listToTree(data, {
+      id: 'deptId',
+      children: 'children',
+      parentId: 'parentId',
+    }) as any[];
+  });
+}
+
+export const departSet = (params: Depart) => {
+  if (isDef(params.id)){
+    return defHttp.put({ url: prefix + Api.Update, params });
+  }else {
+    return defHttp.post({ url: prefix + Api.Save, params });
+  }
+}
 
-export const getDeptList = (params?: DeptListItem) => defHttp.get<DeptListGetResultModel>({ url: Api.DeptList, params });
+// 删除
+export const departRemove = (params: { id: String }) =>
+    defHttp.delete<boolean>({ url: prefix + Api.Remove + `/${params.id}` });
 
-// 查询部门列表
+export const getDeptList = (params?: DeptListItem) =>
-export const deptList = (params?: Partial<DeptDto>) => defHttp.get({ url: Api.list, params });
+    defHttp.get<DeptListGetResultModel>({ url: prefix + Api.DeptList, params });

kicc-ui/src/views/system/depart/DeptModal.vue

@@ -1,61 +0,0 @@
-<template>
-  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
-    <BasicForm @register="registerForm" />
-  </BasicModal>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, useForm } from '/@/components/Form/index';
-  import { formSchema } from './dept.data';
-  import { departList, departSet } from '/@/api/system/dept';
-
-  export default defineComponent({
-    name: 'DeptModal',
-    components: { BasicModal, BasicForm },
-    emits: ['success', 'register'],
-    setup(_, { emit }) {
-      const isUpdate = ref(true);
-
-      const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
-        labelWidth: 100,
-        schemas: formSchema,
-        showActionButtonGroup: false,
-      });
-
-      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-        resetFields();
-        setModalProps({ confirmLoading: false });
-        isUpdate.value = !!data?.isUpdate;
-
-        if (unref(isUpdate)) {
-          setFieldsValue({
-            ...data.record,
-          });
-        }
-        const treeData = await departList();
-        treeData.unshift({ id: '-1', sort: 0, name: '顶级部门' });
-        updateSchema({
-          field: 'parentId',
-          componentProps: { treeData },
-        });
-      });
-
-      const getTitle = computed(() => (!unref(isUpdate) ? '新增部门' : '编辑部门'));
-
-      async function handleSubmit() {
-        try {
-          const values = await validate();
-          setModalProps({ confirmLoading: true });
-          await departSet(values);
-          closeModal();
-          emit('success');
-        } finally {
-          setModalProps({ confirmLoading: false });
-        }
-      }
-
-      return { registerModal, registerForm, getTitle, handleSubmit };
-    },
-  });
-</script>

kicc-ui/src/views/system/depart/dept.data.ts

@@ -1,108 +0,0 @@
-import { BasicColumn } from '/@/components/Table';
-import { FormSchema } from '/@/components/Table';
-import { h } from 'vue';
-import { Tag } from 'ant-design-vue';
-
-export const columns: BasicColumn[] = [
-  {
-    title: '部门名称',
-    dataIndex: 'name',
-    width: 160,
-    align: 'left',
-  },
-  {
-    title: '排序',
-    dataIndex: 'sort',
-    width: 50,
-  },
-  {
-    title: '状态',
-    dataIndex: 'status',
-    width: 80,
-    customRender: ({ record }) => {
-      const status = record.status;
-      const enable = ~~status === 0;
-      const color = enable ? 'green' : 'red';
-      const text = enable ? '启用' : '停用';
-      return h(Tag, { color: color }, () => text);
-    },
-  },
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    width: 180,
-  },
-];
-
-export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'keyword',
-    label: '关键字',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入名称/编码',
-    },
-    colProps: { span: 8 },
-  },
-  {
-    field: 'startDate',
-    label: '起始时间',
-    component: 'DatePicker',
-    colProps: { span: 8 },
-  },
-  {
-    field: 'endDate',
-    label: '截止时间',
-    component: 'DatePicker',
-    colProps: { span: 8 },
-  },
-];
-
-export const formSchema: FormSchema[] = [
-  {
-    field: 'id',
-    label: 'ID',
-    component: 'Input',
-    show: false,
-  },
-  {
-    field: 'name',
-    label: '部门名称',
-    component: 'Input',
-    required: true,
-  },
-  {
-    field: 'parentId',
-    label: '上级部门',
-    component: 'TreeSelect',
-
-    componentProps: {
-      replaceFields: {
-        title: 'name',
-        key: 'id',
-        value: 'id',
-      },
-      getPopupContainer: () => document.body,
-    },
-    required: true,
-  },
-  {
-    field: 'sort',
-    label: '排序',
-    component: 'InputNumber',
-    required: true,
-  },
-  {
-    field: 'status',
-    label: '状态',
-    component: 'RadioButtonGroup',
-    defaultValue: '0',
-    componentProps: {
-      options: [
-        { label: '启用', value: '0' },
-        { label: '停用', value: '1' },
-      ],
-    },
-    required: true,
-  },
-];

kicc-ui/src/views/system/dept/DeptModal.vue

@@ -0,0 +1,80 @@
+<template>
+  <BasicModal
+      v-bind="$attrs"
+      @register="registerModal"
+      @ok="handleSubmit"
+      width="720px">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts">
+import { defineComponent, ref, computed, unref } from 'vue';
+import {BasicModal, ModalProps, useModalInner} from '/@/components/Modal';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { formSchema } from './dept.data';
+import { deptList, departSet } from '/@/api/system/dept';
+import {isDef} from "/@/utils/is";
+import {listToTree} from "/@/utils/helper/treeHelper";
+
+export default defineComponent({
+  name: 'DeptModal',
+  components: { BasicModal, BasicForm },
+  emits: ['success', 'register'],
+  setup(_, { emit }) {
+    const isUpdate = ref(true);
+
+    const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+      labelWidth: 100,
+      schemas: formSchema,
+      showActionButtonGroup: false,
+      baseColProps: { span: 24 }
+    });
+
+    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+      await resetFields();
+      const props: Partial<ModalProps> = { confirmLoading: false };
+
+      isUpdate.value = !!data?.isUpdate;
+
+      if (unref(isUpdate)) {
+        await setFieldsValue({
+          ...data.record,
+        });
+        props.title = "编辑部门";
+      }else {
+        props.title = "新增部门";
+      }
+      let treeData = await deptList();
+      treeData.unshift({ deptId: '0', sort: 0, name: '顶级部门', children: [] });
+      treeData = listToTree(treeData,{
+        id: 'deptId',
+        children: 'children',
+        parentId: 'parentId',
+      });
+      await updateSchema({
+        field: 'parentId',
+        componentProps: { treeData },
+      });
+      if (isDef(data.record?.deptId)){
+        await setFieldsValue({parentId: data.record?.deptId})
+      }
+
+      setModalProps(props);
+    });
+
+    async function handleSubmit() {
+      try {
+        const values = await validate();
+        setModalProps({ confirmLoading: true });
+        await departSet(values);
+        closeModal();
+        emit('success');
+      } finally {
+        setModalProps({ confirmLoading: false });
+      }
+    }
+
+    return { registerModal, registerForm, handleSubmit };
+  },
+});
+</script>

kicc-ui/src/views/system/dept/dept.data.ts

@@ -0,0 +1,165 @@
+import {BasicColumn} from '/@/components/Table';
+import {FormSchema} from '/@/components/Table';
+import {h} from 'vue';
+import {Tag} from 'ant-design-vue';
+
+export const columns: BasicColumn[] = [
+    {
+        title: '部门名称',
+        dataIndex: 'name',
+        width: 160,
+        align: 'left',
+    },
+    {
+        title: '部门编码',
+        dataIndex: 'code',
+        width: 160,
+    },
+    {
+        title: '排序',
+        dataIndex: 'sort',
+        width: 50,
+    },
+    {
+        title: '状态',
+        dataIndex: 'status',
+        width: 80,
+        customRender: ({record}) => {
+            const status = record.status;
+            const enable = ~~status === 0;
+            const color = enable ? 'green' : 'red';
+            const text = enable ? '启用' : '停用';
+            return h(Tag, {color: color}, () => text);
+        },
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        width: 180,
+    },
+];
+
+export const searchFormSchema: FormSchema[] = [
+    {
+        field: 'keyword',
+        label: '关键字',
+        component: 'Input',
+        componentProps: {
+            placeholder: '请输入名称/编码',
+        },
+        colProps: {span: 8},
+    },
+    {
+        field: 'dateRange',
+        label: '创建时间',
+        component: 'RangePicker',
+        componentProps: {
+            style: { width:'100%' },
+            valueFormat: 'YYYY-MM-DD',
+            placeholder: ['开始日期','结束日期']
+        },
+        colProps: { span: 8 }
+    }
+];
+
+export const formSchema: FormSchema[] = [
+    {
+        field: 'deptId',
+        label: 'ID',
+        component: 'Input',
+        show: false
+    },
+    {
+        field: 'name',
+        label: '部门名称',
+        component: 'Input',
+        required: true
+    },
+    {
+        field: 'parentId',
+        label: '上级部门',
+        component: 'TreeSelect',
+        componentProps: {
+            replaceFields: {
+                title: 'name',
+                key: 'deptId',
+                value: 'deptId',
+            },
+            getPopupContainer: () => document.body,
+        },
+        required: true,
+        colProps: {
+            span: 12
+        }
+    },
+    {
+        field: 'code',
+        label: '部门编码',
+        component: 'Input',
+        required: true,
+        colProps: {
+            span: 12
+        }
+    },
+    {
+        field: 'sort',
+        label: '排序',
+        component: 'Input',
+        required: true,
+        colProps: {
+            span: 12
+        }
+    },
+    {
+        field: 'contacts',
+        label: '联系人',
+        component: 'Input',
+        required: false,
+        colProps: {
+            span: 12
+        }
+    },
+    {
+        field: 'phone',
+        label: '联系人电话',
+        component: 'Input',
+        required: false,
+        colProps: {
+            span: 12
+        }
+    },
+    {
+        field: 'address',
+        label: '联系地址',
+        component: 'Input',
+        required: false,
+        colProps: {
+            span: 12
+        }
+    },
+    {
+        field: 'email',
+        label: '邮箱',
+        component: 'Input',
+        required: false,
+        colProps: {
+            span: 12
+        }
+    },
+    {
+        field: 'status',
+        label: '状态',
+        component: 'RadioButtonGroup',
+        defaultValue: '0',
+        componentProps: {
+            options: [
+                {label: '启用', value: '0'},
+                {label: '停用', value: '1'},
+            ],
+        },
+        required: true,
+        colProps: {
+            span: 12
+        }
+    },
+];

kicc-ui/src/views/system/dept/index.vue

@@ -2,24 +2,33 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click="handleCreate"> 新增部门 </a-button>
+        <a-button type="primary"
+                  @click="handleAdd()"
+        >新增部门</a-button>
+
       </template>
       <template #action="{ record }">
         <TableAction
-          :actions="[
+            :actions="[
-            {
+              {
-              icon: 'clarity:note-edit-line',
+                label: '编辑',
-              onClick: handleEdit.bind(null, record),
+                icon: 'fa6-regular:pen-to-square',
-            },
+                onClick: handleEdit.bind(null, record)
-            {
+              },
-              icon: 'ant-design:delete-outlined',
+              {
-              color: 'error',
+                label: '新增',
-              popConfirm: {
+                icon: 'ant-design:plus-circle-outlined',
-                title: '是否确认删除',
+                onClick: handleAdd.bind(null, record),
-                confirm: handleDelete.bind(null, record),
               },
-            },
+              {
-          ]"
+                label: '删除',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  confirm: handleDel.bind(null, record),
+                },
+              }]"
         />
       </template>
     </BasicTable>
@@ -32,8 +41,9 @@
   import { useModal } from '/@/components/Modal';
   import DeptModal from './DeptModal.vue';
   import { columns, searchFormSchema } from './dept.data';
-  import { departDel, departList } from '/@/api/system/dept';
+  import { departRemove, departTreeList } from '/@/api/system/dept';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import {convertDateRange} from "/@/utils/dateUtil";
 
   const { createMessage } = useMessage();
 
@@ -44,7 +54,7 @@
       const [registerModal, { openModal }] = useModal();
       const [registerTable, { reload }] = useTable({
         title: '部门列表',
-        api: departList,
+        api: departTreeList,
         columns,
         formConfig: {
           labelWidth: 120,
@@ -58,33 +68,33 @@
         showIndexColumn: false,
         canResize: false,
         actionColumn: {
-          width: 80,
+          width: 150,
           title: '操作',
           dataIndex: 'action',
           slots: { customRender: 'action' },
-          fixed: undefined,
+          fixed: false,
         },
+        handleSearchInfoFn: (queryParams) => convertDateRange(queryParams, 'dateRange')
       });
 
-      function handleCreate() {
+      /** 新增按钮操作,行内新增与工具栏局域新增通用 */
-        openModal(true, {
+      function handleAdd(record?: Recordable) {
-          isUpdate: false,
+        openModal(true,{ isUpdate: false, record });
-        });
       }
 
+      /** 编辑按钮操作,行内编辑 */
       function handleEdit(record: Recordable) {
-        openModal(true, {
+        openModal(true, { isUpdate: true, record });
-          record,
-          isUpdate: true,
-        });
       }
 
-      async function handleDelete(record: Recordable) {
+      /** 删除按钮操作,行内删除 */
-        await departDel({ ids: record.id });
+      async function handleDel(record: Recordable) {
+        await departRemove(record.id);
         createMessage.success('删除成功!');
         handleSuccess();
       }
 
+      /** 处理表单提交成功 */
       function handleSuccess() {
         reload();
       }
@@ -92,9 +102,9 @@
       return {
         registerTable,
         registerModal,
-        handleCreate,
+        handleAdd,
         handleEdit,
-        handleDelete,
+        handleDel,
         handleSuccess,
       };
     },

kicc-ui/src/views/system/user/DeptTree.vue

@@ -13,8 +13,7 @@
 <script lang="ts">
   import { defineComponent, onMounted, ref } from 'vue';
   import { BasicTree, TreeItem } from '/@/components/Tree';
-  import { deptList } from '/@/api/system/dept';
+  import { departTreeList } from '/@/api/system/dept';
-  import {listToTree} from "/@/utils/helper/treeHelper";
 
   export default defineComponent({
     name: 'DeptTree',
@@ -24,12 +23,11 @@
       const treeData = ref<TreeItem[]>([]);
 
       async function fetch() {
-        treeData.value = listToTree(await deptList());
+        treeData.value = await departTreeList();
       }
 
       function handleSelect(keys: string, e) {
         emit('select', keys[0]);
-        console.log(keys, e);
       }
 
       onMounted(() => {