leaser_front/src/views/setting/user/components/role-form-drawer.vue

<template>
  <a-modal
    :visible="visible"
    :title="isEdit ? $t('role.edit') : $t('role.add')"
    unmount-on-close
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      auto-label-width
      layout="vertical"
    >
      <!-- 角色名称 -->
      <a-form-item :label="$t('roleName')" field="name" required>
        <a-input
          v-model="form.name"
          :placeholder="$t('please.enter', { placeholder: $t('roleName') })"
        />
      </a-form-item>
      <!-- 角色描述 -->
      <a-form-item :label="$t('roleDesc')" field="remark">
        <a-textarea
          v-model="form.remark"
          :auto-size="{ minRows: 3, maxRows: 8 }"
          :placeholder="$t('please.enter', { placeholder: $t('roleDesc') })"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, watch, reactive } from 'vue';
  import { useI18n } from 'vue-i18n';
  import type { FormInstance } from '@arco-design/web-vue';
  import { Message } from '@arco-design/web-vue';
  import { updateRole, createRole } from '@/api/setting';
  import { RoleFormParam, RoleItem } from '@/types/setting';

  const isLoading = ref<boolean>(false);
  const props = defineProps<{
    visible: boolean;
    isEdit: boolean;
    record?: RoleItem | null;
  }>();
  const emit = defineEmits<{
    (e: 'update:visible', val: boolean): void;
    (e: 'submitted'): void;
  }>();
  //  表单数据
  const formRef = ref<FormInstance>();
  const defaultForm: RoleFormParam = {
    name: '',
    remark: '',
  };
  const form = reactive<RoleFormParam>({ ...defaultForm });
  const { t } = useI18n();
  //  校验规则
  const rules = reactive({
    name: [
      {
        required: true,
        message: t('please.enter', { placeholder: t('roleName') }),
      },
    ],
    remark: [
      {
        message: t('please.enter', { placeholder: t('roleDesc') }),
      },
    ],
  });
  watch(
    () => props.visible,
    (val) => {
      if (val) {
        if (props.isEdit && props.record) {
          const record = props.record as RoleItem & {
            roleId?: number;
            departmentId?: number;
            isManager?: number;
          };
          Object.assign(form, {
            ...record,
          });
        } else {
          Object.assign(form, defaultForm);
        }
      }
    },
    { immediate: true }
  );
  const handleOk = async () => {
    if (isLoading.value) return;
    try {
      isLoading.value = true;
      const valid = await formRef.value.validate();
      if (valid) return;
      const params = { ...form };
      const res = props?.isEdit
        ? await updateRole(params)
        : await createRole(params);
      if (res?.code === 200) {
        Message.success(res?.message);
        emit('submitted');
        emit('update:visible', false);
      }
    } catch (err) {
      // 捕获异常，暂不处理
    } finally {
      isLoading.value = false;
    }
  };

  const handleCancel = () => {
    emit('update:visible', false);
  };
</script>

<style lang="less" scoped>
  :deep(label.arco-form-item-label) {
    width: 100% !important;
  }

  .label_wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;
      align-items: center;

      .required {
        color: #f53f3f;
        margin-right: 4px;
        font-size: 16px;
        line-height: 1;
      }
    }

    .right {
      display: flex;
      align-items: center;
      gap: 4px;
    }
  }
</style>