mooho-base-admin-plus 2.10.94 → 2.10.96

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mooho-base-admin-plus",
   "description": "MOOHO basic framework for admin by Vue3",
-  "version": "2.10.94",
+  "version": "2.10.96",
   "author": "jinyifan <jinyifan@mooho.com.cn>",
   "license": "MIT",
   "private": false,

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

@@ -0,0 +1,230 @@
+<template>
+  <Modal
+    ref="modal"
+    v-model="opened"
+    scrollable
+    :fullscreen="isFullscreen"
+    :mask-closable="maskClosable == null ? layout.maskClosable : maskClosable"
+    :draggable="draggable == null ? layout.draggable : draggable"
+    :sticky="true"
+    :reset-drag-position="true"
+    :width="modalWidth"
+    :before-close="beforeClose"
+    :footer-hide="!footerEnable"
+    @on-visible-change="onVisibleChange"
+  >
+    <template #header>
+      <div>
+        <slot name="header">
+          <span class="title">{{ getNameI18n(tableView) }}</span>
+          <span class="description">{{ getDescI18n(tableView) }}</span>
+        </slot>
+      </div>
+    </template>
+    <template #close>
+      <div @click.stop>
+        <Icon v-if="!isFullscreen" style="font-size: 20px; color: #999; position: relative; top: -3px" type="ios-expand" @click="setFullscreen(true)" />
+        <Icon v-if="isFullscreen" style="font-size: 20px; color: #999; position: relative; top: -3px" type="ios-contract" @click="setFullscreen(false)" />
+        <Icon type="ios-close" @click="clickClose()" />
+      </div>
+    </template>
+    <div class="ivu-ml-8 ivu-mr-8">
+      <view-table-excel
+        ref="table"
+        :view-code="viewCode"
+        :readonly="readonly"
+        :parent-data="mergedParentData"
+        :setting-enable="settingEnable"
+        :auto-load="false"
+        :height="height"
+        @after-init="afterInit"
+        @on-change="onChange"
+        @on-load-data="onLoadData"
+      >
+        <template #top>
+          <slot name="top"></slot>
+        </template>
+      </view-table-excel>
+    </div>
+    <template #footer>
+      <div>
+        <slot name="footer"></slot>
+      </div>
+    </template>
+  </Modal>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+
+  /**
+   * @displayName modal-table-excel 表格对话框（Handsontable / view-table-excel）
+   */
+  export default {
+    mixins: [mixinPage],
+    components: {},
+    emits: ['after-init', 'on-close', 'on-change', 'on-load-data'],
+    data() {
+      return {
+        opened: false,
+        isFullscreen: false,
+        tableView: {},
+        param: {}
+      };
+    },
+    props: {
+      viewCode: {
+        type: String
+      },
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      parentData: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      footerEnable: {
+        type: Boolean,
+        default: false
+      },
+      maskClosable: {
+        type: Boolean,
+        default: null
+      },
+      draggable: {
+        type: Boolean,
+        default: null
+      },
+      settingEnable: {
+        type: Boolean,
+        default: true
+      },
+      height: {
+        type: Number,
+        default: null
+      },
+      beforeClose: {
+        type: Function
+      }
+    },
+    computed: {
+      data() {
+        return this.$refs.table?.data;
+      },
+      table() {
+        return this.$refs.table;
+      },
+      screenWidth() {
+        return document.body.clientWidth * 0.8;
+      },
+      modalWidth() {
+        return this.tableView.width || this.screenWidth;
+      },
+      mergedParentData() {
+        return { ...this.parentData, ...this.param };
+      }
+    },
+    methods: {
+      async init(viewCode, callback, onFail) {
+        await this.$refs.table.init(viewCode, callback, onFail);
+        this.tableView = this.$refs.table.tableView || {};
+      },
+      open(param) {
+        setTimeout(() => {
+          this.param = param || {};
+          if (this.$refs.table) {
+            this.$refs.table.loadData();
+          }
+          this.opened = true;
+        });
+      },
+      async close() {
+        this.opened = false;
+      },
+      validate() {
+        return this.$refs.table.validate();
+      },
+      loadData(staticData) {
+        this.$refs.table.loadData(staticData);
+      },
+      getData() {
+        return this.$refs.table.getData();
+      },
+      getDefaultData() {
+        return this.$refs.table.getDefaultData();
+      },
+      clear() {
+        this.$refs.table.clear();
+      },
+      resetFilter() {},
+      onVisibleChange(show) {
+        if (!show) {
+          this.$refs.table?.loadData?.([]);
+          this.$emit('on-close');
+        }
+      },
+      onLoadData() {
+        this.$emit('on-load-data');
+      },
+      afterInit() {
+        this.tableView = this.$refs.table?.tableView || {};
+        this.$emit('after-init');
+      },
+      clickClose() {
+        if (typeof this.beforeClose == 'function') {
+          this.beforeClose().then(
+            () => {
+              this.close();
+            },
+            () => {}
+          );
+        } else {
+          this.close();
+        }
+      },
+      getNameI18n(tableView) {
+        if (!tableView || !tableView.code) {
+          return '';
+        }
+        if (this.layout.showI18n) {
+          let key = 'DataView_' + tableView.code;
+          let text = this.$t(key);
+          if (text == key) {
+            return tableView.name;
+          } else {
+            return text;
+          }
+        } else {
+          return tableView.name;
+        }
+      },
+      getDescI18n(tableView) {
+        if (!tableView || !tableView.code) {
+          return '';
+        }
+        if (this.layout.showI18n) {
+          let key = 'DataView_' + tableView.code + '_$Desc';
+          let text = this.$t(key);
+          if (text == key) {
+            return tableView.description || '';
+          } else {
+            return text;
+          }
+        } else {
+          return tableView.description || '';
+        }
+      },
+      setFullscreen(isFullscreen) {
+        if (this.$refs.table) {
+          this.$refs.table.isMaxHight = isFullscreen;
+        }
+        this.isFullscreen = isFullscreen;
+      },
+      onChange(data, sender, selected) {
+        this.$emit('on-change', data, sender, selected);
+      }
+    }
+  };
+</script>

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

@@ -4,6 +4,7 @@
     -->
   <slot name="top"></slot>
   <hot-table ref="table" :settings="hotSetting"></hot-table>
+  <!-- DialogSelect 弹窗仍用 modal-table + view-table（行内「选择」列插槽）；modal-table-excel 供全站按需使用 -->
   <modal-table ref="dialogTable">
     <template #command="{ row }">
       <Button size="small" title="选择" type="primary" custom-icon="fa fa-check" @click="dialogCheck(row)"></Button>
@@ -887,6 +888,11 @@
           cells: (row, col, prop) => {
             let column = this.columns.find(item => item.code == prop);
 
+            if (column == null) {
+              console.log('column not found!', row, col, prop);
+              return;
+            }
+
             let isShow = column.isShow;
             let isReadonly = column.isReadonly;