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

表单调用-表单列表：树形选择, 级联选择, 复选框-组显示label

dianlixunjian
滕嵩 2024-06-21 17:25:36 +08:00
parent 51e2868d9b
commit 13a75ddb64
1 changed files with 123 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
src/views/demo/onlineform/formCall/index.vue
View File

@ -28,6 +28,11 @@
}}</a-button>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="['树形选择', '级联选择', '复选框-组'].includes(column.title)">
{{ dataModification(column, record) }}
</template>
</template>
</BasicTable>
<!-- <ShowFormModal
@ -68,19 +73,19 @@
</div>
<CallModal @success="submitsuccess" @register="registerModal" />
<a-modal
width="80%"
v-model:open="infoCallModalOpen"
title="详情"
:footer="null"
:maskClosable="true"
<a-modal
width="80%"
v-model:open="infoCallModalOpen"
title="详情"
:footer="null"
:maskClosable="true"
:destroyOnClose="true"
@cancel="closeModal">
@cancel="closeModal"
>
<div class="content">
<InfoCallModal :data="infoCallModalData"/>
<InfoCallModal :data="infoCallModalData" />
</div>
</a-modal>
<a-modal
width="100%"
@ -120,14 +125,14 @@
import { useModal } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import CallModal from './CallModal.vue';
import InfoCallModal from './InfoCallModal/index.vue'
import InfoCallModal from './InfoCallModal/index.vue';
import MapFormModal from './MapForm.vue';
import CreateFlow from './CreateFlow.vue';
// import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'
import ShowFormModal from './ShowFormModal/index.vue';
import { v4 as uuidv4 } from 'uuid';
import { changeCardStructure, cardNestStructure } from '@/views/demo/onlineform/util.ts';
import { useFormCallStore } from '@/store/modules/formCall.ts'
import { useFormCallStore } from '@/store/modules/formCall.ts';
const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
const mapFormShow = ref<boolean>(false);
const mapFormData = ref<Object>({});
@ -143,8 +148,8 @@
const mapSetData = ref({
width: 100,
});
const infoCallModalOpen = ref(false)
const infoCallModalData = ref({})
const infoCallModalOpen = ref(false);
const infoCallModalData = ref({});
const selectedSubTableDataId = ref('');
const formData = ref([]);
const mapgemoList = ref([]);
@ -591,8 +596,8 @@
}
} else {
// openModal(true, toProps);
infoCallModalOpen.value = true
infoCallModalData.value = toProps
infoCallModalOpen.value = true;
infoCallModalData.value = toProps;
}
break;
case 'Import':
@ -745,13 +750,13 @@
console.log('columnObj', columnObj);
if (formObj.formInfo.tabList && formObj.formInfo.tabList.length > 0) {
// 为使用字典字段的下拉组件的options赋值
formObj.formInfo.tabList.forEach(childTab => {
childTab.schemas.forEach(async item => {
if(item.component === 'Select' && item.dataType === '2'){
item.componentProps.options = await formCallStore.getDictionaryOptions(item.dataCode)
formObj.formInfo.tabList.forEach((childTab) => {
childTab.schemas.forEach(async (item) => {
if (item.component === 'Select' && item.dataType === '2') {
item.componentProps.options = await formCallStore.getDictionaryOptions(item.dataCode);
}
})
})
});
});
// 将card嵌套起来
formObj.formInfo.tabList = cardNestStructure(formObj.formInfo.tabList);
const arr: any = [];
@ -828,16 +833,15 @@
// colProps: { span: 6 },
// });
// }
if (['Transfer'].includes(item.type)) {
searchFormSchema.push({
field: item.key,
component: item.type,
label: item.label,
colProps: { span: 12 },
componentProps: item.componentProps,
});
}
})}
searchFormSchema.push({
field: item.key,
component: item.type,
label: item.label,
colProps: ['Transfer'].includes(item.type) ? { span: 12 } : { span: 6 },
componentProps: item.componentProps || { options: item.options },
});
});
}
callColumns.forEach((item) => {
formObj.formInfo.schemas.forEach((val) => {
if (item.dataIndex == val.field && val.componentProps.options) {
@ -998,7 +1002,92 @@
mapFormShow.value = false;
};
const closeModal = () => {
infoCallModalOpen.value = false
infoCallModalOpen.value = false;
};
// 表单列表数据修饰
const dataModification = (column, record) => {
let res: any = '';
if (column.title == '树形选择') {
searchFormSchema?.forEach((item: any) => {
if (item.component && item.component == 'TreeSelect') {
res = getTreeSelectLabel(res, item.componentProps.treeData, record[column.dataIndex]);
}
});
} else if (column.title == '级联选择') {
searchFormSchema?.forEach((item: any) => {
if (item.component && item.component == 'Cascader') {
// 转成数组
let CascaderData = JSON.parse(record[column.dataIndex]?.replace(/\r\n/g, '') || '[]');
// 返回的结果
let CascaderRes = {
label: '',
children: item.componentProps.options,
};
CascaderData?.forEach((value, value_index) => {
if (value_index == 0) {
CascaderRes = getCascaderLabel(value, CascaderRes);
res = CascaderRes.label;
} else {
CascaderRes = getCascaderLabel(value, CascaderRes);
res = res + ' / ' + CascaderRes.label;
}
});
}
});
} else if (column.title == '复选框-组') {
searchFormSchema?.forEach((item: any) => {
if (item.component && item.component == 'CheckboxGroup') {
item.componentProps.options?.forEach((op) => {
// 转成数组
let CheckboxGroupData = JSON.parse(
record[column.dataIndex]?.replace(/\r\n/g, '') || '[]',
);
CheckboxGroupData?.forEach((CheckboxGroupData_item, index) => {
if (op.value == CheckboxGroupData_item) {
if (index == 0) {
res = op.label;
} else {
res = res + ' | ' + op.label;
}
}
});
});
}
});
} else {
// console.log(1012);
// console.log(column);
// console.log(record);
// console.log(searchFormSchema);
res = record[column.dataIndex];
}
return res;
};
// 树形选择-表单列表数据修饰
function getTreeSelectLabel(res, treeData, value) {
treeData?.forEach((element) => {
if (element.value == value) {
res = element.label;
}
if (element.children) {
res = getTreeSelectLabel(res, element.children, value);
}
});
return res;
}
// 级联选择-表单列表数据修饰
function getCascaderLabel(value, CascaderRes) {
let res: any = {};
CascaderRes.children.forEach((ch) => {
if (ch.value == value) {
res.label = ch.label;
res.children = ch.children;
}
});
return res;
}
</script>
<style lang="less">
@ -1041,9 +1130,9 @@
background: #fff;
z-index: 999;
}
.content{
.content {
padding: 30px;
height: 750px;
overflow: auto;
}
}
</style>