mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-09 19:06:45 +08:00
-- 学员选择bug
This commit is contained in:
@@ -31,10 +31,19 @@ export function useBoeApiPage(_url, params = {}, config = {
|
||||
})
|
||||
}
|
||||
|
||||
function reset(){
|
||||
state.data = []
|
||||
state.loading = false
|
||||
state.page = 1
|
||||
state.totalPage = 0
|
||||
state.total = 0
|
||||
}
|
||||
|
||||
config.init && fetch()
|
||||
return {
|
||||
...toRefs(state),
|
||||
fetch,
|
||||
reset
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -3,20 +3,20 @@
|
||||
<template>
|
||||
<div class="CommonStudent">
|
||||
<a-drawer
|
||||
:visible="visiable"
|
||||
class="drawerStyle ProjCheckship CommonStudent"
|
||||
placement="right"
|
||||
width="60%"
|
||||
:visible="visiable"
|
||||
class="drawerStyle ProjCheckship CommonStudent"
|
||||
placement="right"
|
||||
width="60%"
|
||||
>
|
||||
<div class="drawerMain" id="ProjCheckship" style="">
|
||||
<div class="header">
|
||||
<div class="headerTitle">
|
||||
{{ { 1: "添加学员", 2: "添加学员", 3: "添加学员" }[type] || "" }}
|
||||
{{ {1: "添加学员", 2: "添加学员", 3: "添加学员"}[type] || "" }}
|
||||
</div>
|
||||
<img
|
||||
style="width: 29px; height: 29px; cursor: pointer"
|
||||
src="../../assets/images/basicinfo/close.png"
|
||||
@click="closeDrawer"
|
||||
style="width: 29px; height: 29px; cursor: pointer"
|
||||
src="../../assets/images/basicinfo/close.png"
|
||||
@click="closeDrawer"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex; overflow-x: auto; overflow-y: auto">
|
||||
@@ -27,68 +27,70 @@
|
||||
<div class="tab1">
|
||||
<a-form-item label="姓名">
|
||||
<a-input
|
||||
v-model:value="nameSearch.keyword"
|
||||
style="width: 270px; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入姓名"
|
||||
v-model:value="nameSearch.keyword"
|
||||
style="width: 270px; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="onSearchStu"
|
||||
style="margin-left: 20px; border-radius: 4px"
|
||||
type="primary"
|
||||
@click="onSearchStu"
|
||||
style="margin-left: 20px; border-radius: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<SearchOutlined />
|
||||
<SearchOutlined/>
|
||||
</template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button
|
||||
@click="resetStu"
|
||||
style="margin-left: 20px; border-radius: 4px"
|
||||
>重置</a-button
|
||||
@click="resetStu"
|
||||
style="margin-left: 20px; border-radius: 4px"
|
||||
>重置
|
||||
</a-button
|
||||
>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div
|
||||
class="chooseLeft"
|
||||
style="display: grid; grid-template-columns: 250px auto"
|
||||
class="chooseLeft"
|
||||
style="display: grid; grid-template-columns: 250px auto"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
:style="{
|
||||
height: screenHeight - 180 + 'px',
|
||||
overflowY: 'auto',
|
||||
}"
|
||||
style="border: 1px solid #f0f0f0"
|
||||
style="border: 1px solid #f0f0f0"
|
||||
>
|
||||
<div class="tree" style="margin: 10px 4px 220px 10px">
|
||||
<a-tree
|
||||
allow-clear
|
||||
tree-default-expand-all
|
||||
:tree-data="treeData"
|
||||
:fieldNames="{
|
||||
allow-clear
|
||||
tree-default-expand-all
|
||||
:tree-data="treeData"
|
||||
v-model:selectedKeys="stuTreeSelectKeys"
|
||||
:fieldNames="{
|
||||
children: 'treeChildList',
|
||||
key: 'id',
|
||||
title: 'name',
|
||||
value: 'name',
|
||||
}"
|
||||
@select="stuStuOrgSelect"
|
||||
@select="stuStuOrgSelect"
|
||||
>
|
||||
</a-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="tableBox tabb"
|
||||
style="
|
||||
class="tableBox tabb"
|
||||
style="
|
||||
margin: 0px 4px 120px 10px;
|
||||
border: 1px solid #f0f0f0;
|
||||
"
|
||||
>
|
||||
<a-table
|
||||
:columns="stuColumns"
|
||||
:data-source="stuData"
|
||||
:pagination="stuPagination"
|
||||
:loading="stuLoading"
|
||||
row-key="id"
|
||||
:row-selection="stuRowSelection"
|
||||
:columns="stuColumns"
|
||||
:data-source="stuData"
|
||||
:pagination="stuPagination"
|
||||
:loading="stuLoading"
|
||||
row-key="id"
|
||||
:row-selection="stuRowSelection"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -137,36 +139,37 @@
|
||||
<div>
|
||||
<a-form-item label="受众名称:">
|
||||
<a-input
|
||||
v-model:value="audienceName.keyword"
|
||||
style="width: 260px; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入受众名称"
|
||||
v-model:value="audienceName.keyword"
|
||||
style="width: 260px; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入受众名称"
|
||||
/>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="searchAudi"
|
||||
style="margin-left: 20px; border-radius: 4px"
|
||||
type="primary"
|
||||
@click="searchAudi"
|
||||
style="margin-left: 20px; border-radius: 4px"
|
||||
>
|
||||
<template #icon>
|
||||
<SearchOutlined />
|
||||
<SearchOutlined/>
|
||||
</template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button
|
||||
@click="resetAudienceInfo"
|
||||
style="margin-left: 20px; border-radius: 4px"
|
||||
>重置</a-button
|
||||
@click="resetAudienceInfo"
|
||||
style="margin-left: 20px; border-radius: 4px"
|
||||
>重置
|
||||
</a-button
|
||||
>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div class="tableBox tabb">
|
||||
<a-table
|
||||
style="border: 1px solid #f2f6fe"
|
||||
row-key="id"
|
||||
:columns="audiColums"
|
||||
:data-source="audiData"
|
||||
:loading="audiLoading"
|
||||
:pagination="auditPagination"
|
||||
:row-selection="auditRowSelection"
|
||||
style="border: 1px solid #f2f6fe"
|
||||
row-key="id"
|
||||
:columns="audiColums"
|
||||
:data-source="audiData"
|
||||
:loading="audiLoading"
|
||||
:pagination="auditPagination"
|
||||
:row-selection="auditRowSelection"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -180,9 +183,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="selecteds"
|
||||
:style="{ 'max-height': screenHeight - 235 + 'px' }"
|
||||
style="overflow-y: auto"
|
||||
class="selecteds"
|
||||
:style="{ 'max-height': screenHeight - 235 + 'px' }"
|
||||
style="overflow-y: auto"
|
||||
>
|
||||
<div class="person">快速选人</div>
|
||||
<div v-for="(item, i) in selectsData.studentList">
|
||||
@@ -202,14 +205,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!person && selectsData.studentList.length > 10"
|
||||
class="ifsw"
|
||||
v-if="!person && selectsData.studentList.length > 10"
|
||||
class="ifsw"
|
||||
>
|
||||
<div @click="person = !person" class="“sw”">查看更多></div>
|
||||
</div>
|
||||
<div
|
||||
v-if="person && selectsData.studentList.length > 10"
|
||||
class="ifsw"
|
||||
v-if="person && selectsData.studentList.length > 10"
|
||||
class="ifsw"
|
||||
>
|
||||
<div @click="person = !person" class="sw">收起<</div>
|
||||
</div>
|
||||
@@ -254,8 +257,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!group && selectsData.groupList.length > 10"
|
||||
class="ifsw"
|
||||
v-if="!group && selectsData.groupList.length > 10"
|
||||
class="ifsw"
|
||||
>
|
||||
<div @click="group = !group" class="“sw”">查看更多></div>
|
||||
</div>
|
||||
@@ -341,7 +344,7 @@
|
||||
<div class="con">
|
||||
<div class="header">
|
||||
<div class="inhe">
|
||||
|
||||
|
||||
<div class="tz"> {{ type === 1 ? "选择阶段" : "添加学员到关卡" }}</div>
|
||||
<div class="mg" @click="closeChangeModal"></div>
|
||||
</div>
|
||||
@@ -351,13 +354,13 @@
|
||||
<!-- <div class="cur">当前关卡:关卡2</div> -->
|
||||
<div class="select">
|
||||
<a-select
|
||||
style="width: 400px"
|
||||
:placeholder="type === 1 ? '选择阶段' : '选择关卡'"
|
||||
v-model:value="selectsData.stageId"
|
||||
className="cus-select"
|
||||
style="width: 400px"
|
||||
:placeholder="type === 1 ? '选择阶段' : '选择关卡'"
|
||||
v-model:value="selectsData.stageId"
|
||||
className="cus-select"
|
||||
>
|
||||
<a-select-option v-for="(item, i) in stageIds" :key="i" :value="item.id"
|
||||
>{{ item.name || "默认" }}
|
||||
>{{ item.name || "默认" }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
@@ -384,14 +387,13 @@
|
||||
</a-modal>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed, defineEmits, defineProps, ref, watch } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
import { useBoeApiPage } from "@/api/request";
|
||||
import { AUDIENCE_LIST, USER_LIST } from "@/api/ThirdApi";
|
||||
import { saveStu } from "@/api/index1";
|
||||
import {computed, defineEmits, defineProps, ref, watch} from "vue";
|
||||
import {useStore} from "vuex";
|
||||
import {useBoeApiPage} from "@/api/request";
|
||||
import {AUDIENCE_LIST, USER_LIST} from "@/api/ThirdApi";
|
||||
import {saveStu} from "@/api/index1";
|
||||
|
||||
const store = useStore();
|
||||
const emit = defineEmits({});
|
||||
@@ -422,6 +424,7 @@ const nameSearch = ref({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const stuTreeSelectKeys = ref([])
|
||||
const audienceName = ref({
|
||||
keyword: "",
|
||||
page: 1,
|
||||
@@ -440,6 +443,7 @@ const {
|
||||
pageSize: stuPageSize,
|
||||
loading: stuLoading,
|
||||
total: stuTotal,
|
||||
reset: stuReset
|
||||
} = useBoeApiPage(USER_LIST, nameSearch.value, {
|
||||
init: false,
|
||||
result: (res) => res.result.userInfoList,
|
||||
@@ -457,10 +461,11 @@ const {
|
||||
pageSize: audiPageSize,
|
||||
loading: audiLoading,
|
||||
total: audiTotal,
|
||||
reset: auditReset
|
||||
} = useBoeApiPage(AUDIENCE_LIST, audienceName.value, {
|
||||
init: true,
|
||||
result: (res) =>
|
||||
res.result.audienceList.map((e) => ({ ...e, id: e.id + "" })),
|
||||
res.result.audienceList.map((e) => ({...e, id: e.id + ""})),
|
||||
totalPage: (res) => res.result.totalPage,
|
||||
total: (res) => res.result.totalElement,
|
||||
});
|
||||
@@ -568,7 +573,7 @@ const auditRowSelection = computed(() => ({
|
||||
const closeDrawer = () => {
|
||||
visiable.value = false;
|
||||
stuData.value = [];
|
||||
nameSearch.value.keyword ="";
|
||||
nameSearch.value.keyword = "";
|
||||
|
||||
|
||||
};
|
||||
@@ -582,30 +587,35 @@ const openDrawer = () => {
|
||||
const treeData = computed(() => {
|
||||
return store.state.orgtreeList ? store.state.orgtreeList : [];
|
||||
});
|
||||
|
||||
function onSearchStu() {
|
||||
nameSearch.value.page = 1;
|
||||
searchStu();
|
||||
}
|
||||
|
||||
function stuStuOrgSelect(e) {
|
||||
nameSearch.value.departId = e.join("");
|
||||
searchStu();
|
||||
}
|
||||
|
||||
function stuDel(i) {
|
||||
stuSelectKeys.value = stuSelectKeys.value.filter(
|
||||
(e) => e !== selectsData.value.studentList[i].id
|
||||
(e) => e !== selectsData.value.studentList[i].id
|
||||
);
|
||||
selectsData.value.studentList.splice(i, 1);
|
||||
}
|
||||
|
||||
// function orgDel(i) {
|
||||
// orgSelectKeys.value = orgSelectKeys.value.filter(e => e !== selectsData.value.deptList[i].id)
|
||||
// selectsData.value.deptList.splice(i, 1)
|
||||
// }
|
||||
function AuditDel(i) {
|
||||
auditSelectKeys.value = auditSelectKeys.value.filter(
|
||||
(e) => e !== selectsData.value.groupList[i].id
|
||||
(e) => e !== selectsData.value.groupList[i].id
|
||||
);
|
||||
selectsData.value.groupList.splice(i, 1);
|
||||
}
|
||||
|
||||
// function orgSelect(key, obj) {
|
||||
// console.log(obj)
|
||||
//request(ORG_CHILD_LIST, {orgId: null}).then(res => {
|
||||
@@ -616,14 +626,17 @@ function onStuSelectChange(e, l) {
|
||||
stuSelectKeys.value = e;
|
||||
selectsData.value.studentList = l;
|
||||
}
|
||||
|
||||
function onOrgSelectChange(e, l) {
|
||||
orgRowSelection.value = e;
|
||||
selectsData.value.deptList = l.selectedNodes;
|
||||
}
|
||||
|
||||
function onAuditSelectChange(e, l) {
|
||||
auditSelectKeys.value = e;
|
||||
selectsData.value.groupList = l;
|
||||
}
|
||||
|
||||
// const stuDepartmentSelect = (e) => {
|
||||
// nameSearch.value.orgId = e.join('')
|
||||
// searchStu()
|
||||
@@ -640,8 +653,8 @@ const auditChangePagination = (page) => {
|
||||
//重置
|
||||
const resetStu = () => {
|
||||
deleteDepSelect();
|
||||
nameSearch.value = { keyword: "", page: 1, pageSize: 10 };
|
||||
|
||||
nameSearch.value = {keyword: "", page: 1, pageSize: 10};
|
||||
stuReset()
|
||||
};
|
||||
//清空选择部门信息
|
||||
const deleteDepSelect = () => {
|
||||
@@ -653,8 +666,9 @@ const deleteDepSelect = () => {
|
||||
// };
|
||||
//重置受众
|
||||
const resetAudienceInfo = () => {
|
||||
audienceName.value = { keyword: "", page: 1, pageSize: 10 };
|
||||
searchStu();
|
||||
audienceName.value = {keyword: "", page: 1, pageSize: 10};
|
||||
auditReset()
|
||||
searchAudi()
|
||||
};
|
||||
//全部清除
|
||||
// const deleteAll = () => {
|
||||
@@ -672,6 +686,7 @@ const submitAuth = () => {
|
||||
handleStageOk();
|
||||
}
|
||||
};
|
||||
|
||||
function handleStageOk() {
|
||||
stageVisible.value = false;
|
||||
visiable.value = false;
|
||||
@@ -687,23 +702,26 @@ function handleStageOk() {
|
||||
emit("finash", true);
|
||||
});
|
||||
}
|
||||
|
||||
watch(visiable, () => {
|
||||
stuSelectKeys.value = [];
|
||||
orgSelectKeys.value = [];
|
||||
auditSelectKeys.value = [];
|
||||
stuData.value = [];
|
||||
audienceName.value.keyword = "";
|
||||
audienceName.value.page = 1;
|
||||
audienceName.value.pageSize = 10;
|
||||
activeKey.value=1;
|
||||
nameSearch.value.departId = null
|
||||
stuTreeSelectKeys.value=[]
|
||||
activeKey.value = 1;
|
||||
selectsData.value = {
|
||||
stageId: "",
|
||||
studentList: [],
|
||||
deptList: [],
|
||||
groupList: [],
|
||||
};
|
||||
|
||||
|
||||
stuReset()
|
||||
auditReset()
|
||||
|
||||
searchAudi();
|
||||
});
|
||||
</script>
|
||||
@@ -712,10 +730,12 @@ watch(visiable, () => {
|
||||
.ant-btn-primary {
|
||||
background-color: #4ea6ff !important;
|
||||
}
|
||||
|
||||
.cus-select {
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.tableBox .ant-table-row .ant-table-cell {
|
||||
height: 48px;
|
||||
font-size: 14px;
|
||||
@@ -724,18 +744,23 @@ watch(visiable, () => {
|
||||
line-height: 29px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.tableBox .ant-table-thead tr th {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ant-tabs-tabpane {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-tabs {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.right1 {
|
||||
border-left: 1px solid #f2f6fe;
|
||||
margin-left: 20px;
|
||||
|
||||
.onerow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -770,6 +795,7 @@ watch(visiable, () => {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.clbox {
|
||||
margin-right: 50px;
|
||||
display: flex;
|
||||
@@ -780,6 +806,7 @@ watch(visiable, () => {
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
background: #4ea6ff;
|
||||
|
||||
.colose {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@@ -790,21 +817,25 @@ watch(visiable, () => {
|
||||
background-size: 100%;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.allclear {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selecteds {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 32px;
|
||||
|
||||
.person {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
border-top: 1px solid #f2f6fe;
|
||||
}
|
||||
|
||||
.chose {
|
||||
width: 64px;
|
||||
height: 24px;
|
||||
@@ -818,6 +849,7 @@ watch(visiable, () => {
|
||||
color: rgba(56, 139, 225, 1);
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
|
||||
.ch {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
@@ -827,12 +859,14 @@ watch(visiable, () => {
|
||||
top: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.ifsw {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
color: #4ea6ff;
|
||||
}
|
||||
|
||||
.sw {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -842,11 +876,13 @@ watch(visiable, () => {
|
||||
margin-top: 23px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.dept {
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
border-top: 1px solid #f2f6fe;
|
||||
}
|
||||
|
||||
.chose1 {
|
||||
//width: 90px;
|
||||
height: 24px;
|
||||
@@ -860,11 +896,13 @@ watch(visiable, () => {
|
||||
color: rgba(56, 139, 225, 1);
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
|
||||
.span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ch1 {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
@@ -874,11 +912,13 @@ watch(visiable, () => {
|
||||
top: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.group {
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
border-top: 1px solid #f2f6fe;
|
||||
}
|
||||
|
||||
.chose2 {
|
||||
//width: 120px;
|
||||
height: 24px;
|
||||
@@ -892,11 +932,13 @@ watch(visiable, () => {
|
||||
color: rgba(56, 139, 225, 1);
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
|
||||
.span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ch2 {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
|
||||
Reference in New Issue
Block a user