feat: 完成角色权限的功能权限和用户分配

2025-07-14 01:15:52 +08:00
parent 293beb9f5d
commit c5588374ba
12 changed files with 1562 additions and 133 deletions
@@ -0,0 +1,150 @@
+<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 {
+    RoleFormParam,
+    RoleItem,
+    updateRole,
+    createRole,
+  } from '@/api/setting';
+
+  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 () => {
+    try {
+      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) {
+      // 捕获异常，暂不处理
+    }
+  };
+
+  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>