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

<template>
  <div class="xm-detal">
    <el-tabs type="border-card" v-model="currentTab" @tab-click="handleTabClick">
      <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.pzwh"
              placeholder="请输入批复文号"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">用地单位</div>
          <div class="content">
            <el-input
              v-model="detailData.yddw"
              placeholder="请输入用地单位"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">批准面积</div>
          <div class="content">
            <el-input
              v-model="detailData.pzmj"
              placeholder="请输入批准面积"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">批准单位</div>
          <div class="content">
            <el-input
              v-model="detailData.pzdw"
              placeholder="请输入批准单位"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">坐落位置</div>
          <div class="content">
            <el-input
              v-model="detailData.zlwz"
              placeholder="请输入坐落位置"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">入库年份</div>
          <div class="content">
            <el-input
              v-model="detailData.rknf"
              placeholder="请输入入库年份"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">批准时间</div>
          <div class="content">
            <el-date-picker
              v-model="detailData.pzsj"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择批准时间"
              />
          </div>
          <div class="title">到期时间</div>
          <div class="content">
            <el-date-picker
              v-model="detailData.dqsj"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择到期时间"
              />
          </div>
          <div class="title">入库时间</div>
          <div class="content">
            <el-date-picker
              v-model="detailData.rksj"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请输入入库时间"
              />
          </div>
          <div class="title">入库人员</div>
          <div class="content">
            <el-input
              v-model="detailData.rkry"
              placeholder="请输入入库人员"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">备注</div>
          <div class="content" style="grid-column: 2 / -1;">
            <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'" :enableLocation="false" :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_LSYD'],
      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/templand/${id}`, null, this, true).then(res => {
        if (res) {
          this.detailData = res
        }
      })
    },
    onSavePcHandle () {
      const sendData = {
        ...this.detailData
      }
      delete sendData['shape']
      this.$ajax.postJson('/api/templand/update', sendData, this, true).then(res => {
        if (res.data) {
          this.$Message.success('更新成功！')
          this.$emit('init')
        }
      })
    },
    handleTabClick(tab) {
      if (tab.name === 'tab2') {
        // 切换到地图tab时，调用地块定位，使用objectid
        if (this.detailData && this.detailData.objectid) {
          this.locationDk(null, { objectid: this.detailData.objectid });
        }
      }
    },
    locationDk(index, row) {
      if (row.objectid) {
        this.detailShow = false;
        let arr = [`'${row.objectid}'`];
        this.$nextTick(()=>{
          this.$refs.baseMap.locationGlobal(this.visibleLayerId[0],`objectid in (${arr.join()})`);
        },500);
        
      }
    },
    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(4, $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>