pbl-teacher-table/src/components/pages/test/add/setInfo/manualCreated.vue

<template>
    <div class="mc_box">
        <div class="mc_addBox">
            <div class="mc_addBox_add">
                <div class="title">请添加题目类型与数量</div>
                <div class="select">
                    <el-select v-model="topicType" placeholder="题目类型" clearable class="e-select">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input v-model="number" placeholder="请输入题目数量" size="normal" clearable @change="numberPan"
                        class="e-input"></el-input>
                    <img src="@/assets/icon/new/addStage.png" class="e-img" @click="addCheck" />
                </div>
            </div>
            <div class="mc_addBox_add">
                <div class="title">请添加题目类型与数量</div>
                <div class="btnBox">
                    <el-button type="primary" size="mini" v-for="item in buttonOptions" :key="item.type" class="e-button"
                        @click="addQtype(item.type)">{{ item.name }}</el-button>
                </div>
            </div>
        </div>
        <div class="mc_checkBox">
            <checkOrder :checkC.sync="checkC" :checkJson="checkJson" @changeJson="changeJson"></checkOrder>
            <div class="e_btn">
                <el-button type="primary" size="mini" @click="nextSteps()">下一步</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import checkOrder from '../components/checkOrder.vue';
import minxinVue from '../minxins/minxin';

