tenant-Platform/src/views/quoteConfig/agreement/components/managerModal.vue

<!-- 模板区域 -->
<template>
  <div>
    <el-dialog :close-on-click-modal="false" v-model="props.managerModal" title="选择管理人" width="40%"  @close="cancel">
      <div class="flex a-c">
        <el-input v-model="searchValue" style="width: 240px;margin-right: 10px;" clearable placeholder="输入姓名，手机号，工号查找" />
        <el-button type="primary" @click='searchValueclick'>查询</el-button>
      </div>
      <div class="deptlist flex ">
        <div class="area" style="border-right: 1px solid #dcdfe6;" v-show="!searchValueShow">
          <el-tree style="max-width: 600px;" :data="props.deptOptions" :props="parentIdprops" :highlight-current="true"
            @node-click="handleNodeClick" />
        </div>
        <div class="area">
          <el-radio-group v-model="userId">
            <div class="flex f-c">
              <el-radio :value="item.userId" v-for="(item,index) in managerlist" @change="radioChange" :key="index" class="m-btn-20">
                <div>{{ item.name }}</div>
                <div>{{ item.userId }}</div>
              </el-radio>
            </div>
          </el-radio-group>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="cancel">取消</el-button>
          <el-button type="primary" @click="save">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<!-- 行为区域 -->
<script lang='ts' setup>
import api from '@/api';
import { ref, reactive } from 'vue'
import { defineProps, defineEmits } from "vue";

interface Tree {
  id: string
  children?: Tree[]
}
interface managerlist{
  id:string,
  userId:string,
  name:string,
  deptName:string,
}
const props = defineProps<{
  managerModal: boolean,
  deptOptions: string[]
  managerlist: managerlist[],
}>();
const parentIdprops = {
  expandTrigger: 'hover' as const,
  value: 'id',
  label: 'name',
  checkStrictly: true,
}
const emits = defineEmits(["cancel", 'save', 'DrawerOpen', 'query', 'NodeClick','radioChange']);
const userId = ref()
const username = ref()
const deptName=ref();
const searchValue=ref();
const searchValueShow=ref(false);
watch(searchValue,()=>{
  if(!searchValue.value){
  searchValueShow.value=false;
  }
})
const handleNodeClick = (data: Tree) => {
  emits('NodeClick', data.id)
}
const cancel = () => {
  emits('cancel')
}
const save = () => {
  emits('save',userId.value,username.value,deptName.value)
}

const searchValueclick=()=>{
  searchValueShow.value=true;
  emits('query',searchValue.value)
}
const radioChange=(value:any)=>{
  let name=props.managerlist.find(val=>val.userId==value)?.name;
  let deptname=props.managerlist.find(val=>val.userId==value)?.deptName;
  username.value=name;
  deptName.value=deptname;
}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
.deptlist {
  height: 400px;
  margin-top: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;

  .area {
    flex: 1;
    height: 100%;
    padding: 10px;
    overflow: auto;
  }
}
</style>