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

src/components/FormViewer/cardGourp.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <a-card
+      style="width: 100%"
+      :tab-list="tabListNoTitle"
+      :active-tab-key="noTitleKey"
+      @tabChange="(key) => onTabChange(key)"
+    >
+      <BasicForm ref="cardRef" @register="registerForm" @change="changeForm" />
+      <template v-if="Object.keys(childItem).length > 0">
+        <CardGourp
+          :data="childItem"
+          :parentValue="props.parentValue"
+          :formData="props.formData"
+          v-if="childItem"
+        />
+      </template>
+    </a-card>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '@/components/Form';
+  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({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    parentValue: {
+      type: String,
+      default: () => '',
+    },
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
+  const noTitleKey = ref(0);
+  const formColumns = [];
+  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,
+      schemas: formColumns,
+      showActionButtonGroup: false,
+      baseColProps: { lg: 24, md: 24 },
+    });
+  console.log(props);
+  watch(
+    () => props.formData,
+    (newVal) => {
+      cardFormData = newVal;
+      formColumns.forEach((element) => {
+        for (const key in cardFormData) {
+          if (element.field == key) {
+            var obj = {};
+            obj[key] = cardFormData[key];
+            subTableDataStore.setGroupData(obj);
+          }
+        }
+      });
+      setTimeout(() => {
+        setFieldsValue(subTableDataStore.getGroupData);
+      }, 10);
+    },
+    { deep: true },
+  );
+  if (tableData.componentProps) {
+    tableData.componentProps.options.forEach((element, index) => {
+      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,
+          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 }]);
+      if (element.index == value) {
+        element.show = true;
+        updateSchema([{ field: element.field, show: true }]);
+      }
+    });
+    setTimeout(() => {
+      resetFields();
+      setFieldsValue(subTableDataStore.getGroupData);
+    }, 10);
+  };
+  function changeForm() {
+    subTableDataStore.setGroupData(getFieldsValue());
+  }
+</script>

src/components/FormViewer/index.ts

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

src/components/FormViewer/index.vue

@@ -5,6 +5,12 @@
         <a-tab-pane v-for="(colItem, index) in tabsColumns" :tab="colItem.label" :key="index">
           <BasicForm ref="myDataBaseFormRef" @register="registerForm" />
           <subTable ref="subTableRef" :data="subTableColumns[index]" :tabsKey="tabsKey" />
+          <CardGourp
+            v-if="cardGroupData.length > 0"
+            :data="cardGroupData[index]"
+            :formData="cardGourpFormData"
+            :parentValue="cardGroupData[index].field"
+          />
         </a-tab-pane>
       </a-tabs>
     </template>
@@ -13,7 +19,9 @@
       @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">
@@ -38,6 +46,15 @@
         </a-col>
       </a-row>
     </template>
+    <!-- 卡片组 -->
+    <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" />
@@ -52,10 +69,11 @@
   import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-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 { SubTable, CardGourp } from './index';
   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();
 
@@ -83,6 +101,11 @@
   const keyValue = ref('');
   const FieldsValue = ref({});
   const subTableRef = ref<any>();
+  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') {
@@ -109,9 +132,11 @@
     });
     if (data) {
       const scheme = JSON.parse(data.scheme);
+      console.log(scheme);
       subTableColumns.value = [];
       // 将card组件嵌套起来
       scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
+      console.log(scheme.formInfo.tabList);
       subTableDB.value = scheme.db;
       let disDetail = false;
       let tableColumns = [];
@@ -123,6 +148,7 @@
           multiterm: '',
         });
         tabElement.schemas.forEach((element) => {
+          console.log(element);
           if (element.field == props.formRelationId) {
             keyValue.value = element.componentProps.fieldName;
             getFormDetail();
@@ -192,6 +218,13 @@
               });
             });
           }
+          // 卡片组布局
+          if (element.component === 'CardGroup') {
+            console.log(element);
+            cardGroupData.value.push({
+              ...element,
+            });
+          }
           formColumns.push({
             parentValue: index,
             ...element,
@@ -208,10 +241,10 @@
         }
       });
       formModalVisible.value = true;
