fontend-manager/src/views/train/case-detail.vue

<template>
    <div class="caseInputForm">
        <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm" class="demo-form-inline" label-width="90px">
            <el-card class="box-card">
                <div slot="header">
                    <span class="item-title-font"><i class="el-icon-minus icon-minus-rotated"></i>实训信息</span>
                    <el-button type="primary" style="float: right;" size="medium" @click="goBackList">返回</el-button>
                </div>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="实训名称" prop="name">
                            <el-input v-model.trim="dataForm.name" :disabled="formAction==2" placeholder="实训名称" style="width: 280px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="实训用途" prop="type">
                            <el-select v-model="dataForm.type" placeholder="实训用途" :disabled="formAction==2">
                                <el-option label="考核" value="1"></el-option>
                                <el-option label="练习" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header">
                    <span class="item-title-font"><i class="el-icon-minus icon-minus-rotated"></i>判分设置</span>
                    <!--<span style="float: right;vertical-align: middle;line-height: 29px;">合计：{{dataForm.totalScore}} 分</span>-->
                </div>
                <div class="target-set">
                    <el-row :gutter="20">
                        <el-col :span="1" style="text-align:center;padding-top: 182px;width: 76px;">量化指标</el-col>
                        <el-col :span="7">
                            <el-table ref="leftTable" :data="tableData.filter(data => !searchName || data.name.toLowerCase().includes(searchName.toLowerCase()))"
                                      height="400" border highlight-current-row tooltip-effect="dark" @selection-change="handleSelectionChange">
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column label="未选择 10/10">
                                    <el-table-column prop="name" label="名称" show-overflow-tooltip>
                                        <template slot="header" slot-scope="scope">
                                            <el-input v-model="searchName" size="mini" placeholder="输入指标名称模糊搜索"/>
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                            </el-table>
                        </el-col>
                        <el-col :span="1" style="text-align:center;padding-top: 160px;">
                            <el-button @click="addStaff" size="mini" type="primary" icon="el-icon-arrow-right" circle></el-button>
                            <el-button @click="removeStaff" size="mini" type="primary" icon="el-icon-arrow-left" circle style="margin-left: 0;margin-top: 10px;"></el-button>
                        </el-col>
                        <el-col :span="14">
                            <el-table ref="rightTable" :data="tableData" height="400" border highlight-current-row tooltip-effect="dark" @selection-change="handleSelectionChange">
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column label="已选择 0/10，剩余可配置分数 90 分">
                                    <el-table-column prop="name" label="名称"></el-table-column>
                                    <el-table-column prop="target" label="任务目标" width="256">
                                        <template slot-scope="scope">
                                            <el-form-item :prop="'tradeList.'+scope.$index+'.score'" :rules="dataRule.score" class="score-input" >
                                                <el-select size="small" style="width: 100px;">
                                                    <el-option label="大于" value="1"></el-option>
                                                    <el-option label="小于" value="2"></el-option>
                                                </el-select>
                                                <el-input size="small" v-model.trim="scope.row.score" :disabled="formAction == 2" style="width: 120px;">
                                                    <template slot="append">%</template>
                                                </el-input>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="score" label="分数" width="160">
                                        <template slot-scope="scope">
                                            <el-form-item :prop="'tradeList.'+scope.$index+'.score'" :rules="dataRule.score" class="score-input">
                                                <el-input size="small" v-model.trim="scope.row.score" :disabled="formAction == 2" style="width: 120px;"></el-input>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
            <div style="text-align: center;">
                <el-form-item>
                    <el-button type="primary" @click="doAddCaseData()">确定</el-button>
                    <el-button @click="goBackList">取消</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: 'case-detail',
        data() {
            // 自定义校验规则
            var validateScore = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入分数'));
                } else if (!(/^(([1-9][0-9]*)|(([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2})))$/.test(value)) || value > 100) {
                    callback(new Error('请输入0-100之间最多两位小数的数字'));
                } else {
                    callback();
                }
            };
            var validateContent = (rule, value, callback) => {
                if (!value.trim()) {
                    callback(new Error('请填写案例描述'));
                } else if (value.length > 3000) {
                    callback(new Error('长度在 1 到 3000 个字符'));
                } else {
                    callback();
                }
            };
            return {
                tableData: [{
                    name: '王小虎',
                }, {
                    name: '王小虎',
                }, {
                    name: '王小虎',
                }, {
                    name: '王小虎',
                }, {
                    name: '王小虎',
                }],
                searchName: '',
                tableData2: [{
                    name: '王小虎',
                }, {
                    name: '王小虎',
                }, {
                    name: '王小虎',
                }, {
                    name: '王小虎',
                }, {
                    name: '王小虎',
                }],
                isShowData: false,
                tradeDialogVisible: false,
                isShowTradeDelBtn: false,
                formAction: 0, // 0：add,1:edit,2:view
                dataForm: {
                    id: '',
                    type: '',
                    name: '',
                    content: '',
                    totalScore: 0,
                    caseDataList: [],
                    tradeList: [],
                    isAdmin: 1, // 默认 管理员内置
                },
                dataRule: {
                    name: [
                        { required: true, message: '请输入项目名称', trigger: 'blur' },
                        { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请选择项目权限', trigger: 'change' }
                    ],
                    content: [
                        {validator: validateContent, trigger: 'blur'}
                    ],
                    score: [
                        {validator: validateScore, trigger: 'blur'}
                    ],
                },
                dictCaseDataList: [],
                selectedItemRows: [],
                selectedTradeItems: [],
                delTradeItems: [],
                tradeNotInIds: [],
            }
        },
        created() {
            if (this.$route.query.id) {
                this.dataForm.id = this.$route.query.id;
                this.$http.get('/authapi/bs_projectManage/getDetail?id=' + this.dataForm.id).then(response => {
                    this.dataForm = response;
                    // 下拉框标签回显问题
                    this.dataForm.type = String(response.type);
                    // 回显案例数据
                    this.selectedItemRows = this.dataForm.caseDataList;
                    // 计分交易赋值
                    this.selectedTradeItems = this.dataForm.tradeList;

                    if (this.$route.query.isEdit === 1) {
                        // 编辑
                        this.formAction = 1;
                        if (this.selectedTradeItems && this.selectedTradeItems.length > 0) {
                            this.isShowTradeDelBtn = true;// 显示删除按钮
                        }
                    } else {
                        // 查看
                        this.formAction = 2;
                    }
                });
            }
        },
        methods: {
            goBackList() {
                // this.$router.push({name: 'CaseList'});
                this.$router.go(-1);
            },
            goBackAdd() {
                this.isShowData = false;
            },
            toAddCaseData() {
                // 页面滚动条回到顶部
                window.scrollTo(0, 0);
                this.isShowData = true;
                this.getCaseData(null);
            },
            getCaseData(condition) {
                this.$http.get('/authapi/bs_projectManage/getDictCaseDataList', {params: condition}).then(response => {
                    this.dictCaseDataList = response;

                    // 对于已经确定勾选的，在此打开选择界面，需回显已勾选的数据
                    if (this.selectedItemRows && this.selectedItemRows.length > 0) {
                        let selectedItemIds = this.selectedItemRows.map(function (row) {
                            return row.id;
                        });
                        this.dictCaseDataList.forEach(p => {
                            if (selectedItemIds.indexOf(p.id) > -1) {
                                p.checked = true;
                            }
                        });
                    }
                });
            },
            handleItemSelectionChange(val) {
                this.selectedItemRows = val;
            },
            doAddCaseData() {
                if (!this.selectedItemRows || this.selectedItemRows.length === 0) {
                    this.$notify.warning({
                        title: '系统提示',
                        message: '您没选择任何数据，请先选择！',
                        duration: 2000,
                    });
                    return;
                }
                this.isShowData = false;
                this.dataForm.caseDataList = this.selectedItemRows;
            },
            cancelAddCaseData() {
                this.isShowData = false;
                this.selectedItemRows = this.dataForm.caseDataList;
            },
            getFileUrl(file) {
                return window.SITE_CONFIG['serverUrl'] + file.imgUrl;
            },
            toAddTrade() { // 打开添加计分点弹窗
                this.tradeDialogVisible = true;
                // 获取已添加的交易id集合
                this.tradeNotInIds = this.selectedTradeItems.map(item => {
                    return item.id;
                });
            },
            doAddSelectTrade(val) {// 添加已选中的计分点到新增界面
                if (this.selectedTradeItems && this.selectedTradeItems.length > 0) {
                    // 追加val数组的所有元素
                    this.selectedTradeItems.push.apply(this.selectedTradeItems, val);
                } else {
                    this.selectedTradeItems = val;
                }
                this.dataForm.tradeList = this.selectedTradeItems;
                this.dataForm.tradeList.forEach(item => {
                    this.$set(item, 'score', '');
                    // this.$set(item, 'tradeId', item.id);
                });

                this.isShowTradeDelBtn = true;// 显示删除按钮
            },
            closeTradeDialog() { // 关闭计分点弹窗
                this.tradeDialogVisible = false;
            },
            handleTradeSelectionChange(val) {
                this.delTradeItems = val;
            },
            checkboxIsEnabled() { // 复选框是否可用
                if (this.formAction === 2) {
                    return false;
                } else {
                    return true;
                }
            },
            removeTradeItemBatch() { // 批量移除选中项
                if (!this.delTradeItems || this.delTradeItems.length === 0) {
                    this.$notify.warning({
                        title: '系统提示',
                        message: '您没选择任何数据，请先选择！',
                        duration: 2000,
                    });
                    return;
                }
                // 遍历当前选中项
                this.delTradeItems.forEach(item => {
                    if (this.selectedTradeItems.indexOf(item) > -1) {
                        // 移除当前项
                        this.selectedTradeItems.splice(this.selectedTradeItems.indexOf(item), 1);
                        // this.dataForm.tradeList.splice(this.dataForm.tradeList.indexOf(item), 1);
                    }
                });
                if (this.selectedTradeItems.length === 0) {
                    this.isShowTradeDelBtn = false; // 隐藏删除按钮
                }
            },
            removeTradeItem(row) { // 移除当前行
                let index = this.selectedTradeItems.findIndex(item => {
                    return item.id == row.id;
                });
                if (index > -1) {
                    this.selectedTradeItems.splice(this.selectedTradeItems.indexOf(row), 1);
                }
            },
            moveUpTradeItem(index,row) { // 向上移动
                let that = this;
                // console.log('上移', index, row);
                // console.log(that.dataForm.tradeList[index]);
                if (index > 0) {
                    let upDate = that.dataForm.tradeList[index - 1];
                    that.dataForm.tradeList.splice(index - 1, 1);
                    that.dataForm.tradeList.splice(index, 0, upDate);
                } else {
                    alert('已经是第一条，不可上移');
                }
            },
            moveDownTradeItem(index,row) { // 向下移动
                let that = this;
                // console.log('下移', index, row);
                if ((index + 1) === that.dataForm.tradeList.length) {
                    alert('已经是最后一条，不可下移');
                } else {
                    // console.log(index);
                    let downDate = that.dataForm.tradeList[index + 1];
                    that.dataForm.tradeList.splice(index + 1, 1);
                    that.dataForm.tradeList.splice(index, 0, downDate);
                }
            },
            getScoreSummaries(param) { // 计算总分
                const { columns, data } = param;
                const sums = [];
                let values = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总分';
                        return;
                    }

                    if (index === 6) { // 分数栏
                        values = data.map(item => Number(item['score']));
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        // 给右上角总分赋值
                        this.$set(this.dataForm,'totalScore',sums[index]);
                        sums[index] += ' 分';
                    } else {
                        sums[index] = '--';
                    }
                });

                return sums;
            },
            submitForm(formName) {
                let self = this;
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let totalScore = self.dataForm.totalScore;
                        if (totalScore === 0) {
                            self.$notify.error({
                                title: '错误提示',
                                message: '判分设置模块没有添加计分点！',
                                duration: 2000,
                            });
                            return;
                        } else if (totalScore > 100) {
                            self.$notify.error({
                                title: '错误提示',
                                message: '判分设置模块总分超过100分！',
                                duration: 2000,
                            });
                            return;
                        } else if (totalScore < 100) {
                            self.$notify.error({
                                title: '错误提示',
                                message: '判分设置模块总分不足100分！',
                                duration: 2000,
                            });
                            return;
                        }
                        // userType 0学生 1教师 2管理员
                        if (self.formAction == 0 && self.$store.state.app.user.userType) {
                            self.dataForm.isAdmin = self.$store.state.app.user.userType == 1 ? 0 : 1;
                        }

                        self.$http.post('/authapi/bs_projectManage/addOrUpdateProject', self.dataForm).then(response => {
                            if(response.status==1) {
                                self.dataForm = Object.assign({}, self.dataForm, response.id);
                                self.formAction = 1;
                                self.$notify.success({
                                    title: '操作成功！',
                                    message: '新增项目成功！',
                                    duration: 2000,
                                });
                                self.goBackList();
                            }else{
                                self.$message.error(response.msg);
                            }
                        }).catch(error => {
                            self.$message.error(error);
                        })
                    } else {
                        self.$notify.error({
                            title: '错误提示',
                            message: '系统输入验证失败！',
                            duration: 2000,
                        });
                        return false;
                    }
                });
            }
        }
    }
</script>

<style lang="scss">
    .caseInputForm{
        .box-card {
            margin-bottom: 10px;
            .el-card__header{
                border-bottom: 1px dashed #c9cacc;
                padding-bottom: 10px;
                padding-top: 10px;
                height: auto;
            }
            .el-button--medium{
                padding: 8px 20px;
            }
            .el-form-item.is-required .el-form-item__label:after {
                content: '';
            }
            .target-set{
                .score-input {
                    margin-bottom: 0px;
                    /deep/ .el-form-item__error {
                        position: unset;
                    }
                }
            }

            .icon-minus-rotated:before {
                -ms-transform: rotate(90deg); /* IE 9 */
                -moz-transform: rotate(90deg); /* Firefox */
                -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
                -o-transform: rotate(90deg); /* Opera */
                transform: rotate(90deg);
                display: inline-block;
                font-weight: bolder;
            }

            .item-title-font {
                font-weight: bold;
                font-size: 15px;
                vertical-align: middle;
                line-height: 29px;
            }
        }
    }
</style>