merge

src/api/demo/formModule.ts

@@ -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,
+  });
+}

src/components/Container/src/collapse/CollapseContainer.vue

@@ -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,
             }}
           />
 

src/components/Container/src/collapse/CollapseHeader.vue

@@ -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>

src/components/MapboxMaps/MapboxMap.vue

@@ -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>

src/components/MapboxMaps/RightShowInfo/index.vue

@@ -19,7 +19,7 @@
   import { ref, defineProps, watch } from 'vue';
   import './index.scss';
 
-  const open = ref(true);
+  const open = ref(false);
   const props = defineProps(['openModal']);
   watch(
     () => props.openModal,

src/components/MapboxMaps/Styles/Styles.ts

@@ -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 };

src/components/ProcessDesigner/package/penal/startEvent/index.vue

@@ -186,6 +186,7 @@
   import { functionGetSchemePageList, functionLoadFormPage } from '@/api/demo/formScheme';
   import { cardNestStructure } from '@/views/demo/onlineform/util.ts';
   import { fun_GetPageList } from '@/api/demo/formModule';
+  import { getRFields } from '@/views/demo/workflow/scheme/util.ts'
 
   const flowWfDataStore = flowStore();
   const labelCol = { span: 7 };
@@ -388,142 +389,18 @@
     });
     loadFormScheme(obj.scheme, isChange);
   }
-  const cardComponentChild = (data, result) => {
-    data.forEach((optionsElement) => {
-      optionsElement.children.forEach((childrenElement) => {
-        let obj: any = childrenElement;
-        obj.required = childrenElement.itemProps.required;
-        obj.disabled = true;
-        obj.ifShow = true;
-        obj.label = `${optionsElement.label} - ${childrenElement.label}`;
-        obj.fieldName = childrenElement.componentProps.fieldName;
-        result.push(obj);
-        if (childrenElement.component === 'CardGroup') {
-          result = cardComponentChild(childrenElement.componentProps.options, result);
-        }
-      });
-    });
-    return result;
-  };
   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) {

src/components/ProcessDesigner/package/penal/userTask/index.vue

@@ -541,6 +541,7 @@
   import { cardNestStructure } from '@/views/demo/onlineform/util.ts';
   import { fun_GetPageList } from '@/api/demo/formModule';
   import { SelectIssueForm } from '@/components/SelectIssueForm/index';
+  import { getRFields } from '@/views/demo/workflow/scheme/util.ts'
 
   const flowWfDataStore = flowStore();
   const labelCol = { span: 7 };
@@ -920,142 +921,19 @@
     });
     loadFormScheme(obj.scheme, isChange);
   }
-  const cardComponentChild = (data, result) => {
-    data.forEach((optionsElement) => {
-      optionsElement.children.forEach((childrenElement) => {
-        let obj: any = childrenElement;
-        obj.required = childrenElement.itemProps.required;
-        obj.disabled = true;
-        obj.ifShow = true;
-        obj.label = `${optionsElement.label} - ${childrenElement.label}`;
-        obj.fieldName = childrenElement.componentProps.fieldName;
-        result.push(obj);
-        if (childrenElement.component === 'CardGroup') {
-          result = cardComponentChild(childrenElement.componentProps.options, result);
-        }
-      });
-    });
-    return result;
-  };
   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) {

src/views/dashboard/analysis/index.vue

@@ -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(){

src/views/demo/form-design/components/VFormDesign/config/formItemPropsScript.ts

@@ -1,49 +1,3 @@
-export const formItemPropsScript_ = `
-prop:组件id;
-data:组件改变数据;
-isUpdate:表单状态,新增或更新;
-get(path):获取数据方法, 如果想获取某一个组件值就设置path参数值为组件id, 如果是子表的一行数据值就设置子表id.行号, 如果是子表某一行某一列值就设置子表id.行号.子组件id;
-set(path,value):设置值方法,path说明和get方法一致;
-getLabel(prop):获取组件的显示值,prop为组件id;
-setRequired(prop,isRequired):设置组件是否必填,prop为组件id,isRequired 默认值true,如果取消必填就设置成false
-setDisabled(prop,isDisabled):设置组件是否只读,prop为组件id,isDisabled 默认值true,如果取消只读就设置成false
-setHide(prop,isHide):设置组件是否隐藏,isHide 默认值true,如果取消隐藏就设置成false
-httpGet(option):get请求方法
-httpPost(option):post请求方法
-httpDelete(option):delete请求方法
-httpPut(option):put请求方法
-option:上面四个请求方法参数描述:url:请求地址,data:提交数据(get方法不支持),params:url参数,errorTips:请求失败错误提示,callback请求回调方法 返回结果为请求数据
-loading:显示加载状态
-hideLoading:隐藏加载状态
-message:显示提示消息
-loginUser:当前登录者信息
-callback:回调方法,在脚本里使用了http方法后才需要使用';
-`;
-
-export const formItemPropsScript__ = `
-// 示例代码,只支持ES5语法
-// 获取子表行数据
-var childRow = utils.get('子表组件id.行号')
-// 获取子表单元格数据
-var childCell = utils.get('子表组件id.行号.单元格组件id')
-
-
-// 添加子表行数据
-var row = {}
-utils.set({path:'子表组件id',value:row,type:'addTable'})
-// 删除子表行数据
-utils.set({path:'子表组件id.行号',type:'deleteTable'})
-// 设置子表某一个单元格数据
-utils.set({path:'子表组件id.行号.单元格组件id',value:'xxxxxx'})
-// 去掉子表某一行删除按钮
-utils.set({path:'子表组件id.行号.hasNoDeleteBtn',value:false})
-// 让子表某一行变成不可编辑
-utils.set({path:'子表组件id.行号.disabled',value:true})
-// 让子表某一行除了某一列外不可以编辑
-utils.set({path:'子表组件id.行号.disabled',value:true})
-utils.set({path:'子表组件id.行号.abledList',value:['编辑列组件id']})
-`;
-
 export const formItemPropsScript = `
 // 获取表单是新增还是编辑
 var isUpdate = utils.isUpdate();
@@ -52,10 +6,21 @@ var data = utils.data();
 
 // 数据设置
 // 获取主表数据
-utils.getValue('组件的字段标识');
+let mainValue = utils.getValue('组件的字段标识');
 // 设置主表数据
 setFieldsValue(utils.setValue('组件的字段标识', '设置的值'));
 
+// 获取子表数据
+let childValue = getChildValue('组件的字段标识');
+// 添加子表数据
+subTableList.value = addChildValue(data);
+data格式为[{组件的字段标识1: "value1", {组件的字段标识2: "value2"}]或者{组件的字段标识1: "value1"}
+// 修改子表数据
+subTableList.value = addChildValue('组件的字段标识', '旧value', '新value');
+// 删除子表数据
+subTableList.value = deleteChildValue('组件的字段标识', 'value');
+
+
 // 组件设置
 // 设置组件为隐藏
 formColumns.value = utils.setHide('组件的字段标识', false);
@@ -96,8 +61,8 @@ url:api地址, params:参数
 `;
 
 export function addBreakLines(text: string): string {
-    // 根据换行符分割文本为行
-    const lines = text.split(/\r?\n/);
-    // 在每行后面添加
-    return lines.map((line) => line + '<br />').join('');
-};
+  // 根据换行符分割文本为行
+  const lines = text.split(/\r?\n/);
+  // 在每行后面添加
+  return lines.map((line) => line + '<br />').join('');
+}

src/views/demo/form-design/components/VFormDesign/index.vue

@@ -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>

src/views/demo/form-design/components/VFormDesign/modules/Toolbar.vue

@@ -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;
       }
     }

