mooho-base-admin-plus 2.10.31 → 2.10.33

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

@@ -0,0 +1,776 @@
+<template>
+  <!--
+        @slot 顶部
+    -->
+  <slot name="top"></slot>
+  <hot-table ref="table" :settings="hotSetting"></hot-table>
+  <modal-table ref="dialogTable">
+    <template #command="{ row }">
+      <Button size="small" title="选择" type="primary" custom-icon="fa fa-check" @click="dialogCheck(row)"></Button>
+    </template>
+  </modal-table>
+  <div class="ivu-mt ivu-text-right">
+    <Button
+      class="ivu-fr ivu-ml-8"
+      type="error"
+      :title="$t('Front_Btn_Setting')"
+      custom-icon="fa fa-cog"
+      v-if="settingEnable && allow('permission/tableView')"
+      @click="tableSettingOpen"
+    ></Button>
+  </div>
+  <table-setting ref="tableSetting" v-if="tableSettingActive" :is-setting="true" @on-change="viewCode => init(viewCode)" />
+</template>
+<script>
+  import { mapActions } from 'vuex';
+  import dateFormat from 'date-fns/format';
+
+  import { HotTable } from '@handsontable/vue3';
+  import { ContextMenu } from 'handsontable/plugins/contextMenu';
+  import { registerAllModules } from 'handsontable/registry';
+  import 'handsontable/styles/handsontable.min.css';
+  import 'handsontable/styles/ht-theme-main.min.css';
+
+  import modelApi from '../../api/model';
+  import customModelApi from '../../api/customModel';
+  import mixinPage from '../../mixins/page';
+  import mixin from './mixin';
+  import tableSetting from './table-setting.vue';
+
+  // register Handsontable's modules
+  registerAllModules();
+
+  /**
+   * @displayName view-table 表格视图
+   */
+  export default {
+    mixins: [mixin, mixinPage],
+    components: { HotTable, tableSetting },
+    emits: ['onChange'],
+    data() {
+      return {
+        inited: false,
+        tableView: {},
+        hotSetting: {
+          themeName: 'ht-theme-main',
+          colHeaders: true,
+          rowHeaders: true,
+          height: 'auto',
+          // columns: [],
+          autoWrapCol: true,
+          autoWrapRow: true,
+          manualColumnResize: true,
+          minSpareRows: 1,
+          contextMenu: {
+            items: {
+              row_above: {
+                name: '上方插入行'
+              },
+              row_below: {
+                name: '下方插入行'
+              },
+              separator1: ContextMenu.SEPARATOR,
+              move_up: {
+                name: '整行上移',
+                callback: (key, selection, clickEvent) => {
+                  let index = selection[0].start.row;
+                  if (index > 0) {
+                    let data = this.$refs.table.hotInstance.getSourceData();
+                    let delRows = data.splice(index, 1);
+                    data.splice(index - 1, 0, delRows[0]);
+                    this.$refs.table.hotInstance.loadData(data);
+                  }
+                }
+              },
+              move_down: {
+                name: '整行下移',
+                callback: (key, selection, clickEvent) => {
+                  let index = selection[0].start.row;
+                  let data = this.$refs.table.hotInstance.getSourceData();
+                  if (index < data.length - 1) {
+                    let delRows = data.splice(index, 1);
+                    data.splice(index + 1, 0, delRows[0]);
+                    this.$refs.table.hotInstance.loadData(data);
+                  }
+                }
+              },
+              remove_row: {
+                name: '整行删除',
+                callback: (key, selection, clickEvent) => {
+                  let delArr = [];
+                  let ids = [];
+                  let rows = [];
+
+                  let data = this.$refs.table.hotInstance.getSourceData();
+
+                  for (const sels of selection) {
+                    let startRowIndex = sels.start.row;
+                    let endRowIndex = sels.end.row;
+
+                    delArr.push([startRowIndex, endRowIndex - startRowIndex + 1]);
+
+                    for (let i = startRowIndex; i <= endRowIndex; i++) {
+                      rows.push(i);
+                    }
+
+                    for (let i = startRowIndex; i < endRowIndex; i++) {
+                      if (data[i].id) {
+                        ids.push(data[i].id);
+                      }
+                    }
+                  }
+
+                  this.confirm('确定要删除该行吗？', async () => {
+                    // if (ids.length > 0) {
+                    //     await modelApi.delete(this.viewCode, ids);
+                    // }
+                    let b = true;
+
+                    this.$emit('on-remove', rows, val => {
+                      b = val;
+                    });
+                    console.log(b);
+                    if (b) {
+                      this.$refs.table.hotInstance.alter('remove_row', delArr);
+                    }
+                  });
+                }
+              }
+              // separator2: ContextMenu.SEPARATOR
+              // cut: { name: '剪切' },
+              // copy: { name: '复制' }
+              // 'paste': {
+              //     name: '粘贴',
+              //     callback: (key, selection, clickEvent) => {
+              //         document.execCommand('paste');
+              //     }
+              // }
+            }
+          },
+          licenseKey: 'non-commercial-and-evaluation'
+        },
+        coords: {},
+        data: [],
+        staticData: [],
+        setting: false,
+        tableSettingActive: false,
+        isMaxHight: false
+      };
+    },
+    async created() {
+      // 默认视图代码
+      if (this.viewCode) {
+        // 初始化
+        setTimeout(async () => {
+          await this.init(this.viewCode);
+
+          /**
+           * 初始化完成事件
+           */
+          this.$emit('after-init');
+
+          if (this.autoLoad && !this.tableView.autoLoadDisable) {
+            this.loadData();
+          }
+        });
+      }
+    },
+    mounted() {
+      this.$refs.table.hotInstance.addHook('beforeOnCellMouseUp', (event, coords) => {
+        this.coords = coords;
+        if (event.detail === 2 && coords.row >= 0 && !this.readonly) {
+          // 双击弹出窗口
+          let column = this.hotSetting.columns[coords.col];
+          let data = this.$refs.table.hotInstance.getSourceData();
+
+          if (column.controlType === 'DialogSelect' && !column.readonly) {
+            this.$refs.dialogTable.init(column.source, () => {
+              this.$refs.dialogTable.open(this.getParam(data[coords.row], column));
+            });
+          }
+        }
+      });
+    },
+    props: {
+      /**
+       * 视图代码
+       */
+      viewCode: {
+        type: String
+      },
+      /**
+       * 只读
+       */
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * 内嵌表格的父对象
+       */
+      parentData: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      /**
+       * 是否允许配置界面
+       */
+      settingEnable: {
+        type: Boolean,
+        default: true
+      },
+      /**
+       * 自动加载
+       */
+      autoLoad: {
+        type: Boolean,
+        default: true
+      },
+      /**
+       * 高度
+       */
+      height: {
+        type: Number,
+        default: null
+      }
+    },
+    computed: {},
+    watch: {
+      // value() {
+      //     if (this.embedded) {
+      //         this.loadData(this.value);
+      //     }
+      //     //this.changed = false;
+      // }
+      // staticData() {
+      //     // 设置选中项
+      //     if (typeof this.selectFunc === 'function') {
+      //         let selected = this.staticData.filter(this.selectFunc);
+      //         this.setSelected(selected);
+      //     }
+      // }
+    },
+    methods: {
+      ...mapActions('admin/dataView', { loadDataView: 'load' }),
+      /**
+       * 初始化
+       *
+       * @param {string} viewCode 视图代码
+       * @param {function} callback 完成后回调方法
+       * @param {function} onFail 失败后回调方法
+       * @public
+       */
+      async init(viewCode, callback, onFail) {
+        // 加载表格视图
+        let view = await this.loadDataView(viewCode);
+
+        if (view && !view.isExist && viewCode.indexOf('_') >= 0) {
+          view = await this.loadDataView(viewCode.split('_')[0]);
+        }
+
+        if (view == null) {
+          return;
+        } else if (!view.isExist) {
+          if (typeof onFail === 'function') {
+            onFail();
+          } else {
+            this.error('Front_Msg_View_Code_Not_Exist|' + viewCode);
+          }
+          return;
+        }
+
+        this.tableView = view.dataView;
+        this.tableView.columns = view.viewColumns;
+
+        // 初始化数据源
+        // this.initDataSource();
+
+        this.columns = await Promise.all(
+          view.viewColumns.map(async item => {
+            let column = {
+              ...item,
+              title: item.name,
+              data: item.code,
+              width: item.controlWidth || 80,
+              className: item.align ? item.align.toLowerCase() : 'htCenter',
+              controlType: item.controlType
+            };
+
+            if (this.readonly) {
+              column.readOnly = true;
+            } else {
+              if (item.controlType === 'Label' || item.isReadonly == true) {
+                column.readOnly = true;
+              } else if (item.controlType === 'NumberInput') {
+                column.type = 'numeric';
+                column.numericFormat = '0%';
+              } else if (item.controlType === 'Check') {
+                column.type = 'checkbox';
+              } else if (item.controlType === 'Select') {
+                column.editor = 'select';
+
+                let dataSource = [];
+
+                if (column.isStaticItem) {
+                  if (!!(column.itemData || '').trim()) {
+                    column.itemData.split(/[\n]/).forEach(item => {
+                      if (!!(item || '').trim()) {
+                        if (item.split(':').length > 1) {
+                          let key = item.split(':')[0];
+                          let value = item.split(':')[1];
+
+                          if (column.dataType == 'Integer' || column.dataType == 'BigInteger') {
+                            dataSource.push({
+                              id: parseInt(key),
+                              name: value
+                            });
+                          } else if (column.dataType == 'Decimal' || column.dataType == 'Float' || column.dataType == 'Double') {
+                            dataSource.push({
+                              id: parseFloat(key),
+                              name: value
+                            });
+                          } else if (column.dataType == 'Boolean') {
+                            dataSource.push({
+                              id: key.toUpperCase() == 'TRUE',
+                              name: value
+                            });
+                          } else {
+                            dataSource.push({
+                              id: key,
+                              name: value
+                            });
+                          }
+                        } else {
+                          if (column.dataType == 'Integer' || column.dataType == 'BigInteger') {
+                            dataSource.push({
+                              id: parseInt(item),
+                              name: item
+                            });
+                          } else if (column.dataType == 'Decimal' || column.dataType == 'Float' || column.dataType == 'Double') {
+                            dataSource.push({
+                              id: parseFloat(item),
+                              name: item
+                            });
+                          } else if (column.dataType == 'Boolean') {
+                            dataSource.push({
+                              id: item.toUpperCase() == 'TRUE',
+                              name: item
+                            });
+                          } else {
+                            dataSource.push({
+                              id: item,
+                              name: item
+                            });
+                          }
+                        }
+                      }
+                    });
+                  }
+                } else {
+                  if (column.dataType.startsWith('Enum:')) {
+                    // 枚举
+                    dataSource = this.getEnumList(column.dataType.split(':')[1]);
+                  } else if (!!(column.source || '').trim()) {
+                    let param = this.getParam(null, column, this.parentData);
+
+                    // 选择框、单选框组
+                    this.disableLoader();
+                    let res;
+                    if (column.isSourceCustom) {
+                      res = await customModelApi.query(column.source, param); //, [column.sourceDataCode, column.sourceDisplayCode]);
+                    } else {
+                      res = await modelApi.query(column.source, param); //, [column.sourceDataCode, column.sourceDisplayCode]);
+                    }
+                    this.enableLoader();
+
+                    dataSource = res.data.map(item => {
+                      return {
+                        id: !(column.sourceDataCode || '').trim() ? item.id : this.parseData(item, column.sourceDataCode),
+                        name: this.parseData(item, column.sourceDisplayCode)
+                      };
+                    });
+                  }
+                }
+
+                column.selectOptions = dataSource.map(option => {
+                  return option.id;
+                });
+              } else if (item.controlType === 'Date') {
+                column.type = 'date';
+                column.dateFormat = 'YYYY-MM-DD';
+                column.correctFormat = true;
+                // column.renderer = function (instance, td, row, col, prop, value, cellProperties) {
+                //   if (value) {
+                //     td.innerHTML = dateFormat(new Date(value), 'yyyy-MM-dd');
+                //     console.log(instance);
+                //     console.log(td);
+                //     console.log(row);
+                //     console.log(col);
+                //     console.log(prop);
+                //     console.log(value);
+                //     console.log(cellProperties);
+                //   }
+                //   return td;
+                // };
+              }
+            }
+
+            return column;
+          })
+        );
+
+        console.log('this.columns', this.columns);
+
+        // .filter(item => {
+        //   return !(item.parentCode || '').trim();
+        // })
+        // .map(item => {
+        //   return getColumns(view, item, this.static);
+        // });
+
+        this.hotSetting.columns = this.columns;
+
+        this.columns.forEach(column => {
+          //column.name = this.getNameI18n(column) + (column.isRequired ? ' <font color="red">*</font>' : '');
+          //column.fixed = column.isFixed ? 'left' : null;
+        });
+
+        // this.columns.unshift({
+        //   tree: true,
+        //   display: 'inline',
+        //   align: 'left',
+        //   width: 100
+        // });
+
+        // if (this.tableView.snEnable) {
+        //   this.columns.unshift({
+        //     title: this.$t('Front_Label_Sn'),
+        //     slot: 'sn',
+        //     align: 'center',
+        //     width: 60
+        //   });
+        // }
+
+        this.inited = true;
+
+        setTimeout(() => {
+          if (typeof callback === 'function') {
+            callback();
+          }
+        });
+      },
+      /**
+       * 加载数据
+       *
+       * @param {array} staticData 静态数据
+       * @public
+       */
+      async loadData(staticData) {
+        if (!this.inited) {
+          await this.init(this.viewCode);
+
+          if (!this.inited) {
+            return;
+          }
+        }
+
+        if (staticData) {
+          this.staticData = this.copy(staticData);
+
+          this.staticData.forEach(item => {
+            for (let key in item) {
+              if (item[key] != null && this.columns.some(i => i.code === key && i.controlType === 'Date')) {
+                item[key] = dateFormat(new Date(item[key]), 'yyyy-MM-dd');
+              }
+            }
+          });
+        }
+
+        this.data = this.staticData;
+
+        //this.hotSetting.data = this.data;
+
+        this.$refs.table.hotInstance.loadData(this.data);
+
+        setTimeout(() => {
+          this.$refs.table.hotInstance.render();
+        });
+
+        console.log('this.data', this.data);
+
+        // 设置数据的可见性和只读属性
+        this.data.forEach(item => {
+          //this.setShowStatus(item);
+
+          // 只读时禁止选中
+          item._disabled = this.readonly;
+        });
+
+        // 加载数据源
+        //this.initDataSource();
+
+        // 重新计算公式
+        for (let i = 0; i < this.data.length; i++) {
+          this.calc(this.data[i]);
+        }
+
+        /**
+         * 数据加载事件
+         */
+        this.$emit('on-load-data');
+
+        /**
+         * 数据变化事件
+         * @property {object} data 行对象
+         * @property {object} sender 触发的列对象
+         * @property {object} selected 选中对象（弹出选择框等有效）
+         */
+        this.$emit('on-change', null, null, null);
+
+        // 刷新表头控件
+        // if (this.$refs.tableFilter) {
+        //   //this.$refs.tableFilter.$forceUpdate();
+        // }
+      },
+      /**
+       * 必填验证
+       *
+       * @public
+       */
+      validate() {
+        for (let i = 0; i < this.staticData.length; i++) {
+          let row = this.staticData[i];
+
+          for (let j = 0; j < this.columns.length; j++) {
+            let column = this.columns[j];
+            let value = this.parseData(row, column.code);
+
+            if (column.slot != 'normal') {
+              continue;
+            }
+
+            // 不显示的不验证
+            if (row._isShow && row._isShow[column.code] == false) {
+              continue;
+            } else if (column.isShow == false) {
+              continue;
+            }
+
+            if (column.isRequired) {
+              if (value == null || !(String(value) || '').trim()) {
+                this.error('Front_Msg_Row_Column_Required|' + (i + 1) + '|' + name);
+                return false;
+              }
+            }
+
+            // if (column.maxLength != null && value != null && String(value).length > column.maxLength) {
+            //   this.error('Front_Msg_Row_Validation_Max_Length|' + (i + 1) + '|' + column.name + '|' + column.maxLength.toString());
+            //   return false;
+            // }
+
+            if (column.maxValue != null && !isNaN(value) && value > column.maxValue) {
+              this.error('Front_Msg_Row_Validation_Max_Value|' + (i + 1) + '|' + name + '|' + column.maxValue.toString());
+              return false;
+            }
+
+            if (column.minValue != null && !isNaN(value) && value < column.minValue) {
+              this.error('Front_Msg_Row_Validation_Min_Value|' + (i + 1) + '|' + name + '|' + column.minValue.toString());
+              return false;
+            }
+
+            if (!!(column.pattern || '').trim() && value != null && new RegExp(column.pattern).test(value) == false) {
+              this.error('Front_Msg_Row_Validation_Pattern|' + (i + 1) + '|' + name + '|' + column.pattern);
+              return false;
+            }
+          }
+        }
+
+        return true;
+      },
+      /**
+       * 获取数据
+       *
+       * @public
+       */
+      getData() {
+        let data = this.copy(this.staticData);
+
+        data.pop();
+
+        data.forEach(item => {
+          for (let key in item) {
+            if (key.startsWith('_')) {
+              delete item[key];
+            }
+          }
+        });
+
+        // 调整顺序
+        if (this.tableView.adjustEnable) {
+          let i = 0;
+          for (let item of data) {
+            item.orderNo = i;
+            i += 10;
+          }
+        }
+
+        return data;
+      },
+      onSelectDataChange(data, sender, selected) {
+        let code;
+        if (sender.code.endsWith('ID')) {
+          code = sender.code.substr(0, sender.code.length - 2);
+        }
+
+        let model = null;
+
+        if (typeof selected == 'object') {
+          if (selected instanceof Array) {
+            model = [];
+
+            for (let item of selected) {
+              if (typeof item == 'object') {
+                model.push(item);
+              } else {
+                if (data._rawData && data._rawData[sender.code]) {
+                  model.push(
+                    data._rawData[sender.code].find(rawData => {
+                      return this.parseData(rawData, sender.sourceDataCode) == item;
+                    })
+                  );
+                } else {
+                  model.push(item);
+                }
+              }
+            }
+          } else {
+            model = selected;
+          }
+        } else {
+          if (data._rawData && data._rawData[sender.code]) {
+            model = data._rawData[sender.code].find(rawData => {
+              return this.parseData(rawData, sender.sourceDataCode) == selected;
+            });
+          } else {
+            model = selected;
+          }
+        }
+
+        if (code) {
+          this.setData(data, code, model);
+        }
+
+        this.onDataChange(data, sender, model);
+      },
+      // 数据变化事件
+      onDataChange(data, sender, selected) {
+        //this.setShowStatus(data);
+
+        //this.$forceUpdate();
+
+        // 公式计算
+        this.calc(data, sender);
+
+        /**
+         * 数据变化事件
+         * @property {object} data 行对象
+         * @property {object} sender 触发的列对象
+         * @property {object} selected 选中对象（弹出选择框等有效）
+         */
+        this.$emit('on-change', data, sender, selected);
+
+        // 计算需要刷新的字段
+        if (sender == null || sender.triggers !== []) {
+          this.columns.forEach(function (column) {
+            if (
+              !column.isStaticItem &&
+              !!(column.source || '').trim() &&
+              !(column.dataType && column.dataType.startsWith('Enum:')) &&
+              (sender == null ||
+                sender.triggers.some(item => {
+                  return item.code == column.code;
+                }))
+            ) {
+              if (data._needRefresh) {
+                data._needRefresh[column.code] = true;
+              }
+            }
+          });
+        }
+      },
+      // 公式计算
+      calc(data, sender) {
+        for (let i = 0; i < this.columns.length; i++) {
+          let column = this.columns[i];
+          if (!!(column.calculate || '').trim()) {
+            let triggers = this.getTriggers(column.calculate);
+            if (!sender || triggers.some(item => item == sender.code)) {
+              // 包含在公式中，需要刷新
+              let result = this.calculate(column.calculate, data);
+
+              // 保留小数
+              if (column.digit != null) {
+                result = this.keepDecimal(result, column.digit, column.fixedDigit);
+              }
+
+              this.setData(data, column.code, result);
+            }
+          }
+        }
+      },
+      // 打开表格设置界面
+      tableSettingOpen() {
+        this.tableSettingActive = true;
+
+        setTimeout(() => {
+          this.$refs.tableSetting.open(this.tableView, this.copy(this.tableView.columns));
+        });
+      },
+      // 行数据
+      rowData(row, index) {
+        return this.data[index];
+      },
+      // 获取多语言名称
+      getNameI18n(column) {
+        if (column) {
+          if (this.layout.showI18n) {
+            if (column.code) {
+              let key = 'DataView_' + this.tableView.code + '_' + column.code;
+              let text = this.$t(key);
+              if (text == key) {
+                return column.name;
+              } else {
+                return text;
+              }
+            }
+          } else {
+            return column.name;
+          }
+        }
+      },
+      // 清空数据
+      clear() {
+        this.staticData = [];
+        this.data = [];
+      },
+      // 弹出选择框选中
+
+      dialogCheck(row) {
+        let column = this.hotSetting.columns[this.coords.col];
+
+        this.$refs.table.hotInstance.setDataAtRowProp([[this.coords.row, column.data, this.parseData(row, column.sourceDisplayCode)]]);
+        this.$refs.dialogTable.close();
+
+        this.onSelectDataChange(this.coords.row, column, row);
+      }
+    }
+  };
+</script>
+
+<style>
+  .htContextMenu {
+    z-index: 9999 !important;
+  }
+</style>