mooho-base-admin-plus 0.1.60 → 0.1.63

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mooho-base-admin-plus",
   "description": "MOOHO basic framework for admin by Vue3",
-  "version": "0.1.60",
+  "version": "0.1.63",
   "author": "jinyifan <jinyifan@mooho.com.cn>",
   "dotnetVersion": "1.3.97",
   "license": "MIT",
@@ -20,6 +20,7 @@
     "@fortawesome/fontawesome-free": "^5.13.0",
     "axios": "^0.26.0",
     "date-fns": "^2.9.0",
+    "ckeditor4-integrations-common": "^1.0.0",
     "echarts": "^5.3.2",
     "file-saver": "^2.0.2",
     "js-cookie": "^3.0.1",

package/src/components/richEditor/index.vue

@@ -1,22 +1,20 @@
 <template>
-  <ckeditor
-    :model-value="value"
-    @update:model-value="$event => $emit('input', $event)"
-    :readOnly="readonly"
-    :style="{ width: width == null ? null : width + 'px' }"
-    :editorUrl="editorUrl"
-    :config="config"
-  ></ckeditor>
+  <div id="editor"></div>
 </template>
+
 <script>
+  /* global CKEDITOR */
+
   import mixinPage from '../../mixins/page';
   import util from '../../libs/util';
+  import { debounce, getEditorNamespace } from 'ckeditor4-integrations-common';
 
   export default {
     mixins: [mixinPage],
     props: {
-      value: {
-        type: String
+      modelValue: {
+        type: String,
+        default: ''
       },
       // 只读
       readonly: {
@@ -31,9 +29,15 @@
       },
       editorUrl: {
         type: String,
-        default: 'https://cdn.ckeditor.com/4.13.0/full/ckeditor.js'
+        default: 'https://cdn.ckeditor.com/4.19.0/standard-all/ckeditor.js'
       }
     },
+    data() {
+      return {
+        instance: null, // 当前实例
+        $_destroyed: false // 是否销毁
+      };
+    },
     computed: {
       config() {
         const token = util.cookies.get('token');
@@ -81,6 +85,107 @@
         };
       }
     },
-    methods: {}
+    mounted() {
+      getEditorNamespace(this.editorUrl, namespace => {
+        this.$emit('namespaceloaded', namespace);
+      }).then(() => {
+        if (this.$_destroyed) {
+          return;
+        }
+
+        const config = this.prepareConfig();
+
+        CKEDITOR.replace('editor', config);
+      });
+    },
+    beforeUnmount() {
+      if (this.instance) {
+        this.instance.destroy();
+      }
+
+      this.$_destroyed = true;
+    },
+    watch: {
+      modelValue(val) {
+        if (this.instance && this.instance.getData() !== val) {
+          this.instance.setData(val);
+        }
+      },
+
+      readonly(val) {
+        if (this.instance) {
+          this.instance.setReadOnly(val);
+        }
+      }
+    },
+    methods: {
+      prepareConfig() {
+        const config = this.config || {};
+        config.on = config.on || {};
+
+        if (config.delayIfDetached === undefined) {
+          config.delayIfDetached = true;
+        }
+        if (this.readonly !== null) {
+          config.readOnly = this.readonly;
+        }
+
+        const userInstanceReadyCallback = config.on.instanceReady;
+
+        config.on.instanceReady = evt => {
+          this.instance = evt.editor;
+
+          this.$nextTick().then(() => {
+            this.prepareComponentData();
+
+            if (userInstanceReadyCallback) {
+              userInstanceReadyCallback(evt);
+            }
+          });
+        };
+
+        return config;
+      },
+      prepareComponentData() {
+        const data = this.modelValue;
+
+        this.instance.fire('lockSnapshot');
+
+        this.instance.setData(data, {
+          callback: () => {
+            this.$_setUpEditorEvents();
+
+            const newData = this.instance.getData();
+
+            // Locking the snapshot prevents the 'change' event.
+            // Trigger it manually to update the bound data.
+            if (data !== newData) {
+              // this.$once('input', () => {
+              //   this.$emit('ready', this.instance);
+              // });
+
+              this.$emit('update:model-value', newData);
+            }
+
+            this.instance.fire('unlockSnapshot');
+          }
+        });
+      },
+      $_setUpEditorEvents() {
+        const editor = this.instance;
+
+        const onChange = debounce(evt => {
+          const data = editor.getData();
+
+          // Editor#change event might be fired without an actual data change.
+          if (this.modelValue !== data) {
+            // The compatibility with the v-model and general Vue.js concept of input–like components.
+            this.$emit('update:model-value', data, evt, editor);
+          }
+        }, 80);
+
+        editor.on('change', onChange);
+      }
+    }
   };
 </script>

