pbl-student-table/src/components/EnglishVoice3/index.vue

<template>
    <div class="ev_box">
        <div class="ev_box_left">
            <left :title="title" :detail="detail" :checkJson="checkJson" :checkType="checkType" @setType="setType">
            </left>
        </div>
        <div class="ev_box_right">
            <right :checkJson="checkJson" :checkType="checkType" @setType="setType" :work="work" @setWork="setWork">
            </right>
        </div>
        <div class="ev_btn">
            <el-button type="primary" style="padding: 5px 10px;font-size: 14px;height: 30px;" size="mini" :disabled="!(checkType == (checkJson.length - 1))" @click="addEnglishWork">点击提交</el-button>
        </div>
    </div>
</template>

<script>
import right from './component/right.vue'
import left from './component/left.vue'

export default {
    components: {
        right,
        left
    },
    props: {

        englishVoiceJson: {
            type: Object
        },
        userid:{
            type:String
        },
        id:{
            type:String
        },
        courseType:{
            type:Number
        },
        taskCount:{
            type:Number
        },
        toolindex:{
            type:Number
        },
        englishVoiceJsonWork:{
            type: Array
        }
    },
    data() {
        return {
            checkJson: [],
            checkJson2: {},
            title: '',
            detail: '',
            checkType: 0,
            work: [],
            wScore: 0,
            scoreDetail: "",
        }
    },
    methods: {
        handleClose(done) {
            this.close();
            done();
        },
       
        // confirm() {
        //     this.close2();
        // },
        setJson(val) {
            this.checkJson = val;
            this.$forceUpdate()
        },
        setVoiceJson(val) {
            let a = JSON.parse(JSON.stringify(val));
            this.checkJson2 = JSON.parse(JSON.stringify(a));
            this.title = a.title;
            this.detail = a.detail;
            this.checkJson = a.array
            this.checkType = 0
            this.work=[]
            this.work.length = a.array.length
            let works = JSON.parse(
                JSON.stringify(this.englishVoiceJsonWork)
            );
            for (var i = 0; i < this.work.length; i++) {
                if(i > (works.length - 1)){
                    break
                }
                this.work[i] = works[i];
            }
        },
        setType(index) {
            this.checkType = index
        },
        setWork(url, index, text, star) {
            if(this.checkJson[index].type == 'createRole'){
                console.log(url);
                this.work[index] = JSON.parse(JSON.stringify(url))
                this.$forceUpdate()
            }else{
                if(star){
                    let score = parseInt(star.AccuracyScore / 20)
                    this.work[index] = {
                        audio:url,
                        text:text,
                        score:score,
                        star:star
                    }
                }else{
                    this.work[index] = {
                        audio:url,
                        text:text
                    }
                }

            }
        },
        addEnglishWork() {
            let params = [
                {
                    uid: this.userid,
                    cid: this.id,
                    stage: this.courseType,
                    task: this.taskCount,
                    tool: this.toolindex,
                    content: JSON.stringify(this.work),
                    type: 17,
                    atool: 70,
                    text: "",
                },
            ];
            this.ajax
                .post(this.$store.state.api + "addCourseWorks5", params)
                .then((res) => {
                    this.$message({
                        message: "提交成功",
                        type: "success",
                    });
                    // this.$emit('selectSWorks')
                    // this.$emit('selectStudent')
                    // this.close2();
                })
                .catch((err) => {
                    this.$message.error("提交失败");
                    console.error(err);
                });
        },
    },

    mounted() {
        this.setVoiceJson(this.englishVoiceJson);
    },
}
</script>

<style scoped>
.dialog_diy>>>.el-dialog {
    height: 100%;
    margin: 0vh auto !important;
}

.dialog_diy>>>.el-dialog__header {
    background: #454545 !important;
    padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__body {
    height: calc(100% - 54px);
    box-sizing: border-box;
    padding: 0px;
}

.dialog_diy>>>.el-dialog__title {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
    top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}

.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
    background: #e8ebf1;
    overflow: hidden;
}

.ev_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
}

.ev_box_left {
    width: 280px;
    margin-right: 15px;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.ev_box_right {
    width: calc(100% - 280px - 15px);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.ev_btn {
    position: absolute;
    bottom: 0;
    right: 80px;
    height: 210px;
    display: flex;
    align-items: center;
}</style>