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

<template>
    <div class="rightBox">
        <div class="whiteBg" style="background:unset;padding: 0;">
            <div>
                <div class="basic_box" style="padding: 0;">
                    <div class="big_box">
                        <div class="left_first">
                            <div class="c_info_title" style="padding: 0 0 15px;margin: 0 auto 0 0;">设置基础信息</div>
                            <div>
                                <div style="width: 100%;">
                                    <div class="course_input_box">
                                        <div class="bb_courseIcon"><img src="../../../../../assets/icon/new/course.png" />
                                        </div>
                                        <input @input="titleChange" type="text" placeholder="请输入表单名称" class="binfo_input"
                                            v-model="courseName"
                                            style="border: 1.5px solid rgb(202, 209, 220);margin: 0px 10px 0px 0px;border-radius: 5px;font-weight: 600;padding: 12px 14px 12px 71px;" />
                                        <el-switch v-model="isTeacherSee" active-text="允许回答后查看正确答案"
                                            style="justify-content: center;" @change="seeChange"></el-switch>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="typeBox">
                                <span>权限：</span>
                                <el-select v-model="sJuri" placeholder="权限" @change="juriChange">
                                    <el-option label="所有人" value="0"></el-option>
                                    <el-option label="老师" value="1"></el-option>
                                    <el-option label="学生" value="2"></el-option>
                                </el-select>
                            </div> -->
                            <div class="typeBox" style="display: flex;align-items: center;">
                                <span>教研室权限：</span>
                                <div class="checkJuri" @click="checkJuri">
                                    <span v-if="!getCName(checkList)" style="color: #c0c4d6;">所有人</span>
                                    <span>{{ getCName(checkList) }}</span>
                                </div>
                            </div>
                            <div class="typeBox">
                                <span>截止日期：</span>
                                <el-date-picker v-model="selectedDate" type="date" :picker-options="pickerOptions"
                                    @change="DateChange" format="yyyy-MM-dd" clearable=""
                                    placeholder="选择截止日期"></el-date-picker>
                            </div>
                            <div class="typeBox" v-if="typeArray.length">
                                <span>类型：</span>
                                <el-select v-model="typeCheck" placeholder="选择类型" clearable @change="typeChange2">
                                    <el-option v-for="(item, index) in typeArray" :key="index" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </div>
                            <div class="both">
                                <div class="choose">
                                    <div class="all_choose" v-for="(item, index) in CourseType[0]" :key="index"
                                        @change="typeChange">
                                        <span v-if="CourseTypeJson[item.id].length > 0">{{ item.name }}:</span>
                                        <el-checkbox-group v-model="courseTypeId" v-if="CourseTypeJson[item.id].length > 0">
                                            <el-checkbox v-for="item1 in CourseTypeJson[item.id]" :key="item1.id"
                                                :label="item1.id">{{
                                                    item1.name }}</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </div>
                            </div>
                            <div class="whiteBg" style="border-radius: 0; margin-top: 0px">
                                <div class="c_info_title" style="padding: 0 0 15px;margin: 0 auto 0 0;">表单描述</div>
                                <div style="width: 100%;box-sizing: border-box;">
                                    <div style="width: calc((100%))">
                                        <textarea v-autoHeight="68" rows="2" class="binfo_input binfo_textarea" cols
                                            v-model="courseText" placeholder="表单描述" @change="briefChange"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="whiteBg" style="background:#fff;margin: 10px 0;min-height: 300px;">
            <div class="whiteBg" style="border-radius: 0">
                <div class="c_info_title">创建表单内容</div>
                <div class="c_info_box">
                    <div class="c_info_tab">
                        <!-- <span :class="{ active: type == 1 }" @click="type = 1">智能创建</span> -->
                        <span :class="{ active: type == 2 }" @click="type = 2">手动创建</span>
                        <!-- <span :class="{ active: type == 3 }" @click="type = 3">题库导入</span> -->
                        <div class="skip_btn">
                            <!-- <el-button type="primary" size="mini" @click="openAiCreate">智能创建</el-button> -->
                            <!-- <el-button type="primary" size="mini" @click="nextSteps">跳过</el-button> -->
                        </div>

                    </div>
                    <div class="c_info_tab_box">
                        <manualCreate v-if="type == 2" :manualJson.sync="manualJson" @nextSteps="nextSteps"></manualCreate>
                    </div>
                </div>
            </div>
        </div>
        <aiCreate :aiJson.sync="manualJson" :aiDialogVisible.sync="aiDialogVisible" v-if="aiDialogVisible"></aiCreate>
        <el-dialog title="选择权限" :visible.sync="juriDialog" :append-to-body="true" :before-close="handleClose"
            class="dialog_diy" width="500px">
            <van-divider>
                <div class="people_name">
                    <el-checkbox v-model="checkAll" @change="checkAllChange">全选</el-checkbox>
                    <el-checkbox v-model="ischeckAll" @change="ischeckAllChange">所有人</el-checkbox>
                </div>
                <div style="max-height: 300px;overflow: auto;">
                    <el-checkbox-group v-model="checkList2" class="people_name" @change="pChange">
                        <el-checkbox v-for="item in classJuri" :key="item.id" :label="item.id">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </van-divider>
            <span slot="footer" class="dialog-footer">
                <el-button @click="juriDialog = false">取 消</el-button>
                <el-button type="primary" @click="confirmCheck">确 定
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import manualCreate from './manualCreated.vue';
import aiCreate from './aiCreate.vue';
export default {
    components: {
        manualCreate,
        aiCreate
    },
    props: {
        oid: {
            type: String
        },
        org: {
            type: String
        },
        title: {
            type: String
        },
        testType: {
            type: Array
        },
        see: {
            type: Boolean
        },
        steps: {
            type: Number
        },
        cJson: {
            type: Array
        },
        typeid: {
            type: String
        },
        brief: {
            type: String
        },
        juri: {
            type: String
        },
        overDate: {
            type: String
        },
        juriList: {
            type: Array
        }
    },
    data() {
        return {
            CourseType: [],
            courseTypeId: [],
            CourseTypeJson: {},
            courseName: "",
            isTeacherSee: false,
            type: 2,
            manualJson: [],
            aiDialogVisible: false,
            typeArray: [],
            typeCheck: '',
            sJuri: '',
            courseText: '',
            selectedDate: '',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now(); // 只能选择大于今天的日期
                },
            },
            classJuri: [],
            checkList: [],
            checkList2: [],
            juriDialog: false,
            checkAll: false,
            ischeckAll: false
        }
    },
    computed: {
        getCName() {
            return function (clist) {
                let _people = [];
                let _people2 = [];
                let _people3 = [];
                if (this.classJuri.length) {
                    for (var i = 0; i < this.classJuri.length; i++) {
                        _people2.push(this.classJuri[i].id);
                    }
                    for(var i = 0; i < clist.length; i++){
                        if(_people2.indexOf(clist[i]) !== -1){
                            _people3.push(clist[i]);
                        }
                    }
                    for (var i = 0; i < this.classJuri.length; i++) {
                        if(_people3.indexOf(this.classJuri[i].id) !== -1){
                            _people.push(this.classJuri[i].name);
                        }
                    }
                }
                return this.classJuri.length ? _people.join(',') : "所有人";
            };
        },
    },
    directives: {
        autoHeight: {
            update(el, binding) {
                const { value } = binding
                if (value && typeof value === 'number') {
                    el.style.height = `${value}px`
                } else {
                    el.style.height = 'auto'
                }
            },
            componentUpdated(el) {
                el.style.height = `${el.scrollHeight + 5}px`
            },
        },
    },
    methods: {
        handleClose(done) {
            done();
        },
        selectAllType() {
            let params = {
                org: this.org && this.org != "" ? this.org : "",
                oid: this.oid && this.oid != "" ? this.oid : "",
            };
            this.ajax
                .get(this.$store.state.api + "selectAllTypeT", params)
                .then((res) => {
                    this.CourseType = res.data;
                    for (var cti = 0; cti < res.data[0].length; cti++) {
                        if (res.data[0][cti].id == "34628934-d02f-11ec-8c78-005056b86db5" || res.data[0][cti].id == "34628934-d02f-11ec-8c78-005056b86ac5") {
                            res.data[0][cti].name = "年级";
                        } else if (res.data[0][cti].id == "34629907-d02f-11ec-8c78-005056b86db5" || res.data[0][cti].id == "34629907-d02f-11ec-8c78-005056b86ac5") {
                            res.data[0][cti].name = "学科";
                        }
                    }
                    let _courseTypeId = [];
                    for (var i = 0; i < res.data[0].length; i++) {
                        if (!this.cid) {
                            this.courseTypeId[res.data[0][i].id] = [];
                        }
                        // if (!this.CourseTypeJson[res.data[0][i].id]) {
                        // }
                        this.CourseTypeJson[res.data[0][i].id] = [];

                        if (res.data[2].length == 0 && res.data[3].length == 0) {
                            for (var j = 0; j < res.data[1].length; j++) {
                                if (
                                    this.courseTypeId.indexOf(res.data[1][j].id) != -1 &&
                                    _courseTypeId.indexOf(res.data[1][j].id) == -1
                                ) {
                                    _courseTypeId.push(res.data[1][j].id);
                                }
                                if (res.data[0][i].id == res.data[1][j].pid) {
                                    this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
                                }
                            }
                        } else {
                            if (res.data[2].length > 0) {
                                for (var j = 0; j < res.data[2].length; j++) {
                                    if (
                                        this.courseTypeId.indexOf(res.data[2][j].id) != -1 &&
                                        _courseTypeId.indexOf(res.data[2][j].id) == -1
                                    ) {
                                        _courseTypeId.push(res.data[2][j].id);
                                    }
                                    if (res.data[0][i].id == res.data[2][j].pid) {
                                        this.CourseTypeJson[res.data[0][i].id].push(res.data[2][j]); // 去除公共分类
                                    }
                                }
                            }
                            if (res.data[3].length > 0) {
                                for (var j = 0; j < res.data[3].length; j++) {
                                    if (
                                        this.courseTypeId.indexOf(res.data[3][j].id) != -1 &&
                                        _courseTypeId.indexOf(res.data[3][j].id) == -1
                                    ) {
                                        _courseTypeId.push(res.data[3][j].id);
                                    }
                                    if (res.data[0][i].id == res.data[3][j].pid) {
                                        this.CourseTypeJson[res.data[0][i].id].push(res.data[3][j]); // 去除公共分类
                                    }
                                }
                            }
                        }
                    }
                    this.courseTypeId = _courseTypeId;
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        titleChange() {
            this.$emit("update:title", this.courseName)
        },
        typeChange() {
            this.$emit("update:testType", this.courseTypeId)
        },
        seeChange() {
            this.$emit("update:see", this.isTeacherSee)
        },
        typeChange2() {
            this.$emit("update:typeid", this.typeCheck)
        },
        juriChange() {
            this.$emit("update:juri", this.sJuri)
        },
        DateChange() {
            this.$emit("update:overDate", this.selectedDate)
        },
        briefChange() {
            this.$emit("update:brief", this.courseText)
        },
        depthCopy(s) {
            return JSON.parse(JSON.stringify(s))
        },
        openAiCreate() {
            this.aiDialogVisible = true
        },
        nextSteps() {
            if (this.type == 2) {
                this.$emit("update:cJson", this.manualJson)
            }
            this.$emit('update:steps', this.steps + 1)
            console.log(this.cJson);
            console.log(this.manualJson);
        },
        selectType() {
            let params = {
                oid: this.oid,
            };
            this.ajax
                .get(this.$store.state.api + "selectTestType", params)
                .then((res) => {
                    this.typeArray = res.data[0];
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        //获取教研室列表
        getClass2() {
            let params = {
                oid: this.oid,
            };
            this.ajax
                .get(this.$store.state.api + "selectTeacherOfficeBySchool", params)
                .then((res) => {
                    this.classJuri = res.data[0];
                })
                .catch((err) => {
                    this.isLoading = false;
                    console.error(err);
                });
        },
        checkJuri() {
            let clist = []
            let clist2 = []
            for(var i = 0; i< this.classJuri.length;i++){
                clist2.push(this.classJuri[i].id)
            }
            for(var i = 0; i< this.checkList.length;i++){
                if(clist2.indexOf(this.checkList[i]) !== -1){
                    clist.push(this.checkList[i])
                }
            }
            this.checkList2 = JSON.parse(JSON.stringify(clist));
            this.checkAll = this.checkList2.length == this.classJuri.length;
            this.ischeckAll = !this.checkList2.length;
            this.juriDialog = true
        },
        checkAllChange(){
            if(this.checkAll){
                this.checkList2 = []
                for(var i = 0; i < this.classJuri.length; i++){
                    this.checkList2.push(this.classJuri[i].id)
                }
                this.ischeckAll = false
            }else{
                this.checkList2 = []
                this.ischeckAll = true
            }
        },
        ischeckAllChange(){
            if(this.ischeckAll){
                this.checkAll = false
                this.checkList2 = []
            }else{
            }
            this.ischeckAll = !this.checkList2.length;

        },
        pChange(val){
            if(val.length == this.classJuri.length){
                this.checkAll = true
            }else{
                this.checkAll = false
            }
            this.ischeckAll = !this.checkList2.length;
        },
        confirmCheck(){
            this.checkList = JSON.parse(JSON.stringify(this.checkList2));
            this.$emit("update:juriList", this.checkList)
            this.juriDialog = false
        }
    },
    mounted() {
        this.courseTypeId = this.depthCopy(this.testType)
        this.courseName = this.depthCopy(this.title)
        this.isTeacherSee = this.depthCopy(this.see)
        this.manualJson = this.depthCopy(this.cJson)
        this.typeCheck = this.depthCopy(this.typeid)
        this.courseText = this.depthCopy(this.brief)
        this.sJuri = this.depthCopy(this.juri)
        this.selectedDate = this.depthCopy(this.overDate)
        this.checkList = this.depthCopy(this.juriList)
        
        this.$forceUpdate()
        // this.selectAllType();
        this.selectType();
        this.getClass2();
    }
}
</script>

<style scoped>
.rightBox {
    width: calc(100%);
    background: #F0F2F5;
    overflow: auto;
    height: calc(100%);
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}

.whiteBg {
    /* background: #fff; */
    border-radius: 10px;
}

.basic_box {
    margin: 0 auto;
    position: relative;
    padding: 0 20px 0 20px;
}

.big_box {
    /* margin-top: 20px; */
    display: flex;
    justify-content: space-between;
    /* border-bottom: 1px solid #E0E2ED; */
}

.left_first {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: calc(100%);
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 5px;
}

.course_input_box {
    display: flex;
    margin-right: 20px;
    width: 100%;
    align-items: center;
    position: relative;
}

.course_input_box>.binfo_input {
    width: calc(100% - 290px);
    margin: 0 10px;
}

.bb_courseIcon {
    width: 57px;
    height: 45px;
    background: #F0F4FA;
    border-radius: 5px 0px 0px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1.5px solid rgb(202, 209, 220);
    box-sizing: border-box;
    position: absolute;
    left: 1.5px
}

.bb_courseIcon>img {
    width: 25px;
    height: auto
}

.all_choose {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
}

.all_choose+.all_choose {
    /* margin-top: 10px */
}

.all_choose>span {
    min-width: fit-content;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 20px;
    font-weight: bold;
    font-size: 14px;
}

.all_choose>>>.el-checkbox-group {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    margin-top: 3px;
}

.all_choose>.el-checkbox-group>>>.el-checkbox {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 10px;
}

.all_choose>.el-checkbox-group>.el-checkbox>>>.el-checkbox__label {
    min-width: 80px;
    overflow: hidden;
    width: 80px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.all_choose>.el-checkbox-group>.el-checkbox>>>.el-checkbox__label:hover {
    width: auto;
}

.choose>div:nth-child(3)>span {
    /* letter-spacing: 0 !important; */
}

.choose {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-evenly;
    align-items: flex-start;
}

.both {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    margin: 15px 0;
}

.binfo_input {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    display: block;
    min-width: 0;
    outline: none;
    box-sizing: border-box;
    background: none;
    border: none;
    border-radius: 4px;
    background: #fff;
    font-size: 16px;
    resize: none;
    font-family: 'Microsoft YaHei';
    min-height: 48px;
    border: 1.5px solid #CAD1DC;
}

.c_info_title {
    padding: 15px 0 15px 0;
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    line-height: 20px;
}

.c_info_title::before {
    content: '';
    display: block;
    width: 3px;
    height: 20px;
    background: #0061FF;
    border-radius: 3px;
    margin: 0 5px 0 0;
}

.c_info_box {
    width: 100%;
}

.c_info_tab {
    display: flex;
    align-items: center;
    justify-content: center;
}

.c_info_tab>span {
    cursor: pointer;
    padding-bottom: 10px;
    font-weight: bold;
}

.c_info_tab>span+span {
    margin-left: 20px;
}

.c_info_tab>.active {
    color: #3e88f4;
    border-bottom: 2px solid #2f80f3;
}


.c_info_tab_box {
    overflow: hidden;
}

.skip_btn {
    position: absolute;
    right: 20px;
}

.typeBox {
    margin-top: 20px;
}

.typeBox>span {
    font-weight: bold;
    font-size: 14px;
}

.binfo_textarea {
    border: 1.5px solid #CAD1DC;
    font-size: 16px;
    resize: none;
    /* background: #f6f6f6; */
    font-family: 'Microsoft YaHei';
}


.checkJuri {
    width: 220px;
    height: 40px;
    border: 1px solid #DCDFE6;
    padding: 0 15px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-left: 5px;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    font-size: 14px;
    color: #464646;
}


.dialog_diy>>>.el-dialog {
    /* height: 100%; */
    /* margin: 15vh 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;
}

.people_name>>>.el-checkbox {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.people_name>>>.el-checkbox__label {
  text-overflow: ellipsis;
  overflow: hidden;
  width: calc(100%);
}

.people_name2>>>.el-checkbox__label {
  width: calc(100% - 130px);
}
</style>