逻辑模型设计-编辑-修改

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

@@ -4,7 +4,6 @@ export const entityFormSchema = [
   {
     field: 'name',
     label: '实体名称',
-    required: true,
     slot: 'name',
     component: 'Input',
     colProps: { span: 12 },

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

@@ -3,28 +3,32 @@
     <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>
+        <a-button v-if="isEdit" 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',
-                popConfirm: {
-                  title: '是否确认删除',
-                  placement: 'left',
-                  confirm: handleRemove.bind(null, record),
-                },
-                color: 'error',
-              },
-            ]"
+            :actions="
+              isEdit
+                ? [
+                    {
+                      // 编辑
+                      icon: 'clarity:note-edit-line',
+                      onClick: handleConnectionEditModel.bind(null, record),
+                    },
+                    {
+                      // 删除
+                      icon: 'ant-design:delete-outlined',
+                      popConfirm: {
+                        title: '是否确认删除',
+                        placement: 'left',
+                        confirm: handleRemove.bind(null, record),
+                      },
+                      color: 'error',
+                    },
+                  ]
+                : []
+            "
           />
         </template>
       </template>
@@ -33,7 +37,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { reactive, onMounted, ref } from 'vue';
+  import { reactive, onMounted, ref, defineProps } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { useRoute, onBeforeRouteLeave } from 'vue-router';
   import { useFilterStore } from '@/store/modules/filterData';
@@ -41,13 +45,18 @@
   import { useModal } from '@/components/Modal';
   import {
     entityConnectionTable,
-    propertyFormSchema
+    propertyFormSchema,
   } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/enetity.data';
   import { entityConnectionData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/entityData';
   import EntityConnectionModel from './entityConnectionModel.vue';
   import { useMessage } from '@/hooks/web/useMessage';
 
-  defineOptions({ name: 'AccountManagement' });
+  const { isEdit } = defineProps({
+    isEdit: {
+      type: String,
+      default: '',
+    },
+  });
   const { createMessage, createConfirm } = useMessage();
   const filterStore = useFilterStore();
   const route = useRoute();

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

@@ -5,31 +5,43 @@
       <a-button v-if="isEdit" type="primary" @click="handleSubmit">保存</a-button>
       <a-button v-if="isEdit" @click="handleCancel">取消</a-button>
     </template>
-    <div class="table-title" style="font-size: 18px; margin: 12px 10px 0">基本信息</div>
-    <BasicForm @register="registerForm">
-      <template #name="{ model, field }">
-        <a-input v-if="isEdit" placeholder="请输入实体名称" v-model:value="model[field]" />
-        <span v-else>{{ infoData[field] }}</span>
-      </template>
-      <template #txt="{ model, field }">
-        <a-input v-if="isEdit" placeholder="请输入实体描述" v-model:value="model[field]" />
-        <span v-else>{{ infoData[field] }}</span>
-      </template>
-      <template #engName="{ model, field }">
-        <a-input v-if="isEdit" placeholder="请输入实体英文名" v-model:value="model[field]" />
-        <span v-else>{{ infoData[field] }}</span>
-      </template>
-      <template #person="{ model, field }">
-        <a-input v-if="isEdit" placeholder="请输入资产责任人" v-model:value="model[field]" />
-        <span v-else>{{ infoData[field] }}</span>
-      </template>
-      <template #deptName="{ model, field }">
-        <TreeSelect v-if="isEdit" placeholder="请输入资产责任人" :treeData="treeData" v-model:value="model[field]" />
-        <span v-else>{{ infoData[field] }}</span>
-      </template>
-    </BasicForm>
-    <Property />
-    <EntityConnection />
+    <Descriptions title="基本信息" style="margin: 10px 12px" :column="2">
+      <Descriptions.Item label="实体名称">{{ infoData.name }}</Descriptions.Item>
+      <Descriptions.Item label="实体描述">{{ infoData.txt }}</Descriptions.Item>
+      <Descriptions.Item label="实体英文名">{{ infoData.engName }}</Descriptions.Item>
+      <Descriptions.Item label="资产责任人">{{ infoData.person }}</Descriptions.Item>
+      <Descriptions.Item label="所属部门">{{ infoData.deptName }}</Descriptions.Item>
+    </Descriptions>
+    <!--    <div class="table-title" style="font-size: 18px; margin: 12px 10px 0">基本信息</div>-->
+    <!--    <BasicForm @register="registerForm">-->
+    <!--      <template #name="{ model, field }">-->
+    <!--        <a-input v-if="isEdit" placeholder="请输入实体名称" v-model:value="model[field]" />-->
+    <!--        <span v-else>{{ infoData[field] }}</span>-->
+    <!--      </template>-->
+    <!--      <template #txt="{ model, field }">-->
+    <!--        <a-input v-if="isEdit" placeholder="请输入实体描述" v-model:value="model[field]" />-->
+    <!--        <span v-else>{{ infoData[field] }}</span>-->
+    <!--      </template>-->
+    <!--      <template #engName="{ model, field }">-->
+    <!--        <a-input v-if="isEdit" placeholder="请输入实体英文名" v-model:value="model[field]" />-->
+    <!--        <span v-else>{{ infoData[field] }}</span>-->
+    <!--      </template>-->
+    <!--      <template #person="{ model, field }">-->
+    <!--        <a-input v-if="isEdit" placeholder="请输入资产责任人" v-model:value="model[field]" />-->
+    <!--        <span v-else>{{ infoData[field] }}</span>-->
+    <!--      </template>-->
+    <!--      <template #deptName="{ model, field }">-->
+    <!--        <TreeSelect-->
+    <!--          v-if="isEdit"-->
+    <!--          placeholder="请输入资产责任人"-->
+    <!--          :treeData="treeData"-->
+    <!--          v-model:value="model[field]"-->
+    <!--        />-->
+    <!--        <span v-else>{{ infoData[field] }}</span>-->
+    <!--      </template>-->
+    <!--    </BasicForm>-->
+    <Property :isEdit="isEdit" />
+    <EntityConnection :isEdit="isEdit" />
   </PageWrapper>
 </template>
 
@@ -41,11 +53,12 @@
   import BasicForm from '@/components/Form/src/BasicForm.vue';
   import { useForm } from '@/components/Form';
   import { TreeSelect } from 'ant-design-vue';
+  import { Descriptions } from 'ant-design-vue';
   import {
     entityFormSchema,
     treeData,
   } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/enetity.data';
-  import {onMounted, ref} from "vue";
+  import { onMounted, ref } from 'vue';
 
   const route = useRoute();
   let infoData = route.query;
@@ -63,15 +76,16 @@
     isEdit.value = false;
   }
   //初始化表单
