数仓规划 物理模型建表

src/views/dataWarehousePlanning/physicalModel/index.vue

@@ -9,20 +9,31 @@
     >
       <template #toolbar>
         <a-button type="primary">建表记录</a-button>
-        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <=0">批量建表</a-button>
-        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <=0" @click="handleWaitUpload">设为待发布</a-button>
-        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <=0">发布</a-button>
+        <a-button
+          type="primary"
+          :disabled="getRowSelection().selectedRowKeys <= 0"
+          @click="handleMoreCreate"
+          >批量建表</a-button
+        >
+        <a-button
+          type="primary"
+          :disabled="getRowSelection().selectedRowKeys <= 0"
+          @click="handleWaitUpload"
+          >设为待发布</a-button
+        >
+        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0">发布</a-button>
         <a-button type="primary" @click="handleBaseImport">从元数据导入</a-button>
-        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <=0">导出</a-button>
+        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0">导出</a-button>
         <a-button type="primary" @click="handleImport">导入</a-button>
         <a-button type="primary" @click="handleCreateFolder">新建文件夹</a-button>
         <a-button type="primary" @click="handleCreateFile">新建文件</a-button>
-        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <=0" @click="handleDelete(record)">删除</a-button>
-        <RadioButtonGroup
-          @change="changeTable"
-          :options="labelName"
-          v-model:value="state"
-        />
+        <a-button
+          type="primary"
+          :disabled="getRowSelection().selectedRowKeys <= 0"
+          @click="handleDelete(record)"
+          >删除</a-button
+        >
+        <RadioButtonGroup @change="changeTable" :options="labelName" v-model:value="state" />
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
@@ -54,7 +65,8 @@
     <ModelModal @register="registerModal" @success="handleSuccess" />
     <ImportModal @register="registerImport" />
     <ModelAdd @register="registerModalAdd" />
-    <BaseImport  @register="registerBaseImport" />
+    <BaseImport @register="registerBaseImport" />
+    <ModelMoreCreate @register="registerMoreCreate" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -75,6 +87,7 @@
   import { TreeData, TreeSystem } from '@/views/dataWarehousePlanning/physicalModel/modelData';
   import ModelTree from '@/views/dataWarehousePlanning/physicalModel/ModelTree.vue';
   import RadioButtonGroup from '@/components/Form/src/components/RadioButtonGroup.vue';
+  import ModelMoreCreate from '@/views/dataWarehousePlanning/physicalModel/modelDetail/modelMoreCreate.vue';
 
   const { push } = useRouter();
   let baseImport = ref(false);
@@ -91,6 +104,7 @@
   const [registerModalAdd, { openModal: openModalAdd }] = useModal();
   const [registerMoveUser, { openModal: openMoveUserModal }] = useModal();
   const [registerBaseImport, { openModal: openBaseImportUserModal }] = useModal();
+  const [registerMoreCreate, { openModal: openMoreCreate }] = useModal();
   const searchInfo = reactive<Recordable>({});
   const tableData = ref([]);
   const [
@@ -122,7 +136,7 @@
       //按照部门筛选 如果有进行过滤相应部门的  没有就赋值全部
       var data = [];
       data = TreeSystem.filter((item) => item.businessId !== 100);
-      return { ...response, data: data };
+      return {...response, data: data};
     },
     rowKey: 'businessId',
     columns: columnsSystem,
@@ -173,6 +187,13 @@
     });
   }
 