export default {
    mixins:[minxinVue],
    components: {
        checkOrder,
    },
    props: {
        manualJson: {
            type: Array
        }
    },
    data() {
        return {
            topicType: "",
            number: "",
            checkJson: [
                // {
                //     ttype: 1, //题目分类 1普通题目 2分组 3分页
                //     type: 1, //题型分类 1选择题, 2问答题 3填空题 4添加文档
                //     array:[] //题目
                // }
            ],
            checkC: "",
        };
    },
    watch: {
        // checkJson :{
        //     handler: function (newVal, oldVal) { 
        //         this.$emit("update:manualJson", newVal)
        //     },
        //     deep: true,
        // }
    },
    methods: {
        numberPan() {
            if (/[^\d]/.test(this.number)) {
                this.$message.error("请填写数字");
                this.number = "";
            }
        },
        changeJson(json) {
            this.checkJson = json;
            this.$emit("update:cJson", json);
        },
        addCheck() {
            if (!this.topicType) {
                this.$message.error("请选择题目类型");
                return;
            }
            if (!this.number) {
                this.$message.error("请填写题目数量");
                return;
            }
            let type = 1;
            if (this.checkJson.length > 0) {
                for (var i = 0; i < this.checkJson.length; i++) {
                    if (this.checkJson[i].ttype == 2) {
                        type = 2;
                    } else if (this.checkJson[i].ttype == 3) {
                        type = 3;
                    }
                }
            }
            if (this.checkC) {
                let _check = this.checkC.replace('x', '').split("-")
                let _json = this.checkJson[_check[0]]
                let json = {
                    ttype: 1,
                    type: this.topicType
                }
                if (_json.array) {
                    if (type == 3 && _check.length == 2) {
                        if (this.checkJson[_check[0]].array[_check[1]].array) {
                            for (var i = 0; i < this.number; i++) {
                                this.checkJson[_check[0]].array[_check[1]].array.push(json)
                            }
                        } else {
                            for (var i = 0; i < this.number; i++) {
                                this.checkJson[_check[0]].array.splice((_check[1]) + 1, 0, json)
                            }
                        }

                    } else if (type == 3 && _check.length == 3) {
                        for (var i = 0; i < this.number; i++) {
                            this.checkJson[_check[0]].array[_check[1]].array.splice((_check[2]) + 1, 0, json)
                        }
                    } else if (type == 2 && _check.length == 2) {
                        for (var i = 0; i < this.number; i++) {
                            this.checkJson[_check[0]].array.splice((_check[1]) + 1, 0, json)
                        }
                    } else if (type == 2 && _check.length == 1) {
                        for (var i = 0; i < this.number; i++) {
                            this.checkJson[_check[0]].array.push(json)
                        }
                    } else if (type == 3 && _check.length == 1) {
                        if(this.checkJson[_check[0]].array[0] && this.checkJson[_check[0]].array[0].array){
                            for (var i = 0; i < this.number; i++) {
                                this.checkJson[_check[0]].array[0].array.push(json)
                            }
                        }else{
                            for (var i = 0; i < this.number; i++) {
                                this.checkJson[_check[0]].array.push(json)
                            }
                        }
                    }
                } else {
                    for (var i = 0; i < this.number; i++) {
                        this.checkJson.splice(parseInt(_check[0]) + 1, 0, json);
                    }
                }
            } else {
                if (type == 1) {
                    for (var i = 0; i < this.number; i++) {
                        this.checkJson.push({
                            ttype: 1,
                            type: this.topicType
                        });
                    }
                } else if (type == 3 || type == 2) {
                    this.$message.error("请选中分页或者分组添加题目");
                    return;
                }
            }
            this.topicType = "";
            this.number = "";
            this.$emit("update:manualJson", this.checkJson);
        },
        addQtype(type) {
            if (type == 1) {

                let type = 1;
                if (this.checkJson.length > 0) {
                    for (var i = 0; i < this.checkJson.length; i++) {
                        if (this.checkJson[i].ttype == 1) {
                            type = 2;
                        } else if (this.checkJson[i].ttype == 3) {
                            type = 3;
                        }
                    }
                }
                let json = {
                    ttype: 2,
                    array: [],
                    isopen: true
                }
                if (type == 1) {
                    if (this.checkC) {
                        let _check = this.checkC.replace('x', '').split("-")
                        this.checkJson.splice(parseInt(_check[0]) + 1, 0, json);
                    } else {
                        this.checkJson.push(json);
                    }
                } else if (type == 2) {
                    this.checkJson = [
                        {
                            ttype: 2,
                            array: this.depthCopy(this.checkJson),
                            isopen: true
                        }
                    ];
                } else if (type == 3) {
                    if (this.checkC) {
                        let _check = this.checkC.replace('x', '').split("-")

                        if (_check.length > 1 && this.checkJson[_check[0]].array[0] && this.checkJson[_check[0]].array[0].array) {
                            this.checkJson[_check[0]].array.splice(parseInt(_check[1]) + 1, 0, json);
                        } else if (this.checkJson[_check[0]].array[0] && !this.checkJson[_check[0]].array[0].array) {
                            this.checkJson[_check[0]].array = [
                                {
                                    ttype: 2,
                                    array: this.depthCopy(this.checkJson[_check[0]].array),
                                    isopen: true
                                }
                            ]
                        } else {
                            this.checkJson[_check[0]].array.push(json);
                        }
                    } else {
                        this.$message.error("请选中分页添加分组");
                        return;
                    }
                }

            } else if (type == 2) {

                let type = 1;
                if (this.checkJson.length > 0) {
                    for (var i = 0; i < this.checkJson.length; i++) {
                        if (this.checkJson[i].ttype == 1 || this.checkJson[i].ttype == 2) {
                            type = 2;
                        }
                    }
                }
                if (type == 1) {
                    let json = {
                        ttype: 3,
                        array: [],
                        isopen: true
                    }
                    if (this.checkC) {
                        let _check = this.checkC.replace('x', '').split("-")

                        this.checkJson.splice(parseInt(_check[0]) + 1, 0, json);
                    } else {
                        this.checkJson.push(json);
                    }
                } else {
                    this.checkJson = [
                        {
                            ttype: 3,
                            array: this.depthCopy(this.checkJson),
                            isopen: true
                        }
                    ];
                }

            }
            this.$emit("update:manualJson", this.checkJson);
        },
        depthCopy(s) {
            return JSON.parse(JSON.stringify(s));
        },
        
        nextSteps(){
            this.$emit("nextSteps")
        }
    },
    created() {
        this.checkJson = this.depthCopy(this.manualJson);
    }
};
</script>

<style scoped>
.mc_box {
    width: 90%;
    margin: 10px auto;
    display: flex;
}

.mc_addBox {
    width: 400px;
    border: 1px solid #898989;
    border-radius: 8px;
    padding: 20px 20px;
    box-sizing: border-box;
    height: 350px;
}

.mc_addBox_add {}

.mc_addBox_add+.mc_addBox_add {
    margin-top: 10px;
}

.mc_addBox_add .title {
    margin-bottom: 10px;
}

.mc_addBox_add .select {
    display: flex;
    align-items: center;
}

.mc_addBox_add .btnBox {}

.mc_addBox_add .select .e-select {}

.mc_addBox_add .select .e-input {
    margin-left: 10px;
}

.mc_addBox_add .select .e-img {
    cursor: pointer;
    width: 20px;
    margin-left: 10px;
}

.mc_addBox_add .btnBox .e-button {}

.mc_checkBox {
    width: calc(100% - 420px);
    margin-left: 20px;
    border: 1px solid #898989;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}


.e_btn{
    width: 100%;
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}
</style>