ojk_dtb_manage_ui/src/components/dataManage/dataDetail/MetaDataDetail.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="请选择类别" @change="handleMenuIdSelect"
                     :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="dataType">
          <el-select v-model="formData.dataType" placeholder="请选择数据类型" :disabled="formData.isDataView">
            <el-option v-for="item in dataType" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据ID：" prop="dataId" v-if="formData.dataType && formData.dataType !== ''">
          <el-select style="width: 80%" v-model="formData.dataId" placeholder="请选择数据ID，输入ID/标题/描述进行搜索"
                     :filterable="true"
                     :remote="true"
                     :remote-method="searchForDataId"
                     :remote-show-suffix="true"
                     :loading="searchDataLoading"
                     :disabled="formData.isDataView">
            <el-option v-for="item in dataList" :key="item.id" :label="item.title" :value="item.id">
              <span style="float: left">{{ item.title }}</span>
              <span style="float: right;color: var(--el-text-color-secondary);font-size: 10px;">
                {{ item.content }}
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地名地址库：" prop="address">
          <el-input v-model="formData.address" placeholder="请输入地名地址库名称" :disabled="formData.isDataView"/>
        </el-form-item>
      </el-form>
      <HighOptionData :init-data="[]" :call-back="setProperties"></HighOptionData>
    </div>
    <template #footer>
      <el-button type="primary" @click="submit" v-show="!formData.isDataView">保存</el-button>
    </template>
  </el-dialog>

</template>

<script>
import OlMap from "@/components/map/OlMap";
import JsonDataView from "@/components/json/JsonDataView";
import api from "@/api/data/MetaData";
import menuApi from "@/api/data/MenuData";
import HighOptionData from "@/components/dataManage/dataDetail/HighOptionData";

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'},
        ],
        dataType: [
          {required: true, message: '请选择数据类型', trigger: 'blur'},
          {required: true, message: '请选择数据类型', trigger: 'change'},
        ],
        dataId: [
          {required: true, message: '请输入数据Id', trigger: 'blur'},
          {required: true, message: '请输入数据Id', trigger: 'change'},
        ]
        // address: [
        //   { required: true, message: '请输入地名地址库名称', trigger: 'change' },
        // ]
      },
      dataType: [
        {
          label: '二维数据',
          value: 1
        }, {
          label: '三维数据',
          value: 4
        }, {
          label: '业务数据',
          value: 3
        }, {
          label: '模型数据',
          value: 5
        }, {
          label: '物联感知数据',
          value: 2
        },
      ],
      dataList: [],
      searchDataLoading: false,
      category: [],
      isMapShow: false,

      isJsonDataView: false,

    }
  },
  props: {
    isShow: Boolean,
    item: Object,
    close: Function
  },
  watch: {
    "formData.dataType": function () {
      this.formData.dataId = '';
    }
  },
  mounted() {
    this.getMenuData()
    this.formData = this.item;
    this.oriFormData = JSON.parse(JSON.stringify(this.formData))
  },
  components: {
    HighOptionData
  },
  methods: {
    setProperties(item) {
      this.formData['properties'] = item;
    },
    getMenuData() {
      let app = this;
      let params = {
        type: "1",
        parentId: "3",
      }
      menuApi.getMenuData(params).then(res => {
        if (res.code === 200) {
          app.category = res.content
        }
      })
    },
    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'})
        }
      })
    },
    searchForDataId(val) {
      let app = this;
      this.searchDataLoading = true;
      if (val && val !== '') {
        let params = {
          classId: this.formData.dataType,
          data: '' + val,
        }
        api.queryRelateData(params).then(res => {
          if (res.code === 200) {
            app.dataList = res.content
          }
          app.searchDataLoading = false;
        }).catch(() => {
          app.searchDataLoading = false;
        })

      } else {
        this.dataList = []
        this.searchDataLoading = false;
      }
    },
    // 数据录入
    addData() {
      let app = this;
      let params = JSON.parse(JSON.stringify(app.formData));
      params['menuNameOne'] = '二维数据'
      params['userName'] = app.$store.state.userInfo.username;
      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;
      params['userName'] = app.$store.state.userInfo.username;
      api.updateData(params).then(res => {
        if (res.code === 200) {
          app.$message({message: '修改成功', type: 'success'})
          app.close(true);
        }
      })
    },
    handleMenuIdSelect(val) {
      for (let i = 0; i < this.category.length; i++) {
        let item = this.category[i];
        if (item.id == val) {
          this.formData['menuNameTwo'] = item.title
          break;
        }
      }
    },
  }
}
</script>

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