批量操作弹窗接口对接

src/api/demo/BatchProcessingModal.ts

@@ -6,7 +6,16 @@ enum Api {
   // 查询数据
   GetDataList = '/api/ApplicationData/GetDataList',
   // 批量修改
+  Upload = '/api/Files/Upload',
   UpdateBatch = '/api/ApplicationData/UpdateBatch',
+  // 批量导入shp
+  UploadShape1 = '/api/Layer/UploadShape1',
+  UploadExcelInsert = '/api/Layer/UploadExcelInsert',
+  // 批量更新shp
+  UploadShape2 = '/api/Layer/UploadShape2',
+  AddUploadExcel = '/api/Layer/AddUploadExcel',
+  // 批量更新
+  UpdateTableOriginalData = '/api/Layer/UpdateTableOriginalData',
 }
 
 export const GetTableColumnList = ( params: { tableName: string } ) =>
@@ -16,4 +25,47 @@ export const GetDataList = ( params ) =>
   defHttp.post({ url: Api.GetDataList, data: params });
 
 export const UpdateBatch = ( params ) =>
-  defHttp.post({ url: Api.UpdateBatch, data: params });
+  defHttp.post({ url: Api.UpdateBatch, data: params });
+export const Upload = (params) => 
+  defHttp.post({
+    url: Api.Upload,
+    params,
+    headers: {
+      'Content-type': 'multipart/form-data',
+    },
+  })
+export const UploadShape1 = (params: {zipFilePath: string, tableName: string}) =>
+  defHttp.post({
+    url: Api.UploadShape1,
+    params,
+    data: params
+  })
+export const UploadExcelInsert = (params: {File: FormData, tableName: string}) =>
+  defHttp.post({
+    url: Api.UploadExcelInsert,
+    params: {tableName: params.tableName},
+    data: params.File,
+    headers: {
+      'Content-type': 'multipart/form-data',
+    },
+  })
+export const UploadShape2 = (params: {zipFilePath: string, tableName: string}) =>
+  defHttp.post({
+    url: Api.UploadShape2,
+    params,
+    data: params
+  })
+export const AddUploadExcel = (params: {File: FormData, tableName: string}) =>
+  defHttp.post({
+    url: Api.AddUploadExcel,
+    params: {tableName: params.tableName},
+    data: params.File,
+    headers: {
+      'Content-type': 'multipart/form-data',
+    },
+  })
+export const UpdateTableOriginalData = (params: {tableName: string, list: Object}) =>
+  defHttp.post({
+    url: Api.UpdateTableOriginalData,
+    data: params
+  })

src/views/demo/layer/BatchProcessingModal/BatchOperationsComponent/index.vue

@@ -54,7 +54,7 @@
       </BasicTable>
     </div>
     <div class="footer">
-      <a-button class="operation-button">关闭</a-button>
+      <a-button class="operation-button" @click="emits('changeBatchProcessingModal',false)">关闭</a-button>
       <a-button type="primary" class="operation-button" @click="nextStep">下一步</a-button>
     </div>
   </div>
@@ -97,13 +97,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, h, defineProps, computed } from "vue"
+import { ref, h, defineProps, computed, defineEmits } from "vue"
 import { PlusOutlined } from '@ant-design/icons-vue';
 import { GetDataList, UpdateBatch } from '@/api/demo/BatchProcessingModal'
 import { BasicTable, useTable, TableAction } from '@/components/Table';
 import { numberOptions, stringOptions } from '@/views/demo/layer/BatchProcessingModal/util'
 import { message } from "ant-design-vue";
 const props = defineProps(['tableColumn','tableName'])
+const emits = defineEmits(['changeBatchProcessingModal'])
 const step = ref(0)
 const selectType = ref(0)
 const submitModal = ref(false)

src/views/demo/layer/BatchProcessingModal/ExportComponent/index.vue

@@ -50,7 +50,7 @@
       </div>
     </div>
     <div class="footer">
-      <a-button class="operation-button">关闭</a-button>
+      <a-button class="operation-button" @click="emits('changeBatchProcessingModal',false)">关闭</a-button>
       <a-button type="primary" class="operation-button" @click="firstSubmit">导出</a-button>
     </div>
   </div>
