epmet-work-pc-chengyang/src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/index.vue

<template>
  <div>
    <Breadcrumb :list="breadcrumbList"/>
    <!--    <div class="main-title">
      <Title :text="`“${title}”画像匹配同类不满意人员`" noBg/>
    </div>-->
    <div class="table">
      <el-table :data="list"
                v-loading="loading"
                element-loading-text="加载中..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0,0,0,0.5)"
      >
        <el-table-column label="序号" type="index" width="80"/>

        <el-table-column prop="gridName" width="118" label="所属组织"/>

        <el-table-column prop="restName" label="姓名"></el-table-column>

        <el-table-column prop="mobile" label="电话">
          <template slot-scope="scope">
            {{ $sensitive(scope.row.mobile, 3, 7) }}
          </template>
        </el-table-column>

        <el-table-column prop="categoryNames" label="人员性质"/>

        <el-table-column prop="gender" label="性别">
          <template slot-scope="{ row }">
            {{ row.gender === "1" ? "男" : row.gender === "2" ? "女" : row.gender === "0" ? "未知" : "" }}
          </template>
        </el-table-column>

        <el-table-column prop="age" label="年龄"/>

        <el-table-column prop="cultureName" label="学历"/>

        <el-table-column prop="marriageName" label="婚姻"/>

        <el-table-column prop="monthIncomeLevel" label="月收入"/>

        <el-table-column label="详情" width="90" align="center">
          <template slot-scope="data">
            <el-button type="text" @click="handleView(data.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <Pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
  </div>
</template>

<script>
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb";
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
import Title from "@/views/dataBoard/satisfactionEval/components/Title";

export default {
  name: "dissatisfied",
  components: {Breadcrumb, Pagination, Title},
  data() {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      breadcrumbList: [
        {
          path: "/dataBoard/satisfactionEval/index",
          name: "满意度评价",
        },
        {
          path: "",
          name: "画像匹配同类不满意人员",
        },
      ],
      monthOptions: new Array(12).fill(0).map((_, index) => {
        return {label: index - 0 + 1 + "月", value: index - 0 + 1};
      }),
      list: [],
      title: "",
      loading: true
    };
  },
  activated() {
    this.title = this.$route.query.title;
    let searchParams = JSON.parse(this.$route.query.searchParams);
    console.log(searchParams);
    this.queryParams = {
      ...this.queryParams,
      ...searchParams,
    };
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true
      this.$http.get("/governance/satisfactionOverview/satisfactionCrowdList?" + this.$paramsFormat(this.queryParams)).then(({data: {data}}) => {
        this.list = data.list;
        this.total = data.total;
        this.loading = false
      });
    },
    handleView({restName, restId}) {
      this.$router.push("/dataBoard/satisfactionEval/dissatisfiedPersonnel/detail?name=" + restName + "&user_id=" + restId);
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/scss/dataBoard/table.scss";

.screen {
  margin: 25px 0 40px;

  .el-select,
  .el-input {
    width: 150px;
    margin-right: 4px;
    border: 1px solid #126ac5;
    border-radius: 2px;

    /deep/ .el-input__inner {
      background: none;
      border: none;
      color: #fff;
    }
  }

  .btn {
    margin-left: 46px;
    height: 32px;
  }
}

.main-title {
  margin: 25px 0 32px;
}

.table {
  margin-top: 32px;
}
</style>