初始化

frontend/packages/MapDataManagement/index.js

@@ -0,0 +1,7 @@
+import MapDataManagement from './src/index.vue'
+
+MapDataManagement.install = function (Vue) {
+  Vue.component(MapDataManagement.name, MapDataManagement)
+}
+
+export default MapDataManagement

frontend/packages/MapDataManagement/src/AddForm.vue

@@ -0,0 +1,357 @@
+<template>
+  <div>
+    <el-dialog
+      :append-to-body="true"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      :title="title"
+      :visible.sync="mapFormVisible"
+      class="bs-dialog-wrap bs-el-dialog"
+      width="700px"
+    >
+      <el-form
+        ref="mapForm"
+        :model="mapForm"
+        :rules="rules"
+        class="bs-el-form"
+        label-width="120px"
+      >
+        <el-form-item
+          label="上级地图"
+          prop="parentId"
+        >
+          <el-input
+            v-model="parentName"
+            class="bs-el-input"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item
+          label="地图名称"
+          prop="name"
+        >
+          <el-input
+            v-model="mapForm.name"
+            class="bs-el-input"
+            placeholder="请输入"
+          />
+        </el-form-item>
+        <el-form-item
+          label="地图标识"
+          prop="mapCode"
+        >
+          <template slot="label">
+            <span>地图标识</span>
+            <el-tooltip
+              v-if="mapForm.parentId !== '0'"
+              class="item"
+              effect="light"
+              content="子级的地图标识解析自上级地图的子区块数据"
+              placement="top"
+            >
+              <i
+                class="el-icon-warning-outline"
+                style="color: #E3C98C;margin-left: 6px;font-size:14px"
+              />
+            </el-tooltip>
+          </template>
+          <el-input
+            v-if="mapForm.parentId === '0'"
+            v-model="mapForm.mapCode"
+            class="bs-el-input"
+            placeholder="请输入地图标识"
+          />
+          <el-select
+            v-else
+            v-model="mapForm.mapCode"
+            class="bs-el-select"
+            placeholder="请选择地图标识"
+            popper-class="bs-el-select"
+          >
+            <el-option
+              v-for="mapCode in mapCodeList"
+              :key="mapCode.name"
+              :disabled="mapCode.exist"
+              :label="mapCode.name"
+              :value="mapCode.name"
+            >
+              <span style="float: left">{{ mapCode.name }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{ mapCode.exist ? '已存在' : '' }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="地图级别"
+          prop="level"
+        >
+          <el-select
+            v-model="mapForm.level"
+            :disabled="mapForm.parentId !== '0'"
+            class="bs-el-select"
+            placeholder="请选择地图级别"
+            popper-class="bs-el-select"
+          >
+            <el-option
+              v-for="level in levelList"
+              :key="level.value"
+              :label="level.label"
+              :value="level.value"
+            />
+            <el-option
+              v-if="![0,1,2,3,4].includes(mapForm.level)"
+              :value="mapForm.level"
+              :label="outRangeLabel"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="geoJson上传"
+        >
+          <vue-json-viewer
+            v-model="mapForm.geoJson"
+            theme="dark"
+            :show-btns="false"
+            mode="code"
+          />
+          <el-button
+            class="bs-el-button-default"
+            @click="upload"
+          >
+            <i class="el-icon-upload2" />
+            上传
+          </el-button>
+        </el-form-item>
+        <el-form-item
+          v-if="autoParseNextLevelShow"
+          label="自动解析下一级"
+          prop="autoParseNextLevel"
+        >
+          <el-switch
+            v-model="mapForm.autoParseNextLevel"
+            :active-value="1"
+            :inactive-value="0"
+            class="bs-el-switch"
+          />
+        </el-form-item>
+      </el-form>
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          class="bs-el-button-default"
+          @click="handleClose"
+        >
+          取消
+        </el-button>
+        <el-button
+          type="primary"
+          @click="submitForm"
+        >
+          确定
+        </el-button>
+      </span>
+    </el-dialog>
+    <input
+      ref="geoJsonFile"
+      accept=".json"
+      name="file"
+      style="display: none"
+      type="file"
+      @change="handleBatchUpload"
+    >
+  </div>
+</template>
+
+<script>
+import vueJsonViewer from 'vue-json-viewer'
+import { getMapChildFromGeoJson, mapAdd, repeatCheck, nameRepeatCheck } from 'data-room-ui/js/utils/mapDataService'
+
+export default {
+  name: 'AddForm',
+  components: {
+    vueJsonViewer
+  },
+  computed: {
+    autoParseNextLevelShow () {
+      // geoJson 不为空
+      return !this.isEmpty(this.mapForm.geoJson)
+    },
+    outRangeLabel() {
+      return `级别${this.mapForm.level + 1}`;
+    }
+  },
+  data () {
+    const validateCode = (rule, value, callback) => {
+      if (this.mapForm.parentId !== '0') {
+        // 不需要校验
+        callback()
+        return
+      }
+      repeatCheck({
+        parentId: this.mapForm.parentId,
+        mapCode: value
+      }).then(res => {
+        if (res) {
+          callback(new Error('地图标识已存在'))
+        } else {
+          callback()
+        }
+      })
+    }
+    const validateName = (rule, value, callback) => {
+      nameRepeatCheck({
+        parentId: this.mapForm.parentId,
+        mapName: value
+      }).then(res => {
+        if (res) {
+          callback(new Error('地图名称已存在'))
+        } else {
+          callback()
+        }
+      })
+    }
+    return {
+      mapFormVisible: false,
+      geoJsonVisible: false,
+      uploadLoading: false,
+      title: '新增地图数据',
+      parentName: '顶级',
+      mapForm: {
+        parentId: '0',
+        mapCode: '',
+        name: '',
+        level: 0,
+        geoJson: {},
+        uploadedGeoJson: 0,
+        autoParseNextLevel: 0
+      },
+      rules: {
+        mapCode: [
+          { required: true, message: '请选择地图标识', trigger: 'blur' },
+          { validator: validateCode, trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: '请输入地图名称', trigger: 'blur' },
+          { validator: validateName, trigger: 'blur' }
+        ],
+        level: [
+          { required: true, message: '请选择地图级别', trigger: 'change' }
+        ]
+      },
+      levelList: [
+        { value: 0, label: '世界' },
+        { value: 1, label: '国家' },
+        { value: 2, label: '省份' },
+        { value: 3, label: '城市' },
+        { value: 4, label: '区县' }
+      ],
+      mapCodeList: []
+    }
+  },
+  methods: {
+    init (parentMap) {
+      this.mapForm = {
+        parentId: '0',
+        mapCode: `map-${new Date().getTime()}`,
+        name: '',
+        level: 0,
+        geoJson: {},
+        uploadedGeoJson: 0,
+        autoParseNextLevel: 0
+      }
+      this.parentName = '顶级'
+      if (parentMap) {
+        this.mapForm.parentId = parentMap.id
+        this.parentName = parentMap.name
+        this.mapForm.level = parentMap.level + 1
+        this.mapForm.mapCode = ''
+        this.getMapCodeList()
+      }
+    },
+    handleClose () {
+      this.mapFormVisible = false
+    },
+    submitForm () {
+      this.$refs.mapForm.validate(valid => {
+        if (!valid) {
+          return false
+        }
+        let geoJson
+        // 如果geoJson是空的，包括空字符串，纯空格、空对象，空数组，都不允许提交
+        if (this.isEmpty(this.mapForm.geoJson)) {
+          geoJson = ''
+        } else {
+          geoJson = JSON.stringify(this.mapForm.geoJson)
+        }
+        mapAdd({
+          ...this.mapForm,
+          geoJson: geoJson
+        }).then(res => {
+          this.mapFormVisible = false
+          this.$emit('refresh', {
+            id: res,
+            parentId: this.mapForm.parentId
+          })
+        })
+      })
+    },
+    isEmpty (obj) {
+      if (typeof obj === 'object') {
+        return Object.keys(obj).length === 0 && obj.constructor === Object
+      }
+      if (typeof obj === 'string') {
+        return /^\s*$/.test(obj)
+      }
+      return Array.isArray(obj) && obj.length === 0
+    },
+    getMapCodeList () {
+      this.mapCodeList = []
+      if (this.mapForm.parentId === '0') {
+        this.mapCodeList = [{
+          name: `map-${new Date().getTime()}`,
+          exist: false
+        }]
+      } else {
+        getMapChildFromGeoJson(this.mapForm.parentId).then(res => {
+          this.mapCodeList = res
+        })
+      }
+    },
+    upload () {
+      this.$refs.geoJsonFile.click()
+    },
+    handleBatchUpload (source) {
+      this.uploadLoading = true
+      const file = source.target.files
+      const reader = new FileReader() // 新建一个FileReader
+      reader.readAsText(file[0], 'UTF-8') // 读取文件
+
+      reader.onload = (event) => {
+        const jsonStr = event.target.result
+        // 读取文件内容
+        try {
+          this.mapForm.geoJson = JSON.parse(jsonStr)
+        } catch (e) {
+          this.uploadLoading = false
+          this.$message.error('JSON文件格式错误')
+          return false
+        }
+        this.uploadLoading = false
+        // input通过onchange事件来触发js代码的，由于两次文件是重复的，所以这个时候onchange事件是没有触发到的，所以需要手动清空input的值
+        source.target.value = ''
+      }
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/style/bsTheme.scss';
+
+.jv-container.dark {
+  color: aliceblue;
+  background: #161A26;
+}
+</style>

frontend/packages/MapDataManagement/src/EditForm.vue

@@ -0,0 +1,349 @@
+<template>
+  <div>
+    <el-dialog
+      :append-to-body="true"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      :title="title"
+      :visible.sync="mapFormVisible"
+      class="bs-dialog-wrap bs-el-dialog"
+      width="700px"
+    >
+      <el-form
+        ref="mapForm"
+        :model="mapForm"
+        :rules="rules"
+        class="bs-el-form"
+        label-width="120px"
+      >
+        <el-form-item
+          label="上级地图"
+          prop="parentId"
+        >
+          <el-input
+            v-model="parentName"
+            class="bs-el-input"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item
+          label="地图名称"
+          prop="name"
+        >
+          <el-input
+            v-model="mapForm.name"
+            class="bs-el-input"
+            placeholder="请输入"
+          />
+        </el-form-item>
+        <el-form-item
+          label="地图标识"
+          prop="mapCode"
+        >
+          <template slot="label">
+            <span>地图标识</span>
+            <el-tooltip
+              v-if="mapForm.parentId !== '0'"
+              class="item"
+              effect="light"
+              content="地图标识取自上级地图JSON数据中的properties.name值，用于在地图中显示地区名称"
+              placement="top"
+            >
+              <i
+                class="el-icon-warning-outline"
+                style="color: #E3C98C;margin-left: 6px;font-size:14px"
+              />
+            </el-tooltip>
+          </template>
+          <el-input
+            v-model="mapForm.mapCode"
+            class="bs-el-input"
+            placeholder="请输入地图标识"
+          />
+        </el-form-item>
+        <el-form-item
+          label="地图级别"
+          prop="level"
+        >
+          <template slot="label">
+            <span>地图级别</span>
+            <el-tooltip
+              v-if="mapForm.parentId !== '0'"
+              class="item"
+              effect="light"
+              content="子级地图的级别根据上级地图自动递增，不可修改"
+              placement="top"
+            >
+              <i
+                class="el-icon-warning-outline"
+                style="color: #E3C98C;margin-left: 6px;font-size:14px"
+              />
+            </el-tooltip>
+          </template>
+          <el-select
+            v-model="mapForm.level"
+            disabled
+            class="bs-el-select"
+            placeholder="请选择地图级别"
+            popper-class="bs-el-select"
+          >
+            <el-option
+              v-for="level in levelList"
+              :key="level.value"
+              :label="level.label"
+              :value="level.value"
+            />
+            <el-option
+              v-if="![0,1,2,3,4].includes(mapForm.level)"
+              :value="mapForm.level"
+              :label="outRangeLabel"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="geoJson"
+        >
+          <vue-json-viewer
+            v-model="mapForm.geoJson"
+            theme="dark"
+            :show-btns="false"
+            mode="code"
+          />
+          <el-button
+            v-if="mapForm.uploadedGeoJson !== 1"
+            class="bs-el-button-default"
+            @click="upload"
+          >
+            <i class="el-icon-upload2" />
+            上传
+          </el-button>
+        </el-form-item>
+        <el-form-item
+          v-if="autoParseNextLevelShow"
+          label="自动解析下一级"
+          prop="autoParseNextLevel"
+        >
+          <el-switch
+            v-model="mapForm.autoParseNextLevel"
+            :active-value="1"
+            :inactive-value="0"
+            class="bs-el-switch"
+          />
+        </el-form-item>
+      </el-form>
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          class="bs-el-button-default"
+          @click="handleClose"
+        >
+          取消
+        </el-button>
+        <el-button
+          type="primary"
+          @click="submitForm"
+        >
+          确定
+        </el-button>
+      </span>
+    </el-dialog>
+    <input
+      ref="geoJsonFile"
+      accept=".json"
+      name="file"
+      style="display: none"
+      type="file"
+      @change="handleBatchUpload"
+    >
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import vueJsonViewer from 'vue-json-viewer'
+import { mapUpdate, getMapChildFromGeoJson, nameRepeatCheck } from 'data-room-ui/js/utils/mapDataService'
+
+export default {
+  name: 'EditForm',
+  components: {
+    vueJsonViewer
+  },
+  computed: {
+    autoParseNextLevelShow () {
+      // geoJson 不为空，且未上传过（说明是刚上传的）
+      return !this.isWhitespace(this.mapForm.geoJson) && !this.isEmpty(this.mapForm.geoJson) && this.mapForm.uploadedGeoJson === 0
+    },
+    outRangeLabel() {
+      return `级别${this.mapForm.level + 1}`;
+    }
+  },
+  data () {
+    const validateCode = (rule, value, callback) => {
+      if (this.mapForm.parentId === '0' || this.mapForm.parentId === 0) {
+        // 不需要校验
+        callback()
+        return
+      }
+      getMapChildFromGeoJson(this.mapForm.parentId).then(children => {
+        let repeat = false
+        children.forEach(child => {
+          if (child.exist && child.name === value && child.existId !== this.mapForm.id) {
+            repeat = true
+          }
+        })
+        if (repeat) {
+          callback(new Error('地图标识已存在'))
+        } else {
+          callback()
+        }
+      })
+    }
+    const validateName = (rule, value, callback) => {
+      if (this.mapForm.parentId !== '0') {
+        // 不需要校验
+        callback()
+        return
+      }
+      nameRepeatCheck({
+        id: this.mapForm.id,
+        parentId: this.mapForm.parentId,
+        mapName: value
+      }).then(res => {
+        if (res) {
+          callback(new Error('地图名称已存在'))
+        } else {
+          callback()
+        }
+      })
+    }
+    return {
+      mapFormVisible: false,
+      geoJsonVisible: false,
+      uploadLoading: false,
+      title: '编辑地图数据',
+      parentName: '顶级',
+      mapForm: {
+        parentId: '0',
+        mapCode: '',
+        name: '',
+        level: 0,
+        geoJson: '',
+        uploadedGeoJson: 0,
+        autoParseNextLevel: 0
+      },
+      rules: {
+        mapCode: [
+          { required: true, message: '请输入地图标识', trigger: 'blur' },
+          { validator: validateCode, trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: '请输入地图名称', trigger: 'blur' },
+          { validator: validateName, trigger: 'blur' }
+        ],
+        level: [
+          { required: true, message: '请选择地图级别', trigger: 'change' }
+        ],
+        geoJson: [
+          { required: true, message: '请上传地图数据', trigger: 'change' }
+        ]
+      },
+      levelList: [
+        { value: 0, label: '世界' },
+        { value: 1, label: '国家' },
+        { value: 2, label: '省份' },
+        { value: 3, label: '城市' },
+        { value: 4, label: '区县' }
+      ],
+      mapCodeList: []
+    }
+  },
+  methods: {
+    init (map) {
+      this.mapForm = _.cloneDeep(map)
+      if (!this.isWhitespace(this.mapForm.geoJson)) {
+        this.mapForm.geoJson = JSON.parse(this.mapForm.geoJson)
+      } else {
+        this.mapForm.geoJson = {}
+      }
+    },
+    handleClose () {
+      this.mapFormVisible = false
+    },
+    submitForm () {
+      this.$refs.mapForm.validate(valid => {
+        if (!valid) {
+          return false
+        }
+        let geoJson
+        // 如果geoJson是空的，包括空字符串，纯空格、空对象，空数组，都置为空字符串
+        if (this.isWhitespace(this.mapForm.geoJson) || this.mapForm.geoJson === '{}' || this.mapForm.geoJson === '[]') {
+          geoJson = ''
+        } else {
+          geoJson = JSON.stringify(this.mapForm.geoJson)
+        }
+        mapUpdate({
+          ...this.mapForm,
+          geoJson: geoJson
+        }).then(res => {
+          this.mapFormVisible = false
+          this.$emit('refresh', {
+            id: this.mapForm.id,
+            parentId: this.mapForm.parentId
+          })
+        })
+      })
+    },
+    isWhitespace (str) {
+      // 如果是null、undefined，返回true
+      if (str == null) {
+        return true
+      }
+      return /^\s*$/.test(str)
+    },
+    isEmpty (obj) {
+      if (typeof obj === 'object') {
+        return Object.keys(obj).length === 0 && obj.constructor === Object
+      }
+      if (typeof obj === 'string') {
+        return /^\s*$/.test(obj)
+      }
+      return Array.isArray(obj) && obj.length === 0
+    },
+    upload () {
+      this.$refs.geoJsonFile.click()
+    },
+    handleBatchUpload (source) {
+      this.uploadLoading = true
+      const file = source.target.files
+      const reader = new FileReader() // 新建一个FileReader
+      reader.readAsText(file[0], 'UTF-8') // 读取文件
+
+      reader.onload = (event) => {
+        const jsonStr = event.target.result
+        // 读取文件内容
+        try {
+          this.mapForm.geoJson = JSON.parse(jsonStr)
+        } catch (e) {
+          this.uploadLoading = false
+          this.$message.error('JSON文件格式错误')
+          return false
+        }
+        this.uploadLoading = false
+        // input通过onchange事件来触发js代码的，由于两次文件是重复的，所以这个时候onchange事件是没有触发到的，所以需要手动清空input的值
+        source.target.value = ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/style/bsTheme.scss';
+
+.jv-container.dark {
+  color: aliceblue;
+  background: #161A26;
+}
+</style>

frontend/packages/MapDataManagement/src/index.vue

@@ -0,0 +1,523 @@
+<template>
+  <div class="bs-container">
+    <div class="inner-container">
+      <el-form
+        :inline="true"
+        class="filter-container"
+      >
+        <el-form-item class="filter-input filter-item">
+          <el-input
+            v-model="searchForm.searchKey"
+            class="bs-el-input"
+            clearable
+            maxlength="200"
+            @clear="getDataList"
+            placeholder="请输入地图名称或标识"
+          />
+        </el-form-item>
+        <el-form-item class="filter-item">
+          <el-select
+            v-model="searchForm.level"
+            class="bs-el-select"
+            clearable
+            placeholder="请选择地图级别"
+            popper-class="bs-el-select"
+            @change="getDataList"
+          >
+            <el-option
+              v-for="level in levelList"
+              :key="level.value"
+              :label="level.label"
+              :value="level.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item class="filter-item">
+          <el-button
+            :loading="searchLoading"
+            icon="el-icon-search"
+            type="primary"
+            @click="getDataList"
+          >
+            查询
+          </el-button>
+        </el-form-item>
+        <el-form-item class="filter-item">
+          <el-button
+            class="bs-el-button-default"
+            @click="addMap"
+          >
+            新增
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <div class="bs-table-box">
+        <el-table
+          v-loading="searchLoading"
+          ref="table"
+          v-table
+          :data="mapList"
+          :element-loading-text="loadingText"
+          :load="load"
+          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+          class="bs-el-table bs-scrollbar"
+          height="0"
+          lazy
+          row-key="id"
+        >
+          <el-empty slot="empty"/>
+          <el-table-column
+            align="left"
+            label="地图名称"
+            prop="name"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            align="center"
+            label="地图标识"
+            prop="mapCode"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            align="center"
+            label="地图级别"
+            prop="level"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <span v-if="scope.row.level === 0">世界</span>
+              <span v-else-if="scope.row.level === 1">国家</span>
+              <span v-else-if="scope.row.level === 2">省份</span>
+              <span v-else-if="scope.row.level === 3">城市</span>
+              <span v-else-if="scope.row.level === 4">区县</span>
+              <span v-else>{{ getMoreLevel(scope.row.level) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="已上传配置JSON"
+            prop="uploadedGeoJson"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <span v-if="scope.row.uploadedGeoJson === 1">是</span>
+              <span v-else>否</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="操作"
+            width="200"
+          >
+            <template slot-scope="scope">
+              <el-button
+                class="bs-el-button-default"
+                @click="editMap(scope.row)"
+              >
+                编辑
+              </el-button>
+              <el-button
+                class="bs-el-button-default"
+                @click="deleteMap(scope.row)"
+              >
+                删除
+              </el-button>
+              <el-button
+                v-if="scope.row.uploadedGeoJson === 1"
+                class="bs-el-button-default"
+                @click="addChild(scope.row)"
+              >
+                添加下级
+              </el-button>
+              <el-button
+                v-if="scope.row.uploadedGeoJson === 0"
+                class="bs-el-button-default"
+                @click="uploadGeoJson(scope.row)"
+              >
+                上传配置
+              </el-button>
+            </template>
+          </el-table-column>
+
+        </el-table>
+      </div>
+    </div>
+    <add-form
+      ref="addForm"
+      @refresh="refreshData"
+    />
+    <edit-form
+      ref="editForm"
+      @refresh="refreshData"
+    />
+    <el-dialog
+      :close-on-click-modal="false"
+      :visible.sync="geoJsonVisible"
+      append-to-body
+      class="bs-dialog-wrap bs-el-dialog"
+      height="1000px"
+      title="geoJson数据"
+      width="1000px"
+    >
+      <vue-json-viewer
+        v-model="currentMapGeoJSon"
+        theme="dark"
+        :show-btns="false"
+        mode="code"
+      />
+      <el-button
+        class="bs-el-button-default"
+        @click="upload()"
+      >
+        <i class="el-icon-upload2"></i>
+        上传
+      </el-button>
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          class="bs-el-button-default"
+          @click="submitUpload"
+        >提交</el-button>
+        </span>
+    </el-dialog>
+    <input
+      ref="geoJsonFileUpload"
+      accept=".json"
+      name="file"
+      style="display: none"
+      type="file"
+      @change="handleBatchUpload"
+    >
+  </div>
+</template>
+
+<script>
+import table from 'data-room-ui/js/utils/table.js'
+import {mapList, mapDelete, uploadGeoJson, mapCascadeDelete, mapInfo} from 'data-room-ui/js/utils/mapDataService'
+import AddForm from "./AddForm"
+import EditForm from "./EditForm"
+import vueJsonViewer from 'vue-json-viewer'
+
+export default {
+  name: "MapManagement",
+  directives: {
+    table // 注册自定义指令
+  },
+  components: {
+    AddForm,
+    EditForm,
+    vueJsonViewer
+  },
+  data() {
+    return {
+      currentMap: {}, // 当前操作的地图
+      currentMapGeoJSon: {}, // 当前操作的地图geoJson
+      loadingText: '',
+      searchLoading: false,
+      geoJsonVisible: false,
+      lazyResolveIds: [],
+      lazyResolveMap: new Map(),
+      searchForm: {
+        searchKey: '',
+        level: null,
+        uploadedGeoJson: null,
+        parentId: '0'
+      },
+      levelList: [
+        {
+          label: '世界',
+          value: 0
+        },
+        {
+          label: '国家',
+          value: 1
+        },
+        {
+          label: '省份',
+          value: 2
+        },
+        {
+          label: '城市',
+          value: 3
+        },
+        {
+          label: '区县',
+          value: 4
+        }
+      ],
+      mapList: [],
+      // 提示过了
+      tipped: false
+
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.searchLoading = true
+      this.loadingText = '正在加载地图数据...'
+      mapList(this.searchForm).then(res => {
+        this.mapList = res
+        this.searchLoading = false
+        if (!this.tipped && this.mapList.length === 0) {
+          this.tip()
+        }
+      }).catch(err => {
+        this.searchLoading = false
+      })
+    },
+    getDataList() {
+      this.lazyResolveMap.clear()
+      this.$nextTick(() => {
+        this.mapList = []
+      })
+      this.$nextTick(() => {
+        this.searchLoading = true
+        this.loadingText = '正在加载地图数据...'
+        mapList(this.searchForm).then(res => {
+          this.mapList = res
+          this.searchLoading = false
+        }).catch(err => {
+          this.searchLoading = false
+        })
+        // 清除展开状态
+        for (let i = 0; i < this.lazyResolveIds.length; i++) {
+          this.$refs.table.store.states.treeData[this.lazyResolveIds[i]].loaded = false;
+          this.$refs.table.store.states.treeData[this.lazyResolveIds[i]].expanded = false
+        }
+      })
+    },
+    /**
+     * 新增、删除、修改等操作成功后刷新数据,不改变展开状态
+     * @param cbObj
+     */
+    refreshData(cbObj) {
+      let parentId = cbObj.parentId
+      if (this.lazyResolveMap.get(parentId)) {
+        // 刷新父节点
+        const { data, treeNode, resolve } = this.lazyResolveMap.get(parentId)
+        this.$set(this.$refs.table.store.states.lazyTreeNodeMap, parentId, [])
+        this.load(data, treeNode, resolve)
+        return
+      }
+      if (parentId === '0' || parentId === 0) {
+        // 刷新根节点
+        this.getDataList()
+        return
+      }
+      mapInfo(parentId).then((res) => {
+        parentId = res.parentId
+        if (this.lazyResolveMap.get(parentId)) {
+          // 刷新父节点的父节点
+          const { data, treeNode, resolve } = this.lazyResolveMap.get(parentId)
+          this.$set(this.$refs.table.store.states.lazyTreeNodeMap, parentId, [])
+          this.load(data, treeNode, resolve)
+          // 展开该父节点
+          this.$refs.table.toggleRowExpansion(parentId, true);
+        } else {
+          // 刷新根节点
+          this.getDataList()
+        }
+      })
+    },
+    getMoreLevel(level) {
+      return '级别' + (level + 1)
+    },
+    addMap() {
+      this.$refs.addForm.mapFormVisible = true
+      this.$refs.addForm.init()
+    },
+    load(data, treeNode, resolve) {
+      this.lazyResolveMap.set(data.id, { data, treeNode, resolve })
+      this.lazyResolveIds.push(data.id)
+      mapList({
+        parentId: data.id
+      }).then(childList => {
+        // 解决同一页中同一条数据同时出现，如果懒加载中存在，那么将之前查询出来的数据删除
+        let deleteIdList = []
+        childList.forEach((child) => {
+          this.mapList.forEach((mapInfo) => {
+            if (mapInfo.id === child.id) {
+              deleteIdList.push(mapInfo.id)
+            }
+          })
+        })
+        this.mapList = this.mapList.filter((map) => {
+          return deleteIdList.indexOf(map.id) === -1
+        })
+        resolve(childList)
+      }).catch(err => {
+        resolve([])
+      })
+    },
+    deleteMap(map) {
+      this.$confirm('确定删除该地图？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        customClass: 'bs-el-message-box'
+      }).then(async () => {
+        mapDelete(map.id).then((deleteSuccess) => {
+          if (deleteSuccess) {
+            this.$message({
+              type: 'success',
+              message: '删除成功'
+            })
+            this.refreshData({
+              id: map.id,
+              parentId: map.parentId
+            })
+          } else {
+            this.deleteMapCascade(map)
+          }
+        }).catch(() => {
+         this.$message({
+            type: 'error',
+            message: '删除失败'
+          })
+        })
+      }).catch(() => {
+      })
+    },
+    tip() {
+      // 超链接跳转至
+      const htmlStr = `<span>大屏设计器提供了全国省市区县的地图数据，<a href="https://www.yuque.com/chuinixiongkou/bigscreen/kdrm8g3c8zfgaaq6#xjE8w" style="color: #00a0e9"  target="_blank">点击查看</a></span>`
+      this.$notify({
+        title: '推荐',
+        dangerouslyUseHTMLString: true,
+        message: htmlStr,
+        customClass: 'ds-el-notify',
+        type: 'warning',
+        duration: 5000
+      })
+    },
+    deleteMapCascade(map) {
+      this.$confirm('该地图存在子级，是否直接删除该地图以及其所有子级？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        customClass: 'bs-el-message-box'
+      }).then(async () => {
+        mapCascadeDelete(map.id).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功'
+          })
+          this.refreshData({
+            id: map.id,
+            parentId: map.parentId
+          })
+        }).catch(() => {
+        })
+      }).catch(() => {
+      })
+    },
+    addChild(map) {
+      this.$refs.addForm.mapFormVisible = true
+      this.$refs.addForm.init(map)
+    },
+    editMap(map) {
+      this.$refs.editForm.mapFormVisible = true
+      this.$refs.editForm.init(map)
+    },
+    uploadGeoJson(map) {
+      this.currentMap = map
+      this.currentMapGeoJSon = {}
+      this.geoJsonVisible = true
+    },
+    upload() {
+      this.$refs.geoJsonFileUpload.click()
+    },
+    handleBatchUpload(source) {
+      this.uploadLoading = true
+      const file = source.target.files
+      const reader = new FileReader() // 新建一个FileReader
+      reader.readAsText(file[0], 'UTF-8') // 读取文件
+
+      reader.onload = (event) => {
+        let jsonStr = event.target.result
+        // 读取文件内容
+        try {
+          this.currentMapGeoJSon = JSON.parse(jsonStr)
+        } catch (e) {
+          this.uploadLoading = false
+          this.$message.error('JSON文件格式错误')
+          return false
+        }
+        this.uploadLoading = false
+        // input通过onchange事件来触发js代码的，由于两次文件是重复的，所以这个时候onchange事件是没有触发到的，所以需要手动清空input的值
+        source.target.value = ''
+      }
+    },
+    submitUpload() {
+      // 先检查JSON是否合法
+      if (typeof this.currentMapGeoJSon === 'string') {
+        this.$message.error('JSON文件格式错误')
+        return false
+      }
+      if (this.currentMapGeoJSon === {}) {
+        this.$message.error('JSON数据不能为空')
+        return false
+      }
+      // 调接口保存
+      uploadGeoJson({
+        id: this.currentMap.id,
+        geoJson: JSON.stringify(this.currentMapGeoJSon)
+      }).then(res => {
+        this.$message({
+          type: 'success',
+          message: '上传成功'
+        })
+        this.geoJsonVisible = false
+        // 刷新
+        this.refreshData({
+          id: this.currentMap.id,
+          parentId: this.currentMap.parentId
+        })
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: '上传失败'
+        })
+      })
+      this.geoJsonVisible = false
+    },
+    isWhitespace(str) {
+      // 如果是null、undefined，返回true
+      if (str == null) {
+        return true
+      }
+      return /^\s*$/.test(str);
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/style/bsTheme.scss';
+.jv-container.dark {
+  color: aliceblue;
+  background: #161A26;
+  height: 150px;
+}
+</style>
+<style lang="scss">
+//修改notify的样式
+.ds-el-notify {
+  background-color: var(--bs-el-background-1)!important;
+  border: var(--bs-el-border)!important;
+  .el-notification__title{
+    color: #fff!important;
+  }
+  .el-notification__content{
+    color: #fff!important;
+  }
+  .el-notification__closeBtn{
+    color: #fff!important;
+  }
+}
+</style>