@@ -76,7 +76,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, h, defineProps } from "vue"
+import { ref, h, defineProps, defineEmits } from "vue"
 import { PlusOutlined } from '@ant-design/icons-vue';
 import axios from "axios";
 import { getAppEnvConfig } from '@/utils/env';
@@ -89,6 +89,7 @@ const fieId:any = ref([])
 const excelLoading = ref(false)
 const shpLoading = ref(false)
 const props = defineProps(['tableColumn','tableName'])
+const emits = defineEmits(['changeBatchProcessingModal'])
 const sqlValue = ref('')
 const filterList:any = ref([])
 const firstSubmit = () => {

src/views/demo/layer/BatchProcessingModal/ImportComponent/MergeSourceModal/index.vue

@@ -8,144 +8,44 @@
     <div class="comparison-div">
       <div style="flex: 1;padding-right: 10px;" >
         <div class="table-title">原数据</div>
-        <a-table ref="oldTable" :dataSource="dataSource" :columns="columns" :pagination="{ pageSize: 50 }"
+        <a-table rowKey="Id" ref="oldTable" :row-selection="oldRowSelection" :dataSource="props.originData" :columns="columns"
           :scroll="{ y: 472 }" :footer="null"  />
       </div>
       <div style="flex: 1;padding-left: 10px;" >
         <div class="table-title">新数据</div>
-        <a-table ref="newTable" :dataSource="dataSource" :columns="columns" :pagination="{ pageSize: 50 }"
+        <a-table rowKey="Id" ref="newTable" :row-selection="newRowSelection" :dataSource="props.nowData" :columns="columns"
           :scroll="{ y: 472 }" :footer="null"  />
       </div>
     </div>
     <div class="footer">
-      <a-button type="primary" class="operation-button">手动修改</a-button>
-      <a-button type="primary" class="operation-button">保留原数据</a-button>
-      <a-button type="primary" class="operation-button">使用新数据覆盖</a-button>
+      <a-button type="primary" v-if="!openSelectSave" class="operation-button" @click="openSelectSave = true">手动修改</a-button>
+      <a-button type="primary" v-if="!openSelectSave" class="operation-button" @click="saveOldValue">保留原数据</a-button>
+      <a-button type="primary" v-if="!openSelectSave" class="operation-button" @click="saveNewValue">使用新数据覆盖</a-button>
+      <a-button v-if="openSelectSave" class="operation-button" @click="openSelectSave = false">取消</a-button>
+      <a-button type="primary" v-if="openSelectSave" class="operation-button" @click="saveSelect">保存</a-button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, onMounted, onUnmounted, defineEmits } from "vue"
+import { ref, nextTick, onMounted, onUnmounted, defineEmits, defineProps, computed } from "vue"
+import { UpdateTableOriginalData} from '@/api/demo/BatchProcessingModal'
+import { message } from "ant-design-vue"
 const emits = defineEmits(['closemergeSourceModal'])
-const control = ref(0)
+const props = defineProps(['nowData','originData','tableColumn','tableName'])
 const oldTable = ref()
 const newTable = ref()
