【数据统计】title修改

src/api/demo/formScheme.ts

@@ -16,6 +16,7 @@ import {
   CodeTable_GetForms_Responses_Model,
   getTableList_Model,
   CodeTable_ImportTable_Responses_Model,
+  ShpLayerSourceLoadPage_Model,
 } from './model/formSchemeModel';
 import { defHttp } from '@/utils/http/axios';
 
@@ -76,6 +77,10 @@ enum Api {
   AddTable = '/api/DbTable/AddTable',
   // 创建字段
   AddColumn = '/api/DbTable/AddColumn',
+  // 地图组件-图层列表
+  ShpLayerSourceLoadPage = '/api/ShpLayerSource/LoadPage',
+  // 地图组件-图层列表-图层选择后-查找字段名
+  GetTableAndViewColumnList = '/api/CodeTable/GetTableAndViewColumnList',
 }
 
 // 字典 FormSort
@@ -258,6 +263,17 @@ export function AddTable(params) {
     isPrimarykey: 0,
     decimalDigits: 0,
   });
+  params.dbColumnInfoList.push({
+    tableName: params.tableName,
+    dbColumnName: 'geomLabelField',
+    dataType: 'varchar',
+    length: 200,
+    columnDescription: '地图组件-标注字段',
+    isNullable: 0,
+    isIdentity: 0,
+    isPrimarykey: 0,
+    decimalDigits: 0,
+  });
   return defHttp.post({
     url: Api.AddTable + '?dbCode=' + params.dbCode,
     params,
@@ -265,7 +281,6 @@ export function AddTable(params) {
 }
 
 // 创建字段
-
 export function AddColumn(params) {
   return defHttp.post({
     url: Api.AddColumn,
@@ -273,6 +288,21 @@ export function AddColumn(params) {
   });
 }
 
+// 地图组件-图层列表
+export function ShpLayerSourceLoadPage() {
+  return defHttp.get<ShpLayerSourceLoadPage_Model>({
+    url: Api.ShpLayerSourceLoadPage,
+  });
+}
+
+// 地图组件-图层列表-图层选择后-查找字段名
+export function GetTableAndViewColumnList(params) {
+  return defHttp.get<CodeTable_GetForms_Responses_Model>({
+    url: Api.GetTableAndViewColumnList,
+    params,
+  });
+}
+
 // 获取表单分页数据 【先不写】
 export function functionGetFormDataPage(params: AccountParams) {
   return defHttp.post<FromSchemandAndInfoModel>({

src/api/demo/model/formSchemeModel.ts

@@ -220,3 +220,16 @@ export type CodeTable_GetForms_Responses_Model = {
   db_codetable: db_codetable_Model;
   db_codecolumnsList: db_codecolumnsList_Model;
 };
+
+// 地图组件-图层列表
+export interface ShpLayerSourceLoadPage {
+  id: string;
+  name: string;
+  description: string;
+  type: number;
+  image: string;
+  createTime: string;
+  createId: string;
+  relationTable: string;
+}
+export type ShpLayerSourceLoadPage_Model = BasicFetchResult<ShpLayerSourceLoadPage>;

src/components/MapboxMaps/MapComponent.vue

@@ -5,34 +5,35 @@
     <!-- 图层控制 -->
     <div class="layer-control-center">
       <p v-for="(item, index) in props.layers">
-                <a-checkbox  v-model:checked="item.checked"  @change="handlerCheckboxChange(item)" >{{item.name}}</a-checkbox>
+        <a-checkbox v-model:checked="item.checked" @change="handlerCheckboxChange(item)">{{
+          item.name
+        }}</a-checkbox>
       </p>
     </div>
 
     <!-- 绘图控制 -->
     <div class="draw-control-center" v-show="drawing">
-            <div class="draw-btn" @click="handlerCancleDraw">
+      <div class="draw-btn" @click="handlerCancleDraw"> 取消 </div>
-                取消
+      <div class="draw-btn" @click="handlerDrawComplete"> 保存 </div>
-            </div>
-            <div class="draw-btn"  @click="handlerDrawComplete">
-                保存
-            </div>
-            
     </div>
   </div>
 </template>
 
-
-    
 <script lang="ts" setup>
-
+  import {
-
+    onMounted,
-    import { onMounted, onUnmounted, defineProps,defineEmits, reactive, ref,defineExpose } from 'vue';
+    onUnmounted,
+    defineProps,
+    defineEmits,
+    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 MapboxDraw from '@mapbox/mapbox-gl-draw';
 
   import U from 'mapbox-gl-utils';
   import 'mapbox-gl/dist/mapbox-gl.css';
@@ -47,22 +48,21 @@
     SnapLineMode,
     SnapModeDrawStyles,
     SnapDirectSelect,
-    } from "mapbox-gl-draw-snap-mode";
+  } from 'mapbox-gl-draw-snap-mode';
 
-    import {customDrawStyles} from './Styles/Styles'
+  import { customDrawStyles } from './Styles/Styles';
   import Drawtool from '@/views/datamaintenance/components/drawtool.vue';
-    import {WktToGeojson,GeojsonToWkt} from './src/WktGeojsonTransform'
+  import { WktToGeojson, GeojsonToWkt } from './src/WktGeojsonTransform';
   import { features } from 'process';
 
-
   const openModal = ref(false);
-    const insertShpModal = ref(false)
+  const insertShpModal = ref(false);
   const changeOpenModal = (value) => {
-    openModal.value = value
+    openModal.value = value;
-    }
+  };
   const changeOpenInsertShpModal = (value) => {
-    insertShpModal.value = value
+    insertShpModal.value = value;
-    }
+  };
 
   // map参数类型
   interface MapboxOptionsInterface {
@@ -70,8 +70,7 @@ import { features } from 'process';
     control: DrawingType[];
   }
 
-    const props = defineProps(
+  const props = defineProps({
-        {
     layers: {
       type: Array,
       default: [],
@@ -82,14 +81,13 @@ import { features } from 'process';
     },
     type: {
       type: String,
-                default:"", 
+      default: '',
     },
     feature: {
       type: String,
-                default:"", 
+      default: '',
-            }
+    },
-        }
+  });
-    );
 
   let nextMapControl: Array<any> = reactive([]);
   nextMapControl = props.control
@@ -98,7 +96,6 @@ import { features } from 'process';
       })
     : [];
 
-
   // 定义地图容器
   let map: Map;
   let drawTool: any;
@@ -107,16 +104,16 @@ import { features } from 'process';
   let selectFeature: Object = {};
   let mp: any = null;
   let geojson = reactive({
-        geojson:{}
+    geojson: {},
   });
-    let drawing = ref(false)
+  let drawing = ref(false);
 
   let drawGeojson = reactive({
     geojson: {
-          type: "FeatureCollection",
+      type: 'FeatureCollection',
       features: [],
-        }
+    },
-    })
+  });
 
   const { createConfirm, createMessage } = useMessage();
 
@@ -128,37 +125,35 @@ import { features } from 'process';
     mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
     map = initMap();
     map.on('load', () => {
-
       // 初始化绘图空间
       // handlerInitDrawTool(null);
 
-        map.on("click",(e)=>{
+      map.on('click', (e) => {
         // handlerPreviewFeatureInfo(e);
-            clickPoisition = e.lngLat
+        clickPoisition = e.lngLat;
-        })
+      });
 
-        map.on("draw.selectionchange",(e)=>{
+      map.on('draw.selectionchange', (e) => {
         // handlerCopyToTargetLayer(e);
-        })
+      });
-        emit('mapOnLoad', map)
+      emit('mapOnLoad', map);
 
       // 设置绘图监听事件
-        map.on("draw.create", function (e) {
+      map.on('draw.create', function (e) {
-            drawGeojson.geojson.features = e.features 
+        drawGeojson.geojson.features = e.features;
-            handlerDealFeature(e.features[0])
+        handlerDealFeature(e.features[0]);
       });
 
-        map.on("draw.update", function (e) {
+      map.on('draw.update', function (e) {
-            drawGeojson.geojson = e.features
+        drawGeojson.geojson = e.features;
-            handlerDealFeature(e.features[0])
+        handlerDealFeature(e.features[0]);
       });
 
-        map.on("draw.delete",function(e){
+      map.on('draw.delete', function (e) {
         handlerDeleteFeature(e.features[0]);
-        })
+      });
 
       window.handlerCopyFeature = handlerCopyFeature;
-
     });
   });
   // 销毁地图
@@ -167,37 +162,35 @@ import { features } from 'process';
     map ? map.remove() : null;
   });
 
