item-management-web/src/views/administration/assets/complainantCheckList.vue

<template>
  <div class="app-container">
    <div class="title-container">
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
    </div>
    <y-page-list-layout :page-list="pageData" :page-para="listQuery" :get-page-list="getList">
      <template slot="left">
        <el-input v-model="listQuery.orderId" placeholder="项目编号" clearable style="width: 200px;float: left;"></el-input>
        <el-select v-model="listQuery.complainantId" filterable placeholder="投诉人（可搜索）" style=" width: 180px;margin-left: 10px;float: left;">
          <el-option v-for="(u, id) in allUsers" :label="u.name" :value="u.id"></el-option>
        </el-select>
        <el-select v-model="listQuery.respondentId" filterable placeholder="项目负责人（可搜索）" style=" width: 180px;margin-left: 10px;float: left;">
          <el-option v-for="(u, id) in allUsers" :label="u.name" :value="u.id"></el-option>
        </el-select>
        <el-select v-model="listQuery.complainantType" placeholder="投诉类型" style=" width: 180px;margin-left: 10px;float: left;">
          <el-option label="内部投诉" value="INTERNAL"></el-option>
          <el-option label="外部投诉" value="EXTERNAL"></el-option>
        </el-select>
        <el-select v-model="listQuery.state" placeholder="投诉状态" style=" width: 180px;margin-left: 10px;float: left;">
          <el-option label="待确认" value="PENDING"></el-option>
          <el-option label="已确认" value="CONFIRM"></el-option>
          <el-option label="撤销" value="CANCEL"></el-option>
        </el-select>
        <el-button class="filter-item" style="margin-left:20px;float: left;" type="primary" @click="searchList()" round>搜索</el-button>
        <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置</el-button>
      </template>
      <parentTable :data="pageData.records" slot="table" style="width: 100%;">
        <el-table-column align="center" prop="complainantType" label="投诉类型" min-width="12.5%">
          <template slot-scope="{row}">
            <span v-if="row.complainantType == 'INTERNAL'">内部投诉</span>
            <span v-if="row.complainantType == 'EXTERNAL'">外部投诉</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="complainantName" label="投诉人" min-width="12.5%"></el-table-column>
        <el-table-column align="center" prop="respondentName" label="项目负责人" min-width="12.5%"></el-table-column>
        <el-table-column align="center" prop="orderId" label="项目编号" min-width="12.5%"></el-table-column>
        <el-table-column align="center" prop="reason" label="投诉原因" min-width="25%"></el-table-column>
        <el-table-column align="center" prop="state" label="投诉状态" min-width="12.5%">
          <template slot-scope="{row}">
            <span v-if="row.state == 'PENDING'" style="color:#E6A23C">待确认</span>
            <span v-if="row.state == 'CONFIRM'" style="color:red">已确认</span>
            <span v-if="row.state == 'CANCEL'" style="color:gray">撤销</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created" label="投诉时间" min-width="15%"></el-table-column>
        <el-table-column align="center" prop="checkerName" label="审核人" min-width="12.5%">
          <template slot-scope="{row}">
            <span>{{ row.checkerName ? row.checkerName : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="checkDate" label="审核时间" min-width="12.5%">
          <template slot-scope="{row}">
            <span>{{ row.checkDate ? row.checkDate : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100" fixed="right">
          <template slot-scope="{row}">
            <el-button type="text" @click="cancel(row.id)" :disabled="row.state !== 'PENDING'">撤销</el-button>
            <el-button type="text" @click="confirm(row.id)" :disabled="row.state !== 'PENDING'">确认</el-button>
          </template>
        </el-table-column>
      </parentTable>
    </y-page-list-layout>
  </div>
</template>
<script>
import YPageListLayout from '@/components/YPageListLayout';
import Breadcrumb from '@/components/Breadcrumb';

export default {
  name: 'complainantAssetsCheckList',
  components: {
    Breadcrumb,
    YPageListLayout,
  },
  filters: {},
  data() {
    return {
      allUsers: [],
      pageData: { records: [] },
      listQuery: {
        page: 1,
        size: 20,
        descs: 'id',
      },
    };
  },
  created() {
    this.getAllUser();
    this.getList();
  },
  methods: {
    // 获取所有用户下拉列表
    getAllUser() {
      this.$api.user.simpleAll().then((res) => {
        if (res.code === 200) {
          this.allUsers = res.data;
        }
      });
    },
    resetSearch() {
      this.$router.push({ query: {} });
      this.orderDate = '';
      this.listQuery = {
        current: 1,
        size: 20,
      };
      this.getList();
    },
    searchList() {
      this.listQuery.current = 1;
      this.getList();
    },
    getList() {
      this.$api.assetsComplaint.page(this.listQuery).then((res) => {
        if (res.code === 200) {
          this.pageData = res.data;
        }
      });
    },
    // 撤销投诉
    cancel(id) {
      this.$confirm('确认撤销投诉?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$api.assetsComplaint.cancelComplaint(id).then((res) => {
          if (res.code === 200 && res.data) {
            this.$notify({
              title: '成功',
              message: '撤销成功！',
              type: 'success',
              duration: 3000,
            });
            this.getList();
          }
        });
      });
    },
    // 确认投诉
    confirm(id) {
      this.$confirm('确认投诉属实?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$api.assetsComplaint.confirmComplaint(id).then((res) => {
          if (res.code === 200 && res.data) {
            this.$notify({
              title: '成功',
              message: '确认成功！',
              type: 'success',
              duration: 3000,
            });
            this.getList();
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.doWarehouseClass {
  border-radius: 10px;
}

.real-amount {
  /deep/ .el-form-item__label {
    color: red;
    font-weight: bold;
  }
}
</style>