考核结果查看详情

xieb

2025-01-21 d13cebe7fbadd396e91a989af331df8a8e7b40f8

 src/views/evaluate/evaluateTask.vue

@@ -1,229 +1,415 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               v-model:search="search"
               v-model:page="page"
               v-model="form"
               :table-loading="loading"
               :data="data"
               :permission="permissionList"
               :before-open="beforeOpen"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
    <avue-tabs :option="taskTypeList" @change="tabChange"></avue-tabs>
    <avue-crud :option="option" v-model:search="search" v-model:page="page" v-model="form" :table-loading="loading"
      :data="data" :permission="permissionList" :before-open="beforeOpen" ref="crud" @row-update="rowUpdate"
      @row-save="rowSave" @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset"
      @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
      @refresh-change="refreshChange" @on-load="onLoad">
      <template #candidateState="{ row }">
        <div v-if="row.candidateState !== 1">{{ setStatus(row.candidateState) }}</div>
        <el-button v-else text type="success" icon="el-icon-edit" @click="updateState(row, 'candidateState')">{{
          setStatus(row.candidateState) }}</el-button>
      </template>
      <template #evaluateState="{ row }">
        <div v-if="row.evaluateState !== 1">{{ setStatus(row.evaluateState) }}</div>
        <el-button v-else :disabled="row.evaluateState !== 1" text type="success" icon="el-icon-edit"
          @click="updateState(row, 'evaluateState')">{{
            setStatus(row.evaluateState) }}</el-button>
      </template>
      <template #candidateCutoffTimeEnd="{ row }">
        <div class="time-box">
          {{ row.candidateCutoffTimeStart }}
          <div>-</div>
          {{ row.candidateCutoffTimeEnd }}
        </div>
      </template>
      <template #evaluateCutoffTimeEnd="{ row }">
        <div class="time-box">
          {{ row.evaluateCutoffTimeStart }}
          <div>-</div>
          {{ row.evaluateCutoffTimeEnd }}
        </div>
      </template>
      <template #menu-left>
        <el-button type="danger"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.evaluateTask_delete"
                   @click="handleDelete">删 除
        </el-button>
        <el-button type="warning"
                   plain
                   icon="el-icon-download"
                   @click="handleExport">导 出
        </el-button>
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增评优任务</el-button>
        <el-button type="danger" icon="el-icon-delete" plain v-if="permission.evaluateTask_delete"
          @click="handleDelete">删除</el-button>
        <!-- <el-button type="warning" plain icon="el-icon-download" @click="handleExport">导出</el-button> -->
      </template>
      <template #menu="{ size, row, index }">
        <el-button type="primary" text plain icon="el-icon-view" @click="viewHandlerClick(row)">结果详情</el-button>
        <el-button type="primary" text plain icon="el-icon-view"
          @click="viewVotingDetailsHandlerClick(row)">投票详情</el-button>
        <el-button type="primary" text plain icon="el-icon-position"
          v-if="!row.type && row.candidateState === 2 && !row.evaluateState" @click="taskPublicDialog(row)">发布</el-button>
        <el-button type="success" v-if="(row.candidateState === 0 && !row.type) || (row.evaluateState === 0 && row.type)"
          text plain icon="el-icon-edit" @click="editTaskDialog(row)">编辑</el-button>
        <el-button type="danger" text plain icon="el-icon-delete" @click="rowDel(row)">删除</el-button>
      </template>
    </avue-crud>
    <!-- 新增个人评优任务弹窗 -->
    <addIndividualTask :params="addIndividualParams" @refreshTable="this.onLoad" />
    <addSectionTask :params="addSectionParams" @refreshTable="this.onLoad" />
    <!-- 编辑任务 -->
    <editIndividualTask :params="editIndividualTaskParams" @refreshTable="this.onLoad" />
    <editSectionTask :params="editSectionTaskParams" @refreshTable="this.onLoad" />
    <!-- 发布 -->
    <individualTaskPublic :params="taskPublicParams" @refreshTable="this.onLoad" />
    <!-- 预览 -->
    <viewEvaluate :params="viewEvaluateParams" />
    <!-- 投票详情 -->
    <votingDetails :params="votingParams" />
  </basic-container>
</template>

<script>
  import {getList, getDetail, add, update, remove} from "@/api/evaluate/evaluateTask";
  import option from "@/option/evaluate/evaluateTask";
  import {mapGetters} from "vuex";
  import {exportBlob} from "@/api/common";
  import {getToken} from '@/utils/auth';
  import {downloadXls} from "@/utils/util";
  import {dateNow} from "@/utils/date";
  import NProgress from 'nprogress';
  import 'nprogress/nprogress.css';