-
   // 数据绘制完成判断
   const handlerDealFeature = (feature) => {
     let existFeature = geojson.geojson.features.find((item, index) => {
-            return item.id == feature.id
+      return item.id == feature.id;
-        })
+    });
 
-        if(existFeature){ // 如果查找到了 则替换数据
+    if (existFeature) {
+      // 如果查找到了 则替换数据
       for (let i = 0; i < geojson.geojson.features.length; i++) {
         if (geojson.geojson.features[i].id == feature.id) {
-                    geojson.geojson.features[i] = feature
+          geojson.geojson.features[i] = feature;
         }
       }
-        }else{ // 如果没找到数据 则添加到数组
+    } else {
+      // 如果没找到数据 则添加到数组
       geojson.geojson.features.push(feature);
     }
-        console.log("geojson.geojson",geojson.geojson);
+    // handlerDrawComplete();
-    }
+  };
 
   // 删除数据
   const handlerDeleteFeature = (feature) => {
-        
     for (let i = 0; i < geojson.geojson.features.length; i++) {
-
       if (geojson.geojson.features[i].id == feature.id) {
         geojson.geojson.features.splice(i, 1);
       }
     }
-        console.log("geojson.geojson",geojson.geojson);
+    // handlerDrawComplete();
-    }
+  };
-
 
   // 初始化地图 返回地图实例
   const initMap = () => {
@@ -209,7 +202,7 @@ import { features } from 'process';
       maxZoom: 22,
       minZoom: 6,
       zoom: 14,
-            center:props.location
+      center: props.location,
     });
   };
 
@@ -246,10 +239,28 @@ import { features } from 'process';
   };
 
   // 初始化绘图空间
-    const handlerInitDrawTool = (feature) => {
+  const handlerInitDrawTool = (feature, bool) => {
+    if (feature.features.length > 0) {
+      feature.features.forEach((item) => {
+        if (item.geometry.type == 'MultiPolygon') {
+          let arr: any = ref([]);
+          item.geometry.coordinates.forEach((val) => {
+            arr.value.push(val[0]);
+          });
+          item.geometry.coordinates = arr.value;
+          item.geometry.type = 'Polygon';
+        }
+      });
+    }
+
     geojson.geojson = feature;
+    console.log('drawTool', drawTool);
+    console.log('feature', feature);
     if (drawTool) {
       drawTool.deleteAll();
+      if (feature.features) {
+        drawTool.set(geojson.geojson);
+      }
     } else {
       drawTool = new MapboxDraw({
         modes: {
@@ -269,17 +280,21 @@ import { features } from 'process';
         },
         guides: false,
       });
-
+      map.addControl(drawTool, 'top-right');
-            map.addControl(drawTool, "top-right");
+      if (feature.features) {
         drawTool.set(geojson.geojson);
       }
-        // 正在绘制
-        drawing.value = true;
     }
+    // 正在绘制
+    if (bool) {
+      drawing.value = true;
+    } else {
+      drawing.value = false;
+    }
+  };
 
   // 将图斑复制到指定图层
   const handlerCopyToTargetLayer = (e) => {
-        
     if (e.features.length > 0) {
       if (popup) {
         popup.remove();
@@ -296,78 +311,74 @@ import { features } from 'process';
       // 设置 popup 的位置和内容
       popup
         .setLngLat(clickPoisition)
-            .setHTML(`
+        .setHTML(
-                <div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`
+          `
-            ).addTo(map);
+                  <div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`,
-            
+        )
+        .addTo(map);
     } else {
       popup.remove();
     }
-    }
+  };
 
   const handlerCopyFeature = () => {
     popup.remove();
-        createMessage.success("复制成功！")
+    createMessage.success('复制成功！');
-    }
+  };
 
   // 添加到图层
   const handlerAddToLayerList = (layer) => {
     handlerCheckLayerExist(layer);
-    }
+  };
 
   // 判断图层列表中是否一定添加
   const handlerCheckLayerExist = (layer) => {
-
     for (let i = 0; i < layerList.length; i++) {
       if (layerList[i] == layer.id) {
         return;
       }
     }
     layerList.push(layer);
-    }
+  };
 
   const handlerCheckboxChange = (item) => {
-        handlerPreviewLayer(item)
+    handlerPreviewLayer(item);
-    }
+  };
 
   // 控制图层是否显示
   const handlerPreviewLayer = (layer) => {
-        handlerLayerControler(layer)
+    handlerLayerControler(layer);
-    }
+  };
 
   // 图层控制中心
   const handlerLayerControler = (layerInfo) => {
     if (map.getSource(layerInfo.layer.id)) {
       if (layerInfo.checked) {
-                map.setLayoutProperty(layerInfo.layer.id, "visibility", "visible");     
+        map.setLayoutProperty(layerInfo.layer.id, 'visibility', 'visible');
       } else {
-                map.setLayoutProperty(layerInfo.layer.id, "visibility", "none");     
+        map.setLayoutProperty(layerInfo.layer.id, 'visibility', 'none');
       }
     } else {
-            map.addLayer(layerInfo.layer)
+      map.addLayer(layerInfo.layer);
-            map.on("click",layerInfo.layer.id,function(e){
+      map.on('click', layerInfo.layer.id, function (e) {
         handlerPreviewFeatureInfo(e);
-            })
+      });
-        }
     }
+  };
 
   // 查看列表数据
-    const handlerDataList = () => {
+  const handlerDataList = () => {};
-
-    }
 
   // 图斑属性查看
   const handlerPreviewFeatureInfo = (e) => {
     if (e.features) {
       isOpen.value = true;
     }
-    }
+  };
-    
 
   const handlerClose = (e) => {
     isOpen.value = e;
-    }
+  };
-
 
   // 图斑定位
   const handlerLocation = (lngLat) => {
@@ -381,12 +392,12 @@ import { features } from 'process';
         return t;
       },
     });
-    }
+  };
 
   // 编辑图斑
   const handlerEdit = (info) => {
     initDraw(info);
-    }
+  };
 
   const initDraw = (layerInfo) => {
     // 实例化绘图工具
@@ -395,8 +406,8 @@ import { features } from 'process';
       modes: {
         ...MapboxDraw.modes,
         draw_point: SnapPointMode,
-            draw_polygon: SnapPolygonMode,
+        // draw_polygon: SnapPolygonMode,
-            draw_line_string: SnapLineMode,
+        // draw_line_string: SnapLineMode,
         direct_select: SnapDirectSelect,
       },
       styles: customDrawStyles,
@@ -410,7 +421,7 @@ import { features } from 'process';
       guides: false,
     });
 
-        map.addControl(drawTool, "top-right");
+    map.addControl(drawTool, 'top-right');
 
     // let geojson:Object = {};
     // if (layerInfo.dataType == "面") {
@@ -438,60 +449,62 @@ import { features } from 'process';
     // };
     // map.setLayoutProperty("pbfLayer", "visibility", "none");
     // drawTool.set(geojson);
