实体详情页

src/router/routes/index.ts

@@ -149,6 +149,15 @@ export const DataWarehousePlanningRoute: AppRouteRecordRaw = {
         icon: '',
       },
     },
+    {
+      path: 'logicalModel/entity-detail',
+      name: 'logicalEntityModel',
+      component: () => import('@/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/index.vue'),
+      meta: {
+        title: '实体详情',
+        icon: '',
+      },
+    },
   ],
 };
 export const ModelRoute: AppRouteRecordRaw = {

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

@@ -29,7 +29,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import {reactive, onMounted, ref, defineProps} from 'vue';
+  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';
@@ -41,8 +41,8 @@ import {reactive, onMounted, ref, defineProps} from 'vue';
 
   defineOptions({ name: 'AccountManagement' });
   const props = defineProps({
-    editFlag: Boolean
-  })
+    editFlag: Boolean,
+  });
   const filterStore = useFilterStore();
   const route = useRoute();
   const searchInfo = reactive<Recordable>({});

src/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/enetity.data.ts

+import { BasicColumn } from '@/components/Table';
+
+export const propertyFormSchema: any[] = [
+  {
+    field: 'name',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入属性名称搜素',
+    },
+    colProps: { span: 4 },
+  },
+];
+export const propertyModelFormSchema: any[] = [
+  {
+    field: 'propName',
+    label: '属性名称',
+    component: 'Input',
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'fieldName',
+    label: '字段名称',
+    component: 'Input',
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'dataType',
+    label: '数据类型',
+    component: 'Input',
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'nullFlag',
+    label: '是否为空',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        { label: '否', value: '0' },
+        { label: '是', value: '1' },
+      ],
+    },
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'primaryFlag',
+    label: '是否主键',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        { label: '否', value: '0' },
+        { label: '是', value: '1' },
+      ],
+    },
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'length',
+    label: '长度',
+    component: 'Input',
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'precision',
+    label: '精度',
+    component: 'Input',
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'relationBasic',
+    label: '关联基础标准',
+    component: 'Select',
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'relationCode',
+    label: '关联公共代码',
+    component: 'Select',
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'describe',
+    label: '属性描述',
+    component: 'Input',
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+];
+export const propertyTable: BasicColumn[] = [
+  {
+    title: '属性名称',
+    dataIndex: 'propName',
+    width: 150,
+  },
+  {
+    title: '字段名称',
+    dataIndex: 'fieldName',
+    width: 150,
+  },
+  {
+    title: '数据类型',
+    dataIndex: 'dataType',
+    width: 150,
+  },
+  {
+    title: '是否为空',
+    dataIndex: 'nullFlag',
+    width: 150,
+  },
+  {
+    title: '是否主键',
+    dataIndex: 'primaryFlag',
+    width: 150,
+  },
+  {
+    title: '是否外键',
+    dataIndex: 'foreignFlag',
+    width: 150,
+  },
+  {
+    title: '关联属性',
+    dataIndex: 'relationValue',
+    width: 150,
+  },
+  {
+    title: '长度',
+    dataIndex: 'length',
+    width: 150,
+  },
+  {
+    title: '精度',
+    dataIndex: 'precision',
+    width: 150,
+  },
+  {
+    title: '关联基础标准',
+    dataIndex: 'relationBasic',
+    width: 150,
+  },
+  {
+    title: '关联公共代码',
+    dataIndex: 'relationCode',
+    width: 150,
+  },
+  {
+    title: '属性描述',
+    dataIndex: 'describe',
+    width: 150,
+  },
+];
+export const entityConnectionModelFormSchema: any[] = [
+  {
+    field: 'physicalModel',
+    label: '选择物理模型',
+    component: 'Select',
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'describe',
+    label: '关联描述',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+  },
+];
+export const entityConnectionTable: any[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 150,
+  },
+  {
+    title: '路径',
+    dataIndex: 'path',
+    width: 150,
+  },
+  {
+    title: '关联描述',
+    dataIndex: 'describe',
+    width: 150,
+  },
+  {
+    title: '关联时间',
+    dataIndex: 'time',
+    width: 150,
+  },
+  {
+    title: '操作用户',
+    dataIndex: 'operate',
+    width: 150,
+  },
+];