+  /** 批量建表*/
+  function handleMoreCreate() {
+    openMoreCreate(true, {
+      isUpdate: false,
+    });
+  }
+
   /** 新建文件夹*/
   function handleCreateFolder() {
     openModalAdd(true, {

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

@@ -80,6 +80,15 @@ export const columnsData: BasicColumn[] = [
   },
 ];
 
+export const columnsMoreCreate = [
+  {
+    title: '物理模型名称',
+    dataIndex: 'physicalName',
+    width: 150,
+    // onEditRow:true
+  },
+]
+
 export const columnsDetail: BasicColumn[] = [
   {
     title: '列名',

src/views/dataWarehousePlanning/physicalModel/modelData.ts

@@ -154,6 +154,15 @@ export const TreeData: any[] = [
   },
 ];
 
+export const moreCreateData = [
+  {
+    physicalName: 'dw_prd_contract_quot_h_s',
+  },
+  {
+    physicalName: 'dw_prd_contract_quot_h_s',
+  },
+];
+
 export const editTableData: any[] = [
   {
     businessId: 1,

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

@@ -64,7 +64,7 @@
       //按照部门筛选 如果有进行过滤相应部门的  没有就赋值全部
       var data = [];
       data = tableData.value.filter((item) => item.businessId !== 100);
-      return { ...response, data: data };
+      return {...response, data: data};
     },
     rowKey: 'businessId',
     columns,

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

 <template>
   <PageWrapper :title="modelName" contentBackground headerSticky>
     <template #extra>
-      <a-button type="primary" v-if="!editFlag">自动建表</a-button>
-      <a-button type="primary" v-if="!editFlag">版本管理</a-button>
+      <a-button type="primary" v-if="!editFlag" @click="handleCreateTable">自动建表</a-button>
+      <a-button type="primary" v-if="!editFlag" @click="handleVersion">版本管理</a-button>
       <a-button type="primary" v-if="!editFlag" @click="handleExport">导出</a-button>
       <a-button type="primary" v-if="!editFlag" @click="handleEdit">编辑</a-button>
       <a-button type="primary" v-if="!editFlag">删除</a-button>
       <a-button type="primary" v-if="editFlag">编辑记录</a-button>
       <a-button type="primary" v-if="editFlag">设为待发布</a-button>
-      <a-button type="primary" v-if="editFlag">发布</a-button>
+      <a-button type="primary" disabled="editFlag" v-if="editFlag">发布</a-button>
       <a-button type="primary" v-if="editFlag" @click="handleDebug">建表调试</a-button>
       <a-button type="primary" v-if="editFlag" @click="handleSave">保存</a-button>
       <a-button type="primary" v-if="editFlag" @click="handleCancel">取消</a-button>
@@ -150,15 +150,18 @@
             </BasicForm>
           </div>
         </Tabs.TabPane>
-        <Tabs.TabPane key="3" tab="模型关联">
+        <Tabs.TabPane key="3" v-if="!editFlag" tab="模型关系" />
+        <Tabs.TabPane key="4" v-if="!editFlag" tab="模型关联">
           <SourceData style="margin-top: 20px" />
           <LogicalModel style="margin-top: 20px" />
           <SqlDevelop style="margin-top: 40px" />
         </Tabs.TabPane>
       </Tabs>
     </template>
+    <ModelDebug @register="registerDebugModal" />
+    <ModelCreateTable @register="registerCreateModal" />
+    <VersionModel @register="registerVersionModal" />
   </PageWrapper>
-  <ModelDebug @register="registerDebugModal" />
 </template>
 <script lang="ts" setup>
   import { reactive, onMounted, ref, nextTick, computed, unref } from 'vue';
@@ -189,9 +192,13 @@
   import { columnsDetail } from '@/views/dataWarehousePlanning/physicalModel/model.data';
   import CrossTable from '@/views/dataWarehousePlanning/logicalModel/modelDetail/crossTable.vue';
   import SqlDevelop from '@/views/dataWarehousePlanning/physicalModel/modelDetail/sqlDevelop.vue';
+  import ModelCreateTable from '@/views/dataWarehousePlanning/physicalModel/modelDetail/modelCreateTable.vue';
+  import VersionModel from '@/views/dataWarehousePlanning/physicalModel/modelDetail/versionModel.vue';
 
   const [registerModal, { openModal }] = useModal();
   const [registerDebugModal, { openModal: openDebugModal }] = useModal();
+  const [registerCreateModal, { openModal: openCreateModal }] = useModal();
+  const [registerVersionModal, { openModal: openVersionModal }] = useModal();
   defineOptions({ name: 'AccountManagement' });
   const tableRefresh = ref(true);
   const filterStore = useFilterStore();
@@ -213,11 +220,7 @@
       span: 23,
     },
   });
-  const [
-    registerForm1,
-    {
-    },
-  ] = useForm({
+  const [registerForm1, {}] = useForm({
     labelWidth: 108,
     baseColProps: { lg: 12, md: 24 },
     schemas: ConnectionModelFormSchema,
@@ -231,7 +234,7 @@
     { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
   ] = useTable({
     title: '',
-    scroll: { y: 200 },
+    scroll: {y: 200},
     api: async (params) => {
       console.log('params:', params);
       const response = {
@@ -243,7 +246,7 @@
         message: '',
         data: [],
       };
-      return { ...response };
+      return {...response};
     },
     rowKey: 'businessId',
     columns: columnsDetail,
@@ -277,6 +280,20 @@
     });
   }
 
+  /** 调试*/
+  function handleCreateTable() {
+    openCreateModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  /** 调试*/
+  function handleVersion() {
+    openVersionModal(true, {
+      isUpdate: false,
+    });
+  }
+
   /**
    * 编辑
    */

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

@@ -59,7 +59,7 @@
   ] = useTable({
     title: '逻辑模型',
     // 定高
-    scroll: { y: 150 },
+    scroll: {y: 150},
     // 数据
     api: async (params) => {
       console.log('params:', params);
@@ -72,7 +72,7 @@
         message: '',
         data: PhysicalData,
       };
-      return { ...response };
+      return {...response};
     },
     rowKey: 'businessId',
     // 列

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

@@ -14,7 +14,7 @@ export const entityColumns: BasicColumn[] = [
     // onEditRow: true,
   },
   {
-    title: '实体名称',
+    title: '数据源',
     dataIndex: 'dataBase',
     width: 150,
     // onEditRow: true,
@@ -291,6 +291,34 @@ export const MoveFormSchema: any[] = [
     required: true,
   },
 ];
+
+export const CreateFormSchema: any[] = [
+  {
+    field: 'tableVersion',
+    label: '建表版本',
+    component: 'Select',
+    componentProps: {
+      itemIcon: 'settings-outline',
+      options: [
+        { label: '版本V1.0', value: '版本V1.0' },
+        { label: '版本V1.1', value: '版本V1.1' },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+    required: true,
+    renderComponentContent: () => {
+      return {
+        prefix: () => 'pSlot',
+        suffix: () => 'sSlot',
+      };
+    },
+  },
+  {
+    field: 'fileMethods',
+    slot: 'fileMethods',
+    colProps: { lg: 24, md: 24 },
+  },
+];
 // entityModel
 export const EntityModelFormSchema: any[] = [
   {
@@ -379,3 +407,31 @@ export const ConnectionModelFormSchema: any[] = [
     colProps: { lg: 12, md: 12 },
   },
 ];
+
+export const versionModelFormSchema: any[] = [
+  {
+    field: 'key',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入关联关系名称搜索',
+    },
+    colProps: { lg: 12, md: 12 },
+  },
+  {
+    field: 'operator',
+    component: 'Select',
+    componentProps: {
+      placeholder: '发布人',
+    },
+    colProps: { lg: 12, md: 12 },
+  },
+  {
+    field: 'timeRange',
+    component: 'RangePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD HH:mm:ss',
+      placeholder: ['开始时间', '结束时间'],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+];

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

+<template>
+  <BasicModal
+    min-height="150"
+    width="40%"
+    v-bind="$attrs"
+    @register="registerCreateLogModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <Alert type="success" message="建表成功" show-icon />
+    <div style="margin: 20px 0">日志如下</div>
+    <div style="margin-top: 10px; width: 100%; height: 100%">
+      <img src="../../../../assets/images/createLog.png" />
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, reactive, defineEmits } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { CreateFormSchema } from '@/views/dataWarehousePlanning/physicalModel/modelDetail/model.data';
+  import { Alert } from 'ant-design-vue';
+  import { PageWrapper } from '@/components/Page';
+
+  defineOptions({ name: 'DebugModal' });
+  const emit = defineEmits();
+
+  const isUpdate = ref(true);
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: CreateFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerCreateLogModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({
+      confirmLoading: false,
+      height: 420,
+      showCancelBtn: false,
+      okText: '关闭',
+    });
+    isUpdate.value = !!data?.isUpdate;
+  });
+
+  async function handleSubmit() {
+    emit('setVersionFlag', true);
+    closeModal();
+  }
+
+  const getTitle = computed(() => '自动建表');
+</script>
+<style lang="scss" scoped>
+  .erchart-img {
+    height: 100px;
+  }
+</style>

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

+<template>
+  <BasicModal
+    min-height="100"
+    width="30%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <Alert message="当前物理模型未关联元数据，可进行新建创建，" show-icon />
+    <BasicForm style="margin-top: 20px" @register="registerForm">
+      <template #fileMethods="{ model, field }">
+        <div style="display: flex">
+          <div style="width: 200px; margin-top: -6px; margin-left: 100px; font-weight: 100"
+            >版本描述：1<br />创建时间：2023-0615 11:09:12</div
+          >
+        </div>
+      </template>
+    </BasicForm>
+    <ModelDDL @register="registerDDLModal" @set-create-flag="setCreateFlag" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, reactive, defineEmits } from 'vue';
+  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { CreateFormSchema } from '@/views/dataWarehousePlanning/physicalModel/modelDetail/model.data';
+  import { Alert } from 'ant-design-vue';
+  import { PageWrapper } from '@/components/Page';
+  import ModelDDL from '@/views/dataWarehousePlanning/physicalModel/modelDetail/modelDDL.vue';
+
+  defineOptions({ name: 'DebugModal' });
+  const [registerDDLModal, { openModal: openDDLModal }] = useModal();
+  const getTitle = computed(() => '自动建表');
+  const emit = defineEmits();
+
+  const isUpdate = ref(true);
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: CreateFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({
+      confirmLoading: false,
+      height: 420,
+    });
+    isUpdate.value = !!data?.isUpdate;
+  });
+
+  async function handleSubmit() {
+    openDDLModal(true, {
+      isUpdate: false,
+    });
+  }
+  function setCreateFlag() {
+    closeModal();
+    // try {
+    //   const values = await validate();
+    //   setModalProps({ confirmLoading: true });
+    //   // TODO custom api
+    //   closeModal();
+    //   let rowId;
+    //   emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+    // } finally {
+    //   setModalProps({ confirmLoading: false });
+    // }
+  }
+</script>
+<style lang="scss" scoped>
+  .erchart-img {
+    height: 100px;
+  }
+</style>

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

+<template>
+  <BasicModal
+    min-height="200"
+    width="40%"
+    v-bind="$attrs"
+    @register="registerDDLModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+    ww
+  >
+    <div style="margin-bottom: 20px">本次建表DDL详情如下，是否确认建表？</div>
+    <div style="display: flex; justify-content: space-between">
+      <div>DDL详情</div>
+      <div>
+        <a-button><Icon icon="ion:create-outline" /></a-button>
+        <a-button><Icon icon="ion:documents-outline" /></a-button>
+      </div>
+    </div>
+    <div style="margin-top: 10px; width: 100%; height: 100%">
+      <img src="../../../../assets/images/createTable.png" />
+    </div>
+    <ModelCreateLog @register="registerCreateLogModal" @set-version-flag="setVersionFlag" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import {ref, computed, unref, reactive, defineEmits} from 'vue';
+  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { CreateFormSchema } from '@/views/dataWarehousePlanning/physicalModel/modelDetail/model.data';
+  import { Alert } from 'ant-design-vue';
+  import { PageWrapper } from '@/components/Page';
+  import Icon from '@/components/Icon/Icon.vue';
+  import ModelCreateLog from '@/views/dataWarehousePlanning/physicalModel/modelDetail/modelCreateLog.vue';
+
+  const [registerCreateLogModal, { openModal: openCreateLogModal }] = useModal();
+
+const emit = defineEmits();
+  defineOptions({ name: 'DebugModal' });
+
+  const isUpdate = ref(true);
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  // //初始化表单
+  // const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+  //   labelWidth: 100,
+  //   baseColProps: { lg: 12, md: 24 },
+  //   schemas: CreateFormSchema,
+  //   showActionButtonGroup: false,
+  //   actionColOptions: {
+  //     span: 23,
+  //   },
+  // });
+  function setVersionFlag() {
+    emit('setCreateFlag');
+    closeModal();
+  }
+  //初始化弹框
+  const [registerDDLModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({
+      confirmLoading: false,
+      height: 420,
+    });
+    isUpdate.value = !!data?.isUpdate;
+  });
+
+  async function handleSubmit() {
+    openCreateLogModal(true, {
+      isUpdate: false,
+    });
+    // try {
+    //   const values = await validate();
+    //   setModalProps({ confirmLoading: true });
+    //   // TODO custom api
+    //   closeModal();
+    //   let rowId;
+    //   emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+    // } finally {
+    //   setModalProps({ confirmLoading: false });
+    // }
+  }
+
+  const getTitle = computed(() => 'DDL详情');
+</script>
+<style lang="scss" scoped>
+  .erchart-img {
+    height: 100px;
+  }
+</style>

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

@@ -29,11 +29,10 @@ export const searchFormSchema: FormSchema[] = [
   {
     field: 'nameOrExplain',
     label: '',
-    component: 'Input',
+    component: 'InputSearch',
     componentProps: {
       placeholder: '输入字段名称或字段注释搜索',
     },
-    colProps: { span: 12 },
   },
 ];
 export const entityData: any[] = [
@@ -75,3 +74,29 @@ export const sqlDevelopData: any[] = [
     operateName: 'admin',
   },
 ];
+
+export const versionTreeData: any[] = [
+  {
+    version: 'V1.x',
+    time: '2023/06/15 15:34:40',
+    remark: '',
+    created: '',
+    key: '0-0',
+    children: [
+      {
+        version: 'V1.1',
+        time: '2023/06/15 15:43:08',
+        remark: 'v2',
+        created: 'admin',
+        key: '0-0-0',
+      },
+      {
+        version: 'V1.0',
+        time: '2023/06/15 15:34:40',
+        remark: '1',
+        created: '',
+        key: '0-0-1',
+      },
+    ],
+  },
+];

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

 <template>
   <BasicModal
     min-height="200"
-    width="32%"
+    width="30%"
     v-bind="$attrs"
     @register="registerModal"
     :title="getTitle"
   >
-    <div style="width: 100%; height: 100%">
+    <Alert type="success" message="调试成功" show-icon />
+    <div style="margin-top: 10px; width: 100%; height: 100%">
       <img src="../../../../assets/images/debug.png" />
     </div>
   </BasicModal>
@@ -14,6 +15,7 @@
 <script lang="ts" setup>
   import { ref, computed, unref, reactive } from 'vue';
   import { BasicModal, useModalInner } from '@/components/Modal';
+  import {Alert} from "ant-design-vue";
 
   defineOptions({ name: 'DebugModal' });
 

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

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerVersionModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <div style="margin: 0 0 20px 7px">可建表物理模型列表如下：</div>
+    <BasicTable @register="registerTable" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
+  import { useTable } from '@/components/Table';
+  import {
+    moreCreateData,
+    TreeSystem,
+  } from '@/views/dataWarehousePlanning/physicalModel/modelData';
+  import {
+    columnsMoreCreate,
+    columnsSystem,
+    searchFormSchema,
+  } from '@/views/dataWarehousePlanning/physicalModel/model.data';
+
+  const getTitle = ref('确认批量建表？');
+  const isUpdate = ref(false);
+  const isMove = ref(false);
+  const [registerTable] = useTable({
+    title: '',
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: moreCreateData.length,
+        code: '',
+        message: '',
+        data: moreCreateData,
+      };
+    },
+    columns: columnsMoreCreate,
+    showIndexColumn: false,
+
+    rowSelection: false,
+    striped: false,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+  //初始化弹框
+  const [registerVersionModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    isMove.value = !!data?.isMove;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+      // 塞值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+  async function handleSubmit() {
+    closeModal();
+  }
+</script>
+
+<style scoped></style>

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

@@ -2,28 +2,19 @@
   <div>
     <BasicTable @register="registerTable" :searchInfo="searchInfo">
       <template #toolbar>
-        <a-button type="text" @click="handleCrossModel" style="color: #0960BD "
-          ><Icon icon="ion:link-outline" style="transform: rotate(-45deg)" />关联元数据</a-button
+        <a-button type="text" @click="handleCrossModel" style="color: #0960bd"
+          ><Icon icon="ant-design:link-outlined" />关联元数据</a-button
         >
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
           <TableAction
-            :actions="
-              editFlag
-                ? [
-                    {
-                      icon: 'clarity:contract-line',
-                      onClick: handleEntityEditModel.bind(null, record),
-                    },
-                  ]
-                : [
-                    {
-                      icon: 'clarity:contract-line',
-                      onClick: handleEntityEditModel.bind(null, record),
-                    },
-                  ]
-            "
+            :actions="[
+              {
+                icon: 'ant-design:link-outlined',
+                onClick: handleEntityEditModel.bind(null, record),
+              },
+            ]"
           />
         </template>
       </template>
