主体管理

src/views/mainBody/DeptTree.vue

+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+    <BasicTree
+      title="主体"
+      ref="treeRef"
+      toolbar
+      search
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      :clickRowToExpand="true"
+      :defaultExpandAll="true"
+      :treeData="treeData"
+      :fieldNames="{ key: 'key', title: 'title' }"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import {nextTick, onMounted, ref, unref} from 'vue';
+  import {BasicTree, TreeActionType, TreeItem} from '@/components/Tree';
+  import { getDeptList } from '@/api/system/dept/dept';
+  import {Nullable} from "@vben/types";
+  import {treeDataList} from "./mock";
+  defineOptions({ name: 'DeptTree' });
+
+  const emit = defineEmits(['select']);
+
+  const treeData = ref<TreeItem[]>([]);
+  const treeRef = ref<Nullable<TreeActionType>>(null);
+
+
+async function fetch() {
+    treeData.value = treeDataList
+  await nextTick(() => {
+    getTree().expandAll(true)
+  })
+  }
+function getTree() {
+  const tree = unref(treeRef);
+  if (!tree) {
+    throw new Error('tree is null!');
+  }
+  return tree;
+}
+
+
+  function handleSelect(keys) {
+    emit('select', keys[0]);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+</script>

src/views/mainBody/importModal.vue

+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"  minHeight="150">
+    <div style="display:flex;align-items: center">
+      <div type="info" style="font-size:12px;cursor: pointer" @click="importTemplate">下载模板</div>
+    </div>
+    <div slot="tip" class="el-upload__tip" style="color:red">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
+    <BasicUpload
+      :maxSize="20"
+      :maxNumber="1"
+      @change="handleChange"
+      :api="userImport"
+      class="my-5"
+      :accept="['.xlsx, .xls']"
+    />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import {ref, computed, unref, reactive} from 'vue';
+import { BasicModal, useModalInner } from '@/components/Modal';
+import { BasicUpload } from '@/components/Upload';
+import { downloadByData } from '@/utils/file/download';
+import { Tag, Row, Col, Upload, Button,Checkbox } from 'ant-design-vue';
+import {downImportTemplate,userImport} from '@/api/system/user/user'
+
+import { useMessage } from '@/hooks/web/useMessage';
+defineOptions({ name: 'AccountModal' });
+
+const emit = defineEmits(['success', 'register']);
+const { createMessage } = useMessage();
+const isUpdate = ref(true);
+
+
+//初始化弹框
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  setModalProps({ confirmLoading: false });
+});
+
+const getTitle = computed(() => ('主体导入'));
+
+/** 下载模板*/
+function importTemplate() {
+
+}
+
+function handleChange(list: string[]) {
+  console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',list)
+  createMessage.success(`文件上传成功`);
+}
+
+async function handleSubmit() {
+  try {
+    // const values = await validate();
+    setModalProps({ confirmLoading: true });
+    // TODO custom api
+    closeModal();
+    emit('success');
+
+  } finally {
+    setModalProps({ confirmLoading: false });
+  }
+}
+</script>

src/views/mainBody/index.vue

 <template>