src/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/entityConnectionModel.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 {
+    entityConnectionModelFormSchema
+  } from "@/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/enetity.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: entityConnectionModelFormSchema,
+    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>

src/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/entityConnectionTable.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" @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>
+    <EntityConnectionModel @register="connectionModal" @success="connectionSuccess" />
+  </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 { useFilterStore } from '@/store/modules/filterData';
+  import { TreeData } from '@/views/dataWarehousePlanning/logicalModel/modelData';
+  import { useModal } from '@/components/Modal';
+  import {
+    entityConnectionTable,
+    propertyFormSchema
+  } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/enetity.data';
+  import { entityConnectionData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/entityData';
+  import EntityConnectionModel from './entityConnectionModel.vue';
+
+  defineOptions({ name: 'AccountManagement' });
+  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: 200 },
+    // 数据
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: entityConnectionData.length,
+        code: '',
+        message: '',
+        data: entityConnectionData,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    // 列
+    columns: entityConnectionTable,
+    rowSelection: 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/entityDetail/entityData.ts

+export const propertyData: any[] = [
+  {
+    propName: '业务日',
+    fieldName: 'biz_date',
+    dataType: 'varchar',
+    nullFlag: '0',
+    primaryFlag: '0',
+    foreignFlag: '0',
+    relationValue: '1',
+    length: '1',
+    precision: '1',
+    relationBasic: '1',
+    relationCode: '1',
+    describe: '1',
+  },
+  {
+    propName: '前结算价',
+    fieldName: 'last_clear_price',
+    dataType: 'decimal',
+    nullFlag: '1',
+    primaryFlag: '0',
+    foreignFlag: '0',
+    relationValue: '1',
+    length: '1',
+    precision: '1',
+    relationBasic: '1',
+    relationCode: '1',
+    describe: '1',
+  },
+  {
+    propName: '合约号',
+    fieldName: 'contract_id',
+    dataType: 'varchar',
+    nullFlag: '0',
+    primaryFlag: '0',
+    foreignFlag: '0',
+    relationValue: '1',
+    length: '1',
+    precision: '1',
+    relationBasic: 'basic',
+    relationCode: 'common',
+    describe: '1',
+  },
+  {
+    propName: '结算价',
+    fieldName: 'clear_price',
+    dataType: 'decimal',
+    nullFlag: '0',
+    primaryFlag: '0',
+    foreignFlag: '0',
+    relationValue: null,
+    length: null,
+    precision: null,
+    relationBasic: null,
+    relationCode: null,
+    describe: null,
+  },
+];
+export const entityConnectionData: any[] = [
+  {
+    name: '名称1',
+    path: '路径1',
+    describe: '关联描述1',
+    time: '关联时间1',
+    operate: '操作用户1',
+  },
+];

src/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/index.vue

+<template>
+  <PageWrapper :title="infoData.name" contentBackground headerSticky>
+    <template #extra>
+      <a-button type="primary">编辑</a-button>
+    </template>
+    <Descriptions title="基本信息" style="margin: 10px 12px" :column="2">
+      <Descriptions.Item label="实体名称" style="padding-left: 40px"
+        >{{ infoData.name }}
+      </Descriptions.Item>
+      <Descriptions.Item label="实体描述" style="padding-left: 40px"
+        >{{ infoData.txt }}
+      </Descriptions.Item>
+      <Descriptions.Item label="实体英文名" style="padding-left: 40px"
+        >{{ infoData.engName }}
+      </Descriptions.Item>
+      <Descriptions.Item label="资产责任人" style="padding-left: 40px"
+        >{{ infoData.person }}
+      </Descriptions.Item>
+      <Descriptions.Item label="所属部门" style="padding-left: 40px"
+        >{{ infoData.deptName }}
+      </Descriptions.Item>
+    </Descriptions>
+    <Property />
+    <EntityConnection />
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { PageWrapper } from '@/components/Page';
+  import { useRoute } from 'vue-router';
+  import { Descriptions } from 'ant-design-vue';
+  import Property from './propertyTabel.vue';
+  import EntityConnection from './entityConnectionTable.vue';
+
+  const route = useRoute();
+  const infoData = route.query;
+</script>
+
+<style lang="scss" scoped></style>