-    }
+  };
 
   const handlerDrawComplete = () => {
     let arr = [];
     geojson.geojson.features.forEach((item, index) => {
-            let wktStr = GeojsonToWkt(item.geometry)
+      let wktStr = GeojsonToWkt(item.geometry);
       let obj = {
-                columnName:"mapgeom",
+        columnName: 'mapgeom',
-                value:wktStr
+        value: wktStr,
-            }
+      };
       arr.push(obj);
-        })
+    });
-        emit("handlerDrawComplete",arr)
+    emit('handlerDrawComplete', arr);
-    }
-
-    const handlerCancleDraw = () => {
-        map.removeControl(drawTool)
-        drawing.value = false;
-        // drawTool.set(geojson.geojson)
-    }
-
-    const handlerDraw = (features=null) =>{
-
-
-        let geo = {
-            type: 'FeatureCollection',
-            features: []
   };
 
-        if(features==null){
+  const handlerCancleDraw = () => {
+    map.removeControl(drawTool);
+    drawTool = null;
+    drawing.value = false;
+    // drawTool.set(geojson.geojson)
+  };
 
+  const handlerDraw = (features = null, bool = false) => {
+    let geo = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+    console.log('features', features);
+    console.log('bool', bool);
+    if (features == null) {
+      bool = true;
     } else {
       if (features.length > 0) {
         for (let i = 0; i < features.length; i++) {
+          try {
             let featureTemp = WktToGeojson(features[i].value);
-
-                    featureTemp.type="Polygon";
             let feature = {
-                        "id": "cd1d93c0e4a6747ff597f"+parseInt(1000000000*Math.random()).toString(),
+              id: 'cd1d93c0e4a6747ff597f' + parseInt(1000000000 * Math.random()).toString(),
-                        "type": "Feature",
+              type: 'Feature',
-                        "properties": {},
+              properties: {},
-                        "geometry": featureTemp
+              geometry: featureTemp,
-                    }
+            };
             geo.features.push(feature);
+          } catch (e) {
+            console.log('WKT解析错误，请检查WKT数据格式是否有误');
           }
         }
       }
-        
-        handlerInitDrawTool(geo)
     }
+    handlerInitDrawTool(geo, bool);
+  };
 
   defineExpose({
     handlerDraw,
-        handlerLocation
+    handlerLocation,
+    handlerCancleDraw,
   });
 </script>
 
@@ -550,7 +563,6 @@ import { features } from 'process';
     float: left;
   }
   .mapboxgl-ctrl-top-right {
-
   }
 
   .mapboxgl-ctrl-group button + button {
@@ -601,6 +613,4 @@ import { features } from 'process';
     width: 100px;
     height: 100px;
   }
-  
 </style>
-    

src/views/dashboard/analysis/index.vue

@@ -23,7 +23,6 @@
     zoom: 8,
   };
 
-
   // 展示的图层列表
   const layers = reactive([
         {
@@ -106,7 +105,8 @@
     //  const feature = "POLYGON ((118.54774514802972 35.80786133598188, 118.54515277045988 35.79816597053564, 118.55919536113471 35.80085134034624, 118.56021460056033 35.80462789316549, 118.5595188628206 35.80695604583504, 118.5580066425723 35.80815336506183, 118.54774514802972 35.80786133598188))"
   
 
-let drawFeatures = [{
+let drawFeatures = [
+  {
     "columnName": "mapgeom",
     "value": "POLYGON ((118.55901684631719 35.8045110934671, 118.55946931550466 35.80449259041045, 118.55946551324392 35.80463444717644, 118.559024450841 35.80464061486234, 118.55901684631719 35.8045110934671))"
   }, {
@@ -115,7 +115,8 @@ let drawFeatures = [{
   },  {
     "columnName": "mapgeom",
     "value": "POLYGON ((118.55922520818172 35.8049069756666, 118.5594647506927 35.80490080800186, 118.55945714616884 35.80477128705068, 118.55921380139475 35.804783622380114, 118.55922520818172 35.8049069756666))"
-}];
+  }
+];
 
 
     // 绘图完成返回geom

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

@@ -21,38 +21,48 @@
             <template #addonAfter><PercentageOutlined /></template>
           </a-input-number>
         </FormItem>
-        <!-- <FormItem label="选择图层">
+        <FormItem label="选择图层">
           <a-select
             v-model:value="formConfig.currentItem.mapSetData.chooseLayer"
-            :options="options"
+            :options="shpLayerSourceOptions"
-            mode="tags"
             size="middle"
             placeholder="请选择图层"
+            @change="handleChangeDataTable"
           />
         </FormItem>
         <FormItem label="图层字段解析">
-          <FormItem label="GID字段">
+          <FormItem label="图层数据表">
             <a-input
-              v-model:value="formConfig.currentItem.mapSetData.layerFields.gidField"
+              v-model:value="formConfig.currentItem.mapSetData.layerFields.dataTable"
-              placeholder="请输入GID字段"
+              placeholder="请输入图层数据表"
+              disabled="false"
             />
-          </FormItem> -->
+          </FormItem>
-        <FormItem label="标注字段">
+          <FormItem label="GID字段">
+            <a-select
+              v-model:value="formConfig.currentItem.mapSetData.layerFields.gidField"
+              :options="formConfig.currentItem.mapSetData.layerFields.labelFieldOptions"
+              size="middle"
+              placeholder="请选择GID字段"
+            />
+          </FormItem>
+          <FormItem label="名称字段标注">
             <a-select
               v-model:value="formConfig.currentItem.mapSetData.layerFields.labelField"
               :options="formConfig.currentItem.mapSetData.layerFields.labelFieldOptions"
               size="middle"
-            placeholder="请选择标注字段"
+              placeholder="请选择名称字段标注"
             />
           </FormItem>
-        <!--
+          <FormItem label="Geom字段">
-          <FormItem label="geom字段">
+            <a-select
-            <a-input
               v-model:value="formConfig.currentItem.mapSetData.layerFields.geomField"
-              placeholder="请输入geom字段"
+              :options="formConfig.currentItem.mapSetData.layerFields.labelFieldOptions"
+              size="middle"
+              placeholder="请选择Geom字段"
             />
           </FormItem>
-        </FormItem> -->
+        </FormItem>
         <FormItem label="是否允许添加图斑">
           <Switch v-model:checked="formConfig.currentItem.mapSetData.isAllowAddPolygon" />
         </FormItem>
@@ -124,7 +134,7 @@
   </div>
 </template>
 <script lang="ts" setup name="FormItemProps">
-  import { computed, watch } from 'vue';
+  import { ref, computed, watch, inject } from 'vue';
   import {
     baseFormItemControlAttrs,
     baseFormItemProps,
@@ -132,15 +142,25 @@
     advanceFormItemColProps,
   } from '../../VFormDesign/config/formItemPropsConfig';
 
-  import { Empty, Input, Form, FormItem, Switch, Checkbox, Col, SelectProps } from 'ant-design-vue';
   import { PercentageOutlined } from '@ant-design/icons-vue';
   import RuleProps from './RuleProps.vue';
   import { useFormDesignState } from '../../../hooks/useFormDesignState';
   import { isArray } from 'lodash-es';
+  import { ShpLayerSourceLoadPage, GetTableAndViewColumnList } from '@/api/demo/formScheme';
 
   const { formConfig } = useFormDesignState();
 
-  const options = [...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }));
+  let shpLayerSourceOptions: any = ref([]);
+  let dbcode = ref();
+  const handleNextStepsData = inject('handleNextStepsData');
+
+  watch(
+    () => handleNextStepsData,
+    (newVal: any) => {
+      dbcode.value = newVal?.value?.info?.DbCode;
+    },
+    { deep: true, immediate: true },
+  );
 
   watch(
     () => formConfig.value,
@@ -151,19 +171,26 @@
           formConfig.value.currentItem.itemProps.labelCol || {};
         formConfig.value.currentItem.itemProps.wrapperCol =
           formConfig.value.currentItem.itemProps.wrapperCol || {};
-        if (formConfig.value.currentItem.field == 'MapGeom') {
+        if (formConfig.value.currentItem.field === 'MapGeom') {
+          // 地图组件
           formConfig.value.currentItem.mapSetData = formConfig.value.currentItem.mapSetData || {
             width: 100,
+            chooseLayer: '',
             layerFields: {},
             isAllowAddPolygon: false,
             isAllowEditPolygon: false,
             isEnablePostionJump: false,
           };
+          // 选择图层
+          if (shpLayerSourceOptions.value.length == 0) {
+            getShpLayerSourceOptions();
+          }
         }
       }
     },
     { deep: true, immediate: true },
   );
+
   const showProps = (exclude: string[] | undefined) => {
     if (!exclude) {
       return true;
@@ -176,4 +203,53 @@
       return showProps(item.exclude);
     });
   });
