元数据

src/views/metadata/GroupTree.vue

+<template>
+  <div class="m-5 mr-0 overflow-hidden bg-white">
+    <BasicTree
+      title=""
+      ref="treeRef"
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      :clickRowToExpand="true"
+      :defaultExpandAll="true"
+      :treeData="treeData"
+      :fieldNames="{ key: 'businessId', title: 'workSpaceName' }"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { nextTick, onMounted, ref, unref } from 'vue';
+  import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
+  import { Nullable } from '@vben/types';
+  import { router } from '@/router';
+  import { TreeData } from '@/views/metadata/metadataData';
+
+  defineOptions({ name: 'DeptTree' });
+
+  const emit = defineEmits(['select']);
+
+  const treeData = ref<TreeItem[]>([]);
+  const treeRef = ref<Nullable<TreeActionType>>(null);
+  function getTree() {
+    const tree = unref(treeRef);
+    if (!tree) {
+      throw new Error('tree is null!');
+    }
+    return tree;
+  }
+
+  async function fetch() {
+    const data = TreeData;
+    treeData.value = handleTree(data, 'businessId', undefined, undefined, undefined);
+    await nextTick(() => {
+      getTree().expandAll(true);
+    });
+  }
+
+  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;
+  }
+
+  function handleSelect() {}
+
+  onMounted(() => {
+    fetch();
+  });
+</script>

src/views/metadata/data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '知识名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '描述',
+    dataIndex: 'remark',
+    width: 120,
+  },
+  {
+    title: '文号',
+    dataIndex: 'fileType',
+    width: 120,
+  },
+  {
+    title: '权属机构',
+    dataIndex: 'deptName',
+    width: 120,
+  },
+  {
+    title: '创建人',
+    dataIndex: 'createBy',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createDate',
+    width: 140,
+  },
+  {
+    title: '更新人',
+    dataIndex: 'updateBy',
+    width: 120,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateDate',
+    width: 120,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '知识名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'fileType',
+    label: '文号',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'createBy',
+    label: '创建人',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'createDate',
+    label: '创建开始时间',
+    component: 'DatePicker',
+    colProps: { span: 12 },
+  },
+  {
+    field: 'createDate',
+    label: '创建结束时间',
+    component: 'DatePicker',
+    colProps: { span: 12 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '知识名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'remark',
+    label: '描述',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'fileType',
+    label: '文号',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'deptName',
+    label: '权属机构',
+    component: 'TreeSelect',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      fieldNames: {
+        label: 'deptName',
+        value: 'deptName',
+      },
+      getPopupContainer: () => document.body,
+    },
+    required: true,
+  },
+  {
+    field: 'file',
+    label: '上传文件',
+    colProps: { lg: 24, md: 24 },
+    component: 'Upload',
+    componentProps: {
+      accept: '.doc,.docx,.pdf,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar',
+      maxSize: 1024 * 1024 * 10,
+      helpText: '支持jpg、jpeg、png格式，不超过2M，最多可选择10张图片，。',
+    },
+    required: true,
+  },
+];
+
+export const importFormSchema: FormSchema[] = [
+  {
+    field: 'deptName',
+    label: '导入至',
+    component: 'TreeSelect',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      fieldNames: {
+        label: 'deptName',
+        value: 'deptName',
+      },
+      getPopupContainer: () => document.body,
+    },
+    required: true,
+  },
+  {
+    field: 'file',
+    label: '导入文件',
+    colProps: { lg: 24, md: 24 },
+    component: 'Upload',
+    componentProps: {
+      accept: '.doc,.docx,.pdf,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar',
+      maxSize: 1024 * 1024 * 10,
+      helpText: '支持上传多个文件',
+    },
+    required: true,
+  },
+  {
+    field: 'flag',
+    label: '文件重名',
+    component: 'RadioGroup',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      options: [
+        { label: '全部覆盖', value: '0' },
+        { label: '全部放弃', value: '1' },
+        { label: '自动重命名', value: '2' },
+      ],
+    },
+    required: true,
+  },
+];

