From d7cd7c5bbcf66bfa400e57a88c54dfcbb30d70ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com> Date: Wed, 5 Jun 2024 11:01:11 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E5=AD=90=E8=A1=A8=EF=BC=8C=E5=AD=90?= =?UTF-8?q?=E8=A1=A8=E5=A2=9E=E5=8A=A0=E5=8D=95=E8=A1=8C=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FormViewer/index.vue | 122 ++++++++++-------- src/components/FormViewer/subTable.vue | 42 +++++- src/store/modules/subTable.ts | 27 ++++ .../config/componentPropsConfig.ts | 4 + 4 files changed, 140 insertions(+), 55 deletions(-) create mode 100644 src/store/modules/subTable.ts diff --git a/src/components/FormViewer/index.vue b/src/components/FormViewer/index.vue index 6f0e8682..244ea990 100644 --- a/src/components/FormViewer/index.vue +++ b/src/components/FormViewer/index.vue @@ -4,7 +4,7 @@ - + @@ -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 infoUseMainTableData = ref({}) - + const infoUseSubTableData = ref(); + const infoUseMainTableData = ref({}); + const tabsKey = ref(0); const keyValue = ref(''); const FieldsValue = ref({}); - const getCardLayoutKey = (dataList,key) => { - dataList.forEach(item => { - if (item.component === 'Card'){ - getCardLayoutKey(item.columns[0].children,key) - }else if(item.type === "subTable"){ - cardValues.value[key][item.field] = [] - }else{ - cardValues.value[key][item.field] = "" + const subTableRef = ref(); + const getCardLayoutKey = (dataList, key) => { + dataList.forEach((item) => { + if (item.component === 'Card') { + getCardLayoutKey(item.columns[0].children, key); + } else if (item.type === 'subTable') { + 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] = {} - getCardLayoutKey(element.columns[0].children,element.field) + cardValues.value[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 => { - 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]) - Object.keys(infoUseMainTableData.value).forEach(item => { - if(cardItemKeyList.includes(item)){ - cardValues.value[cardItem][item] = infoUseMainTableData.value[item] + 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]); + Object.keys(infoUseMainTableData.value).forEach((item) => { + if (cardItemKeyList.includes(item)) { + cardValues.value[cardItem][item] = infoUseMainTableData.value[item]; } - }) - // todo - cardItemKeyList.forEach(item => { - if(item.indexOf('grid') !== -1){ - cardValues.value[cardItem][item] = infoUseSubTableData.value + }); + // todo + cardItemKeyList.forEach((item) => { + if (item.indexOf('grid') !== -1) { + 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) - cardValueList.forEach(item => { - values = {...values, ...item} - }) - let saveSubTableList = []; + console.log(values); + console.log(FieldsValue.value); + let cardValueList = Object.values(cardValues.value); + cardValueList.forEach((item) => { + values = { ...values, ...item }; + }); let query = values; console.log(query); - subTableList.value.forEach((item) => { - let emptyObj = {}; - for (const key in item) { - if (key === 'key') continue; - emptyObj[key] = item[key]; - } - saveSubTableList.push(emptyObj); - }); - if (subTableId.value) { - query[subTableId.value] = JSON.stringify(saveSubTableList); + // 存储子表的信息 + if (subTableDataStore.getTableData.length > 0) { + subTableDataStore.getTableData.forEach((item) => { + query[item.parentFileId] = JSON.stringify(item.child); + }); } + console.log(query); return query; } catch (error) { console.log(error); diff --git a/src/components/FormViewer/subTable.vue b/src/components/FormViewer/subTable.vue index 844bb5f7..9bcef40d 100644 --- a/src/components/FormViewer/subTable.vue +++ b/src/components/FormViewer/subTable.vue @@ -1,6 +1,5 @@