umy-ui-table 1.2.0

package/packages/ux-grid/src/interceptor.js

@@ -0,0 +1,6 @@
+// 委托给 vxe-table 内置的 @vxe-ui/core VxeUI.interceptor 单例，
+// 保证与 VxeGrid 内部 preventEvent / dispatchEvent 使用同一个实例
+// （替代原 umy-table 内置的独立 interceptor store，否则拦截器钩子不会生效）
+import { interceptor } from "vxe-table/lib/ui";
+
+export default interceptor;

package/packages/ux-grid/src/ux-grid.vue

@@ -0,0 +1,301 @@
+<template>
+  <div
+    class="plTableBox"
+    :class="{ uxbeautifyTableClass: beautifyTable }"
+    :style="[plTableHeight]"
+  >
+    <vxe-table
+      ref="singleTable"
+      class="singleTable"
+      style="width: 100%"
+      :data="data"
+      :columns="columns"
+      :loading="loading"
+      :show-footer="summaryMethod ? showSummary : false"
+      :max-height="newMaxHeight"
+      :height="newHeight"
+      :mergeCells="mergeCells"
+      :validConfig="validConfig"
+      :auto-resize="widthResize"
+      :edit-rules="rules"
+      :border="beautifyTable ? false : border"
+      :scroll-y="scrollYConfig"
+      :scroll-x="scrollXConfig"
+      context-menu
+      :stripe="stripe"
+      :row-key="rowKey"
+      :column-key="columnKey"
+      :row-id="rowId"
+      :keep-source="keepSource"
+      :size="size"
+      :edit-config="editConfig"
+      :seq-config="indexConfig"
+      :expand-config="expandConfig"
+      :keyboard-config="keyboardConfig"
+      :mouse-config="mouseConfig"
+      :checkbox-config="checkboxConfig"
+      :tree-config="treeConfig"
+      :sort-config="sortConfig"
+      :show-header="showHeader"
+      :show-overflow="showOverflow"
+      :footer-method="footerMethod"
+      :show-header-overflow="showHeaderOverflow"
+      :show-footer-overflow="showFooterOverflow"
+      :highlight-current-row="highlightCurrentRow"
+      :highlight-hover-row="highlightCurrentRow"
+      :row-class-name="rowClassName"
+      :cell-class-name="cellClassName"
+      :header-row-class-name="headerRowClassName"
+      :header-cell-class-name="headerCellClassName"
+      :header-row-style="headerRowStyle"
+      :header-cell-style="headerCellStyle"
+      :row-style="rowStyle"
+      :cell-style="cellStyle"
+      :span-method="spanMethod ? arraySpanMethod : null"
+      @current-change="currentChange"
+      @checkbox-change="plSelect"
+      @resizable-change="headerDragend"
+      @cell-mouseenter="cellMouseEnter"
+      @cell-mouseleave="cellMouseLeave"
+      @cell-click="cellClick"
+      @cell-dblclick="cellDblclick"
+      @cell-context-menu="rowContextmenu"
+      @header-cell-context-menu="headerContextmenu"
+      @radio-change="radioChange"
+      @header-cell-click="headerClick"
+      @checkbox-all="selectAll"
+      @filter-change="filterChange"
+      @sort-change="sortChange"
+      @edit-closed="editClosed"
+      @edit-actived="editActived"
+      @edit-disabled="editDisabled"
+      @toggle-tree-expand="toggleTreeExpandEv"
+      @toggle-row-expand="expChang"
+      @keydown="keydown"
+      @edit-currently-active="editCurrentlyActive"
+      @scroll="tableBodyScroll"
+      @init-rendered="initRendered"
+      @data-rendered="dataRendered"
+    >
+      <!--无数据布局-->
+      <template slot="empty">
+        <slot name="empty">{{ emptyText }}</slot>
+      </template>
+      <slot />
+    </vxe-table>
+    <div class="myPagination" v-if="paginationShow" ref="myPagination">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="newcurrentPage"
+        :pager-count="pagerCount"
+        :page-sizes="pageSizes"
+        :page-size="newPageSize"
+        :layout="layout"
+        :total="total"
+      />
+    </div>
+    <div class="plDialog" ref="plDialog">
+      <div style="width: 100%;height: 100%;" v-if="plDialogFals">
+        <div class="table-cus-header">{{ fieldTitle }}</div>
+        <div class="checkListBox">
+          <draggable
+            tag="ul"
+            :options="{ disabled: !fieldSort }"
+            v-model="newDialogData"
+          >
+            <li v-for="(item, index) in newDialogData" :key="index">
+              <el-checkbox v-model="item.state" :disabled="item.disabled">{{
+                item.name
+              }}</el-checkbox>
+              <template v-if="showDialogIcon">
+                <i
+                  class="iconfont"
+                  :class="[moveDownIcon || 'el-icon-bottom']"
+                  @click="handleField('下移', index, newDialogData)"
+                  v-if="index !== newDialogData.length - 1"
+                />
+                <i
+                  class="iconfont"
+                  :class="[moveUpIcon || 'el-icon-top']"
+                  @click="handleField('上移', index, newDialogData)"
+                  v-if="index !== 0"
+                />
+              </template>
+              <i
+                class="iconfont"
+                :class="[amendBtnIcon || 'el-icon-edit']"
+                v-if="showAmend"
+                @click="amendField(item, index)"
+              />
+            </li>
+          </draggable>
+        </div>
+        <div class="table-cus-footer">
+          <el-button @click="closeModal()">取消</el-button>
+          <el-button type="primary" @click="confirmField">确定</el-button>
+          <el-button type="warning" @click="reset">重置</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/babel">
+import Vue from "vue";
+import draggable from "vuedraggable";
+import ElPagination from "../../pagination";
+import ElCheckbox from "../../checkbox";
+import ElButton from "../../button";
+// 直接用 vxe-table@3.22.9 的 VxeTable 作内核（替代原 umy-table 内置的 elx-grid）
+// 注意：不用 VxeGrid，因为 VxeGrid 3.x 不渲染默认插槽，槽位式 ux-table-column 列会全部丢失；
+// VxeTable 原生支持默认插槽列收集（隐藏容器 vxe-table-slots + provide/inject）
+import VxeTable from "vxe-table/lib/table";
+import uxGridMixin from "../mixins";
+import { parseHeight, isArrayFn } from "../../utils/common";
+
+export default {
+  name: "UxGrid",
+  mixins: [uxGridMixin],
+  components: { draggable, ElPagination, ElCheckbox, ElButton, VxeTable },
+  data() {
+    return {
+      _times: "", // 弹框定时器
+      plDialogFals: false, // 侧滑弹框是否开启
+      newDialogData: [], // 新自定义字段的数据
+      aBox: "", // 蒙层节点
+      newPageSize: "", // 每页条数
+      newcurrentPage: "", // 当前页
+      newHeight: null, // 表格高度
+      newMaxHeight: null, // 表格最大高度
+    };
+  },
+    computed: {
+    // span-method 与 vxe 虚拟滚动不兼容（官方 warnLog: scrollErrProp），存在时自动关闭虚拟；
+    // merge-cells 与虚拟滚动兼容（vxe 对合并单元格行不做虚拟占位），无需关闭（用户显式传 scrollY/scrollX 且带 enabled 时尊重用户）
+    scrollYConfig() {
+      const propsData = this.$options.propsData || {};
+      if (
+        this.spanMethod &&
+        !(propsData.scrollY && propsData.scrollY.enabled !== undefined)
+      ) {
+        return Object.assign({}, this.scrollY, { enabled: false });
+      }
+      return this.scrollY;
+    },
+    scrollXConfig() {
+      const propsData = this.$options.propsData || {};
+      if (
+        this.spanMethod &&
+        !(propsData.scrollX && propsData.scrollX.enabled !== undefined)
+      ) {
+        return Object.assign({}, this.scrollX, { enabled: false });
+      }
+      return this.scrollX;
+    },
+    plTableHeight() {
+      if (this.height) {
+        return {
+          height: this.height + "px",
+        };
+      } else if (this.maxHeight) {
+        const maxHeight = parseHeight(this.maxHeight);
+        if (typeof maxHeight === "number") {
+          return {
+            "max-height": this.maxHeight + "px",
+          };
+        }
+      }
+      return {};
+    },
+  },
+  watch: {
+    columns: {
+      handler(val) {
+        if (val && val.length && this.$refs.singleTable) {
+          this.$refs.singleTable.loadColumn(val);
+        }
+      },
+    },
+    data: {
+      immediate: true,
+      handler(val) {
+        if (!isArrayFn(val)) {
+          throw new Error("表格数据需要的是数组格式，请检查你的数据格式");
+        }
+      },
+    },
+    currentPage(val) {
+      this.newcurrentPage = val;
+    },
+    pageSize(val) {
+      this.newPageSize = val;
+    },
+    height: {
+      immediate: true,
+      handler() {
+        this.setHeight();
+      },
+    },
+    maxHeight: {
+      immediate: true,
+      handler() {
+        this.setHeight();
+      },
+    },
+  },
+  created() {
+    this.newPageSize = this.pageSize;
+    this.newcurrentPage = this.currentPage;
+  },
+  mounted() {
+    this.$ready = true;
+    // columns prop 是 vxe-grid 独有能力，VxeTable 不提供该 prop，需手动 loadColumn；
+    // 未传 columns 时走槽位式 ux-table-column 收集（VxeTable 原生支持，见 watch staticColumns）
+    if (this.columns && this.columns.length) {
+      this.$nextTick(() => {
+        this.$refs.singleTable &&
+          this.$refs.singleTable.loadColumn(this.columns);
+      });
+    }
+  },
+  methods: {
+    // 自定义字段按钮事件
+    handleField(name, index, arr) {
+      switch (name) {
+        case "上移":
+          arr = this.swapItems(arr, index, index - 1);
+          break;
+        case "下移":
+          arr = this.swapItems(arr, index, index + 1);
+          break;
+        default:
+          break;
+      }
+      this.$emit("handle-field", name, index);
+    },
+    // 交换后的数据
+    swapItems(arr, index1, index2) {
+      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
+      return arr;
+    },
+    // 设置表格高度
+    setHeight() {
+      if (!this.$ready && this.paginationShow)
+        return Vue.nextTick(() => this.setHeight());
+      const { myPagination } = this.$refs;
+      if (this.height) {
+        this.newHeight =
+          parseHeight(this.height) -
+          (myPagination ? myPagination.offsetHeight : 0);
+        this.newMaxHeight = null;
+      } else if (this.maxHeight) {
+        this.newMaxHeight =
+          parseHeight(this.maxHeight) -
+          (myPagination ? myPagination.offsetHeight : 0);
+        this.newHeight = null;
+      }
+    },
+  },
+};
+</script>

