mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-14 21:36:44 +08:00
接口联调802
This commit is contained in:
254
src/components/project/AddContent.vue
Normal file
254
src/components/project/AddContent.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="twoDimensionalCode">
|
||||
<!--选择教师专长页面 -->
|
||||
<a-modal
|
||||
:visible="showContent"
|
||||
:footer="null"
|
||||
:closable="closableQR"
|
||||
wrapClassName="codeModal"
|
||||
style="margin-top: 400px"
|
||||
:zIndex="9999"
|
||||
@cancel="qr_exit"
|
||||
>
|
||||
<div class="QR">
|
||||
<div class="qr_header"></div>
|
||||
<div class="qr_main">
|
||||
<div class="qrm_header">
|
||||
<span style="title">选择教师专长</span>
|
||||
<div class="close_exit" @click="closeCodeModal"></div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<a-tree
|
||||
checkable
|
||||
:tree-data="treeData"
|
||||
v-model:expandedKeys="expandedKeys"
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
v-model:checkedKeys="checkedKeys"
|
||||
@check="onCheck"
|
||||
:fieldNames="{
|
||||
key: 'id',
|
||||
title: 'name',
|
||||
value: 'name',
|
||||
}"
|
||||
>
|
||||
<!-- <template #title0010><span style="color: #1890ff">sss</span></template> -->
|
||||
</a-tree>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="headers">
|
||||
<div>已选择标签<span style="color: #4ea6ff;margin-left:5px;">{{treeAddData?.length}}</span>个</div>
|
||||
<div class="header_right" @click="clearTree">清空</div>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<div
|
||||
class="tag"
|
||||
v-for="(item, index) in treeAddData"
|
||||
:key="index"
|
||||
>
|
||||
<div>{{ item?.name }}</div>
|
||||
<div @click="deleteTree(item)" class="tag_delete">+</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a-button style="margin-right: 20px;" @click="closeCodeModal">取消</a-button>
|
||||
<a-button type="primary" @click="queryCreate">确定</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<!--二维码页面 -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs, watch,ref,computed } from "vue";
|
||||
import { message } from "ant-design-vue";
|
||||
import { useStore } from "vuex";
|
||||
export default {
|
||||
name: "AddContent",
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
showContent: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props, ctx) {
|
||||
const state = reactive({
|
||||
qrcodeSize: 800,
|
||||
codeInfo: {},
|
||||
courseUrl: "https://www.baidu.com/",
|
||||
showUrl: false,
|
||||
domain: location.protocol+'//'+location.host,
|
||||
treeAddData:[],
|
||||
});
|
||||
const store = useStore();
|
||||
const treeData = computed(() => store.state.content_type)
|
||||
watch(()=>props.showContent, (val) => {
|
||||
if(!val){
|
||||
expandedKeys.value = []
|
||||
selectedKeys.value = []
|
||||
checkedKeys.value = []
|
||||
}
|
||||
});
|
||||
const onCheck = (checkedKeys, {checked: bool, checkedNodes, node, event}) => {
|
||||
state.treeAddData = checkedNodes.filter(node => !node.children || node.children.length === 0);
|
||||
console.log(state.treeAddData,'state.treeAddData')
|
||||
}
|
||||
const deleteTree = (item) => {
|
||||
state.treeAddData = state.treeAddData.filter(node => node.id !== item.id);
|
||||
checkedKeys.value = state.treeAddData.map(item=>item.id)
|
||||
}
|
||||
const clearTree = () => {
|
||||
state.treeAddData = [];
|
||||
checkedKeys.value = [];
|
||||
}
|
||||
const queryCreate = () => {
|
||||
ctx.emit("AddContentList", state.treeAddData);
|
||||
closeCodeModal()
|
||||
}
|
||||
const closeCodeModal = () => {
|
||||
ctx.emit("update:showContent", false);
|
||||
};
|
||||
const expandedKeys = ref([]);
|
||||
const selectedKeys = ref([]);
|
||||
const checkedKeys = ref([]);
|
||||
return {
|
||||
...toRefs(state),
|
||||
closeCodeModal,
|
||||
queryCreate,
|
||||
deleteTree,
|
||||
clearTree,
|
||||
onCheck,
|
||||
expandedKeys,
|
||||
selectedKeys,
|
||||
checkedKeys,
|
||||
treeData,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.twoDimensionalCode {
|
||||
}
|
||||
.codeModal {
|
||||
.ant-modal {
|
||||
.ant-modal-content {
|
||||
width: 479px !important;
|
||||
.ant-modal-body {
|
||||
.QR {
|
||||
z-index: 9999;
|
||||
width: 700px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 10%;
|
||||
transform: translate(-50%, -50%);
|
||||
.qr_header {
|
||||
position: absolute;
|
||||
width: calc(100%);
|
||||
height: 40px;
|
||||
// background: linear-gradient(
|
||||
// rgba(78, 166, 255, 0.2) 0%,
|
||||
// rgba(78, 166, 255, 0) 100%
|
||||
// );
|
||||
}
|
||||
.qr_main {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.qrm_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 20px;
|
||||
padding-left: 26px;
|
||||
font-size: 16px;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 22px;
|
||||
}
|
||||
.close_exit {
|
||||
position: absolute;
|
||||
right: 42px;
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url(@/assets/images/coursewareManage/close.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.line{
|
||||
height: 1px;
|
||||
margin-top: 16px;
|
||||
background-color: #666666;
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
min-height: 500px;
|
||||
.left{
|
||||
width: 50%;
|
||||
border-right: 1px solid #666666;
|
||||
padding: 30px 15px;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.right{
|
||||
width: 50%;
|
||||
// max-height: 600px;
|
||||
// overflow-y: auto;
|
||||
.headers{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 30px 15px;
|
||||
.header_right{
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.tags{
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
padding: 0 15px;
|
||||
.tag{
|
||||
height: 44px;
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.tag_delete{
|
||||
display: none;
|
||||
color: #4ea6ff;
|
||||
transform: rotate(45deg);
|
||||
font-size: 26px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.tag:hover .tag_delete {
|
||||
display: block;
|
||||
}
|
||||
.tag:hover {
|
||||
background-color: aliceblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
height: 60px;
|
||||
text-align: right;
|
||||
padding: 13px 30px;
|
||||
border-top: 1px solid #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -33,7 +33,7 @@
|
||||
</a-tree-select> -->
|
||||
</a-form-item>
|
||||
<a-form-item class="select">
|
||||
<a-select style="width: 276px" placeholder="请选择讲师体系" v-model:value="searchParam.kid" allowClear
|
||||
<a-select style="width: 276px" placeholder="请选择讲师体系" v-model:value="searchParam.systemid" allowClear
|
||||
:options="LecturerSystemList" @change="changetlevel">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
@@ -412,7 +412,7 @@ export default {
|
||||
searchParam: {
|
||||
name:null,
|
||||
userNo: null,
|
||||
kid: null,
|
||||
systemid: null,
|
||||
tlevelId: null,
|
||||
waitStatus: null,
|
||||
certStatus: null,
|
||||
@@ -475,7 +475,7 @@ export default {
|
||||
let array = [];
|
||||
arr.map((value) => {
|
||||
let obj = {
|
||||
value: value.kid,
|
||||
value: value.systemid,
|
||||
label: value.systemName,
|
||||
};
|
||||
array.push(obj);
|
||||
@@ -522,7 +522,7 @@ export default {
|
||||
])
|
||||
const changetlevel = (val) => {
|
||||
console.log( "讲师体系id" +val);
|
||||
getLevel( {kid:val}).then((res) => {
|
||||
getLevel( {systemid:val}).then((res) => {
|
||||
if (res.data.code === 200) {
|
||||
let arr = res.data.data;
|
||||
let array = [];
|
||||
@@ -787,7 +787,7 @@ console.log( "讲师体系id" +val);
|
||||
state.searchParam = {
|
||||
name:null,
|
||||
userNo: null,
|
||||
kid: null,
|
||||
systemid: null,
|
||||
tlevelId: null,
|
||||
waitStatus: null,
|
||||
certStatus: null,
|
||||
@@ -868,7 +868,7 @@ console.log( "讲师体系id" +val);
|
||||
// departId:'8465784657',
|
||||
// defaultTeachingTime:50,
|
||||
// leveId:1,
|
||||
// kid:249,
|
||||
// systemid:249,
|
||||
// certStatus:1,
|
||||
// description:'测试13.00',
|
||||
// workExperience:'测试13.00',
|
||||
@@ -946,11 +946,11 @@ console.log( "讲师体系id" +val);
|
||||
// userNo:null,
|
||||
departId: null,
|
||||
tlevelId: null,
|
||||
defaultTeachingTime: null,
|
||||
defaultTeachingTime: 0,
|
||||
// levelName:null,
|
||||
// leveName:null,
|
||||
tsystemId: null,
|
||||
// kid:null,
|
||||
// systemid:null,
|
||||
certStatus:0,
|
||||
description:null,
|
||||
workExperience:null,
|
||||
@@ -996,7 +996,7 @@ console.log( "讲师体系id" +val);
|
||||
}&pageSize=${state.pageSize1}
|
||||
&userNo=${state.searchParam.userNo ? state.searchParam.userNo : ""}
|
||||
&name=${state.searchParam.name ? state.searchParam.name : ""}
|
||||
&kid=${state.searchParam.kid ? state.searchParam.kid : ""}
|
||||
&systemid=${state.searchParam.systemid ? state.searchParam.systemid : ""}
|
||||
&tlevelId=${state.searchParam.tlevelId ? state.searchParam.tlevelId : ""
|
||||
}&waitStatus=${state.searchParam.waitStatus ? state.searchParam.waitStatus : ""}
|
||||
&certStatus=${state.searchParam.certStatus ? state.searchParam.certStatus : ""
|
||||
|
||||
@@ -366,34 +366,34 @@ export default {
|
||||
}
|
||||
//保存
|
||||
const createTeacherDialog = () => {
|
||||
// let a ={
|
||||
// kid:11111111,
|
||||
// systemCode: 888,
|
||||
// systemName: 'cesceshi',
|
||||
// remark: 'cesceshi',
|
||||
// levelList:[{
|
||||
// levelName:'cesceshi',
|
||||
// levelTime:'222',
|
||||
// sort:1,
|
||||
// levelPay:'56',
|
||||
// upperLimit:'186'
|
||||
// }, ]
|
||||
// }
|
||||
// console.log(a)
|
||||
// console.log(state.formParam)
|
||||
if (state.formParam.kid != undefined) {
|
||||
updateSystem(state.formParam).then(response => {
|
||||
message.success("修改成功");
|
||||
});
|
||||
let a ={
|
||||
kid:11111111,
|
||||
systemCode: 888,
|
||||
systemName: 'cesceshi',
|
||||
remark: 'cesceshi',
|
||||
levelList:[{
|
||||
levelName:'cesceshi',
|
||||
levelTime:'222',
|
||||
sort:1,
|
||||
levelPay:'56',
|
||||
upperLimit:'186'
|
||||
}, ]
|
||||
}
|
||||
else {
|
||||
addLecturerSystem(state.formParam)
|
||||
console.log(a)
|
||||
// console.log(state.formParam)
|
||||
// if (state.formParam.kid != undefined) {
|
||||
// updateSystem(state.formParam).then(response => {
|
||||
// message.success("修改成功");
|
||||
// });
|
||||
// }
|
||||
// else {
|
||||
addLecturerSystem(a)
|
||||
.then((res) => {
|
||||
message.success("保存成功");
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
// }
|
||||
cancel()
|
||||
state.teacherdialog = false;
|
||||
getTableDate();
|
||||
|
||||
Reference in New Issue
Block a user