mooho-base-admin-plus 0.4.82 → 0.4.84

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mooho-base-admin-plus",
   "description": "MOOHO basic framework for admin by Vue3",
-  "version": "0.4.82",
+  "version": "0.4.84",
   "author": "jinyifan <jinyifan@mooho.com.cn>",
   "dotnetVersion": "1.4.0",
   "license": "MIT",
@@ -10,9 +10,7 @@
   "scripts": {
     "dev": "vite --open",
     "build": "vite build",
-    "package": "vite build --mode lib",
-    "styleguide": "vue-styleguidist server",
-    "styleguide:build": "vue-styleguidist build"
+    "package": "vite build --mode lib"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",

package/public/setting.js

@@ -16,14 +16,61 @@ window.setting = {
     siderTheme: 'dark',
     // 顶栏风格，可选值为 light、dark 或 primary
     headerTheme: 'light',
-    // 是否根据操作系统缩放比例，自动调整比例
-    autoFixRatio: true,
-    // 是否显示多语言
-    showI18n: true,
-    // 是否显示通知
-    showNotice: true,
+    // 顶栏是否置顶，开启后会覆盖侧边栏，需开启 headerFix
+    headerStick: false,
     // 是否开启多 Tabs 页签
     tabs: true,
+    // 多 Tabs 页签是否显示图标，开启 tabs 时有效
+    showTabsIcon: true,
+    // 是否固定多 Tabs 多页签
+    tabsFix: true,
+    // 再次点击 Tabs 页签时，是否重载当前页面
+    tabsReload: false,
+    // 页签是否支持拖拽排序
+    tabsOrder: true,
+    // 是否固定侧边栏
+    siderFix: true,
+    // 是否固定顶栏
+    headerFix: true,
+    // 是否在下滑时隐藏顶栏，需开启 headerFix，如果开启了 tabsFix，Tabs 也会被隐藏
+    headerHide: true,
+    // 是否显示顶部菜单栏
+    // 一般来说，侧边的菜单栏足以满足大部分业务，如需动态切换侧边栏，可开启此选项启用顶部一级菜单，此时侧边栏将作为二级菜单
+    headerMenu: false,
+    // 侧边菜单栏是否开启手风琴模式
+    menuAccordion: true,
+    // 是否显示折叠侧边栏按钮，移动端下会自动强制开启
+    showSiderCollapse: true,
+    // 侧边菜单栏是否默认折起
+    menuCollapse: false,
+    // 再次点击当前侧边菜单时，是否重载当前页面
+    menuSiderReload: false,
+    // 再次点击当前顶部菜单时，是否重载当前页面
+    menuHeaderReload: false,
+    // 侧边菜单折起时，是否在子菜单前显示父级菜单名称
+    showCollapseMenuTitle: false,
+    // 是否显示重载按钮
+    showReload: false,
+    // 是否显示搜索
+    showSearch: false,
+    // 是否显示通知
+    showNotice: false,
+    // 是否显示全屏
+    showFullscreen: true,
+    // 在手机访问时，是否在顶部显示小尺寸 logo
+    showMobileLogo: true,
+    // 是否显示全局面包屑，开启 headerMenu 时不可用
+    showBreadcrumb: true,
+    // 全局面包屑是否显示图标，开启 showBreadcrumb 时有效
+    showBreadcrumbIcon: false,
+    // 是否显示多语言
+    showI18n: true,
+    // 是否支持动态修改布局配置，移动端下会自动强制关闭
+    enableSetting: false,
+    // 退出登录时，是否二次确认
+    logoutConfirm: true,
+    // 是否根据操作系统缩放比例，自动调整比例
+    autoFixRatio: true,
     // 是否允许点击遮罩层关闭
     maskClosable: true,
     // 是否允许拖动

package/src/api/model.js

@@ -218,14 +218,12 @@ export default {
       result = await request({
         url: `api/Model/group`,
         method: 'post',
-        responseType: 'blob',
         data
       });
     } else {
       result = await request({
         url: `api/${tableView.model}/${path}`,
         method: method,
-        responseType: 'blob',
         data
       });
     }

package/src/components/view/view-form-draggable.vue

@@ -1,47 +1,49 @@
 <template>
   <div>
     <Form ref="form" :model="data" label-position="top" label-colon="：" class="ivu-mt draggable">
-      <draggable v-model="columns" item-key="index" :animation="500" :scroll="true" group="sort" ghostClass="ghost-style">
+      <draggable v-model="columns" item-key="index" :animation="500" :scroll="true" group="sort" @start="start" @end="end" style="display: flex; flex-flow: row wrap">
         <template #item="{ element: column, index }">
-          <div :style="'width:' + getWidth(column) + '%; float:left;'" @mouseover="mouseover(column)" @mouseleave="mouseleave(column)">
-            <div style="float: right; margin-right: 20px">
-              <Button
-                size="small"
-                v-show="column.showButton"
-                @click="edit(column, index)"
-                icon="md-cog"
-                type="primary"
-                style="margin-right: 4px; width: 22px; height: 22px"
-              ></Button>
-              <Button
-                size="small"
-                v-show="column.showButton"
-                @click="remove(column, index)"
-                icon="md-close"
-                type="warning"
-                style="margin-right: 4px; width: 22px; height: 22px"
-              ></Button>
+          <div
+            style="position: relative; min-height: 1px"
+            :style="
+              'flex: 0 0 ' +
+              getWidth(column) +
+              '%; max-width:' +
+              getWidth(column) +
+              '%;' +
+              (column._actived ? 'border: dashed #ddd 1px; background-color: #ffefd5;' : '') +
+              (index < columns.length - 1 && columns[index + 1].newLine ? 'margin-right: ' + getRightWidth(index) + '%' : '')
+            "
+            @mouseover="mouseover(column)"
+            @mouseleave="mouseleave(column)"
+          >
+            <div style="position: absolute; z-index: 100; top: 4px; right: 4px">
+              <Button size="small" v-if="column._editable" @click="edit(column, index)" icon="md-cog" type="primary" style="margin-right: 4px; width: 22px; height: 22px"></Button>
+              <Button size="small" v-show="column._editable" @click="remove(column, index)" icon="md-close" type="warning" style="width: 22px; height: 22px"></Button>
             </div>
             <div :key="column.code" v-if="column.controlType === 'Placeholder'" style="margin-bottom: 0px"></div>
             <div :key="column.code" v-if="column.controlType === 'Title'">
-              <div class="form-title" :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }" v-html="column.name"></div>
+              <div class="form-title" :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }">
+                {{ getNameI18n(column) }} {{ showData(data, column) }}
+              </div>
             </div>
             <div v-if="column.controlType === 'Table'">
               <Divider :plain="true" dashed orientation="left" size="small">
