卡片组解析优化

src/components/FormViewer/cardGourp.vue

@@ -7,12 +7,12 @@
       @tabChange="(key) => onTabChange(key)"
     >
       <BasicForm ref="cardRef" @register="registerForm" @change="changeForm" />
-      <template v-if="childGourp.length > 0">
+      <template v-if="Object.keys(childItem).length > 0">
         <CardGourp
-          :data="childGourp[noTitleKey]"
+          :data="childItem"
           :parentValue="props.parentValue"
           :formData="props.formData"
-          v-if="childGourp[noTitleKey]"
+          v-if="childItem"
         />
       </template>
     </a-card>
@@ -23,6 +23,7 @@
   import { CardGourp } from './index';
   import { ref, watch } from 'vue';
   import { subTableStore } from '@/store/modules/subTable';
+  import dayjs from 'dayjs';
 
   const subTableDataStore = subTableStore();
   const props = defineProps({
@@ -44,7 +45,10 @@
   const tabListNoTitle: any = ref([]);
   const tableData = props.data;
   const childGourp = ref([]);
+  const childItem = ref({});
   let cardFormData = props.formData;
+  const nowTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+  const userName = localStorage.getItem('fireUserLoginName');
   const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
     useForm({
       labelWidth: 100,
@@ -53,19 +57,15 @@
       baseColProps: { lg: 24, md: 24 },
     });
   console.log(props);
-  console.log(props.formData);
   watch(
     () => props.formData,
     (newVal) => {
       cardFormData = newVal;
-      console.log(cardFormData);
       formColumns.forEach((element) => {
         for (const key in cardFormData) {
-          console.log(key);
           if (element.field == key) {
             var obj = {};
             obj[key] = cardFormData[key];
-            console.log(obj);
             subTableDataStore.setGroupData(obj);
           }
         }
@@ -76,35 +76,55 @@
     },
     { deep: true },
   );
-  tableData.componentProps.options.forEach((element, index) => {
-    console.log(cardFormData);
-    tabListNoTitle.value.push({
-      key: index,
-      tab: element.label,
-      ...element,
-      index: index,
-    });
-    element.children.forEach((childElement) => {
-      formColumns.push({
-        parentValue: element.field,
-        ...childElement,
-        show: index == 0 ? true : false,
+  if (tableData.componentProps) {
+    tableData.componentProps.options.forEach((element, index) => {
+      tabListNoTitle.value.push({
+        key: index,
+        tab: element.label,
+        ...element,
         index: index,
       });
-      if (childElement.component == 'CardGroup') {
-        console.log(childElement);
-        childGourp.value.push({
+      element.children.forEach((childElement) => {
+        formColumns.push({
+          parentValue: element.field,
           ...childElement,
+          show: index == 0 ? true : false,
+          index: index,
         });
-      }
+        if (childElement.component == 'CardGroup') {
+          childGourp.value.push({
+            ...childElement,
+            index: index,
+          });
+        }
+        // if (['createuser', 'modifyuser'].includes(childElement.type)) {
+        //   var obj = {};
+        //   obj[childElement.field] = userName;
+        //   console.log(obj);
+        //   subTableDataStore.setGroupData(obj);
+        // }
+        // if (['createtime', 'modifytime'].includes(childElement.type)) {
+        //   var obj = {};
+        //   obj[childElement.field] = nowTime.value;
+        //   console.log(obj);
+        //   subTableDataStore.setGroupData(obj);
+        // }
+      });
     });
-  });
+  }
   setTimeout(() => {
     resetFields();
   }, 10);
 
   const onTabChange = (value: string) => {
     noTitleKey.value = value;
+    var currentIndex = (childGourp.value || []).findIndex((element) => element.index === value);
+    console.log(currentIndex);
+    if (currentIndex == -1) {
+      childItem.value = {};
+    } else {
+      childItem.value = childGourp.value[currentIndex];
+    }
     formColumns.forEach((element) => {
       element.show = false;
       updateSchema([{ field: element.field, show: false }]);
@@ -115,12 +135,10 @@
     });
     setTimeout(() => {
       resetFields();
-      console.log(subTableDataStore.getGroupData);
       setFieldsValue(subTableDataStore.getGroupData);
     }, 10);
   };
   function changeForm() {
-    console.log(getFieldsValue());
     subTableDataStore.setGroupData(getFieldsValue());
   }
 </script>

src/components/FormViewer/index.vue

@@ -47,12 +47,14 @@
       </a-row>
     </template>
     <!-- 卡片组 -->
-    <CardGourp
-      v-if="cardGroupData.length > 0"
-      :data="cardGroupData[0]"
-      :formData="cardGourpFormData"
-      :parentValue="cardGroupData[0].field"
-    />
+    <template v-if="formModalVisible && tabsColumns.length < 1">
+      <CardGourp
+        v-if="cardGroupData.length > 0"
+        :data="cardGroupData[0]"
+        :formData="cardGourpFormData"
+        :parentValue="cardGroupData[0].field"
+      />
+    </template>
     <!-- todo  创建/修改  人/时间 -->
     <template v-for="(item, index) in createOrModifyList" :key="index">
       <CreateOrModifyComponent :data="item" />
@@ -71,6 +73,7 @@
   import { v4 as uuidv4 } from 'uuid';
   import { cardNestStructure } from '@/views/demo/onlineform/util.ts';
   import { subTableStore } from '@/store/modules/subTable';
+  import dayjs from 'dayjs';
 
   const subTableDataStore = subTableStore();
 
@@ -101,6 +104,8 @@
   const cardGroupData = ref([]);
   const cardGourpFormData = ref({});
   subTableDataStore.clearGoupData();
+  const nowTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+  const userName = localStorage.getItem('fireUserLoginName');
   const getCardLayoutKey = (dataList, key) => {
     dataList.forEach((item) => {
       if (item.component === 'Card') {
@@ -131,6 +136,7 @@
       subTableColumns.value = [];
       // 将card组件嵌套起来
       scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
+      console.log(scheme.formInfo.tabList);
       subTableDB.value = scheme.db;
       let disDetail = false;
       let tableColumns = [];
@@ -370,6 +376,16 @@
           Object.assign(query, subTableDataStore.getGroupData[key]);
         }
       }
+      // 存储创建人、创建时间等内容
+      if (createOrModifyList.value.length > 0) {
+        createOrModifyList.value.forEach((item) => {
+          if (item.type == 'createuser' || item.type == 'modifyuser') {
+            query[item.field] = userName;
+          } else if (item.type == 'createtime' || item.type == 'modifytime') {
+            query[item.field] = nowTime.value;
+          }
+        });
+      }
       console.log(query);
       return query;
     } catch (error) {