表单设计器字段添加注释、分割线表单组件等去除保存验证,表单发布调用查询功能添加

hc_zhufu
zzq 2024-06-05 17:28:56 +08:00
parent d7cd7c5bbc
commit 02f0ad9461
5 changed files with 120 additions and 82 deletions

View File

@ -246,7 +246,7 @@
if (data && data[0]) { if (data && data[0]) {
data[0].db_codecolumnsList.forEach((item) => { data[0].db_codecolumnsList.forEach((item) => {
arr.push({ arr.push({
label: item.dbColumnName, label: item.dbColumnName + '(' + item.description + ')',
value: item.dbColumnName, value: item.dbColumnName,
csType: item.csType, csType: item.csType,
}); });

View File

@ -90,6 +90,7 @@ export function toLine(str: string) {
export function formItemsForEach(array: IVFormComponent[], cb: (item: IVFormComponent) => void) { export function formItemsForEach(array: IVFormComponent[], cb: (item: IVFormComponent) => void) {
if (!isArray(array)) return; if (!isArray(array)) return;
const traverse = (schemas: IVFormComponent[]) => { const traverse = (schemas: IVFormComponent[]) => {
if (schemas) {
schemas.forEach((formItem: IVFormComponent) => { schemas.forEach((formItem: IVFormComponent) => {
if (['Grid'].includes(formItem.component)) { if (['Grid'].includes(formItem.component)) {
// 栅格布局 // 栅格布局
@ -98,6 +99,7 @@ export function formItemsForEach(array: IVFormComponent[], cb: (item: IVFormComp
cb(formItem); cb(formItem);
} }
}); });
}
}; };
traverse(array); traverse(array);
} }

View File

@ -20,7 +20,7 @@
class="table-container form-call-table" class="table-container form-call-table"
:style="`${haveMap ? `width:${100 - mapSetData.width}%;` : 'width:100%'}`" :style="`${haveMap ? `width:${100 - mapSetData.width}%;` : 'width:100%'}`"
> >
<BasicTable @register="registerTable" @row-click="handRowClick"> <BasicTable @register="registerTable" @row-click="handRowClick" :searchInfo="searchInfo">
<template #toolbar> <template #toolbar>
<div v-for="(item, index) in btnArr" :key="index"> <div v-for="(item, index) in btnArr" :key="index">
<a-button :type="item.class" @click="handleClickForm(item.prop)">{{ <a-button :type="item.class" @click="handleClickForm(item.prop)">{{
@ -97,7 +97,7 @@
// 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 { cardNestStructure } from '@/views/demo/onlineform/util.ts' import { cardNestStructure } from '@/views/demo/onlineform/util.ts';
const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue')); const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
@ -123,11 +123,11 @@
const treeVisible: any = ref(false); const treeVisible: any = ref(false);
const paramsId: any = ref(); const paramsId: any = ref();
const designData: any = ref(); const designData: any = ref();
const searchValue: any = ref(); const searchInfo: any = ref({});
const addParamsArr: any = ref([]); const addParamsArr: any = ref([]);
const paramsCode = route.query.code; const paramsCode = route.query.code;
const callColumns: BasicColumn[] = []; const callColumns: BasicColumn[] = [];
const searchFormSchema: FormSchema[] = ref([]); const searchFormSchema: FormSchema[] = [];
const btnList: any = ref([]); const btnList: any = ref([]);
const treeData = ref<TreeItem[]>([]); const treeData = ref<TreeItem[]>([]);
const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null); const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
@ -136,8 +136,8 @@
const flowCode = ref(''); //code const flowCode = ref(''); //code
const flowFormData = ref({}); // const flowFormData = ref({}); //
const isUpdate = ref(false); // const isUpdate = ref(false); //
const infoUseSubTableData = ref() const infoUseSubTableData = ref();
const infoUseMainTableData = ref({}) const infoUseMainTableData = ref({});
// //
const layers = reactive([ const layers = reactive([
{ {
@ -181,7 +181,7 @@
// //
const location = reactive([118.556717, 35.80391]); const location = reactive([118.556717, 35.80391]);
if (paramsCode == '数据统计') { if (paramsCode == '数据统计') {
searchFormSchema.value = [ searchFormSchema = [
{ {
field: 'typeid', field: 'typeid',
component: 'ApiSelect', component: 'ApiSelect',
@ -230,7 +230,7 @@
}, },
]; ];
} else if (paramsCode == '数据审核') { } else if (paramsCode == '数据审核') {
searchFormSchema.value = [ searchFormSchema = [
{ {
field: 'typeid', field: 'typeid',
component: 'ApiSelect', component: 'ApiSelect',
@ -298,15 +298,20 @@
showTableSetting: true, showTableSetting: true,
bordered: true, bordered: true,
beforeFetch: (data) => { beforeFetch: (data) => {
console.log('item.key', data)
// //
const querys = JSON.parse(JSON.stringify(data));
console.log('1111', querys)
delete querys.page;
delete querys.limit;
console.log('querys', querys)
var temp = { var temp = {
id: paramsId.value, id: paramsId.value,
paginationInputDto: { paginationInputDto: {
page: data.page, page: data.page,
rows: data.limit, rows: data.limit,
keyWord: data.key,
}, },
queryJson: searchValue.value, queryJson: JSON.stringify(querys),
}; };
return temp; return temp;
}, },
@ -573,7 +578,7 @@
const rel = selected.node.dataRef; const rel = selected.node.dataRef;
const obj: any = {}; const obj: any = {};
obj[rel.key] = rel.value; obj[rel.key] = rel.value;
searchValue.value = JSON.stringify(obj); searchInfo.value = JSON.stringify(obj);
reload(); reload();
} }
@ -586,8 +591,8 @@
let formObj = JSON.parse(res.formScheme.scheme); let formObj = JSON.parse(res.formScheme.scheme);
console.log('formObj', formObj); console.log('formObj', formObj);
// card // card
formObj.formInfo.tabList = cardNestStructure(formObj.formInfo.tabList)
if (formObj.formInfo.tabList && formObj.formInfo.tabList.length > 1) { if (formObj.formInfo.tabList && formObj.formInfo.tabList.length > 1) {
formObj.formInfo.tabList = cardNestStructure(formObj.formInfo.tabList);
const arr: any = []; const arr: any = [];
formObj.formInfo.tabList.forEach((item, index) => { formObj.formInfo.tabList.forEach((item, index) => {
arr.push({ arr.push({
@ -630,7 +635,7 @@
layerFields: {}, layerFields: {},
}; };
} }
console.log('columnObj', columnObj) console.log('columnObj', columnObj);
paramsId.value = res.formScheme.id; paramsId.value = res.formScheme.id;
btnList.value = columnObj.table.btns; btnList.value = columnObj.table.btns;
if (columnObj.table.columns) { if (columnObj.table.columns) {
@ -641,6 +646,16 @@
}); });
}); });
} }
if (columnObj.table.querys) {
columnObj.table.querys.forEach((item) => {
searchFormSchema.push({
field: item.key,
component: item.type || 'Input',
label: item.label,
colProps: { span: 6 },
});
});
}
callColumns.forEach((item) => { callColumns.forEach((item) => {
formObj.formInfo.schemas.forEach((val) => { formObj.formInfo.schemas.forEach((val) => {
if (item.dataIndex == val.field && val.componentProps.options) { if (item.dataIndex == val.field && val.componentProps.options) {
@ -728,9 +743,9 @@
key: uuidv4(), key: uuidv4(),
}; };
}); });
res[mainTableName].forEach(item => { res[mainTableName].forEach((item) => {
infoUseMainTableData.value = {...infoUseMainTableData.value, ...item} infoUseMainTableData.value = { ...infoUseMainTableData.value, ...item };
}) });
}) })
.catch((err) => { .catch((err) => {
console.log('err', err); console.log('err', err);

View File

@ -271,7 +271,7 @@
!['Upload', 'Uploadimg', 'Password', 'Timerange', 'Datetimerange'].includes(t.component), !['Upload', 'Uploadimg', 'Password', 'Timerange', 'Datetimerange'].includes(t.component),
) )
.map((t) => { .map((t) => {
return { key: t.field, label: t.label }; return { key: t.field, label: t.label, type: t.component };
}); });
// - // -

View File

@ -117,31 +117,32 @@
return arr; return arr;
} }
const changeCardStructure = (data) => { const changeCardStructure = (data) => {
let result = [] let result = [];
data.forEach(item => { if (data && data.length > 1) {
if(item.component === "Tabs"){ data.forEach((item) => {
item.componentProps.options = changeCardStructure(item.componentProps.options) if (item.component === 'Tabs') {
item.componentProps.options = changeCardStructure(item.componentProps.options);
} else if (item.children) { } else if (item.children) {
item.children = changeCardStructure(item.children) item.children = changeCardStructure(item.children);
} else { } else {
if(["Grid","Card"].includes(item.component)){ if (['Grid', 'Card'].includes(item.component)) {
item.columns[0].children= changeCardStructure(item.columns[0].children) item.columns[0].children = changeCardStructure(item.columns[0].children);
if(item.component === 'Card'){ if (item.component === 'Card' && item.columns[0].children) {
item.columns[0].children.forEach(childItem => { item.columns[0].children.forEach((childItem) => {
if (childItem.pfield) { if (childItem.pfield) {
result.push(childItem) result.push(childItem);
} else { } else {
result.push({...childItem, ptype: "card", pfield: item.field}) result.push({ ...childItem, ptype: 'card', pfield: item.field });
} }
}) });
} }
} }
} }
result.push(item) result.push(item);
}) });
return result return result;
} }
};
async function designSendGrandson(value) { async function designSendGrandson(value) {
let designTab = JSON.parse(value); let designTab = JSON.parse(value);
let schems = saveFormDatas.value.scheme.scheme let schems = saveFormDatas.value.scheme.scheme
@ -177,10 +178,20 @@
if (item.type == 'subTable') { if (item.type == 'subTable') {
item.columns = changeCloums(item.columns, tableData); item.columns = changeCloums(item.columns, tableData);
} }
if (
item.component != 'CardGroup' &&
item.component != 'Grid' &&
item.component != 'MapGeom' &&
item.component != 'Divider' &&
item.component != 'Slider' &&
item.component != 'Card' &&
item.component != 'Location'
) {
tabArr.push(item.componentProps.fieldName); tabArr.push(item.componentProps.fieldName);
if (!item.componentProps.fieldName) { if (!item.componentProps.fieldName) {
tabLabelArr.push(item.label); tabLabelArr.push(item.label);
} }
}
} else { } else {
item.componentProps.options.forEach((val) => { item.componentProps.options.forEach((val) => {
val.children.forEach((list) => { val.children.forEach((list) => {
@ -201,16 +212,26 @@
if (list.type == 'subTable') { if (list.type == 'subTable') {
list.columns = changeCloums(list.columns, tableData); list.columns = changeCloums(list.columns, tableData);
} }
if (
list.component != 'CardGroup' &&
list.component != 'Grid' &&
list.component != 'MapGeom' &&
list.component != 'Divider' &&
list.component != 'Slider' &&
list.component != 'Card' &&
list.component != 'Location'
) {
tabArr.push(list.componentProps.fieldName); tabArr.push(list.componentProps.fieldName);
if (!list.componentProps.fieldName) { if (!list.componentProps.fieldName) {
tabLabelArr.push(list.label); tabLabelArr.push(list.label);
} }
}
}); });
}); });
} }
}); });
// CardCard // CardCard
designTab.schemas = changeCardStructure(designTab.schemas) designTab.schemas = changeCardStructure(designTab.schemas);
let tabList: any = []; let tabList: any = [];
if (designTab.schemas.length > 1) { if (designTab.schemas.length > 1) {
tabList.push({ tabList.push({
@ -429,7 +450,7 @@
// //
let schems = JSON.parse(saveFormDatas.value.scheme.scheme); let schems = JSON.parse(saveFormDatas.value.scheme.scheme);
// Card // Card
schems.formInfo.tabList = cardNestStructure(schems.formInfo.tabList) schems.formInfo.tabList = cardNestStructure(schems.formInfo.tabList);
schems.db = arr; schems.db = arr;
(schems.rdb = data.connect || []), (saveFormDatas.value.info.category = data.form.category); (schems.rdb = data.connect || []), (saveFormDatas.value.info.category = data.form.category);
saveFormDatas.value.info.description = data.form.description; saveFormDatas.value.info.description = data.form.description;
@ -445,33 +466,33 @@
} }
const cardNestStructure = (data) => { const cardNestStructure = (data) => {
let childList = {} let childList = {};
let result = [] let result = [];
data.forEach(item => { data.forEach((item) => {
if (item.schemas) { if (item.schemas) {
item.schemas = cardNestStructure(item.schemas) item.schemas = cardNestStructure(item.schemas);
result.push(item) result.push(item);
} else if (item.ptype) { } else if (item.ptype) {
let pushItem = {} let pushItem = {};
Object.keys(item).forEach(key => { Object.keys(item).forEach((key) => {
if (key !== 'ptype' && key !== 'pfield') { if (key !== 'ptype' && key !== 'pfield') {
pushItem[key] = item[key] pushItem[key] = item[key];
} }
}) });
if (childList[item.pfield]) { if (childList[item.pfield]) {
childList[item.pfield].push(pushItem) childList[item.pfield].push(pushItem);
} else { } else {
childList[item.pfield] = [pushItem] childList[item.pfield] = [pushItem];
} }
} else if (item.component === 'Card') { } else if (item.component === 'Card') {
item.columns[0].children = childList[item.field] item.columns[0].children = childList[item.field];
result.push(item) result.push(item);
} else { } else {
result.push(item) result.push(item);
}
})
return result
} }
});
return result;
};
// //
function automaticFormDataBack(data) { function automaticFormDataBack(data) {
if (isStageClick.value && stepsCurrent.value === 0) { if (isStageClick.value && stepsCurrent.value === 0) {