Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

src/components/FormViewer/index.ts

@@ -1,2 +1,2 @@
 export { default as FormViewer } from './index.vue';
-
+export { default as SubTable } from './subTable.vue';

src/components/FormViewer/index.vue

@@ -4,6 +4,7 @@
       <a-tabs style="width: 100%" @change="tabsChange">
         <a-tab-pane v-for="(colItem, index) in tabsColumns" :tab="colItem.label" :key="index">
           <BasicForm ref="myDataBaseFormRef" @register="registerForm" />
+          <subTable :data="subTableColumns[index]" />
         </a-tab-pane>
       </a-tabs>
     </template>
@@ -12,6 +13,7 @@
       @register="registerForm"
       v-if="formModalVisible && tabsColumns.length < 1"
     />
+    <subTable v-if="formModalVisible && tabsColumns.length < 1" :data="subTableColumns[0]" />
     <template v-for="(item, index) in cardLayout" :key="index">
       <a-row style="width: 100%">
         <a-col :span="item?.colProps?.span || 24" style="padding: 10px">
@@ -36,32 +38,6 @@
         </a-col>
       </a-row>
     </template>
-    <a-table
-      class="sub-table"
-      :columns="subTableColumns"
-      :data-source="subTableList"
-      :pagination="false"
-      v-if="subTableId"
-      :scroll="scrollValue"
-    >
-      <template #headerCell="{ column, record }">
-        <template v-if="column.key === 'setting'">
-          <PlusOutlined class="icon-button" @click="addListItem" v-if="!isDetail" />
-        </template>
-      </template>
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'setting'">
-          <DeleteOutlined
-            class="icon-button"
-            @click="delListItem(column, record)"
-            v-if="!isDetail"
-          />
-        </template>
-        <template v-else>
-          <FormItem :data="column" :record="record" />
-        </template>
-      </template>
-    </a-table>
     <!-- todo  创建/修改  人/时间 -->
     <template v-for="(item, index) in createOrModifyList" :key="index">
       <CreateOrModifyComponent :data="item" />
@@ -74,12 +50,13 @@
   import { BasicForm, useForm } from '@/components/Form';
   import { functionGetFormDataFormScheme, LoadFormScheme } from '@/api/demo/formScheme';
   import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
-  import FormItem from '@/views/demo/onlineform/formCall/ShowFormModal/FormItem/index.vue';
   import CallModalCardFormItem from '@/views/demo/onlineform/formCall/CallModalFormItem/index.vue';
   import CreateOrModifyComponent from '@/views/demo/onlineform/formCall/CreateOrModifyComponent/index.vue';
+  import { SubTable } from './index';
   import { v4 as uuidv4 } from 'uuid';
   import { cardNestStructure } from '@/views/demo/onlineform/util.ts'
 
+
   let formColumns: FormSchema[] = [];
   const props = defineProps({
     formConfig: Object,
@@ -91,18 +68,9 @@
   });
   console.log(props);
   const subTableId = ref(null);
-  const subTableColumns: any = ref([
-    {
-      dataIndex: 'setting',
-      key: 'setting',
-      fixed: 'left',
-      width: 60,
-    },
-  ]);
-  const subTableData = ref([]);
+  const subTableColumns: any = ref([]);
+  const sourceData = ref([]);
   const subTableList: any = ref([]);
-  const scrollValue = ref();
-  const masterData = ref([]);
   const subTableDB = ref([]);
   const cardLayout = ref([]);
   const cardValues = ref({});
@@ -140,13 +108,17 @@
     });
     if (data) {
       const scheme = JSON.parse(data.scheme);
+      subTableColumns.value = [];
       // 将card组件嵌套起来
       scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList)
