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

<template>
  <div>
    <el-select v-model="prop.form.designatedUserList" value-key="id" multiple placeholder="请选择人员"
      @click="dialogVisible = !disableType.contentDisable" :disabled="disableType.contentDisable">
      <el-option v-for="user in selectedUser" :key="user.id" :label="user.staffNo + '-' + user.realname"
        :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 = selectedUser.value;
  dialogVisible.value = false;
};

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

onBeforeUpdate(() => {
  if (prop.form.designatedUserList?.value?.length > 0) {
    selectedUser.value = prop.form.designatedUserList.map((item) => {
      return {
        id: item.userId,
        realname: 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>