src/views/demo/form-design/components/VFormDesign/styles/drag.less

@@ -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;
       }
     }
@@ -31,8 +34,10 @@
       box-sizing: border-box;
       min-height: 60px;
       padding: 8px;
+      margin: 5px;
       overflow: hidden;
       transition: all 0.3s;
+      border-radius: 3px;
 
       &:hover {
         background-color: @primary-hover-bg-color;
@@ -44,14 +49,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 +91,7 @@
       .show-key-box {
         // 显示key
         position: absolute;
-        right: 5px;
+        right: 3px;
         bottom: 2px;
         // z-index: 999;
         color: @primary-color;
@@ -130,9 +137,16 @@
       box-sizing: border-box;
       width: 100%;
       padding: 5px;
+      margin: 5px;
       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 +184,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 {

src/views/demo/form-design/components/VFormDesign/styles/variable.less

@@ -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;

src/views/demo/form-design/core/formItemConfig.ts

@@ -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: {

src/views/demo/onlineform/formCall/CallModal.vue

@@ -19,14 +19,17 @@
             @register="registerForm"
             @click="codeClickFunction('beforeSetData', beforeSetData)"
             @change="codeClickFunction('changeDataEvent', changeDataEvent)"
-          />
-          <CardGourp
-            v-if="cardGroupData.length > 0 && cardGroupData[index]"
-            :data="cardGroupData[index]"
-            :formData="cardGourpFormData"
-            :parentValue="cardGroupData[index].field"
-            :callModal="true"
-          />
+          >
+            <template #CardGroup>
+              <CardGourp
+                v-if="cardGroupData.length > 0 && cardGroupData[index]"
+                :data="cardGroupData[index]"
+                :formData="cardGourpFormData"
+                :parentValue="cardGroupData[index].field"
+                :callModal="true"
+              />
+            </template>
+          </BasicForm>
         </a-tab-pane>
       </a-tabs>
     </template>
@@ -123,7 +126,7 @@
   import { v4 as uuidv4 } from 'uuid';
   import FormItem from './ShowFormModal/FormItem/index.vue';
   import CallModalFormItem from './CallModalFormItem/index.vue';
-  import { CardGourp } from '@/components/FormViewer/index.ts'
+  import { CardGourp } from '@/components/FormViewer/index.ts';
   import { subTableStore } from '@/store/modules/subTable';
   import { changeCardStructure, cardNestStructure } from '@/views/demo/onlineform/util.ts';
 
@@ -150,7 +153,7 @@
   });
   const cardGroupData = ref([]);
   const cardGourpFormData = ref({});
-  const cardGroupValues = ref({})
+  const cardGroupValues = ref({});
   const subTableId = ref(null);
   const subTableColumns: any = ref([]);
   const subTableData = ref([]);
@@ -178,18 +181,18 @@
     });
   };
   const getCardGroupLayoutKey = (dataList) => {
-    console.log('dataList',dataList)
+    console.log('dataList', dataList);
     dataList.children.forEach((item?) => {
       if (['CardGroup'].includes(item.component)) {
-        cardGroupValues.value[item.field] = ""
-        item.componentProps.options.forEach(childItem => {
+        cardGroupValues.value[item.field] = '';
+        item.componentProps.options.forEach((childItem) => {
           getCardGroupLayoutKey(childItem);
-        })
-      }else{
-        cardGroupValues.value[item.field] = "";
+        });
+      } else {
+        cardGroupValues.value[item.field] = '';
       }
-    })
-  }
+    });
+  };
   const [registerModal, { setModalProps, closeModal }] = useModalInner((data: any) => {
     cardLayout.value = [];
     subTableDataStore.clearGoupData();
@@ -220,8 +223,9 @@
               cardLayout.value.push(opt);
             }
             if (opt.component === 'CardGroup') {
-              if(cardGroupData.value.length !== index){
-                cardGroupData.value.push(null)
+              opt.slot = 'CardGroup';
+              if (cardGroupData.value.length !== index) {
+                cardGroupData.value.push(null);
               }
               cardGroupData.value.push(opt);
             }
@@ -290,13 +294,17 @@
               //   show: index == 0 ? true : false,
               // });
             }
-
+            // arr.forEach((arrcol) => {
+            //   if (arrcol.component === 'CardGroup') {
+            //     arrcol.label = '';
+            //   }
+            // });
             formColumns.value = arr;
           });
         });
         tabsColumns.value = item.componentProps.options;
         console.log('tabsColumns', tabsColumns.value);