+
+  // 选择图层
+  async function getShpLayerSourceOptions() {
+    let options: any = await ShpLayerSourceLoadPage();
+    shpLayerSourceOptions.value = [];
+    options.items.forEach((e) => {
+      shpLayerSourceOptions.value.push({ label: e.name, value: e.relationTable });
+    });
+  }
+  // 选择图层-图层数据表
+  function handleChangeDataTable(table) {
+    formConfig.value.currentItem.mapSetData.layerFields.dataTable = table;
+    if (table) {
+      getShpLayerSource(table);
+    }
+  }
+  // 图层数据表-GID字段/名称字段标注/Geom字段
+  async function getShpLayerSource(table) {
+    if (formConfig.value.currentItem.field === 'MapGeom') {
+      let querys: any = {
+        dbCode: dbcode.value,
+        tableName: table,
+      };
+      const obj: any = await GetTableAndViewColumnList(querys);
+      let labelFieldOptions: any = [];
+      if (obj.length > 0) {
+        obj.forEach((e) => {
+          labelFieldOptions.push({ label: e.column_name, value: e.column_name });
+        });
+        // GID字段/名称字段标注/Geom字段 下拉选项
+        formConfig.value.currentItem.mapSetData.layerFields.labelFieldOptions = labelFieldOptions;
+        // GID字段
+        formConfig.value.currentItem.mapSetData.layerFields.gidField = obj[0].column_name;
+        // Geom字段
+        formConfig.value.currentItem.mapSetData.layerFields.geomField = obj[1].column_name;
+        // 名称字段标注
+        formConfig.value.currentItem.mapSetData.layerFields.labelField = obj[2].column_name;
+      } else {
+        // GID字段/名称字段标注/Geom字段 下拉选项
+        formConfig.value.currentItem.mapSetData.layerFields.labelFieldOptions = [];
+        // GID字段
+        formConfig.value.currentItem.mapSetData.layerFields.gidField = '';
+        // Geom字段
+        formConfig.value.currentItem.mapSetData.layerFields.geomField = '';
+        // 名称字段标注
+        formConfig.value.currentItem.mapSetData.layerFields.labelField = '';
+      }
+    }
+  }
 </script>

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

@@ -168,14 +168,14 @@ export const baseComponentCommonAttrs: Omit<IBaseFormAttrs, 'tag'>[] = [
       'Cascader',
     ],
   },
-  {
+  // {
-    name: 'style',
+  //   name: 'style',
-    label: '样式',
+  //   label: '样式',
-    component: 'Input',
+  //   component: 'Input',
-    componentProps: {
+  //   componentProps: {
-      placeholder: '请输入样式',
+  //     placeholder: '请输入样式',
-    },
+  //   },
-  },
+  // },
   {
     name: 'open',
     label: '一直展开下拉菜单',

src/views/demo/form-design/typings/v-form-component.ts

@@ -20,6 +20,8 @@ declare type Value = [number, number] | number;
  *  图层字段
  */
 export interface LayerFields {
+  // 图层数据表
+  dataTable?: string;
   // GID字段
   gidField?: string;
   // 标注字段

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

@@ -1,22 +1,22 @@
 <template>
   <div class="show-form-modal" style="width: 100%;">
     <div class="title">
-      <div>{{ getTitle }}</div>
+      <div class="close-button"><ArrowLeftOutlined @click="closeModal"/></div>
-      <div class="close-button"><CloseCircleOutlined @click="closeModal"/></div>
+      <div style="margin-right:30px;font-size: 25px;">{{ getTitle }}</div>
     </div>
     <div class="form-content">
       <BasicForm ref="myDataBaseFormRef" @register="registerForm" v-if="formModalVisible" />
+    </div>
     <div class="footer-button" v-if="!isDetail">
       <a-button style="margin-right: 20px;" @click="closeModal">取消</a-button>
       <a-button type="primary" @click="ModalSureClick">确认</a-button>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup lang="ts">
 import { defineEmits, defineProps, ref, onMounted, unref, reactive, toRaw  } from "vue"
-import { CloseCircleOutlined } from '@ant-design/icons-vue'
+import { ArrowLeftOutlined } from '@ant-design/icons-vue'
 import { BasicForm, useForm } from '@/components/Form';
 import { FormSchema } from '@/components/Table';
 import { create, saveDraft } from '@/api/sys/WFProcess';
@@ -63,7 +63,6 @@ function generateUniqueDigits(length: number): number[] {
 
 onMounted(() => {
   const data = props.showFormModalData
-  console.log(1111111,data)
   isUpdate.value = !!data?.isUpdate;
   isDetail.value = !!data?.isDetail;
   data.tab.forEach((item) => {
@@ -107,7 +106,6 @@ onMounted(() => {
       });
     }, 100);
   } else {
-    console.log('rrreeeeccc');
     myDataBaseFormRef.value && resetFields();
   }
   addQuery.value = [];
@@ -119,7 +117,6 @@ onMounted(() => {
         value: generateUniqueDigits(20).join(''),
       });
     });
-    console.log('addQuery', addQuery);
   }
 })
 
@@ -131,15 +128,12 @@ async function ModalSureClick() {
     let mapGeomList = toRaw(props.mapgemoList).map(item => {
       return item.value
     })
-    console.log('mapGeomList',mapGeomList)
     query.MapGeom = mapGeomList.join(";")
-    console.log('query', query);
     let params: any = {
       schemeId: primaryQuery.value.id,
       isUpdate: isUpdate.value,
       pkey: primaryQuery.value.key,
     };
-    console.log('params', params);
     if (unref(isUpdate)) {
       params.pkeyValue = primaryQuery.value.keyValue;
     } else {
@@ -153,8 +147,6 @@ async function ModalSureClick() {
       });
     }
     params.data = JSON.stringify(query);
-    console.log('query222', query);
-    console.log('params222', params);
     const data = await saveFormsData(params);
     if (data) {
       emits('success');
@@ -218,15 +210,17 @@ async function handleCreateFlow(processId) {
     }
   }
   .form-content{
-    padding: 25px;
+    padding: 25px 25px 0px 25px;
-    height: calc(100% - 50px);
+    height: calc(100% - 97px);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    overflow: auto;
+    margin-bottom: 15px;
+  }
   .footer-button{
     display: flex;
     justify-content: flex-end;
   }
 }
-}
 </style>

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

@@ -16,7 +16,7 @@
       @select="handleSelect"
     />
     <div style="display: flex;width:100%;">
-      <div class="table-container" :style="`${haveMap? 'width:50%;':'width:100%'}`">
+      <div class="table-container form-call-table" :style="`${haveMap? `width:${100 - mapSetData.width}%;`:'width:100%'}`">
         <BasicTable @register="registerTable" @row-click="handRowClick">
           <template #toolbar>
             <div v-for="(item, index) in btnArr" :key="index">
@@ -29,7 +29,7 @@
         <ShowFormModal v-if="openShowFormModal" :showFormModalData="showFormModalData" :mapgemoList="mapgemoList" 
           @closeShowFormModal="closeShowFormModal" @success="submitsuccess"/>
       </div>
-      <div v-if="haveMap" style="width:50%;height:calc(100vh - 78px) ">
+      <div v-if="haveMap" class="form-call-showMap" :style="`width:${mapSetData.width}%;height:calc(100vh - 78px) `">
         <MapboxMap 
           :layers="layers"
           :location="location"
@@ -58,7 +58,7 @@
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, nextTick, unref, h, reactive } from 'vue';
+  import { onMounted, ref, nextTick, unref, h, reactive, defineAsyncComponent  } from 'vue';
   import { useRoute } from 'vue-router';
   import { BasicTable, useTable, BasicColumn, FormSchema } from '@/components/Table';
   import { BasicTree, TreeItem, TreeActionItem, TreeActionType } from '@/components/Tree';
@@ -71,9 +71,13 @@
   import { useMessage } from '@/hooks/web/useMessage';
   import CallModal from './CallModal.vue';
   import CreateFlow from './CreateFlow.vue';