-                <span class="title">{{ column.name }}</span>
+                <span class="title">{{ getNameI18n(column) }}</span>
               </Divider>
               <view-table :static="true" :view-code="column.source" :readonly="column.isReadonly" :embedded="true"></view-table>
             </div>
             <div v-if="column.controlType === 'List'">
               <Divider :plain="true" dashed orientation="left" size="small">
-                <span class="title">{{ column.name }}</span>
+                <span class="title">{{ getNameI18n(column) }}</span>
               </Divider>
               <view-table :static="true" :view-code="column.source" :readonly="true" :embedded="true"></view-table>
             </div>
             <FormItem
-              :label="column.name"
+              :label="getNameI18n(column)"
               :prop="column.code"
               :key="column.code"
+              :rules="getRules(column)"
               :error="column.code == null ? $t('Front_Label_Column_Not_Bind') : null"
               v-if="column.controlType !== 'Placeholder' && column.controlType !== 'Title' && column.controlType !== 'Table' && column.controlType !== 'List'"
             >
@@ -52,7 +54,7 @@
                 </div>
               </template>
               <template v-if="column.controlType === 'Hyperlink'">
-                <a :href="getHyperlink(data, column.hyperlink)" :target="column.isNewWindow ? '_blank' : ''">
+                <a href="#" :target="column.isNewWindow ? '_blank' : ''">
                   <span v-html="showData(data, column)"></span>
                 </a>
               </template>
@@ -394,7 +396,9 @@
         tabName: '',
         rules: {},
         data: null,
-        compareData: null
+        compareData: null,
+        dragging: false,
+        draggingColumn: null
       };
     },
     async created() {},
@@ -421,6 +425,101 @@
             return (100 * 4) / 24;
         }
       },
