逻辑模型详情

src/views/dataWarehousePlanning/logicalModel/modelDetail/connectionTable.vue

+<template>
+  <div>
+    <span class="table-title" style="font-size: 18px; margin: 12px 10px 0">实体关联关系</span>
+    <BasicTable @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <a-button type="primary" v-if="editFlag">批量删除</a-button>
+        <a-button type="primary" v-if="editFlag" @click="handleConnectionModel">新建关联</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                // 编辑
+                icon: 'clarity:note-edit-line',
+                onClick: handleConnectionEditModel.bind(null, record),
+              },
+              {
+                // 删除
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <ConnectionModel @register="connectionModal" @success="connectionSuccess" />
+  </div>
+</template>
+<script lang="ts" setup>
+import {reactive, onMounted, ref, defineProps} from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { useRoute, onBeforeRouteLeave } from 'vue-router';
+  import { connectionFormSchema, connectionTable } from './model.data';
+  import { useFilterStore } from '@/store/modules/filterData';
+  import { TreeData } from '@/views/dataWarehousePlanning/logicalModel/modelData';
+  import { connectionData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/modelData';
+  import { useModal } from '@/components/Modal';
+  import ConnectionModel from './connectionModel.vue';
+
+  defineOptions({ name: 'AccountManagement' });
+  const props = defineProps({
+    editFlag: Boolean
+  })
+  const filterStore = useFilterStore();
+  const route = useRoute();
+  const searchInfo = reactive<Recordable>({});
+  const tableData = ref([]);
+  // 模态框
+  const [connectionModal, { openModal }] = useModal();
+  // 实体新增
+  function handleConnectionModel() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+  // 实体编辑
+  function handleConnectionEditModel(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  function connectionSuccess({ isUpdate, values }) {
+    if (isUpdate) {
+      // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
+      //修改表单的值
+      const result = updateTableDataRecord(values.businessId, values);
+      reload();
+    } else {
+      tableData.value.push(values);
+      reload();
+    }
+  }
+  const [
+    registerTable,
+    { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+  ] = useTable({
+    title: '',
+    // 定高
+    scroll: { y: 150 },
+    // 数据
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: connectionData.length,
+        code: '',
+        message: '',
+        data: connectionData,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    // 列
+    columns: connectionTable,
+    rowSelection: true,
+    // 搜索
+    formConfig: {
+      labelWidth: 120,
+      schemas: connectionFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+
+  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) => {
+    next(); // 允许导航
+  });
+</script>
+<style scoped lang="scss">
+  .vben-basic-table-form-container {
+    padding: 0;
+  }
+</style>

src/views/dataWarehousePlanning/logicalModel/modelDetail/crossTable.vue

+<template>
+  <div>
+    <BasicTable @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <a-button type="primary"><DeleteTwoTone />批量删除</a-button>
+        <a-button type="primary" @click="handleCrossModel"
+          ><PlusCircleTwoTone />新增关联关系</a-button
+        >
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                onClick: handleCrossEditModel.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <CrossModel @register="crossModal" @success="crossSuccess" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { reactive, onMounted, ref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { useRoute, onBeforeRouteLeave } from 'vue-router';
+  import { crossFormSchema, crossTable } from './model.data';
+  import { useFilterStore } from '@/store/modules/filterData';
+  import { TreeData } from '@/views/dataWarehousePlanning/logicalModel/modelData';
+  import { crossData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/modelData';
+  import { DeleteTwoTone, PlusCircleTwoTone } from '@ant-design/icons-vue';
+  import CrossModel from './crossModel.vue';
+  import { useModal } from '@/components/Modal';
+
+  defineOptions({ name: 'AccountManagement' });
+  const filterStore = useFilterStore();
+  const route = useRoute();
+  const searchInfo = reactive<Recordable>({});
+  const tableData = ref([]);
+  // 模态框
+  const [crossModal, { openModal }] = useModal();
+  // 实体新增
+  function handleCrossModel() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+  // 实体编辑
+  function handleCrossEditModel(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  // 模态框保存
+  function crossSuccess({ isUpdate, values }) {
+    if (isUpdate) {
+      // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
+      //修改表单的值
+      const result = updateTableDataRecord(values.businessId, values);
+      reload();
+    } else {
+      tableData.value.push(values);
+      reload();
+    }
+  }
+  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: crossData.length,
+        code: '',
+        message: '',
+        data: crossData,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    // 列
+    columns: crossTable,
+    rowSelection: true,
+    // 搜索
+    formConfig: {
+      labelWidth: 120,
+      schemas: crossFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+
+  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) => {
+    next(); // 允许导航
+  });
+</script>
+<style scoped lang="scss">
+  .vben-basic-table-form-container {
+    padding: 0;
+  }
+</style>

src/views/dataWarehousePlanning/logicalModel/modelDetail/entityModel.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 { EntityModelFormSchema } from './model.data';
+
+  defineOptions({ name: 'ModelModal' });
+
+  const isUpdate = ref(false);
+  const isMove = ref(false);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: EntityModelFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    isMove.value = !!data?.isMove;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+      // 塞值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+
+  const getTitle = computed(() => (isUpdate.value ? '编辑实体' : '新建实体'));
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    await validate();
+    closeModal();
+  }
+</script>