-  <div>主体管理</div>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
+    <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
+      <template #toolbar>
+        <a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary" >删除</a-button>
+        <a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary" >导出</a-button>
+        <a-button type="primary" @click="handleImport">导入</a-button>
+        <a-button type="primary" >新增文件夹</a-button>
+        <a-button type="primary" >新增主体</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '编辑',
+              },
+              {
+                label: '预览',
+              },
+              {
+                label: '更多',
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <importModal @register="registerImport" @success="handleImportSuccess" />
+  </PageWrapper>
 </template>
-
 <script lang="ts" setup>
-</script>
+  import { reactive,unref,onDeactivated,onMounted } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+
+  import { PageWrapper } from '@/components/Page';
+  import DeptTree from './DeptTree.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useModal } from '@/components/Modal';
+  import importModal from './importModal.vue';
+  import {tableList} from "./mock";
+  import { columns, searchFormSchema } from './mainBody.data';
+  import { useGo } from '@/hooks/web/usePage';
+  import { downloadByData } from '@/utils/file/download';
+  import { useRoute,onBeforeRouteLeave } from 'vue-router';
+  import { useFilterStore } from '@/store/modules/filterData';
+  import {useUserStore} from "@/store/modules/user";
+  defineOptions({ name: 'AccountManagement' });
+  const { createMessage } = useMessage();
+  const filterStore = useFilterStore();
+  const route = useRoute();
+  const go = useGo();
+  const [registerImport, { openModal: openImportModal }] = useModal();
+  const searchInfo = reactive<Recordable>({});
+  const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
+    title: '主体管理列表',
+    api: async (params) => {
+      console.log('tableList',tableList)
+      const response = {
+        pageNu: "1",
+        pageSize: "10",
+        pages: "1",
+        total: tableList.length,
+        code:'',
+        message:'',
+        data: tableList,
+      };
 
-<style scoped>
+      return { ...response};
+    },
+    rowKey: 'businessId',
+    rowSelection: true,
+    columns,
+    formConfig: {
+      labelWidth: 10,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+      resetFunc: () => {
+        searchInfo.deptId=''
+      },
+    },
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      console.log('handleSearchInfoFn', info);
+      return info;
+    },
+    actionColumn: {
+      width: 170,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+    },
+  });
+  /** 新增按钮*/
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+/** 编辑按钮*/
+  function handleEdit(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  /** 重置密码按钮*/
+  function handleResetPassword(record: Recordable) {
+    openResetPasswordModal(true,{
+      record
+    })
+  }
+  /** 导入按钮*/
+  function handleImport() {
+    openImportModal(true,{
+    })
+  }
+  /** 重置密码弹窗确定按钮*/
+  /** 删除按钮*/
+  function handleDelete(record: Recordable) {
+    createMessage.success('删除成功!');
+    reload();
+  }
+  /** 导出按钮*/
+  async function handleExport() {
 
-</style>
+  }
+  /** 导入成功*/
+  function handleImportSuccess() {
+    reload();
+  }
+  /** 新增/编辑成功*/
+  function handleSuccess({ isUpdate, values }) {
+    if (isUpdate) {
+      // 演示不刷新表格直接更新内部数据。
+      // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
+      const result = updateTableDataRecord(values.id, values);
+      console.log(result);
+      reload();
+    } else {
+      reload();
+    }
+  }
+  /** 部门树的select*/
+  function handleSelect(deptId = '') {
+    searchInfo.deptId = deptId;
+    reload();
+  }
+
+  function handleView(record: Recordable) {
+    go('/system/account_detail/' + record.id);
+  }
+  onMounted(() => {
+    const path = route.path
+    if(filterStore.getSearchParams[path]) {
+      if(JSON.parse(filterStore.getSearchParams[path] !== {})){
+        const params = JSON.parse(filterStore.getSearchParams[path])
+        console.log('11111111111111111111111111111',params)
+        getForm().setFieldsValue({
+          page: params.page,
+          pageSize: params.pageSize,
+          username: params.username,
+          flag: params.flag,
+        })
+        searchInfo.deptId = params.deptId
+      }
+    }
+  });
+  onBeforeRouteLeave((to, from, next) => {
+    const params = Object.assign({},getSearchInfo(),getForm().getFieldsValue());
+    console.log('path',from.path)
+    console.log('params',params)
+    filterStore.setSearchParams(
+      {
+        path: from.path,
+        param: {
+          ...params
+        }
+      }
+    )
+    next(); // 允许导航
+  });
+</script>

src/views/mainBody/mainBody.data.ts

+import {getAllRoleList} from '@/api/system/role/role';
+import { BasicColumn, FormSchema } from '@/components/Table';
+import {h} from "vue";
+import {Tag} from "ant-design-vue";
+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[] = [
+  {
+    title: '主体名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '描述',
+    dataIndex: 'des',
+    width: 120,
+  },
+  {
+    title: '来源',
+    dataIndex: 'from',
+    width: 120,
+  },
+  {
+    title: '创建者',
+    dataIndex: 'creator',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createDate',
+    width: 200,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateDate',
+    width: 200,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+  },
+  {
+    field: 'flag',
+    label: ' ',
+    component: 'Select',
+    componentProps: {
+      placeholder: '按来源过滤',
+      options: [
+        { label: '指标汇总表', value: '1' },
+      ],
+    },
+    colProps: { span: 8 },
+  },
+];
+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: 'username',
+    label: '登录名',
+    component: 'Input',
+    // helpMessage: ['本字段演示异步验证', '不能输入带有admin的用户名'],
+    rules: [
+      {
+        required: true,
+        message: '请输入登录名',
+      },
+    ],
+  },
+  {
+    field: 'password',
+    label: '密码',
+    component: 'InputPassword',
+    rules: [
+      {
+        required: true,
+        message: '请输入用户密码',
+      },
+      { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' },
+      {
+        validator: passwordCheck,
+        trigger: 'blur'
+      }
+    ],
+  },
+  {
+    field: 'name',
+    label: '姓名',
+    component: 'Input',
+
+  },
+  {
+    field: 'nickName',
+    label: '昵称',
+    component: 'Input',
+
+  },
+  {
+    field: 'sex',
+    label: '性别',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '男', value: '1' },
+        { label: '女', value: '0' },
+      ],
+    },
+  },
+  {
+    field: 'phone',
+    label: '手机号码',
+    component: 'Input',
+    rules: [
+      { required: false, message: '请输入手机号码', trigger: 'blur' },
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: '请输入正确的手机号码',
+        trigger: 'blur'
+      }
+    ],
+  },
+  {
+    field: 'idNumber',
+    label: '身份证号',
+    component: 'Input',
+    rules: [
+      {
+        required: false,
+        message: '请输入身份证号',
+        trigger: 'blur'
+      },
+      { min: 18, max: 18, message: '长度18字符', trigger: 'blur' }
+    ],
+  },
+  {
+    field: 'email',
+    label: '邮箱',
+    component: 'Input',
+    rules: [
+      { required: false, message: '请输入邮箱地址', trigger: 'blur' },
+      {
+        type: 'email',
+        message: '请输入正确的邮箱地址',
+        trigger: ['blur', 'change']
+      }
+    ],
+  },
+  {
+    field: 'flag',
+    label: '状态',
+    component: 'RadioGroup',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      options: [
+        { label: '启用', value: '1' },
+        { label: '停用', value: '0' },
+      ],
+    },
+    required: true,
+  },
+  {
+    field: 'deptId',
+    label: '所属部门',
+    component: 'TreeSelect',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      fieldNames: {
+        label: 'deptName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+    required: true,
+  },
+  {
+    field: 'roleList',
+    label: '角色',
+    component: 'ApiSelect',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      // placeholder: '公开给',
+      mode: 'multiple',
+      api: getAllRoleList,
+      labelField: 'roleName',
+      valueField: 'businessId',
+      resultField:'data',
+    },
+    required: true,
+  },
+
+
+  {
+    label: '备注',
+    field: 'remarks',
+    component: 'InputTextArea',
+    colProps: { lg: 24, md: 24 },
+  },
+];

