SEEC-BOK-FRONTEND/src/components/checkQuestionCard.vue

<template>
    <el-card class="cQuestion-card" shadow="hover">
        <template #header>
            <el-row>
                <el-col :span="3">
                    <span><strong>S/N: </strong>{{curNum+1}} / {{totalNum}}</span>
                </el-col>

                <el-col :span="5">
                    <span><strong>题目类型: </strong>{{questionvo.type}}</span>
                </el-col>

                <el-col :span="6">
                    <div class="bQuestion-card-body-knowledgeID">
                            <span v-if="questionvo.knowledgeId && questionvo.knowledgeId.length !== 0">
                                <span><strong>KnowledgeId: </strong></span>
                                <el-tooltip v-for="item in questionvo.knowledgeId" effect="dark" placement="bottom">
                                    <template #content>
                                        {{map(item)}}
                                    </template>
                                    <el-tag  effect="dark" style="margin-right: 2px">{{item}}</el-tag>
                                </el-tooltip>
                            </span>
                        <span v-else>
                                <span><strong>KnowledgeId: </strong>null</span>
                            </span>
                    </div>
                </el-col>
                <el-col :span="6"></el-col>
                <el-col :span="2">
                    <el-button type="text" circle @click="expand" v-if="!isAll"><strong>展开</strong></el-button>
                    <el-button type="text" circle @click="withdraw" v-if="isAll"><strong>收起</strong></el-button>
                </el-col>
                <el-col :span="1">
                    <el-button type="primary" icon="el-icon-check" circle @click="approve"></el-button>
                </el-col>
                <el-col :span="1">
                    <el-button type="warning" icon="el-icon-close" circle @click="checkDialogVisible=true"></el-button>
                </el-col>
            </el-row>
        </template>
        <div class="question-body">
            <div class="bQuestion-card-body">
                <div class="bQuestion-card-body-stem">
                    <div>
                        <MarkdownText :raw="'<strong>题目: </strong>'+questionvo.stem"></MarkdownText>
                    </div>
                    <div class="stem-extension" v-if="isAll">
                        <div class="bQuestion-card-body-options" v-if="questionvo.type === 'choice'">
                            <div v-for="(item,index) in questionvo.options" >
                                <div v-if="questionvo.answer.split('').indexOf(index) !== -1" class="underline-correct-answer">
                                    <MarkdownText :raw="index+': '+item"></MarkdownText>
                                </div>
                                <div v-else>
                                    <MarkdownText :raw="index+': '+item"></MarkdownText>
                                </div>
                            </div>
                        </div>
                        <div class="bQuestion-card-body-options" v-if="questionvo.type === 'multiple_choice'">
                            <div v-for="(item,index) in questionvo.options" >
                                <div v-if="questionvo.answer.split(';').indexOf(index) !== -1" class="underline-correct-answer">
                                    <MarkdownText :raw="index+': '+item"></MarkdownText>
                                </div>
                                <div v-else>
                                    <MarkdownText :raw="index+': '+item"></MarkdownText>
                                </div>
                            </div>
                        </div>
                        <div class="bQuestion-card-body-blanks" v-if="questionvo.type === 'blank'">
                            <div v-for="index in Object.keys(questionvo.blanks).length">
                                <div class="correct_answer">
                                    __{{index}}__: {{questionvo.blanks['__'+index+'__']}}
                                </div>
                            </div>
                        </div>
                        <div class="bQuestion-card-body-true_false" v-if="questionvo.type === 'true_false'">
                            <div class="correct_answer"> {{questionvo.answer}}</div>
                        </div>
                    </div>
                </div>

                <el-divider v-if="isAll"></el-divider>

                <div class="bQuestion-card-body-info" v-if="isAll">
                    <div class="info-block">
                        <el-row>
                            <el-col :span="10">
                                <strong>KeyPoints: </strong>{{questionvo.keyPoints}}
                            </el-col>
                            <el-col :span="6">
                                <strong>题目难度: </strong>{{questionvo.weight}}/5
                            </el-col>
                            <el-col :span="4">
                                <span><strong>Tags: </strong></span>
                                <span v-if="questionvo.tags && questionvo.tags.length !== 0">
                                    <el-tag v-for="(item, index) in questionvo.tags" effect="dark">{{item}}</el-tag>
                                </span>
                                <span v-else>
                                    <span>no tags</span>
                                </span>
                            </el-col>
                        </el-row>
                    </div>
                    <div>
                        <div class="info-block"
                             v-if="questionvo.type === 'choice' ||
                         questionvo.type === 'multiple_choice' ||
                         questionvo.type === 'true_false' ||
                         questionvo.type === 'short_answer'">
                            <MarkdownText :raw="'<strong>正确答案: </strong>'+questionvo.answer"></MarkdownText>
                        </div>
                    </div>
                    <div>
                        <div class="info-block"
                             v-if="questionvo.type === 'choice' ||
                         questionvo.type === 'multiple_choice' ||
                         questionvo.type === 'true_false'">
                            <MarkdownText :raw="'<strong>解析: </strong>'+questionvo.analysis"></MarkdownText>
                        </div>
                        <div class="info-block" v-if="questionvo.type === 'blank' && questionvo.analysis.length > 5">
                            <MarkdownText :raw="'<strong>解析: </strong>'+questionvo.analysis"></MarkdownText>
                        </div>
                        <div class="info-block" v-if="questionvo.type === 'short_answer' && questionvo.analysis.length > 5">
                            <MarkdownText :raw="'<strong>解析: </strong>'+questionvo.analysis"></MarkdownText>
                        </div>
                    </div>
                </div>
            </div>

            <el-divider v-if="isAll"></el-divider>

            <div class="bQuestion-card-footer" v-show="isAll">
                <div class="footer">
                    <el-row>
                        <el-col :span="3">
                            <div><strong>状态: </strong>{{questionvo.state}}</div>
                        </el-col>
                        <el-col :span="5">
                            <div><strong>申请人: </strong>{{savedUserName}}</div>
                        </el-col>
                        <el-col :span="10"></el-col>
                        <el-col :span="6">
                            <div>
                                <strong>申请日期: </strong> {{toMyDate(questionvo.createdTime)}}
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="footer" v-if="recordList.length !== 0">
                    <el-table :data="recordTable" style="width: 100%;background-color: transparent" height="100">
                        <el-table-column prop="序号" label="序号" width="240" />
                        <el-table-column prop="操作时间" label="操作时间" width="360" />
                        <el-table-column prop="操作人" label="操作人" width="240" />
                        <el-table-column prop="操作类型" label="操作类型" />
                    </el-table>
                </div>
                <div class="footer" v-else>
                    <p>No Record!</p>
                </div>
            </div>

        </div>
    </el-card>

    <el-dialog title="审核不通过原因" v-model="checkDialogVisible" width="30%" center
               :before-close="handleCheckDialogClose">
        <el-space direction="vertical">
            <el-space direction="vertical" :fill="true">
                <el-checkbox-group v-model="failCheckList">
                    <el-checkbox v-for="(item, index) in failCheckOption" :label="item" class="fail-check-option"/>
                </el-checkbox-group>
                <el-input v-model="failCheckInput" placeholder="请输入原因"/>
            </el-space>
            <el-button type="primary" @click="deny">提交</el-button>
        </el-space>
    </el-dialog>

