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

<template>
  <div class="xm-detal">
    <div class="left_tree">
      <ul  class="tree_box">
        <li v-for="(item,index) in treeData" :key="index">
          <div class="tree_item">
            <span  :class="{ tree_title: true, active: cActive === `${index}` }" @click="handleNodeClick(item, index)">{{ item['label'] }}</span>
            <span :class="{ icon: true, expand: cExpand === index }" @click="onExpandHandle(index)">
              <svg v-if="item['children'].length > 0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M384 192v640l384-320.064z"></path></svg>
            </span>
          </div>
          <template v-if="item['children'].length > 0">
            <ul class="child_tree_box" v-show="cExpand === index">
              <li v-for="(cItem,cIndex) in item['children']" :key="cIndex">
                <span :class="{ tree_title: true, active: cActive === `${index}${cIndex}` }" @click="handleNodeClick(cItem, index, cIndex)">{{ cItem['label'] }}</span>
              </li>
            </ul>
          </template>
        </li>
      </ul>
    </div>
    <div class="right_detail">
      <div class="tables detail_1" v-if="detailType === '1'">
        <table>
          <tr>
            <th>批次索引</th>
            <td colspan="3">
              <el-input
                v-model="detailData.pcbh"
                placeholder="请输入批次索引"
                clearable
                :disabled="!jbxxEdit"
              />
            </td>
          </tr>
          <tr>
            <th>批次名称</th>
            <td colspan="3">
              <el-input
                v-model="detailData.pch"
                placeholder="请输入批次名称"
                clearable
                :disabled="!jbxxEdit"
              />
            </td>
          </tr>
          <tr>
            <th>类型</th>
            <td colspan="3">
              <el-select v-model="detailData.lx" :disabled="!jbxxEdit" style="width: 100%;">
                <el-option value="单独选址" label="单独选址" />
                <el-option value="批次用地" label="批次用地" />
              </el-select>
            </td>
          </tr>
          <tr>
            <th>批准文号</th>
            <td colspan="3">
              <el-input
                v-model="detailData.pwh"
                placeholder="请输入批准文号"
                clearable
                :disabled="!jbxxEdit"
              />
            </td>
          </tr>
          <tr>
            <th>批准日期</th>
            <td colspan="3">
              <el-input
                v-model="detailData.pzrq"
                placeholder="请输入批准日期"
                clearable
                :disabled="!jbxxEdit"
              />
            </td>
          </tr>
          <tr>
            <th>批次总面积（公顷）</th>
            <td colspan="3">
              <el-input
                v-model="detailData.pzMj"
                placeholder="请输入批次总面积（公顷）"
                clearable
                :disabled="!jbxxEdit"
              />
            </td>
          </tr>
          <tr>
            <th>是否农民建房</th>
            <td colspan="3">
              <el-select v-model="detailData.nmjf" :disabled="!jbxxEdit">
                <el-option value="是" label="是" />
                <el-option value="否" label="否" />
              </el-select>
            </td>
          </tr>
        </table>
        <div class="btn-group">
          <el-button type="primary" @click="onSavePcHandle">保存</el-button>
        </div>
      </div>
      <div class="detail_2" v-else>
        <el-tabs type="border-card" v-model="currentTab" @tab-click="handleTabClick">
          <el-tab-pane label="项目信息" name="tab1">
            <div class="tables">
              <table>
                <tr>
                  <th>批次索引</th>
                  <td colspan="3">
                    <el-input
                      v-model="projectDetail.pcbh"
                      placeholder="请输入批次索引"
                      clearable
                      disabled="true"
                    />
                  </td>
                </tr>
                <tr>
                  <th>项目编号</th>
                  <td colspan="3">
                    <el-input
                      v-model="projectDetail.dkBh"
                      placeholder="请输入项目编号"
                      clearable
                      :disabled="!xmxxEdit"
                    />
                  </td>
                </tr>
                <tr>
                  <th>项目名称</th>
                  <td colspan="3">
                    <el-input
                      v-model="projectDetail.dkMc"
                      placeholder="请输入项目名称"
                      clearable
                      :disabled="!xmxxEdit"
                    />
                  </td>
                </tr>
                <tr>
                  <th>乡镇街道</th>
                  <td colspan="3">
                    <el-input
                      v-model="projectDetail.xzz"
                      placeholder="请输入乡镇街道"
                      clearable
                      :disabled="!xmxxEdit"
                    />
                  </td>
                </tr>
                <tr>
                  <th>土地用途</th>
                  <td colspan="3">
                    <el-input
                      v-model="projectDetail.dkYt"
                      placeholder="请输入土地用途"
                      clearable
                      :disabled="!xmxxEdit"
                    />
                  </td>
                </tr>
                <tr>
                  <th>土地坐落</th>
                  <td colspan="3">
                    <el-input
                      v-model="projectDetail.tdZl"
                      placeholder="请输入土地坐落"
                      clearable
                      :disabled="!xmxxEdit"
                    />
                  </td>
                </tr>
                <tr>
                  <th>项目面积（公顷）</th>
                  <td colspan="3">
                    <el-input
                      v-model="projectDetail.dkMj"
                      placeholder="请输入项目面积（公顷）"
                      clearable
                      :disabled="!xmxxEdit"
                    />
                  </td>
                </tr>
                <tr>
                  <th>用地主体</th>
                  <td colspan="3">
                    <el-input
                      v-model="projectDetail.dkQs"
                      placeholder="请输入用地主体"
                      clearable
                      :disabled="!xmxxEdit"
                    />
                  </td>
                </tr>
                <tr>
                  <th>备注</th>
                  <td colspan="3">
                    <el-input
                      v-model="projectDetail.bz"
                      placeholder="请输入备注"
                      clearable
                      :disabled="!xmxxEdit"
                    />
                  </td>
                </tr>
              </table>
              <div class="btn-group">
                <el-button type="primary" @click="onSaveXmHandle">保存</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="查看地图" name="tab2">
            <div class="map_box">
              <base-map ref="baseMap" v-if="detailType && currentTab === 'tab2'"   :enableLocation="false" :overlayShow="true" @drawShapeJson="drawShapeJsonEvent" :visibleLayerIds="visibleLayerId"/>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </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_NZYDK_NEW'],
      cExpand: 0,
      cActive: '0',
      detailType: '1',  //1 农转用批次信息 2 农转用项目信息
      detailData: {
        pcbh: '',
        pch: '',
        lx: '',
        pwh: '',
        pzrqStart: '',
        pzrqEnd: '',
        pzMj: '',
        nmjf: '',
      },
      projectDetail: {
        pcbh: '',
        dkBh: '',
        dkMc: '',
        xzz: '',
        dkYt: '',
        tdZl: '',
        dkMj: '',
        dkQs: '',
        bz: '',
        objectid:null,
      },
      jbxxEdit: true,
      xmxxEdit: true,
      treeData: [{
        label: '基本信息',
        children: []
      }, {
        label: '项目信息',
        children: []
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  props: {
    contentWidth: Number,
    contentHeight: Number
  },
  watch: {
    
  },
  methods: {
    initDetailData (row, isEditor = false) {
      this.cActive = '0'
      this.detailType = '1'
      this.currentTab = 'tab1'
      this.detailData = row
      this.jbxxEdit = this.xmxxEdit = isEditor
      this.getNzydkList(row['pch'])
    },
    onExpandHandle (index) {
      if (this.cExpand === index) {
        this.cExpand = -1
        return;
      }
      this.cExpand = index
    },
    handleNodeClick (data, index, cIndex = null) {
      if (cIndex !== null) {
        this.currentTab = 'tab1'
        this.cActive = `${index}${cIndex}`
        this.detailType = '2'
        this.projectDetail = this.treeData[index]['children'][cIndex]
      } else {
        this.cActive = `${index}`  
        this.detailType = '1'      
      }
    },
    getNzydkList (pch) {
      const params = {
        pch: pch
      }
      this.$ajax.get('/api/stnzy/getNzydk', params, this, true).then(res => {
        if (res) {
          this.treeData[1]['children'] = res.map((item) => {
            return {
              label: item['dkMc'],
              ...item
            }
          })
        }
      })
    },
    onSaveXmHandle () {
      const sendData = {
        ...this.projectDetail
      }
      delete sendData['shape']
      this.$ajax.postJson('/api/stnzy/update', sendData, this, true).then(res => {
        if (res.data) {
          this.$Message.success('更新成功！')
          this.$emit('init')
        }
      })
    },
    onSavePcHandle () {
      const sendData = {
        ...this.detailData
      }
      const formData = new FormData()
      const keys = Object.keys(sendData)
      keys.forEach((key) => {
        formData.append(key, sendData[key])
      })
      this.$ajax.post('/api/stnzy/updateByPcbh', formData, this, true).then(res => {
        if (res.data) {
          this.$Message.success('更新成功！')
          this.$emit('init')
        }
      })
    },
    handleTabClick(tab) {
      if (tab.name === 'tab2') {
        // 切换到地图tab时，调用地块定位，使用objectid
        if (this.projectDetail && this.projectDetail.objectid) {
          this.locationDk(null, { objectid: this.projectDetail.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%;
  display: flex;
  align-items: flex-start;
  >div {
      max-height: 580px;
    .btn-group {
      margin-top: 20px;
      text-align: right;
    }
    &.left_tree {
      width: 260px;
      >.tree_box {
        background: #f4f6f8;
        font-family: AlibabaPuHuiTiM;
        li {
          font-size: 15px;
          cursor: pointer;
          user-select: none;
          .tree_title {
            width: 100%;
            display: block;
            padding: 8px 15px;
            &:hover, &.active {
              background: #e5edfe;
            }
          }
        }
        >li {
          >.tree_item {
            font-weight: normal;
            color: #1f2f47;
            font-size: 16px;
            position: relative;
            >.icon {
              display: inline-block;
              width: 1rem;
              height: 1rem;
              position: absolute;
              top: 0px;
              bottom: 0px;
              right: 10px;
              margin: auto;
              >svg {
                width: 1rem;
                height: 1rem;
              }
              &.expand {
                transform: rotateZ(90deg);
              }
            }
          }
          >.child_tree_box {
            margin-left: 20px;
            max-height: 480px;
            overflow-y: auto;
            >li {
              >span {
                color: #606266;
                padding: 5px 15px;
              }
            }
          }
        }
      }
    }
    &.right_detail {
      flex: 1;
      margin-left: 20px;
    }
  }
  .map_box {
    height: 510px;
  }
  .tables {
    width: 100%;
    overflow-y: auto;
    table {
      width: 100%;
      border-collapse: collapse;
      tr,
      th,
      td {
        border: 1px solid #d6d6d6;
        height: 40px;
        font-size: 14px;
        color: #1f2f47;
      }
      th {
        width: 180px;
        background: #f4f6f8;
        font-family: AlibabaPuHuiTiM;
        font-weight: normal;
      }
      td {
        padding: 0px 5px;
      }
    }
    ::v-deep {
      .el-input__inner {
        //border:1px solid #fff;
        border-radius: 0px;
        border-color: transparent;
      }
    }
  }
}
</style>