src/views/mainBody/mock.ts

+export const tableList: any[] = [
+  {
+    businessId: 1,
+    name: '指标导入',
+    des: '--------',
+    from: '指标汇总表',
+    creator: 'admin',
+    createDate: '2024-10-25 10:04:05',
+    updateDate: '2024-10-25 10:04:05',
+  },
+  {
+    businessId: 2,
+    name: '指标导入',
+    des: '--------',
+    from: '指标汇总表',
+    creator: 'admin',
+    createDate: '2024-10-25 10:04:05',
+    updateDate: '2024-10-25 10:04:05',
+  },
+  {
+    businessId: 3,
+    name: '指标导入',
+    des: '--------',
+    from: '指标汇总表',
+    creator: 'admin',
+    createDate: '2024-10-25 10:04:05',
+    updateDate: '2024-10-25 10:04:05',
+  },
+  {
+    businessId: 4,
+    name: '指标导入',
+    des: '--------',
+    from: '指标汇总表',
+    creator: 'admin',
+    createDate: '2024-10-25 10:04:05',
+    updateDate: '2024-10-25 10:04:05',
+  },
+  {
+    businessId: 5,
+    name: '指标导入',
+    des: '--------',
+    from: '指标汇总表',
+    creator: 'admin',
+    createDate: '2024-10-25 10:04:05',
+    updateDate: '2024-10-25 10:04:05',
+  },
+  {
+    businessId: 6,
+    name: '指标导入',
+    des: '--------',
+    from: '指标汇总表',
+    creator: 'admin',
+    createDate: '2024-10-25 10:04:05',
+    updateDate: '2024-10-25 10:04:05',
+  },
+  {
+    businessId: 7,
+    name: '指标导入',
+    des: '--------',
+    from: '指标汇总表',
+    creator: 'admin',
+    createDate: '2024-10-25 10:04:05',
+    updateDate: '2024-10-25 10:04:05',
+  },
+]
+
+export const treeDataList = [
+  {
+    title: '主体管理',
+    key: '0-0',
+    icon: 'home|svg',
+    children: [
+      { title: 'admin_个人工作区', key: '0-0-0' },
+      { title: '共享工作区', key: '0-0-1' },
+      { title: '商城工作区', key: '0-0-2' },
+      { title: '指标工作区', key: '0-0-2' },
+    ],
+  },
+]