-  import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'
+  // import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'
   import ShowFormModal from './ShowFormModal/index.vue';
 
+const MapboxMap = defineAsyncComponent(() =>
+  import('@/components/MapboxMaps/MapComponent.vue')
+)
+
   const { createConfirm, createMessage } = useMessage();
   const route = useRoute();
   const btnArr: any = [
@@ -82,6 +86,9 @@
     { label: '删除', prop: 'Delete', class: 'error' },
     { label: '详情', prop: 'Details', class: 'default' },
   ];
+  const mapSetData = ref({
+    width:100
+  })
   const mapgemoList = ref([])
   const MapboxComponent = ref()
   const openShowFormModal = ref(false)
@@ -362,10 +369,8 @@
     if (rows.length > 0) {
       query.value.keyValue = rows[0][str.value];
     }
-    console.log('btnList',btnList.value)
     switch (status) {
       case 'Add':
-        console.log(btnList.valueField);
         btnList.value.forEach((element) => {
           if (element.prop === 'Add' && element.isWFlow) {
             flowCode.value = element.wFlowCode;
@@ -384,10 +389,7 @@
             showFormModalData.value = toProps
             openShowFormModal.value = true
             mapgemoList.value = []
-            // const feature = "POLYGON ((118.54774514802972 35.80786133598188, 118.54515277045988 35.79816597053564, 118.55919536113471 35.80085134034624, 118.56021460056033 35.80462789316549, 118.5595188628206 35.80695604583504, 118.5580066425723 35.80815336506183, 118.54774514802972 35.80786133598188))"
+            mapSetData.value.isAllowAddPolygon && MapboxComponent.value.handlerDraw()
-            // MapboxComponent.value.handlerDraw(feature)
-            // MapboxComponent.value.handlerLocation([118.54774514802972,35.80786133598188]);
-            MapboxComponent.value.handlerDraw()
           }else{
             openModal(true, toProps);
           }
@@ -419,8 +421,7 @@
           if(haveMap.value){
             showFormModalData.value = toProps
             openShowFormModal.value = true
-            MapboxComponent.value.handlerDraw(mapgemoList.value)
+            MapboxComponent.value.handlerDraw(mapgemoList.value,mapSetData.value.isAllowEditPolygon)
-            console.log(mapgemoList.value)
           }else{
             openModal(true, toProps);
           }
@@ -468,8 +469,7 @@
         if(haveMap.value){
           showFormModalData.value = toProps
           openShowFormModal.value = true
-          MapboxComponent.value.handlerDraw(mapgemoList.value)
+          MapboxComponent.value.handlerDraw(mapgemoList.value,false)
-          // MapboxComponent.value.handlerLocation([1113.640352364387,35.8665000676054])
         }else{
           openModal(true, toProps);
         }
@@ -496,17 +496,32 @@
     };
     getFormsDesignData(params).then((res: Recordable) => {
       let columnObj = JSON.parse(res.entity.scheme);
-      console.log(columnObj,'columnObj');
       let formObj = JSON.parse(res.formScheme.scheme);
 
       // TODO 判断是否有地图
-      haveMap.value = formObj.formInfo.schemas.findIndex(item => item.field === "MapGeom") !== -1
+      let mapgeomData = formObj.formInfo.schemas.find(item => item.field === "MapGeom")
-
+      haveMap.value = mapgeomData !== undefined
-      console.log(formObj,'formObj');
+      if(haveMap.value){
+        mapSetData.value = mapgeomData.mapSetData || { isAllowAddPolygon: false,
+                                                       isAllowEditPolygon: false,
+                                                       isEnablePostionJump: false,
+                                                       width: 50,
+                                                       layerFields: {},
+                                                      }
+      }
+      // todo 修改赋值
+      // mapSetData.value = { 
+      //   width: 50,
+      //   // 可否添加图斑
+      //   isAllowAddPolygon: true,
+      //   // 可否编辑图斑
+      //   isAllowEditPolygon: true,
+      //   // 可否跳转到图斑
+      //   isEnablePostionJump: true,
+      //   layerFields: {},
+      // }
       paramsId.value = res.formScheme.id;
-      console.log(paramsId.value,'paramsId');
       btnList.value = columnObj.table.btns;
-      console.log(btnList.value,'btnList');
       if (columnObj.table.columns) {
         columnObj.table.columns.forEach((item) => {
           callColumns.push({
@@ -543,7 +558,6 @@
       nextTick(() => {
         unref(asyncExpandTreeRef)?.expandAll(true);
       });
-      console.log(formConfig.value,'formConfig')
       formConfig.value.schemas = formObj.formInfo.schemas;
     });
   }
@@ -562,10 +576,10 @@
   });
   const closeShowFormModal = () => {
     openShowFormModal.value = false
+    MapboxComponent.value.handlerCancleDraw()
   }
   const handRowClick = (record) => {
     if(!haveMap.value) return
-    console.log('record',record)
     let keyValue = null
     Object.keys(record).forEach(key => {
       if(key.indexOf('guid') !== -1){
@@ -578,23 +592,21 @@
       keyValue,
     }
     getFormData(params).then(res => {
-      console.log('res',res)
       mapgemoList.value = []
       res.forEach(item => {
         if(item.columnName === "mapgeom"){
           mapgemoList.value.push(item)
         }
       })
-      // console.log('mapgemoList', mapgemoList.value)
+      if(mapgemoList.value.length > 0 && mapSetData.value.isEnablePostionJump){
-      // let mapData =  mapgemoList.value.join(' ')
+        let jumpDataString = mapgemoList.value[0].value
-      // let data = "POLYGON ((118.52211538509077 35.882871898529494, 118.5243438435118 35.8822923130291, 118.52360102403814 35.88070959877732, 118.52153763661282 35.881021683278426, 118.52211538509077 35.882871898529494))"
+        let jumpDataList = jumpDataString.replace(/[A-Z|(|)]/g, "").split(" ")
-    //  if(mapgemoList.value.length > 0){
+        if(jumpDataString.slice(0,5) === 'POINT'){
-    //   let aaa = mapgemoList.value[0]
+          MapboxComponent.value.handlerLocation([jumpDataList[0],jumpDataList[1]])
-    //   console.log('aaaa',aaa)
+        }else{
-    //   let dataList = mapgemoList.value[0].value.replace(/[A-Z|(|)]/g, "").split(" ")
+          MapboxComponent.value.handlerLocation([jumpDataList[0],jumpDataList[1].split(',')[0]])
-    //   MapboxComponent.value.handlerDraw(mapgemoList.value)
+        }
-    //   MapboxComponent.value.handlerLocation([dataList[1],dataList[2]]);
+      }
-    //  } 
     }).catch(err => {
       console.log('err',err)
     })
@@ -639,4 +651,16 @@
   .table-container{
     position:relative;
   }
+  .form-call-table{
+      .ant-form{
+        .ant-form-item-control-input-content{
+          display:flex;
+        }
+      }
+  }
+  .form-call-showMap{
+    width:100%;
+    background-color: #fff;
+    z-index: 1;
+  }
 </style>

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

@@ -51,6 +51,7 @@
           :modalFormVerison="modalFormVerison"
           :editData="editData"
           :isEdit="isEdit"
+          :formVerison_now="formVerison_now"
         />
       </div>
     </div>

src/views/demo/onlineform/formModule/config/columns.vue

@@ -1,6 +1,6 @@
 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <div class="m-2 mr-0 w-1/4 xl:w-1/5 overflow-hidden bg-white">
+    <div class="m-2 mr-0 w-1/4 xl:w-1/5 bg-white tree">
       <BasicTree
         ref="columnsTreeRef"
         title="列字段"
@@ -44,6 +44,7 @@
               size="small"
               v-model:value="record.align"
               :options="alignOptions"
+              style="width: 100%"
             />
           </div>
         </template>
@@ -120,3 +121,10 @@
     fetch();
   });
 </script>
+
+<style lang="less" scoped>
+  .tree {
+    overflow: auto;
+    height: calc(100vh - 120px);
+  }
+</style>

src/views/demo/onlineform/formModule/config/config.data.ts

@@ -3,10 +3,10 @@ import { BasicColumn } from '@/components/Table';
 // 步骤一：基本配置 scheme 部分 添加数据库表（请先选择数据库）
 export function columns(): BasicColumn[] {
   return [
-    { title: '列名', dataIndex: 'label', width: '400' },
+    { title: '列名', dataIndex: 'label', width: 150 },
-    { title: '宽度', dataIndex: 'width', width: '120', align: 'center' },
+    { title: '宽度', dataIndex: 'width', width: 120, align: 'center' },
-    { title: '自适应宽度', dataIndex: 'isMinWidth', width: '100', align: 'center' },
+    { title: '自适应宽度', dataIndex: 'isMinWidth', width: 100, align: 'center' },
-    { title: '对齐', dataIndex: 'align', width: '100', align: 'center' },
+    { title: '对齐', dataIndex: 'align', width: 100, align: 'center' },
   ];
 }
 

src/views/demo/onlineform/formModule/config/leftTree.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="prefixCls">
     <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-      <div class="m-2 mr-0 w-1/4 xl:w-1/5 overflow-hidden">
+      <div class="m-2 mr-0 w-1/4 xl:w-1/5 tree">
         <lrPanel title="列表关联字段">
           <a-radio-group v-bind="attrs" v-model:value="config.left.colField" size="large">
             <template v-for="item in colslist" :key="`${item.value}`">
@@ -145,7 +145,7 @@
   const labelCol = { span: 4 };
   const wrapperCol = { span: 20 };
   // config
-  const config = inject('formConfig');
+  const config: any = inject('formConfig');
   // message
   const { createMessage } = useMessage();
 
@@ -174,7 +174,7 @@
     label: { required: true, message: '请输入选项名', trigger: 'null' },
     value: { required: true, message: '请输入选项值', trigger: 'null' },
   };
-  let pData = undefined;
+  let pData: any = undefined;
 
   // 静态数据树
   const treeOptions = ref<TreeItem[]>([]);
@@ -202,7 +202,7 @@
   });
   // 获取树
   const staticDataTreeRef = ref<Nullable<TreeActionType>>(null);
-  function getTree() {
+  function getTree(): any {
     return unref(staticDataTreeRef);
   }
   // 开启弹窗
@@ -219,7 +219,7 @@
   // 子节点添加弹窗
   function handleNodeAdd(data) {
     pData = data;
-    dialogTitle = `添加【${data.label}】的子选项`;
+    dialogTitle = `添加子选项`;
     dialogVisible.value = true;
   }
   // 子节点添加
@@ -270,9 +270,9 @@
   }
 
   // 数据字典
-  const dataCodes = ref<TreeItem[]>([]);
+  const dataCodes: any = ref<TreeItem[]>([]);
-  const dataSourceOptions = [];
+  const dataSourceOptions: any = [];
-  const myColNameList = ref([]);
+  const myColNameList: any = ref([]);
 
   async function fetch() {
     // 静态数据
@@ -285,7 +285,7 @@
 
   // 远端数据-数据源
   async function setdataSourceOptions() {
-    const loadDataBaseInfo = await fun_LoadDataBaseInfo();
+    const loadDataBaseInfo: any = await fun_LoadDataBaseInfo({});
     if (loadDataBaseInfo.items) {
       loadDataBaseInfo.items.forEach((item) => {
         dataSourceOptions.push({ value: item.code, label: item.name });
@@ -295,7 +295,7 @@
 
   // 远端数据-关联字段、显示字段、id字段、pid字段
   async function handleDataSourceChange() {
-    let dataColName = await fun_GetDataColName({ code: config.left.dataCode });
+    let dataColName: any = await fun_GetDataColName({ code: config.left.dataCode });
     dataColName.forEach((element) => {
       myColNameList.value.push({ value: element, label: element });
     });
@@ -327,4 +327,9 @@
       height: 100%;
     }
   }
+
+  .tree {
+    overflow: auto;
+    height: calc(100vh - 60px);
+  }
 </style>

src/views/demo/onlineform/formModule/config/query.vue

@@ -1,6 +1,6 @@
 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <div class="m-2 mr-0 w-1/4 xl:w-1/4 overflow-hidden">
+    <div class="m-2 mr-0 w-1/4 xl:w-1/4 bg-white tree">
       <BasicTree
         ref="querysTreeRef"
         title="查询字段"
@@ -37,7 +37,7 @@
   import { ref, inject, defineProps, PropType, watch, onMounted, unref, nextTick } from 'vue';
   import { BasicTable, useTable } from '@/components/Table';
   import { PageWrapper } from '@/components/Page';
-  import { BasicTree } from '@/components/Tree';
+  import { BasicTree, TreeActionType } from '@/components/Tree';
 
   import { querys } from './config.data';
 
@@ -54,7 +54,7 @@
   });
 
   // config
-  const config = inject('formConfig');
+  const config: any = inject('formConfig');
   const querysData = ref(config.table.querys);
   // 展开全部
   const querysTreeRef = ref<Nullable<TreeActionType>>(null);
@@ -102,3 +102,10 @@
     fetch();
   });
 </script>
+
+<style lang="less" scoped>
+  .tree {
+    overflow: auto;
+    height: calc(100vh - 120px);
+  }
+</style>

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

@@ -22,6 +22,7 @@
 
 <script lang="ts" setup>
   import { ref, provide, defineExpose, watch, defineProps } from 'vue';
+  import { cloneDeep } from 'lodash-es';
   import WebcodeLayout from './config/layout.vue';
   import webcodeLefttree from './config/leftTree.vue';
   import webcodeColumns from './config/columns.vue';
@@ -43,6 +44,10 @@
       type: Boolean,
       default: () => false,
     },
+    formVerison_now: {
+      type: String,
+      default: () => '',
+    },
   });
 
   watch(
@@ -93,7 +98,7 @@
     'StrengthMeter',
   ];
 
