feat(form-page): add form page demo

Author: anncwb

CHANGELOG.zh_CN.md

@@ -4,6 +4,9 @@
 
 - 新增 base64 文件流下载
 - 优化上传组件及示例
+- 新增可编辑行示例
+- 新增个人页
+- 新增表单页
 
 ### 🎫 Chores
 

README.md

@@ -232,6 +232,8 @@ yarn clean:lib # 删除node_modules，兼容window系统
 
 ## 正在开发的功能
 
+- [ ] 新分支全局国家化
+- [ ] 示例 page 页面
 - [ ] 主题配置
 - [ ] 黑暗主题
 - [ ] 打包 CDN

package.json

@@ -23,7 +23,7 @@
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.2",
     "@vueuse/core": "^4.0.0-beta.41",
-    "ant-design-vue": "^2.0.0-rc.1",
+    "ant-design-vue": "^2.0.0-beta.15",
     "apexcharts": "3.22.0",
     "axios": "^0.21.0",
     "echarts": "^4.9.0",

src/components/Basic/src/BasicHelp.vue

@@ -48,6 +48,10 @@
           bottom: 0,
         }),
       },
+      placement: {
+        type: String as PropType<string>,
+        defualt: 'right',
+      },
     },
     setup(props, { slots }) {
       const getOverlayStyleRef = computed(() => {
@@ -97,7 +101,7 @@
             overlayClassName: 'base-help__wrap',
             autoAdjustOverflow: true,
             overlayStyle: unref(getOverlayStyleRef),
-            placement: 'right',
+            placement: props.placement,
             getPopupContainer: () => getPopupContainer(),
           },
           {

src/components/Footer/index.ts

@@ -0,0 +1 @@
+export { default as AppFooter } from './src/index.vue';

src/components/Footer/src/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="app-footer" :style="{ width: getWidth }">
+    <div class="app-footer__left">
+      <slot name="left" />
+    </div>
+    <div class="app-footer__right">
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, computed, unref } from 'vue';
+  import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
+  import { appStore } from '/@/store/modules/app';
+  import { menuStore } from '/@/store/modules/menu';
+  export default defineComponent({
+    name: 'AppFooter',
+    setup() {
+      const getMiniWidth = computed(() => {
+        const {
+          menuSetting: { collapsedShowTitle },
+        } = appStore.getProjectConfig;
+        return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH;
+      });
+
+      const getWidth = computed(() => {
+        const { getCollapsedState, getMenuWidthState } = menuStore;
+        const width = getCollapsedState ? unref(getMiniWidth) : getMenuWidthState;
+        return `calc(100% - ${width}px)`;
+      });
+
+      return { getWidth };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .app-footer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding: 0 24px;
+    line-height: 44px;
+    background: #fff;
+    border-top: 1px solid #f0f0f0;
+    box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05),
+      0 -12px 48px 16px rgba(0, 0, 0, 0.03);
+    transition: width 0.3s;
+
+    &__left {
+      flex: 1 1;
+    }
+  }
+</style>

src/components/Form/src/BasicForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <Form v-bind="$attrs" ref="formElRef" :model="formModel">
+  <Form v-bind="{ ...$attrs, ...$props }" ref="formElRef" :model="formModel">
     <Row :class="getProps.compact ? 'compact-form-row' : ''">
       <slot name="formHeader" />
       <template v-for="schema in getSchema" :key="schema.field">
@@ -54,8 +54,8 @@
       const formModel = reactive({});
 
       const actionState = reactive({
-        resetAction: () => {},
-        submitAction: () => {},
+        resetAction: {},
+        submitAction: {},
       });
 
       const advanceState = reactive<AdvanceState>({
@@ -67,7 +67,7 @@
 
       const defaultValueRef = ref<any>({});
       const propsRef = ref<Partial<FormProps>>({});
-      const schemaRef = ref<FormSchema[] | null>(null);
+      const schemaRef = ref<Nullable<FormSchema[]>>(null);
       const formElRef = ref<Nullable<FormActionType>>(null);
 
       const getMergePropsRef = computed(
@@ -98,7 +98,15 @@
         for (const schema of schemas) {
           const { defaultValue, component } = schema;
           if (defaultValue && dateItemType.includes(component!)) {
-            schema.defaultValue = moment(defaultValue);
+            if (!Array.isArray(defaultValue)) {
+              schema.defaultValue = moment(defaultValue);
+            } else {
+              const def: moment.Moment[] = [];
+              defaultValue.forEach((item) => {
+                def.push(moment(item));
+              });
+              schema.defaultValue = def;
+            }
           }
         }
         return schemas as FormSchema[];
@@ -139,8 +147,8 @@
         formModel,
         getSchema,
         defaultValueRef,
-        formElRef: formElRef as any,
-        schemaRef: schemaRef as any,
+        formElRef: formElRef as Ref<FormActionType>,
+        schemaRef: schemaRef as Ref<FormSchema[]>,
         handleFormValues,
         actionState,
       });
@@ -156,6 +164,13 @@
         }
       );
 
+      watch(
+        () => getSchema.value,
+        () => {
+          initDefault();
+        }
+      );
+
       /**
        * @description:设置表单
        */

src/components/Form/src/FormItem.tsx

@@ -250,14 +250,21 @@ export default defineComponent({
     }
 
     function renderLabelHelpMessage() {
-      const { label, helpMessage, helpComponentProps } = props.schema;
+      const { label, helpMessage, helpComponentProps, subLabel } = props.schema;
+      const renderLabel = subLabel ? (
+        <span>
+          {label} <span style="color:#00000073">{subLabel}</span>
+        </span>
+      ) : (
+        label
+      );
       if (!helpMessage || (Array.isArray(helpMessage) && helpMessage.length === 0)) {
-        return label;
+        return renderLabel;
       }
       return (
         <span>
-          {label}
-          <BasicHelp class="mx-1" text={helpMessage} {...helpComponentProps} />
+          {renderLabel}
+          <BasicHelp placement="top" class="mx-1" text={helpMessage} {...helpComponentProps} />
         </span>
       );
     }
@@ -291,6 +298,7 @@ export default defineComponent({
       const { colProps = {}, colSlot, renderColContent, component } = props.schema;
       if (!componentMap.has(component)) return null;
       const { baseColProps = {} } = props.formProps;
+
       const realColProps = { ...baseColProps, ...colProps };
       const { isIfShow, isShow } = getShow();
       const getContent = () => {

src/components/Form/src/helper.ts

@@ -7,7 +7,7 @@ export function createPlaceholderMessage(component: ComponentType) {
   if (component.includes('Input') || component.includes('Complete')) {
     return '请输入';
   }
-  if (component.includes('Picker') && !component.includes('Range')) {
+  if (component.includes('Picker')) {
     return '请选择';
   }
   if (

src/components/Form/src/hooks/useLabelWidth.ts

@@ -25,19 +25,26 @@ export function useItemLabelWidth(schemaItemRef: Ref<FormSchema>, propsRef: Ref<
     const { labelCol = {}, wrapperCol = {} } = schemaItem.itemProps || {};
     const { labelWidth, disabledLabelWidth } = schemaItem;
 
-    const { labelWidth: globalLabelWidth } = unref(propsRef) as any;
+    const {
+      labelWidth: globalLabelWidth,
+      labelCol: globalLabelCol,
+      wrapperCol: globWrapperCol,
+    } = unref(propsRef) as any;
+
     // 如果全局有设置labelWidth, 则所有item使用
-    if ((!globalLabelWidth && !labelWidth) || disabledLabelWidth) {
+    if ((!globalLabelWidth && !labelWidth && !globalLabelCol) || disabledLabelWidth) {
       return { labelCol, wrapperCol };
     }
     let width = labelWidth || globalLabelWidth;
+    const col = { ...globalLabelCol, ...labelCol };
+    const wrapCol = { ...globWrapperCol, ...wrapperCol };
 
     if (width) {
       width = isNumber(width) ? `${width}px` : width;
     }
     return {
-      labelCol: { style: { width }, ...labelCol },
-      wrapperCol: { style: { width: `calc(100% - ${width})` }, ...wrapperCol },
+      labelCol: { style: { width }, ...col },
+      wrapperCol: { style: { width: `calc(100% - ${width})` }, ...wrapCol },
     };
   });
 }