考核结果查看详情

xieb

2025-01-21 d13cebe7fbadd396e91a989af331df8a8e7b40f8

 src/views/evaluate/evaluateResult.vue

@@ -1,256 +1,214 @@
<template>

  <basic-container>

    <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 #referrer="{row}">

        <template v-if="row.voteNum !== 0">

          <referrerPopover :params="row">

            <template #default>

              <el-button type="success" text icon="el-icon-pointer">推荐人预览</el-button>

            </template>

          </referrerPopover>

    <el-container class="container">

      <el-aside width="300px">

        <el-input v-model="taskWord" class="search-box" clearable placeholder="请输入任务名称" @change="searchChange">

          <template #append>

            <el-button icon="el-icon-search"></el-button>

          </template>

        </el-input>

        <ul class="aside-box">

          <template v-if="this.taskList.length > 0">

            <li v-for="(item, index) in this.taskList" :key="item.id" :class="{ 'is-active': taskActive === index }"

              @click="handleActive(index)">

              <div class="text">

                <el-icon size="20px">

                  <Document />

                </el-icon>

                {{ item.taskName }}

              </div>

            </li>

          </template>

          <template v-else>

            <el-empty description="暂无任务" />

          </template>

        </ul>

        <div class="pagination">

          <el-pagination v-model:current-page="page.current" v-model:page-size="page.size" background :pager-count="5"

            layout="prev, pager, next" :total="page.total" @current-change="handleCurrentChange" small

            hide-on-single-page/>

        </div>

      </el-aside>

      <el-main>

        <template v-if="this.taskList.length > 0">

          <el-collapse v-model="activeNames">

            <el-collapse-item title="当前任务评优奖项候选人详情" name="1" v-if="!defaultTaskType">

              <evaluateTypeResult :params="{ data: taskList[taskActive] }" @initAsideData="initData" />

            </el-collapse-item>

            <el-collapse-item name="2" v-if="!defaultTaskType">

              <template #title>

                第一轮候选结果

                <el-tag 
                    style="margin-left: 10px;" 
                    :type="status[taskList[taskActive].candidateState].type">

                    当前状态：{{ status[taskList[taskActive].candidateState].text }}

                </el-tag>

              </template>

              <firstRoundResult :params="{ data: taskList[taskActive] }" />

            </el-collapse-item>

            <el-collapse-item name="3">

              <template #title>

                最终评优结果

                <el-tag

                    style="margin-left: 10px;" 
                    :type="status[taskList[taskActive].evaluateState].type">

                    当前状态：{{ status[taskList[taskActive].evaluateState].text }}

                </el-tag>

              </template>

              <secondRoundResult :params="{ data: taskList[taskActive] }" />

            </el-collapse-item>

          </el-collapse>

        </template>

        <template v-else>

            <el-button type="warning" text icon="el-icon-circle-close">暂无推荐人</el-button>

          <el-empty description="暂无任务信息" />

        </template>

      </template>

    </avue-crud>

      </el-main>

    </el-container>

  </basic-container>

</template>



<script>

import { getList, getDetail, add, update, remove } from "@/api/evaluate/evaluateResult";

import { option, personColumn, sectionColumn } from "@/option/evaluate/evaluateResult";

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 referrerPopover from './components/referrerPopover.vue'

import { getList } from '@/api/evaluate/evaluateTask'

import evaluateTypeResult from './components/evaluateTypeResult.vue'

import firstRoundResult from './components/firstRoundResult.vue'

import secondRoundResult from './components/secondRoundResult.vue'



