mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-14 21:36:44 +08:00
350 lines
11 KiB
Vue
350 lines
11 KiB
Vue
<template>
|
||
<div class="twoDimensionalCode">
|
||
<!--选择教师专长页面 -->
|
||
<a-modal
|
||
:visible="showContent"
|
||
:footer="null"
|
||
:closable="closableQR"
|
||
wrapClassName="codeModal"
|
||
style="margin-top: 400px"
|
||
:zIndex="9999"
|
||
@cancel="closeCodeModal"
|
||
>
|
||
<div class="QR">
|
||
<div class="qr_header"></div>
|
||
<div class="qr_main">
|
||
<div class="qrm_header">
|
||
<span style="title">{{Addtitle}}</span>
|
||
<div class="close_exit" @click="closeCodeModal"></div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="content">
|
||
<div class="left">
|
||
<a-tree checkable checkStrictly :tree-data="treeData" :loading="orgLoading"
|
||
:load-data="onLoadData" v-model:expandedKeys="expandedKeys"
|
||
v-model:selectedKeys="selectedKeys"
|
||
v-model:checkedKeys="checkedKeys" :fieldNames="{
|
||
children: 'treeChildList',
|
||
key: 'id',
|
||
title: 'name',
|
||
value: 'name',
|
||
}" @check="onCheck">
|
||
</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 class="tag_text" :title="`${item?.orgName} - (原：${item?.affiliationName || '-'})`">{{ item?.orgName }} - (原：{{ item?.affiliationName || '-' }})</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 setup>
|
||
import { reactive, toRefs, watch,ref,computed } from "vue";
|
||
import { message } from "ant-design-vue";
|
||
import { useStore } from "vuex";
|
||
import { ORG_CHILD_LIST, ORG_LIST} from "@/api/apis";
|
||
import { defineProps,defineEmits } from "vue";
|
||
import { request, useRequest} from "@/api/request";
|
||
import * as lecturerApi from "@/api/Lecturer.js";
|
||
const props = defineProps({
|
||
showContent: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
Addtitle:{
|
||
type:String,
|
||
default: true,
|
||
},
|
||
AddContentList:{
|
||
type:Array,
|
||
default: ()=>[],
|
||
},
|
||
isParent:{
|
||
type:String,
|
||
default: '',
|
||
}
|
||
})
|
||
const emit = defineEmits({})
|
||
const treeAddData = ref([])
|
||
const { data: treeData, loading: orgLoading } = useRequest(
|
||
ORG_LIST,
|
||
{ keyword: "" },
|
||
);
|
||
function onLoadData(treeNode) {
|
||
return request(ORG_CHILD_LIST, { keyword: "", orgId: treeNode.id }).then(
|
||
(r) => {
|
||
//等待接口联调
|
||
r?.data?.map(item=>{
|
||
notLists?.value?.some(i=>{
|
||
if(i.orgId == item.id){
|
||
item.disabled = true
|
||
item.name = item.name + '(' + i.affiliationName + ')'
|
||
return true
|
||
}
|
||
})
|
||
return item
|
||
})
|
||
treeNode.dataRef.treeChildList = r.data;
|
||
treeData.value = [...treeData.value];
|
||
}
|
||
);
|
||
}
|
||
watch(()=>props.showContent, (val) => {
|
||
if(!val){
|
||
expandedKeys.value = []
|
||
selectedKeys.value = []
|
||
checkedKeys.value = []
|
||
}else{
|
||
console.log(props.AddContentList,'xixiixix')
|
||
getNot()
|
||
treeAddData.value = props?.AddContentList
|
||
orgLists.value = props?.AddContentList
|
||
checkedKeys.value = props?.AddContentList?.map(item=>item.orgId)
|
||
}
|
||
});
|
||
const notLists = ref([])
|
||
const getNot = () => {
|
||
lecturerApi.getUnSelectOrg(props.isParent).then(res=>{
|
||
if(res.data.code == 200){
|
||
notLists.value = res.data.data
|
||
}
|
||
if(treeData.value.length){
|
||
treeData.value.map(item=>{
|
||
item.name = item.name?.split('(')[0]
|
||
notLists.value.some(i=>{
|
||
if(i.orgId == item.id){
|
||
item.disabled = true
|
||
item.name = item.name + '(' + i.affiliationName + ')'
|
||
return true
|
||
}
|
||
})
|
||
return item
|
||
})
|
||
}
|
||
}).catch(err=>{
|
||
message.error(err.data.msg)
|
||
})
|
||
}
|
||
const orgLists = ref([])
|
||
const onCheck = async (checkedKey, {checked: bool, checkedNodes, node, event}) => {
|
||
// "965356037047586816"
|
||
let length = treeAddData.value.length
|
||
const checkedNodeIds = checkedNodes.map(item => item.id);
|
||
const treeAddDataOrgIds = treeAddData.value.map(item => item.orgId);
|
||
const combinedUniqueIds = [...new Set([...checkedNodeIds, ...treeAddDataOrgIds])];
|
||
if(combinedUniqueIds.length > length){
|
||
await lecturerApi.getSelectOrg(node.id,props.isParent).then(res=>{
|
||
const targetNode = checkedNodes.find(item=>item.id == res?.data?.data[0]?.orgId)
|
||
if(targetNode){
|
||
orgLists.value.push(Object.assign(targetNode,res?.data?.data[0]));
|
||
}
|
||
}).catch(err=>{
|
||
message.error('获取被占用组织失败，请重新尝试')
|
||
})
|
||
}
|
||
const checkLists = checkedNodes.map(item => {
|
||
if (!item || !item.id) {
|
||
return item;
|
||
}
|
||
try {
|
||
const orgItem = orgLists.value?.find(i => i && i.orgId == item.id);
|
||
if (orgItem) {
|
||
item.isSelect = orgItem.isSelect;
|
||
item.orgName = orgItem.orgName;
|
||
item.leaders = orgItem.leaders;
|
||
item.affiliationName = orgItem.affiliationName
|
||
}
|
||
return {
|
||
orgId: item.id,
|
||
orgName: item.name,
|
||
affiliationId: item.id,
|
||
...item
|
||
};
|
||
} catch (err) {
|
||
return item;
|
||
}
|
||
});
|
||
const endLists = [...checkLists,...orgLists.value]
|
||
const seen = new Set();
|
||
const uniqueEndLists = endLists.filter(item => {
|
||
const isDuplicate = seen.has(item.orgId);
|
||
seen.add(item.orgId);
|
||
return !isDuplicate;
|
||
});
|
||
treeAddData.value = uniqueEndLists?.filter(item => checkedKeys.value?.checked?.includes(item.orgId));
|
||
// treeAddData.value = checkedNodes;
|
||
console.log(treeAddData.value,'checkedNodes',orgLists.value)
|
||
}
|
||
const clearTree = () => {
|
||
treeAddData.value = [];
|
||
checkedKeys.value = [];
|
||
orgLists.value = [];
|
||
}
|
||
const deleteTree = (item) => {
|
||
treeAddData.value = treeAddData.value.filter(node => node.orgId !== item.orgId);
|
||
checkedKeys.value = treeAddData.value.map(item=>item.orgId)
|
||
}
|
||
const closeCodeModal = () => {
|
||
emit("update:showContent", false);
|
||
clearTree()
|
||
};
|
||
const queryCreate = () => {
|
||
treeAddData.value?.map(item=>{
|
||
props?.AddContentList?.map(i=>{
|
||
if(item.orgId === i.orgId){
|
||
item.affiliationOrgId = i.affiliationOrgId
|
||
}
|
||
})
|
||
})
|
||
emit("update:AddContentList", treeAddData.value);
|
||
closeCodeModal()
|
||
}
|
||
const expandedKeys = ref([]);
|
||
const selectedKeys = ref([]);
|
||
const checkedKeys = ref([]);
|
||
</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: #e8e8e8;
|
||
}
|
||
.content{
|
||
display: flex;
|
||
min-height: 500px;
|
||
.left{
|
||
width: 50%;
|
||
border-right: 1px solid #e8e8e8;
|
||
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_text{
|
||
max-width: 240px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.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 #e8e8e8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|