epmet-work-pc/src/views/dataBoard/overview/dissatisfiedProblemNumber/selfInspect.vue

<template>
  <div>
    <Breadcrumb :list="breadcrumbList"/>
    <div class="table">
      <el-table v-loading="loading"
                :data="list"
                element-loading-background="rgba(0,0,0,0.5)"
                element-loading-spinner="el-icon-loading"
                element-loading-text="加载中..."
      >
        <el-table-column label="序号" type="index" width="80"/>
        <el-table-column label="月度" prop="periodStart" width="100"/>
        <el-table-column label="所属社区" prop="agencyName" width="200"/>
        <el-table-column :formatter="(row) => row.evaCulturalFacility === 'veryGood' ? '满意' : '不满意'" label="文化设施" prop="evaCulturalFacility"
                         width="150"/>
        <el-table-column :formatter="(row) => row.evaSportsFacility === 'veryGood' ? '满意' : '不满意'" label="体育设施" prop="evaSportsFacility"
                         width="150"/>
        <el-table-column :formatter="(row) => row.evaEcologicalEnv === 'veryGood' ? '满意' : '不满意'" label="生态环境" prop="evaEcologicalEnv"
                         width="150"/>
        <el-table-column :formatter="(row) => row.evaSocialSecurity === 'veryGood' ? '满意' : '不满意'" label="社会治安" prop="evaSocialSecurity"
                         width="150"/>
        <el-table-column :formatter="(row) => row.evaSocialAssistance === 'veryGood' ? '满意' : '不满意'" label="社会救助" prop="evaSocialAssistance"
                         width="150"/>
        <el-table-column :formatter="(row) => row.evaOldPeopleProvide === 'veryGood' ? '满意' : '不满意'" label="老有所养" prop="evaOldPeopleProvide"
                         width="150"/>
        <el-table-column :formatter="(row) => row.evaBasicEducation === 'veryGood' ? '满意' : '不满意'" label="基础教育" prop="evaBasicEducation"
                         width="150"/>
        <el-table-column :formatter="(row) => row.evaMedical === 'veryGood' ? '满意' : '不满意'" label="病有所医" prop="evaMedical"
                         width="150"/>
        <el-table-column label="提交时间" prop="createdTime" width="200"/>
        <el-table-column label="姓名" prop="reporterName" width="100"/>
        <el-table-column label="电话" min-width="120" prop="reporterMobile">
          <template slot-scope="scope">
            {{ $sensitive(scope.row.reporterMobile, 3, 7) }}
          </template>
        </el-table-column>
        <el-table-column label="是否回访" prop="followUpStatus" width="150" :formatter="(row) => row.followUpStatus === -1?'否':'是'"/>
        <el-table-column label="消除风险" prop="dangerFlag" width="150"/>
        <el-table-column label="操作" width="120">
          <template slot-scope="{ row }">
            <span class="view" @click="handleView(row)">查看</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

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


  </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";
import CallPhone from '@/views/dataBoard/cpts/CallPhone.vue'
import dissatisfieReasonDetail from "@/views/dataBoard/satisfactionEval/dissatisfieReason/detail.vue";

export default {
  name: "selfInspect",
  components: {Breadcrumb, Pagination, Title,  CallPhone,dissatisfieReasonDetail},
  data() {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        agencyId: this.$route.query.id
      },
      total: 0,
      breadcrumbList: [
        {
          path: "/dataBoard/overview/index",
          name: "书记看板",
        },
        {
          path: "",
          name: "社区自查不满意数",
        },
      ],
      list: [],
      rowId: "",
      loading: true
    };
  },
  activated() {
    this.queryParams.reportUserId = this.$route.query.reportUserId;
    this.queryParams.pageNo = 1;
    this.getList();
  },
  methods: {
    search() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    getList() {
      this.loading = true
      this.$http.get("/governance/satisfaction/communitySelfInsp/inspResult/list?" + this.$paramsFormat(this.queryParams)).then(({data: {data}}) => {
        this.list = data.list;
        this.total = data.total;
        this.loading = false
      });
    },
    handleView({id}) {
      this.id = id;
      this.$refs.detail.open(id);
    },
  },
};
</script>

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

.table {
  margin-top: 40px;
}

.handle {
  font-size: 14px;
  margin-left: 10px;
  color: #9A69EC;
  cursor: pointer;
}

.view {
  font-size: 14px;
  margin-left: 10px;
  color: #007FF1;
  cursor: pointer;
}
</style>