export default {

  components: {

    referrerPopover

    evaluateTypeResult,

    firstRoundResult,

    secondRoundResult

  },

  data() {

    return {

      form: {},

      query: {},

      search: {},

      loading: true,

      activeNames: ['1'],

      taskList: [],

      taskWord: '',

      taskActive: 0,

      page: {

        pageSize: 10,

        currentPage: 1,

        total: 0

        current: 1,

        size: 10,

        total: 20

      },

      selectionList: [],

      option: option,

      data: [],

      // 考核结果参数

      defaultTaskType: 0,

      taskTypeList: {

        column: [

          {

            label: '个人评优结果',

            label: '个人评优',

            prop: 0,

          },

          {

            label: '部门评优结果',

            label: '部门评优',

            prop: 1,

          },

        ],

      },

      status: {

        0: {

          text: '未开始',

          type: 'warning'

        },

        1: {

          text: '进行中',

          type: 'success'

        },

        2: {

          text: '已完成',

          type: ''

        },

      }

      // firstRounParams: {},

      // secondRounParams: {}

    };

  },

  computed: {

    ...mapGetters(["permission"]),

    permissionList() {

      return {

        addBtn: this.validData(this.permission.evaluateResult_add, false),

        viewBtn: this.validData(this.permission.evaluateResult_view, false),

        delBtn: this.validData(this.permission.evaluateResult_delete, false),

        editBtn: this.validData(this.permission.evaluateResult_edit, false)

      };

    },

    ids() {

      let ids = [];

      this.selectionList.forEach(ele => {

        ids.push(ele.id);

      });

      return ids.join(",");

    }

  },

  watch: {

    defaultTaskType: {

      handler(n) {

        this.query = {};

        this.query['type'] = n;

        let params = {

          type: n,

        };

        console.log(option.column.length);

        if (n) {

          this.option.column = sectionColumn

        } else {

          this.option.column = personColumn

        }

        this.page.currentPage = 1;

        this.onLoad(this.page, params);

      },

      immediate: true,

    },

  },

  methods: {

    rowSave(row, done, loading) {

      add(row).then(() => {

        this.onLoad(this.page);

        this.$message({

          type: "success",

          message: "操作成功!"

        });

        done();

      }, error => {

        loading();

        window.console.log(error);

      });

    initData() {

      this.getTaskList()

    },

    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 = `/evaluate/evaluateResult/export-evaluateResult?${this.website.tokenHeader}=${getToken()}`;

      const {

      } = this.query;

      let values = {

      };

      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() {

      this.query = {};

      this.onLoad(this.page);

    },

    searchChange(params, done) {

      this.query = {

    getTaskList(params) {

      this.page.current = 1

      const { current, size } = this.page

      const values = {

        type: this.defaultTaskType,

        ...params

      };

      this.page.currentPage = 1;

      this.onLoad(this.page, params);

      done();

      }

      getList(current, size, values).then(res => {

        const result = res.data.data

        this.page.total = result.total

        this.taskList = result.records

      })

    },

    selectionChange(list) {

      this.selectionList = list;

    searchChange() {

      this.page.current = 1

      this.getTaskList({ taskName: this.taskWord })

    },

    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 {

      } = 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();

      });

    handleCurrentChange(value) {

      this.page.current = value

      this.getTaskList({ taskName: this.taskWord })

    },

    tabChange(value) {

      this.taskActive = 0

      this.defaultTaskType = value.prop;

      this.getTaskList()

      this.defaultTaskType ? this.activeNames = ['3'] : this.activeNames = ['1']

    },

    handleActive(index) {

      this.taskActive = index

    }

  },

  mounted() {

    this.initData()

  },

  provide() {

    return {

      type: () => this.defaultTaskType

    }

  }

};

}

</script>



<style></style>

<style lang="scss" scoped>

.container {

  .el-aside {

    margin-right: 10px;

    padding-right: 10px;

    border-right: 1px solid var(--el-card-border-color);



    .aside-box {

      list-style: none;

      padding: 0;

      margin: 0;



      li {

        cursor: pointer;

        padding: 10px 0;

        margin-top: 10px;



        .text {

          display: flex;

          align-items: center;

          border-left: 3px solid var(--el-color-primary);

          padding-left: 10px;

        }



        .el-icon {

          margin-right: 5px;

        }

      }

    }



    .pagination {

      margin-top: 10px;

      display: flex;

      justify-content: center;

    }

  }



}



.is-active {

  color: var(--el-color-primary);

  background-color: rgba(var(--el-color-primary-rgb), .1);

}

</style>