+      console.log(formColumns);
       setTimeout(() => {
         subTableDataStore.setTableData(tableColumns);
         resetFields();
-        console.log(props.flowFormData);
         if (!disDetail) {
           console.log('赋值赋值');
           if (props.flowFormData) {
@@ -230,6 +263,7 @@
         element.show = true;
       }
     });
+    console.log(formColumns);
     // 切换时保存值
     const values = await validate();
     if (Object.keys(FieldsValue.value).length == 0) {
@@ -258,16 +292,11 @@
       keyValue: instance.pkeyValue,
     };
     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') {
           subTableDataStore.getTableData.forEach((element) => {
-            console.log(element);
-            console.log(data[i]);
             if (element.dataTable == i) {
               subTableDataStore.setSingleData(element.parentFileId, data[i]);
             }
@@ -280,21 +309,24 @@
       });
     }
     console.log(obj);
+    cardGourpFormData.value = obj;
     FieldsValue.value = obj;
     setFieldsValue({
       ...obj,
     });
-    let childTableName = subTableDB.value.find((item) => item.type === 'chlid').name;
-    let mainTableName = subTableDB.value.find((item) => item.type === 'main').name;
-    infoUseSubTableData.value = data[childTableName].map((item) => {
-      return {
-        ...item,
-        key: uuidv4(),
-      };
-    });
-    data[mainTableName].forEach((item) => {
-      infoUseMainTableData.value = { ...infoUseMainTableData.value, ...item };
-    });
+    if (subTableDB.value.length > 1) {
+      let childTableName = subTableDB.value.find((item) => item.type === 'chlid').name;
+      let mainTableName = subTableDB.value.find((item) => item.type === 'main').name;
+      infoUseSubTableData.value = data[childTableName].map((item) => {
+        return {
+          ...item,
+          key: uuidv4(),
+        };
+      });
+      data[mainTableName].forEach((item) => {
+        infoUseMainTableData.value = { ...infoUseMainTableData.value, ...item };
+      });
+    }
     if (Object.keys(cardValues.value).length > 0) {
       Object.keys(cardValues.value).forEach((cardItem) => {
         let cardItemKeyList = Object.keys(cardValues.value[cardItem]);
@@ -313,7 +345,6 @@
     }
   }
   async function getForm() {
-    console.log(subTableDataStore.getTableData);
     try {
       let values = await validate();
       for (const key in values) {
@@ -339,6 +370,22 @@
           query[item.parentFileId] = JSON.stringify(item.child);
         });
       }
+      // 储存卡片组信息
+      if (Object.keys(subTableDataStore.getGroupData).length > 0) {
+        for (const key in subTableDataStore.getGroupData) {
+          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) {

src/components/FormViewer/subTable.vue

@@ -6,7 +6,8 @@
       :data-source="tableData"
       :pagination="false"
       :scroll="scrollValue"
-    >
+      >
+      <!-- v-if="props.data.multiterm" -->
       <template #headerCell="{ column, record }">
         <template v-if="column.key === 'setting'">
           <PlusOutlined class="icon-button" @click="addListItem" v-if="!isDetail" />
@@ -25,6 +26,7 @@
         </template>
       </template>
     </a-table>
+    <!-- <BasicForm ref="subTableRef" @register="registerForm"  @change="changeData" v-else /> -->
   </div>
 </template>
 <script lang="ts" setup>
@@ -34,10 +36,10 @@
   import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
   import { subTableStore } from '@/store/modules/subTable';
   import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicForm, useForm } from '@/components/Form';
 
   const { createMessage } = useMessage();
   const subTableDataStore = subTableStore();
-
   const scrollValue = ref();
   const columns: any = ref([
     {
@@ -58,13 +60,17 @@
       default: '',
     },
   });
-  console.log(props);
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 100,
+      schemas: columns,
+      showActionButtonGroup: false,
+      baseColProps: { lg: 24, md: 24 },
+    });
 
   onMounted(() => {
-    console.log(subTableDataStore.getTableData);
     subTableDataStore.getTableData.forEach((element) => {
       if (element.parentFileId == props.data.parentFileId) {
-        console.log(element);
         tableData.value = element.child;
       }
     });
@@ -79,7 +85,6 @@
   watch(
     () => tableData.value,
     (newVal) => {
-      console.log(newVal);
       subTableDataStore.setSingleData(props.data.parentFileId, newVal);
     },
     { deep: true },
@@ -113,4 +118,7 @@
   defineExpose({
     getData,
   });
+  function changeData(){
+    console.log(tableData.value)
+  }
 </script>

src/components/ProcessDesigner/package/penal/myline/index.vue

@@ -52,6 +52,7 @@
     () => props.element,
     (newVal) => {
       if (newVal.type == 'bpmn:SequenceFlow') {
+        console.log(newVal);
         const currentNode = flowWfDataStore.getWfDataNode(newVal.id);
         if (currentNode) {
           node.value = currentNode;

src/components/ProcessDesigner/package/penal/startEvent/index.vue

@@ -163,6 +163,7 @@
   import { flowStore } from '@/store/modules/flow';
   import { SelectForm } from '@/components/SelectForm/index';
   import { functionGetSchemePageList, functionLoadFormPage } from '@/api/demo/formScheme';
+  import { cardNestStructure } from '@/views/demo/onlineform/util.ts';
 
   const flowWfDataStore = flowStore();
   const labelCol = { span: 7 };
@@ -339,6 +340,7 @@
       label?: string;
       value?: string;
     }[] = [];
+    scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
     scheme.formInfo.tabList.forEach((tabElement) => {
       tabElement.schemas.forEach(
         (element: { label?: string; field?: string; component: any; itemProps: any }) => {
@@ -360,6 +362,7 @@
               'CreateTime',
               'ModifyUser',
               'ModifyTime',
+              'CardGroup',
             ].includes(element.component) &&
             !element.itemProps.hidden
           ) {
@@ -436,6 +439,18 @@
             obj.ifShow = true;
             obj.fieldName = element.componentProps.fieldName;
             fields.push(obj);
+          } else if (['CardGroup'].includes(element.component)) {
+            element.componentProps.options.forEach((optionsElement) => {
+              optionsElement.children.forEach((childrenElement) => {
+                let obj: any = childrenElement;
+                obj.required = childrenElement.itemProps.required;
+                // obj.componentProps.disabled = false;
+                obj.disabled = true;
+                obj.ifShow = true;
+                obj.fieldName = childrenElement.componentProps.fieldName;
+                fields.push(obj);
+              });
+            });
           }
         },
       );

src/components/ProcessDesigner/package/penal/userTask/index.vue

@@ -512,6 +512,7 @@
   import { flowStore } from '@/store/modules/flow';
   import { SelectForm } from '@/components/SelectForm/index';
   import { functionGetSchemePageList, functionLoadFormPage } from '@/api/demo/formScheme';
+  import { cardNestStructure } from '@/views/demo/onlineform/util.ts';
 
   const flowWfDataStore = flowStore();
   const labelCol = { span: 7 };
@@ -894,6 +895,7 @@
       label?: string;
       value?: string;
     }[] = [];
+    scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
     scheme.formInfo.tabList.forEach((tabElement) => {
       tabElement.schemas.forEach(
         (element: { label?: string; field?: string; component: any; itemProps: any }) => {
@@ -914,6 +916,7 @@
               'CreateTime',
               'ModifyUser',
               'ModifyTime',
+              'CardGroup',
             ].includes(element.component) &&
             !element.itemProps.hidden
           ) {
@@ -990,6 +993,18 @@
             obj.ifShow = true;
             obj.fieldName = element.componentProps.fieldName;
             fields.push(obj);
+          } else if (['CardGroup'].includes(element.component)) {
+            element.componentProps.options.forEach((optionsElement) => {
+              optionsElement.children.forEach((childrenElement) => {
+                let obj: any = childrenElement;
+                obj.required = childrenElement.itemProps.required;
+                // obj.componentProps.disabled = false;
+                obj.disabled = true;
+                obj.ifShow = true;
+                obj.fieldName = childrenElement.componentProps.fieldName;
+                fields.push(obj);
+              });
+            });
           }
         },
       );

src/store/modules/subTable.ts

@@ -4,24 +4,36 @@ export const subTableStore = defineStore({
   id: 'subTable',
   state: () => ({
     tableDta: [],
+    groupData: {},
   }),
   getters: {
     getTableData(state) {
       return state.tableDta;
     },
+    getGroupData(state) {
+      return state.groupData;
+    },
   },
   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;
         }
       });
     },
+    setGroupData(data) {
+      for (const key2 in data) {
+        if (data[key2] != undefined) {
+          this.groupData[key2] = data[key2];
+        }
+      }
+    },
+    clearGoupData() {
+      this.groupData = {};
+    },
   },
 });

