sl-sfy-safety/src/views/system/person-group/components/PersonGroupDrawer.vue

<template>
  <el-drawer :title="title" v-model="drawerOpened" @close="reset">
    <el-form label-width="80px" :model="formData" :rules="formRules" ref="formInstance">
      <el-form-item label="分组名称" prop="name">
        <el-input
          v-model="formData.name"
          type="textarea"
          :autosize="{ minRows: 1, maxRows: 2 }"
          autocomplete="off"
          placeholder="请输入15字以内分组名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="分组描述" prop="description">
        <el-input
          v-model="formData.description"
          type="textarea"
          :rows="4"
          maxlength="50"
          show-word-limit
          autocomplete="off"
          placeholder="请输入50字以内分组描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="组内成员" prop="userList" :rules="[{ required: true, message: '组内成员不能为空' }]">
        <el-select
          placeholder="请添加组内人员"
          v-model="formData.userList"
          value-key="id"
          multiple
          @click="dialogOpened = true"
        >
          <el-option
            v-for="user in selectedUser"
            :key="user.id"
            :label="user.staffNo + '-' + user.realname"
            :value="user"
          />
        </el-select>
        <p
          >共<span>&nbsp;{{ total }}&nbsp;</span>人</p
        >
      </el-form-item>
      <el-form-item label="操作人" prop="operator">
        <el-input v-model="operater" disabled="true" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="reset">重置</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </template>
  </el-drawer>
  <el-dialog
    v-model="dialogOpened"
    title="添加人员"
    align-center
    :close-on-click-modal="false"
    style="height: 583px"
    :width="731"
    :destroy-on-close="true"
    class="workShopDialog"
  >
    <PersonGroupFilter
      ref="dialogInstance"
      :init-selected="selectedUser"
      @cancel="handleCancle"
      @submit="handleSubmit"
    />
  </el-dialog>
</template>

<script setup lang="ts">
  import { reactive, ref, computed } from 'vue';
  import {
    PersonGroupForm,
    AddPersonGroupParams,
    EditPersonGroupParams,
    PersonGroupItem,
    PersonGroupListItem,
  } from '@/types/person-group/type';
  import { addUserGroup, modifyUserGroup, queryUserGroupDetail } from '@/api/system/person-group';
  import { FormRules, FormInstance, ElMessage } from 'element-plus';
  import { useUserStore } from '@/store/modules/user';
  import PersonGroupFilter from './PersonGroupFilter.vue';
  import { storeToRefs } from 'pinia';

  defineProps<{
    title: string;
  }>();

  const emits = defineEmits<{
    (e: 'submitted'): void; // 提交之后触发的事件
  }>();

  const drawerOpened = ref(false);
  const dialogOpened = ref(false);

  const selectedUser = ref<PersonGroupItem[]>([]);

  // 表单相关
  const defaultFormData = (): PersonGroupForm => ({
    id: null,
    name: '',
    description: '',
    userList: [],
  });
  const useUser = useUserStore();
  const { info } = storeToRefs(useUser);
  const operater = ref(info.value.realname);

  const total = ref<number>(0);

  const formData = reactive<PersonGroupForm>(defaultFormData());
  const formRules: FormRules = {
    name: { required: true, trigger: 'blur', message: '请填写分组名称' },
    userList: { required: true, trigger: 'blur', message: '请选择组内成员' },
  };
  const formInstance = ref<FormInstance>();
  const isEditing = computed(() => formData.id != null);

  /** 重置表单 */
  const reset = () => {
    formInstance.value?.resetFields();
    Object.assign(formData, defaultFormData());
  };
  /** 提交表单 */
  const submit = async () => {
    try {
      await formInstance.value?.validate();
      if (isEditing.value) {
        await modifyUserGroup({
          name: formData.name,
          description: formData.description,
          userIdList: formData.userList.map((x) => x.id),
          total: formData.userList.length,
          userGroupId: formData.id!,
        });
      } else {
        await addUserGroup({
          name: formData.name,
          description: formData.description,
          userIdList: formData.userList.map((x) => x.id),
          total: formData.userList.length,
        });
      }
      drawerOpened.value = false;
      ElMessage.success('提交成功');
      emits('submitted');
    } catch (e) {
      console.error(e);
    }
  };

  const handleCancle = () => {
    dialogOpened.value = false;
  };
  const handleSubmit = (selectedData: PersonGroupItem[]) => {
    selectedUser.value = selectedData;
    formData.userList = selectedData;
    total.value = formData.userList.length;
    dialogOpened.value = false;
  };

  const open = async (row?: PersonGroupListItem) => {
    if (row) {
      const res = await queryUserGroupDetail(row.id);
      formData.id = res.userGroupId;
      formData.name = res.name;
      formData.description = res.description;
      formData.userList = res.userList;
    }
    drawerOpened.value = true;
  };

  defineExpose({
    open,
  });
</script>