机构管理页面

src/views/system/institution/AccountDetail.vue

+<template>
+  <PageWrapper
+    :title="`用户` + userId + `的资料`"
+    content="这是用户资料详情页面。本页面仅用于演示相同路由在tab中打开多个页面并且显示不同的数据"
+    contentBackground
+    @back="goBack"
+  >
+    <template #extra>
+      <a-button type="primary" danger> 禁用账号 </a-button>
+      <a-button type="primary"> 修改密码 </a-button>
+    </template>
+    <template #footer>
+      <a-tabs default-active-key="detail" v-model:activeKey="currentKey">
+        <a-tab-pane key="detail" tab="用户资料" />
+        <a-tab-pane key="logs" tab="操作日志" />
+      </a-tabs>
+    </template>
+    <div class="pt-4 m-4 desc-wrap">
+      <template v-if="currentKey == 'detail'">
+        <div v-for="i in 10" :key="i">这是用户{{ userId }}资料Tab</div>
+      </template>
+      <template v-if="currentKey == 'logs'">
+        <div v-for="i in 10" :key="i">这是用户{{ userId }}操作日志Tab</div>
+      </template>
+    </div>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { PageWrapper } from '@/components/Page';
+  import { useGo } from '@/hooks/web/usePage';
+  import { useTabs } from '@/hooks/web/useTabs';
+  import { Tabs } from 'ant-design-vue';
+
+  defineOptions({ name: 'AccountDetail' });
+
+  const ATabs = Tabs;
+  const ATabPane = Tabs.TabPane;
+
+  const route = useRoute();
+  const go = useGo();
+  // 此处可以得到用户ID
+  const userId = ref(route.params?.id);
+  const currentKey = ref('detail');
+  const { setTitle } = useTabs();
+  // TODO
+  // 本页代码仅作演示，实际应当通过userId从接口获得用户的相关资料
+
+  // 设置Tab的标题（不会影响页面标题）
+  setTitle('详情：用户' + userId.value);
+
+  // 页面左侧点击返回链接时的操作
+  function goBack() {
+    // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
+    go('/system/account');
+  }
+</script>
+
+<style></style>

src/views/system/institution/AccountModal.vue

@@ -18,7 +18,7 @@ import {ref, computed, unref, reactive} from 'vue';
   const emit = defineEmits(['success', 'register']);
   const { createMessage } = useMessage();
   const isUpdate = ref(true);
-  const isRemove = ref(true);
+  const isMove = ref(false);
   const rowId = ref('');
   //获取接口数据并放在下拉框里（这里是打开了一个弹框）
   //初始化表单
@@ -36,7 +36,7 @@ import {ref, computed, unref, reactive} from 'vue';
     resetFields();
     setModalProps({ confirmLoading: false });
     isUpdate.value = !!data?.isUpdate;
