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
            size="small"
            popper-class="selectPopClass"
            v-model="queryParams.month"
            type="month"
            value-format="yyyy-MM"
            placeholder="按月度">
        </el-date-picker>

        <el-select 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
            popper-class="selectPopClass"
            clearable
            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="queryParams.name" size="small" placeholder="按人员姓名"></el-input>
        <el-input v-model="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">
        <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 {
      queryParams: {
        month: this.$moment().format('YYYY-MM'),
        agencyId: "",
        satisfactionSource: "",
        satisfactionCategory: "",
        name: "",
        mobile: "",
        pageNo: 1,
        pageSize: 10,
      },
      id: {},
      total: 0,
      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'
      }]
    }
  },
  mounted() {
    this.getOrg()
  },
  methods: {
    getSatisfactionCategoryOptions() {
      this.queryParams.satisfactionCategory = ''
      if(!this.queryParams.satisfactionSource) {
        this.satisfactionCategoryOptions = []
        return
      }
      this.$http.get('/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource=' + this.queryParams.satisfactionSource).then(({data: {data}}) => {
        this.satisfactionCategoryOptions = data.map(item => {
          return {
            label: item.categoryName,
            value: item.categoryCode
          }
        })
      })

    },
    satisfactionSourceFormat(val) {
      let satisfactionSource = this.satisfactionSourceOptions.filter(item => item.value === val)[0]
      return satisfactionSource ? satisfactionSource : ''
    },
    search() {
      this.queryParams.pageNo = 1
      this.getList();
    },
    getList() {
      this.$http.get('/governance/satisfactionDetailList/getUnsatisfiedMattersList?' + this.$paramsFormat(this.queryParams)).then(({data: {data}}) => {
        this.total = data.total
        this.list = data.list
      })
    },
    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()
      })
    },
    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;
    }
  }

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

.orange {
  color: #FFB73C;
}

.blue {
  color: #64C1FF;
}

.green {
  color: #08EBAE;
}

.light {
  color: #3CF5FF;
}

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