epmet-work-pc-chengyang/src/views/modules/shequ/chaxun.vue

<template>
  <div class="g-cnt-wrap">
    <div class="m-box m-search">
      <div class="wrap">
        <div class="title">
          <span>社区查询</span>
        </div>

        <div class="tabs">
          <div :class="{ 'z-on': searchData.type == 'jumin' }"
               @click="searchData.type = 'jumin'">
            查居民
          </div>
          <div :class="{ 'z-on': searchData.type == 'fangwu' }"
               @click="searchData.type = 'fangwu'">
            查房屋
          </div>
        </div>

        <div class="search">
          <div class="search-input">
            <div class="input">
              <input type="text"
                     :placeholder="typePlaceholder[searchData.type]"
                     v-model="searchData.keyword"
                     @keyup.enter="handleClickSearchBtn" />

              <div class="close-btn"
                   v-if="searchData.keyword != ''"
                   @click="searchData.keyword = ''">
                <img src="@/assets/img/shequ/close.png" />
              </div>
            </div>
            <div class="btn"
                 @click="handleClickSearchBtn">查一下</div>
          </div>
          <div class="btn2"
               @click="handleClickSearchBtn">
            <img src="@/assets/images/index/i-search.png" />
            智能搜索
          </div>
        </div>
      </div>
    </div>

    <div class="m-box"
         v-if="searchStatus == 'ing'">
      <div class="m-tb"
           v-if="
          searchData.type == 'jumin' &&
          searchData.keyword != '' &&
          searchStatus == 'ing'
        ">
        <div class="tb">
          <el-table class="m-table"
                    v-loading="searchJumin.loading"
                    :data="searchJumin.list"
                    border
                    style="width: 100%"
                    :max-height="1000">
            <el-table-column label="序号"
                             type="index"
                             align="center"
                             width="50" />
            <el-table-column v-for="item in searchJumin.header"
                             :key="item.columnName"
                             :prop="item.columnName"
                             :label="item.label"
                             align="center"
                             :show-overflow-tooltip="true"
                             :width="
                item.itemType === 'radio' ? computedWidth(item.label) : 180
              ">
              <template slot-scope="scope">
                <span>{{ handleFilterSpan(scope.row, item) }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right"
                             label="操作"
                             align="center">
              <template slot-scope="scope">
                <el-button class="f-fc"
                           @click="handleWatchSearchJumin(scope.$index)"
                           type="text"
                           size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div>
            <el-pagination @size-change="handleSizeChangeSearchJumin"
                           @current-change="handleCurrentChangeSearchJumin"
                           :current-page.sync="searchJumin.pageNo"
                           :page-sizes="[20, 50, 100, 200]"
                           :page-size="parseInt(searchJumin.pageSize)"
                           layout="sizes, prev, pager, next, total"
                           :total="searchJumin.total">
            </el-pagination>
          </div>
        </div>
      </div>

      <div class="m-tb"
           v-if="
          searchData.type == 'fangwu' &&
          searchData.keyword != '' &&
          searchStatus == 'ing'
        ">
        <div class="tb">
          <el-table class="m-table"
                    :data="searchFangwu.list"
                    v-loading="searchFangwu.loading"
                    border
                    :max-height="1000"
                    style="width: 100%">
            <el-table-column label="序号"
                             type="index"
                             align="center"
                             width="50" />
            <el-table-column prop="houseName"
                             label="房屋名称"
                             width="120">
            </el-table-column>
            <el-table-column prop="neighborHoodName"
                             label="所属小区"
                             width="160">
            </el-table-column>
            <el-table-column prop="buildingName"
                             label="所属楼栋">
            </el-table-column>
            <el-table-column prop="unitNum"
                             label="单元号"> </el-table-column>
            <el-table-column prop="doorName"
                             label="门牌号"> </el-table-column>
            <el-table-column prop="houseType"
                             label="类型"> </el-table-column>
            <el-table-column prop="purpose"
                             label="用途"> </el-table-column>
            <el-table-column prop="rentFlag"
                             label="房屋状态">
            </el-table-column>
            <el-table-column prop="ownerName"
                             label="房主姓名">
            </el-table-column>
            <el-table-column prop="ownerPhone"
                             label="房主电话"
                             width="110">
            </el-table-column>
            <el-table-column prop="ownerIdCard"
                             label="身份证"
                             width="170">
            </el-table-column>
            <el-table-column label="操作"
                             fixed="right"
                             header-align="center"
                             align="center"
                             class="operate">
              <template slot-scope="scope">
                <el-button class="f-fc"
                           type="text"
                           size="small"
                           @click="handleWatchSearchFangwu(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-pagination @size-change="handleSizeChangeSearchFangwu"
                           @current-change="handleCurrentChangeSearchFangwu"
                           :current-page.sync="searchFangwu.pageNo"
                           :page-sizes="[20, 50, 100, 200]"
                           :page-size="parseInt(searchFangwu.pageSize)"
                           layout="sizes, prev, pager, next"
                           :total="searchFangwu.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <people-more v-if="showedPeopleMoreInfo && currentPepeleId"
                 :userId="currentPepeleId"
                 :gridName="currentPepeleGridName"
                 @close="showedPeopleMoreInfo = false" />

    <!-- 修改弹出框 -->
    <el-dialog :visible.sync="showedFangwuInfo"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               title="房屋详情"
               width="900px"
               @closed="showedFangwuInfo = false">
      <fangwu-info ref="fangwu_info"
                   @dialogCancle="showedFangwuInfo = false"></fangwu-info>
    </el-dialog>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import { mapGetters } from "vuex";
import nextTick from "dai-js/tools/nextTick";
import peopleMore from "@/views/modules/shequ/cpts/people-more";
import fangwuInfo from "@/views/modules/shequ/cpts/fangwu-info";
import getQueryPara from "dai-js/modules/getQueryPara";

export default {
  components: {
    peopleMore,
    fangwuInfo,
  },

  props: {
    type: {
      type: String,
      default: "",
    },
    keyword: {
      type: String,
      default: "",
    },
  },

  data () {
    return {
      searchStatus: "ini", //ing over
      searchData: {
        type: "jumin",
        keyword: "",
      },

      typePlaceholder: {
        jumin: "请输入姓名或电话或身份证号",
        fangwu: "请输入“小区名称，楼号”，如：亿联小区，1号楼",
        xuqiu: "请输入需求人或需求内容或服务方",
      },

      searchJumin: {
        loading: false,
        header: [],
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        total: 1,
        list: [],
      },

      searchFangwu: {
        loading: false,
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        total: 1,
        list: [],
      },

      // 显示人员详情
      showedPeopleMoreInfo: false,

      currentPepeleId: "",
      currentPepeleGridName: "",

      // 显示人员详情
      showedFangwuInfo: false,
      showedXuqiuInfo: false,

      currentPage: "chaxun", //查询 预警,
    };
  },
  computed: {
    maxTableHeight () {
      // return this.clientHeight - 450;
      return 420;
    },
    ...mapGetters(["clientHeight"]),
  },
  watch: {
    "searchData.keyword": function (val) {
      if (val == "") {
        this.searchStatus = "ini";
      }
    },
  },
  mounted () {
    this.getApiData();

    this.firstSearch();
  },
  methods: {
    firstSearch () {
      this.searchData.keyword = getQueryPara("keyword");
      this.searchData.type = getQueryPara("type");
      this.handleClickSearchBtn();
    },

    computedWidth (label) {
      const wd = 20 * label.length;
      return wd > 80 ? wd : 80;
    },
    handleFilterSpan (row, item) {
      let _val = "";
      if (item.options && item.options.length > 0) {
        item.options.forEach((n) => {
          if (n.value === row[item.columnName]) _val = n.label;
        });
      }
      return _val || row[item.columnName];
    },

    handleClickSearchBtn () {
      const {
        searchData: { type, keyword },
      } = this;
      if (!keyword) return this.$message.error("请输入搜索条件");
      if (type == "jumin") {
        this.searchJumin.pageNo = 1;
        this.searchJumin.total = 0;
        this.getSearchJumin();
      } else if (type == "fangwu") {
        this.searchFangwu.pageNo = 1;
        this.searchFangwu.total = 0;
        this.getSearchFangwu();
      } else if (type == "xuqiu") {
        this.searchXuqiu.pageNo = 1;
        this.searchXuqiu.total = 0;
        this.getSearchXuqiu();
      }
      this.searchStatus = "ing";
    },

    handleSizeChangeSearchJumin (val) {
      console.log(`每页 ${val} 条`);
      this.searchJumin.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getSearchJumin();
    },
    handleCurrentChangeSearchJumin (val) {
      console.log(`当前页: ${val}`);
      this.searchJumin.pageNo = val;
      this.getSearchJumin();
    },
    async handleWatchSearchJumin (rowIndex) {
      let item = this.searchJumin.list[rowIndex];
      this.currentPepeleId = item.icResiUserId;
      this.currentPepeleGridName = item.GRID_ID;
      await nextTick();
      this.showedPeopleMoreInfo = true;
    },

    handleSizeChangeSearchFangwu (val) {
      console.log(`每页 ${val} 条`);
      this.searchFangwu.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getSearchFangwu();
    },
    handleCurrentChangeSearchFangwu (val) {
      console.log(`当前页: ${val}`);
      this.searchFangwu.pageNo = val;
      this.getSearchFangwu();
    },
    async handleWatchSearchFangwu (row) {
      this.showedFangwuInfo = true;
      await nextTick();
      this.$refs.fangwu_info.initForm("detail", row);
    },

    getApiData () {
      this.getSearchJuminHeader();
    },

    async getSearchJuminHeader () {
      const url = "/oper/customize/icform/tableheaders";
      const { data, code, msg } = await requestPost(url, {
        formCode: "resi_base_info",
      });
      if (code === 0) {
        console.log("居民表格header请求成功！！！！！！！！！！！！！！");
        this.searchJumin.header = data;
      } else {
        return this.$message.error("网络错误");
      }
    },

    async getSearchJumin () {
      const url = "/epmetuser/icresiuser/search";
      const {
        searchData: { keyword },
        searchJumin: { pageSize, pageNo },
      } = this;
      this.searchJumin.loading = true;
      const { data, code, msg } = await requestPost(url, {
        keyword,
        pageSize,
        pageNo,
      });
      this.searchJumin.loading = false;
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.searchJumin.total = data.total || 0;
        this.searchJumin.list = data.list
          ? data.list.map((item) => {
            return item;
          })
          : [];
      } else {
      }
    },

    async getSearchFangwu () {
      const url = "/gov/org/house/search";
      const {
        searchData: { keyword },
        searchFangwu: { pageSize, pageNo },
      } = this;
      this.searchFangwu.loading = true;
      const { data, code, msg } = await requestPost(url, {
        keyword,
        pageSize,
        pageNo,
      });
      this.searchFangwu.loading = false;
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.searchFangwu.total = data.total || 0;
        this.searchFangwu.list = data.list
          ? data.list.map((item) => {
            return item;
          })
          : [];
      } else {
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/modules/management/list-main.scss";

.m-box {
  position: relative;
  padding: 24px 16px;
  background: #ffffff;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
    0px 3px 6px -4px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

.m-search {
  box-sizing: border-box;
  padding: 40px 80px;
  margin-bottom: 16px;
  background-size: 100%;

  .title {
    height: 47px;
    font-size: 32px;
    font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    font-weight: 500;
    color: #0056d6;
    line-height: 47px;
    text-align: center;
  }

  .tabs {
    width: 692px;
    margin: 24px auto 0;
    display: flex;
    align-items: center;
    > div {
      position: relative;
      margin-right: 30px;
      width: 56px;
      height: 24px;
      font-size: 14px;
      line-height: 24px;
      border-radius: 2px;
      color: #0056d6;
      text-align: center;
      cursor: pointer;
      &.z-on {
        color: #ffffff;
        background: #0056d6;
        &::after {
          content: "";
          display: block;
          position: absolute;
          bottom: -10px;
          left: 0;
          right: 0;
          margin: 0 auto;
          width: 0;
          height: 0;
          border: 5px solid transparent;
          border-top: 5px solid #0056d6;
        }
      }
    }
  }

  .search {
    width: 692px;
    margin: 15px auto 0;
    display: flex;
    align-items: center;

    .search-input {
      position: relative;
      width: 560px;
      height: 48px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #0056d6;
      display: flex;

      .input {
        position: relative;
        width: calc(100% - 100px);

        input {
          margin-left: 20px;
          width: calc(100% - 10px);
          border: none;
          height: 44px;
          line-height: 44px;
          font-family: "思源宋体";
          font-size: 16px;
          font-weight: 400;
          color: #333;
        }

        .close-btn {
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto 0;
          width: 18px;
          height: 18px;
          background-color: #eee;
          border-radius: 100%;
          cursor: pointer;

          img {
            display: block;
            margin: 4px auto;
            width: 10px;
            height: 10px;
            opacity: 0.3;
          }
        }
      }

      .btn {
        margin: 7px 9px 0 auto;
        line-height: 32px;
        width: 66px;
        height: 32px;
        background: #0056d6;
        border-radius: 2px;
        text-align: center;
        font-size: 15px;
        font-family: Source Han Serif CN;
        font-weight: 500;
        color: #ffffff;
        color: #ffffff;
        cursor: pointer;
      }
    }

    .btn2 {
      margin-left: 35px;
      width: 100px;
      height: 39px;
      line-height: 39px;
      border-radius: 6px;
      text-align: center;
      font-size: 16px;
      font-family: Source Han Serif CN;
      font-weight: 500;
      color: #0056d6;
      cursor: pointer;
      img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
    }
  }
}
</style>