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

dianlixunjian
徐景良 2024-06-21 17:47:22 +08:00
parent d63b28279b 13a75ddb64
commit 2022b43ab1
5 changed files with 230 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/demo/form-design/components/VFormItem/index.vue
View File

@ -38,7 +38,7 @@
图斑组件 图斑组件
</Divider> </Divider>
<a-button <a-button
v-if="['Button'].includes(schema.component)" v-else-if="['Button'].includes(schema.component)"
:type="schema.componentProps.type" :type="schema.componentProps.type"
:shape="schema.componentProps.shape" :shape="schema.componentProps.shape"
:size="schema.componentProps.size" :size="schema.componentProps.size"
@ -78,6 +78,24 @@
:defaultValue="schema.defaultValue"> :defaultValue="schema.defaultValue">
</a-select> </a-select>
</div> </div>
<a-transfer
v-else-if="['Transfer'].includes(schema.component)"
:dataSource="schema.componentProps.dataSource"
:targetKeys="schema.componentProps.targetKeys"
:selectedKeys="schema.componentProps.selectedKeys"
:schema="schema"
:render="(item) => `${item.title} ${item.description}`"
:titles="schema.componentProps.titles"
:disabled="schema.componentProps.disabled"
:oneWay="schema.componentProps.oneWay"
:pagination="schema.componentProps.pagination"
:showSearch="schema.componentProps.showSearch"
:showSelectAll="schema.componentProps.showSelectAll"
@change="transferChange"
@search="transferSearch"
@selectChange="transferSelectChange"
@click="handleClick(schema)"
/>
<component <component
v-else v-else
class="v-form-item-wrapper" class="v-form-item-wrapper"
@ -258,6 +276,17 @@
setFormModel(props.schema.field!, value); setFormModel(props.schema.field!, value);
emit('change', value); emit('change', value);
}; };
// 穿梭框-左右穿梭
const transferChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
props.schema.componentProps.targetKeys = nextTargetKeys;
};
// 穿梭框-查找
const transferSearch = (dir: string, value: string) => {};
// 穿梭框-选中
const transferSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
props.schema.componentProps.selectedKeys = sourceSelectedKeys.concat(targetSelectedKeys);
};
return { return {
...toRefs(state), ...toRefs(state),
componentItem, componentItem,
@ -269,6 +298,9 @@
colPropsComputed, colPropsComputed,
selectUseOptions, selectUseOptions,
showSelectDictionaryList, showSelectDictionaryList,
transferChange,
transferSearch,
transferSelectChange,
}; };
}, },
}); });

5
src/views/demo/form-design/core/formItemConfig.ts
View File

@ -365,8 +365,7 @@ export const commonComponents: IVFormComponent[] = [
field: '', field: '',
colProps: { span: 24 }, colProps: { span: 24 },
componentProps: { componentProps: {
render: (item) => item.title, titles: ['', ''],
titles: ['Source', 'Target'],
dataSource: [ dataSource: [
{ {
key: 'key-1', key: 'key-1',
@ -387,6 +386,8 @@ export const commonComponents: IVFormComponent[] = [
disabled: false, disabled: false,
}, },
], ],
targetKeys: [],
selectedKeys: [],
}, },
}, },
]; ];

60
src/views/demo/onlineform/formCall/InfoCallModal/index.vue
View File