+      getRules(column) {
+        if (!column.isShow) {
+          return [];
+        }
+
+        let rules = [];
+
+        if (column.isRequired) {
+          if (
+            column.controlType == 'Date' ||
+            column.controlType == 'DateTime' ||
+            column.controlType == 'Year' ||
+            column.controlType == 'Month' ||
+            column.controlType == 'DateRange'
+          ) {
+            rules.push({
+              pattern: /.+/,
+              required: true,
+              message: this.$t('Front_Msg_Please_Input'),
+              trigger: 'blur,change'
+            });
+          } else {
+            rules.push({
+              type: this.getDataType(column),
+              required: true,
+              message: this.$t('Front_Msg_Please_Input'),
+              trigger: 'blur,change'
+            });
+          }
+        }
+
+        if (column.pattern && column.controlType == 'TextInput') {
+          rules.push({
+            type: this.getDataType(column),
+            pattern: column.pattern,
+            message: this.$t('Front_Msg_Validation_Pattern'),
+            trigger: 'blur,change'
+          });
+        }
+
+        if (column.maxValue != null) {
+          rules.push({
+            type: this.getDataType(column),
+            max: column.maxValue,
+            message: this.$t('Front_Msg_Validation_Max_Value|' + column.maxValue),
+            trigger: 'blur,change'
+          });
+        }
+
+        if (column.minValue != null) {
+          rules.push({
+            type: this.getDataType(column),
+            min: column.minValue,
+            message: this.$t('Front_Msg_Validation_Min_Value|' + column.minValue),
+            trigger: 'blur,change'
+          });
+        }
+
+        if (column.maxLength != null) {
+          rules.push({
+            type: this.getDataType(column),
+            length: column.maxLength,
+            message: this.$t('Front_Msg_Validation_Max_Length|' + column.maxLength),
+            trigger: 'blur,change'
+          });
+        }
+
+        return rules;
+      },
+      // 获取数据类型
+      getDataType(column) {
+        if (!(column.dataType || '').trim()) {
+          return null;
+        }
+        if (column.dataType.indexOf('Enum:') === 0) {
+          return 'string';
+        }
+
+        switch (column.dataType) {
+          case 'String':
+          case 'BigInteger':
+            return 'string';
+          case 'Boolean':
+            return 'boolean';
+          case 'DateTime':
+            return 'date';
+          case 'Float':
+          case 'Double':
+          case 'Decimal':
+            return 'number';
+          case 'Short':
+          case 'Integer':
+            return 'integer';
+        }
+      },
       // 根据选项卡序号返回列
       tabColumns(index) {
         return this.columns.filter(item => {
@@ -604,7 +703,7 @@
       },
       // 获取数据源
       getDataSource(data, column) {
-        if (!column.isStaticItem && column.dataType.indexOf('Enum:') === 0) {
+        if (!column.isStaticItem && column.dataType && column.dataType.indexOf('Enum:') === 0) {
           // 枚举
           return this.getEnumList(column.dataType.split(':')[1]);
         } else {
@@ -784,16 +883,6 @@
 
         return data;
       },
-      // 鼠标移入
-      mouseover(column) {
-        column.showButton = true;
-        //this.$forceUpdate();
-      },
-      // 鼠标移出
-      mouseleave(column) {
-        column.showButton = false;
-        //this.$forceUpdate();
-      },
       // 编辑
       edit(column, index) {
         this.$emit('edit', { column, index });
@@ -843,6 +932,94 @@
         } else {
           return value;
         }
+      },
+      // 获取多语言名称
+      getNameI18n(column) {
+        if (this.layout.showI18n) {
+          if (column.code) {
+            let key = 'DataView_' + this.formView.code + '_' + column.code;
+            let text = this.$t(key);
+            if (text == key) {
+              return column.name;
+            } else {
+              return text;
+            }
+          } else {
+            return column.name;
+          }
+        } else {
+          return column.name;
+        }
+      },
+      getRightWidth(index) {
+        let current = 0;
+
+        for (let i = 0; i <= index; i++) {
+          let width = 0;
+
+          switch (this.columns[i].columnWidth) {
+            case 'Column12':
+              width = 24;
+              break;
+            case 'Column9':
+              width = 18;
+              break;
+            case 'Column8':
+              width = 16;
+              break;
+            case 'Column6':
+              width = 12;
+              break;
+            case 'Column4':
+              width = 8;
+              break;
+            case 'Column3':
+              width = 6;
+              break;
+            case 'Column2':
+              width = 4;
+              break;
+          }
+
+          if (width == 24) {
+            current = 0;
+          } else if (this.columns[i].newLine || current + width > 24) {
+            current = width;
+          } else if (current + width == 24) {
+            current = 0;
+          } else {
+            current = current + width;
+          }
+        }
+
+        return current == 0 ? 0 : (100 * (24 - current)) / 24;
+      },
+      // 鼠标移入
+      mouseover(column) {
+        if (!this.dragging) {
+          column._editable = true;
+        }
+
+        //this.$forceUpdate();
+      },
+      // 鼠标移出
+      mouseleave(column) {
+        if (!this.dragging) {
+          column._editable = false;
+        }
+        //this.$forceUpdate();
+      },
+      start(evt) {
+        this.draggingColumn = this.columns[evt.oldIndex];
+        this.draggingColumn._actived = true;
+        this.draggingColumn._editable = false;
+
+        this.dragging = true;
+      },
+      end(evt) {
+        this.draggingColumn._actived = false;
+
+        this.dragging = false;
       }
     }
   };

package/src/components/view/view-form.vue

@@ -860,14 +860,14 @@
               pattern: /.+/,
               required: true,
               message: this.$t('Front_Msg_Please_Input'),
-              trigger: this.getTrigger(column)
+              trigger: 'blur,change'
             });
           } else {
             rules.push({
               type: this.getDataType(column),
               required: true,
               message: this.$t('Front_Msg_Please_Input'),
-              trigger: this.getTrigger(column)
+              trigger: 'blur,change'
             });
           }
         }
