gdy_pc_8/src/newPerformance/components/MyPerformance/SelectExamine.vue

<template>
    <el-dialog title="历史考核记录" :visible.sync="dialogVisible" width="800px" :before-close="dialogBeforeClose" append-to-body >
        <div>
            <!-- 搜索框 -->
            <div class="search-box">
                <div class="flex-box-ce">
                    <el-input v-model="params.keyword" placeholder="考核表名称" prefix-icon="el-icon-search"
                        style="width: 200px; " size="small"></el-input>

                    <el-select v-model="cycleType" placeholder="周期类型" @change="changeCircle"
                        style="width: 100px; margin: 0 10px;" size="small">
                        <el-option v-for="item in cycleOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>

                    <el-date-picker v-model="date" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions" @change="changeDate" style="width: 300px; margin-right: 10px;"
                        size="small">
                    </el-date-picker>

                    <!-- <el-select v-model="params.cateId" placeholder="请选择考核分类" style="width: 180px; margin-right: 10px;"
                        size="small" @chang="changeCateId">
                        <el-option v-for="item in cateList" :key="item.cateId" :label="item.name" :value="item.cateId">
                        </el-option>
                    </el-select> -->

                    <el-button type="primary" size="mini" @click="getTemplateList()">查询</el-button>
                    <el-button size="mini" @click="resetSearch()">重置</el-button>
                </div>
            </div>

            <!-- 考核模板列表 -->
            <div class="perform-list scroll-bar" style="margin-top: 10px; height: 450px; overflow-y: auto;">
                <template v-if="performList && performList.length > 0">
                    <div class="perform-item" v-for="item in performList" :key="item.reviewId"
                        @click="choosePerformItem(item)">
                        <div class="perform-item-title">{{ item.title }}</div>
                        <div class="perform-item-date">
                            {{ item.startTime | formatDate }} 至 {{ item.endTime | formatDate }}
                        </div>
                        <div class="perform-item-status" :class="item.status == 1 ? 'green-color' : 'orange-color'">
                            {{
                            item.status == 1 ? '考核结束' : '考核中' }}</div>
                        <div class="perform-item-progress">{{ item.progress }}</div>
                        <div class="perform-item-score">{{ item.score ? item.score + '分' : '--' }} </div>
                    </div>
                </template>
                <noData v-else content="暂无数据" imgW="200px" imgH="200px"></noData>
            </div>
            <div v-if="performList && performList.length > 0" class="flex-box-ce"
                style="justify-content: center; margin-top: 10px;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="params.page" :page-sizes="[15, 30, 45, 60]" :page-size="params.pageSize"
                    layout="total, sizes, prev, pager, next" :total="total">
                </el-pagination>
            </div>

        </div>
    </el-dialog>

</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import _ from 'lodash';
export default {
    model: {
        prop: 'dialogVisible',
        event: 'close-dialog'
    },
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        searchOptions: {
            type: Object,
            default: () => {}
        }
    },

    watch: {
        dialogVisible(v) {
            if (v) {
                if (!_.isEmpty(this.searchOptions)) {
                    let { employeeId, cycleType, cateId } = this.searchOptions
                    this.params.employeeId = employeeId
                    this.params.cycleType = cycleType
                    this.params.cateId = cateId + ''
                }
                
                this.getTemplateList()
            }
        }
    },

    data() {
        return {
            params: {
                keyword: '',
                page: 1,
                pageSize: 15,
                cateId: '',
                startDate: '',
                endDate: '',
                employeeId: '',
            },
            // 周期类型 -1全部 0-未定义 1-年度 2-半年度 3-季度 4-月度
            cycleType: '-1',
            cycleOptions: [
                { label: "全部", value: '-1' },
                { label: "未定义", value: '0' },
                { label: "年度", value: '1' },
                { label: "半年度", value: '2' },
                { label: "季度", value: '3' },
                { label: "月度", value: '4' },
            ],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            date: [],
            performList: [],
            cateList: [],
            total: 0
        }
    },

    
    filters: {
        formatDate(val) {
            if (val) return moment(val).format('YYYY-MM-DD')
            else return "--"
        }
    },
    computed: {
        ...mapGetters(['user_info'])
    },
    created() {
        if (!_.isEmpty(this.searchOptions)) {
            let { employeeId, cycleType } = this.searchOptions
            this.params.employeeId = employeeId
            this.params.cycleType = cycleType
            this.cycleType = cycleType
        } else {
            this.params.employeeId = this.user_info.id
        }
        // this.getCateList()
        this.getTemplateList()
    },
    methods: {
        // 考核分类列表
        getCateList() {
            let url = `/performance/cate/list/${this.user_info.site_id}`;
            this.$axiosUser('get', url).then(res => {
                let { data: { code, data: { list, total } } } = res
                if (code == 1) {
                    this.cateList = list
                }

            })
        },

        getTemplateList() {
            let that = this
            let url = `/performance/statistics/reviews/${that.user_info.site_id}`
            let requestdata;
            if (that.cycleType == '-1') requestdata = { ...that.params }
            else requestdata = { ...that.params, cycleType: that.cycleType } 
            that.$axiosUser('get', url, requestdata).then(res => {
                let { data: { data: { list, total }, code } } = res;
                if (code == 1) {
                    that.performList = list;
                    that.total = total
                } else {
                    that.performList = [];
                }
            });
        },

        choosePerformItem(item) {
            this.$emit('chooseExamine', item)
            this.$emit('close-dialog', false)
        },

        dialogBeforeClose() {
            this.$emit('close-dialog', false)
        },

        changeCateId(v) {
            this.getTemplateList();
        },

        resetSearch() {
            this.params = {
                keyword: '',
                page: 1,
                pageSize: 10,
                startDate: '',
                endDate: ''
            };
            this.cycleType = '-1'
            this.date = []
            if (this.searchOptions && this.searchOptions.employeeId) {
                this.params.employeeId = this.searchOptions.employeeId
            } else {
                this.params.employeeId = this.user_info.id
            }
            this.getTemplateList();
        },

        
        // 日期选择时间
        changeDate(v) {
            this.params.page = 1;
            if (this.date[0]) this.params.startDate = this.date[0] || ''
            if (this.date[1]) this.params.endDate = this.date[1] || ''
        },


        changeCircle(v) {
            this.params.page = 1;
            this.cycleType = v;
        },

        handleSizeChange(v) {
            this.params.pageSize = v
            this.getTemplateList();
        },
        handleCurrentChange(v) {
            this.params.page = v
            this.getTemplateList();
        },
    }
}
</script>


<style scoped lang="scss">
.green-color {
    color: #67c23a;
}

.orange-color {
    color: #e6a23c;
}

.perform-list {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: #fff;


    .perform-item {
        width: 100%;
        height: 50px;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 14px;
        margin-bottom: 10px;
        border-bottom: 1px solid #ddd;

        &:hover {
            background-color: #f7f7f7;
            cursor: pointer;
        }

        &-title {
            width: 240px;
            font-weight: 600;
        }

        &-name {
            width: 80px;
        }

        &-date {
            width: 200px;
        }

        &-score {
            width: 60px;
        }

        &-status {
            width: 80px;
        }

    }
}
</style>