src/views/demo/form-design/components/VFormDesign/components/FormNode.vue

@@ -3,7 +3,7 @@
 -->
 <template>
   <div
-    class="drag-move-box"
+    class="drag-move-box component-border"
     @click.stop="handleSelectItem"
     :class="{ active: schema.key === formConfig.currentItem?.key }"
   >
@@ -51,3 +51,8 @@
     },
   });
 </script>
+<style lang="scss" scoped>
+.component-border{
+  border: 1px solid #d9d9d9
+}
+</style>

src/views/demo/form-design/components/VFormDesign/components/LayoutItem.vue

@@ -7,7 +7,7 @@
   <Col v-bind="colPropsComputed">
     <template v-if="['Grid','Card'].includes(schema.component)">
       <div
-        class="grid-box"
+        class="grid-box component-border"
         :class="{ active: schema.key === currentItem.key }"
         @click.stop="handleSetSelectItem(schema)"
       >
@@ -50,7 +50,7 @@
     </template>
     <template v-else-if="['Tabs'].includes(schema.component)">
       <div
-        class="grid-box"
+        class="grid-box component-border"
         :class="{ active: schema.key === currentItem.key }"
         @click.stop="handleSetSelectItem(schema)"
       >
@@ -87,7 +87,7 @@
     </template>
     <template v-else-if="['CardGroup'].includes(schema.component)">
       <div