-        console.log('formColumns', formColumns.value);
+        console.log('formColumns1', formColumns.value);
       } else {
         if (item.rules !== undefined) {
           let myString = item.rules[0].pattern;
@@ -319,15 +327,21 @@
             arr.push(item);
           }
         }
+        // arr.forEach((arrcol) => {
+        //   if (arrcol.component === 'CardGroup') {
+        //     arrcol.label = '';
+        //   }
+        // });
         formColumns.value = arr;
         if (item.component === 'Card') {
           cardLayout.value.push(item);
         }
         if (item.component === 'CardGroup') {
-          cardGroupValues.value[item.field] = "";
-          item.componentProps.options.forEach(childItem => {
-            getCardGroupLayoutKey(childItem)
-          })
+          item.slot = 'CardGroup';
+          cardGroupValues.value[item.field] = '';
+          item.componentProps.options.forEach((childItem) => {
+            getCardGroupLayoutKey(childItem);
+          });
           cardGroupData.value.push(item);
         }
         if (item.component === 'Button') {
@@ -401,49 +415,49 @@
           });
         });
       }
-      Object.keys(cardGroupValues.value).forEach(item => {
-        cardGroupValues.value[item] = data.infoUseMainTableData[item]
-      })
-      subTableDataStore.setGroupData(cardGroupValues.value)
+      Object.keys(cardGroupValues.value).forEach((item) => {
+        cardGroupValues.value[item] = data.infoUseMainTableData[item];
+      });
+      subTableDataStore.setGroupData(cardGroupValues.value);
     }
     if (!unref(isUpdate) && unref(isDetail)) {
       getTitle.value = '详情';
-      let isTabs = false
-      data.tab = changeCardStructure(data.tab)
-      data.tab.forEach(itemComponent => {
-        if(itemComponent.component === 'Tabs'){
-          isTabs = true
-          itemComponent.componentProps.options.forEach(itemChild => {
-            itemChild.children.forEach(itemChildComponent => {
-              if(itemChildComponent.component){
-                itemChildComponent.componentProps.disabled = true
+      let isTabs = false;
+      data.tab = changeCardStructure(data.tab);
+      data.tab.forEach((itemComponent) => {
+        if (itemComponent.component === 'Tabs') {
+          isTabs = true;
+          itemComponent.componentProps.options.forEach((itemChild) => {
+            itemChild.children.forEach((itemChildComponent) => {
+              if (itemChildComponent.component) {
+                itemChildComponent.componentProps.disabled = true;
               }
-            })
-          })
-        }else if(itemComponent.component){
-          itemComponent.componentProps.disabled = true
+            });
+          });
+        } else if (itemComponent.component) {
+          itemComponent.componentProps.disabled = true;
         }
-      })
-      if(isTabs){
-        data.tab = data.tab[0]
-        data.tab.componentProps.options = data.tab.componentProps.options.map(item => {
+      });
+      if (isTabs) {
+        data.tab = data.tab[0];
+        data.tab.componentProps.options = data.tab.componentProps.options.map((item) => {
           return {
             value: item.value,
             label: item.label,
-            schemas: item.children
-          }
-        })
-        data.tab.componentProps.options = cardNestStructure(data.tab.componentProps.options)
-        data.tab.componentProps.options = data.tab.componentProps.options.map(item => {
+            schemas: item.children,
+          };
+        });
+        data.tab.componentProps.options = cardNestStructure(data.tab.componentProps.options);
+        data.tab.componentProps.options = data.tab.componentProps.options.map((item) => {
           return {
             value: item.value,
             label: item.label,
-            children: item.schemas
-          }
-        })
-        tabsColumns.value = data.tab.componentProps.options
-      }else{
-        data.tab = cardNestStructure(data.tab)
+            children: item.schemas,
+          };
+        });
+        tabsColumns.value = data.tab.componentProps.options;
+      } else {
+        data.tab = cardNestStructure(data.tab);
       }
       if (Object.keys(cardValues.value).length > 0) {
         Object.keys(cardValues.value).forEach((cardItem) => {
@@ -461,10 +475,10 @@
           });
         });
       }
-      Object.keys(cardGroupValues.value).forEach(item => {
-        cardGroupValues.value[item] = data.infoUseMainTableData[item]
-      })
-      subTableDataStore.setGroupData(cardGroupValues.value)
+      Object.keys(cardGroupValues.value).forEach((item) => {
+        cardGroupValues.value[item] = data.infoUseMainTableData[item];
+      });
+      subTableDataStore.setGroupData(cardGroupValues.value);
     }
     formModalVisible.value = true;
     primaryQuery.value = data.query;
@@ -515,14 +529,16 @@
         columns.push(val);
       });
     });
-    const obj = await validate();
     setTimeout(() => {
       updateSchema(columns);
       resetFields();
     }, 100);
