数仓规划 物理模型-模型查看

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

@@ -51,6 +51,52 @@ export const columns: BasicColumn[] = [
     // onEditRow:true
   },
 ];
+
+export const columnsDetail: BasicColumn[] = [
+  {
+    title: '列名',
+    dataIndex: 'name',
+    width: 150,
+    // onEditRow:true
+    slots: { customRender: 'sourceType' },
+  },
+  {
+    title: '字段类型',
+    dataIndex: 'type',
+    width: 150,
+    // onEditRow:true
+  },
+  {
+    title: '字段类型参数',
+    dataIndex: 'parameters',
+    width: 150,
+    // onEditRow:true
+  },
+  {
+    title: 'length',
+    dataIndex: 'length',
+    width: 150,
+    // onEditRow:true
+  },
+  {
+    title: '精度',
+    dataIndex: 'deptName',
+    width: 150,
+    // onEditRow:true
+  },
+  {
+    title: '是否可为空',
+    dataIndex: 'isNUll',
+    width: 150,
+    // onEditRow:true
+  },
+  {
+    title: '字段注释',
+    dataIndex: 'explain',
+    width: 150,
+    // onEditRow:true
+  },
+];
 export const importSchema: any[] = [
   {
     field: 'fileType',

src/views/dataWarehousePlanning/physicalModel/modelDetail/detailInfo.vue

 <template>
-  <div>列信息</div>
   <div style="display: flex">
     <div style="border-color: cyan; width: 30%">
       <div style="display: flex; margin-top: 15px">
@@ -14,7 +13,7 @@
                 {
                   // icon: 'clarity:note-edit-line',
                   label: '删除',
-                  onClick: handleEdit.bind(null, record),
+                  // onClick: handleEdit.bind(null, record),
                 },
               ]"
             />
@@ -24,7 +23,6 @@
     </div>
     <div style="border-color: #ee00ff; width: 70%"> <BasicForm @register="registerForm" /></div>
   </div>
-  <BasicForm @register="registerForm1" />
 </template>
 <script lang="ts" setup>
   import { ref, computed, unref, reactive } from 'vue';
@@ -106,23 +104,6 @@
       span: 23,
     },
   });
-  const [
-    registerForm1,
-    {
-      setFieldsValue: setValue,
-      updateSchema: updateValue,
-      resetFields: resetValue,
-      validate: validdate1,
-    },
-  ] = useForm({
-    labelWidth: 100,
-    baseColProps: { lg: 12, md: 24 },
-    schemas: ConnectionModelFormSchema,
-    showActionButtonGroup: false,
-    actionColOptions: {
-      span: 23,
-    },
-  });
   //初始化弹框
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
     await resetFields();

src/views/dataWarehousePlanning/physicalModel/modelDetail/index.vue

@@ -109,8 +109,45 @@
           <!--            }"-->
           <!--          />-->
         </Tabs.TabPane>
-        <Tabs.TabPane key="2" tab="详细信息" style="overflow-y: hidden">
-          <EntityTable :editFlag="editFlag" />
+        <Tabs.TabPane key="2" tab="详细信息">
+          <div>
+            <div style="margin-top: 15px; font-weight: bold">列信息</div>
+            <DetailInfo v-if="editFlag" />
+            <BasicTable v-else @register="registerTable" :searchInfo="searchInfo" />
+            <BasicForm @register="registerForm1">
+              <template #table3="{ model, field }">
+                <div style="margin-top: 15px; font-weight: bold">分区信息</div>
+              </template>
+              <template #areaType="{ model, field }">
+                <span v-if="!editFlag">{{ model[field] }}</span>
+                <Select v-else v-model:value="model[field]" allowClear style="width: 300px">
+                  <Select.Option value="测试类型">测试类型</Select.Option>
+                  <Select.Option value="测试类型1">测试类型1</Select.Option>
+                </Select>
+              </template>
+              <template #areaField="{ model, field }">
+                <span v-if="!editFlag">{{ model[field] }}</span>
+                <Select v-else v-model:value="model[field]" allowClear style="width: 300px">
+                  <Select.Option value="测试类型">测试类型</Select.Option>
+                  <Select.Option value="测试类型1">测试类型1</Select.Option>
+                </Select>
+              </template>
+              <template #table4="{ model, field }">
+                <div style="margin-top: 15px; font-weight: bold">分区信息</div>
+              </template>
+              <template #sonName="{ model, field }">
+                <span v-if="!editFlag">{{ model[field] }}</span>
+                <a-input v-else v-model:value="model[field]" style="width: 300px" />
+              </template>
+              <template #sonPK="{ model, field }">
+                <span v-if="!editFlag">{{ model[field] }}</span>
+                <Select v-else v-model:value="model[field]" allowClear style="width: 300px">
+                  <Select.Option value="测试类型">测试类型</Select.Option>
+                  <Select.Option value="测试类型1">测试类型1</Select.Option>
+                </Select>
+              </template>
+            </BasicForm>
+          </div>
         </Tabs.TabPane>
       </Tabs>
     </template>
