@lx-frontend/wrap-element-ui 1.0.1-beta.5 → 1.0.1-beta.7

package/src/components/EditableTable/{useRowBgColor.ts → bizHooks/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 → bizHooks/useViewSetting.ts}

@@ -1,119 +1,118 @@
-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, watch, Ref, computed, nextTick } from "vue"
+import { IColumnConfig, IProps } from "../types"
+
+interface IViewSettingParams {
+  showingColumns: Ref<string[]>
+  actualColumns: Ref<IColumnConfig[]>
+  viewSettingDragSortOptions: Ref<IColumnConfig[]>
+  props: IProps
+  emit: {
+    (e: 'update:leftFixedColumnCount', val: number): void
+    (e: 'update:showingColumns', val: string[]): void
+    (e: 'update:viewSettingDragSortOptions', val: IColumnConfig[]): void
+    (e: 'tableDoLayout'): void
+  }
+}
+
+export default function useViewSetting({
+  showingColumns,
+  actualColumns,
+  props,
+  viewSettingDragSortOptions,
+  emit
+}: IViewSettingParams) {
+  const columnsToBeShown = ref<string[]>([]); // 显示设置弹窗中勾选的列
+  const viewSettingVisible = ref(false);
+  const leftFixedColumnCount = ref(0);
+  const tempLeftFixedColumnCount = ref(0);
+
+  const updateShowingColumns = (val: string[]) => emit('update:showingColumns', val);
+
+  const storageKey = computed(() => `@lx-frontend/wrap-element-ui/table_setting_cloumns/${props.settingStorgeKey || (location.pathname === '/' ? location.hash : location.pathname)}`);
+
+  const saveSettingToStorge = async() => {
+    await nextTick()
+    localStorage.setItem(storageKey.value, JSON.stringify({
+      showingColumns: showingColumns.value,
+      leftFixedColumnCount: leftFixedColumnCount.value
+    }))
+  };
+
+  const handleViewSettingShow = () => {
+    emit('update:viewSettingDragSortOptions', [...actualColumns.value]);
+    tempLeftFixedColumnCount.value = leftFixedColumnCount.value;
+    viewSettingVisible.value = true;
+    columnsToBeShown.value = [...showingColumns.value];
+  }
+
+  const handleViewSettingClose = () => {
+    viewSettingVisible.value = false;
+  }
+
+  const handleViewSettingConfirm = async () => {
+    viewSettingVisible.value = false;
+    updateShowingColumns(viewSettingDragSortOptions.value.map(c => c.prop));
+    leftFixedColumnCount.value = tempLeftFixedColumnCount.value;
+    await saveSettingToStorge()
+    emit('tableDoLayout')
+  }
+
+  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)))
+  }
+
+  watch(
+    () => props.columnConfig,
+    async(val) => {
+      const _keys = new Set(val.map(c => (c.prop)));
+      const _cache = localStorage.getItem(storageKey.value);
+      const setColumns = () => updateShowingColumns(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 {
+            updateShowingColumns(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, (val) => {
+    const _map = new Map<string, IColumnConfig>()
+    props.columnConfig.forEach(c => _map.set(c.prop, c))
+    // 展示时保留顺序
+    emit('update:viewSettingDragSortOptions', val.map(prop => _map.get(prop)!))
+    if (tempLeftFixedColumnCount.value > val.length) tempLeftFixedColumnCount.value = val.length
+  }, { immediate: true })
+
+  watch(leftFixedColumnCount, (val) => emit('update:leftFixedColumnCount', val), { immediate: true });
+
+  return {
+    columnsToBeShown,
+    viewSettingVisible,
+    leftFixedColumnCount,
+    tempLeftFixedColumnCount,
+    handleInputTempLeftFixedColumnCount,
+    handleViewSettingShow,
+    handleViewSettingClose,
+    handleViewSettingConfirm,
+  }
+}

package/src/components/EditableTable/features/bizColorSelect.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 '../bizHooks';
+
+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>

package/src/components/EditableTable/features/bizEditCell.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <el-input
+      v-if="column.editType === 'input'"
+      clearable
+      :value="value"
+      @input="val => emit('input', val)"
+    />
+
+    <el-select
+      v-if="column.editType === 'select'"
+      :value="value"
+      @input="val => emit('input', val)"
+    >
+      <el-option
+        v-for="item in column.selectOptions"
+        :key="item.label"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+
+    <el-date-picker
+      v-if="column.editType === 'date'"
+      type="date"
+      placeholder="选择日期"
+      :value="value"
+      @input="val => emit('input', val)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IColumnConfig } from '../types'
+
+defineProps<{
+  column: IColumnConfig;
+  value: any;
+}>()
+
+const emit = defineEmits<{
+  (e: 'input', value: any): void;
+}>()
+</script>

package/src/components/EditableTable/features/bizTableHeaderPopover.vue

@@ -0,0 +1,202 @@
+<template>
+  <el-popover
+    ref="popoverRef"
+    placement="bottom"
+    trigger="click"
+    popper-class="editable-table__sort-filter"
+    :data-prop="column.prop"
+    @show="() => emit('popover-show')"
+  >
+    <template slot="reference">
+      <!-- 筛选中，或排序中，高亮 -->
+      <span :class="['editable-table__sort-reference', headActive && 'editable-table__sort-reference--active']">
+        {{ column.label }}
+        <div :class="['editable-table__sort-icon', headActive && 'editable-table__sort-icon--active']" />
+      </span>
+    </template>
+    <div class="sort-filter">
+      <div class="sort-filter__column-title">
+        {{ column.label }}
+      </div>
+      <div
+        v-if="column.isColumnSortable"
+        class="sort-filter__sort"
+      >
+        <div class="sort-filter__sort-title">
+          排序
+        </div>
+        <div class="sort-filter__sort-btns">
+          <el-button
+            :class="['sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'ascending' && 'sort-filter__sort-btn--active']"
+            @click="() => emit('update:sort', 'ascending')"
+          >
+            升序
+          </el-button>
+          <el-button
+            :class="['sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'descending' && 'sort-filter__sort-btn--active']"
+            @click="() => emit('update:sort', 'descending')"
+          >
+            降序
+          </el-button>
+        </div>
+      </div>
+      <div
+        v-if="column.search && !Array.isArray(column.search)"
+        class="sort-filter__search"
+      >
+        <div class="sort-filter__search-title">
+          搜索
+        </div>
+        <el-input
+          class="sort-filter__search-input"
+          placeholder="请输入内容"
+          :value="tempSearchValue[column.prop]"
+          @input="val => emit('update:tempSearchValue', column.prop, val)"
+        />
+      </div>
+
+      <div
+        v-if="column.search && Array.isArray(column.search)"
+        class="sort-filter__search"
+        style="display: flex;flex-direction: column;gap: 12px;"
+      >
+        <div
+          v-for="item in column.search"
+          :key="item.prop"
+        >
+          <div class="sort-filter__search-title">
+            {{ item.label }}
+          </div>
+          <el-input
+            class="sort-filter__search-input"
+            placeholder="请输入内容"
+            :value="tempSearchValue[item.prop]"
+            @input="val => emit('update:tempSearchValue', item.prop, val)"
+          />
+        </div>
+      </div>
+
+      <div
+        v-if="column.filters && ((Array.isArray(column.filters) ? column.filters : column.filters.options).length > 0)"
+        class="sort-filter__filter"
+      >
+        <div class="sort-filter__filter-title">
+          筛选
+        </div>
+        <el-checkbox-group
+          v-if="column.filters && (Array.isArray(column.filters) || column.filters.type === 'checkbox')"
+          class="sort-filter__filter-checkbox-group"
+          :value="tempFilteredValue[column.prop]"
+          @input="val => emit('update:tempFilteredValue', column.prop, val)"
+        >
+          <el-checkbox
+            v-for="item in (Array.isArray(column.filters) ? column.filters : column.filters.options)"
+            :key="item.value"
+            :label="item.value"
+            class="sort-filter__filter-checkbox"
+          >
+            <slot
+              name="filter-item"
+              v-bind="item"
+            >
+              {{ item.text }}
+            </slot>
+          </el-checkbox>
+        </el-checkbox-group>
+
+        <el-radio-group
+          v-if="column.filters && !Array.isArray(column.filters) && column.filters.type === 'radio'"
+          style="display: flex;flex-direction: column;gap: 6px;"
+          :value="tempFilteredValue[column.prop]"
+          @input="val => emit('update:tempFilteredValue', column.prop, val)"
+        >
+          <el-radio
+            v-for="item in column.filters.options"
+            :key="item.value"
+            :label="item.value"
+          >
+            <slot
+              name="filter-item"
+              v-bind="item"
+            >
+              {{ item.text }}
+            </slot>
+          </el-radio>
+        </el-radio-group>
+      </div>
+      <div
+        v-if="column.summary"
+        class="sort-filter__filter"
+      >
+        <div class="sort-filter__filter-title">
+          统计
+        </div>
+        <el-checkbox-group
+          class="sort-filter__filter-checkbox-group"
+          :value="tempSummaryList"
+          @input="val => emit('update:tempSummaryList', val)"
+        >
+          <el-checkbox
+            :label="column.prop"
+            class="sort-filter__filter-checkbox"
+          >
+            <slot
+              name="summay-item"
+              v-bind="column"
+            >
+              {{ column.label }}
+            </slot>
+          </el-checkbox>
+        </el-checkbox-group>
+      </div>
+      <div class="sort-filter__footer">
+        <el-button
+          class="sort-filter__reset-btn"
+          @click="() => emit('reset')"
+        >
+          重置
+        </el-button>
+        <el-button
+          class="sort-filter__confirm-btn"
+          type="primary"
+          @click="() => emit('confirm')"
+        >
+          确定
+        </el-button>
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { IColumnConfig } from '../types'
+
+defineProps<{
+  headActive: boolean
+  column: IColumnConfig
+  tempSummaryList: string[]
+  tempSortingColumn: IColumnConfig | null
+  tempSortType: 'ascending' | 'descending' | ''
+  tempSearchValue: Record<string, string>
+  tempFilteredValue: Record<string, string | number | number[] | string[]>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:tempSearchValue', key: string, value: string): void
+  (e: 'update:tempFilteredValue', key: string, value: string): void
+  (e: 'update:tempSummaryList', value: string[]): void
+  (e: 'update:sort', type: 'ascending' | 'descending'): void
+  (e: 'popover-show'): void
+  (e: 'reset'): void
+  (e: 'confirm'): void
+}>()
+
+const popoverRef = ref(null as any)
+
+defineExpose({
+  close: () => {
+    popoverRef.value?.doClose()
+  }
+})
+</script>