merge
parent
1a5ff25c59
commit
b703a94300
|
|
@ -0,0 +1,777 @@
|
|||
<template>
|
||||
<div class="map-form">
|
||||
<div class="map-form-header">
|
||||
{{ getTitle }}
|
||||
<span class="map-form-close" @click="handlerCloseForm">
|
||||
<CloseOutlined />
|
||||
</span>
|
||||
</div>
|
||||
<!-- <BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:canFullscreen="false"
|
||||
:draggable="false"
|
||||
:showCancelBtn="!isDetail"
|
||||
:showOkBtn="!isDetail"
|
||||
:title="getTitle"
|
||||
:mask="false"
|
||||
@ok="ModalSureClick"
|
||||
width="80%"
|
||||
:closeFunc="closeFunc"
|
||||
> -->
|
||||
<template v-if="tabsColumns.length > 1">
|
||||
<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"
|
||||
@click="codeClickFunction('beforeSetData', beforeSetData)"
|
||||
@change="codeClickFunction('changeDataEvent', changeDataEvent)"
|
||||
>
|
||||
<template #CardGroup>
|
||||
<CardGourp
|
||||
v-if="cardGroupData.length > 0 && cardGroupData[index]"
|
||||
:data="cardGroupData[index]"
|
||||
:formData="cardGourpFormData"
|
||||
:parentValue="cardGroupData[index].field"
|
||||
:callModal="true"
|
||||
/>
|
||||
</template>
|
||||
</BasicForm>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
<BasicForm
|
||||
ref="myDataBaseFormRef"
|
||||
@register="registerForm"
|
||||
v-if="formModalVisible && tabsColumns.length < 1"
|
||||
@click="codeClickFunction('beforeSetData', beforeSetData)"
|
||||
@change="codeClickFunction('changeDataEvent', changeDataEvent)"
|
||||
/>
|
||||
<template v-for="(item, index) in cardLayout" :key="index">
|
||||
<a-row style="width: 100%">
|
||||
<a-col :span="item?.colProps?.span || 24" style="padding: 10px">
|
||||
<a-card
|
||||
:title="item.label"
|
||||
:class="
|
||||
item.shadow === 'always' ? 'card-always' : item.shadow === 'hover' ? 'card-hover' : ''
|
||||
"
|
||||
>
|
||||
<template v-for="(childItem, childIndex) in item.columns[0].children" :key="childIndex">
|
||||
<a-row style="width: 100%; margin-bottom: 10px">
|
||||
<a-col :span="childItem?.colProps?.span || 24">
|
||||
<CallModalFormItem :data="childItem" :dataKey="item.field" :values="cardValues" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<template v-if="tabsColumns.length < 1">
|
||||
<CardGourp
|
||||
v-if="cardGroupData.length > 0"
|
||||
:data="cardGroupData[0]"
|
||||
:formData="cardGourpFormData"
|
||||
:parentValue="cardGroupData[0].field"
|
||||
:callModal="true"
|
||||
/>
|
||||
</template>
|
||||
<template v-for="(item, index) in buttonLayout" :key="index">
|
||||
<a-row style="width: 100%">
|
||||
<a-col :span="item?.colProps?.span || 24" style="padding: 10px">
|
||||
<a-button
|
||||
:type="item.componentProps.type"
|
||||
:shape="item.componentProps.shape"
|
||||
:size="item.componentProps.size"
|
||||
@click="codeClickFunction('codeClick', item.componentProps.clickCode)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<a-table
|
||||
class="sub-table"
|
||||
:columns="subTableColumns"
|
||||
:data-source="subTableList"
|
||||
:pagination="false"
|
||||
v-if="subTableId"
|
||||
:scroll="scrollValue"
|
||||
>
|
||||
<template #headerCell="{ column, record }">
|
||||
<template v-if="column.key === 'setting'">
|
||||
<PlusOutlined class="icon-button" @click="addListItem" v-if="!isDetail" />
|
||||
</template>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'setting'">
|
||||
<DeleteOutlined
|
||||
class="icon-button"
|
||||
@click="delListItem(column, record)"
|
||||
v-if="!isDetail"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<FormItem :data="column" :record="record" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<!-- todo 创建/修改 人/时间 -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { unref, ref, reactive,defineProps,defineEmits,onMounted } from 'vue';
|
||||
import { FormSchema } from '@/components/Table';
|
||||
import { BasicModal, useModalInner } from '@/components/Modal';
|
||||
import { BasicForm, useForm } from '@/components/Form';
|
||||
import { saveFormsData } from '@/api/formrender/index';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { create, saveDraft } from '@/api/sys/WFProcess';
|
||||
import { PlusOutlined, DeleteOutlined,CloseOutlined } from '@ant-design/icons-vue';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import FormItem from './ShowFormModal/FormItem/index.vue';
|
||||
import CallModalFormItem from './CallModalFormItem/index.vue';
|
||||
import { CardGourp } from '@/components/FormViewer/index.ts';
|
||||
import { subTableStore } from '@/store/modules/subTable';
|
||||
import { changeCardStructure, cardNestStructure } from '@/views/demo/onlineform/util.ts';
|
||||
|
||||
const subTableDataStore = subTableStore();
|
||||
|
||||
// import FormRender from '@/views/demo/form-design/components/VFormCreate/components/FormRender.vue';
|
||||
|
||||
const emit = defineEmits(['success','clsoeMapForm']);
|
||||
const { createMessage } = useMessage();
|
||||
const formModalVisible = ref(false);
|
||||
const isUpdate = ref(true);
|
||||
const isDetail = ref(true);
|
||||
const getTitle = ref();
|
||||
const primaryQuery = ref();
|
||||
const addQuery: any = ref([]);
|
||||
const formColumns: any = ref([]);
|
||||
const tabsColumns: any = ref([]);
|
||||
const flowCode = ref('');
|
||||
const userStore = useUserStore();
|
||||
const userInfo: any = userStore.getUserInfo;
|
||||
const formData = reactive({
|
||||
userId: userInfo.id,
|
||||
title: '',
|
||||
});
|
||||
const cardGroupData = ref([]);
|
||||
const cardGourpFormData = ref({});
|
||||
const cardGroupValues = ref({});
|
||||
const subTableId = ref(null);
|
||||
const subTableColumns: any = ref([]);
|
||||
const subTableData = ref([]);
|
||||
const subTableList: any = ref([]);
|
||||
const scrollValue = ref();
|
||||
const cardLayout = ref([]);
|
||||
const createOrModifyList = ref([]);
|
||||
// 按钮
|
||||
const buttonLayout = ref([]);
|
||||
// 脚本
|
||||
const cardValues = ref({});
|
||||
const beforeSetData = ref('');
|
||||
const afterValidateForm = ref('');
|
||||
const afterSaveEvent = ref('');
|
||||
const changeDataEvent = 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 getCardGroupLayoutKey = (dataList) => {
|
||||
console.log('dataList', dataList);
|
||||
dataList.children.forEach((item?) => {
|
||||
if (['CardGroup'].includes(item.component)) {
|
||||
cardGroupValues.value[item.field] = '';
|
||||
item.componentProps.options.forEach((childItem) => {
|
||||
getCardGroupLayoutKey(childItem);
|
||||
});
|
||||
} else {
|
||||
cardGroupValues.value[item.field] = '';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
let props = defineProps({
|
||||
data:Object
|
||||
})
|
||||
|
||||
|
||||
|
||||
console.log("propspropspropsprops",props.data);
|
||||
|
||||
|
||||
const initForm = ((data: Object|any) => {
|
||||
console.log("modalData",data);
|
||||
cardLayout.value = [];
|
||||
subTableDataStore.clearGoupData();
|
||||
// 脚本
|
||||
beforeSetData.value = data?.beforeSetData;
|
||||
afterValidateForm.value = data?.afterValidateForm;
|
||||
afterSaveEvent.value = data?.afterSaveEvent;
|
||||
changeDataEvent.value = data?.changeDataEvent;
|
||||
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
isDetail.value = !!data?.isDetail;
|
||||
const arr: FormSchema[] = [];
|
||||
data.tab.forEach((item) => {
|
||||
if (item.field == 'Tabs') {
|
||||
item.componentProps.options.forEach((val, index) => {
|
||||
val.children.forEach((opt) => {
|
||||
if (opt.rules !== undefined) {
|
||||
let myString = opt.rules[0].pattern;
|
||||
const lastCharacter = myString.charAt(myString.length - 1);
|
||||
if (lastCharacter === 'i' || lastCharacter === 's') {
|
||||
opt.rules[0].pattern = new RegExp(opt.rules[0].pattern.slice(1, -2), lastCharacter);
|
||||
} else {
|
||||
opt.rules[0].pattern = new RegExp(opt.rules[0].pattern.slice(1, -1));
|
||||
}
|
||||
}
|
||||
if (opt.component === 'Card') {
|
||||
cardLayout.value.push(opt);
|
||||
}
|
||||
if (opt.component === 'CardGroup') {
|
||||
opt.slot = 'CardGroup';
|
||||
if (cardGroupData.value.length !== index) {
|
||||
cardGroupData.value.push(null);
|
||||
}
|
||||
cardGroupData.value.push(opt);
|
||||
}
|
||||
if (opt.component === 'Button') {
|
||||
buttonLayout.value.push(opt);
|
||||
}
|
||||
if (['createuser', 'createtime', 'modifyuser', 'modifytime'].includes(opt.type)) {
|
||||
createOrModifyList.value.push(opt);
|
||||
}
|
||||
subTableColumns.value = [
|
||||
{
|
||||
dataIndex: 'setting',
|
||||
key: 'setting',
|
||||
fixed: 'left',
|
||||
width: 60,
|
||||
},
|
||||
];
|
||||
|
||||
if (opt.type === 'subTable') {
|
||||
subTableId.value = opt.field;
|
||||
let tableData = [];
|
||||
opt.columns.forEach((itemColumn) => {
|
||||
itemColumn.children.forEach((itemColumnChild) => {
|
||||
tableData.push(itemColumnChild);
|
||||
subTableColumns.value.push({
|
||||
key: itemColumnChild.field,
|
||||
title: itemColumnChild.label,
|
||||
dataIndex: itemColumnChild.field,
|
||||
...itemColumnChild,
|
||||
width: 120,
|
||||
});
|
||||
});
|
||||
});
|
||||
scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
|
||||
subTableData.value = tableData;
|
||||
}
|
||||
if (opt.columns) {
|
||||
opt.columns.forEach((itemColumn) => {
|
||||
itemColumn.children.forEach((itemColumnChild) => {
|
||||
console.log('itemColumnChild', itemColumnChild);
|
||||
itemColumnChild.itemProps.hidden = true;
|
||||
if (index == 0) {
|
||||
itemColumnChild.itemProps.hidden = false;
|
||||
}
|
||||
itemColumnChild.colProps.span = itemColumn.span;
|
||||
arr.push(itemColumnChild);
|
||||
// arr.push({
|
||||
// parentValue: index,
|
||||
// ...itemColumnChild,
|
||||
// show: index == 0 ? true : false,
|
||||
// });
|
||||
val.children.push(itemColumnChild);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
opt.itemProps.hidden = true;
|
||||
if (index == 0) {
|
||||
opt.itemProps.hidden = false;
|
||||
}
|
||||
if (opt.ptype !== 'gridlayout') {
|
||||
arr.push(opt);
|
||||
// arr.push({
|
||||
// parentValue: index,
|
||||
// ...opt,
|
||||
// show: index == 0 ? true : false,
|
||||
// });
|
||||
}
|
||||
// arr.forEach((arrcol) => {
|
||||
// if (arrcol.component === 'CardGroup') {
|
||||
// arrcol.label = '';
|
||||
// }
|
||||
// });
|
||||
formColumns.value = arr;
|
||||
});
|
||||
});
|
||||
tabsColumns.value = item.componentProps.options;
|
||||
console.log('tabsColumns', tabsColumns.value);
|
||||
console.log('formColumns1', formColumns.value);
|
||||
} else {
|
||||
if (item.rules !== undefined) {
|
||||
let myString = item.rules[0].pattern;
|
||||
const lastCharacter = myString.charAt(myString.length - 1);
|
||||
if (lastCharacter === 'i' || lastCharacter === 's') {
|
||||
item.rules[0].pattern = new RegExp(item.rules[0].pattern.slice(1, -2), lastCharacter);
|
||||
} else {
|
||||
item.rules[0].pattern = new RegExp(item.rules[0].pattern.slice(1, -1));
|
||||
}
|
||||
}
|
||||
if (item.columns) {
|
||||
item.columns.forEach((col) => {
|
||||
col.children.forEach((chld) => {
|
||||
chld.colProps.span = col.span;
|
||||
arr.push(chld);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
if (item.ptype !== 'gridlayout') {
|
||||
arr.push(item);
|
||||
}
|
||||
}
|
||||
// arr.forEach((arrcol) => {
|
||||
// if (arrcol.component === 'CardGroup') {
|
||||
// arrcol.label = '';
|
||||
// }
|
||||
// });
|
||||
formColumns.value = arr;
|
||||
if (item.component === 'Card') {
|
||||
cardLayout.value.push(item);
|
||||
}
|
||||
if (item.component === 'CardGroup') {
|
||||
item.slot = 'CardGroup';
|
||||
cardGroupValues.value[item.field] = '';
|
||||
item.componentProps.options.forEach((childItem) => {
|
||||
getCardGroupLayoutKey(childItem);
|
||||
});
|
||||
cardGroupData.value.push(item);
|
||||
}
|
||||
if (item.component === 'Button') {
|
||||
buttonLayout.value.push(item);
|
||||
}
|
||||
if (['createuser', 'createtime', 'modifyuser', 'modifytime'].includes(item.type)) {
|
||||
createOrModifyList.value.push(item);
|
||||
}
|
||||
subTableColumns.value = [
|
||||
{
|
||||
dataIndex: 'setting',
|
||||
key: 'setting',
|
||||
fixed: 'left',
|
||||
width: 60,
|
||||
},
|
||||
];
|
||||
|
||||
if (item.type === 'subTable') {
|
||||
subTableId.value = item.field;
|
||||
let tableData = [];
|
||||
item.columns.forEach((itemColumn) => {
|
||||
itemColumn.children.forEach((itemColumnChild) => {
|
||||
tableData.push(itemColumnChild);
|
||||
subTableColumns.value.push({
|
||||
key: itemColumnChild.field,
|
||||
title: itemColumnChild.label,
|
||||
dataIndex: itemColumnChild.field,
|
||||
...itemColumnChild,
|
||||
width: 120,
|
||||
});
|
||||
});
|
||||
});
|
||||
scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
|
||||
subTableData.value = tableData;
|
||||
}
|
||||
}
|
||||
if (item.component === 'Card') {
|
||||
cardValues.value[item.field] = {};
|
||||
getCardLayoutKey(item.columns[0].children, item.field);
|
||||
}
|
||||
});
|
||||
|
||||
if (!unref(isUpdate) && !unref(isDetail)) {
|
||||
getTitle.value = '新增';
|
||||
data.btnList.forEach((element) => {
|
||||
if (element.prop === 'Add' && element.isWFlow) {
|
||||
flowCode.value = element.wFlowCode;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (unref(isUpdate) && !unref(isDetail)) {
|
||||
getTitle.value = '编辑';
|
||||
data.btnList.forEach((element) => {
|
||||
if (element.prop === 'Edit' && element.isWFlow) {
|
||||
flowCode.value = element.wFlowCode;
|
||||
}
|
||||
});
|
||||
if (Object.keys(cardValues.value).length > 0) {
|
||||
Object.keys(cardValues.value).forEach((cardItem) => {
|
||||
let cardItemKeyList = Object.keys(cardValues.value[cardItem]);
|
||||
Object.keys(data.infoUseMainTableData).forEach((item) => {
|
||||
if (cardItemKeyList.includes(item)) {
|
||||
cardValues.value[cardItem][item] = data.infoUseMainTableData[item];
|
||||
}
|
||||
});
|
||||
// todo
|
||||
cardItemKeyList.forEach((item) => {
|
||||
if (item.indexOf('grid') !== -1) {
|
||||
cardValues.value[cardItem][item] = data.infoUseSubTableData;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
Object.keys(cardGroupValues.value).forEach((item) => {
|
||||
cardGroupValues.value[item] = data.infoUseMainTableData[item];
|
||||
});
|
||||
subTableDataStore.setGroupData(cardGroupValues.value);
|
||||
}
|
||||
if (!unref(isUpdate) && unref(isDetail)) {
|
||||
getTitle.value = '详情';
|
||||
let isTabs = false;
|
||||
data.tab = changeCardStructure(data.tab);
|
||||
data.tab.forEach((itemComponent) => {
|
||||
if (itemComponent.component === 'Tabs') {
|
||||
isTabs = true;
|
||||
itemComponent.componentProps.options.forEach((itemChild) => {
|
||||
itemChild.children.forEach((itemChildComponent) => {
|
||||
if (itemChildComponent.component) {
|
||||
itemChildComponent.componentProps.disabled = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
} else if (itemComponent.component) {
|
||||
itemComponent.componentProps.disabled = true;
|
||||
}
|
||||
});
|
||||
if (isTabs) {
|
||||
data.tab = data.tab[0];
|
||||
data.tab.componentProps.options = data.tab.componentProps.options.map((item) => {
|
||||
return {
|
||||
value: item.value,
|
||||
label: item.label,
|
||||
schemas: item.children,
|
||||
};
|
||||
});
|
||||
data.tab.componentProps.options = cardNestStructure(data.tab.componentProps.options);
|
||||
data.tab.componentProps.options = data.tab.componentProps.options.map((item) => {
|
||||
return {
|
||||
value: item.value,
|
||||
label: item.label,
|
||||
children: item.schemas,
|
||||
};
|
||||
});
|
||||
tabsColumns.value = data.tab.componentProps.options;
|
||||
} else {
|
||||
data.tab = cardNestStructure(data.tab);
|
||||
}
|
||||
if (Object.keys(cardValues.value).length > 0) {
|
||||
Object.keys(cardValues.value).forEach((cardItem) => {
|
||||
let cardItemKeyList = Object.keys(cardValues.value[cardItem]);
|
||||
Object.keys(data.infoUseMainTableData).forEach((item) => {
|
||||
if (cardItemKeyList.includes(item)) {
|
||||
cardValues.value[cardItem][item] = data.infoUseMainTableData[item];
|
||||
}
|
||||
});
|
||||
// todo
|
||||
cardItemKeyList.forEach((item) => {
|
||||
if (item.indexOf('grid') !== -1) {
|
||||
cardValues.value[cardItem][item] = data.infoUseSubTableData;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
Object.keys(cardGroupValues.value).forEach((item) => {
|
||||
cardGroupValues.value[item] = data.infoUseMainTableData[item];
|
||||
});
|
||||
subTableDataStore.setGroupData(cardGroupValues.value);
|
||||
}
|
||||
formModalVisible.value = true;
|
||||
primaryQuery.value = data.query;
|
||||
if (data.record) {
|
||||
setTimeout(() => {
|
||||
setFieldsValue({
|
||||
...data.record,
|
||||
});
|
||||
}, 100);
|
||||
subTableList.value = data.recordChildren;
|
||||
} else {
|
||||
if (tabsColumns.value.length < 1) {
|
||||
// resetFields();
|
||||
}
|
||||
subTableList.value = [];
|
||||
}
|
||||
addQuery.value = [];
|
||||
if (data.addParams) {
|
||||
data.addParams.forEach((item) => {
|
||||
addQuery.value.push({
|
||||
type: item.type,
|
||||
field: item.field,
|
||||
value: generateUniqueDigits(20).join(''),
|
||||
});
|
||||
});
|
||||
console.log('addQuery', addQuery);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
async function tabsChange(e) {
|
||||
const columns: FormSchema[] = [];
|
||||
tabsColumns.value.forEach((item) => {
|
||||
item.children.forEach((val) => {
|
||||
val.itemProps.hidden = true;
|
||||
});
|
||||
});
|
||||
tabsColumns.value[e].children.forEach((item) => {
|
||||
item.itemProps.hidden = false;
|
||||
});
|
||||
// formColumns.value.forEach((element) => {
|
||||
// element.show = false;
|
||||
// if (element.parentValue == e) {
|
||||
// element.show = true;
|
||||
// }
|
||||
// });
|
||||
tabsColumns.value.forEach((item) => {
|
||||
item.children.forEach((val) => {
|
||||
columns.push(val);
|
||||
});
|
||||
});
|
||||
setTimeout(() => {
|
||||
updateSchema(columns);
|
||||
resetFields();
|
||||
}, 100);
|
||||
if(!isDetail.value){
|
||||
const obj = await validate();
|
||||
setTimeout(() => {
|
||||
setFieldsValue(obj);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
function generateUniqueDigits(length: number): number[] {
|
||||
const digits = new Set<number>();
|
||||
while (digits.size < length) {
|
||||
const randomDigit = Math.floor(Math.random() * 20);
|
||||
digits.add(randomDigit);
|
||||
}
|
||||
return Array.from(digits);
|
||||
}
|
||||
const addListItem = () => {
|
||||
let keyValue = uuidv4();
|
||||
let emptyItem = { key: keyValue };
|
||||
subTableData.value.map((item) => {
|
||||
if (item.component == 'InputGuid') {
|
||||
emptyItem[item.field] = keyValue;
|
||||
} else {
|
||||
emptyItem[item.field] = '';
|
||||
}
|
||||
});
|
||||
|
||||
subTableList.value.push(emptyItem);
|
||||
};
|
||||
const delListItem = (column, record) => {
|
||||
subTableList.value = subTableList.value.filter((item) => item.key != record.key);
|
||||
};
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, getFieldsValue }] =
|
||||
useForm({
|
||||
labelWidth: 100,
|
||||
schemas: formColumns,
|
||||
showActionButtonGroup: false,
|
||||
actionColOptions: {
|
||||
span: 24,
|
||||
},
|
||||
});
|
||||
//表单填写数据
|
||||
async function ModalSureClick() {
|
||||
try {
|
||||
let values = await validate();
|
||||
// 添加校验后脚本
|
||||
let cardValueList = Object.values(cardValues.value);
|
||||
cardValueList.forEach((item) => {
|
||||
values = { ...values, ...item };
|
||||
});
|
||||
codeClickFunction('afterValidateForm', afterValidateForm.value);
|
||||
console.log('values', values);
|
||||
let query = values;
|
||||
let saveSubTableList = [];
|
||||
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);
|
||||
}
|
||||
let params: any = {
|
||||
schemeId: primaryQuery.value.id,
|
||||
isUpdate: isUpdate.value,
|
||||
pkey: primaryQuery.value.key,
|
||||
};
|
||||
console.log('params', params);
|
||||
if (unref(isUpdate)) {
|
||||
params.pkeyValue = primaryQuery.value.keyValue;
|
||||
} else {
|
||||
addQuery.value.forEach((item) => {
|
||||
if (item.type == 'main') {
|
||||
params.pkeyValue = item.value;
|
||||
}
|
||||
if (!query[item.field]) {
|
||||
query[item.field] = item.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
query = { ...query, ...subTableDataStore.getGroupData };
|
||||
params.data = JSON.stringify(query);
|
||||
console.log('query222', query);
|
||||
console.log('params222', params);
|
||||
const data = await saveFormsData(params);
|
||||
if (data) {
|
||||
setModalProps({ confirmLoading: true });
|
||||
emit('success');
|
||||
if (flowCode.value == '') {
|
||||
closeModal();
|
||||
} else {
|
||||
handleCreateFlow(params.pkeyValue);
|
||||
}
|
||||
return createMessage.success('操作成功');
|
||||
} else {
|
||||
return createMessage.error('操作失败');
|
||||
}
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
// 添加保存后脚本
|
||||
codeClickFunction('afterSaveEvent', afterSaveEvent.value);
|
||||
closeFunc();
|
||||
}
|
||||
}
|
||||
async function handleCreateFlow(processId) {
|
||||
var querys = {
|
||||
schemeCode: flowCode.value,
|
||||
userId: formData.userId,
|
||||
title: formData.title,
|
||||
processId: processId,
|
||||
};
|
||||
const draft = await saveDraft(querys);
|
||||
if (draft) {
|
||||
querys.schemeCode = '';
|
||||
const data = await create(querys);
|
||||
if (data) {
|
||||
closeModal();
|
||||
return createMessage.success('发起流程成功');
|
||||
} else {
|
||||
return createMessage.error('发起流程失败');
|
||||
}
|
||||
} else {
|
||||
return createMessage.error('保存草稿失败');
|
||||
}
|
||||
}
|
||||
// 脚本执行方法
|
||||
async function codeClickFunction(code, codeClick) {
|
||||
try {
|
||||
if (codeClick) {
|
||||
// 动态导入utils模块
|
||||
const { utils } = await import('./utils');
|
||||
let callModalData = {
|
||||
formModalVisible: formModalVisible,
|
||||
isUpdate: isUpdate,
|
||||
isDetail: isDetail,
|
||||
getTitle: getTitle,
|
||||
primaryQuery: primaryQuery,
|
||||
addQuery: addQuery,
|
||||
formColumns: formColumns,
|
||||
tabsColumns: tabsColumns,
|
||||
flowCode: flowCode,
|
||||
formData: formData,
|
||||
subTableId: subTableId,
|
||||
subTableColumns: subTableColumns,
|
||||
subTableData: subTableData,
|
||||
subTableList: subTableList,
|
||||
scrollValue: scrollValue,
|
||||
cardLayout: cardLayout,
|
||||
createOrModifyList: createOrModifyList,
|
||||
buttonLayout: buttonLayout,
|
||||
record: isUpdate.value ? getFieldsValue() : {},
|
||||
cardValues: cardValues,
|
||||
};
|
||||
utils.setCallModalData(callModalData);
|
||||
eval(codeClick);
|
||||
}
|
||||
} catch (e) {
|
||||
switch (code) {
|
||||
case 'codeClick':
|
||||
createMessage.success('【按钮组件脚本】错误：' + e);
|
||||
break;
|
||||
case 'beforeSetData':
|
||||
createMessage.success('【添加赋值前脚本】错误：' + e);
|
||||
break;
|
||||
case 'afterValidateForm':
|
||||
createMessage.success('【添加校验后脚本】错误：' + e);
|
||||
break;
|
||||
case 'afterSaveEvent':
|
||||
createMessage.success('【添加保存后脚本】错误：' + e);
|
||||
break;
|
||||
case 'changeDataEvent':
|
||||
createMessage.success('【添加数据改变脚本】错误：' + e);
|
||||
break;
|
||||
default:
|
||||
createMessage.success('【未知脚本】错误：' + e);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
const closeFunc = () => {
|
||||
buttonLayout.value = [];
|
||||
// cardLayout.value = [];
|
||||
createOrModifyList.value = [];
|
||||
return true;
|
||||
};
|
||||
|
||||
const handlerCloseForm = ()=>{
|
||||
emit("clsoeMapForm")
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
console.log("props.data",props.data);
|
||||
if(props.data){
|
||||
initForm(props.data);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
<style type="less" scoped>
|
||||
.map-form{
|
||||
width:100%;
|
||||
height:100%;
|
||||
padding:20px 30px;
|
||||
|
||||
}
|
||||
.map-form-header{
|
||||
padding:20px 0px;
|
||||
border-bottom:1px solid #efefef;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
.map-form-close{
|
||||
float:right;
|
||||
}
|
||||
.map-form-close:hover{
|
||||
color:#aaa;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -151,6 +151,7 @@
|
|||
|
||||
onMounted(() => {
|
||||
const data = props.showFormModalData;
|
||||
console.log("showFormModalData",props.showFormModalData)
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
isDetail.value = !!data?.isDetail;
|
||||
data.tab.forEach((item) => {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</template>
|
||||
</BasicTable>
|
||||
|
||||
<ShowFormModal
|
||||
<!-- <ShowFormModal
|
||||
v-if="openShowFormModal"
|
||||
:showFormModalData="showFormModalData"
|
||||
:mapgemoList="mapgemoList"
|
||||
|
|
@ -42,7 +42,10 @@
|
|||
@setSelectedSubTableDataId="setSelectedSubTableDataId"
|
||||
@closeShowFormModal="closeShowFormModal"
|
||||
@success="submitsuccess"
|
||||
/>
|
||||
/> -->
|
||||
<div class="map-form-container" v-if="mapFormShow">
|
||||
<MapFormModal v-if="mapFormShow" @clsoeMapForm="clsoeMapForm" :data="mapFormData"/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="haveMap"
|
||||
|
|
@ -59,12 +62,14 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CallModal @success="submitsuccess" @register="registerModal" />
|
||||
|
||||
<a-modal
|
||||
width="100%"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="previewOpen"
|
||||
title="11"
|
||||
title="表单"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<template #footer> </template>
|
||||
|
|
@ -97,13 +102,15 @@
|
|||
import { useModal } from '@/components/Modal';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import CallModal from './CallModal.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';
|
||||
const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
|
||||
|
||||
const mapFormShow = ref<boolean>(false)
|
||||
const mapFormData = ref<Object>({})
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
const route = useRoute();
|
||||
const btnArr: any = [
|
||||
|
|
@ -248,6 +255,9 @@
|
|||
];
|
||||
}
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
|
||||
const [registerMapFormModal,{ openModal:openMapFormModal }] = useModal();
|
||||
|
||||
const [registerTable, { reload, setColumns, getSelectRows, clearSelectedRowKeys }] = useTable({
|
||||
title: '表单列表',
|
||||
api: getFormsPageData,
|
||||
|
|
@ -405,7 +415,6 @@
|
|||
// key: 'f_id',
|
||||
keyValue: null,
|
||||
});
|
||||
console.log('addParamsArr', addParamsArr);
|
||||
const str: any = ref(addParamsArr.value[0].field);
|
||||
// const str: any = ref('_input_guid_43');
|
||||
addParamsArr.value.forEach((item) => {
|
||||
|
|
@ -440,8 +449,9 @@
|
|||
changeDataEvent: config.changeDataEvent,
|
||||
};
|
||||
if (haveMap.value) {
|
||||
showFormModalData.value = toProps;
|
||||
openShowFormModal.value = true;
|
||||
// showFormModalData.value = toProps;
|
||||
// openShowFormModal.value = true;
|
||||
openModal(true,toProps);
|
||||
mapgemoList.value = [];
|
||||
mapSetData.value.isAllowAddPolygon && MapboxComponent.value.handlerDraw(status);
|
||||
} else {
|
||||
|
|
@ -482,8 +492,11 @@
|
|||
infoUseSubTableData: infoUseSubTableData.value,
|
||||
};
|
||||
if (haveMap.value) {
|
||||
showFormModalData.value = toProps;
|
||||
openShowFormModal.value = true;
|
||||
// showFormModalData.value = toProps;
|
||||
// openShowFormModal.value = true;
|
||||
// openMapFormModal(true,toProps);
|
||||
mapFormShow.value = true;
|
||||
mapFormData.value = toProps;
|
||||
MapboxComponent.value.handlerDraw(
|
||||
status,
|
||||
mapgemoList.value,
|
||||
|
|
@ -525,7 +538,6 @@
|
|||
if (rows.length == 0) {
|
||||
return createMessage.warn('请选择一条数据查看详情');
|
||||
}
|
||||
console.log("DetailsRow",formConfig,rows);
|
||||
let toProps = {
|
||||
isDetail: true,
|
||||
isUpdate: false,
|
||||
|
|
@ -538,11 +550,12 @@
|
|||
infoUseSubTableData: infoUseSubTableData.value,
|
||||
};
|
||||
if (haveMap.value) {
|
||||
showFormModalData.value = toProps;
|
||||
openShowFormModal.value = true;
|
||||
|
||||
mapFormShow.value = true;
|
||||
mapFormData.value = toProps;
|
||||
// openMapFormModal(true,toProps);
|
||||
// showFormModalData.value = toProps;
|
||||
// openShowFormModal.value = true;
|
||||
// 根据ids获取图斑
|
||||
|
||||
try{
|
||||
console.log("formConfig",formConfig);
|
||||
handlerShowGeomtrys(formConfig,rows[0])
|
||||
|
|
@ -563,6 +576,7 @@
|
|||
};
|
||||
const chooseLayer = ref<string>("")
|
||||
const geomfield = ref<string>("");
|
||||
|
||||
function findValue(obj, targetKey) {
|
||||
for (var key in obj) {
|
||||
if (typeof obj[key] === 'object') {
|
||||
|
|
@ -573,7 +587,6 @@
|
|||
}
|
||||
} else if (key === targetKey && obj[key] == 'MapGeom') {
|
||||
// 如果当前键等于目标键，则返回对应的值
|
||||
console.log("遍历：：",obj['mapSetData'],obj['field'])
|
||||
chooseLayer.value = obj['mapSetData'].chooseLayer;
|
||||
geomfield.value = obj['field']
|
||||
return obj[key];
|
||||
|
|
@ -587,7 +600,6 @@
|
|||
let info = currentNode.value.schemas?.find((item,index)=>{
|
||||
return item.component.match(/mapgeom/i)
|
||||
})
|
||||
// console.log("info",info);
|
||||
let layer:string=chooseLayer.value;
|
||||
// // let layer:string="drone_shp_data";
|
||||
// if(info){
|
||||
|
|
@ -613,7 +625,7 @@
|
|||
limit:999,
|
||||
key:null,
|
||||
}
|
||||
getGeom(getGeomPrams).then(res=>{
|
||||
await getGeom(getGeomPrams).then(res=>{
|
||||
let geoms = [];
|
||||
if(res){
|
||||
if(res.items?.length>0){
|
||||
|
|
@ -818,9 +830,7 @@
|
|||
};
|
||||
})
|
||||
: [];
|
||||
|
||||
formData.value = [...subTableData];
|
||||
|
||||
infoUseSubTableData.value = res[childTableName]
|
||||
? res[childTableName].map((item) => {
|
||||
return {
|
||||
|
|
@ -829,14 +839,10 @@
|
|||
};
|
||||
})
|
||||
: [];
|
||||
|
||||
res[mainTableName].forEach((item) => {
|
||||
infoUseMainTableData.value = { ...infoUseMainTableData.value, ...item };
|
||||
});
|
||||
|
||||
mapgemoList.value = formData.value;
|
||||
|
||||
console.log('formData333', formData);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err', err);
|
||||
|
|
@ -897,6 +903,10 @@
|
|||
if (status == 'Delete') {
|
||||
}
|
||||
};
|
||||
|
||||
const clsoeMapForm = ()=>{
|
||||
mapFormShow.value = false;
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.full-modal {
|
||||
|
|
@ -928,4 +938,14 @@
|
|||
background-color: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.map-form-container{
|
||||
width:100%;
|
||||
height:100%;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
background:#fff;
|
||||
z-index:999;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -761,21 +761,43 @@
|
|||
}
|
||||
}
|
||||
|
||||
const chooseLayer = ref<string>("")
|
||||
const geomfield = ref<string>("");
|
||||
|
||||
function findValue(obj, targetKey) {
|
||||
for (var key in obj) {
|
||||
if (typeof obj[key] === 'object') {
|
||||
// 如果当前值是对象，则递归调用findValue
|
||||
var result = findValue(obj[key], targetKey);
|
||||
if (result !== undefined && result == 'MapGeom') {
|
||||
return result;
|
||||
}
|
||||
} else if (key === targetKey && obj[key] == 'MapGeom') {
|
||||
// 如果当前键等于目标键，则返回对应的值
|
||||
chooseLayer.value = obj['mapSetData'].chooseLayer;
|
||||
geomfield.value = obj['field']
|
||||
return obj[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handlerShowGeomtrys(currentNode) {
|
||||
findValue(currentNode.value.schemas,"component")
|
||||
|
||||
let info = currentNode.authFields?.find((item, index) => {
|
||||
return item.component == 'MapGeom';
|
||||
});
|
||||
let layer: string = '';
|
||||
let layer: string = chooseLayer.value;
|
||||
|
||||
// let layer:string="drone_shp_data";
|
||||
if (info) {
|
||||
layer = info?.mapSetData?.chooseLayer;
|
||||
}
|
||||
// if (info) {
|
||||
// layer = info?.mapSetData?.chooseLayer;
|
||||
// }
|
||||
if (!layer) {
|
||||
createMessage.error('图斑未绑定图层服务！');
|
||||
return;
|
||||
}
|
||||
let geomfiledValue = info.field.toLowerCase();
|
||||
let geomfiledValue = geomfield.value;
|
||||
|
||||
let gids = '';
|
||||
|
||||
|
|
|
|||
|
|
@ -406,21 +406,44 @@
|
|||
// function closePage() {
|
||||
// tabStore.closeTabByKey('/dashboard/task_look_preview/detail?processId=' + processId, router);
|
||||
// }
|
||||
// 解析组件获取图斑组件
|
||||
const chooseLayer = ref<string>("")
|
||||
const geomfield = ref<string>("");
|
||||
|
||||
function findValue(obj, targetKey) {
|
||||
for (var key in obj) {
|
||||
if (typeof obj[key] === 'object') {
|
||||
// 如果当前值是对象，则递归调用findValue
|
||||
var result = findValue(obj[key], targetKey);
|
||||
if (result !== undefined && result == 'MapGeom') {
|
||||
return result;
|
||||
}
|
||||
} else if (key === targetKey && obj[key] == 'MapGeom') {
|
||||
// 如果当前键等于目标键，则返回对应的值
|
||||
chooseLayer.value = obj['mapSetData'].chooseLayer;
|
||||
geomfield.value = obj['field']
|
||||
return obj[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handlerShowGeomtrys(currentNode) {
|
||||
findValue(currentNode.value.schemas,"component")
|
||||
|
||||
let info = currentNode.authFields?.find((item, index) => {
|
||||
return item.component == 'MapGeom';
|
||||
});
|
||||
let layer: string = '';
|
||||
let layer: string = chooseLayer.value;
|
||||
// let layer:string="drone_shp_data";
|
||||
if (info) {
|
||||
layer = info?.mapSetData?.chooseLayer;
|
||||
}
|
||||
// if (info) {
|
||||
// layer = info?.mapSetData?.chooseLayer;
|
||||
// }
|
||||
if (!layer) {
|
||||
createMessage.error('图斑未绑定图层服务！');
|
||||
return;
|
||||
}
|
||||
|
||||
let geomfiledValue = info.field.toLowerCase();
|
||||
let geomfiledValue = geomfield.value;
|
||||
|
||||
let gids = '';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue