逻辑模型

src/views/dataWarehousePlanning/logicalModel/ModelTree.vue

+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+    <BasicTree
+      ref="treeRef"
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      :clickRowToExpand="true"
+      :defaultExpandAll="true"
+      :treeData="treeData"
+      :fieldNames="{ key: 'businessId', title: 'modelName' }"
+      @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 { TreeData } from '@/views/metaModel/knowledgeModel/modelData';
+
+  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(keys) {
+    emit('select', keys[0]);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+</script>

src/views/dataWarehousePlanning/logicalModel/index.vue

+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <ModelTree 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 type="primary" @click="handleCreateFile">新建文件夹</a-button>
+        <a-button type="primary" @click="handleCreateModel">新建元模型</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                // icon: 'clarity:note-edit-line',
+                label: '编辑',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                color: 'error',
+                label: '删除',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+              {
+                label: '移动',
+                onClick: handleMove.bind(null, record),
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <ModelModal @register="registerModal" @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 ModelTree from './ModelTree.vue';
+import { useMessage } from '@/hooks/web/useMessage';
+import { useModal } from '@/components/Modal';
+import ModelModal from './modelModal.vue';
+import { columns, searchFormSchema } from './model.data';
+import { useGo } from '@/hooks/web/usePage';
+import { useRoute, onBeforeRouteLeave } from 'vue-router';
+import { useFilterStore } from '@/store/modules/filterData';
+import { TreeData } from '@/views/dataWarehousePlanning/logicalModel/modelData';
+
+defineOptions({ name: 'AccountManagement' });
+const { createMessage } = useMessage();
+const filterStore = useFilterStore();
+const route = useRoute();
+const go = useGo();
+const [registerModal, { openModal }] = useModal();
+const [registerAddUserModal, { openModal: addUserModal }] = useModal();
+const [registerMoveUser, { openModal: openMoveUserModal }] = useModal();
+const searchInfo = reactive<Recordable>({});
+const tableData = ref([]);
+const [
+  registerTable,
+  { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+] = useTable({
+  title: '',
+  api: async (params) => {
+    console.log('params:', params);
+    const response = {
+      pageNu: '1',
+      pageSize: '10',
+      pages: '1',
+      total: tableData.value.length,
+      code: '',
+      message: '',
+      data: [],
+    };
+    //过滤data中的数据，取出等于params.deptId的数据
+    var data = [];
+    //按照部门筛选 如果有进行过滤相应部门的  没有就赋值全部
+    var data = [];
+    data = tableData.value.filter((item) => item.businessId !== 100);
+    return { ...response, data: data };
+  },
+  rowKey: 'businessId',
+  columns,
+  rowSelection: true,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    autoSubmitOnEnter: true,
+    resetFunc: () => {
+      searchInfo.modelId = '';
+    },
+  },
+  useSearchForm: true,
+  showTableSetting: false,
+  bordered: true,
+  handleSearchInfoFn(info) {
+    return info;
+  },
+  actionColumn: {
+    width: 150,
+    title: '操作',
+    dataIndex: 'action',
+  },
+});
+
+/** 新增元模型*/
+function handleCreateModel() {
+  openModal(true, {
+    isUpdate: false,
+  });
+}
+
+/** 新增文件夹*/
+function handleCreateFile() {
+  openModal(true, {
+    isUpdate: false,
+  });
+}
+
+/** 移动按钮*/
+function handleMove(record: Recordable) {
+  openMoveUserModal(true, {
+    record,
+    isMove: true,
+  });
+}
+
+/** 编辑按钮*/
+function handleEdit(record: Recordable) {
+  openModal(true, {
+    record,
+    isUpdate: true,
+  });
+}
+
+/** 删除按钮*/
+function handleDelete(record: Recordable) {
+  tableData.value.splice(
+    tableData.value.findIndex((item) => item.businessId === record.businessId),
+    1,
+  );
+  createMessage.success('删除成功!');
+  reload();
+}
+
+/** 新增/编辑成功*/
+function handleSuccess({ isUpdate, values }) {
+  if (isUpdate) {
+    // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
+    //修改表单的值
+    const result = updateTableDataRecord(values.businessId, values);
+    reload();
+  } else {
+    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(modelId = '') {
+  searchInfo.modelId = modelId;
+  reload();
+}
+
+function handleView(record: Recordable) {
+  go('/system/account_detail/' + record.id);
+}
+
+onMounted(() => {
+  tableData.value = TreeData;
+  const path = route.path;
+  if (filterStore.getSearchParams[path]) {
+    if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
+      const params = JSON.parse(filterStore.getSearchParams[path]);
+      getForm().setFieldsValue({
+        page: params.page,
+        pageSize: params.pageSize,
+        username: params.username,
+        flag: params.flag,
+      });
+      searchInfo.institutionId = params.institutionId;
+    }
+  }
+});
+onBeforeRouteLeave((to, from, next) => {
+  const params = Object.assign({}, getSearchInfo(), getForm().getFieldsValue());
+  filterStore.setSearchParams({
+    path: from.path,
+    param: {
+      ...params,
+    },
+  });
+  next(); // 允许导航
+});
+</script>

src/views/dataWarehousePlanning/logicalModel/model.data.ts

+import { getAllRoleList } from '@/api/system/role/role';
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Tag, Switch } from 'ant-design-vue';
+import { useMessage } from '@/hooks/web/useMessage';
+import { changeFlagApi } from '@/api/system/user/user';
+// 引入开关组件
+type CheckedType = boolean | string | number;
+
+export const columns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'modelName',
+    width: 150,
+    // onEditRow: true,
+  },
+  {
+    title: '英文名',
+    dataIndex: 'EngName',
+    width: 150,
+    // onEditRow: true,
+  },
+  {
+    title: '描述',
+    dataIndex: 'describe',
+    width: 150,
+    // onEditRow: true,
+  },
+  {
+    title: '工作区',
+    dataIndex: 'workArea',
+    width: 150,
+    // onEditRow: true,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createDate',
+    width: 150,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateDate',
+    width: 150,
+  },
+  {
+    title: '拥有者',
+    dataIndex: 'holder',
+    width: 150,
+  },
+];
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入元模型名称',
+    },
+    colProps: { span: 7 },
+  },
+];
+export const modelFormSchema: any[] = [
+  {
+    field: 'modelId',
+    label: '路径',
+    component: 'TreeSelect',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      fieldNames: {
+        label: 'modelName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+    required: true,
+  },
+  {
+    field: 'name',
+    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/dataWarehousePlanning/logicalModel/modelData.ts

+import { getAllRoleList } from '@/api/system/role/role';
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Tag, Switch } from 'ant-design-vue';
+import { useMessage } from '@/hooks/web/useMessage';
+import { changeFlagApi } from '@/api/system/user/user';
+// 引入开关组件
+type CheckedType = boolean | string | number;
+
+export const TreeData: any[] = [
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 100,
+    modelName: '知识库模型',
+    parentId: 0,
+    'code:': '001',
+    ancestors: '0',
+    orderNum: 0,
+    holder: 'admin',
+    createDate: '2024-10-24 10:04:04',
+    updateDate: '2024-10-24 10:04:04',
+    // "children" : [ ],
+    selectType: null,
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 101,
+    modelName: '知识库模型1',
+    parentId: 100,
+    'code:': '002',
+    ancestors: '0,100',
+    orderNum: 1,
+    // "children" : [ ],
+    selectType: null,
+    holder: 'admin',
+    createDate: '2024-10-24 10:04:04',
+    updateDate: '2024-10-24 10:04:04',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 102,
+    modelName: '知识库模型2',
+    parentId: 100,
+    'code:': '002',
+    ancestors: '0,100',
+    orderNum: 1,
+    // "children" : [ ],
+    selectType: null,
+    holder: 'admin',
+    createDate: '2024-10-24 10:04:04',
+    updateDate: '2024-10-24 10:04:04',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 103,
+    modelName: '知识库模型3',
+    parentId: 100,
+    'code:': '002',
+    ancestors: '0,100',
+    orderNum: 1,
+    // "children" : [ ],
+    selectType: null,
+    holder: 'admin',
+    createDate: '2024-10-24 10:04:04',
+    updateDate: '2024-10-24 10:04:04',
+  },
+];
+
+export const modelData: any[] = [
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 309,
+    username: 'yonghu1',
+    nickName: '测试用户1',
+    userType: '1',
+    name: '测试用户1',
+    createDate: '2024-10-24 10:04:04',
+    institutionId: 105,
+    institutionName: '财务部门',
+    code: '123f',
+    identity: '1',
+    roleIds: null,
+    roleNames: '三级用户',
+    roleList: null,
+    menuList: [],
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 310,
+    username: 'yonghu2',
+    nickName: '测试用户2',
+    userType: '1',
+    name: '测试用户2',
+    createDate: '2024-10-25 10:05:05',
+    sex: '0',
+    institutionId: 105,
+    institutionName: '财务部门',
+    code: '123a',
+    identity: '1',
+    roleIds: null,
+    roleNames: null,
+    roleList: null,
+    menuList: [],
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 317,
+    username: 'yonghu3',
+    nickName: '测试用户3',
+    userType: '1',
+    name: '测试用户3',
+    createDate: '2024-10-26 10:06:06',
+    sex: '1',
+    institutionId: 102,
+    institutionName: '研发部门',
+    code: '123c',
+    identity: '1',
+    roleIds: null,
+    roleNames: '超级管理员',
+    roleList: null,
+    menuList: [],
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 318,
+    username: 'yonghu4',
+    nickName: '测试用户4',
+    userType: '1',
+    name: '测试用户4',
+    createDate: '2024-10-26 10:06:06',
+    sex: '1',
+    institutionId: 102,
+    institutionName: '研发部门',
+    code: '123b',
+    identity: '1',
+    roleIds: null,
+    roleNames: '超级管理员',
+    roleList: null,
+    menuList: [],
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 319,
+    username: 'yonghu5',
+    nickName: '测试用户5',
+    userType: '1',
+    name: '测试用户5',
+    createDate: '2024-10-26 10:06:06',
+    sex: '1',
+    institutionId: 102,
+    institutionName: '研发部门',
+    code: '123x',
+    identity: '1',
+    roleIds: null,
+    roleNames: '超级管理员',
+    roleList: null,
+    menuList: [],
+  },
+];
+
+export const editTableData: any[] = [
+  {
+    businessId: 1,
+    name: '数据源',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '库名',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '表名',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '资产类型',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '表类型',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '表注释',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '存储类型',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '是否为事务表',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '创建时间',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '创建者',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '发布时间',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '发布者',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+];
+export const editColumnData: any[] = [
+  {
+    businessId: 1,
+    name: '列名',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '字段类型',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '字段类型参数',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '长度',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '精度',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '是否可为空',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '字段注释',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+];
+export const editBucketData: any[] = [
+  {
+    businessId: 1,
+    name: '分桶数',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '分桶字段',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '排序字段',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '排序方式',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+];
+export const editAreaData: any[] = [
+  {
+    businessId: 1,
+    name: '分区类型',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '分区字段',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '分区名',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+  {
+    businessId: 1,
+    name: '分区值',
+    description: '',
+    englishName: '',
+    isWrite: 0,
+    isShow: 0,
+    type: '',
+  },
+];

src/views/dataWarehousePlanning/logicalModel/modelModal.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 { modelFormSchema } from './model.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { TreeData } from '@/views/metaModel/knowledgeModel/modelData';
+  import { router } from '@/router';
+
+  defineOptions({ name: 'ModelModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const isMove = ref(false);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: modelFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    isMove.value = !!data?.isMove;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+      // 塞值
+      setFieldsValue({
+        ...data.record,
+      });
+    }
+
+    const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
+    console.log('treeList', treeList);
+    updateSchema([
+      {
+        field: 'modelId',
+        componentProps: {
+          treeData: treeList,
+        },
+      },
+    ]);
+  });
+
+  const getTitle = computed(() => '新建元模型');
+
+  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() {
+    const values = await validate();
+    router.push({
+      path: '/metaModel/knowledgeModel/EditRowTable',
+      query: {},
+    });
+
+    closeModal();
+  }
+</script>