package/packages/ux-table-column/index.js

@@ -0,0 +1,10 @@
+import VxeColumn from 'vxe-table/lib/column';
+
+// vxe-table 3.x 的 column 组件，保持 UxTableColumn 名称以兼容 <ux-table-column> 标签
+const UxTableColumn = Object.assign({}, VxeColumn, { name: 'UxTableColumn' });
+
+UxTableColumn.install = function(Vue) {
+  Vue.component(UxTableColumn.name, UxTableColumn);
+};
+
+export default UxTableColumn;

package/tools/locale/format.js

@@ -0,0 +1,46 @@
+import { hasOwn } from 'umy-ui/tools/utils/util';
+
+const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g;
+/**
+ *  String format template
+ *  - Inspired:
+ *    https://github.com/Matt-Esch/string-template/index.js
+ */
+export default function(Vue) {
+
+  /**
+   * template
+   *
+   * @param {String} string
+   * @param {Array} ...args
+   * @return {String}
+   */
+
+  function template(string, ...args) {
+    if (args.length === 1 && typeof args[0] === 'object') {
+      args = args[0];
+    }
+
+    if (!args || !args.hasOwnProperty) {
+      args = {};
+    }
+
+    return string.replace(RE_NARGS, (match, prefix, i, index) => {
+      let result;
+
+      if (string[index - 1] === '{' &&
+        string[index + match.length] === '}') {
+        return i;
+      } else {
+        result = hasOwn(args, i) ? args[i] : null;
+        if (result === null || result === undefined) {
+          return '';
+        }
+
+        return result;
+      }
+    });
+  }
+
+  return template;
+}

