hrp-ui-base 1.4.7 → 1.4.8

package/packages/approval-process/packages/flow/systemCom/choose-member-phone.vue

@@ -1,515 +1,515 @@
-<!-- 选择人员-手机端 - 多选 - 单选 -->
-<template>
-  <el-icon class="iconBoxForSubmitAdd" @click="changePopShow(true)" v-if="props.submitAdd">
-    <Plus />
-  </el-icon>
-  <div @click="changePopShow(true)" class="triggerArea flexRowStart" :style="props.submitAdd ? { padding: 0 } : {}"
-    v-if="!props.submitAdd">
-    <div class="triggerItem" v-for="(item, index) in checkedMember" :key="index"
-      v-if="checkedMember && checkedMember.length > 0 && !props.abbreviate && !props.submitAdd">
-      {{ item.userName }}
-    </div>
-    <div v-else-if="checkedMember && checkedMember.length > 0 && props.abbreviate && !props.submitAdd"
-      class="abbreviateItem flexRowCenter">
-      {{ `已选择（${checkedMember.length}）` }}<el-icon style="font-size:16px;">
-        <UserFilled />
-      </el-icon>
-    </div>
-
-    <div v-else>请选择人员</div>
-  </div>
-  <van-popup v-model:show="popupShow" closeable position="bottom"
-    :style="{ height: '70%', 'z-index': '8888', position: 'fixed', bottom: props.posBottom || props.posBottom == 0 ? props.posBottom + 'px' : '50px', left: 0, right: 0 }">
-    <div class="popupBox flexColumnStart">
-      <div class="popupBoxHeader">选择成员：</div>
-      <div class="popupBoxContent">
-        <div class="popCheckedItemBox">
-          当前已选：
-          <div class="flexRowStartCenter" style="flex-wrap: wrap;">
-            <div class="chooseItem flexRowStartCenter" v-for="(item, index) in checkedMember" :key="item.userId">
-              <img :src="item.avatar" alt="" v-if="item.avatar">
-              <img src="hrp-ui-base/assets/process/defaultAvatar.png" alt="" v-if="!item.avatar">
-              <div class="chooseItemName">{{ item.userName }}</div>
-              <el-icon class="chooseItemIcon" @click="deleteCheckedItem(index)">
-                <Close />
-              </el-icon>
-            </div>
-          </div>
-        </div>
-        <div class="companyNameBox flexRowStart">
-          <span v-for="(nameItem, nameIndex) in namebox" :key="nameIndex" class="companyNameBoxName"
-            @click="goPointLevel(nameItem, nameIndex)">
-            {{ nameItem.name }}
-            <span v-if="nameIndex != namebox.length - 1" class="companyNameBoxSymbol">
-              /
-            </span>
-          </span>
-        </div>
-        <div class="popMemberList">
-          <el-checkbox-group v-model="checkedMember" @change="handleCheckedMemberChange" size="default"
-            class="flexColumnStart optionbox" v-if="multiple">
-            <div class="flexRowBetween" style="width:100%" v-for="(item, index) in departs" :key="item.deptId">
-              <el-checkbox :label="item" size="default" style="margin-bottom: 8px;font-size:18px;width: 340px;min-height:24px;max-height: 24px;
-                        " disabled>
-                {{
-    item.deptName
-  }}
-              </el-checkbox>
-              <div style="width:100px;height:24px;font-size: 16px;line-height: 16px;cursor: pointer;"
-                class="flexRowStart" @click.stop="goNextLevel(item)">
-                <el-icon style="margin-right:4px;">
-                  <Expand />
-                </el-icon>{{ '下级' }}
-              </div>
-            </div>
-            <div class="flexRowBetween" style="width:100%" v-for="(item, index) in members" :key="item.userId">
-              <el-checkbox :label="item" size="default" style="margin-bottom: 8px;font-size:18px;width: 340px;min-height:24px;max-height: 24px;
-                        ">
-                {{
-    item.userName
-  }}
-              </el-checkbox>
-            </div>
-          </el-checkbox-group>
-          <el-radio-group v-model="radioMemeber" @change="handleRadioMemberChange" size="default"
-            class="flexColumnStart optionbox" v-if="!multiple">
-            <div class="flexRowBetween" style="width:100%" v-for="(item, index) in departs" :key="item.deptId">
-              <el-radio :label="item" size="default"
-                style="margin-bottom: 8px;font-size:18px;width: 340px;min-height:24px;max-height: 24px;" disabled>
-                {{
-    item.deptName
-  }}
-              </el-radio>
-              <div style="width:100px;height:24px;font-size: 16px;line-height: 16px;cursor: pointer;"
-                class="flexRowStart" @click.stop="goNextLevel(item)">
-                <el-icon style="margin-right:4px;">
-                  <Expand />
-                </el-icon>{{ '下级' }}
-              </div>
-            </div>
-            <div class="flexRowBetween" style="width:100%" v-for="(item, index) in members" :key="item.userId">
-              <el-radio :label="item" size="default"
-                style="margin-bottom: 8px;font-size:18px;width: 340px;min-height:24px;max-height: 24px;">
-                {{
-    item.userName
-  }}
-              </el-radio>
-            </div>
-          </el-radio-group>
-        </div>
-      </div>
-      <div class="popupButton flexRowCenter">
-        <van-button type="primary" style="margin-right:28px;width:30%" @click="saveDia">保存</van-button>
-        <van-button type="default" style="width:30%" @click="saveDia">关闭</van-button>
-      </div>
-    </div>
-  </van-popup>
-</template>
-<script lang="ts" setup>
-import { reactive, ref, onMounted, shallowRef, toRefs, watch ,PropType} from 'vue'
-import { Search, Watch } from '@element-plus/icons-vue'
-import DeptController from "hrp-ui-base/api/hrms/dept/deptController";
-import RoleController from "hrp-ui-base/api/hrms/role/roleController";
-import UserController from "hrp-ui-base/api/hrms/user/userController";
-
-import type { userBo, departBo, nameForSearchBo } from './BO/memberBo'
-const props = defineProps({
-  modelValue: {
-    type:Array as PropType<any>
-  },
-  // 选择了那些审批人 具体的人名
-  multiple: {
-    type: Boolean,
-    default: true,
-    require: false
-  },
-  // 选择了N位审批人 ，缩略图
-  abbreviate: {
-    type: Boolean,
-    default: false,
-    require: false
-  },
-  // 显示add - 审批提交时
-  submitAdd: {
-    type: Boolean,
-    default: false,
-    require: false
-  },
-  posBottom: {
-    type: Number,
-    require: false,
-    default: 50
-  },
-  // 数据来源范围  全公司 指定成员 指定角色
-  dataSources: {
-    type: String,
-    default: 'all',
-    require: false
-  },
-  // 数据来源范围具体的条件  全公司 指定成员 指定角色
-  dataSourcesCondition: {
-    type: Array<string>,
-    default: [],
-    require: false
-  }
-})
-const emits = defineEmits(['update:modelValue', 'changeCheckMemberId', 'changeButtonShow'])
-const { modelValue, multiple } = toRefs(props)
-const popupShow = ref(false)
-const changePopShow = (value: boolean) => {
-  popupShow.value = value
-  if (value) {
-    getList('1')
-  }
-}
-watch(() => { popupShow.value }, () => {
-  emits('changeButtonShow', !popupShow.value)
-}, { deep: true })
-watch(() => multiple.value, () => {
-  console.warn('多选改变了')
-})
-
-onMounted(() => {
-  console.log(props)
-  setTimeout(() => {
-    checkedMember.value = modelValue && modelValue.value ? modelValue.value : []
-    if (!multiple.value) {
-      console.log(checkedMember.value)
-      checkedMemberForRadio.value = checkedMember.value[0]
-    }
-  }, 500)
-  // getList('1')
-})
-/** 复制出的数据 */
-const copyMembers  = ref<userBo[]>([])
-const getList = async (id: string) => {
-  if (props.dataSources == 'user') {
-    let userIds = <any>[]
-    if (props.dataSourcesCondition && props.dataSourcesCondition.length > 0) {
-      userIds = props.dataSourcesCondition
-    }
-    await UserController.getLivingUserListByIds(userIds).then((data) => {
-      console.log(data)
-
-      if (data.res) {
-        let arr = <any>[]
-        if (data.res.length > 0) {
-          data.res.forEach((item) => {
-            arr.push({ ...item, id: item.userId })
-          })
-        }
-        members.value = arr
-        copyMembers.value = JSON.parse(JSON.stringify(arr))
-      }
-      // if (data.res && data.res.deptVoList) {
-      //     departs.value = data.res?.deptVoList
-      // }
-      // checkAll.value = false
-    })
-  } else if (props.dataSources == 'role') {
-    let roleIds = <any>[]
-    if (props.dataSourcesCondition && props.dataSourcesCondition.length > 0) {
-      roleIds = props.dataSourcesCondition
-    }
-    await UserController.getUserListByRoleIds(roleIds).then((data) => {
-      console.log(data)
-      if (data.res) {
-        let arr = <any>[]
-        if (data.res.length > 0) {
-          data.res.forEach((item) => {
-            arr.push({ ...item, id: item.userId })
-          })
-        }
-        members.value = arr
-      }
-      // if (data.res && data.res.userList) {
-      //     let arr = <any>[]
-      //     if (data.res.userList.length > 0) {
-      //         data.res.userList.forEach((item) => {
-      //             arr.push({ ...item, id: item.userId })
-      //         })
-      //     }
-      //     members.value = arr
-      // }
-      // if (data.res && data.res.deptVoList) {
-      //     departs.value = data.res?.deptVoList
-      // }
-      // checkAll.value = false
-    })
-  } else {
-    await DeptController.getDeptUserListByParentId(id).then((data) => {
-      if (data.res && data.res.userList) {
-        let arr = <any>[]
-        if (data.res.userList.length > 0) {
-          data.res.userList.forEach((item) => {
-            arr.push({ ...item, id: item.userId })
-          })
-        }
-        members.value = arr
-      }
-      if (data.res && data.res.deptVoList) {
-        departs.value = data.res?.deptVoList
-      }
-      checkAll.value = false
-    })
-  }
-}
-const dialogVisible = ref(false)
-const searchContent = ref('')
-const checkAll = ref(false)
-const isIndeterminate = ref(false)
-const checkedMember = ref<userBo[]>([])
-let members = ref<userBo[]>([])
-let departs = ref<departBo[]>([])
-// 点击多选
-
-const handleCheckAllChange = (val: boolean) => {
-  let copyMembers = JSON.parse(JSON.stringify(checkedMember.value))
-  for (let j = checkedMember.value.length - 1; j >= 0; j--) {
-    members.value.forEach((item, index) => {
-      if (item.userId == checkedMember.value[j].userId) {
-        console.log(item, checkedMember.value[j])
-        copyMembers.splice(j, 1)
-      }
-    })
-  }
-  if (val) {
-    members.value.forEach((item, index) => {
-      copyMembers.push(item)
-    })
-  }
-  checkedMember.value = copyMembers
-  // checkedMember.value = val ? members.value : []
-  isIndeterminate.value = false
-}
-const handleCheckedMemberChange = (value: any) => {
-
-  let chooseAllAll = true
-  let havaOneChoose = false
-  members.value.forEach((j, jndex) => {
-    let havaValue = false
-    value.forEach((i: any, index: number) => {
-
-      if (i.userId == j.userId) {
-        havaValue = true
-        havaOneChoose = true
-      }
-    })
-    if (!havaValue) {
-      chooseAllAll = false
-    }
-  })
-  console.log(value, chooseAllAll, havaOneChoose)
-  isIndeterminate.value = chooseAllAll ? false : havaOneChoose
-  checkAll.value = chooseAllAll
-
-  // let copyMembers = [...checkedMember]
-  // members.value.forEach((item,index)=>{
-  //     value.forEach((id:string,idIndex:number)=>{
-  //         if(item.userId == id){
-
-  //         }
-  //     })
-  // })
-
-}
-const radioMemeber = ref<any>()
-const handleRadioMemberChange = (value: any) => {
-  console.log(value);
-
-  // @ts-ignore
-  checkedMember.value = [value]
-}
-const goSearch = () => {
-
-}
-const namebox = ref([{ name: '全部', id: '1' }])
-const resetChoose = () => {
-  checkedMember.value.length = 0
-  checkedMemberForRadio.value = undefined
-}
-// 去下级
-const goNextLevel = async (item: departBo) => {
-  await getList(item.deptId)
-  namebox.value.push({ id: item.deptId, name: item.deptName })
-}
-// 改变当前层级，点击部门名字
-const goPointLevel = async (item: nameForSearchBo, index: number) => {
-  await getList(item.id)
-  namebox.value.splice(index + 1, namebox.value.length - index - 1)
-}
-const changeDigVis = async (value: boolean) => {
-  if (value) {
-    await getList('1')
-  }
-  dialogVisible.value = value
-}
-const cancelDia = () => {
-  console.log(checkedMemberForRadio.value)
-  checkedMember.value = modelValue && modelValue.value ? modelValue.value : []
-  if (!multiple.value) {
-    checkedMemberForRadio.value = checkedMember.value[0]
-  }
-  console.log(checkedMemberForRadio.value)
-  changeDigVis(false)
-  changePopShow(false)
-}
-const saveDia = () => {
-  let arr: Array<string> = []
-
-  checkedMember.value.forEach((item, index) => {
-    arr.push(item.userId)
-  })
-  emits('update:modelValue', checkedMember.value)
-  emits('changeCheckMemberId', arr)
-  changeDigVis(false)
-
-  changePopShow(false)
-}
-// 删除某个以选项
-const deleteCheckedItem = (index: number) => {
-  checkedMember.value.splice(index, 1)
-}
-// 单选绑定的值
-const checkedMemberForRadio = ref<userBo>()
-// 改变单选时将值赋给checkedMember
-const radioChanged = (value: userBo) => {
-  console.debug(value)
-  // let chooseItem = {}
-  // members.value.forEach(i => {
-  //     if (i.userId == value) {
-  //         chooseItem = i
-  //     }
-  // })
-  // console.log(chooseItem)
-  checkedMember.value.length = 0
-  checkedMember.value.push(value)
-}
-watch(() => props.modelValue, () => {
-  console.warn('modelValue改变了')
-  checkedMember.value = modelValue && modelValue.value ? modelValue.value : []
-  if (!multiple.value) {
-    console.log(checkedMember.value)
-    checkedMemberForRadio.value = checkedMember.value[0]
-  }
-})
-defineExpose({
-  popupShow
-})
-</script>
-<style lang="scss" scoped>
-@use '../styles/common.scss';
-
-.iconBoxForSubmitAdd {
-  border-radius: 6px;
-  background-color: #d8d8d8;
-  background-size: cover;
-  border-radius: 6px;
-  float: left;
-  height: 40px;
-  margin-right: 12px;
-  width: 40px;
-  overflow: hidden;
-  text-align: center;
-  line-height: 40px;
-  font-size: 28px;
-  color: #878f95;
-}
-
-.popupBox {
-  padding: 0 18px;
-  width: calc(100% - 0px);
-  height: 100%;
-
-  .popupBoxHeader {
-    height: 60px;
-    line-height: 60px;
-    font-size: 16px;
-    font-weight: bold;
-  }
-
-  .popupBoxContent {
-    height: calc(100% - 60px - 80px);
-    width: 100%;
-    overflow-y: auto;
-  }
-
-  .popupButton {
-    width: 100%;
-    height: 80px;
-    line-height: 80px;
-  }
-}
-
-.companyNameBox {
-  font-size: 18px;
-  line-height: 30px;
-  overflow: hidden;
-  // text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow-x: auto;
-  width: 100%;
-
-  &Name {
-    color: #1890ff;
-    cursor: pointer;
-  }
-
-  &Symbol {
-    margin: 0 9px;
-    color: #a3a3a3
-  }
-}
-
-.triggerArea {
-  width: 100%;
-  min-height: 32px;
-  height: min-content;
-  border: 1px solid rgb(229, 230, 232);
-  padding: 8px;
-
-  .triggerItem {
-    margin-right: 8px;
-    margin-bottom: 3px;
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: #747677;
-    border-color: #cfd2d5;
-    background-color: #e5e6e8;
-    padding: 2px 12px;
-    cursor: pointer;
-  }
-}
-
-.optionbox {
-  width: 100%;
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-wrap: nowrap;
-}
-
-.chooseItem {
-  padding: 2px 6px;
-  margin: 0 10px 8px 0;
-  background-color: #f1f2f3;
-  height: 30px;
-  max-height: 30px;
-
-  img {
-    border-radius: 50%;
-    margin-right: 4px;
-    width: 16px;
-    height: 16px;
-  }
-
-  &Name {
-    margin-right: 8px;
-  }
-
-  &Icon {
-    cursor: pointer;
-  }
-}
+<!-- 选择人员-手机端 - 多选 - 单选 -->
+<template>
+  <el-icon class="iconBoxForSubmitAdd" @click="changePopShow(true)" v-if="props.submitAdd">
+    <Plus />
+  </el-icon>
+  <div @click="changePopShow(true)" class="triggerArea flexRowStart" :style="props.submitAdd ? { padding: 0 } : {}"
+    v-if="!props.submitAdd">
+    <div class="triggerItem" v-for="(item, index) in checkedMember" :key="index"
+      v-if="checkedMember && checkedMember.length > 0 && !props.abbreviate && !props.submitAdd">
+      {{ item.userName }}
+    </div>
+    <div v-else-if="checkedMember && checkedMember.length > 0 && props.abbreviate && !props.submitAdd"
+      class="abbreviateItem flexRowCenter">
+      {{ `已选择（${checkedMember.length}）` }}<el-icon style="font-size:16px;">
+        <UserFilled />
+      </el-icon>
+    </div>
+
+    <div v-else>请选择人员</div>
+  </div>
+  <van-popup v-model:show="popupShow" closeable position="bottom"
+    :style="{ height: '70%', 'z-index': '8888', position: 'fixed', bottom: props.posBottom || props.posBottom == 0 ? props.posBottom + 'px' : '50px', left: 0, right: 0 }">
+    <div class="popupBox flexColumnStart">
+      <div class="popupBoxHeader">选择成员：</div>
+      <div class="popupBoxContent">
+        <div class="popCheckedItemBox">
+          当前已选：
+          <div class="flexRowStartCenter" style="flex-wrap: wrap;">
+            <div class="chooseItem flexRowStartCenter" v-for="(item, index) in checkedMember" :key="item.userId">
+              <img :src="item.avatar" alt="" v-if="item.avatar">
+              <img src="hrp-ui-base/assets/process/defaultAvatar.png" alt="" v-if="!item.avatar">
+              <div class="chooseItemName">{{ item.userName }}</div>
+              <el-icon class="chooseItemIcon" @click="deleteCheckedItem(index)">
+                <Close />
+              </el-icon>
+            </div>
+          </div>
+        </div>
+        <div class="companyNameBox flexRowStart">
+          <span v-for="(nameItem, nameIndex) in namebox" :key="nameIndex" class="companyNameBoxName"
+            @click="goPointLevel(nameItem, nameIndex)">
+            {{ nameItem.name }}
+            <span v-if="nameIndex != namebox.length - 1" class="companyNameBoxSymbol">
+              /
+            </span>
+          </span>
+        </div>
+        <div class="popMemberList">
+          <el-checkbox-group v-model="checkedMember" @change="handleCheckedMemberChange" size="default"
+            class="flexColumnStart optionbox" v-if="multiple">
+            <div class="flexRowBetween" style="width:100%" v-for="(item, index) in departs" :key="item.deptId">
+              <el-checkbox :label="item" size="default" style="margin-bottom: 8px;font-size:18px;width: 340px;min-height:24px;max-height: 24px;
+                        " disabled>
+                {{
+    item.deptName
+  }}
+              </el-checkbox>
+              <div style="width:100px;height:24px;font-size: 16px;line-height: 16px;cursor: pointer;"
+                class="flexRowStart" @click.stop="goNextLevel(item)">
+                <el-icon style="margin-right:4px;">
+                  <Expand />
+                </el-icon>{{ '下级' }}
+              </div>
+            </div>
+            <div class="flexRowBetween" style="width:100%" v-for="(item, index) in members" :key="item.userId">
+              <el-checkbox :label="item" size="default" style="margin-bottom: 8px;font-size:18px;width: 340px;min-height:24px;max-height: 24px;
+                        ">
+                {{
+    item.userName
+  }}
+              </el-checkbox>
+            </div>
+          </el-checkbox-group>
+          <el-radio-group v-model="radioMemeber" @change="handleRadioMemberChange" size="default"
+            class="flexColumnStart optionbox" v-if="!multiple">
+            <div class="flexRowBetween" style="width:100%" v-for="(item, index) in departs" :key="item.deptId">
+              <el-radio :label="item" size="default"
+                style="margin-bottom: 8px;font-size:18px;width: 340px;min-height:24px;max-height: 24px;" disabled>
+                {{
+    item.deptName
+  }}
+              </el-radio>
+              <div style="width:100px;height:24px;font-size: 16px;line-height: 16px;cursor: pointer;"
+                class="flexRowStart" @click.stop="goNextLevel(item)">
+                <el-icon style="margin-right:4px;">
+                  <Expand />
+                </el-icon>{{ '下级' }}
+              </div>
+            </div>
+            <div class="flexRowBetween" style="width:100%" v-for="(item, index) in members" :key="item.userId">
+              <el-radio :label="item" size="default"
+                style="margin-bottom: 8px;font-size:18px;width: 340px;min-height:24px;max-height: 24px;">
+                {{
+    item.userName
+  }}
+              </el-radio>
+            </div>
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="popupButton flexRowCenter">
+        <van-button type="primary" style="margin-right:28px;width:30%" @click="saveDia">保存</van-button>
+        <van-button type="default" style="width:30%" @click="saveDia">关闭</van-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+<script lang="ts" setup>
+import { reactive, ref, onMounted, shallowRef, toRefs, watch ,PropType} from 'vue'
+import { Search, Watch } from '@element-plus/icons-vue'
+import DeptController from "hrp-ui-base/api/hrms/dept/deptController";
+import RoleController from "hrp-ui-base/api/hrms/role/roleController";
+import UserController from "hrp-ui-base/api/hrms/user/userController";
+
+import type { userBo, departBo, nameForSearchBo } from './BO/memberBo'
+const props = defineProps({
+  modelValue: {
+    type:Array as PropType<any>
+  },
+  // 选择了那些审批人 具体的人名
+  multiple: {
+    type: Boolean,
+    default: true,
+    require: false
+  },
+  // 选择了N位审批人 ，缩略图
+  abbreviate: {
+    type: Boolean,
+    default: false,
+    require: false
+  },
+  // 显示add - 审批提交时
+  submitAdd: {
+    type: Boolean,
+    default: false,
+    require: false
+  },
+  posBottom: {
+    type: Number,
+    require: false,
+    default: 50
+  },
+  // 数据来源范围  全公司 指定成员 指定角色
+  dataSources: {
+    type: String,
+    default: 'all',
+    require: false
+  },
+  // 数据来源范围具体的条件  全公司 指定成员 指定角色
+  dataSourcesCondition: {
+    type: Array<string>,
+    default: [],
+    require: false
+  }
+})
+const emits = defineEmits(['update:modelValue', 'changeCheckMemberId', 'changeButtonShow'])
+const { modelValue, multiple } = toRefs(props)
+const popupShow = ref(false)
+const changePopShow = (value: boolean) => {
+  popupShow.value = value
+  if (value) {
+    getList('1')
+  }
+}
+watch(() => { popupShow.value }, () => {
+  emits('changeButtonShow', !popupShow.value)
+}, { deep: true })
+watch(() => multiple.value, () => {
+  console.warn('多选改变了')
+})
+
+onMounted(() => {
+  console.log(props)
+  setTimeout(() => {
+    checkedMember.value = modelValue && modelValue.value ? modelValue.value : []
+    if (!multiple.value) {
+      console.log(checkedMember.value)
+      checkedMemberForRadio.value = checkedMember.value[0]
+    }
+  }, 500)
+  // getList('1')
+})
+/** 复制出的数据 */
+const copyMembers  = ref<userBo[]>([])
+const getList = async (id: string) => {
+  if (props.dataSources == 'user') {
+    let userIds = <any>[]
+    if (props.dataSourcesCondition && props.dataSourcesCondition.length > 0) {
+      userIds = props.dataSourcesCondition
+    }
+    await UserController.getLivingUserListByIds(userIds).then((data) => {
+      console.log(data)
+
+      if (data.res) {
+        let arr = <any>[]
+        if (data.res.length > 0) {
+          data.res.forEach((item) => {
+            arr.push({ ...item, id: item.userId })
+          })
+        }
+        members.value = arr
+        copyMembers.value = JSON.parse(JSON.stringify(arr))
+      }
+      // if (data.res && data.res.deptVoList) {
+      //     departs.value = data.res?.deptVoList
+      // }
+      // checkAll.value = false
+    })
+  } else if (props.dataSources == 'role') {
+    let roleIds = <any>[]
+    if (props.dataSourcesCondition && props.dataSourcesCondition.length > 0) {
+      roleIds = props.dataSourcesCondition
+    }
+    await UserController.getUserListByRoleIds(roleIds).then((data) => {
+      console.log(data)
+      if (data.res) {
+        let arr = <any>[]
+        if (data.res.length > 0) {
+          data.res.forEach((item) => {
+            arr.push({ ...item, id: item.userId })
+          })
+        }
+        members.value = arr
+      }
+      // if (data.res && data.res.userList) {
+      //     let arr = <any>[]
+      //     if (data.res.userList.length > 0) {
+      //         data.res.userList.forEach((item) => {
+      //             arr.push({ ...item, id: item.userId })
+      //         })
+      //     }
+      //     members.value = arr
+      // }
+      // if (data.res && data.res.deptVoList) {
+      //     departs.value = data.res?.deptVoList
+      // }
+      // checkAll.value = false
+    })
+  } else {
+    await DeptController.getDeptUserListByParentId(id).then((data) => {
+      if (data.res && data.res.userList) {
+        let arr = <any>[]
+        if (data.res.userList.length > 0) {
+          data.res.userList.forEach((item) => {
+            arr.push({ ...item, id: item.userId })
+          })
+        }
+        members.value = arr
+      }
+      if (data.res && data.res.deptVoList) {
+        departs.value = data.res?.deptVoList
+      }
+      checkAll.value = false
+    })
+  }
+}
+const dialogVisible = ref(false)
+const searchContent = ref('')
+const checkAll = ref(false)
+const isIndeterminate = ref(false)
+const checkedMember = ref<userBo[]>([])
+let members = ref<userBo[]>([])
+let departs = ref<departBo[]>([])
+// 点击多选
+
+const handleCheckAllChange = (val: boolean) => {
+  let copyMembers = JSON.parse(JSON.stringify(checkedMember.value))
+  for (let j = checkedMember.value.length - 1; j >= 0; j--) {
+    members.value.forEach((item, index) => {
+      if (item.userId == checkedMember.value[j].userId) {
+        console.log(item, checkedMember.value[j])
+        copyMembers.splice(j, 1)
+      }
+    })
+  }
+  if (val) {
+    members.value.forEach((item, index) => {
+      copyMembers.push(item)
+    })
+  }
+  checkedMember.value = copyMembers
+  // checkedMember.value = val ? members.value : []
+  isIndeterminate.value = false
+}
+const handleCheckedMemberChange = (value: any) => {
+
+  let chooseAllAll = true
+  let havaOneChoose = false
+  members.value.forEach((j, jndex) => {
+    let havaValue = false
+    value.forEach((i: any, index: number) => {
+
+      if (i.userId == j.userId) {
+        havaValue = true
+        havaOneChoose = true
+      }
+    })
+    if (!havaValue) {
+      chooseAllAll = false
+    }
+  })
+  console.log(value, chooseAllAll, havaOneChoose)
+  isIndeterminate.value = chooseAllAll ? false : havaOneChoose
+  checkAll.value = chooseAllAll
+
+  // let copyMembers = [...checkedMember]
+  // members.value.forEach((item,index)=>{
+  //     value.forEach((id:string,idIndex:number)=>{
+  //         if(item.userId == id){
+
+  //         }
+  //     })
+  // })
+
+}
+const radioMemeber = ref<any>()
+const handleRadioMemberChange = (value: any) => {
+  console.log(value);
+
+  // @ts-ignore
+  checkedMember.value = [value]
+}
+const goSearch = () => {
+
+}
+const namebox = ref([{ name: '全部', id: '1' }])
+const resetChoose = () => {
+  checkedMember.value.length = 0
+  checkedMemberForRadio.value = undefined
+}
+// 去下级
+const goNextLevel = async (item: departBo) => {
+  await getList(item.deptId)
+  namebox.value.push({ id: item.deptId, name: item.deptName })
+}
+// 改变当前层级，点击部门名字
+const goPointLevel = async (item: nameForSearchBo, index: number) => {
+  await getList(item.id)
+  namebox.value.splice(index + 1, namebox.value.length - index - 1)
+}
+const changeDigVis = async (value: boolean) => {
+  if (value) {
+    await getList('1')
+  }
+  dialogVisible.value = value
+}
+const cancelDia = () => {
+  console.log(checkedMemberForRadio.value)
+  checkedMember.value = modelValue && modelValue.value ? modelValue.value : []
+  if (!multiple.value) {
+    checkedMemberForRadio.value = checkedMember.value[0]
+  }
+  console.log(checkedMemberForRadio.value)
+  changeDigVis(false)
+  changePopShow(false)
+}
+const saveDia = () => {
+  let arr: Array<string> = []
+
+  checkedMember.value.forEach((item, index) => {
+    arr.push(item.userId)
+  })
+  emits('update:modelValue', checkedMember.value)
+  emits('changeCheckMemberId', arr)
+  changeDigVis(false)
+
+  changePopShow(false)
+}
+// 删除某个以选项
+const deleteCheckedItem = (index: number) => {
+  checkedMember.value.splice(index, 1)
+}
+// 单选绑定的值
+const checkedMemberForRadio = ref<userBo>()
+// 改变单选时将值赋给checkedMember
+const radioChanged = (value: userBo) => {
+  console.debug(value)
+  // let chooseItem = {}
+  // members.value.forEach(i => {
+  //     if (i.userId == value) {
+  //         chooseItem = i
+  //     }
+  // })
+  // console.log(chooseItem)
+  checkedMember.value.length = 0
+  checkedMember.value.push(value)
+}
+watch(() => props.modelValue, () => {
+  console.warn('modelValue改变了')
+  checkedMember.value = modelValue && modelValue.value ? modelValue.value : []
+  if (!multiple.value) {
+    console.log(checkedMember.value)
+    checkedMemberForRadio.value = checkedMember.value[0]
+  }
+})
+defineExpose({
+  popupShow
+})
+</script>
+<style lang="scss" scoped>
+@use '../styles/common.scss';
+
+.iconBoxForSubmitAdd {
+  border-radius: 6px;
+  background-color: #d8d8d8;
+  background-size: cover;
+  border-radius: 6px;
+  float: left;
+  height: 40px;
+  margin-right: 12px;
+  width: 40px;
+  overflow: hidden;
+  text-align: center;
+  line-height: 40px;
+  font-size: 28px;
+  color: #878f95;
+}
+
+.popupBox {
+  padding: 0 18px;
+  width: calc(100% - 0px);
+  height: 100%;
+
+  .popupBoxHeader {
+    height: 60px;
+    line-height: 60px;
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .popupBoxContent {
+    height: calc(100% - 60px - 80px);
+    width: 100%;
+    overflow-y: auto;
+  }
+
+  .popupButton {
+    width: 100%;
+    height: 80px;
+    line-height: 80px;
+  }
+}
+
+.companyNameBox {
+  font-size: 18px;
+  line-height: 30px;
+  overflow: hidden;
+  // text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow-x: auto;
+  width: 100%;
+
+  &Name {
+    color: #1890ff;
+    cursor: pointer;
+  }
+
+  &Symbol {
+    margin: 0 9px;
+    color: #a3a3a3
+  }
+}
+
+.triggerArea {
+  width: 100%;
+  min-height: 32px;
+  height: min-content;
+  border: 1px solid rgb(229, 230, 232);
+  padding: 8px;
+
+  .triggerItem {
+    margin-right: 8px;
+    margin-bottom: 3px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #747677;
+    border-color: #cfd2d5;
+    background-color: #e5e6e8;
+    padding: 2px 12px;
+    cursor: pointer;
+  }
+}
+
+.optionbox {
+  width: 100%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+}
+
+.chooseItem {
+  padding: 2px 6px;
+  margin: 0 10px 8px 0;
+  background-color: #f1f2f3;
+  height: 30px;
+  max-height: 30px;
+
+  img {
+    border-radius: 50%;
+    margin-right: 4px;
+    width: 16px;
+    height: 16px;
+  }
+
+  &Name {
+    margin-right: 8px;
+  }
+
+  &Icon {
+    cursor: pointer;
+  }
+}
 </style>