mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-13 21:06:44 +08:00
681 lines
18 KiB
Vue
681 lines
18 KiB
Vue
<!-- eslint-disable vue/no-parsing-error -->
|
|
<!-- eslint-disable vue/require-v-for-key -->
|
|
<template>
|
|
<div class="CommonStudent">
|
|
<div class="drawer-content" style="">
|
|
<div class="tabs" style="min-width: 800px">
|
|
<a-tabs v-model:activeKey="activeKey">
|
|
<template v-if="type == 2">
|
|
<a-tab-pane :key="2" tab="项目内学员">
|
|
<div :style="{ height: screenHeight - 235 + 'px' }">
|
|
<div>
|
|
<a-form-item label="姓名：">
|
|
<a-input
|
|
v-model:value="projectParams.userNickName"
|
|
style="width: 260px; height: 40px; border-radius: 8px"
|
|
placeholder="请输入姓名"
|
|
/>
|
|
<a-button
|
|
type="primary"
|
|
@click="getProjectStu"
|
|
style="margin-left: 20px; border-radius: 4px"
|
|
>
|
|
<template #icon>
|
|
<SearchOutlined />
|
|
</template>
|
|
搜索
|
|
</a-button>
|
|
<a-button
|
|
type="primary"
|
|
@click="resetProjectStu"
|
|
style="margin-left: 20px; border-radius: 4px"
|
|
>重置
|
|
</a-button>
|
|
</a-form-item>
|
|
</div>
|
|
<div class="tableBox tabb">
|
|
<BaseTable
|
|
ref="projectStuTableRef"
|
|
:columns="projectStuColumns"
|
|
:url="GROWTH_STUDENT_LIST"
|
|
v-model:params="projectParams"
|
|
v-model:selectedRows="projectSelectRows"
|
|
:request="growthRequest"
|
|
type="checkbox"
|
|
></BaseTable>
|
|
</div>
|
|
</div>
|
|
</a-tab-pane>
|
|
</template>
|
|
<a-tab-pane :key="1" tab="快速选人">
|
|
<div :style="{ height: screenHeight - 235 + 'px' }">
|
|
<div class="tab1">
|
|
<a-form-item label="姓名">
|
|
<a-input
|
|
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"
|
|
>
|
|
<template #icon>
|
|
<SearchOutlined />
|
|
</template>
|
|
搜索
|
|
</a-button>
|
|
<a-button
|
|
type="primary"
|
|
@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"
|
|
>
|
|
<a-spin :spinning="treeSpin">
|
|
<div
|
|
style="border: 1px solid #f0f0f0"
|
|
:style="{
|
|
height: screenHeight - 180 + 'px',
|
|
overflowY: 'auto',
|
|
}"
|
|
>
|
|
<a-input-search
|
|
v-model:value="nameSearch.departName"
|
|
placeholder="请输入部门名称"
|
|
@search="getOrgList"
|
|
/>
|
|
|
|
<div class="tree" style="margin: 10px 4px 0 10px">
|
|
<a-tree
|
|
allow-clear
|
|
tree-default-expand-all
|
|
:tree-data="treeData"
|
|
:load-data="onLoadData"
|
|
v-model:selectedKeys="stuTreeSelectKeys"
|
|
v-model:expandedKeys="stuTreeExpandedKeys"
|
|
:fieldNames="{
|
|
children: 'treeChildList',
|
|
key: 'id',
|
|
title: 'name',
|
|
value: 'name',
|
|
}"
|
|
@select="stuStuOrgSelect"
|
|
>
|
|
</a-tree>
|
|
</div>
|
|
</div>
|
|
</a-spin>
|
|
|
|
<div
|
|
class="tableBox tabb"
|
|
style="margin: 0px 4px 0 10px; border: 1px solid #f0f0f0"
|
|
>
|
|
<BaseTable
|
|
ref="stuTableRef"
|
|
:columns="stuColumns"
|
|
:url="USER_LIST_PAGE"
|
|
pageKey="pageNo"
|
|
v-model:params="nameSearch"
|
|
:request="useNewRowsPageNoInit"
|
|
v-model:selectedRows="stuSelectRows"
|
|
type="checkbox"
|
|
></BaseTable>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
<div class="right1" style="min-width: 200px">
|
|
<div class="onerow">
|
|
<div class="onleft">
|
|
<div class="already">已选</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:style="{ 'max-height': screenHeight - 235 + 'px' }"
|
|
style="overflow-y: auto; padding-bottom: 10px"
|
|
>
|
|
<div class="selecteds" v-if="type == 2">
|
|
<div class="person">项目内学员</div>
|
|
<div v-for="(item, i) in projectSelectRows" :key="i">
|
|
<div v-if="i < 11">
|
|
<div class="chose">
|
|
{{ item.userNickName }}
|
|
<div class="ch" @click="projectStuTableRef.remove(i)"></div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div v-if="person">
|
|
<div class="chose">
|
|
{{ item.userNickName }}
|
|
<div class="ch" @click="projectStuTableRef.remove(i)"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!member && projectSelectRows?.length > 10" class="ifsw">
|
|
<div @click="member = !member" class="“sw”">查看更多></div>
|
|
</div>
|
|
<div v-if="member && projectSelectRows?.length > 10" class="ifsw">
|
|
<div @click="member = !member" class="sw">收起<</div>
|
|
</div>
|
|
</div>
|
|
<div class="selecteds">
|
|
<div class="person">快速选人</div>
|
|
<div v-for="(item, i) in stuSelectRows" :key="i">
|
|
<div v-if="i < 11">
|
|
<div class="chose">
|
|
{{ item.realName }}
|
|
<div class="ch" @click="stuTableRef.remove(i)"></div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div v-if="person">
|
|
<div class="chose">
|
|
{{ item.realName }}
|
|
<div class="ch" @click="stuTableRef.remove(i)"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!person && stuSelectRows.length > 10" class="ifsw">
|
|
<div @click="person = !person" class="“sw”">查看更多></div>
|
|
</div>
|
|
<div v-if="person && stuSelectRows.length > 10" class="ifsw">
|
|
<div @click="person = !person" class="sw">收起<</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btnn">
|
|
<button class="btn2" @click="closeDrawer">取消</button>
|
|
<button class="btn2" @click="confirm">确定</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { message } from "ant-design-vue";
|
|
import { computed, defineEmits, defineProps, ref, watch, onMounted } from "vue";
|
|
import {
|
|
useNewRowsPageNoInit,
|
|
request,
|
|
useRequest,
|
|
growthRequest,
|
|
} from "@/api/request";
|
|
import { assignPermissions } from "@/api/growthpath";
|
|
import dialog from "@/utils/dialog";
|
|
import BaseTable from "@/components/common/BaseTable";
|
|
import {
|
|
ORG_CHILD_LIST,
|
|
ORG_LIST,
|
|
USER_LIST_PAGE,
|
|
GROWTH_STUDENT_LIST,
|
|
} from "@/api/apis";
|
|
|
|
const emit = defineEmits(["confirm", "close"]);
|
|
const props = defineProps({
|
|
growthId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
type: {
|
|
type: [String, Number],
|
|
default: 1,
|
|
},
|
|
});
|
|
const projectStuTableRef = ref(null);
|
|
// 项目内学员获取列表
|
|
const getProjectStu = () => projectStuTableRef.value.fetch();
|
|
// 项目内学员列表重置
|
|
const resetProjectStu = () => {
|
|
projectParams.value.userNickName = "";
|
|
projectStuTableRef.value.reset();
|
|
projectParams.value.growthId = props.growthId;
|
|
};
|
|
// 项目内学员勾选项
|
|
const projectSelectRows = ref([]);
|
|
// 项目内学员筛选
|
|
const projectParams = ref({
|
|
growthId: props.growthId,
|
|
userNickName: "",
|
|
});
|
|
const projectStuColumns = ref([
|
|
{
|
|
title: "姓名",
|
|
dataIndex: "userNickName",
|
|
key: "userNickName",
|
|
width: 80,
|
|
align: "center",
|
|
className: "h",
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: "工号",
|
|
dataIndex: "username",
|
|
key: "username",
|
|
width: 80,
|
|
align: "center",
|
|
className: "h",
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: "归属组织",
|
|
dataIndex: "orgName",
|
|
key: "orgName",
|
|
width: 80,
|
|
align: "center",
|
|
className: "h",
|
|
ellipsis: true,
|
|
},
|
|
]);
|
|
const stuSelectRows = ref([]);
|
|
const stuTableRef = ref();
|
|
|
|
const person = ref(false);
|
|
const visiable = ref(false);
|
|
const activeKey = ref(1);
|
|
|
|
const nameSearch = ref({
|
|
keyword: "",
|
|
departName: "",
|
|
});
|
|
const stuTreeSelectKeys = ref([]);
|
|
const stuTreeExpandedKeys = ref([]);
|
|
|
|
const treeData = ref([]);
|
|
|
|
const treeSpin = ref(false);
|
|
const getOrgList = () => {
|
|
treeSpin.value = true;
|
|
request(ORG_LIST, {
|
|
keyword: nameSearch.value.departName,
|
|
})
|
|
.then((res) => {
|
|
treeData.value = res.data;
|
|
})
|
|
.finally(() => {
|
|
treeSpin.value = false;
|
|
});
|
|
};
|
|
|
|
getOrgList();
|
|
const stuColumns = ref([
|
|
{
|
|
title: "姓名",
|
|
dataIndex: "realName",
|
|
key: "realName",
|
|
width: 80,
|
|
align: "center",
|
|
className: "h",
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: "工号",
|
|
dataIndex: "userNo",
|
|
key: "userNo",
|
|
width: 80,
|
|
align: "center",
|
|
className: "h",
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: "归属组织",
|
|
dataIndex: "orgName",
|
|
key: "orgName",
|
|
width: 80,
|
|
align: "center",
|
|
className: "h",
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: "部门",
|
|
dataIndex: "departName",
|
|
key: "departName",
|
|
width: 80,
|
|
align: "center",
|
|
className: "h",
|
|
ellipsis: true,
|
|
},
|
|
]);
|
|
const orgSelectKeys = ref([]);
|
|
const screenHeight = ref(document.body.clientHeight);
|
|
|
|
const closeDrawer = () => {
|
|
deleteDepSelect();
|
|
nameSearch.value.keyword = "";
|
|
emit("close");
|
|
};
|
|
|
|
function onLoadData(treeNode) {
|
|
return request(ORG_CHILD_LIST, { keyword: "", orgId: treeNode.id }).then(
|
|
(r) => {
|
|
treeNode.dataRef.treeChildList = r.data;
|
|
treeData.value = [...treeData.value];
|
|
}
|
|
);
|
|
}
|
|
|
|
function onSearchStu() {
|
|
stuTableRef.value.reset(nameSearch.value);
|
|
}
|
|
|
|
function stuStuOrgSelect(e) {
|
|
nameSearch.value.departId = e.join("");
|
|
stuTableRef.value.fetch();
|
|
}
|
|
|
|
const resetStu = () => {
|
|
nameSearch.value.keyword = "";
|
|
nameSearch.value.departName = "";
|
|
stuTableRef.value.reset({ keyword: "", departId: "", departName: "" });
|
|
getOrgList();
|
|
};
|
|
//清空选择部门信息
|
|
const deleteDepSelect = () => {
|
|
stuSelectRows.value = [];
|
|
projectSelectRows.value = [];
|
|
};
|
|
|
|
//确定添加授权
|
|
const confirm = () => {
|
|
if (!stuSelectRows.value.length && !projectSelectRows.value.length) {
|
|
message.warning("请选择学员");
|
|
return;
|
|
}
|
|
visiable.value = false;
|
|
emit("confirm", stuSelectRows.value, projectSelectRows.value);
|
|
closeDrawer();
|
|
};
|
|
|
|
onMounted(() => {
|
|
orgSelectKeys.value = [];
|
|
nameSearch.value.departId = "";
|
|
stuTreeExpandedKeys.value = [];
|
|
stuTreeSelectKeys.value = [];
|
|
|
|
nameSearch.value.keyword = "";
|
|
|
|
if (!visiable.value) {
|
|
stuTableRef.value && stuTableRef.value.clear();
|
|
stuTableRef.value && stuTableRef.value.reset({ keyword: "", departId: "" });
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.CommonStudent > .ant-drawer-content-wrapper {
|
|
min-width: 1200px !important;
|
|
width: 1200px !important;
|
|
}
|
|
.drawer-content {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
margin-left: 24px;
|
|
}
|
|
.CommonStudent {
|
|
.ant-form-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.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;
|
|
font-weight: 400;
|
|
color: #4f5156;
|
|
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;
|
|
align-items: center;
|
|
margin-right: 40px;
|
|
flex-wrap: wrap;
|
|
|
|
width: 100%;
|
|
|
|
.onleft {
|
|
display: flex;
|
|
text-align: center;
|
|
|
|
.already {
|
|
color: rgba(51, 51, 51, 1);
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin-left: 32px;
|
|
white-space: nowrap;
|
|
// margin-bottom: 20px;
|
|
}
|
|
|
|
.count {
|
|
color: #4ea6ff;
|
|
font-size: 16px;
|
|
margin: 0 6px;
|
|
}
|
|
|
|
.peo {
|
|
color: rgba(51, 51, 51, 1);
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.clbox {
|
|
margin-right: 50px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
width: 104px;
|
|
height: 32px;
|
|
border-radius: 4px;
|
|
background: #4ea6ff;
|
|
|
|
.colose {
|
|
width: 16px;
|
|
height: 16px;
|
|
// border-radius: 8px;
|
|
// background: #ffffff;
|
|
// position: relative;
|
|
background-image: url(../../assets/images/basicinfo/ch.png);
|
|
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;
|
|
margin-top: 25px;
|
|
margin-right: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(56, 139, 225, 1);
|
|
color: rgba(56, 139, 225, 1);
|
|
font-size: 12px;
|
|
position: relative;
|
|
|
|
.ch {
|
|
position: absolute;
|
|
width: 18px;
|
|
height: 18px;
|
|
background-image: url(../../assets/images/basicinfo/ch.png);
|
|
right: -8px;
|
|
top: -8px;
|
|
}
|
|
}
|
|
|
|
.ifsw {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: center;
|
|
color: #4ea6ff;
|
|
}
|
|
|
|
.sw {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: justify;
|
|
color: #4ea6ff;
|
|
margin-top: 23px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.dept {
|
|
width: 100%;
|
|
margin-top: 30px;
|
|
border-top: 1px solid #f2f6fe;
|
|
}
|
|
|
|
.chose1 {
|
|
//width: 90px;
|
|
height: 24px;
|
|
margin-top: 25px;
|
|
margin-right: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(56, 139, 225, 1);
|
|
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;
|
|
height: 18px;
|
|
background-image: url(../../assets/images/basicinfo/ch.png);
|
|
right: -8px;
|
|
top: -8px;
|
|
}
|
|
}
|
|
|
|
.chose2 {
|
|
//width: 120px;
|
|
height: 24px;
|
|
margin-top: 25px;
|
|
margin-right: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(56, 139, 225, 1);
|
|
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;
|
|
height: 18px;
|
|
background-image: url(../../assets/images/basicinfo/ch.png);
|
|
right: -8px;
|
|
top: -8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btnn {
|
|
height: 72px;
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
|
|
background-color: #ffffff;
|
|
|
|
.btn1 {
|
|
width: 100px;
|
|
height: 40px;
|
|
border: 1px solid #4ea6ff;
|
|
border-radius: 8px;
|
|
color: #4ea6ff;
|
|
background-color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn2 {
|
|
cursor: pointer;
|
|
width: 100px;
|
|
height: 40px;
|
|
background: #4ea6ff;
|
|
border-radius: 8px;
|
|
border: 0;
|
|
margin-left: 15px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|