-  const config: any = ref({
+  const config_backups: any = {
     layoutType: 1,
     queryType: 1,
     left: {
@@ -172,7 +177,9 @@
         sort: 5,
       },
     ],
-  });
+  };
+  const config: any = ref();
+  config.value = cloneDeep(config_backups);
 
   const formScheme: any = ref('');
 
@@ -194,11 +201,6 @@
       }
     });
 
-    const colunmsMap = {};
-    columns.forEach((item) => {
-      colunmsMap[item.field] = item;
-    });
-
     // 左侧树形设置
     colslist.value = columns.map((t) => {
       return { value: t.field, label: t.label };
@@ -246,7 +248,7 @@
       if (
         (typeof props.editData.record.formVerison == 'string'
           ? props.editData.record.formVerison
-          : props.editData.record.formVerison.value) === formVerison
+          : props.editData.record.formVerison.value) === props.formVerison_now
       ) {
         const editDataScheme = JSON.parse(props.editData.record.scheme);
 
@@ -256,14 +258,41 @@
         config.value.queryType = editDataScheme.queryType;
         // 左边树
         config.value.left = editDataScheme.left;
+        // 常用按钮-树
+        btnsTree.value.forEach((tree1, index) => {
+          editDataScheme.table.btns.forEach((tree2) => {
+            if (tree1.id === tree2.id) {
+              btnsTree.value[index] = tree2;
+            }
+          });
+        });
         // 列表设置-表
         config.value.table.columns = editDataScheme.table.columns;
         // 查询设置-表
         config.value.table.querys = editDataScheme.table.querys;
         // 常用按钮-表
         config.value.table.btns = editDataScheme.table.btns;
+
+        setCheckedKeys();
+      } else {
+        defaultConfig();
+        setCheckedKeys();
       }
     } else {
+      defaultConfig();
+      setCheckedKeys();
+    }
+
+    pageActiveName = 'tab01';
+  }
+
+  function defaultConfig() {
+    // 布局
+    config.value.layoutType = 1;
+    // 左侧-父子树：默认为[]
+    colslist.value = [];
+    // 常用按钮-树
+    btnsTree.value = cloneDeep(config_backups).btns;
     // 列表设置-表
     config.value.table.columns = columnsTree.value[0].children;
     // 查询设置-表
@@ -272,13 +301,19 @@
     config.value.table.btns = btnsTree.value;
   }
 