@@ -123,17 +160,25 @@
   import { useRoute, onBeforeRouteLeave } from 'vue-router';
   import { useFilterStore } from '@/store/modules/filterData';
   import { Descriptions, Select, Tabs } from 'ant-design-vue';
-  import EntityTable from './detailInfo.vue';
-  import CrossTable from './crossTable.vue';
-  import { infoData } from '@/views/dataWarehousePlanning/physicalModel/modelDetail/modelData';
+  import DetailInfo from './detailInfo.vue';
+  import {
+    infoData,
+    searchFormSchema,
+  } from '@/views/dataWarehousePlanning/physicalModel/modelDetail/modelData';
   import { FormSchema, useForm } from '@/components/Form';
   import { useModal } from '@/components/Modal';
   import ModelDebug from './modelDebug.vue';
   import BasicForm from '@/components/Form/src/BasicForm.vue';
-  import { editFormSchema } from '@/views/dataWarehousePlanning/physicalModel/modelDetail/model.data';
+  import {
+    ConnectionModelFormSchema,
+    editFormSchema,
+  } from '@/views/dataWarehousePlanning/physicalModel/modelDetail/model.data';
   import { cloneDeep } from 'lodash-es';
   import ImportModal from '@/views/dataWarehousePlanning/physicalModel/importModal.vue';
   import ModelAdd from '@/views/dataWarehousePlanning/physicalModel/modelAdd.vue';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { TableAction, useTable } from '@/components/Table';
+  import { columns, columnsDetail } from '@/views/dataWarehousePlanning/physicalModel/model.data';
 
   const [registerModal, { openModal }] = useModal();
   const [registerDebugModal, { openModal: openDebugModal }] = useModal();
@@ -158,6 +203,71 @@
       span: 23,
     },
   });
+  const [
+    registerForm1,
+    {
+      setFieldsValue: setValue,
+      updateSchema: updateValue,
+      resetFields: resetValue,
+      validate: validdate1,
+    },
+  ] = useForm({
+    labelWidth: 108,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: ConnectionModelFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  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: 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',
+    columnsDetail,
+    rowSelection: true,
+    formConfig: {
+      labelWidth: 100,
+      schemas: searchFormSchema,
+      showActionButtonGroup: false,
+      autoSubmitOnEnter: true,
+      resetFunc: () => {
+        searchInfo.modelId = '';
+      },
+    },
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
   /**
    * 导出
    */
@@ -177,7 +287,6 @@
    */
   function handleEdit() {
     editFlag.value = true;
-    tabsKey.value = '1';
     tableRefresh.value = false;
     nextTick(() => {
       tableRefresh.value = true;

src/views/dataWarehousePlanning/physicalModel/modelDetail/model.data.ts

@@ -381,38 +381,40 @@ export const EntityModelFormSchema: any[] = [
 // connectionModel
 export const ConnectionModelFormSchema: any[] = [
   {
-    field: 'areaType',
-    label: '分区信息',
-    component: 'Divider',
+    field: 'table3',
+    slot: 'table3',
     colProps: { lg: 24, md: 24 },
   },
   {
     field: 'areaType',
     label: '分区类型',
+    slot: 'areaType',
     component: 'Select',
     colProps: { lg: 12, md: 12 },
   },
   {
     field: 'areaField',
     label: '分区字段',
+    slot: 'areaField',
     component: 'Select',
     colProps: { lg: 12, md: 12 },
   },
   {
-    field: 'fatherNum',
-    label: '分桶信息',
-    component: 'Divider',
+    field: 'table4',
+    slot: 'table4',
     colProps: { lg: 24, md: 24 },
   },
   {
     field: 'sonName',
     label: '分桶数',
+    slot: 'sonName',
     component: 'Input',
     colProps: { lg: 12, md: 12 },
   },
   {
     field: 'sonPK',
     label: '分桶字段',
+    slot: 'sonPK',
     component: 'Select',
     colProps: { lg: 12, md: 12 },
   },

src/views/dataWarehousePlanning/physicalModel/modelDetail/modelData.ts

@@ -32,7 +32,7 @@ export const searchFormSchema: FormSchema[] = [
     componentProps: {
       placeholder: '输入字段名称或字段注释搜索',
     },
-    colProps: { span: 24 },
+    colProps: { span: 12 },
   },
 ];
 export const entityData: any[] = [