@tmagic/form 1.1.4 → 1.1.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.4",
+  "version": "1.1.6",
   "name": "@tmagic/form",
   "sideEffects": [
     "dist/*",
@@ -35,14 +35,14 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/utils": "1.1.4",
-    "element-plus": "^2.2.6",
+    "@tmagic/utils": "1.1.6",
+    "element-plus": "^2.2.17",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "element-plus": "^2.2.6",
+    "element-plus": "^2.2.17",
     "vue": "^3.2.37"
   },
   "devDependencies": {
@@ -50,13 +50,13 @@
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/sortablejs": "^1.10.7",
-    "@vitejs/plugin-vue": "^3.0.1",
+    "@vitejs/plugin-vue": "^3.1.0",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.0",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^4.7.4",
-    "vite": "^3.0.4",
+    "vite": "^3.1.3",
     "vue-tsc": "^0.39.4"
   }
 }

package/src/FormDialog.vue

@@ -1,52 +1,53 @@
 <template>
-  <div>
-    <el-dialog
-      v-model="dialogVisible"
-      class="m-form-dialog"
-      top="20px"
-      :title="title"
-      :appendToBody="true"
-      :width="width"
-      :fullscreen="fullscreen"
-      :close-on-click-modal="false"
-      @close="closeHandler"
-    >
-      <div class="m-dialog-body" :style="`max-height: ${bodyHeight}; overflow-y: auto; overflow-x: hidden;`">
-        <m-form
-          v-model="stepActive"
-          ref="form"
-          :size="size"
-          :config="config"
-          :init-values="values"
-          :label-width="labelWidth"
-          @change="changeHandler"
-        ></m-form>
-        <slot></slot>
-      </div>
-
-      <template #footer>
-        <el-row class="dialog-footer">
-          <el-col :span="12" style="text-align: left">
-            <div style="min-height: 1px">
-              <slot name="left"></slot>
-            </div>
-          </el-col>
-          <el-col :span="12">
-            <slot name="footer">
-              <el-button @click="cancel" size="small">取 消</el-button>
-              <el-button v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep">上一步</el-button>
-              <el-button v-if="hasStep && stepCount > stepActive" type="info" size="small" @click="nextStep"
-                >下一步</el-button
-              >
-              <el-button v-else type="primary" size="small" :loading="saveFetch" @click="save">{{
-                confirmText
-              }}</el-button>
-            </slot>
-          </el-col>
-        </el-row>
-      </template>
-    </el-dialog>
-  </div>
+  <teleport to="body">
+    <div class="m-form-dialog" v-show="dialogVisible">
+      <el-dialog
+        v-model="dialogVisible"
+        top="20px"
+        :title="title"
+        :width="width"
+        :fullscreen="fullscreen"
+        :close-on-click-modal="false"
+        @close="closeHandler"
+      >
+        <div class="m-dialog-body" :style="`max-height: ${bodyHeight}; overflow-y: auto; overflow-x: hidden;`">
+          <m-form
+            v-model="stepActive"
+            ref="form"
+            :size="size"
+            :config="config"
+            :init-values="values"
+            :parent-values="parentValues"
+            :label-width="labelWidth"
+            @change="changeHandler"
+          ></m-form>
+          <slot></slot>
+        </div>
+
+        <template #footer>
+          <el-row class="dialog-footer">
+            <el-col :span="12" style="text-align: left">
+              <div style="min-height: 1px">
+                <slot name="left"></slot>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <slot name="footer">
+                <el-button @click="cancel" size="small">取 消</el-button>
+                <el-button v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep">上一步</el-button>
+                <el-button v-if="hasStep && stepCount > stepActive" type="info" size="small" @click="nextStep"
+                  >下一步</el-button
+                >
+                <el-button v-else type="primary" size="small" :loading="saveFetch" @click="save">{{
+                  confirmText
+                }}</el-button>
+              </slot>
+            </el-col>
+          </el-row>
+        </template>
+      </el-dialog>
+    </div>
+  </teleport>
 </template>
 
 <script lang="ts">
@@ -64,6 +65,10 @@ export default defineComponent({
       default: () => ({}),
     },
 
+    parentValues: {
+      type: Object,
+    },
+
     width: [Number, String],
 
     fullscreen: Boolean,

package/src/containers/GroupList.vue

@@ -23,14 +23,13 @@
 
     <el-button @click="addHandler" size="small" v-if="addable">添加组</el-button>
 
-    <el-button icon="el-icon-s-grid" size="small" @click="toggleMode" v-if="config.enableToggleMode"
-      >切换为表格</el-button
-    >
+    <el-button :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</el-button>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, inject, PropType } from 'vue';
+import { Grid } from '@element-plus/icons-vue';
 
 import { FormState, GroupListConfig } from '../schema';
 import { initValue } from '../utils/form';
