366 lines
15 KiB
Vue
366 lines
15 KiB
Vue
<template>
|
|
<div class="edit-popup">
|
|
<el-dialog v-model="dialogVisible" title="人员选择器" width="600px" :before-close="handleClose">
|
|
<div>
|
|
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
|
|
<el-radio-button :label="1">全部人员</el-radio-button>
|
|
<el-radio-button :label="2">按部门筛选</el-radio-button>
|
|
<el-radio-button :label="3">按岗位筛选</el-radio-button>
|
|
<el-button class="ml-[200px]" v-show="isCollapse != 1 && (!isshow || !isshow1)"
|
|
@click="(isshow = true), (isshow1 = true)">返回</el-button>
|
|
</el-radio-group>
|
|
<div v-if="type == 1">
|
|
<div v-if="isCollapse == 1" style="margin-bottom: 20px">
|
|
<div style="margin-top: 20px">
|
|
<el-radio-group v-model="radionum">
|
|
<el-radio :label="item" v-for="(item, i) in uesrlist" :key="i" style="margin-bottom: 40px;">
|
|
<div class="radio-con">
|
|
<div class="radioa">
|
|
<img :src="item.avatar" alt="" />
|
|
</div>
|
|
<div class="radiob">
|
|
<div class="radiob_a">{{ item.name }}</div>
|
|
<div class="radiob_b">
|
|
<text v-if="item.org_name.length > 0">{{ item.org_name }}</text>
|
|
<text v-if="item.dept_name.length > 0">/{{ item.dept_name }}</text>
|
|
<text v-if="item.job_name.length > 0">/{{ item.job_name }}</text>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-radio><br />
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
<div v-if="isCollapse == 2">
|
|
<!-- 返回上一级别 -->
|
|
<div v-if="isshow">
|
|
<div class="lad" v-for="(item, i) in deparmetlist" :key="i">
|
|
<div class="lad">{{ i }}</div>
|
|
<div class="flex " v-for="(items, k) in item" style="justify-content: space-between;"
|
|
@click="deparmetclck(items)">
|
|
<div>{{ items.name }}</div>
|
|
<div class="Collapsebj">{{ items.admin_num }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<el-radio-group v-model="radionum">
|
|
<el-radio :label="item" v-for="(item, i) in deparmetlist1" :key="i"
|
|
style="margin-bottom: 20px;">
|
|
<div class="radio-con">
|
|
<div class="radioa">
|
|
<img :src="item.avatar" alt="" />
|
|
</div>
|
|
<div class="radiob">
|
|
<div class="radiob_a">{{ item.name }}</div>
|
|
<div class="radiob_b">
|
|
<text v-if="item.org_name.length > 0">{{ item.org_name }}</text>
|
|
<text v-if="item.dept_name.length > 0">/{{ item.dept_name }}</text>
|
|
<text v-if="item.job_name.length > 0">/{{ item.job_name }}</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-radio><br />
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
<div v-if="isCollapse == 3">
|
|
<div class="lad " v-if="isshow1">
|
|
<div class="flex " v-for="(item, j) in jobslist" :key="j"
|
|
style="justify-content: space-between;" @click="gwclck(item)">
|
|
<div>{{ item.name }}</div>
|
|
<div class="Collapsebj">{{ item.admin_num }}</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<el-radio-group v-model="radionum">
|
|
<el-radio :label="item" v-for="(item, i) in jobslist1" :key="i"
|
|
style="margin-bottom: 20px;">
|
|
<div class="radio-con">
|
|
<div class="radioa">
|
|
<img :src="item.avatar" alt="" />
|
|
</div>
|
|
<div class="radiob">
|
|
<div class="radiob_a">{{ item.name }}</div>
|
|
<div class="radiob_b">
|
|
<text v-if="item.org_name.length > 0">{{ item.org_name }}</text>
|
|
<text v-if="item.dept_name.length > 0">/{{ item.dept_name }}</text>
|
|
<text v-if="item.job_name.length > 0">/{{ item.job_name }}</text>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-radio><br />
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-else>
|
|
<div v-if="isCollapse == 1" style="margin-bottom: 20px">
|
|
<div style="margin-top: 20px">
|
|
<el-checkbox-group v-model="radiolist">
|
|
<el-checkbox :label="item" v-for="(item, i) in uesrlist" :key="i"
|
|
style="margin-bottom: 20px;">
|
|
<div class="radio-con">
|
|
<div class="radioa">
|
|
<img :src="item.avatar" alt="" />
|
|
</div>
|
|
<div class="radiob">
|
|
<div class="radiob_a">{{ item.name }}</div>
|
|
<div class="radiob_b">
|
|
<text v-if="item.org_name.length > 0">{{ item.org_name }}</text>
|
|
<text v-if="item.dept_name.length > 0">/{{ item.dept_name }}</text>
|
|
<text v-if="item.job_name.length > 0">/{{ item.job_name }}</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-checkbox><br />
|
|
</el-checkbox-group>
|
|
</div>
|
|
</div>
|
|
<div v-if="isCollapse == 2">
|
|
<div v-if="isshow">
|
|
<div class="lad" v-for="(item, i) in deparmetlist" :key="i">
|
|
<div class="lad">{{ i }}</div>
|
|
<div class="flex " v-for="(items, k) in item" style="justify-content: space-between;"
|
|
@click="deparmetclck(items)">
|
|
<div>{{ items.name }}</div>
|
|
<div class="Collapsebj">{{ items.admin_num }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<el-checkbox-group v-model="radiolist">
|
|
<el-checkbox :label="item" v-for="(item, i) in deparmetlist1" :key="i"
|
|
style="margin-bottom: 20px;">
|
|
<div class="radio-con">
|
|
<div class="radioa">
|
|
<img :src="item.avatar" alt="" />
|
|
</div>
|
|
<div class="radiob">
|
|
<div class="radiob_a">{{ item.name }}</div>
|
|
<div class="radiob_b">
|
|
<text v-if="item.org_name.length > 0">{{ item.org_name }}</text>
|
|
<text v-if="item.dept_name.length > 0">/{{ item.dept_name }}</text>
|
|
<text v-if="item.job_name.length > 0">/{{ item.job_name }}</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-checkbox><br />
|
|
</el-checkbox-group>
|
|
</div>
|
|
</div>
|
|
<div v-if="isCollapse == 3">
|
|
<div class="lad " v-if="isshow1">
|
|
<div class="flex " v-for="(item, j) in jobslist" :key="j"
|
|
style="justify-content: space-between;" @click="gwclck(item)">
|
|
<div>{{ item.name }}</div>
|
|
<div class="Collapsebj">{{ item.admin_num }}</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<el-checkbox-group v-model="radiolist">
|
|
<el-checkbox :label="item" v-for="(item, i) in jobslist1" :key="i"
|
|
style="margin-bottom: 20px;">
|
|
<div class="radio-con">
|
|
<div class="radioa">
|
|
<img :src="item.avatar" alt="" />
|
|
</div>
|
|
<div class="radiob">
|
|
<div class="radiob_a">{{ item.name }}</div>
|
|
<div class="radiob_b">
|
|
<text v-if="item.org_name.length > 0">{{ item.org_name }}</text>
|
|
<text v-if="item.dept_name.length > 0">/{{ item.dept_name }}</text>
|
|
<text v-if="item.job_name.length > 0">/{{ item.job_name }}</text>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-checkbox><br />
|
|
</el-checkbox-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="userclick" v-if="type == 1">确认</el-button>
|
|
<el-button type="primary" @click="userclick" v-else> {{ radiolist.length > 0 ? '已选' : '未选' }}
|
|
<text v-if="radiolist.length > 0">{{ radiolist.length }}</text></el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="projectPreSalesMembersEdit">
|
|
import { reactive } from 'vue'
|
|
import { getAdminsByAll, getAllDept, getAllJobs, getAdminsByDept, getAdminsByJob } from '@/api/common'
|
|
import { defineEmits } from "vue"
|
|
const leixin = ref('0')
|
|
const props = defineProps({
|
|
type: {
|
|
type: String || Number,//1:单选 2.多选
|
|
default: () => ({})
|
|
}
|
|
})
|
|
const emits = defineEmits(['confirm'])
|
|
|
|
const dialogVisible = ref(false)
|
|
const isCollapse = ref(1);
|
|
const uesrlist = reactive([])
|
|
const deparmetlist = reactive({})
|
|
const deparmetlist1 = reactive([])
|
|
const jobslist = reactive({})
|
|
const jobslist1 = reactive([])
|
|
const isshow = ref(true);
|
|
const isshow1 = ref(true);
|
|
const radiolist = ref([])
|
|
const radionum = ref([])
|
|
|
|
// 获取全部人员
|
|
const getlist = () => {
|
|
getAdminsByAll().then((res) => {
|
|
Object.assign(uesrlist, res)
|
|
})
|
|
}
|
|
|
|
//获取所有部门
|
|
const deparmet = () => {
|
|
getAllDept().then((res) => {
|
|
Object.assign(deparmetlist, res)
|
|
})
|
|
}
|
|
//获取部门下的人员
|
|
const deparmetclck = (item: { id: any }) => {
|
|
getAdminsByDept({ 'dept_id': item.id }).then((res) => {
|
|
if (res.length > 0) {
|
|
Object.assign(deparmetlist1, res)
|
|
isshow.value = false
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
//获取岗位
|
|
|
|
const Jobs = () => {
|
|
getAllJobs().then((res) => {
|
|
Object.assign(jobslist, res)
|
|
})
|
|
}
|
|
|
|
//获取岗位下的人员
|
|
const gwclck = (item: { id: any }) => {
|
|
|
|
getAdminsByJob({ 'job_id': item.id }).then((res) => {
|
|
if (res.length > 0) {
|
|
Object.assign(jobslist1, res)
|
|
isshow1.value = false
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
|
|
//打开弹窗
|
|
const open = (e: any) => {
|
|
getlist()
|
|
deparmet()
|
|
Jobs()
|
|
leixin.value = e
|
|
dialogVisible.value = true
|
|
|
|
}
|
|
//获取选择的数据
|
|
const userclick = () => {
|
|
dialogVisible.value = false
|
|
if (props.type == 1) {
|
|
emits("confirm", radionum.value);
|
|
} else {
|
|
emits("confirm", radiolist.value);
|
|
}
|
|
|
|
}
|
|
|
|
defineExpose({
|
|
open,
|
|
userclick
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.userlist {
|
|
display: flex;
|
|
|
|
img {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
text-align: center;
|
|
|
|
.userlist-con {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.user {
|
|
img {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.radio-con {
|
|
display: flex;
|
|
width: 500px;
|
|
align-items: center;
|
|
|
|
.radioa {
|
|
img {
|
|
margin-right: 20px;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.radiob {
|
|
.radiob_a {
|
|
margin-bottom: 10px;
|
|
margin-top: 3px;
|
|
|
|
}
|
|
|
|
.radiob_b {}
|
|
|
|
}
|
|
}
|
|
|
|
.lad {
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #f7f7f7;
|
|
|
|
div {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.Collapsebj {
|
|
background-color: #3e8ef7;
|
|
height: 20px;
|
|
width: 20px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
color: #f7f7f7;
|
|
|
|
}
|
|
}
|
|
</style> |