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-select v-model="queryParams.month" size="small" placeholder="按月度">
          <el-option
              v-for="item in monthOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>

        <el-select v-model="queryParams.org" size="small" placeholder="按组织">
          <el-option
              v-for="item in monthOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>

        <el-select v-model="queryParams.matterSource" size="small" placeholder="按不满意事项来源">
          <el-option
              v-for="item in monthOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>

        <el-select v-model="queryParams.matterType" size="small" placeholder="按不满意事项类型">
          <el-option
              v-for="item in monthOptions"
              :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.tel" size="small" placeholder="按人员电话"></el-input>
        <el-button size="small" class="btn" type="primary">查询</el-button>
      </el-form>
    </div>

    <div class="table">
      <el-table :data="list">
        <el-table-column
            label="序号"
            type="index"
            width="80"/>

        <el-table-column
            prop="name"
            label="月度"
            width="114"/>

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

        <el-table-column
            prop="address"
            width="168"
            label="事项来源">
          <template slot-scope="data"></template>
        </el-table-column>

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

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

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

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

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

        <el-table-column
            prop="address"
            width="118px"
            label="是否完成">
          <template slot-scope="data"></template>
        </el-table-column>

        <el-table-column
            prop="address"
            width="118px"
            label="是否回访">
          <template slot-scope="data"></template>
        </el-table-column>

        <el-table-column
            prop="address"
            width="118px"
            label="消除风险">
          <template slot-scope="data"></template>
        </el-table-column>

        <el-table-column label="操作" width="90" align="center">
          <template slot-scope="data">
            <el-button type="text" @click="handleView">查看</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <Pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
    />
    <DissatisfiedDetail ref="detail"/>
  </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: '',
        org: '',
        matterSource: '',
        matterType: '',
        name: '',
        tel: '',
        pageNum: 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: [{}, {}, {}]
    }
  },
  methods: {
    getList() {

    },
    handleView() {
      this.$refs.detail.open()
    }
  }
}
</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;
  }
}
</style>