data-room/data-room-ui/packages/MapDataManagement/src/index.vue

<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"
            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>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="开启下钻"
            prop="enableDown"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-if="scope.row.enableDown === 1">是</span>
              <span v-else>否</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="getDataList"
    />
    <edit-form
      ref="editForm"
      @refresh="getDataList"
    />
    <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} 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: [],
      searchForm: {
        searchKey: '',
        level: null,
        enableDown: null,
        uploadedGeoJson: null,
        parentId: '0'
      },
      levelList: [
        {
          label: '世界',
          value: 0
        },
        {
          label: '国家',
          value: 1
        },
        {
          label: '省份',
          value: 2
        },
        {
          label: '城市',
          value: 3
        },
        {
          label: '区县',
          value: 4
        }
      ],
      mapList: []
    }
  },
  mounted() {
    this.init()

  },
  methods: {
    init() {
      this.searchLoading = true
      this.loadingText = '正在加载地图数据...'
      mapList(this.searchForm).then(res => {
        this.mapList = res
        this.searchLoading = false
      }).catch(err => {
        this.searchLoading = false
      })
    },
    getDataList() {
      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
      }
    },
    addMap() {
      this.$refs.addForm.mapFormVisible = true
      this.$refs.addForm.init()
    },
    load(data, treeNode, resolve) {
      this.lazyResolveIds.push(data.id)
      mapList({
        parentId: data.id
      }).then(res => {
        resolve(res)
      }).catch(err => {
        resolve([])
      })
    },
    deleteMap(map) {
      this.$confirm('确定删除该地图？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'bs-el-message-box'
      }).then(async () => {
        mapDelete(map.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.getDataList()
        }).catch(() => {
          this.deleteMapCascade(map)
        })
      }).catch(() => {
      })
    },
    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.getDataList()
        }).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.getDataList()
      }).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>