-    isRemove.value = !!data?.isRemove;
+    isMove.value = !!data?.isMove;
     if (unref(isUpdate)) {
       // 获取行数据的id
       rowId.value = data.record.businessId;
@@ -44,27 +44,11 @@ import {ref, computed, unref, reactive} from 'vue';
       setFieldsValue({
         ...data.record,
       });
-      if (unref(isRemove)){
-        updateSchema ([
-          {
-            field: 'username',
-            ifShow: false,
-          },
-          {
-            field: 'username',
-            ifShow: false,
-          },
-        ])
-      }
     }
 
 
     const treeList =  handleTree(TreeData, 'businessId',undefined,undefined,undefined)
     updateSchema([
-      {
-        field: 'username',
-        show: !unref(isUpdate),
-      },
       {
         field: 'institutionId',
         componentProps: {
@@ -99,11 +83,16 @@ import {ref, computed, unref, reactive} from 'vue';
   /**确定按钮*/
   async function handleSubmit() {
     try {
+      //拿到表单内容
       const values = await validate();
+      //通过表单获取的institutionId去查找相同TreeData中的institutionId的institutionName
+      const institutionName = TreeData.find(item => item.businessId === values.institutionId).institutionName
+      values.institutionName = institutionName
       setModalProps({ confirmLoading: true });
       // 编辑
       if(unref(isUpdate)) {
         values.businessId = rowId.value
+        //修改列表值
         emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
         createMessage.success('编辑成功');
         closeModal();

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

@@ -6,27 +6,7 @@ import { Switch } from 'ant-design-vue';
 import {useMessage} from "@/hooks/web/useMessage";
 import {changeFlagApi} from "@/api/system/user/user"; // 引入开关组件
 type CheckedType = boolean | string | number;
-/**
- * transform mock data
- * {
- *  0: '华东分部',
- * '0-0': '华东分部-研发部'
- * '0-1': '华东分部-市场部',
- *  ...
- * }
- */
-export const deptMap = (() => {
-  const pDept = ['华东分部', '华南分部', '西北分部'];
-  const cDept = ['研发部', '市场部', '商务部', '财务部'];
 
-  return pDept.reduce((map, p, pIdx) => {
-    map[pIdx] = p;
-
-    cDept.forEach((c, cIndex) => (map[`${pIdx}-${cIndex}`] = `${p}-${c}`));
-
-    return map;
-  }, {});
-})();
 
 export const columns: BasicColumn[] = [
   {
@@ -53,7 +33,6 @@ export const columns: BasicColumn[] = [
     // },
   },
 ];
-
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'name',
@@ -73,39 +52,7 @@ export const searchFormSchema: FormSchema[] = [
     },
     colProps: { span: 7 },
   },
-  {
-    field: 'flag',
-    label: '状态',
-    component: 'Select',
-    componentProps: {
-      placeholder: '请选择状态',
-      options: [
-        { label: '启用', value: '1' },
-        { label: '停用', value: '0' },
-      ],
-    },
-    colProps: { span: 7 },
-  },
 ];
-export const resetPasswordFormSchema: any[] = [
-  {
-    field: 'newPassword',
-    label: '新密码',
-    component: 'InputPassword',
-    componentProps: {
-      placeholder: '请输入8~16位，由字母和数字混合所组成的新密码',
-    },
-    required: true,
-    // ifShow: false,
-  },
-]
-const passwordCheck = (rule, value, callback) => {
-  const pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
-  if (!pattern.test(value)) {
-    callback(new Error('新密码必须为数字与字母的组合'))
-  }
-  callback()
-}
 export const accountFormSchema: any[] = [
   {
     field: 'name',
@@ -157,16 +104,22 @@ export const accountFormSchema: any[] = [
     },
     required: true,
   },
-  // {
-  //   field: 'code',
-  //   label: '机构编码',
-  //   component: 'Input',
-  //   colProps: { lg: 24, md: 24 },
-  //   rules: [
-  //     {
-  //       required: true,
-  //       message: '请输入机构编码',
-  //     },
-  //   ],
-  // },
 ];
+
+/**移动*/
+export const MoveFormSchema: any[] = [
+  {
+    field: 'institutionId',
+    label: '所属机构',
+    component: 'TreeSelect',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      fieldNames: {
+        label: 'institutionName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+    required: true,
+  },
+]

src/views/system/institution/index.vue

@@ -4,8 +4,8 @@
     <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
       <template #toolbar>
         <a-button type="primary" @click="handleCreate">新增</a-button>
-        <a-button type="primary" @click="handleCreate">批量删除</a-button>
-        <a-button type="primary" @click="handleCreate">批量移动</a-button>
+        <a-button type="primary" @click="handleDeleteBatch">批量删除</a-button>
+        <a-button type="primary" @click="handleMoveBatch">批量移动</a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
@@ -27,7 +27,7 @@
               },
               {
                 label: '移动',
-                onClick: handleEdit.bind(null, record),
+                onClick: handleMove.bind(null, record),
               },
             ]"
           />
@@ -35,8 +35,7 @@
       </template>
     </BasicTable>
     <AccountModal @register="registerModal" @success="handleSuccess" />
-    <resetPassword @register="registerResetPassword" @success="handleResetPasswordSuccess" />
-    <importModal @register="registerImport" @success="handleImportSuccess" />
+    <MoveUser @register="registerMoveUser" @success="handleMoveSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -49,7 +48,7 @@
   import { useModal } from '@/components/Modal';
   import AccountModal from './AccountModal.vue';
   import importModal from './importModal.vue';
-  import resetPassword from './resetPassword.vue';
+  import MoveUser from './moveUser.vue';
   import { columns, searchFormSchema } from './account.data';
   import { useGo } from '@/hooks/web/usePage';
   import { downloadByData } from '@/utils/file/download';
@@ -59,6 +58,7 @@
   import {getMenuListByPage} from "@/api/system/menu/menu";
   import { userData } from "@/views/system/institution/institutionData";
   import user from "../../../../mock/sys/user";
+  import {forEach} from "lodash-es";
 
   defineOptions({ name: 'AccountManagement' });
   const { createMessage } = useMessage();
@@ -66,11 +66,10 @@
   const route = useRoute();
   const go = useGo();
   const [registerModal, { openModal }] = useModal();
-  const [registerResetPassword, { openModal: openResetPasswordModal }] = useModal();
-  const [registerImport, { openModal: openImportModal }] = useModal();
+  const [registerMoveUser, { openModal: openMoveUserModal }] = useModal();
   const searchInfo = reactive<Recordable>({});
   const tableData = ref([])
-  const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm }] = useTable({
+  const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
     title: '用户管理列表',
     api: async (params) => {
       console.log(params)
@@ -85,12 +84,19 @@
       };
       //过滤data中的数据，取出等于params.deptId的数据
       var data = []
+      //按照部门筛选 如果有进行过滤相应部门的  没有就赋值全部
       if (params.institutionId != undefined && params.institutionId != ''){
         data = tableData.value.filter((item) => item.institutionId === params.institutionId);
       } else {
         data = tableData.value
       }
-      console.log('data:',data)
+      if (params.name != undefined && params.name != '' && params.name != null){
+        //过滤出名字包含params.name的数据
+        data = data.filter((item) => item.name.includes(params.name));
+      }
+      if (params.username != undefined && params.username != '' && params.username != null){
+        data = data.filter((item) => item.username.includes(params.username));
+      }
       return { ...response, data: data };
     },
     rowKey: 'businessId',
@@ -116,6 +122,7 @@
       dataIndex: 'action',
     },
   });
+
   /** 新增按钮*/
   function handleCreate() {
     openModal(true, {
@@ -123,25 +130,39 @@
     });
   }
 
+  /**批量移动*/
+  function handleMoveBatch() {
+    const rowSelection = getRowSelection().selectedRowKeys;
+    openMoveUserModal(true, {
+      idList:rowSelection,
+      isMove: true,
+    });
+  }
+
+  /** 移动按钮*/
+  function handleMove(record: Recordable) {
+    openMoveUserModal(true, {
+      record,
+      isMove: true,
+    });
+  }
+
 /** 编辑按钮*/
   function handleEdit(record: Recordable) {
     openModal(true, {
       record,
-      isRemove: true,
+      isUpdate: true,
     });
   }
 
-  /** 重置密码按钮*/
-  function handleResetPassword(record: Recordable) {
-    openResetPasswordModal(true,{
-      record
-    })
-  }
-
-  /** 导入按钮*/
-  function handleImport() {
-    openImportModal(true,{
-    })
+  /**批量删除*/
+  function handleDeleteBatch() {
+    const rowSelection = getRowSelection().selectedRowKeys;
+    for (let i = 0; i < rowSelection.length; i++){
+      tableData.value.splice(tableData.value.findIndex(item => item.businessId === rowSelection[i]), 1);
+    }
+    createMessage.success('删除成功!');
+    reload();
   }
 
   /** 删除按钮*/
@@ -150,30 +171,47 @@
     createMessage.success('删除成功!');
     reload();
   }
+
   /** 导出按钮*/
   async function handleExport() {
     const params = Object.assign({},getSearchInfo(),getForm().getFieldsValue());
     const data = await exportUserList(params);
     downloadByData(data, '用户列表' + '.xlsx');
   }
+
   /** 导入成功*/
   function handleImportSuccess() {
     reload();
   }
+
   /** 新增/编辑成功*/
   function handleSuccess({ isUpdate, values }) {
     if (isUpdate) {
       // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
-      console.log('values:',values)
-      const result = updateTableDataRecord(values.id, values);
-      console.log('result:',result)
+      //修改表单的值
+      const result = updateTableDataRecord(values.businessId, values);
       reload();
     } else {
-      console.log('22222---:',values)
       tableData.value.push(values)
       reload();
     }
   }
+
+  /** 移动*/
+  function handleMoveSuccess({ isMove, values }) {
+    const rowSelection = getRowSelection().selectedRowKeys;
+    if (rowSelection.length > 0){
+      //批量移动
+      for (let i = 0; i < rowSelection.length; i++){
+        const result = updateTableDataRecord(values[i].institutionId, values[i]);
+      }
+    }else {
+      //单个移动
+      const result = updateTableDataRecord(values.businessId, values);
+    }
+    reload();
+  }
+
   /** 部门树的select*/
   function handleSelect(institutionId = '') {
     searchInfo.institutionId = institutionId;
@@ -183,6 +221,7 @@
   function handleView(record: Recordable) {
     go('/system/account_detail/' + record.id);
   }
+
   onMounted(() => {
     tableData.value = userData
     const path = route.path

src/views/system/institution/moveUser.vue

+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"  minHeight="50">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import {ref, computed, unref, reactive} from 'vue';
+import { BasicModal, useModalInner } from '@/components/Modal';
+import { BasicForm, useForm } from '@/components/Form';
+import {accountFormSchema, MoveFormSchema, resetPasswordFormSchema} from './account.data';
+import { getDeptList } from '@/api/system/dept/dept';
+import {resetUserPwd} from '@/api/system/user/user'
+import { encryptTwo } from '../../../../src/utils/jsencrypt.js'
+import { useMessage } from '@/hooks/web/useMessage';
+import {TreeData, userData} from "@/views/system/institution/institutionData";
+defineOptions({ name: 'AccountModal' });
+
+const emit = defineEmits(['success', 'register']);
+const { createMessage } = useMessage();
+const isUpdate = ref(true);
+const rowId = ref('');
+const idList = ref([])
+const rowData = ref([])
+//获取接口数据并放在下拉框里（这里是打开了一个弹框）
+//初始化表单
+const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+  labelWidth: 100,
+  baseColProps: { span: 24 },
+  schemas: MoveFormSchema,
+  showActionButtonGroup: false,
+  actionColOptions: {
+    span: 23,
+  },
+});
+//初始化弹框
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  //每次点击弹窗 需要清空存储的数据
+  rowData.value = []
+  //重置表单数据
+  resetFields();
+  setModalProps({ confirmLoading: false });
+  if (data.idList != null && data.idList != undefined && data.idList.length > 0){
+    //批量移动
+    //根据id查用户信息
+    idList.value = data.idList;
+    //过滤出userData中businessId与idList相等的数据
+    const result = userData.filter(item => data.idList.includes(item.businessId));
+    result.forEach(item => {
+      rowData.value.push(item)
+    })
+  }else {
+    rowData.value.push(data.record)
+    //单个移动
+    rowId.value = data.record.businessId;
+    setFieldsValue({
+      ...data.record,
+    });
+  }
+  const treeList =  handleTree(TreeData, 'businessId',undefined,undefined,undefined)
+  updateSchema([
+    {
+      field: 'institutionId',
+      componentProps: {
+        treeData: treeList
+      },
+    },
+  ]);
+});
+
+
+const getTitle = computed(() => ('移动用户'));
+
+/**确定按钮*/
+async function handleSubmit() {
+  try {
+    //校验并得到表单数据
+    const values = await validate();
+    setModalProps({ confirmLoading: true });
+    //拿到表单里修改后的值 进行修改赋值  传给父组件
+    console.log('rowData.value:',rowData.value)
+    rowData.value.forEach(item => {
+      item.institutionId = values.institutionId
+    })
+    emit('success', {  values: { ...rowData.value }})
+    createMessage.success('移动成功');
+    closeModal();
+  } finally {
+    setModalProps({ confirmLoading: false });
+  }
+}
+
+/**数组对象转成树*/
+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
+}
+</script>