YZT_YUHANG/YHYZT/client/src/views/DataManage/Lsyd.vue

<template>
  <div class="page-nzy-manage">
    <div class="page-left" :style="{height:contentHeight+'px',width:contentWidth+'px'}">
      <div class="nzy-tools">
        <el-form label-width="120px" :model="paramsList">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="批复文号：">
                <el-input v-model="paramsList.pzwh" placeholder="请输入批复文号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="用地单位：">
                <el-input v-model="paramsList.pcmc" placeholder="请输入用地单位"  clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <span></span>
              <el-form-item label="批准面积：">
                <el-input v-model="paramsList.pcmc" placeholder="请输入批准面积"  clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="批准单位：">
                <el-input v-model="paramsList.pcmc" placeholder="请输入批准单位"  clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="坐落位置：">
                <el-input v-model="paramsList.pcmc" placeholder="请输入坐落位置"  clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="到期时间：">
                <el-input v-model="paramsList.pcmc" placeholder="请输入到期时间"  clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <div class="btn-group">
                <el-button type="primary" @click="getBpxmList">查询</el-button>
                <div class="panel-dropdown">
                  <el-dropdown>
                    <el-button type="success">
                      导入文件<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>
                        <el-upload
                            class="upload-demo"
                            action=""
                            :before-upload="beforeUpload"
                            multiple
                            :limit="3"
                            :on-exceed="2"
                            accept=".zip">
                        &nbsp;&nbsp;批量导入&nbsp;&nbsp;
                        </el-upload>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>

      </div>
      <div class="nzy-table">
        <el-table
            border
            :data="tableData.data"
            :height="contentHeight-260"
            :header-cell-style="tableHeaderStyle"
            :cell-style="tableRowStyle"
            :row-click="rowClick"
            ref="report-table"
            >
          <el-table-column
              type="index"
              width="80"
              label="序号">
          </el-table-column>
          <el-table-column
              prop="pf_wh"
              label="批次索引">
          </el-table-column>
          <el-table-column
              prop="pf_wh"
              label="项目名称">
          </el-table-column>
          <el-table-column
              prop="xm_lx"
              label="项目类型"
              width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.xm_lx=='2'">单独选址项目</span>
              <span v-else-if="scope.row.xm_lx=='3'">城市分批次项目</span>
              <span v-else-if="scope.row.xm_lx=='10'">实施方案项目</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="xm_bh"
              label="批准文号">
          </el-table-column>
          <el-table-column
              prop="xm_mc"
              label="批准日期">
          </el-table-column>
          <el-table-column
              prop="xm_mc"
              label="批次总面积（公顷）">
          </el-table-column>
          <el-table-column
              width="150"

              label="操作">
            <template slot-scope="scope">
              <div style="line-height: 34px;">
                <el-button
                  @click.native.prevent="openDetail(scope.$index, scope.row)"
                  style="margin-right: 10px;"
                  plain
                  type="primary"
                  size="mini">
                  查看
                </el-button>
                <el-popconfirm
                  title="该条数据确定删除吗？"
                >
                  <el-button
                    @click.native.prevent="locationDk(scope.$index, scope.row)"
                    plain
                    type="danger"
                    slot="reference"
                    size="mini">
                    删除
                  </el-button>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Page style="float: right;margin-top: 10px;"
              show-total
              :total="paramsList.total"
              :page-size="paramsList.size"
              @on-change="pageChange"
              @on-page-size-change="sizeChange"
              show-sizer />
      </div>
    </div>
    <el-dialog
      :visible.sync="detailShow"
      title="项目详情"
      top="5vh"
      width="80%"
    >
      <detail ref="details" @initBpxm="getBpxmList" :contentWidth="contentWidth-menusWidth" :contentHeight="contentHeight" :project="currProject"/>
    </el-dialog>
  </div>
