@lx-frontend/wrap-element-ui 1.0.1-beta.2 → 1.0.1-beta.4

package/src/components/EditableTable/usePagination.ts

@@ -1,34 +1,31 @@
-import { ref } from "vue"
-import { IEmits } from "./types"
-
-interface IParams {
-  emit: IEmits
-  beforePageChange: () => void
-}
-
-export default function usePagination({emit, beforePageChange}: IParams) {
-
-  const pageSize = ref(10);
-  const currentPage = ref(1);
-
-  const handlePageSizeChange = (size: number) => {
-    pageSize.value = size;
-    currentPage.value = 1;
-    // searchValue.value = {};
-    beforePageChange();
-    emit('page-change', {size, page: currentPage.value});
-  }
-
-  const handleCurrPageChange = (curr: number) => {
-    // searchValue.value = {};
-    beforePageChange();
-    emit('page-change', {size: pageSize.value, page: curr});
-  }
-
-  return {
-    pageSize,
-    currentPage,
-    handlePageSizeChange,
-    handleCurrPageChange
-  }
+import { ref } from "vue"
+import { IEmits } from "./types"
+
+interface IParams {
+  emit: IEmits
+  beforePageChange: () => void
+}
+
+export default function usePagination({ emit, beforePageChange }: IParams) {
+
+  const pageSize = ref(10);
+
+  const handlePageSizeChange = (size: number) => {
+    pageSize.value = size;
+    // searchValue.value = {};
+    beforePageChange();
+    emit('page-change', { size, page: 1 });
+  }
+
+  const handleCurrPageChange = (curr: number) => {
+    // searchValue.value = {};
+    beforePageChange();
+    emit('page-change', { size: pageSize.value, page: curr });
+  }
+
+  return {
+    pageSize,
+    handlePageSizeChange,
+    handleCurrPageChange,
+  }
 }

package/src/components/EditableTable/useRowBgColor.ts

@@ -1,51 +1,51 @@
-import { ref, nextTick } from "vue"
-import { IColorList, IEmits } from "./types"
-
-interface IUseRowBgColorParams {
-  colorList: IColorList;
-  emit: IEmits;
-}
-
-export default function useRowBgColor({colorList, emit}: IUseRowBgColorParams) {
-  const colorPopoverRef = ref<any>(null);
-
-  const isDefaultColor = (id: number) => {
-    if (!id) {
-      // 没有颜色id，则认为是默认色
-      return true;
-    }
-    return colorList.find(c => +c.id === +id)?.default;
-  }
-
-  const getColorById = (id: number, type: 'bg' | 'sample' = 'bg') => {
-    return colorList.find(c => +c.id === +id)?.[`${type}Color`] || '';
-  }
-
-  const setRowStyle = (scope) => {
-    const row = scope.row;
-    return {
-      backgroundColor: row.colorId ? getColorById(row.colorId) : ''
-    }
-  }
-
-  const handleColorChange = async (colorId: number, scope) => {
-    const { row, $index: rowIndex, store } = scope;
-    const dataList = store.states.data;
-    const curRow = {...dataList[rowIndex], colorId: +colorId};
-    const newList = [...dataList];
-    newList.splice(rowIndex, 1, curRow);
-    store.states.data = newList;
-    emit('row-bg-change', {colorId, row, rowIndex});
-    await nextTick();
-    // TODO: 为什么不是数组？为什么关闭弹窗不生效了？
-    colorPopoverRef.value?.doClose();
-  }
-
-  return {
-    isDefaultColor,
-    getColorById,
-    setRowStyle,
-    handleColorChange,
-    colorPopoverRef
-  }
+import { ref, nextTick } from "vue"
+import { IColorList, IEmits } from "./types"
+
+interface IUseRowBgColorParams {
+  colorList: IColorList;
+  emit: IEmits;
+}
+
+export default function useRowBgColor({ colorList, emit }: IUseRowBgColorParams) {
+  const colorPopoverRef = ref<any>(null);
+
+  const isDefaultColor = (id: number) => {
+    if (!id) {
+      // 没有颜色id，则认为是默认色
+      return true;
+    }
+    return colorList.find(c => +c.id === +id)?.default;
+  }
+
+  const getColorById = (id: number, type: 'bg' | 'sample' = 'bg') => {
+    return colorList.find(c => +c.id === +id)?.[`${type}Color`] || '';
+  }
+
+  const setRowStyle = (scope) => {
+    const row = scope.row;
+    return {
+      backgroundColor: row.colorId ? getColorById(row.colorId) : ''
+    }
+  }
+
+  const handleColorChange = async (colorId: number, scope) => {
+    const { row, $index: rowIndex, store } = scope;
+    const dataList = store.states.data;
+    const curRow = { ...dataList[rowIndex], colorId: +colorId };
+    const newList = [...dataList];
+    newList.splice(rowIndex, 1, curRow);
+    store.states.data = newList;
+    emit('row-bg-change', { colorId, row, rowIndex });
+    await nextTick();
+    // TODO: 为什么不是数组？为什么关闭弹窗不生效了？
+    colorPopoverRef.value?.doClose();
+  }
+
+  return {
+    isDefaultColor,
+    getColorById,
+    setRowStyle,
+    handleColorChange,
+    colorPopoverRef
+  }
 }

package/src/components/EditableTable/useViewSetting.ts

@@ -1,67 +1,119 @@
-import { ref, nextTick, watch, ComputedRef, Ref, onMounted } from "vue"
-import { IColumnConfig, IProps } from "./types"
-
-interface IViewSettingParams {
-  tableDomRef: any
-  showingColumns: Ref<string[]>
-  actualColumns: ComputedRef<IColumnConfig[]>
-  props: IProps
-}
-
-export default function useViewSetting({ tableDomRef, showingColumns, actualColumns, props }: IViewSettingParams) {
-  const viewSettingDragSortOptions = ref<IColumnConfig[]>([]);
-  const columnsToBeShown = ref<string[]>([]); // 显示设置弹窗中勾选的列
-  const viewSettingVisible = ref(false);
-  const leftFixedColumnCount = ref(0);
-
-  watch(
-    () => columnsToBeShown.value,
-    (val) => {
-      viewSettingDragSortOptions.value = props.columnConfig
-        .filter(c => val.includes(c.prop));
-    },
-    { immediate: true }
-  )
-
-  watch(
-    () => showingColumns.value,
-    (val) => {
-      // 只要正在显示的列发生变化，dialog中的显示项也要同步变化，反之不然
-      columnsToBeShown.value = [...val];
-    },
-    { immediate: true }
-  )
-
-  onMounted(() => {
-    leftFixedColumnCount.value = props.leftFixedCount as number;
-  })
-
-  const handleViewSettingShow = () => {
-    viewSettingDragSortOptions.value = actualColumns.value
-      .filter(c => columnsToBeShown.value.includes(c.prop));
-    viewSettingVisible.value = true;
-  }
-
-  const handleViewSettingClose = () => {
-    viewSettingVisible.value = false;
-    // 恢复显示的列
-    showingColumns.value = actualColumns.value.map(c => c.prop);
-  }
-
-  const handleViewSettingConfirm = async () => {
-    viewSettingVisible.value = false;
-    showingColumns.value = viewSettingDragSortOptions.value.map(c => c.prop);
-    await nextTick();
-    tableDomRef.value?.doLayout();
-  }
-
-  return {
-    viewSettingDragSortOptions,
-    columnsToBeShown,
-    viewSettingVisible,
-    leftFixedColumnCount,
-    handleViewSettingShow,
-    handleViewSettingClose,
-    handleViewSettingConfirm
-  }
-}
+import { ref, nextTick, watch, ComputedRef, Ref, onMounted, computed } from "vue"
+import { IColumnConfig, IProps } from "./types"
+
+interface IViewSettingParams {
+  tableDomRef: any
+  showingColumns: Ref<string[]>
+  actualColumns: ComputedRef<IColumnConfig[]>
+  props: IProps
+}
+
+export default function useViewSetting({ tableDomRef, showingColumns, actualColumns, props }: IViewSettingParams) {
+  const viewSettingDragSortOptions = ref<IColumnConfig[]>([]);
+  const columnsToBeShown = ref<string[]>([]); // 显示设置弹窗中勾选的列
+  const viewSettingVisible = ref(false);
+  const leftFixedColumnCount = ref(0);
+  const tempLeftFixedColumnCount = ref(0);
+
+  const storageKey = computed(() => `@lx-frontend/wrap-element-ui/table_setting_cloumns/${props.settingStorgeKey || (location.pathname === '/' ? location.hash : location.pathname)}`);
+
+  const saveSettingToStorge = () => localStorage.setItem(storageKey.value, JSON.stringify({
+    showingColumns: showingColumns.value,
+    leftFixedColumnCount: leftFixedColumnCount.value
+  }));
+
+  watch(
+    () => props.columnConfig,
+    (val) => {
+      const _keys = new Set(props.columnConfig.map(c => (c.prop)));
+      const _cache = localStorage.getItem(storageKey.value);
+      const setColumns = () => (showingColumns.value = val.filter(v => !v.defaultHide).map(c => c.prop));
+      if (!_cache) {
+        setColumns();
+        leftFixedColumnCount.value = props.leftFixedCount as number;
+      } else {
+        try {
+          // 缓存数据字段可能随着更新导致对不上，清理无效数据，防止出问题
+          const cache = JSON.parse(_cache);
+          if (!cache.showingColumns || !Array.isArray(cache.showingColumns)) {
+            setColumns();
+          } else {
+            showingColumns.value = cache.showingColumns.filter(key => _keys.has(key));
+          }
+          const _leftFixedColumnCount = Number(cache?.leftFixedColumnCount)
+          leftFixedColumnCount.value = isNaN(_leftFixedColumnCount) ? (props.leftFixedCount as number) : _leftFixedColumnCount;
+          // 写入清理后的数据
+          saveSettingToStorge();
+        } catch (error) {
+          console.error(error);
+          localStorage.removeItem(storageKey.value);
+          setColumns();
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  watch(
+    () => columnsToBeShown.value,
+    (val) => {
+      viewSettingDragSortOptions.value = props.columnConfig
+        .filter(c => val.includes(c.prop));
+      if (tempLeftFixedColumnCount.value > val.length) tempLeftFixedColumnCount.value = val.length
+    },
+    { immediate: true }
+  )
+
+  watch(
+    () => showingColumns.value,
+    (val) => {
+      // 只要正在显示的列发生变化，dialog中的显示项也要同步变化，反之不然
+      columnsToBeShown.value = [...val];
+    },
+    { immediate: true }
+  )
+
+  onMounted(() => {
+    leftFixedColumnCount.value = props.leftFixedCount as number;
+  })
+
+  const handleViewSettingShow = () => {
+    viewSettingDragSortOptions.value = actualColumns.value
+      .filter(c => columnsToBeShown.value.includes(c.prop));
+    tempLeftFixedColumnCount.value = leftFixedColumnCount.value;
+    viewSettingVisible.value = true;
+  }
+
+  const handleViewSettingClose = () => {
+    viewSettingVisible.value = false;
+    // 恢复显示的列
+    showingColumns.value = actualColumns.value.map(c => c.prop);
+  }
+
+  const handleViewSettingConfirm = async () => {
+    viewSettingVisible.value = false;
+    showingColumns.value = viewSettingDragSortOptions.value.map(c => c.prop);
+    leftFixedColumnCount.value = tempLeftFixedColumnCount.value;
+    saveSettingToStorge()
+    await nextTick();
+    tableDomRef.value?.doLayout();
+  }
+
+  const handleInputTempLeftFixedColumnCount = (value: string) => {
+    const _value = Number(value)
+    if (isNaN(_value)) return
+    tempLeftFixedColumnCount.value = Math.max(0, Math.min(columnsToBeShown.value.length, Math.floor(_value)))
+  }
+
+  return {
+    viewSettingDragSortOptions,
+    columnsToBeShown,
+    viewSettingVisible,
+    leftFixedColumnCount,
+    tempLeftFixedColumnCount,
+    handleInputTempLeftFixedColumnCount,
+    handleViewSettingShow,
+    handleViewSettingClose,
+    handleViewSettingConfirm
+  }
+}

package/src/components/Ellipsis/MultilineEllipsis.vue

@@ -1,141 +1,141 @@
-<template>
-  <div class="ellipsis">
-    <div class="ellipsis__container" :style="{ 'font-size': `${fontSize}px`, 'line-height': lineHeight, color }">
-      <div class="ellipsis__content" ref="contentEl" :style="{ height: `${preHeight}px`, 'align-items': alignItems }">{{ preContent }}</div>
-      <div class="ellipsis__last-line" ref="lastLineEl" :style="{ height: `${lastLineHeight}px` }">{{ restContent }}
-        <span v-if="isShowIconMethod()" :class="iconName"></span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MultilineEllipsis',
-  props: {
-    fontSize: {
-      type: Number,
-      default: 12
-    },
-    color: {
-      type: String,
-      default: '#000000'
-    },
-    lineCount: {
-      type: Number,
-      default: 1
-    },
-    content: {
-      type: String,
-      default: ''
-    },
-    isOverflow: {
-      type: Boolean,
-      default: false
-    },
-    iconName: {
-      type: String,
-      default: 'el-icon-arrow-down'
-    },
-    overCountTip: {
-      type: Object,
-    },
-    showIconObj: {
-      type: Object,
-      default: () => {
-        return {
-          isShowIcon: false,
-          length: 0,
-        }
-      },
-    },
-  },
-  data () {
-    return {
-      restContent: '',
-      preContent: '',
-      lastLineHeight: 0,
-      alignItems: 'center'
-    }
-  },
-  computed: {
-    preHeight () {
-      return (this.fontSize + 2) * (this.lineCount - 1)
-    },
-    lineHeight () {
-      return `${this.fontSize + 2}px`
-    }
-  },
-  mounted () {
-    // 由于在 element table 中，渲染计算时的宽度可能与实际展示时的宽度可能存在偏差，在此把宽度固定为组件挂载时获取到的宽度
-    this.$refs.contentEl.style.width = `${this.$refs.contentEl.offsetWidth}px`
-    // 处理长度为1的数据不用走截取逻辑减少计算
-    if (this.content.length === 1) {
-      this.restContent = this.content;
-      this.$refs.contentEl.remove();
-      this.lastLineHeight = (this.fontSize + 2);
-      return;
-    }
-    this.bsearch(this.content)
-    this.lastLineHeight = (this.fontSize + 2)
-  },
-  methods: {
-    bsearch (data, pre = 0) {
-      const len = data.length
-      const half = Math.floor((len - pre) / 2) + pre
-      if (len - pre <= 1) {
-        const restContent = pre === 0 ? this.content.slice(pre) : this.content.slice(pre + 1)
-        this.preContent = pre === 0 ? '' : data.slice(0, pre + 1)
-        if (!restContent) {
-          this.lastLineHeight = 0
-          this.$emit('update:isOverflow', false)
-          return false
-        }
-        this.restContent = restContent
-        this.$nextTick(() => {
-          this.$emit('update:isOverflow', this.$refs.lastLineEl.scrollWidth !== this.$refs.lastLineEl.offsetWidth)
-        })
-        return true
-      }
-      this.preContent = data.slice(0, half + 1)
-      this.$nextTick(() => {
-        const isEqual = this.$refs.contentEl.scrollHeight === this.preHeight
-        if (isEqual) {
-          this.alignItems = 'center'
-          return this.bsearch(data, half)
-        }
-        this.alignItems = 'flex-start'
-        return this.bsearch(data.slice(0, half), pre)
-      })
-      return true
-    },
-    isShowIconMethod() {
-      /**
-       * 1、isShowIcon--是否展示icon; length-- 所有传入数据总数量
-       * 2、this.overCountTip.index === this.overCountTip.length 当前列表展示个数(最后一个列)
-       * 3、length > this.overCountTip.length 满足总个数大于当前列表展示个数
-      **/ 
-      const { isShowIcon, length } = this.showIconObj;
-      return (isShowIcon && this.overCountTip.index === this.overCountTip.length && this.content.length && (length > this.overCountTip.length));
-    }
-  }
-}
-</script>
-
-<style lang="less">
-  .ellipsis {
-    width: 100%;
-    margin: 5px auto;
-    &__content {
-      width: 100%;
-      overflow: hidden;
-      display: flex;
-    }
-    &__last-line {
-      width: 100%;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-</style>
+<template>
+  <div class="ellipsis">
+    <div class="ellipsis__container" :style="{ 'font-size': `${fontSize}px`, 'line-height': lineHeight, color }">
+      <div class="ellipsis__content" ref="contentEl" :style="{ height: `${preHeight}px`, 'align-items': alignItems }">{{ preContent }}</div>
+      <div class="ellipsis__last-line" ref="lastLineEl" :style="{ height: `${lastLineHeight}px` }">{{ restContent }}
+        <span v-if="isShowIconMethod()" :class="iconName"></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MultilineEllipsis',
+  props: {
+    fontSize: {
+      type: Number,
+      default: 12
+    },
+    color: {
+      type: String,
+      default: '#000000'
+    },
+    lineCount: {
+      type: Number,
+      default: 1
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    isOverflow: {
+      type: Boolean,
+      default: false
+    },
+    iconName: {
+      type: String,
+      default: 'el-icon-arrow-down'
+    },
+    overCountTip: {
+      type: Object,
+    },
+    showIconObj: {
+      type: Object,
+      default: () => {
+        return {
+          isShowIcon: false,
+          length: 0,
+        }
+      },
+    },
+  },
+  data () {
+    return {
+      restContent: '',
+      preContent: '',
+      lastLineHeight: 0,
+      alignItems: 'center'
+    }
+  },
+  computed: {
+    preHeight () {
+      return (this.fontSize + 2) * (this.lineCount - 1)
+    },
+    lineHeight () {
+      return `${this.fontSize + 2}px`
+    }
+  },
+  mounted () {
+    // 由于在 element table 中，渲染计算时的宽度可能与实际展示时的宽度可能存在偏差，在此把宽度固定为组件挂载时获取到的宽度
+    this.$refs.contentEl.style.width = `${this.$refs.contentEl.offsetWidth}px`
+    // 处理长度为1的数据不用走截取逻辑减少计算
+    if (this.content.length === 1) {
+      this.restContent = this.content;
+      this.$refs.contentEl.remove();
+      this.lastLineHeight = (this.fontSize + 2);
+      return;
+    }
+    this.bsearch(this.content)
+    this.lastLineHeight = (this.fontSize + 2)
+  },
+  methods: {
+    bsearch (data, pre = 0) {
+      const len = data.length
+      const half = Math.floor((len - pre) / 2) + pre
+      if (len - pre <= 1) {
+        const restContent = pre === 0 ? this.content.slice(pre) : this.content.slice(pre + 1)
+        this.preContent = pre === 0 ? '' : data.slice(0, pre + 1)
+        if (!restContent) {
+          this.lastLineHeight = 0
+          this.$emit('update:isOverflow', false)
+          return false
+        }
+        this.restContent = restContent
+        this.$nextTick(() => {
+          this.$emit('update:isOverflow', this.$refs.lastLineEl.scrollWidth !== this.$refs.lastLineEl.offsetWidth)
+        })
+        return true
+      }
+      this.preContent = data.slice(0, half + 1)
+      this.$nextTick(() => {
+        const isEqual = this.$refs.contentEl.scrollHeight === this.preHeight
+        if (isEqual) {
+          this.alignItems = 'center'
+          return this.bsearch(data, half)
+        }
+        this.alignItems = 'flex-start'
+        return this.bsearch(data.slice(0, half), pre)
+      })
+      return true
+    },
+    isShowIconMethod() {
+      /**
+       * 1、isShowIcon--是否展示icon; length-- 所有传入数据总数量
+       * 2、this.overCountTip.index === this.overCountTip.length 当前列表展示个数(最后一个列)
+       * 3、length > this.overCountTip.length 满足总个数大于当前列表展示个数
+      **/ 
+      const { isShowIcon, length } = this.showIconObj;
+      return (isShowIcon && this.overCountTip.index === this.overCountTip.length && this.content.length && (length > this.overCountTip.length));
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .ellipsis {
+    width: 100%;
+    margin: 5px auto;
+    &__content {
+      width: 100%;
+      overflow: hidden;
+      display: flex;
+    }
+    &__last-line {
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+</style>