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,6 +25,24 @@
|
|||
setup(props, { slots, attrs, emit }) {
|
||||
const { prefixCls } = useDesign('collapse-container');
|
||||
const _prefixCls = computed(() => props.prefixCls || unref(prefixCls));
|
||||
// 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>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return () => (
|
||||
<div class={[`${unref(_prefixCls)}__header px-2 py-5`, attrs.class]}>
|
||||
<BasicTitle helpMessage={props.helpMessage} normal>
|
||||
|
|
@ -39,6 +58,7 @@
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
<div class="layer-control-center">
|
||||
<a-collapse v-model:activeKey="activeKey" accordion expandIconPosition="end" expandIcon="">
|
||||
<a-collapse-panel key="1" header="图层">
|
||||
<p v-for="(item, index) in props.mapConfig.layers">
|
||||
<p v-for="(item, index) in props.mapConfig.layers" :key="index">
|
||||
<a-checkbox v-model:checked="item.checked" @change="handlerCheckboxChange(item)">{{
|
||||
item.name
|
||||
}}</a-checkbox>
|
||||
</p>
|
||||
<p v-for="(item, index) in props.mapConfig.baseLayers">
|
||||
<p v-for="(item, index) in props.mapConfig.baseLayers" :key="index">
|
||||
<a-checkbox v-model:checked="item.checked" @change="handlerCheckboxChange(item)">{{
|
||||
item.name
|
||||
}}</a-checkbox>
|
||||
|
|
@ -46,11 +46,11 @@
|
|||
// 图形绘制工具类
|
||||
import MapboxDraw from '@mapbox/mapbox-gl-draw';
|
||||
|
||||
import { generateUUID,getGeometryCenter } from './src/tool'
|
||||
import { generateUUID, getGeometryCenter } from './src/tool';
|
||||
|
||||
// 测量工具
|
||||
import { SwitchLayerControl,MeasureControl } from 'mapbox-extensions'
|
||||
import 'mapbox-extensions/dist/index.css'
|
||||
import { SwitchLayerControl, MeasureControl } from 'mapbox-extensions';
|
||||
import 'mapbox-extensions/dist/index.css';
|
||||
|
||||
import U from 'mapbox-gl-utils';
|
||||
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
const props = defineProps({
|
||||
mapConfig: {
|
||||
type: Object,
|
||||
default:{}
|
||||
default: {},
|
||||
},
|
||||
layers: {
|
||||
type: Array,
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
},
|
||||
});
|
||||
|
||||
console.log("mapConfig",props.mapConfig);
|
||||
console.log('mapConfig', props.mapConfig);
|
||||
|
||||
let nextMapControl: Array<any> = reactive([]);
|
||||
nextMapControl = props.control
|
||||
|
|
@ -148,9 +148,8 @@
|
|||
mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
|
||||
map = initMap();
|
||||
map.on('load', () => {
|
||||
|
||||
// 根据地图配置信息加载地形数据
|
||||
if(props.mapConfig.mode == "3D"){
|
||||
if (props.mapConfig.mode == '3D') {
|
||||
handlerLoadTerrain();
|
||||
}
|
||||
|
||||
|
|
@ -185,7 +184,8 @@
|
|||
window.handlerCopyFeature = handlerCopyFeature;
|
||||
|
||||
// 测量工具
|
||||
map.addControl(new MeasureControl({
|
||||
map.addControl(
|
||||
new MeasureControl({
|
||||
horizontal: true, //default false
|
||||
btnBgColor: '#ffffff', //default '#ffffff'
|
||||
btnActiveColor: '#ddd', //default '#ddd'
|
||||
|
|
@ -193,14 +193,12 @@
|
|||
enableModes: ['Point', 'LineString', 'Polygon'], //default all
|
||||
onStart: () => {},
|
||||
onStop: () => {},
|
||||
measurePointOptions:{
|
||||
|
||||
},
|
||||
measureLineStringOptions:{
|
||||
},
|
||||
measurePolygonOptions:{
|
||||
}
|
||||
}),"top-right")
|
||||
measurePointOptions: {},
|
||||
measureLineStringOptions: {},
|
||||
measurePolygonOptions: {},
|
||||
}),
|
||||
'top-right',
|
||||
);
|
||||
});
|
||||
});
|
||||
// 销毁地图
|
||||
|
|
@ -208,14 +206,14 @@
|
|||
// 加载地形
|
||||
const handlerLoadTerrain = () => {
|
||||
map.addSource('mapbox-dem', {
|
||||
'type': 'raster-dem',
|
||||
'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
|
||||
'tileSize': 512,
|
||||
'maxzoom': 14
|
||||
type: 'raster-dem',
|
||||
url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
|
||||
tileSize: 512,
|
||||
maxzoom: 14,
|
||||
});
|
||||
|
||||
map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
|
||||
}
|
||||
map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
|
||||
};
|
||||
// 移除地图实例
|
||||
onUnmounted(() => {
|
||||
map ? map.remove() : null;
|
||||
|
|
@ -263,8 +261,7 @@
|
|||
minZoom: props.mapConfig.minZoom ? props.mapConfig.minZoom : 1,
|
||||
zoom: props.mapConfig.zoom ? props.mapConfig.zoom : 12,
|
||||
pitch: props.mapConfig.angle ? props.mapConfig.angle : 0,
|
||||
center: props.mapConfig.center?.split(","),
|
||||
|
||||
center: props.mapConfig.center?.split(','),
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -302,7 +299,6 @@
|
|||
|
||||
// 初始化绘图空间
|
||||
const handlerInitDrawTool = (feature, bool) => {
|
||||
|
||||
// if (feature.features.length > 0) {
|
||||
|
||||
// feature.features.forEach((item) => {
|
||||
|
|
@ -321,7 +317,6 @@
|
|||
|
||||
geojson.geojson = feature;
|
||||
|
||||
|
||||
if (drawTool) {
|
||||
drawTool.deleteAll();
|
||||
if (feature.features) {
|
||||
|
|
@ -413,19 +408,18 @@
|
|||
};
|
||||
|
||||
const handlerCheckboxChange = (item) => {
|
||||
console.log("itemitemitem",item);
|
||||
console.log('itemitemitem', item);
|
||||
handlerPreviewLayer(item);
|
||||
};
|
||||
|
||||
// 控制图层是否显示
|
||||
const handlerPreviewLayer = (layer) => {
|
||||
console.log("layersss",layer);
|
||||
console.log('layersss', layer);
|
||||
handlerLayerControler(layer);
|
||||
};
|
||||
|
||||
// 图层控制中心
|
||||
const handlerLayerControler = (layerInfo) => {
|
||||
|
||||
layerInfo.layer = layerInfo.layer ? layerInfo.layer : JSON.parse(layerInfo.style);
|
||||
|
||||
if (map.getSource(layerInfo.layer.id)) {
|
||||
|
|
@ -476,7 +470,6 @@
|
|||
};
|
||||
|
||||
const initDraw = (layerInfo) => {
|
||||
|
||||
// 实例化绘图工具
|
||||
drawTool = new MapboxDraw({
|
||||
modes: {
|
||||
|
|
@ -542,19 +535,17 @@
|
|||
};
|
||||
|
||||
const handlerCancleDraw = () => {
|
||||
|
||||
map.removeControl(drawTool);
|
||||
drawTool = null;
|
||||
drawing.value = false;
|
||||
|
||||
// 清空详情图层
|
||||
if(map.getSource("detailsSource")){
|
||||
map.getSource("detailsSource").setData({
|
||||
if (map.getSource('detailsSource')) {
|
||||
map.getSource('detailsSource').setData({
|
||||
type: 'FeatureCollection',
|
||||
features: [],
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -579,11 +570,11 @@
|
|||
features: [],
|
||||
};
|
||||
// 清空详情图斑
|
||||
if(map.getSource("detailsSource")){
|
||||
map.getSource("detailsSource").setData({
|
||||
if (map.getSource('detailsSource')) {
|
||||
map.getSource('detailsSource').setData({
|
||||
type: 'FeatureCollection',
|
||||
features: [],
|
||||
})
|
||||
});
|
||||
}
|
||||
if (features == null) {
|
||||
bool = true;
|
||||
|
|
@ -606,80 +597,68 @@
|
|||
handlerLocation(lngLat);
|
||||
}
|
||||
} catch (e) {
|
||||
createMessage.error("WKT数据格式解析错误，请检查WKT数据格式是否有误！");
|
||||
createMessage.error('WKT数据格式解析错误，请检查WKT数据格式是否有误！');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
switch (status) {
|
||||
case "Add":
|
||||
case 'Add':
|
||||
handlerInitDrawTool(geo, bool);
|
||||
break;
|
||||
case "Edit":
|
||||
case 'Edit':
|
||||
handlerInitDrawTool(geo, bool);
|
||||
break;
|
||||
case "Details":
|
||||
case 'Details':
|
||||
handlerDetails(geo);
|
||||
break;
|
||||
default:
|
||||
createMessage.error("请传入操作类型！");
|
||||
createMessage.error('请传入操作类型！');
|
||||
}
|
||||
};
|
||||
|
||||
// 查看图斑详情
|
||||
const handlerDetails = (geojson) => {
|
||||
if(map.getSource("detailsSource")){
|
||||
map.getSource("detailsSource").setData(geojson);
|
||||
if (map.getSource('detailsSource')) {
|
||||
map.getSource('detailsSource').setData(geojson);
|
||||
} else {
|
||||
map.addSource("detailsSource",{
|
||||
type:"geojson",
|
||||
data:geojson
|
||||
})
|
||||
map.addLayer(
|
||||
{
|
||||
"id": "detailsLayer",
|
||||
"type": "fill",
|
||||
"source": "detailsSource",
|
||||
'layout':{
|
||||
|
||||
},
|
||||
'paint': {
|
||||
map.addSource('detailsSource', {
|
||||
type: 'geojson',
|
||||
data: geojson,
|
||||
});
|
||||
map.addLayer({
|
||||
id: 'detailsLayer',
|
||||
type: 'fill',
|
||||
source: 'detailsSource',
|
||||
layout: {},
|
||||
paint: {
|
||||
//填充颜色
|
||||
'fill-color': '#3badc9',
|
||||
//透明度设置
|
||||
"fill-opacity": 0.4,
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
map.addLayer(
|
||||
{
|
||||
"id": "detailsLayerLine",
|
||||
"type": "line",
|
||||
"source": "detailsSource",
|
||||
'layout':{
|
||||
|
||||
'fill-opacity': 0.4,
|
||||
},
|
||||
'paint': {
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: 'detailsLayerLine',
|
||||
type: 'line',
|
||||
source: 'detailsSource',
|
||||
layout: {},
|
||||
paint: {
|
||||
'line-color': '#3badc9',
|
||||
'line-width': 2
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
'line-width': 2,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 创建查看图斑图层
|
||||
|
||||
|
||||
|
||||
|
||||
defineExpose({
|
||||
handlerDraw,
|
||||
handlerLocation,
|
||||
handlerCancleDraw,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -706,7 +685,6 @@
|
|||
}
|
||||
|
||||
.layer-control-center .ant-checkbox-wrapper {
|
||||
|
||||
}
|
||||
|
||||
.draw-control-center {
|
||||
|
|
@ -748,7 +726,6 @@
|
|||
}
|
||||
|
||||
.mapboxgl-ctrl-top-right {
|
||||
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button + button {
|
||||
|
|
@ -811,6 +788,4 @@
|
|||
height: 22px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
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 AddLayer from './AddLayer/index.vue';
|
||||
import DataListComponent from './DataListComponent/index.vue';
|
||||
import RightShowInfo from './RightShowInfo/index.vue';
|
||||
|
||||
|
|
@ -194,7 +194,7 @@
|
|||
guides: true,
|
||||
});
|
||||
|
||||
map.addControl(drawTool, 'top-right');
|
||||
// map.addControl(drawTool, 'top-right');
|
||||
};
|
||||
|
||||
// 将图斑复制到指定图层
|
||||
|
|
@ -232,14 +232,12 @@
|
|||
};
|
||||
|
||||
const handlerRenderLayer = (layer) => {
|
||||
console.log("layerInfo",layer)
|
||||
}
|
||||
console.log('layerInfo', layer);
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
handlerRenderLayer
|
||||
handlerRenderLayer,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -286,7 +284,6 @@
|
|||
}
|
||||
|
||||
.mapboxgl-ctrl-top-right {
|
||||
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button + button {
|
||||
|
|
@ -339,4 +336,3 @@
|
|||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,231 +1,229 @@
|
|||
let customDrawStyles = [{
|
||||
"id": "gl-draw-polygon-fill-inactive",
|
||||
"type": "fill",
|
||||
"filter": ["all", ["==", "active", "false"],
|
||||
["==", "$type", "Polygon"],
|
||||
["!=", "mode", "static"]
|
||||
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: {
|
||||
'fill-color': '#3bb2d0',
|
||||
'fill-outline-color': '#6495ed',
|
||||
'fill-opacity': 0.5,
|
||||
},
|
||||
"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"
|
||||
{
|
||||
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,
|
||||
},
|
||||
"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"
|
||||
{
|
||||
id: 'gl-draw-polygon-midpoint',
|
||||
type: 'circle',
|
||||
filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
|
||||
paint: {
|
||||
'circle-radius': 3,
|
||||
'circle-color': '#fbb03b',
|
||||
},
|
||||
"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"]
|
||||
{
|
||||
id: 'gl-draw-polygon-stroke-inactive',
|
||||
type: 'line',
|
||||
filter: [
|
||||
'all',
|
||||
['==', 'active', 'false'],
|
||||
['==', '$type', 'Polygon'],
|
||||
['!=', 'mode', 'static'],
|
||||
],
|
||||
"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"
|
||||
layout: {
|
||||
'line-cap': 'round',
|
||||
'line-join': 'round',
|
||||
},
|
||||
"paint": {
|
||||
"line-color": "#c00c00",
|
||||
"line-width": 1,
|
||||
"line-dasharray": [5, 5]
|
||||
}
|
||||
}]
|
||||
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,26 +405,22 @@
|
|||
});
|
||||
return result;
|
||||
};
|
||||
function loadFormScheme(strScheme, isChange) {
|
||||
const scheme = JSON.parse(strScheme);
|
||||
let fields: any[] = [];
|
||||
const 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 }) => {
|
||||
const getRFields = (dataList, rFieldList,fieldList) => {
|
||||
dataList.forEach((element: { label?: string; field?: string; component: any; itemProps: any }) => {
|
||||
if (['InputGuid'].includes(element.component)) {
|
||||
rfields.push({
|
||||
rFieldList.push({
|
||||
label: element.label,
|
||||
// value:element.prop
|
||||
value: element.field,
|
||||
});
|
||||
}
|
||||
if (
|
||||
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',
|
||||
|
|
@ -443,10 +439,10 @@
|
|||
obj.disabled = true;
|
||||
obj.ifShow = true;
|
||||
obj.fieldName = element.componentProps.fieldName;
|
||||
fields.push(obj);
|
||||
fieldList.push(obj);
|
||||
} else if (['Grid'].includes(element.component) || element.type == 'subTable') {
|
||||
console.log('gridtable');
|
||||
fields.push({
|
||||
fieldList.push({
|
||||
field: `${element.field}_add`,
|
||||
label: `${element.label || '表格'}-添加按钮`,
|
||||
required: false,
|
||||
|
|
@ -454,7 +450,7 @@
|
|||
ifShow: false,
|
||||
type: 'grid',
|
||||
});
|
||||
fields.push({
|
||||
fieldList.push({
|
||||
field: `${element.field}_remove`,
|
||||
label: `${element.label || '表格'}-删除按钮`,
|
||||
required: false,
|
||||
|
|
@ -463,7 +459,7 @@
|
|||
type: 'grid',
|
||||
});
|
||||
|
||||
fields.push({
|
||||
fieldList.push({
|
||||
field: `${element.field}_required`,
|
||||
label: `${element.label || '表格'}-数据`,
|
||||
required: element.itemProps.required,
|
||||
|
|
@ -473,7 +469,7 @@
|
|||
});
|
||||
element.columns.forEach((child) => {
|
||||
child.children.forEach((t) => {
|
||||
fields.push({
|
||||
fieldList.push({
|
||||
gridprop: element.field,
|
||||
field: t.field,
|
||||
label: `${element.label || '表格'}-${t.label}`,
|
||||
|
|
@ -489,7 +485,7 @@
|
|||
console.log(3);
|
||||
element.columns.forEach((child) => {
|
||||
child.children.forEach((t) => {
|
||||
fields.push({
|
||||
fieldList.push({
|
||||
gridprop: element.field,
|
||||
field: t.field,
|
||||
required: t.itemProps.required,
|
||||
|
|
@ -510,7 +506,7 @@
|
|||
obj.disabled = true;
|
||||
obj.ifShow = true;
|
||||
obj.fieldName = element.componentProps.fieldName;
|
||||
fields.push(obj);
|
||||
fieldList.push(obj);
|
||||
} else if (['CardGroup'].includes(element.component)) {
|
||||
let obj: any = element;
|
||||
obj.required = element.itemProps.required;
|
||||
|
|
@ -519,11 +515,24 @@
|
|||
obj.ifShow = true;
|
||||
obj.fieldName = element.componentProps.fieldName;
|
||||
obj.label = `卡片组-${element.label}`;
|
||||
fields.push(obj);
|
||||
fields = cardComponentChild(element.componentProps.options, fields);
|
||||
fieldList.push(obj);
|
||||
fieldList = cardComponentChild(element.componentProps.options, fieldList);
|
||||
}
|
||||
},
|
||||
);
|
||||
},);
|
||||
return {rFieldList,fieldList}
|
||||
}
|
||||
function loadFormScheme(strScheme, isChange) {
|
||||
const scheme = JSON.parse(strScheme);
|
||||
let fields: any[] = [];
|
||||
let rfields: {
|
||||
label?: string;
|
||||
value?: string;
|
||||
}[] = [];
|
||||
scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
|
||||
scheme.formInfo.tabList.forEach((tabElement) => {
|
||||
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 {
|
||||
// 验证通过后的逻辑
|
||||
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