用户管理模块代码调整

src/api/demo/system.ts

@@ -20,7 +20,7 @@ enum Api {
   setRoleStatus = '/system/setRoleStatus',
   MenuList = '/system/getMenuList',
   RolePageList = '/system/getRoleListByPage',
-  GetAllRoleList = '/system/getAllRoleList',
+  GetAllRoleList = '/system/role/listAll',
 }
 
 export const getAccountList = (params: AccountParams) =>

src/api/system/user/user.ts

+import {
+  AccountParams,
+  DeptListItem,
+  MenuParams,
+  RoleParams,
+  RolePageParams,
+  MenuListGetResultModel,
+  DeptListGetResultModel,
+  AccountListGetResultModel,
+  RolePageListGetResultModel,
+  RoleListGetResultModel,
+} from '../../demo/model/systemModel';
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+  addUser = '/system/user/add',
+  userDetail = '/system/user/',
+  updataApi = '/system/user/update',
+}
+
+/** 用户add*/
+export const addUserApi = (params: any) =>
+  defHttp.post({
+    url: Api.addUser,
+    params: params,
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+  });
+
+/** 获取用户详情信息*/
+export const UserDetailApi = (params: any) =>
+  defHttp.get<any>({ url: Api.userDetail + params, });
+
+/** 用户信息编辑*/
+export const UserUpdataApi = (params: any) =>
+  defHttp.put<any>({
+    url: Api.updataApi,
+    params: params,
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+  });

src/utils/http/axios/index.ts

@@ -167,7 +167,7 @@ const transform: AxiosTransform = {
    * @description: 响应拦截器处理
    */
   responseInterceptors: (res: AxiosResponse<any>) => {
-    console.log('ree',res)
+    // console.log('ree',res)
     return res;
   },
 

src/views/system/dept/DeptModal.vue

+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './dept.data';
+
+  import { getDeptList } from '@/api/demo/system';
+
+  defineOptions({ name: 'DeptModal' });
+
+  const emit = defineEmits(['success', 'register']);
+
+  const isUpdate = ref(true);
+
+  const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { span: 24 },
+    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 getDeptList();
+    updateSchema({
+      field: 'parentDept',
+      componentProps: { treeData },
+    });
+  });
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增部门' : '编辑部门'));
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      // TODO custom api
+      console.log(values);
+      closeModal();
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>

src/views/system/dept/dept.data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '部门名称',
+    dataIndex: 'deptName',
+    width: 160,
+    align: 'left',
+  },
+  {
+    title: '排序',
+    dataIndex: 'orderNo',
+    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,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'deptName',
+    label: '部门名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '启用', value: '0' },
+        { label: '停用', value: '1' },
+      ],
+    },
+    colProps: { span: 8 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'deptName',
+    label: '部门名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'parentDept',
+    label: '上级部门',
+    component: 'TreeSelect',
+    ifShow({ values }) {
+      const { deptName, parentDept } = values;
+      // Hide without a parentDept when editing
+      return parentDept || (!deptName && !parentDept);
+    },
+    componentProps: {
+      fieldNames: {
+        label: 'deptName',
+        value: 'id',
+      },
+      getPopupContainer: () => document.body,
+    },
+    required: true,
+  },
+  {
+    field: 'orderNo',
+    label: '排序',
+    component: 'InputNumber',
+    required: true,
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: '启用', value: '0' },
+        { label: '停用', value: '1' },
+      ],
+    },
+    required: true,
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+  },
+];

src/views/system/dept/index.vue

 <template>
   <div>
-    部门管理
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增部门 </a-button>
+      </template>
+<!--      <template #bodyCell="{ column, record }">-->
+<!--        <template v-if="column.key === 'action'">-->
+<!--          <TableAction-->
+<!--            :actions="[-->
+<!--              {-->
+<!--                icon: 'clarity:note-edit-line',-->
+<!--                onClick: handleEdit.bind(null, record),-->
+<!--              },-->
+<!--              {-->
+<!--                icon: 'ant-design:delete-outlined',-->
+<!--                color: 'error',-->
+<!--                popConfirm: {-->
+<!--                  title: '是否确认删除',-->
+<!--                  placement: 'left',-->
+<!--                  confirm: handleDelete.bind(null, record),-->
+<!--                },-->
+<!--              },-->
+<!--            ]"-->
+<!--          />-->
+<!--        </template>-->
+<!--      </template>-->
+    </BasicTable>
+<!--    <DeptModal @register="registerModal" @success="handleSuccess" />-->
   </div>
 </template>
-
 <script lang="ts" setup>
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getDeptList } from '@/api/demo/system';
 
