From c8c4e33b9b94ad57b1b22a614ae1509f993a3eed Mon Sep 17 00:00:00 2001
From: helloxujingliang <3225043@qq.com>
Date: Wed, 5 Jun 2024 14:01:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Upload/src/components/ImageUpload.vue     |   2 +-
 .../components/VFormCreate/index.vue          |   1 -
 .../VFormDesign/components/FormItemProps.vue  |   6 +-
 .../form-design/typings/v-form-component.ts   |  20 +-
 .../formCall/ShowFormModal/index.vue          |   1 +
 .../onlineform/formModule/config/maps.vue     | 408 ++++++++----------
 6 files changed, 205 insertions(+), 233 deletions(-)

diff --git a/src/components/Upload/src/components/ImageUpload.vue b/src/components/Upload/src/components/ImageUpload.vue
index 943716be..d9c13e16 100644
--- a/src/components/Upload/src/components/ImageUpload.vue
+++ b/src/components/Upload/src/components/ImageUpload.vue
@@ -115,7 +115,7 @@
       let arr = props.value?.split(",") as [];
       fileList.value = [];
         const { server } = props
-        arr.forEach((item,index)=>{
+        arr?.forEach((item,index)=>{
           if(item){
             fileList.value?.push({
               uid: '-1',
diff --git a/src/views/demo/form-design/components/VFormCreate/index.vue b/src/views/demo/form-design/components/VFormCreate/index.vue
index 3c58c0ae..1c84203b 100644
--- a/src/views/demo/form-design/components/VFormCreate/index.vue
+++ b/src/views/demo/form-design/components/VFormCreate/index.vue
@@ -62,7 +62,6 @@
       const wrapperComp = props.formConfig.layout == 'vertical' ? Col : Row;
       const { emit } = context;
       const eFormModel = ref<AForm | null>(null);
-
       const formModelNew = computed({
         get: () => props.formModel,
         set: (value) => emit('update:formModel', value),
diff --git a/src/views/demo/form-design/components/VFormDesign/components/FormItemProps.vue b/src/views/demo/form-design/components/VFormDesign/components/FormItemProps.vue
index 6a77c0d3..f9604d3b 100644
--- a/src/views/demo/form-design/components/VFormDesign/components/FormItemProps.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/FormItemProps.vue
@@ -236,9 +236,9 @@
             width: 50,
             chooseLayer: '',
             layerFields: {},
-            isAllowAddPolygon: false,
-            isAllowEditPolygon: false,
-            isEnablePostionJump: false,
+            isAllowAddPolygon: true,
+            isAllowEditPolygon: true,
+            isEnablePostionJump: true,
           };
           // 选择图层
           if (shpLayerSourceOptions.value.length == 0) {
diff --git a/src/views/demo/form-design/typings/v-form-component.ts b/src/views/demo/form-design/typings/v-form-component.ts
index 46b1a182..0c783aab 100644
--- a/src/views/demo/form-design/typings/v-form-component.ts
+++ b/src/views/demo/form-design/typings/v-form-component.ts
@@ -35,18 +35,16 @@ export interface LayerFields {
  * 图斑属性
  */
 export interface MapComponent {
-  // 图斑宽度
   width?: number;
-  // 选择图层
-  chooseLayer?: any[];
-  // 图层字段解析
-  layerFields: LayerFields;
-  // 是否允许添加图斑
-  isAllowAddPolygon?: boolean;
-  // 是否允许编辑图斑
-  isAllowEditPolygon?: boolean;
-  // 是否开启位置跳转
-  isEnablePostionJump?: boolean;
+  minZoom?: number;
+  maxZoom?: number;
+  zoom?: number;
+  isShowMap?: boolean;
+  layers?: any[];
+  baseLayers?: any[];
+  mode?:string;
+  angle?:number;
+  center?:string,
 }
 
 /**
diff --git a/src/views/demo/onlineform/formCall/ShowFormModal/index.vue b/src/views/demo/onlineform/formCall/ShowFormModal/index.vue
index 406497b3..8e0837b8 100644
--- a/src/views/demo/onlineform/formCall/ShowFormModal/index.vue
+++ b/src/views/demo/onlineform/formCall/ShowFormModal/index.vue
@@ -228,6 +228,7 @@
     }
   });
 
+
   //表单填写数据
   async function ModalSureClick() {
     try {
diff --git a/src/views/demo/onlineform/formModule/config/maps.vue b/src/views/demo/onlineform/formModule/config/maps.vue
index da56777b..70aa71d8 100644
--- a/src/views/demo/onlineform/formModule/config/maps.vue
+++ b/src/views/demo/onlineform/formModule/config/maps.vue
@@ -5,134 +5,132 @@
         label-align="left"
         layout="vertical"
         description="图斑控件"
-        style="margin: 20px auto 0; width: 550px; padding-bottom: 20px"
+        size="small"
+        style="padding:0px 15px"
       >
 
-        <a-card  title="基本设置" class="card-item">
-          <FormItem label="是否显示">
-            <Switch v-model:checked="mapConfig.baseConfig.state" />
-          </FormItem>
 
-          <FormItem label="地图宽度">
-            <a-input-number
-              v-model:value="mapConfig.baseConfig.width"
-              placeholder="请输入地图宽度"
-              :min="1"
-              :max="100"
-            >
-              <template #addonAfter><PercentageOutlined /></template>
-            </a-input-number>
-          </FormItem>
+      <a-row :gutter="12">
+        <a-col :span="12" >
+          <a-card  title="基本设置" class="card-item">
+            <FormItem label="是否显示">
+              <Switch v-model:checked="mapConfig.isShowMap" />
+            </FormItem>
+  
+            <FormItem label="地图宽度" >
+              <a-input-number
+                v-model:value="mapConfig.width"
+                placeholder="请输入地图宽度"
+                :min="1"
+                :max="100"
+              >
+                <template #addonAfter><PercentageOutlined /></template>
+              </a-input-number>
+            </FormItem>
 
-        </a-card>
+            <FormItem label=" &nbsp;"></FormItem>
+          </a-card>
+        </a-col>
 
-        <a-card  title="地图配置" class="card-item">
+        <a-col :span="12" >
+          <a-card  title="地图配置" class="card-item" >
+            <FormItem label="地图模式">
+              <a-radio-group v-model:value="mapConfig.mode">
+                <a-radio :value="'2D'">二维地图</a-radio>
+                <a-radio :value="'3D'">三维地图</a-radio>
+              </a-radio-group>
+            </FormItem>
+            <a-row :gutter="12">
+              <a-col :span="12" >
+                <FormItem label="倾斜角度">
+                  <a-input-number v-model:value="mapConfig.angle" :min="0"
+                  :max="90" />
+                </FormItem>
+              </a-col>
+              <a-col :span="12" >
+                <FormItem label="中心位置">
+                  <a-input v-model:value="mapConfig.center" />
+                </FormItem>
+              </a-col>
+            </a-row>
+  
+            <a-row :gutter="12">
+              <a-col :span="8" >
+                <FormItem label="初始缩放级别">
+                  <a-input-number v-model:value="mapConfig.zoom" :min="1"
+                  :max="18" />
+                </FormItem>
+              </a-col>
+              <a-col :span="8" >
+                <FormItem label="最小缩放级别">
+                  <a-input-number v-model:value="mapConfig.minZoom" :min="1"
+                  :max="18" />
+                </FormItem>
+              </a-col>
+              <a-col :span="8" >
+                <FormItem label="最大缩放级别">
+                  <a-input-number v-model:value="mapConfig.maxZoom" :min="1"
+                  :max="18" />
+                </FormItem>
+              </a-col>
+            </a-row>
+  
+          </a-card>
+        </a-col>
+      </a-row>
 
-          <FormItem label="地图模式">
-            <a-radio-group v-model:checked="mapConfig.viewerConfig.mode">
-              <a-radio value="2D">二维地图</a-radio>
-              <a-radio value="3D">三维地图</a-radio>
-            </a-radio-group>
-          </FormItem>
 
-          <a-row :gutter="12">
-            <a-col :span="12" >
-              <FormItem label="倾斜角度">
-                <a-input-number v-model="mapConfig.viewerConfig.angle" />
-              </FormItem>
-            </a-col>
-            <a-col :span="12" >
-              <FormItem label="中心位置">
-                <a-input v-model="mapConfig.viewerConfig.center" />
-              </FormItem>
-            </a-col>
-          </a-row>
+      <a-card  title="底图设置" class="card-item" >
+        <a-checkbox v-for="(item,index) in baseLayers" :key="index">{{item.name}}</a-checkbox>
+      </a-card>
 
-          <a-row :gutter="12">
-            <a-col :span="8" >
-              <FormItem label="初始缩放级别">
-                <a-input-number v-model="mapConfig.viewerConfig.zoom" />
-              </FormItem>
-            </a-col>
-            <a-col :span="8" >
-              <FormItem label="最小缩放级别">
-                <a-input-number v-model="mapConfig.viewerConfig.minZoom" />
-              </FormItem>
-            </a-col>
-            <a-col :span="8" >
-              <FormItem label="最大缩放级别">
-                <a-input-number v-model="mapConfig.viewerConfig.maxZoom" />
-              </FormItem>
-            </a-col>
-          </a-row>
-
-        </a-card>
-
-        <a-card  title="底图设置" class="card-item">
-          
-          <a-checkbox v-for="(item,index) in mapConfig.baseLayers" :key="index">{{item.name}}</a-checkbox>
-
-        </a-card>
-
-        <a-card  title="图层设置" class="card-item">
-
-          <template #extra><PlusOutlined/></template>
-
-          <a-table :dataSource="mapConfig.layers" :columns="columns" :pagination="false" >
-            <template #bodyCell="{ column, record }">
-
-              <template v-if="column.key === 'show'">
-                <a-switch v-model:checked="record.show" checked-children="显示" un-checked-children="隐藏" />
-              </template>
-
-              <template v-if="column.key === 'operation'">
-                <span>
-                  <DeleteOutlined @click="removeLayer(record)" />
-                </span>
-              </template>
+      <a-card  title="图层设置" class="card-item" >
+        <template #extra><PlusOutlined/></template>
+        <a-table :dataSource="mapConfig.layers" :columns="columns" :pagination="false" >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'show'">
+              <a-switch v-model:checked="record.show" checked-children="显示" un-checked-children="隐藏" />
             </template>
-          </a-table>
-        </a-card>
+            <template v-if="column.key === 'operation'">
+              <span>
+                <DeleteOutlined @click="removeLayer(record)" />
+              </span>
+            </template>
+          </template>
+        </a-table>
+      </a-card>
 
-        
-        <!-- <FormItem label="选择图层">
-          <a-select
-            v-model:value="mapSetData.chooseLayer"
-            :options="shpLayerSourceOptions"
-            size="middle"
-            placeholder="请选择图层"
-            @change="handleChangeDataTable"
-          />
-        </FormItem>
 
+      <a-card  title="基本设置" class="card-item" >
+                
         <FormItem label="图层字段解析">
           <FormItem label="图层数据表">
             <a-input
-              v-model:value="mapSetData.layerFields.dataTable"
+              v-model:value="mapConfig.layerFields.dataTable"
               placeholder="请输入图层数据表"
               disabled="false"
             />
           </FormItem>
           <FormItem label="GID字段">
             <a-select
-              v-model:value="mapSetData.layerFields.gidField"
-              :options="mapSetData.layerFields.labelFieldOptions"
+              v-model:value="mapConfig.layerFields.gidField"
+              :options="mapConfig.layerFields.labelFieldOptions"
               size="middle"
               placeholder="请选择GID字段"
             />
           </FormItem>
           <FormItem label="名称字段标注">
             <a-select
-              v-model:value="mapSetData.layerFields.labelField"
-              :options="mapSetData.layerFields.labelFieldOptions"
+              v-model:value="mapConfig.layerFields.labelField"
+              :options="mapConfig.layerFields.labelFieldOptions"
               size="middle"
               placeholder="请选择名称字段标注"
             />
           </FormItem>
           <FormItem label="Geom字段">
             <a-select
-              v-model:value="mapSetData.layerFields.geomField"
-              :options="mapSetData.layerFields.labelFieldOptions"
+              v-model:value="mapConfig.layerFields.geomField"
+              :options="mapConfig.layerFields.labelFieldOptions"
               size="middle"
               placeholder="请选择Geom字段"
             />
@@ -140,16 +138,19 @@
         </FormItem>
 
         <FormItem label="是否允许添加图斑">
-          <Switch v-model:checked="mapSetData.isAllowAddPolygon" />
+          <Switch v-model:checked="mapConfig.isAllowAddPolygon" />
         </FormItem>
 
         <FormItem label="是否允许编辑图斑">
-          <Switch v-model:checked="mapSetData.isAllowEditPolygon" />
+          <Switch v-model:checked="mapConfig.isAllowEditPolygon" />
         </FormItem>
 
         <FormItem label="是否开启位置跳转">
-          <Switch v-model:checked="mapSetData.isEnablePostionJump" />
-        </FormItem> -->
+          <Switch v-model:checked="mapConfig.isEnablePostionJump" />
+        </FormItem>
+      </a-card>
+
+
       </Form>
     </div>
   </PageWrapper>
@@ -161,145 +162,118 @@
   import { ShpLayerSourceLoadPage, GetTableAndViewColumnList } from '@/api/demo/formScheme';
   import { DeleteOutlined, PercentageOutlined ,PlusOutlined} from '@ant-design/icons-vue';
 
-  const mapConfig = reactive({
-    baseConfig:{
-      state:true,
-      width:50
-    },
-    viewerConfig:{
-      mode:"2D",
-      angle:90,
-      center:null,
-      zoom:12,
-      minZoom:3,
-      maxZoom:18
-    },
-    baseLayers:[
+  // const mapConfig = reactive({
+  //   baseConfig:{
+  //     state:true,
+  //     width:50
+  //   },
+  //   viewerConfig:{
+  //     mode:"2D",
+  //     angle:90,
+  //     center:null,
+  //     zoom:12,
+  //     minZoom:3,
+  //     maxZoom:18
+  //   },
+  //   baseLayers:[
+  //     {
+  //       name: '天地图底图图层',
+  //       show:false,
+  //       layer:{
+
+  //       }
+  //     },{
+  //       name: '天地图注记图层',
+  //       show:false,
+  //       layer:{
+          
+  //       }
+  //     },{
+  //       name: '高清影像图层',
+  //       show:false,
+  //       layer:{
+          
+  //       }
+  //     }
+  //   ],
+  //   layers:[
+  //     {
+  //       name: '违法建设图斑图层',
+  //       show:true,
+  //       layer:{
+          
+  //       }
+  //     },
+  //     {
+  //       name: '乱战耕地图斑图层',
+  //       show:false,
+  //       layer:{
+          
+  //       }
+  //     }
+  //   ]
+
+  // })
+
+  const  baseLayers = reactive([
       {
         name: '天地图底图图层',
+        show:false,
+        layer:{
+
+        }
       },{
         name: '天地图注记图层',
+        show:false,
+        layer:{
+          
+        }
       },{
         name: '高清影像图层',
+        show:false,
+        layer:{
+          
+        }
       }
-    ],
-    layers:[
-      {
-        name: '违法建设图斑图层',
-        age: 32,
-        address: '西湖区湖底公园1号',
-      },
-      {
-        name: '乱战耕地图斑图层',
-        age: 42,
-        address: '西湖区湖底公园1号',
-      }
-    ]
-
-  })
-
-  const dataSource = reactive([
-          {
-            key: '1',
-            name: '违法建设图斑图层',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '乱战耕地图斑图层',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-  ])
+    ])
 
   const columns = reactive([
-          {
-            title: '图层名称',
-            dataIndex: 'name',
-            key: 'name',
-          },
-          {
-            title: '默认',
-            dataIndex: 'show',
-            key: 'show',
-          },
-          {
-            title: '操作',
-            dataIndex: 'operation',
-            key: 'operation',
-          },
-        ])
+    {
+      title: '图层名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '默认',
+      dataIndex: 'show',
+      key: 'show',
+    },
+    {
+      title: '操作',
+      dataIndex: 'operation',
+      key: 'operation',
+    },
+  ])
+
   // config
   const config: any = inject('formConfig');
-  const mapSetData = ref(config.table.maps);
+  const mapConfig = ref(config.table.maps);
+  console.log("mapConfig2",mapConfig.value);
   watch(
     () => config.table.maps,
     () => {
-      mapSetData.value = config.table.maps;
+      mapConfig.value = config.table.maps;
     },
   );
-  const shpLayerSourceOptions: any = ref([]);
 
-  // 选择图层
-  async function getShpLayerSourceOptions() {
-    let options: any = await ShpLayerSourceLoadPage();
-    shpLayerSourceOptions.value = [];
-    options.items.forEach((e) => {
-      shpLayerSourceOptions.value.push({ label: e.name, value: e.relationTable, type: e.type });
-    });
-  }
-
-  function handleChangeDataTable(table) {
-    mapSetData.value.layerFields.dataTable = table;
-    shpLayerSourceOptions.value.forEach((item) => {
-      if (item.value == table) {
-        mapSetData.value.layerFields.type = item.type;
-      }
-    });
-    if (table) {
-      getShpLayerSource(table);
-    }
-  }
-  async function getShpLayerSource(table) {
-    let querys: any = {
-      dbCode: 'hcsystemdb',
-      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字段 下拉选项
-      mapSetData.value.layerFields.labelFieldOptions = labelFieldOptions;
-      // GID字段
-      mapSetData.value.layerFields.gidField = obj[0].column_name;
-      // Geom字段
-      mapSetData.value.layerFields.geomField = obj[1].column_name;
-      // 名称字段标注
-      mapSetData.value.layerFields.labelField = obj[2].column_name;
-    } else {
-      // GID字段/名称字段标注/Geom字段 下拉选项
-      mapSetData.value.layerFields.labelFieldOptions = [];
-      // GID字段
-      mapSetData.value.layerFields.gidField = '';
-      // Geom字段
-      mapSetData.value.layerFields.geomField = '';
-      // 名称字段标注
-      mapSetData.value.layerFields.labelField = '';
-
-      config.table.maps = mapSetData.value;
-    }
-  }
   onMounted(() => {
-    getShpLayerSourceOptions();
+
   });
 
   const removeLayer = (record)=>{
-    dataSource.splice(parseInt(record.key),1);
+   
   }
+
 </script>
 
 <style lang="less" scoped>