题库管理
This commit is contained in:
@@ -169,7 +169,7 @@
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="240"
|
||||
width="300"
|
||||
label="操作"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
@@ -189,11 +189,14 @@
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="showLinkTags(scope.row)"
|
||||
>查看引用</el-button
|
||||
>
|
||||
type="text"
|
||||
size="small"
|
||||
@click="handleQuestionBank(scope.row)"
|
||||
>题库管理</el-button
|
||||
>
|
||||
<el-button type="text" size="small" @click="showLinkTags(scope.row)"
|
||||
>查看引用</el-button
|
||||
>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@@ -216,7 +219,7 @@
|
||||
>查看引用</el-button
|
||||
>
|
||||
</el-dropdown-item> -->
|
||||
<!-- <el-dropdown-item>
|
||||
<!-- <el-dropdown-item>
|
||||
<el-button
|
||||
@click="showDirectorShow(scope.row)"
|
||||
type="text"
|
||||
@@ -224,7 +227,7 @@
|
||||
>教务主任管理</el-button
|
||||
>
|
||||
</el-dropdown-item> -->
|
||||
<!-- </el-dropdown-menu>
|
||||
<!-- </el-dropdown-menu>
|
||||
</el-dropdown> -->
|
||||
</div>
|
||||
</template>
|
||||
@@ -354,15 +357,37 @@
|
||||
<el-button type="primary" @click="saveDirector">提 交</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-drawer title="" size="80%" :visible.sync="showQuestionBank" destroy-on-close>
|
||||
<div slot="title">
|
||||
<p
|
||||
style="margin: 0;font-size: 18px;"
|
||||
>
|
||||
<span style="font-weight: bold;">题库管理</span
|
||||
><span style="margin-left: 20px;">[ {{ selectCourse.title }} ]</span>
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
<div style="padding:0 20px;box-sizing: border-box;">
|
||||
<question-bank
|
||||
ref="questionBank"
|
||||
:course="selectCourse"
|
||||
></question-bank>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import commonShopTable from "./shopproductTable.vue";
|
||||
import AddOrUpdate from "./course-add-or-update";
|
||||
import questionBank from "./examination/questionBank";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectCourse: {},
|
||||
showQuestionBank: false,
|
||||
selectType: [],
|
||||
director: {
|
||||
director: null,
|
||||
@@ -420,7 +445,8 @@ export default {
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
commonShopTable
|
||||
commonShopTable,
|
||||
questionBank
|
||||
},
|
||||
activated() {
|
||||
if (this.$route.query.upPageInde != null) {
|
||||
@@ -439,9 +465,12 @@ export default {
|
||||
this.relationProducts = list.slice(1, 1);
|
||||
},
|
||||
saveDirector() {
|
||||
if(this.director.director == this.director.ddirector && this.director.director != null){
|
||||
this.$message.error('主任与副主任不能是同一人')
|
||||
return
|
||||
if (
|
||||
this.director.director == this.director.ddirector &&
|
||||
this.director.director != null
|
||||
) {
|
||||
this.$message.error("主任与副主任不能是同一人");
|
||||
return;
|
||||
}
|
||||
var director = 0;
|
||||
var ddirector = 0;
|
||||
@@ -477,16 +506,14 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.$refs["director"].resetFields();
|
||||
this.director = {
|
||||
director: null,
|
||||
ddirector: null
|
||||
};
|
||||
this.userList = []
|
||||
director: null,
|
||||
ddirector: null
|
||||
};
|
||||
this.userList = [];
|
||||
this.optCourse = {};
|
||||
console.log("director关闭了吗", this.director);
|
||||
})
|
||||
|
||||
},200)
|
||||
|
||||
console.log("director关闭了吗", this.director);
|
||||
});
|
||||
}, 200);
|
||||
},
|
||||
async showDirectorShow(data) {
|
||||
this.optCourse = data;
|
||||
@@ -495,41 +522,42 @@ export default {
|
||||
if (obj) {
|
||||
// console.log("有绑定", obj.data.director.tel);
|
||||
if (obj.data.director != null) {
|
||||
var list = this.userList.map( item => { return item.id})
|
||||
console.log('list',list)
|
||||
var i = list.find(function(elem){
|
||||
return elem == obj.data.director.id;
|
||||
});
|
||||
if(!i){
|
||||
var list = this.userList.map(item => {
|
||||
return item.id;
|
||||
});
|
||||
console.log("list", list);
|
||||
var i = list.find(function(elem) {
|
||||
return elem == obj.data.director.id;
|
||||
});
|
||||
if (!i) {
|
||||
this.userList.push({
|
||||
id:obj.data.director.id,
|
||||
tel:obj.data.director.tel
|
||||
})
|
||||
}
|
||||
this.director.director = obj.data.director.id;
|
||||
}
|
||||
else {
|
||||
// this.director.director = null;
|
||||
}
|
||||
if (obj.data.ddirector != null) {
|
||||
console.log('jinlailema')
|
||||
var list = this.userList.map( item => { return item.id})
|
||||
console.log('list',list)
|
||||
var i = list.find(function(elem){
|
||||
return elem == obj.data.ddirector.id;
|
||||
id: obj.data.director.id,
|
||||
tel: obj.data.director.tel
|
||||
});
|
||||
if(!i){
|
||||
this.userList.push({
|
||||
id:obj.data.ddirector.id,
|
||||
tel:obj.data.ddirector.tel
|
||||
})
|
||||
}
|
||||
this.director.director = obj.data.director.id;
|
||||
} else {
|
||||
// this.director.director = null;
|
||||
}
|
||||
if (obj.data.ddirector != null) {
|
||||
console.log("jinlailema");
|
||||
var list = this.userList.map(item => {
|
||||
return item.id;
|
||||
});
|
||||
console.log("list", list);
|
||||
var i = list.find(function(elem) {
|
||||
return elem == obj.data.ddirector.id;
|
||||
});
|
||||
if (!i) {
|
||||
this.userList.push({
|
||||
id: obj.data.ddirector.id,
|
||||
tel: obj.data.ddirector.tel
|
||||
});
|
||||
}
|
||||
this.director.ddirector = obj.data.ddirector.id;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
// this.ddirector.director = null;
|
||||
}
|
||||
|
||||
} else {
|
||||
console.log("没有绑定");
|
||||
this.director = {
|
||||
@@ -723,6 +751,15 @@ export default {
|
||||
this.$refs.addOrUpdate.init(row);
|
||||
});
|
||||
},
|
||||
// 新增 / 修改
|
||||
handleQuestionBank(row) {
|
||||
console.log("row at line 744:", row);
|
||||
|
||||
this.showQuestionBank = true;
|
||||
this.selectCourse = row;
|
||||
this.$forceUpdate();
|
||||
// row ? (this.courseId = row.id) : "";
|
||||
},
|
||||
// 删除
|
||||
deleteHandle(id) {
|
||||
var ids = id
|
||||
@@ -845,10 +882,13 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
isSameOne() {
|
||||
if(this.director.ddirector == this.director.director && this.director.ddirector != null){
|
||||
return true
|
||||
}else{
|
||||
return false
|
||||
if (
|
||||
this.director.ddirector == this.director.director &&
|
||||
this.director.ddirector != null
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -863,4 +903,6 @@ export default {
|
||||
.flexbox {
|
||||
display: flex;
|
||||
}
|
||||
/deep/.el-drawer__header{
|
||||
background-color: #f0f0f0 !important;}
|
||||
</style>
|
||||
|
||||
739
src/views/modules/course/examination/questionBank.vue
Normal file
739
src/views/modules/course/examination/questionBank.vue
Normal file
@@ -0,0 +1,739 @@
|
||||
<template>
|
||||
<div class="mod-config">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<!-- <el-form-item label="平台分类">
|
||||
<el-cascader
|
||||
clearable
|
||||
:props="{
|
||||
label: 'title',
|
||||
value: 'id',
|
||||
checkStrictly: true
|
||||
}"
|
||||
v-model="selectType"
|
||||
:options="options"
|
||||
@change="handleChange"
|
||||
>
|
||||
</el-cascader>
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item label="题目名称">
|
||||
<el-input
|
||||
v-model="query.content"
|
||||
placeholder="题目名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item> -->
|
||||
<el-button
|
||||
size="small"
|
||||
@click="
|
||||
pageIndex = 1;
|
||||
getDataList();
|
||||
"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button size="small" type="primary" @click="addOrUpdateHandle()"
|
||||
>新增考题</el-button
|
||||
>
|
||||
<el-upload
|
||||
style="display: inline-block;margin-left: 10px;"
|
||||
:limit="1"
|
||||
class="upload-demo"
|
||||
:action="baseUrl + '/common/classExam/importSubject'"
|
||||
:data="{
|
||||
courseId: this.course.id
|
||||
}"
|
||||
:show-file-list="false"
|
||||
multiple
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="handleSuccess"
|
||||
accept=".xlsx,.xls"
|
||||
:on-remove="handleRemoveNovel"
|
||||
>
|
||||
<el-button size="small" type="primary" plain>导入考题</el-button>
|
||||
</el-upload>
|
||||
<!-- </el-form-item> -->
|
||||
</el-form>
|
||||
<el-table
|
||||
tooltip-effect="dark custom-tooltip-effect"
|
||||
:data="dataList"
|
||||
border
|
||||
v-loading="dataListLoading"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<!-- <el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<el-form label-position="left" inline class="demo-table-expand">
|
||||
<el-form-item label="商品名称">
|
||||
<span>{{ props.row.name }}</span>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
prop="id"
|
||||
width="100"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="题目ID"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="content"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="题目"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
width="240"
|
||||
prop="chapter"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="章节名称"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.chapter }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
width="100"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="试题类型"
|
||||
><template slot-scope="scope">{{
|
||||
scope.row.type == 0 ? "单选题" : "多选题"
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
width="100"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="答案"
|
||||
><template slot-scope="scope">
|
||||
{{
|
||||
scope.row.options && scope.row.options.length > 0
|
||||
? getAnswer(scope.row.options)
|
||||
: ""
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="120"
|
||||
label="操作"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="addOrUpdateHandle(scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
|
||||
<el-button
|
||||
style="color: red;"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="deleteHandle(scope.row.id)"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
:current-page="pageIndex"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="totalPage"
|
||||
style="padding: 30px 0; text-align: center;"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
>
|
||||
</el-pagination>
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<add
|
||||
:course="course"
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
:relationProducts="relationProducts"
|
||||
@pclose="pclose"
|
||||
@showProTable="showProTable"
|
||||
@refreshDataList="getDataList"
|
||||
></add>
|
||||
<commonShopTable
|
||||
v-if="shopTableVisible"
|
||||
ref="commonShopTable"
|
||||
:currentId="courseId"
|
||||
currentType="courseLinkPro"
|
||||
@linkList="linkList"
|
||||
@close="closeShopTable"
|
||||
></commonShopTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import global from "@/views/common/common.vue"; //引入共用组间
|
||||
import commonShopTable from "./questionBank/shopproductTable.vue";
|
||||
import Add from "./questionBank/add.vue";
|
||||
|
||||
export default {
|
||||
props: ["course"],
|
||||
data() {
|
||||
return {
|
||||
baseUrl: global.baseUrl,
|
||||
selectType: [],
|
||||
shopTableVisible: false,
|
||||
director: {
|
||||
director: null,
|
||||
ddirector: null
|
||||
},
|
||||
directorShow: false,
|
||||
remoteMethodLoading: false,
|
||||
miniClassVisible: false,
|
||||
personSeting: false,
|
||||
userList: [],
|
||||
options: [
|
||||
{
|
||||
id: "all",
|
||||
title: "全部",
|
||||
children: undefined
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "医学",
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "国学",
|
||||
children: []
|
||||
}
|
||||
],
|
||||
courseId: "0",
|
||||
dataForm: {
|
||||
key: ""
|
||||
},
|
||||
relationProducts: [],
|
||||
query: {
|
||||
content: ""
|
||||
},
|
||||
dataList: [],
|
||||
delFlag: false,
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
totalPage: 0,
|
||||
dataListLoading: false,
|
||||
dataListSelections: [],
|
||||
addOrUpdateVisible: false,
|
||||
urlList: {
|
||||
medicalList: "/master/courseMedical/getCourseMedicalList", //医学
|
||||
sociologyList: "/master/courseSociology/getCourseSociologyList" //国学
|
||||
},
|
||||
resList: [],
|
||||
resListVisible: false,
|
||||
optCourse: {}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Add,
|
||||
commonShopTable
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query.upPageInde != null) {
|
||||
this.pageIndex = this.$route.query.upPageIndex;
|
||||
console.log(this.pageIndex);
|
||||
}
|
||||
this.getDataList();
|
||||
this.getTreeList(this.urlList.medicalList, 1);
|
||||
this.getTreeList(this.urlList.sociologyList, 2);
|
||||
},
|
||||
methods: {
|
||||
numberToABCD(num) {
|
||||
let result = "";
|
||||
let mod;
|
||||
|
||||
while (num >= 0) {
|
||||
mod = num % 26 || 26;
|
||||
result = String.fromCharCode(mod + 64) + result; // 65是'A'的ASCII值
|
||||
num = Math.floor(num / 26) - 1;
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
getAnswer(list) {
|
||||
console.log("list at line 260:", list);
|
||||
var str = "";
|
||||
var numList = [];
|
||||
|
||||
if (list.length > 0) {
|
||||
numList = list.map((e, i) => {
|
||||
if (e.rightWrong == 1) {
|
||||
console.log("i at line 289:", i);
|
||||
return this.numberToABCD(i + 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
numList = numList.filter(e => {
|
||||
if (e && e != undefined) {
|
||||
return e;
|
||||
}
|
||||
});
|
||||
str = numList.join(",");
|
||||
return str;
|
||||
},
|
||||
handleSuccess(file, fileList) {
|
||||
// this.form.imageList.push(file.url);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(`当前限制选择 3 个文件`);
|
||||
},
|
||||
delPro(val) {
|
||||
console.log(val, this.relationProducts);
|
||||
let list = this.relationProducts;
|
||||
|
||||
this.relationProducts = list.slice(1, 1);
|
||||
},
|
||||
saveDirector() {
|
||||
if (
|
||||
this.director.director == this.director.ddirector &&
|
||||
this.director.director != null
|
||||
) {
|
||||
this.$message.error("主任与副主任不能是同一人");
|
||||
return;
|
||||
}
|
||||
var director = 0;
|
||||
var ddirector = 0;
|
||||
if (this.director.director) {
|
||||
director = this.director.director;
|
||||
}
|
||||
if (this.director.ddirector) {
|
||||
ddirector = this.director.ddirector;
|
||||
}
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/master/course/editCourseDirector"),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
courseId: this.optCourse.id,
|
||||
director: director, //主任，清空时传0
|
||||
ddirector: ddirector //副主任，清空时传0
|
||||
})
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data.code == 0) {
|
||||
this.$message.success("操作成功！");
|
||||
this.closeDirector();
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
this.$message.error("获取课程信息失败");
|
||||
_info = null;
|
||||
});
|
||||
},
|
||||
closeDirector() {
|
||||
this.directorShow = false;
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
this.$refs["director"].resetFields();
|
||||
this.director = {
|
||||
director: null,
|
||||
ddirector: null
|
||||
};
|
||||
this.userList = [];
|
||||
this.optCourse = {};
|
||||
console.log("director关闭了吗", this.director);
|
||||
});
|
||||
}, 200);
|
||||
},
|
||||
async showDirectorShow(data) {
|
||||
this.optCourse = data;
|
||||
var obj = await this.getDirectorInfo(data.id);
|
||||
console.log("教务信息", obj);
|
||||
if (obj) {
|
||||
// console.log("有绑定", obj.data.director.tel);
|
||||
if (obj.data.director != null) {
|
||||
var list = this.userList.map(item => {
|
||||
return item.id;
|
||||
});
|
||||
console.log("list", list);
|
||||
var i = list.find(function(elem) {
|
||||
return elem == obj.data.director.id;
|
||||
});
|
||||
if (!i) {
|
||||
this.userList.push({
|
||||
id: obj.data.director.id,
|
||||
tel: obj.data.director.tel
|
||||
});
|
||||
}
|
||||
this.director.director = obj.data.director.id;
|
||||
} else {
|
||||
// this.director.director = null;
|
||||
}
|
||||
if (obj.data.ddirector != null) {
|
||||
console.log("jinlailema");
|
||||
var list = this.userList.map(item => {
|
||||
return item.id;
|
||||
});
|
||||
console.log("list", list);
|
||||
var i = list.find(function(elem) {
|
||||
return elem == obj.data.ddirector.id;
|
||||
});
|
||||
if (!i) {
|
||||
this.userList.push({
|
||||
id: obj.data.ddirector.id,
|
||||
tel: obj.data.ddirector.tel
|
||||
});
|
||||
}
|
||||
this.director.ddirector = obj.data.ddirector.id;
|
||||
} else {
|
||||
// this.ddirector.director = null;
|
||||
}
|
||||
} else {
|
||||
console.log("没有绑定");
|
||||
this.director = {
|
||||
director: null,
|
||||
ddirector: null
|
||||
};
|
||||
}
|
||||
this.directorShow = true;
|
||||
},
|
||||
// 检索教务信息
|
||||
getDirectorInfo(id) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/master/course/getCourseDirector"),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
courseId: id
|
||||
})
|
||||
})
|
||||
.then(res => {
|
||||
resolve(res);
|
||||
// if (res.code === 0) {
|
||||
// _info = res.director;
|
||||
// console.log('教务信息++++res', res.director)
|
||||
// }
|
||||
})
|
||||
.catch(e => {
|
||||
this.$message.error("获取课程信息失败");
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 搜索用户列表
|
||||
remoteMethod(query) {
|
||||
if (query !== "") {
|
||||
this.remoteMethodLoading = true;
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/book/user/getUserList"),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
key: query
|
||||
})
|
||||
})
|
||||
.then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.userList = data.user.records;
|
||||
this.remoteMethodLoading = false;
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
this.userList = [];
|
||||
this.remoteMethodLoading = false;
|
||||
});
|
||||
} else {
|
||||
this.userList = [];
|
||||
}
|
||||
},
|
||||
pclose() {
|
||||
// this.relationProducts = [];
|
||||
this.courseId = null;
|
||||
this.addOrUpdateVisible = false;
|
||||
console.log("关闭了 ");
|
||||
},
|
||||
closeShopTable() {
|
||||
this.shopTableVisible = false;
|
||||
console.log("关闭了 ");
|
||||
},
|
||||
linkList(data) {
|
||||
console.log("父级", data);
|
||||
if (data && data.length > 0) {
|
||||
this.relationProducts = data;
|
||||
console.log(
|
||||
"this.relationProducts at line 506:",
|
||||
this.relationProducts
|
||||
);
|
||||
}
|
||||
},
|
||||
showProTable(data) {
|
||||
console.log("data", data);
|
||||
this.$nextTick(() => {
|
||||
this.shopTableVisible = true;
|
||||
// this.$refs.commonShopTable.open();
|
||||
});
|
||||
},
|
||||
closeLink() {
|
||||
this.resListVisible = false;
|
||||
this.resList = [];
|
||||
},
|
||||
showLinkTags(row) {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/master/course/getCourseLableLinkList"),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
courseId: row.id
|
||||
})
|
||||
}).then(res => {
|
||||
this.resListVisible = true;
|
||||
if (res.data.code == 0 && res.data.resList.length > 0) {
|
||||
this.resList = res.data.resList;
|
||||
}
|
||||
// console.log(row, "row" , res.data.resList,this.resList);
|
||||
});
|
||||
},
|
||||
handleChange(value) {
|
||||
console.log(value, "989999999");
|
||||
},
|
||||
async getTreeList(treeList, type) {
|
||||
this.dataListLoading = true;
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl(treeList),
|
||||
method: "get"
|
||||
}).then(({ data }) => {
|
||||
console.log("🚀 ~ getDataList ~ data:", data);
|
||||
if (data && data.code === 0) {
|
||||
if (type == 1) {
|
||||
this.options[type].children = data.Medicals;
|
||||
} else if (type == 2) {
|
||||
this.options[type].children = data.sociologys;
|
||||
}
|
||||
|
||||
// this.totalPage = data.page.totalCount
|
||||
} else {
|
||||
this.options[type].children = [];
|
||||
// this.totalPage = 0
|
||||
}
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
|
||||
console.log("this.options at line 333:", this.options);
|
||||
},
|
||||
// 获取数据列表
|
||||
getDataList() {
|
||||
this.relationProducts = [];
|
||||
var data = {
|
||||
page: this.pageIndex,
|
||||
limit: this.pageSize,
|
||||
content: this.query.content, //关键字
|
||||
courseId: this.course.id //关键字
|
||||
};
|
||||
|
||||
this.dataListLoading = true;
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/common/classExam/getClassExamSubjectList"),
|
||||
method: "post",
|
||||
data: this.$http.adornData(data)
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataList = data.page.records;
|
||||
this.totalPage = data.page.total;
|
||||
} else {
|
||||
this.dataList = [];
|
||||
this.totalPage = 0;
|
||||
}
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
this.pageSize = val;
|
||||
this.pageIndex = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.pageIndex = val;
|
||||
this.getDataList();
|
||||
},
|
||||
// 多选
|
||||
selectionChangeHandle(val) {
|
||||
this.dataListSelections = val;
|
||||
},
|
||||
// 新增 / 修改
|
||||
addOrUpdateHandle(row) {
|
||||
this.addOrUpdateVisible = true;
|
||||
row ? (this.courseId = row.id) : "";
|
||||
// this.courseId = row.id
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(row);
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
deleteHandle(id) {
|
||||
var ids = id;
|
||||
|
||||
this.$confirm(`确定对[id=${id}]进行删除操作?`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`/common/classExam/delClassExamSubject`),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
subjectId: ids
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getDataList();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 开关变化
|
||||
SwitchChange(event) {
|
||||
/*点击时他会自动把你绑定的值变更，直接去请求数据就可以了*/
|
||||
var parms = {
|
||||
delFlag: event.delFlag,
|
||||
id: event.id
|
||||
};
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/book/book/update"),
|
||||
method: "post",
|
||||
data: parms
|
||||
})
|
||||
.then(res => {
|
||||
this.$message({
|
||||
message: "成功",
|
||||
type: "success"
|
||||
});
|
||||
this.loading = false;
|
||||
this.getDataList();
|
||||
})
|
||||
.catch(error => {
|
||||
this.loading = false;
|
||||
console.log(error);
|
||||
});
|
||||
console.log(event);
|
||||
},
|
||||
chapterHandle(id, row) {
|
||||
if (row.novel == "") {
|
||||
this.$alert("请上传电子书文件后在进行此操作", "提示", {
|
||||
confirmButtonText: "好的"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/book/book/getChapter"),
|
||||
method: "get",
|
||||
params: this.$http.adornParams({
|
||||
id: id
|
||||
})
|
||||
}).then(res => {
|
||||
this.$message({
|
||||
message: "成功",
|
||||
type: "success"
|
||||
});
|
||||
this.loading = false;
|
||||
this.getDataList();
|
||||
});
|
||||
},
|
||||
contentHandle(id) {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/book/bookchaptercontent/getBookVoices"),
|
||||
method: "get",
|
||||
params: this.$http.adornParams({
|
||||
id: id
|
||||
})
|
||||
}).then(res => {
|
||||
this.$message({
|
||||
message: "成功",
|
||||
type: "success"
|
||||
});
|
||||
this.loading = false;
|
||||
this.getDataList();
|
||||
});
|
||||
},
|
||||
voicesHandle(id) {
|
||||
//allVoices
|
||||
this.$http({
|
||||
// url: this.$http.adornUrl('/book/bookchaptercontent/allVoices'),
|
||||
url: this.$http.adornUrl("/book/bookchaptercontent/AllVOices"),
|
||||
method: "get",
|
||||
params: this.$http.adornParams({
|
||||
id: id
|
||||
})
|
||||
}).then(res => {
|
||||
console.log("book/bookchaptercontent/AllVOices");
|
||||
this.$message({
|
||||
message: "成功",
|
||||
type: "success"
|
||||
});
|
||||
this.loading = false;
|
||||
this.getDataList();
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isSameOne() {
|
||||
if (
|
||||
this.director.ddirector == this.director.director &&
|
||||
this.director.ddirector != null
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.el-select-dropdown__item.selected {
|
||||
/deep/ .el-select-dropdown__item.selected {
|
||||
color: #149f97;
|
||||
}
|
||||
}
|
||||
.flexbox {
|
||||
display: flex;
|
||||
}
|
||||
.demo-table-expand {
|
||||
font-size: 0;
|
||||
}
|
||||
.demo-table-expand label {
|
||||
width: 90px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
.demo-table-expand .el-form-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
width: 50%;
|
||||
}
|
||||
.el-table__expanded-cell[class*="cell"] {
|
||||
padding: 15px !important;
|
||||
}
|
||||
</style>
|
||||
682
src/views/modules/course/examination/questionBank/add.vue
Normal file
682
src/views/modules/course/examination/questionBank/add.vue
Normal file
@@ -0,0 +1,682 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
width="600"
|
||||
v-if="visible"
|
||||
:title="!dataForm.id ? '新增' : '修改'"
|
||||
:close-on-click-modal="false"
|
||||
:append-to-body="true"
|
||||
@destroy-on-close="true"
|
||||
:visible.sync="visible"
|
||||
@close="handlereset"
|
||||
>
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="题目名称" prop="content">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="dataForm.content"
|
||||
placeholder="题目名称"
|
||||
type="textarea"
|
||||
autosize
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="试题类型" prop="type">
|
||||
<el-radio-group v-model="dataForm.type" @change="changeRadio">
|
||||
<el-radio :label="0">单选题</el-radio>
|
||||
<el-radio :label="1">多选题</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="章节名称" prop="chapter">
|
||||
<el-input clearable v-model="dataForm.chapter" placeholder="章节名称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="音视频" prop="media">
|
||||
<div
|
||||
style="display: flex;align-items: center;justify-content: space-between;"
|
||||
>
|
||||
<el-input clearable
|
||||
v-model="dataForm.media"
|
||||
placeholder="音视频"
|
||||
style="width: calc(100% - 200px);"
|
||||
></el-input>
|
||||
<el-input clearable
|
||||
style="width: 180px;"
|
||||
v-model="dataForm.mediaTime"
|
||||
placeholder="音视频时间"
|
||||
></el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="出题人" prop="createUser">
|
||||
<el-input v-model="dataForm.createUser" clearable placeholder="出题人"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="答案选项"
|
||||
prop="title"
|
||||
v-if="dataForm.type == 0 || dataForm.type == 1"
|
||||
>
|
||||
<div style="overflow: hidden;">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="add()"
|
||||
style="float: right;"
|
||||
>新增选项</el-button
|
||||
>
|
||||
<vxe-table
|
||||
style="margin-top: 10px;float: left;width: 100%;"
|
||||
ref="xTable"
|
||||
border
|
||||
:seq-config="seqConfig"
|
||||
resizable
|
||||
@radio-change="radioChangeEvent"
|
||||
:radio-config="{ strict: false }"
|
||||
show-overflow
|
||||
:data="tableData"
|
||||
:edit-config="{ trigger: 'click', mode: 'cell' }"
|
||||
@checkbox-change="selectChangeEvent"
|
||||
>
|
||||
<vxe-column
|
||||
v-for="config in tableColumn"
|
||||
:key="config.key"
|
||||
:type="config.type"
|
||||
:field="config.field"
|
||||
:title="config.title"
|
||||
:fixed="config.fixed"
|
||||
:width="config.width"
|
||||
:filters="config.filters"
|
||||
:edit-render="
|
||||
config.isEdit ? { autofocus: '.vxe-input--inner' } : {}
|
||||
"
|
||||
>
|
||||
<template #edit="{ row }" v-if="config.isEdit">
|
||||
<vxe-input v-model="row[config.field]" type="text"></vxe-input>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column title="操作" width="80" show-overflow>
|
||||
<template #default="{ row,rowIndex }">
|
||||
<el-button
|
||||
@click="removeEvent(row, rowIndex)"
|
||||
size="mini"
|
||||
type="danger"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handlereset">取消</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import debounce from "lodash/debounce"; //导入lodash中的debounce
|
||||
import commonShop from "@/views/components/commonBookTags/shopproduct.vue";
|
||||
import global from "@/views/common/common.vue"; //引入共用组间
|
||||
import { quillEditor } from "vue-quill-editor";
|
||||
import "quill/dist/quill.core.css";
|
||||
import "quill/dist/quill.snow.css";
|
||||
import "quill/dist/quill.bubble.css";
|
||||
const toolbarOptions = [
|
||||
["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
|
||||
["blockquote", "code-block"], //引用，代码块
|
||||
[{ header: 1 }, { header: 2 }], // 几级标题
|
||||
[{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
|
||||
[{ script: "sub" }, { script: "super" }], // 下角标，上角标
|
||||
[{ indent: "-1" }, { indent: "+1" }], // 缩进
|
||||
[{ direction: "rtl" }], // 文字输入方向
|
||||
[{ size: ["small", false, "large", "huge"] }], // 字体大小
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
||||
[{ color: [] }, { background: [] }], // 颜色选择
|
||||
[
|
||||
{
|
||||
font: [
|
||||
"SimSun",
|
||||
"SimHei",
|
||||
"Microsoft-YaHei",
|
||||
"KaiTi",
|
||||
"FangSong",
|
||||
"Arial"
|
||||
]
|
||||
}
|
||||
], // 字体
|
||||
[{ align: [] }], // 居中
|
||||
["clean"], // 清除样式,
|
||||
["link", "image"] // 上传图片、上传视频
|
||||
];
|
||||
function numberToABCD(num) {
|
||||
let result = "";
|
||||
let mod;
|
||||
|
||||
while (num >= 0) {
|
||||
mod = num % 26 || 26;
|
||||
result = String.fromCharCode(mod + 64) + result; // 65是'A'的ASCII值
|
||||
num = Math.floor(num / 26) - 1;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
quillEditor,
|
||||
commonShop
|
||||
},
|
||||
props: ["course"],
|
||||
data() {
|
||||
return {
|
||||
seqConfig: {
|
||||
seqMethod({ rowIndex }) {
|
||||
return numberToABCD(rowIndex + 1);
|
||||
}
|
||||
},
|
||||
tableColumn: [],
|
||||
selectRow: null,
|
||||
selectData: [],
|
||||
tableData: [],
|
||||
levelList: [
|
||||
{ label: "较易", value: "1" },
|
||||
{ label: "中等", value: "2" },
|
||||
{ label: "较难", value: "3" }
|
||||
],
|
||||
editorOption: {
|
||||
modules: {
|
||||
history: {
|
||||
delay: 1000,
|
||||
maxStack: 50,
|
||||
userOnly: false
|
||||
},
|
||||
toolbar: {
|
||||
container: toolbarOptions,
|
||||
handlers: {
|
||||
image: function(value) {
|
||||
if (value) {
|
||||
// 调用element的图片上传组件
|
||||
document
|
||||
.querySelector(".chapter-avatar-uploader input")
|
||||
.click();
|
||||
} else {
|
||||
this.quill.format("image", false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
placeholder: "请输入正文"
|
||||
},
|
||||
relationProducts: [],
|
||||
baseUrl: global.baseUrl,
|
||||
visible: false,
|
||||
bookList: [
|
||||
{
|
||||
dictType: 0,
|
||||
dictValue: "普通"
|
||||
},
|
||||
{
|
||||
dictType: 1,
|
||||
dictValue: "中医经典"
|
||||
},
|
||||
{
|
||||
dictType: 2,
|
||||
dictValue: "国学经典"
|
||||
}
|
||||
],
|
||||
medicaldesBookTypeList: [
|
||||
{
|
||||
dictType: 1,
|
||||
dictValue: "中医基础"
|
||||
},
|
||||
{
|
||||
dictType: 2,
|
||||
dictValue: "中医经典"
|
||||
},
|
||||
{
|
||||
dictType: 3,
|
||||
dictValue: "各家学说"
|
||||
},
|
||||
{
|
||||
dictType: 4,
|
||||
dictValue: "中医临床"
|
||||
},
|
||||
{
|
||||
dictType: 5,
|
||||
dictValue: "文学"
|
||||
},
|
||||
{
|
||||
dictType: 6,
|
||||
dictValue: "哲学"
|
||||
}
|
||||
],
|
||||
props: {
|
||||
dictType: "",
|
||||
dictValue: ""
|
||||
},
|
||||
gushuList: [],
|
||||
authorList: [],
|
||||
restaurants: [],
|
||||
author: "",
|
||||
publisherList: [],
|
||||
fileList: [],
|
||||
fileListNovel: [],
|
||||
dialogImageUrl: "",
|
||||
dialogVisible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
title: ""
|
||||
},
|
||||
splitsTypeList: [],
|
||||
courseId: undefined,
|
||||
dataRule: {
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入题目"
|
||||
// trigger: "change",
|
||||
}
|
||||
],
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择试题类型"
|
||||
// trigger: "change",
|
||||
}
|
||||
]
|
||||
},
|
||||
urlList: {
|
||||
info: "/common/classExam/classExamSubjectInfo",
|
||||
addTopic: "/common/classExam/addClassExamSubject",
|
||||
editTopic: "/common/classExam/updateClassExamSubject",
|
||||
|
||||
deleteTopic: "/common/classExam/delClassExamSubject",
|
||||
addOption: "/common/classExam/addClassExamOption",
|
||||
editOption: "/common/classExam/addClassExamOption",
|
||||
deleteOption: "/common/classExam/delClassExamOption"
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
beforeDestory() {
|
||||
console.log("at line 301:", this.tableData());
|
||||
},
|
||||
mounted() {
|
||||
// this.restaurants = this.loadAll();
|
||||
this.$bus.$on("linkList", data => {
|
||||
console.log("获得列表", data);
|
||||
if (data && data.length > 0) {
|
||||
this.relationProducts = this.relationProducts.concat(data);
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
shopDelete(row) {
|
||||
console.log("row at line 291:", row);
|
||||
// this.$emit("delete", [row]);
|
||||
},
|
||||
initTable() {
|
||||
var index;
|
||||
|
||||
if (this.dataForm.type == 1) {
|
||||
var tableColumn = [
|
||||
{
|
||||
key: "checkbox",
|
||||
type: "checkbox",
|
||||
width: 50,
|
||||
fixed: null
|
||||
},
|
||||
{ key: "seq", type: "seq", width: 60, fixed: null },
|
||||
{ key: "content", field: "content", title: "选项", isEdit: true }
|
||||
];
|
||||
} else if (this.dataForm.type == 0) {
|
||||
var tableColumn = [
|
||||
{
|
||||
key: "radio",
|
||||
type: "radio",
|
||||
width: 50,
|
||||
fixed: null
|
||||
},
|
||||
{ key: "seq", type: "seq", width: 60, fixed: null },
|
||||
{ key: "content", field: "content", title: "选项", isEdit: true }
|
||||
];
|
||||
}
|
||||
this.tableColumn = tableColumn;
|
||||
var that = this;
|
||||
this.$nextTick(() => {
|
||||
if (this.tableData.length > 0) {
|
||||
console.log("this.tableData.length at line 354:", this.tableData);
|
||||
this.tableData.forEach((e, i) => {
|
||||
if (e.rightWrong == 1) {
|
||||
console.log("e.rightWrong at line 356:", e);
|
||||
setTimeout(() => {
|
||||
if (this.dataForm.type == 1) {
|
||||
that.$refs.xTable.setCheckboxRow(this.tableData[i], true);
|
||||
} else {
|
||||
that.$refs.xTable.setRadioRow(this.tableData[i]);
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.clearRadioRowEevnt();
|
||||
this.clearCheckboxEevnt();
|
||||
this.$forceUpdate();
|
||||
});
|
||||
},
|
||||
changeRadio(val) {
|
||||
this.tableData = this.tableData.map(e => {
|
||||
return {
|
||||
...e,
|
||||
rightWrong: 0
|
||||
};
|
||||
});
|
||||
this.initTable();
|
||||
},
|
||||
radioChangeEvent({ row }) {
|
||||
this.selectRow = row;
|
||||
|
||||
console.log("单选事件");
|
||||
},
|
||||
selectChangeEvent({ checked }) {
|
||||
this.selectData = this.$refs.xTable.getCheckboxRecords();
|
||||
console.log(checked ? "勾选事件" : "取消事件", this.selectData);
|
||||
},
|
||||
clearCheckboxEevnt() {
|
||||
this.selectData = [];
|
||||
this.$refs.xTable.clearCheckboxRow();
|
||||
},
|
||||
clearRadioRowEevnt() {
|
||||
this.selectRow = null;
|
||||
this.$refs.xTable.clearRadioRow();
|
||||
},
|
||||
getRadioEvent1() {
|
||||
var selectIds = [];
|
||||
if (this.dataForm.type == 0) {
|
||||
var data = this.$refs.xTable.getRadioRecord();
|
||||
if (data && data.id) {
|
||||
selectIds.push(data.id);
|
||||
console.log('selectIds.push at line 404:', selectIds.push)
|
||||
}
|
||||
} else {
|
||||
var data = this.$refs.xTable.getCheckboxRecords();
|
||||
selectIds = data.map(e => {
|
||||
return e.id;
|
||||
});
|
||||
console.log("selectIds at line 369:", selectIds);
|
||||
}
|
||||
|
||||
console.log("list at line 363:", list);
|
||||
var list = [...this.tableData];
|
||||
list.map(e => {
|
||||
e.rightWrong = 0;
|
||||
});
|
||||
if (selectIds.length > 0) {
|
||||
list.map(e => {
|
||||
if (selectIds.includes(e.id)) {
|
||||
e.rightWrong = 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return list;
|
||||
},
|
||||
|
||||
async removeEvent(row, rowIndex) {
|
||||
console.log("row at line 303:", row, rowIndex);
|
||||
this.tableData.splice(rowIndex, 1);
|
||||
|
||||
// const type = await VXETable.modal.confirm('您确定要删除该数据?')
|
||||
const $table = this.$refs.xTable;
|
||||
},
|
||||
add() {
|
||||
this.tableData.push({});
|
||||
},
|
||||
formatSex(value) {
|
||||
if (value === "1") {
|
||||
return "男";
|
||||
}
|
||||
if (value === "0") {
|
||||
return "女";
|
||||
}
|
||||
return "";
|
||||
},
|
||||
formatMultiSex(values) {
|
||||
if (values) {
|
||||
return values.map(val => this.formatSex(val)).join(",");
|
||||
}
|
||||
return "";
|
||||
},
|
||||
delPro(i) {
|
||||
console.log("i", i);
|
||||
// this.$emit('delPro',i)
|
||||
this.relationProducts.splice(i, 1);
|
||||
console.log("处理后的", this.relationProducts);
|
||||
},
|
||||
showProTable() {
|
||||
this.$emit("showProTable", true);
|
||||
},
|
||||
contentUploadSuccess(res, file) {
|
||||
// console.log(res)
|
||||
let quill = this.$refs.myQuillEditor.quill;
|
||||
// 如果上传成功
|
||||
if (res) {
|
||||
// 获取光标所在位置
|
||||
let length = quill.getSelection().index;
|
||||
// 插入图片，res为服务器返回的图片链接地址
|
||||
quill.insertEmbed(length, "image", res.url);
|
||||
// 调整光标到最后
|
||||
quill.setSelection(length + 1);
|
||||
} else {
|
||||
// 提示信息，需引入Message
|
||||
this.$message.error("图片插入失败！");
|
||||
}
|
||||
},
|
||||
// 失去焦点事件
|
||||
onEditorBlur(quill) {
|
||||
// console.log('editor blur!', quill)
|
||||
},
|
||||
// 获得焦点事件
|
||||
onEditorFocus(quill) {
|
||||
//console.log('editor focus!', quill)
|
||||
},
|
||||
// 准备富文本编辑器
|
||||
onEditorReady(quill) {
|
||||
// console.log('editor ready!', quill)
|
||||
},
|
||||
init(row) {
|
||||
console.log("11111", row);
|
||||
if (row && row.id) {
|
||||
this.courseId = row.id;
|
||||
this.$http
|
||||
.request({
|
||||
url: this.$http.adornUrl(this.urlList.info),
|
||||
method: "POST",
|
||||
data: {
|
||||
subjectId: row.id
|
||||
},
|
||||
header: {
|
||||
//默认 无 说明：请求头
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
})
|
||||
|
||||
.then(res => {
|
||||
console.log("result at line 452:", res);
|
||||
if (res && res.data.code === 0) {
|
||||
var data = res.data.classExamSubjectInfo;
|
||||
console.log("data at line 357:", data);
|
||||
|
||||
this.dataForm = { ...data };
|
||||
this.tableData = data.options;
|
||||
this.initTable();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.dataForm = {};
|
||||
}
|
||||
|
||||
this.visible = true;
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit: debounce(async function(ids, sourceType) {
|
||||
console.log("this.course at line 475:", this.course);
|
||||
this.$refs["dataForm"].validate(valid => {
|
||||
if (valid) {
|
||||
var list = this.getRadioEvent1();
|
||||
if(list.length==0){
|
||||
this.$message.error("请新增答案选项");
|
||||
return false
|
||||
}
|
||||
var conditionMet = list.some(e => e.rightWrong == 1);
|
||||
var conditionContent = list.some(e => e.content == '' ||!e.content);
|
||||
console.log("list at line 476:", conditionMet);
|
||||
if (conditionContent) {
|
||||
this.$message.error("请输入选项");
|
||||
return false;
|
||||
} if (!conditionMet) {
|
||||
this.$message.error("请选择正确答案");
|
||||
return false;
|
||||
}
|
||||
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(
|
||||
`${
|
||||
!this.dataForm.id
|
||||
? this.urlList.addTopic
|
||||
: this.urlList.editTopic
|
||||
}`
|
||||
),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
id: this.dataForm.id ? this.dataForm.id : "",
|
||||
courseId: this.course.id,
|
||||
|
||||
type: this.dataForm.type, //类型 0单选题1多选题
|
||||
content: this.dataForm.content, //题目内容
|
||||
chapter: this.dataForm.chapter, //所属章节
|
||||
media: this.dataForm.media, //音视频序号
|
||||
mediaTime: this.dataForm.mediaTime, //音视频时间
|
||||
createUser: this.dataForm.createUser,
|
||||
options: list //出题人
|
||||
})
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false;
|
||||
this.relationProductIds = [];
|
||||
this.relationProducts = [];
|
||||
this.$emit("refreshDataList");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}, 200),
|
||||
handlePicSuccess(res, file) {
|
||||
// console.log(res,'res')
|
||||
if (res.msg == "success") {
|
||||
this.dataForm.image = res.url;
|
||||
this.fileList.push({
|
||||
name: file.name,
|
||||
url: res.url
|
||||
});
|
||||
// console.log(this.dataForm.image,'image')
|
||||
this.$message.success("上传成功");
|
||||
} else {
|
||||
this.$message.error("上传失败");
|
||||
}
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.dataForm.image = "";
|
||||
this.fileList = [];
|
||||
this.dataForm.noneBtnImg = fileList.length >= this.dataForm.limitCountImg;
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dataForm.image = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
handleDownload(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handlereset() {
|
||||
// (this.fileList = []), (this.fileListNovel = []), (this.visible = false);
|
||||
this.$emit("pclose");
|
||||
// this.relationProducts = [];
|
||||
// this.courseId = undefined;
|
||||
this.visible = false;
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(
|
||||
`当前限制选择 3 个文件，本次选择了 ${
|
||||
files.length
|
||||
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
|
||||
);
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${file.name}？`);
|
||||
},
|
||||
handleRemoveNovel(file) {
|
||||
if (this.dataForm.novel) {
|
||||
this.dataForm.novel = "";
|
||||
}
|
||||
},
|
||||
handleNovelSuccess(file) {
|
||||
if (this.dataForm.novel) {
|
||||
this.dataForm.novel = file.url;
|
||||
}
|
||||
}
|
||||
// querySearch(queryString, cb) {
|
||||
// var restaurants = this.restaurants;
|
||||
// var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
||||
// // 调用 callback 返回建议列表的数据
|
||||
// console.log(results)
|
||||
// cb(results);
|
||||
// },
|
||||
// createFilter(queryString) {
|
||||
// return (restaurant) => {
|
||||
// return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||||
// };
|
||||
// },
|
||||
// handleSelect(item) {
|
||||
// this.dataForm.authorId = item.id
|
||||
// console.log(item);
|
||||
// }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .isUpload {
|
||||
.el-uploadfeng {
|
||||
.el-upload--picture-card {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon {
|
||||
color: #17b3a3 !important;
|
||||
}
|
||||
|
||||
/deep/ .vxe-table--render-default .vxe-cell--radio .vxe-radio--icon {
|
||||
color: #17b3a3 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,480 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer
|
||||
title="新增关联课程"
|
||||
v-if="drawer"
|
||||
:wrapperClosable="false"
|
||||
:visible.sync="drawer"
|
||||
:before-close="handleClose"
|
||||
:append-to-body="true"
|
||||
@destroy-on-close="true"
|
||||
direction="rtl"
|
||||
size="70%"
|
||||
@close="close"
|
||||
>
|
||||
<div class="shop_drawer_box demo-drawer__content">
|
||||
<div class="addFormBox">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="query"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item label="课程名称">
|
||||
<el-input
|
||||
v-model="query.courseName"
|
||||
placeholder="课程名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="平台分类">
|
||||
<el-cascader
|
||||
clearable
|
||||
:props="{
|
||||
label: 'title',
|
||||
value: 'id',
|
||||
checkStrictly: true
|
||||
}"
|
||||
v-model="selectType"
|
||||
:options="options"
|
||||
@change="handleChange"
|
||||
>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
@click="
|
||||
pageIndex = 1;
|
||||
getDataList();
|
||||
"
|
||||
>查询</el-button
|
||||
>
|
||||
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
ref="table"
|
||||
height="85%"
|
||||
:data="dataList"
|
||||
:row-key="getRowKeys"
|
||||
border
|
||||
size="mini"
|
||||
v-loading="dataListLoading"
|
||||
@selection-change="handleSelectionChange"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column label="课程ID" width="70" align="center" prop="id">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="title"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="课程名称"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="课程图"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<img
|
||||
v-if="scope.row.image != ''"
|
||||
:src="scope.row.image"
|
||||
width="25"
|
||||
height="35"
|
||||
class="tableImg"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="productStock"
|
||||
width="120"
|
||||
header-align="center"
|
||||
align="center"
|
||||
sortable
|
||||
label="操作"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
size="mini"
|
||||
@click="addLink(scope.row, scope.$index)"
|
||||
>添加</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
style="margin-top: 20px;"
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
:current-page="pageIndex"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
<!-- <div class="demo-drawer__footer">
|
||||
<div style="float: right; margin-top: 20px">
|
||||
<el-button @click="close" size="small">取 消</el-button>
|
||||
<el-button type="primary" @click="submit" :loading="loading" size="small">{{ loading ? "提交中 ..." : "确 定"
|
||||
}}</el-button>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 弹窗, 新增 / 修改 -->
|
||||
<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @showchooseBookf = "showchooseBookf"></add-or-update>
|
||||
<choose-book v-if="chooseBookVisible" :bookIds = bookIds ref="chooseBook" :chooseBookVisible = chooseBookVisible @closeBookf = "closeBookf"></choose-book> -->
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import chooseBook from './chooseBook.vue'
|
||||
// import AddOrUpdate from './shopproduct-add-or-update'
|
||||
export default {
|
||||
props: ["currentType", "currentId"],
|
||||
data() {
|
||||
return {
|
||||
selectType: [],
|
||||
query: {
|
||||
type: "",
|
||||
categoryId: "",
|
||||
sociologyId: "",
|
||||
courseName: ""
|
||||
},
|
||||
options: [
|
||||
{
|
||||
id: "all",
|
||||
title: "全部",
|
||||
children: undefined
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "医学",
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "国学",
|
||||
children: []
|
||||
}
|
||||
],
|
||||
timer: null,
|
||||
drawer: false,
|
||||
loading: false,
|
||||
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
|
||||
multipleSelection: [], // 当前页选中的数据
|
||||
idKey: "productId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
|
||||
|
||||
bookMarketId: null,
|
||||
dataList: [],
|
||||
publishStatus: false,
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
totalPage: 0,
|
||||
dataListLoading: false,
|
||||
dataListSelections: [],
|
||||
addOrUpdateVisible: false,
|
||||
chooseBookVisible: false,
|
||||
bookIds: [],
|
||||
goodsTypeList: [],
|
||||
linkList: [],
|
||||
urlList: {
|
||||
medicalList: "/master/courseMedical/getCourseMedicalList", //医学
|
||||
sociologyList: "/master/courseSociology/getCourseSociologyList" //国学
|
||||
}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
// AddOrUpdate,
|
||||
// chooseBook
|
||||
},
|
||||
activated() {
|
||||
this.getDataList();
|
||||
this.getTreeList(this.urlList.medicalList, 1);
|
||||
this.getTreeList(this.urlList.sociologyList, 2);
|
||||
},
|
||||
mounted() {
|
||||
this.open();
|
||||
},
|
||||
methods: {
|
||||
async getTreeList(treeList, type) {
|
||||
this.dataListLoading = true;
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl(treeList),
|
||||
method: "get"
|
||||
}).then(({ data }) => {
|
||||
console.log("🚀 ~ getDataList ~ data:", data);
|
||||
if (data && data.code === 0) {
|
||||
if (type == 1) {
|
||||
this.options[type].children = data.Medicals;
|
||||
} else if (type == 2) {
|
||||
this.options[type].children = data.sociologys;
|
||||
}
|
||||
|
||||
// this.totalPage = data.page.totalCount
|
||||
} else {
|
||||
this.options[type].children = [];
|
||||
// this.totalPage = 0
|
||||
}
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
|
||||
console.log("this.options at line 333:", this.options);
|
||||
},
|
||||
addLink(row, i) {
|
||||
// 添加商品绑定
|
||||
this.linkList.push(row);
|
||||
console.log("linkList", this.linkList);
|
||||
// this.dataList.splice(i, 1);
|
||||
// this.getDataList()
|
||||
},
|
||||
handleReset() {
|
||||
this.query = {
|
||||
type: "",
|
||||
categoryId: "",
|
||||
sociologyId: "",
|
||||
courseName: ""
|
||||
};
|
||||
this.pageIndex = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
submit() {
|
||||
// var ids = this.multipleSelection.map((e) => e.productId).toString(",");
|
||||
// this.$emit("submit", ids);
|
||||
// console.log(
|
||||
// "🚀 ~ submit ~ this.multipleSelection:",
|
||||
// this.multipleSelection
|
||||
// );
|
||||
// this.drawer = false;
|
||||
},
|
||||
|
||||
// 获取商品类型
|
||||
getGoodsTypeList() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/book/sysdictdata/selectByType/goodsType"),
|
||||
method: "get"
|
||||
}).then(({ data }) => {
|
||||
// console.log(data.dataList)
|
||||
this.goodsTypeList = data.dataList;
|
||||
});
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$bus.$emit("linkList", this.linkList);
|
||||
this.linkList = [];
|
||||
// this.$emit("linkList", this.linkList)
|
||||
done();
|
||||
},
|
||||
async open() {
|
||||
this.drawer = true;
|
||||
this.query = {
|
||||
type: "",
|
||||
categoryId: "",
|
||||
sociologyId: "",
|
||||
courseName: ""
|
||||
};
|
||||
this.pageIndex = 1;
|
||||
|
||||
await this.getDataList();
|
||||
this.getTreeList(this.urlList.medicalList, 1);
|
||||
this.getTreeList(this.urlList.sociologyList, 2);
|
||||
},
|
||||
close() {
|
||||
this.$emit("close");
|
||||
this.drawer = false;
|
||||
},
|
||||
getRowKeys(row) {
|
||||
return row.productId;
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
console.log("🚀 ~ handleSelectionChange ~ val:", val);
|
||||
// table组件选中事件,记得加上@selection-change="handleSelectionChange"
|
||||
this.multipleSelection = val;
|
||||
// this.changePageCoreRecordData();
|
||||
},
|
||||
|
||||
closeBookf() {
|
||||
this.chooseBookVisible = false;
|
||||
},
|
||||
showchooseBookf(e) {
|
||||
// 显示图书列表
|
||||
this.chooseBookVisible = true;
|
||||
// console.log(this.bookIds,'this.bookIds')
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.chooseBook.getBookList()
|
||||
// this.bookIds = e.bookIds
|
||||
// })
|
||||
},
|
||||
// 获取数据列表
|
||||
async getDataList() {
|
||||
var data = {
|
||||
page: this.pageIndex,
|
||||
limit: this.pageSize,
|
||||
// courseName: this.query.courseName //关键字
|
||||
};
|
||||
|
||||
if (this.selectType.length == 0) {
|
||||
data.type = 0;
|
||||
data.medicalId = "";
|
||||
data.sociologyId = "";
|
||||
} else if (this.selectType.length >= 1) {
|
||||
data.type = this.selectType[0] == "all" ? 0 : this.selectType[0];
|
||||
if (this.selectType.length == 1) {
|
||||
data.medicalId = "";
|
||||
data.sociologyId = "";
|
||||
}
|
||||
if (this.selectType.length > 1) {
|
||||
if (this.selectType[0] == 1) {
|
||||
data.medicalId = this.selectType[this.selectType.length - 1];
|
||||
data.sociologyId = "";
|
||||
}
|
||||
if (this.selectType[0] == 2) {
|
||||
data.medicalId = "";
|
||||
data.sociologyId = this.selectType[this.selectType.length - 1];
|
||||
}
|
||||
}
|
||||
}
|
||||
this.dataListLoading = true;
|
||||
this.clear();
|
||||
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl(`/master/course/getCourseList`),
|
||||
method: "post",
|
||||
data: this.$http.adornData(data)
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataList = data.page.records;
|
||||
this.totalPage = data.page.total;
|
||||
} else {
|
||||
this.dataList = [];
|
||||
this.totalPage = 0;
|
||||
}
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
clear() {
|
||||
// this.$refs.table.clearSelection();
|
||||
this.multipleSelection = [];
|
||||
},
|
||||
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
// this.changePageCoreRecordData();
|
||||
this.pageSize = val;
|
||||
this.pageIndex = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
// 改变页的时候调用一次
|
||||
// this.changePageCoreRecordData();
|
||||
this.pageIndex = val;
|
||||
this.getDataList();
|
||||
},
|
||||
// 多选
|
||||
selectionChangeHandle(val) {
|
||||
this.dataListSelections = val;
|
||||
},
|
||||
// 新增 / 修改
|
||||
addOrUpdateHandle(id) {
|
||||
this.addOrUpdateVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id);
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
deleteHandle(id) {
|
||||
var ids = id
|
||||
? [id]
|
||||
: this.dataListSelections.map(item => {
|
||||
return item.productId;
|
||||
});
|
||||
this.$confirm(
|
||||
`确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
|
||||
"提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}
|
||||
).then(() => {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/book/shopproduct/delete"),
|
||||
method: "post",
|
||||
data: this.$http.adornData(ids, false)
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getDataList();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
SwitchChange(event) {
|
||||
/*点击时他会自动把你绑定的值变更，直接去请求数据就可以了*/
|
||||
var parms = {
|
||||
publishStatus: event.publishStatus,
|
||||
productId: event.productId
|
||||
};
|
||||
// console.log(parms)
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("/book/shopproduct/update"),
|
||||
method: "post",
|
||||
data: parms
|
||||
})
|
||||
.then(res => {
|
||||
this.$message({
|
||||
message: "成功",
|
||||
type: "success"
|
||||
});
|
||||
this.loading = false;
|
||||
this.getDataList();
|
||||
})
|
||||
.catch(error => {
|
||||
this.loading = false;
|
||||
console.log(error);
|
||||
});
|
||||
console.log(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.shop_drawer_box {
|
||||
padding: 20px !important;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.addFormBox {
|
||||
width: 100%;
|
||||
|
||||
// overflow: hidden;
|
||||
.form_item {
|
||||
width: 33%;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.el-drawer__header {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
</style>
|
||||
980
src/views/modules/course/examination/tags.vue
Normal file
980
src/views/modules/course/examination/tags.vue
Normal file
@@ -0,0 +1,980 @@
|
||||
<template>
|
||||
<div class="tree_box">
|
||||
<div style="overflow: hidden" v-if="source == 'tags'">
|
||||
<p
|
||||
class="info_bg"
|
||||
style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
|
||||
>
|
||||
课程分类
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="custom-tree-container">
|
||||
<el-tree
|
||||
:draggable="false"
|
||||
:allow-drop="false"
|
||||
:highlight-current="true"
|
||||
class="filter-tree"
|
||||
node-key="id"
|
||||
:data="treeDataList"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree"
|
||||
@node-click="handleNodeClick"
|
||||
:expand-on-click-node="false"
|
||||
>
|
||||
<!-- @click="handleClickNodes(node, data)" -->
|
||||
<span
|
||||
class="custom-tree-node"
|
||||
slot-scope="{ node, data }"
|
||||
@click="source == 'tags' ? handleClickNodes(node, data, 'edit') : ''"
|
||||
:class="
|
||||
`${currentNode && currentNode.data.id == data.id ? 'isSelect' : ''}`
|
||||
"
|
||||
style=" padding-left: 5px;
|
||||
box-sizing: border-box;"
|
||||
>
|
||||
<!-- @change="(e) => selectShop(data, e)" -->
|
||||
<span style="display: flex; align-items: center"
|
||||
><el-checkbox
|
||||
@change="selectShop(data)"
|
||||
:value="selectArr.includes(data.id)"
|
||||
v-if="data.isLast == 1 && source == 'shop'"
|
||||
style="margin-right: 10px"
|
||||
></el-checkbox
|
||||
>{{ node.label }}</span
|
||||
>
|
||||
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import dialogComponent from './seckillprodrelation'
|
||||
import debounce from "lodash/debounce"; //导入lodash中的debounce
|
||||
export default {
|
||||
props: [
|
||||
"dataList",
|
||||
"urlList",
|
||||
"source",
|
||||
"productId",
|
||||
"sourceType",
|
||||
"axiosType",
|
||||
"axiosResultKey"
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
currentNode: null,
|
||||
checkAll: false,
|
||||
treeDataList: [],
|
||||
selectArr: [],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "title"
|
||||
}
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
watch: {
|
||||
dataList(val) {
|
||||
this.treeDataList = val;
|
||||
},
|
||||
currentNode: {
|
||||
handler(newVal, oldVal) {
|
||||
// this.$emit('changeCurrentNode',this.currentNode)
|
||||
},
|
||||
|
||||
deep: true
|
||||
},
|
||||
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
console.log("🚀 ~ activated ~ this.currentNode:", this.currentNode, "9999");
|
||||
if (this.source == "tags") {
|
||||
if (this.currentNode && this.currentNode.data.id) {
|
||||
this.setCurrentNodeShow(this.currentNode.data.id);
|
||||
this.handleClickNodes(this.currentNode, this.currentNode.data, "edit");
|
||||
}
|
||||
}
|
||||
this.selectArr = [];
|
||||
this.checkAll = false;
|
||||
|
||||
// this.getDataList();
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getAssociatedGoodsList(urlList, idType) {
|
||||
console.log("🚀 ~ getAssociatedGoodsList ~ form:", form);
|
||||
// :currentId="addForm.id"
|
||||
// currentType="bookLabelId"
|
||||
var form = {};
|
||||
this.dataListLoading = true;
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl(`${urlList}`),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
current: 1,
|
||||
limit: 99999999,
|
||||
// productName: "",
|
||||
productId: this.productId,
|
||||
...form
|
||||
// bookLabelId: bookLabelId,
|
||||
})
|
||||
}).then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
if (idType == "bookLabelId") {
|
||||
this.selectArr = data.result.records.map(e => {
|
||||
return e.bookLabelId;
|
||||
});
|
||||
} else if (idType == "bookMarketId") {
|
||||
this.selectArr = data.result.records.map(e => {
|
||||
return e.bookMarketId;
|
||||
});
|
||||
}
|
||||
|
||||
console.log(
|
||||
"🚀 ~ getAssociatedGoodsList ~ this.selectArr:",
|
||||
this.selectArr
|
||||
);
|
||||
this.dataListLoading = false;
|
||||
} else {
|
||||
this.dataListLoading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
collectId(arr, ids = []) {
|
||||
arr.forEach(({ id, children, isLast }) => {
|
||||
if (id && isLast == 1) {
|
||||
ids.push(id);
|
||||
}
|
||||
if (children) {
|
||||
this.collectId(children, ids);
|
||||
}
|
||||
});
|
||||
return ids;
|
||||
},
|
||||
handleCheckAllChange(status) {
|
||||
this.selectArr = [];
|
||||
if (status) {
|
||||
this.selectArr = this.collectId(this.treeDataList);
|
||||
console.log("🚀 ~ handleCheckAllChange ~ data111:", this.selectArr);
|
||||
// this.treeDataList.forEach((e) => {
|
||||
// if (e.isLast == 1) {
|
||||
// this.selectArr.push(e.id);
|
||||
// }
|
||||
// });
|
||||
} else {
|
||||
this.selectArr = [];
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
selectShop: debounce(async function(v, status) {
|
||||
console.log("🚀 ~ selectShop ~ status:", status);
|
||||
|
||||
// if (this.selectArr.includes(v.id)) {
|
||||
// // this.selectArr = this.selectArr.filter(function (item) {
|
||||
// // return item !== v.id;
|
||||
// // });
|
||||
// } else {
|
||||
// // this.selectArr.push(v.id);
|
||||
// }
|
||||
console.log("🚀 ~ selectShop ~ v:", v);
|
||||
|
||||
console.log("🚀 ~ selectShop ~ this.selectShopArr999:", this.selectArr);
|
||||
|
||||
if (this.selectArr.includes(v.id)) {
|
||||
this.$emit("delete", v.id, this.sourceType);
|
||||
} else {
|
||||
this.$emit("submit", v.id, this.sourceType);
|
||||
}
|
||||
this.$forceUpdate();
|
||||
}, 200),
|
||||
// handleCheckAllChange(status) {
|
||||
// if (status) {
|
||||
// this.selectArr = this.treeDataList.map((e) => e.id);
|
||||
// } else {
|
||||
// this.selectArr = [];
|
||||
// }
|
||||
// this.$forceUpdate();
|
||||
// },
|
||||
async setCurrentNodeShow(id) {
|
||||
console.log("🚀 ~ setCurrentNodeShow ~ id222:", id, this.currentNode);
|
||||
|
||||
var newNodeData = {};
|
||||
if (id) {
|
||||
newNodeData = await this.$refs.tree.getNode(id);
|
||||
} else {
|
||||
newNodeData = {
|
||||
data: {}
|
||||
};
|
||||
}
|
||||
this.currentNode = newNodeData;
|
||||
this.$forceUpdate();
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.setCurrentKey(id);
|
||||
this.$refs.tree.setCheckedKeys([id]);
|
||||
});
|
||||
await this.$emit(
|
||||
"handleClickNodes",
|
||||
newNodeData,
|
||||
newNodeData.data,
|
||||
"edit"
|
||||
);
|
||||
},
|
||||
allowDrop(draggingNode, dropNode, type) {
|
||||
console.log(draggingNode.level, dropNode.level);
|
||||
//注掉的是同级拖拽
|
||||
if (draggingNode.level === dropNode.level) {
|
||||
return type === "prev" || type === "next";
|
||||
} else {
|
||||
// 不同级进行处理
|
||||
return false;
|
||||
}
|
||||
},
|
||||
async correlationShop(bookLabelId) {
|
||||
var status;
|
||||
var productId = this.$refs.commonShop.multipleSelection.map(
|
||||
e => e.productId
|
||||
);
|
||||
console.log("🚀 ~ correlationShop ~ productId:", productId);
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl(`/book/labelAndMarket/saveToLabel`),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
productId: productId.toString(","),
|
||||
bookLabelId: bookLabelId
|
||||
})
|
||||
}).then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
status = true;
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
status = false;
|
||||
}
|
||||
});
|
||||
return status;
|
||||
},
|
||||
//新增修改
|
||||
dataFormSubmit: debounce(async function(formName) {
|
||||
// return false
|
||||
if (this.addForm.title == "") {
|
||||
this.$message.error("请输入标签名称");
|
||||
return false;
|
||||
}
|
||||
await this.$refs[formName].validate(async valid => {
|
||||
if (valid) {
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl(`${this.urlList.add}`),
|
||||
method: "post",
|
||||
data: this.$http.adornData({
|
||||
...this.addForm
|
||||
})
|
||||
}).then(async ({ data }) => {
|
||||
console.log("data at line 328:", data);
|
||||
if (data && data.code === 0) {
|
||||
if (this.axiosResultKey) {
|
||||
console.log("at line 331:", data[this.axiosResultKey]);
|
||||
}
|
||||
var status = await this.correlationShop(
|
||||
data[this.axiosResultKey ? this.axiosResultKey : "result"].id
|
||||
);
|
||||
if (status) {
|
||||
await this.getDataList();
|
||||
var newNodeData = await this.$refs.tree.getNode(data.result.id);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.setCurrentKey(data.result.id);
|
||||
});
|
||||
|
||||
await this.handleClickNodes(
|
||||
newNodeData,
|
||||
newNodeData.data,
|
||||
"edit"
|
||||
);
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false;
|
||||
|
||||
this.$refs.tree.setCheckedKeys([data.result.id]);
|
||||
// console.log(this.$refs.tree.getCheckedKeys([this.addForm.id]),'88888');
|
||||
// this.$refs["addForm"].resetFields();
|
||||
// this.addForm={}
|
||||
|
||||
// this.$emit("refreshDataList");
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}, 200),
|
||||
setCheckedKeys() {
|
||||
this.$refs.tree.setCheckedKeys([0]);
|
||||
},
|
||||
handlereset() {
|
||||
this.currentNode = null;
|
||||
this.isFresh = false;
|
||||
this.isFresh = true;
|
||||
},
|
||||
async handleClickNodes(node, data, type) {
|
||||
console.log(
|
||||
"🚀 ~ handleClickNodes11111 ~ node, data, type:",
|
||||
node,
|
||||
data,
|
||||
type
|
||||
);
|
||||
this.addForm = {};
|
||||
// console.log(this.$refs.tree.handleClickNodes(), "当前选中节点");
|
||||
console.log(node, data, "当前选中节点-----------");
|
||||
this.currentNode = node;
|
||||
this.isFresh = false;
|
||||
this.isFresh = true;
|
||||
this.$forceUpdate();
|
||||
var form = {};
|
||||
|
||||
if (this.source == "shop") {
|
||||
await this.selectShop(data);
|
||||
} else if (this.source == "tags") {
|
||||
switch (type) {
|
||||
case "add":
|
||||
form = { ...data };
|
||||
break;
|
||||
case "edit":
|
||||
form = { ...node.data };
|
||||
break;
|
||||
case "addChildren":
|
||||
form = {
|
||||
children: [],
|
||||
delFlag: 0,
|
||||
isLast: 0,
|
||||
icon:'',
|
||||
pid: data.id,
|
||||
sort: 0,
|
||||
title: ""
|
||||
};
|
||||
break;
|
||||
}
|
||||
this.addForm = { ...form };
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$emit(
|
||||
"getCommonShopDataList",
|
||||
type,
|
||||
type == "edit" ? form.id : null,
|
||||
this.addForm
|
||||
);
|
||||
// this.$refs.commonShop.clear();
|
||||
// this.$refs.commonShop.bookMarketId = null;
|
||||
// this.$refs.commonShop.getDataList();
|
||||
});
|
||||
}
|
||||
},
|
||||
addOrUpdateHandle() {
|
||||
var addform = {
|
||||
children: [],
|
||||
delFlag: 0,
|
||||
isLast: 0,
|
||||
content:'',
|
||||
pid: 0,
|
||||
sort: 0,
|
||||
title: ""
|
||||
};
|
||||
this.handleClickNodes({ data: addform }, addform, "add");
|
||||
// if (!this.currentNode) {
|
||||
// this.$message.error("请先选择分类");
|
||||
// return;
|
||||
// }
|
||||
},
|
||||
async remove(data) {
|
||||
var that = this;
|
||||
var ids = { productId: data.productId };
|
||||
this.$confirm(`是否删除标签【${data.title}】？`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(async () => {
|
||||
if (this.axiosType == "raw") {
|
||||
this.$http
|
||||
.request({
|
||||
url: this.$http.adornUrl(this.urlList.delete),
|
||||
method: "POST",
|
||||
data: {
|
||||
id: data.id
|
||||
},
|
||||
header: {
|
||||
//默认 无 说明：请求头
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
})
|
||||
.then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
that.$message({
|
||||
type: "success",
|
||||
message: "删除成功!"
|
||||
});
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
return false;
|
||||
}
|
||||
|
||||
that.currentNode = null;
|
||||
that.isFresh = false;
|
||||
that.addForm = {};
|
||||
that.$nextTick(() => {
|
||||
that.isFresh = true;
|
||||
});
|
||||
await that.addOrUpdateHandle();
|
||||
// this.expandedkey = [node.parent.data.catId]
|
||||
});
|
||||
} else {
|
||||
that
|
||||
.$http({
|
||||
url: that.$http.adornUrl(
|
||||
`${that.urlList.delete}?id=` + data.id
|
||||
),
|
||||
method: "post",
|
||||
data: {}
|
||||
})
|
||||
.then(async ({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
that.$message({
|
||||
type: "success",
|
||||
message: "删除成功!"
|
||||
});
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
return false;
|
||||
}
|
||||
|
||||
that.currentNode = null;
|
||||
that.isFresh = false;
|
||||
that.addForm = {};
|
||||
that.$nextTick(() => {
|
||||
that.isFresh = true;
|
||||
});
|
||||
await that.addOrUpdateHandle();
|
||||
// this.expandedkey = [node.parent.data.catId]
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.title.indexOf(value) !== -1;
|
||||
},
|
||||
|
||||
// renderContent(h, { node, data, store }) {
|
||||
// return;
|
||||
// `<span
|
||||
// style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;"
|
||||
// on-mouseenter={() => this.mouseenteract(data)}
|
||||
// on-mouseleave={() => this.mouseleaveact(data)}
|
||||
// >
|
||||
// <span>
|
||||
// <span>{node.label}</span>
|
||||
// </span>
|
||||
// {this.isact == data ? (
|
||||
// <span>
|
||||
// {this.isact.typeName == "模板组" ? (
|
||||
// <el-button
|
||||
// class="m-r-10"
|
||||
// type="text"
|
||||
// icon="el-icon-edit"
|
||||
// on-click={() => this.handleUpdateGroup(node, data)}
|
||||
// ></el-button>
|
||||
// ) : (
|
||||
// <span></span>
|
||||
// )}
|
||||
// <el-button
|
||||
// type="text"
|
||||
// icon="el-icon-delete"
|
||||
// on-click={(e) => this.handleDelete(node, data, e)}
|
||||
// ></el-button>
|
||||
// </span>
|
||||
// ) : (
|
||||
// <span></span>
|
||||
// )}
|
||||
// </span>`;
|
||||
// },
|
||||
updateRenderContent(h, { node, data, store }) {
|
||||
return `
|
||||
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;">
|
||||
<span>
|
||||
{this.isact == data ? (
|
||||
<input
|
||||
type="text"
|
||||
onChange={this.handleChangeTitle.bind(this)}
|
||||
value={node.label}
|
||||
/>
|
||||
) : (
|
||||
<span>{node.label}</span>
|
||||
)}
|
||||
</span>
|
||||
{this.isact == data ? (
|
||||
<span>
|
||||
{this.isact.typeName == "模板组" ? (
|
||||
<span>
|
||||
<el-button
|
||||
class="m-r-10"
|
||||
type="text"
|
||||
icon="el-icon-check"
|
||||
on-click={() => this.updateGroup(node, data)}
|
||||
></el-button>
|
||||
<el-button
|
||||
class="m-r-10"
|
||||
type="text"
|
||||
icon="el-icon-close"
|
||||
on-click={(e) => this.cancelUpdate(node, data, e)}
|
||||
></el-button>
|
||||
</span>
|
||||
) : (
|
||||
<span></span>
|
||||
)}
|
||||
</span>
|
||||
) : (
|
||||
<span></span>
|
||||
)}
|
||||
</span>`;
|
||||
},
|
||||
//获取鼠标进入节点的数据
|
||||
mouseenteract(da) {
|
||||
this.isact = da;
|
||||
},
|
||||
mouseleaveact(da) {
|
||||
this.isact = "";
|
||||
},
|
||||
handleNodeClick(pdata) {
|
||||
this.curNode = pdata;
|
||||
document
|
||||
.getElementsByClassName("el-tree-node__content")[0]
|
||||
.setAttribute("class", "el-tree-node__content");
|
||||
},
|
||||
handleDelete(node, data, e) {
|
||||
e.stopPropagation();
|
||||
//存在则添加到子级
|
||||
const parent = node.parent;
|
||||
const children = parent.data.nodes || parent.data;
|
||||
//若parent.data是对象，操作的是子级；如果是数组，操作的是最外层
|
||||
if (Array.isArray(parent.data)) {
|
||||
const parentIndex = parent.data.findIndex(d => d.id === data.id);
|
||||
parent.data.splice(parentIndex, 1);
|
||||
} else {
|
||||
const childIndex = children.findIndex(d => d.id === data.id);
|
||||
children.splice(childIndex, 1);
|
||||
}
|
||||
this.curNode = undefined;
|
||||
},
|
||||
//新增组
|
||||
handleAddGroup() {
|
||||
/**
|
||||
* 如果模版深度最多两层，取消该部分注释
|
||||
* //最多只有两层组 不可能添加在dept2的组上 curNode存在 并且 深度超过1
|
||||
if (this.curNode != undefined && this.curNode.depth != 1) {
|
||||
this.$message.warning("不能添加超过两层");
|
||||
return;
|
||||
}
|
||||
*/
|
||||
|
||||
//如果isUpdateGroup 已经是true了 说明重复点击了
|
||||
if (this.isUpdateGroup) {
|
||||
return;
|
||||
}
|
||||
|
||||
let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
|
||||
(
|
||||
c ^
|
||||
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
|
||||
).toString(16)
|
||||
);
|
||||
let newChild = {
|
||||
parentId: "", //如果有这个id 是插入第二层 否则是第一层 可有可无
|
||||
text: "", //必须有 this.templateContent.tempName
|
||||
nodes: [],
|
||||
id: id,
|
||||
typeName: "模板组",
|
||||
temporaryData: "1" //用来区分临时数据
|
||||
};
|
||||
/* 如果模版深度最多两层，以下条件改成该部分注释
|
||||
this.curNode && this.curNode.depth == 1
|
||||
*/
|
||||
this.indexRecord = [];
|
||||
if (this.curNode) {
|
||||
if (!this.curNode.nodes) {
|
||||
this.$message.warning("模板不可添加");
|
||||
return;
|
||||
}
|
||||
newChild.parentId = this.curNode.id;
|
||||
/* 如果模版深度最多两层，以下条件改成该部分注释
|
||||
const index = this.treeDataList.findIndex(
|
||||
item => item.id == this.curNode.id
|
||||
);
|
||||
this.treeDataList[index].nodes.push(newChild);
|
||||
*/
|
||||
//找到tree中的index轨迹
|
||||
this.getTemplateTreeNode(this.curNode.id, this.treeDataList, 0);
|
||||
//按照index轨迹插入节点
|
||||
this.insertNode(
|
||||
newChild,
|
||||
this.treeDataList,
|
||||
this.indexRecord,
|
||||
this.indexRecord.length
|
||||
);
|
||||
this.isBreak = false;
|
||||
} else if (this.curNode == undefined) {
|
||||
//没有选中的时候 添加到最外层
|
||||
newChild.depth = 1;
|
||||
this.treeDataList.push(newChild);
|
||||
}
|
||||
//调用出updateRender的input
|
||||
this.isact = newChild;
|
||||
this.isUpdateGroup = true;
|
||||
},
|
||||
//递归遍历获得选中node
|
||||
getTemplateTreeNode(target, list, dept) {
|
||||
//空数组直接返回
|
||||
if (list.length == 0) return;
|
||||
let dataLen = list.length;
|
||||
for (let i = 0; i < dataLen; i++) {
|
||||
//如果不匹配
|
||||
if (target != list[i].id) {
|
||||
//存在nodes 遍历nodes里的节点
|
||||
if (list[i].nodes) {
|
||||
this.indexRecord[dept] = i;
|
||||
let recordDept = dept + 1;
|
||||
this.getTemplateTreeNode(target, list[i].nodes, recordDept);
|
||||
} else {
|
||||
//不存在nodes 继续遍历
|
||||
continue;
|
||||
}
|
||||
} else {
|
||||
//匹配，则修改下标数组
|
||||
this.indexRecord[dept] = i;
|
||||
this.isBreak = true;
|
||||
break;
|
||||
}
|
||||
//删除不匹配的轨迹 如果已经break了说明已经找到正确的节点，就不用再删了
|
||||
if (!this.isBreak) {
|
||||
this.indexRecord.pop();
|
||||
}
|
||||
}
|
||||
},
|
||||
//插入节点
|
||||
insertNode(insertChild, tree, indexArr, len) {
|
||||
let index = indexArr.length - len;
|
||||
if (len == 0) {
|
||||
tree.push(insertChild);
|
||||
} else {
|
||||
this.insertNode(
|
||||
insertChild,
|
||||
tree[indexArr[index]].nodes,
|
||||
indexArr,
|
||||
len - 1
|
||||
);
|
||||
}
|
||||
},
|
||||
//修改组
|
||||
handleUpdateGroup() {
|
||||
this.isUpdateGroup = true;
|
||||
},
|
||||
//修改组名时获取title
|
||||
handleChangeTitle(e) {
|
||||
let value = e.target.value;
|
||||
this.isactTitle = value;
|
||||
},
|
||||
updateGroup(node, data) {
|
||||
//先handleChangeTitle获取title 再调用
|
||||
setTimeout(() => {
|
||||
if (this.isactTitle.trim() == "") {
|
||||
this.$message.warning("名称不能为空");
|
||||
return;
|
||||
}
|
||||
//修改数据组
|
||||
this.isUpdateGroup = false;
|
||||
const parent = node.parent;
|
||||
const children = parent.data.nodes || parent.data;
|
||||
const index = children.findIndex(d => d.id === data.id);
|
||||
let temp = data;
|
||||
temp.text = this.isactTitle;
|
||||
children.splice(index, 1, temp);
|
||||
}, 500);
|
||||
},
|
||||
cancelUpdate(node, data, e) {
|
||||
this.$message.info("已取消");
|
||||
this.isUpdateGroup = false;
|
||||
//如果是插入操作 需要移除数据
|
||||
if (this.isact.temporaryData) {
|
||||
this.handleDelete(node, data, e);
|
||||
}
|
||||
},
|
||||
// 获取数据列表
|
||||
|
||||
async getDataList() {
|
||||
this.dataListLoading = true;
|
||||
await this.$http({
|
||||
url: this.$http.adornUrl("/book/labelAndMarket/labelTree"),
|
||||
method: "get"
|
||||
// params: this.$http.adornParams({
|
||||
// 'page': this.pageIndex,
|
||||
// 'limit': this.pageSize,
|
||||
// 'key': this.dataForm.key
|
||||
// })
|
||||
}).then(({ data }) => {
|
||||
console.log("🚀 ~ getDataList ~ data:", data);
|
||||
if (data && data.code === 0) {
|
||||
this.treeDataList = data.result;
|
||||
// this.totalPage = data.page.totalCount
|
||||
} else {
|
||||
this.treeDataList = [];
|
||||
// this.totalPage = 0
|
||||
}
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
this.pageSize = val;
|
||||
this.pageIndex = 1;
|
||||
this.getDataList();
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.pageIndex = val;
|
||||
this.getDataList();
|
||||
},
|
||||
// 多选
|
||||
selectionChangeHandle(val) {
|
||||
this.dataListSelections = val;
|
||||
}
|
||||
// // 新增 / 修改
|
||||
// addOrUpdateHandle(row) {
|
||||
// this.addOrUpdateVisible = true;
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.addOrUpdate.init(row);
|
||||
// });
|
||||
// },
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/deep/
|
||||
.filter-tree
|
||||
.el-tree--highlight-current
|
||||
.el-tree-node.is-current
|
||||
> .el-tree-node__content {
|
||||
// 设置颜色
|
||||
// background-color: #baf !important;
|
||||
}
|
||||
|
||||
/deep/ .filter-tree .el-tree-node:focus > .el-tree-node__content {
|
||||
background-color: transparent !important;
|
||||
// color: #17b3a3 !important;
|
||||
}
|
||||
|
||||
/deep/.el-tree--highlight-current
|
||||
.el-tree-node.is-current
|
||||
> .el-tree-node__content {
|
||||
background-color: transparent !important;
|
||||
// color: #17b3a3 !important;
|
||||
}
|
||||
|
||||
/deep/.filter-tree .el-tree-node__content .el-button {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
// /deep/.filter-tree .is-focusable {
|
||||
|
||||
// background-color: #17b3a3 !important;
|
||||
// }
|
||||
|
||||
.tree_box {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
border: 1px solid #bababa;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
// background: #fafafa;
|
||||
}
|
||||
|
||||
.border_box {
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
// color: #17b3a3;
|
||||
.line {
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
background: #17b3a3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border_box {
|
||||
width: 100%;
|
||||
float: right;
|
||||
background: #fffefe;
|
||||
border: 1px solid #bababa;
|
||||
border-radius: 10px;
|
||||
padding: 15px 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tree_content_box {
|
||||
height: calc(100% - 110px) !important;
|
||||
}
|
||||
|
||||
.mod-config {
|
||||
width: 100%;
|
||||
height: 82vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
.el-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover {
|
||||
.el-button {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
||||
background-color: #eaebed;
|
||||
color: #4796ec;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
height: 350px;
|
||||
overflow-y: auto !important;
|
||||
|
||||
.el-tree-node__content span {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.select_box {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
// .el-card {
|
||||
// background: none !important;
|
||||
// }
|
||||
p {
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
// .el-tree-node__content .el-button {
|
||||
// // width: 120px !important;
|
||||
|
||||
// display: block !important;
|
||||
// }
|
||||
// ::v-deep .el-tree .el-tree-node__content span:nth-child(2) {
|
||||
// width: 120px;
|
||||
// display: flex !important;
|
||||
// align-items: center !important;
|
||||
// justify-content: space-between !important;
|
||||
// }
|
||||
// /deep/.el-table__row--level-1 {
|
||||
// display: block !important;
|
||||
// }
|
||||
.addFormBox {
|
||||
.form_item {
|
||||
width: 49%;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-container {
|
||||
height: calc(100% - 60px);
|
||||
|
||||
.filter-tree {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info_bg {
|
||||
background: #e0dede;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding-left: 10px;
|
||||
// padding: 8px 5px;
|
||||
box-sizing: border-box;
|
||||
// margin-top: -10px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
width: calc(100% - 120px);
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* 去掉点击时的蓝色背景 */
|
||||
.el-tree .el-tree-node__content:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* 如果需要去掉所有hover效果 */
|
||||
.el-tree .el-tree-node__content:hover {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
/* 针对被选中节点去掉背景色 */
|
||||
.el-tree .el-tree-node__content.is-checked {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* 如果需要去掉所有hover和active效果 */
|
||||
.el-tree-node__content:hover,
|
||||
.el-tree-node__content:active {
|
||||
background-color: unset;
|
||||
}
|
||||
.isSelect {
|
||||
/* 自定义角度渐变 */
|
||||
background-image: linear-gradient(-45deg, #fff, #b0f3ec);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user