-    setTimeout(() => {
-      setFieldsValue(obj);
-    }, 500);
+    if(!isDetail.value){
+      const obj = await validate();
+      setTimeout(() => {
+        setFieldsValue(obj);
+      }, 500);
+    }
   }
   function generateUniqueDigits(length: number): number[] {
     const digits = new Set<number>();
@@ -600,7 +616,7 @@
           }
         });
       }
-      query = {...query, ...subTableDataStore.getGroupData}
+      query = { ...query, ...subTableDataStore.getGroupData };
       params.data = JSON.stringify(query);
       console.log('query222', query);
       console.log('params222', params);

src/views/demo/onlineform/formCall/CreateFlow.vue

@@ -228,7 +228,10 @@
       formBoxRef.value
         .getForm()
         .then(async (res) => {
-          if (res) {
+          console.log(res);
+          if (!res) {
+            createMessage.error('请检查表单必填项');
+          } else {
             if (!props.isUpdate) {
               res[designerData.formCurrentNode.formRelationId] = processId;
               querys.pkeyValue = processId;
@@ -254,8 +257,6 @@
             if (formValue) {
               handleCreateFlow(processId, querys.pkeyValue);
             }
-          } else {
-            createMessage.error('请检查表单必填项');
           }
         })
         .catch((error) => {

src/views/demo/onlineform/formCall/index.vue

@@ -458,8 +458,7 @@
         if (rows.length == 0) {
           return createMessage.warn('请选择一条数据进行编辑');
         }
-        // console.log('rowsrows',formConfig,rows);
-
+        console.log('rowsrows', rows);
         btnList.value.forEach((element) => {
           if (element.prop === 'Edit' && element.isWFlow) {
             flowCode.value = element.wFlowCode;
@@ -525,7 +524,7 @@
         if (rows.length == 0) {
           return createMessage.warn('请选择一条数据查看详情');
         }
-        console.log("DetailsRow",formConfig,rows);
+        console.log('DetailsRow', rows);
         let toProps = {
           isDetail: true,
           isUpdate: false,
@@ -542,12 +541,33 @@
           openShowFormModal.value = true;
 
           // 根据ids获取图斑
-
-          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('当前数据没有图斑！');
           }
         } else {
           openModal(true, toProps);
@@ -562,6 +582,7 @@
     }
   };
 
+
   const chooseLayer = ref<string>("")
   const geomfield = ref<string>("");
   function findValue(obj, targetKey) {

src/views/demo/onlineform/formCall/utils.ts

@@ -141,12 +141,51 @@ export const utils = {
   },
   // 获取子表数据
   getChildValue: (field: any): any => {
-    return c_record[field];
+    if (field == '') {
+      return c_subTableList;
+    } else {
+      const res: any = [];
+      c_subTableList.forEach((v) => {
+        res.push(v[field]);
+      });
+      return res;
+    }
   },
-  // 设置子表数据
-  setChildValue: (field: any, value: any): any => {
-    c_record[field] = value;
-    return c_record;
+  // 添加子表数据
+  addChildValue: (data: any): any => {
+    if (typeof data == 'object') {
+      if (Array.isArray(data)) {
+        data.forEach((d) => {
+          c_subTableList.push(d);
+        });
+      } else {
+        c_subTableList.push(data);
+      }
+    }
+    return c_subTableList;
+  },
+  // 修改子表数据
+  updateChildValue: (field: string, oldValue: string, newValue: string): any => {
+    const c_subTableList_temp: any = [];
+    c_subTableList.forEach((sub) => {
+      if (sub[field] == oldValue) {
+        sub[field] = newValue;
+      }
+      c_subTableList_temp.push(sub);
+    });
+    c_subTableList = c_subTableList_temp;
+    return c_subTableList;
+  },
+  // 删除子表数据
+  deleteChildValue: (field: string, value: string): any => {
+    const c_subTableList_temp: any = [];
+    c_subTableList.forEach((sub) => {
+      if (sub[field] != value) {
+        c_subTableList_temp.push(sub);
+      }
+    });
+    c_subTableList = c_subTableList_temp;
+    return c_subTableList;
   },
   // 组件-----------------------------
   // 获取组件

src/views/demo/onlineform/formModule/modalForm.vue

@@ -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,95 @@
   });
   // 规则
   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) {
+              if (error) {
+                emit('set-steps-current', false);
+              }
+            }
+          } else {
+            callback(new Error('请输入编号'));
+          }
+        },
+        trigger: 'blur',
+      },
+    ],
+    name: [
+      {
+        required: true,
+        message: '请输入名称',
+        trigger: 'blur',
+      },
+    ],
+    icon: [
+      {
+        component: 'IconPicker',
+        required: true,
+        message: '请选择图标',
+        trigger: 'blur',
+      },
+    ],
+    formCodeName: [
+      {
+        required: true,
+        message: '请选择表单版本',
+        trigger: 'blur',
+      },
+    ],
+    formVerison: [
+      {
+        required: true,
+        message: '请选择表单版本',
+        trigger: 'blur',
+      },
+    ],
+    pmoduleId: [
+      {
+        required: true,
+        message: '请选择上级',
+        trigger: 'blur',
+      },
+    ],
     enabledMark: [{ required: true }],
   };
 
@@ -156,24 +240,26 @@
       }
     },
   );