@@ -144,6 +143,7 @@ export default defineComponent({
         }))) as any;
     };
     return {
+      Grid,
       addable,
       toggleMode,
       removeHandler,

package/src/containers/Table.vue

@@ -21,15 +21,14 @@
             </template>
           </el-table-column>
 
-          <el-table-column label="操作" width="60" :fixed="config.fixed === false ? undefined : 'left'">
+          <el-table-column label="操作" width="55" align="center" :fixed="config.fixed === false ? undefined : 'left'">
             <template v-slot="scope">
-              <el-button
+              <el-icon
                 v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
-                type="danger"
-                text
-                :icon="Delete"
+                class="m-table-delete-icon"
                 @click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-              ></el-button>
+                ><Delete
+              /></el-icon>
             </template>
           </el-table-column>
 
@@ -76,7 +75,7 @@
             width="45"
           ></el-table-column>
 
-          <el-table-column width="60" label="序号">
+          <el-table-column width="60" label="序号" v-if="showIndex && config.showIndex">
             <template v-slot="scope">{{ scope.$index + 1 + pagecontext * pagesize }}</template>
           </el-table-column>
 
@@ -163,12 +162,7 @@ import { asyncLoadJs, sleep } from '@tmagic/utils';
 import { ColumnConfig, FormState, SortProp, TableConfig } from '../schema';
 import { display, initValue } from '../utils/form';
 
-let loadedAMapJS = false; // 是否加载完js
-let firstLoadingAMapJS = true; // 否是第一次请求
-
 export default defineComponent({
-  name: 'm-form-table',
-
   props: {
     name: {
       type: String,
@@ -215,12 +209,19 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+
+    showIndex: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   emits: ['change', 'select'],
 
+  components: { Delete },
+
   setup(props, { emit }) {
-    let timer: NodeJS.Timeout | null = null;
+    let timer: any | null = null;
     const mForm = inject<FormState | undefined>('mForm');
 
     const elTable = ref<any>();
@@ -348,20 +349,15 @@ export default defineComponent({
       emit('change', props.model[modelName.value]);
     };
 
-    if (!loadedAMapJS && firstLoadingAMapJS && !(globalThis as any).XLSX) {
-      firstLoadingAMapJS = false; // 马上置为false 只让第一个created组件去请求js
-      asyncLoadJs('https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js')
-        .then(() => {
-          loadedAMapJS = true;
-        })
-        .catch(() => {
-          firstLoadingAMapJS = true; // 出错置为true 下次进来还是能重新请求js
-        });
+    if (!(globalThis as any).XLSX) {
+      asyncLoadJs('https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js');
     }
 
     onMounted(() => {
       if (props.config.defautSort) {
         sortChange(props.config.defautSort);
+      } else if (props.config.defaultSort) {
+        sortChange(props.config.defaultSort);
       }
 
       if (props.sort && props.sortKey) {

package/src/index.ts

@@ -100,7 +100,7 @@ const install = (app: App, opt: any) => {
   app.component(Panel.name, Panel);
   app.component(Row.name, Row);
   app.component(MStep.name, MStep);
-  app.component(Table.name, Table);
+  app.component('m-form-table', Table);
   app.component(Tabs.name, Tabs);
   app.component(Text.name, Text);
   app.component(Number.name, Number);

package/src/schema.ts

@@ -97,7 +97,7 @@ export interface ContainerCommonConfig {
 export interface Rule {
   message?: string;
   /** 系统提供的验证器类型。有：string,number,boolean,method,regexp,integer,float,array,object,enum,date,url,hex,email,any */
-  type: string;
+  type?: string;
   /** 是否必填 */
   required?: boolean;
   /** 自定义验证器 */
@@ -570,18 +570,29 @@ export interface TableConfig extends FormItem {
   tableItems?: ColumnConfig[];
   groupItems?: ColumnConfig[];
   enableToggleMode?: boolean;
+  /** 最大行数 */
   max?: number;
+  /** 最大高度 */
   maxHeight?: number | string;
   border?: boolean;
+  /** 显示行号 */
+  showIndex?: boolean;
   enum?: any[];
+  /** 是否显示添加按钮 */
   addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
+  /** 是否显示删除按钮 */
   delete?: (model: any, index: number, values: any) => boolean | boolean;
+  /** 是否显示导入按钮 */
   importable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
+  /** 是否显示checkbox */
   selection?: (mForm: FormState | undefined, data: any) => boolean | boolean | 'single';
+  /** 新增的默认行 */
   defaultAdd?: (mForm: FormState | undefined, data: any) => any;
   onSelect?: (mForm: FormState | undefined, data: any) => any;
   defautSort?: SortProp;
+  defaultSort?: SortProp;
   dropSort?: boolean;
+  /** 是否显示全屏按钮 */
   enableFullscreen?: boolean;
   fixed?: boolean;
   itemExtra?: string | FilterFunction;

package/src/theme/table.scss

@@ -65,4 +65,9 @@
   .el-form-item {
     margin-bottom: 0;
   }
+
+  .m-table-delete-icon {
+    color: #f56c6c;
+    cursor: pointer;
+  }
 }

package/types/FormDialog.vue.d.ts

@@ -5,6 +5,9 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: () => {};
     };
+    parentValues: {
+        type: ObjectConstructor;
+    };
     width: (NumberConstructor | StringConstructor)[];
     fullscreen: BooleanConstructor;
     title: StringConstructor;
@@ -272,6 +275,9 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: () => {};
     };
+    parentValues: {
+        type: ObjectConstructor;
+    };
     width: (NumberConstructor | StringConstructor)[];
     fullscreen: BooleanConstructor;
     title: StringConstructor;

package/types/containers/GroupList.vue.d.ts

@@ -20,6 +20,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
+    Grid: import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
     addable: import("vue").ComputedRef<boolean | "undefined">;
     toggleMode: () => void;
     removeHandler: (index: number) => false | undefined;

package/types/containers/Table.vue.d.ts

@@ -38,6 +38,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    showIndex: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     mForm: FormState | undefined;
     pagesize: import("vue").Ref<number>;
@@ -115,6 +119,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    showIndex: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onSelect?: ((...args: any[]) => any) | undefined;
@@ -122,6 +130,7 @@ declare const _default: import("vue").DefineComponent<{
     config: TableConfig;
     enableToggleMode: boolean;
     sort: boolean;
+    showIndex: boolean;
     model: Record<string, any>;
     sortKey: string;
 }>;

package/types/fields/Link.vue.d.ts

@@ -37,6 +37,9 @@ declare const _default: import("vue").DefineComponent<{
                 type: ObjectConstructor;
                 default: () => {};
             };
+            parentValues: {
+                type: ObjectConstructor;
+            };
             width: (NumberConstructor | StringConstructor)[];
             fullscreen: BooleanConstructor;
             title: StringConstructor;
@@ -75,6 +78,9 @@ declare const _default: import("vue").DefineComponent<{
                 type: ObjectConstructor;
                 default: () => {};
             };
+            parentValues: {
+                type: ObjectConstructor;
+            };
             width: (NumberConstructor | StringConstructor)[];
             fullscreen: BooleanConstructor;
             title: StringConstructor;
@@ -372,6 +378,9 @@ declare const _default: import("vue").DefineComponent<{
             type: ObjectConstructor;
             default: () => {};
         };
+        parentValues: {
+            type: ObjectConstructor;
+        };
         width: (NumberConstructor | StringConstructor)[];
         fullscreen: BooleanConstructor;
         title: StringConstructor;

package/types/schema.d.ts

@@ -71,7 +71,7 @@ export interface ContainerCommonConfig {
 export interface Rule {
     message?: string;
     /** 系统提供的验证器类型。有：string,number,boolean,method,regexp,integer,float,array,object,enum,date,url,hex,email,any */
-    type: string;
+    type?: string;
     /** 是否必填 */
     required?: boolean;
     /** 自定义验证器 */
@@ -462,18 +462,29 @@ export interface TableConfig extends FormItem {
     tableItems?: ColumnConfig[];
     groupItems?: ColumnConfig[];
     enableToggleMode?: boolean;
+    /** 最大行数 */
     max?: number;
+    /** 最大高度 */
     maxHeight?: number | string;
     border?: boolean;
+    /** 显示行号 */
+    showIndex?: boolean;
     enum?: any[];
+    /** 是否显示添加按钮 */
     addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
+    /** 是否显示删除按钮 */
     delete?: (model: any, index: number, values: any) => boolean | boolean;
+    /** 是否显示导入按钮 */
     importable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
+    /** 是否显示checkbox */
     selection?: (mForm: FormState | undefined, data: any) => boolean | boolean | 'single';
+    /** 新增的默认行 */
     defaultAdd?: (mForm: FormState | undefined, data: any) => any;
     onSelect?: (mForm: FormState | undefined, data: any) => any;
     defautSort?: SortProp;
+    defaultSort?: SortProp;
     dropSort?: boolean;
+    /** 是否显示全屏按钮 */
     enableFullscreen?: boolean;
     fixed?: boolean;
     itemExtra?: string | FilterFunction;