-const dataSource = ref([
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-        ])
-const columns = ref([
-          {
-            title: '姓名',
-            dataIndex: 'name',
-            key: 'name',
-          },
-          {
-            title: '年龄',
-            dataIndex: 'age',
-            key: 'age',
-          },
-          {
-            title: '住址',
-            dataIndex: 'address',
-            key: 'address',
-          },
-        ])
+const openSelectSave = ref(false)
+const selectOldValue = ref([])
+const selectNewValue = ref([])
+const columns = computed(() => {
+  return props.tableColumn.map(item => {
+    return {
+      title: item.label.match(/[(（](.*?)[)）]/)[1],
+      dataIndex: item.value,
+    }
+  })
+})
 onMounted(() => {
   nextTick(() => {
     const oldTableBody = oldTable.value?.$el.querySelector('.ant-table-body')
@@ -160,6 +60,66 @@ onMounted(() => {
     }
   })
 })
+const saveNewValue = () => {
+  let resultParams = {
+    tableName: props.tableName,
+    list: []
+  }
+  if(props.nowData.length > 0){
+    resultParams.list = props.nowData
+  }
+  UpdateTableOriginalData(resultParams).then(lastResult => {
+    message.success('更新成功')
+    emits('closemergeSourceModal')
+  })
+}
+const saveOldValue = () => {
+  let resultParams = {
+    tableName: props.tableName,
+    list: []
+  }
+  if(props.originData.length > 0){
+    resultParams.list = props.originData
+  }
+  UpdateTableOriginalData(resultParams).then(lastResult => {
+    message.success('更新成功')
+    emits('closemergeSourceModal')
+  })
+}
+const newRowSelection = computed(() => {
+  if(openSelectSave.value){
+    return {
+      onChange: (selectedRowKeys, selectedRows) => {
+        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        selectNewValue.value = selectedRows
+      },
+    }
+  }
+  return false
+})
+
+const oldRowSelection = computed(() => {
+  if(openSelectSave.value){
+    return {
+      onChange: (selectedRowKeys, selectedRows) => {
+        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        selectOldValue.value = selectedRows
+      },
+    }
+  }
+  return false
+})
+
+const saveSelect = () => {
+  let resultParams = {
+    tableName: props.tableName,
+    list: [...selectOldValue.value, ...selectNewValue.value]
+  }
+  UpdateTableOriginalData(resultParams).then(lastResult => {
+    message.success('更新成功')
+    emits('closemergeSourceModal')
+  })
+}
 onUnmounted(() => {
 
 })
@@ -203,6 +163,9 @@ onUnmounted(() => {
       font-size: 20px;
       margin-bottom: 10px;
     }
+    :deep(.ant-table-body){
+      height: 472px;
+    }
   }
   .footer{
     width: 100%;

src/views/demo/layer/BatchProcessingModal/ImportComponent/index.vue

@@ -6,23 +6,32 @@
           <div class="upload-image"></div>
           <div class="upload-span">上传shp/Excel文件</div>
           <div class="upload-button-div">
-            <a-button type="primary" class="upload-button" :icon="h(PlusOutlined)" @click="procedure++">上传</a-button>
+            <a-upload
+              :accept="'.xlsx,.csv,.xls,.zip'"
+              :showUploadList="false"
+              :custom-request="customRequest"
+            >
+              <a-button type="primary" class="upload-button" :icon="h(PlusOutlined)">上传</a-button>
+            </a-upload>
           </div>
         </div>
       </div>
-      <div class="procedure-1" v-if="procedure == 1">
-        <a-table :dataSource="dataSource" :columns="columns" :pagination="{ pageSize: 50 }"
-        :scroll="{ y: 490 }" :footer="null"/>
-      </div>
     </div>
     <div class="footer">
-      <a-button v-if="procedure == 1" type="primary" class="operation-button">重新上传</a-button>
-      <a-button class="operation-button">关闭</a-button>
-      <a-button v-if="procedure == 0" class="operation-button">取消</a-button>
+      <a-upload
+        :accept="'.xlsx,.csv,.xls,.zip'"
+        :showUploadList="false"
+        :custom-request="customRequest"
+      >
+        <a-button v-if="procedure == 1" type="primary" class="operation-button">重新上传</a-button>
+      </a-upload>
+      <a-button class="operation-button" @click="emits('changeBatchProcessingModal',false)">关闭</a-button>
+      <a-button v-if="procedure == 0" class="operation-button" @click="emits('changeBatchProcessingModal',false)">取消</a-button>
       <a-button v-if="procedure == 1" type="primary" class="operation-button" @click="submit">导入</a-button>
     </div>
   </div>
   <a-modal
+      wrapClassName="batch-modal-wrap"
       class="BatchProcessingModal"
       width="1660px"
       v-model:open="mergeSourceModal"
@@ -31,139 +40,75 @@
       :destroyOnClose="true"
       style="top: 50px"
     >
-    <MergeSourceModal @closemergeSourceModal="closemergeSourceModal"/>
+    <MergeSourceModal
+      :tableName="props.tableName"
+      :nowData="nowData"
+      :originData="originData"
+      :tableColumn="props.tableColumn"
+      @closemergeSourceModal="closemergeSourceModal"/>
     </a-modal>
 </template>
 
 <script setup lang="ts">
-import { ref, h, } from "vue"
+import { ref, h, defineProps, defineEmits } from "vue"
 import { PlusOutlined } from '@ant-design/icons-vue';
 import MergeSourceModal from './MergeSourceModal/index.vue'
+import { UploadShape1, Upload, UploadExcelInsert } from '@/api/demo/BatchProcessingModal'
+import { message } from "ant-design-vue";
 
-
+const props = defineProps(['tableName','tableColumn'])
+const emits = defineEmits(['changeBatchProcessingModal'])
 const procedure = ref(0)
 const mergeSourceModal = ref(false)
-const dataSource = ref([
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-        ])
-const columns = ref([
-          {
-            title: '姓名',
-            dataIndex: 'name',
-            key: 'name',
-          },
-          {
-            title: '年龄',
-            dataIndex: 'age',
-            key: 'age',
-          },
-          {
-            title: '住址',
-            dataIndex: 'address',
-            key: 'address',
-          },
-        ])
+const nowData = ref([])
+const originData = ref([])
 const submit = () => {
   mergeSourceModal.value = true
 }
 const closemergeSourceModal = () => {
   mergeSourceModal.value = false
 }
+const customRequest = (file) => {
+  console.log('handleCustomRequest',file)
+  
+  const name = file.file.name.toLowerCase();
+  if (name.endsWith('.zip')){
+    const formData = new FormData()
+    formData.append('files', file.file)
+    Upload(formData).then(res => {
+      console.log(res)
+      const filePath = res[0].filePath
+      let params = {
+        tableName: props.tableName,
+        zipFilePath: filePath
+      }
+      UploadShape1(params).then(result => {
+        if(result.nowData.length > 0){
+          nowData.value = result.nowData
+          originData.value = result.originData
+          mergeSourceModal.value = true
+        }else{
+          message.success('导入成功')
+        }
+      })
+    })
+  }else{
+    const formData = new FormData()
+    formData.append('file', file.file)
+    UploadExcelInsert({File: formData, tableName: props.tableName}).then(res => {
+      console.log('res',res)
+      if(res.nowData.length > 0){
+        nowData.value = res.nowData
+        originData.value = res.originData
+        mergeSourceModal.value = true
+      }else{
+        message.success('导入成功')
+      }
+    })
+  }
+  // procedure.value ++
+  return false
+}
 </script>
 
 <style lang="scss" scoped>

src/views/demo/layer/BatchProcessingModal/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="title">
     批量操作
-    <div class="close-button" @click="emits('changeBatchProcessingModal')"></div>
+    <div class="close-button" @click="emits('changeBatchProcessingModal',false)"></div>
   </div>
   <div class="modal-content">
     <div class="control-button-div">
@@ -11,10 +11,10 @@
       <div :class="`control-button ${control == 3? 'active': ''}`" @click="changeControl(3)">批量操作</div>
     </div>
     <div class="content">
-      <ImportComponent v-if="control == 0"/>
-      <UpdateComponent v-if="control == 1"/>
-      <ExportComponent :tableName="props.tableName" :tableColumn="tableColumn" v-if="control == 2"/>
-      <BatchOperationsComponent :tableName="props.tableName" :tableColumn="tableColumn" v-if="control == 3"/>
+      <ImportComponent @changeBatchProcessingModal="changeBatchProcessingModal" :tableName="props.tableName" :tableColumn="tableColumn" v-if="control == 0"/>
+      <UpdateComponent @changeBatchProcessingModal="changeBatchProcessingModal" :tableName="props.tableName" :tableColumn="tableColumn" v-if="control == 1"/>
+      <ExportComponent @changeBatchProcessingModal="changeBatchProcessingModal" :tableName="props.tableName" :tableColumn="tableColumn" v-if="control == 2"/>
+      <BatchOperationsComponent @changeBatchProcessingModal="changeBatchProcessingModal" :tableName="props.tableName" :tableColumn="tableColumn" v-if="control == 3"/>
     </div>
   </div>
 </template>
@@ -47,6 +47,9 @@ onMounted(() => {
 const changeControl  = (type) => {
   control.value = type
 }
+const changeBatchProcessingModal = (type: boolean) => {
+  emits('changeBatchProcessingModal', type)
+}
 </script>
 
 <style lang="scss" scoped>