@opendesign-plus/components 0.0.1-rc.10

package/src/components/common/ThFilter.vue

@@ -0,0 +1,330 @@
+<script setup lang="ts">
+import {
+  OCheckbox,
+  OCheckboxGroup,
+  ODivider,
+  ODropdown,
+  ODropdownItem,
+  OIcon,
+  OLink,
+  OPopover,
+  OScroller,
+} from '@opensig/opendesign';
+import { computed, h, nextTick, ref, watch } from 'vue';
+import IconFilter from '~icons/components/icon-filter.svg';
+import { useI18n } from '@/i18n';
+import { buildVueDompurifyHTMLDirective } from 'vue-dompurify-html';
+
+// 局部注册 v-dompurify-html 指令
+const vDompurifyHtml = buildVueDompurifyHTMLDirective();
+
+type TItem = { label: string; value: string | number; children?: TItem[] };
+const { t } = useI18n();
+const props = withDefaults(
+  defineProps<{
+    modelValue: string[] | number[] | string | number;
+    list: TItem[];
+    multiple?: boolean;
+    tableWidth?: number;
+  }>(),
+  {
+    list: () => [],
+    multiple: false,
+  },
+);
+const emits = defineEmits(['update:model-value', 'confirm']);
+/**
+ * 根据options判断是否为级联选择器
+ * 如果是级联选择器，需要注意子级是否存在相同value
+ */
+const isCascader = computed(() => props.list.some((v: TItem) => v.children?.length));
+// 格式化数据
+const options = computed(() => {
+  return props.list.map((v: TItem) => {
+    const children = (v.children || []).map((t: TItem) => {
+      return {
+        label: t.label,
+        value: t.value,
+      };
+    });
+    return {
+      label: v.label,
+      value: v.value,
+      children: isCascader.value ? children : undefined,
+    };
+  });
+});
+const visible = ref(false); // 控制浮窗展示
+
+watch(
+  () => props.modelValue,
+  (val: TItem) => {
+    if (!props.multiple) {
+      checked.value = val;
+    } else {
+      multiChecked.value = val;
+    }
+  },
+);
+// -------------------- 普通多选 --------------------
+const multiChecked = ref([]); // 选中的值
+
+const change = (val: string | number) => {
+  multiChecked.value = val;
+};
+
+// -------------------- 级联选择 --------------------
+const cascaderValue = ref([]);
+// -------------------- 单选 --------------------
+const checked = ref(null); // 选中的值
+// 单选没有按钮，点击即是确认
+const handleCommand = (val: string | number) => {
+  if (checked.value === val) {
+    checked.value = null;
+  } else {
+    checked.value = val;
+  }
+  confirmFn();
+};
+// -------------------- 按钮操作 --------------------
+const reset = () => {
+  multiChecked.value = [];
+  cascaderValue.value = [];
+  checked.value = null;
+  confirmFn();
+};
+const confirmFn = () => {
+  let finalValue = null;
+  if (!props.multiple) {
+    finalValue = checked.value;
+  } else if (isCascader.value) {
+    finalValue = cascaderValue.value;
+  } else {
+    finalValue = multiChecked.value;
+  }
+  emits('update:model-value', finalValue);
+  visible.value = true;
+  nextTick(() => {
+    emits('confirm');
+    visible.value = false;
+  });
+};
+
+// 是否有选中值，用于切换图标
+const hasChecked = computed(() => {
+  return multiChecked.value.length || cascaderValue.value.length || checked.value || props.modelValue;
+});
+// -------------------- 自定义级联选择器label --------------------
+const aref = ref(null);
+const clickLabelSpan = async (e) => {
+  const ele = e.target.parentElement.parentElement;
+  await nextTick();
+  const input = ele.querySelector('input');
+  input.click();
+  await nextTick();
+  input.change?.(input);
+  await nextTick();
+  aref.value?.$forceUpdate();
+  cascaderValue.value = JSON.parse(JSON.stringify(cascaderValue.value));
+};
+const renderLabel = ({ data }) => {
+  return h('span', { onclick: clickLabelSpan }, data.label);
+};
+</script>
+
+<template>
+  <div class="th-filter-wrapper" ref="filterRef">
+    <span>
+      <slot></slot>
+    </span>
+    <OPopover
+      v-if="multiple"
+      :visible="visible"
+      position="bottom"
+      wrapClass="th-filter-popover"
+      trigger="click"
+      :anchor="false">
+      <template #target>
+        <div class="filter-wrapper" :class="hasChecked && 'has-checked'">
+          <OIcon class="filter-icon">
+            <IconFilter />
+          </OIcon>
+        </div>
+      </template>
+      <OScroller class="content-wrapper" show-type="hover" disabled-x v-if="!isCascader">
+        <OCheckboxGroup direction="v" @change="change" v-model="multiChecked">
+          <OCheckbox v-for="item in options" :key="item.value" :value="item.value">
+            <span v-dompurify-html="item.label"></span>
+          </OCheckbox>
+        </OCheckboxGroup>
+      </OScroller>
+      <div class="list-content-wrapper" v-else>
+        <ElCascaderPanel
+          ref="aref"
+          expandTrigger="hover"
+          :renderLabel="renderLabel"
+          v-model="cascaderValue"
+          style="width: fit-content"
+          :options="options"
+          :props="{ multiple: true, expandTrigger: 'hover' }"
+        />
+      </div>
+      <ODivider />
+      <div class="btn-wrapper">
+        <OLink @click="reset">{{ t('common.reset') }}</OLink>
+        <OLink @click="confirmFn">{{ t('common.confirm') }}</OLink>
+      </div>
+    </OPopover>
+    <ODropdown v-else optionPosition="bottom" optionWrapClass="th-filter-dropdown" v-model="checked">
+      <div class="filter-wrapper" :class="hasChecked && 'has-checked'">
+        <OIcon class="filter-icon">
+          <IconFilter />
+        </OIcon>
+      </div>
+      <template #dropdown>
+        <OScroller disabled-x style="max-height: 300px" show-type="always" v-if="options.length">
+          <ODropdownItem
+            :style="{
+              '--table-width': tableWidth,
+            }"
+            :class="[{ 'is-active': modelValue === '' }]"
+            value="''"
+            :label="t('common.all')"
+            @click="handleCommand('')"
+          />
+          <ODropdownItem
+            :style="{
+              '--table-width': tableWidth,
+            }"
+            :class="[{ 'is-active': item.value === modelValue }]"
+            v-for="item in options"
+            :key="item.value"
+            :value="item.value"
+            @click="handleCommand(item.value)"
+          >
+            <span v-dompurify-html="item.label"></span>
+          </ODropdownItem>
+        </OScroller>
+        <slot name="empty" v-if="!options.length"></slot>
+      </template>
+    </ODropdown>
+  </div>
+</template>
+
+<style lang="scss">
+.th-filter-wrapper {
+  display: flex;
+  column-gap: var(--o-gap-2);
+  flex-wrap: nowrap;
+  align-items: center;
+
+  & > span:first-child {
+    word-break: keep-all;
+  }
+}
+
+.filter-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  & > * {
+    flex-shrink: 0;
+  }
+
+  .filter-hover-icon {
+    display: none;
+  }
+
+  .filter-icon {
+    @include h2;
+  }
+
+  &:hover,
+  &.has-checked {
+    .filter-icon {
+      color: var(--o-color-primary1);
+    }
+
+    .o-icon {
+      path {
+        fill: currentColor;
+      }
+    }
+  }
+}
+
+.th-filter-dropdown {
+  .o-dropdown-item {
+    min-width: 80px;
+    max-width: calc(var(--table-width, 300) * 0.8px);
+    --dropdown-item-justify: flex-start;
+    --dropdown-item-padding: 7px 12px;
+  }
+
+  .o-dropdown-item.is-active {
+    font-weight: 500;
+    background-color: var(--dropdown-item-bg-color-hover);
+    color: var(--dropdown-item-color-hover);
+  }
+}
+
+.th-filter-popover {
+  --popup-radius: var(--o-radius-xs);
+
+  .o-popup-body {
+    padding: var(--o-gap-2) 0 0 0;
+  }
+
+  .list-content-wrapper {
+    display: flex;
+
+    .o-scrollbar-wrapper:first-child {
+      border-right: 1px solid rgb(224, 226, 230);
+    }
+  }
+
+  .content-wrapper {
+    padding: 0 var(--o-gap-4);
+    overflow: auto;
+    max-height: 300px;
+
+    .o-checkbox-group {
+      flex-shrink: 0;
+    }
+
+    .o-checkbox-label {
+      flex-grow: 1;
+
+      .label-wrapper {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .o-svg-icon {
+          font-size: 24px;
+        }
+      }
+    }
+  }
+
+  .btn-wrapper {
+    min-width: 158px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: var(--o-gap-3);
+    @include text1;
+
+    .o-link {
+      width: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+</style>