sl-sfy-safety/src/views/message/CustomSelectTree.vue

<template>
  <div>
    <!-- v-model="userList" -->
    <el-select
      v-model="prop.form.customPushConfigList[index].customUserList"
      value-key="id"
      multiple
      placeholder="请选择人员"
      @click="dialogVisible = !disableType.contentDisable"
      :disabled="disableType.contentDisable"
    >
      <el-option v-for="user in selectedUser" :key="user.id" :label="user.name" :value="user">
      </el-option>
    </el-select>
    <el-dialog
      v-model="dialogVisible"
      title="添加组内成员"
      align-center
      :close-on-click-modal="false"
      style="height: 583px"
      :width="731"
      :destroy-on-close="true"
    >
      <SelectTree @cancel="handleCancle" @submit="handleSubmit" :selectedUser="selectedUser" />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import SelectTree from './persongroup/components/SelectTree.vue';
interface UserList {
  id: string;
  name: string;
  userId: number;
}
const dialogVisible = ref<boolean>(false);
// const userList = ref<UserList[]>([]);
const selectedUser = ref<UserList[]>([]);

const prop = defineProps(['form', 'disableType', 'index'])
// const userIDList = ref()

const handleCancle = () => {
  dialogVisible.value = false;
};
const handleSubmit = (selectedData: UserList[]) => {
  selectedUser.value = selectedData;
  prop.form.customPushConfigList[prop.index].customUserList.length = 0
  prop.form.customPushConfigList[prop.index].customUserList.push(...selectedUser.value);
  dialogVisible.value = false;
};
  onMounted(()=>{
    if(prop.form.customPushConfigList[prop.index].customUserList.length > 0){
      // selectedUser.value = prop.form.customUserList.value
      selectedUser.value = prop.form.customPushConfigList[prop.index].customUserList
      // console.log("prop.form.customPushConfigList[prop.index].customUserList.value", prop.form.customPushConfigList[prop.index].customUserList);
      // console.log("selectedUser.value", selectedUser.value);
      
    }
  })
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 527px;
}
::v-deep .el-select__selection {
    max-height: 100px;
    overflow-y: auto;
}
</style>