package/src/components/view/modal-table.vue

@@ -42,6 +42,7 @@
         :filter-enable="filterEnable"
         :page-enable="pageEnable"
         :embedded="embedded"
+        :before-load-data="beforeLoadData"
         :on-search="onSearch"
         :summary-method="summaryMethod"
         :page-size-opts="pageSizeOpts"
@@ -275,6 +276,12 @@
         type: Boolean,
         default: false
       },
+      /**
+       * 加载数据前
+       */
+      beforeLoadData: {
+        type: Function
+      },
       /**
        * 查询方法
        */

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

@@ -177,7 +177,7 @@
        *
        * @public
        */
-      loadChart(data) {
+      async loadChart(data) {
         if (data) {
           this.data = data;
         }
@@ -199,6 +199,11 @@
             }
           };
 
+          // 预先加载枚举值
+          if (this.setting.chartGroupCodeType && this.setting.chartGroupCodeType.indexOf('Enum:') === 0) {
+            await this.loadEnum(this.setting.chartGroupCodeType.replace('Enum:', ''));
+          }
+
           if (!this.setting.chartCustomSeries) {
             if (this.setting.chartType != 'Pie') {
               let xAxis = Array.from(
@@ -222,7 +227,13 @@
                 group = Array.from(
                   new Set(
                     this.data.map(item => {
-                      return this.parseData(item, this.setting.chartGroupCode);
+                      let value = this.parseData(item, this.setting.chartGroupCode);
+
+                      if (this.setting.chartGroupCodeType && this.setting.chartGroupCodeType.indexOf('Enum:') === 0) {
+                        value = this.getEnum(this.setting.chartGroupCodeType.replace('Enum:', ''), value);
+                      }
+
+                      return value;
                     })
                   )
                 );
@@ -234,7 +245,13 @@
                 let keyData = {};
                 this.data
                   .filter(data => {
-                    return (item == null && group.length == 1) || this.parseData(data, this.setting.chartGroupCode) == item;
+                    let value = this.parseData(data, this.setting.chartGroupCode);
+
+                    if (this.setting.chartGroupCodeType && this.setting.chartGroupCodeType.indexOf('Enum:') === 0) {
+                      value = this.getEnum(this.setting.chartGroupCodeType.replace('Enum:', ''), value);
+                    }
+
+                    return (item == null && group.length == 1) || value == item;
                   })
                   .forEach(data => {
                     let key = this.parseData(data, this.setting.chartXCode);
@@ -265,7 +282,13 @@
                 group = Array.from(
                   new Set(
                     this.data.map(item => {
-                      return this.parseData(item, this.setting.chartGroupCode);
+                      let value = this.parseData(item, this.setting.chartGroupCode);
+
+                      if (this.setting.chartGroupCodeType && this.setting.chartGroupCodeType.indexOf('Enum:') === 0) {
+                        value = this.getEnum(this.setting.chartGroupCodeType.replace('Enum:', ''), value);
+                      }
+
+                      return value;
                     })
                   )
                 );
@@ -277,7 +300,13 @@
                 let keyData = {};
                 this.data
                   .filter(data => {
-                    return (item == null && group.length == 1) || this.parseData(data, this.setting.chartGroupCode) == item;
+                    let value = this.parseData(data, this.setting.chartGroupCode);
+
+                    if (this.setting.chartGroupCodeType && this.setting.chartGroupCodeType.indexOf('Enum:') === 0) {
+                      value = this.getEnum(this.setting.chartGroupCodeType.replace('Enum:', ''), value);
+                    }
+
+                    return (item == null && group.length == 1) || value == item;
                   })
                   .forEach(data => {
                     let key = this.parseData(data, this.setting.chartXCode);
@@ -411,7 +440,7 @@
           row[code] = checked.code;
           row[code + 'Type'] = checked.dataType;
 
-          //this.$forceUpdate();
+          this.$forceUpdate();
 
           if (table) {
             table.loadData();

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="{ 'full-screen': isFullScreen }">
     <Divider :plain="true" v-if="title != null" dashed orientation="left" size="small">
       <span class="title">{{ title }}</span>
     </Divider>
@@ -8,66 +8,69 @@
     -->
     <slot name="top"></slot>
     <Form v-if="tableView.filterEnable && filterEnable" :model="filter" :label-width="125" label-colon="：" label-position="right" class="filter" @submit.prevent>
-      <Row :gutter="24" type="flex" justify="end">
-        <!--
+      <div ref="filterCommand">
+        <Row :gutter="24" type="flex" justify="end">
+          <!--
             @slot 筛选栏
             @binding {object} table 表格对象
             @binding {object} filter 筛选对象
         -->
-        <slot name="filter" :table="this" :filter="filter">
-          <!--
+          <slot name="filter" :table="this" :filter="filter">
+            <!--
               @slot 自定义筛选栏
           -->
-          <slot name="customFilter"></slot>
-          <table-filter
-            ref="tableFilter"
-            :data="filter"
-            :columns="filterColumns"
-            :isDataSource="tableView.isDataSource"
-            :keywordEnable="tableView.keywordEnable"
-            @on-keyup="onKeyup"
-          >
-            <template #column="{ filter, column }">
-              <!--
+            <slot name="customFilter"></slot>
+            <table-filter
+              ref="tableFilter"
+              :data="filter"
+              :columns="filterColumns"
+              :isDataSource="tableView.isDataSource"
+              :keywordEnable="tableView.keywordEnable"
+              @on-keyup="onKeyup"
+            >
+              <template #column="{ filter, column }">
+                <!--
                   @slot 筛选栏自定义列
                   @binding {object} filter 筛选条件对象
                   @binding {object} column 列对象
                   @binding {string} code 列代码
               -->
-              <slot name="filterColumn" :filter="filter" :column="column" :code="column.code"></slot>
-            </template>
-          </table-filter>
-          <Col v-bind="getGrid(tableView.filterWidth)" :style="{ 'text-align': tableView.filterAlign == null ? 'left' : tableView.filterAlign.toLowerCase() }">
-            <FormItem :label-width="0">
-              <Button type="info" v-if="tableView.keywordEnable || filterColumns.length > 0" custom-icon="fa fa-search" @click="search()" size="small">查询</Button>
-              <Button type="primary" v-if="tableView.createEnable && createEnable" custom-icon="fa fa-plus" @click="create()" size="small">新建</Button>
-              <!--
+                <slot name="filterColumn" :filter="filter" :column="column" :code="column.code"></slot>
+              </template>
+            </table-filter>
+            <Col v-bind="getGrid(tableView.filterWidth)" :style="{ 'text-align': tableView.filterAlign == null ? 'left' : tableView.filterAlign.toLowerCase() }">
+              <FormItem :label-width="0">
+                <Button type="info" v-if="tableView.keywordEnable || filterColumns.length > 0" custom-icon="fa fa-search" @click="search()" size="small">查询</Button>
+                <Button type="primary" v-if="tableView.createEnable && createEnable" custom-icon="fa fa-plus" @click="create()" size="small">新建</Button>
+                <!--
                   @slot 筛选栏按钮
               -->
-              <slot name="filterCommand"></slot>
-              <Dropdown
-                v-if="tableView.exportEnable || tableView.exportPdfEnable || tableView.printEnable || tableView.batchEditEnable"
-                style="margin-left: 4px"
-                @on-click="moreClick"
-              >
-                <Button type="info" size="small">
-                  更多...
-                  <Icon type="ios-arrow-down" />
-                </Button>
-                <template #list>
-                  <DropdownMenu>
-                    <DropdownItem v-if="tableView.exportEnable" name="exportExcel">导出 Excel</DropdownItem>
-                    <DropdownItem v-if="tableView.exportPdfEnable" name="exportPdf">导出 PDF</DropdownItem>
-                    <DropdownItem v-if="tableView.printEnable" name="print">打印</DropdownItem>
-                    <DropdownItem v-if="tableView.batchEditEnable" name="batchEdit">批量编辑</DropdownItem>
-                  </DropdownMenu>
-                </template>
-              </Dropdown>
-              <Button type="error" title="筛选设置" custom-icon="fa fa-filter" size="small" v-if="settingEnable && allow('permission/tableView')" @click="filterSettingOpen" />
-            </FormItem>
-          </Col>
-        </slot>
-      </Row>
+                <slot name="filterCommand"></slot>
+                <Dropdown
+                  v-if="tableView.exportEnable || tableView.exportPdfEnable || tableView.printEnable || tableView.batchEditEnable"
+                  style="margin-left: 4px"
+                  @on-click="moreClick"
+                >
+                  <Button type="info" size="small">
+                    更多...
+                    <Icon type="ios-arrow-down" />
+                  </Button>
+                  <template #list>
+                    <DropdownMenu>
+                      <DropdownItem v-if="tableView.exportEnable" name="exportExcel">导出 Excel</DropdownItem>
+                      <DropdownItem v-if="tableView.exportPdfEnable" name="exportPdf">导出 PDF</DropdownItem>
+                      <DropdownItem v-if="tableView.printEnable" name="print">打印</DropdownItem>
+                      <DropdownItem v-if="tableView.batchEditEnable" name="batchEdit">批量编辑</DropdownItem>
+                    </DropdownMenu>
+                  </template>
+                </Dropdown>
+                <Button type="error" title="筛选设置" custom-icon="fa fa-filter" size="small" v-if="settingEnable && allow('permission/tableView')" @click="filterSettingOpen" />
+                <Button v-if="tableView.fullEnable" type="info" title="全屏" custom-icon="fa fa-expand-arrows-alt" size="small" @click="isFullScreen = !isFullScreen" />
+              </FormItem>
+            </Col>
+          </slot>
+        </Row>
+      </div>
     </Form>
     <!--
         @slot 中部
@@ -541,7 +544,8 @@
         itemSelectActive: false,
         commandButtons: [],
         preview: false,
-        imageUrl: null
+        imageUrl: null,
+        isFullScreen: false
       };
     },
     async created() {
@@ -713,6 +717,12 @@
         type: Boolean,
         default: false
       },
+      /**
+       * 加载数据前
+       */
+      beforeLoadData: {
+        type: Function
+      },
       /**
        * 查询方法
        */
@@ -736,7 +746,11 @@
       // 表格最大高度，固定表头
       maxHeight() {
         if (this.height == null) {
-          return document.body.offsetHeight - 400;
+          if (this.isFullScreen) {
+            return document.body.offsetHeight - 100 - this.$refs.filterCommand.offsetHeight;
+          } else {
+            return document.body.offsetHeight - 400;
+          }
         } else {
           return this.height;
         }
@@ -969,6 +983,11 @@
           }
         }
 
+        // 加载前动作
+        if (typeof this.beforeLoadData == 'function') {
+          this.beforeLoadData();
+        }
+
         if (staticData) {
           this.staticData = this.copy(staticData);
         }

package/src/layouts/basic-layout/index.vue

@@ -19,7 +19,7 @@
             <i-menu-head v-if="headerMenu && isMobile" />
             <i-header-log v-if="isDesktop && showLog" />
             <i-header-fullscreen v-if="isDesktop && showFullscreen" />
-            <i-header-notice v-if="showNotice" />
+            <i-header-notice ref="notice" v-if="showNotice" />
             <i-header-user />
             <i-header-i18n v-if="showI18n" />
             <i-header-setting v-if="enableSetting && !isMobile" />
@@ -269,6 +269,29 @@
     },
     mounted() {
       document.addEventListener('scroll', this.handleScroll, { passive: true });
+
+      // 非移动端，根据系统缩放比率调整界面大小
+      //console.log('navigator.userAgent', navigator.userAgent);
+      if (
+        Setting.layout.autoFixRatio == true &&
+        window.screen.width < 1920 &&
+        window.screen.width * window.devicePixelRatio <= 1920 &&
+        !navigator.userAgent.match(/AppleWebKit.*Mobile.*/) &&
+        !navigator.userAgent.match(/.*Android.*/)
+      ) {
+        document.body.style.zoom = 1 / window.devicePixelRatio;
+
+        setTimeout(() => {
+          let sider = document.getElementsByClassName('i-layout-sider');
+          if (sider.length > 0) {
+            sider[0].style.height = window.devicePixelRatio * 100 + 'vh';
+          }
+          var menu = document.getElementsByClassName('i-layout-menu-side');
+          if (menu.length > 0) {
+            menu[0].style.height = 'calc(' + window.devicePixelRatio * 100 + 'vh - 64px)';
+          }
+        });
+      }
     },
     beforeUnmount() {
       document.removeEventListener('scroll', this.handleScroll);

package/src/mixins/page.js

@@ -309,7 +309,7 @@ export default {
       let data = [];
       let value = this.parseData(model, expression);
 
-      if (value != null && value != '') {
+      if (this.isJSON(value)) {
         data = JSON.parse(value);
       }
 
@@ -329,7 +329,7 @@ export default {
       let data = [];
       let value = this.parseData(model, expression);
 
-      if (value != null && value != '') {
+      if (this.isJSON(value)) {
         data = JSON.parse(value);
         data[0] = new Date(data[0]);
         data[1] = new Date(data[1]);
@@ -628,7 +628,8 @@ export default {
     },
     // 重置通知栏数字
     resetNotice() {
-      this.getNotice(this).init();
+      let notice = this.getNotice(this);
+      notice.init();
     },
     // 获取通知栏
     getNotice(node) {
@@ -641,6 +642,23 @@ export default {
       }
 
       return null;
+    },
+    // 判断是否JSON
+    isJSON(str) {
+      if (!!(str || '').trim()) {
+        try {
+          var obj = JSON.parse(str);
+          if (typeof obj == 'object' && obj) {
+            return true;
+          } else {
+            return false;
+          }
+        } catch (e) {
+          return false;
+        }
+      } else {
+        return false;
+      }
     }
   }
 };

package/src/styles/css/default.css

@@ -32,7 +32,7 @@
 
 /* 页面头部 */
 .ivu-page-header {
-  height: 150px;
+  height: 135px;
   background: #078dcf;
 }
 
@@ -295,8 +295,12 @@
 }
 
 /* 按钮图标 */
-.ivu-btn {
+/* .ivu-btn {
   line-height: 30px;
+} */
+
+.ivu-btn > span {
+  width: 2px;
 }
 
 .ivu-btn > .ivu-icon {
@@ -309,12 +313,16 @@
   margin-left: 0;
 }
 
-.ivu-btn-small {
+/* .ivu-btn-small {
   line-height: 20px;
-}
+} */
 
-.ivu-btn-small > .ivu-icon {
+/* .ivu-btn-small > .ivu-icon {
   margin-bottom: 2px;
+} */
+
+.ivu-btn.ivu-btn-small > span {
+  width: 0px;
 }
 
 .ivu-btn-primary {
@@ -508,3 +516,15 @@
 .i-layout-sider {
   min-height: 100%;
 }
+
+/* 全屏 */
+.full-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 10px;
+  background: #fff;
+  z-index: 1000;
+}