YZT_YUHANG/YHYZT/client/src/views/DataManage/ssnyd/Detail.vue

<template>
  <div class="xm-detal">
    <el-tabs type="border-card" v-model="currentTab">
      <el-tab-pane label="项目信息" name="tab1">
        <div class="tables">
          <div class="title">项目索引</div>
          <div class="content">
            <el-input
              v-model="detailData.xmbh"
              placeholder="请输入项目索引"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">项目名称</div>
          <div class="content">
            <el-input
              v-model="detailData.xmmc"
              placeholder="请输入项目名称"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">市</div>
          <div class="content">
            <el-input
              v-model="detailData.szs"
              placeholder="请输入市"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">县区</div>
          <div class="content">
            <el-input
              v-model="detailData.xzq"
              placeholder="请输入项目县区"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">备案号</div>
          <div class="content">
            <el-input
              v-model="detailData.bah"
              placeholder="请输入备案号"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">备案面积</div>
          <div class="content">
            <el-input
              v-model="detailData.bamj"
              placeholder="请输入备案面积"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">备案时间</div>
          <div class="content">
            <el-date-picker
              v-model="detailData.basj"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请输入备案时间"
              />
          </div>
          <div class="title">用途</div>
          <div class="content">
            <el-input
              v-model="detailData.yt"
              placeholder="请输入用途"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">备注</div>
          <div class="content">
            <el-input
              v-model="detailData.bz"
              placeholder="请输入备注"
              clearable
              :disabled="!editor"
            />
          </div>
        </div>
        <div class="btn-group">
          <el-button type="primary" @click="onSavePcHandle">保存</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="查看地图" name="tab2">
        <div class="map_box">
          <base-map ref="baseMap" v-if="currentTab === 'tab2'" :overlayShow="true" @drawShapeJson="drawShapeJsonEvent" :visibleLayerIds="visibleLayerId"/>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import BaseMap from "../../../components/common/BaseMap";
export default {
  name: "Detail",
  components: { BaseMap },
  data() {
    return {
      user: JSON.parse(window.sessionStorage.getItem("yzt-user")),
      currentTab: 'tab1',
      visibleLayerId:['YHYZT_SSNYD'],
      detailData: {},
      editor: false
    };
  },
  props: {
    contentWidth: Number,
    contentHeight: Number,
  },
  methods: {
    initDetailData (row, isEditor = false) {
      this.currentTab = 'tab1'
      this.editor = isEditor
      this.queryDetail(row['objectid'])
    },
    //查询报批项目信息
    queryDetail (id) {
      if(!id) return
      this.$ajax.get(`/api/ssnyd/${id}`, null, this, true).then(res => {
        if (res) {
          this.detailData = res
        }
      })
    },
    onSavePcHandle () {
      const sendData = {
        ...this.detailData
      }
      delete sendData['shape']
      this.$ajax.postJson('/api/ssnyd/update', sendData, this, true).then(res => {
        if (res.data) {
          this.$Message.success('更新成功！')
          this.$emit('init')
        }
      })
    },
    locationDk(index,row){
      if(row.pewg_id){
        this.detailShow = false;
        let dkbhArr = row.pewg_id?row.pewg_id.split(","):'';
        let arr = dkbhArr.map(i=>{return   "'"+i+"'";});
        this.$vm.$emit('locationGlobal', this.visibleLayerId[0], `xm_guid in (${arr.join()})`)
        //this.$message.warning("暂无图形")
      }
    },
    drawShapeJsonEvent(json){
      if(json){
        this.drawShapeJson = json;
        this.getBpxmList();
        this.$message.success("绘制结束");
      }
    },
  }
};
</script>

<style scoped lang="scss">
.xm-detal {
  width: 100%;
  .map_box {
    width: 100%;
    height: 600px;
  }
  .btn-group {
    margin-top: 20px;
    text-align: right;
  }
  $t_w: 155px;
  .tables {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 可选的对齐方式 */
    border-top: 1px solid #d6d6d6;
    border-right: 1px solid #d6d6d6;
    display: grid;
    grid-template-columns: repeat(3, $t_w 1fr);
    >div {
      border-left: 1px solid #d6d6d6;
      border-bottom: 1px solid #d6d6d6;
      padding: 8px 10px;
      display: inline-block;
      color: #1f2f47;
      &.title {
        width: $t_w;
        background: #f4f6f8;
        font-family: AlibabaPuHuiTiM;
        font-weight: normal;
        text-align: center;
      }
    }
  }
}
</style>