-</script>
+  import { useModal } from '@/components/Modal';
+  import DeptModal from './DeptModal.vue';
+
+  import { columns, searchFormSchema } from './dept.data';
+
+  defineOptions({ name: 'DeptManagement' });
 
-<style scoped>
+  const [registerModal, { openModal }] = useModal();
+  const [registerTable, { reload }] = useTable({
+    title: '部门列表',
+    api: getDeptList,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 80,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-</style>
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  function handleEdit(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  function handleDelete(record: Recordable) {
+    console.log(record);
+  }
+
+  function handleSuccess() {
+    reload();
+  }
+</script>

src/views/system/user/AccountModal.vue

@@ -4,19 +4,22 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, computed, unref } from 'vue';
+import {ref, computed, unref, reactive} from 'vue';
   import { BasicModal, useModalInner } from '@/components/Modal';
   import { BasicForm, useForm } from '@/components/Form';
   import { accountFormSchema } from './account.data';
-  import { getDeptList } from '@/api/demo/system';
-
+  import { getDeptList,getAllRoleList } from '@/api/demo/system';
+  import {addUserApi,UserDetailApi,UserUpdataApi} from '@/api/system/user/user'
+  import { encryptTwo } from '../../../../src/utils/jsencrypt.js'
+  import { useMessage } from '@/hooks/web/useMessage';
   defineOptions({ name: 'AccountModal' });
 
   const emit = defineEmits(['success', 'register']);
-
+const { createMessage } = useMessage();
   const isUpdate = ref(true);
   const rowId = ref('');
-
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
   const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
     labelWidth: 100,
     baseColProps: { span: 24 },
@@ -26,42 +29,103 @@
       span: 23,
     },
   });
-
+  //初始化弹框
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
     resetFields();
     setModalProps({ confirmLoading: false });
     isUpdate.value = !!data?.isUpdate;
-
     if (unref(isUpdate)) {
-      rowId.value = data.record.id;
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+      // 通过id获取行详情信息
+      UserDetailApi(rowId.value).then(res => {
+        const form = res.data
+        // 数据处理反显用户角色
+        const roleData = res.data.roleIds.split(',')
+        form.roleList = []
+        roleData.forEach(item => {
+          const id = Number(item)
+          form.roleList.push(id)
+        })
+        // 塞值
         setFieldsValue({
-        ...data.record,
+          ...form,
         });
+      })
     }
 
     const treeData = await getDeptList();
+    const treeList =  handleTree(treeData.data, 'businessId',undefined,undefined,undefined)
     updateSchema([
       {
-        field: 'pwd',
+        field: 'username',
         show: !unref(isUpdate),
       },
       {
-        field: 'dept',
-        componentProps: { treeData },
+        field: 'password',
+        show: !unref(isUpdate),
+      },
+      {
+        field: 'flag',
+        show: !unref(isUpdate),
+      },
+      {
+        field: 'deptId',
+        componentProps: {
+          treeData: treeList
+        },
       },
     ]);
   });
 
   const getTitle = computed(() => (!unref(isUpdate) ? '新增账号' : '编辑账号'));
 