package/tools/locale/index.js

@@ -0,0 +1,54 @@
+import defaultLang from 'umy-ui/tools/locale/lang/zh-CN';
+// 如果是按需加载，设置u-table的locale（本地 u-table 组件统一使用 packages/tools/locale）
+import tableLocale from '../../packages/tools/locale'
+import Vue from 'vue';
+import deepmerge from 'deepmerge';
+import Format from './format';
+
+const format = Format(Vue);
+let lang = defaultLang;
+let merged = false;
+let i18nHandler = function() {
+  const vuei18n = Object.getPrototypeOf(this || Vue).$t;
+  if (typeof vuei18n === 'function' && !!Vue.locale) {
+    if (!merged) {
+      merged = true;
+      Vue.locale(
+        Vue.config.lang,
+        deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true })
+      );
+    }
+    return vuei18n.apply(this, arguments);
+  }
+};
+
+export const t = function(path, options) {
+  let value = i18nHandler.apply(this, arguments);
+  if (value !== null && value !== undefined) return value;
+  const array = path.split('.');
+  let current = lang;
+  for (let i = 0, j = array.length; i < j; i++) {
+    const property = array[i];
+    value = current[property];
+    if (i === j - 1) {
+      return format(value, options)
+    }
+    if (!value) return '';
+    current = value;
+  }
+  return '';
+};
+
+export const use = function(l) {
+  lang = l || lang;
+  if (l) {
+     // 如果是按需加载，设置u-table语言
+      tableLocale.use(l)
+  }
+};
+
+export const i18n = function(fn) {
+  i18nHandler = fn || i18nHandler;
+};
+
+export default { use, t, i18n };