@@ -57,13 +48,7 @@
     });
   }
   // 实体编辑
-  function handleEntityEditModel(record: Recordable) {
-    // 跳转到详情
-    push({
-      path: '/dataWarehousePlanning/logicalModel/entity-detail',
-      query: record,
-    });
-  }
+  function handleEntityEditModel(record: Recordable) {}
   function entitySuccess({ isUpdate, values }) {
     if (isUpdate) {
       // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
@@ -85,7 +70,7 @@
   ] = useTable({
     title: '关联元数据',
     // 定高
-    scroll: { y: 150 },
+    scroll: {y: 150},
     // 数据
     api: async (params) => {
       console.log('params:', params);
@@ -98,7 +83,7 @@
         message: '',
         data: entityData,
       };
-      return { ...response };
+      return {...response};
     },
     rowKey: 'businessId',
     // 列

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

@@ -5,27 +5,18 @@
         <a-button style="color: #0960bd" type="text"><PlusOutlined />新建Sql文件</a-button>
         <a-button style="color: #0960bd" type="text">批量解绑</a-button>
         <a-button style="color: #0960bd" type="text" @click="handleCrossModel"
-          ><Icon icon="ion:link-outline" style="transform: rotate(-45deg)" />关联Sql文件</a-button
+          ><Icon icon="ant-design:link-outlined" />关联Sql文件</a-button
         >
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
           <TableAction
-            :actions="
-              editFlag
-                ? [
-                    {
-                      icon: 'clarity:contract-line',
-                      onClick: handleEntityEditModel.bind(null, record),
-                    },
-                  ]
-                : [
-                    {
-                      icon: 'clarity:contract-line',
-                      onClick: handleEntityEditModel.bind(null, record),
-                    },
-                  ]
-            "
+            :actions="[
+              {
+                icon: 'ant-design:link-outlined',
+                onClick: handleEntityEditModel.bind(null, record),
+              },
+            ]"
           />
         </template>
       </template>
@@ -62,13 +53,7 @@
     });
   }
   // 实体编辑