-    // 设置预选的单选项
+  function setCheckedKeys() {
+    // 列表设置-树-选项
+    columnsCheckedKeys.value = [];
     config.value.table.columns.forEach((t: any) => {
       columnsCheckedKeys.value.push(t.key);
     });
+    // 查询设置-树-选项
+    queryCheckedKeys.value = [];
     config.value.table.querys.forEach((t: any) => {
       queryCheckedKeys.value.push(t.key);
     });
+    // 常用按钮-树-选项
+    btnsCheckedKeys.value = [];
     config.value.table.btns.forEach((t: any) => {
       btnsCheckedKeys.value.push(t.id);
     });

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

@@ -56,6 +56,7 @@
     <AutomaticModal
       @register="automaticModal"
       :isAddVisible="isAddVisible"
+      :isStageClick="isStageClick"
       @automatic-modal-submitsuccess="automaticModalSubmitsuccess"
     />
   </BasicModal>
@@ -75,6 +76,7 @@
     editFormDesignData,
     getOutKeyList,
   } from '@/api/formdesign/index';
+  import { functionGetForm } from '@/api/demo/formScheme';
 
   defineOptions({ name: 'FormModal' });
 
@@ -83,6 +85,9 @@
 
   let formScheme: any = ref({ info: {}, scheme: {} });
 
+  let formScheme_id = '';
+  let formScheme_type = '';
+
   let saveFormDatas: any = ref({});
   const primaryKey: any = ref();
   provide(
@@ -93,15 +98,33 @@
     'thisFormType',
     computed(() => saveFormDatas.value),
   );