src/views/metadata/improtModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { computed, ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { getDeptList } from '@/api/system/dept/dept';
+  import { UserDetailApi } from '@/api/system/user/user';
+  import { importFormSchema } from '@/views/knowledgeBase/data';
+
+  defineOptions({ name: 'AccountModal' });
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: importFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+
+    const treeData = await getDeptList();
+    const treeList = handleTree(treeData.data, 'businessId', undefined, undefined, undefined);
+    updateSchema([
+      {
+        field: 'username',
+        show: !unref(isUpdate),
+      },
+      {
+        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() {
+    closeModal();
+  }
+</script>

src/views/metadata/index.vue

+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <GroupTree class="w-1/5 xl:w-1/8" @select="handleSelect" />
+    <BasicTable @register="registerTable" class="w-4/5 xl:w-7/8" :searchInfo="searchInfo">
+      <template #toolbar>
+        <a-button type="primary" @click="handleDeleteIds">删除</a-button>
+        <a-button type="primary" @click="download">下载</a-button>
+        <a-button type="primary" @click="handleImport">导入</a-button>
+        <a-button type="primary" @click="handleCreate">新建文件夹</a-button>
+        <a-button type="primary" @click="handleCreate">新建文件</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:contract-line',
+                label: '',
+                onClick: handleView.bind(null, record),
+              },
+              {
+                icon: 'clarity:download-line',
+                label: '',
+                onClick: download.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                label: '',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <knowledgeModal @register="registerModal" @success="handleSuccess" />
+    <importModal @register="registerImport" @success="handleSuccess" />
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { reactive, onMounted, ref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { PageWrapper } from '@/components/Page';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useModal } from '@/components/Modal';
+  import knowledgeModal from '@/views/knowledgeBase/knowledgeModal.vue';
+  import { useRoute, onBeforeRouteLeave } from 'vue-router';
+  import { useFilterStore } from '@/store/modules/filterData';
+  import { columns, searchFormSchema } from '@/views/knowledgeBase/data';
+  import GroupTree from '@/views/knowledgeBase/GroupTree.vue';
+  import { knowledgeData } from '@/views/knowledgeBase/knowledgeBaseData';
+  import importModal from '@/views/knowledgeBase/improtModal.vue';
+
+  defineOptions({ name: 'KnowledgeBase' });
+  const { createMessage } = useMessage();
+  const filterStore = useFilterStore();
+  const route = useRoute();
+  const [registerModal, { openModal }] = useModal();
+  const [registerImport, { openModal: openImportModal }] = useModal();
+  const searchInfo = reactive<Recordable>({});
+  const tableData = ref([]);
+  const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm }] = useTable({
+    title: '知识库',
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableData.value.length,
+        code: '',
+        message: '',
+        data: [],
+      };
+      //过滤data中的数据，取出等于params.deptId的数据
+      var data = [];
+      data = tableData.value.filter((item) => item.parentId !== 0);
+      return { ...response, data: data };
+    },
+    rowKey: 'businessId',
+    rowSelection: true,
+    striped: false,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+      resetFunc: () => {
+        searchInfo.deptId = '';
+      },
+    },
+    useSearchForm: true,
+    showIndexColumn: false,
+    showTableSetting: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      console.log('handleSearchInfoFn', info);
+      return info;
+    },
+    actionColumn: {
+      width: 140,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+  /** 新增按钮*/
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+  function handleImport() {
+    openImportModal(true, {
+      isUpdate: false,
+    });
+  }
+  /** 下载按钮*/
+  function download() {
+    createMessage.success('下载成功!');
+  }
+  /** 批量删除按钮*/
+  function handleDeleteIds() {
+    createMessage.success('批量删除成功!');
+  }
+  /** 重置密码弹窗确定按钮*/
+  /** 删除按钮*/
+  function handleDelete(record: Recordable) {
+    createMessage.success('删除成功!');
+    reload();
+  }
+  /** 新增/编辑成功*/
+  function handleSuccess({ isUpdate, values }) {
+    if (isUpdate) {
+      // 演示不刷新表格直接更新内部数据。
+      // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
+      const result = updateTableDataRecord(values.id, values);
+      console.log(result);
+      reload();
+    } else {
+      reload();
+    }
+  }
+  function handleView(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+      disable: true,
+    });
+  }
+  /** 部门树的select*/
+  function handleSelect(deptId = '') {
+    searchInfo.deptId = deptId;
+    reload();
+  }
+  onMounted(() => {
+    tableData.value = knowledgeData;
+    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/metadata/metaDataModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    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 { getDeptList } from '@/api/system/dept/dept';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { formSchema } from '@/views/knowledgeBase/data';
+  import { knowledgeData } from '@/views/knowledgeBase/knowledgeBaseData';
+
+  defineOptions({ name: 'KnowledgeModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const tableData = ref([]);
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, resetFields }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+      // 通过id获取行详情信息
+      tableData.value = knowledgeData;
+      var userData = [];
+      userData = tableData.value.filter((item) => item.businessId === rowId.value);
+      setFieldsValue(userData[0]);
+    }
+  });
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增文件' : '编辑文件'));
+
+  async function handleSubmit() {
+    closeModal();
+  }
+</script>

src/views/metadata/metadataData.ts

+export const TreeData: any[] = [
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 100,
+    workSpaceName: '数据库对象资源',
+    parentId: 0,
+    'code:': '001',
+    ancestors: '0',
+    orderNum: 0,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 101,
+    workSpaceName: 'admin-个人工作区',
+    parentId: 100,
+    'code:': '002',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 107,
+    workSpaceName: '共享工作区',
+    parentId: 100,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 2,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '0',
+    businessId: 203,
+    workSpaceName: '高级工作区',
+    parentId: 100,
+    'code:': '010',
+    ancestors: '0,100,107',
+    orderNum: 2,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+];
+
+export const knowledgeData: any[] = [
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 309,
+    name: '知识验收文件',
+    remark: '产品验收用',
+    fileType: 'test',
+    createDate: '2024-10-24 10:04:04',
+    createBy: 'admin',
+    deptName: '财务部门',
+    updateDate: '2024-10-24 10:04:04',
+    updateBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 310,
+    name: '知识库文件',
+    remark: '知识库文件',
+    fileType: 'test',
+    createDate: '2024-10-24 10:04:04',
+    createBy: 'admin',
+    deptName: '财务部门',
+    updateDate: '2024-10-24 10:04:04',
+    updateBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 317,
+    name: '知识库文件',
+    remark: '知识库文件',
+    fileType: 'test',
+    createDate: '2024-10-24 10:04:04',
+    createBy: 'admin',
+    deptName: '研发部门',
+    updateDate: '2024-10-24 10:04:04',
+    updateBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 318,
+    name: '知识库文件',
+    remark: '知识库文件',
+    fileType: 'test',
+    createDate: '2024-10-24 10:04:04',
+    createBy: 'admin',
+    deptName: '研发部门',
+    updateDate: '2024-10-24 10:04:04',
+    updateBy: 'admin',
+  },
+];
+
+export const accountFormSchema: any[] = [];