tenant-Platform/src/components/DialogSetDeptLeader/index.vue

<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>
      <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 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>
            </div>
          </el-radio-group>

          <el-radio-group v-model="treeReId" v-show="userList.length > 0 && !userId">
            <div style="display: flex; flex-direction: column">
              <el-radio
                v-for="item in userList"
                :key="item.id"
                :value="item.id"
                style="margin-bottom: 15px"
              >
                <p style="margin: 0">{{ item.name }}</p>
                <p style="margin: 0">{{ item.id }}</p>
              </el-radio>
            </div>
          </el-radio-group>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose ">取消</el-button>
          <el-button type="primary" @click="submit">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, onMounted, defineEmits,nextTick,watch } from "vue";
import api from "@/api";
import { ElMessage,ElTree } from "element-plus";
type tableType = {
  id: string;
  name: string;
};

const defaultProps = {
  children: "children",
  label: "name",
};
const props = defineProps<{
  dialogVisible: boolean;
  deptIds: Array<[]>;
  deptList: Array<tableType>;
  title: string;
}>();

interface ListItem {
  value: string;
  label: string;
}
const treeRef = ref<InstanceType<typeof ElTree>>();
// onMounted(async ()=>{
//   await nextTick()
//   console.log(treeRef.value)
//   if(props.deptIds.length<2){
//       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){


  // }


});

const list = ref<ListItem[]>([]);
const options = ref<ListItem[]>([]);
const userId = ref<string>("");
const loading = ref(false);
const treeReId=ref<string>("");

const emits=defineEmits(["closeDialog",'cancelDialog']);


const userList = ref<any[]>([]);
const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true;
    api.userApi
      .AllMemberList({
        name: query,
      })
      .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 = [];
  }
};
function treeClick(node: any) {
  api.userApi
    .AllMemberList({
      deptId: node.id,
    })
    .then((res: any) => {
      if (res.code === 200) {
        userList.value = res.data;

        // options.value=arr
      }
    });
}

function submit(){

  if(props.title=='设置负责人'){
    if(userId.value){
     const obj = options.value.find(a => a.value === userId.value)
      api.institutionApi.setDeptLeader({
        deptId:props.deptIds,
        leaderId:obj.userId
      }).then(res=>{

        if(res.code==200){
          ElMessage.success(res.msg)
          emits('closeDialog')
        } else {
            ElMessage.warning(res.msg)
        }
      })


    }else{
      let flag={}
     userList.value.some((item:any)=>{

         if( item.id==treeReId.value){
          flag={...item}
          return true
         }
         return false

      })

      api.institutionApi.setDeptLeader({
        deptId:props.deptIds,
        leaderId:flag.userId
      }).then(res=>{
        if(res.code==200){
          ElMessage.success(res.msg)
          emits('closeDialog')
        }
      })
      // emits('closeDialog',flag)
    }
  }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
          }
        }
      })

      emits('closeDialog',obj[0])
    }else{
      let flag={}
      userList.value.some((item:any)=>{

         if( item.id==treeReId.value){
          flag={...item}
          return true
         }
         return false

      })
      emits('closeDialog',flag)
    }
  }


}

const handleClose = (done: () => void) => {

  emits('cancelDialog',false)

}


</script>
<style lang="scss" scoped>
.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;
    box-sizing: border-box;
    max-height: 500px;
    overflow-y: auto;
  }
  > div:last-child {
    border-left: 1px solid #ccc;
  }
}
</style>