This commit is contained in:
2024-05-14 16:20:36 +08:00
parent 6638f02de6
commit f36f396813
3 changed files with 267 additions and 108 deletions

View File

@@ -106,24 +106,13 @@
>
</el-table-column>
<el-table-column
prop="sort"
prop="toSociologySort"
header-align="center"
align="center"
label="排序"
width="180"
>
<template slot-scope="scope">
<el-input
v-focus
v-if="scope.row[scope.column.property + 'Show']"
clearable
v-model="scope.row.sort"
@keyup.enter.native="onBlurFirst(scope.row, scope.column)"
@blur="onBlurFirst(scope.row, scope.column)"
>
</el-input>
<span v-else>{{ scope.row.sort }}</span>
</template>
</el-table-column>
<!-- <el-table-column
prop="product.price"
@@ -172,9 +161,16 @@
header-align="center"
align="center"
label="操作"
width="80"
width="140"
>
<template slot-scope="scope">
<el-button
type="text"
@click="shopEdit(scope.row)"
size="mini"
>修改排序</el-button
>
<el-button
type="text"
style="color: red;"
@@ -312,6 +308,9 @@ export default {
shopDelete(row) {
this.$emit("delete", row);
},
shopEdit(row) {
this.$emit("edit", row);
},
// 获取商品类型
getGoodsTypeList() {
this.$http({

View File

@@ -1,72 +1,141 @@
<template>
<div class="mod-config">
<commonTree source="tags" ref="commonTree" :dataList="treeDataList" @getCommonShopDataList="getCommonShopDataList"
@changeCurrentNode="changeCurrentNode" :urlList="urlList"></commonTree>
<div v-if="isFresh" v-loading="!isFresh"
style="width: calc(100% - 360px); height: 100%; float: right; border: 1px solid #bababa; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 10px;position: relative;">
<commonTree
source="tags"
ref="commonTree"
:dataList="treeDataList"
@getCommonShopDataList="getCommonShopDataList"
@changeCurrentNode="changeCurrentNode"
:urlList="urlList"
></commonTree>
<div
v-if="isFresh"
v-loading="!isFresh"
style="width: calc(100% - 360px); height: 100%; float: right; border: 1px solid #bababa; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 10px;position: relative;"
>
<div class="border_box info_box">
<div class="title_box">
<div class="title"><span class="line"></span>基本标签信息</div>
</div>
<div class="addFormBox">
<el-form :model="addForm" ref="addForm" label-width="80px">
<el-form-item label="标签名称" prop="title" class="form_item">
<el-input placeholder="请输入标签名称" style="width: 100%" v-model="addForm.title" clearable>
<el-input
placeholder="请输入标签名称"
style="width: 100%"
v-model="addForm.title"
clearable
>
</el-input>
</el-form-item>
<el-form-item label="排序" prop="sort" class="form_item">
<el-input-number placeholder="请输入标签排序" style="width: 100%" v-model="addForm.sort" clearable :min="0"
@keyup.native="UpNumber" @keydown.native="UpNumber">
<el-input-number
placeholder="请输入标签排序"
style="width: 100%"
v-model="addForm.sort"
clearable
:min="0"
@keyup.native="UpNumber"
@keydown.native="UpNumber"
>
</el-input-number>
</el-form-item>
<el-form-item label="是否为最终级" prop="isLast" label-width="120px" class="form_item">
<el-switch v-model="addForm.isLast" active-color="#13ce66" :active-value="1" :inactive-value="0"
active-text="" inactive-text="" @change="handleChangeIsLast">
<el-form-item
label="是否为最终级"
prop="isLast"
label-width="120px"
class="form_item"
>
<el-switch
v-model="addForm.isLast"
active-color="#13ce66"
:active-value="1"
:inactive-value="0"
active-text=""
inactive-text=""
@change="handleChangeIsLast"
>
</el-switch>
</el-form-item>
</el-form>
</div>
<div style=" border: 1px dashed #bababa;" v-if="currentNode && currentNode.data.isLast == 1"></div>
<div
style=" border: 1px dashed #bababa;"
v-if="currentNode && currentNode.data.isLast == 1"
></div>
</div>
<div class="border_box tree_content_box" v-if="currentNode && currentNode.data.isLast == 1">
<div
class="border_box tree_content_box"
v-if="currentNode && currentNode.data.isLast == 1"
>
<div class="title_box" style="margin-bottom: 10px; height: 40px">
<div class="title">
<span class="line"></span>已绑定课程列表
<el-button plain type="primary" style="margin-left: 20px" @click="openTable('addForm')"
size="mini">新增</el-button>
<el-button
plain
type="primary"
style="margin-left: 20px"
@click="openTable('addForm')"
size="mini"
>新增</el-button
>
<!-- <div style="" class="button_box"> -->
<!-- <el-button plain type="danger" @click="handleCheckAllChange(true)" size="mini">清空</el-button> -->
<!-- </div> -->
</div>
</div>
<commonShop :currentId="addForm.id ? addForm.id : ''" currentType="bookLabelId" :dataList="associatedGoodsList"
:urlList="urlList" :isEdit="isEdit" ref="commonShop" :style="`height: calc(100% - 50px); `"
@delete="dataFormDelete"></commonShop>
<commonShop
:currentId="addForm.id ? addForm.id : ''"
currentType="bookLabelId"
:dataList="associatedGoodsList"
:urlList="urlList"
:isEdit="isEdit"
ref="commonShop"
:style="`height: calc(100% - 50px); `"
@delete="dataFormDelete"
@edit="dataFormEdit"
></commonShop>
<div class="submitButtonBox" v-if="isEdit">
<el-checkbox v-model="checkAll" @change="handleCheckAllChange" style="float: left">全选</el-checkbox>
<el-checkbox
v-model="checkAll"
@change="handleCheckAllChange"
style="float: left"
>全选</el-checkbox
>
<!-- <el-button @click="handlereset" size="small">取消</el-button> -->
<div class="submitButton">
<!-- <el-button size="small" @click.stop="dataFormEdit()">
取消
</el-button> -->
<el-button type="danger" @click="dataFormDelete('addForm')" size="small">删除</el-button>
<el-button
type="danger"
@click="dataFormDelete('addForm')"
size="small"
>删除</el-button
>
</div>
</div>
<!-- <div class="submitButtonBox" v-else> -->
<!-- <el-button @click="handlereset" size="small">取消</el-button> -->
</div>
<div class="submitButton submitButtonBox" style="position: absolute;bottom: 13px;right: 15px;" v-if="!isEdit">
<div
class="submitButton submitButtonBox"
style="position: absolute;bottom: 13px;right: 15px;"
v-if="!isEdit"
>
<!-- <el-button size="small" @click.stop="dataFormEdit()">
取消
</el-button> -->
<el-button type="primary" @click="dataFormSubmit('addForm')" size="small">确定</el-button>
<el-button
type="primary"
@click="dataFormSubmit('addForm')"
size="small"
>确定</el-button
>
<!-- </div> -->
</div>
</div>
@@ -79,15 +148,68 @@
</el-form> -->
<commonShopTable ref="commonShopTable" :currentId="addForm.id" currentType="bookLabelId"
@submit="handleSubmitShopTable"></commonShopTable>
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<commonShopTable
ref="commonShopTable"
:currentId="addForm.id"
currentType="bookLabelId"
@submit="handleSubmitShopTable"
></commonShopTable>
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
<el-dialog
:append-to-body="true"
:modal-append-to-body="false"
title="修改排序"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<div class="addFormBox selectTimeBox">
<el-form ref="addForm" :model="dataForm" label-width="80px">
<slot name="searchFormItem" :dataForm="dataForm"></slot>
<el-form-item
label="课程名称:"
class="form_item"
style="width: 100% !important"
>
<p class="input_item">
{{ dataForm.title }}
</p>
<!-- selectCourse -->
<!-- <el-input
v-model="selectCourse.courseCatalogueTitle"
readonly
></el-input> -->
</el-form-item>
<el-form-item
label="排序:"
class="form_item"
style="width: 100% !important"
>
<el-input
v-model="dataForm.toSociologySort"
type="number"
></el-input>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose"> </el-button>
<el-button type="primary" @click="handleSubmitDataForm"
> </el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
// import AddOrUpdate from "./sociologyComponents/bookTagsForm.vue";
import AddOrUpdate from './sociologyComponents/sociology-add-or-update'
import AddOrUpdate from "./sociologyComponents/sociology-add-or-update";
import commonShop from "./sociologyComponents/shopproduct.vue";
import commonShopTable from "./sociologyComponents/shopproductTable.vue";
import commonTree from "./sociologyComponents/tags.vue";
@@ -98,15 +220,18 @@ export default {
return {
isEdit: false,
checkAll: false,
dialogVisible: false,
isIndeterminate: true,
urlList: {
treeList: "/master/courseSociology/getCourseSociologyList",
editSort: "/master/courseSociology/updateCourseToSociologySort",
delete: "/master/courseSociology/delCourseSociology",
add: "/master/courseSociology/addCourseSociology",
edit: "/master/courseSociology/editCourseSociology",
getAssociatedGoodsList: "/master/courseSociology/getCourseListForSociology",
getAssociatedGoodsList:
"/master/courseSociology/getCourseListForSociology",
deleteShop: "/master/courseSociology/unbindCourseAndSociology",
saveShop: "/master/courseSociology/bindCourseAndSociology",
saveShop: "/master/courseSociology/bindCourseAndSociology"
},
addForm: {},
isFresh: false,
@@ -114,10 +239,10 @@ export default {
name: [
{
required: true,
message: "标签名称不能为空",
message: "标签名称不能为空"
// trigger: "change",
},
],
}
]
},
currentNode: {},
treeDataList: [],
@@ -132,30 +257,28 @@ export default {
isBreak: false, //是否结束循环
defaultProps: {
children: "children",
label: "title",
},
dataForm: {
key: "",
label: "title"
},
dataForm: {},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
addOrUpdateVisible: false
};
},
components: {
AddOrUpdate,
commonShop,
commonTree,
commonShopTable,
commonShopTable
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
}
},
activated() {
this.isEdit = false;
@@ -175,52 +298,78 @@ export default {
this.$refs.commonShop.handleCheckAllChange(val);
});
},
handleSubmitShopTable: debounce(async function (ids) {
handleSubmitShopTable: debounce(async function(ids) {
await this.$http({
url: this.$http.adornUrl(`${this.urlList.saveShop}`),
method: "post",
data: this.$http.adornData({
courseId: ids,
sociologyId: this.addForm.id,
}),
sociologyId: this.addForm.id
})
}).then(async ({ data }) => {
if (data && data.code === 0) {
this.$message.success(data.msg);
if (this.$refs.commonShop) {
this.$refs.commonShop.getAssociatedGoodsList({
courseId: this.addForm.id,
courseId: this.addForm.id
});
}
if (this.$refs.commonShopTable) {
this.$refs.commonShopTable.close();
}
} else {
this.$message.error(data.msg);
}
});
}, 200),
handleSubmitDataForm: debounce(async function() {
var that = this;
this.$http
.request({
url: this.$http.adornUrl(`${this.urlList.editSort}`),
method: "POST",
data: {
id: this.dataForm.bindId,
sort: Number(this.dataForm.toSociologySort)
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json"
}
})
.then(async ({ data }) => {
if (data && data.code === 0) {
this.$message.success(data.msg);
if (this.$refs.commonShop) {
this.$refs.commonShop.getAssociatedGoodsList({
courseId: this.addForm.id
});
}
} else {
this.$message.error(data.msg);
}that.dialogVisible = false;
});
that.$forceUpdate()
}, 200),
openTable() {
this.isEdit = false;
this.$nextTick(() => {
this.$refs.commonShopTable.open(this.addForm.id);
});
},
handleChangeIsLast(e) {
console.log("🚀 ~ handleChangeIsLast ~ e:", e);
this.$nextTick(() => {
if (e == 1) {
if (this.$refs.commonShop) {
this.$refs.commonShop.getAssociatedGoodsList({
bookLabelId: this.addForm.id ? this.addForm.id : null,
bookLabelId: this.addForm.id ? this.addForm.id : null
});
}
}
});
},
@@ -228,12 +377,12 @@ export default {
async getCommonShopDataList(type, id, form) {
this.isFresh = false;
this.isEdit = false; this.isFresh = true;
this.isEdit = false;
this.isFresh = true;
console.log("🚀 ~ getCommonShopDataList ~ type, id:", type, id);
this.currentNode = { data: { ...form } }
this.currentNode = { data: { ...form } };
this.addForm = form;
await this.getDataList();
// this.$refs.commonTree.setCurrentNodeShow();
@@ -244,41 +393,41 @@ export default {
if (this.$refs.commonShop) {
this.$refs.commonShop.getAssociatedGoodsList();
}
}
});
},
//新增修改
dataFormSubmit: debounce(async function (formName) {
dataFormSubmit: debounce(async function(formName) {
// return false
if (this.addForm.title == "" || !this.addForm.title) {
this.$message.error("请输入标签名称");
return false;
}
await this.$refs[formName].validate(async (valid) => {
await this.$refs[formName].validate(async valid => {
if (valid) {
await this.$http({
url: this.$http.adornUrl(`${this.addForm.id ? this.urlList.edit : this.urlList.add}`),
url: this.$http.adornUrl(
`${this.addForm.id ? this.urlList.edit : this.urlList.add}`
),
method: "post",
data: this.$http.adornData({
...this.addForm,
}),
...this.addForm
})
}).then(async ({ data }) => {
if (data && data.code === 0) {
await this.getDataList();
this.$nextTick(async () => {
this.$refs.commonTree.setCurrentNodeShow(data.sociology.id);
this.addForm = data.sociology;
this.currentNode = { data: { ...data.sociology } }
this.currentNode = { data: { ...data.sociology } };
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.visible = false;
},
}
});
});
} else {
@@ -288,17 +437,25 @@ export default {
}
});
}, 200),
dataFormEdit(row) {
this.dataForm = { ...row };
this.dialogVisible = true;
},
//删除关联图书
dataFormDelete: debounce(async function (row, deleteType) {
console.log('row at line 292:', row)
this.$confirm(`确定要删除${deleteType != 'all' ? '该' : '所有'}关联课程吗?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
dataFormDelete: debounce(async function(row, deleteType) {
console.log("row at line 292:", row);
this.$confirm(
`确定要删除${deleteType != "all" ? "该" : "所有"}关联课程吗?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}
)
.then(async () => {
// var lableIds = row[0].bookLabelId
var bindId = row.bindId
var bindId = row.bindId;
// // return false
// var selectShopArr = this.$refs.commonShop.selectShopArr;
@@ -313,38 +470,35 @@ export default {
url: this.$http.adornUrl(
// `${this.urlList.deleteShop}?id=${this.addForm.id}&sociologyId=${sociologyId.toString(",")}`
`${this.urlList.deleteShop}`
),
method: "post",
data: this.$http.adornData({
id: bindId
}),
})
}).then(async ({ data }) => {
if (data && data.code === 0) {
this.$message.success("删除成功");
} else {
this.$message.error(data.msg);
} this.$nextTick(() => {
}
this.$nextTick(() => {
// this.$refs.commonShop.selectShopArr = [];
if (this.$refs.commonShop) {
this.$refs.commonShop.getAssociatedGoodsList({
bookLabelId: this.addForm.id,
bookLabelId: this.addForm.id
});
}
});
});
})
.catch(() => { });
.catch(() => {});
}, 200),
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([0]);
},
changeCurrentNode(val) {
this.changeCurrentNode = val;
this.$forceUpdate()
this.$forceUpdate();
},
handlereset() {
this.currentNode = null;
@@ -375,7 +529,7 @@ export default {
isLast: 0,
pid: data.id,
sort: 0,
title: "",
title: ""
};
break;
}
@@ -394,7 +548,7 @@ export default {
isLast: 0,
pid: 0,
sort: 0,
title: "",
title: ""
};
this.handleClickNodes({ data: addform }, addform, "add");
// if (!this.currentNode) {
@@ -481,6 +635,10 @@ export default {
)}
</span>`;
},
handleClose() {
this.dataForm = {};
this.dialogVisible = false;
},
//获取鼠标进入节点的数据
mouseenteract(da) {
this.isact = da;
@@ -501,10 +659,10 @@ export default {
const children = parent.data.nodes || parent.data;
//若parent.data是对象操作的是子级如果是数组操作的是最外层
if (Array.isArray(parent.data)) {
const parentIndex = parent.data.findIndex((d) => d.id === data.id);
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);
const childIndex = children.findIndex(d => d.id === data.id);
children.splice(childIndex, 1);
}
this.curNode = undefined;
@@ -525,7 +683,7 @@ export default {
return;
}
let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
let id = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
(
c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
@@ -537,7 +695,7 @@ export default {
nodes: [],
id: id,
typeName: "模板组",
temporaryData: "1", //用来区分临时数据
temporaryData: "1" //用来区分临时数据
};
/* 如果模版深度最多两层,以下条件改成该部分注释
this.curNode && this.curNode.depth == 1
@@ -637,7 +795,7 @@ export default {
this.isUpdateGroup = false;
const parent = node.parent;
const children = parent.data.nodes || parent.data;
const index = children.findIndex((d) => d.id === data.id);
const index = children.findIndex(d => d.id === data.id);
let temp = data;
temp.text = this.isactTitle;
children.splice(index, 1, temp);
@@ -657,7 +815,7 @@ export default {
this.dataListLoading = true;
await this.$http({
url: this.$http.adornUrl(this.urlList.treeList),
method: "get",
method: "get"
}).then(({ data }) => {
console.log("🚀 ~ getDataList ~ data:", data);
if (data && data.code === 0) {
@@ -684,7 +842,7 @@ export default {
// 多选
selectionChangeHandle(val) {
this.dataListSelections = val;
},
}
// // 新增 / 修改
// addOrUpdateHandle(row) {
// this.addOrUpdateVisible = true;
@@ -692,7 +850,7 @@ export default {
// this.$refs.addOrUpdate.init(row);
// });
// },
},
}
};
</script>
<style lang="less" scoped>
@@ -751,7 +909,6 @@ export default {
border-radius: 10px;
padding: 15px 15px;
box-sizing: border-box;
}
.tree_content_box {
@@ -776,7 +933,7 @@ export default {
}
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: #eaebed;
color: #4796ec;
font-weight: bold;

View File

@@ -461,7 +461,10 @@
</el-table-column> -->
</template>
</template> </commonShopTable
><el-dialog
>
<el-dialog
:append-to-body="true"
:modal-append-to-body="false"
title="课程目录绑定"