YZT_YUHANG/YHYZT/client/src/views/DataManage/gd/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_grid">  
          <div class="title">地块索引</div>
          <div class="content">
            <el-input
              v-model="detailData.gdsy"
              placeholder="请输入地块索引"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">项目名称</div>
          <div class="content">
            <el-input
              v-model="detailData.dkMc"
              placeholder="请输入项目名称"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">出让合同/划拨决定书编号</div>
          <div class="content">
            <el-input
              v-model="detailData.htydpzbh"
              placeholder="请输入出让合同/划拨决定书编号"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">项目类型</div>
          <div class="content">
            <el-select v-model="detailData.djklx">
              <el-option label="出让" value="出让"></el-option>
              <el-option label="划拨" value="划拨"></el-option>
              <el-option label="集体土地" value="集体土地"></el-option>
            </el-select>
          </div>
          <div class="title">批准文号</div>
          <div class="content">
            <el-input
              v-model="detailData.dkBh"
              placeholder="请输入批准文号"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">签订日期</div>
          <div class="content">
            <el-date-picker
              v-model="detailData.htsj"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择签订日期"
            />
          </div>
          <div class="title">项目面积（公顷）</div>
          <div class="content">
            <el-input
              v-model="detailData.dkMj"
              placeholder="请输入项目面积（公顷）"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">用地单位</div>
          <div class="content">
            <el-input
              v-model="detailData.dwMc"
              placeholder="请输入用地单位"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">土地坐落</div>
          <div class="content">
            <el-input
              v-model="detailData.tdZl"
              placeholder="请输入土地坐落"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">土地用途</div>
          <div class="content">
            <el-input
              v-model="detailData.dkYt"
              placeholder="请输入土地用途"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">所属平台</div>
          <div class="content">
            <el-input
              v-model="detailData.pt"
              placeholder="请输入所属平台"
              clearable
              :disabled="true"
            />
          </div>
          <div class="title">容积率</div>
          <div class="content">
            <el-input
              v-model="detailData.rjl"
              placeholder="请输入容积率"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">出让金/划拨价款（万元）</div>
          <div class="content">
            <el-input
              v-model="detailData.crj"
              placeholder="请输入出让金/划拨价款（万元）"
              clearable
              :disabled="!editor"
            />
          </div>
          <div class="title">约定开工时间</div>
          <div class="content">
            <el-date-picker
              v-model="detailData.ydkgsj"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择约定开工时间"
            />
          </div>
          <div class="title">约定竣工时间</div>
          <div class="content">
            <el-date-picker
              v-model="detailData.ydjgsj"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择约定约定竣工时间"
            />
          </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_ST_GDDK_NEW'],
      detailData: {},
      editor: false
    };
  },
  props: {
    contentWidth: Number,
    contentHeight: Number,
    project: Object,
  },
  watch: {
    
  },
  methods: {
    initDetailData (row, isEditor = false) {
      this.currentTab = 'tab1'
      this.editor = isEditor
      this.detailData = row
      this.queryDetail(row['objectid'])
    },
    //查询报批项目信息
    queryDetail (id) {
      if(!id) return
      this.$ajax.get(`/api/stgddk/${id}`, null, this, true).then(res => {
        if (res) {
          this.detailData = res
        }
      })
    },
    onSavePcHandle () {
      const sendData = {
        ...this.detailData
      }
      delete sendData['shape']
      this.$ajax.postJson('/api/stgddk/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_grid {
    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>