+  function handleTree(data, id, parentId, children, rootId) {
+    id = id || 'id'
+    parentId = parentId || 'parentId'
+    children = children || 'children'
+    rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
+    // 对源数据深度克隆
+    const cloneData = JSON.parse(JSON.stringify(data))
+    // 循环所有项
+    const treeData = cloneData.filter(father => {
+      const branchArr = cloneData.filter(child => {
+        // 返回每一项的子级数组
+        return father[id] === child[parentId]
+      })
+      branchArr.length > 0 ? father.children = branchArr : ''
+      // 返回第一层
+      return father[parentId] === rootId
+    })
+    return treeData !== '' ? treeData : data
+  }
+
   async function handleSubmit() {
     try {
       const values = await validate();
       setModalProps({ confirmLoading: true });
       // TODO custom api
       console.log(values);
+      // 编辑
+      if(unref(isUpdate)) {
+        values.businessId = rowId.value
+        UserUpdataApi(values).then(res => {
+          if(res.code === 200){
+            createMessage.success('编辑成功');
             closeModal();
             emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+          }
+        })
+      }else {
+        values.password = encryptTwo(values.password)
+        addUserApi(values).then(res => {
+          if(res.code === 200){
+            createMessage.success('新增成功');
+            closeModal();
+            emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+          }
+        })
+      }
     } finally {
       setModalProps({ confirmLoading: false });
     }

src/views/system/user/account.data.ts

 import { getAllRoleList, isAccountExist } from '@/api/demo/system';
 import { BasicColumn, FormSchema } from '@/components/Table';
+import {optionsListApi} from "@/api/demo/select";
 
 /**
  * transform mock data
@@ -79,80 +80,119 @@ export const searchFormSchema: FormSchema[] = [
   },
 ];
 
-export const accountFormSchema: FormSchema[] = [
+export const accountFormSchema: any[] = [
   {
-    field: 'account',
-    label: '用户名',
+    field: 'username',
+    label: '登录名',
     component: 'Input',
-    helpMessage: ['本字段演示异步验证', '不能输入带有admin的用户名'],
+    // helpMessage: ['本字段演示异步验证', '不能输入带有admin的用户名'],
     rules: [
       {
         required: true,
-        message: '请输入用户名',
-      },
-      {
-        trigger: 'blur',
-        validator(_, value) {
-          return new Promise((resolve, reject) => {
-            if (!value) return resolve();
-            isAccountExist(value)
-              .then(resolve)
-              .catch((err) => {
-                reject(err.message || '验证失败');
-              });
-          });
-        },
+        message: '请输入登录名',
       },
+      // {
+      //   trigger: 'blur',
+      //   validator(_, value) {
+      //     return new Promise((resolve, reject) => {
+      //       if (!value) return resolve();
+      //       isAccountExist(value)
+      //         .then(resolve)
+      //         .catch((err) => {
+      //           reject(err.message || '验证失败');
+      //         });
+      //     });
+      //   },
+      // },
     ],
   },
   {
-    field: 'pwd',
+    field: 'password',
     label: '密码',
     component: 'InputPassword',
     required: true,
-    ifShow: false,
+    // ifShow: false,
   },
   {
-    label: '角色',
-    field: 'role',
-    component: 'ApiSelect',
+    field: 'name',
+    label: '姓名',
+    component: 'Input',
+
+  },
+  {
+    field: 'nickName',
+    label: '昵称',
+    component: 'Input',
+
+  },
+  {
+    field: 'sex',
+    label: '性别',
+    component: 'Select',
     componentProps: {
-      api: getAllRoleList,
-      labelField: 'roleName',
-      valueField: 'roleValue',
+      options: [
+        { label: '男', value: '1' },
+        { label: '女', value: '0' },
+      ],
+    },
+  },
+  {
+    field: 'phone',
+    label: '手机号码',
+    component: 'Input',
+  },
+  {
+    field: 'idNumber',
+    label: '身份证号',
+    component: 'Input',
+  },
+  {
+    field: 'email',
+    label: '邮箱',
+    component: 'Input',
+  },
+  {
+    field: 'flag',
+    label: '状态',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        { label: '启用', value: 1 },
+        { label: '停用', value: 0 },
+      ],
     },
     required: true,
   },
   {
-    field: 'dept',
+    field: 'deptId',
     label: '所属部门',
     component: 'TreeSelect',
     componentProps: {
       fieldNames: {
         label: 'deptName',
-        value: 'id',
+        value: 'businessId',
       },
       getPopupContainer: () => document.body,
     },
     required: true,
   },
   {
-    field: 'nickname',
-    label: '昵称',
-    component: 'Input',
-    required: true,
+    field: 'roleList',
+    label: '角色',
+    component: 'ApiSelect',
+    componentProps: {
+      api: getAllRoleList,
+      labelField: 'roleName',
+      valueField: 'businessId',
+      resultField:'data',
     },
-
-  {
-    label: '邮箱',
-    field: 'email',
-    component: 'Input',
     required: true,
   },
 
+
   {
     label: '备注',
-    field: 'remark',
+    field: 'remarks',
     component: 'InputTextArea',
   },
 ];

src/views/system/user/index.vue

@@ -39,7 +39,7 @@
   import {getAccountList, deleteUser} from '@/api/demo/system';
   import { PageWrapper } from '@/components/Page';
   import DeptTree from './DeptTree.vue';
-
+  import { useMessage } from '@/hooks/web/useMessage';
   import { useModal } from '@/components/Modal';
   import AccountModal from './AccountModal.vue';
 
@@ -47,7 +47,7 @@
   import { useGo } from '@/hooks/web/usePage';
 
   defineOptions({ name: 'AccountManagement' });
-
+  const { createMessage } = useMessage();
   const go = useGo();
   const [registerModal, { openModal }] = useModal();
   const searchInfo = reactive<Recordable>({});
@@ -84,7 +84,6 @@
   }
 /** 编辑按钮*/
   function handleEdit(record: Recordable) {
-    console.log(record);
     openModal(true, {
       record,
       isUpdate: true,
@@ -108,7 +107,9 @@
       // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
       const result = updateTableDataRecord(values.id, values);
       console.log(result);
+      reload();
     } else {
+      createMessage.success('新增成功');
       reload();
     }
   }