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

package/src/components/EditableTable/useRowBgColor.ts

@@ -1,51 +1,44 @@
-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 { IColorList, IEmits } from "./types"
+
+interface IUseRowBgColorParams {
+  colorList: IColorList;
+  emit: IEmits;
+}
+
+export default function useRowBgColor({ colorList, emit }: IUseRowBgColorParams) {
+  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 });
+  }
+
+  return {
+    isDefaultColor,
+    getColorById,
+    setRowStyle,
+    handleColorChange,
+  }
 }

package/src/components/EditableTable/useViewSetting.ts

@@ -1,119 +1,119 @@
-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
-  }
-}
+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/EditableTable/viewColorSelect.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <el-popover
+      v-model="visible"
+      placement="right"
+      trigger="click"
+      popper-class="color-popover"
+    >
+      <div class="color-list">
+        <div
+          v-for="color in colorList"
+          :key="color.id"
+          class="color-list__item"
+          :style="{ backgroundColor: color.sampleColor }"
+          @click="() => {
+
+            visible = false
+            handleColorChange(color.id, scope)
+          }"
+        >
+          <span :style="{color: color.textColor}">{{ color.name }}</span>
+        </div>
+      </div>
+
+      <div slot="reference">
+        <div
+          v-if="isDefaultColor(scope.row.colorId)"
+          class="editable-table__color-icon"
+        />
+        <div
+          v-else
+          class="editable-table__selected-color"
+          :style="{ backgroundColor: getColorById(scope.row.colorId, 'sample') }"
+        />
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IColorList, IEmits, ITableDataItem } from './types';
+import useRowBgColor from './useRowBgColor';
+
+const props = defineProps<{
+  colorList: IColorList,
+  scope: any
+}>();
+
+const emit = defineEmits<{
+  (e: 'row-bg-change', param: { colorId: number; row: ITableDataItem; rowIndex: number }): void
+}>();
+
+const {
+  getColorById,
+  isDefaultColor,
+  handleColorChange,
+} = useRowBgColor({
+  colorList: props.colorList,
+  emit: emit as IEmits,
+});
+
+const visible = ref(false);
+
+</script>