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

<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>