sl-sfy-safety/src/views/message/reportmessage/components/DesignatedPersonSelection.vue

<template>
  <div>
    <el-select
      v-model="prop.form.designatedUserList.value"
      value-key="id"
      multiple
      placeholder="请选择人员vbbnnb"
      @click="dialogVisible = !disableType.contentDisable"
      :disabled="disableType.contentDisable"
    >
      <el-option
        v-for="user in selectedUser"
        :key="user.id"
        :label="user.staffNo + '-' + user.nickname"
        :value="user"
      />
    </el-select>
    <el-dialog
      v-model="dialogVisible"
      title="添加人员"
      align-center
      :close-on-click-modal="false"
      style="height: 583px"
      :width="731"
      :destroy-on-close="true"
      :append-to-body="true"
      class="workShopDialog"
    >
      <!-- <SelectTree @cancel="handleCancle" @submit="handleSubmit" :selectedUser="selectedUser" /> -->
      <PersonFilterSelection
        @cancel="handleCancle"
        @submit="handleSubmit"
        :init-selected="selectedUser"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onBeforeUpdate, watch } from 'vue';
  import { SelectedFilterPersonInfo } from '@/api/message/person-group';
  // import SelectTree from '@/views/message/persongroup/components/SelectTree.vue';
  import PersonFilterSelection from '@/views/message/components/PersonFilterSelection.vue';
  // interface UserList {
  //   id: string;
  //   name: string;
  //   userId: number;
  // }
  const dialogVisible = ref<boolean>(false);
  const selectedUser = ref<SelectedFilterPersonInfo[]>([]);

  const prop = defineProps(['form', 'disableType']);

  const handleCancle = () => {
    dialogVisible.value = false;
  };
  const handleSubmit = (selectedData: SelectedFilterPersonInfo[]) => {
    selectedUser.value = selectedData;
    prop.form.designatedUserList.value = selectedUser.value;
    dialogVisible.value = false;
  };

  watch(
    () => prop.form.designatedUserList.value,
    (newSelected) => {
      selectedUser.value = newSelected;
    },
    { deep: true, immediate: true },
  );

  onBeforeUpdate(() => {
    if (prop.form.designatedUserList?.value?.length > 0) {
      selectedUser.value = prop.form.designatedUserList.value.map((item) => {
        return {
          id: item.userId,
          nickname: item.userNickname,
          staffNo: item.userLoginName,
        };
      });
    }
  });
</script>

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