</template>
<script>
import Detail from "./nzy/Detail";
import JSZip from 'jszip'
import { saveAs } from 'file-saver'
export default {
  name: "Nzy",
  props:{
    contentWidth:Number,
    contentHeight:Number
  },
  components:{Detail},
  data() {
    return {
      compName: 'data-manage',
      menus:JSON.parse(window.sessionStorage.getItem('yzt-user')),
      menusWidth:700,
      detailShow:false,
      tableData:{
        data:[],
      },
      currProject:null,
      paramsList:{pzwh:'',pcmc:'',page:1,size:15,total:0},
      fullscreenLoading: false,
      drawShapeJson:null,
    }
  },
  mounted(){
    this.getBpxmList();
  },
  methods: {
    //处理内容变化记录信息
    recordInfo(type,name,content){
      let info = {};
      info.re_recorder = this.menus.userInfo.orgName;
      info.table_type = '农转用导入';
      info.re_content='';
      let _this = this;
      info.re_name = name;
      if(type=='input'){
        info.re_content ='导入项目文件名：'+content;
      }else{
        info.re_content ='导出文件名：'+content;
      }
      let params = new FormData();
      params.append('data',JSON.stringify(info))
      //执行持久化操作（记录入库）
      this.$ajax.post('/api/opera/record/insert',params, this, true).then(res => {
        const {success,data} = res;
        if(success){
          this.$message.success("操作成功！")
        }else{
          this.$message.error("操作失败！")
        }
      })
    },
    pageChange:function (page){
      this.paramsList.page=page;
      this.getBpxmList()
    },
    sizeChange:function (size){
      this.paramsList.size=size;
      this.getBpxmList()
    },
    //查询报批项目信息
    getBpxmList(){
      let params = new FormData();
      params.append("page",this.paramsList.page);
      params.append("size",this.paramsList.size);
      params.append("dkbh",this.paramsList.dkbh);
      params.append("dkmc",this.paramsList.dkmc);
      if(this.drawShapeJson){
        params.append("shapes",JSON.stringify(this.drawShapeJson));
      }
      let _this = this;
      this.$ajax.post('/api/data/manage/lsyd/getList', params, this, true).then(res => {
        const {success,data} = res;
        if(success){
          _this.tableData.data =[];
          _this.paramsList.total=0;
          if(data.list){
            _this.tableData.data= data.list;
            _this.paramsList.total = data.total;
          }
        }
      })
    },
    rowClick(row, column, event){
      this.currProject = row;
      this.detailShow =true;
    },
    openDetail(index,row){
      this.currProject = row;
      this.detailShow = true;
      this.$refs['details'].initDetailData()
    },
    locationDk(index,row){
      if(row.dk_bh){
        this.detailShow = false;
        let dkbhArr = row.dk_bh?row.dk_bh.split(","):'';
        let arr = dkbhArr.map(i=>{return   "'"+i+"'";});
        this.$vm.$emit('locationGlobal', 'YHYZT_NZYDK_NEW', `index_id in (${arr.join()})`)
        //this.$message.warning("暂无图形")
      }
    },
    tableRowStyle({row, rowIndex}) {
      if (rowIndex%2 === 1) {
        return 'text-align:center;background:#F7F8FA';
      }else{
        return 'text-align:center;';
      }
    },
    tableHeaderStyle(){
      return 'background:#E5EDFE; font-family:AlibabaPuHuiTiR; font-size:16px; color:rgba(51, 51, 51, 1);text-align:center;';
    },
    beforeUpload(file){
      if(file){
        if(file.name.endsWith("zip")){
          this.doInput(file)
        }
        return false;
      }
    },
    doInput(file){
      let params = new FormData();
      params.append("file",file);
      let _this = this;
      const loading = this.$loading({
        lock: true,
        text: '正在导入中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$ajax.post('/api/data/upload/lsyd/zip', params, this).then(res => {
        const {success,data} = res;
        loading.close();
        if(success && data){
          this.recordInfo("input",'临时用地成果导入',file.name);
        }
      })
    },
    saveFileContent(fileContent) {
      var zip = new JSZip()

      fileContent.forEach(i => {
        zip.file(i.filename, i.content)
      })
      zip.file('农转用项目.cpg', 'UTF-8')
      zip.generateAsync({ type: 'blob' }, function updateCallback(metadata) {
        var msg = 'progression : ' + metadata.percent.toFixed(2) + ' %'
        if (metadata.currentFile) {
          msg += ', current file = ' + metadata.currentFile
        }
        console.log(msg)
      }).then((blob) => {
        // see FileSaver.js
        saveAs(blob, '农转用项目.zip')
        console.log('done !')
      })
          .catch(error => console.error(error.stack))
    },
  }
}
</script>
<style scoped lang="scss">
.page-nzy-manage{
  position: relative;
  display: flex;
  .page-left{
    background: #fff;
    border-radius: 0px 0px 0px 0px;
    z-index: 99;
    padding: 20px;
    border-right:2px solid #e9e3e3;
    .nzy-tools{
      .btn-group {
        display: flex;
      }
      .panel-dropdown{
        margin-left: 10px;
        border-radius: 4px 4px 4px 4px;
        .el-dropdown{
          width: 100%;
        }
      }
    }
  }
  .page-detail{
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    z-index: 999;
    right: 0px;
  }
  .page-map{
    //position: absolute;
    //background:#434;
  }
}
</style>