jhprjv2/ruoyi-ui/src/views/project/surProjectQuarterlyAssess/assessDrawer.vue

<template>
    <div class="project-quarterly-assess-drawer" v-if="isOpen">
        <el-drawer v-if="isOpen" :visible.sync="isOpen" direction="rtl" size="50%" style="padding-left: 20px;">
            <template slot="title">
                <div>{{ title + ' 【季度考核目标】' }}</div>
                <right-toolbar @queryTable="loadData" :search="false">
                    <template slot="left" v-if="years.length>0">
                        <el-popover placement="top" v-model="showPop2">
                    <p>选择年份</p>
                    <div style="margin-bottom: 12px;">
                        <el-date-picker v-model="selYear" type="year" placeholder="选择年" >
                        </el-date-picker>
                    </div>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini" type="text" @click="showPop2 = false">取消</el-button>
                        <el-button type="primary" size="mini" @click="doAddYear">确定</el-button>
                    </div>
                        <el-button  slot="reference" size="mini" type="success" style="margin-right: 12px;" round>增加年份</el-button>
                    </el-popover>
                    </template>
                </right-toolbar>
            </template>
            <no-data v-if="years.length==0">
                <el-popover placement="top" v-model="showPop">
                    <p>选择年份</p>
                    <div style="margin-bottom: 12px;">
                        <el-date-picker v-model="selYear" type="year" placeholder="选择年">
                        </el-date-picker>
                    </div>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini" type="text" @click="showPop = false">取消</el-button>
                        <el-button type="primary" size="mini" @click="doAddYear">确定</el-button>
                    </div>
                    <el-button slot="reference" style="margin-top:24px;">增加年份</el-button>
                </el-popover>
            </no-data>
            <div v-else :key="activeName">
                <el-tabs  v-model="activeName" >
                    <el-tab-pane :label="''+it.year" :name="''+it.year" :key="idx" v-for="(it,idx) in years" >
                        <assess-item :datas="it.datas"></assess-item>
                    </el-tab-pane>                
                </el-tabs>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import AssessItem from './assessItem.vue'
export default {
    name: 'RuoyiUiProjectquarterlyAssessDrawer',
    components:{
        AssessItem
    },
    data() {
        return {
            isOpen: false,
            showPop: false,
            showPop2: false,
            prj: null,
            selYear: new Date(),
            years: [],
            activeName:''+new Date().getFullYear()
        };
    },
    mounted() {

    },
    methods: {
      
        checkDate(a,b,it){
            return true
        },
        doAddYear() {
            this.showPop = false;
            this.showPop2=false;
            let postData = {
                year: this.selYear.getFullYear(),
                projectId: this.prj.id
            }
            this.$api.projectAsscess.addYear(postData).then(d => {
                this.loadData();
            })
        },
        loadData() {
            this.$api.projectAsscess.listAssess({ projectId: this.prj.id }).then(d => {
                let years = [];
                d.rows.map(it => {
                    let tmps = years.filter(item => item.year == it.year);
                    if (tmps.length == 0) {
                        years.push({
                            year: it.year,
                            datas: [it]
                        })
                    } else {
                        tmps[0].datas.push(it);
                    }
                })
                this.years = years;                
            })
        },
        show(prj) {
            this.prj = prj;
            this.title = prj.projectName;
            this.isOpen = true;
            this.showPop=false;
            this.showPop2=false;
            this.activeName=''+new Date().getFullYear();
            this.selYear=new Date();
            this.loadData();
        }
    },
};
</script>

<style lang="scss" scoped>
.project-quarterly-assess-drawer {
    ::v-deep .el-drawer{
        min-width: 800px;
    }
    ::v-deep .el-drawer__header{
        margin-bottom: 0px;
    }
    ::v-deep .el-drawer__body{
        padding:0px 24px;
        .el-collapse-item__header{
            font-size: 16px;
            font-weight: bold;
        }
        .el-collapse-item__content{
            padding-bottom:0px;
        }
    }
}
</style>