@ -11,23 +11,21 @@
'word-break': 'break-all' 'word-break': 'break-all'
}"> }">
<template v-for="(item, index) in tab.children" :key="index"> <template v-for="(item, index) in tab.children" :key="index">
<a-descriptions-item v-if="item.component === 'ImageUpload'" :label="item.label"> <template v-if="item.infoShowValue">
<a-image <a-descriptions-item v-if="item.component === 'ImageUpload'" :label="item.label">
v-if="item.infoShowValue" <a-image
width="100px" width="100px"
height="100px" height="100px"
:src="`${item.componentProps.server}/${item.infoShowValue}`" :src="`${item.componentProps.server}/${item.infoShowValue}`"
></a-image> ></a-image>
<div v-else style="opacity: 0.3; user-select: none;">{{"(暂无)"}}</div> </a-descriptions-item>
</a-descriptions-item> <a-descriptions-item v-else-if="item.component === 'VideoUpload'" :label="item.label">
<a-descriptions-item v-else-if="item.component === 'VideoUpload'" :label="item.label"> <img style="width: 100px; height: 100px; cursor: pointer;" src="./video.png" @click="handlePreview(item)" alt="">
<img v-if="item.infoShowValue" style="width: 100px; height: 100px; cursor: pointer;" src="./video.png" @click="handlePreview(item)" alt=""> </a-descriptions-item>
<div v-else style="opacity: 0.3; user-select: none;">{{"(暂无)"}}</div> <a-descriptions-item v-else :label="item.label">
</a-descriptions-item> <div>{{ item.infoShowValue}}</div>
<a-descriptions-item v-else :label="item.label"> </a-descriptions-item>
<div v-if="item.infoShowValue">{{ item.infoShowValue}}</div> </template>
<div v-else style="opacity: 0.3; user-select: none;">{{"(暂无)"}}</div>
</a-descriptions-item>
</template> </template>
</a-descriptions> </a-descriptions>
</a-tab-pane> </a-tab-pane>
@ -43,17 +41,19 @@
'word-break': 'break-all' 'word-break': 'break-all'
}"> }">
<template v-for="(item, index) in showList" :key="index"> <template v-for="(item, index) in showList" :key="index">
<a-descriptions-item v-if="item.component === 'ImageUpload'" :label="item.label"> <template v-if="item.infoShowValue">
<a-image <a-descriptions-item v-if="item.component === 'ImageUpload'" :label="item.label">
width="100px" <a-image
height="100px" width="100px"
:src="`${item.componentProps.server}/${item.infoShowValue}`" height="100px"
></a-image> :src="`${item.componentProps.server}/${item.infoShowValue}`"
</a-descriptions-item> ></a-image>
<a-descriptions-item v-else-if="item.component === 'VideoUpload'" :label="item.label"> </a-descriptions-item>
<img v-if="item.infoShowValue" style="width: 100px; height: 100px; cursor: pointer;" src="./video.png" @click="handlePreview(item)" alt=""> <a-descriptions-item v-else-if="item.component === 'VideoUpload'" :label="item.label">
</a-descriptions-item> <img style="width: 100px; height: 100px; cursor: pointer;" src="./video.png" @click="handlePreview(item)" alt="">
<a-descriptions-item v-else :label="item.label">{{ item.infoShowValue }}</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item v-else :label="item.label">{{ item.infoShowValue }}</a-descriptions-item>
</template>
</template> </template>
</a-descriptions> </a-descriptions>
<a-table v-if="subTableData" :columns="columns" :data-source="props.data.infoUseSubTableData" :pagination="false"></a-table> <a-table v-if="subTableData" :columns="columns" :data-source="props.data.infoUseSubTableData" :pagination="false"></a-table>
@ -113,7 +113,7 @@ onMounted(() => {
...childItem, ...childItem,
infoShowValue: getOptionLabel(childItem) infoShowValue: getOptionLabel(childItem)
}) })
}else{ }else if(childItem.component !== 'InputGuid'){
showList.value[tabIndex].children.push({ showList.value[tabIndex].children.push({
...childItem, ...childItem,
infoShowValue: props.data.infoUseMainTableData[childItem.field] infoShowValue: props.data.infoUseMainTableData[childItem.field]
@ -155,7 +155,7 @@ onMounted(() => {
key: child.field, key: child.field,
}) })
}) })
}else{ }else if(item.component !== 'InputGuid'){
showList.value.push({ showList.value.push({
...item, ...item,
infoShowValue: props.data.infoUseMainTableData[item.field] infoShowValue: props.data.infoUseMainTableData[item.field]

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

@ -28,6 +28,11 @@
}}</a-button> }}</a-button>
</div> </div>
</template> </template>
<template #bodyCell="{ column, record }">
<template v-if="['树形选择', '级联选择', '复选框-组'].includes(column.title)">
{{ dataModification(column, record) }}
</template>
</template>
</BasicTable> </BasicTable>
<!-- <ShowFormModal <!-- <ShowFormModal
@ -68,19 +73,19 @@
</div> </div>
<CallModal @success="submitsuccess" @register="registerModal" /> <CallModal @success="submitsuccess" @register="registerModal" />
<a-modal <a-modal
width="80%" width="80%"
v-model:open="infoCallModalOpen" v-model:open="infoCallModalOpen"
title="详情" title="详情"
:footer="null" :footer="null"
:maskClosable="true" :maskClosable="true"
:destroyOnClose="true" :destroyOnClose="true"
@cancel="closeModal"> @cancel="closeModal"
>
<div class="content"> <div class="content">
<InfoCallModal :data="infoCallModalData"/> <InfoCallModal :data="infoCallModalData" />
</div> </div>
</a-modal> </a-modal>
<a-modal <a-modal
width="100%" width="100%"
@ -120,14 +125,14 @@
import { useModal } from '@/components/Modal'; import { useModal } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import CallModal from './CallModal.vue'; import CallModal from './CallModal.vue';
import InfoCallModal from './InfoCallModal/index.vue' import InfoCallModal from './InfoCallModal/index.vue';
import MapFormModal from './MapForm.vue'; import MapFormModal from './MapForm.vue';
import CreateFlow from './CreateFlow.vue'; import CreateFlow from './CreateFlow.vue';
// import MapboxMap from '@/components/MapboxMaps/MapComponent.vue' // import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'
import ShowFormModal from './ShowFormModal/index.vue'; import ShowFormModal from './ShowFormModal/index.vue';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import { changeCardStructure, cardNestStructure } from '@/views/demo/onlineform/util.ts'; 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 MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
const mapFormShow = ref<boolean>(false); const mapFormShow = ref<boolean>(false);
const mapFormData = ref<Object>({}); const mapFormData = ref<Object>({});
@ -143,8 +148,8 @@
const mapSetData = ref({ const mapSetData = ref({
width: 100, width: 100,
}); });
const infoCallModalOpen = ref(false) const infoCallModalOpen = ref(false);
const infoCallModalData = ref({}) const infoCallModalData = ref({});
const selectedSubTableDataId = ref(''); const selectedSubTableDataId = ref('');
const formData = ref([]); const formData = ref([]);
const mapgemoList = ref([]); const mapgemoList = ref([]);
@ -591,8 +596,8 @@
} }
} else { } else {
// openModal(true, toProps); // openModal(true, toProps);
infoCallModalOpen.value = true infoCallModalOpen.value = true;
infoCallModalData.value = toProps infoCallModalData.value = toProps;
} }
break; break;
case 'Import': case 'Import':
@ -745,13 +750,13 @@
console.log('columnObj', columnObj); console.log('columnObj', columnObj);
if (formObj.formInfo.tabList && formObj.formInfo.tabList.length > 0) { if (formObj.formInfo.tabList && formObj.formInfo.tabList.length > 0) {
// 为使用字典字段的下拉组件的options赋值 // 为使用字典字段的下拉组件的options赋值
formObj.formInfo.tabList.forEach(childTab => { formObj.formInfo.tabList.forEach((childTab) => {
childTab.schemas.forEach(async item => { childTab.schemas.forEach(async (item) => {
if(item.component === 'Select' && item.dataType === '2'){ if (item.component === 'Select' && item.dataType === '2') {
item.componentProps.options = await formCallStore.getDictionaryOptions(item.dataCode) item.componentProps.options = await formCallStore.getDictionaryOptions(item.dataCode);
} }
}) });
}) });
// 将card嵌套起来 // 将card嵌套起来
formObj.formInfo.tabList = cardNestStructure(formObj.formInfo.tabList); formObj.formInfo.tabList = cardNestStructure(formObj.formInfo.tabList);
const arr: any = []; const arr: any = [];
@ -810,24 +815,31 @@
} }
if (columnObj.table.querys) { if (columnObj.table.querys) {
columnObj.table.querys.forEach((item) => { columnObj.table.querys.forEach((item) => {
if (item.options) { // if (item.options) {
searchFormSchema.push({ // searchFormSchema.push({
field: item.key, // field: item.key,
component: item.type || 'Input', // component: item.type || 'Input',
label: item.label, // label: item.label,
colProps: { span: 6 }, // colProps: { span: 6 },
componentProps: { // componentProps: {
options: item.options, // options: item.options,
}, // },
}); // });
} else { // } else {
searchFormSchema.push({ // searchFormSchema.push({
field: item.key, // field: item.key,
component: item.type || 'Input', // component: item.type || 'Input',
label: item.label, // label: item.label,
colProps: { span: 6 }, // colProps: { span: 6 },
}); // });
} // }
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) => { callColumns.forEach((item) => {
@ -990,7 +1002,92 @@
mapFormShow.value = false; mapFormShow.value = false;
}; };
const closeModal = () => { 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> </script>
<style lang="less"> <style lang="less">
@ -1033,7 +1130,9 @@
background: #fff; background: #fff;
z-index: 999; z-index: 999;
} }
.content{ .content {
padding: 30px; padding: 30px;
} height: 750px;
overflow: auto;
}
</style> </style>

32
src/views/demo/onlineform/formModule/modalDesign.vue
View File

@ -281,16 +281,28 @@
!['Upload', 'Uploadimg', 'Password', 'Timerange', 'Datetimerange'].includes(t.component), !['Upload', 'Uploadimg', 'Password', 'Timerange', 'Datetimerange'].includes(t.component),
) )
.map((t) => { .map((t) => {
if (t.componentProps.options) { // if (t.componentProps.options) {
return { // return {
key: t.field, // key: t.field,
label: t.label, // label: t.label,
type: t.component, // type: t.component,
options: t.componentProps.options, // options: t.componentProps.options,
}; // componentProps: t.componentProps,
} else { // };
return { key: t.field, label: t.label, type: t.component }; // } else {
} // return {
// key: t.field,
// label: t.label,
// type: t.component,
// componentProps: t.componentProps,
// };
// }
return {
key: t.field,
label: t.label,
type: t.component,
componentProps: t.componentProps,
};
}); });
// 常用按钮-树 // 常用按钮-树