dy-admin-manager/src/views/workBenchManager/journal/model/leave.vue

<template>
    <div>
        <el-form ref="leaveForm"
                 :model="leaveForm"
                 class="leaveForm"
                 label-width="100px">
            <el-alert title="已拒绝" show-icon center v-if="leaveForm.status == 'REJECT'" :closable="false" class="alert" type="error"></el-alert>
            <el-alert title="已同意" show-icon center v-if="leaveForm.status == 'PASS'" :closable="false" class="alert" type="success"></el-alert>
            <el-form-item label="开始时间">
                <el-input disabled v-model.trim="leaveForm.startTime"></el-input>
            </el-form-item>
            <el-form-item label="结束时间">
                <el-input disabled v-model.trim="leaveForm.endTime"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" disabled v-model.trim="leaveForm.remark"></el-input>
            </el-form-item>
        </el-form>
        <!-- vip -->
        <el-table :data="vipCourse"
                    style="width: 100%"
                    :header-cell-style="{background:'#EDEEF0',color:'#444'}">
            <el-table-column label="编号" prop="before.id"></el-table-column>
            <el-table-column label="类型"
                            width="100px">
                <template slot-scope="scope">
                    {{ scope.row.before.type == "VIP" ? 'VIP课' : '乐团课' }}
                </template>
            </el-table-column>
            <el-table-column label="班名"
                            width="140px">
                <template slot-scope="scope">
                    <tooltip :content="scope.row.before.name" />
                </template>
            </el-table-column>
            <el-table-column label="调整前日期">
                <template slot-scope="scope">
                    {{ scope.row.before.classDate | formatTimer }}
                </template>
            </el-table-column>
            <el-table-column label="上课时间">
                <template slot-scope="scope">
                    {{ scope.row.before.startClassTime | getFormatTime(scope.row.before.endClassTime) }}
                </template>
            </el-table-column>
            <el-table-column label="调整后日期">
            <template slot-scope="scope"
                        v-if="scope.row.before.type == 'VIP'">
                {{ scope.row.after.classDate | formatTimer }}
            </template>
            </el-table-column>
            <el-table-column label="调整后时间">
            <template slot-scope="scope"
                        v-if="scope.row.before.type == 'VIP'">
                {{ scope.row.after.startClassTime | getFormatTime(scope.row.after.endClassTime) }}
            </template>
            </el-table-column>
        </el-table>

        <el-table :data="musicGroupCourse"
                    style="width: 100%; padding-top: 10px;"
                    :header-cell-style="{background:'#EDEEF0',color:'#444'}">
            <el-table-column label="乐团编号"
                            prop="before.musicGroupId">
            </el-table-column>
            <el-table-column label="类型">
            <template slot-scope="scope">
                {{ scope.row.before.type == "VIP" ? 'VIP课' : '乐团课' }}
            </template>
            </el-table-column>
            <el-table-column label="班名">
                <template slot-scope="scope">
                    <tooltip :content="scope.row.before.name" />
                </template>
            </el-table-column>
            <el-table-column label="调整前日期">
                <template slot-scope="scope">
                    {{ scope.row.before.classDate | formatTimer }}
                </template>
            </el-table-column>
            <el-table-column label="上课时间">
                <template slot-scope="scope">
                    {{ scope.row.before.startClassTime | getFormatTime(scope.row.before.endClassTime) }}
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer" v-permission="'teacherLeaveRecord/approve'" v-if="leaveForm.status == 'ING'">
            <el-button type="primary" @click="onSubmit('leaveForm', 'PASS')">确 定</el-button>
            <el-button type="danger" @click="onSubmit('leaveForm', 'REJECT')">拒 绝</el-button>
        </div>
    </div>
</template>

<script>
import { leaveQueryDetail, approve } from '@/api/journal'
import Tooltip from '@/components/Tooltip'
import dayjs from 'dayjs'
export default {
    props: ['dialogDetail'],
    components: { Tooltip },
    data() {
        return {
            leaveForm: {},
            musicGroupCourse: [],
            vipCourse: [],
        }
    },
    mounted() {
        this.__init()
    },
    methods: {
        async __init() {
            let { memo } = this.dialogDetail
            memo = memo ? JSON.parse(memo) : null
            if(!memo) { // 判断是否有参数
                this.$message.error('参数有误')
                return
            }
            await leaveQueryDetail({ id: memo.leaveRecordId }).then(res => {
                let result = res.data
                if (res.code == 200) {
                    this.leaveForm = result
                    let tempJson = result.coursesScheduleJson ? JSON.parse(result.coursesScheduleJson) : []
                    let musicGroupCourse = []
                    let vipCourse = []
                    tempJson.forEach(item => {
                        if (item.before.type == 'VIP') {
                            vipCourse.push(item)
                        } else {
                            musicGroupCourse.push(item)
                        }
                    })
                    this.musicGroupCourse = musicGroupCourse
                    this.vipCourse = vipCourse
                }
            })
        },
        async onSubmit(formName, type) {
            const params = {
                id: this.leaveForm.id,
                status: type,
                userId: this.leaveForm.userId
            }
            const str = type == 'PASS' ? '同意' : '拒绝'
            this.$confirm(`您确定${str}该请假申请吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await approve(params).then(res => {
                    if (res.code == 200) {
                        this.$message.success('处理成功')
                        this.$listeners.close()
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            }).catch(() => {
                //
            })
        }
    },
    filters: {
        getFormatTime (tempA, tempB) {
            return dayjs(tempA).format('HH') + ':' + dayjs(tempA).format('mm') + '-' + dayjs(tempB).format('HH') + ':' + dayjs(tempB).format('mm')
        }
    }
}
</script>

<style lang="less" scoped>
.dialog-footer{
    margin-top: 20px;
    display: block;
    text-align: right;
}
.alert {
   margin-bottom: 10px;
}
</style>