-      console.log(props.formConfig);
-      console.log('subTableColumns', subTableColumns);
       subTableDB.value = scheme.db;
       let disDetail = false;
       scheme.formInfo.tabList.forEach((tabElement, index) => {
+        subTableColumns.value.push({
+          indexValue: index,
+          parentFileId: '',
+          child: [],
+        });
         tabElement.schemas.forEach((element) => {
           if (element.field == props.formRelationId) {
             keyValue.value = element.componentProps.fieldName;
@@ -195,34 +167,21 @@
           if (['createuser', 'createtime', 'modifyuser', 'modifytime'].includes(element.type)) {
             createOrModifyList.value.push(element);
           }
-          subTableColumns.value = [
-            {
-              dataIndex: 'setting',
-              key: 'setting',
-              fixed: 'left',
-              width: 60,
-            },
-          ];
           // 选项卡
           if (element.type === 'subTable') {
             subTableId.value = element.field;
-            let tableData = [];
+            subTableColumns.value[index].parentFileId = element.field;
             element.columns.forEach((itemColumn) => {
               itemColumn.children.forEach((itemColumnChild) => {
-                tableData.push(itemColumnChild);
-                if (itemColumnChild.component != 'InputGuid') {
-                  subTableColumns.value.push({
-                    key: itemColumnChild.field,
-                    title: itemColumnChild.label,
-                    dataIndex: itemColumnChild.field,
-                    ...itemColumnChild,
-                    width: 120,
-                  });
-                }
+                subTableColumns.value[index].child.push({
+                  key: itemColumnChild.field,
+                  title: itemColumnChild.label,
+                  dataIndex: itemColumnChild.field,
+                  ...itemColumnChild,
+                  width: 120,
+                });
               });
             });
-            scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
-            subTableData.value = tableData;
           }
           formColumns.push({
             parentValue: index,
@@ -250,7 +209,6 @@
           }
         }
       }, 10);
-      scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 400 };
     }
   }
   async function tabsChange(e) {
@@ -264,12 +222,9 @@
     });
     // 切换时保存值
     const values = await validate();
-    console.log(values);
     if (Object.keys(FieldsValue.value).length == 0) {
       FieldsValue.value = values;
     }
-    console.log(values);
-    console.log(FieldsValue.value);
     for (const key in values) {
       for (const fieKey in FieldsValue.value) {
         if (key == fieKey) {
@@ -282,7 +237,6 @@
     setFieldsValue({
       ...FieldsValue.value,
     });
-    console.log(FieldsValue.value);
   }
 
   async function getFormDetail() {
@@ -387,21 +341,6 @@
       getFormHistory();
     }
   });
-  const addListItem = () => {
-    let keyValue = uuidv4();
-    let emptyItem = { key: keyValue };
-    subTableData.value.map((item) => {
-      if (item.component == 'InputGuid') {
-        emptyItem[item.field] = keyValue;
-      } else {
-        emptyItem[item.field] = '';
-      }
-    });
-    subTableList.value.push(emptyItem);
-  };
-  const delListItem = (column, record) => {
-    subTableList.value = subTableList.value.filter((item) => item.key != record.key);
-  };
 </script>
 
 <style lang="less" scoped>

src/components/FormViewer/subTable.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    {{ tableData }}
+    <a-table
+      class="sub-table"
+      :columns="columns"
+      :data-source="tableData"
+      :pagination="false"
+      :scroll="scrollValue"
+    >
+      <template #headerCell="{ column, record }">
+        <template v-if="column.key === 'setting'">
+          <PlusOutlined class="icon-button" @click="addListItem" v-if="!isDetail" />
+        </template>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'setting'">
+          <DeleteOutlined
+            class="icon-button"
+            @click="delListItem(column, record)"
+            v-if="!isDetail"
+          />
+        </template>
+        <template v-else>
+          <FormItem :data="column" :record="record" />
+        </template>
+      </template>
+    </a-table>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { v4 as uuidv4 } from 'uuid';
+  import { ref, watch } from 'vue';
+  import FormItem from '@/views/demo/onlineform/formCall/ShowFormModal/FormItem/index.vue';
+  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+
+  const scrollValue = ref();
+  const columns: any = ref([
+    {
+      dataIndex: 'setting',
+      key: 'setting',
+      fixed: 'left',
+      width: 60,
+    },
+  ]);
+  const tableData: any = ref([]);
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  });
+  console.log(props);
+  props.data.child.forEach((element) => {
+    if (element.component != 'InputGuid') {
+      columns.value.push({
+        ...element,
+      });
+    }
+  });
+  scrollValue.value = { x: (columns.value.length - 1) * 140, y: 300 };
+
+  const addListItem = () => {
+    let keyValue = uuidv4();
+    let emptyItem = { key: keyValue };
+    props.data.child.map((item) => {
+      if (item.component == 'InputGuid') {
+        emptyItem[item.field] = keyValue;
+      } else {
+        emptyItem[item.field] = '';
+      }
+    });
+    tableData.value.push(emptyItem);
+  };
+  const delListItem = (column, record) => {
+    tableData.value = tableData.value.filter((item) => item.key != record.key);
+  };
+</script>