-
+  async function getTableColumnData(schems) {
-  function designSendGrandson(value) {
+    var arr: any = [];
+    for (var i = 0; i < schems.db.length; i++) {
+      let params = {
+        dbCode: schems.dbCode,
+        tableNames: schems.db[i].name,
+      };
+      await getOutKeyList(params).then((res: Recordable) => {
+        console.log(res);
+        if (res.length > 0) {
+          arr.push({
+            name: schems.db[i].name,
+            data: res[0].db_codecolumnsList,
+          });
+        }
+      });
+    }
+    return arr;
+  }
+  async function designSendGrandson(value) {
     let designTab = JSON.parse(value);
     let schems = saveFormDatas.value.scheme.scheme
       ? JSON.parse(saveFormDatas.value.scheme.scheme)
       : JSON.parse(
           '{"db":[{"name":"form_scheme","type":"main"}],"rdb":[],"dbCode":"hcsystemdb","formInfo":{"schemas":[]},"primaryKey":"Id"}',
         );
-
+    let tableData = await getTableColumnData(schems);
     let tabArr: any = [];
     let tabLabelArr: any = [];
     designTab.schemas.forEach((item) => {
@@ -109,17 +132,12 @@
         item.defaultValue = item.componentProps.defaultValue;
       }
       if (item.componentProps.fieldName) {
-        let params = {
+        tableData.forEach((element) => {
-          dbCode: schems.dbCode,
+          if (element.name == item.componentProps.dataTable) {
-          tableNames: item.componentProps.dataTable,
+            var currentIndex = element.data.findIndex(
-        };
+              (childItem) => childItem.dbColumnName === item.componentProps.fieldName,
-        getOutKeyList(params).then((res: Recordable) => {
+            );
-          if (res.length > 0) {
+            item.csType = element.data[currentIndex].csType;
-            res[0].db_codecolumnsList.forEach((val) => {
-              if (item.componentProps.fieldName == val.dbColumnName) {
-                item.csType = val.csType;
-              }
-            });
           }
         });
       }
@@ -130,9 +148,12 @@
     });
     schems.primaryKey = primaryKey.value;
     schems.formInfo = designTab;
-
     // 表结构配置
+    tableCallBack(schems, tabArr, tabLabelArr);
+  }
+  function tableCallBack(schems, tabArr, tabLabelArr) {
     if (saveFormDatas.value.info.formType == 2 && !isStageClick.value) {
+      // 自动建表+保存
       if (isAddVisible.value) {
         schems.db.push({
           name: 'table' + new Date().getTime(),
@@ -144,16 +165,34 @@
       saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
       openModal(true, { saveFormDatas: saveFormDatas.value });
     } else if (saveFormDatas.value.info.formType == 2 && isStageClick.value) {
-      setTimeout(() => {
+      // 自动建表+暂存
-        saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
+      setTimeout(async () => {
-        submitSaveClick();
+        if (isAddVisible.value) {
+          schems.db = [];
+          schems.db.push({
+            name: 'table' + new Date().getTime(),
+            type: 'main',
+            tableName: 'table' + new Date().getTime(),
+            description: '',
+          });
+        } else {
+          formScheme_id = formScheme_id ? formScheme_id : saveFormDatas.value.info.id;
+          let query: any = { id: formScheme_id };
+          let result: any = await functionGetForm(query);
+          let result_json = JSON.parse(result.scheme.scheme);
+          schems.db = result_json.db;
+        }
+        // saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
+        console.log('自动建表暂存');
+        submitSaveClick(schems);
       }, 500);
     } else if (tabArr.includes(undefined)) {
       message.warning('请' + tabLabelArr[0] + '绑定数据表字段！', 2);
     } else {
+      console.log('正常提交');
+      // saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
       setTimeout(() => {
-        saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
+        submitSaveClick(schems);
-        submitSaveClick();
       }, 500);
     }
   }
@@ -165,7 +204,10 @@
     stepsCurrent.value = 0;
     isSubmitClick.value = false;
     isStageClick.value = false;
+
     if (data.id) {
+      formScheme_id = data.id;
+      formScheme_type = data.type;
       editCreateUserName = data.createUserName;
       isAddVisible.value = false;
       getBaseConfigList({ id: data.id }).then((res: Recordable) => {
@@ -190,7 +232,7 @@
 
   function automaticModalSubmitsuccess(value) {
     saveFormDatas.value = value;
-    submitSaveClick();
+    submitSaveClick(null);
   }
 
   let stepsCurrent = ref();
@@ -366,7 +408,10 @@
   function designformback() {
     isSubmitClick.value = false;
   }
-  function submitSaveClick() {
+  function submitSaveClick(schems) {
+    if (schems) {
+      saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
+    }
     if (!saveFormDatas.value.info.type) {
       isStageClick.value = false;
       isSubmitClick.value = false;
@@ -376,6 +421,10 @@
       info: saveFormDatas.value.info,
       scheme: saveFormDatas.value.scheme,
     };
+    // 草稿状态下暂存，再暂存还是草稿状态
+    if (isStageClick.value && param.info.type == 2) {
+      param.scheme.type = formScheme_type ? formScheme_type : 2;
+    }
     if (isAddVisible.value) {
       addFormDesignData(param).then((res: Recordable) => {
         if (!isStageClick.value) {

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

@@ -22,15 +22,15 @@
 </template>
 <script lang="ts" setup>
   import { onMounted, ref, h, nextTick, unref } from 'vue';
-  import { BasicTree, TreeItem, TreeActionItem } from '@/components/Tree';
+  import { BasicTree, TreeItem, TreeActionItem, TreeActionType } from '@/components/Tree';
   import { functionLoadFormSort, functionDeleteFormSort } from '@/api/demo/formScheme';
   import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
   import { BasicModal, useModal } from '@/components/Modal';
   import { router } from '@/router';
 
   defineOptions({ name: 'FormSchemeTree' });
-  const emit = defineEmits(['select']);
+  const emit = defineEmits(['select', 'add', 'edit']);
-  let selectNode = ref('');
+  let selectNode: any = ref('');
 
   // 删除的弹窗
   const [register, { closeModal, openModal }] = useModal();
@@ -40,14 +40,15 @@
 
   // 删除的弹窗的方法
   async function handleDelete() {
-    var query = { id: selectNode.value.itemDetailId };
+    let query: any = { id: selectNode.value.itemDetailId };
     await functionDeleteFormSort(query);
     closeModal();
   }
 
   // 树分类获取
   async function fetch() {
-    treeData.value = (await functionLoadFormSort()) as unknown as TreeItem[];
+    let query: any = {};
+    treeData.value = (await functionLoadFormSort(query)) as unknown as TreeItem[];
     treeData.value = treeData.value.map((item) => ({
       ...item,
       title: item.itemName,
@@ -61,9 +62,9 @@
   function handleSelect(keys) {
     emit('select', keys[0]);
   }
-  const btnList = router.currentRoute.value.meta.elements;
+  const btnList: any = router.currentRoute.value.meta.elements;
   const actionList: TreeActionItem[] = [];
-  btnList.forEach((element) => {
+  btnList?.forEach((element) => {
     if (element.domId == 'btnAdd') {
       actionList.push({
         render: (node) => {

src/views/demo/onlineform/formdesign/form/index.data.ts

@@ -180,9 +180,9 @@ export const formSchema: FormSchema[] = [
       labelField: 'text',
       valueField: 'value',
       async: true,
-      onChange: (e, v) => {
+      // onChange: (e, v) => {
-        console.log('ApiTreeSelect====>:', e, v);
+      //   console.log('ApiTreeSelect====>:', e, v);
-      },
+      // },
       onLoadData: ({ treeData, resolve, treeNode }) => {
         setTimeout(() => {
           const children: Recordable[] = [];

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

@@ -137,12 +137,15 @@
     }
     // 表名和备注
     let scheme = JSON.parse(data.saveFormDatas.scheme.scheme);
-    tableInfo.value.tableName = scheme.db[0].tableName;
+
+    tableInfo.value.tableName = scheme.db[0].tableName ? scheme.db[0].tableName : scheme.db[0].name;
     tableInfo.value.description = scheme.db[0].description;
     tableInfo.value.dbCode = data.saveFormDatas.info.DbCode;
+
     // 制作表格
     let schemas = scheme.formInfo.schemas;
     tableInfo.value.dbColumnInfoList = [];
+
     schemas.forEach((item: any) => {
       if (!item.component.includes(componentArray)) {
         if (fieldArray.includes(item.field)) {
@@ -159,6 +162,23 @@
           tableInfo.value.dbColumnInfoList.push(temp);
           item.dbColumnInfo = temp;
 
+          // 编辑-添加新的行
+          dbColumnInfo_new.value.push(temp);
+          dbColumnInfo_new_list.push(temp.dbColumnName + temp.columnDescription);
+          item.componentProps.dataTable = tableInfo.value.tableName;
+          item.componentProps.fieldName = temp.dbColumnName;
+        } else if (item.dbColumnInfo.dbColumnName != item.component + item.field) {
+          // 复制按钮产生的组件
+          // 初始默认值
+          let temp = cloneDeep(dbColumnInfo);
+          temp.tableName = tableInfo.value.tableName;
+          temp.dbColumnName = item.component + item.field;
+          temp.length = 200;
+          temp.dataType = 'varchar';
+          temp.columnDescription = item.label;
+          tableInfo.value.dbColumnInfoList.push(temp);
+          item.dbColumnInfo = temp;
+
           // 编辑-添加新的行
           dbColumnInfo_new.value.push(temp);
           dbColumnInfo_new_list.push(temp.dbColumnName + temp.columnDescription);
@@ -186,6 +206,8 @@
   async function submit() {
     if (props.isAddVisible) {
       await AddTable(tableInfo.value);
+    } else if (dbColumnInfo_new_list.length == tableInfo.value.dbColumnInfoList.length) {
+      await AddTable(tableInfo.value);
     } else if (dbColumnInfo_new.value) {
       dbColumnInfo_new.value.forEach(async (item) => {
         await AddColumn(item);

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

@@ -20,6 +20,9 @@
       <a-tab-pane key="form" tab="表单信息" v-if="formVisble">
         <FormViewer ref="formBoxRef" :formConfig="formConfig" v-if="formVisble" />
       </a-tab-pane>
+      <a-tab-pane key="form" tab="系统表单信息" v-if="formUrlVisble">
+        <AsyncComponent ref="pcForm" />
+      </a-tab-pane>
       <a-tab-pane key="flow" tab="流程信息" force-render>
         <div class="process-design" :style="'display: flex; height:' + designerData.height">
           <process-viewer :key="`designer-${code}`" :xml="flowContent" v-if="processVisble" />
@@ -65,7 +68,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { h, ref, reactive, onBeforeMount } from 'vue';
+  import { h, ref, reactive, onBeforeMount, defineAsyncComponent } from 'vue';
   import { ProcessViewer } from '@/components/ProcessViewer/index';
   import { PageWrapper } from '@/components/Page';
   import { FormViewer } from '@/components/FormViewer';
@@ -89,12 +92,15 @@
   const labelCol = { span: 7 };
   const wrapperCol = { span: 13 };
   const formVisble = ref(false);
+  const formUrlVisble = ref(false);
   const processVisble = ref(false);
+  const AsyncComponent = ref();
   const props = defineProps({
     code: String,
   });
   const emit = defineEmits(['closeModel']);
   const keyValue = ref('');
+  const pcForm = ref();
   // 表单数据
   const formConfig = ref<IFormConfig>({
     // 表单配置
@@ -150,15 +156,36 @@
     let wfData = content.wfData;
     const currentNode = wfData.find((t) => t.type == 'bpmn:StartEvent');
     if (currentNode.authFields.length > 0) {
+      // 有自定义表单时
       formVisble.value = true;
+    } else if (currentNode.formUrl) {
+      // 有PC系统表单时
+      formUrlVisble.value = true;
+      let url = '../../..' + currentNode.formUrl + '.vue';
+      // AsyncComponent.value = defineAsyncComponent(() => import(url));
+      AsyncComponent.value = defineAsyncComponent({
+        // 加载函数
+        loader: () => import(url),
+        // 展示加载组件前的延迟时间，默认为200ms,注：这里如果设置的时间过短，会有闪烁的效果
+        delay: 200,
+        // 如果提供了一个timeout时间限制，并且超时了，也会展示这里的报错组件
+        // 设置加载超时时间为3000毫秒
+        timeout: 3000,
+        onError: function () {
+          createMessage.error('无法加载系统表单，请查看流程配置是否正确!');
+        },
+      });
     } else {
+      // 无表单时
       processVisble.value = true;
       activeName.value = 'flow';
     }
+
     formConfig.value = currentNode.authFields;
     designerData.formCurrentNode = currentNode;
     getFormHistory();
   }
+
   async function getDelegateUsers() {
     const data = await getLoadMyUserList({
       code: props.code,
@@ -226,6 +253,11 @@
           activeName.value = 'form';
           return;
         });
+    } else if (formUrlVisble.value) {
+      //有系统表单，先存系统表单
+      const funName = 'handleSubmit';
+      pcForm.value[funName]();
+      // handleCreateFlow(processId);
     } else {
       handleCreateFlow(processId);
     }

src/views/systemForm/ceshi/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <BasicForm @register="registerForm" />
+</template>
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '@/components/Form';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
+
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { span: 24 },
+    schemas: [
+      {
+        field: 'id',
+        label: '角色名称',
+        required: true,
+        component: 'Input',
+        ifShow: false,
+      },
+      {
+        field: 'name',
+        label: '角色名称',
+        required: true,
+        component: 'Input',
+      },
+      {
+        field: 'status',
+        label: '状态',
+        component: 'RadioButtonGroup',
+        defaultValue: 0,
+        componentProps: {
+          options: [
+            { label: '启用', value: 0 },
+            { label: '停用', value: 1 },
+          ],
+        },
+      },
+    ],
+    showActionButtonGroup: false,
+  });
+
+  async function handleSubmit() {
+    const values = await validate();
+    console.log(values);
+  }
+  defineExpose({
+    handleSubmit,
+  });
+</script>