|
|
@@ -1,73 +1,49 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-dialog
|
|
|
- v-model="props.dialogVisible"
|
|
|
- :title="props.title"
|
|
|
- width="1000"
|
|
|
- append-to-body
|
|
|
- draggable
|
|
|
- :before-close="handleClose"
|
|
|
- >
|
|
|
- <el-select
|
|
|
- v-model="userId"
|
|
|
- filterable
|
|
|
- remote
|
|
|
- reserve-keyword
|
|
|
- placeholder="输入姓名,手机号,工号查找"
|
|
|
- :remote-method="remoteMethod"
|
|
|
- :loading="loading"
|
|
|
- style="width: 240px"
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="`${item.label}-${item.mobile}`"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
+ <el-dialog v-model="visible" :title="props.title" top="10vh" draggable :show-close="false">
|
|
|
+ <el-form label-position="left" label-width="auto">
|
|
|
+ <el-row :gutter="24">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-input v-model="searchName" class="search-input1" placeholder="请输入负责人姓名,工号,手机号查找"
|
|
|
+ :prefix-icon="Search" clearable @input="searchinput">
|
|
|
+ <template #append>
|
|
|
+ <el-button text type="primary" class="" @click="searchUser">搜索</el-button>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
<div class="dialog-mian">
|
|
|
- <div v-show="userId == '' || userId == null">
|
|
|
- <el-tree
|
|
|
- ref="treeRef"
|
|
|
- style="max-width: 600px"
|
|
|
- class="filter-tree"
|
|
|
- :data="deptList"
|
|
|
- :props="defaultProps"
|
|
|
- :default-expand-all="true"
|
|
|
- :expand-on-click-node="false"
|
|
|
- @node-click="treeClick"
|
|
|
- node-key="id"
|
|
|
- highlight-current
|
|
|
- >
|
|
|
- </el-tree>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-radio-group v-model="userId" v-show="userId">
|
|
|
+ <div v-if="searchName && userList1.length > 1">
|
|
|
+ <el-radio-group v-model="treeReId" >
|
|
|
<div style="display: flex; flex-direction: column">
|
|
|
- <el-radio
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :value="item.value"
|
|
|
- style="margin-bottom: 15px"
|
|
|
- >
|
|
|
- <p style="margin: 0">{{ item.label }}</p>
|
|
|
- <p style="margin: 0">{{ item.value }}</p>
|
|
|
+ <el-radio class="mb-[12px] flex a-start" v-for="item in userList1" :key="item.userId" :value="item.userId">
|
|
|
+ <div>
|
|
|
+ <span style="margin: 0;line-height: 1;color: #333 !important;">{{ item.name }}</span>
|
|
|
+ <span style="line-height: 1;color: #333 !important;" class="ml-[10px]">{{ item.mobile }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
</el-radio>
|
|
|
</div>
|
|
|
</el-radio-group>
|
|
|
-
|
|
|
- <el-radio-group v-model="treeReId" v-show="userList.length > 0 && !userId">
|
|
|
+ </div>
|
|
|
+ <div v-show=" userList1.length < 1">
|
|
|
+ <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="deptList" :props="defaultProps"
|
|
|
+ :default-expand-all="true" :expand-on-click-node="false" @node-click="treeClick"
|
|
|
+ :current-node-key="defaultSelectedId" node-key="id" highlight-current :check-on-click-node="true">
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ <div v-show=" userList1.length < 1">
|
|
|
+ <el-radio-group v-model="treeReId" v-show="userList.length > 0">
|
|
|
<div style="display: flex; flex-direction: column">
|
|
|
- <el-radio
|
|
|
- v-for="item in userList"
|
|
|
- :key="item.userId"
|
|
|
- :value="item.userId"
|
|
|
- style="margin-bottom: 15px"
|
|
|
- >
|
|
|
- <p style="margin: 0">{{ item.name }}</p>
|
|
|
- <p style="margin: 0">{{ item.mobile }}</p>
|
|
|
+ <el-radio class="mb-[12px] flex a-start" v-for="item in userList" :key="item.userId" :value="item.userId">
|
|
|
+ <div>
|
|
|
+ <span style="margin: 0;line-height: 1;color: #333 !important;">{{ item.name }}</span>
|
|
|
+ <span style="line-height: 1;color: #333 !important;" class="ml-[10px]">{{ item.mobile }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
</el-radio>
|
|
|
</div>
|
|
|
</el-radio-group>
|
|
|
@@ -75,7 +51,7 @@
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
- <el-button @click="handleClose ">取消</el-button>
|
|
|
+ <el-button @click="handleClose">取消</el-button>
|
|
|
<el-button type="primary" @click="submit">
|
|
|
确认
|
|
|
</el-button>
|
|
|
@@ -86,9 +62,12 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { defineProps, ref, onMounted, defineEmits,nextTick,watch } from "vue";
|
|
|
+import { defineProps, ref, onMounted, defineEmits, nextTick, watch } from "vue";
|
|
|
import api from "@/api";
|
|
|
-import { ElMessage,ElTree } from "element-plus";
|
|
|
+import { ElMessage, ElTree } from "element-plus";
|
|
|
+import { Search } from "@element-plus/icons-vue";
|
|
|
+
|
|
|
+import user from "@/mock/user";
|
|
|
type tableType = {
|
|
|
id: string;
|
|
|
name: string;
|
|
|
@@ -103,10 +82,27 @@ const props = defineProps<{
|
|
|
deptIds: Array<[]>;
|
|
|
deptList: Array<tableType>;
|
|
|
title: string;
|
|
|
- deptSelected: string;
|
|
|
+ deptSelected?: string;
|
|
|
typeAttr: string;
|
|
|
}>();
|
|
|
|
|
|
+const searchName = ref<string>("");
|
|
|
+// 本地响应式变量,用于控制对话框显示
|
|
|
+const visible = ref(props.dialogVisible);
|
|
|
+
|
|
|
+// 监听 props.dialogVisible 的变化,同步到本地变量
|
|
|
+watch(() => props.dialogVisible, (val) => {
|
|
|
+ console.log('val', val)
|
|
|
+ visible.value = val;
|
|
|
+});
|
|
|
+
|
|
|
+// 监听本地 visible 的变化,当弹窗关闭时通知父组件
|
|
|
+watch(visible, (val) => {
|
|
|
+ if (!val) {
|
|
|
+ emits('cancelDialog');
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
interface ListItem {
|
|
|
value: string;
|
|
|
label: string;
|
|
|
@@ -119,146 +115,127 @@ const treeRef = ref<InstanceType<typeof ElTree>>();
|
|
|
// treeRef.value!.setCurrentKey(props.deptIds[0]);
|
|
|
// }
|
|
|
// })
|
|
|
-watch(props, (val) => {
|
|
|
- nextTick(()=>{
|
|
|
- if(props.dialogVisible)
|
|
|
- if(props.deptIds.length<2){
|
|
|
- treeRef.value?.setCurrentKey(props?.deptIds[0]);
|
|
|
- treeClick({id:props.deptIds[0]})
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- // if(val.dialogVisible){
|
|
|
-
|
|
|
-
|
|
|
- // }
|
|
|
-
|
|
|
-
|
|
|
+watch(() => props.dialogVisible, (val) => {
|
|
|
+ if (val) {
|
|
|
+ nextTick(() => {
|
|
|
+ if (props.deptIds.length < 2) {
|
|
|
+ treeRef.value?.setCurrentKey(props?.deptIds[0]);
|
|
|
+ treeClick({ id: props.deptIds[0] });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
const list = ref<ListItem[]>([]);
|
|
|
const options = ref<ListItem[]>([]);
|
|
|
const userId = ref<string>("");
|
|
|
const loading = ref(false);
|
|
|
-const treeReId=ref<string>(props.deptSelected);
|
|
|
+const treeReId = ref<string>('');
|
|
|
+ const defaultSelectedId = ref('');//默认选中的部门id
|
|
|
|
|
|
-const emits=defineEmits(["closeDialog",'cancelDialog']);
|
|
|
+const emits = defineEmits(["closeDialog", 'cancelDialog']);
|
|
|
|
|
|
|
|
|
const userList = ref<any[]>([]);
|
|
|
-const remoteMethod = (query: string) => {
|
|
|
- if (query) {
|
|
|
- loading.value = true;
|
|
|
- api.userApi
|
|
|
- .AllMemberList({
|
|
|
- name: query,
|
|
|
- typeAttr:props.typeAttr
|
|
|
- })
|
|
|
- .then((res: any) => {
|
|
|
-
|
|
|
- if (res.code === 200) {
|
|
|
- // userList.value = res.data;
|
|
|
- let arr: any = [];
|
|
|
- console.log('res.data是啥', res.data)
|
|
|
- res.data.forEach((item) => {
|
|
|
- arr.push({
|
|
|
- label: item.name,
|
|
|
- value: item.id,
|
|
|
- mobile: item.mobile,
|
|
|
- userOd: item.userId
|
|
|
- });
|
|
|
- });
|
|
|
- loading.value = false;
|
|
|
- options.value = arr;
|
|
|
- }
|
|
|
- });
|
|
|
- // setTimeout(() => {
|
|
|
- // loading.value = false
|
|
|
- // options.value = list.value.filter((item) => {
|
|
|
- // return item.label.toLowerCase().includes(query.toLowerCase())
|
|
|
- // })
|
|
|
- // }, 200)
|
|
|
- } else {
|
|
|
- options.value = [];
|
|
|
+const userList1 = ref<any[]>([]);
|
|
|
+const searchinput = () => {
|
|
|
+ if (!searchName.value) {
|
|
|
+ userList1.value = [];
|
|
|
}
|
|
|
+}
|
|
|
+//搜索用户
|
|
|
+const searchUser = () => {
|
|
|
+ api.userApi
|
|
|
+ .AllMemberList({
|
|
|
+ name: searchName.value,
|
|
|
+ typeAttr: props.typeAttr
|
|
|
+ })
|
|
|
+ .then((res: any) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ // 如果搜索结果只有一个用户,直接选中该用户 ,并默认选中该用户的部门
|
|
|
+ if (res.data.length == 1) {
|
|
|
+ userList.value = res.data;
|
|
|
+ treeReId.value = res.data[0].userId
|
|
|
+ defaultSelectedId.value = res.data[0].deptId
|
|
|
+ } else {
|
|
|
+ userList1.value = res.data;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
};
|
|
|
function treeClick(node: any) {
|
|
|
api.userApi
|
|
|
.AllMemberList({
|
|
|
deptId: node.id,
|
|
|
- typeAttr:props.typeAttr
|
|
|
+ typeAttr: props.typeAttr
|
|
|
})
|
|
|
.then((res: any) => {
|
|
|
if (res.code === 200) {
|
|
|
userList.value = res.data;
|
|
|
-
|
|
|
- // options.value=arr
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
-function submit(){
|
|
|
+function submit() {
|
|
|
|
|
|
- if(props.title=='设置负责人'){
|
|
|
- console.log(111)
|
|
|
- if(userId.value){
|
|
|
- console.log(222)
|
|
|
- const obj = options.value.find(a => a.value === userId.value)
|
|
|
+ if (props.title == '设置负责人') {
|
|
|
+ console.log(111)
|
|
|
+ if (userId.value) {
|
|
|
+ console.log(222)
|
|
|
+ const obj = options.value.find(a => a.value === userId.value)
|
|
|
api.institutionApi.setDeptLeader({
|
|
|
- deptId:props.deptIds,
|
|
|
- leaderId:obj.userId
|
|
|
- }).then(res=>{
|
|
|
+ deptId: props.deptIds,
|
|
|
+ leaderId: obj.userId
|
|
|
+ }).then(res => {
|
|
|
|
|
|
- if(res.code==200){
|
|
|
+ if (res.code == 200) {
|
|
|
ElMessage.success(res.msg)
|
|
|
emits('closeDialog')
|
|
|
} else {
|
|
|
- ElMessage.warning(res.msg)
|
|
|
+ ElMessage.warning(res.msg)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
|
|
|
- }else{
|
|
|
- console.log(333)
|
|
|
- // let flag={}
|
|
|
- // userList.value.some((item:any)=>{
|
|
|
- //
|
|
|
- // if( item.mobile==treeReId.value){
|
|
|
- // flag={...item}
|
|
|
- // return true
|
|
|
- // }
|
|
|
- // return false
|
|
|
- //
|
|
|
- // })
|
|
|
+ } else {
|
|
|
+ console.log(333)
|
|
|
+ // let flag={}
|
|
|
+ // userList.value.some((item:any)=>{
|
|
|
+ //
|
|
|
+ // if( item.mobile==treeReId.value){
|
|
|
+ // flag={...item}
|
|
|
+ // return true
|
|
|
+ // }
|
|
|
+ // return false
|
|
|
+ //
|
|
|
+ // })
|
|
|
let flag = userList.value.find(a => a.userId == treeReId.value)
|
|
|
api.institutionApi.setDeptLeader({
|
|
|
- deptId:props.deptIds,
|
|
|
- leaderId:flag.userId
|
|
|
- }).then(res=>{
|
|
|
- if(res.code==200){
|
|
|
+ deptId: props.deptIds,
|
|
|
+ leaderId: flag.userId
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
ElMessage.success(res.msg)
|
|
|
emits('closeDialog')
|
|
|
}
|
|
|
})
|
|
|
// emits('closeDialog',flag)
|
|
|
}
|
|
|
- }else{
|
|
|
- console.log(444)
|
|
|
- if(userId.value){
|
|
|
- console.log(555)
|
|
|
- const obj=options.value.map((item:any)=>{
|
|
|
- if(item.value==userId.value){
|
|
|
+ } else {
|
|
|
+ if (userId.value) {
|
|
|
+ const obj = options.value.map((item: any) => {
|
|
|
+ if (item.value == userId.value) {
|
|
|
return {
|
|
|
- name:item.label,
|
|
|
- id:item.value,
|
|
|
- mobile:item.mobile
|
|
|
+ name: item.label,
|
|
|
+ id: item.value,
|
|
|
+ mobile: item.mobile
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
- emits('closeDialog',obj[0])
|
|
|
- }else{
|
|
|
- console.log(666)
|
|
|
+ emits('closeDialog', obj[0])
|
|
|
+ } else {
|
|
|
+ console.log(666)
|
|
|
// let flag={}
|
|
|
// userList.value.some((item:any)=>{
|
|
|
//
|
|
|
@@ -269,41 +246,87 @@ function submit(){
|
|
|
// return false
|
|
|
//
|
|
|
// })
|
|
|
- let flag = userList.value.find(a => a.userId == treeReId.value)
|
|
|
- emits('closeDialog',flag)
|
|
|
+ let flag = userList.value.find(a => a.userId == treeReId.value)
|
|
|
+ emits('closeDialog', flag)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
-const handleClose = (done: () => void) => {
|
|
|
-
|
|
|
- emits('cancelDialog',false)
|
|
|
-
|
|
|
+const handleClose = () => {
|
|
|
+ // 通知父组件关闭对话框
|
|
|
+ emits('cancelDialog');
|
|
|
}
|
|
|
|
|
|
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+:deep(.el-radio-group .el-radio) {
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-form-item__content .el-input-group.search-input1) {
|
|
|
+ --el-border-color: #F7F7F7;
|
|
|
+ --el-input-hover-border-color: #F7F7F7;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-input-group--append>.el-input__wrapper) {
|
|
|
+ background-color: #F7F7F7;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.search-input1 .el-button__text--expand) {
|
|
|
+ color: #0083FF;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 1px;
|
|
|
+ height: 24px;
|
|
|
+ background: #EEEEEE;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
|
|
|
+ background-color: #F3F9FF;
|
|
|
+
|
|
|
+ /* 浅黄色背景 */
|
|
|
+ .el-text {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #0083FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon {}
|
|
|
+
|
|
|
+ /* 深蓝色字体 */
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-tree--highlight-current .el-tree-node>.el-tree-node__content .el-icon) {
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+
|
|
|
.dialog-mian {
|
|
|
display: flex;
|
|
|
- border: 1px solid #ccc;
|
|
|
border-radius: 10px;
|
|
|
min-height: 500px;
|
|
|
- margin-top: 20px;
|
|
|
- .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
|
|
- background-color: #f0f9eb; /* 浅黄色背景 */
|
|
|
- color: #1f569d; /* 深蓝色字体 */
|
|
|
- }
|
|
|
- > div {
|
|
|
- flex: 1;
|
|
|
- padding: 15px;
|
|
|
+ margin-top: 24px;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ >div {
|
|
|
+ width: 50%;
|
|
|
box-sizing: border-box;
|
|
|
max-height: 500px;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
- > div:last-child {
|
|
|
+
|
|
|
+ >div:last-child {
|
|
|
+ padding: 0 32px;
|
|
|
border-left: 1px solid #ccc;
|
|
|
}
|
|
|
}
|