epmet-work-pc/src/views/dataBoard/overview/components/MapDialog/Njjwtqk.vue

<template>
  <div>
    <div class="table">
      <el-table v-loading="loading" :data="list" :height="catVal === 1|| catVal === 2?'250px':'600px'"
                element-loading-background="rgba(0, 0, 0, 0.3)">
        <el-table-column label="所属网格" prop="gridName" width="120"/>
        <el-table-column label="接收时间" prop="happenTime" width="180"/>
        <el-table-column label="问题描述" prop="eventContent" width="120"/>
        <!--        <el-table-column label="语音" prop="key" width="120"/>-->
        <el-table-column label="办结时限" prop="timeLimit" width="120"/>
        <el-table-column label="联系人" prop="name" width="120"/>
        <el-table-column label="联系电话" prop="mobile" width="120"/>
        <el-table-column label="状态" prop="statusName" width="120"/>
        <el-table-column label="操作" prop="op" width="250">
          <template slot-scope="scope">
            <CallPhone text="拨打电话"/>
            <span class="handle" @click="handleDispatch(scope.row)">处理</span>
            <span class="view" @click="handleViews(scope.row)">查看</span>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
          v-show="total > 0"
          :limit.sync="queryParams.pageSize"
          :page.sync="queryParams.pageNo"
          :total="total"
          @pagination="getList"
      />
    </div>
    <EventDetails
        :id="rowId"
        :currentLevelData="currentLevelData"
        :showDialog="showDialog"
        @close="showDialog = false"
        @ok="getList"
    />
    <EventDispatchOrder v-if="isEventDispatchOrder" ref="EventDispatchOrder" @close="isEventDispatchOrder = false"
                        @ok="handleSure"/>
  </div>
</template>

<script>
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
import CallPhone from "@/views/dataBoard/cpts/CallPhone";
import EventDetails from "@/views/dataBoard/overview/components/EventDetail.vue";
import EventDispatchOrder from "@/views/dataBoard/overview/components/EventDispatchOrder.vue";

export default {
  name: "Njjwtqk",
  components: {Pagination, CallPhone, EventDetails, EventDispatchOrder},
  props: {
    catVal: {
      type: [String, Number],
      default: ""
    },
    currentLevelData: {
      type: Object,
      default: () => {
      },
    }
  },
  data() {
    return {
      showDialog: false,
      rowId: "",
      total: 10,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      list: [],
      loading: false,
      isEventDispatchOrder: false
    }
  },
  watch: {
    catVal() {
      this.getList()
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.$http.post('/governance/icEventOld/list', {type: this.catVal}).then(({data: {data}}) => {
        this.list = data.list;
        this.total = data.total;
      })
    },
    handleSure() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    handleDispatch({icEventId}) {
      this.$http
          .post("/governance/icEvent/detail", {icEventId: icEventId})
          .then((res) => {
            const {code, data, msg} = res.data;
            if (code === 0) {
              this.loading = false;
              this.isEventDispatchOrder = true
              this.$nextTick(() => {
                this.$refs.EventDispatchOrder.open(data || {});
              })
            } else {
              this.loading = false;
              this.$message.error(msg);
            }
          });
    },
    handleViews({icEventId}) {
      this.showDialog = true;
      this.rowId = icEventId;
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/dataBoard/table2.scss";

.table {
  margin-top: 20px;
}

.handle {
  font-size: 14px;
  margin-left: 10px;
  color: #9A69EC;
}

.view {
  font-size: 14px;
  margin-left: 10px;
  color: #007FF1;
}
</style>