953 lines
28 KiB
Vue
953 lines
28 KiB
Vue
<template>
|
||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
||
<BasicTree
|
||
class="w-1/4 m-4 mr-0 overflow-hidden bg-white xl:w-1/5"
|
||
v-if="treeVisible"
|
||
ref="asyncExpandTreeRef"
|
||
:title="treeTitle"
|
||
toolbar
|
||
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
|
||
loadData
|
||
:actionList="actionList"
|
||
:clickRowToExpand="false"
|
||
:treeData="treeData"
|
||
:fieldNames="{ key: 'value', title: 'label' }"
|
||
:defaultExpandAll="true"
|
||
@select="handleSelect"
|
||
/>
|
||
<div style="display: flex; width: 100%">
|
||
<div
|
||
class="table-container form-call-table"
|
||
:style="`${haveMap ? `width:${100 - mapSetData.width}%;` : 'width:100%'}`"
|
||
>
|
||
<BasicTable @register="registerTable" @row-click="handRowClick" :searchInfo="searchInfo">
|
||
<template #toolbar>
|
||
<div v-for="(item, index) in btnArr" :key="index">
|
||
<a-button :type="item.class" @click="handleClickForm(item.prop)">{{
|
||
item.label
|
||
}}</a-button>
|
||
</div>
|
||
</template>
|
||
</BasicTable>
|
||
|
||
<ShowFormModal
|
||
v-if="openShowFormModal"
|
||
:showFormModalData="showFormModalData"
|
||
:mapgemoList="mapgemoList"
|
||
:formData="formData"
|
||
:geometryForm="geometryForm"
|
||
:MapboxComponent="MapboxComponent"
|
||
:mapSetData="mapSetData"
|
||
:haveMap="haveMap"
|
||
@setSelectedSubTableDataId="setSelectedSubTableDataId"
|
||
@closeShowFormModal="closeShowFormModal"
|
||
@success="submitsuccess"
|
||
/>
|
||
</div>
|
||
<div
|
||
v-if="haveMap"
|
||
class="form-call-showMap"
|
||
:style="`width:${mapSetData.width}%;height:calc(100vh - 78px) `"
|
||
>
|
||
<MapboxMap
|
||
:mapConfig="mapSetData"
|
||
:layers="layers"
|
||
:location="location"
|
||
@handlerDrawComplete="handlerDrawComplete"
|
||
@mapOnLoad="mapOnLoad"
|
||
ref="MapboxComponent"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<CallModal @success="submitsuccess" @register="registerModal" />
|
||
<a-modal
|
||
width="100%"
|
||
wrap-class-name="full-modal"
|
||
v-model:open="previewOpen"
|
||
title="11"
|
||
:destroyOnClose="true"
|
||
>
|
||
<template #footer> </template>
|
||
<CreateFlow
|
||
ref="posRef"
|
||
:code="flowCode"
|
||
@closeModel="closeMolder"
|
||
:flowFormData="flowFormData"
|
||
:isUpdate="isUpdate"
|
||
/>
|
||
</a-modal>
|
||
</PageWrapper>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { onMounted, ref, nextTick, unref, h, reactive, defineAsyncComponent } from 'vue';
|
||
import { useRoute } from 'vue-router';
|
||
import { BasicTable, useTable, BasicColumn, FormSchema } from '@/components/Table';
|
||
import { BasicTree, TreeItem, TreeActionItem, TreeActionType } from '@/components/Tree';
|
||
import {
|
||
getFormsDesignData,
|
||
getFormsPageData,
|
||
delFormsData,
|
||
getFormData,
|
||
} from '@/api/formrender/index';
|
||
import { getOutKeyList } from '@/api/formdesign/index';
|
||
import { getGeom } from '@/api/sys/layerManagement';
|
||
import { PageWrapper } from '@/components/Page';
|
||
import { cloneDeep } from 'lodash-es';
|
||
import { IFormConfig } from '../../form-design/typings/v-form-component';
|
||
import { useModal } from '@/components/Modal';
|
||
import { useMessage } from '@/hooks/web/useMessage';
|
||
import CallModal from './CallModal.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 { createConfirm, createMessage } = useMessage();
|
||
const route = useRoute();
|
||
const btnArr: any = [
|
||
{ label: '新增', prop: 'Add', class: 'primary' },
|
||
{ label: '编辑', prop: 'Edit', class: 'success' },
|
||
{ label: '删除', prop: 'Delete', class: 'error' },
|
||
{ label: '详情', prop: 'Details', class: 'default' },
|
||
];
|
||
const mapSetData = ref({
|
||
width: 100,
|
||
});
|
||
const selectedSubTableDataId = ref('');
|
||
const formData = ref([]);
|
||
const mapgemoList = ref([]);
|
||
const MapboxComponent = ref();
|
||
const openShowFormModal = ref(false);
|
||
const haveMap = ref(false);
|
||
const showFormModalData = ref({});
|
||
const treeTitle: any = ref('树形');
|
||
const treeVisible: any = ref(false);
|
||
const paramsId: any = ref();
|
||
const codeId: any = ref();
|
||
const designData: any = ref();
|
||
const searchInfo: any = ref({});
|
||
const addParamsArr: any = ref([]);
|
||
const paramsCode = route.query.code;
|
||
const callColumns: BasicColumn[] = [];
|
||
const searchFormSchema: FormSchema[] = [];
|
||
const btnList: any = ref([]);
|
||
const treeData = ref<TreeItem[]>([]);
|
||
const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
|
||
const actionList: TreeActionItem[] = [];
|
||
const previewOpen = ref(false); //是否打开流程发起弹窗
|
||
const flowCode = ref(''); //流程code
|
||
const flowFormData = ref({}); //编辑时表单的数据
|
||
const isUpdate = ref(false); //是否是编辑
|
||
const infoUseSubTableData = ref();
|
||
const infoUseMainTableData = ref({});
|
||
// 展示的图层列表
|
||
const layers = reactive();
|
||
const geometryForm = ref({});
|
||
|
||
// 图层定位数据
|
||
const location = reactive([118.556717, 35.80391]);
|
||
if (paramsCode == '数据统计') {
|
||
searchFormSchema = [
|
||
{
|
||
field: 'typeid',
|
||
component: 'ApiSelect',
|
||
label: '企业类型',
|
||
colProps: { span: 6 },
|
||
componentProps: () => {
|
||
return {
|
||
// api: getLoadCaseType, // 接口
|
||
// 接口参数
|
||
resultField: 'result',
|
||
labelField: 'itemName',
|
||
valueField: 'itemDetailId',
|
||
};
|
||
},
|
||
},
|
||
{
|
||
field: 'deal_username',
|
||
component: 'Input',
|
||
label: '面积（m²）',
|
||
colProps: { span: 6 },
|
||
},
|
||
{
|
||
field: '[report_start_time, report_end_time]',
|
||
component: 'RangePicker',
|
||
label: '成立时间',
|
||
componentProps: {
|
||
format: 'YYYY-MM-DD',
|
||
placeholder: ['开始时间', '结束时间'],
|
||
},
|
||
colProps: { span: 8 },
|
||
},
|
||
{
|
||
field: 'is_intact',
|
||
component: 'Select',
|
||
label: '是否纳税',
|
||
colProps: { span: 6 },
|
||
defaultValue: 1,
|
||
componentProps: {
|
||
options: [
|
||
{ label: '未判读', value: 0, key: '0' },
|
||
{ label: '已提交', value: 1, key: '1' },
|
||
{ label: '已关闭', value: 99, key: '99' },
|
||
{ label: '全部', value: null, key: '' },
|
||
],
|
||
},
|
||
},
|
||
];
|
||
} else if (paramsCode == '数据审核') {
|
||
searchFormSchema = [
|
||
{
|
||
field: 'typeid',
|
||
component: 'ApiSelect',
|
||
label: '企业类型',
|
||
colProps: { span: 6 },
|
||
componentProps: () => {
|
||
return {
|
||
// api: getLoadCaseType, // 接口
|
||
// 接口参数
|
||
resultField: 'result',
|
||
labelField: 'itemName',
|
||
valueField: 'itemDetailId',
|
||
};
|
||
},
|
||
},
|
||
{
|
||
field: 'deal_username',
|
||
component: 'Input',
|
||
label: '面积（m²）',
|
||
colProps: { span: 6 },
|
||
},
|
||
{
|
||
field: '[report_start_time, report_end_time]',
|
||
component: 'RangePicker',
|
||
label: '成立时间',
|
||
componentProps: {
|
||
format: 'YYYY-MM-DD',
|
||
placeholder: ['开始时间', '结束时间'],
|
||
},
|
||
colProps: { span: 8 },
|
||
},
|
||
{
|
||
field: 'is_intact',
|
||
component: 'Select',
|
||
label: '是否已审核',
|
||
colProps: { span: 6 },
|
||
defaultValue: 1,
|
||
componentProps: {
|
||
options: [
|
||
{ label: '未判读', value: 0, key: '0' },
|
||
{ label: '已提交', value: 1, key: '1' },
|
||
{ label: '已关闭', value: 99, key: '99' },
|
||
{ label: '全部', value: null, key: '' },
|
||
],
|
||
},
|
||
},
|
||
];
|
||
}
|
||
const [registerModal, { openModal }] = useModal();
|
||
const [registerTable, { reload, setColumns, getSelectRows, clearSelectedRowKeys }] = useTable({
|
||
title: '表单列表',
|
||
api: getFormsPageData,
|
||
// rowKey: 'f_Id',
|
||
columns: callColumns,
|
||
formConfig: {
|
||
labelWidth: 120,
|
||
showAdvancedButton: false,
|
||
schemas: searchFormSchema,
|
||
},
|
||
rowSelection: {
|
||
type: 'radio',
|
||
},
|
||
showIndexColumn: false,
|
||
useSearchForm: true,
|
||
showTableSetting: true,
|
||
bordered: true,
|
||
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 = {
|
||
id: paramsId.value,
|
||
mid: codeId.value,
|
||
paginationInputDto: {
|
||
page: data.page,
|
||
rows: data.limit,
|
||
},
|
||
queryJson: JSON.stringify(querys),
|
||
};
|
||
return temp;
|
||
},
|
||
afterFetch: () => {
|
||
const rel = designData.value;
|
||
console.log('rel', rel);
|
||
let arr: any = [];
|
||
if (rel.primaryKey) {
|
||
rel.db.forEach((val) => {
|
||
let params = {
|
||
dbCode: rel.dbCode,
|
||
tableNames: val.name,
|
||
};
|
||
let chlidKey: any = ref();
|
||
if (val.type === 'chlid') {
|
||
getOutKeyList(params).then((res: Recordable) => {
|
||
console.log('ressss', res);
|
||
if (res[0]) {
|
||
res[0].db_codecolumnsList.forEach((item) => {
|
||
if (item.isPrimaryKey == 1) {
|
||
chlidKey.value = item.dbColumnName;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
setTimeout(() => {
|
||
console.log('chlidKey', chlidKey.value);
|
||
}, 500);
|
||
|
||
if (rel.formInfo.schemas.length > 1) {
|
||
rel.formInfo.schemas.forEach((item) => {
|
||
if (
|
||
item.componentProps.dataTable == val.name &&
|
||
rel.primaryKey == item.componentProps.fieldName
|
||
) {
|
||
arr.push({
|
||
type: val.type,
|
||
field: item.field,
|
||
});
|
||
}
|
||
if (
|
||
val.type == 'chlid' &&
|
||
val.name == item.componentProps.dataTable &&
|
||
chlidKey.value == item.componentProps.fieldName
|
||
) {
|
||
arr.push({
|
||
type: val.type,
|
||
field: item.field,
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
rel.formInfo.schemas[0].componentProps.options.forEach((opt) => {
|
||
opt.children.forEach((item) => {
|
||
if (
|
||
item.componentProps.dataTable == val.name &&
|
||
rel.primaryKey == item.componentProps.fieldName
|
||
) {
|
||
item.type = val.type;
|
||
arr.push({
|
||
type: val.type,
|
||
field: item.field,
|
||
});
|
||
}
|
||
if (
|
||
val.type == 'chlid' &&
|
||
val.name == item.componentProps.dataTable &&
|
||
chlidKey.value == item.componentProps.fieldName
|
||
) {
|
||
item.type = val.type;
|
||
arr.push({
|
||
type: val.type,
|
||
field: item.field,
|
||
});
|
||
}
|
||
});
|
||
});
|
||
}
|
||
});
|
||
}
|
||
console.log('after', arr);
|
||
addParamsArr.value = [...new Set(arr)];
|
||
},
|
||
handleSearchInfoFn(info) {
|
||
return info;
|
||
},
|
||
});
|
||
|
||
const formConfig = ref<IFormConfig>({
|
||
// 表单配置
|
||
schemas: [],
|
||
layout: 'horizontal',
|
||
labelLayout: 'flex',
|
||
labelWidth: 100,
|
||
labelCol: {},
|
||
wrapperCol: {},
|
||
currentItem: {
|
||
component: '',
|
||
componentProps: {},
|
||
},
|
||
activeKey: 1,
|
||
status: 'Add',
|
||
beforeSetData: '',
|
||
afterValidateForm: '',
|
||
afterSaveEvent: '',
|
||
changeDataEvent: '',
|
||
});
|
||
|
||
interface GeomParams {
|
||
TableName: string;
|
||
FieldName: string;
|
||
FiledValue: Array<any>;
|
||
}
|
||
|
||
const handleClickForm = (status) => {
|
||
const config = cloneDeep(formConfig.value);
|
||
const rows = getSelectRows();
|
||
const query: any = ref({
|
||
id: paramsId.value,
|
||
key: designData.value.primaryKey,
|
||
// 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) => {
|
||
if (item.type == 'main') {
|
||
str.value = item.field;
|
||
}
|
||
});
|
||
|
||
if (rows.length > 0) {
|
||
query.value.keyValue = rows[0][str.value];
|
||
}
|
||
console.log('config', config);
|
||
switch (status) {
|
||
case 'Add':
|
||
btnList.value.forEach((element) => {
|
||
if (element.prop === 'Add' && element.isWFlow) {
|
||
flowCode.value = element.wFlowCode;
|
||
}
|
||
});
|
||
if (flowCode.value == '') {
|
||
formData.value = [];
|
||
let toProps = {
|
||
isDetail: false,
|
||
isUpdate: false,
|
||
tab: config.schemas,
|
||
query: query.value,
|
||
addParams: addParamsArr.value,
|
||
btnList: btnList.value,
|
||
beforeSetData: config.beforeSetData,
|
||
afterValidateForm: config.afterValidateForm,
|
||
afterSaveEvent: config.afterSaveEvent,
|
||
changeDataEvent: config.changeDataEvent,
|
||
};
|
||
if (haveMap.value) {
|
||
showFormModalData.value = toProps;
|
||
openShowFormModal.value = true;
|
||
mapgemoList.value = [];
|
||
mapSetData.value.isAllowAddPolygon && MapboxComponent.value.handlerDraw(status);
|
||
} else {
|
||
openModal(true, toProps);
|
||
}
|
||
} else {
|
||
flowFormData.value = {};
|
||
previewOpen.value = true;
|
||
isUpdate.value = false;
|
||
}
|
||
|
||
break;
|
||
case 'Edit':
|
||
if (rows.length == 0) {
|
||
return createMessage.warn('请选择一条数据进行编辑');
|
||
}
|
||
console.log('rowsrows', rows);
|
||
btnList.value.forEach((element) => {
|
||
if (element.prop === 'Edit' && element.isWFlow) {
|
||
flowCode.value = element.wFlowCode;
|
||
}
|
||
});
|
||
if (flowCode.value == '') {
|
||
let toProps = {
|
||
isDetail: false,
|
||
isUpdate: true,
|
||
tab: config.schemas,
|
||
record: rows[0],
|
||
recordChildren: formData.value,
|
||
query: query.value,
|
||
btnList: btnList.value,
|
||
beforeSetData: config.beforeSetData,
|
||
afterValidateForm: config.afterValidateForm,
|
||
afterSaveEvent: config.afterSaveEvent,
|
||
changeDataEvent: config.changeDataEvent,
|
||
infoUseMainTableData: infoUseMainTableData.value,
|
||
infoUseSubTableData: infoUseSubTableData.value,
|
||
};
|
||
if (haveMap.value) {
|
||
showFormModalData.value = toProps;
|
||
openShowFormModal.value = true;
|
||
MapboxComponent.value.handlerDraw(
|
||
status,
|
||
mapgemoList.value,
|
||
mapSetData.value?.isAllowEditPolygon,
|
||
);
|
||
} else {
|
||
openModal(true, toProps);
|
||
}
|
||
} else {
|
||
previewOpen.value = true;
|
||
flowFormData.value = rows[0];
|
||
isUpdate.value = true;
|
||
}
|
||
break;
|
||
case 'Delete':
|
||
if (rows.length == 0) {
|
||
return createMessage.warn('请选择一条数据进行删除');
|
||
}
|
||
createConfirm({
|
||
iconType: 'info',
|
||
title: '删除',
|
||
content: '确定要删除该条数据？',
|
||
onOk: async () => {
|
||
delFormsData(query.value).then((res) => {
|
||
if (res) {
|
||
createMessage.success('删除成功', 2);
|
||
setTimeout(() => {
|
||
clearSelectedRowKeys();
|
||
reload();
|
||
}, 100);
|
||
} else {
|
||
createMessage.error('删除失败', 2);
|
||
}
|
||
});
|
||
},
|
||
});
|
||
break;
|
||
case 'Details':
|
||
if (rows.length == 0) {
|
||
return createMessage.warn('请选择一条数据查看详情');
|
||
}
|
||
console.log('DetailsRow', rows);
|
||
let toProps = {
|
||
isDetail: true,
|
||
isUpdate: false,
|
||
tab: config.schemas,
|
||
record: rows[0],
|
||
recordChildren: formData.value,
|
||
query: query.value,
|
||
btnList: btnList.value,
|
||
infoUseMainTableData: infoUseMainTableData.value,
|
||
infoUseSubTableData: infoUseSubTableData.value,
|
||
};
|
||
if (haveMap.value) {
|
||
showFormModalData.value = toProps;
|
||
openShowFormModal.value = true;
|
||
|
||
// 根据ids获取图斑
|
||
try {
|
||
let getGeomPrams: GeomParams = {
|
||
TableName: 'drone_shp_data',
|
||
FieldName: 'geom',
|
||
// FieldValue:row[].split(","),
|
||
FiledValue: [1315, 1308],
|
||
};
|
||
getGeom(getGeomPrams).then((res) => {
|
||
let geoms = [];
|
||
if (res) {
|
||
if (res.items?.length > 0) {
|
||
res.items.forEach((item, index) => {
|
||
let geom = {
|
||
key: item.gid,
|
||
mapgeom: item.geom,
|
||
};
|
||
geoms.push(geom);
|
||
});
|
||
}
|
||
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
|
||
MapboxComponent.value.handlerDraw(status, geoms, false);
|
||
} else {
|
||
createMessage.error('当前数据没有图斑！');
|
||
}
|
||
});
|
||
} catch (e) {
|
||
createMessage.error('当前数据没有图斑！');
|
||
}
|
||
} else {
|
||
openModal(true, toProps);
|
||
}
|
||
break;
|
||
case 'Import':
|
||
break;
|
||
case 'Export':
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
};
|
||
|
||
|
||
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,rows){
|
||
findValue(currentNode.value.schemas,"component")
|
||
|
||
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){
|
||
// layer = info?.mapSetData?.chooseLayer
|
||
// }
|
||
if(!layer){
|
||
createMessage.error("图斑未绑定图层服务！");
|
||
return;
|
||
}
|
||
let geomfiledValue = geomfield.value;
|
||
let gids = "";
|
||
try {
|
||
// geomfiledValue = geomfiledValue.charAt(0).toLowerCase();
|
||
geomfiledValue = geomfiledValue.charAt(0).toLowerCase() + geomfiledValue.slice(1);
|
||
gids = rows[geomfiledValue]
|
||
if(gids){
|
||
try{
|
||
let getGeomPrams = {
|
||
TableName:layer,
|
||
FieldName:"gid",
|
||
FieldValue:gids,
|
||
page:1,
|
||
limit:999,
|
||
key:null,
|
||
}
|
||
getGeom(getGeomPrams).then(res=>{
|
||
let geoms = [];
|
||
if(res){
|
||
if(res.items?.length>0){
|
||
res.items.forEach((item,index)=>{
|
||
let geom = {
|
||
key:item.gid,
|
||
mapgeom:item.geometry
|
||
}
|
||
geoms.push(geom);
|
||
})
|
||
}
|
||
MapboxComponent.value.handlerDraw("Details",geoms, false)
|
||
}else{
|
||
createMessage.error("当前数据没有图斑！");
|
||
}
|
||
})
|
||
}catch(e){
|
||
createMessage.error("当前数据没有图斑！");
|
||
}
|
||
}else{
|
||
createMessage.error("当前数据没有图斑！");
|
||
}
|
||
}catch{
|
||
createMessage.error("获取图斑数据失败！");
|
||
}
|
||
}
|
||
|
||
function handleSelect(selectedKeys: any, selected: any) {
|
||
const rel = selected.node.dataRef;
|
||
const obj: any = {};
|
||
obj[rel.key] = rel.value;
|
||
searchInfo.value = JSON.stringify(obj);
|
||
reload();
|
||
}
|
||
|
||
function getPublicForm() {
|
||
let params = {
|
||
code: paramsCode,
|
||
};
|
||
|
||
getFormsDesignData(params).then((res: Recordable) => {
|
||
let columnObj = JSON.parse(res.entity.scheme);
|
||
let formObj = JSON.parse(res.formScheme.scheme);
|
||
console.log('formObj', formObj);
|
||
// 将card嵌套起来
|
||
if (formObj.formInfo.tabList && formObj.formInfo.tabList.length > 0) {
|
||
formObj.formInfo.tabList = cardNestStructure(formObj.formInfo.tabList);
|
||
const arr: any = [];
|
||
formObj.formInfo.tabList.forEach((item, index) => {
|
||
arr.push({
|
||
label: item.text,
|
||
value: index + 1,
|
||
children: item.schemas,
|
||
});
|
||
});
|
||
formObj.formInfo.schemas = [
|
||
{
|
||
component: 'Tabs',
|
||
label: '选项卡',
|
||
colProps: {
|
||
span: 24,
|
||
},
|
||
field: 'Tabs',
|
||
componentProps: {
|
||
options: arr,
|
||
},
|
||
itemProps: {
|
||
labelCol: {},
|
||
wrapperCol: {},
|
||
},
|
||
},
|
||
];
|
||
}
|
||
if (formObj.formInfo.tabList && formObj.formInfo.tabList.length == 1) {
|
||
formObj.formInfo.schemas = formObj.formInfo.tabList[0].schemas;
|
||
}
|
||
delete formObj.formInfo.tabList;
|
||
// TODO 判断是否有地图
|
||
let mapgeomData = columnObj.table?.maps;
|
||
haveMap.value = mapgeomData?.isShowMap || false;
|
||
if (haveMap.value) {
|
||
mapSetData.value = mapgeomData || {
|
||
isAllowAddPolygon: false,
|
||
isAllowEditPolygon: false,
|
||
isEnablePostionJump: false,
|
||
width: 50,
|
||
layerFields: {},
|
||
};
|
||
}
|
||
codeId.value = res.entity.id;
|
||
paramsId.value = res.formScheme.id;
|
||
btnList.value = columnObj.table.btns;
|
||
if (columnObj.table.columns) {
|
||
columnObj.table.columns.forEach((item) => {
|
||
callColumns.push({
|
||
title: item.label,
|
||
dataIndex: item.key,
|
||
});
|
||
});
|
||
}
|
||
if (columnObj.table.querys) {
|
||
columnObj.table.querys.forEach((item) => {
|
||
if (item.options) {
|
||
searchFormSchema.push({
|
||
field: item.key,
|
||
component: item.type || 'Input',
|
||
label: item.label,
|
||
colProps: { span: 6 },
|
||
componentProps: {
|
||
options: item.options,
|
||
},
|
||
});
|
||
} else {
|
||
searchFormSchema.push({
|
||
field: item.key,
|
||
component: item.type || 'Input',
|
||
label: item.label,
|
||
colProps: { span: 6 },
|
||
});
|
||
}
|
||
});
|
||
}
|
||
callColumns.forEach((item) => {
|
||
formObj.formInfo.schemas.forEach((val) => {
|
||
if (item.dataIndex == val.field && val.componentProps.options) {
|
||
item.customRender = ({ record }) => {
|
||
const text: any = val.componentProps.options.filter(
|
||
(price) => price.value == record[val.field],
|
||
);
|
||
if (text[0]) {
|
||
return h(() => text[0].label);
|
||
}
|
||
};
|
||
}
|
||
});
|
||
});
|
||
setColumns(callColumns);
|
||
reload();
|
||
if (columnObj.left.options.length > 0) {
|
||
treeData.value = columnObj.left.options;
|
||
treeTitle.value = columnObj.left.title;
|
||
treeVisible.value = true;
|
||
} else {
|
||
treeVisible.value = false;
|
||
}
|
||
designData.value = formObj;
|
||
// 展开全部
|
||
nextTick(() => {
|
||
unref(asyncExpandTreeRef)?.expandAll(true);
|
||
});
|
||
formConfig.value.schemas = formObj.formInfo.schemas;
|
||
// 表单脚本
|
||
formConfig.value.beforeSetData = formObj.formInfo.beforeSetData;
|
||
formConfig.value.afterValidateForm = formObj.formInfo.afterValidateForm;
|
||
formConfig.value.afterSaveEvent = formObj.formInfo.afterSaveEvent;
|
||
formConfig.value.changeDataEvent = formObj.formInfo.changeDataEvent;
|
||
});
|
||
}
|
||
//弹窗确定后返回调用
|
||
function submitsuccess() {
|
||
reload();
|
||
mapgemoList.value = [];
|
||
}
|
||
function closeMolder() {
|
||
previewOpen.value = false;
|
||
submitsuccess();
|
||
}
|
||
|
||
onMounted(() => {
|
||
getPublicForm();
|
||
});
|
||
const closeShowFormModal = () => {
|
||
openShowFormModal.value = false;
|
||
MapboxComponent.value.handlerCancleDraw();
|
||
clearSelectedRowKeys();
|
||
formData.value = [];
|
||
};
|
||
const handRowClick = (record) => {
|
||
// todo 设置需要请求时请求
|
||
// if(!haveMap.value) return
|
||
let keyValue = null;
|
||
Object.keys(record).forEach((key) => {
|
||
if (key.indexOf('guid') !== -1) {
|
||
keyValue = record[key];
|
||
}
|
||
});
|
||
let params = {
|
||
id: paramsId.value,
|
||
key: designData.value.primaryKey,
|
||
keyValue,
|
||
};
|
||
getFormData(params)
|
||
.then((res) => {
|
||
let childTableName = designData.value.db.find((item) => item.type === 'chlid')?.name;
|
||
let mainTableName = designData.value.db.find((item) => item.type === 'main').name;
|
||
let subTableData = res[childTableName]
|
||
? res[childTableName].map((item) => {
|
||
return {
|
||
...item,
|
||
key: uuidv4(),
|
||
MapGeom: item.mapgeom,
|
||
};
|
||
})
|
||
: [];
|
||
|
||
formData.value = [...subTableData];
|
||
|
||
infoUseSubTableData.value = res[childTableName]
|
||
? res[childTableName].map((item) => {
|
||
return {
|
||
...item,
|
||
key: uuidv4(),
|
||
};
|
||
})
|
||
: [];
|
||
|
||
res[mainTableName].forEach((item) => {
|
||
infoUseMainTableData.value = { ...infoUseMainTableData.value, ...item };
|
||
});
|
||
|
||
mapgemoList.value = formData.value;
|
||
|
||
console.log('formData333', formData);
|
||
})
|
||
.catch((err) => {
|
||
console.log('err', err);
|
||
});
|
||
};
|
||
// 绘图完成返回geom
|
||
const handlerDrawComplete = (geom) => {
|
||
console.log('绘制完成返回的图斑', geom);
|
||
formData.value.forEach((item) => {
|
||
if (item.key === selectedSubTableDataId.value) {
|
||
console.log(geom[0].value, 'geom[0].value');
|
||
item.MapGeom = geom[0].value;
|
||
}
|
||
});
|
||
mapgemoList.value = [...geom];
|
||
|
||
// 处理geom保存表单
|
||
mapgemoList.value?.forEach((item, index) => {
|
||
geometryForm.value?.data.push(item.value);
|
||
});
|
||
};
|
||
const mapOnLoad = (map) => {
|
||
// const test_url =
|
||
// 'http://192.168.10.102:9020/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=yishuixian&field="gid","objectid",';
|
||
// map.addSource('street-border-source', {
|
||
// type: 'vector',
|
||
// tiles: [test_url],
|
||
// });
|
||
// map.addLayer({
|
||
// id: 'street-border',
|
||
// type: 'line',
|
||
// source: 'street-border-source',
|
||
// 'source-layer': 'yishuixian',
|
||
// layout: {
|
||
// visibility: 'visible',
|
||
// },
|
||
// });
|
||
};
|
||
const setSelectedSubTableDataId = (value) => {
|
||
selectedSubTableDataId.value = value;
|
||
};
|
||
|
||
// 处理图斑数据新增、编辑、删除
|
||
const handlerDealGeomtry = (status: string, features = null) => {
|
||
// Add
|
||
if (status == 'Add') {
|
||
let geoms: string[] = [];
|
||
|
||
mapgemoList.value?.forEach((item, index) => {
|
||
console.log('mapgeoms', item);
|
||
});
|
||
}
|
||
// Edit
|
||
if (status == 'Edit') {
|
||
}
|
||
|
||
// Delete
|
||
if (status == 'Delete') {
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="less">
|
||
.full-modal {
|
||
.ant-modal {
|
||
max-width: 100%;
|
||
top: 0;
|
||
}
|
||
|
||
.ant-modal-content {
|
||
height: calc(100vh);
|
||
}
|
||
|
||
.ant-modal-body {
|
||
height: 85%;
|
||
}
|
||
}
|
||
.table-container {
|
||
position: relative;
|
||
}
|
||
.form-call-table {
|
||
.ant-form {
|
||
.ant-form-item-control-input-content {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
.form-call-showMap {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
z-index: 1;
|
||
}
|
||
</style>
|