多子表，子表增加单行模式

src/components/FormViewer/index.vue

@@ -4,7 +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]" />
+          <subTable ref="subTableRef" :data="subTableColumns[index]" :tabsKey="tabsKey" />
         </a-tab-pane>
       </a-tabs>
     </template>
@@ -54,8 +54,10 @@
   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'
+  import { cardNestStructure } from '@/views/demo/onlineform/util.ts';
+  import { subTableStore } from '@/store/modules/subTable';
 
+  const subTableDataStore = subTableStore();
 
   let formColumns: FormSchema[] = [];
   const props = defineProps({
@@ -69,30 +71,29 @@
   console.log(props);
   const subTableId = ref(null);
   const subTableColumns: any = ref([]);
-  const sourceData = ref([]);
-  const subTableList: any = ref([]);
   const subTableDB = ref([]);
   const cardLayout = ref([]);
   const cardValues = ref({});
   const createOrModifyList = ref([]);
   const formModalVisible = ref(false);
   const tabsColumns: any = ref([]);
-  const infoUseSubTableData = ref()
+  const infoUseSubTableData = ref();
-  const infoUseMainTableData = ref({})
+  const infoUseMainTableData = ref({});
-
+  const tabsKey = ref(0);
   const keyValue = ref('');
   const FieldsValue = ref({});
-  const getCardLayoutKey = (dataList,key) => {
+  const subTableRef = ref<any>();
-    dataList.forEach(item => {
+  const getCardLayoutKey = (dataList, key) => {
-      if (item.component === 'Card'){
+    dataList.forEach((item) => {
-        getCardLayoutKey(item.columns[0].children,key)
+      if (item.component === 'Card') {
-      }else if(item.type === "subTable"){
+        getCardLayoutKey(item.columns[0].children, key);
-        cardValues.value[key][item.field] = []
+      } else if (item.type === 'subTable') {
-      }else{
+        cardValues.value[key][item.field] = [];
-        cardValues.value[key][item.field] = ""
+      } else {
+        cardValues.value[key][item.field] = '';
       }
-    })
+    });
-  }
+  };
   const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
     useForm({
       labelWidth: 100,
@@ -110,14 +111,16 @@
       const scheme = JSON.parse(data.scheme);
       subTableColumns.value = [];
       // 将card组件嵌套起来
-      scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList)
+      scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
       subTableDB.value = scheme.db;
       let disDetail = false;
+      let tableColumns = [];
       scheme.formInfo.tabList.forEach((tabElement, index) => {
         subTableColumns.value.push({
           indexValue: index,
           parentFileId: '',
           child: [],
+          multiterm: '',
         });
         tabElement.schemas.forEach((element) => {
           if (element.field == props.formRelationId) {
@@ -161,8 +164,8 @@
           // 卡片布局
           if (element.component === 'Card') {
             cardLayout.value.push(element);
-            cardValues.value[element.field] = {}
+            cardValues.value[element.field] = {};
-            getCardLayoutKey(element.columns[0].children,element.field)
+            getCardLayoutKey(element.columns[0].children, element.field);
           }
           if (['createuser', 'createtime', 'modifyuser', 'modifytime'].includes(element.type)) {
             createOrModifyList.value.push(element);
@@ -171,6 +174,12 @@
           if (element.type === 'subTable') {
             subTableId.value = element.field;
             subTableColumns.value[index].parentFileId = element.field;
+            (subTableColumns.value[index].multiterm = element.componentProps.multiterm),
+              tableColumns.push({
+                parentFileId: element.field,
+                child: [],
+                dataTable: element.componentProps.dataTable,
+              });
             element.columns.forEach((itemColumn) => {
               itemColumn.children.forEach((itemColumnChild) => {
                 subTableColumns.value[index].child.push({
@@ -200,6 +209,7 @@
       });
       formModalVisible.value = true;
       setTimeout(() => {
+        subTableDataStore.setTableData(tableColumns);
         resetFields();
         console.log(props.flowFormData);
         if (!disDetail) {
@@ -213,7 +223,7 @@
   }
   async function tabsChange(e) {
     console.log('tabsChange');
-
+    tabsKey.value = e;
     formColumns.forEach((element) => {
       element.show = false;
       if (element.parentValue == e) {
@@ -249,11 +259,19 @@
     };
     const data = await functionGetFormDataFormScheme(querys);
     console.log(data);
+    console.log(subTableDB.value);
+    console.log(subTableDataStore.getTableData);
     let obj = new Object();
     for (var i in data) {
       subTableDB.value.forEach((element) => {
         if (element.type == 'chlid') {
-          subTableList.value = data[i];
+          subTableDataStore.getTableData.forEach((element) => {
+            console.log(element);
+            console.log(data[i]);
+            if (element.dataTable == i) {
+              subTableDataStore.setSingleData(element.parentFileId, data[i]);
+            }
+          });
         } else {
           for (var j in data[i]) {
             Object.assign(obj, data[i][j]);
@@ -274,27 +292,28 @@
         key: uuidv4(),
       };
     });
-    data[mainTableName].forEach(item => {
+    data[mainTableName].forEach((item) => {
-      infoUseMainTableData.value = {...infoUseMainTableData.value, ...item}
+      infoUseMainTableData.value = { ...infoUseMainTableData.value, ...item };
-    })
+    });
-    if(Object.keys(cardValues.value).length > 0){
+    if (Object.keys(cardValues.value).length > 0) {
-      Object.keys(cardValues.value).forEach(cardItem => {
+      Object.keys(cardValues.value).forEach((cardItem) => {
-        let cardItemKeyList = Object.keys(cardValues.value[cardItem])
+        let cardItemKeyList = Object.keys(cardValues.value[cardItem]);
-        Object.keys(infoUseMainTableData.value).forEach(item => {
+        Object.keys(infoUseMainTableData.value).forEach((item) => {
-          if(cardItemKeyList.includes(item)){
+          if (cardItemKeyList.includes(item)) {
-            cardValues.value[cardItem][item] = infoUseMainTableData.value[item]
+            cardValues.value[cardItem][item] = infoUseMainTableData.value[item];
           }
-        })
+        });
-        // todo 
+        // todo
-        cardItemKeyList.forEach(item => {
+        cardItemKeyList.forEach((item) => {
-          if(item.indexOf('grid') !== -1){
+          if (item.indexOf('grid') !== -1) {
-            cardValues.value[cardItem][item] = infoUseSubTableData.value
+            cardValues.value[cardItem][item] = infoUseSubTableData.value;
           }
-        })
+        });
-      })
+      });
     }
   }
   async function getForm() {
+    console.log(subTableDataStore.getTableData);
     try {
       let values = await validate();
       for (const key in values) {
@@ -306,24 +325,21 @@
           }
         }
       }
-      let cardValueList = Object.values(cardValues.value)
+      console.log(values);
-      cardValueList.forEach(item => {
+      console.log(FieldsValue.value);
-        values = {...values, ...item}
+      let cardValueList = Object.values(cardValues.value);
-      })
+      cardValueList.forEach((item) => {
-      let saveSubTableList = [];
+        values = { ...values, ...item };
+      });
       let query = values;
       console.log(query);
-      subTableList.value.forEach((item) => {
+      // 存储子表的信息
-        let emptyObj = {};
+      if (subTableDataStore.getTableData.length > 0) {
-        for (const key in item) {
+        subTableDataStore.getTableData.forEach((item) => {
-          if (key === 'key') continue;
+          query[item.parentFileId] = JSON.stringify(item.child);
-          emptyObj[key] = item[key];
+        });
-        }
-        saveSubTableList.push(emptyObj);
-      });
-      if (subTableId.value) {
-        query[subTableId.value] = JSON.stringify(saveSubTableList);
       }
+      console.log(query);
       return query;
     } catch (error) {
       console.log(error);

src/components/FormViewer/subTable.vue

@@ -1,6 +1,5 @@
 <template>
   <div v-if="columns.length > 1">
-    {{ tableData }}
     <a-table
       class="sub-table"
       :columns="columns"
@@ -30,9 +29,14 @@
 </template>
 <script lang="ts" setup>
   import { v4 as uuidv4 } from 'uuid';
-  import { ref, watch } from 'vue';
+  import { onMounted, ref, watch } from 'vue';
   import FormItem from '@/views/demo/onlineform/formCall/ShowFormModal/FormItem/index.vue';
   import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+  import { subTableStore } from '@/store/modules/subTable';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
+  const subTableDataStore = subTableStore();
 
   const scrollValue = ref();
   const columns: any = ref([
@@ -49,8 +53,22 @@
       type: Object,
       default: () => {},
     },
+    tabsKey: {
+      type: String,
+      default: '',
+    },
   });
   console.log(props);
+
+  onMounted(() => {
+    console.log(subTableDataStore.getTableData);
+    subTableDataStore.getTableData.forEach((element) => {
+      if (element.parentFileId == props.data.parentFileId) {
+        console.log(element);
+        tableData.value = element.child;
+      }
+    });
+  });
   props.data.child.forEach((element) => {
     if (element.component != 'InputGuid') {
       columns.value.push({
@@ -58,9 +76,22 @@
       });
     }
   });
+  watch(
+    () => tableData.value,
+    (newVal) => {
+      console.log(newVal);
+      subTableDataStore.setSingleData(props.data.parentFileId, newVal);
+    },
+    { deep: true },
+  );
+
   scrollValue.value = { x: (columns.value.length - 1) * 140, y: 300 };
 
   const addListItem = () => {
+    if (!props.data.multiterm && tableData.value.length >= 1) {
+      createMessage.error('单行模式，只允许一条数据!');
+      return;
+    }
     let keyValue = uuidv4();
     let emptyItem = { key: keyValue };
     props.data.child.map((item) => {
@@ -75,4 +106,11 @@
   const delListItem = (column, record) => {
     tableData.value = tableData.value.filter((item) => item.key != record.key);
   };
+  function getData() {
+    console.log(tableData.value);
+    return tableData.value;
+  }
+  defineExpose({
+    getData,
+  });
 </script>

src/store/modules/subTable.ts

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia';
+
+export const subTableStore = defineStore({
+  id: 'subTable',
+  state: () => ({
+    tableDta: [],
+  }),
+  getters: {
+    getTableData(state) {
+      return state.tableDta;
+    },
+  },
+  actions: {
+    setTableData(data) {
+      this.tableDta = data;
+    },
+    setSingleData(parentFileId, data) {
+      console.log(parentFileId);
+      console.log(data);
+      this.tableDta.forEach((item, i) => {
+        if (item.parentFileId == parentFileId) {
+          item.child = data;
+        }
+      });
+    },
+  },
+});

src/views/demo/form-design/components/VFormDesign/config/componentPropsConfig.ts

@@ -254,6 +254,10 @@ export const designSubControlAttrs: Omit<IBaseFormAttrs, 'tag'>[] = [
     name: 'required',
     label: '是否必填',
   },
+  {
+    name: 'multiterm',
+    label: '单行模式',
+  },
 ];
 
 const componentAttrs: IBaseComponentProps = {