import { getList, getDetail, add, update, remove } from '@/api/evaluate/evaluateTask';
import { option, sectionOption } from '@/option/evaluate/evaluateTask';
import { mapGetters } from 'vuex';
import { exportBlob } from '@/api/common';
import { getToken } from '@/utils/auth';
import { downloadXls } from '@/utils/util';
import { dateNow } from '@/utils/date';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import addIndividualTask from './components/addIndividualTask.vue';
import addSectionTask from './components/addSectionTask.vue';
import viewEvaluate from './components/viewEvaluateDetail.vue';
import individualTaskPublic from './components/IndividualTaskPublic.vue';
import votingDetails from './components/votingDetails.vue';
import editIndividualTask from './components/editIndividualTask.vue'
import editSectionTask from './components/editSectionTask.vue'

  export default {
    data() {
      return {
        form: {},
        query: {},
        search: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: option,
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.validData(this.permission.evaluateTask_add, false),
          viewBtn: this.validData(this.permission.evaluateTask_view, false),
          delBtn: this.validData(this.permission.evaluateTask_delete, false),
          editBtn: this.validData(this.permission.evaluateTask_edit, false)
        };
export default {
  components: {
    addIndividualTask,
    addSectionTask,
    individualTaskPublic,
    viewEvaluate,
    votingDetails,
    editIndividualTask,
    editSectionTask
  },
  data() {
    return {
      rowData: {},
      form: {},
      query: {},
      search: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      rowSave(row, done, loading) {
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
      selectionList: [],
      option: option,
      data: [],
      addIndividualParams: {},
      addSectionParams: {},
      viewParams: {},
      // 考核结果参数
      defaultTaskType: 0,
      taskTypeList: {
        column: [
          {
            label: '个人评优',
            prop: 0,
          },
          {
            label: '部门评优',
            prop: 1,
          },
        ],
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          console.log(error);
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      handleExport() {
        let downloadUrl = `/evaluateTask/evaluateTask/export-evaluateTask?${this.website.tokenHeader}=${getToken()}`;
        const {
            taskName,
        } = this.query;
        let values = {
            taskName_like: taskName,
        };
        this.$confirm("是否导出数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          NProgress.start();
          exportBlob(downloadUrl, values).then(res => {
            downloadXls(res.data, `评优任务表${dateNow()}.xlsx`);
            NProgress.done();
          })
        });
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      searchReset() {
      // 信息预览弹窗
      viewEvaluateParams: {},
      taskPublicParams: {},
      votingParams: {},
      // 编辑
      editIndividualTaskParams: {},
      editSectionTaskParams: {},
    };
  },
  watch: {
    defaultTaskType: {
      handler(n) {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.query['type'] = n;
        let params = {
          type: n,
        };
        // 更改option
        !n ? (this.option = option) : (this.option = sectionOption)
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        this.loading = true;
      immediate: true,
    },
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.validData(this.permission.evaluateTask_add, false),
        viewBtn: this.validData(this.permission.evaluateTask_view, false),
        delBtn: this.validData(this.permission.evaluateTask_delete, false),
        editBtn: this.validData(this.permission.evaluateTask_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
    },
  },
  methods: {
    handleAdd() {
      if (!this.defaultTaskType) {
        this.addIndividualParams = {
          visible: true,
          title: '添加个人评优任务'
        }
        return
      }
      this.addSectionParams = {
        visible: true,
        title: '添加部门评优任务'
      }
    },
    rowSave(row, done, loading) {
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          done();
        },
        error => {
          loading();
          window.console.log(error);
        }
      );
    },
    viewHandlerClick(row) {
      this.viewEvaluateParams = {
        visible: true,
        data: row
      }
    },
    viewVotingDetailsHandlerClick(row) {
      this.votingParams = {
        visible: true,
        data: row
      }
    },
    editTaskDialog(row) {
      if (!this.defaultTaskType) {
        this.editIndividualTaskParams = {
          visible: true,
          data: row
        }
      } else {
        this.editSectionTaskParams = {
          visible: true,
          data: row
        }
      }

        const {
          taskName,
        } = this.query;

        let values = {
          taskName_like: taskName,
        };

        getList(page.currentPage, page.pageSize, values).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
    },
    taskPublicDialog(row) {
      this.taskPublicParams = {
        visible: true,
        data: row
      }
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          done();
        },
        error => {
          loading();
          console.log(error);
        }
      );
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          this.$refs.crud.toggleSelection();
        });
    },
    handleExport() {
      let downloadUrl = `/evaluateTask/evaluateTask/export-evaluateTask?${this.website.tokenHeader
        }=${getToken()}`;
      const { taskName } = this.query;
      let values = {
        taskName_like: taskName,
      };
      this.$confirm('是否导出数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        NProgress.start();
        exportBlob(downloadUrl, values).then(res => {
          downloadXls(res.data, `评优任务表${dateNow()}.xlsx`);
          NProgress.done();
        });
      });
    },
    beforeOpen(done, type) {
      if (['edit', 'view'].includes(type)) {
        getDetail(this.form.id).then(res => {
          if (type === 'view') {
            const candidates = [];
            res.data.data.candidateNum.forEach(item => {
              const users = []
              item.users.forEach(item => users.push(item.name))
              candidates.push(`${item.deptName}（${item.val || 0}人）: ${users.join('、')}`);
            })
            this.form.candidateNum = candidates.join('\n');
          }
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page, { type: this.defaultTaskType });
    },
    searchChange(params, done) {
      this.query = {
        ...params,
        type: this.defaultTaskType,
      };
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;

      const { taskName } = this.query;

      let values = {
        ...this.query,
        ...params
      };
      getList(page.currentPage, page.pageSize, values).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    tabChange(value) {
      this.defaultTaskType = value.prop;
    },
    setStatus(value) {
      const status = {
        0: '未开始',
        1: '进行中',
        2: '已完成'
      }
      return status[value]
    },
    updateState(row, name) {
      const text = (name === 'candidateState' ? '是否提前结束第一轮评优?' : '是否提前结束评优任务?')
      this.$confirm(text, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(res => {
        const { id } = row
        let params = {
          id
        }
        name === 'candidateState' ? Object.assign(params, { candidateState: 2 }) : Object.assign(params, { evaluateState: 2 })
        update(params).then(res => {
          if (res.data.code !== 200) return this.$message.error(res.data.msg)
            this.$message({
              type: 'success',
              message: '操作成功!',
            });
            this.onLoad(this.page);
        })
      })
    }
  };
  },
  provide() {
    return {
      type: () => this.defaultTaskType
    }
  }
};
</script>

<style>
<style lang="scss" scoped>
.time-box {
  display: inline-block;
  text-align: center;
}
</style>