Merge branch 'master' of http://218.59.175.43:3000/zhangzl/rongxin.dashboard

package.json

@@ -33,6 +33,7 @@
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "jquery": "^3.7.1",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",

rongxin.dashboard.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

src/api/business/cjqy.js

@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+
+// 查询村级区域列表
+export function listCjqy(query) {
+  return request({
+    url: '/business/cjqy/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询村级区域详细
+export function getCjqy(fid) {
+  return request({
+    url: '/business/cjqy/' + fid,
+    method: 'get'
+  })
+}
+
+// 查询村级区域详细
+export function getCjqyDetail(fid) {
+  return request({
+    url: '/business/cjqy/detail/' + fid,
+    method: 'get'
+  })
+}
+
+
+// 新增村级区域
+export function addCjqy(data) {
+  return request({
+    url: '/business/cjqy/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改村级区域
+export function updateCjqy(data) {
+  return request({
+    url: '/business/cjqy/update',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除村级区域
+export function delCjqy(fid) {
+  return request({
+    url: '/business/cjqy/delete/' + fid,
+    method: 'get'
+  })
+}
+
+// 打印村级区域
+export function printCjqy(query) {
+  return request({
+    url: '/business/cjqy/print',
+    method: 'get',
+    params: query
+  })
+}

src/api/business/export.js

@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+
+// 查询导出任务列表
+export function listExport(query) {
+  return request({
+    url: '/business/export/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询导出任务详细
+export function getExport(id) {
+  return request({
+    url: '/business/export/' + id,
+    method: 'get'
+  })
+}
+
+// 查询导出任务详细
+export function getExportDetail(id) {
+  return request({
+    url: '/business/export/detail/' + id,
+    method: 'get'
+  })
+}
+
+
+// 新增导出任务
+export function addExport(data) {
+  return request({
+    url: '/business/export/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改导出任务
+export function updateExport(data) {
+  return request({
+    url: '/business/export/update',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除导出任务
+export function delExport(id) {
+  return request({
+    url: '/business/export/delete/' + id,
+    method: 'get'
+  })
+}
+
+// 打印导出任务
+export function printExport(query) {
+  return request({
+    url: '/business/export/print',
+    method: 'get',
+    params: query
+  })
+}

src/api/business/import.js

@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+
+// 查询导入任务列表
+export function listImport(query) {
+  return request({
+    url: '/business/import/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询导入任务详细
+export function getImport(id) {
+  return request({
+    url: '/business/import/' + id,
+    method: 'get'
+  })
+}
+
+// 查询导入任务详细
+export function getImportDetail(id) {
+  return request({
+    url: '/business/import/detail/' + id,
+    method: 'get'
+  })
+}
+
+
+// 新增导入任务
+export function addImport(data) {
+  return request({
+    url: '/business/import/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改导入任务
+export function updateImport(data) {
+  return request({
+    url: '/business/import/update',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除导入任务
+export function delImport(id) {
+  return request({
+    url: '/business/import/delete/' + id,
+    method: 'get'
+  })
+}
+
+// 打印导入任务
+export function printImport(query) {
+  return request({
+    url: '/business/import/print',
+    method: 'get',
+    params: query
+  })
+}

src/api/business/xjqy.js

@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+
+// 查询乡级区域列表
+export function listXjqy(query) {
+  return request({
+    url: '/business/xjqy/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询乡级区域详细
+export function getXjqy(fid) {
+  return request({
+    url: '/business/xjqy/' + fid,
+    method: 'get'
+  })
+}
+
+// 查询乡级区域详细
+export function getXjqyDetail(fid) {
+  return request({
+    url: '/business/xjqy/detail/' + fid,
+    method: 'get'
+  })
+}
+
+
+// 新增乡级区域
+export function addXjqy(data) {
+  return request({
+    url: '/business/xjqy/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改乡级区域
+export function updateXjqy(data) {
+  return request({
+    url: '/business/xjqy/update',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除乡级区域
+export function delXjqy(fid) {
+  return request({
+    url: '/business/xjqy/delete/' + fid,
+    method: 'get'
+  })
+}
+
+// 打印乡级区域
+export function printXjqy(query) {
+  return request({
+    url: '/business/xjqy/print',
+    method: 'get',
+    params: query
+  })
+}

src/api/business/xjxzq.js

@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+
+// 查询县级区域列表
+export function listXjxzq(query) {
+  return request({
+    url: '/business/xjxzq/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询县级区域详细
+export function getXjxzq(fid) {
+  return request({
+    url: '/business/xjxzq/' + fid,
+    method: 'get'
+  })
+}
+
+// 查询县级区域详细
+export function getXjxzqDetail(fid) {
+  return request({
+    url: '/business/xjxzq/detail/' + fid,
+    method: 'get'
+  })
+}
+
+
+// 新增县级区域
+export function addXjxzq(data) {
+  return request({
+    url: '/business/xjxzq/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改县级区域
+export function updateXjxzq(data) {
+  return request({
+    url: '/business/xjxzq/update',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除县级区域
+export function delXjxzq(fid) {
+  return request({
+    url: '/business/xjxzq/delete/' + fid,
+    method: 'get'
+  })
+}
+
+// 打印县级区域
+export function printXjxzq(query) {
+  return request({
+    url: '/business/xjxzq/print',
+    method: 'get',
+    params: query
+  })
+}

src/api/resource/land.js

@@ -0,0 +1,70 @@
+import request from '@/utils/request'
+
+// 查询地块属性列表
+export function listLand(query) {
+  return request({
+    url: '/resource/land/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询地块属性详细
+export function getLand(fid) {
+  return request({
+    url: '/resource/land/' + fid,
+    method: 'get'
+  })
+}
+
+// 查询地块属性详细
+export function getLandDetail(fid) {
+  return request({
+    url: '/resource/land/detail/' + fid,
+    method: 'get'
+  })
+}
+
+// 查询地块经营详细
+export function getLandDetailByDkbm(dkbm) {
+  return request({
+    url: '/resource/land/detailByDkbm/' + dkbm,
+    method: 'get'
+  })
+}
+
+
+// 新增地块属性
+export function addLand(data) {
+  return request({
+    url: '/resource/land/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改地块属性
+export function updateLand(data) {
+  return request({
+    url: '/resource/land/update',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除地块属性
+export function delLand(fid) {
+  return request({
+    url: '/resource/land/delete/' + fid,
+    method: 'get'
+  })
+}
+
+// 打印地块属性
+export function printLand(query) {
+  return request({
+    url: '/resource/land/print',
+    method: 'get',
+    params: query
+  })
+}

src/api/resource/operation.js

@@ -0,0 +1,70 @@
+import request from '@/utils/request'
+
+// 查询地块经营列表
+export function listOperation(query) {
+  return request({
+    url: '/resource/operation/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询地块经营详细
+export function getOperation(id) {
+  return request({
+    url: '/resource/operation/' + id,
+    method: 'get'
+  })
+}
+
+// 查询地块经营详细
+export function getOperationDetail(id) {
+  return request({
+    url: '/resource/operation/detail/' + id,
+    method: 'get'
+  })
+}
+
+// 查询地块经营详细
+export function getOperationDetailByDkbm(dkbm) {
+  return request({
+    url: '/resource/operation/detailByDkbm/' + dkbm,
+    method: 'get'
+  })
+}
+
+
+// 新增地块经营
+export function addOperation(data) {
+  return request({
+    url: '/resource/operation/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改地块经营
+export function updateOperation(data) {
+  return request({
+    url: '/resource/operation/update',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除地块经营
+export function delOperation(id) {
+  return request({
+    url: '/resource/operation/delete/' + id,
+    method: 'get'
+  })
+}
+
+// 打印地块经营
+export function printOperation(query) {
+  return request({
+    url: '/resource/operation/print',
+    method: 'get',
+    params: query
+  })
+}

src/api/system/menuapp.js

@@ -17,11 +17,19 @@ export function getMenuapp(id) {
   })
 }
 
+// 查询手机菜单详细
+export function getMenuappDetail(id) {
+  return request({
+    url: '/system/menuapp/detail/' + id,
+    method: 'get'
+  })
+}
+
 
 // 新增手机菜单
 export function addMenuapp(data) {
   return request({
-    url: '/system/menuapp',
+    url: '/system/menuapp/add',
     method: 'post',
     data: data
   })
@@ -30,8 +38,8 @@ export function addMenuapp(data) {
 // 修改手机菜单
 export function updateMenuapp(data) {
   return request({
-    url: '/system/menuapp',
-    method: 'put',
+    url: '/system/menuapp/update',
+    method: 'post',
     data: data
   })
 }
@@ -39,8 +47,8 @@ export function updateMenuapp(data) {
 // 删除手机菜单
 export function delMenuapp(id) {
   return request({
-    url: '/system/menuapp/' + id,
-    method: 'delete'
+    url: '/system/menuapp/delete/' + id,
+    method: 'get'
   })
 }
 

src/components/FileUpload/index.vue

@@ -20,10 +20,9 @@
       <el-button size="mini" type="primary">选取文件</el-button>
       <!-- 上传提示 -->
       <div class="el-upload__tip" slot="tip" v-if="showTip">
-        请上传
-        <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-        <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
-        的文件
+        <template v-if="fileSize"> 大小: ≤ <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+        <template v-if="fileType"> 格式: <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+
       </div>
     </el-upload>
 

src/components/ImageUpload/index.vue

@@ -24,10 +24,8 @@
 
     <!-- 上传提示 -->
     <div class="el-upload__tip" slot="tip" v-if="showTip && !disabled">
-      请上传
-      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
-      的文件
+      <template v-if="fileSize"> 大小: ≤ <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+      <template v-if="fileType"> 格式: <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
     </div>
 
     <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>

src/components/house/MapField.vue

@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <div :id="'map-element' + elementId" class="map-element" style="width: 100%; height: 100%;"></div>
+    <div :id="'draw-toolbar' + elementId" class='draw-toolbar' v-show="allowDraw">
+      <el-row>
+        <input :id="'drawPolygon' + elementId" class="ant-btn ant-btn-red" type="button" value="画图"/>&nbsp;&nbsp;
+        <input :id="'drawRemove' + elementId" type="button" class="ant-btn ant-btn-red" value="取消画图"/>&nbsp;&nbsp;
+        <input :id="'drawReset' + elementId" type="button" class="ant-btn ant-btn-red" value="重置画图"/>
+      </el-row>
+    </div>
+    <div :id="'mark-toolbar' + elementId" class='draw-toolbar' v-show="allowMark">
+      <el-row>
+        <input :id="'markPoint' + elementId" class="ant-btn ant-btn-red" type="button" value="标记"/>&nbsp;&nbsp;
+        <input :id="'markReset' + elementId" type="button" class="ant-btn ant-btn-red" value="重置标记"/>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  import $ from "jquery";
+  import {olMap} from "@/utils/ol_map";
+
+  const TYPE_NONE = 0; // 无交互 默认
+  const TYPE_DRAW = 1; // 绘制多边形 v-model为MultiPolygon的JSON
+  const TYPE_SELECT = 2; // 选择, 必须指定list属性 v-model为list索引, 未选中为-1
+  const TYPE_MARK = 3; // 标记点 v-model为[经度, 维度]数组
+
+  export default {
+    name: "MapField",
+    props: {
+      minMapZoom: {
+        type: Number,
+        default: 16,
+      },
+      maxMapZoom: {
+        type: Number,
+        default: 18.9,
+      },
+      allowDraw: {
+        type: Boolean,
+        default: false,
+      },
+      type: {
+        type: [Number, String], // 0 原始 1 绘制 2 选择
+        default: 0,
+      },
+      coord: {
+        type: Array,
+        default: function() {
+          return [115.452752, 31.789033];
+        },
+      },
+      value: {
+        type: [String, Array, Number],
+      },
+      list: {
+        type: Array,
+        default: function() {
+          return [];
+        },
+      },
+      allowSelect: {
+        type: Boolean,
+        default: false,
+      },
+      allowMark: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        isInited: false,
+        mapObject: null,
+        mapResult: null,
+        elementId: ('_' + Math.random()).replaceAll('.', ''),
+        internalValue: null, // string only
+      };
+    },
+    created() {
+    },
+    mounted() {
+      this.Init();
+      this.SetupCoord();
+      if(this.list)
+        this.mapObject.SetLayers(this.list);
+      if(this.value)
+        this.SetValue(this.value);
+    },
+    watch: {
+      value: function(newVal, oldVal) {
+        this.SetValue(newVal);
+      },
+      coord: {
+        handler: function(newVal, oldVal) {
+          this.SetupCoord();
+        },
+        deep: true,
+      },
+      list: {
+        handler: function(newVal, oldVal) {
+          if(this.type == TYPE_SELECT)
+          {
+            this.mapObject.ClearSelection();
+            this.mapObject.SetLayers(newVal);
+            if(this.internalValue >= 0 && this.internalValue < this.list.length)
+              this.mapObject.SetSelection(this.list[this.internalValue].name);
+          }
+        },
+        deep: true,
+      },
+    },
+    methods: {
+      SetValue(val) {
+        if(this.internalValue === val)
+          return;
+        this.internalValue = val;
+        this.UpdateValueToMap();
+      },
+      UpdateValueToMap() {
+        this.SetupCoord();
+        if(this.type == TYPE_SELECT)
+        {
+          this.mapObject.ClearSelection();
+          if(this.internalValue >= 0 && this.internalValue < this.list.length)
+            this.mapObject.SetSelection(this.list[this.internalValue].name);
+        }
+        else if(this.type == TYPE_MARK)
+        {
+          this.mapObject.RemoveDrawLayer();
+          if(this.internalValue && this.internalValue.length > 0)
+          {
+            let json = olMap.gen_polygon([this.internalValue]);
+            this.mapObject.SetLayer(olMap.MAP_FIELD_INIT_LAYER_NAME, json, null, null, {
+              'style.stroke.width': 10,
+              'style.stroke.color': '#FF0000',
+            });
+          }
+          else
+            this.mapObject.PopLayer(olMap.MAP_FIELD_INIT_LAYER_NAME);
+        }
+        else
+        {
+          this.mapObject.RemoveDrawLayer();
+          this.mapObject.SetLayer(olMap.MAP_FIELD_INIT_LAYER_NAME, this.internalValue);
+        }
+      },
+      Init() {
+        if(this.isInited)
+          return;
+        this.mapObject = new olMap('map-element' + this.elementId);
+        if(this.type == TYPE_DRAW)
+        {
+          this.mapObject.SetAllowDraw(this.allowDraw);
+          let self = this;
+          $("#drawPolygon" + this.elementId).click(function () {
+            self.mapObject.StartDraw();
+          });
+          //清除画图鼠标点击事件
+          $("#drawRemove" + this.elementId).click(function () {
+            self.mapObject.ClearDraw();
+          });
+          //还原之前图层
+          $("#drawReset" + this.elementId).click(function () {
+            self.mapObject.ResetDraw();
+          });
+          this.mapObject.SetCallback("draw::start", () => {
+            this.mapResult = null;
+          });
+          this.mapObject.SetCallback("draw::remove", () => {
+          });
+          this.mapObject.SetCallback("draw::end", (res) => {
+            this.mapResult = res;
+            this.SetInternalValue();
+          });
+          this.mapObject.SetCallback("draw::reset", () => {
+            this.mapResult = null;
+          });
+        }
+        else if(this.type == TYPE_SELECT)
+        {
+          this.mapObject.SetAllowSelect(this.allowSelect);
+          this.mapObject.SetCallback("interactive::select", (name) => {
+            console.log('select -> ' + name);
+            this.mapResult = name;
+            this.SetInternalValue();
+            this.$emit('select', name);
+          });
+        }
+        else if(this.type == TYPE_MARK)
+        {
+          this.mapObject.SetAllowMark(this.allowMark);
+          let self = this;
+          $("#markPoint" + this.elementId).click(function () {
+            self.mapObject.StartMark();
+          });
+          //还原之前图层
+          $("#markReset" + this.elementId).click(function () {
+            self.mapObject.ResetMark();
+          });
+          this.mapObject.SetCallback("mark::start", () => {
+            this.mapResult = null;
+          });
+          this.mapObject.SetCallback("mark::end", (res) => {
+            this.mapResult = res;
+            this.SetInternalValue();
+          });
+          this.mapObject.SetCallback("mark::reset", () => {
+            this.mapResult = null;
+          });
+        }
+        this.isInited = true;
+        if(this.internalValue)
+          this.UpdateValueToMap();
+      },
+      DestroyMap() {
+        if(!this.mapObject)
+          return;
+        //delete this.mapObject;
+        this.mapObject.DestroyMap();
+        this.mapObject = null;
+      },
+      SetInternalValue() {
+        if(this.type == TYPE_SELECT)
+        {
+          this.internalValue = this.mapResult;
+          if(this.mapResult)
+            this.internalValue = this.list.findIndex((x) => x.name == this.mapResult);
+          else
+            this.internalValue = -1;
+          this.$emit('input', this.internalValue);
+        }
+        else if(this.type == TYPE_MARK)
+        {
+          this.internalValue = this.mapResult ? this.mapResult : [null, null];
+          this.$emit('input', this.internalValue);
+        }
+        else
+        {
+          this.internalValue = JSON.stringify(this.mapResult);
+          this.$emit('input', this.internalValue);
+        }
+        //console.log(this.type, this.mapResult, this.internalValue);
+      },
+      Update() {
+        if(this.mapObject)
+          this.mapObject.Update();
+      },
+      SetupCoord() {
+        if(this.mapObject && this.coord && this.coord.length >= 2 && this.coord[0] && this.coord[1])
+          this.mapObject.SetCoord(this.coord[0], this.coord[1]);
+      }
+    },
+  }
+</script>
+
+<style scoped>
+
+  .map-element {
+    width: 100%;
+    height: 100%;
+  }
+
+  .draw-toolbar {
+    position: relative;
+    width: 40%;
+    left: 60%;
+    bottom: 95%;
+    z-index: 2000;
+  }
+
+  .ant-btn-red {
+    position: relative;
+    display: inline-block;
+    background: #D0EEFF;
+    border: 1px solid #99D3F5;
+    border-radius: 4px;
+    padding: 4px 12px;
+    overflow: hidden;
+    color: #1E88C7;
+    text-decoration: none;
+    text-indent: 0;
+    line-height: 20px;
+  }
+</style>

src/utils/ol_map.js

@@ -0,0 +1,727 @@
+
+const MAP_FIELD_DRAW_LAYER_NAME = '_Draw_layer';
+const MAP_FIELD_INIT_LAYER_NAME = '_Init_layer';
+
+export const olMap = function(selector) {
+  this.selector = selector;
+  this.mapObject = null;
+  this.minMapZoom = 16;
+  this.maxMapZoom = 18;
+  this.allowDraw = false;
+  this.allowSelect = false;
+  this.allowMark = false;
+  this.coord = [115.452752, 31.789033];
+  this.isInited = false;
+  this.error = null;
+  this.userLayers = [];
+  this.callback = {
+    'draw::start': [],
+    'draw::end': [],
+    'draw::remove': [],
+    'draw::reset': [],
+    'interactive::select': [],
+    'mark::start': [],
+    'mark::end': [],
+    'mark::reset': [],
+  };
+  // 当前支持的配置和默认值, 支持.拼接的字符串作为键(只能一级)
+  const SUPPORT_CONFIG = {
+    style: {
+      fill: {
+        color: 'rgba(204, 255, 204, 0.3)', // 多边形填充颜色
+        'color::SELECTED': "rgb(204, 255, 255, 0.5)", // 选择模式下选中时的多边形填充颜色
+      },
+      stroke: {
+        color: '#47c68f', // 线颜色
+        width: 3, // 线宽
+        'color::SELECTED': '#00FFFF', // 选择模式下选中时的线颜色
+        'width::SELECTED': 8, // 选择模式下选中时的线宽
+      },
+      text: {
+        font: 'normal 12px 微软雅黑', // 字体
+        fill: {
+          color: '#FF0000', // 文字颜色
+        }
+      }
+    }
+  };
+  this.drawResult = null;
+  this.draw = null;
+  this.currentSelect = null;
+  this.markResult = null;
+
+  this.__ASSERT = function(cond, msg) {
+    if(!cond)
+      this.__SetError(msg || '错误');
+    return !!cond;
+  };
+  // 设置回调
+  this.SetCallback = function(type, func) {
+    if(!func || !this.callback.hasOwnProperty(type))
+      return false;
+    let arr = this.callback[type];
+    if(arr.includes(func))
+      return false;
+    arr.push(func);
+    return func;
+  };
+  // 移除回调, 函数为空则移除该回调类型下的所有函数
+  this.RemoveCallback = function(type, func = null) {
+    if(!this.callback.hasOwnProperty(type))
+      return false;
+    if(func)
+    {
+      let arr = this.callback[type];
+      let index = arr.indexOf(func);
+      if(index >= 0)
+      {
+        arr.splice(index, 1);
+        return true;
+      }
+      return false;
+    }
+    else
+    {
+      this.callback[type] = [];
+      return true;
+    }
+  };
+  // 清空全部回调
+  this.ClearCallback = function() {
+    for(let k in this.callback)
+      this.callback[k] = [];
+  };
+  // private 调用回调
+  this.__Callback = function(type/*, 其他参数 */) {
+    let args = [];
+    for(let i = 1; i < arguments.length; i++)
+      args.push(arguments[i]);
+    this.callback[type].forEach((x) => x(...args));
+  };
+  // private 请求必须初始化, 未初始化则错误
+  this.__RequireInited = function() {
+    return this.__ASSERT(this.IsInited(), '地图未初始化');
+  };
+  // private 设置当前错误, 并抛出错误
+  this.__SetError = function(err) {
+    this.error = err;
+    if(this.error)
+    {
+      console.error(err);
+      throw this.error;
+    }
+  };
+  // 是否完成初始化
+  this.IsInited = function() {
+    return this.mapObject !== null;
+  };
+  // 初始化, 如果已初始化则错误
+  this.Init = function() {
+    this.__ASSERT(!this.IsInited(), '已经初始化');
+    this.__CreateMap(this.selector);
+    this.isInited = true;
+  };
+  // 销毁地图对象, 如果未初始化则返回
+  this.DestroyMap = function() {
+    if(!this.IsInited())
+      return;
+    this.ClearCallback();
+    this.userLayers = [];
+    //delete this.mapObject;
+    document.querySelector('#' + this.selector).innerHTML = '';
+    this.mapObject = null;
+  };
+  // private 创建地图元素, 已初始化则错误, 元素ID未指定则错误
+  this.__CreateMap = function() {
+    this.__ASSERT(!this.IsInited(), '已经初始化');
+    this.__ASSERT(this.selector, '元素ID缺失');
+
+    let projection = new ol.proj.Projection({
+      //地图投影类型
+      code: "EPSG:3857",
+      units: "degrees",
+      //extent:extent
+    });
+    let aerial = new ol.layer.Tile({
+      source: new ol.source.XYZ({
+        url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
+          "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
+          "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
+      }),
+      isGroup: true,
+      name: "卫星影像图",
+    });
+
+    let yingxzi = new ol.layer.Tile({
+      source: new ol.source.XYZ({
+        url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
+      }),
+      isGroup: true,
+      name: "天地图文字标注--卫星影像图",
+    });
+
+    //加载地图
+    let map = new ol.Map({
+      // interactions: ol.interaction.DragPan({
+      //   onFocusOnly: false
+      // }),
+      controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
+      layers: [aerial, yingxzi],
+      projection: projection,
+      target: this.selector,
+      logo: 'false',
+      view: new ol.View({
+        center: ol.proj.fromLonLat(this.coord),
+        //zoom: false,
+        zoom: 17.9,
+        minZoom: this.minMapZoom, //地图缩小限制
+        maxZoom: this.maxMapZoom, //地图放大限制
+      }),
+    });
+
+    this.mapObject = map;
+    //console.log(map, map.getProperties());
+  };
+  // 获取配置值
+  this.__GetConfig = function(config, name, defVal) {
+    if(!config || typeof(config) !== 'object')
+      return defVal;
+    if(config.hasOwnProperty(name))
+      return config[name];
+    let arr = name.split('.');
+    let ptr = config;
+    for(let i in arr)
+    {
+      ptr = ptr[arr[i]];
+      //console.log(arr[i], JSON.stringify(ptr));
+      if(!ptr)
+        break;
+    }
+    //console.log(`__GetConfig(${name}) -> ${ptr}`);
+    if(ptr === undefined || ptr === null || ptr === '')
+      return defVal;
+    return ptr;
+  };
+  // 获取默认配置值
+  this.GetDefaultConfig = function(name) {
+    let arr = name.split('.');
+    let ptr = SUPPORT_CONFIG;
+    for(let i in arr)
+    {
+      ptr = ptr[arr[i]];
+      if(!ptr)
+        break;
+    }
+    return ptr;
+  };
+  // 设置当前坐标点
+  this.SetCoord = function(lng, lat) {
+    this.__RequireInited();
+    this.mapObject.getView().setCenter(ol.proj.fromLonLat([lng, lat]));
+    //console.log('SetCoord', lng, lat,this.mapObject);
+    return true;
+  };
+  // 获取地图投影对象
+  this.GetProjection = function() {
+    this.__RequireInited();
+    return this.mapObject.get('view').getProjection();
+  };
+  // 检查名称是否存在
+  this.ExistsName = function(name) {
+    if(this.userLayers.length === 0)
+      return false;
+    let res = this.userLayers.findIndex((x) => {
+      return x.name === name;
+    });
+    return res !== -1;
+  };
+  // private 检查名称是否存在, 存在则错误
+  this.__CheckNameExists = function(name) {
+    return this.__ASSERT(!this.ExistsName(name), `标识重复: ${name}`);
+  };
+  // private 放入图层, 名称存在则错误
+  this.__PushLayer = function(name, layer, title = null, data = null, config = null) {
+    this.__RequireInited();
+    this.__CheckNameExists(name);
+    this.mapObject.addLayer(layer);
+    //console.log(name, layer);
+    this.userLayers.push({
+      name: name,
+      layer: layer,
+      visible: true,
+      title: title,
+      data: data,
+      config: config,
+    });
+    return true;
+  };
+  // 根据索引获取图层, 索引可为负数, 索引无效则错误
+  this.GetLayer = function(index) {
+    if(this.userLayers.length === 0)
+      return null;
+    let i = index < 0 ? this.userLayers.length + index : index;
+    this.__ASSERT(i >= 0 && i < this.userLayers.length, `无效索引: ${index}`);
+    return this.userLayers[i];
+  };
+  // 根据名称查找图层, 名称不存在返回null
+  this.FindLayer = function(name) {
+    if(this.userLayers.length === 0)
+      return null;
+    return this.userLayers.find((x) => x.name === name);
+  };
+  // private 搜索图层, 索引/名称, orFail为真, 则未找到时错误
+  this.__SearchLayer = function(name, orFail = false) {
+    let layer = null;
+    let index = -1;
+    if(typeof(name) === 'number')
+    {
+      let i = name < 0 ? this.userLayers.length + name : name;
+      if(i >= 0 && i < this.userLayers.length)
+      {
+        layer = this.userLayers[i];
+        index = i;
+      }
+    }
+    else
+    {
+      let i = this.userLayers.findIndex((x) => x.name === name);
+      if(i >= 0)
+      {
+        layer = this.userLayers[i];
+        index = i;
+      }
+    }
+    if(orFail && index === -1)
+      this.__SetError(`未找到图层: ${name}(${typeof(name)})`);
+    return [layer, index];
+  };
+  // 带出图层数据 索引/名称, 未找到则返回null, 找到会移除图层数据, 但不会从地图移除图层
+  this.__TakeLayer = function(name) {
+    if(this.userLayers.length === 0)
+      return null;
+    let [layer, index] = this.__SearchLayer(name);
+    if(index !== -1)
+      this.userLayers.splice(index, 1);
+    return layer;
+  };
+  // 移除图层, 如果不指定name, 则移除最后一个
+  this.PopLayer = function(name = null) {
+    this.__RequireInited();
+    //console.log("pop", name, typeof(name));
+    if(name === null)
+      name = -1;
+    let layer = this.__TakeLayer(name);
+    if(layer)
+      this.mapObject.removeLayer(layer.layer);
+    return layer !== null;
+  };
+  // 设置图层显隐
+  this.SetLayerVisible = function(name, on) {
+    this.__RequireInited();
+    let [layer, ] = this.__SearchLayer(name, true);
+    layer.visible = true;
+    layer.layer.setVisible(on);
+    return true;
+  };
+  // 隐藏图层
+  this.HideLayer = function(name) {
+    return this.SetLayerVisible(name, false);
+  };
+  // 显示图层
+  this.ShowLayer = function(name) {
+    return this.SetLayerVisible(name, true);
+  };
+  // 开始绘制
+  this.StartDraw = function() {
+    this.__RequireInited();
+    this.__ASSERT(this.allowDraw, '未开启绘制');
+    this.drawResult = null;
+    this.__Callback('draw::start');
+
+    this.PopLayer(MAP_FIELD_DRAW_LAYER_NAME);
+    this.mapObject.removeInteraction(this.draw);
+    let drawLayer = new ol.layer.Vector({
+      source: new ol.source.Vector(),
+    });
+
+    this.__PushLayer(MAP_FIELD_DRAW_LAYER_NAME, drawLayer);
+    this.draw = new ol.interaction.Draw({
+      source: drawLayer.getSource(),
+      type: "Polygon"
+    });
+    let self = this;
+    this.draw.on('drawend', function (evt) {
+      self.mapObject.removeInteraction(self.draw);
+      let feature = evt.feature;
+      let geometry = feature.getGeometry();
+      let coordinate = geometry.getCoordinates();
+      self.drawResult = coordinate;
+      self.__Callback('draw::end', self.drawResult);
+    });
+    this.mapObject.addInteraction(this.draw);
+    //console.log("drawPolygon");
+  };
+  // 移除绘制
+  this.ClearDraw = function() {
+    this.__RequireInited();
+    this.__ASSERT(this.draw, '没有开始绘制');
+    this.mapObject.removeInteraction(this.draw);
+    this.PopLayer(MAP_FIELD_DRAW_LAYER_NAME);
+    this.draw = null;
+    this.drawResult = null;
+    this.__Callback('draw::remove');
+    this.__Callback('draw::end', '');
+  };
+  // 重置绘制
+  this.ResetDraw = function() {
+    this.ClearDraw();
+    this.StartDraw();
+    this.__Callback('draw::reset');
+  };
+  // 设置是否启用绘制
+  this.SetAllowDraw = function(on) {
+    this.__RequireInited();
+    if(this.allowDraw == on)
+      return;
+    this.allowDraw = on;
+    this.RemoveDrawLayer();
+  };
+  this.RemoveDrawLayer = function() {
+    this.__RequireInited();
+    if(this.draw)
+    {
+      this.ClearDraw();
+      this.draw = null;
+    }
+    this.PopLayer(MAP_FIELD_DRAW_LAYER_NAME);
+    this.drawResult = null;
+    this.markResult = null;
+  };
+  // 更新视图
+  this.Update = function() {
+    this.__RequireInited();
+    this.mapObject.updateSize();
+  };
+  // 新增/替换图层
+  this.SetLayer = function(name, theGeom, title = null, data = null, config = null) {
+    this.__RequireInited();
+    this.PopLayer(name);
+    this.AddLayer(name, theGeom, title, data, config);
+  };
+  // 新增图层(name不可存在)
+  this.AddLayer = function(name, theGeom, title = null, data = null, config = null) {
+    //console.log("pop", name, theGeom);
+    if(!theGeom)
+      return false;
+    this.__RequireInited();
+    this.__CheckNameExists(name);
+    if(typeof(theGeom) !== 'object')
+      theGeom = JSON.parse(theGeom);
+    let features = {
+      type: 'Feature',
+      geometry: theGeom,
+      properties: {
+        name: name,
+        title: title,
+        data: data,
+      },
+    };
+    //地图只加载一次
+    //加载地图编辑
+    //图层查询定位开始 ---------start
+    let hc_land = new ol.layer.Vector({
+      title: name,
+      source: new ol.source.Vector({
+        projection: this.GetProjection(),
+        features: new ol.format.GeoJSON().readFeatures(JSON.stringify(features)),
+      }),
+      style: new ol.style.Style({
+        fill: new ol.style.Fill({
+          //矢量图层填充颜色，以及透明度
+          color: this.__GetConfig(config, 'style.fill.color', "rgba(204, 255, 204, 0.3)"),
+        }),
+        stroke: new ol.style.Stroke({
+          //边界样式
+          color: this.__GetConfig(config, 'style.stroke.color', "#47c68f"),
+          width: this.__GetConfig(config, 'style.stroke.width', 3),
+        }),
+        //矢量标注样式设置函数，设置image为图标ol.style.Icon
+        text: new ol.style.Text({
+          textAlign: "center", //位置
+          textBaseline: "middle", //基准线
+          font: this.__GetConfig(config, 'style.text.font', "normal 12px 微软雅黑"), //文字样式
+          text: title, //文本内容
+          fill: new ol.style.Fill({
+            //文本填充样式（即文字颜色)
+            color: this.__GetConfig(config, 'style.text.fill.color', "#FF0000"),
+          }),
+        }),
+      }),
+    });
+    if(!this.__PushLayer(name, hc_land, title, data, config))
+      return false;
+    let maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
+    let maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
+    let minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
+    let minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
+    //定位查询位置
+    let center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
+    this.mapObject.getView().animate({
+      // 只设置需要的属性即可
+      center: center, // 中心点
+      zoom: 17.9, // 缩放级别
+      rotation: undefined, // 缩放完成view视图旋转弧度
+      duration: 1000, // 缩放持续时间，默认不需要设置
+    });
+    return true;
+  };
+  // 新增图层列表
+  this.AddLayers = function(list /* name, theGeom, title = null, data = null, config = null */) {
+    if(!list.length)
+      return;
+    this.__RequireInited();
+    for(let i in list)
+    {
+      let {name, theGeom, title, data, config} = list[i];
+      this.AddLayer(name, theGeom, title, data, config);
+    }
+  };
+  // 清除所有用户图层
+  this.Clear = function() {
+    this.__RequireInited();
+    for(let i in this.userLayers)
+      this.PopLayer(name);
+    this.userLayers = [];
+  };
+  // 设置图层列表
+  this.SetLayers = function(list /* name, theGeom, title = null, data = null, config = null */) {
+    this.Clear();
+    this.AddLayers(list);
+  };
+  this.SetAllowSelect = function(on) {
+    this.__RequireInited();
+    if(this.allowSelect == on)
+      return;
+    this.allowSelect = on;
+    this.ClearSelection();
+    if(this.allowSelect)
+    {
+      let self = this;
+      this.mapObject.on("singleclick", function (evt) {
+        let feature = self.mapObject.forEachFeatureAtPixel(
+          evt.pixel,
+          (feature) => feature,
+        );
+        self.SetSelection(feature ? feature.values_.name : null, true);
+      });
+    }
+    else
+    {
+      this.mapObject.on("singleclick", null);
+    }
+  };
+  this.ClearSelection = function() {
+    this.__RequireInited();
+    if(this.currentSelect)
+    {
+      this.__ResetStyle(this.currentSelect);
+      this.currentSelect = null;
+    }
+  };
+  this.SetSelection = function(name, callback = false) {
+    this.__RequireInited();
+    if(name)
+    {
+      if(name !== this.currentSelect)
+      {
+        this.ClearSelection();
+        this.__HighlightStyle(name);
+      }
+      else if(this.currentSelect)
+      {
+        name = null;
+        this.ClearSelection();
+      }
+    }
+    else
+    {
+      if(this.currentSelect)
+      {
+        name = null;
+        this.ClearSelection();
+      }
+    }
+    this.currentSelect = name;
+    if(callback)
+      this.__Callback('interactive::select', this.currentSelect);
+  };
+  this.__ResetStyle = function(name) {
+    let ulayer = this.FindLayer(name);
+    let style = ulayer.layer.getStyle();
+    style.setFill(new ol.style.Fill({
+      //矢量图层填充颜色，以及透明度
+      color: this.__GetConfig(ulayer.config, 'style.fill.color', "rgba(204, 255, 204, 0.3)"),
+    }));
+    style.setStroke(new ol.style.Stroke({
+      //边界样式
+      color: this.__GetConfig(ulayer.config, 'style.stroke.color', "#47c68f"),
+      width: this.__GetConfig(ulayer.config, 'style.stroke.width', 3),
+    }));
+    ulayer.layer.setStyle(style);
+  };
+  this.__HighlightStyle = function(name) {
+    let ulayer = this.FindLayer(name);
+    //console.log(this.mapObject, ulayer, ulayer.layer.getStyle());
+    let style = ulayer.layer.getStyle();
+    style.setFill(new ol.style.Fill({
+      //矢量图层填充颜色，以及透明度
+      color: this.__GetConfig(ulayer.config, 'style.fill.color::SELECTED', "rgb(204, 255, 255, 0.5)"),
+    }));
+    style.setStroke(new ol.style.Stroke({
+      //边界样式
+      color: this.__GetConfig(ulayer.config, 'style.stroke.color::SELECTED', "#00FFFF"),
+      width: this.__GetConfig(ulayer.config, 'style.stroke.width::SELECTED', 8),
+    }));
+    ulayer.layer.setStyle(style);
+  };
+  // 设置是否启用标记
+  this.SetAllowMark = function(on) {
+    this.__RequireInited();
+    if(this.allowMark == on)
+      return;
+    this.allowMark = on;
+    this.RemoveDrawLayer();
+  };
+  // 开始标记
+  this.StartMark = function() {
+    this.__RequireInited();
+    this.__ASSERT(this.allowMark, '未开启标记');
+    this.markResult = null;
+    this.__Callback('mark::start');
+
+    this.PopLayer(MAP_FIELD_DRAW_LAYER_NAME);
+    let sourceMap = new ol.source.Vector({wrapX: false});
+    let drawLayer = new ol.layer.Vector({
+      source: sourceMap,
+    });
+
+    this.__PushLayer(MAP_FIELD_DRAW_LAYER_NAME, drawLayer);
+    this.draw = new ol.interaction.Draw({
+      source: drawLayer.getSource(),
+      type: "Point"
+    });
+    //this.draw.__sourceMap = sourceMap;
+    let self = this;
+    this.draw.on('drawend', function (evt) {
+      if(self.draw)
+      {
+        self.__ClearMark();
+        self.StartMark();
+      }
+      let feature = evt.feature;
+      let geometry = feature.getGeometry();
+      let coordinate = geometry.getCoordinates();
+      self.markResult = coordinate;
+      let newFeature = new ol.Feature({
+        geometry: new ol.geom.Point(coordinate), //几何信息
+        //name: "标注点",
+      });
+      newFeature.setStyle(new ol.style.Style({
+        image: new ol.style.Icon({
+          //设置图标偏移
+          anchor: [0.5, 1],
+          //标注样式的起点位置
+          anchorOrigin: "top-right",
+          //X方向单位：分数
+          anchorXUnits: "fraction",
+          //Y方向单位：像素
+          anchorYUnits: "fraction",
+          //偏移起点位置的方向
+          offsetOrigin: "top-right",
+          //透明度
+          opacity: 0.9,
+          //图片路径
+          src: require("@/assets/images/dataScreen/plotPremises/mark.png"),
+        }),
+/*        text: new ol.style.Text({
+          textAlign: "center", //位置
+          textBaseline: "middle", //基准线
+          font: "normal 12px 微软雅黑", //文字样式
+          //text: "标注点", //文本内容
+          fill: new ol.style.Fill({
+            //文本填充样式（即文字颜色)
+            color: "#ff0000",
+          }),
+        }),*/
+        zIndex: 9999,
+      }));
+      self.draw.source_.addFeature(newFeature);
+      self.__Callback('mark::end', self.markResult);
+    });
+    this.mapObject.addInteraction(this.draw);
+    //console.log("drawPolygon");
+  };
+  // 移除标记
+  this.__ClearMark = function() {
+    this.__RequireInited();
+    this.__ASSERT(this.draw, '没有开始标记');
+    this.mapObject.removeInteraction(this.draw);
+    this.draw = null;
+  };
+  // 重置标记
+  this.ResetMark = function() {
+    this.__RequireInited();
+    this.__ASSERT(this.draw, '没有标记');
+    this.mapObject.removeInteraction(this.draw);
+    this.PopLayer(MAP_FIELD_DRAW_LAYER_NAME);
+    this.markResult = null;
+    this.__Callback('mark::reset');
+  };
+
+  // 构造初始化
+  if(this.selector)
+    this.Init();
+  return this;
+};
+
+// olMap类静态成员
+olMap.MAP_FIELD_DRAW_LAYER_NAME = MAP_FIELD_DRAW_LAYER_NAME;
+olMap.MAP_FIELD_INIT_LAYER_NAME = MAP_FIELD_INIT_LAYER_NAME;
+olMap.gen_multipoint = function() {
+  let json = {
+    type: 'MultiPoint',
+    coordinates: [],
+  };
+  for(let i in arguments)
+  {
+    json.coordinates.push(arguments[i]);
+  }
+  return json;
+};
+olMap.gen_multipoint_json = function() {
+  return JSON.stringify(this.gen_multipoint(...arguments));
+};
+olMap.gen_point = function(x, y, z) {
+  let json = {
+    type: 'Point',
+    coordinates: Array.isArray(x) ? x : (z !== undefined ? [x, y, z] : [x, y]),
+  };
+  return json;
+};
+olMap.gen_point_json = function(x, y, z) {
+  return JSON.stringify(this.gen_point(x, y, z));
+};
+olMap.gen_polygon = function() {
+  let json = {
+    type: 'Polygon',
+    coordinates: [],
+  };
+  for(let i in arguments)
+  {
+    json.coordinates.push(arguments[i]);
+  }
+  return json;
+};
+olMap.gen_polygon_json = function(x, y, z) {
+  return JSON.stringify(this.gen_polygon(x, y, z));
+};

src/views/business/cjqy/index.vue

@@ -0,0 +1,422 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="区划代码" prop="cjqydm">
+        <el-input v-model="queryParams.cjqydm" placeholder="请输入区划代码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="区划名称" prop="cjqymc">
+        <el-input v-model="queryParams.cjqymc" placeholder="请输入区划名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="级联代码" prop="importCode">
+        <el-input v-model="queryParams.importCode" placeholder="请输入级联代码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:cjqy:add']">新增</el-button>
+      </el-col>
+      <!--
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:cjqy:edit']">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:cjqy:remove']">删除</el-button>
+      </el-col>
+      -->
+
+      <el-col :span="1.5">
+          <el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['business:cjqy:import']">导入</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:cjqy:export']">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+          <el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['business:cjqy:print']">打印</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+      <!-- 数据列表  列属性 min-width="60" show-overflow-tooltip  @selection-change="handleSelectionChange" -->
+    <el-table v-loading="loading" :data="cjqyList" border>
+        <!--<el-table-column type="selection" width="55" align="center" />-->
+      <el-table-column label="区划代码" align="center" prop="cjqydm" />
+      <el-table-column label="区划名称" align="center" prop="cjqymc" />
+      <el-table-column label="标识码" align="center" prop="bsm" />
+      <el-table-column label="要素代码" align="center" prop="ysdm" />
+      <el-table-column label="级联代码" align="center" prop="importCode" />
+      <el-table-column label="fid" align="center" prop="fid"  min-width="60"/>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="250">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['business:cjqy:query']">查看</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:cjqy:edit']">修改</el-button>
+          <el-dropdown size="mini" v-hasPermi="['business:cjqy:remove']">
+            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+            <el-dropdown-menu slot="dropdown" style="padding: 5px">
+                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:cjqy:remove']">删除</el-button>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页插件 -->
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
+
+     <!-- 导入EXCEL组件 -->
+      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+          <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+              <i class="el-icon-upload"></i>
+              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+              <div class="el-upload__tip text-left" slot="tip">
+                  <div class="el-upload__tip" slot="tip">
+                      <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的村级区域
+                  </div>
+                  <p style="color: red">1、仅允许导入xls、xlsx格式文件；</p>
+                  <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+              </div>
+          </el-upload>
+          <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="submitFileForm">确 定</el-button>
+              <el-button @click="upload.open = false">取 消</el-button>
+          </div>
+      </el-dialog>
+
+      <!-- 查看村级区域对话框 -->
+      <el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body>
+         <el-descriptions id="printDetail" :column="descColumn" border :labelStyle="{width: `${descLabelWidth}%`}" :contentStyle="{width: `${(100 / descColumn) - descLabelWidth}%`}">
+           <el-descriptions-item label="区划代码">{{ form.cjqydm }}</el-descriptions-item>
+           <el-descriptions-item label="区划名称">{{ form.cjqymc }}</el-descriptions-item>
+           <el-descriptions-item label="标识码">{{ form.bsm }}</el-descriptions-item>
+           <el-descriptions-item label="要素代码">{{ form.ysdm }}</el-descriptions-item>
+           <el-descriptions-item label="级联代码">{{ form.importCode }}</el-descriptions-item>
+         </el-descriptions>
+          <!-- 弹框操作按钮 -->
+         <div slot="footer" class="dialog-footer">
+             <el-button @click="doPrint">打 印</el-button>
+             <el-button @click="cancelDetail">关 闭</el-button>
+         </div>
+      </el-dialog>
+
+    <!-- 添加或修改村级区域对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="区划代码" prop="cjqydm">
+            <el-input v-model="form.cjqydm" placeholder="请输入区划代码"  show-word-limit :maxlength="12"/>
+        </el-form-item>
+        <el-form-item label="区划名称" prop="cjqymc">
+            <el-input v-model="form.cjqymc" placeholder="请输入区划名称"  show-word-limit :maxlength="100"/>
+        </el-form-item>
+        <el-form-item label="标识码" prop="bsm">
+            <el-input-number v-model="form.bsm" placeholder="请输入标识码" controls-position="right"  />
+        </el-form-item>
+        <el-form-item label="要素代码" prop="ysdm">
+            <el-input v-model="form.ysdm" placeholder="请输入要素代码"  show-word-limit :maxlength="6"/>
+        </el-form-item>
+        <el-form-item label="级联代码" prop="importCode">
+            <el-input v-model="form.importCode" placeholder="请输入级联代码"  show-word-limit :maxlength="20"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listCjqy, getCjqy, getCjqyDetail, delCjqy, addCjqy, updateCjqy, printCjqy } from "@/api/business/cjqy"
+import { getToken } from "@/utils/auth"
+export default {
+  name: "Cjqy",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 村级区域表格数据
+      cjqyList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 详情组件列数
+      descColumn: 2,
+      // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth}
+      descLabelWidth: 15,
+      // 对话框显示只读的详情
+      viewOpen: false,
+      // 项目路径
+      baseRoutingUrll: process.env.VUE_APP_BASE_API,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+       // 查询排序
+       //orderByColumn: "id",
+       //isAsc: "desc",
+       // 翻译字典
+       //toTranslateDict: "1",
+        cjqydm: null,
+        cjqymc: null,
+        importCode: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        cjqydm: [
+          { required: true, message: "区划代码不能为空", trigger: "blur" }
+        ],
+        cjqymc: [
+          { required: true, message: "区划名称不能为空", trigger: "blur" }
+        ],
+        importCode: [
+          { required: true, message: "级联代码不能为空", trigger: "blur" }
+        ],
+      },
+      // EXCEL导入
+      upload: {
+          // 是否显示弹出层（用户导入）
+          open: false,
+          // 弹出层标题（用户导入）
+          title: "",
+          // 是否禁用上传
+          isUploading: false,
+          // 是否更新已经存在的用户数据
+          updateSupport: 0,
+          // 设置上传的请求头部
+          headers: { Authorization: "Bearer " + getToken() },
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + "/business/cjqy/importData"
+      },
+
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询村级区域列表 */
+    getList() {
+      this.loading = true
+      listCjqy(this.queryParams).then(response => {
+        this.cjqyList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    cancelDetail() {
+        this.viewOpen = false
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        cjqydm: null,
+        cjqymc: null,
+        bsm: null,
+        ysdm: null,
+        theGeom: null,
+        importCode: null,
+        fid: null
+      }
+      this.resetForm("form")
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.fid)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = "添加村级区域"
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const fid = row.fid || this.ids
+      getCjqy(fid).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = "修改村级区域"
+      })
+    },
+    /** 查看按钮操作 */
+    handleLook(row) {
+      const fid = row.fid || this.ids
+      getCjqyDetail(fid).then(response => {
+          this.form = response.data;
+          this.viewOpen = true;
+          this.title = "查看村级区域";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.fid != null) {
+            updateCjqy(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+            })
+          } else {
+            addCjqy(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const fids = row.fid || this.ids
+      this.$modal.confirm('是否确认删除村级区域编号为"' + fids + '"的数据项？').then(function() {
+        return delCjqy(fids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('business/cjqy/export', {
+        ...this.queryParams
+      }, `村级区域_${new Date().getTime()}.xlsx`)
+    },
+    /** 打印表单 */
+    doPrint() {
+        const originalTitle = document.title;
+        try {
+            document.title = this.title || '打印详情';
+            const printElement = document.getElementById('printDetail');
+            const printFrame = document.createElement('iframe');
+            printFrame.style.position = 'absolute';
+            printFrame.style.width = '0';
+            printFrame.style.height = '0';
+            printFrame.style.border = 'none';
+            printFrame.style.left = '-9999px';
+            printFrame.onload = function() {
+                try {
+                    const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document;
+                    const contentClone = printElement.cloneNode(true);
+                    const style = document.createElement('style');
+                    style.innerHTML = `
+                      @page {
+                        size: auto;
+                        margin: 10mm;
+                      }
+                      body {
+                        font-family: Arial, sans-serif;
+                        line-height: 1.5;
+                        margin: 0;
+                        padding: 0;
+                      }
+                      .el-descriptions {
+                        width: 100% !important;
+                      }
+                      .el-descriptions-item__label {
+                        width: ${this.descLabelWidth}% !important;
+                      }
+                      .el-descriptions-item__content {
+                        width: ${(100 / this.descColumn) - this.descLabelWidth}% !important;
+                      }
+                      /* 确保图片在打印时显示完整 */
+                      img, .el-image {
+                        max-width: 100% !important;
+                        height: auto !important;
+                      }
+                    `;
+                    frameDoc.head.appendChild(style);
+                    frameDoc.body.appendChild(contentClone);
+                    setTimeout(() => {
+                        printFrame.contentWindow.focus();
+                        printFrame.contentWindow.print();
+                        setTimeout(() => {
+                            document.body.removeChild(printFrame);
+                            document.title = originalTitle;
+                        }, 1000);
+                    }, 500);
+                } catch (e) {
+                    document.body.removeChild(printFrame);
+                    document.title = originalTitle;
+                    this.$message.error('打印过程中发生错误');
+                }
+            };
+            document.body.appendChild(printFrame);
+        } catch (e) {
+            document.title = originalTitle;
+            this.$message.error('打印过程中发生错误');
+        }
+    },
+    /** 打印按钮操作 */
+    handlePrint() {
+        printCjqy(this.queryParams).then(response => {})
+    },
+    /* 导入EXCEL组件 */
+    handleImport() {
+        this.upload.title = "村级区域导入"
+        this.upload.open = true
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+        this.download('business/cjqy/importTemplate', {
+        }, `村级区域_template.xlsx`)
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+        this.upload.isUploading = true
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+        this.upload.open = false
+        this.upload.isUploading = false
+        this.$refs.upload.clearFiles()
+        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+        this.getList()
+    },
+    // 提交上传文件
+    submitFileForm() {
+        this.$refs.upload.submit()
+    },
+
+
+  }
+}
+</script>

src/views/business/export/index.vue

@@ -0,0 +1,541 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
+        <!--部门数据-->
+        <pane size="16">
+          <el-col>
+            <div class="head-container">
+              <el-input v-model="deptName" placeholder="请输入区划名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
+            </div>
+            <div class="head-container container_main">
+              <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
+            </div>
+          </el-col>
+        </pane>
+        <!--用户数据-->
+        <pane size="84">
+          <el-col>
+
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+
+              <el-form-item label="文件格式" prop="fileType">
+                <el-select v-model="queryParams.fileType" placeholder="请选择文件格式" clearable>
+                  <el-option v-for="dict in dict.type.file_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="坐标系" prop="coordinateSystem">
+                <el-select v-model="queryParams.coordinateSystem" placeholder="请选择坐标系" clearable>
+                  <el-option v-for="dict in dict.type.coordinate_system" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="任务状态" prop="taskStatus">
+                <el-select v-model="queryParams.taskStatus" placeholder="请选择任务状态" clearable>
+                  <el-option v-for="dict in dict.type.task_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:export:add']">新增</el-button>
+              </el-col>
+              <!--
+              <el-col :span="1.5">
+                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:export:edit']">修改</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:export:remove']">删除</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                  <el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['business:export:import']">导入</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:export:export']">导出</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                  <el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['business:export:print']">打印</el-button>
+              </el-col>
+              -->
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+
+              <!-- 数据列表  列属性 min-width="60" show-overflow-tooltip  @selection-change="handleSelectionChange" -->
+            <el-table v-loading="loading" :data="exportList" border>
+                <!--<el-table-column type="selection" width="55" align="center" />-->
+              <el-table-column label="id" align="center" prop="id" min-width="60"/>
+              <el-table-column label="行政区划名称" align="center" prop="deptName" min-width="120"/>
+              <el-table-column label="行政区划代码" align="center" prop="orgCode" min-width="150"/>
+              <el-table-column label="文件格式" align="center" prop="fileType">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.file_type" :value="scope.row.fileType"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="坐标系" align="center" prop="coordinateSystem">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.coordinate_system" :value="scope.row.coordinateSystem"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="文件路径" align="center" prop="fileUrl" min-width="100" show-overflow-tooltip/>
+              <el-table-column label="任务状态" align="center" prop="taskStatus">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.task_status" :value="scope.row.taskStatus"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="300">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['business:export:query']">查看</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:export:edit']">修改</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-video-play" @click="handleDo(scope.row)" v-hasPermi="['business:export:do']" v-if="scope.row.taskStatus == '1'">执行</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-download" @click="handleDown(scope.row)" v-hasPermi="['business:export:down']" v-if="scope.row.taskStatus == '3'">下载</el-button>
+
+                  <el-dropdown size="mini" v-hasPermi="['business:export:remove']">
+                    <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+                    <el-dropdown-menu slot="dropdown" style="padding: 5px">
+                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:export:remove']">删除 </el-button>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <!-- 分页插件 -->
+            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
+          </el-col>
+        </pane>
+      </splitpanes>
+    </el-row>
+
+
+     <!-- 导入EXCEL组件 -->
+      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+          <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+              <i class="el-icon-upload"></i>
+              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+              <div class="el-upload__tip text-left" slot="tip">
+                  <div class="el-upload__tip" slot="tip">
+                      <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的导出任务
+                  </div>
+                  <p style="color: red">1、仅允许导入xls、xlsx格式文件；</p>
+                  <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+              </div>
+          </el-upload>
+          <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="submitFileForm">确 定</el-button>
+              <el-button @click="upload.open = false">取 消</el-button>
+          </div>
+      </el-dialog>
+
+      <!-- 查看导出任务对话框 -->
+      <el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body>
+         <el-descriptions id="printDetail" :column="descColumn" border :labelStyle="{width: `${descLabelWidth}%`}" :contentStyle="{width: `${(100 / descColumn) - descLabelWidth}%`}">
+           <el-descriptions-item label="行政区划名称">{{ form.deptName }}</el-descriptions-item>
+           <el-descriptions-item label="行政区划代码">{{ form.orgCode }}</el-descriptions-item>
+           <el-descriptions-item label="文件格式">{{ form.fileType }}</el-descriptions-item>
+           <el-descriptions-item label="坐标系">{{ form.coordinateSystem }}</el-descriptions-item>
+           <el-descriptions-item label="文件路径">{{ form.fileUrl }}</el-descriptions-item>
+           <el-descriptions-item label="任务状态">{{ form.taskStatus }}</el-descriptions-item>
+         </el-descriptions>
+          <!-- 弹框操作按钮 -->
+         <div slot="footer" class="dialog-footer">
+             <el-button @click="doPrint">打 印</el-button>
+             <el-button @click="cancelDetail">关 闭</el-button>
+         </div>
+      </el-dialog>
+
+    <!-- 添加或修改导出任务对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="区划名称" prop="deptName">
+            <el-input v-model="form.deptName" placeholder="请输入行政区划名称"  show-word-limit :maxlength="30" readonly/>
+        </el-form-item>
+        <el-form-item label="文件格式" prop="fileType">
+          <el-select v-model="form.fileType" placeholder="请选择文件格式">
+            <el-option v-for="dict in dict.type.file_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="坐标系" prop="coordinateSystem">
+          <el-select v-model="form.coordinateSystem" placeholder="请选择坐标系">
+            <el-option v-for="dict in dict.type.coordinate_system" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listExport, getExport, getExportDetail, delExport, addExport, updateExport, printExport } from "@/api/business/export"
+import { getToken } from "@/utils/auth"
+import Treeselect from "@riophae/vue-treeselect";
+import { Splitpanes, Pane } from "splitpanes"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import "splitpanes/dist/splitpanes.css"
+import { deptTreeSelect } from "@/api/system/user"
+
+export default {
+  name: "Export",
+  dicts: ['task_status', 'file_type', 'coordinate_system'],
+  components: { Treeselect, Splitpanes, Pane },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 导出任务表格数据
+      exportList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 详情组件列数
+      descColumn: 2,
+      // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth}
+      descLabelWidth: 15,
+      // 对话框显示只读的详情
+      viewOpen: false,
+      // 项目路径
+      baseRoutingUrl: process.env.VUE_APP_BASE_API,
+      // 所有部门树选项
+      deptOptions: undefined,
+      // 过滤掉已禁用部门树选项
+      enabledDeptOptions: undefined,
+      // 筛选部门名称
+      deptName: undefined,
+      // 选中的部门
+      selectDeptName: null,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+       // 查询排序
+       //orderByColumn: "id",
+       //isAsc: "desc",
+       // 翻译字典
+       //toTranslateDict: "1",
+        deptId: null,
+        deptName: null,
+        orgCode: null,
+        fileType: null,
+        coordinateSystem: null,
+        fileUrl: null,
+        taskStatus: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        deptName: [
+          { required: true, message: "行政区划名称不能为空", trigger: "blur" }
+        ],
+        fileType: [
+          { required: true, message: "文件格式不能为空", trigger: "change" }
+        ],
+        coordinateSystem: [
+          { required: true, message: "坐标系不能为空", trigger: "change" }
+        ],
+        taskStatus: [
+          { required: true, message: "任务状态不能为空", trigger: "change" }
+        ],
+      },
+      // EXCEL导入
+      upload: {
+          // 是否显示弹出层（用户导入）
+          open: false,
+          // 弹出层标题（用户导入）
+          title: "",
+          // 是否禁用上传
+          isUploading: false,
+          // 是否更新已经存在的用户数据
+          updateSupport: 0,
+          // 设置上传的请求头部
+          headers: { Authorization: "Bearer " + getToken() },
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + "/business/export/importData"
+      },
+
+    }
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.getDeptTree()
+    this.getList()
+  },
+  methods: {
+    /** 查询导出任务列表 */
+    getList() {
+      this.loading = true
+      listExport(this.queryParams).then(response => {
+        this.exportList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    cancelDetail() {
+        this.viewOpen = false
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        deptId: null,
+        deptName: null,
+        orgCode: null,
+        fileType: '1',
+        coordinateSystem: '2',
+        fileUrl: null,
+        taskStatus: '1',
+      }
+      this.resetForm("form")
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      if(this.selectDeptName == null || this.selectDeptName == ''){
+        this.$modal.msgWarning("请先选择县级及以下行政区划！")
+        return
+      }
+      this.reset()
+      this.form.deptId = this.queryParams.deptId;
+      this.form.deptName = this.selectDeptName;
+      this.open = true
+      this.title = "添加导出任务"
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const id = row.id || this.ids
+      getExport(id).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = "修改导出任务"
+      })
+    },
+    /** 查看按钮操作 */
+    handleLook(row) {
+      const id = row.id || this.ids
+      getExportDetail(id).then(response => {
+          this.form = response.data;
+          this.viewOpen = true;
+          this.title = "查看导出任务";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateExport(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+            })
+          } else {
+            addExport(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除导出任务编号为"' + ids + '"的数据项？').then(function() {
+        return delExport(ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('business/export/export', {
+        ...this.queryParams
+      }, `导出任务_${new Date().getTime()}.xlsx`)
+    },
+    /** 打印表单 */
+    doPrint() {
+        const originalTitle = document.title;
+        try {
+            document.title = this.title || '打印详情';
+            const printElement = document.getElementById('printDetail');
+            const printFrame = document.createElement('iframe');
+            printFrame.style.position = 'absolute';
+            printFrame.style.width = '0';
+            printFrame.style.height = '0';
+            printFrame.style.border = 'none';
+            printFrame.style.left = '-9999px';
+            printFrame.onload = function() {
+                try {
+                    const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document;
+                    const contentClone = printElement.cloneNode(true);
+                    const style = document.createElement('style');
+                    style.innerHTML = `
+                      @page {
+                        size: auto;
+                        margin: 10mm;
+                      }
+                      body {
+                        font-family: Arial, sans-serif;
+                        line-height: 1.5;
+                        margin: 0;
+                        padding: 0;
+                      }
+                      .el-descriptions {
+                        width: 100% !important;
+                      }
+                      .el-descriptions-item__label {
+                        width: ${this.descLabelWidth}% !important;
+                      }
+                      .el-descriptions-item__content {
+                        width: ${(100 / this.descColumn) - this.descLabelWidth}% !important;
+                      }
+                      /* 确保图片在打印时显示完整 */
+                      img, .el-image {
+                        max-width: 100% !important;
+                        height: auto !important;
+                      }
+                    `;
+                    frameDoc.head.appendChild(style);
+                    frameDoc.body.appendChild(contentClone);
+                    setTimeout(() => {
+                        printFrame.contentWindow.focus();
+                        printFrame.contentWindow.print();
+                        setTimeout(() => {
+                            document.body.removeChild(printFrame);
+                            document.title = originalTitle;
+                        }, 1000);
+                    }, 500);
+                } catch (e) {
+                    document.body.removeChild(printFrame);
+                    document.title = originalTitle;
+                    this.$message.error('打印过程中发生错误');
+                }
+            };
+            document.body.appendChild(printFrame);
+        } catch (e) {
+            document.title = originalTitle;
+            this.$message.error('打印过程中发生错误');
+        }
+    },
+    /** 打印按钮操作 */
+    handlePrint() {
+        printExport(this.queryParams).then(response => {})
+    },
+    /* 导入EXCEL组件 */
+    handleImport() {
+        this.upload.title = "导出任务导入"
+        this.upload.open = true
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+        this.download('business/export/importTemplate', {
+        }, `export_template.xlsx`)
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+        this.upload.isUploading = true
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+        this.upload.open = false
+        this.upload.isUploading = false
+        this.$refs.upload.clearFiles()
+        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+        this.getList()
+    },
+    // 提交上传文件
+    submitFileForm() {
+        this.$refs.upload.submit()
+    },
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then(response => {
+        this.deptOptions = response.data
+        this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+      })
+    },
+    // 过滤禁用的部门
+    filterDisabledDept(deptList) {
+      return deptList.filter(dept => {
+        if (dept.disabled) {
+          return false
+        }
+        if (dept.children && dept.children.length) {
+          dept.children = this.filterDisabledDept(dept.children)
+        }
+        return true
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id
+      this.selectDeptName = data.label
+      this.handleQuery()
+    },
+
+  }
+}
+</script>
+<style scoped type="scss">
+  .container_main{
+    height: 75vh;
+    overflow-y: scroll;
+  }
+</style>

src/views/business/import/index.vue

@@ -0,0 +1,598 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
+        <!--部门数据-->
+        <pane size="16">
+          <el-col>
+            <div class="head-container">
+              <el-input v-model="deptName" placeholder="请输入区划名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
+            </div>
+            <div class="head-container container_main">
+              <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
+            </div>
+          </el-col>
+        </pane>
+        <!--用户数据-->
+        <pane size="84">
+          <el-col>
+
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+
+              <el-form-item label="文件格式" prop="fileType">
+                <el-select v-model="queryParams.fileType" placeholder="请选择文件格式" clearable>
+                  <el-option v-for="dict in dict.type.file_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="导入方式" prop="importType">
+                <el-select v-model="queryParams.importType" placeholder="请选择导入方式" clearable>
+                  <el-option v-for="dict in dict.type.import_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="坐标系" prop="coordinateSystem">
+                <el-select v-model="queryParams.coordinateSystem" placeholder="请选择坐标系" clearable>
+                  <el-option v-for="dict in dict.type.coordinate_system" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="任务状态" prop="taskStatus">
+                <el-select v-model="queryParams.taskStatus" placeholder="请选择任务状态" clearable>
+                  <el-option v-for="dict in dict.type.task_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:import:add']">新增</el-button>
+              </el-col>
+              <!--
+              <el-col :span="1.5">
+                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:import:edit']">修改</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:import:remove']">删除</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                  <el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['business:import:import']">导入</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:import:export']">导出</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                  <el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['business:import:print']">打印</el-button>
+              </el-col>
+              -->
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+
+              <!-- 数据列表  列属性 min-width="60" show-overflow-tooltip  @selection-change="handleSelectionChange" -->
+            <el-table v-loading="loading" :data="importList" border>
+                <!--<el-table-column type="selection" width="55" align="center" />-->
+              <el-table-column label="id" align="center" prop="id" min-width="60"/>
+              <el-table-column label="行政区划名称" align="center" prop="deptName" min-width="120"/>
+              <el-table-column label="行政区划代码" align="center" prop="orgCode" min-width="150"/>
+              <el-table-column label="文件格式" align="center" prop="fileType">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.file_type" :value="scope.row.fileType"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="导入方式" align="center" prop="importType">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.import_type" :value="scope.row.importType"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="坐标系" align="center" prop="coordinateSystem">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.coordinate_system" :value="scope.row.coordinateSystem"/>
+                </template>
+              </el-table-column>
+              <!--<el-table-column label="文件路径" align="center" prop="fileUrl" min-width="300" show-overflow-tooltip/>-->
+              <el-table-column label="文件路径" header-align="center" align="left" prop="fileUrl" >
+                <template slot-scope="scope">
+                  <div v-if="!!scope.row.fileUrl"><el-tooltip effect="light" :content="item.substr(item.lastIndexOf('/') + 1)" placement="bottom" v-for="(item, index) in scope.row.fileUrl.split(',')" :key="index"><a :href="baseRoutingUrll + item" target="_blank" style="height: 32px; width: 32px; margin: 2px; display: inline-block; text-align: center;"><img :src="getFileIcon(item)" style="height: 100%;"/></a></el-tooltip></div>
+                </template>
+              </el-table-column>
+              <el-table-column label="任务状态" align="center" prop="taskStatus">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.task_status" :value="scope.row.taskStatus"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="300">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['business:import:query']">查看</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:import:edit']">修改</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-video-play" @click="handleDo(scope.row)" v-hasPermi="['business:import:do']" v-if="scope.row.taskStatus == '1'">执行</el-button>
+
+                  <el-dropdown size="mini" v-hasPermi="['business:import:remove']">
+                    <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+                    <el-dropdown-menu slot="dropdown" style="padding: 5px">
+                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:import:remove']">删除</el-button>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <!-- 分页插件 -->
+            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
+
+          </el-col>
+        </pane>
+      </splitpanes>
+    </el-row>
+
+     <!-- 导入EXCEL组件 -->
+      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+          <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+              <i class="el-icon-upload"></i>
+              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+              <div class="el-upload__tip text-left" slot="tip">
+                  <div class="el-upload__tip" slot="tip">
+                      <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的导入任务
+                  </div>
+                  <p style="color: red">1、仅允许导入xls、xlsx格式文件；</p>
+                  <p style="color: red">2、覆盖导入：指先将所选区划当前在库数据删除，然后按新数据包解析导入；</p>
+                  <p style="color: red">3、增量导入：指按新数据包解析并追加导入；</p>
+                  <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+              </div>
+          </el-upload>
+          <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="submitFileForm">确 定</el-button>
+              <el-button @click="upload.open = false">取 消</el-button>
+          </div>
+      </el-dialog>
+
+      <!-- 查看导入任务对话框 -->
+      <el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body>
+         <el-descriptions id="printDetail" :column="descColumn" border :labelStyle="{width: `${descLabelWidth}%`}" :contentStyle="{width: `${(100 / descColumn) - descLabelWidth}%`}">
+           <el-descriptions-item label="行政区划名称">{{ form.deptName }}</el-descriptions-item>
+           <el-descriptions-item label="行政区划代码">{{ form.orgCode }}</el-descriptions-item>
+           <el-descriptions-item label="文件格式">{{ form.fileType }}</el-descriptions-item>
+           <el-descriptions-item label="导入方式">{{ form.importType }}</el-descriptions-item>
+           <el-descriptions-item label="坐标系">{{ form.coordinateSystem }}</el-descriptions-item>
+           <el-descriptions-item label="文件路径">{{ form.fileUrl }}</el-descriptions-item>
+           <el-descriptions-item label="任务状态">{{ form.taskStatus }}</el-descriptions-item>
+         </el-descriptions>
+          <!-- 弹框操作按钮 -->
+         <div slot="footer" class="dialog-footer">
+             <el-button @click="doPrint">打 印</el-button>
+             <el-button @click="cancelDetail">关 闭</el-button>
+         </div>
+      </el-dialog>
+
+    <!-- 添加或修改导入任务对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="区划名称" prop="deptName">
+            <el-input v-model="form.deptName" placeholder="请输入行政区划名称"  show-word-limit :maxlength="30" readonly/>
+        </el-form-item>
+        <el-form-item label="文件格式" prop="fileType">
+          <el-select v-model="form.fileType" placeholder="请选择文件格式">
+            <el-option v-for="dict in dict.type.file_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="importType">
+          <span slot="label">
+            导入方式
+              <el-tooltip content="覆盖导入：指先将所选区划当前在库数据删除，然后按新数据包解析导入；增量导入：指按新数据包解析并追加导入。" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </span>
+          <el-select v-model="form.importType" placeholder="请选择导入方式">
+            <el-option v-for="dict in dict.type.import_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="坐标系" prop="coordinateSystem">
+          <el-select v-model="form.coordinateSystem" placeholder="请选择坐标系">
+            <el-option v-for="dict in dict.type.coordinate_system" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="文件路径" prop="fileUrl">
+          <file-upload v-model="form.fileUrl"/>
+        </el-form-item>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listImport, getImport, getImportDetail, delImport, addImport, updateImport, printImport } from "@/api/business/import"
+import { getToken } from "@/utils/auth"
+import Treeselect from "@riophae/vue-treeselect";
+import {Pane, Splitpanes} from "splitpanes";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import "splitpanes/dist/splitpanes.css"
+import { deptTreeSelect } from "@/api/system/user"
+
+export default {
+  name: "Import",
+  dicts: ['task_status', 'file_type', 'coordinate_system', 'import_type'],
+  components: { Treeselect, Splitpanes, Pane },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 导入任务表格数据
+      importList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 详情组件列数
+      descColumn: 2,
+      // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth}
+      descLabelWidth: 15,
+      // 对话框显示只读的详情
+      viewOpen: false,
+      // 项目路径
+      baseRoutingUrll: process.env.VUE_APP_BASE_API,
+      // 所有部门树选项
+      deptOptions: undefined,
+      // 过滤掉已禁用部门树选项
+      enabledDeptOptions: undefined,
+      // 筛选部门名称
+      deptName: undefined,
+      // 选中的部门
+      selectDeptName: null,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+       // 查询排序
+       //orderByColumn: "id",
+       //isAsc: "desc",
+       // 翻译字典
+       //toTranslateDict: "1",
+        deptId: null,
+        deptName: null,
+        orgCode: null,
+        fileType: null,
+        importType: null,
+        coordinateSystem: null,
+        fileUrl: null,
+        taskStatus: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        deptName: [
+          { required: true, message: "行政区划名称不能为空", trigger: "blur" }
+        ],
+        fileType: [
+          { required: true, message: "文件格式不能为空", trigger: "change" }
+        ],
+        importType: [
+          { required: true, message: "导入方式不能为空", trigger: "change" }
+        ],
+        coordinateSystem: [
+          { required: true, message: "坐标系不能为空", trigger: "change" }
+        ],
+        /*fileUrl: [
+          { required: true, message: "文件路径不能为空", trigger: "blur" }
+        ],*/
+        taskStatus: [
+          { required: true, message: "任务状态不能为空", trigger: "change" }
+        ],
+      },
+      // EXCEL导入
+      upload: {
+          // 是否显示弹出层（用户导入）
+          open: false,
+          // 弹出层标题（用户导入）
+          title: "",
+          // 是否禁用上传
+          isUploading: false,
+          // 是否更新已经存在的用户数据
+          updateSupport: 0,
+          // 设置上传的请求头部
+          headers: { Authorization: "Bearer " + getToken() },
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + "/business/import/importData"
+      },
+
+    }
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.getDeptTree()
+    this.getList()
+  },
+  methods: {
+    /** 查询导入任务列表 */
+    getList() {
+      this.loading = true
+      listImport(this.queryParams).then(response => {
+        this.importList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    cancelDetail() {
+        this.viewOpen = false
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        deptId: null,
+        deptName: null,
+        orgCode: null,
+        fileType: '1',
+        importType: '1',
+        coordinateSystem: '1',
+        fileUrl: null,
+        taskStatus: '1',
+      }
+      this.resetForm("form")
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      if(this.selectDeptName == null || this.selectDeptName == ''){
+        this.$modal.msgWarning("请先选择县级及以下行政区划！")
+        return
+      }
+      this.reset()
+      this.open = true
+      this.form.deptId = this.queryParams.deptId;
+      this.form.deptName = this.selectDeptName;
+      this.title = "添加导入任务"
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const id = row.id || this.ids
+      getImport(id).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = "修改导入任务"
+      })
+    },
+    /** 查看按钮操作 */
+    handleLook(row) {
+      const id = row.id || this.ids
+      getImportDetail(id).then(response => {
+          this.form = response.data;
+          this.viewOpen = true;
+          this.title = "查看导入任务";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateImport(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+            })
+          } else {
+            addImport(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除导入任务编号为"' + ids + '"的数据项？').then(function() {
+        return delImport(ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('business/import/export', {
+        ...this.queryParams
+      }, `导入任务_${new Date().getTime()}.xlsx`)
+    },
+    /** 打印表单 */
+    doPrint() {
+        const originalTitle = document.title;
+        try {
+            document.title = this.title || '打印详情';
+            const printElement = document.getElementById('printDetail');
+            const printFrame = document.createElement('iframe');
+            printFrame.style.position = 'absolute';
+            printFrame.style.width = '0';
+            printFrame.style.height = '0';
+            printFrame.style.border = 'none';
+            printFrame.style.left = '-9999px';
+            printFrame.onload = function() {
+                try {
+                    const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document;
+                    const contentClone = printElement.cloneNode(true);
+                    const style = document.createElement('style');
+                    style.innerHTML = `
+                      @page {
+                        size: auto;
+                        margin: 10mm;
+                      }
+                      body {
+                        font-family: Arial, sans-serif;
+                        line-height: 1.5;
+                        margin: 0;
+                        padding: 0;
+                      }
+                      .el-descriptions {
+                        width: 100% !important;
+                      }
+                      .el-descriptions-item__label {
+                        width: ${this.descLabelWidth}% !important;
+                      }
+                      .el-descriptions-item__content {
+                        width: ${(100 / this.descColumn) - this.descLabelWidth}% !important;
+                      }
+                      /* 确保图片在打印时显示完整 */
+                      img, .el-image {
+                        max-width: 100% !important;
+                        height: auto !important;
+                      }
+                    `;
+                    frameDoc.head.appendChild(style);
+                    frameDoc.body.appendChild(contentClone);
+                    setTimeout(() => {
+                        printFrame.contentWindow.focus();
+                        printFrame.contentWindow.print();
+                        setTimeout(() => {
+                            document.body.removeChild(printFrame);
+                            document.title = originalTitle;
+                        }, 1000);
+                    }, 500);
+                } catch (e) {
+                    document.body.removeChild(printFrame);
+                    document.title = originalTitle;
+                    this.$message.error('打印过程中发生错误');
+                }
+            };
+            document.body.appendChild(printFrame);
+        } catch (e) {
+            document.title = originalTitle;
+            this.$message.error('打印过程中发生错误');
+        }
+    },
+    /** 打印按钮操作 */
+    handlePrint() {
+        printImport(this.queryParams).then(response => {})
+    },
+    /* 导入EXCEL组件 */
+    handleImport() {
+        this.upload.title = "导入任务导入"
+        this.upload.open = true
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+        this.download('business/import/importTemplate', {
+        }, `import_template.xlsx`)
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+        this.upload.isUploading = true
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+        this.upload.open = false
+        this.upload.isUploading = false
+        this.$refs.upload.clearFiles()
+        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+        this.getList()
+    },
+    // 提交上传文件
+    submitFileForm() {
+        this.$refs.upload.submit()
+    },
+    getFileIcon(file) {
+      if(!file) return '';
+      switch(file.toLowerCase().substr(file.lastIndexOf('.') + 1)) {
+        case 'jpg': case 'png': case 'jpeg': case 'bmp': case 'gif':
+          return this.baseRoutingUrll + file;
+        case 'doc': case 'docx':
+          return require('@/assets/images/icon_word.jpg');
+        case 'xls': case 'xlsx':
+          return require('@/assets/images/icon_excel.jpg');
+        case 'pdf':
+          return require('@/assets/images/icon_pdf.jpg');
+        case 'zip': case 'rar': case '7z': case 'bz2': case 'gz':
+          return require('@/assets/images/icon_zip.jpg');
+        default:
+          return require('@/assets/images/icon_rest.jpg');
+      }
+    },
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then(response => {
+        this.deptOptions = response.data
+        this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+      })
+    },
+    // 过滤禁用的部门
+    filterDisabledDept(deptList) {
+      return deptList.filter(dept => {
+        if (dept.disabled) {
+          return false
+        }
+        if (dept.children && dept.children.length) {
+          dept.children = this.filterDisabledDept(dept.children)
+        }
+        return true
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id
+      this.selectDeptName = data.label
+      this.handleQuery()
+    },
+
+  }
+}
+</script>
+<style scoped type="scss">
+  .container_main{
+    height: 75vh;
+    overflow-y: scroll;
+  }
+</style>

src/views/business/xjqy/index.vue

@@ -0,0 +1,422 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="区划代码" prop="xjqydm">
+        <el-input v-model="queryParams.xjqydm" placeholder="请输入区划代码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="区划名称" prop="xjqymc">
+        <el-input v-model="queryParams.xjqymc" placeholder="请输入区划名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="级联代码" prop="importCode">
+        <el-input v-model="queryParams.importCode" placeholder="请输入级联代码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:xjqy:add']">新增</el-button>
+      </el-col>
+      <!--
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:xjqy:edit']">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:xjqy:remove']">删除</el-button>
+      </el-col>
+      -->
+
+      <el-col :span="1.5">
+          <el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['business:xjqy:import']">导入</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:xjqy:export']">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+          <el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['business:xjqy:print']">打印</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+      <!-- 数据列表  列属性 min-width="60" show-overflow-tooltip  @selection-change="handleSelectionChange" -->
+    <el-table v-loading="loading" :data="xjqyList" border>
+        <!--<el-table-column type="selection" width="55" align="center" />-->
+      <el-table-column label="区划代码" align="center" prop="xjqydm" />
+      <el-table-column label="区划名称" align="center" prop="xjqymc" />
+      <el-table-column label="标识码" align="center" prop="bsm" />
+      <el-table-column label="要素代码" align="center" prop="ysdm" />
+      <el-table-column label="级联代码" align="center" prop="importCode" />
+      <el-table-column label="fid" align="center" prop="fid"  min-width="60"/>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="250">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['business:xjqy:query']">查看</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:xjqy:edit']">修改</el-button>
+          <el-dropdown size="mini" v-hasPermi="['business:xjqy:remove']">
+            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+            <el-dropdown-menu slot="dropdown" style="padding: 5px">
+                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:xjqy:remove']">删除</el-button>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页插件 -->
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
+
+     <!-- 导入EXCEL组件 -->
+      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+          <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+              <i class="el-icon-upload"></i>
+              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+              <div class="el-upload__tip text-left" slot="tip">
+                  <div class="el-upload__tip" slot="tip">
+                      <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的乡级区域
+                  </div>
+                  <p style="color: red">1、仅允许导入xls、xlsx格式文件；</p>
+                  <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+              </div>
+          </el-upload>
+          <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="submitFileForm">确 定</el-button>
+              <el-button @click="upload.open = false">取 消</el-button>
+          </div>
+      </el-dialog>
+
+      <!-- 查看乡级区域对话框 -->
+      <el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body>
+         <el-descriptions id="printDetail" :column="descColumn" border :labelStyle="{width: `${descLabelWidth}%`}" :contentStyle="{width: `${(100 / descColumn) - descLabelWidth}%`}">
+           <el-descriptions-item label="区划代码">{{ form.xjqydm }}</el-descriptions-item>
+           <el-descriptions-item label="区划名称">{{ form.xjqymc }}</el-descriptions-item>
+           <el-descriptions-item label="标识码">{{ form.bsm }}</el-descriptions-item>
+           <el-descriptions-item label="要素代码">{{ form.ysdm }}</el-descriptions-item>
+           <el-descriptions-item label="级联代码">{{ form.importCode }}</el-descriptions-item>
+         </el-descriptions>
+          <!-- 弹框操作按钮 -->
+         <div slot="footer" class="dialog-footer">
+             <el-button @click="doPrint">打 印</el-button>
+             <el-button @click="cancelDetail">关 闭</el-button>
+         </div>
+      </el-dialog>
+
+    <!-- 添加或修改乡级区域对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="区划代码" prop="xjqydm">
+            <el-input v-model="form.xjqydm" placeholder="请输入区划代码"  show-word-limit :maxlength="9"/>
+        </el-form-item>
+        <el-form-item label="区划名称" prop="xjqymc">
+            <el-input v-model="form.xjqymc" placeholder="请输入区划名称"  show-word-limit :maxlength="100"/>
+        </el-form-item>
+        <el-form-item label="标识码" prop="bsm">
+            <el-input-number v-model="form.bsm" placeholder="请输入标识码" controls-position="right"  />
+        </el-form-item>
+        <el-form-item label="要素代码" prop="ysdm">
+            <el-input v-model="form.ysdm" placeholder="请输入要素代码"  show-word-limit :maxlength="6"/>
+        </el-form-item>
+        <el-form-item label="级联代码" prop="importCode">
+            <el-input v-model="form.importCode" placeholder="请输入级联代码"  show-word-limit :maxlength="20"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listXjqy, getXjqy, getXjqyDetail, delXjqy, addXjqy, updateXjqy, printXjqy } from "@/api/business/xjqy"
+import { getToken } from "@/utils/auth"
+export default {
+  name: "Xjqy",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 乡级区域表格数据
+      xjqyList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 详情组件列数
+      descColumn: 2,
+      // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth}
+      descLabelWidth: 15,
+      // 对话框显示只读的详情
+      viewOpen: false,
+      // 项目路径
+      baseRoutingUrll: process.env.VUE_APP_BASE_API,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+       // 查询排序
+       //orderByColumn: "id",
+       //isAsc: "desc",
+       // 翻译字典
+       //toTranslateDict: "1",
+        xjqydm: null,
+        xjqymc: null,
+        importCode: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        xjqydm: [
+          { required: true, message: "区划代码不能为空", trigger: "blur" }
+        ],
+        xjqymc: [
+          { required: true, message: "区划名称不能为空", trigger: "blur" }
+        ],
+        importCode: [
+          { required: true, message: "级联代码不能为空", trigger: "blur" }
+        ],
+      },
+      // EXCEL导入
+      upload: {
+          // 是否显示弹出层（用户导入）
+          open: false,
+          // 弹出层标题（用户导入）
+          title: "",
+          // 是否禁用上传
+          isUploading: false,
+          // 是否更新已经存在的用户数据
+          updateSupport: 0,
+          // 设置上传的请求头部
+          headers: { Authorization: "Bearer " + getToken() },
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + "/business/xjqy/importData"
+      },
+
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询乡级区域列表 */
+    getList() {
+      this.loading = true
+      listXjqy(this.queryParams).then(response => {
+        this.xjqyList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    cancelDetail() {
+        this.viewOpen = false
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        xjqydm: null,
+        xjqymc: null,
+        bsm: null,
+        ysdm: null,
+        theGeom: null,
+        importCode: null,
+        fid: null
+      }
+      this.resetForm("form")
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.fid)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = "添加乡级区域"
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const fid = row.fid || this.ids
+      getXjqy(fid).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = "修改乡级区域"
+      })
+    },
+    /** 查看按钮操作 */
+    handleLook(row) {
+      const fid = row.fid || this.ids
+      getXjqyDetail(fid).then(response => {
+          this.form = response.data;
+          this.viewOpen = true;
+          this.title = "查看乡级区域";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.fid != null) {
+            updateXjqy(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+            })
+          } else {
+            addXjqy(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const fids = row.fid || this.ids
+      this.$modal.confirm('是否确认删除乡级区域编号为"' + fids + '"的数据项？').then(function() {
+        return delXjqy(fids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('business/xjqy/export', {
+        ...this.queryParams
+      }, `乡级区域_${new Date().getTime()}.xlsx`)
+    },
+    /** 打印表单 */
+    doPrint() {
+        const originalTitle = document.title;
+        try {
+            document.title = this.title || '打印详情';
+            const printElement = document.getElementById('printDetail');
+            const printFrame = document.createElement('iframe');
+            printFrame.style.position = 'absolute';
+            printFrame.style.width = '0';
+            printFrame.style.height = '0';
+            printFrame.style.border = 'none';
+            printFrame.style.left = '-9999px';
+            printFrame.onload = function() {
+                try {
+                    const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document;
+                    const contentClone = printElement.cloneNode(true);
+                    const style = document.createElement('style');
+                    style.innerHTML = `
+                      @page {
+                        size: auto;
+                        margin: 10mm;
+                      }
+                      body {
+                        font-family: Arial, sans-serif;
+                        line-height: 1.5;
+                        margin: 0;
+                        padding: 0;
+                      }
+                      .el-descriptions {
+                        width: 100% !important;
+                      }
+                      .el-descriptions-item__label {
+                        width: ${this.descLabelWidth}% !important;
+                      }
+                      .el-descriptions-item__content {
+                        width: ${(100 / this.descColumn) - this.descLabelWidth}% !important;
+                      }
+                      /* 确保图片在打印时显示完整 */
+                      img, .el-image {
+                        max-width: 100% !important;
+                        height: auto !important;
+                      }
+                    `;
+                    frameDoc.head.appendChild(style);
+                    frameDoc.body.appendChild(contentClone);
+                    setTimeout(() => {
+                        printFrame.contentWindow.focus();
+                        printFrame.contentWindow.print();
+                        setTimeout(() => {
+                            document.body.removeChild(printFrame);
+                            document.title = originalTitle;
+                        }, 1000);
+                    }, 500);
+                } catch (e) {
+                    document.body.removeChild(printFrame);
+                    document.title = originalTitle;
+                    this.$message.error('打印过程中发生错误');
+                }
+            };
+            document.body.appendChild(printFrame);
+        } catch (e) {
+            document.title = originalTitle;
+            this.$message.error('打印过程中发生错误');
+        }
+    },
+    /** 打印按钮操作 */
+    handlePrint() {
+        printXjqy(this.queryParams).then(response => {})
+    },
+    /* 导入EXCEL组件 */
+    handleImport() {
+        this.upload.title = "乡级区域导入"
+        this.upload.open = true
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+        this.download('business/xjqy/importTemplate', {
+        }, `乡级区域_template.xlsx`)
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+        this.upload.isUploading = true
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+        this.upload.open = false
+        this.upload.isUploading = false
+        this.$refs.upload.clearFiles()
+        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+        this.getList()
+    },
+    // 提交上传文件
+    submitFileForm() {
+        this.$refs.upload.submit()
+    },
+
+
+  }
+}
+</script>

src/views/business/xjxzq/index.vue

@@ -0,0 +1,422 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="区划代码" prop="xzqdm">
+        <el-input v-model="queryParams.xzqdm" placeholder="请输入区划代码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="区划名称" prop="xzqmc">
+        <el-input v-model="queryParams.xzqmc" placeholder="请输入区划名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="级联代码" prop="importCode">
+        <el-input v-model="queryParams.importCode" placeholder="请输入级联代码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:xjxzq:add']">新增</el-button>
+      </el-col>
+      <!--
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:xjxzq:edit']">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:xjxzq:remove']">删除</el-button>
+      </el-col>
+      -->
+
+      <el-col :span="1.5">
+          <el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['business:xjxzq:import']">导入</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:xjxzq:export']">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+          <el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['business:xjxzq:print']">打印</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+      <!-- 数据列表  列属性 min-width="60" show-overflow-tooltip  @selection-change="handleSelectionChange" -->
+    <el-table v-loading="loading" :data="xjxzqList" border>
+        <!--<el-table-column type="selection" width="55" align="center" />-->
+      <el-table-column label="区划代码" align="center" prop="xzqdm" />
+      <el-table-column label="区划名称" align="center" prop="xzqmc" />
+      <el-table-column label="标识码" align="center" prop="bsm" />
+      <el-table-column label="要素代码" align="center" prop="ysdm" />
+      <el-table-column label="级联代码" align="center" prop="importCode" />
+      <el-table-column label="fid" align="center" prop="fid"  min-width="60"/>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="250">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['business:xjxzq:query']">查看</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:xjxzq:edit']">修改</el-button>
+          <el-dropdown size="mini" v-hasPermi="['business:xjxzq:remove']">
+            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+            <el-dropdown-menu slot="dropdown" style="padding: 5px">
+                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:xjxzq:remove']">删除</el-button>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页插件 -->
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
+
+     <!-- 导入EXCEL组件 -->
+      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+          <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+              <i class="el-icon-upload"></i>
+              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+              <div class="el-upload__tip text-left" slot="tip">
+                  <div class="el-upload__tip" slot="tip">
+                      <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的县级区域
+                  </div>
+                  <p style="color: red">1、仅允许导入xls、xlsx格式文件；</p>
+                  <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+              </div>
+          </el-upload>
+          <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="submitFileForm">确 定</el-button>
+              <el-button @click="upload.open = false">取 消</el-button>
+          </div>
+      </el-dialog>
+
+      <!-- 查看县级区域对话框 -->
+      <el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body>
+         <el-descriptions id="printDetail" :column="descColumn" border :labelStyle="{width: `${descLabelWidth}%`}" :contentStyle="{width: `${(100 / descColumn) - descLabelWidth}%`}">
+           <el-descriptions-item label="区划代码">{{ form.xzqdm }}</el-descriptions-item>
+           <el-descriptions-item label="区划名称">{{ form.xzqmc }}</el-descriptions-item>
+           <el-descriptions-item label="标识码">{{ form.bsm }}</el-descriptions-item>
+           <el-descriptions-item label="要素代码">{{ form.ysdm }}</el-descriptions-item>
+           <el-descriptions-item label="级联代码">{{ form.importCode }}</el-descriptions-item>
+         </el-descriptions>
+          <!-- 弹框操作按钮 -->
+         <div slot="footer" class="dialog-footer">
+             <el-button @click="doPrint">打 印</el-button>
+             <el-button @click="cancelDetail">关 闭</el-button>
+         </div>
+      </el-dialog>
+
+    <!-- 添加或修改县级区域对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="区划代码" prop="xzqdm">
+            <el-input v-model="form.xzqdm" placeholder="请输入区划代码"  show-word-limit :maxlength="6"/>
+        </el-form-item>
+        <el-form-item label="区划名称" prop="xzqmc">
+            <el-input v-model="form.xzqmc" placeholder="请输入区划名称"  show-word-limit :maxlength="100"/>
+        </el-form-item>
+        <el-form-item label="标识码" prop="bsm">
+            <el-input-number v-model="form.bsm" placeholder="请输入标识码" controls-position="right"  />
+        </el-form-item>
+        <el-form-item label="要素代码" prop="ysdm">
+            <el-input v-model="form.ysdm" placeholder="请输入要素代码"  show-word-limit :maxlength="6"/>
+        </el-form-item>
+        <el-form-item label="级联代码" prop="importCode">
+            <el-input v-model="form.importCode" placeholder="请输入级联代码"  show-word-limit :maxlength="20"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listXjxzq, getXjxzq, getXjxzqDetail, delXjxzq, addXjxzq, updateXjxzq, printXjxzq } from "@/api/business/xjxzq"
+import { getToken } from "@/utils/auth"
+export default {
+  name: "Xjxzq",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 县级区域表格数据
+      xjxzqList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 详情组件列数
+      descColumn: 2,
+      // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth}
+      descLabelWidth: 15,
+      // 对话框显示只读的详情
+      viewOpen: false,
+      // 项目路径
+      baseRoutingUrll: process.env.VUE_APP_BASE_API,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+       // 查询排序
+       //orderByColumn: "id",
+       //isAsc: "desc",
+       // 翻译字典
+       //toTranslateDict: "1",
+        xzqdm: null,
+        xzqmc: null,
+        importCode: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        xzqdm: [
+          { required: true, message: "区划代码不能为空", trigger: "blur" }
+        ],
+        xzqmc: [
+          { required: true, message: "区划名称不能为空", trigger: "blur" }
+        ],
+        importCode: [
+          { required: true, message: "级联代码不能为空", trigger: "blur" }
+        ],
+      },
+      // EXCEL导入
+      upload: {
+          // 是否显示弹出层（用户导入）
+          open: false,
+          // 弹出层标题（用户导入）
+          title: "",
+          // 是否禁用上传
+          isUploading: false,
+          // 是否更新已经存在的用户数据
+          updateSupport: 0,
+          // 设置上传的请求头部
+          headers: { Authorization: "Bearer " + getToken() },
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + "/business/xjxzq/importData"
+      },
+
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询县级区域列表 */
+    getList() {
+      this.loading = true
+      listXjxzq(this.queryParams).then(response => {
+        this.xjxzqList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    cancelDetail() {
+        this.viewOpen = false
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        xzqdm: null,
+        xzqmc: null,
+        bsm: null,
+        ysdm: null,
+        theGeom: null,
+        importCode: null,
+        fid: null
+      }
+      this.resetForm("form")
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.fid)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = "添加县级区域"
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const fid = row.fid || this.ids
+      getXjxzq(fid).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = "修改县级区域"
+      })
+    },
+    /** 查看按钮操作 */
+    handleLook(row) {
+      const fid = row.fid || this.ids
+      getXjxzqDetail(fid).then(response => {
+          this.form = response.data;
+          this.viewOpen = true;
+          this.title = "查看县级区域";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.fid != null) {
+            updateXjxzq(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+            })
+          } else {
+            addXjxzq(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const fids = row.fid || this.ids
+      this.$modal.confirm('是否确认删除县级区域编号为"' + fids + '"的数据项？').then(function() {
+        return delXjxzq(fids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('business/xjxzq/export', {
+        ...this.queryParams
+      }, `县级区域_${new Date().getTime()}.xlsx`)
+    },
+    /** 打印表单 */
+    doPrint() {
+        const originalTitle = document.title;
+        try {
+            document.title = this.title || '打印详情';
+            const printElement = document.getElementById('printDetail');
+            const printFrame = document.createElement('iframe');
+            printFrame.style.position = 'absolute';
+            printFrame.style.width = '0';
+            printFrame.style.height = '0';
+            printFrame.style.border = 'none';
+            printFrame.style.left = '-9999px';
+            printFrame.onload = function() {
+                try {
+                    const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document;
+                    const contentClone = printElement.cloneNode(true);
+                    const style = document.createElement('style');
+                    style.innerHTML = `
+                      @page {
+                        size: auto;
+                        margin: 10mm;
+                      }
+                      body {
+                        font-family: Arial, sans-serif;
+                        line-height: 1.5;
+                        margin: 0;
+                        padding: 0;
+                      }
+                      .el-descriptions {
+                        width: 100% !important;
+                      }
+                      .el-descriptions-item__label {
+                        width: ${this.descLabelWidth}% !important;
+                      }
+                      .el-descriptions-item__content {
+                        width: ${(100 / this.descColumn) - this.descLabelWidth}% !important;
+                      }
+                      /* 确保图片在打印时显示完整 */
+                      img, .el-image {
+                        max-width: 100% !important;
+                        height: auto !important;
+                      }
+                    `;
+                    frameDoc.head.appendChild(style);
+                    frameDoc.body.appendChild(contentClone);
+                    setTimeout(() => {
+                        printFrame.contentWindow.focus();
+                        printFrame.contentWindow.print();
+                        setTimeout(() => {
+                            document.body.removeChild(printFrame);
+                            document.title = originalTitle;
+                        }, 1000);
+                    }, 500);
+                } catch (e) {
+                    document.body.removeChild(printFrame);
+                    document.title = originalTitle;
+                    this.$message.error('打印过程中发生错误');
+                }
+            };
+            document.body.appendChild(printFrame);
+        } catch (e) {
+            document.title = originalTitle;
+            this.$message.error('打印过程中发生错误');
+        }
+    },
+    /** 打印按钮操作 */
+    handlePrint() {
+        printXjxzq(this.queryParams).then(response => {})
+    },
+    /* 导入EXCEL组件 */
+    handleImport() {
+        this.upload.title = "县级区域导入"
+        this.upload.open = true
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+        this.download('business/xjxzq/importTemplate', {
+        }, `县级区域_template.xlsx`)
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+        this.upload.isUploading = true
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+        this.upload.open = false
+        this.upload.isUploading = false
+        this.$refs.upload.clearFiles()
+        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+        this.getList()
+    },
+    // 提交上传文件
+    submitFileForm() {
+        this.$refs.upload.submit()
+    },
+
+
+  }
+}
+</script>

src/views/index.vue

@@ -2,38 +2,75 @@
   <div class="dashboard-container">
     <div class="chart-row">
       <div class="chart-container">
-        <h2>用户增长趋势</h2>
+        <h2>资源调查进度</h2>
         <div ref="lineChart" class="chart"></div>
       </div>
-
-      <div class="chart-container">
-        <h2>产品销售统计</h2>
-        <div ref="barChart" class="chart"></div>
-      </div>
     </div>
 
     <div class="chart-row">
-      <div class="chart-container">
-        <h2>用户分布比例</h2>
-        <div ref="pieChart" class="chart"></div>
-      </div>
-
       <div class="info-cards">
         <div class="info-card">
-          <h3>总用户数</h3>
+          <h3>总地块数</h3>
           <p class="number">12,345</p>
           <p class="trend up">↑ 12% 同比</p>
         </div>
         <div class="info-card">
-          <h3>本月销售额</h3>
+          <h3>已调查数</h3>
+          <p class="number">¥ 456,789</p>
+          <p class="trend up">↑ 8% 环比</p>
+        </div>
+      </div>
+
+      <div class="info-cards">
+        <div class="info-card">
+          <h3>待调查数</h3>
+          <p class="number">8,642</p>
+          <p class="trend down">↓ 3% 环比</p>
+        </div>
+        <div class="info-card">
+          <h3>承包总金额</h3>
           <p class="number">¥ 456,789</p>
           <p class="trend up">↑ 8% 环比</p>
         </div>
+      </div>
+
+      <div class="info-cards">
         <div class="info-card">
-          <h3>活跃用户</h3>
+          <h3>兑现总额</h3>
           <p class="number">8,642</p>
           <p class="trend down">↓ 3% 环比</p>
         </div>
+        <div class="info-card">
+          <h3>尚欠总额</h3>
+          <p class="number">¥ 456,789</p>
+          <p class="trend up">↑ 8% 环比</p>
+        </div>
+      </div>
+
+      <div class="info-cards">
+        <div class="info-card">
+          <h3>年总收益</h3>
+          <p class="number">8,642</p>
+          <p class="trend down">↓ 3% 环比</p>
+        </div>
+        <div class="info-card">
+          <h3>经营总面积</h3>
+          <p class="number">¥ 456,789</p>
+          <p class="trend up">↑ 8% 环比</p>
+        </div>
+      </div>
+
+      <div class="info-cards">
+        <div class="info-card">
+          <h3>年总收益</h3>
+          <p class="number">8,642</p>
+          <p class="trend down">↓ 3% 环比</p>
+        </div>
+        <div class="info-card">
+          <h3>经营总面积</h3>
+          <p class="number">¥ 456,789</p>
+          <p class="trend up">↑ 8% 环比</p>
+        </div>
       </div>
     </div>
   </div>
@@ -46,8 +83,7 @@
     name: 'Dashboard',
     mounted() {
       this.initLineChart();
-      this.initBarChart();
-      this.initPieChart();
+
     },
     methods: {
       initLineChart() {
@@ -57,7 +93,7 @@
             trigger: 'axis'
           },
           legend: {
-            data: ['新增用户', '活跃用户', '付费用户']
+            data: ['已调查', '待调查']
           },
           grid: {
             left: '3%',
@@ -68,27 +104,14 @@
           xAxis: {
             type: 'category',
             boundaryGap: false,
-            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
+            data: ['A市', 'B市', 'C市', 'D市', 'E市', 'F市', 'G市']
           },
           yAxis: {
             type: 'value'
           },
           series: [
             {
-              name: '新增用户',
-              type: 'line',
-              data: [120, 132, 101, 134, 90, 230, 210],
-              smooth: true,
-              lineStyle: {
-                width: 3,
-                color: '#5470C6'
-              },
-              itemStyle: {
-                color: '#5470C6'
-              }
-            },
-            {
-              name: '活跃用户',
+              name: '已调查',
               type: 'line',
               data: [220, 182, 191, 234, 290, 330, 310],
               smooth: true,
@@ -101,7 +124,7 @@
               }
             },
             {
-              name: '付费用户',
+              name: '待调查',
               type: 'line',
               data: [150, 232, 201, 154, 190, 330, 410],
               smooth: true,
@@ -120,107 +143,6 @@
           chart.resize();
         });
       },
-      initBarChart() {
-        const chart = echarts.init(this.$refs.barChart);
-        const option = {
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
-            }
-          },
-          legend: {
-            data: ['2022', '2023']
-          },
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-          },
-          xAxis: {
-            type: 'value'
-          },
-          yAxis: {
-            type: 'category',
-            data: ['产品A', '产品B', '产品C', '产品D', '产品E']
-          },
-          series: [
-            {
-              name: '2022',
-              type: 'bar',
-              data: [320, 302, 341, 374, 390],
-              itemStyle: {
-                color: '#91CC75'
-              }
-            },
-            {
-              name: '2023',
-              type: 'bar',
-              data: [420, 432, 401, 454, 590],
-              itemStyle: {
-                color: '#5470C6'
-              }
-            }
-          ]
-        };
-        chart.setOption(option);
-        window.addEventListener('resize', function() {
-          chart.resize();
-        });
-      },
-      initPieChart() {
-        const chart = echarts.init(this.$refs.pieChart);
-        const option = {
-          tooltip: {
-            trigger: 'item'
-          },
-          legend: {
-            orient: 'vertical',
-            right: 10,
-            top: 'center'
-          },
-          series: [
-            {
-              name: '用户分布',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: '#fff',
-                borderWidth: 2
-              },
-              label: {
-                show: false,
-                position: 'center'
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: '18',
-                  fontWeight: 'bold'
-                }
-              },
-              labelLine: {
-                show: false
-              },
-              data: [
-                { value: 1048, name: '华北地区' },
-                { value: 735, name: '华东地区' },
-                { value: 580, name: '华南地区' },
-                { value: 484, name: '西部地区' },
-                { value: 300, name: '东北地区' }
-              ],
-              color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE']
-            }
-          ]
-        };
-        chart.setOption(option);
-        window.addEventListener('resize', function() {
-          chart.resize();
-        });
-      }
     }
   };
 </script>

src/views/index_v2.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="dashboard-container">
+    <div class="chart-row">
+      <div class="chart-container">
+        <h2>用户增长趋势</h2>
+        <div ref="lineChart" class="chart"></div>
+      </div>
+
+      <div class="chart-container">
+        <h2>产品销售统计</h2>
+        <div ref="barChart" class="chart"></div>
+      </div>
+    </div>
+
+    <div class="chart-row">
+      <div class="chart-container">
+        <h2>用户分布比例</h2>
+        <div ref="pieChart" class="chart"></div>
+      </div>
+
+      <div class="info-cards">
+        <div class="info-card">
+          <h3>总用户数</h3>
+          <p class="number">12,345</p>
+          <p class="trend up">↑ 12% 同比</p>
+        </div>
+        <div class="info-card">
+          <h3>本月销售额</h3>
+          <p class="number">¥ 456,789</p>
+          <p class="trend up">↑ 8% 环比</p>
+        </div>
+        <div class="info-card">
+          <h3>活跃用户</h3>
+          <p class="number">8,642</p>
+          <p class="trend down">↓ 3% 环比</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+
+  export default {
+    name: 'Dashboard',
+    mounted() {
+      this.initLineChart();
+      this.initBarChart();
+      this.initPieChart();
+    },
+    methods: {
+      initLineChart() {
+        const chart = echarts.init(this.$refs.lineChart);
+        const option = {
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: ['新增用户', '活跃用户', '付费用户']
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [
+            {
+              name: '新增用户',
+              type: 'line',
+              data: [120, 132, 101, 134, 90, 230, 210],
+              smooth: true,
+              lineStyle: {
+                width: 3,
+                color: '#5470C6'
+              },
+              itemStyle: {
+                color: '#5470C6'
+              }
+            },
+            {
+              name: '活跃用户',
+              type: 'line',
+              data: [220, 182, 191, 234, 290, 330, 310],
+              smooth: true,
+              lineStyle: {
+                width: 3,
+                color: '#91CC75'
+              },
+              itemStyle: {
+                color: '#91CC75'
+              }
+            },
+            {
+              name: '付费用户',
+              type: 'line',
+              data: [150, 232, 201, 154, 190, 330, 410],
+              smooth: true,
+              lineStyle: {
+                width: 3,
+                color: '#EE6666'
+              },
+              itemStyle: {
+                color: '#EE6666'
+              }
+            }
+          ]
+        };
+        chart.setOption(option);
+        window.addEventListener('resize', function() {
+          chart.resize();
+        });
+      },
+      initBarChart() {
+        const chart = echarts.init(this.$refs.barChart);
+        const option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          legend: {
+            data: ['2022', '2023']
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'value'
+          },
+          yAxis: {
+            type: 'category',
+            data: ['产品A', '产品B', '产品C', '产品D', '产品E']
+          },
+          series: [
+            {
+              name: '2022',
+              type: 'bar',
+              data: [320, 302, 341, 374, 390],
+              itemStyle: {
+                color: '#91CC75'
+              }
+            },
+            {
+              name: '2023',
+              type: 'bar',
+              data: [420, 432, 401, 454, 590],
+              itemStyle: {
+                color: '#5470C6'
+              }
+            }
+          ]
+        };
+        chart.setOption(option);
+        window.addEventListener('resize', function() {
+          chart.resize();
+        });
+      },
+      initPieChart() {
+        const chart = echarts.init(this.$refs.pieChart);
+        const option = {
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            right: 10,
+            top: 'center'
+          },
+          series: [
+            {
+              name: '用户分布',
+              type: 'pie',
+              radius: ['40%', '70%'],
+              avoidLabelOverlap: false,
+              itemStyle: {
+                borderRadius: 10,
+                borderColor: '#fff',
+                borderWidth: 2
+              },
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '18',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 1048, name: '华北地区' },
+                { value: 735, name: '华东地区' },
+                { value: 580, name: '华南地区' },
+                { value: 484, name: '西部地区' },
+                { value: 300, name: '东北地区' }
+              ],
+              color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE']
+            }
+          ]
+        };
+        chart.setOption(option);
+        window.addEventListener('resize', function() {
+          chart.resize();
+        });
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  .dashboard-container {
+    padding: 20px;
+    background-color: #f5f7fa;
+    min-height: 100vh;
+  }
+
+  h1 {
+    color: #333;
+    margin-bottom: 30px;
+  }
+
+  .chart-row {
+    display: flex;
+    margin-bottom: 20px;
+    gap: 20px;
+  }
+
+  .chart-container {
+    flex: 1;
+    background-color: white;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .chart {
+    height: 350px;
+  }
+
+  .info-cards {
+    flex: 0 0 300px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .info-card {
+    background-color: white;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .info-card h3 {
+    color: #666;
+    margin-bottom: 10px;
+    font-size: 16px;
+  }
+
+  .info-card .number {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 5px;
+    color: #333;
+  }
+
+  .info-card .trend {
+    font-size: 14px;
+  }
+
+  .trend.up {
+    color: #67C23A;
+  }
+
+  .trend.down {
+    color: #F56C6C;
+  }
+
+  @media (max-width: 1200px) {
+    .chart-row {
+      flex-direction: column;
+    }
+
+    .info-cards {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+
+    .info-card {
+      flex: 1;
+      min-width: 200px;
+    }
+  }
+</style>

src/views/resource/land/index.vue

@@ -0,0 +1,708 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
+        <!--部门数据-->
+        <pane size="16">
+          <el-col>
+            <div class="head-container">
+              <el-input v-model="deptName" placeholder="请输入区划名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
+            </div>
+            <div class="head-container container_main">
+              <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
+            </div>
+          </el-col>
+        </pane>
+        <!--用户数据-->
+        <pane size="84">
+          <el-col>
+
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+              <el-form-item label="地块代码" prop="dkbm">
+                <el-input v-model="queryParams.dkbm" placeholder="请输入地块代码" clearable @keyup.enter.native="handleQuery"/>
+              </el-form-item>
+              <el-form-item label="地块名称" prop="dkmc">
+                <el-input v-model="queryParams.dkmc" placeholder="请输入地块名称" clearable @keyup.enter.native="handleQuery"/>
+              </el-form-item>
+              <el-form-item label="权属性质" prop="syqxz">
+                <el-select v-model="queryParams.syqxz" placeholder="请选择所有权性质" clearable>
+                  <el-option v-for="dict in dict.type.ownership_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="地块类别" prop="dklb">
+                <el-select v-model="queryParams.dklb" placeholder="请选择地块类别" clearable>
+                  <el-option v-for="dict in dict.type.land_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="利用类型" prop="tdlylx">
+                <el-select v-model="queryParams.tdlylx" placeholder="请选择土地利用类型" clearable>
+                  <el-option v-for="dict in dict.type.land_use" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="地力等级" prop="dldj">
+                <el-select v-model="queryParams.dldj" placeholder="请选择地力等级" clearable>
+                  <el-option v-for="dict in dict.type.land_grade_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="土地用途" prop="tdyt">
+                <el-select v-model="queryParams.tdyt" placeholder="请选择土地用途" clearable>
+                  <el-option v-for="dict in dict.type.land_use_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="基本农田" prop="sfjbnt">
+                <el-select v-model="queryParams.sfjbnt" placeholder="请选择是否基本农田" clearable>
+                  <el-option v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <!--<el-form-item label="是账外地" prop="sfzwd">
+                <el-select v-model="queryParams.sfzwd" placeholder="请选择是否账外地" clearable>
+                  <el-option v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>-->
+              <el-form-item label="调查状态" prop="surveyStatus">
+                <el-select v-model="queryParams.surveyStatus" placeholder="请选择调查状态" clearable>
+                  <el-option v-for="dict in dict.type.survey_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['resource:land:add']">新增</el-button>
+              </el-col>
+              <!--
+              <el-col :span="1.5">
+                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['resource:land:edit']">修改</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['resource:land:remove']">删除</el-button>
+              </el-col>
+              -->
+              <el-col :span="1.5">
+                  <el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['resource:land:import']">导入</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['resource:land:export']">导出</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                  <el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['resource:land:print']">打印</el-button>
+              </el-col>
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+
+              <!-- 数据列表  列属性 min-width="60" show-overflow-tooltip  @selection-change="handleSelectionChange" -->
+            <el-table v-loading="loading" :data="landList" border>
+                <!--<el-table-column type="selection" width="55" align="center" />
+              <el-table-column label="fid " align="center" prop="fid"  min-width="60"/>-->
+              <el-table-column label="地块代码" align="center" prop="dkbm" min-width="180" show-overflow-tooltip />
+              <el-table-column label="地块名称" align="left" prop="dkmc" min-width="120" show-overflow-tooltip />
+             <!-- <el-table-column label="所有权性质" align="center" prop="syqxz">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.ownership_type" :value="scope.row.syqxz"/>
+                </template>
+              </el-table-column>-->
+              <el-table-column label="地块类别" align="center" prop="dklb" min-width="80" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.land_type" :value="scope.row.dklb"/>
+                </template>
+              </el-table-column>
+              <!--<el-table-column label="土地利用类型" align="center" prop="tdlylx">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.land_use" :value="scope.row.tdlylx"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="地力等级" align="center" prop="dldj">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.land_grade_type" :value="scope.row.dldj"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="土地用途" align="center" prop="tdyt">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.land_use_type" :value="scope.row.tdyt"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="是否基本农田" align="center" prop="sfjbnt">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.is_common" :value="scope.row.sfjbnt"/>
+                </template>
+              </el-table-column>-->
+              <el-table-column label="地块四至" align="center">
+                <el-table-column label="地块东至" align="left" prop="dkdz" min-width="100" show-overflow-tooltip />
+                <el-table-column label="地块西至" align="left" prop="dkxz" min-width="100" show-overflow-tooltip />
+                <el-table-column label="地块南至" align="left" prop="dknz" min-width="100" show-overflow-tooltip />
+                <el-table-column label="地块北至" align="left" prop="dkbz" min-width="100" show-overflow-tooltip />
+              </el-table-column>
+              <!--<el-table-column label="备注信息" align="center" prop="dkbzxx" />
+              <el-table-column label="指界人姓名" align="center" prop="zjrxm" />
+              <el-table-column label="图显面积 " align="center" prop="txmj" />-->
+              <el-table-column label="实测面积" align="center" prop="scmjm" min-width="80" show-overflow-tooltip/>
+              <el-table-column label="调查状态" align="center" prop="surveyStatus" min-width="80" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.survey_status" :value="scope.row.surveyStatus"/>
+                </template>
+              </el-table-column>
+              <!--<el-table-column label="部门级联代码" align="center" prop="importCode" />
+              <el-table-column label="区域位置名称" align="center" prop="deptName" />-->
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="170">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['resource:land:query']">查看</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-s-promotion" @click="handleMap(scope.row)" v-hasPermi="['resource:land:map']">地图</el-button>
+                  <el-dropdown size="mini" v-hasPermi="['resource:land:remove']">
+                    <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+                    <el-dropdown-menu slot="dropdown" style="padding: 5px">
+                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['resource:land:edit']">修改</el-button>
+                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['resource:land:remove']">删除</el-button>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <!-- 分页插件 -->
+            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
+
+          </el-col>
+        </pane>
+      </splitpanes>
+    </el-row>
+
+     <!-- 导入EXCEL组件 -->
+      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+          <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+              <i class="el-icon-upload"></i>
+              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+              <div class="el-upload__tip text-left" slot="tip">
+                  <div class="el-upload__tip" slot="tip">
+                      <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的地块属性
+                  </div>
+                  <p style="color: red">1、仅允许导入xls、xlsx格式文件；</p>
+                  <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+              </div>
+          </el-upload>
+          <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="submitFileForm">确 定</el-button>
+              <el-button @click="upload.open = false">取 消</el-button>
+          </div>
+      </el-dialog>
+
+      <!-- 查看地块属性对话框 -->
+      <el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body>
+        <el-descriptions title="地块信息" border :column="2" class="margin-top">
+          <el-descriptions-item label="区域位置名称">{{ form.deptName }}</el-descriptions-item>
+          <el-descriptions-item label="标识码">{{ form.bsm }}</el-descriptions-item>
+          <el-descriptions-item label="要素代码">{{ form.ysdm }}</el-descriptions-item>
+          <el-descriptions-item label="地块代码">{{ form.dkbm }}</el-descriptions-item>
+          <el-descriptions-item label="地块名称">{{ form.dkmc }}</el-descriptions-item>
+          <el-descriptions-item label="所有权性质">{{ form.syqxz }}</el-descriptions-item>
+          <el-descriptions-item label="地块类别">{{ form.dklb }}</el-descriptions-item>
+          <el-descriptions-item label="土地利用类型">{{ form.tdlylx }}</el-descriptions-item>
+          <el-descriptions-item label="地力等级">{{ form.dldj }}</el-descriptions-item>
+          <el-descriptions-item label="土地用途">{{ form.tdyt }}</el-descriptions-item>
+          <el-descriptions-item label="是否基本农田">{{ form.sfjbnt }}</el-descriptions-item>
+          <el-descriptions-item label="地块东至">{{ form.dkdz }}</el-descriptions-item>
+          <el-descriptions-item label="地块西至">{{ form.dkxz }}</el-descriptions-item>
+          <el-descriptions-item label="地块南至">{{ form.dknz }}</el-descriptions-item>
+          <el-descriptions-item label="地块北至">{{ form.dkbz }}</el-descriptions-item>
+          <el-descriptions-item label="备注信息">{{ form.dkbzxx }}</el-descriptions-item>
+          <el-descriptions-item label="指界人姓名">{{ form.zjrxm }}</el-descriptions-item>
+          <el-descriptions-item label="图显面积">{{ form.txmj }}</el-descriptions-item>
+          <el-descriptions-item label="实测面积">{{ form.scmjm }}</el-descriptions-item>
+          <el-descriptions-item label="是否账外地">{{ form.sfzwd }}</el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions title="经营数据" border :column="2" class="margin-top">
+          <el-descriptions-item label="经营面积(亩)">{{ form.jymj }}</el-descriptions-item>
+          <el-descriptions-item label="经营方式">{{ form.jyfs }}</el-descriptions-item>
+          <el-descriptions-item label="经营对象名称">{{ form.jydxmc }}</el-descriptions-item>
+          <el-descriptions-item label="经营开始时间">{{ form.jykssj }}</el-descriptions-item>
+          <el-descriptions-item label="经营结束时间">{{ form.jyjssj }}</el-descriptions-item>
+          <el-descriptions-item label="承包金额(元)">{{ form.cbje }}</el-descriptions-item>
+          <el-descriptions-item label="备注">{{ form.bz }}</el-descriptions-item>
+          <el-descriptions-item label="调查状态">{{ form.surveyStatus }}</el-descriptions-item>
+          <el-descriptions-item label="实物图">
+            <div v-if="!!form.dkImg">
+              <el-tooltip effect="light" :content="item" placement="bottom" v-for="(item, index) in form.dkImg.split(',')" :key="index">
+                <el-image style="height: 64px; width: 64px; margin: 2px; display: inline-block;" fit="scale-down" :src="this.baseRoutingUrll + item" :preview-src-list="form.dkImg.split(',').map((x) => this.baseRoutingUrll + x)"/>
+              </el-tooltip>
+            </div>
+          </el-descriptions-item>
+        </el-descriptions>
+
+          <!-- 弹框操作按钮 -->
+         <div slot="footer" class="dialog-footer">
+             <el-button @click="doPrint">打 印</el-button>
+             <el-button @click="cancelDetail">关 闭</el-button>
+         </div>
+      </el-dialog>
+
+    <!-- 添加或修改地块属性对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+
+        <el-form-item label="区域位置" prop="deptName">
+          <el-input v-model="form.deptName" placeholder="请输入区域位置名称"  show-word-limit :maxlength="100"/>
+        </el-form-item>
+        <el-form-item label="地块代码" prop="dkbm">
+            <el-input v-model="form.dkbm" placeholder="地块代码不输入时，系统自动分配"  show-word-limit :maxlength="19"/>
+        </el-form-item>
+        <el-form-item label="地块名称" prop="dkmc">
+            <el-input v-model="form.dkmc" placeholder="请输入地块名称"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="所有权性质" prop="syqxz">
+          <el-select v-model="form.syqxz" placeholder="请选择所有权性质">
+            <el-option v-for="dict in dict.type.ownership_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="地块类别" prop="dklb">
+          <el-select v-model="form.dklb" placeholder="请选择地块类别">
+            <el-option v-for="dict in dict.type.land_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="土地利用类型" prop="tdlylx">
+          <el-select v-model="form.tdlylx" placeholder="请选择土地利用类型">
+            <el-option v-for="dict in dict.type.land_use" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="地力等级" prop="dldj">
+          <el-select v-model="form.dldj" placeholder="请选择地力等级">
+            <el-option v-for="dict in dict.type.land_grade_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="土地用途" prop="tdyt">
+          <el-select v-model="form.tdyt" placeholder="请选择土地用途">
+            <el-option v-for="dict in dict.type.land_use_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否基本农田" prop="sfjbnt">
+          <el-radio-group v-model="form.sfjbnt">
+            <el-radio v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="地块东至" prop="dkdz">
+            <el-input v-model="form.dkdz" placeholder="请输入地块东至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="地块西至" prop="dkxz">
+            <el-input v-model="form.dkxz" placeholder="请输入地块西至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="地块南至" prop="dknz">
+            <el-input v-model="form.dknz" placeholder="请输入地块南至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="地块北至" prop="dkbz">
+            <el-input v-model="form.dkbz" placeholder="请输入地块北至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="备注信息" prop="dkbzxx">
+            <el-input v-model="form.dkbzxx" placeholder="请输入备注信息"  show-word-limit :maxlength="254"/>
+        </el-form-item>
+        <el-form-item label="指界人姓名" prop="zjrxm">
+            <el-input v-model="form.zjrxm" placeholder="请输入指界人姓名"  show-word-limit :maxlength="100"/>
+        </el-form-item>
+        <el-form-item label="图显面积" prop="txmj">
+            <el-input-number v-model="form.txmj" placeholder="请输入图显面积" controls-position="right"   :precision="2"/>
+        </el-form-item>
+        <el-form-item label="实测面积" prop="scmjm">
+            <el-input-number v-model="form.scmjm" placeholder="请输入实测面积" controls-position="right"   :precision="3"/>
+        </el-form-item>
+        <el-form-item label="是否账外地" prop="sfzwd">
+          <el-radio-group v-model="form.sfzwd">
+            <el-radio v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="调查状态" prop="surveyStatus">
+          <el-radio-group v-model="form.surveyStatus">
+            <el-radio v-for="dict in dict.type.survey_status" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listLand, getLand, getLandDetail, getLandDetailByDkbm, delLand, addLand, updateLand, printLand } from "@/api/resource/land"
+import { getToken } from "@/utils/auth"
+import Treeselect from "@riophae/vue-treeselect";
+import { Splitpanes, Pane } from "splitpanes"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import "splitpanes/dist/splitpanes.css"
+import { deptTreeSelect } from "@/api/system/user"
+
+export default {
+  name: "Land",
+  dicts: ['ownership_type', 'land_use_type', 'survey_status', 'is_common', 'land_grade_type', 'land_type', 'land_use'],
+  components: { Treeselect, Splitpanes, Pane },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 地块属性表格数据
+      landList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 详情组件列数
+      descColumn: 2,
+      // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth}
+      descLabelWidth: 15,
+      // 对话框显示只读的详情
+      viewOpen: false,
+      // 项目路径
+      baseRoutingUrll: process.env.VUE_APP_BASE_API,
+      // 所有部门树选项
+      deptOptions: undefined,
+      // 过滤掉已禁用部门树选项
+      enabledDeptOptions: undefined,
+      // 筛选部门名称
+      deptName: undefined,
+      // 选中的部门
+      selectDeptName: null,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+       // 查询排序
+       //orderByColumn: "id",
+       //isAsc: "desc",
+       // 翻译字典
+       //toTranslateDict: "1",
+        dkbm: null,
+        dkmc: null,
+        syqxz: null,
+        dklb: null,
+        tdlylx: null,
+        dldj: null,
+        tdyt: null,
+        sfjbnt: null,
+        surveyStatus: null,
+        importCode: null,
+        sfzwd: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        dkmc: [
+          { required: true, message: "地块名称不能为空", trigger: "blur" }
+        ],
+        scmjm: [
+          { required: true, message: "实测面积不能为空", trigger: "blur" }
+        ],
+
+      },
+      // EXCEL导入
+      upload: {
+          // 是否显示弹出层（用户导入）
+          open: false,
+          // 弹出层标题（用户导入）
+          title: "",
+          // 是否禁用上传
+          isUploading: false,
+          // 是否更新已经存在的用户数据
+          updateSupport: 0,
+          // 设置上传的请求头部
+          headers: { Authorization: "Bearer " + getToken() },
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + "/resource/land/importData"
+      },
+
+    }
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.getDeptTree()
+    this.getList()
+  },
+  methods: {
+    /** 查询地块属性列表 */
+    getList() {
+      this.loading = true
+      listLand(this.queryParams).then(response => {
+        this.landList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    cancelDetail() {
+        this.viewOpen = false
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        bsm: null,
+        ysdm: '211011',
+        dkbm: null,
+        dkmc: null,
+        syqxz: '30',
+        dklb: '22',
+        tdlylx: '011',
+        dldj: '01',
+        tdyt: '1',
+        sfjbnt: '1',
+        dkdz: null,
+        dkxz: null,
+        dknz: null,
+        dkbz: null,
+        dkbzxx: null,
+        zjrxm: null,
+        txmj: null,
+        scmjm: null,
+        theGeom: null,
+        surveyStatus: '1',
+        importCode: null,
+        deptName: null,
+        sfzwd: '2'
+      }
+      this.resetForm("form")
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.fid)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      if(this.selectDeptName == null || this.selectDeptName == ''){
+        this.$modal.msgWarning("请先选择村/组行政区划！")
+        return
+      }
+      this.reset()
+      this.form.deptId = this.queryParams.deptId;
+      this.form.deptName = this.selectDeptName;
+      this.open = true
+      this.title = "添加地块属性"
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const fid = row.fid || this.ids
+      getLand(fid).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = "修改地块属性"
+      })
+    },
+    /** 查看按钮操作 */
+    handleLook(row) {
+      getLandDetailByDkbm(row.dkbm).then(response => {
+          this.form = response.data;
+          this.viewOpen = true;
+          this.title = "查看地块属性";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.fid != null) {
+            updateLand(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+            })
+          } else {
+            addLand(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const fids = row.fid || this.ids
+      this.$modal.confirm('是否确认删除地块属性编号为"' + fids + '"的数据项？').then(function() {
+        return delLand(fids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('resource/land/export', {
+        ...this.queryParams
+      }, `地块属性_${new Date().getTime()}.xlsx`)
+    },
+    /** 打印表单 */
+    doPrint() {
+        const originalTitle = document.title;
+        try {
+            document.title = this.title || '打印详情';
+            const printElement = document.getElementById('printDetail');
+            const printFrame = document.createElement('iframe');
+            printFrame.style.position = 'absolute';
+            printFrame.style.width = '0';
+            printFrame.style.height = '0';
+            printFrame.style.border = 'none';
+            printFrame.style.left = '-9999px';
+            printFrame.onload = function() {
+                try {
+                    const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document;
+                    const contentClone = printElement.cloneNode(true);
+                    const style = document.createElement('style');
+                    style.innerHTML = `
+                      @page {
+                        size: auto;
+                        margin: 10mm;
+                      }
+                      body {
+                        font-family: Arial, sans-serif;
+                        line-height: 1.5;
+                        margin: 0;
+                        padding: 0;
+                      }
+                      .el-descriptions {
+                        width: 100% !important;
+                      }
+                      .el-descriptions-item__label {
+                        width: ${this.descLabelWidth}% !important;
+                      }
+                      .el-descriptions-item__content {
+                        width: ${(100 / this.descColumn) - this.descLabelWidth}% !important;
+                      }
+                      /* 确保图片在打印时显示完整 */
+                      img, .el-image {
+                        max-width: 100% !important;
+                        height: auto !important;
+                      }
+                    `;
+                    frameDoc.head.appendChild(style);
+                    frameDoc.body.appendChild(contentClone);
+                    setTimeout(() => {
+                        printFrame.contentWindow.focus();
+                        printFrame.contentWindow.print();
+                        setTimeout(() => {
+                            document.body.removeChild(printFrame);
+                            document.title = originalTitle;
+                        }, 1000);
+                    }, 500);
+                } catch (e) {
+                    document.body.removeChild(printFrame);
+                    document.title = originalTitle;
+                    this.$message.error('打印过程中发生错误');
+                }
+            };
+            document.body.appendChild(printFrame);
+        } catch (e) {
+            document.title = originalTitle;
+            this.$message.error('打印过程中发生错误');
+        }
+    },
+    /** 打印按钮操作 */
+    handlePrint() {
+        printLand(this.queryParams).then(response => {})
+    },
+    /* 导入EXCEL组件 */
+    handleImport() {
+        this.upload.title = "地块属性导入"
+        this.upload.open = true
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+        this.download('resource/land/importTemplate', {
+        }, `地块属性_template.xlsx`)
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+        this.upload.isUploading = true
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+        this.upload.open = false
+        this.upload.isUploading = false
+        this.$refs.upload.clearFiles()
+        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+        this.getList()
+    },
+    // 提交上传文件
+    submitFileForm() {
+        this.$refs.upload.submit()
+    },
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then(response => {
+        this.deptOptions = response.data
+        this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+      })
+    },
+    // 过滤禁用的部门
+    filterDisabledDept(deptList) {
+      return deptList.filter(dept => {
+        if (dept.disabled) {
+          return false
+        }
+        if (dept.children && dept.children.length) {
+          dept.children = this.filterDisabledDept(dept.children)
+        }
+        return true
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id
+      this.selectDeptName = data.label
+      this.handleQuery()
+    },
+
+  }
+}
+</script>
+<style scoped type="scss">
+  .container_main{
+    height: 75vh;
+    overflow-y: scroll;
+  }
+</style>

src/views/resource/operation/index.vue

@@ -0,0 +1,703 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
+        <!--部门数据-->
+        <pane size="16">
+          <el-col>
+            <div class="head-container">
+              <el-input v-model="deptName" placeholder="请输入区划名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
+            </div>
+            <div class="head-container container_main">
+              <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
+            </div>
+          </el-col>
+        </pane>
+        <!--用户数据-->
+        <pane size="84">
+          <el-col>
+
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+              <el-form-item label="地块编码" prop="dkbm">
+                <el-input v-model="queryParams.dkbm" placeholder="请输入地块编码" clearable @keyup.enter.native="handleQuery"/>
+              </el-form-item>
+              <el-form-item label="地块名称" prop="dkmc">
+                <el-input v-model="queryParams.dkmc" placeholder="请输入地块名称" clearable @keyup.enter.native="handleQuery"/>
+              </el-form-item>
+              <el-form-item label="经营方式" prop="jyfs">
+                <el-select v-model="queryParams.jyfs" placeholder="请选择经营方式" clearable>
+                  <el-option v-for="dict in dict.type.jyfs" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="经营对象" prop="jydxmc">
+                <el-input v-model="queryParams.jydxmc" placeholder="请输入经营对象名称" clearable @keyup.enter.native="handleQuery"/>
+              </el-form-item>
+              <el-form-item label="对象类型" prop="jydxlx">
+                <el-select v-model="queryParams.jydxlx" placeholder="请选择经营对象类型" clearable>
+                  <el-option v-for="dict in dict.type.jydxlx" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="证件类型" prop="jydxzjlx">
+                <el-select v-model="queryParams.jydxzjlx" placeholder="请选择经营对象证件类型" clearable>
+                  <el-option v-for="dict in dict.type.zjlx" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="证件号码" prop="jydxzjhm">
+                <el-input v-model="queryParams.jydxzjhm" placeholder="请输入经营对象证件号码" clearable @keyup.enter.native="handleQuery"/>
+              </el-form-item>
+              <el-form-item label="签订合同" prop="sfqdht">
+                <el-select v-model="queryParams.sfqdht" placeholder="请选择是否签订合同" clearable>
+                  <el-option v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="调查状态" prop="surveyStatus">
+                <el-select v-model="queryParams.surveyStatus" placeholder="请选择调查状态" clearable>
+                  <el-option v-for="dict in dict.type.survey_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['resource:operation:add']">新增</el-button>
+              </el-col>
+              <!--
+              <el-col :span="1.5">
+                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['resource:operation:edit']">修改</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['resource:operation:remove']">删除</el-button>
+              </el-col>
+              -->
+              <el-col :span="1.5">
+                  <el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['resource:operation:import']">导入</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['resource:operation:export']">导出</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                  <el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['resource:operation:print']">打印</el-button>
+              </el-col>
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+
+              <!-- 数据列表  列属性 min-width="60" show-overflow-tooltip  @selection-change="handleSelectionChange" -->
+            <el-table v-loading="loading" :data="operationList" border>
+                <!--<el-table-column type="selection" width="55" align="center" />-->
+              <el-table-column label="地块代码" align="center" prop="dkbm" min-width="180" show-overflow-tooltip />
+              <el-table-column label="地块名称" align="left" prop="dkmc" min-width="120" show-overflow-tooltip />
+              <el-table-column label="地块四至" align="center">
+                <el-table-column label="地块东至" align="left" prop="dkdz" min-width="100" show-overflow-tooltip />
+                <el-table-column label="地块西至" align="left" prop="dkxz" min-width="100" show-overflow-tooltip />
+                <el-table-column label="地块南至" align="left" prop="dknz" min-width="100" show-overflow-tooltip />
+                <el-table-column label="地块北至" align="left" prop="dkbz" min-width="100" show-overflow-tooltip />
+              </el-table-column>
+              <el-table-column label="经营面积" align="right" prop="jymj"  min-width="80" show-overflow-tooltip/>
+              <el-table-column label="经营方式" align="center" prop="jyfs"  min-width="80" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.jyfs" :value="scope.row.jyfs"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="经营对象名称" align="left" prop="jydxmc"  min-width="150" show-overflow-tooltip/>
+              <!--<el-table-column label="经营对象证件号码" align="center" prop="jydxzjhm" />
+              <el-table-column label="是否签订合同" align="center" prop="sfqdht">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.is_common" :value="scope.row.sfqdht"/>
+                </template>
+              </el-table-column>-->
+              <el-table-column label="承包金额" align="right" prop="cbje"  min-width="80" show-overflow-tooltip/>
+              <el-table-column label="年收益" align="right" prop="nsy"  min-width="80" show-overflow-tooltip/>
+              <el-table-column label="调查状态" align="center" prop="surveyStatus"  min-width="80" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.survey_status" :value="scope.row.surveyStatus"/>
+                </template>
+              </el-table-column>
+              <!--<el-table-column label="区域位置名称" align="center" prop="deptName" />-->
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="150">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['resource:operation:query']">查看</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['resource:operation:edit']">修改</el-button>
+                  <el-dropdown size="mini" v-hasPermi="['resource:operation:remove']">
+                    <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+                    <el-dropdown-menu slot="dropdown" style="padding: 5px">
+                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['resource:operation:remove']">删除</el-button>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <!-- 分页插件 -->
+            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
+
+          </el-col>
+        </pane>
+      </splitpanes>
+    </el-row>
+
+     <!-- 导入EXCEL组件 -->
+      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+          <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+              <i class="el-icon-upload"></i>
+              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+              <div class="el-upload__tip text-left" slot="tip">
+                  <div class="el-upload__tip" slot="tip">
+                      <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的地块经营
+                  </div>
+                  <p style="color: red">1、仅允许导入xls、xlsx格式文件；</p>
+                  <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+              </div>
+          </el-upload>
+          <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="submitFileForm">确 定</el-button>
+              <el-button @click="upload.open = false">取 消</el-button>
+          </div>
+      </el-dialog>
+
+      <!-- 查看地块经营对话框 -->
+      <el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body>
+        <el-descriptions title="地块信息" border :column="2" class="margin-top">
+          <el-descriptions-item label="区域位置名称">{{ form.deptName }}</el-descriptions-item>
+          <el-descriptions-item label="标识码">{{ form.bsm }}</el-descriptions-item>
+          <el-descriptions-item label="要素代码">{{ form.ysdm }}</el-descriptions-item>
+          <el-descriptions-item label="地块代码">{{ form.dkbm }}</el-descriptions-item>
+          <el-descriptions-item label="地块名称">{{ form.dkmc }}</el-descriptions-item>
+          <el-descriptions-item label="所有权性质">{{ form.syqxz }}</el-descriptions-item>
+          <el-descriptions-item label="地块类别">{{ form.dklb }}</el-descriptions-item>
+          <el-descriptions-item label="土地利用类型">{{ form.tdlylx }}</el-descriptions-item>
+          <el-descriptions-item label="地力等级">{{ form.dldj }}</el-descriptions-item>
+          <el-descriptions-item label="土地用途">{{ form.tdyt }}</el-descriptions-item>
+          <el-descriptions-item label="是否基本农田">{{ form.sfjbnt }}</el-descriptions-item>
+          <el-descriptions-item label="地块东至">{{ form.dkdz }}</el-descriptions-item>
+          <el-descriptions-item label="地块西至">{{ form.dkxz }}</el-descriptions-item>
+          <el-descriptions-item label="地块南至">{{ form.dknz }}</el-descriptions-item>
+          <el-descriptions-item label="地块北至">{{ form.dkbz }}</el-descriptions-item>
+          <el-descriptions-item label="备注信息">{{ form.dkbzxx }}</el-descriptions-item>
+          <el-descriptions-item label="指界人姓名">{{ form.zjrxm }}</el-descriptions-item>
+          <el-descriptions-item label="图显面积">{{ form.txmj }}</el-descriptions-item>
+          <el-descriptions-item label="实测面积">{{ form.scmjm }}</el-descriptions-item>
+          <el-descriptions-item label="是否账外地">{{ form.sfzwd }}</el-descriptions-item>
+        </el-descriptions>
+
+         <el-descriptions title="经营数据" border :column="2" class="margin-top">
+          <el-descriptions-item label="经营面积(亩)">{{ form.jymj }}</el-descriptions-item>
+          <el-descriptions-item label="经营方式">{{ form.jyfs }}</el-descriptions-item>
+          <el-descriptions-item label="经营对象名称">{{ form.jydxmc }}</el-descriptions-item>
+          <el-descriptions-item label="经营开始时间">{{ form.jykssj }}</el-descriptions-item>
+          <el-descriptions-item label="经营结束时间">{{ form.jyjssj }}</el-descriptions-item>
+          <el-descriptions-item label="承包金额(元)">{{ form.cbje }}</el-descriptions-item>
+          <el-descriptions-item label="备注">{{ form.bz }}</el-descriptions-item>
+           <el-descriptions-item label="调查状态">{{ form.surveyStatus }}</el-descriptions-item>
+          <el-descriptions-item label="实物图">
+            <div v-if="!!form.dkImg">
+              <el-tooltip effect="light" :content="item" placement="bottom" v-for="(item, index) in form.dkImg.split(',')" :key="index">
+                <el-image style="height: 64px; width: 64px; margin: 2px; display: inline-block;" fit="scale-down" :src="baseRoutingUrll + item" :preview-src-list="form.dkImg.split(',').map((x) => baseRoutingUrll + x)"/>
+              </el-tooltip>
+            </div>
+          </el-descriptions-item>
+         </el-descriptions>
+
+          <!-- 弹框操作按钮 -->
+         <div slot="footer" class="dialog-footer">
+             <el-button @click="doPrint">打 印</el-button>
+             <el-button @click="cancelDetail">关 闭</el-button>
+         </div>
+      </el-dialog>
+
+    <!-- 添加或修改地块经营对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="820px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+
+        <el-form-item label="区域位置名称" prop="deptName">
+          <el-input v-model="form.deptName" placeholder="请输入区域位置名称"  show-word-limit :maxlength="100"/>
+        </el-form-item>
+        <el-form-item label="地块编码" prop="dkbm">
+          <el-input v-model="form.dkbm" placeholder="请输入地块代码，跟地块属性中的地块编码一致"  show-word-limit :maxlength="19"/>
+        </el-form-item>
+        <el-form-item label="地块名称" prop="dkmc">
+          <el-input v-model="form.dkmc" placeholder="请输入地块名称"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="地块东至" prop="dkdz">
+          <el-input v-model="form.dkdz" placeholder="请输入地块东至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="地块西至" prop="dkxz">
+          <el-input v-model="form.dkxz" placeholder="请输入地块西至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="地块南至" prop="dknz">
+          <el-input v-model="form.dknz" placeholder="请输入地块南至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="地块北至" prop="dkbz">
+          <el-input v-model="form.dkbz" placeholder="请输入地块北至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="经营面积(亩)" prop="jymj">
+          <el-input-number v-model="form.jymj" placeholder="请输入经营面积(亩)" controls-position="right"   :precision="3"/>
+        </el-form-item>
+        <el-form-item label="经营方式" prop="jyfs">
+          <el-select v-model="form.jyfs" placeholder="请选择经营方式">
+            <el-option v-for="dict in dict.type.jyfs" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="经营对象类型" prop="jydxlx">
+          <el-select v-model="form.jydxlx" placeholder="请选择经营对象类型">
+            <el-option v-for="dict in dict.type.jydxlx" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="经营对象名称" prop="jydxmc">
+          <el-input v-model="form.jydxmc" placeholder="请输入经营对象名称"  show-word-limit :maxlength="100"/>
+        </el-form-item>
+        <el-form-item label="对象证件类型" prop="jydxzjlx">
+          <el-select v-model="form.jydxzjlx" placeholder="请选择经营对象证件类型">
+            <el-option v-for="dict in dict.type.zjlx" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="对象证件号码" prop="jydxzjhm">
+          <el-input v-model="form.jydxzjhm" placeholder="请输入经营对象证件号码"  show-word-limit :maxlength="30"/>
+        </el-form-item>
+        <el-form-item label="是否签订合同" prop="sfqdht">
+          <el-radio-group v-model="form.sfqdht">
+            <el-radio v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="经营开始时间" prop="jykssj">
+          <el-date-picker clearable v-model="form.jykssj" type="date" value-format="yyyy-MM-dd" placeholder="请选择经营开始时间"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="经营结束时间" prop="jyjssj">
+          <el-date-picker clearable v-model="form.jyjssj" type="date" value-format="yyyy-MM-dd" placeholder="请选择经营结束时间"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="承包金额(元)" prop="cbje">
+          <el-input-number v-model="form.cbje" placeholder="请输入承包金额(元)" controls-position="right"   :precision="2"/>
+        </el-form-item>
+        <el-form-item label="兑现金额" prop="dxje">
+          <el-input-number v-model="form.dxje" placeholder="请输入兑现金额" controls-position="right"   :precision="2"/>
+        </el-form-item>
+        <el-form-item label="尚欠金额" prop="sqje">
+          <el-input-number v-model="form.sqje" placeholder="请输入尚欠金额" controls-position="right"   :precision="2"/>
+        </el-form-item>
+        <el-form-item label="年收益" prop="nsy">
+          <el-input-number v-model="form.nsy" placeholder="请输入年收益" controls-position="right"   :precision="2"/>
+        </el-form-item>
+        <el-form-item label="备注" prop="bzxx">
+          <el-input v-model="form.bzxx" placeholder="请输入备注"  show-word-limit :maxlength="255"/>
+        </el-form-item>
+        <el-form-item label="实物图" prop="dkImg">
+          <image-upload v-model="form.dkImg"/>
+        </el-form-item>
+        <el-form-item label="调查状态" prop="surveyStatus">
+          <el-radio-group v-model="form.surveyStatus">
+            <el-radio v-for="dict in dict.type.survey_status" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listOperation, getOperation, getOperationDetail, getOperationDetailByDkbm, delOperation, addOperation, updateOperation, printOperation } from "@/api/resource/operation"
+import { getToken } from "@/utils/auth"
+import Treeselect from "@riophae/vue-treeselect";
+import { Splitpanes, Pane } from "splitpanes"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import "splitpanes/dist/splitpanes.css"
+import { deptTreeSelect } from "@/api/system/user"
+
+export default {
+  name: "Operation",
+  dicts: ['zjlx', 'survey_status', 'is_common', 'jydxlx', 'jyfs'],
+  components: { Treeselect, Splitpanes, Pane },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 地块经营表格数据
+      operationList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 详情组件列数
+      descColumn: 2,
+      // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth}
+      descLabelWidth: 15,
+      // 对话框显示只读的详情
+      viewOpen: false,
+      // 项目路径
+      baseRoutingUrll: process.env.VUE_APP_BASE_API,
+      // 所有部门树选项
+      deptOptions: undefined,
+      // 过滤掉已禁用部门树选项
+      enabledDeptOptions: undefined,
+      // 筛选部门名称
+      deptName: undefined,
+      // 选中的部门
+      selectDeptName: null,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+       // 查询排序
+       //orderByColumn: "id",
+       //isAsc: "desc",
+       // 翻译字典
+       //toTranslateDict: "1",
+        dkbm: null,
+        dkmc: null,
+        jyfs: null,
+        jydxlx: null,
+        jydxmc: null,
+        jydxzjlx: null,
+        jydxzjhm: null,
+        sfqdht: null,
+        surveyStatus: null,
+        importCode: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        dkbm: [
+          { required: true, message: "地块代码不能为空", trigger: "blur" }
+        ],
+        dkmc: [
+          { required: true, message: "地块名称不能为空", trigger: "blur" }
+        ],
+        jymj: [
+          { required: true, message: "经营面积(亩)不能为空", trigger: "blur" }
+        ],
+        jyfs: [
+          { required: true, message: "经营方式不能为空", trigger: "blur" }
+        ],
+        jydxmc: [
+          { required: true, message: "经营对象名称不能为空", trigger: "blur" }
+        ],
+        jykssj: [
+          { required: true, message: "经营开始时间不能为空", trigger: "blur" }
+        ],
+        jyjssj: [
+          { required: true, message: "经营结束时间不能为空", trigger: "blur" }
+        ],
+        cbje: [
+          { required: true, message: "承包金额(元)不能为空", trigger: "blur" }
+        ],
+
+      },
+      // EXCEL导入
+      upload: {
+          // 是否显示弹出层（用户导入）
+          open: false,
+          // 弹出层标题（用户导入）
+          title: "",
+          // 是否禁用上传
+          isUploading: false,
+          // 是否更新已经存在的用户数据
+          updateSupport: 0,
+          // 设置上传的请求头部
+          headers: { Authorization: "Bearer " + getToken() },
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + "/resource/operation/importData"
+      },
+
+    }
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.getDeptTree()
+    this.getList()
+  },
+  methods: {
+    /** 查询地块经营列表 */
+    getList() {
+      this.loading = true
+      listOperation(this.queryParams).then(response => {
+        this.operationList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    cancelDetail() {
+        this.viewOpen = false
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        dkbm: null,
+        dkmc: null,
+        dkdz: null,
+        dkxz: null,
+        dknz: null,
+        dkbz: null,
+        jymj: null,
+        jyfs: '200',
+        jydxlx: '1',
+        jydxmc: null,
+        jydxzjlx: '1',
+        jydxzjhm: null,
+        sfqdht: '1',
+        jykssj: null,
+        jyjssj: null,
+        cbje: null,
+        dxje: null,
+        sqje: null,
+        nsy: null,
+        bzxx: null,
+        dkImg: null,
+        surveyStatus: '2',
+        importCode: null,
+        deptName: null,
+      }
+      this.resetForm("form")
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      if(this.selectDeptName == null || this.selectDeptName == ''){
+        this.$modal.msgWarning("请先选择村/组行政区划！")
+        return
+      }
+
+      this.reset()
+      this.form.deptId = this.queryParams.deptId;
+      this.form.deptName = this.selectDeptName;
+      this.open = true
+      this.title = "添加地块经营"
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const id = row.id || this.ids
+      getOperation(id).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = "修改地块经营"
+      })
+    },
+    /** 查看按钮操作 */
+    handleLook(row) {
+      getOperationDetailByDkbm(row.dkbm).then(response => {
+          this.form = response.data;
+          this.viewOpen = true;
+          this.title = "查看地块经营";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateOperation(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+            })
+          } else {
+            addOperation(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除地块经营编号为"' + ids + '"的数据项？').then(function() {
+        return delOperation(ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('resource/operation/export', {
+        ...this.queryParams
+      }, `地块经营_${new Date().getTime()}.xlsx`)
+    },
+    /** 打印表单 */
+    doPrint() {
+        const originalTitle = document.title;
+        try {
+            document.title = this.title || '打印详情';
+            const printElement = document.getElementById('printDetail');
+            const printFrame = document.createElement('iframe');
+            printFrame.style.position = 'absolute';
+            printFrame.style.width = '0';
+            printFrame.style.height = '0';
+            printFrame.style.border = 'none';
+            printFrame.style.left = '-9999px';
+            printFrame.onload = function() {
+                try {
+                    const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document;
+                    const contentClone = printElement.cloneNode(true);
+                    const style = document.createElement('style');
+                    style.innerHTML = `
+                      @page {
+                        size: auto;
+                        margin: 10mm;
+                      }
+                      body {
+                        font-family: Arial, sans-serif;
+                        line-height: 1.5;
+                        margin: 0;
+                        padding: 0;
+                      }
+                      .el-descriptions {
+                        width: 100% !important;
+                      }
+                      .el-descriptions-item__label {
+                        width: ${this.descLabelWidth}% !important;
+                      }
+                      .el-descriptions-item__content {
+                        width: ${(100 / this.descColumn) - this.descLabelWidth}% !important;
+                      }
+                      /* 确保图片在打印时显示完整 */
+                      img, .el-image {
+                        max-width: 100% !important;
+                        height: auto !important;
+                      }
+                    `;
+                    frameDoc.head.appendChild(style);
+                    frameDoc.body.appendChild(contentClone);
+                    setTimeout(() => {
+                        printFrame.contentWindow.focus();
+                        printFrame.contentWindow.print();
+                        setTimeout(() => {
+                            document.body.removeChild(printFrame);
+                            document.title = originalTitle;
+                        }, 1000);
+                    }, 500);
+                } catch (e) {
+                    document.body.removeChild(printFrame);
+                    document.title = originalTitle;
+                    this.$message.error('打印过程中发生错误');
+                }
+            };
+            document.body.appendChild(printFrame);
+        } catch (e) {
+            document.title = originalTitle;
+            this.$message.error('打印过程中发生错误');
+        }
+    },
+    /** 打印按钮操作 */
+    handlePrint() {
+        printOperation(this.queryParams).then(response => {})
+    },
+    /* 导入EXCEL组件 */
+    handleImport() {
+        this.upload.title = "地块经营导入"
+        this.upload.open = true
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+        this.download('resource/operation/importTemplate', {
+        }, `地块经营_template.xlsx`)
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+        this.upload.isUploading = true
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+        this.upload.open = false
+        this.upload.isUploading = false
+        this.$refs.upload.clearFiles()
+        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+        this.getList()
+    },
+    // 提交上传文件
+    submitFileForm() {
+        this.$refs.upload.submit()
+    },
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then(response => {
+        this.deptOptions = response.data
+        this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+      })
+    },
+    // 过滤禁用的部门
+    filterDisabledDept(deptList) {
+      return deptList.filter(dept => {
+        if (dept.disabled) {
+          return false
+        }
+        if (dept.children && dept.children.length) {
+          dept.children = this.filterDisabledDept(dept.children)
+        }
+        return true
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id
+      this.selectDeptName = data.label
+      this.handleQuery()
+    },
+
+  }
+}
+</script>
+<style scoped type="scss">
+  .container_main{
+    height: 75vh;
+    overflow-y: scroll;
+  }
+</style>

src/views/system/menuapp/index.vue

@@ -132,7 +132,7 @@
         </el-form-item>
         <el-form-item label="菜单状态" prop="menuStatus">
           <el-radio-group v-model="form.menuStatus">
-            <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value"></el-radio>
+            <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -148,7 +148,7 @@
 </template>
 
 <script>
-import { listMenuapp, getMenuapp, delMenuapp, addMenuapp, updateMenuapp, printMenuapp } from "@/api/system/menuapp"
+import { listMenuapp, getMenuapp, getMenuappDetail, delMenuapp, addMenuapp, updateMenuapp, printMenuapp } from "@/api/system/menuapp"
 import { getToken } from "@/utils/auth"
 export default {
   name: "Menuapp",
@@ -307,7 +307,7 @@ export default {
     /** 查看按钮操作 */
     handleLook(row) {
       const id = row.id || this.ids
-      getMenuapp(id).then(response => {
+      getMenuappDetail(id).then(response => {
           this.form = response.data;
           this.viewOpen = true;
           this.title = "查看手机菜单";