YZT_YUHANG/YHYZT/client/src/views/DataManage/Ssnyd.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="searchParam">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="项目索引：">
                <el-input v-model="searchParam.xmbh" placeholder="请输入项目索引" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目名称：">
                <el-input v-model="searchParam.xmmc" placeholder="请输入项目名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="市：">
                <el-input v-model="searchParam.szs" placeholder="请输入市"  clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="县区：">
                <el-input v-model="searchParam.xzq" 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="searchParam.bah" placeholder="请输入备案号"  clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="备案面积：">
                <el-input v-model="searchParam.bamj" placeholder="请输入备案面积"  clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="备案时间：">
                <el-date-picker
                  v-model="basjDateRange"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  unlink-panels
                  start-placeholder="备案开始时间"
                  end-placeholder="备案结束时间"
                  :shortcuts="shortcuts"
                  style="width:100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <div class="btn-group">
                <el-button type="primary" @click="onSearchHandle">查询</el-button>
                <el-button type="info" style="margin-left: 8px;" @click="onResetHandle">清空</el-button>
                <el-upload
                  class="upload-demo"
                  action=""
                  :before-upload="beforeUpload"
                  multiple
                  :limit="3"
                  :on-exceed="2"
                  accept=".zip"
                  style="display:inline-block; margin-left: 10px;"
                >
                  <el-button type="success">
                    导入文件
                  </el-button>
                </el-upload>
                <el-button type="warning" @click="downloadTemplate" style="margin-left: 12px">模板下载</el-button>
              </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"
            ref="report-table"
            >
          <el-table-column
              type="index"
              width="80"
              label="序号">
          </el-table-column>
          <el-table-column
              prop="xmbh"
              label="项目索引">
          </el-table-column>
          <el-table-column
              prop="xmmc"
              label="项目名称">
          </el-table-column>
          <el-table-column
              prop="szs"
              label="市">
          </el-table-column>
          <el-table-column
              prop="xzq"
              label="县区">
          </el-table-column>
          <el-table-column
              prop="yt"
              label="用途">
          </el-table-column>
          <el-table-column
              prop="bah"
              label="备案号">
          </el-table-column>
          <el-table-column
              prop="bamj"
              label="备案面积">
          </el-table-column>
          <el-table-column
              prop="basj"
              label="备案时间">
          </el-table-column>
          <el-table-column
              prop="bz"
              label="备注">
          </el-table-column>
          <el-table-column
              width="260"
              label="操作">
            <template slot-scope="scope">
              <div style="line-height: 34px;">
                <el-button
                  @click.native.prevent="openDetail(scope.row)"
                  plain
                  type="primary"
                  size="mini">
                  查看
                </el-button>
                <el-button
                  @click.native.prevent="openDetail(scope.row, true)"
                  style="margin: 0px 10px;"
                  plain
                  type="primary"
                  size="mini">
                  编辑
                </el-button>
                <el-popconfirm
                  title="该条数据确定删除吗？"
                  @confirm="deleteHandle(scope.$index, scope.row)"
                >
                  <el-button
                    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="tableData.total"
              :page-size="searchParam.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" @init="onSearchHandle" :contentWidth="contentWidth-menusWidth" :contentHeight="contentHeight" :project="currProject"/>
    </el-dialog>
  </div>
</template>
<script>
import Detail from "./ssnyd/Detail";
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:[],
        total: 0
      },
      currProject:null,
      basjDateRange: [],
      searchParam: {
        xmbh: '',
        ban: '',
        yt: '',
        xzq: '',
        basjStart: '',
        basjEnd: '',
        current: 1,
        size: 10
      }
    }
  },
  mounted(){
    this.queryByPage();
  },
  methods: {
    onSearchHandle () {
      this.detailShow = false
      this.searchParam['current'] = 1
      this.queryByPage()
    },
    pageChange:function (page){
      this.searchParam.current=page;
      this.queryByPage()
    },
    sizeChange:function (size){
      this.searchParam.size=size;
      this.queryByPage()
    },
    //查询报批项目信息
    queryByPage(){
      let _this = this;
      if (this.basjDateRange && this.basjDateRange.length > 0) {
        this.searchParam.basjStart = this.basjDateRange[0]
        this.searchParam.basjEnd = this.basjDateRange[1]
      }else{
        this.searchParam.basjStart = ''
        this.searchParam.basjEnd = ''
      }
      const params = {
        ...this.searchParam
      }
      this.$ajax.get('/api/ssnyd/page', params, this, true).then(res => {
        if (res.status === 200) {
            _this.tableData.data= res.records;
            _this.tableData.total = res.total;
        }
      })
    },
    openDetail(row, isEditor = false){
      this.detailShow = true;
      this.$nextTick(() => {
        this.$refs['details'].initDetailData(row, isEditor)
      })
    },
    deleteHandle (index, row) {
      const params = {id: row['objectid']}
      this.$ajax.get('/api/ssnyd/delete', params, this, true).then(res => {
        if (res.data) {
          this.$Message.success('删除成功！')
          this.queryByPage()
        }
      })
    },
    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);
      const loading = this.$loading({
        lock: true,
        text: '正在导入中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$ajax.post('/api/ssnyd/upload', params, this).then(res => {
        loading.close();
        if (res.success) {
          this.$Message.success("导入成功！");
          this.queryByPage && this.queryByPage(); // 成功后刷新数据
        } else {
          if (res.data && Array.isArray(res.data)) {
            res.data.forEach(msg => this.$Message.error(msg));
          } else {
            this.$Message.error(res.message || "导入失败！");
          }
        }
      }).catch(error => {
        loading.close();
        this.$Message.error("上传失败，请重试！");
        console.error(error);
      });
    },
    downloadTemplate() {
      // 模板下载地址
      window.open(window.ApplicationConfig.templateUrls.ssnyd);
    },
    onResetHandle() {
      this.searchParam = {
        xmbh: '',
        ban: '',
        yt: '',
        xzq: '',
        basjStart: '',
        basjEnd: '',
        current: 1,
        size: 10
      };
      this.basjDateRange = [];
      this.queryByPage();
    }
  }
}
</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>