sl-sfy-safety/src/views/message/components/PushObject.vue

<template>
  <el-form :model="ruleForm" ref="ruleFormRef">
    <el-form-item
      label="推送对象"
      prop="recipientType"
      :rules="[{ required: true, message: '请选择推送对象' }]"
    >
      <el-radio-group v-model="ruleForm.recipientType" :disabled="disabled">
        <el-radio
          v-for="item in recipientTypeName"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        />
      </el-radio-group>
    </el-form-item>
    <div class="userGroupList" v-if="ruleForm.recipientType === 2">
      <el-form-item
        label="选择分组"
        prop="userGroupList"
        :rules="[{ required: true, message: '请选择分组' }]"
      >
        <el-select
          v-model="ruleForm.userGroupList"
          multiple
          placeholder="请选择分组"
          style="width: 300px"
          :disabled="disabled"
        >
          <el-option
            v-for="item in options"
            :key="item.userGroupId"
            :value="item.userGroupId"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <span
        v-if="ruleForm.userGroupList.length > 0"
        @click="queryGroupInfo(ruleForm.userGroupList)"
      >
        人员详情
      </span>
    </div>
    <div class="customUserList" v-if="ruleForm.recipientType === 3">
      <el-form-item
        label="选择人员"
        prop="customUserList"
        :rules="[{ required: true, message: '请选择人员' }]"
      >
        <el-select
          v-model="ruleForm.customUserList"
          value-key="id"
          multiple
          placeholder="请选择人员"
          style="width: 300px"
          @click="userInfo = true"
          :disabled="disabled"
        >
          <el-option v-for="user in selectedUser" :key="user.id" :label="user.name" :value="user">
          </el-option>
        </el-select>
      </el-form-item>
    </div>
  </el-form>
  <el-dialog
    v-model="groupInfo"
    title="人员详情"
    align-center
    :close-on-click-modal="false"
    style="height: 583px"
    :width="731"
    :destroy-on-close="true"
    class="groupInfo"
  >
    <Group :userGroupInfo="userGroupInfo" />
  </el-dialog>
  <el-dialog
    v-model="userInfo"
    class="userInfo"
    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>
</template>

<script setup lang="ts">
  import { onMounted, ref, reactive, watch, watchEffect } from 'vue';
  import SelectTree from '../persongroup/components/SelectTree.vue';
  import Group from './Group.vue';
  import { recipientTypeName } from '../constant';
  import { ToPushObjectqueryUserGroupList, queryUserGroupDetail } from '../api/index';
  import type { FormInstance } from 'element-plus';
  import { GroupData } from '../persongroup/type';
  const ruleFormRef = ref<FormInstance>();
  const groupInfo = ref<boolean>(false);
  const userInfo = ref<boolean>(false);
  const disabled = ref<boolean>(false);
  export interface customUserList {
    userId: number;
    userLoginName: string;
    userNickname: string;
    userNumber: string;
  }
  export interface userGroupVOList {
    userGroupId: number;
    total: number;
    operatorName: string;
    operationTime: string;
    name: string;
    description: string;
  }
  interface UserList {
    id: string;
    name: string;
    userId: number;
  }
  const selectedUser = ref<UserList[]>([]);
  interface RuleForm {
    recipientType?: number;
    userGroupList: number[];
    customUserList: UserList[];
  }
  const ruleForm = reactive<RuleForm>({
    userGroupList: [],
    customUserList: [],
  });
  const props = defineProps<{
    recipientType?: number;
    userGroupList?: userGroupVOList[];
    customUserList?: customUserList[];
    disabled?: boolean;
  }>();
  interface Options {
    userGroupId?: number;
    name?: string;
    description: string;
    total: number;
    operatorName: string;
    operationTime: string;
  }
  const options = ref<Options[]>([]);
  const userGroupInfo = ref<GroupData[]>();
  const queryGroupInfo = (groupList) => {
    groupInfo.value = true;
    queryUserGroupDetail(groupList).then((res) => {
      userGroupInfo.value = res.map((group) => ({
        ...group,
        isExpand: false,
        isHidden: false,
      }));
    });
  };
  const submitForm = () => {
    return ruleFormRef.value!.validate(() => {});
  };
  const getChildValue = () => {
    return {
      recipientType: ruleForm.recipientType,
      userGroupList:
        ruleForm.recipientType === 3
          ? []
          : ruleForm.recipientType === 1
          ? []
          : ruleForm.userGroupList.map((item) => item),
      customUserList:
        ruleForm.recipientType === 2
          ? []
          : ruleForm.recipientType === 1
          ? []
          : ruleForm.customUserList.map((item) => item.userId),
    };
  };
  const handleCancle = () => {
    userInfo.value = false;
  };
  const handleSubmit = (selectedData: UserList[]) => {
    selectedUser.value = selectedData;
    ruleForm.customUserList = selectedUser.value;
    userInfo.value = false;
  };
  const formatCustomUserList = (customList: customUserList[]): UserList[] => {
    return customList.map((item) => ({
      id: `u${item.userId}`,
      userId: item.userId,
      name: `${item.userLoginName}-${item.userNickname}`,
    }));
  };
  defineExpose({
    submitForm,
    getChildValue,
  });
  onMounted(() => {
    ToPushObjectqueryUserGroupList().then((res) => {
      options.value = res.groupVOList;
    });
  });
  watchEffect(() => {
    if (props.recipientType) {
      ruleForm.recipientType = props.recipientType;
    }
    if (props.userGroupList) {
      ruleForm.userGroupList = props.userGroupList.map((item) => item.userGroupId);
    }
    if (props.customUserList) {
      ruleForm.customUserList = formatCustomUserList(props.customUserList);
      selectedUser.value = formatCustomUserList(props.customUserList);
    }
    if (props.disabled) {
      disabled.value = props.disabled;
    }
  });
  watch(
    () => ruleForm.customUserList,
    (newSelected) => {
      selectedUser.value = newSelected;
    },
    { immediate: true },
  );
</script>

<style lang="scss" scoped>
  .userGroupList {
    margin-left: 12%;
    width: 88%;
    max-height: 120px;
    padding: 12px 17px 12px 12px;
    background: #fafafa;
    border-radius: 4px;
    :deep(.el-form-item) {
      margin-bottom: 12px !important;
    }
    ::v-deep .el-select__selection {
      min-height: 25px;
      max-height: 60px;
      overflow-y: auto;
    }
    span {
      cursor: pointer;
      margin-left: 80px;
      font-weight: 400;
      font-size: 10px;
      color: #1777ff;
      line-height: 14px;
    }
  }
  .customUserList {
    margin-left: 12%;
    width: 88%;
    max-height: 120px;
    padding: 12px 17px 12px 12px;
    background: #fafafa;
    border-radius: 4px;
    :deep(.el-form-item) {
      margin-bottom: 12px !important;
    }
    ::v-deep .el-select__selection {
      min-height: 25px;
      max-height: 60px;
      overflow-y: auto;
    }
  }
</style>