-  const [registerForm, { setFieldsValue, getFieldsValue, updateSchema, resetFields, validate }] = useForm({
-    labelWidth: 100,
-    baseColProps: { lg: 12, md: 24 },
-    schemas: entityFormSchema,
-    showActionButtonGroup: false,
-    actionColOptions: {
-      span: 23,
-    },
-  });
+  const [registerForm, { setFieldsValue, getFieldsValue, updateSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 100,
+      baseColProps: { lg: 12, md: 24 },
+      schemas: entityFormSchema,
+      showActionButtonGroup: false,
+      actionColOptions: {
+        span: 23,
+      },
+    });
   onMounted(() => {
     setFieldsValue(infoData);
   });

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

@@ -3,8 +3,14 @@
     <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="handleDelete"><DeleteTwoTone />批量删除</a-button>
-        <a-button type="primary" @click="handlePropertyModel"
+        <a-button
+          type="primary"
+          v-if="isEdit"
+          :disabled="getRowSelection().selectedRowKeys <= 0"
+          @click="handleDelete"
+          ><DeleteTwoTone />批量删除</a-button
+        >
+        <a-button v-if="isEdit" type="primary" @click="handlePropertyModel"
           ><PlusCircleTwoTone />新建属性</a-button
         >
       </template>
@@ -21,21 +27,25 @@
         </template>
         <template v-if="column.key === 'action'">
           <TableAction
-            :actions="[
-              {
-                icon: 'clarity:note-edit-line',
-                onClick: handlePropertyEditModel.bind(null, record),
-              },
-              {
-                icon: 'ant-design:delete-outlined',
-                popConfirm: {
-                  title: '是否确认删除',
-                  placement: 'left',
-                  confirm: handleRemove.bind(null, record),
-                },
-                color: 'error',
-              },
-            ]"
+            :actions="
+              isEdit
+                ? [
+                    {
+                      icon: 'clarity:note-edit-line',
+                      onClick: handlePropertyEditModel.bind(null, record),
+                    },
+                    {
+                      icon: 'ant-design:delete-outlined',
+                      popConfirm: {
+                        title: '是否确认删除',
+                        placement: 'left',
+                        confirm: handleRemove.bind(null, record),
+                      },
+                      color: 'error',
+                    },
+                  ]
+                : []
+            "
           />
         </template>
       </template>
@@ -44,10 +54,10 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { reactive, onMounted, ref } from 'vue';
+  import { reactive, onMounted, ref, defineProps } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { useRoute, onBeforeRouteLeave } from 'vue-router';
-  import {entityConnectionFormSchema, propertyFormSchema, propertyTable} from './enetity.data';
+  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';
@@ -57,7 +67,12 @@
   import PropertyModel from './propertyModel.vue';
   import { useMessage } from '@/hooks/web/useMessage';
 
-  defineOptions({ name: 'AccountManagement' });
+  const { isEdit } = defineProps({
+    isEdit: {
+      type: String,
+      default: '',
+    },
+  });
   const { createMessage, createConfirm } = useMessage();
   const filterStore = useFilterStore();
   const route = useRoute();