-        class="grid-box"
+        class="grid-box component-border"
         :class="{ active: schema.key === currentItem.key }"
         @click.stop="handleSetSelectItem(schema)"
       >
@@ -214,3 +214,8 @@
     background-color: rgb(240 191 195);
   }
 </style>
+<style lang="scss" scoped>
+.component-border{
+  border: 1px solid #d9d9d9
+}
+</style>

src/views/demo/form-design/core/formItemConfig.ts

@@ -426,16 +426,16 @@ export const baseComponents: IVFormComponent[] = [
       ],
     },
   },
-  {
-    component: 'Upload',
-    label: '上传',
-    icon: 'ant-design:upload-outlined',
-    field: '',
-    colProps: { span: 24 },
-    componentProps: {
-      api: () => 1,
-    },
-  },
+  // {
+  //   component: 'Upload',
+  //   label: '上传',
+  //   icon: 'ant-design:upload-outlined',
+  //   field: '',
+  //   colProps: { span: 24 },
+  //   componentProps: {
+  //     api: () => 1,
+  //   },
+  // },
   {
     component: 'Cascader',
     label: '级联选择',

src/views/demo/onlineform/formdesign/FormModal.vue

@@ -168,6 +168,8 @@
         result.push(item);
       });
       return result;
+    }else{
+      return data
     }
   };
   async function designSendGrandson(value) {

src/views/demo/onlineform/util.ts

@@ -30,7 +30,7 @@ export const cardNestStructure = (data) => {
     }else if(item.component === 'Card'){
       item.columns[0].children = childList[item.field] || []
       result.push(item)
-    }else if(item.field.indexOf('use_card') !== -1){
+    }else if(item.field && item.field.indexOf('use_card') !== -1){
       item.children = childList[item.field] || []
       result.push(item)
     }else{