fix(form): formAction slot not work

CHANGELOG.zh_CN.md

 ## Wip
 
+### ✨ Refactor
+
+独立组件配置到 `/@/settings/componentsSetting`
+
 ### ✨ Features
 
 - 新增`mixSideTrigger`配置。用于配置左侧混合模式菜单打开方式。可选`hover`,默认`click`
@@ -16,6 +20,10 @@
 - 修复`layout` 收缩展开功能在分割模式下失效
 - 修复 modal 高度计算错误
 
+### 🎫 Chores
+
+- 文档更新
+
 ## 2.0.0-rc.15 (2020-12-31)
 
 ### ✨ 表格破坏性更新

package.json

 {
-  "name": "vben-admin-2.0",
+  "name": "vben-admin",
   "version": "2.0.0-rc.15",
   "scripts": {
     "bootstrap": "yarn install",
@@ -35,7 +35,7 @@
     "path-to-regexp": "^6.2.0",
     "qrcode": "^1.4.4",
     "sortablejs": "^1.12.0",
-    "vditor": "^3.7.4",
+    "vditor": "^3.7.5",
     "vue": "^3.0.5",
     "vue-i18n": "9.0.0-beta.14",
     "vue-router": "^4.0.2",
@@ -48,7 +48,7 @@
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@iconify/json": "^1.1.278",
+    "@iconify/json": "^1.1.282",
     "@ls-lint/ls-lint": "^1.9.2",
     "@purge-icons/generated": "^0.4.1",
     "@types/echarts": "^4.9.3",
@@ -63,8 +63,8 @@
     "@types/sortablejs": "^1.10.6",
     "@types/yargs": "^15.0.12",
     "@types/zxcvbn": "^4.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.11.1",
-    "@typescript-eslint/parser": "^4.11.1",
+    "@typescript-eslint/eslint-plugin": "^4.12.0",
+    "@typescript-eslint/parser": "^4.12.0",
     "@vue/compiler-sfc": "^3.0.5",
     "@vuedx/typecheck": "^0.4.1",
     "@vuedx/typescript-plugin-vue": "^0.4.1",
@@ -75,11 +75,11 @@
     "cross-env": "^7.0.3",
     "dot-prop": "^6.0.1",
     "dotenv": "^8.2.0",
-    "eslint": "^7.16.0",
+    "eslint": "^7.17.0",
     "eslint-config-prettier": "^7.1.0",
-    "eslint-plugin-prettier": "^3.3.0",
-    "eslint-plugin-vue": "^7.4.0",
-    "esno": "^0.3.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.4.1",
+    "esno": "^0.4.0",
     "fs-extra": "^9.0.1",
     "globrex": "^0.1.2",
     "husky": "^4.3.6",

src/components/Form/src/BasicForm.vue

@@ -18,10 +18,14 @@
         </FormItem>
       </template>
 
-      <FormAction
-        v-bind="{ ...getProps, ...advanceState }"
-        @toggle-advanced="handleToggleAdvanced"
-      />
+      <FormAction v-bind="{ ...getProps, ...advanceState }" @toggle-advanced="handleToggleAdvanced">
+        <template
+          #[item]="data"
+          v-for="item in ['resetBefore', 'submitBefore', 'advanceBefore', 'advanceAfter']"
+        >
+          <slot :name="item" v-bind="data" />
+        </template>
+      </FormAction>
       <slot name="formFooter" />
     </Row>
   </Form>

src/components/Form/src/hooks/useForm.ts

@@ -88,9 +88,13 @@ export function useForm(props?: Props): UseFormReturnType {
       form.setFieldsValue<T>(values);
     },
 
-    appendSchemaByField: async (schema: FormSchema, prefixField?: string | undefined) => {
+    appendSchemaByField: async (
+      schema: FormSchema,
+      prefixField: string | undefined,
+      first: boolean
+    ) => {
       const form = await getForm();
-      form.appendSchemaByField(schema, prefixField);
+      form.appendSchemaByField(schema, prefixField, first);
     },
 
     submit: async (): Promise<any> => {

src/components/Form/src/types/form.ts

@@ -33,7 +33,11 @@ export interface FormActionType {
   updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>;
   setProps: (formProps: Partial<FormProps>) => Promise<void>;
   removeSchemaByFiled: (field: string | string[]) => Promise<void>;
-  appendSchemaByField: (schema: FormSchema, prefixField?: string) => Promise<void>;
+  appendSchemaByField: (
+    schema: FormSchema,
+    prefixField: string | undefined,
+    first: boolean | undefined
+  ) => Promise<void>;
   validateFields: (nameList?: NamePath[]) => Promise<any>;
   validate: (nameList?: NamePath[]) => Promise<any>;
   scrollToField: (name: NamePath, options?: ScrollOptions) => Promise<void>;

src/components/Page/src/PageWrapper.vue

@@ -45,7 +45,7 @@
       contentStyle: {
         type: Object as PropType<CSSProperties>,
       },
-      contentBackgrond: propTypes.bool,
+      contentBackground: propTypes.bool,
       contentFullHeight: propTypes.bool,
     },
     setup(props, { slots }) {
@@ -71,8 +71,8 @@
 
       const getContentStyle = computed(
         (): CSSProperties => {
-          const { contentBackgrond, contentFullHeight, contentStyle } = props;
-          const bg = contentBackgrond ? { backgroundColor: '#fff' } : {};
+          const { contentBackground, contentFullHeight, contentStyle } = props;
+          const bg = contentBackground ? { backgroundColor: '#fff' } : {};
           if (!contentFullHeight) {
             return { ...bg, ...contentStyle };
           }

src/components/Table/src/BasicTable.vue

@@ -87,6 +87,7 @@
       'row-mouseleave',
       'edit-end',
       'edit-cancel',
+      'edit-row-end',
     ],
     setup(props, { attrs, emit, slots }) {
       const tableElRef = ref<ComponentRef>(null);

src/components/Table/src/components/editable/EditableCell.vue

@@ -210,7 +210,7 @@
         return true;
       }
 
-      async function handleSubmit() {
+      async function handleSubmit(needEmit = true) {
         const isPass = await handleSubmiRule();
         if (!isPass) return false;
         const { column, index } = props;
@@ -220,7 +220,7 @@
         const dataKey = (dataIndex || key) as string;
 
         const record = await table.updateTableData(index, dataKey, unref(getValues));
-        table.emit?.('edit-end', { record, index, key, value: unref(currentValueRef) });
+        needEmit && table.emit?.('edit-end', { record, index, key, value: unref(currentValueRef) });
         isEdit.value = false;
       }
 
@@ -274,7 +274,8 @@
 
             if (!pass) return;
             const submitFns = props.record?.submitCbs || [];
-            submitFns.forEach((fn) => fn());
+            submitFns.forEach((fn) => fn(false));
+            table.emit?.('edit-row-end');
             return true;
           }
           // isArray(props.record?.submitCbs) && props.record?.submitCbs.forEach((fn) => fn());

src/hooks/setting/useMenuSetting.ts

@@ -93,11 +93,10 @@ const getCalcContentWidth = computed(() => {
     unref(getIsTopMenu) || !unref(getShowMenu) || (unref(getSplit) && unref(getMenuHidden))
       ? 0
       : unref(getIsMixSidebar)
-      ? unref(getCollapsed)
-        ? SIDE_BAR_MINI_WIDTH
-        : SIDE_BAR_SHOW_TIT_MINI_WIDTH +
-          (unref(getMixSideFixed) && unref(mixSideHasChildren) ? unref(getRealWidth) : 0)
+      ? (unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH) +
+        (unref(getMixSideFixed) && unref(mixSideHasChildren) ? unref(getRealWidth) : 0)
       : unref(getRealWidth);
+
   return `calc(100% - ${unref(width)}px)`;
 });
 

src/utils/http/axios/index.ts

@@ -154,8 +154,8 @@ const transform: AxiosTransform = {
     const { t } = useI18n();
     errorStore.setupErrorHandle(error);
     const { response, code, message } = error || {};
-    const msg: string = response?.data?.error ? response.data.error.message : '';
-    const err: string = error?.toString();
+    const msg: string = response?.data?.error?.message ?? '';
+    const err: string = error?.toString?.() ?? '';
     try {
       if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
         createMessage.error(t('sys.api.apiTimeoutMessage'));

src/views/demo/page/desc/basic/index.vue

 <template>
-  <PageWrapper title="基础详情页" contentBackgrond>
+  <PageWrapper title="基础详情页" contentBackground>
     <Description
       size="middle"
       title="退款申请"

src/views/demo/page/desc/high/index.vue

 <template>
-  <PageWrapper title="单号：234231029431" contentBackgrond>
+  <PageWrapper title="单号：234231029431" contentBackground>
     <template #extra>
       <a-button> 操作一 </a-button>
       <a-button> 操作二 </a-button>

src/views/demo/page/form/basic/index.vue

 <template>
   <PageWrapper
     title="基础表单"
-    contentBackgrond
+    contentBackground
     content=" 表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。"
   >
     <BasicForm @register="register" />

src/views/demo/page/form/high/index.vue

@@ -2,7 +2,7 @@
   <PageWrapper
     class="high-form"
     title="高级表单"
-    contentBackgrond
+    contentBackground
     content=" 高级表单常见于一次性输入和提交大批量数据的场景。"
   >
     <a-card title="仓库管理" :bordered="false">

src/views/demo/page/form/step/index.vue

 <template>
   <PageWrapper
     title="分步表单"
-    contentBackgrond
+    contentBackground
     content=" 将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。"
   >
     <div class="step-form-form">

src/views/demo/permission/back/Btn.vue

 <template>
-  <PageWrapper contentBackgrond title="按钮权限控制" contentClass="p-4">
+  <PageWrapper contentBackground title="按钮权限控制" contentClass="p-4">
     <Alert message="刷新后会还原" show-icon />
 
     <CurrentPermissionMode />

src/views/demo/permission/back/index.vue

 <template>
   <PageWrapper
     title="后台权限示例"
-    contentBackgrond
+    contentBackground
     contentClass="p-4"
     content="目前mock了两组数据， id为1 和 2 具体返回的菜单可以在mock/sys/menu.ts内查看"
   >

src/views/demo/permission/front/Btn.vue

 <template>
   <PageWrapper
     title="前端权限按钮示例"
-    contentBackgrond
+    contentBackground
     contentClass="p-4"
     content="由于刷新的时候会请求用户信息接口，会根据接口重置角色信息，所以刷新后界面会恢复原样，如果不需要，可以注释 src/layout/default/index内的获取用户信息接口"
   >

src/views/demo/permission/front/index.vue

 <template>
   <PageWrapper
     title="前端权限示例"
-    contentBackgrond
+    contentBackground
     contentClass="p-4"
     content="由于刷新的时候会请求用户信息接口，会根据接口重置角色信息，所以刷新后界面会恢复原样，如果不需要，可以注释 src/layout/default/index内的获取用户信息接口"
   >

src/views/demo/tree/ActionTree.vue

 <template>
-  <PageWrapper title="Tree函数操作示例" contentBackgrond contentClass="p-4">
+  <PageWrapper title="Tree函数操作示例" contentBackground contentClass="p-4">
     <div class="mb-4">
       <a-button @click="handleLevel(2)" class="mr-2">显示到第2级</a-button>
       <a-button @click="handleLevel(1)" class="mr-2">显示到第1级</a-button>