You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1225 lines
43 KiB
1225 lines
43 KiB
<template> |
|
<div> |
|
<el-row :gutter="20"> |
|
<el-col :span="24"> |
|
<el-card shadow="hover" |
|
class="mgb20"> |
|
<div class="flex-between"> |
|
<div class="per_title" |
|
v-preventReClick |
|
@click="goback()"> |
|
<i class="el-icon-arrow-left"></i> |
|
<span class="per_back">返回</span> |
|
<span class="per_school" |
|
v-text="form.cid ? '编辑课程' : '新建课程'"></span> |
|
</div> |
|
<el-button type="primary" |
|
round |
|
class="mag" |
|
v-preventReClick |
|
@click="saveAdd">确定 |
|
</el-button> |
|
</div> |
|
</el-card> |
|
|
|
<el-card shadow="hover" |
|
class="mgb20 "> |
|
<div class="flex-center mgb20"> |
|
<p class="addhr_tag"></p> |
|
<span>课程信息</span> |
|
</div> |
|
<div class="border-b-dashed"></div> |
|
|
|
<div> |
|
<el-form :model="form" |
|
:rules="rules" |
|
ref="form" |
|
label-width="100px"> |
|
<el-col :span="6" |
|
:offset="5"> |
|
<el-form-item label="课程名称" |
|
prop="curriculumName"> |
|
<el-input placeholder="请输入课程名称" |
|
v-model.trim="form.curriculumName"></el-input> |
|
</el-form-item> |
|
|
|
<el-form-item label="学科类别" |
|
prop="categoryId"> |
|
<el-select v-model="form.categoryId" |
|
clearable |
|
placeholder="请选择学科类别" |
|
@change="getProfessionalClass()" |
|
@clear="clearsubjectType()"> |
|
<el-option v-for="(item,index) in subjectList" |
|
:key="index" |
|
:label="item.disciplineName" |
|
:value="item.disciplineId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item label="专业" |
|
prop="professionalId"> |
|
<el-select v-model="form.professionalId" |
|
clearable |
|
placeholder="请选择专业" |
|
:disabled="form.professionalCategoryId ? false : true"> |
|
<el-option v-for="(item,index) in ProfessionalList" |
|
:key="index" |
|
:label="item.professionalName" |
|
:value="item.professionalId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="供应厂商" |
|
prop="supplier"> |
|
<el-select v-model="form.supplier" |
|
clearable |
|
placeholder="请选择供应厂商" |
|
multiple> |
|
<el-option v-for="(item, i) in suppliers" |
|
:key="i" |
|
:label="item.supplierName" |
|
:value="item.supplierId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
|
|
<el-col :span="6" |
|
:offset="2"> |
|
<el-form-item label="课程类别"> |
|
<el-select v-model="form.curriculumType" |
|
clearable |
|
placeholder="请选择课程类型"> |
|
<el-option label="理论课程" |
|
:value="0"></el-option> |
|
<el-option label="实训课程" |
|
:value="1"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="专业类" |
|
prop="professionalCategoryId"> |
|
<el-select v-model="form.professionalCategoryId" |
|
clearable |
|
placeholder="请选择专业类" |
|
:disabled="form.categoryId ? false : true" |
|
@change="getProfessional()" |
|
@clear="clearProfessionalClass()"> |
|
<el-option v-for="(item,index) in ProfessionalClassList" |
|
:key="index" |
|
:label="item.professionalClassName" |
|
:value="item.professionalClassId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="预计课时" |
|
prop="expectedCourse"> |
|
<el-select v-model="form.expectedCourse" |
|
clearable |
|
placeholder="请选择预计课时"> |
|
<el-option label="32课时" |
|
value="32课时"></el-option> |
|
<el-option label="64课时" |
|
value="64课时"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
|
|
<el-col :span="14" |
|
:offset="5"> |
|
<el-form-item label="课程简介" |
|
prop="briefIntroduction"> |
|
<el-input type="textarea" |
|
:autosize="{ minRows: 4 }" |
|
placeholder="请输入课程简介" |
|
v-model.trim="form.briefIntroduction"></el-input> |
|
</el-form-item> |
|
<el-form-item label="教学目标" |
|
prop="teachingObjectives"> |
|
<el-input type="textarea" |
|
:autosize="{ minRows: 4 }" |
|
placeholder="请输入教学目标" |
|
v-model.trim="form.teachingObjectives"></el-input> |
|
</el-form-item> |
|
</el-col> |
|
</el-form> |
|
</div> |
|
</el-card> |
|
|
|
<!-- 练习配置 --> |
|
<el-card shadow="hover" |
|
class="mgb20"> |
|
<div class="mgb20 flex-between"> |
|
<div class="flex-center "> |
|
<p class="addhr_tag"></p> |
|
<span>练习配置</span> |
|
</div> |
|
<div> |
|
<el-button @click="handleBatchDelete(0)">批量移除</el-button> |
|
<el-button @click="handleConfig(0)" |
|
icon="el-icon-plus" |
|
circle></el-button> |
|
</div> |
|
</div> |
|
<div class="border-b-dashed"></div> |
|
<div> |
|
<el-table :data="practiceData" |
|
class="table" |
|
stripe |
|
header-align="center" |
|
max-height="400" |
|
@selection-change="handleSelectionPractice"> |
|
<el-table-column type="selection" |
|
width="55" |
|
align="center"></el-table-column> |
|
<el-table-column type="index" |
|
width="100" |
|
label="序号" |
|
align="center"></el-table-column> |
|
<el-table-column prop="projectName" |
|
label="项目名称" |
|
align="center"></el-table-column> |
|
<el-table-column prop="remark" |
|
label="备注名称" |
|
align="center"></el-table-column> |
|
<el-table-column prop="applicationName" |
|
label="系统名称" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.applicationName || systemAll.find(e => e.systemId == scope.row.systemId).systemName }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="排序" |
|
align="center" |
|
width="100"> |
|
<template slot-scope="scope"> |
|
<el-input v-model.trim="scope.row.sort" |
|
@input="practiceSortChange(scope.row, scope.$index)"></el-input> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="展示控制" |
|
align="center" |
|
width="100"> |
|
<template slot-scope="scope"> |
|
<el-switch v-model="scope.row.isShow" |
|
:active-value="0" |
|
:inactive-value="1" |
|
:disabled="scope.row.disabled"> |
|
</el-switch> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作" |
|
align="center" |
|
width="100"> |
|
<template slot-scope="scope"> |
|
<el-button :disabled="scope.row.disabled" |
|
@click.native.prevent="handleDelete(scope.$index, practiceData)">移除 |
|
</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
</el-card> |
|
|
|
<!-- 考核配置 --> |
|
<el-card shadow="hover" |
|
class="mgb20"> |
|
<div class="mgb20 flex-between"> |
|
<div class="flex-center "> |
|
<p class="addhr_tag"></p> |
|
<span>考核配置</span> |
|
</div> |
|
<div> |
|
<el-button @click="handleBatchDelete(1)">批量移除</el-button> |
|
<el-button @click="handleConfig(1)" |
|
icon="el-icon-plus" |
|
circle></el-button> |
|
</div> |
|
</div> |
|
<div class="border-b-dashed"></div> |
|
<!-- 实训配置 --> |
|
<div> |
|
<el-table :data="assessmentData" |
|
class="table" |
|
stripe |
|
header-align="center" |
|
max-height="400" |
|
@selection-change="handleSelectionAssessment"> |
|
<el-table-column type="selection" |
|
width="55" |
|
align="center"></el-table-column> |
|
<el-table-column type="index" |
|
width="100" |
|
label="序号" |
|
align="center"></el-table-column> |
|
<el-table-column prop="projectName" |
|
label="项目名称" |
|
align="center"></el-table-column> |
|
<el-table-column prop="remark" |
|
label="备注名称" |
|
align="center"></el-table-column> |
|
<el-table-column prop="applicationName" |
|
label="系统名称" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.applicationName || systemAll.find(e => e.systemId == scope.row.systemId).systemName }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="排序" |
|
align="center" |
|
width="100"> |
|
<template slot-scope="scope"> |
|
<el-input v-model.trim="scope.row.sort" |
|
@input="assessmentSortChange(scope.row, scope.$index)"></el-input> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="展示控制" |
|
align="center" |
|
width="100"> |
|
<template slot-scope="scope"> |
|
<el-switch v-model="scope.row.isShow" |
|
:active-value="0" |
|
:inactive-value="1" |
|
:disabled="scope.row.disabled"> |
|
</el-switch> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作" |
|
align="center" |
|
width="100"> |
|
<template slot-scope="scope"> |
|
<el-button :disabled="scope.row.disabled" |
|
@click.native.prevent="handleDelete(scope.$index, assessmentData)">移除</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
</el-card> |
|
|
|
<!-- 竞赛配置 --> |
|
<el-card shadow="hover" |
|
class="mgb20"> |
|
<div class="mgb20 flex-between"> |
|
<div class="flex-center "> |
|
<p class="addhr_tag"></p> |
|
<span>竞赛配置</span> |
|
</div> |
|
<div> |
|
<el-button @click="handleBatchDelete(2)">批量移除</el-button> |
|
<el-button @click="handleConfig(2)" |
|
icon="el-icon-plus" |
|
circle></el-button> |
|
</div> |
|
</div> |
|
<div class="border-b-dashed"></div> |
|
<!-- 实训配置 --> |
|
<div> |
|
<el-table :data="matches" |
|
class="table" |
|
stripe |
|
header-align="center" |
|
max-height="400" |
|
@selection-change="handleSelectionMatch"> |
|
<el-table-column type="selection" |
|
width="55" |
|
align="center"></el-table-column> |
|
<el-table-column type="index" |
|
width="100" |
|
label="序号" |
|
align="center"></el-table-column> |
|
<el-table-column prop="projectName" |
|
label="项目名称" |
|
align="center"></el-table-column> |
|
<el-table-column prop="applicationName" |
|
label="系统名称" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.applicationName || systemAll.find(e => e.systemId == scope.row.systemId).systemName }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="排序" |
|
align="center" |
|
width="100"> |
|
<template slot-scope="scope"> |
|
<el-input v-model.trim="scope.row.sort" |
|
@input="assessmentSortChange(scope.row, scope.$index)"></el-input> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="展示控制" |
|
align="center" |
|
width="100"> |
|
<template slot-scope="scope"> |
|
<el-switch v-model="scope.row.isShow" |
|
:active-value="0" |
|
:inactive-value="1" |
|
:disabled="scope.row.disabled"> |
|
</el-switch> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作" |
|
align="center" |
|
width="100"> |
|
<template slot-scope="scope"> |
|
<el-button :disabled="scope.row.disabled" |
|
@click.native.prevent="handleDelete(scope.$index, matches)">移除</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
</el-card> |
|
|
|
</el-col> |
|
</el-row> |
|
|
|
<!-- 配置弹窗 --> |
|
<el-dialog :visible.sync="configVisible" |
|
width="1200px" |
|
center |
|
custom-class="config-dia"> |
|
<div class="config-wrap"> |
|
<div class="item system"> |
|
<div class="title-wrap flex-center"> |
|
<p class="addhr_tag"></p> |
|
<span>系统列表</span> |
|
</div> |
|
<el-input placeholder="请输入系统名称" |
|
prefix-icon="el-icon-search" |
|
v-model.trim="systemKeyword" |
|
clearable></el-input> |
|
|
|
<ul class="systems"> |
|
<li v-for="(item, i) in systems" |
|
:key="i" |
|
:title="item.systemName"> |
|
<el-checkbox v-model="item.check" |
|
@change="val => systemChange(val, item)"></el-checkbox> |
|
<div :class="['name', {active: curSystem == item.systemId}]" |
|
@click="getProject(item)"> |
|
<span>{{ item.systemName }}</span> |
|
<i class="el-icon-arrow-right"></i> |
|
</div> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
<div class="item project"> |
|
<div class="title-wrap flex-center"> |
|
<p class="addhr_tag"></p> |
|
<span>项目列表</span> |
|
</div> |
|
<el-input placeholder="请输入项目名称" |
|
prefix-icon="el-icon-search" |
|
v-model.trim="projectKeyword" |
|
clearable></el-input> |
|
|
|
<ul class="systems"> |
|
<el-checkbox v-if="projects.length" |
|
v-model="checkAll" |
|
label="全选" |
|
@change="val => checkAllChange(val, projects[0].systemId)"></el-checkbox> |
|
<li v-for="(item, i) in projects" |
|
:key="i" |
|
:title="item.projectName"> |
|
<el-checkbox v-model="item.check" |
|
:label="item.remark ? item.remark + '(' + item.projectName + ')' : item.projectName" |
|
@change="val => projectChange(val, item)"></el-checkbox> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
<div class="item checked"> |
|
<div class="title-wrap flex-center"> |
|
<p class="addhr_tag"></p> |
|
<span>已选择项目（{{ checkeds.length }}个）</span> |
|
</div> |
|
<el-input style="width: 200px;margin-bottom: 20px;" |
|
placeholder="请输入项目名称" |
|
prefix-icon="el-icon-search" |
|
v-model.trim="checkedKeyword" |
|
clearable></el-input> |
|
<el-table :data="checkeds" |
|
class="table" |
|
stripe |
|
header-align="center" |
|
max-height="470"> |
|
<el-table-column type="index" |
|
width="55" |
|
label="序号" |
|
align="center"></el-table-column> |
|
<el-table-column prop="applicationName" |
|
label="系统名称" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.applicationName || systemAll.find(e => e.systemId == scope.row.systemId).systemName }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="projectName" |
|
width="80" |
|
label="系统类型" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.type ? '流程类' : '编程类' }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="remark" |
|
label="备注名称" |
|
align="center"></el-table-column> |
|
<el-table-column prop="projectName" |
|
label="项目名称" |
|
align="center"></el-table-column> |
|
<el-table-column label="操作" |
|
align="center" |
|
width="55"> |
|
<template slot-scope="scope"> |
|
<i :class="['el-icon-delete rm', {disabled: scope.row.disabled}]" |
|
@click="delProject(scope.$index, scope.row)"></i> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
</div> |
|
|
|
<span slot="footer" |
|
class="dialog-footer"> |
|
<el-button @click="configVisible = false">取 消</el-button> |
|
<el-button type="primary" |
|
@click="handleConfirm">确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data () { |
|
return { |
|
headers: { |
|
token: sessionStorage.getItem("token") |
|
}, |
|
isDetail: Boolean(this.$route.query.isDetail), |
|
form: { |
|
cid: this.$route.query.cid, |
|
curriculumName: "", |
|
courseType: "", |
|
categoryId: 1, |
|
professionalCategoryId: 1, |
|
professionalId: 1, |
|
expectedCourse: "", |
|
briefIntroduction: "", |
|
teachingObjectives: "", |
|
systemIdByAssessment: [], |
|
systemIdByPractice: [], |
|
supplier: [] |
|
}, |
|
rules: { |
|
curriculumName: [ |
|
{ required: true, message: "请输入课程名称", trigger: "blur" } |
|
], |
|
categoryId: [ |
|
{ required: true, message: "请选择学科类别", trigger: "change" } |
|
], |
|
professionalId: [ |
|
{ required: true, message: "请选择专业", trigger: "change" } |
|
], |
|
supplier: [ |
|
{ required: true, message: "请选择供应厂商", trigger: "change" } |
|
], |
|
expectedCourse: [ |
|
{ required: true, message: "请选择预计课时", trigger: "change" } |
|
], |
|
professionalCategoryId: [ |
|
{ required: true, message: "请选择专业类", trigger: "change" } |
|
], |
|
courseType: [ |
|
{ required: true, message: "请选择课程类别", trigger: "change" } |
|
], |
|
briefIntroduction: [ |
|
{ required: true, message: "请输入课程简介", trigger: "blur" } |
|
], |
|
teachingObjectives: [ |
|
{ required: true, message: "请输入教学目标", trigger: "blur" } |
|
] |
|
}, |
|
subjectList: [], |
|
ProfessionalClassList: [], |
|
ProfessionalList: [], |
|
|
|
systemBelongKeys: { |
|
1: "外部产品", |
|
0: "内部系统" |
|
}, |
|
systemTypeKeys: { |
|
0: "编程类", |
|
1: "流程类" |
|
}, |
|
systemStatusKeys: { |
|
0: "运行中", |
|
1: "默认" |
|
}, |
|
pageNo: 1, |
|
pageSize: 10, |
|
multipleSelection: [], |
|
systemKeyword: "", |
|
searchTimer: null, |
|
configVisible: false,// 配置弹框 |
|
|
|
permissions: "", // 练习：0；考核：1 |
|
practiceData: [], |
|
practiceTotal: 0, |
|
multiplePractice: [], |
|
|
|
assessmentData: [], |
|
assessmentTotal: 0, |
|
multipleAssessment: [], |
|
matches: [], |
|
matcheTotal: 0, |
|
multipleMatch: [], |
|
submiting: false, // 新增编辑防抖标识 |
|
loadIns: null, |
|
updateTime: 0, |
|
systemAll: [], |
|
systems: [], |
|
systemsAll: [], |
|
systemChecked: [], |
|
curSystem: '', |
|
projects: [], |
|
projectAll: [], |
|
projectKeyword: '', |
|
checkedKeyword: '', |
|
checkeds: [], |
|
checkedAll: [], |
|
checkAll: false, |
|
suppliers: [], |
|
mulSystem: this.$store.state.btns.includes('/curriculum:支持多系统组课'), // 是否支持多系统组课 |
|
}; |
|
}, |
|
watch: { |
|
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
|
form: { |
|
handler () { |
|
this.updateTime++ |
|
}, |
|
deep: true |
|
}, |
|
systemKeyword: function (val) { |
|
clearTimeout(this.searchTimer); |
|
this.searchTimer = setTimeout(() => { |
|
this.getConfig(); |
|
}, 500); |
|
}, |
|
projectKeyword: function (val) { |
|
clearTimeout(this.searchTimer); |
|
this.searchTimer = setTimeout(() => { |
|
this.filterProject(); |
|
}, 500); |
|
}, |
|
checkedKeyword: function (val) { |
|
clearTimeout(this.searchTimer); |
|
this.searchTimer = setTimeout(() => { |
|
this.filterChecked(); |
|
}, 500); |
|
} |
|
}, |
|
created () { |
|
|
|
}, |
|
mounted () { |
|
this.getSubject() |
|
this.getConfig() |
|
this.getSystem() |
|
this.getSupplier() |
|
this.form.cid && this.getInfoData() |
|
}, |
|
methods: { |
|
getInfoData () { |
|
this.$post(`${this.api.curriculumDetail}?cid=${this.form.cid}`).then(({ data }) => { |
|
if (data.supplier) data.supplier = data.supplier.split(',').map(e => +e) |
|
if (data.categoryId) { |
|
this.$get(this.api.courseProfessionalClass, { disciplineId: data.categoryId }).then(res => { |
|
this.ProfessionalClassList = res.list; |
|
}).catch(res => { }); |
|
} |
|
if (data.professionalCategoryId) { |
|
this.$get(this.api.courseProfessional, { professionalClassId: data.professionalCategoryId }).then(res => { |
|
this.ProfessionalList = res.list; |
|
}).catch(res => { }); |
|
} |
|
this.$nextTick(() => { |
|
this.form = data; |
|
const pList = data.practiceConfig |
|
const { systemsAll } = this |
|
pList.map(e => { |
|
if (!systemsAll.find(n => n.systemId == e.systemId)) e.disabled = true |
|
}) |
|
this.practiceData = pList |
|
|
|
const aList = data.assessmentConfig |
|
aList.map(e => { |
|
if (!systemsAll.find(n => n.systemId == e.systemId)) e.disabled = true |
|
}) |
|
this.assessmentData = aList |
|
|
|
const cList = data.competitionConfig |
|
cList.map(e => { |
|
if (!systemsAll.find(n => n.systemId == e.systemId)) e.disabled = true |
|
}) |
|
this.matches = cList |
|
}); |
|
}).catch(err => { |
|
}); |
|
}, |
|
// 获取供应厂商 |
|
getSupplier () { |
|
const sid = this.$store.state.dataPer.find(e => e.permissionName === '课程管理') |
|
this.$get(this.api.getSupplierListByRole, { |
|
permissionId: sid.permissionId |
|
}).then(res => { |
|
this.suppliers = res.supplierList |
|
}).catch(res => { }) |
|
}, |
|
// 获取系统 |
|
getSystem () { |
|
const checked = this[!this.permissions ? |
|
'practiceData' : |
|
this.permissions == 1 ? |
|
'assessmentData' : |
|
'matches'] |
|
const sid = this.$store.state.dataPer.find(e => e.permissionName === '课程管理') |
|
this.$post(this.api.queryServiceConfig, { |
|
systemName: '', |
|
pageNum: 1, |
|
pageSize: 1000, |
|
supplierId: sid ? sid.supplierId : '' |
|
}).then(({ serviceList }) => { |
|
this.systemsAll = serviceList.records |
|
}).catch(err => { }) |
|
}, |
|
getSubject () { // 获取学科类别 |
|
this.$get(this.api.courseDiscipline).then(res => { |
|
this.subjectList = res.list |
|
this.form.categoryId === 1 && this.getProfessionalClass() |
|
}).catch(err => { |
|
}); |
|
}, |
|
clearsubjectType () { // 清空学科类别 |
|
this.form.professionalCategoryId = this.form.categoryId === 1 ? 1 : '' |
|
this.form.professionalId = this.form.categoryId === 1 ? 1 : '' |
|
}, |
|
getProfessionalClass () { // 获取专业类 |
|
this.clearsubjectType(); |
|
this.getProfessionalClassData(); |
|
}, |
|
getProfessionalClassData () { |
|
let data = { |
|
disciplineId: this.form.categoryId |
|
}; |
|
this.$get(this.api.courseProfessionalClass, data).then(res => { |
|
this.ProfessionalClassList = res.list; |
|
this.form.professionalCategoryId === 1 && this.getProfessional() |
|
}).catch(err => { |
|
}); |
|
}, |
|
clearProfessionalClass () { // 清空专业类 |
|
this.form.professionalId = this.form.professionalCategoryId === 1 ? 1 : '' |
|
}, |
|
getProfessional () { // 获取专业 |
|
this.clearProfessionalClass(); |
|
this.getProfessionalData(); |
|
}, |
|
getProfessionalData () { |
|
let data = { |
|
professionalClassId: this.form.professionalCategoryId |
|
}; |
|
this.$get(this.api.courseProfessional, data).then(res => { |
|
this.ProfessionalList = res.list; |
|
}).catch(err => { |
|
}); |
|
}, |
|
// 练习考核弹框 |
|
handleConfig (type) { |
|
this.systemKeyword = '' |
|
this.projectKeyword = '' |
|
this.checkedKeyword = '' |
|
this.permissions = type; |
|
this.configVisible = true; |
|
this.pageNo = 1; |
|
this.getConfig(); |
|
this.checkeds = JSON.parse(JSON.stringify(type == 1 ? this.assessmentData : type == 2 ? this.matches : this.practiceData)) |
|
}, |
|
// 获取系统 |
|
getConfig () { |
|
const checked = this[!this.permissions ? |
|
'practiceData' : |
|
this.permissions == 1 ? |
|
'assessmentData' : |
|
'matches'] |
|
const sid = this.$store.state.dataPer.find(e => e.permissionName === '课程管理') |
|
this.$post(this.api.queryServiceConfig, { |
|
systemName: this.systemKeyword, |
|
pageNum: 1, |
|
pageSize: 1000, |
|
supplierId: sid ? sid.supplierId : '' |
|
}).then(res => { |
|
const list = res.serviceList.records |
|
this.systemAll = JSON.parse(JSON.stringify(list)) // 全部系统，另外保存 |
|
const result = [] |
|
list.map(e => { |
|
// 如果选中的项目里有该系统的项目，则隐藏 |
|
// if (!checked.find(n => n.systemId == e.systemId)) { |
|
// e.check = !!checked.find(n => n.systemId == e.systemId) |
|
e.check = false |
|
result.push(e) |
|
// } |
|
}) |
|
this.systems = result |
|
this.checkAll = !!checked.find(n => n.systemId == result[0].systemId) // 因为默认显示第一个系统的项目，所以如果系统默认选中，则全选也勾选上 |
|
result.length && this.getProject(result[0]) |
|
}).catch(err => { }) |
|
}, |
|
// 获取项目列表 |
|
getProject (item) { |
|
const checked = this.checkeds |
|
this.curSystem = item.systemId |
|
this.$get(`${this.api.getInternalProjectBySystemId}?permissions=${this.permissions}&systemId=${item.systemId}`).then(res => { |
|
this.projectAll = JSON.parse(JSON.stringify(res)) // 全部项目，另外保存 |
|
const result = [] |
|
res.map(e => { |
|
// 如果选择了该项目，则禁用并选中 |
|
const include = checked.some(n => n.projectId == e.projectId && n.systemId == e.systemId) |
|
e.check = include |
|
result.push(e) |
|
}) |
|
this.checkAll = !result.filter(e => !e.check).length |
|
this.projects = result |
|
}).catch(err => { }) |
|
}, |
|
// 项目模糊查询 |
|
filterProject () { |
|
const val = this.projectKeyword |
|
this.projects = this.projectAll.filter(e => e.projectName.includes(val)) |
|
}, |
|
// 系统选择回调 |
|
systemChange (val, item) { |
|
// 项目列表选中状态同步 |
|
const { projects, checkeds } = this |
|
if (projects.length && projects[0].systemId == item.systemId) { |
|
projects.map(e => { |
|
e.check = val |
|
}) |
|
} |
|
this.projectKeyword = '' |
|
this.$get(`${this.api.getInternalProjectBySystemId}?permissions=${this.permissions}&systemId=${item.systemId}`).then(res => { |
|
if (val) { |
|
// 如果不支持多选系统，选中后全部取消选中再选中当前系统 |
|
if (!this.mulSystem) { |
|
this.systems.map(e => e.check = false) |
|
item.check = true |
|
} |
|
res.map(e => { |
|
if (!checkeds.find(n => n.projectId == e.projectId && n.systemId == e.systemId)) { |
|
checkeds.push(e) |
|
} |
|
}) |
|
} else { |
|
res.map(e => { |
|
const i = checkeds.findIndex(n => n.projectId == e.projectId && n.systemId == e.systemId) |
|
i === -1 || checkeds.splice(i, 1) |
|
}) |
|
} |
|
this.checkedAll = JSON.parse(JSON.stringify(checkeds)) // 全部已选项目，另外保存 |
|
this.getProject(item) |
|
}).catch(err => { }) |
|
}, |
|
// 项目全选回调 |
|
checkAllChange (val, systemId) { |
|
this.systemChange(val, { systemId }) |
|
this.systems.map(e => { |
|
if (e.systemId == systemId) e.check = val |
|
}) |
|
}, |
|
// 项目选择回调 |
|
projectChange (val, item) { |
|
const { systemId } = item |
|
const i = this.checkeds.findIndex(e => e.projectId == item.projectId && e.systemId == systemId) |
|
// 选中，则push，否则移除 |
|
if (val) { |
|
this.checkeds.push(item) |
|
} else if (i !== -1) { |
|
this.checkeds.splice(i, 1) |
|
} |
|
// 同步系统 |
|
this.systems.map(e => { |
|
if (e.systemId == systemId) e.check = !this.projects.filter(n => !n.check).length |
|
}) |
|
this.checkAll = !this.projects.find(e => !e.check) // 同步全选框 |
|
this.checkedAll = JSON.parse(JSON.stringify(this.checkeds)) // 全部已选项目，另外保存 |
|
console.log("🚀 ~ file: AddCurriculum.vue ~ line 728 ~ projectChange ~ checkedAll", this.checkeds, item) |
|
}, |
|
// 已选择项目模糊查询 |
|
filterChecked () { |
|
const val = this.checkedKeyword |
|
this.checkeds = this.checkedAll.filter(e => e.projectName.includes(val)) |
|
}, |
|
// 删除已选项目 |
|
delProject (i, e) { |
|
if (e.disabled) return |
|
this.$confirm("确定要删除吗？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
this.checkeds.splice(i, 1) |
|
// 如果当前展示的项目列表跟删掉的项目是同个系统，则找到项目列表里删掉的该项目，重置check和disabled |
|
if (e.systemId == this.curSystem) { |
|
const { projectId } = e |
|
this.projects.map(n => { |
|
if (n.projectId == projectId) { |
|
n.check = false |
|
} |
|
}) |
|
this.checkAll = !this.projects.find(e => !e.check) |
|
} |
|
this.systems.map(n => { |
|
if (n.systemId == e.systemId) n.check = false |
|
}) |
|
}).catch(() => { }) |
|
}, |
|
// 确认系统 |
|
handleConfirm () { |
|
const list = this.checkeds |
|
if (!list.length) { |
|
this.$message.warning("请选择系统！"); |
|
} else { |
|
this.configVisible = false |
|
list.map((e, i) => { |
|
e.isShow = 0; // isShow是否展示(默认0:展示 1:不展示) |
|
e.sort = i + 1; // 排序 |
|
}); |
|
if (!this.permissions) { |
|
this.practiceData = JSON.parse(JSON.stringify(list)) |
|
this.practiceTotal = this.practiceData.length; |
|
} else if (this.permissions == 1) { |
|
this.assessmentData = JSON.parse(JSON.stringify(list)) |
|
this.assessmentTotal = this.assessmentData.length; |
|
} else if (this.permissions == 2) { |
|
this.matches = JSON.parse(JSON.stringify(list)) |
|
this.matchTotal = this.matches.length; |
|
} |
|
} |
|
}, |
|
practiceSortChange (row, index) { // 处理排序 |
|
this.practiceData.splice(index, 1, row); |
|
}, |
|
assessmentSortChange (row, index) { // 处理排序 |
|
this.assessmentData.splice(index, 1, row); |
|
}, |
|
handleSelectionPractice (val) { // 多选练习项目 |
|
this.multiplePractice = val; |
|
}, |
|
handleSelectionAssessment (val) { // 多选考核项目 |
|
this.multipleAssessment = val; |
|
}, |
|
handleSelectionMatch (val) { // 多选竞赛项目 |
|
this.multipleMatch = val; |
|
}, |
|
handleBatchDelete (type) { // 批量移除 |
|
if (type == 1 && !this.multipleAssessment.length) { |
|
this.$message.warning("请勾选考核项目！"); |
|
return; |
|
} else if (!type && !this.multiplePractice.length) { |
|
this.$message.warning("请勾选练习项目！"); |
|
return; |
|
} else if (type == 2 && !this.multipleMatch.length) { |
|
this.$message.warning("请勾选竞赛项目！"); |
|
return; |
|
} |
|
this.$confirm("此操作将批量移除项目, 是否继续?", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
if (type == 1) { |
|
let ids = this.multipleAssessment.map(i => i.projectId); |
|
let tempArr = []; |
|
for (let i = 0; i < this.assessmentData.length; i++) { |
|
if (!ids.includes(this.assessmentData[i].projectId)) { |
|
tempArr.push(this.assessmentData[i]); |
|
} |
|
} |
|
this.assessmentData = tempArr; |
|
} else if (!type) { |
|
let ids = this.multiplePractice.map(i => i.projectId); |
|
let tempArr = []; |
|
for (let i = 0; i < this.practiceData.length; i++) { |
|
if (!ids.includes(this.practiceData[i].projectId)) { |
|
tempArr.push(this.practiceData[i]); |
|
} |
|
} |
|
this.practiceData = tempArr; |
|
} else { |
|
let ids = this.multipleMatch.map(i => i.projectId); |
|
let tempArr = []; |
|
for (let i = 0; i < this.matches.length; i++) { |
|
if (!ids.includes(this.matches[i].projectId)) { |
|
tempArr.push(this.matches[i]); |
|
} |
|
} |
|
this.matches = tempArr; |
|
} |
|
this.$message.success("批量移除成功"); |
|
}).catch(() => { |
|
this.$message.info("已取消批量移除"); |
|
}); |
|
}, |
|
handleDelete (index, data) { // 移除 |
|
this.$confirm("此操作将移除该项目, 是否继续?", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
data.splice(index, 1); |
|
this.$message.success("移除成功"); |
|
}).catch(() => { |
|
this.$message.info("已取消移除"); |
|
}); |
|
}, |
|
saveAdd (fromBack) { |
|
this.$refs.form.validate((valid) => { |
|
if (valid) { |
|
if (this.submiting) return false |
|
const form = JSON.parse(JSON.stringify(this.form)) |
|
form.supplier = form.supplier.join() |
|
if (!this.practiceData.length) { |
|
this.$message.warning("请添加练习配置"); |
|
return; |
|
} else { |
|
form.systemIdByPractice = this.practiceData.map(i => { |
|
let obj = { |
|
isShow: i.isShow, |
|
projectId: i.projectId, |
|
sort: Number(i.sort), |
|
systemId: i.systemId |
|
}; |
|
return obj; |
|
}); |
|
form.systemIdByPractice.sort((a, b) => a.sort - b.sort) |
|
} |
|
if (!this.assessmentData.length) { |
|
this.$message.warning("请添加考核配置"); |
|
return; |
|
} else { |
|
form.systemIdByAssessment = this.assessmentData.map(i => { |
|
let obj = { |
|
isShow: i.isShow, |
|
projectId: i.projectId, |
|
sort: Number(i.sort), |
|
systemId: i.systemId |
|
}; |
|
return obj; |
|
}); |
|
form.systemIdByAssessment.sort((a, b) => a.sort - b.sort) |
|
} |
|
// 竞赛配置 |
|
form.systemIdByCompetition = this.matches.map(i => { |
|
let obj = { |
|
isShow: i.isShow, |
|
projectId: i.projectId, |
|
sort: Number(i.sort), |
|
systemId: i.systemId |
|
}; |
|
return obj; |
|
}); |
|
form.systemIdByCompetition.sort((a, b) => a.sort - b.sort) |
|
|
|
this.submiting = true |
|
this.loadIns = this.$loading({ |
|
lock: true, |
|
text: 'Loading', |
|
spinner: 'el-icon-loading', |
|
background: 'rgba(0, 0, 0, 0.7)' |
|
}) |
|
if (form.cid) { |
|
this.$post(this.api.modifyCourse, form).then((res) => { |
|
this.$message.success("编辑成功"); |
|
this.backPage() |
|
}).catch((res) => { |
|
this.submiting = false |
|
this.loadIns.close() |
|
}); |
|
} else { |
|
this.$post(this.api.createCurriculum, form).then((res) => { |
|
!fromBack ? this.$confirm("课程创建成功，是否马上进行课程内容设置？", "提示", { |
|
type: "success", |
|
confirmButtonText: "马上设置", |
|
cancelButtonText: "稍后操作" |
|
}).then(() => { |
|
this.$router.push(`/contentSettings?cid=${res.cid}`); |
|
}).catch(() => { |
|
this.backPage() |
|
}) : this.backPage() |
|
}).catch((res) => { |
|
this.submiting = false |
|
this.loadIns.close() |
|
}); |
|
} |
|
} else { |
|
return false; |
|
} |
|
}); |
|
}, |
|
goback () { |
|
const id = this.form.cid |
|
const updateTime = this.updateTime |
|
// 更改了信息才需要提示 |
|
if ((id && updateTime > 2) || (!id && updateTime)) { |
|
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', { |
|
type: 'warning' |
|
}).then(() => { |
|
this.saveAdd(1) |
|
}).catch(() => { |
|
this.backPage() |
|
}) |
|
} else { |
|
this.backPage() |
|
} |
|
}, |
|
// 返回上一页 |
|
backPage () { |
|
this.$router.back() |
|
this.loadIns.close() |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
$avatar-width: 104px; |
|
/deep/ .avatar-uploader { |
|
.el-upload { |
|
position: relative; |
|
width: $avatar-width; |
|
height: $avatar-width; |
|
border: 1px dashed #d9d9d9; |
|
border-radius: 2px; |
|
cursor: pointer; |
|
overflow: hidden; |
|
|
|
&:hover { |
|
border-color: #409eff; |
|
} |
|
|
|
.uploader-default { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
width: $avatar-width !important; |
|
height: $avatar-width; |
|
text-align: center; |
|
background: rgba(0, 0, 0, 0.04); |
|
|
|
i { |
|
font-size: 20px; |
|
font-weight: bold; |
|
color: #8c939d; |
|
} |
|
|
|
p { |
|
margin-top: 10px; |
|
font-size: 14px; |
|
color: rgba(0, 0, 0, 0.65); |
|
line-height: 1; |
|
} |
|
} |
|
|
|
.avatar { |
|
width: $avatar-width; |
|
height: $avatar-width; |
|
display: block; |
|
} |
|
} |
|
|
|
.el-upload__tip { |
|
margin-top: 0; |
|
|
|
p { |
|
font-size: 14px; |
|
color: rgba(0, 0, 0, 0.45); |
|
line-height: 1; |
|
|
|
&:first-child { |
|
margin-bottom: 5px; |
|
} |
|
} |
|
} |
|
} |
|
.settlement { |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 10px; |
|
.label { |
|
margin-right: 10px; |
|
white-space: nowrap; |
|
color: #606266; |
|
font-size: 14px; |
|
} |
|
.el-input { |
|
width: 150px; |
|
margin-right: 30px; |
|
} |
|
} |
|
/deep/.config-dia { |
|
.config-wrap { |
|
display: flex; |
|
} |
|
.title-wrap { |
|
margin-bottom: 15px; |
|
} |
|
.item { |
|
width: 250px; |
|
max-height: 600px; |
|
padding: 10px; |
|
margin-right: 20px; |
|
overflow: hidden; |
|
} |
|
.system { |
|
background-color: #f9f9f9; |
|
} |
|
.systems { |
|
margin-top: 10px; |
|
max-height: 550px; |
|
overflow: auto; |
|
li { |
|
display: flex; |
|
align-items: center; |
|
margin: 10px 0; |
|
} |
|
.name { |
|
display: inline-flex; |
|
flex: 1; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-left: 5px; |
|
cursor: pointer; |
|
&.active, |
|
&:hover { |
|
color: #9076ff; |
|
} |
|
span { |
|
max-width: 200px; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
} |
|
} |
|
} |
|
.checked { |
|
flex: 1; |
|
width: auto; |
|
.el-table .cell { |
|
font-size: 12px; |
|
} |
|
} |
|
.rm { |
|
font-size: 14px; |
|
cursor: pointer; |
|
&.disabled { |
|
color: #ccc; |
|
cursor: not-allowed; |
|
} |
|
&:hover { |
|
color: #17161f; |
|
} |
|
} |
|
} |
|
</style> |