HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

hc_zhufu
徐景良 2024-06-05 14:01:09 +08:00
parent c8c4e33b9b d7cd7c5bbc
commit 59cfa6fcc8
4 changed files with 140 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/FormViewer/index.vue
View File

@ -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 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<any>();
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);

42
src/components/FormViewer/subTable.vue
View File

@ -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>

27
src/store/modules/subTable.ts Normal file
View File

@ -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;
}
});
},
},
});

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

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