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="date-current-weiyi"
          :append-to-body="false"
          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: "dissatisfiedPage",
  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);
        this.queryParams.startTime = this.timeRange[0];
        this.queryParams.endTime = this.timeRange[1];
        this.queryParams.month = "";
      } 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) {
      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;
}

::v-deep .date-current-weiyi {
  background: rgba(3, 19, 51, 0.9);
  border-color: #006cff;
  box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);

  .el-date-picker__header-label {
    color: #ffffff;
  }

  .el-picker-panel__icon-btn {
    color: #ffffff;
  }

  .el-month-table {
    td {
      .cell {
        color: #ffffff;
      }
    }
  }

  .el-month-table td.current:not(.disabled) .cell {
    color: #fff;
    background-color: #409eff;
  }

  .el-month-table td.today:not(.disabled) .cell {
    color: #0056d6;
  }

  .el-date-picker__header--bordered {
    border-bottom: solid 1px #006cff;
  }
}
</style>