src/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/propertyModel.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 { propertyModelFormSchema } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/enetity.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: propertyModelFormSchema,
+    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>

src/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/propertyTabel.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"><DeleteTwoTone />批量删除</a-button>
+        <a-button type="primary" @click="handlePropertyModel"
+          ><PlusCircleTwoTone />新建属性</a-button
+        >
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="record[column.key] === null">
+          <span>-</span>
+        </template>
+        <template
+          v-else-if="
+            ['nullFlag', 'primaryFlag', 'foreignFlag', 'relationValue'].includes(column.key)
+          "
+        >
+          <span>{{ record[column.key] === '0' ? '否' : '是' }}</span>
+        </template>
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                onClick: handlePropertyEditModel.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <PropertyModel @register="propertyModal" @success="propertySuccess" />
+  </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 { propertyFormSchema, propertyTable } from './enetity.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 { useModal } from '@/components/Modal';
+  import { propertyData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/entityData';
+  import PropertyModel from './propertyModel.vue';
+
+  defineOptions({ name: 'AccountManagement' });
+  const filterStore = useFilterStore();
+  const route = useRoute();
+  const searchInfo = reactive<Recordable>({});
+  const tableData = ref([]);
+  // 模态框
+  const [propertyModal, { openModal }] = useModal();
+  // 实体新增
+  function handlePropertyModel() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+  // 实体编辑
+  function handlePropertyEditModel(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  // 模态框保存
+  function propertySuccess({ 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: 200 },
+    // 数据
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: propertyData.length,
+        code: '',
+        message: '',
+        data: propertyData,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    // 列
+    columns: propertyTable,
+    rowSelection: 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/entityTable.vue

@@ -10,12 +10,26 @@
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
           <TableAction
-            :actions="[
+            :actions="
+              editFlag
+                ? [
                     {
                       icon: 'clarity:contract-line',
                       onClick: handleEntityEditModel.bind(null, record),
                     },
-            ]"
+                    {
+                      // 删除
+                      icon: 'ant-design:delete-outlined',
+                      color: 'error',
+                    },
+                  ]
+                : [
+                    {
+                      icon: 'clarity:contract-line',
+                      onClick: handleEntityEditModel.bind(null, record),
+                    },
+                  ]
+            "
           />
         </template>
       </template>
@@ -24,20 +38,21 @@
   </div>
 </template>
 <script lang="ts" setup>
-import {reactive, onMounted, ref, defineProps} from 'vue';
+  import { reactive, onMounted, ref, defineProps } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
-  import { useRoute, onBeforeRouteLeave } from 'vue-router';
+  import {useRoute, onBeforeRouteLeave, useRouter} from 'vue-router';
   import { entityColumns, entityFormSchema } from './model.data';
   import { useFilterStore } from '@/store/modules/filterData';
   import { TreeData } from '@/views/dataWarehousePlanning/logicalModel/modelData';
   import { entityData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/modelData';
   import EntityModel from './entityModel.vue';
   import { useModal } from '@/components/Modal';
+  const { push } = useRouter();
 
   defineOptions({ name: 'AccountManagement' });
   const props = defineProps({
-    editFlag: Boolean
-  })
+    editFlag: Boolean,
+  });
   // 模态框
   const [entityModal, { openModal }] = useModal();
   // 实体新增
@@ -49,7 +64,10 @@ import {reactive, onMounted, ref, defineProps} from 'vue';
   // 实体编辑
   function handleEntityEditModel(record: Recordable) {
     // 跳转到详情
-
+    push({
+      path: '/dataWarehousePlanning/logicalModel/entity-detail',
+      query: record,
+    });
   }
   function entitySuccess({ isUpdate, values }) {
     if (isUpdate) {