fj-dc-ui/.svn/pristine/07/074cb6f4b9e9e5bf3296a8c97c5fec98f8a7a3e4.svn-base

<template>
  <div>
    <el-container>
      <el-main id="dxdcListMain" style="padding:5px 20px;" :style="{'height':dxdcMainHeight+'px'}">
        <div>
          <h3 style="text-align: center">
            {{fenggongxianName}}“三个重点环节”
            <el-button
              type="primary"
              @click="toAddMember('添加')"
              style="float: right;margin: 0 0 10px;"
            >
              <i class="el-icon-circle-plus"></i> 添加
            </el-button>
          </h3>
        </div>
        <el-table
          border
          :data="villageList"
          tooltip-effect="dark"
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column align="center" type="index" label="序号" min-width="45">
            <template slot-scope="scope">{{ (pageIndex - 1) * pageSize + (scope.$index + 1) }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="adNm"
            label="行政村名(*县*乡镇*村)"
            min-width="160"
          ></el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="isPoverty"
            label="是否贫困村"
            min-width="80"
          >
            <template slot-scope="scope">
              <span>{{formatRadio(scope.row.isPoverty)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="isFluexc"
            label="是否氟超标地区"
            min-width="100"
          >
            <template slot-scope="scope">
              <span>{{formatRadio(scope.row.isFluexc)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="isMtarea"
            label="是否山区"
            min-width="70"
          >
            <template slot-scope="scope">
              <span>{{formatRadio(scope.row.isMtarea)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="isCenwtSupply"
            label="是否集中供水村"
            min-width="100"
          >
            <template slot-scope="scope">
              <span>{{formatRadio(scope.row.isCenwtSupply)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="watersupplyPer"
            label="集中供水人口比例"
            min-width="110"
          >
            <template slot-scope="scope">
              <span>{{scope.row.watersupplyPer ? scope.row.watersupplyPer * 100 + '%' : ''}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" show-overflow-tooltip prop="recPers2" label="记录人员" min-width="80"></el-table-column> -->
          <!-- <el-table-column align="center" show-overflow-tooltip prop="recPersTel" label="记录人员电话" min-width="80"></el-table-column> -->
          <el-table-column
            align="center"
            sortable
            show-overflow-tooltip
            prop="visitDate"
            label="暗访日期"
            min-width="80"
          ></el-table-column>
          <!-- <el-table-column align="center" show-overflow-tooltip prop="bornDate" label="暗访组（人）名单" min-width="80"></el-table-column> -->
          <el-table-column
            align="center"
            show-overflow-tooltip
            label="操作"
            min-width="160"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button type="success" plain @click="toAddMember('编辑',scope.row)">编辑</el-button>
              <el-button type="danger" plain @click="deleteMember(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer id="dxdcFooter">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :pager-count="5"
          :current-page.sync="pageIndex"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </el-footer>
    </el-container>
    <!-- 添加/编辑人员弹窗 -->
    <el-dialog :title="'三个重点环节填报'" :visible.sync="dialogFormVisible">
      <el-container style="height:520px;">
        <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
          <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">信息填报</p>
          <el-form :model="formObj" :label-width="formLabelWidth">
            <p style="margin-top:10px;margin-bottom: 10px">
              <i class="el-icon-caret-right"></i>
              <span style="width:120px;padding-left: 10px">安全管理（防汛）应急预案</span>
              <span class="hrs"></span>
            </p>
            <el-form-item label="是否编制">
              <el-radio v-model="formObj.isPoverty" label="1" :disabled="!engId">是</el-radio>
              <el-radio v-model="formObj.isPoverty" label="0" :disabled="!engId">否</el-radio>
            </el-form-item>
            <el-form-item label="是否批复或备案">
              <el-radio v-model="formObj.isFluexc" label="1" :disabled="!engId">是</el-radio>
              <el-radio v-model="formObj.isFluexc" label="0" :disabled="!engId">否</el-radio>
            </el-form-item>
            <el-form-item label="是否进行演练">
              <el-radio v-model="formObj.isMtarea" label="1" :disabled="!engId">是</el-radio>
              <el-radio v-model="formObj.isMtarea" label="0" :disabled="!engId">否</el-radio>
            </el-form-item>
            <el-form-item label="是否具备操作性">
              <el-radio v-model="formObj.isCenwtSupply" label="1" :disabled="!engId">是</el-radio>
              <el-radio v-model="formObj.isCenwtSupply" label="0" :disabled="!engId">否</el-radio>
            </el-form-item>
            <p style="margin-top:10px;margin-bottom: 10px">
              <i class="el-icon-caret-right"></i>
              <span style="width:120px;padding-left: 10px">水库调度运用方案</span>
              <span class="hrs"></span>
            </p>
            <el-form-item label="是否编制">
              <el-radio v-model="formObj.isPoverty" label="1" :disabled="!engId">是</el-radio>
              <el-radio v-model="formObj.isPoverty" label="0" :disabled="!engId">否</el-radio>
            </el-form-item>
            <el-form-item label="是否批复">
              <el-radio v-model="formObj.isFluexc" label="1" :disabled="!engId">是</el-radio>
              <el-radio v-model="formObj.isFluexc" label="0" :disabled="!engId">否</el-radio>
            </el-form-item>
            <el-form-item label="是否具备操作性">
              <el-radio v-model="formObj.isMtarea" label="1" :disabled="!engId">是</el-radio>
              <el-radio v-model="formObj.isMtarea" label="0" :disabled="!engId">否</el-radio>
            </el-form-item>
            <p style="margin-top:10px;margin-bottom: 10px">
              <i class="el-icon-caret-right"></i>
              <span style="width:120px;padding-left: 10px">水雨情预测预报</span>
              <span class="hrs"></span>
            </p>
            <el-form-item label="是否有能力开展">
              <el-radio v-model="formObj.isPoverty" label="1" :disabled="!engId">是</el-radio>
              <el-radio v-model="formObj.isPoverty" label="0" :disabled="!engId">否</el-radio>
            </el-form-item>
            <el-form-item label="操作">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="addVillage">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
import provTreeList from "../../../widgets/villageList_nongyin.vue";
import inputWith from "../../../widgets/inuptWith.vue";
import request from "../../../utils/gw_ajax_request.js";
import { getTableId_ny, updateTable1_ny } from "../../../api/duChaTianBao.js";
import { formatDateTimeD } from "../../../utils/gw_date.js";
export default {
  components: {
    provTreeList: provTreeList,
    inputWith: inputWith
  },
  props: ["fengongxianCode", "engId", "fenggongxianName"],

  data() {
    return {
      dxdcMainHeight: window.innerHeight - 197,
      dxdcAsideHeight: window.innerHeight - 90,
      formObj: {
        engId: "",
        adNm: "",
        villageCode: "",
        isPoverty: "",
        isFluexc: "",
        isMtarea: "",
        isCenwtSupply: "",
        watersupplyPer: "",
        recPers2: "",
        recPersId: "",
        recPersTel: "",
        visitDate: "",
        createTime: "",
        visitDate: ""
      },
      getEngId: false,
      searchObj: {
        pageNum: "",
        pageSize: 20
      },
      pageIndex: 1,
      pageSize: 20,
      total: 1,
      villageList: [],
      dialogFormVisible: false,
      formLabelWidth: "160px",
      curOperate: "",
      isExits: false,
      loading: true
    };
  },
  computed: {
    recPersId() {
      return localStorage.getItem("userid")
        ? localStorage.getItem("userid")
        : "1098101939614724096";
    }
  },
  mounted() {
    // this.getVillageList()
  },
  watch: {
    engId(newVal, oldVal) {
      console.log(oldVal);
      console.log(newVal);
      if (newVal) {
        this.loading = true;
        this.getVillageList();
      }
    }
  },
  methods: {
    submitTable: function() {
      updateTable1_ny(
        this.formObj.adNm,
        this.engId,
        this.formObj.isCenwtSupply,
        this.formObj.isFluexc,
        this.formObj.isMtarea,
        this.formObj.isPoverty,
        this.formObj.recPers2,
        this.formObj.recPersId,
        this.formObj.recPersTel,
        this.formObj.status,
        this.formObj.villageCode,
        this.formObj.visitDate,
        this.formObj.watersupplyPer
      ).then(res => {
        this.dialogFormVisible = false;
        this.getVillageList();
      });
    },
    //村列表
    getVillageList() {
      this.searchObj.pageNum = this.pageIndex;
      this.searchObj.engId = this.engId;
      let paramsObj = this.searchObj;
      request
        .post("/dc/insp/secsurveyVlg/queryListByPage", paramsObj)
        .then(res => {
          if (res.success) {
            this.villageList = res.data.list;
            this.total = res.data.total;
            this.loading = false;
          }
        });
    },
    //添加行政村
    addVillage() {
      this.formObj.engId = this.engId;
      this.formObj.recPersId = this.recPersId;
      let addObj = {};
      Object.assign(addObj, this.formObj);
      addObj.watersupplyPer = this.formObj.watersupplyPer / 100;
      if (!this.formObj.adNm) {
        this.$message.info("请选择行政村");
        return;
      }
      if (addObj.watersupplyPer > 1) {
        this.$message.info("集中供水人口比例不能超过100%");
        return;
      }
      //判断新添加的村是否已存在
      let getByObj = {
        engId: addObj.engId,
        villageCode: addObj.villageCode
      };

      if (this.curOperate == "添加") {
        request.post("/dc/insp/secsurveyVlg/getBy", getByObj).then(res => {
          if (res.success) {
            if (res.data.adNm) {
              this.$message.info("该行政村已存在");
            } else {
              request.post("/dc/insp/secsurveyVlg/insert", addObj).then(res => {
                if (res.success) {
                  this.dialogFormVisible = false;
                  this.getVillageList();
                  this.$message.success("添加成功");
                } else {
                  this.$message.error(res.message);
                }
              });
            }
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (this.curOperate == "编辑") {
        request.post("/dc/insp/secsurveyVlg/update", addObj).then(res => {
          if (res.success) {
            this.getVillageList();
            this.dialogFormVisible = false;
            this.$message.success("修改成功");
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
    toAddMember(type, row) {
      this.curOperate = type;
      let rowObj = {};
      Object.assign(rowObj, row);
      if (this.curOperate == "编辑") {
        this.formObj = rowObj;
        this.formObj.watersupplyPer = this.formObj.watersupplyPer * 100;
      } else {
        for (var obj in this.formObj) {
          this.formObj[obj] = "";
        }
        this.formObj.visitDate = formatDateTimeD();
      }
      this.dialogFormVisible = true;
    },
    addTable() {
      this.formObj = {
        engId: "",
        adNm: "",
        villageCode: "",
        isPoverty: "",
        isFluexc: "",
        isMtarea: "",
        isCenwtSupply: "",
        watersupplyPer: "",
        recPers2: "",
        recPersTel: "",
        visitDate: ""
      };
      this.getEngId = false;
      this.dialogFormVisible = true;
    },
    deleteMember(row) {
      this.$confirm("确定删除该村吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          request.post(`/dc/insp/secsurveyVlg/${row.villId}`).then(res => {
            if (res.success) {
              this.getVillageList();
              this.dialogFormVisible = false;
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //查询
    onSubmit() {
      // this.searchObj.orgId = ''
      this.getVillageList();
    },
    //分页
    handleCurrentChange(val) {
      this.getVillageList();
    },
    //村信息
    provTreeSelectChangeHandler(params) {
      this.formObj.adNm = params.name;
      this.formObj.villageCode = params.code;
    },
    formatRadio(val) {
      if (val == "1") {
        return "是";
      } else if (val == "0") {
        return "否";
      } else {
        return val;
      }
    }
  }
};
</script>

<style>
#dcdxHeader {
  padding: 15px 20px;
}
#dxdcFooter {
  text-align: center;
}
#dxdcAside {
  border: 1px solid #d5d5ff;
}
.el-dialog__wrapper .el-treeWhite {
  /* max-height: 260px !important; */
}
</style>