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

卡片组解析，数据提交
2024-06-06 14:44:27 +08:00 · 2024-06-06 14:44:24 +08:00
8 changed files with 236 additions and 27 deletions
--- a/src/components/FormViewer/cardGourp.vue
+++ b/src/components/FormViewer/cardGourp.vue
@ -0,0 +1,126 @@
+<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="childGourp.length > 0">
+        <CardGourp
+          :data="childGourp[noTitleKey]"
+          :parentValue="props.parentValue"
+          :formData="props.formData"
+          v-if="childGourp[noTitleKey]"
+        />
+      </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';
+
+  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([]);
+  let cardFormData = props.formData;
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 100,
+      schemas: formColumns,
+      showActionButtonGroup: false,
+      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);
+          }
+        }
+      });
+      setTimeout(() => {
+        setFieldsValue(subTableDataStore.getGroupData);
+      }, 10);
+    },
+    { 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,
+        index: index,
+      });
+      if (childElement.component == 'CardGroup') {
+        console.log(childElement);
+        childGourp.value.push({
+          ...childElement,
+        });
+      }
+    });
+  });
+  setTimeout(() => {
+    resetFields();
+  }, 10);
+
+  const onTabChange = (value: string) => {
+    noTitleKey.value = value;
+    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();
+      console.log(subTableDataStore.getGroupData);
+      setFieldsValue(subTableDataStore.getGroupData);
+    }, 10);
+  };
+  function changeForm() {
+    console.log(getFieldsValue());
+    subTableDataStore.setGroupData(getFieldsValue());
+  }
+</script>
--- a/src/components/FormViewer/index.ts
+++ b/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';
--- a/src/components/FormViewer/index.vue
+++ b/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,13 @@
        </a-col>
      </a-row>
    </template>
+    <!-- 卡片组 -->
+    <CardGourp
+      v-if="cardGroupData.length > 0"
+      :data="cardGroupData[0]"
+      :formData="cardGourpFormData"
+      :parentValue="cardGroupData[0].field"
+    />
    <!-- todo  创建/修改  人/时间 -->
    <template v-for="(item, index) in createOrModifyList" :key="index">
      <CreateOrModifyComponent :data="item" />
@ -52,7 +67,7 @@
  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';
@ -83,6 +98,9 @@
  const keyValue = ref('');
  const FieldsValue = ref({});
  const subTableRef = ref<any>();
+  const cardGroupData = ref([]);
+  const cardGourpFormData = ref({});
+  subTableDataStore.clearGoupData();
  const getCardLayoutKey = (dataList, key) => {
    dataList.forEach((item) => {
      if (item.component === 'Card') {
@ -109,6 +127,7 @@
    });
    if (data) {
      const scheme = JSON.parse(data.scheme);
+      console.log(scheme);
      subTableColumns.value = [];
      // 将card组件嵌套起来
      scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
@ -123,6 +142,7 @@
          multiterm: '',
        });
        tabElement.schemas.forEach((element) => {
+          console.log(element);
          if (element.field == props.formRelationId) {
            keyValue.value = element.componentProps.fieldName;
            getFormDetail();
@ -192,6 +212,13 @@
              });
            });
          }
+          // 卡片组布局
+          if (element.component === 'CardGroup') {
+            console.log(element);
+            cardGroupData.value.push({
+              ...element,
+            });
+          }
          formColumns.push({
            parentValue: index,
            ...element,
@ -208,10 +235,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 +257,7 @@
        element.show = true;
      }
    });
+    console.log(formColumns);
    // 切换时保存值
    const values = await validate();
    if (Object.keys(FieldsValue.value).length == 0) {
@ -258,16 +286,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 +303,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 +339,6 @@
    }
  }
  async function getForm() {
-    console.log(subTableDataStore.getTableData);
    try {
      let values = await validate();
      for (const key in values) {
@ -339,6 +364,12 @@
          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]);
+        }
+      }
      console.log(query);
      return query;
    } catch (error) {
--- a/src/components/FormViewer/subTable.vue
+++ b/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>
--- a/src/components/ProcessDesigner/package/penal/myline/index.vue
+++ b/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;
--- a/src/components/ProcessDesigner/package/penal/startEvent/index.vue
+++ b/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);
+              });
+            });
          }
        },
      );
--- a/src/components/ProcessDesigner/package/penal/userTask/index.vue
+++ b/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);
+              });
+            });
          }
        },
      );
--- a/src/store/modules/subTable.ts
+++ b/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 = {};
+    },
  },
 });
Author	SHA1	Message	Date
刘妍	8962295c9d	Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua	2024-06-06 14:44:27 +08:00
刘妍	5d3338c743	卡片组解析，数据提交	2024-06-06 14:44:24 +08:00