@@ -877,7 +877,7 @@
             type: this.getDataType(column),
             pattern: column.pattern,
             message: this.$t('Front_Msg_Validation_Pattern'),
-            trigger: this.getTrigger(column)
+            trigger: 'blur,change'
           });
         }
 
@@ -886,7 +886,7 @@
             type: this.getDataType(column),
             max: column.maxValue,
             message: this.$t('Front_Msg_Validation_Max_Value|' + column.maxValue),
-            trigger: this.getTrigger(column)
+            trigger: 'blur,change'
           });
         }
 
@@ -895,7 +895,7 @@
             type: this.getDataType(column),
             min: column.minValue,
             message: this.$t('Front_Msg_Validation_Min_Value|' + column.minValue),
-            trigger: this.getTrigger(column)
+            trigger: 'blur,change'
           });
         }
 
@@ -904,7 +904,7 @@
             type: this.getDataType(column),
             length: column.maxLength,
             message: this.$t('Front_Msg_Validation_Max_Length|' + column.maxLength),
-            trigger: this.getTrigger(column)
+            trigger: 'blur,change'
           });
         }
 
@@ -1414,14 +1414,6 @@
             return 'integer';
         }
       },
-      // 获取触发器
-      getTrigger(column) {
-        if (column.controlType === 'TextInput' || column.controlType === 'NumberInput') {
-          return 'blur,change';
-        } else {
-          return 'blur,change';
-        }
-      },
       // 根据表达式取值（带其他）
       parseDataWithOther(model, column) {
         let expression = column.code;

package/src/i18n/index.js

@@ -1,4 +1,4 @@
-import { createI18n } from 'vue-i18n/index';
+import { createI18n } from 'vue-i18n';
 //import store from '../store/index';
 //import messages from './locale';
 

package/src/index.js

@@ -178,7 +178,7 @@ const created = async app => {
   }
 
   // 加载多语言
-  await store.dispatch('admin/i18n/load', app);
+  store.dispatch('admin/i18n/load', app);
   // 初始化动态路由
   //let dynamicRoutes = await dynamicRouter.init(router, pages, layout);
   // 处理路由 得到每一级的路由设置

package/styleguide.config.js

@@ -1,22 +0,0 @@
-module.exports = {
-  title: 'mooho-base-admin-plus',
-  components: [
-    'src/components/view/modal-form.vue',
-    'src/components/view/modal-table.vue',
-    'src/components/view/view-form.vue',
-    'src/components/view/view-table.vue',
-    'src/components/view/view-chart.vue',
-    'src/components/input/*.vue'
-  ],
-  styleguideDir: 'styleguide-dist',
-  // 在编辑器的右上角添加一个小按钮，用于将编辑器的内容复制到剪贴板
-  copyCodeButton: true,
-  // 是否每个章节是一个独立的页面. 默认:false
-  pagePerSection: false,
-  // props/events/slot的说明默认是展开还是收缩: expand / collapse / hide
-  usageMode: 'expand',
-  // 左侧导航默认是展开还是收缩: expand / collapse / hide
-  tocMode: 'expand',
-  // 显示 prop、事件、槽或方法是否来自当前文件或在 mixin 或扩展组件中配置。如果它是外部的，它会显示组件的名称，并在悬停时显示文件的相对路径。
-  displayOrigins: true
-};