dy-admin-manager/src/views/workBenchManager/requestProcessing.vue

<!--  -->
<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      课酬申诉
    </h2>
    <div class="m-core">
      <save-form
        :inline="true"
        @reset="onReSet"
        @submit="search"
        :model="searchForm"
      >
        <!-- <el-form-item>
          <el-input v-model.trim="searchForm.search" @keyup.enter.native="search" placeholder></el-input>
        </el-form-item>-->
        <el-form-item prop="organId">
          <el-select
            class="multiple"
            v-model.trim="searchForm.organId"
            filterable
            clearable
            placeholder="请选择分部"
          >
            <el-option
              v-for="(item, index) in organList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            placeholder="老师姓名"
            v-model="searchForm.teacherId"
            clearable
            filterable
          >
            <el-option
              v-for="(item, index) in teacherList"
              :label="item.realName"
              :value="item.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            placeholder="状态"
            v-model="searchForm.statusEnum"
            clearable
          >
            <el-option label="待处理" value="PENDING"></el-option>
            <el-option label="已完成" value="DONE"></el-option>
            <el-option label="已同意" value="AGREED"></el-option>
            <el-option label="已拒绝" value="DENIED"></el-option>
            <el-option label="已撤回" value="WITHDRAWN"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            :clearable="true"
            v-model="searchForm.salarySettlementMonth"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择申诉年月"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" native-type="seach">搜索</el-button>
          <el-button native-type="reset" type="primary">重置</el-button>
          <!-- export/isSettlementCourseSalarys -->
          <el-button
            @click="onExport"
            type="primary"
            v-permission="'export/teacherSalaryComplaints'"
            style="background: #14928a; border: 1px solid #14928a"
            >导出</el-button
          >
        </el-form-item>
      </save-form>
      <div class="tableWrap">
        <el-table
          style="width: 100%"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          :data="tableList"
        >
          <el-table-column
            align="center"
            prop="organName"
            label="分部"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="teacherId"
            label="老师编号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="realName"
            label="老师姓名"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="salarySettlementMonth"
            width="150"
            label="课酬归属时间"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="updateTime"
            width="150"
            label="申诉提交"
          >
            <template slot-scope="scope">{{
              scope.row.updateTime | dateForMinFormat
            }}</template>
          </el-table-column>
          <el-table-column align="center" prop="statusEnum" label="状态">
            <template slot-scope="scope">{{
              scope.row.statusEnum | statusEnum
            }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="operatorRealName"
            label="申诉处理者"
          ></el-table-column>
          <!-- <el-table-column align="center" prop="reason" width="400" label="备注"></el-table-column> -->
          <el-table-column
            align="center"
            prop="courseScheduleId"
            width="150"
            label="操作"
          >
            <template slot-scope="scope">
              <div>
                <el-button
                  type="text"
                  @click="lookDetail(scope.row)"
                  v-permission="'teacherSalaryComplaints/complaintsDispose'"
                  >操作</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          sync
          :total.sync="rules.total"
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog title="课酬申诉" :visible.sync="dialogVisible" width="400px">
      <div>
        <el-form ref="visibleForm" :model="visibleForm" class="visibleForm">
          <el-form-item
            label="申诉内容"
            :rules="[
              { required: true, message: '请填写申诉内容', trigger: 'blur' },
            ]"
            prop="reason"
          >
            <el-input
              type="textarea"
              :rows="5"
              :disabled="visibleForm.statusEnum != 'PENDING'"
              v-model.trim="visibleForm.reason"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="处理意见"
            :rules="[
              { required: true, message: '请填写处理意见', trigger: 'blur' },
            ]"
            prop="handingSuggestion"
          >
            <el-input
              type="textarea"
              :rows="5"
              :disabled="visibleForm.statusEnum != 'PENDING'"
              v-model.trim="visibleForm.handingSuggestion"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="处理结果"
            v-if="visibleForm.statusEnum != 'PENDING'"
          >
            {{ visibleForm.statusEnum | statusEnum }}
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" v-if="visibleForm.statusEnum == 'PENDING'">
        <el-button @click="subreset('DENIED')">拒绝</el-button>
        <el-button type="primary" @click="subreset('AGREED')">同意</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import qs from "qs";