+
   // 监视props
   watch(
     () => props.isNextSteps,
-    () => {
-      // 基本配置页数据是否填完整
+    async () => {
       if (props.isNextSteps) {
-        let checkdata = formData.value;
-        if (
-          checkdata.code === '' ||
-          checkdata.formCode === '' ||
-          checkdata.name === '' ||
-          checkdata.formVerison === '' ||
-          checkdata.pmoduleId === ''
-        ) {
-          createMessage.error(t('数据未填完整'));
-          emit('set-steps-current', false);
-        } else {
-          emit('set-steps-current', true);
+        // 判断数据表字段重复
+        if (formModuleRef) {
+          try {
+            const valid = await formModuleRef.validate();
+            if (valid.errorFields) {
+              emit('set-steps-current', false);
+            } else {
+              emit('set-steps-current', true);
+            }
+          } catch (error) {
+            if (error) {
+              emit('set-steps-current', false);
+            }
+          }
         }
       }
     },

src/views/demo/onlineform/formdesign/FormModal.vue

@@ -78,6 +78,7 @@
     getOutKeyList,
   } from '@/api/formdesign/index';
   import { functionGetForm } from '@/api/demo/formScheme';
+  import { cardNestStructure, changeCardStructure } from '@/views/demo/onlineform/util.ts'
 
   defineOptions({ name: 'FormModal' });
 
@@ -118,66 +119,6 @@
     }
     return arr;
   }
-  const changeCardStructure = (data) => {
-    let result = [];
-    if (data && data.length > 0) {
-      data.forEach((item) => {
-        if (item.component === 'Tabs') {
-          item.componentProps.options = changeCardStructure(item.componentProps.options);
-        } else if (item.component === 'CardGroup') {
-          item.componentProps.options = changeCardStructure(item.componentProps.options);
-          item.componentProps.options.forEach((childItem) => {
-            if (childItem.pfield) {
-              result.push(childItem);
-            } else {
-              result.push({ ...childItem, ptype: 'card', pfield: item.field });
-            }
-          });
-          item.componentProps.options = [];
-        } else if (item.component === 'Grid' && item.label === '栅格布局') {
-          item.columns = changeCardStructure(item.columns);
-          item.columns.forEach((childItem) => {
-            childItem.children.forEach((col) => {
-              result.push({ ...col, ptype: 'gridlayout', pfield: item.field });
-            });
-          });
-        } else if (item.children && !item.field) {
-          item.children = changeCardStructure(item.children);
-        } else if (item.children && item.field.indexOf('use_card') === -1) {
-          item.children = changeCardStructure(item.children);
-          item.children = [];
-        } else {
-          if (['Card'].includes(item.component)) {
-            item.columns[0].children = changeCardStructure(item.columns[0].children);
-            if (item.component === 'Card' && item.columns[0].children) {
-              item.columns[0].children.forEach((childItem) => {
-                if (childItem.pfield) {
-                  result.push(childItem);
-                } else {
-                  result.push({ ...childItem, ptype: 'card', pfield: item.field });
-                }
-              });
-              item.columns[0].children = [];
-            }
-          } else if (item.field && item.field.indexOf('use_card') !== -1) {
-            item.children = changeCardStructure(item.children);
-            item.children.forEach((childItem) => {
-              if (childItem.pfield) {
-                result.push(childItem);
-              } else {
-                result.push({ ...childItem, ptype: 'card', pfield: item.field });
-              }
-            });
-            item.children = [];
-          }
-        }
-        result.push(item);
-      });
-      return result;
-    } else {
-      return data;
-    }
-  };
   async function designSendGrandson(value) {
     let designTab = JSON.parse(value);
     let schems = saveFormDatas.value.scheme.scheme
@@ -525,53 +466,6 @@
       saveFormDatas.value.scheme.type = 1;
     }
   }
-
-  const cardNestStructure = (data) => {
-    let childList = {};
-    let result = [];
-    data.forEach((item) => {
-      if (item.schemas) {
-        item.schemas = cardNestStructure(item.schemas);
-        result.push(item);
-      }else if(item.component === 'Tabs'){
-        item.componentProps.options = cardNestStructure(item.componentProps.options);
-        result.push(item);
-      }else if(!item.ptype && Object.keys(item).includes('children')){
-        item.children = cardNestStructure(item.children)
-        result.push(item);
-      } else if (item.ptype) {
-        if (Object.keys(item).includes('children')) {
-          item.children = childList[item.field] || [];
-        }
-        if (item.component === 'CardGroup' && Object.keys(item).includes('componentProps')) {
-          item.componentProps.options = childList[item.field] || [];
-        }
-        let pushItem = {};
-        Object.keys(item).forEach((key) => {
-          if (key !== 'ptype' && key !== 'pfield') {
-            pushItem[key] = item[key];
-          }
-        });
-        if (childList[item.pfield]) {
-          childList[item.pfield].push(pushItem);
-        } else {
-          childList[item.pfield] = [pushItem];
-        }
-      } else if (item.component === 'CardGroup') {
-        item.componentProps.options = childList[item.field] || [];
-        result.push(item);
-      } else if (item.component === 'Card') {
-        item.columns[0].children = childList[item.field] || [];
-        result.push(item);
-      } else if (item.field &&item.field.indexOf('use_card') !== -1) {
-        item.children = childList[item.field] || [];
-        result.push(item);
-      } else {
-        result.push(item);
-      }
-    });
-    return result;
-  };
   // 自动建表返回后，保存数据
   function automaticFormDataBack(data) {
     if (isStageClick.value && stepsCurrent.value === 0) {

src/views/demo/onlineform/formdesign/modal/AutomaticModal.vue

@@ -9,12 +9,12 @@
     :showCancelBtn="true"
     :showOkBtn="true"
     @ok="submit"
-    @cancel="closeModal()"
+    @cancel="closeModalDeleteGrid"
     @visible-change="
       () => {
         db_list.value = [];
         chlidTableName = '';
-        closeModal();
+        isCloseSubmit.value = false;
       }
     "
   >
@@ -381,6 +381,10 @@
               else if (item.component == 'Card') {
                 // 卡片布局的组件会自动进入主组件表内
               }
+              // 栅格布局
+              else if (item.component == 'Grid') {
+                // 栅格布局的组件会进入主组件表内
+              }
             } else {
               // 普通组件
               let temp = cloneDeep(dbColumnInfo);
@@ -401,9 +405,19 @@
               item.componentProps.dataTable = db_temp.tableName;
               item.componentProps.fieldName = temp.dbColumnName;
 
-              db_temp.dbColumnInfoList.push(temp);
+              // 主表不添加重复的普通组件（编辑情况下的栅格）
+              let gridFlag = true;
+              db_temp.dbColumnInfoList.forEach((dbColumn) => {
+                if (dbColumn.dbColumnName == temp.dbColumnName) {
+                  gridFlag = false;
+                }
+              });
+              if (gridFlag) {
+                db_temp.dbColumnInfoList.push(temp);
+              }
             }
           }
