fj-dc-ui/.svn/pristine/db/db42c12a4a53da7d4bb0fc35d48be76e225ed4a1.svn-base

<template>
  <div id="skMain" style="height:100%;" v-loading="exportLoading">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-light">
          <div style="padding:15px 5px 5px 5px;">
            <span style="font-size: 12px;margin-left: 10px;">项目名称：</span>
            <el-input
              style="width:200px;"
              class="kjr-input"
              size="mini"
              v-model="name"
              placeholder="请输入名称查询"
              @keydown.enter.native="searchByName"
              clearable
            ></el-input>

            <span v-if="!dcztDisabled">
              <span style="font-size: 12px;margin-left: 20px;">督查状态：</span>
              <el-select
                v-model="state"
                placeholder="请选择"
                :disabled="dcztDisabled"
                style="width: 200px"
                clearable
              >
                <el-option
                  v-for="item in dcOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
            &nbsp;&nbsp;&nbsp;
            <el-button @click="searchByName" size="mini" type="primary">查询</el-button>
            <el-button @click="exPort" size="mini" type="success">导出</el-button>
          </div>
          <div style="padding:5px;">
            <el-col :span="5">
              <div style="height: 500px;overflow: auto">
                <provTreeList
                  :rootCode="rootCode"
                  :rootType="rootType"
                  @provTreeSelectChange="provTreeSelectChangeHandler"
                ></provTreeList>
              </div>
            </el-col>
            <!-- table -->
            <el-col :span="19">
              <el-table
                :data="hhslDataList"
                v-loading="loading"
                height="468"
                border
                stripe
                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  width="50"
                  label="序号"
                  align="center"
                  :index="indexMethod_country"
                ></el-table-column>
                <el-table-column
                  prop="name"
                  label="项目名称"
                  width="130"
                  align="center"
                  sortable
                  fixed="left"
                ></el-table-column>

                <el-table-column prop="city" label="行政区名称" min-width="150" align="center"></el-table-column>
                <!-- <el-table-column prop="adCode" label="行政区编码" min-width="150" align="center"></el-table-column> -->
                <el-table-column prop="county" label="市县区名称" v-if="isXj" width="110" align="center"></el-table-column>
                <el-table-column
                  prop="intm"
                  label="创建时间"
                  show-overflow-tooltip
                  min-width="120"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{formatDate(scope.row.intm)}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="uptm" label="修改时间" align="center" min-width="120">
                  <template slot-scope="scope">
                    <span>{{formatDate(scope.row.uptm)}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="location" label="工程详细地址" min-width="200"></el-table-column>
                <el-table-column prop="state" label="督查状态" align="center" min-width="130">
                  <template slot-scope="scope">
                    <span
                      style="padding: 3px 10px;background:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)"
                      v-if="!scope.row.state || scope.row.state == 0"
                    >未督查</span>
                    <span
                      style="padding: 3px 10px;background:#FBB56D;border-radius:15px;color:rgba(255,255,255,1)"
                      v-if="scope.row.state == 1"
                    >督查中</span>
                    <span
                      style="padding: 3px 10px;background:#63C25E;border-radius:15px;color:rgba(255,255,255,1)"
                      v-if="scope.row.state == 2"
                    >已督查</span>
                  </template>
                </el-table-column>
                <!-- 操作 -->
                <el-table-column fixed="right" label="操作" min-width="200" align="center">
                  <template slot-scope="scope" v-if="scope.row">
                    <el-button type="text" size="small" @click="hhslInfo(scope.row,'loaction')">定位</el-button>
                    <el-button type="text" size="small" @click="hhslInfo(scope.row,'baseInfo')">基础信息</el-button>
                    <el-button type="text" size="small" @click="hhslInfo(scope.row,'dcInfo')">登记信息</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <div class="block">
                <el-pagination
                  background
                  :pager-count="5"
                  :current-page="pageIndex"
                  :page-size="pageSize"
                  :page-sizes="[10, 20, 30, 40, 50, 100]"
                  layout="sizes, total, prev, pager, next"
                  :total="total"
                  @current-change="pageIndexChange"
                  @size-change="handleSizeChange"
                ></el-pagination>
              </div>
            </el-col>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import provTreeList from "../../../../widgets/provTreeListAndChina";
import { dateFormat } from "@util/gw_date.js";
import request from "../../../../utils/gw_ajax_request.js";
import { exportModel } from "@util/gw_exportModel";
export default {
  name: "hehuSiLuanDataSheet",
  components: {
    provTreeList
  },
  props: ["dcztDisabled","currentAdCode"],
  data() {
    return {
      name: "",
      adCode: "",
      adName: "",
      intm: "",
      uptm: "",
      city: "",
      county: "",
      location: "",
      centerX: "",
      centerY: "",
      state: "",
      persId: "", //用户id(必传)

      rootCode: "000000",
      rootType: "2",
      hhslDataList: [],
      dcOptions: [
        {
          value: "0",
          label: "未督查"
        },
        {
          value: "1",
          label: "督查中"
        },
        {
          value: "2",
          label: "已督查"
        }
      ],

      total: 0,
      pageSize: 10,
      pageIndex: 1,
      loading: false,
      isDczt: false,
      exportLoading: false
    };
  },
  computed: {
    // persId() {
    //     return localStorage.getItem("userid") ? localStorage.getItem("userid") : "1098101939614724096";
    // },
    // isAdmin:function(){
    //     return localStorage.getItem("isAdmin")? localStorage.getItem("isAdmin"): ''
    // },
  },
  mounted() {
    this.loadTableHehuSiLuan();
  },
  methods: {
    formatDate(timestamp) {
      if (timestamp) {
        return dateFormat(timestamp, "yyyy-MM-dd");
      }
    },

    // 序号
    indexMethod_country(index) {
      return index + 1 + this.pageSize * (this.pageIndex - 1);
    },

    //搜索
    searchByName() {
      this.loadTableHehuSiLuan();
    },

    async exPort() {
      let _self = this;
      this.exportLoading = true;
      let data = {};
      data.name = _self.name; //项目名称
      data.adName = _self.adName;
      data.adCode = _self.adCode;
      data.intm = _self.intm;
      data.state = _self.state;
      data.city = _self.city;
      data.county = _self.county;
      data.location = _self.location;
      data.objType = "1";
      data.isExport = "1";
      let datas = JSON.stringify(data);

      let url = `/`;
      let downloadName = "河湖四乱.xls";
      let type = "post";
      let result = await exportModel(type, url, downloadName, datas);
      this.exportLoading = result;
    },
    provTreeSelectChangeHandler(params) {
      //console.log(params);
      if (params.code == 350000000000) {
        this.adCode = "";
      } else {
        this.adCode = params.code;
      }

      this.$nextTick(() => {
        this.pageSize = 10;
        this.pageIndex = 1;
        this.loadTableHehuSiLuan();
      });
    },
    //获取河湖四乱登记表数据(列表-分页)
    loadTableHehuSiLuan: function() {
      this.loading = true;
      var params = {
        persId: localStorage.getItem("userid")
          ? localStorage.getItem("userid")
          : "1098101939614724096",
        pageSize: this.pageSize,
        pageNum: this.pageIndex,
        name: this.name,
        adName: this.adName,
        state: this.state,
        adCode: this.adCode
      };
      request.post(`/att/jskejian/flkdis/rgstr/list/page`, params).then(res => {
        if (res.success) {
          this.loading = false;
          if (res.data.list) {
            this.hhslDataList = res.data.list;
            this.total = res.data.total;
          }
        }
      });
    },

    // 分页
    pageIndexChange(val) {
      //console.log(val);
      this.pageIndex = val;
      this.loadTableHehuSiLuan();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadTableHehuSiLuan();
    },
    hhslInfo(row, info) {
      console.log(row);
      this.$emit("hhslInfo", row, info);
    }
  },
  watch: {
    currentAdCode(n, o) {
      this.adCode = n;
      this.loadTableHehuSiLuan();
    }
  }
};
</script>

<style>
#skMain
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #558ed0;
}
</style>