import axios from "axios";
import { getToken } from "@/utils/auth";
import pagination from "@/components/Pagination/index";
import load from "@/utils/loading";
import { getTeacher, getEmployeeOrgan } from "@/api/buildTeam";
import {
  teacherSalaryComplaints,
  teacherSalaryComplaintsDetail,
  complaintsDispose,
} from "@/api/journal";
export default {
  components: { pagination },
  data() {
    return {
      searchForm: {
        search: null,
        salarySettlementMonth: null,
        statusEnum: null,
        teacherId: null,
        organId: null,
      },
      teacherList: [],
      tableList: [],
      organList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      dialogVisible: false,
      visibleForm: {
        reason: null,
        handingSuggestion: null,
        teacherId: null,
        salarySettlementMonth: null,
        statusEnum: null,
        id: null,
      },
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    getTeacher().then((res) => {
      if (res.code == 200) {
        this.teacherList = res.data;
      }
    });
    getEmployeeOrgan().then((res) => {
      if (res.code == 200) {
        this.organList = res.data;
      }
    });
    // 获取分部
    this.init();
  },
  methods: {
    init() {
      this.getList();
    },
    getList() {
      this.searchForm.page = this.rules.page;
      this.searchForm.rows = this.rules.limit;
      teacherSalaryComplaints(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.searchForm = {
        search: null,
        salarySettlementMonth: null,
        statusEnum: null,
        teacherId: null,
        organId: null,
      };
      this.search();
    },
    onExport() {
      let url = "/api-web/export/teacherSalaryComplaints";
      let obj = this.searchForm;
      const options = {
        method: "post",
        headers: {
          Authorization: getToken(),
        },
        url,
        data: qs.stringify(obj),
        responseType: "blob",
      };

      this.$confirm("您确定导出列表?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          load.startLoading();
          axios(options)
            .then((res) => {
              let blob = new Blob([res.data], {
                // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
                type: "application/vnd.ms-excel;charset=utf-8",
                // word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
              });
              let text = new Response(blob).text();
              text.then((res) => {
                // 判断是否报错
                if (res.indexOf("code") != -1) {
                  let json = JSON.parse(res);
                  this.$message.error(json.msg);
                } else {
                  let objectUrl = URL.createObjectURL(blob);
                  let link = document.createElement("a");
                  let nowTime = new Date();
                  let ymd =
                    nowTime.getFullYear() +
                    "" +
                    (nowTime.getMonth() + 1) +
                    "" +
                    nowTime.getDate() +
                    "" +
                    nowTime.getHours() +
                    "" +
                    nowTime.getMinutes();
                  let fname = ymd + "课酬申诉";
                  link.href = objectUrl;
                  link.setAttribute("download", fname);
                  document.body.appendChild(link);
                  link.click();
                }
              });

              load.endLoading();
            })
            .catch((error) => {
              this.$message.error("导出数据失败，请联系管理员");
              load.endLoading();
            });
        })
        .catch(() => {});
    },
    lookDetail(row) {
      teacherSalaryComplaintsDetail({ id: row.id }).then((res) => {
        if (res.code == 200) {
          this.visibleForm = {
            reason: res.data.reason,
            handingSuggestion: res.data.handingSuggestion,
            teacherId: res.data.teacherId,
            salarySettlementMonth: res.data.salarySettlementMonth,
            statusEnum: res.data.statusEnum,
            id: res.data.id,
          };

          this.dialogVisible = true;
        }
      });
    },
    subreset(str) {
      this.$refs["visibleForm"].validate((flag) => {
        if (flag) {
          let obj = {
            reason: this.visibleForm.reason,
            handingSuggestion: this.visibleForm.handingSuggestion,
            currentReduceSalary: this.visibleForm.reduceSalary,
            salarySettlementMonth: this.visibleForm.salarySettlementMonth,
            teacherId: this.visibleForm.teacherId,
            statusEnum: str,
            id: this.visibleForm.id,
          };
          complaintsDispose(obj).then((res) => {
            if (res.code == 200) {
              this.dialogVisible = false;
              this.$message.success("处理成功");
              this.getList();
            }
          });
        }
      });
    },
  },
  filters: {
    statusEnum(val) {
      let template = {
        PENDING: "待处理",
        DONE: "已完成",
        AGREED: "已同意",
        DENIED: "已拒绝",
        WITHDRAWN: "已撤回",
      };
      return template[val];
    },
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.visibleForm = {
          reason: null,
          handingSuggestion: null,
          teacherId: null,
          salarySettlementMonth: null,
          statusEnum: null,
          id: null,
        };
        this.$refs["visibleForm"].resetFields();
      }
    },
  },
};
</script>
<style lang='scss' scoped>
</style>