-  function handleEntityEditModel(record: Recordable) {
-    // 跳转到详情
-    push({
-      path: '/dataWarehousePlanning/physicalModel/entity-detail',
-      query: record,
-    });
-  }
+  function handleEntityEditModel(record: Recordable) {}
   function entitySuccess({ isUpdate, values }) {
     if (isUpdate) {
       // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
@@ -90,7 +75,7 @@
   ] = useTable({
     title: 'Sql开发',
     // 定高
-    scroll: { y: 150 },
+    scroll: {y: 150},
     // 数据
     api: async (params) => {
       console.log('params:', params);
@@ -103,7 +88,7 @@
         message: '',
         data: sqlDevelopData,
       };
-      return { ...response };
+      return {...response};
     },
     rowKey: 'businessId',
     // 列

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

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerVersionModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+    <BasicTree :treeData="versionTreeData">
+      <template #title="item">
+        <div style="flex: 1">
+          <div style="display: flex">
+            <div style="flex: 1">
+              <span style="font-size: 18px">{{ item.version }}</span>
+              <span style="margin-left: 10px">{{ item.time }}</span>
+              <span style="margin-left: 30px">{{ item.created }}</span>
+            </div>
+          </div>
+          <div>
+            <span>{{ item.remark }}</span>
+          </div>
+        </div>
+      </template>
+    </BasicTree>
+    <div style="display: flex">
+      <Alert
+        style="width: 100px; background-color: #ffffff; border-color: #ffffff"
+        type="success"
+        message="已建表"
+        show-icon
+      />
+      <a-button style="margin-top: 4px" type="text" @click="handleDDL"
+        >查看DDL详情<Icon icon="ant-design:ellipsis-outlined"
+      /></a-button>
+    </div>
+    <ModelDDL @register="registerDDLModal" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref, defineEmits } from 'vue';
+  import { Tabs, Descriptions, Alert, Modal, message } from 'ant-design-vue';
+  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
+  import { BasicTree } from '@/components/Tree';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { versionModelFormSchema } from './model.data';
+  import { versionTreeData } from './modelData';
+  import {
+    FileSearchOutlined,
+    VerticalAlignMiddleOutlined,
+    RollbackOutlined,
+    DeleteOutlined,
+  } from '@ant-design/icons-vue';
+  import { useRouter } from 'vue-router';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import Icon from '@/components/Icon/Icon.vue';
+  import ModelDDL from '@/views/dataWarehousePlanning/physicalModel/modelDetail/modelDDL.vue';
+
+  const { createMessage } = useMessage();
+
+  const { push } = useRouter();
+  const [registerDDLModal, { openModal: openDDLModal }] = useModal();
+
+  defineOptions({ name: 'ModelModal' });
+  const emit = defineEmits();
+
+  const isUpdate = ref(false);
+  const isMove = ref(false);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 100,
+      baseColProps: { lg: 12, md: 24 },
+      schemas: versionModelFormSchema,
+      showActionButtonGroup: false,
+      actionColOptions: {
+        span: 23,
+      },
+    });
+  //初始化弹框
+  const [registerVersionModal, { 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,
+      });
+    }
+  });
+  function handleDetail() {
+    emit('setVersionFlag', true);
+    closeModal();
+  }
+  function handleComparison() {
+    push({
+      path: '/dataWarehousePlanning/logicalModel/version-comparison',
+    });
+  }
+  function handleRollBack(item) {
+    Modal.confirm({
+      title: '回滚版本',
+      content: '确定要滚动至' + item.version + '版本吗?',
+      onOk: () => {
+        createMessage.success('回滚成功!');
+      },
+    });
+  }
+
+  function handleDDL() {
+    openDDLModal(true, {
+      isUpdate: false,
+    });
+  }
+  function handleDelete(item) {
+    Modal.confirm({
+      title: '删除版本',
+      content: '确定要删除' + item.version + '版本吗?',
+      onOk: () => {
+        createMessage.success('删除成功!');
+      },
+    });
+  }
+  // const getTitle = computed(() => (isUpdate.value ? '编辑实体' : '新建实体'));
+  const getTitle = '版本管理';
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    await validate();
+    closeModal();
+  }
+</script>
+<style scoped>
+  .my-icon {
+    font-size: 18px;
+    margin-right: 10px;
+  }
+</style>