</template>

<script>
    import MarkdownText from "./MarkdownText";
    import {toMyDate} from "../utils/dateConvertor";
    import {map} from "../utils/knowledgeMapper";
    import store from "../store";

    export default {
        name: "checkCard",
        components:{
            MarkdownText,
        },
        props: {
            questionvo: Object,
            curNum: Number,
            totalNum: Number,
        },
        data(){
            return{
                isAll: false,
                savedUserName: '',
                // 审核dialog的可视化
                checkDialogVisible: false,
                // 审核失败的原因
                failCheckOption: [
                    '题目中存在错误','题目与相关内容无关','题目中存在敏感词','其他'
                ],
                // 详细解释
                failCheckInput: "",
                failCheckList: [],
                recordList: [],
                recordNameDict: {},
            }
        },
        computed: {
            recordTable(){
                let recordTable1 = [];
                let length = this.recordList.length;
                for (let i = 0; i < length; i++) {
                    let recordDict = {};
                    recordDict["序号"] = i+1;
                    recordDict["操作时间"] = this.toMyDate(this.recordList[length-i-1].time);
                    recordDict["操作人"] = this.recordNameDict[this.recordList[length-i-1].userId];
                    recordDict["操作类型"] = this.recordList[length-i-1].operationType;
                    recordTable1.push(recordDict);
                }
                return recordTable1;
            },
            denyReason(){
                let denyReason = "";
                for (let reason of this.failCheckList) {
                    denyReason += reason+", ";
                }
                denyReason += this.failCheckInput;
                return denyReason;
            }
        },
        methods: {
            map,
            toMyDate,
            expand(){
                if(!this.isAll){
                    this.isAll = true;
                }
            },
            withdraw(){
                if(this.isAll){
                    this.isAll = false;
                }
            },
            approve(){ // 通过审核
                this.questionvo.state = "APPROVED";
                let record = {
                    userId: store.state.user.id,
                    operationType: "Approve",
                }
                this.$api.updateQuestion(this.questionvo)
                    .then(res => {
                        this.$message({
                            type: 'success',
                            message: '通过成功!'
                        });
                        console.log("checkQuestionCard-approve");
                        console.log(res);
                        record.questionId = res.data.result.id;
                        record.time = new Date();
                        // 审核通过，添加操作记录
                        this.$api.createRecord(record)
                            .then(res1 => {
                                console.log("checkQuestionCard-approve-createRecord");
                                console.log(res1);
                            }).catch(err1 => {
                            console.log(err1);
                        })
                    })
                    .catch(err => {
                        this.$notify.error({
                            title: '错误',
                            message: '通过失败'
                        });
                        console.log(err);
                })
            },
            deny(){ // 拒绝通过
                let reason = this.denyReason
                this.questionvo.state = "REFUSED";
                let record = {
                    userId: store.state.user.id,
                    operationType: "Refuse",
                }
                this.$api.updateQuestion(this.questionvo)
                    .then(res => {
                        this.$message({
                            type: 'success',
                            message: '拒绝成功!'
                        });
                        console.log("checkQuestionCard-deny")
                        console.log(res);
                        record.questionId = res.data.result.id;
                        record.time = new Date();
                        // todo 这里直接调用denyReason就为空？
                        record.remark = reason;
                        // 审核通过，添加操作记录
                        this.$api.createRecord(record)
                            .then(res1 => {
                                console.log("checkQuestionCard-deny-createRecord");
                                console.log(res1);
                            }).catch(err1 => {
                            console.log(err1);
                        })
                    })
                    .catch(err => {
                        this.$notify.error({
                            title: '错误',
                            message: '拒绝失败'
                        });
                        console.log(err);
                    })
                this.failCheckList = []
                this.failCheckInput = ""
                this.checkDialogVisible = false
            },
            // 关闭审核dialog前的方法
            handleCheckDialogClose(done){
                const _this = this
                _this.$confirm('此操作将丢失填写信息, 是否继续?', '提示')
                    .then(() => {
                        _this.failCheckList = []
                        _this.failCheckInput = ""
                        done()})
                    .catch(()=>{})
            },
        },
        mounted() {
            if(this.questionvo.savedUserId){
                this.$api.getUserById(this.questionvo.savedUserId)
                    .then(res => {
                        if(res.data.result.name){
                            this.savedUserName =  res.data.result.name;
                        }
                    }).catch(err => {
                    console.log(err);
                })
            }

            this.$api.getRecordByQid(this.questionvo.id) // 异步函数2：根据题目id获得ope_record
                .then(res1 => {
                    let tempList = res1.data.result.content;
                    this.recordList = tempList;
                    for (let record of tempList) { //这里换成this.recordList是没问题的
                        if(!this.recordNameDict[record.userId]){
                            this.$api.getUserById(record.userId) //异步函数3：根据记录中的用户ID获得其name
                                .then(res2 => {
                                    if(res2.data.result.name){
                                        this.recordNameDict[record.userId] = res2.data.result.name;
                                    }
                                }).catch(err2 => {
                                console.log(err2);
                            })
                        }
                    }
                }).catch(err1 => {
                console.log(err1);
            });
        }
    }
</script>

<style>
    .cQuestion-card{
        margin: 20px;
        font-size: 18px;
        background-color: #eef7f2;
    }

</style>