ylwl-cpscoms 1.0.0 → 1.2.0

package/es/DtTable/index.vue2.js

@@ -0,0 +1,719 @@
+import { objectSpread2 as _objectSpread2, typeof as _typeof, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, toConsumableArray as _toConsumableArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { Loading, Message } from 'element-ui';
+
+// VNode 渲染组件
+var VnodeComponent = {
+  functional: true,
+  props: {
+    vnode: {
+      type: Object,
+      default: null
+    }
+  },
+  render: function render(h, context) {
+    return context.props.vnode || h('span');
+  }
+};
+var script = {
+  name: 'DtTable',
+  components: {
+    VnodeComponent: VnodeComponent
+  },
+  props: {
+    gridOptions: {
+      type: Object,
+      required: true
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    pagination: {
+      type: Object,
+      default: function _default() {
+        return {
+          currentPage: 1,
+          pageSize: 10,
+          total: 0,
+          pageSizes: [10, 20, 50, 100],
+          layout: 'total, sizes, prev, pager, next, jumper',
+          background: true,
+          small: false,
+          disabled: false,
+          hideOnSinglePage: false
+        };
+      }
+    },
+    apiFunction: {
+      type: Function
+    },
+    apiParams: {
+      type: Object
+    },
+    immediate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['page-change', 'size-change', 'update:pagination', 'action-click', 'validate-error', 'remote-search', 'search', 'linkage-change', 'async-load', 'selection-change'],
+  data: function data() {
+    return {
+      formRef: null,
+      tableRef: null,
+      loading: false,
+      localPagination: _objectSpread2({}, this.pagination),
+      tableData: this.gridOptions.data || [],
+      searchParams: {},
+      loadingInstance: null,
+      loadingFields: new Set(),
+      formModel: {
+        tableData: this.gridOptions.data || []
+      }
+    };
+  },
+  computed: {
+    hasSelectionColumn: function hasSelectionColumn() {
+      return this.gridOptions.columns.some(function (col) {
+        return col.field === 'selection';
+      });
+    },
+    formRules: function formRules() {
+      var rules = {};
+      this.gridOptions.columns.forEach(function (column) {
+        if (column.field && column.rules) {
+          rules[column.field] = column.rules;
+        }
+      });
+      return rules;
+    }
+  },
+  watch: {
+    'gridOptions.data': {
+      handler: function handler(newVal) {
+        this.tableData = newVal || [];
+        this.formModel.tableData = newVal || [];
+      },
+      immediate: true,
+      deep: true
+    },
+    pagination: {
+      handler: function handler(newVal) {
+        this.localPagination = _objectSpread2({}, newVal);
+      },
+      deep: true
+    },
+    localPagination: {
+      handler: function handler(newVal) {
+        this.$emit('update:pagination', newVal);
+      },
+      deep: true
+    },
+    tableData: {
+      handler: function handler(newData, oldData) {
+        var _this = this;
+        if (newData.length > 0 && newData !== oldData) {
+          this.$nextTick(function () {
+            _this.initAsyncData();
+          });
+        }
+      },
+      deep: true
+    }
+  },
+  mounted: function mounted() {
+    this.initRefs();
+    if (this.immediate) {
+      this.getTableDatas();
+    }
+    this.initAsyncData();
+  },
+  methods: {
+    // 判断是否为 VNode
+    isVNode: function isVNode(vnode) {
+      return vnode && _typeof(vnode) === 'object' && vnode.tag && vnode.children !== undefined;
+    },
+    // 调用 render 函数并传入 h
+    callRender: function callRender(column, scope) {
+      return column.render(_objectSpread2(_objectSpread2({}, scope), {}, {
+        h: this.$createElement
+      }));
+    },
+    // 初始化引用
+    initRefs: function initRefs() {
+      this.formRef = this.$refs.formRef;
+      this.tableRef = this.$refs.tableRef;
+    },
+    // 滚动到底部
+    scrollToBottom: function scrollToBottom() {
+      var _this2 = this;
+      return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+        var tableWrapper;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              _context.n = 1;
+              return _this2.$nextTick();
+            case 1:
+              if (_this2.tableRef) {
+                _context.n = 2;
+                break;
+              }
+              return _context.a(2);
+            case 2:
+              try {
+                tableWrapper = _this2.tableRef.$el.querySelector('.el-table__body-wrapper');
+                if (tableWrapper) {
+                  tableWrapper.scrollTo({
+                    top: tableWrapper.scrollHeight,
+                    behavior: 'smooth'
+                  });
+                }
+              } catch (error) {
+                console.warn('滚动到底部失败:', error);
+              }
+            case 3:
+              return _context.a(2);
+          }
+        }, _callee);
+      }))();
+    },
+    // 异步加载选项数据
+    loadAsyncOptions: function loadAsyncOptions(column, row, index) {
+      var _this3 = this;
+      return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+        var fieldKey, options, _t;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.p = _context2.n) {
+            case 0:
+              if (!(column.asyncOptions && !column.asyncOptions.loadData)) {
+                _context2.n = 1;
+                break;
+              }
+              return _context2.a(2);
+            case 1:
+              fieldKey = row ? "".concat(column.field, "_").concat(row.id || index) : column.field;
+              _context2.p = 2;
+              _this3.loadingFields.add(fieldKey);
+              if (row) {
+                _this3.$set(row, "".concat(column.field, "Loading"), true);
+              } else {
+                _this3.$set(_this3.searchParams, "".concat(column.field, "Loading"), true);
+              }
+              _context2.n = 3;
+              return column.asyncOptions.loadData(row);
+            case 3:
+              options = _context2.v;
+              if (row) {
+                if (!row._asyncOptions) {
+                  _this3.$set(row, '_asyncOptions', {});
+                }
+                _this3.$set(row._asyncOptions, column.field, options);
+              } else {
+                if (!_this3.searchParams._asyncOptions) {
+                  _this3.$set(_this3.searchParams, '_asyncOptions', {});
+                }
+                _this3.$set(_this3.searchParams._asyncOptions, column.field, options);
+              }
+              _this3.$emit('async-load', {
+                field: column.field,
+                row: row,
+                index: index,
+                options: options
+              });
+              _context2.n = 5;
+              break;
+            case 4:
+              _context2.p = 4;
+              _t = _context2.v;
+              console.error("\u5F02\u6B65\u52A0\u8F7D\u9009\u9879\u5931\u8D25 [".concat(column.field, "]:"), _t);
+            case 5:
+              _context2.p = 5;
+              if (row) {
+                _this3.$set(row, "".concat(column.field, "Loading"), false);
+              }
+              return _context2.f(5);
+            case 6:
+              return _context2.a(2);
+          }
+        }, _callee2, null, [[2, 4, 5, 6]]);
+      }))();
+    },
+    // 初始化异步数据
+    initAsyncData: function initAsyncData() {
+      var _this4 = this;
+      // 初始化表格中的异步 Select
+      this.gridOptions.columns.forEach(function (column) {
+        if (column.asyncOptions && column.asyncOptions.immediate) {
+          _this4.tableData.forEach(function (row, index) {
+            if (row._asyncOptions && !row._asyncOptions[column.field]) {
+              _this4.loadAsyncOptions(column, row, index);
+            }
+          });
+        }
+      });
+    },
+    // 获取表格数据
+    getTableDatas: function getTableDatas(params) {
+      var _this5 = this;
+      return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+        var requestParams, _yield$_this5$apiFunc, data, _t2;
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.p = _context3.n) {
+            case 0:
+              if (_this5.apiFunction) {
+                _context3.n = 1;
+                break;
+              }
+              console.warn('apiFunction is not provided');
+              return _context3.a(2);
+            case 1:
+              _this5.startLoading();
+              _this5.loading = true;
+              _context3.p = 2;
+              requestParams = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, _this5.apiParams), _this5.searchParams), params), {}, {
+                currentPage: _this5.localPagination.currentPage,
+                pageSize: _this5.localPagination.pageSize
+              });
+              _context3.n = 3;
+              return _this5.apiFunction(requestParams);
+            case 3:
+              _yield$_this5$apiFunc = _context3.v;
+              data = _yield$_this5$apiFunc.data;
+              _this5.tableData = data.list || [];
+              _this5.localPagination.total = data.count;
+              _context3.n = 5;
+              break;
+            case 4:
+              _context3.p = 4;
+              _t2 = _context3.v;
+              console.error('Error fetching table data:', _t2);
+            case 5:
+              _context3.p = 5;
+              _this5.loading = false;
+              _this5.endLoading();
+              return _context3.f(5);
+            case 6:
+              return _context3.a(2);
+          }
+        }, _callee3, null, [[2, 4, 5, 6]]);
+      }))();
+    },
+    // 开始加载
+    startLoading: function startLoading() {
+      this.loading = true;
+      if (this.loadingInstance) {
+        this.loadingInstance.close();
+      }
+      this.loadingInstance = Loading.service({
+        target: '.dt_table',
+        lock: true,
+        text: '加载中...',
+        background: 'rgba(255, 255, 255, 0.5)'
+      });
+    },
+    // 结束加载
+    endLoading: function endLoading() {
+      this.loading = false;
+      if (this.loadingInstance) {
+        this.loadingInstance.close();
+        this.loadingInstance = null;
+      }
+    },
+    // 处理分页变化
+    handleCurrentChange: function handleCurrentChange(page) {
+      this.localPagination.currentPage = page;
+      this.$emit('page-change', page);
+      this.getTableDatas();
+    },
+    // 处理每页条数变化
+    handleSizeChange: function handleSizeChange(size) {
+      this.localPagination.pageSize = size;
+      this.localPagination.currentPage = 1;
+      this.$emit('size-change', size);
+      this.getTableDatas();
+    },
+    // 处理选择变化
+    handleSelectionChange: function handleSelectionChange(selection) {
+      this.$emit('selection-change', selection);
+    },
+    // 获取选中数据
+    getSelection: function getSelection() {
+      return this.$refs.tableRef ? this.$refs.tableRef.selection : [];
+    },
+    // 清空选择
+    clearSelection: function clearSelection() {
+      this.$refs.tableRef && this.$refs.tableRef.clearSelection();
+    },
+    // 切换行选中状态
+    toggleRowSelection: function toggleRowSelection(row, selected) {
+      this.$refs.tableRef && this.$refs.tableRef.toggleRowSelection(row, selected);
+    },
+    // 处理操作按钮点击
+    handleActionClick: function handleActionClick(button, row, index, event) {
+      event.stopPropagation();
+      if (button.click) {
+        button.click(row, index);
+      }
+      this.$emit('action-click', button, row, index);
+    },
+    // 确保表单就绪
+    ensureFormReady: function ensureFormReady() {
+      var _this6 = this;
+      return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+        return _regenerator().w(function (_context4) {
+          while (1) switch (_context4.n) {
+            case 0:
+              if (!_this6.formRef) {
+                _context4.n = 1;
+                break;
+              }
+              return _context4.a(2, true);
+            case 1:
+              _context4.n = 2;
+              return _this6.$nextTick();
+            case 2:
+              _this6.initRefs();
+              if (_this6.formRef) {
+                _context4.n = 4;
+                break;
+              }
+              console.warn('表单引用初始化失败，尝试重新渲染');
+              _context4.n = 3;
+              return _this6.$nextTick();
+            case 3:
+              _this6.initRefs();
+            case 4:
+              return _context4.a(2, !!_this6.formRef);
+          }
+        }, _callee4);
+      }))();
+    },
+    // 验证表单
+    validate: function validate() {
+      var _this7 = this;
+      return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+        var rowErrors, promises, results, isValid, errorParts, errorMessage, _t3;
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.p = _context5.n) {
+            case 0:
+              _context5.n = 1;
+              return _this7.ensureFormReady();
+            case 1:
+              if (_this7.formRef) {
+                _context5.n = 2;
+                break;
+              }
+              return _context5.a(2, Promise.reject(new Error('表单未初始化，请检查组件状态')));
+            case 2:
+              rowErrors = new Map();
+              _context5.p = 3;
+              promises = []; // 修复：使用正确的 prop 路径 tableData.${rowIndex}.${column.field}
+              _this7.formModel.tableData.forEach(function (_, rowIndex) {
+                _this7.gridOptions.columns.forEach(function (column) {
+                  if (column.field && column.rules) {
+                    promises.push(new Promise(function (resolve, reject) {
+                      // 修复：添加 tableData 前缀
+                      var propPath = "tableData.".concat(rowIndex, ".").concat(column.field);
+                      _this7.formRef.validateField(propPath, function (error) {
+                        if (error) {
+                          if (!rowErrors.has(rowIndex)) {
+                            rowErrors.set(rowIndex, []);
+                          }
+                          var fieldName = column.title || column.field;
+                          rowErrors.get(rowIndex).push(fieldName);
+                          reject(error);
+                        } else {
+                          resolve(true);
+                        }
+                      });
+                    }).catch(function () {
+                      return false;
+                    }));
+                  }
+                });
+              });
+              _context5.n = 4;
+              return Promise.all(promises);
+            case 4:
+              results = _context5.v;
+              isValid = results.every(function (result) {
+                return result !== false;
+              });
+              if (isValid) {
+                _context5.n = 5;
+                break;
+              }
+              errorParts = [];
+              rowErrors.forEach(function (fields, rowIndex) {
+                if (fields.length > 0) {
+                  var uniqueFields = Array.from(new Set(fields));
+                  errorParts.push("\u7B2C".concat(rowIndex + 1, "\u884C\uFF1A").concat(uniqueFields.join('，')));
+                }
+              });
+              if (errorParts.length > 0) {
+                errorMessage = errorParts.join('；');
+                Message({
+                  message: "\u8BF7\u5B8C\u5584\u4EE5\u4E0B\u4FE1\u606F\uFF1A\n".concat(errorMessage),
+                  type: 'error',
+                  duration: 10000,
+                  showClose: true,
+                  dangerouslyUseHTMLString: true
+                });
+              }
+              _this7.$emit('validate-error', '表单验证失败');
+              return _context5.a(2, Promise.reject(new Error('表单验证失败')));
+            case 5:
+              return _context5.a(2, Promise.resolve(true));
+            case 6:
+              _context5.p = 6;
+              _t3 = _context5.v;
+              console.error('表单验证异常:', _t3);
+              Message.error('表单验证过程中发生异常');
+              _this7.$emit('validate-error', _t3);
+              return _context5.a(2, Promise.reject(_t3));
+          }
+        }, _callee5, null, [[3, 6]]);
+      }))();
+    },
+    // 重置表单
+    resetFields: function resetFields() {
+      var _this8 = this;
+      if (!this.formRef) return;
+      this.formModel.tableData.forEach(function (_, index) {
+        _this8.gridOptions.columns.forEach(function (column) {
+          if (column.field) {
+            var propPath = "tableData.".concat(index, ".").concat(column.field);
+            _this8.formRef.resetFields(propPath);
+          }
+        });
+      });
+    },
+    // 清除验证
+    clearValidate: function clearValidate() {
+      var _this9 = this;
+      if (!this.formRef) return;
+      this.formModel.tableData.forEach(function (_, index) {
+        _this9.gridOptions.columns.forEach(function (column) {
+          if (column.field) {
+            var propPath = "tableData.".concat(index, ".").concat(column.field);
+            _this9.formRef.clearValidate(propPath);
+          }
+        });
+      });
+    },
+    // 处理联动变化
+    handleLinkageChange: function handleLinkageChange(column, value, row, index, type) {
+      var _this0 = this;
+      return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+        var _column$linkage, targetField, method, options, _t4;
+        return _regenerator().w(function (_context6) {
+          while (1) switch (_context6.p = _context6.n) {
+            case 0:
+              if (column.linkage) {
+                _context6.n = 1;
+                break;
+              }
+              return _context6.a(2);
+            case 1:
+              _column$linkage = column.linkage, targetField = _column$linkage.targetField, method = _column$linkage.method, _column$linkage.clearTarget;
+              if (!row._linkageOptions) {
+                _this0.$set(row, '_linkageOptions', {});
+              }
+              _this0.$set(row._linkageOptions, targetField, []);
+              if (!(!value && value !== 0)) {
+                _context6.n = 2;
+                break;
+              }
+              _this0.tableData = _toConsumableArray(_this0.tableData);
+              return _context6.a(2);
+            case 2:
+              _context6.p = 2;
+              _this0.$set(row, "".concat(targetField, "Loading"), true);
+              _context6.n = 3;
+              return method(value, row, type);
+            case 3:
+              options = _context6.v;
+              _this0.$set(row._linkageOptions, targetField, options);
+              _this0.tableData = _toConsumableArray(_this0.tableData);
+              _this0.$emit('linkage-change', {
+                sourceField: column.field,
+                targetField: targetField,
+                value: value,
+                row: row,
+                index: index,
+                options: options
+              });
+              _context6.n = 5;
+              break;
+            case 4:
+              _context6.p = 4;
+              _t4 = _context6.v;
+              console.error('联动数据获取失败:', _t4);
+            case 5:
+              _context6.p = 5;
+              _this0.$set(row, "".concat(targetField, "Loading"), false);
+              return _context6.f(5);
+            case 6:
+              return _context6.a(2);
+          }
+        }, _callee6, null, [[2, 4, 5, 6]]);
+      }))();
+    },
+    // 获取选项数据
+    getOptions: function getOptions(column, row) {
+      if (row._asyncOptions && row._asyncOptions[column.field]) {
+        return row._asyncOptions[column.field];
+      }
+      if (row._linkageOptions && row._linkageOptions[column.field]) {
+        return row._linkageOptions[column.field];
+      }
+      return column.options || [];
+    },
+    // 计算字段是否禁用
+    getFieldDisabled: function getFieldDisabled(column, row, index) {
+      if (this.isDisabled) return true;
+      if (typeof column.disabled === 'function') {
+        return column.disabled(row, index);
+      }
+      return column.disabled || false;
+    },
+    // 计算按钮是否显示
+    getButtonShow: function getButtonShow(button, row, index) {
+      if (typeof button.show === 'function') {
+        return button.show(row, index);
+      }
+      return button.show !== undefined ? button.show : true;
+    },
+    // 计算按钮是否禁用
+    getButtonDisabled: function getButtonDisabled(button, row) {
+      if (typeof button.disabled === 'function') {
+        return button.disabled(row);
+      }
+      return button.disabled || false;
+    },
+    // 计算最小值
+    getMinValue: function getMinValue(column, row, index) {
+      if (typeof column.min === 'function') {
+        return column.min(row, index);
+      }
+      return column.min;
+    },
+    // 计算最大值
+    getMaxValue: function getMaxValue(column, row, index) {
+      if (typeof column.max === 'function') {
+        return column.max(row, index);
+      }
+      return column.max;
+    },
+    // 手动触发联动
+    triggerLinkage: function triggerLinkage(field, type) {
+      var _this1 = this;
+      var column = this.gridOptions.columns.find(function (col) {
+        return col.field === field;
+      });
+      if (!column || !column.linkage) {
+        console.warn("\u5B57\u6BB5 ".concat(field, " \u6CA1\u6709\u914D\u7F6E\u8054\u52A8\u6216\u4E0D\u5B58\u5728"));
+        return;
+      }
+      this.tableData.forEach(function (row, index) {
+        var sourceValue = row[field];
+        if (sourceValue !== undefined && sourceValue !== null && sourceValue !== '') {
+          _this1.handleLinkageChange(column, sourceValue, row, index, type);
+        }
+      });
+    },
+    // 各种事件处理函数
+    handleSelectChange: function handleSelectChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index);
+      if (column.linkage) {
+        this.handleLinkageChange(column, value, row, index);
+      }
+      var propPath = "tableData.".concat(index, ".").concat(column.field);
+      this.formRef && this.formRef.validateField(propPath);
+    },
+    handleInputChange: function handleInputChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index);
+      var propPath = "tableData.".concat(index, ".").concat(column.field);
+      this.formRef && this.formRef.validateField(propPath);
+    },
+    handleInputNumberChange: function handleInputNumberChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index);
+      var propPath = "tableData.".concat(index, ".").concat(column.field);
+      this.formRef && this.formRef.validateField(propPath);
+    },
+    handleSwitchChange: function handleSwitchChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index);
+      var propPath = "tableData.".concat(index, ".").concat(column.field);
+      this.formRef && this.formRef.validateField(propPath);
+    },
+    handleTimeChange: function handleTimeChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index);
+      var propPath = "tableData.".concat(index, ".").concat(column.field);
+      this.formRef && this.formRef.validateField(propPath);
+    },
+    handleDateChange: function handleDateChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index);
+      var propPath = "tableData.".concat(index, ".").concat(column.field);
+      this.formRef && this.formRef.validateField(propPath);
+    },
+    handleDateTimeChange: function handleDateTimeChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index);
+      var propPath = "tableData.".concat(index, ".").concat(column.field);
+      this.formRef && this.formRef.validateField(propPath);
+    },
+    handleDateRangeChange: function handleDateRangeChange(column, value, row, index) {
+      column.events && column.events.change && column.events.change(value, row, index);
+      var propPath = "tableData.".concat(index, ".").concat(column.field);
+      this.formRef && this.formRef.validateField(propPath);
+    },
+    handleFocus: function handleFocus(column, event, row) {
+      column.events && column.events.focus && column.events.focus(event, row);
+      if (column.asyncOptions && !(row._asyncOptions && row._asyncOptions[column.field])) {
+        this.loadAsyncOptions(column, row);
+      }
+    },
+    handleBlur: function handleBlur(column, event, row, index) {
+      column.events && column.events.blur && column.events.blur(event, row);
+      var propPath = "tableData.".concat(index, ".").concat(column.field);
+      this.formRef && this.formRef.validateField(propPath);
+    },
+    handleClear: function handleClear(column, row, index) {
+      column.events && column.events.clear && column.events.clear();
+      if (column.linkage) {
+        var targetField = column.linkage.targetField;
+        if (targetField) {
+          this.$set(row, targetField, undefined);
+          if (row._linkageOptions) {
+            this.$set(row._linkageOptions, targetField, []);
+          }
+        }
+      }
+    },
+    // 刷新方法
+    refresh: function refresh(params) {
+      return this.getTableDatas(params);
+    },
+    getAppendComponent: function getAppendComponent(column, scope) {
+      if (typeof column.unit === 'function') {
+        return {
+          functional: true,
+          render: function render(h) {
+            return column.unit(h, scope);
+          }
+        };
+      } else {
+        return {
+          render: function render(h) {
+            return h('span', {
+              style: {
+                paddingLeft: '5px'
+              }
+            }, column.unit);
+          }
+        };
+      }
+    }
+  }
+};
+
+export { script as default };