ShibeiWorkPlatform_Frontend/src/views/modules/visual/basicinfo/peopleSearch.vue

<template>
  <div>
    <div>
      <div class="div_search_list">
        <el-input size="mini"
                  WarningColor='warning'
                  placeholder="请输入姓名"
                  v-model="searchName">
          <i slot="prefix"
             class="icon">
            <img src="../../../../assets/img/modules/visual/sousuo.png"
                 alt />
          </i>
        </el-input>

        <div class="btn"
             @click="loadList">搜索</div>

      </div>

      <div class="list_box">
        <div class="info_tip">
          <img src="../../../../assets/img/shuju/title-tip.png"
               alt />
          <div class="tip_title">查询列表</div>
        </div>
        <div class="warning-table">
          <div class="table">
            <div class="table-header">
              <div class="td td1">序号</div>
              <div class="td td2">姓名</div>
              <div class="td td3">所属网格</div>
              <div class="td td3">所属小区</div>
              <div class="td td3">所属楼栋</div>
              <div class="td td2">操作</div>

            </div>
            <div class="table-body">
              <div class="table-body-tr"
                   v-for="(item,index) in tableData"
                   :key='index'>
                <div class="td td1">{{item.sort}} </div>
                <div class="td td2">{{item.name}} </div>
                <div class="td td3">{{item.gridName}} </div>
                <div class="td td3">{{item.neighborHoodName}} </div>
                <div class="td td3">{{item.buildNum}} </div>
                <div @click="handelToPeople(index)"
                     class="td td2 btn_detail">{{'查看'}} </div>

              </div>
            </div>
          </div>
        </div>
        <div class="pagination">
          <el-pagination background
                         layout="prev, pager, next"
                         :current-page="pageNo"
                         :page-size="pageSize"
                         :total="total"
                         @current-change="pageCurrentChangeHandle">
          </el-pagination>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import People from "./people";

export default {
  name: "people-list",
  components: {
    People
  },
  data () {
    return {
      headerList: [],
      tableData: [],
      searchName: '',
      pageSize: 4,
      pageNo: 1,
      total: 0
    };
  },
  methods: {
    handleSearch () {

    },

    loadByName (searchName) {
      this.searchName = searchName
      // if (this.searchName) {
      this.loadList()
      // }

    },
    reset () {
      this.searchName = ''
      this.tableData = []
    },
    async loadList () {
      if (this.searchName) {
        const url = "/epmetuser/icresiuser/searchbyname"
        // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/searchbyname"
        let params = {
          name: this.searchName,
          pageSize: this.pageSize,
          pageNo: this.pageNo
        }

        const { data, code, msg } = await requestPost(url, params)

        if (code === 0) {
          this.total = data.total
          this.tableData = data.list
        } else {
          this.$message.error(msg)
        }
      } else {
        this.$message.info('请输入姓名')
      }
    },

    //点击查看
    handelToPeople (index) {
      this.$emit('toSubAgency', 'people', this.tableData[index].userId, this.searchName)
    },

    pageCurrentChangeHandle (val) {
      this.pageNo = val
      this.loadList()
    },
  },
  destroyed () {
    console.log("我已经离开了！");

  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/searchPerson.scss"
  scoped
></style>

<style lang=scss>
.div_search_list {
  .el-input__inner[WarningColor="warning"] {
    border-radius: 8px 0 0 8px;
    height: 53px;
    background-color: #01106800;
    border: 2px solid #0082fb;
    padding-left: 70px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>