epmet-work-pc/src/views/dataBoard/satisfactionEval/Problem/tyry/detail.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="key"/>
        <el-table-column label="所属社区" prop="key"></el-table-column>
        <el-table-column label="事件分类" prop="key"></el-table-column>
        <el-table-column label="投诉内容" prop="key"></el-table-column>
        <el-table-column label="接收时间" prop="key"></el-table-column>
        <el-table-column label="联系人" prop="key"></el-table-column>
        <el-table-column label="联系电话" prop="key"></el-table-column>
        <el-table-column label="状态" prop="key"></el-table-column>
        <el-table-column align="center" label="详情">
          <template slot-scope="data">
            <el-button type="text" @click="handleView(data.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <EventDetails :id="rowId" :showDialog="showDialog" @close="showDialog = false"/>

    <Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total"
                @pagination="getList"/>
  </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 EventDetails from "@/views/dataBoard/overview/components/EventDetail.vue";

export default {
  name: "tyrydetail",
  components: {Breadcrumb, Pagination, Title, EventDetails},
  data() {
    return {
      showDialog: false,
      rowId: "",
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      orgOptions: [],
      breadcrumbList: [
        {
          path: "/dataBoard/satisfactionEval/index",
          name: "满意度评价",
        },
        {
          path: "/dataBoard/satisfactionEval/Problem/tyry",
          name: "同一人员重复投诉问题列表",
        },
        {
          path: "",
          name: "详情",
        },
      ],
      list: [{}, {}, {}],
      title: "",
      loading: false,
    };
  },
  activated() {
    this.title = this.$route.query.title;
    let searchParams = JSON.parse(this.$route.query.searchParams);
    this.queryParams = {
      ...this.queryParams,
      ...searchParams,
    };
    this.getList();
  },
  methods: {
    search() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      let params = {
        ...this.queryParams,
      }

      this.$http.get("?" + this.$paramsFormat(params)).then(({data: {data}}) => {
        this.total = data.total;
        this.list = data.list;
        this.loading = false;
      });
    },
    handleView({id}) {
      this.showDialog = true;
      this.rowId = id;
    },
  },
};
</script>

<style lang="scss" scoped>
@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 {
      color: #fff;
      border: none;
      background: none;
    }
  }

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

.main-title {
  margin: 25px 0 32px;
}

.table {
  margin-top: 32px;
}
</style>