perf(views): 编写"创建角色"步骤提交功能

src/views/create-customer/CreateCharacter.vue

@@ -5,12 +5,12 @@ import ConfirmModal from '@/components/ConfirmModal.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
-import { getSubPermList } from '@/api';
+import { addRolePermissions, getSubPermList } from '@/api';
 
 import type { TreeProps } from 'ant-design-vue';
 import type { Rule } from 'ant-design-vue/es/form';
 import type { DataNode } from 'ant-design-vue/es/tree';
-import type { CharacterItem, TreeStructure } from '@/types';
+import type { CharacterForm, CharacterItem, CreateCustomer, TreeStructure, UseGuideStepItemProps } from '@/types';
 
 const rules: Record<string, Rule[]> = {
   name: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
@@ -27,19 +27,31 @@ const characterIndex = ref<number>(0);
 const expandedKeys = ref<number[]>([]);
 const selectedKeys = ref<number[]>([]);
 const checkedKeys = ref<number[]>([]);
+
 const fieldNames: TreeProps['fieldNames'] = {
   children: 'subPermissions',
   title: 'menuName',
   key: 'id',
 };
+const props = defineProps<UseGuideStepItemProps<CreateCustomer>>();
 const treeStructure = ref<DataNode[]>([]);
-const characterForm = ref({
-  name: '',
+const characterForm = ref<CharacterForm>({
+  roleName: '',
+  remark: '',
 });
 const addCharacter = () => {
   characterOpen.value = true;
 };
 const characterSave = () => {
+  handleRequest(async () => {
+    await addRolePermissions({
+      ...characterForm.value,
+      orgId: props.form.id as number,
+      enabled: '1',
+      permissionIds: checkedKeys.value,
+    });
+  });
+
   characterList.value.push({
     name: '',
     id: undefined,
@@ -108,8 +120,8 @@ const transformTreeData = (data: TreeStructure[]): DataNode[] => {
 onMounted(() => {
   handleRequest(async () => {
     const data = await getSubPermList(0);
-    const treeData = transformTreeData(data);
-    treeStructure.value = treeData[0].subPermissions;
+    treeStructure.value = transformTreeData(data[0].subPermissions[0].subPermissions);
+    // treeStructure.value = treeData[0].subPermissions;
     checkedAll.value = getAllKeys(treeStructure.value);
   });
 });
@@ -156,13 +168,13 @@ onMounted(() => {
         :rules="rules"
         :label-col="{ span: 3 }"
       >
-        <AFormItem label="角色名称" name="name">
-          <AInput class="input-width" v-model:value="characterForm.name" placeholder="请输入角色名称" />
+        <AFormItem label="角色名称" name="roleName">
+          <AInput class="input-width" v-model:value="characterForm.roleName" placeholder="请输入角色名称" />
         </AFormItem>
         <AFormItem label="角色描述">
           <ATextarea
             class="input-width"
-            v-model:value="characterForm.name"
+            v-model:value="characterForm.remark"
             :placeholder="t('common.pleaseEnter')"
             :auto-size="{ minRows: 4 }"
           />