+          item.csType = 'string';
           schemas[index] = item;
         });
         if (gridType == 'main') {
@@ -413,7 +427,16 @@
         }
       });
       if (gridType == 'main') {
-        db_list.value.unshift(db_temp);
+        // 筛掉重复项
+        let dbFlag = true;
+        db_list.value.forEach((db) => {
+          if (db.tableName == db_temp.tableName) {
+            dbFlag = false;
+          }
+        });
+        if (dbFlag) {
+          db_list.value.unshift(db_temp);
+        }
       }
     }
 
@@ -668,6 +691,7 @@
               db_temp.dbColumnInfoList.push(temp);
             }
           }
+          item.csType = 'csType';
           schemas[index] = item;
         });
         if (gridType == 'chlid') {
@@ -677,7 +701,16 @@
         }
       });
       if (gridType == 'chlid') {
-        db_list.value.push(db_temp);
+        // 筛掉重复项
+        let dbFlag = true;
+        db_list.value.forEach((db) => {
+          if (db.tableName == db_temp.tableName) {
+            dbFlag = false;
+          }
+        });
+        if (dbFlag) {
+          db_list.value.push(db_temp);
+        }
       }
     }
     return scheme;
@@ -745,6 +778,7 @@
         }
       });
     }
+    // 把弹窗的信息写入saveFormDatas
     getFromAndTable();
   }
 
@@ -790,6 +824,8 @@
     saveFormDatas.scheme.scheme = JSON.stringify(schems);
   }
 
+  // submit提交关闭的
+  const isCloseSubmit = ref(false);
   // 把弹窗的信息写入saveFormDatas
   function getFromAndTable() {
     let schems = JSON.parse(saveFormDatas.scheme.scheme);
@@ -802,7 +838,8 @@
     });
     saveFormDatas.scheme.scheme = JSON.stringify(schems);
     emit('automatic-modal-submitsuccess', saveFormDatas);
-    closeModal();
+    isCloseSubmit.value = true;
+    closeModalDeleteGrid();
   }
 
   // 表名变化后修改表单里的表名
@@ -816,6 +853,32 @@
     });
   }
 