package/tools/locale/lang/en.js

@@ -0,0 +1,120 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'OK',
+      clear: 'Clear'
+    },
+    datepicker: {
+      now: 'Now',
+      today: 'Today',
+      cancel: 'Cancel',
+      clear: 'Clear',
+      confirm: 'OK',
+      selectDate: 'Select date',
+      selectTime: 'Select time',
+      startDate: 'Start Date',
+      startTime: 'Start Time',
+      endDate: 'End Date',
+      endTime: 'End Time',
+      prevYear: 'Previous Year',
+      nextYear: 'Next Year',
+      prevMonth: 'Previous Month',
+      nextMonth: 'Next Month',
+      year: '',
+      month1: 'January',
+      month2: 'February',
+      month3: 'March',
+      month4: 'April',
+      month5: 'May',
+      month6: 'June',
+      month7: 'July',
+      month8: 'August',
+      month9: 'September',
+      month10: 'October',
+      month11: 'November',
+      month12: 'December',
+      week: 'week',
+      weeks: {
+        sun: 'Sun',
+        mon: 'Mon',
+        tue: 'Tue',
+        wed: 'Wed',
+        thu: 'Thu',
+        fri: 'Fri',
+        sat: 'Sat'
+      },
+      months: {
+        jan: 'Jan',
+        feb: 'Feb',
+        mar: 'Mar',
+        apr: 'Apr',
+        may: 'May',
+        jun: 'Jun',
+        jul: 'Jul',
+        aug: 'Aug',
+        sep: 'Sep',
+        oct: 'Oct',
+        nov: 'Nov',
+        dec: 'Dec'
+      }
+    },
+    select: {
+      loading: 'Loading',
+      noMatch: 'No matching data',
+      noData: 'No data',
+      placeholder: 'Select'
+    },
+    cascader: {
+      noMatch: 'No matching data',
+      loading: 'Loading',
+      placeholder: 'Select',
+      noData: 'No data'
+    },
+    pagination: {
+      goto: 'Go to',
+      pagesize: '/page',
+      total: 'Total {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'Message',
+      confirm: 'OK',
+      cancel: 'Cancel',
+      error: 'Illegal input'
+    },
+    upload: {
+      deleteTip: 'press delete to remove',
+      delete: 'Delete',
+      preview: 'Preview',
+      continue: 'Continue'
+    },
+    table: {
+      emptyText: 'No Data',
+      confirmFilter: 'Confirm',
+      resetFilter: 'Reset',
+      clearFilter: 'All',
+      sumText: 'Sum'
+    },
+    tree: {
+      emptyText: 'No Data'
+    },
+    transfer: {
+      noMatch: 'No matching data',
+      noData: 'No data',
+      titles: ['List 1', 'List 2'], // to be translated
+      filterPlaceholder: 'Enter keyword', // to be translated
+      noCheckedFormat: '{total} items', // to be translated
+      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+    },
+    image: {
+      error: 'FAILED'
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes',
+      cancelButtonText: 'No'
+    }
+  }
+};

