<template> <div> <el-form :disabled="isDetail"> <el-card shadow="hover" class="m-b-20"> <div class="flex-between"> <el-page-header @back="goBack" content="项目配置"></el-page-header> <div v-if="!isDetail"> <el-button v-if="!projectId" type="success" size="small" @click="handleSubmit(0)">保存为草稿</el-button> <el-button type="primary" size="small" @click="handleSubmit(1)">确定并发布</el-button> </div> </div> </el-card> <el-card shadow="hover" class="m-b-20"> <h6 class="p-title">基本信息</h6> <div> <el-form label-width="80px"> <div class="flex"> <el-form-item label="项目名称"> <el-input :disabled="isDetail" v-model.trim="projectManage.projectName" placeholder="20个字符以内" @blur="projectNameExistis"></el-input> </el-form-item> <el-form-item label="项目权限"> <el-select :disabled="isDetail" v-model="projectManage.permissions" placeholder="请选择"> <el-option label="练习" :value="0"></el-option> <el-option label="考核" :value="1"></el-option> <el-option label="竞赛" :value="2"></el-option> </el-select> </el-form-item> <el-form-item label="系统"> <el-select :disabled="isDetail" v-model="projectManage.systemId" placeholder="请选择" @change="systemChange"> <el-option v-for="item in systemList" :key="item.value" :label="item.label" :value="item.id" ></el-option> </el-select> </el-form-item> </div> </el-form> </div> </el-card> <el-card shadow="hover" class="m-b-20"> <h6 class="p-title">实验目标</h6> <div> <el-form label-width="0"> <el-form-item> <quill :border="true" :readonly="isDetail" v-model="projectManage.experimentTarget" :minHeight="150" :height="150" /> </el-form-item> </el-form> </div> </el-card> <el-card shadow="hover" class="m-b-20"> <h6 class="p-title">案例描述</h6> <div> <el-form label-width="0"> <el-form-item> <quill :border="true" :readonly="isDetail" v-model="projectManage.experimentDescription" :minHeight="150" :height="150" /> </el-form-item> </el-form> </div> </el-card> <el-card shadow="hover" class="m-b-20"> <div class="m-b-20 flex-between"> <h6 class="p-title" style="margin-bottom: 0">实验任务</h6> <div> <!--<el-button :disabled="isDetail" type="primary" @click="toJudgePoint('home')">进入判分点</el-button>--> </div> </div> <div class="m-b-20 flex-between"> <div class="flex-center"> <div class="m-r-20" style="color: #f00">项目总分值:100分</div> <!-- <div>权重 <div class="dib"><el-input></el-input></div></div> --> </div> <div> <el-button :disabled="isDetail" class="m-r-20" type="text" @click="avgDistributionScore">平均分配分值</el-button> <el-button :disabled="isDetail" class="m-r-20" type="text" @click="manualDistributionScore">手动分配分值</el-button> <span>(待分配分值: {{ handDistributionScore }}/100分)</span> </div> </div> <el-button :disabled="isDetail" type="primary" icon="el-icon-plus" round @click="handleQueryJudgment" style="margin-bottom: 10px">判分点</el-button> <el-button :disabled="isDetail" type="primary" icon="el-icon-delete" round @click="batchDeleteProjectJudgment" style="margin-bottom: 10px">批量删除</el-button> <div class="draggable" style="padding: 20px"> <el-table ref="projectJudgementTable" :data="projectJudgmentData" class="table" stripe header-align="center" @selection-change="handleSelectionProjectJudgment" row-key="judgmentId" > <el-table-column type="selection" width="55" align="center"></el-table-column> <el-table-column prop="sort" label="序号" width="80" align="center"> <template slot-scope="scope"> {{scope.row.sort}} </template> </el-table-column> <el-table-column prop="name" label="判分指标" align="center"></el-table-column> <el-table-column prop="name" label="判分点名称" align="center"></el-table-column> <el-table-column label="实验要求" align="center"> <template slot-scope="scope"> <quill :border="true" :readonly="true" elseRead="true" v-model="scope.row.experimentalRequirements" :minHeight="150" :height="150" /> </template> </el-table-column> <el-table-column label="操作" width="140" align="center"> <template slot-scope="scope"> <!--<el-button :disabled="isDetail" type="text" style="margin-right: 10px" @click="toJudgePoint('edit', scope.row)">自定义</el-button>--> <el-button :disabled="isDetail" type="text" @click="delJudgePoint(scope.$index)">删除</el-button> </template> </el-table-column> <el-table-column prop="score" label="分数" align="center"> <template slot-scope="scope"> <!--type="number"--> <el-input :disabled="isDetail" v-model.trim="scope.row.score" @input="scoreChange(scope.row, scope.$index,$event)"></el-input> </template> </el-table-column> </el-table> </div> </el-card> <el-card shadow="hover" class="m-b-20"> <div class="m-b-20 flex-between"> <h6 class="p-title" style="margin-bottom: 0">实验提示</h6> <div> 启用 <el-switch :disabled="isDetail" :active-value="0" :inactive-value="1" v-model="projectManage.hintOpen"></el-switch> </div> </div> <div> <el-form label-width="0"> <el-form-item prop="tips" label=""> <quill :border="true" :readonly="isDetail" v-model="projectManage.experimentHint" :minHeight="150" :height="150" /> </el-form-item> </el-form> </div> </el-card> </el-form> <!--选择判分点对话框--> <el-dialog title="添加判分点" v-loading="visibleLoading" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false"> <div class="text-right m-b-10"> <div> <el-input placeholder="请输入需要查找的判分点" prefix-icon="el-icon-search" v-model.trim="judgementpointsquery" clearable></el-input> </div> </div> <el-table :data="judgementData" ref="judgementTable" class="table" stripe header-align="center" max-height="400" @selection-change="handleSelectionJudgment" :row-key="rowKey" > <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> <el-table-column prop="id" label="序号" align="center" width="100"> <template slot-scope="scope"> {{ scope.$index + 1 }} </template> </el-table-column> <el-table-column prop="name" label="判分点名称" align="center"></el-table-column> <el-table-column label="操作" align="center" width="100"> <template slot-scope="scope"> <el-button size="mini" @click="toJudgePoint('view', scope.row)">查看</el-button> </template> </el-table-column> </el-table> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="addJudgment">确 定</el-button> </div> </el-dialog> </div> </template> <script> import Setting from "@/setting"; import util from "@/libs/util"; import { mapState, mapActions } from "vuex"; import quill from "@/components/quill"; import Sortable from 'sortablejs'; export default { components: { quill }, data() { return { host: Setting.apiBaseURL, isHh: Setting.isHh, projectId: this.$route.query.projectId, systemList: Setting.systemList, token: btoa(util.local.get(Setting.tokenKey)), isDetail: Boolean(this.$route.query.show), projectManage: { founder: 0, // 创建人角色(0、系统 1、老师) projectName: "", // 项目名称 permissions: 0, // 项目权限(0、练习 1、考核 2、竞赛) systemId: this.$store.state.project.lastSystemId, // 系统id hintOpen: 0, // 实验提示是否开启(0开启 1不开启 默认0) experimentHint: "", // 实验提示 experimentTarget: "", // 实验目标 experimentDescription: "", // 案例描述 state: 0, // 状态(0、草稿箱 1、已发布) isOpen: 0, // 是否开启(0开启 1未开启 默认0) isDel: 0 // 是否删除(0、未删除 1、已删除 默认0) }, projectJudgmentData: [], //实验任务(项目判分点) selectedProjectJudgment: [], // 选中的项目判分点 dialogVisible: false, // 选择判分点对话框 judgementpointsquery: "", //条件筛选判分点 judgementData: [], // 判分点列表数据 selectedJudgment: [], // 选中的判分点 rowKey: "", // 判分点行数据的 Key projectNameRepeat: false, // 项目名称是否重复 flag: false, //判分点表格分数是否禁用 avgValuelist: [], //取得判分点平均分的数组 searchTimer: null, isToPoint: false, // 判断是否是跳转到判分点系统 visibleLoading:false,// 加载弹框 }; }, computed: { ...mapState("project", [ "projectFields", "lastSystemId" ]), handDistributionScore: function() { //计算判分点分值,超出100提示, let score = 0; this.projectJudgmentData.forEach(e => { score += parseInt(e.score); }); if (isNaN(score)) { return 0; } if (score > 100) { util.warningMsg(res.message); util.errorMsg("分配的数值已超过100"); } return score; } }, watch: { projectJudgmentData: { handler(newValue) { console.log("newValue:", newValue); }, deep: true }, judgementpointsquery(n) { clearTimeout(this.searchTimer); this.searchTimer = setTimeout(() => { this.handleQueryJudgment(); }, 500); } }, created() { console.log(this.projectManage.systemId, "this.projectManage.systemId", this.lastSystemId); }, mounted() { if (this.$route.query.projectId) { this.projectId = this.$route.query.projectId; this.getInfoData(); } // 判断有没有缓存数据 if (JSON.stringify(this.projectFields) != "{}") { let { projectManage, projectJudgmentData } = this.projectFields; this.projectManage = projectManage; this.projectJudgmentData = projectJudgmentData; } this.rowDrop() }, beforeDestroy() { if (!this.isToPoint) { this.setProject({}); } }, methods: { ...mapActions("project", [ "setSystemId", "setProject" ]), goBack() { // 返回 if (this.isDetail) { this.$router.back(); } else { this.$confirm("确定返回?未更新的信息将不会保存。", "提示", { type: "warning" }).then(() => { this.$router.back(); }).catch(() => { }); } }, getInfoData() { // 获取详情数据 this.$get(`${this.api.getProjectDetail}?projectId=${this.projectId}`).then(res => { if (res.status === 200) { let { projectManage, projectJudgmentVos } = res; this.projectManage = projectManage; this.projectJudgmentData = projectJudgmentVos; this.projectJudgmentData.forEach((e,i)=>{ e.sort = i+1 }) } else { util.warningMsg(res.message); } }).catch(err => { console.log(err); }); }, projectNameExistis() { // 项目管理名称判重 if (this.projectManage.projectName) { this.$post(this.api.queryNameIsExist, { projectName: this.projectManage.projectName }).then(res => { if (res.status === 200) { this.projectNameRepeat = false; } else { this.projectNameRepeat = true; } }).catch(err => { this.projectNameRepeat = true; }); } else { this.projectNameRepeat = false; } }, systemChange() { // 切换系统 if (this.projectJudgmentData.length) { this.$confirm("更换系统会清空实验任务,确认更换?", "提示", { type: "warning" }).then(() => { this.projectJudgmentData = []; this.setSystemId(this.projectManage.systemId); }).catch(() => { this.projectManage.systemId = this.lastSystemId; console.log(this.lastSystemId, "this.lastSystemId"); }); } }, judgmentRelease() { //判断能否成功发布 let { projectName, experimentTarget, experimentDescription, experimentHint, hintOpen } = this.projectManage; if (!projectName) { util.warningMsg("请输入项目名称"); return false; } if (this.projectNameRepeat) { util.warningMsg("该项目名称已存在"); return false; } if (!experimentTarget) { util.warningMsg("请输入实验目标"); return false; } if (!experimentDescription) { util.warningMsg("请输入案例描述"); return false; } if (this.projectJudgmentData.length == 0) { util.warningMsg("请添加判分点"); return false; } if (this.handDistributionScore < 100) { util.warningMsg("判分点分数未满100"); return false; } if (this.handDistributionScore > 100) { util.warningMsg("判分点分数已超过100"); return false; } if (!experimentHint && hintOpen) { util.warningMsg("请输入实验提示"); return false; } return true; }, handleSubmit(state) { //处理提交 if (!this.judgmentRelease()) { //判断页面是否有没有输入的内容 return; } this.setSystemId(this.projectManage.systemId); this.projectManage.state = state; let tempArr = this.projectJudgmentData.map(i => { let obj = { projectId: this.projectId ? this.projectId : "", judgmentId: i.judgmentId, score: i.score, sort:i.sort }; return obj; }); let params = { projectManage: this.projectManage, projectJudgmentList: tempArr }; let { systemId } = this.projectManage; if (this.projectId) { if (systemId == 2 || systemId == 3) { console.log("系统id:", systemId); } else { // 更新 this.updateProject(params); } } else { if (systemId == 2 || systemId == 3) { console.log("系统id:", systemId); } else { // 添加 this.addProject(params); } } }, updateProject(params) { // 更新项目 this.$post(`${this.api.updateProjectManage}`, params).then(res => { if (res.status === 200) { util.successMsg("更新实验项目成功"); this.$router.back(); } }).catch(err => { console.log(err); }); }, addProject(params) { // 添加项目 this.$post(`${this.api.addProjectManage}`, params).then(res => { if (res.status === 200) { util.successMsg("添加实验项目成功"); this.$router.back(); } }).catch(err => { console.log(err); }); }, manualDistributionScore() { //点击手动分配分值 }, avgDistributionScore() { //点击平均分配分值 if (this.projectJudgmentData.length) { this.$get(this.api.avgValues, { number: this.projectJudgmentData.length }).then(res => { if (res.status === 200 && res.data) { this.projectJudgmentData = this.projectJudgmentData.map((item, index) => { item.score = res.data[index]; return item; }); } }); } }, // handleMoveUp(index) { // 处理上移 // let x = index; // let y = index + 1; // this.projectJudgmentData.splice(x - 1, 1, ...this.projectJudgmentData.splice(y - 1, 1, this.projectJudgmentData[x - 1])); // }, // handleMoveDown(index) { // 处理下移 // let x = index + 1; // let y = index + 2; // this.projectJudgmentData.splice(x - 1, 1, ...this.projectJudgmentData.splice(y - 1, 1, this.projectJudgmentData[x - 1])); // }, scoreChange(row, index,val) { // 暂时解决,输入分数,页面没有更新 this.projectJudgmentData.splice(index, 1, row); }, delJudgePoint(index) { // 删除判分点 this.$confirm("确定要删除吗?", "提示", { type: "warning" }).then(() => { if(this.projectId){ this.deleteProjectJudgment([this.projectJudgmentData[index].id]) }else{ this.projectJudgmentData.splice(index, 1); } }).catch(() => { }); }, handleSelectionProjectJudgment(val) { this.selectedProjectJudgment = val; }, batchDeleteProjectJudgment() { // 批量删除判分点 if (this.selectedProjectJudgment.length) { this.$confirm("确定要删除吗?", "提示", { type: "warning" }).then(() => { // this.projectJudgmentData.splice(index, 1); if(this.projectId){// 编辑项目的时候 let param = this.selectedProjectJudgment.map(e=>e.id) this.deleteProjectJudgment(param)// 调删除接口 }else{ let list = this.projectJudgmentData; let result = []; list.map(i => { this.selectedProjectJudgment.find(j => j.judgmentId === i.judgmentId) || result.push(i); }); this.projectJudgmentData = result; } }).catch(() => { }); } else { util.warningMsg("请选择判分点"); } }, handleQueryJudgment() { // 查询判分点数据 let { systemId } = this.projectManage; this.dialogVisible = true; this.$nextTick(() => { this.$refs.judgementTable.clearSelection(); }); let params = { name: this.judgementpointsquery, pageNum: 1, pageSize: 10000, systemId }; if (systemId == 2 || systemId == 3) { console.log("系统id:", systemId); } else if (systemId == 11) { // (流程)交易类 this.rowKey = "lcId"; this.getProcessClassData(params); } else { // 编程类 this.rowKey = "bcId"; this.getProgrammingClassData(params); } }, getProcessClassData(params) { // 获取流程类判分点列表数据 this.visibleLoading = true this.$post(`${this.api.getLcJudgmentPoint}`, params).then(res => { if (res.status === 200) { let list = res.message.records; let result = []; list.map(i => { i.judgmentId = i.lcId; this.projectJudgmentData.find(j => j.judgmentId === i.judgmentId) || result.push(i); }); this.visibleLoading = false this.judgementData = result; } }).catch(err => { console.log(err); }); }, getProgrammingClassData(params) { // 获取编程类判分点列表数据 this.visibleLoading = true this.$post(this.api.getBcJudgmentPoint, params).then(res => { if (res.status === 200) { let list = res.message.records; let result = []; list.map(i => { i.judgmentId = i.bcId; this.projectJudgmentData.find(j => j.judgmentId === i.judgmentId) || result.push(i); }); this.visibleLoading = false this.judgementData = result; console.log(res,'res') console.log(this.projectJudgmentData,'projectJudgmentData') } }).catch(err => { console.log(err); }); }, handleSelectionJudgment(val) { // 处理多选判分点 this.selectedJudgment = val; }, addJudgment() { // 确认选择判分点 if (this.selectedJudgment.length) { console.log(this.selectedJudgment,'queren') this.dialogVisible = false; if(this.projectId){ // 编辑的时候,新增调接口 this.addProjectJudgment() }else{ // 新增时,假添加 let tempArr = this.selectedJudgment.map(i => { i.score = 0; return i; }); this.projectJudgmentData = this.projectJudgmentData.concat(tempArr); this.projectJudgmentData.map((e,i)=>{ e.sort = i+1 }) this.$nextTick(() => { this.$refs.projectJudgementTable.clearSelection(); }); } } else { util.warningMsg("请选择判分点"); } }, handleCacheData() { // 处理缓存数据 this.isToPoint = true; this.setProject({ projectManage: this.projectManage, projectJudgmentData: this.projectJudgmentData }); }, toJudgePoint(type, row) { // 进入判分点系统 this.handleCacheData(); // let host = this.host; let host = "http://192.168.31.154:8087/"; // 本地 let { systemId } = this.projectManage; let href = ""; if (type === "view") { // 查看 if (systemId == 2) { href = `${host}jdTrials/#/programOption?id=${row.judgmentPointsId}`; } else if (systemId == 3) { href = `${host}jdTrials/#/programOptions?id=${row.judgmentPointsId}`; } else if (systemId == 11) { // 交易类判分点(银行综合系统) href = `${host}jdTrials/#/Transaction?isView=true&systemId=${systemId}&lcId=${row.judgmentId}&token=${this.token}&referrer=${btoa(location.href)}`; } else { // 编程类判分点(python子系统) href = `${host}jdTrials/#/program?isView=true&systemId=${systemId}&bcId=${row.judgmentId}&token=${this.token}&referrer=${btoa(location.href)}`; } } else if (type === "edit") { // 自定义(老师端隐藏此功能) if (systemId == 2) { href = `${host}jdTrials/#/programOption?id=${row.judgmentPointsId}`; } else if (systemId == 3) { href = `${host}jdTrials/#/programOptions?id=${row.judgmentPointsId}`; } else if (systemId == 11) { // 交易类判分点(银行综合系统) href = `${host}jdTrials/#/Transaction?isEdit=true&systemId=${systemId}&lcId=${row.judgmentId}&token=${this.token}&referrer=${btoa(location.href)}`; } else { // 编程类判分点(python子系统) href = `${host}jdTrials/#/program?isEdit=true&systemId=${systemId}&bcId=${row.judgmentId}&token=${this.token}&referrer=${btoa(location.href)}`; } } else if (type === "home") { if (systemId == 2 || systemId == 3) { href = `${host}jdTrials/#/list`; } else { // 进入判分点系统首页(老师端隐藏此功能) href = `${host}#/?systemId=${systemId}&token=${this.token}&referrer=${btoa(location.href)}`; } } location.href = href; }, // 行拖拽 rowDrop() { // 此时找到的元素是要拖拽元素的父容器 const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody'); const _this = this; Sortable.create(tbody, { // 指定父元素下可被拖拽的子元素 draggable: ".draggable .el-table__row", onEnd({newIndex, oldIndex}) { let newItem = _this.projectJudgmentData[newIndex] _this.projectJudgmentData[newIndex] = _this.projectJudgmentData[oldIndex] _this.projectJudgmentData[oldIndex] = newItem // 循环,重新赋值排序赋值 _this.projectJudgmentData.forEach((e,i)=>{ _this.$set(e,'sort',i+1)// 不更新 _this.$set(e,'name',e.name+"?") _this.$set(e,'name',e.name.slice(0,e.name.length-1)) // 不更新的解决方案 }) // 调修改接口,更新列表 if(_this.projectId){// 如果是编辑项目,则调编辑接口 _this.updateProjectJudgment() } } }); }, // 添加判分点中间表 addProjectJudgment(){ let param = this.selectedJudgment.map((e,i)=>{ let obj = { judgmentId:e.judgmentId, projectId:this.projectId||'', score:0, sort:i+1 } return obj }) console.log(param,'param',this.projectId,) this.$post(this.api.addProjectJudgment,param).then(res => { // 重新调接口 console.log('添加成功',res) if(this.projectId){ // 有项目id,调接口,没有项目id,手动更新 this.listAgain() } }).catch(err => { console.log(err); }); }, // 修改判分点中间表 updateProjectJudgment(){ // 直接传data回去 let param = this.projectJudgmentData.map((e,i)=>{ let obj = { judgmentId:e.judgmentId, projectId:this.projectId||'', score:0, sort:i+1, id:e.id } return obj }) this.$post(this.api.updateProjectJudgment, param).then(res => { // 重新调接口 if(this.projectId){ // 有项目id,调接口,没有项目id,手动更新 this.listAgain() } }).catch(err => { console.log(err); }); }, // 批量删除判分点中间表 deleteProjectJudgment(values){ if(values&&values.length>0){ this.$post(this.api.deleteProjectJudgment+"?projectJudgmentIds="+`${values}`).then(res => { // 重新调接口 if(this.projectId){ // 有项目id,调接口,没有项目id,手动更新 this.listAgain() } }).catch(err => { }); } }, // 重新调接口,专门赋值列表 listAgain(){ this.$get(`${this.api.getProjectDetail}?projectId=${this.projectId}`).then(res => { let { projectManage, projectJudgmentVos } = res; this.projectJudgmentData = projectJudgmentVos; this.projectJudgmentData.map((e,i)=>{ e.sort = i+1 }) }) }, } }; </script> <style lang="scss" scoped> /deep/ .readonly .ql-toolbar { height: 0; padding: 0; border-bottom: 0; } </style>