ojk_dtb_manage_ui/src/components/dataManage/dataDetail/BusinessDataDetail.vue

<template>
  <el-dialog v-if="isShow"
             :model-value="isShow"
             title="编辑数据"
             :width="700"
             :close-on-click-modal="false"
             :before-close="handleClose"
  >
    <div id="addData">
      <el-form ref="form" :model="formData" :rules="formDataRules" style="margin: 0 15px" :label-width="110">
        <el-form-item label="ID：" v-show="false">
          <el-input v-model="formData.id" />
        </el-form-item>
        <el-form-item label="标题：" prop="title" >
          <el-input v-model="formData.title" placeholder="请输入标题" :disabled="formData.isDataView" />
        </el-form-item>
        <el-form-item label="描述：" prop="content">
          <el-input v-model="formData.content" placeholder="请输入描述" :disabled="formData.isDataView" />
        </el-form-item>
        <el-form-item label="类别：" prop="menuId">
          <el-select v-model="formData.menuId" placeholder="请选择类别" :disabled="formData.isDataView" >
            <el-option
                v-for="item in category"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="地理信息：" prop="geometryStr" >
          <el-input v-model="formData.geometryStr" placeholder="请设置地理信息" :disabled="true" >
            <template #prepend>
              <el-button @click="handleMapShow(true)">
                <span v-if="formData.isDataView">查看</span>
                <span v-else>设置</span>
                地理信息
              </el-button>
            </template>
            <template #append>
              <el-button @click="handleJsonDataView(true)">
                查看GeoJson
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="地名地址库：" prop="address" >
          <el-input v-model="formData.address" placeholder="请输入地名地址库名称" :disabled="formData.isDataView" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button type="primary" @click="submit" v-show="!formData.isDataView">保存</el-button>
    </template>
  </el-dialog>
  <OlMap v-if="isMapShow"
         :is-show="isMapShow"
         :is-view="formData.isDataView"
         :menuId="formData.menuId"
         :geometryStr="formData.geometryStr"
         :callback="setMapData"
         :close="handleMapShow">
  </OlMap>

  <JsonDataView v-if="isJsonDataView"
                :is-show="isJsonDataView"
                :title="'地理数据预览'"
                :data="formData.geometryStr"
                :close="handleJsonDataView"
  >
  </JsonDataView>
</template>

<script>
import OlMap from "@/components/map/OlMap";
import JsonDataView from "@/components/json/JsonDataView";
import api from "@/api/data/BusinessData";
import menuApi from "@/api/data/MenuData";

export default {
  data() {
    return {
      formData: {},
      oriFormData: {},
      formDataRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'change' },
        ],
        content: [
          { required: true, message: '请输入描述', trigger: 'change' },
        ],
        menuId: [
          { required: true, message: '请选择类别', trigger: 'change' },
        ],
        geometryStr: [
          { required: true, message: '请输入Geojson数据', trigger: 'blur' },
        ],
        // address: [
        //   { required: true, message: '请输入地名地址库名称', trigger: 'change' },
        // ]
      },
      category: [],
      isMapShow: false,

      isJsonDataView: false,

    }
  },
  props: {
    isShow: Boolean,
    item: Object,
    close: Function
  },
  watch: {
    "formData.menuId": function (newVal, oldVal) {
      let app = this;
      if (app.formData.isEdit) {
        if (newVal!==app.oriFormData.menuId) {
          app.$msgbox.confirm('修改类型需重新设置地理信息，确定要修改吗？','Warning', {
            confirmButtonText: '确认修改',
            cancelButtonText: '恢复原始类别及地理信息',
            type: 'warning',
          }).then(()=>{
            app.formData.geometryStr = ''
          }).catch(()=>{
            app.formData.menuId = app.oriFormData.menuId;
            app.formData.geometryStr = app.oriFormData.geometryStr;
          })
        } else {
          app.formData.geometryStr = app.oriFormData.geometryStr;
        }

      }
    }
  },
  mounted() {
    this.getMenuData()
    this.formData = this.item;
    this.oriFormData = JSON.parse(JSON.stringify(this.formData))
  },
  components: {
    OlMap,
    JsonDataView,
  },
  methods: {
    handleMapShow(flag) {
      if (flag) {
        if (this.formData.menuId) {
          this.isMapShow = true
        } else {
          this.$message({message: '请先选择类别', type: 'warning'})
        }
      } else {
        this.isMapShow = false
      }
    },
    getMenuData() {
      let app = this;
      let params = {
        type: "1",
        parentId: "3",
      }
      menuApi.getMenuData(params).then(res=>{
        if (res.code===200) {
          app.category = res.content
        }
      })
    },
    setMapData(geometry) {
      this.formData.geometryStr = JSON.stringify(geometry)
    },
    handleClose() {
      this.close();
    },
    submit() {
      let app = this;
      app.$refs.form.validate(valid=>{
        if (valid) {
          if (app.formData.isEdit){
            app.updateData();
          } else {
            app.addData();
          }
        } else {
          app.$message({message: '请完善数据', type: 'warning'})
        }
      })
    },
    // 数据录入
    addData() {
      let app = this;
      let params = JSON.parse(JSON.stringify(app.formData));
      params['menuNameOne'] = '二维数据'
      api.addData(params).then(res=>{
        if (res.code===200) {
          app.$message({message: '录入成功', type: 'success'})
          app.close(true);
        }
      })
    },
    // 编辑数据
    updateData() {
      let app = this;
      let params = JSON.parse(JSON.stringify(app.formData));
      delete params.createDate;
      delete params.updateDate;
      api.updateData(params).then(res=>{
        if (res.code===200) {
          app.$message({message: '修改成功', type: 'success'})
          app.close(true);
        }
      })
    },
    handleJsonDataView(flag) {
      this.isJsonDataView = flag;
    }
  }
}
</script>

<style>
#addData {
  width: 100%;
  height: 100%;
}
</style>