+  // 非提交关闭窗口时，栅格布局清除取出来的表单组件删除掉
+  function closeModalDeleteGrid() {
+    // 非提交
+    if (!isCloseSubmit.value) {
+      let scheme_close = JSON.parse(saveFormDatas.scheme.scheme);
+      let tabList_close = scheme_close.formInfo.tabList;
+      // tabList遍历
+      tabList_close.forEach((list, list_index) => {
+        let schemas_temp: any = [];
+        let schemas_close = list.schemas;
+        // schemas遍历
+        schemas_close.forEach((sch) => {
+          if (!sch.ptype || sch.ptype != 'gridlayout') {
+            // schemas添加
+            schemas_temp.push(sch);
+          }
+        });
+        tabList_close[list_index].schemas = schemas_temp;
+      });
+      // scheme赋值
+      scheme_close.formInfo.tabList = tabList_close;
+      saveFormDatas.scheme.scheme = JSON.stringify(scheme_close);
+    }
+    closeModal();
+  }
+
   // 数据格式（默认varchar）变化后修改字段长度
   function isBoolChangeLength(record: Recordable) {
     if (record.dataType == 'bool') {

src/views/demo/onlineform/util.ts

@@ -5,12 +5,6 @@ export const cardNestStructure = (data) => {
     if(item.schemas){
       item.schemas = cardNestStructure(item.schemas)
       result.push(item)
-    }else if(item.component === 'Tabs'){
-      item.componentProps.options = cardNestStructure(item.componentProps.options);
-      result.push(item);
-    }else if(!item.ptype && Object.keys(item).includes('children')){
-      item.children = cardNestStructure(item.children)
-      result.push(item);
     }else if(item.ptype){
       if(Object.keys(item).includes('children')){
         item.children = childList[item.field] || []

src/views/demo/system/role/ModulesModal.vue

@@ -95,6 +95,8 @@
       unref(asyncBtnExpandTreeRef)?.expandAll(true);
     });
   }
+  let moduleIds = ref([]);
+  let elementIds = ref([]);
   async function getMenusForRol(id) {
     var menusForRol = await loadForRole({
       roleId: id,
@@ -107,9 +109,11 @@
     unref(asyncExpandTreeRef)?.setCheckedKeys(menusForRol.moduleIds);
     checkData.moduleIds = menusForRol.moduleIds;
     checkData.elementIds = menusForRol.elementIds;
+    unref(asyncBtnExpandTreeRef)?.setCheckedKeys(checkData.elementIds);
+    moduleIds.value = menusForRol.moduleIds;
+    elementIds.value = menusForRol.elementIds;
   }
-  let moduleIds = ref([]);
-  let elementIds = ref([]);
+
   function handleSelect(checkedKeys, e: { checked: boolean; checkedNodes; node; event }) {
     const list = e.checkedNodes;
     moduleIds.value = [];
@@ -143,6 +147,9 @@
     try {
       if (step.value == 1) {
         step.value = 2;
+        setTimeout(() => {
+          unref(asyncBtnExpandTreeRef)?.setCheckedKeys(checkData.elementIds);
+        }, 10);
       } else {
         var query = {
           roleId: rowId.value,

src/views/demo/workflow/create/preview.vue

@@ -16,7 +16,7 @@
         >关闭
       </a-button>
     </div>
-    <a-tabs v-model:activeKey="activeName" @change="changeActive">
+    <a-tabs v-model:activeKey="activeName" @change="changeActive" type="card">
       <a-tab-pane
         key="form"
         :tab="

src/views/demo/workflow/scheme/util.ts

@@ -0,0 +1,126 @@
+export 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,
+      });
+    }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}
+}
+const cardComponentChild = (data, result) => {
+  data.forEach((optionsElement) => {
+    optionsElement.children.forEach((childrenElement) => {
+      let obj: any = childrenElement;
+      obj.required = childrenElement.itemProps.required;
+      obj.disabled = true;
+      obj.ifShow = true;
+      obj.label = `${optionsElement.label} - ${childrenElement.label}`;
+      obj.fieldName = childrenElement.componentProps.fieldName;
+      result.push(obj);
+      if (childrenElement.component === 'CardGroup') {
+        result = cardComponentChild(childrenElement.componentProps.options, result);
+      }
+    });
+  });
+  return result;
+};

src/views/demo/workflow/task/process/audit.vue

@@ -7,13 +7,21 @@
       <a-button type="primary" @click="closePage" class="ml-2" danger>关闭 </a-button>
     </div>
 
-    <div :class="mapConfig?.isShowMap?'form-container':''">
+    <div :class="mapConfig?.isShowMap ? 'form-container' : ''">
       <a-layout>
         <a-layout>
-          <a-layout-content> 
+          <a-layout-content>
             <a-tabs v-model:activeKey="activeName" @change="changeActive" type="card">
-              <a-tab-pane key="form" tab="表单信息" v-if="formVisble">
-                <div :class="mapConfig?.isShowMap?'form-container':''">
+              <a-tab-pane
+                key="form"
+                :tab="
+                  designerData.formCurrentNode.formTitle
+                    ? designerData.formCurrentNode.formTitle
+                    : '表单信息'
+                "
+                v-if="formVisble"
+              >
+                <div :class="mapConfig?.isShowMap ? 'form-container' : ''">
                   <FormViewer
                     ref="formBoxRef"
                     :formConfig="formConfig"
@@ -49,31 +57,33 @@
                 </div>
               </a-tab-pane>
               <a-tab-pane key="record" tab="流转记录" force-render>
-                <a-timeline>
-                  <a-timeline-item
-                    v-for="(item, index) in designerData.logs"
-                    :key="index"
-                    :color="item.type"
-                  >
-                    <div class="title">{{ item.time }}</div>
-                    <a-card hoverable size="small">
-                      <div class="type-title">{{ item.name }}</div>
-                      <div class="content">
-                        <span
-                          class="link"
-                          v-for="(userName, index2) in item.userNames"
-                          :key="index2"
-                          >{{ userName }}</span
-                        >
-                        {{ item.des }}
-                      </div>
-                    </a-card>
-                  </a-timeline-item>
-                </a-timeline>
+                <div :style="'padding:10px 0 40px 0;overflow:auto; height:' + designerData.height">
+                  <a-timeline>
+                    <a-timeline-item
+                      v-for="(item, index) in designerData.logs"
+                      :key="index"
+                      :color="item.type"
+                    >
+                      <div class="title">{{ item.time }}</div>
+                      <a-card hoverable size="small">
+                        <div class="type-title">{{ item.name }}</div>
+                        <div class="content">
+                          <span
+                            class="link"
+                            v-for="(userName, index2) in item.userNames"
+                            :key="index2"
+                            >{{ userName }}</span
+                          >
+                          {{ item.des }}
+                        </div>
+                      </a-card>
+                    </a-timeline-item>
+                  </a-timeline>
+                </div>
               </a-tab-pane>
             </a-tabs>
           </a-layout-content>
-          <a-layout-footer :style="footerStyle" > 
+          <a-layout-footer :style="footerStyle">
             <a-tabs v-if="props.isRead == 0" v-model:activeKey="auditName">
               <a-tab-pane key="audit" :tab="auditTitleVal">
                 <div class="approval-column">
@@ -123,8 +133,6 @@
       />
     </div>
 
-    
-
     <!-- 节点记录信息 -->
     <div class="info-box" v-if="designerData.nodeLogs.length > 0">
       <a-drawer v-model:open="infoOpen" class="custom-class" title="记录信息" placement="right">
@@ -235,7 +243,6 @@
     des: [{ required: true, message: '请填写审批意见', trigger: 'blur' }],
   });
 
-  
   if (props.type == 4) {
     rules.value = {};
   }
@@ -257,7 +264,7 @@
   const designerData: designerDataType = reactive({
     loading: false,
     xmlString: '',
-    height: document.documentElement.clientHeight - 200.5 + 'px;',
+    height: document.documentElement.clientHeight - 300.5 + 'px;',
     midVisible: false,
     isCustmerTitle: false,
     nodeUsers: [],
@@ -290,19 +297,19 @@
   const auditName = ref('audit');
   const auditTitleVal = ref('审批栏');
   const auditNameVal = ref('审批意见');
-  const rejectOpen = ref(false);      
+  const rejectOpen = ref(false);
   const footerStyle = ref({
-        height:"220px",
-        width:mapConfig.value.isShowMap ? '100%':'60%',
-        overFlow:"auto",
-        color: '#fff',
-        backgroundColor: '#ffffff',
-        zIndex:"9999999999",
-        padding:"0px 100px",
-        position:"fixed",
-        bottom:"0px",
-        left:"0px"
-      })
+    height: '220px',
+    width: mapConfig.value.isShowMap ? '100%' : '60%',
+    overFlow: 'auto',
+    color: '#fff',
+    backgroundColor: '#ffffff',
+    zIndex: '9999999999',
+    padding: '0px 100px',
+    position: 'fixed',
+    bottom: '0px',
+    left: '0px',
+  });
 
   function changeActive(activeKey) {
     if (activeKey == 'flow') {
@@ -350,14 +357,14 @@
       currentNode = wfData.find((t) => t.type == 'bpmn:StartEvent');
       mapConfig.value = currentNode.mapConfig;
 
-      footerStyle.value.width = mapConfig.value?.isShowMap ? "60%":"100%"
-      if(mapConfig.value?.isShowMap){}
-
+      footerStyle.value.width = mapConfig.value?.isShowMap ? '60%' : '100%';
+      if (mapConfig.value?.isShowMap) {
+      }
     } else {
       currentNode = auditNode;
       let currentMapNode = wfData.find((t) => t.type == 'bpmn:StartEvent');
       mapConfig.value = currentMapNode.mapConfig;
-      footerStyle.value.width = mapConfig.value?.isShowMap ? "60%":"100%"
+      footerStyle.value.width = mapConfig.value?.isShowMap ? '60%' : '100%';
     }
     if (currentNode.authFields.length > 0) {
       formVisble.value = true;
@@ -470,7 +477,7 @@
     for (let key in nodeMap) {
       nodeMap[key] = nodeMap[key].filter((t: { userIds: string | any[] }) => t.userIds.length > 0);
     }
-
+    logs.reverse();
     logs.forEach(
       (log: {
         unitId: string;
@@ -754,13 +761,11 @@
     }
   }
 
-
-
-  async function handlerShowGeomtrys(currentNode){
-    let info = currentNode.authFields?.find((item,index)=>{
-      return item.component == "MapGeom"
-    })
-    let layer:string="";
+  async function handlerShowGeomtrys(currentNode) {
+    let info = currentNode.authFields?.find((item, index) => {
+      return item.component == 'MapGeom';
+    });
+    let layer: string = '';
 
     // let layer:string="drone_shp_data";
     if (info) {
@@ -772,7 +777,7 @@
     }
     let geomfiledValue = info.field.toLowerCase();
 
-    let gids = "";
+    let gids = '';
 
     try {
       await formBoxRef.value.getForm().then((res) => {
@@ -818,9 +823,7 @@
     }
   }
 
-
-  function onMapboxLoad(){
-
+  function onMapboxLoad() {
     handlerShowGeomtrys(designerData.formCurrentNode);
   }
   // 驳回到指定节点

src/views/demo/workflow/task/process/look.vue

@@ -57,27 +57,29 @@
               </div>
             </a-tab-pane>
             <a-tab-pane key="record" tab="流转记录" force-render>
-              <a-timeline>
-                <a-timeline-item
-                  v-for="(item, index) in designerData.logs"
-                  :key="index"
-                  :color="item.type"
-                >
-                  <div class="title">{{ item.time }}</div>
-                  <a-card hoverable size="small">
-                    <div class="type-title">{{ item.name }}</div>
-                    <div class="content">
-                      <span
-                        class="link"
-                        v-for="(userName, index2) in item.userNames"
-                        :key="index2"
-                        >{{ userName }}</span
-                      >
-                      {{ item.des }}
-                    </div>
-                  </a-card>
-                </a-timeline-item>
-              </a-timeline>
+              <div :style="'padding:10px 0 40px 0;overflow:auto; height:' + designerData.height">
+                <a-timeline>
+                  <a-timeline-item
+                    v-for="(item, index) in designerData.logs"
+                    :key="index"
+                    :color="item.type"
+                  >
+                    <div class="title">{{ item.time }}</div>
+                    <a-card hoverable size="small">
+                      <div class="type-title">{{ item.name }}</div>
+                      <div class="content">
+                        <span
+                          class="link"
+                          v-for="(userName, index2) in item.userNames"
+                          :key="index2"
+                          >{{ userName }}</span
+                        >
+                        {{ item.des }}
+                      </div>
+                    </a-card>
+                  </a-timeline-item>
+                </a-timeline>
+              </div>
             </a-tab-pane>
           </a-tabs>
         </a-layout-content>
@@ -173,7 +175,7 @@
   const designerData: designerDataType = reactive({
     loading: false,
     xmlString: '',
-    height: document.documentElement.clientHeight - 200.5 + 'px;',
+    height: document.documentElement.clientHeight - 300.5 + 'px;',
     midVisible: false,
     isCustmerTitle: false,
     nodeUsers: [],
@@ -343,7 +345,7 @@
     for (let key in nodeMap) {
       nodeMap[key] = nodeMap[key].filter((t: { userIds: string | any[] }) => t.userIds.length > 0);
     }
-
+    logs.reverse();
     logs.forEach(
       (log: {
         unitId: string;