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"
  >
    <div class="group" v-for="group in userGroupInfo" :key="group.userGroupId">
      <div class="group-name">
        <span
          style="font-weight: 400; font-size: 16px; color: rgba(0, 0, 0, 0.88); line-height: 22px"
        >
          {{ group.name }}
        </span>
        <span
          style="
            margin-left: 4px;
            font-weight: 400;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.88);
            line-height: 17px;
          "
        >
          共
          <span style="color: #1777ff">{{ group.total }}</span>
          人
        </span>
        <div
          class="user-info"
          :class="{ expanded: group.isExpand }"
          :style="
            !group.isExpand
              ? 'max-height:86px;overflow-y:hidden;'
              : 'max-height:100%;overflow-y:auto'
          "
          style="display: flex"
        >
          <div
            class="left"
            style="display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; flex: 1"
          >
            <el-tag type="primary" v-for="user in group.userList" :key="user.userId">
              {{ user.loginName }}-{{ user.nickname }}
            </el-tag>
          </div>
          <div class="right" style="width: 50px; margin-top: 20px">
            <span
              @click="toggleExpand(group)"
              style="display: flex; cursor: pointer; align-items: center"
            >
              {{ group.isExpand ? '收起' : '展开' }}
              <img v-if="group.isExpand" src="@/assets/icons/arrow_top.png" />
              <img v-else src="@/assets/icons/arrow_bottom.png" />
            </span>
          </div>
        </div>
      </div>
    </div>
  </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 { 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);
interface customUserList {
  userId: number;
  userLoginName: string;
  userNickname: string;
  userNumber: string;
}
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,
    }));
  });
};
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 toggleExpand = (group) => {
  group.isExpand = !group.isExpand;
};
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>