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

<template>
  <div>
    <Breadcrumb :list="breadcrumbList" />
    <div class="screen">
      <el-form :model="queryParams" inline>
        <el-date-picker v-if="!hideSearch" size="small" popper-class="selectPopClass" v-model="queryParams.month" type="month" value-format="yyyy-MM" placeholder="按月度"> </el-date-picker>

        <el-select v-if="!hideSearch" popper-class="selectPopClass" v-model="queryParams.agencyId" size="small" placeholder="按组织">
          <el-option v-for="item in orgOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>

        <el-select class="searchSelect" popper-class="selectPopClass" clearable collapse-tags multiple v-model="queryParams.satisfactionSource" size="small" placeholder="按不满意事项来源" @change="getSatisfactionCategoryOptions">
          <el-option v-for="item in satisfactionSourceOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>

        <el-select popper-class="selectPopClass" clearable v-model="queryParams.satisfactionCategory" size="small" placeholder="按不满意事项类型">
          <el-option v-for="item in satisfactionCategoryOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-input v-model.trim="queryParams.name" size="small" placeholder="按人员姓名"></el-input>
        <el-input v-model.trim="queryParams.mobile" size="small" placeholder="按人员电话"></el-input>
        <el-button size="small" class="btn" type="primary" @click="search">查询</el-button>
      </el-form>
    </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="month" label="月度" width="114" />

        <el-table-column prop="organizationName" width="118" label="所属社区" />

        <el-table-column prop="satisfactionSource" width="168" label="事项来源">
          <template slot-scope="{ row }">
            <span :style="{ color: satisfactionSourceFormat(row.satisfactionSource).color }">
              {{ satisfactionSourceFormat(row.satisfactionSource).label }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="satisfactionCategoryName" width="150" label="事项类型" />

        <el-table-column prop="reason" show-overflow-tooltip label="事项描述" />

        <el-table-column prop="createdTime" width="197" label="提交时间" />

        <el-table-column prop="name" width="119" label="姓名" />

        <el-table-column prop="mobile" width="153" label="电话" />

        <el-table-column prop="completeFlag" width="118px" label="是否完成">
          <template slot-scope="{ row }">
            <span :class="row.completeFlag === '是' ? 'light' : 'red'">
              {{ row.completeFlag }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="followUpStatus" width="118px" label="是否回访">
          <template slot-scope="{ row }">
            <span :class="row.followUpStatus === '是' ? 'light' : 'red'">
              {{ row.followUpStatus }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="dangerFlag" width="118px" label="消除风险">
          <template slot-scope="{ row }">
            <span :class="row.dangerFlag === '是' ? 'light' : 'red'">
              {{ row.dangerFlag }}
            </span>
          </template>
        </el-table-column>

        <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" />
    <DissatisfiedDetail ref="detail" :id="id" />
  </div>
</template>

<script>
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb";
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
import DissatisfiedDetail from "./detail.vue";

export default {
  name: "dissatisfied",
  components: { Breadcrumb, DissatisfiedDetail, Pagination },
  data() {
    return {
      hideSearch: false,
      queryParams: {
        month: this.$moment().format("YYYY-MM"),
        agencyId: "",
        satisfactionSource: [],
        satisfactionCategory: "",
        name: "",
        mobile: "",
        pageNo: 1,
        pageSize: 10,
      },
      id: {},
      total: 0,
      timeRange: [],
      breadcrumbList: [
        {
          path: "/dataBoard/satisfactionEval/index",
          name: "满意度评价",
        },
        {
          path: "",
          name: "不满意事项列表",
        },
      ],
      orgOptions: [],
      satisfactionCategoryOptions: [],
      list: [],
      satisfactionSourceOptions: [
        {
          value: "satisfaction_12345",
          label: "12345投诉",
          color: "#FFB73C",
        },
        {
          value: "satisfaction_province",
          label: "省满意度调查",
          color: "#64C1FF",
        },
        {
          value: "satisfaction_community",
          label: "社区满意度自查",
          color: "#08EBAE",
        },
      ],
      loading: true,
    };
  },
  mounted() {
    this.getOldPageParamsData();
    this.getOrg();
  },
  methods: {
    getOldPageParamsData() {
      const { id, timeType } = this.$route.params;
      let satisSourceArr = [];
      if (id == 1) {
        satisSourceArr = ["satisfaction_province", "satisfaction_community"];
      } else if (id == 2) {
        satisSourceArr = ["satisfaction_12345"];
      }
      this.queryParams.satisfactionSource = satisSourceArr;
      if (this.queryParams.satisfactionSource.length > 0) {
        this.getSatisfactionCategoryOptions();
      }
      if (timeType != 0) {
        this.hideSearch = true;
        this.timeRange = this.timeChange(timeType);
        console.log(this.timeRange);
      } else {
        this.hideSearch = false;
      }
    },

    getSatisfactionCategoryOptions() {
      this.queryParams.satisfactionCategory = "";
      if (!this.queryParams.satisfactionSource) {
        this.satisfactionCategoryOptions = [];
        return;
      }
      const satisfactionSource = this.queryParams.satisfactionSource.toString();
      this.$http.get("/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource=" + satisfactionSource).then(({ data: { data } }) => {
        this.satisfactionCategoryOptions = data.map((item) => {
          return {
            label: item.categoryName,
            value: item.categoryCode,
          };
        });
        this.queryParams.satisfactionCategory = this.$route.params.type == 0 ? "" : this.$route.params.type;
      });
    },
    satisfactionSourceFormat(val) {
      let satisfactionSource = this.satisfactionSourceOptions.filter((item) => item.value === val)[0];
      return satisfactionSource ? satisfactionSource : "";
    },
    search() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      this.$http.get("/governance/satisfactionDetailList/getUnsatisfiedMattersList?" + this.$paramsFormat(this.queryParams)).then(({ data: { data } }) => {
        this.total = data.total;
        this.list = data.list;
        this.loading = false;
      });
    },
    getOrg() {
      let params = {
        orgId: this.$store.state.chooseArea.chooseName.orgId,
        level: this.$store.state.chooseArea.chooseName.level,
      };

      this.$http.post(`/gov/org/agency/maporg`, params).then(async ({ data: { data } }) => {
        this.queryParams.agencyId = this.$store.state.chooseArea.chooseName.orgId;
        let parent = { value: data.id, label: data.name };
        this.orgOptions = [
          parent,
          ...data.children.map((item) => {
            return {
              value: item.id,
              label: item.name,
            };
          }),
        ];
        this.getList();
      });
    },
    timeChange(type) {
      let startTime = "",
        endTime = "";
      if (type == 1) {
        startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
      }
      if (type == 2) {
        startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD");
      }
      if (type == 3) {
        startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD");
      }
      if (type == 4) {
        startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD");
      }
      if (type == 5) {
        startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD");
      }

      if (type == 2) {
        endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD");
      } else {
        endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
      }
      return [startTime, endTime];
    },
    handleView(id) {
      console.log(id);
      this.id = id;
      this.$refs.detail.open(id);
    },
  },
};
</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;
    }
  }

  .searchSelect {
    width: 200px;
    /deep/ .el-select__tags {
      width: 200px !important;
      max-width: 200px !important;
    }
  }

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

.orange {
  color: #ffb73c;
}

.blue {
  color: #64c1ff;
}

.green {
  color: #08ebae;
}

.light {
  color: #3cf5ff;
}

.red {
  color: #f95619;
}
</style>