package/tools/locale/lang/zh-CN.js

@@ -0,0 +1,116 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: '确定',
+      clear: '清空'
+    },
+    datepicker: {
+      now: '此刻',
+      today: '今天',
+      cancel: '取消',
+      clear: '清空',
+      confirm: '确定',
+      selectDate: '选择日期',
+      selectTime: '选择时间',
+      startDate: '开始日期',
+      startTime: '开始时间',
+      endDate: '结束日期',
+      endTime: '结束时间',
+      prevYear: '前一年',
+      nextYear: '后一年',
+      prevMonth: '上个月',
+      nextMonth: '下个月',
+      year: '年',
+      month1: '1 月',
+      month2: '2 月',
+      month3: '3 月',
+      month4: '4 月',
+      month5: '5 月',
+      month6: '6 月',
+      month7: '7 月',
+      month8: '8 月',
+      month9: '9 月',
+      month10: '10 月',
+      month11: '11 月',
+      month12: '12 月',
+      // week: '周次',
+      weeks: {
+        sun: '日',
+        mon: '一',
+        tue: '二',
+        wed: '三',
+        thu: '四',
+        fri: '五',
+        sat: '六'
+      },
+      months: {
+        jan: '一月',
+        feb: '二月',
+        mar: '三月',
+        apr: '四月',
+        may: '五月',
+        jun: '六月',
+        jul: '七月',
+        aug: '八月',
+        sep: '九月',
+        oct: '十月',
+        nov: '十一月',
+        dec: '十二月'
+      }
+    },
+    select: {
+      loading: '加载中',
+      noMatch: '无匹配数据',
+      noData: '无数据',
+      placeholder: '请选择'
+    },
+    cascader: {
+      noMatch: '无匹配数据',
+      loading: '加载中',
+      placeholder: '请选择',
+      noData: '暂无数据'
+    },
+    pagination: {
+      goto: '前往',
+      pagesize: '条/页',
+      total: '共 {total} 条',
+      pageClassifier: '页'
+    },
+    messagebox: {
+      title: '提示',
+      confirm: '确定',
+      cancel: '取消',
+      error: '输入的数据不合法!'
+    },
+    upload: {
+      deleteTip: '按 delete 键可删除',
+      delete: '删除',
+      preview: '查看图片',
+      continue: '继续上传'
+    },
+    table: {
+      emptyText: '暂无数据',
+      confirmFilter: '筛选',
+      resetFilter: '重置',
+      clearFilter: '全部',
+      sumText: '合计'
+    },
+    tree: {
+      emptyText: '暂无数据'
+    },
+    transfer: {
+      noMatch: '无匹配数据',
+      noData: '无数据',
+      titles: ['列表 1', '列表 2'],
+      filterPlaceholder: '请输入搜索内容',
+      noCheckedFormat: '共 {total} 项',
+      hasCheckedFormat: '已选 {checked}/{total} 项'
+    },
+    image: {
+      error: '加载失败'
+    },
+    pageHeader: {
+      title: '返回'
+    }
+  }
+};

package/tools/mixins/locale.js

@@ -0,0 +1,9 @@
+import { t } from 'umy-ui/tools/locale';
+
+export default {
+  methods: {
+    t(...args) {
+      return t.apply(this, args);
+    }
+  }
+};