Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua
commit
80e6e57d67
|
|
@ -25,6 +25,8 @@ enum Api {
|
|||
Post_UpdateForm = '/api/FormModule/UpdateForm',
|
||||
// 获取字典分类列表
|
||||
Get_SysDataItemLoad = '/api/SysDataItem/Load',
|
||||
// 判断数据表字段重复
|
||||
Get_ExistFiled = '/api/FormModule/ExistFiled',
|
||||
}
|
||||
|
||||
// 获取分页列表
|
||||
|
|
@ -78,3 +80,11 @@ export function Get_SysDataItemLoad() {
|
|||
url: Api.Get_SysDataItemLoad,
|
||||
});
|
||||
}
|
||||
|
||||
// 判断数据表字段重复
|
||||
export function Get_Get_ExistFiled(params) {
|
||||
return defHttp.get<responsesmodel>({
|
||||
url: Api.Get_ExistFiled,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,6 +31,10 @@
|
|||
* Delayed loading time
|
||||
*/
|
||||
lazyTime: { type: Number, default: 0 },
|
||||
/**
|
||||
* Title is Bold?
|
||||
*/
|
||||
isTitleBold: { type: Boolean, default: false },
|
||||
};
|
||||
|
||||
export type CollapseContainerProps = ExtractPropTypes<typeof collapseContainerProps>;
|
||||
|
|
@ -65,6 +69,7 @@
|
|||
v-slots={{
|
||||
title: slots.title,
|
||||
action: slots.action,
|
||||
isTitleBold: slots.isTitleBold,
|
||||
}}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
const collapseHeaderProps = {
|
||||
prefixCls: String,
|
||||
title: String,
|
||||
isTitleBold: Boolean,
|
||||
show: Boolean,
|
||||
canExpan: Boolean,
|
||||
helpMessage: {
|
||||
|
|
@ -24,21 +25,40 @@
|
|||
setup(props, { slots, attrs, emit }) {
|
||||
const { prefixCls } = useDesign('collapse-container');
|
||||
const _prefixCls = computed(() => props.prefixCls || unref(prefixCls));
|
||||
return () => (
|
||||
<div class={[`${unref(_prefixCls)}__header px-2 py-5`, attrs.class]}>
|
||||
<BasicTitle helpMessage={props.helpMessage} normal>
|
||||
{slots.title?.() || props.title}
|
||||
</BasicTitle>
|
||||
// v-if="props.isTitleBold" 无效
|
||||
if (props.isTitleBold) {
|
||||
return () => (
|
||||
<div class={[`${unref(_prefixCls)}__header px-2 py-5`, attrs.class]}>
|
||||
<BasicTitle helpMessage={props.helpMessage} normal>
|
||||
<strong>{slots.title?.() || props.title}</strong>
|
||||
</BasicTitle>
|
||||
|
||||
<div class={`${unref(_prefixCls)}__action`}>
|
||||
{slots.action
|
||||
? slots.action({ expand: props.show, onClick: () => emit('expand') })
|
||||
: props.canExpan && (
|
||||
<BasicArrow up expand={props.show} onClick={() => emit('expand')} />
|
||||
)}
|
||||
<div class={`${unref(_prefixCls)}__action`}>
|
||||
{slots.action
|
||||
? slots.action({ expand: props.show, onClick: () => emit('expand') })
|
||||
: props.canExpan && (
|
||||
<BasicArrow up expand={props.show} onClick={() => emit('expand')} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
} else {
|
||||
return () => (
|
||||
<div class={[`${unref(_prefixCls)}__header px-2 py-5`, attrs.class]}>
|
||||
<BasicTitle helpMessage={props.helpMessage} normal>
|
||||
{slots.title?.() || props.title}
|
||||
</BasicTitle>
|
||||
|
||||
<div class={`${unref(_prefixCls)}__action`}>
|
||||
{slots.action
|
||||
? slots.action({ expand: props.show, onClick: () => emit('expand') })
|
||||
: props.canExpan && (
|
||||
<BasicArrow up expand={props.show} onClick={() => emit('expand')} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="map-container">
|
||||
<div id="mapContainer" class="map-box"></div>
|
||||
<!-- <div class="map-control">
|
||||
<div class="map-container">
|
||||
<div id="mapContainer" class="map-box"></div>
|
||||
<!-- <div class="map-control">
|
||||
<img
|
||||
v-for="(item, index) in nextMapControl"
|
||||
:key="index"
|
||||
|
|
@ -11,238 +11,236 @@
|
|||
/>
|
||||
<img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
|
||||
</div> -->
|
||||
<LayerComponent
|
||||
@changeOpenModal="changeOpenModal"
|
||||
@changeOpenInsertShpModal="changeOpenInsertShpModal"
|
||||
/>
|
||||
<LayerControl @draw="handlerDrawPolygon" />
|
||||
<UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" />
|
||||
<LayerComponent
|
||||
@changeOpenModal="changeOpenModal"
|
||||
@changeOpenInsertShpModal="changeOpenInsertShpModal"
|
||||
/>
|
||||
<LayerControl @draw="handlerDrawPolygon" />
|
||||
<UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" />
|
||||
|
||||
<InsertShp v-model:openModal="insertShpModal" />
|
||||
<InsertShp v-model:openModal="insertShpModal" />
|
||||
|
||||
<!-- <AddLayer v-model:openModal="insertShpModal" /> -->
|
||||
|
||||
<DataListComponent />
|
||||
<RightShowInfo v-model:openModal="openRightInfo" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, defineProps, reactive, ref,defineExpose } from 'vue';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import mapboxgl, { Map, Popup } from 'mapbox-gl';
|
||||
|
||||
// 图形绘制工具类
|
||||
import MapboxDraw from '@mapbox/mapbox-gl-draw';
|
||||
|
||||
import U from 'mapbox-gl-utils';
|
||||
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||
import './src/index.less';
|
||||
import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
|
||||
import { MP } from './src/MP';
|
||||
import { DrawingType } from '@/enums/mapEnum';
|
||||
|
||||
import {
|
||||
SnapPolygonMode,
|
||||
SnapPointMode,
|
||||
SnapLineMode,
|
||||
SnapModeDrawStyles,
|
||||
SnapDirectSelect,
|
||||
} from 'mapbox-gl-draw-snap-mode';
|
||||
import LayerComponent from './LayerComponent/index.vue';
|
||||
import LayerControl from './LayerControl/index.vue';
|
||||
import UseModal from './Modal/index.vue';
|
||||
import InsertShp from './InsertShp/index.vue';
|
||||
import AddLayer from './AddLayer/index.vue'
|
||||
import DataListComponent from './DataListComponent/index.vue';
|
||||
import RightShowInfo from './RightShowInfo/index.vue';
|
||||
|
||||
const openModal = ref(false);
|
||||
const insertShpModal = ref(false);
|
||||
const openRightInfo = ref(false);
|
||||
const changeOpenModal = (value) => {
|
||||
openModal.value = value;
|
||||
};
|
||||
const changeOpenInsertShpModal = (value) => {
|
||||
insertShpModal.value = value;
|
||||
};
|
||||
|
||||
// map参数类型
|
||||
interface MapboxOptionsInterface {
|
||||
mapOptions: mapboxgl.MapboxOptions;
|
||||
control: DrawingType[];
|
||||
}
|
||||
const props = defineProps<MapboxOptionsInterface>();
|
||||
|
||||
let nextMapControl: Array<any> = reactive([]);
|
||||
nextMapControl = props.control
|
||||
? props.control.map((item) => {
|
||||
console.log('item::: ', item);
|
||||
return MapControlConfig[item];
|
||||
})
|
||||
: [];
|
||||
|
||||
console.log('nextMapControl::: ', nextMapControl);
|
||||
|
||||
// 定义地图容器
|
||||
let map: Map;
|
||||
let popup: Popup;
|
||||
let clickPoisition: Array<number> = [];
|
||||
let selectFeature: Object = {};
|
||||
let mp: any = null;
|
||||
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
|
||||
// 定义地图回调emit
|
||||
// 地图加载完成回调
|
||||
const emit = defineEmits(['mapOnLoad', 'mapDraw']);
|
||||
|
||||
onMounted(() => {
|
||||
mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
|
||||
map = initMap();
|
||||
map.on('load', () => {
|
||||
//挂载mapbox-gl-utils
|
||||
// U.init(map);
|
||||
mp = new MP(map);
|
||||
emit('mapOnLoad', map);
|
||||
|
||||
// 初始化绘图空间
|
||||
handlerInitDrawTool();
|
||||
|
||||
map.on('click', (e) => {
|
||||
clickPoisition = e.lngLat;
|
||||
});
|
||||
|
||||
map.on('draw.selectionchange', (e) => {
|
||||
handlerCopyToTargetLayer(e);
|
||||
});
|
||||
|
||||
window.handlerCopyFeature = handlerCopyFeature;
|
||||
<!-- <AddLayer v-model:openModal="insertShpModal" /> -->
|
||||
|
||||
<DataListComponent />
|
||||
<RightShowInfo v-model:openModal="openRightInfo" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, defineProps, reactive, ref, defineExpose } from 'vue';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import mapboxgl, { Map, Popup } from 'mapbox-gl';
|
||||
|
||||
// 图形绘制工具类
|
||||
import MapboxDraw from '@mapbox/mapbox-gl-draw';
|
||||
|
||||
import U from 'mapbox-gl-utils';
|
||||
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||
import './src/index.less';
|
||||
import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
|
||||
import { MP } from './src/MP';
|
||||
import { DrawingType } from '@/enums/mapEnum';
|
||||
|
||||
import {
|
||||
SnapPolygonMode,
|
||||
SnapPointMode,
|
||||
SnapLineMode,
|
||||
SnapModeDrawStyles,
|
||||
SnapDirectSelect,
|
||||
} from 'mapbox-gl-draw-snap-mode';
|
||||
import LayerComponent from './LayerComponent/index.vue';
|
||||
import LayerControl from './LayerControl/index.vue';
|
||||
import UseModal from './Modal/index.vue';
|
||||
import InsertShp from './InsertShp/index.vue';
|
||||
import AddLayer from './AddLayer/index.vue';
|
||||
import DataListComponent from './DataListComponent/index.vue';
|
||||
import RightShowInfo from './RightShowInfo/index.vue';
|
||||
|
||||
const openModal = ref(false);
|
||||
const insertShpModal = ref(false);
|
||||
const openRightInfo = ref(false);
|
||||
const changeOpenModal = (value) => {
|
||||
openModal.value = value;
|
||||
};
|
||||
const changeOpenInsertShpModal = (value) => {
|
||||
insertShpModal.value = value;
|
||||
};
|
||||
|
||||
// map参数类型
|
||||
interface MapboxOptionsInterface {
|
||||
mapOptions: mapboxgl.MapboxOptions;
|
||||
control: DrawingType[];
|
||||
}
|
||||
const props = defineProps<MapboxOptionsInterface>();
|
||||
|
||||
let nextMapControl: Array<any> = reactive([]);
|
||||
nextMapControl = props.control
|
||||
? props.control.map((item) => {
|
||||
console.log('item::: ', item);
|
||||
return MapControlConfig[item];
|
||||
})
|
||||
: [];
|
||||
|
||||
console.log('nextMapControl::: ', nextMapControl);
|
||||
|
||||
// 定义地图容器
|
||||
let map: Map;
|
||||
let popup: Popup;
|
||||
let clickPoisition: Array<number> = [];
|
||||
let selectFeature: Object = {};
|
||||
let mp: any = null;
|
||||
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
|
||||
// 定义地图回调emit
|
||||
// 地图加载完成回调
|
||||
const emit = defineEmits(['mapOnLoad', 'mapDraw']);
|
||||
|
||||
onMounted(() => {
|
||||
mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
|
||||
map = initMap();
|
||||
map.on('load', () => {
|
||||
//挂载mapbox-gl-utils
|
||||
// U.init(map);
|
||||
mp = new MP(map);
|
||||
emit('mapOnLoad', map);
|
||||
|
||||
// 初始化绘图空间
|
||||
handlerInitDrawTool();
|
||||
|
||||
map.on('click', (e) => {
|
||||
clickPoisition = e.lngLat;
|
||||
});
|
||||
|
||||
map.on('draw.selectionchange', (e) => {
|
||||
handlerCopyToTargetLayer(e);
|
||||
});
|
||||
|
||||
window.handlerCopyFeature = handlerCopyFeature;
|
||||
});
|
||||
// 销毁地图
|
||||
// 移除地图实例
|
||||
onUnmounted(() => {
|
||||
map ? map.remove() : null;
|
||||
});
|
||||
// 销毁地图
|
||||
// 移除地图实例
|
||||
onUnmounted(() => {
|
||||
map ? map.remove() : null;
|
||||
});
|
||||
// 初始化地图
|
||||
// 返回地图实例
|
||||
const initMap = () => {
|
||||
return new mapboxgl.Map({
|
||||
container: 'mapContainer',
|
||||
language: 'zh-cmn',
|
||||
projection: 'equirectangular', // wgs84参考系
|
||||
style: MapboxDefaultStyle,
|
||||
maxZoom: 22,
|
||||
minZoom: 6,
|
||||
...props.mapOptions,
|
||||
});
|
||||
// 初始化地图
|
||||
// 返回地图实例
|
||||
const initMap = () => {
|
||||
return new mapboxgl.Map({
|
||||
container: 'mapContainer',
|
||||
language: 'zh-cmn',
|
||||
projection: 'equirectangular', // wgs84参考系
|
||||
style: MapboxDefaultStyle,
|
||||
maxZoom: 22,
|
||||
minZoom: 6,
|
||||
...props.mapOptions,
|
||||
});
|
||||
};
|
||||
|
||||
const handlerMapControlClick = (handler: string) => {
|
||||
handler === 'handlerDrawPoint' && handlerDrawPoint();
|
||||
handler === 'handlerDrawLineString' && handlerDrawLineString();
|
||||
handler === 'handlerDrawPolygon' && handlerDrawPolygon();
|
||||
};
|
||||
//绘制点
|
||||
const handlerDrawPoint = () => {
|
||||
mp.draw('Point');
|
||||
mp.on('Point', function (e) {
|
||||
emit('mapDraw', 'Point', e);
|
||||
});
|
||||
};
|
||||
//绘制线
|
||||
const handlerDrawLineString = () => {
|
||||
mp.draw('LineString');
|
||||
mp.on('LineString', function (e) {
|
||||
emit('mapDraw', 'LineString', e);
|
||||
});
|
||||
};
|
||||
//绘制面
|
||||
const handlerDrawPolygon = () => {
|
||||
mp.draw('Polygon');
|
||||
mp.on('Polygon', function (e) {
|
||||
emit('mapDraw', 'Polygon', e);
|
||||
});
|
||||
};
|
||||
//删除标记
|
||||
const handlerUnDraw = () => {
|
||||
mp.deleteDraw();
|
||||
emit('mapDraw', 'cancel');
|
||||
};
|
||||
|
||||
// 初始化绘图空间
|
||||
const handlerInitDrawTool = () => {
|
||||
let drawTool = new MapboxDraw({
|
||||
modes: {
|
||||
...MapboxDraw.modes,
|
||||
draw_point: SnapPointMode,
|
||||
draw_polygon: SnapPolygonMode,
|
||||
draw_line_string: SnapLineMode,
|
||||
direct_select: SnapDirectSelect,
|
||||
},
|
||||
// Styling guides
|
||||
styles: SnapModeDrawStyles,
|
||||
userProperties: true,
|
||||
// Config snapping features
|
||||
snap: true,
|
||||
snapOptions: {
|
||||
snapPx: 15, // defaults to 15
|
||||
snapToMidPoints: true, // defaults to false
|
||||
snapVertexPriorityDistance: 0.0025, // defaults to 1.25
|
||||
},
|
||||
guides: true,
|
||||
});
|
||||
|
||||
map.addControl(drawTool, 'top-right');
|
||||
};
|
||||
|
||||
// 将图斑复制到指定图层
|
||||
const handlerCopyToTargetLayer = (e) => {
|
||||
if (e.features.length > 0) {
|
||||
if (popup) {
|
||||
popup.remove();
|
||||
popup = null;
|
||||
}
|
||||
|
||||
selectFeature = e.features[0];
|
||||
|
||||
popup = new mapboxgl.Popup({
|
||||
closeButton: false,
|
||||
closeOnClick: false,
|
||||
});
|
||||
|
||||
// 设置 popup 的位置和内容
|
||||
popup
|
||||
.setLngLat(clickPoisition)
|
||||
.setHTML(
|
||||
`
|
||||
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`,
|
||||
)
|
||||
.addTo(map);
|
||||
} else {
|
||||
};
|
||||
|
||||
const handlerMapControlClick = (handler: string) => {
|
||||
handler === 'handlerDrawPoint' && handlerDrawPoint();
|
||||
handler === 'handlerDrawLineString' && handlerDrawLineString();
|
||||
handler === 'handlerDrawPolygon' && handlerDrawPolygon();
|
||||
};
|
||||
//绘制点
|
||||
const handlerDrawPoint = () => {
|
||||
mp.draw('Point');
|
||||
mp.on('Point', function (e) {
|
||||
emit('mapDraw', 'Point', e);
|
||||
});
|
||||
};
|
||||
//绘制线
|
||||
const handlerDrawLineString = () => {
|
||||
mp.draw('LineString');
|
||||
mp.on('LineString', function (e) {
|
||||
emit('mapDraw', 'LineString', e);
|
||||
});
|
||||
};
|
||||
//绘制面
|
||||
const handlerDrawPolygon = () => {
|
||||
mp.draw('Polygon');
|
||||
mp.on('Polygon', function (e) {
|
||||
emit('mapDraw', 'Polygon', e);
|
||||
});
|
||||
};
|
||||
//删除标记
|
||||
const handlerUnDraw = () => {
|
||||
mp.deleteDraw();
|
||||
emit('mapDraw', 'cancel');
|
||||
};
|
||||
|
||||
// 初始化绘图空间
|
||||
const handlerInitDrawTool = () => {
|
||||
let drawTool = new MapboxDraw({
|
||||
modes: {
|
||||
...MapboxDraw.modes,
|
||||
draw_point: SnapPointMode,
|
||||
draw_polygon: SnapPolygonMode,
|
||||
draw_line_string: SnapLineMode,
|
||||
direct_select: SnapDirectSelect,
|
||||
},
|
||||
// Styling guides
|
||||
styles: SnapModeDrawStyles,
|
||||
userProperties: true,
|
||||
// Config snapping features
|
||||
snap: true,
|
||||
snapOptions: {
|
||||
snapPx: 15, // defaults to 15
|
||||
snapToMidPoints: true, // defaults to false
|
||||
snapVertexPriorityDistance: 0.0025, // defaults to 1.25
|
||||
},
|
||||
guides: true,
|
||||
});
|
||||
|
||||
// map.addControl(drawTool, 'top-right');
|
||||
};
|
||||
|
||||
// 将图斑复制到指定图层
|
||||
const handlerCopyToTargetLayer = (e) => {
|
||||
if (e.features.length > 0) {
|
||||
if (popup) {
|
||||
popup.remove();
|
||||
popup = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handlerCopyFeature = () => {
|
||||
console.log(selectFeature);
|
||||
|
||||
selectFeature = e.features[0];
|
||||
|
||||
popup = new mapboxgl.Popup({
|
||||
closeButton: false,
|
||||
closeOnClick: false,
|
||||
});
|
||||
|
||||
// 设置 popup 的位置和内容
|
||||
popup
|
||||
.setLngLat(clickPoisition)
|
||||
.setHTML(
|
||||
`
|
||||
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`,
|
||||
)
|
||||
.addTo(map);
|
||||
} else {
|
||||
popup.remove();
|
||||
createMessage.success('复制成功!');
|
||||
};
|
||||
|
||||
const handlerRenderLayer = (layer) => {
|
||||
console.log("layerInfo",layer)
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
handlerRenderLayer
|
||||
});
|
||||
const handlerCopyFeature = () => {
|
||||
console.log(selectFeature);
|
||||
popup.remove();
|
||||
createMessage.success('复制成功!');
|
||||
};
|
||||
|
||||
const handlerRenderLayer = (layer) => {
|
||||
console.log('layerInfo', layer);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
defineExpose({
|
||||
handlerRenderLayer,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.layer-control-center p {
|
||||
margin: 0px;
|
||||
}
|
||||
|
|
@ -286,7 +284,6 @@
|
|||
}
|
||||
|
||||
.mapboxgl-ctrl-top-right {
|
||||
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button + button {
|
||||
|
|
@ -338,5 +335,4 @@
|
|||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,231 +1,229 @@
|
|||
let customDrawStyles = [{
|
||||
"id": "gl-draw-polygon-fill-inactive",
|
||||
"type": "fill",
|
||||
"filter": ["all", ["==", "active", "false"],
|
||||
["==", "$type", "Polygon"],
|
||||
["!=", "mode", "static"]
|
||||
],
|
||||
"paint": {
|
||||
"fill-color": "#3bb2d0",
|
||||
"fill-outline-color": "#6495ed",
|
||||
"fill-opacity": 0.5
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-polygon-fill-active",
|
||||
"type": "fill",
|
||||
"filter": ["all", ["==", "active", "true"],
|
||||
["==", "$type", "Polygon"]
|
||||
],
|
||||
"paint": {
|
||||
"fill-color": "#fbb03b",
|
||||
"fill-outline-color": "#fbb03b",
|
||||
"fill-opacity": 0.5
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-polygon-midpoint",
|
||||
"type": "circle",
|
||||
"filter": ["all", ["==", "$type", "Point"],
|
||||
["==", "meta", "midpoint"]
|
||||
],
|
||||
"paint": {
|
||||
"circle-radius": 3,
|
||||
"circle-color": "#fbb03b"
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-polygon-stroke-inactive",
|
||||
"type": "line",
|
||||
"filter": ["all", ["==", "active", "false"],
|
||||
["==", "$type", "Polygon"],
|
||||
["!=", "mode", "static"]
|
||||
],
|
||||
"layout": {
|
||||
"line-cap": "round",
|
||||
"line-join": "round"
|
||||
},
|
||||
"paint": {
|
||||
"line-color": "#3bb2d0",
|
||||
"line-width": 2
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-polygon-stroke-active",
|
||||
"type": "line",
|
||||
"filter": ["all", ["==", "active", "true"],
|
||||
["==", "$type", "Polygon"]
|
||||
],
|
||||
"layout": {
|
||||
"line-cap": "round",
|
||||
"line-join": "round"
|
||||
},
|
||||
"paint": {
|
||||
"line-color": "#fbb03b",
|
||||
"line-dasharray": [0.2, 2],
|
||||
"line-width": 2
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-line-inactive",
|
||||
"type": "line",
|
||||
"filter": ["all", ["==", "active", "false"],
|
||||
["==", "$type", "LineString"],
|
||||
["!=", "mode", "static"],
|
||||
["!=", "user_isSnapGuide", "true"]
|
||||
],
|
||||
"layout": {
|
||||
"line-cap": "round",
|
||||
"line-join": "round"
|
||||
},
|
||||
"paint": {
|
||||
"line-color": "#3bb2d0",
|
||||
"line-width": 2
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-line-active",
|
||||
"type": "line",
|
||||
"filter": ["all", ["==", "$type", "LineString"],
|
||||
["==", "active", "true"]
|
||||
],
|
||||
"layout": {
|
||||
"line-cap": "round",
|
||||
"line-join": "round"
|
||||
},
|
||||
"paint": {
|
||||
"line-color": "#fbb03b",
|
||||
"line-dasharray": [0.2, 2],
|
||||
"line-width": 2
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-polygon-and-line-vertex-stroke-inactive",
|
||||
"type": "circle",
|
||||
"filter": ["all", ["==", "meta", "vertex"],
|
||||
["==", "$type", "Point"],
|
||||
["!=", "mode", "static"]
|
||||
],
|
||||
"paint": {
|
||||
"circle-radius": 5,
|
||||
"circle-color": "#fff"
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-polygon-and-line-vertex-inactive",
|
||||
"type": "circle",
|
||||
"filter": ["all", ["==", "meta", "vertex"],
|
||||
["==", "$type", "Point"],
|
||||
["!=", "mode", "static"]
|
||||
],
|
||||
"paint": {
|
||||
"circle-radius": 3,
|
||||
"circle-color": "#fbb03b"
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-point-point-stroke-inactive",
|
||||
"type": "circle",
|
||||
"filter": ["all", ["==", "active", "false"],
|
||||
["==", "$type", "Point"],
|
||||
["==", "meta", "feature"],
|
||||
["!=", "mode", "static"]
|
||||
],
|
||||
"paint": {
|
||||
"circle-radius": 5,
|
||||
"circle-opacity": 1,
|
||||
"circle-color": "#fff"
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-point-inactive",
|
||||
"type": "circle",
|
||||
"filter": ["all", ["==", "active", "false"],
|
||||
["==", "$type", "Point"],
|
||||
["==", "meta", "feature"],
|
||||
["!=", "mode", "static"]
|
||||
],
|
||||
"paint": {
|
||||
"circle-radius": 3,
|
||||
"circle-color": "#3bb2d0"
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-point-stroke-active",
|
||||
"type": "circle",
|
||||
"filter": ["all", ["==", "$type", "Point"],
|
||||
["==", "active", "true"],
|
||||
["!=", "meta", "midpoint"]
|
||||
],
|
||||
"paint": {
|
||||
"circle-radius": 7,
|
||||
"circle-color": "#fff"
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-point-active",
|
||||
"type": "circle",
|
||||
"filter": ["all", ["==", "$type", "Point"],
|
||||
["!=", "meta", "midpoint"],
|
||||
["==", "active", "true"]
|
||||
],
|
||||
"paint": {
|
||||
"circle-radius": 5,
|
||||
"circle-color": "#fbb03b"
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-polygon-fill-static",
|
||||
"type": "fill",
|
||||
"filter": ["all", ["==", "mode", "static"],
|
||||
["==", "$type", "Polygon"]
|
||||
],
|
||||
"paint": {
|
||||
"fill-color": "#404040",
|
||||
"fill-outline-color": "#404040",
|
||||
"fill-opacity": 0.1
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-polygon-stroke-static",
|
||||
"type": "line",
|
||||
"filter": ["all", ["==", "mode", "static"],
|
||||
["==", "$type", "Polygon"]
|
||||
],
|
||||
"layout": {
|
||||
"line-cap": "round",
|
||||
"line-join": "round"
|
||||
},
|
||||
"paint": {
|
||||
"line-color": "#404040",
|
||||
"line-width": 2
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-line-static",
|
||||
"type": "line",
|
||||
"filter": ["all", ["==", "mode", "static"],
|
||||
["==", "$type", "LineString"]
|
||||
],
|
||||
"layout": {
|
||||
"line-cap": "round",
|
||||
"line-join": "round"
|
||||
},
|
||||
"paint": {
|
||||
"line-color": "#404040",
|
||||
"line-width": 2
|
||||
}
|
||||
}, {
|
||||
"id": "gl-draw-point-static",
|
||||
"type": "circle",
|
||||
"filter": ["all", ["==", "mode", "static"],
|
||||
["==", "$type", "Point"]
|
||||
],
|
||||
"paint": {
|
||||
"circle-radius": 5,
|
||||
"circle-color": "#404040"
|
||||
}
|
||||
}, {
|
||||
"id": "guide",
|
||||
"type": "line",
|
||||
"filter": ["all", ["==", "$type", "LineString"],
|
||||
["==", "user_isSnapGuide", "true"]
|
||||
],
|
||||
"layout": {
|
||||
"line-cap": "round",
|
||||
"line-join": "round"
|
||||
},
|
||||
"paint": {
|
||||
"line-color": "#c00c00",
|
||||
"line-width": 1,
|
||||
"line-dasharray": [5, 5]
|
||||
}
|
||||
}]
|
||||
const customDrawStyles = [
|
||||
{
|
||||
id: 'gl-draw-polygon-fill-inactive',
|
||||
type: 'fill',
|
||||
filter: [
|
||||
'all',
|
||||
['==', 'active', 'false'],
|
||||
['==', '$type', 'Polygon'],
|
||||
['!=', 'mode', 'static'],
|
||||
],
|
||||
paint: {
|
||||
'fill-color': '#3bb2d0',
|
||||
'fill-outline-color': '#6495ed',
|
||||
'fill-opacity': 0.5,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-polygon-fill-active',
|
||||
type: 'fill',
|
||||
filter: ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
|
||||
paint: {
|
||||
'fill-color': '#fbb03b',
|
||||
'fill-outline-color': '#fbb03b',
|
||||
'fill-opacity': 0.5,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-polygon-midpoint',
|
||||
type: 'circle',
|
||||
filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
|
||||
paint: {
|
||||
'circle-radius': 3,
|
||||
'circle-color': '#fbb03b',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-polygon-stroke-inactive',
|
||||
type: 'line',
|
||||
filter: [
|
||||
'all',
|
||||
['==', 'active', 'false'],
|
||||
['==', '$type', 'Polygon'],
|
||||
['!=', 'mode', 'static'],
|
||||
],
|
||||
layout: {
|
||||
'line-cap': 'round',
|
||||
'line-join': 'round',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#3bb2d0',
|
||||
'line-width': 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-polygon-stroke-active',
|
||||
type: 'line',
|
||||
filter: ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
|
||||
layout: {
|
||||
'line-cap': 'round',
|
||||
'line-join': 'round',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#fbb03b',
|
||||
'line-dasharray': [0.2, 2],
|
||||
'line-width': 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-line-inactive',
|
||||
type: 'line',
|
||||
filter: [
|
||||
'all',
|
||||
['==', 'active', 'false'],
|
||||
['==', '$type', 'LineString'],
|
||||
['!=', 'mode', 'static'],
|
||||
['!=', 'user_isSnapGuide', 'true'],
|
||||
],
|
||||
layout: {
|
||||
'line-cap': 'round',
|
||||
'line-join': 'round',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#3bb2d0',
|
||||
'line-width': 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-line-active',
|
||||
type: 'line',
|
||||
filter: ['all', ['==', '$type', 'LineString'], ['==', 'active', 'true']],
|
||||
layout: {
|
||||
'line-cap': 'round',
|
||||
'line-join': 'round',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#fbb03b',
|
||||
'line-dasharray': [0.2, 2],
|
||||
'line-width': 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-polygon-and-line-vertex-stroke-inactive',
|
||||
type: 'circle',
|
||||
filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
|
||||
paint: {
|
||||
'circle-radius': 5,
|
||||
'circle-color': '#fff',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-polygon-and-line-vertex-inactive',
|
||||
type: 'circle',
|
||||
filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
|
||||
paint: {
|
||||
'circle-radius': 3,
|
||||
'circle-color': '#fbb03b',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-point-point-stroke-inactive',
|
||||
type: 'circle',
|
||||
filter: [
|
||||
'all',
|
||||
['==', 'active', 'false'],
|
||||
['==', '$type', 'Point'],
|
||||
['==', 'meta', 'feature'],
|
||||
['!=', 'mode', 'static'],
|
||||
],
|
||||
paint: {
|
||||
'circle-radius': 5,
|
||||
'circle-opacity': 1,
|
||||
'circle-color': '#fff',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-point-inactive',
|
||||
type: 'circle',
|
||||
filter: [
|
||||
'all',
|
||||
['==', 'active', 'false'],
|
||||
['==', '$type', 'Point'],
|
||||
['==', 'meta', 'feature'],
|
||||
['!=', 'mode', 'static'],
|
||||
],
|
||||
paint: {
|
||||
'circle-radius': 3,
|
||||
'circle-color': '#3bb2d0',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-point-stroke-active',
|
||||
type: 'circle',
|
||||
filter: ['all', ['==', '$type', 'Point'], ['==', 'active', 'true'], ['!=', 'meta', 'midpoint']],
|
||||
paint: {
|
||||
'circle-radius': 7,
|
||||
'circle-color': '#fff',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-point-active',
|
||||
type: 'circle',
|
||||
filter: ['all', ['==', '$type', 'Point'], ['!=', 'meta', 'midpoint'], ['==', 'active', 'true']],
|
||||
paint: {
|
||||
'circle-radius': 5,
|
||||
'circle-color': '#fbb03b',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-polygon-fill-static',
|
||||
type: 'fill',
|
||||
filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
|
||||
paint: {
|
||||
'fill-color': '#404040',
|
||||
'fill-outline-color': '#404040',
|
||||
'fill-opacity': 0.1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-polygon-stroke-static',
|
||||
type: 'line',
|
||||
filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
|
||||
layout: {
|
||||
'line-cap': 'round',
|
||||
'line-join': 'round',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#404040',
|
||||
'line-width': 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-line-static',
|
||||
type: 'line',
|
||||
filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'LineString']],
|
||||
layout: {
|
||||
'line-cap': 'round',
|
||||
'line-join': 'round',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#404040',
|
||||
'line-width': 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gl-draw-point-static',
|
||||
type: 'circle',
|
||||
filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'Point']],
|
||||
paint: {
|
||||
'circle-radius': 5,
|
||||
'circle-color': '#404040',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'guide',
|
||||
type: 'line',
|
||||
filter: ['all', ['==', '$type', 'LineString'], ['==', 'user_isSnapGuide', 'true']],
|
||||
layout: {
|
||||
'line-cap': 'round',
|
||||
'line-join': 'round',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#c00c00',
|
||||
'line-width': 1,
|
||||
'line-dasharray': [5, 5],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export {customDrawStyles}
|
||||
export { customDrawStyles };
|
||||
|
|
|
|||
|
|
@ -405,125 +405,134 @@
|
|||
});
|
||||
return result;
|
||||
};
|
||||
const getRFields = (dataList, rFieldList,fieldList) => {
|
||||
dataList.forEach((element: { label?: string; field?: string; component: any; itemProps: any }) => {
|
||||
if (['InputGuid'].includes(element.component)) {
|
||||
rFieldList.push({
|
||||
label: element.label,
|
||||
// value:element.prop
|
||||
value: element.field,
|
||||
});
|
||||
}
|
||||
if(element.component === 'Tabs'){
|
||||
element.componentProps.options.forEach(childElement => {
|
||||
const {rFieldList:rField, fieldList:field} = getRFields(childElement.children,rFieldList,fieldList)
|
||||
rFieldList = rField
|
||||
fieldList = field
|
||||
})
|
||||
}else if (
|
||||
![
|
||||
'Divider',
|
||||
'Grid',
|
||||
'Card',
|
||||
'CreateUser',
|
||||
'CreateTime',
|
||||
'ModifyUser',
|
||||
'ModifyTime',
|
||||
'CardGroup',
|
||||
].includes(element.component) &&
|
||||
!element.itemProps.hidden
|
||||
) {
|
||||
let obj: any = element;
|
||||
obj.required = element.itemProps.required;
|
||||
// obj.componentProps.disabled = false;
|
||||
obj.disabled = true;
|
||||
obj.ifShow = true;
|
||||
obj.fieldName = element.componentProps.fieldName;
|
||||
fieldList.push(obj);
|
||||
} else if (['Grid'].includes(element.component) || element.type == 'subTable') {
|
||||
console.log('gridtable');
|
||||
fieldList.push({
|
||||
field: `${element.field}_add`,
|
||||
label: `${element.label || '表格'}-添加按钮`,
|
||||
required: false,
|
||||
disabled: true,
|
||||
ifShow: false,
|
||||
type: 'grid',
|
||||
});
|
||||
fieldList.push({
|
||||
field: `${element.field}_remove`,
|
||||
label: `${element.label || '表格'}-删除按钮`,
|
||||
required: false,
|
||||
disabled: true,
|
||||
ifShow: false,
|
||||
type: 'grid',
|
||||
});
|
||||
|
||||
fieldList.push({
|
||||
field: `${element.field}_required`,
|
||||
label: `${element.label || '表格'}-数据`,
|
||||
required: element.itemProps.required,
|
||||
disabled: false,
|
||||
ifShow: false,
|
||||
type: 'gridrequired',
|
||||
});
|
||||
element.columns.forEach((child) => {
|
||||
child.children.forEach((t) => {
|
||||
fieldList.push({
|
||||
gridprop: element.field,
|
||||
field: t.field,
|
||||
label: `${element.label || '表格'}-${t.label}`,
|
||||
required: t.itemProps.required,
|
||||
disabled: true,
|
||||
ifShow: true,
|
||||
fieldName: t.componentProps.fieldName,
|
||||
...t,
|
||||
});
|
||||
});
|
||||
});
|
||||
} else if (['Card'].includes(element.component)) {
|
||||
console.log(3);
|
||||
element.columns.forEach((child) => {
|
||||
child.children.forEach((t) => {
|
||||
fieldList.push({
|
||||
gridprop: element.field,
|
||||
field: t.field,
|
||||
required: t.itemProps.required,
|
||||
disabled: true,
|
||||
ifShow: true,
|
||||
fieldName: t.componentProps.fieldName,
|
||||
...t,
|
||||
});
|
||||
});
|
||||
});
|
||||
} else if (
|
||||
['CreateUser', 'CreateTime', 'ModifyUser', 'ModifyTime'].includes(element.component) &&
|
||||
element.display
|
||||
) {
|
||||
let obj: any = element;
|
||||
obj.required = element.itemProps.required;
|
||||
// obj.componentProps.disabled = false;
|
||||
obj.disabled = true;
|
||||
obj.ifShow = true;
|
||||
obj.fieldName = element.componentProps.fieldName;
|
||||
fieldList.push(obj);
|
||||
} else if (['CardGroup'].includes(element.component)) {
|
||||
let obj: any = element;
|
||||
obj.required = element.itemProps.required;
|
||||
// obj.componentProps.disabled = false;
|
||||
obj.disabled = true;
|
||||
obj.ifShow = true;
|
||||
obj.fieldName = element.componentProps.fieldName;
|
||||
obj.label = `卡片组-${element.label}`;
|
||||
fieldList.push(obj);
|
||||
fieldList = cardComponentChild(element.componentProps.options, fieldList);
|
||||
}
|
||||
},);
|
||||
return {rFieldList,fieldList}
|
||||
}
|
||||
function loadFormScheme(strScheme, isChange) {
|
||||
const scheme = JSON.parse(strScheme);
|
||||
let fields: any[] = [];
|
||||
const rfields: {
|
||||
let rfields: {
|
||||
label?: string;
|
||||
value?: string;
|
||||
}[] = [];
|
||||
scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
|
||||
console.log(scheme.formInfo.tabList);
|
||||
scheme.formInfo.tabList.forEach((tabElement) => {
|
||||
tabElement.schemas.forEach(
|
||||
(element: { label?: string; field?: string; component: any; itemProps: any }) => {
|
||||
if (['InputGuid'].includes(element.component)) {
|
||||
rfields.push({
|
||||
label: element.label,
|
||||
// value:element.prop
|
||||
value: element.field,
|
||||
});
|
||||
}
|
||||
if (
|
||||
![
|
||||
'Divider',
|
||||
'Grid',
|
||||
'Card',
|
||||
'CreateUser',
|
||||
'CreateTime',
|
||||
'ModifyUser',
|
||||
'ModifyTime',
|
||||
'CardGroup',
|
||||
].includes(element.component) &&
|
||||
!element.itemProps.hidden
|
||||
) {
|
||||
let obj: any = element;
|
||||
obj.required = element.itemProps.required;
|
||||
// obj.componentProps.disabled = false;
|
||||
obj.disabled = true;
|
||||
obj.ifShow = true;
|
||||
obj.fieldName = element.componentProps.fieldName;
|
||||
fields.push(obj);
|
||||
} else if (['Grid'].includes(element.component) || element.type == 'subTable') {
|
||||
console.log('gridtable');
|
||||
fields.push({
|
||||
field: `${element.field}_add`,
|
||||
label: `${element.label || '表格'}-添加按钮`,
|
||||
required: false,
|
||||
disabled: true,
|
||||
ifShow: false,
|
||||
type: 'grid',
|
||||
});
|
||||
fields.push({
|
||||
field: `${element.field}_remove`,
|
||||
label: `${element.label || '表格'}-删除按钮`,
|
||||
required: false,
|
||||
disabled: true,
|
||||
ifShow: false,
|
||||
type: 'grid',
|
||||
});
|
||||
|
||||
fields.push({
|
||||
field: `${element.field}_required`,
|
||||
label: `${element.label || '表格'}-数据`,
|
||||
required: element.itemProps.required,
|
||||
disabled: false,
|
||||
ifShow: false,
|
||||
type: 'gridrequired',
|
||||
});
|
||||
element.columns.forEach((child) => {
|
||||
child.children.forEach((t) => {
|
||||
fields.push({
|
||||
gridprop: element.field,
|
||||
field: t.field,
|
||||
label: `${element.label || '表格'}-${t.label}`,
|
||||
required: t.itemProps.required,
|
||||
disabled: true,
|
||||
ifShow: true,
|
||||
fieldName: t.componentProps.fieldName,
|
||||
...t,
|
||||
});
|
||||
});
|
||||
});
|
||||
} else if (['Card'].includes(element.component)) {
|
||||
console.log(3);
|
||||
element.columns.forEach((child) => {
|
||||
child.children.forEach((t) => {
|
||||
fields.push({
|
||||
gridprop: element.field,
|
||||
field: t.field,
|
||||
required: t.itemProps.required,
|
||||
disabled: true,
|
||||
ifShow: true,
|
||||
fieldName: t.componentProps.fieldName,
|
||||
...t,
|
||||
});
|
||||
});
|
||||
});
|
||||
} else if (
|
||||
['CreateUser', 'CreateTime', 'ModifyUser', 'ModifyTime'].includes(element.component) &&
|
||||
element.display
|
||||
) {
|
||||
let obj: any = element;
|
||||
obj.required = element.itemProps.required;
|
||||
// obj.componentProps.disabled = false;
|
||||
obj.disabled = true;
|
||||
obj.ifShow = true;
|
||||
obj.fieldName = element.componentProps.fieldName;
|
||||
fields.push(obj);
|
||||
} else if (['CardGroup'].includes(element.component)) {
|
||||
let obj: any = element;
|
||||
obj.required = element.itemProps.required;
|
||||
// obj.componentProps.disabled = false;
|
||||
obj.disabled = true;
|
||||
obj.ifShow = true;
|
||||
obj.fieldName = element.componentProps.fieldName;
|
||||
obj.label = `卡片组-${element.label}`;
|
||||
fields.push(obj);
|
||||
fields = cardComponentChild(element.componentProps.options, fields);
|
||||
}
|
||||
},
|
||||
);
|
||||
const {rFieldList, fieldList} = getRFields(tabElement.schemas,rfields,fields)
|
||||
rfields = rFieldList
|
||||
fields = fieldList
|
||||
});
|
||||
data.formRelations = rfields;
|
||||
if (isChange) {
|
||||
|
|
|
|||
|
|
@ -95,19 +95,19 @@ let drawFeatures = [
|
|||
const MapboxComponent = ref()
|
||||
|
||||
// 添加 或者 编辑图斑
|
||||
setTimeout(function(){
|
||||
// 添加图斑
|
||||
// MapboxComponent.value.handlerDraw()
|
||||
// 编辑图斑
|
||||
MapboxComponent.value.handlerDraw(drawFeatures)
|
||||
},3000)
|
||||
// setTimeout(function(){
|
||||
// // 添加图斑
|
||||
// // MapboxComponent.value.handlerDraw()
|
||||
// // 编辑图斑
|
||||
// MapboxComponent.value.handlerDraw(drawFeatures)
|
||||
// },3000)
|
||||
|
||||
|
||||
|
||||
|
||||
setTimeout(function(){
|
||||
// MapboxComponent.value.handlerDraw()
|
||||
},6000)
|
||||
// setTimeout(function(){
|
||||
// // MapboxComponent.value.handlerDraw()
|
||||
// },6000)
|
||||
|
||||
// 图斑定位
|
||||
// setTimeout(function(){
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
breakpoint="md"
|
||||
>
|
||||
<div class="collapseItem-box">
|
||||
<CollapseContainer title="基础控件">
|
||||
<CollapseContainer title="基础控件" isTitleBold="true">
|
||||
<CollapseItem
|
||||
:list="baseComponents"
|
||||
:handleListPush="handleListPushDrag"
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
@handle-list-push="handleListPush"
|
||||
/>
|
||||
</CollapseContainer>
|
||||
<CollapseContainer title="自定义控件">
|
||||
<CollapseContainer title="自定义控件" isTitleBold="true">
|
||||
<CollapseItem
|
||||
:list="customComponents"
|
||||
@add-attrs="handleAddAttrs"
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
@handle-list-push="handleListPush"
|
||||
/>
|
||||
</CollapseContainer>
|
||||
<CollapseContainer title="布局控件">
|
||||
<CollapseContainer title="布局控件" isTitleBold="true">
|
||||
<CollapseItem
|
||||
:list="layoutComponents"
|
||||
:handleListPush="handleListPushDrag"
|
||||
|
|
@ -451,4 +451,8 @@
|
|||
height: calc(100vh - 55px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.vben-basic-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,20 +7,25 @@
|
|||
<!-- 操作左侧区域 start -->
|
||||
<div class="left-btn-box" style="text-indent: 20px">
|
||||
<Tooltip v-for="item in toolbarsConfigs" :title="item.title" :key="item.icon">
|
||||
<a @click="$emit(item.event)" class="toolbar-text">
|
||||
<Icon :icon="item.icon" :style="{ fontSize: '21px' }" />
|
||||
</a>
|
||||
<a-button @click="$emit(item.event)" id="button">
|
||||
<template #icon>
|
||||
<Icon :icon="item.icon" :style="{ fontSize: '16px' }" />
|
||||
</template>
|
||||
</a-button>
|
||||
</Tooltip>
|
||||
<Divider type="vertical" />
|
||||
<Tooltip title="撤销">
|
||||
<a :class="{ disabled: !canUndo }" :disabled="!canUndo" @click="undo">
|
||||
<Icon icon="ant-design:undo-outlined" :style="{ fontSize: '21px' }" />
|
||||
</a>
|
||||
<a-button :class="{ disabled: !canUndo }" :disabled="!canUndo" @click="undo" id="button">
|
||||
<template #icon>
|
||||
<Icon icon="ant-design:undo-outlined" :style="{ fontSize: '16px' }" />
|
||||
</template>
|
||||
</a-button>
|
||||
</Tooltip>
|
||||
<Tooltip title="重做">
|
||||
<a :class="{ disabled: !canRedo }" :disabled="!canRedo" @click="redo">
|
||||
<Icon icon="ant-design:redo-outlined" :style="{ fontSize: '21px' }" />
|
||||
</a>
|
||||
<a-button :class="{ disabled: !canRedo }" @click="redo" id="button">
|
||||
<template #icon>
|
||||
<Icon icon="ant-design:redo-outlined" :style="{ fontSize: '16px' }" />
|
||||
</template>
|
||||
</a-button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -30,7 +35,7 @@
|
|||
import { defineComponent, inject, reactive, toRefs } from 'vue';
|
||||
import { UseRefHistoryReturn } from '@vueuse/core';
|
||||
import { IFormConfig } from '../../../typings/v-form-component';
|
||||
import { Tooltip, Divider } from 'ant-design-vue';
|
||||
import { Tooltip } from 'ant-design-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
|
||||
interface IToolbarsConfig {
|
||||
|
|
@ -45,7 +50,6 @@
|
|||
components: {
|
||||
Tooltip,
|
||||
Icon,
|
||||
Divider,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive<{
|
||||
|
|
@ -56,7 +60,7 @@
|
|||
title: '预览-支持布局',
|
||||
type: 'preview',
|
||||
event: 'handlePreview',
|
||||
icon: 'ant-design:chrome-filled',
|
||||
icon: 'bi:life-preserver',
|
||||
},
|
||||
// {
|
||||
// title: '预览-不支持布局',
|
||||
|
|
@ -113,9 +117,10 @@
|
|||
line-height: @operating-area-height;
|
||||
text-align: left;
|
||||
|
||||
a {
|
||||
#button {
|
||||
margin: 0 5px;
|
||||
color: #666;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
&.disabled,
|
||||
&.disabled:hover {
|
||||
|
|
@ -127,7 +132,6 @@
|
|||
}
|
||||
|
||||
> span {
|
||||
padding-left: 2px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
.draggable-box {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: @background-color;
|
||||
|
||||
|
||||
:deep(.list-main) {
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
|
||||
.moving {
|
||||
position: relative;
|
||||
|
|
@ -21,7 +24,7 @@
|
|||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
height: 3px;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -33,6 +36,7 @@
|
|||
padding: 8px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background-color: @primary-hover-bg-color;
|
||||
|
|
@ -44,14 +48,16 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
width: 0%;
|
||||
height: 3px;
|
||||
transition: all 0.3s;
|
||||
outline: 3px solid @primary-color;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
outline-offset: 0;
|
||||
outline: 3px solid @primary-color;
|
||||
// outline-offset: 0;
|
||||
background-color: @primary-hover-bg-color;
|
||||
|
||||
&::before {
|
||||
|
|
@ -84,7 +90,7 @@
|
|||
.show-key-box {
|
||||
// 显示key
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
right: 3px;
|
||||
bottom: 2px;
|
||||
// z-index: 999;
|
||||
color: @primary-color;
|
||||
|
|
@ -133,6 +139,12 @@
|
|||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
background-color: @layout-background-color;
|
||||
border-radius: 3px;
|
||||
|
||||
// 鼠标划过
|
||||
&:hover {
|
||||
background-color: @layout-hover-bg-color;
|
||||
}
|
||||
|
||||
.form-item-box {
|
||||
position: relative;
|
||||
|
|
@ -170,14 +182,15 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
width: 0%;
|
||||
height: 3px;
|
||||
transition: all 0.3s;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.active {
|
||||
outline-offset: 0;
|
||||
outline: 3px solid @layout-color;
|
||||
// outline-offset: 0;
|
||||
background-color: @layout-hover-bg-color;
|
||||
|
||||
&::before {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
// 表单设计器样式
|
||||
@primary-color: #13c2c2;
|
||||
@layout-color: #9867f7;
|
||||
@background-color: #EBEDF1;
|
||||
@primary-color: #1E5EFFFF;
|
||||
@layout-color: #A91EFFFF;
|
||||
|
||||
@primary-background-color: fade(@primary-color, 6%);
|
||||
@primary-hover-bg-color: fade(@primary-color, 20%);
|
||||
@layout-background-color: fade(@layout-color, 12%);
|
||||
@layout-hover-bg-color: fade(@layout-color, 24%);
|
||||
@primary-hover-bg-color: #DFEAFC;
|
||||
@layout-background-color: #E9E4F5;
|
||||
@layout-hover-bg-color: #d7d2ff;
|
||||
|
||||
@title-text-color: #fff;
|
||||
@border-color: #ccc;
|
||||
|
|
|
|||
|
|
@ -453,7 +453,7 @@ export const baseComponents: IVFormComponent[] = [
|
|||
{
|
||||
component: 'Cascader',
|
||||
label: '级联选择',
|
||||
icon: 'ant-design:check-outlined',
|
||||
icon: 'ant-design:block-outlined',
|
||||
field: '',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
|
|
|
|||
|
|
@ -526,12 +526,7 @@
|
|||
if (rows.length == 0) {
|
||||
return createMessage.warn('请选择一条数据查看详情');
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
|
||||
console.log("DetailsRow",formConfig,rows);
|
||||
=======
|
||||
console.log('DetailsRow', rows);
|
||||
>>>>>>> 2d727b56b33f5b20ec09e72b777cfa6a88e157e9
|
||||
let toProps = {
|
||||
isDetail: true,
|
||||
isUpdate: false,
|
||||
|
|
@ -548,41 +543,12 @@
|
|||
openShowFormModal.value = true;
|
||||
|
||||
// 根据ids获取图斑
|
||||
<<<<<<< HEAD
|
||||
|
||||
try{
|
||||
console.log("formConfig",formConfig);
|
||||
handlerShowGeomtrys(formConfig,rows[0])
|
||||
}catch(e){
|
||||
createMessage.error("当前数据没有图斑!");
|
||||
=======
|
||||
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('当前数据没有图斑!');
|
||||
>>>>>>> 2d727b56b33f5b20ec09e72b777cfa6a88e157e9
|
||||
}
|
||||
} else {
|
||||
openModal(true, toProps);
|
||||
|
|
@ -597,7 +563,7 @@
|
|||
}
|
||||
};
|
||||
|
||||
<<<<<<< HEAD
|
||||
|
||||
async function handlerShowGeomtrys(currentNode,rows){
|
||||
|
||||
let info = currentNode.value.schemas?.find((item,index)=>{
|
||||
|
|
@ -656,8 +622,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> 2d727b56b33f5b20ec09e72b777cfa6a88e157e9
|
||||
function handleSelect(selectedKeys: any, selected: any) {
|
||||
const rel = selected.node.dataRef;
|
||||
const obj: any = {};
|
||||
|
|
|
|||
|
|
@ -74,9 +74,10 @@
|
|||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { getMenuList } from '@/api/demo/system';
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
|
||||
import { FormInstance } from 'ant-design-vue';
|
||||
import ModuleModal from './modalForm-Modal.vue';
|
||||
import { functionGetSchemePageList, functionGetForm } from '@/api/demo/formScheme';
|
||||
import { Get_Get_ExistFiled } from '@/api/demo/formModule';
|
||||
|
||||
// emit
|
||||
const emit = defineEmits(['change-form-verisons', 'set-steps-current']);
|
||||
|
|
@ -110,7 +111,7 @@
|
|||
// 表单选择声明
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
// 表单ref
|
||||
const formModuleRef = ref<any>();
|
||||
let formModuleRef: FormInstance | null = null;
|
||||
// 版本options
|
||||
const formVerisons = ref([]);
|
||||
// 上级options
|
||||
|
|
@ -134,12 +135,147 @@
|
|||
});
|
||||
// 规则
|
||||
let rules = {
|
||||
code: [{ required: true, message: '请输入' }],
|
||||
name: [{ required: true, message: '请输入' }],
|
||||
icon: [{ component: 'IconPicker', required: true, message: '请输入' }],
|
||||
formCodeName: [{ required: true, message: '请输入' }],
|
||||
formVerison: [{ required: true, message: '请选择版本' }],
|
||||
pmoduleId: [{ required: true, message: '请输入' }],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
asyncValidator: async (rule, value, callback) => {
|
||||
// 验证逻辑
|
||||
if (value) {
|
||||
try {
|
||||
let filedsJson = {
|
||||
Code: formData.value.code,
|
||||
};
|
||||
if (props.isEdit) {
|
||||
// 编辑
|
||||
let query: any = {
|
||||
keyValue: props.editData.record.id,
|
||||
tableName: 'form_module',
|
||||
keyName: 'Id',
|
||||
filedsJson: JSON.stringify(filedsJson),
|
||||
};
|
||||
await Get_Get_ExistFiled(query).then((res) => {
|
||||
if (res) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error('编号重复'));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 新增
|
||||
let query: any = {
|
||||
tableName: 'form_module',
|
||||
keyName: 'Id',
|
||||
filedsJson: JSON.stringify(filedsJson),
|
||||
};
|
||||
await Get_Get_ExistFiled(query).then((res) => {
|
||||
if (res) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error('编号重复'));
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
('验证出错');
|
||||
}
|
||||
} else {
|
||||
callback(new Error('请输入编号'));
|
||||
}
|
||||
},
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
try {
|
||||
// 验证逻辑
|
||||
if (value) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error('请输入名称'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
icon: [
|
||||
{
|
||||
component: 'IconPicker',
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
try {
|
||||
// 验证逻辑
|
||||
if (value) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error('请选择图标'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
formCodeName: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
try {
|
||||
// 验证逻辑
|
||||
if (value) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error('请选择表单'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
formVerison: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
try {
|
||||
// 验证逻辑
|
||||
if (value) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error('请选择表单版本'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
pmoduleId: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
try {
|
||||
// 验证逻辑
|
||||
if (value) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error('请选择上级'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
enabledMark: [{ required: true }],
|
||||
};
|
||||
|
||||
|
|
@ -159,21 +295,34 @@
|
|||
// 监视props
|
||||
watch(
|
||||
() => props.isNextSteps,
|
||||
() => {
|
||||
// 基本配置页数据是否填完整
|
||||
async () => {
|
||||
if (props.isNextSteps) {
|
||||
let checkdata = formData.value;
|
||||
// if (formModuleRef) {
|
||||
// try {
|
||||
// await formModuleRef.validate();
|
||||
// } catch (error) {
|
||||
// console.log(error);
|
||||
// }
|
||||
// }
|
||||
if (
|
||||
checkdata.code === '' ||
|
||||
checkdata.formCode === '' ||
|
||||
checkdata.name === '' ||
|
||||
checkdata.formVerison === '' ||
|
||||
checkdata.pmoduleId === ''
|
||||
formData.value.code === '' ||
|
||||
formData.value.name === '' ||
|
||||
formData.value.icon === '' ||
|
||||
formData.value.formCode === '' ||
|
||||
formData.value.formVerison === '' ||
|
||||
formData.value.pmoduleId === ''
|
||||
) {
|
||||
createMessage.error(t('数据未填完整'));
|
||||
createMessage.error(t('数据未填写完整'));
|
||||
emit('set-steps-current', false);
|
||||
} else {
|
||||
emit('set-steps-current', true);
|
||||
// 验证通过后的逻辑
|
||||
let res = await checkExistFiled();
|
||||
if (res) {
|
||||
emit('set-steps-current', true);
|
||||
} else {
|
||||
createMessage.error(t('表单的编号值重复'));
|
||||
emit('set-steps-current', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -238,6 +387,59 @@
|
|||
getSchemeRow(result.info);
|
||||
}
|
||||
|
||||
// 验证通过后的逻辑
|
||||
async function checkExistFiled() {
|
||||
try {
|
||||
let filedsJson = {
|
||||
Code: formData.value.code,
|
||||
};
|
||||
let result = false;
|
||||
if (props.isEdit) {
|
||||
// 编辑
|
||||
let query: any = {
|
||||
keyValue: props.editData.record.id,
|
||||
tableName: 'form_module',
|
||||
keyName: 'Id',
|
||||
filedsJson: JSON.stringify(filedsJson),
|
||||
};
|
||||
await Get_Get_ExistFiled(query)
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
result = true;
|
||||
} else {
|
||||
result = false;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
createMessage.error('验证出错' + error);
|
||||
result = true;
|
||||
});
|
||||
} else {
|
||||
// 新增
|
||||
let query: any = {
|
||||
tableName: 'form_module',
|
||||
keyName: 'Id',
|
||||
filedsJson: JSON.stringify(filedsJson),
|
||||
};
|
||||
await Get_Get_ExistFiled(query)
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
result = true;
|
||||
} else {
|
||||
result = false;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
createMessage.error('验证出错' + error);
|
||||
result = false;
|
||||
});
|
||||
}
|
||||
return result;
|
||||
} catch (error) {
|
||||
('验证出错');
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
formData,
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue