bigDataStudent/src/views/analysisReport/studentPage/studentCase/mainPage.vue

<template>
    <div class="page_report">
        <div class="report_module">
            <div class="introduction">
                <img src="@/assets/studentCase/banner.webp" />
            </div>
            <div class="module_common">
                <div class="module_common_title question_1">1.请填写你对各科的目标分数和目标排名。</div>
                <div class="module_common_content module_table">
                    <el-table :data="tableData" border stripe align="center">
                        <el-table-column align="center" prop="target" label="目标" width="148" v-if="tableData.length > 0"></el-table-column>
                        <!-- 各科列 -->
                        <el-table-column align="center" v-for="subject in subjects" :key="subject" :label="subject">
                            <template slot-scope="scope">
                                <template v-if="!isEdit">
                                    {{ scope.row[subject] }}
                                </template>
                                <el-input v-else v-model="scope.row[subject]" style="width: 100%;" @input="ValidateNumber(scope.row,subject)" />
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="module_common">
                <div class="module_common_title question_2">2.请选择你认为的第1个薄弱学科，并填写你对该学科的计划和困惑。</div>
                <div class="module_common_content text_padding">
                    <div class="common_content_title">薄弱学科1</div>
                    <div class="common_content_select">
                        <el-select v-model="firstWeakSubject.subjectName" placeholder="请选择科目" @change="ChangeFirstWeakSubject">
                            <el-option v-for="(item,index) in subjects" :key="`subject_1_${index}`" :label="item" :value="item"></el-option>
                        </el-select>
                    </div>
                    <div class="common_content_subtitle">计划和困惑</div>
                    <div class="common_content_text">
                        <el-input v-if="isEdit" type="textarea" placeholder="请输入你对该学科的计划和困惑。" v-model="firstWeakSubject.textValue" :rows="9" maxlength="1000" show-word-limit></el-input>
                        <template v-else>
                            <!-- <p>一、现状分析</p> -->
                             {{ firstWeakSubject.textValue }}
                        </template>
                    </div>
                </div>
            </div>
            <div class="module_common">
                <div class="module_common_title question_3">3.请选择你认为的第2个薄弱学科，并填写你对该学科的计划和困惑。</div>
                <div class="module_common_content text_padding">
                    <div class="common_content_title">薄弱学科2</div>
                    <div class="common_content_select">
                        <el-select v-model="secondWeakSubject.subjectName" placeholder="请选择科目" @change="ChangeSecondWeakSubject">
                            <el-option v-for="(item,index) in subjects" :key="`subject_2_${index}`" :label="item" :value="item"></el-option>
                        </el-select>
                    </div>
                    <div class="common_content_subtitle">计划和困惑</div>
                    <div class="common_content_text">
                        <el-input v-if="isEdit" type="textarea" placeholder="请输入你对该学科的计划和困惑。" v-model="secondWeakSubject.textValue" :rows="9" maxlength="1000" show-word-limit></el-input>
                        <template v-else>
                            <!-- <p>一、现状分析</p> -->
                            {{ secondWeakSubject.textValue }}
                        </template>
                    </div>
                </div>
            </div>
            <div class="module_common">
                <div class="module_common_title question_4">4.针对学习上的问题，你最想与哪位老师沟通？并想让老师提供什么帮助？</div>
                <div class="module_common_content text_padding">
                    <div class="common_content_text">
                        <el-input v-if="isEdit" type="textarea" placeholder="请输入你对该学科的计划和困惑。" v-model="needTeacherValue" :rows="9" maxlength="1000" show-word-limit></el-input>
                        <template v-else>
                            {{ needTeacherValue }}
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <GotoTop></GotoTop>
    </div>
</template>
<script>
import GotoTop from '@/views/analysisReport/components/GotoTop' //分析报告页面底部回到顶部组件
export default {
    name: 'oneStudOneCase',
    components: {
        GotoTop
    },
    data() {
        return {
            subjects:[],//科目
            subjectsCode:[],//科目code
            tableData: [],//表格数据
            id: '',
            examId: '',
            schoolId: '',
            studentName: '',
            studentNo: '',
            studentCode: '',
            firstWeakSubject:{
                subjectCode: 10,
                subjectName: '',
                textValue: ''
            },//第一个薄弱学科
            secondWeakSubject:{
                subjectCode: 10,
                subjectName: '',
                textValue: ''
            },//第二个薄弱学科
            needTeacherValue:'',//
            isEdit:false,//是否可编辑
        }
    },
    computed: {
        reportParam() {
            return {
                examId: this.$store.state.report.filterObject.examId, //考试id
            }
        },
    },
    mounted() {
        this.GetOneStudentOneCase();
    },
    methods: {
        ValidateNumber(row,subject) {
            // 只允许数字输入
            row[subject] = row[subject].replace(/[^0-9.]/g, '');
        },
        // 查询学生一生一案数据
        GetOneStudentOneCase() {
            this.$api.reportStudent.jointSchoolReport.getOneStudentOneCase(this.reportParam).then(res => {
                if (res.code == 200 && res.data) {
                    const {id,examId,schoolId,studentName,studentNo,studentCode,subjectVoList,studentGoalVoList,firstWeakSubject,secondWeakSubject,needTeacherValue} = res.data;
                    if(studentGoalVoList){
                        const studentGoalList = studentGoalVoList || [];
                        this.subjects = [];
                        this.subjectsCode = [];
                        this.tableData = [];
                        let obj1 = {target: '目标分数'},obj2 = {target: '目标排名'};
                        studentGoalList.forEach(item => {
                            this.subjects.push(item.subjectName);
                            this.subjectsCode.push(item.subjectCode);
                            obj1[item.subjectName] = item?.goalScore || '-';
                            obj2[item.subjectName] = item?.goalRank || '-';
                        });
                        this.tableData.push(obj1,obj2)
                    }else{
                        const subjectList = subjectVoList || [];
                        this.subjects = [];
                        this.subjectsCode = [];
                        this.tableData = [];
                        let obj1 = {target: '目标分数'},obj2 = {target: '目标排名'};
                        subjectList.forEach(item => {
                            this.subjects.push(item.subjectName);
                            this.subjectsCode.push(item.subjectCode);
                            obj1[item.subjectName] = '-';
                            obj2[item.subjectName] = '-';
                        });
                        this.tableData.push(obj1,obj2)
                    }
                    this.id = id;
                    this.examId = examId;
                    this.schoolId = schoolId;
                    this.studentName = studentName;
                    this.studentNo = studentNo;
                    this.studentCode = studentCode;
                    this.firstWeakSubject = {
                        subjectCode: firstWeakSubject?.subjectCode || '',
                        subjectName: firstWeakSubject?.subjectName || '',
                        textValue: firstWeakSubject?.textValue || '暂无'
                    };//第一个薄弱学科
                    this.secondWeakSubject = {
                        subjectCode: secondWeakSubject?.subjectCode || '',
                        subjectName: secondWeakSubject?.subjectName || '',
                        textValue: secondWeakSubject?.textValue || '暂无'
                    };//第二个薄弱学科
                    this.needTeacherValue = needTeacherValue || '暂无';
                } else {
                    this.subjects = [];//科目
                    this.subjectsCode = [];//科目code
                    this.tableData = [];//表格数据
                    this.id = '';
                    this.examId = '';
                    this.schoolId = '';
                    this.studentName = '';
                    this.studentNo = '';
                    this.studentCode = '';
                    this.firstWeakSubject = {
                        subjectCode: '',
                        subjectName: '',
                        textValue: '暂无'
                    };//第一个薄弱学科
                    this.secondWeakSubject = {
                        subjectCode: '',
                        subjectName: '',
                        textValue: '暂无'
                    };//第二个薄弱学科
                    this.needTeacherValue = '暂无';
                }
            })
        },
        //编辑
        EditOneStudOneCase(isEdit){
            this.isEdit = isEdit;
            if(!isEdit){
                const studentGoalVoList = this.subjects.map((item,index)=>{
                    return {
                        subjectCode: this.subjectsCode[index],
                        subjectName: item,
                        goalScore: this.tableData[0][item],
                        goalRank: this.tableData[1][item]
                    }
                });
                this.$api.reportStudent.jointSchoolReport.changeOneStudentOneCase({
                    id:this.id,
                    examId:this.examId,
                    schoolId:this.schoolId,
                    studentName:this.studentName,
                    studentNo:this.studentNo,
                    studentCode:this.studentCode,
                    studentGoalVoList:studentGoalVoList,
                    firstWeakSubject:this.firstWeakSubject,
                    secondWeakSubject:this.secondWeakSubject,
                    needTeacherValue:this.needTeacherValue
                }).then(res => {
                    if(res.code == 200){
                        this.$message.success(res.msg);
                    }else{
                        this.$message.error(res.msg);
                    }
                })
            }
        },
        ChangeFirstWeakSubject(val){
            const index = this.subjects.indexOf(val);
            this.firstWeakSubject.subjectCode = this.subjectsCode?.[index] || '';
        },
        ChangeSecondWeakSubject(val){
            const index = this.subjects.indexOf(val);
            this.secondWeakSubject.subjectCode = this.subjectsCode?.[index] || '';
        }
    }
}
</script>
<style lang="scss" scoped>
.report_module {
    padding: 20px;
    box-sizing: border-box;

    .introduction {
        width: 100%;
        // height: 200px;
        // background: url('@/assets/studentCase/banner.webp') left top no-repeat;
        background-size: cover;
        // background: linear-gradient( 281deg, #007EFF 0%, #1F8FFE 10.96%, #89C8FB 34.86%, #CFE8FE 73.44%, #E5ECFC 100%);
        border-radius: 20px 20px;
        overflow: hidden;

        img {
            width: 100%;
        }
    }

    .module_common {
        margin-top: 40px;
        width: 100%;
        padding-top: 40px;
        position: relative;

        .module_common_title {
            position: absolute;
            z-index: 2;
            left: 0;
            top: 0;
            font-weight: 600;
            font-size: 16px;
            line-height: 40px;
            color: #FFFFFF;
            padding-left: 24px;

            &.question_1 {
                width: 367px;
                height: 50px;
                background: url('@/assets/studentCase/question_1.webp') left top no-repeat;
                background-size: 100% 100%;
            }

            &.question_2 {
                width: 556px;
                height: 50px;
                background: url('@/assets/studentCase/question_2.webp') left top no-repeat;
                background-size: 100% 100%;
            }

            &.question_3 {
                width: 556px;
                height: 50px;
                background: url('@/assets/studentCase/question_3.webp') left top no-repeat;
                background-size: 100% 100%;
            }

            &.question_4 {
                width: 596px;
                height: 50px;
                background: url('@/assets/studentCase/question_4.webp') left top no-repeat;
                background-size: 100% 100%;
            }
        }

        .module_common_content {
            width: 100%;
            background: #F4F9FF;
            border-radius: 0px 10px 10px 10px;

            &.module_table {
                padding: 40px;
                box-sizing: border-box;

                :deep(.el-table) {
                    border-radius: 6px;
                    border: 1px solid #5AAFFF;
                    border-right: 0px solid #5AAFFF;
                    border-bottom: 0px solid #5AAFFF;
                    .el-table__header th {
                        background-color: #EEF7FF;
                        color: #303133;
                        font-weight: 500;
                        font-size: 16px;
                        .cell {
                            color: #303133;
                            font-weight: 500;
                            font-size: 16px;
                        }
                    }
                    .el-table__body-wrapper {
                        table {
                            tr {
                                td {
                                    border-right: 1px solid #5AAFFF;
                                    border-bottom: 1px solid #5AAFFF;
                                    &:first-child{
                                        background-color: #EEF7FF;
                                    }
                                    .el-input__inner{
                                        height: 36px;
                                        line-height: 36px;
                                        font-weight: 400;
                                        font-size: 16px;
                                        color: #333333;
                                        text-align: center;
                                    }
                                }

                                td:nth-last-child(2) {
                                    border-right: 1px solid #5AAFFF;
                                }

                                td:last-child,
                                th:last-child {
                                    border-right: 0px solid #5AAFFF;
                                }
                            }
                        }
                    }

                    thead {
                        color: #333333 !important;
                        font-weight: 500;
                        font-size: 16px;
                        height: 50px;
                    }

                    .cell {
                        font-size: 16px;
                        color: #333333;
                        line-height: normal !important;
                    }

                    .el-table__cell {
                        padding: 0;
                        height: 50px;
                    }
                }
            }
            .el-table::before, .el-table--group::after, .el-table--border::after{
                background-color:#5AAFFF;
            }
            :deep(.el-table__fixed)::before, :deep(.el-table__fixed-right)::before{
                background-color:#5AAFFF;
            }
            :deep(.el-table--border) .el-table__cell{
                border-right: 1px solid #5AAFFF;
            }
            :deep(.el-table) th.el-table__cell.is-leaf, :deep(.el-table) td.el-table__cell{
                border-bottom: 1px solid #5AAFFF;
            }
            &.text_padding{
                min-height: 240px;
                padding: 30px 20px 20px;
                box-sizing: border-box;
                .common_content_title{
                    display: flex;
                    width: 100%;
                    font-weight: 600;
                    font-size: 16px;
                    color: #333333;
                    line-height: 22px;
                }
                .common_content_select{
                    display: flex;
                    width: 100%;
                    margin-top: 10px;
                    :deep(.el-input__inner){
                        height: 36px;
                        line-height: 36px;
                        padding:0 12px;
                        background-color: #F4F9FF;
                        border-radius: 4px;
                        border: 1px solid #DCDFE6;
                    }
                    :deep(.el-input__icon){
                        line-height: 36px;
                    }
                }
                .common_content_subtitle{
                    display: flex;
                    width: 100%;
                    margin: 30px 0 10px;
                    font-weight: 600;
                    font-size: 16px;
                    color: #333333;
                    line-height: 22px;
                }
                .common_content_text{
                    display: flex;
                    width: 100%;
                    flex-direction: column;
                    :deep(.el-textarea__inner){
                        border-radius: 10px;
                        border: 1px solid #DCDFE6;
                        font-weight: 400;
                        font-size: 14px;
                        color: #333333;
                        line-height: 24px;
                    }
                    p{
                        width: 100%;
                        font-weight: 400;
                        font-size: 14px;
                        color: #333333;
                        line-height: 24px;
                    }
                }
            }
        }
    }
}
</style>