@opentinyvue/vue-docs 3.29.2 → 3.30.0

package/demos/pc/app/grid/filter/custom-filter.vue

@@ -3,28 +3,23 @@
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称" :filter="customFilter">
       <template #filter="data">
-        <input v-model="customFilterData.input" />
-        <button @click="data.context.commitFilter(customFilter)">confirm</button>
-        <button
-          @click="
-            () => {
-              customFilterData.input = ''
-              data.context.clearFilter()
-            }
-          "
-        >
-          clear
-        </button>
-        <button
-          @click="
-            () => {
-              customFilterData.input = ''
-              data.context.resetFilter()
-            }
-          "
-        >
-          reset
-        </button>
+        <ul class="tiny-grid__filter-panel custom-filter-panel">
+          <li class="filter-option__input">
+            <tiny-input
+              v-model="customFilterData.input"
+              placeholder="输入名称关键词筛选"
+              clearable
+              size="small"
+            />
+          </li>
+          <li class="tiny-grid__filter-option filter-option__btns">
+            <tiny-button type="primary" size="small" @click="data.context.commitFilter(customFilter)">
+              确定
+            </tiny-button>
+            <tiny-button size="small" @click="handleReset(data.context)">重置</tiny-button>
+            <tiny-button size="small" @click="handleClear(data.context)">清除全部</tiny-button>
+          </li>
+        </ul>
       </template>
     </tiny-grid-column>
     <tiny-grid-column field="area" title="区域"></tiny-grid-column>
@@ -34,12 +29,14 @@
 </template>
 
 <script lang="jsx">
-import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyInput, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
     TinyGrid,
-    TinyGridColumn
+    TinyGridColumn,
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
@@ -96,7 +93,33 @@ export default {
   methods: {
     customFilterMethod({ row }) {
       return row.name.includes(this.customFilterData.input)
+    },
+    handleReset(context) {
+      this.customFilterData.input = ''
+      context.resetFilter()
+    },
+    handleClear(context) {
+      this.customFilterData.input = ''
+      context.clearFilter()
     }
   }
 }
 </script>
+
+<style scoped>
+.custom-filter-panel {
+  padding: 12px 16px;
+  min-width: 260px;
+}
+.custom-filter-panel .filter-option__input {
+  margin-bottom: 12px;
+}
+.custom-filter-panel .filter-option__input :deep(.tiny-input) {
+  width: 100%;
+}
+.custom-filter-panel .filter-option__btns {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+</style>

package/demos/pc/app/grid/filter/default-filter.spec.ts

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/test'
 test('表格过滤', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-filter#filter-default-filter')
+  await page.setViewportSize({ width: 1920, height: 1980 })
   await page
     .getByRole('cell', { name: '公司名称鼠标移入可以动态提示 tooltip，公司名称鼠标移入可以动态提示 tooltip' })
     .getByRole('img')

package/demos/pc/app/grid/filter/filter-label-value-composition-api.vue

@@ -0,0 +1,71 @@
+<template>
+  <tiny-grid :data="tableData" @filter-change="filterChangeEvent">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column
+      field="status"
+      title="状态"
+      :filter="statusFilter"
+      :formatter="statusFormatter"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="region"
+      title="区域"
+      :filter="regionFilter"
+      :formatter="regionFormatter"
+    ></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
+
+const tableData = ref([
+  { id: '1', status: 'active', region: 'east' },
+  { id: '2', status: 'inactive', region: 'south' },
+  { id: '3', status: 'active', region: 'west' },
+  { id: '4', status: 'pending', region: 'east' }
+])
+
+const statusFilter = ref({
+  multi: true,
+  enumable: true,
+  inputFilter: false,
+  defaultFilter: false,
+  label: 'name',
+  value: 'code',
+  values: [
+    { code: 'active', name: '已启用' },
+    { code: 'inactive', name: '已停用' },
+    { code: 'pending', name: '待审核' }
+  ]
+})
+
+const regionFilter = ref({
+  multi: true,
+  enumable: true,
+  inputFilter: false,
+  defaultFilter: false,
+  label: 'regionName',
+  value: 'regionCode',
+  values: [
+    { regionCode: 'east', regionName: '华东区' },
+    { regionCode: 'south', regionName: '华南区' },
+    { regionCode: 'west', regionName: '华西区' }
+  ]
+})
+
+function filterChangeEvent({ filters }) {
+  TinyModal.message({ message: `筛选条件：${JSON.stringify(filters)}`, status: 'info' })
+}
+
+function statusFormatter({ cellValue }) {
+  const map = { active: '已启用', inactive: '已停用', pending: '待审核' }
+  return map[cellValue] || cellValue
+}
+
+function regionFormatter({ cellValue }) {
+  const map = { east: '华东区', south: '华南区', west: '华西区' }
+  return map[cellValue] || cellValue
+}
+</script>

package/demos/pc/app/grid/filter/filter-label-value.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test'
+
+test('label/value 字段映射 - 状态列筛选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-filter#filter-label-value-filter')
+
+  // 状态列使用 label:name value:code，选项显示 已启用/已停用/待审核
+  await page.getByRole('cell', { name: '状态' }).getByRole('img').first().click()
+  await page.getByTitle('已启用').click()
+  await page.getByRole('button', { name: '确定' }).click()
+
+  // 筛选 status=active 的行，应显示 2 条
+  await expect(page.locator('.tiny-grid-body__row:visible')).toHaveCount(2)
+})
+
+test('label/value 字段映射 - 区域列筛选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-filter#filter-label-value-filter')
+
+  // 区域列使用 label:regionName value:regionCode
+  await page.getByRole('cell', { name: '区域' }).getByRole('img').first().click()
+  await page.getByTitle('华东区').click()
+  await page.getByRole('button', { name: '确定' }).click()
+
+  // 筛选 region=east 的行，应显示 2 条
+  await expect(page.locator('.tiny-grid-body__row:visible')).toHaveCount(2)
+})

package/demos/pc/app/grid/filter/filter-label-value.vue

@@ -0,0 +1,78 @@
+<template>
+  <tiny-grid :data="tableData" @filter-change="filterChangeEvent">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column
+      field="status"
+      title="状态"
+      :filter="statusFilter"
+      :formatter="statusFormatter"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="region"
+      title="区域"
+      :filter="regionFilter"
+      :formatter="regionFormatter"
+    ></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid,
+    TinyGridColumn
+  },
+  data() {
+    return {
+      tableData: [
+        { id: '1', status: 'active', region: 'east' },
+        { id: '2', status: 'inactive', region: 'south' },
+        { id: '3', status: 'active', region: 'west' },
+        { id: '4', status: 'pending', region: 'east' }
+      ],
+      // 使用 label/value 字段映射：后端返回 code/name，前端显示 name
+      statusFilter: {
+        multi: true,
+        enumable: true,
+        inputFilter: false,
+        defaultFilter: false,
+        label: 'name',
+        value: 'code',
+        values: [
+          { code: 'active', name: '已启用' },
+          { code: 'inactive', name: '已停用' },
+          { code: 'pending', name: '待审核' }
+        ]
+      },
+      regionFilter: {
+        multi: true,
+        enumable: true,
+        inputFilter: false,
+        defaultFilter: false,
+        label: 'regionName',
+        value: 'regionCode',
+        values: [
+          { regionCode: 'east', regionName: '华东区' },
+          { regionCode: 'south', regionName: '华南区' },
+          { regionCode: 'west', regionName: '华西区' }
+        ]
+      }
+    }
+  },
+  methods: {
+    filterChangeEvent({ filters }) {
+      TinyModal.message({ message: `筛选条件：${JSON.stringify(filters)}`, status: 'info' })
+    },
+    statusFormatter({ cellValue }) {
+      const map = { active: '已启用', inactive: '已停用', pending: '待审核' }
+      return map[cellValue] || cellValue
+    },
+    regionFormatter({ cellValue }) {
+      const map = { east: '华东区', south: '华南区', west: '华西区' }
+      return map[cellValue] || cellValue
+    }
+  }
+}
+</script>

package/demos/pc/app/grid/filter/input-filter-custom-component-composition-api.vue

@@ -0,0 +1,116 @@
+<template>
+  <tiny-grid :data="tableData" @filter-change="filterChangeEvent">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数" :filter="employeesFilter"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { h, ref } from 'vue'
+import { TinyGrid, TinyGridColumn, TinyInput, TinyModal } from '@opentiny/vue'
+
+// 范围输入组件：左最小值、右最大值，与 demo 同文件（使用 render 避免运行时编译）
+const RangeInput = {
+  name: 'RangeInput',
+  components: { TinyInput },
+  props: {
+    modelValue: {
+      type: [Object, String],
+      default: () => ({ min: '', max: '' })
+    }
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    rangeValue() {
+      const v = this.modelValue
+      if (!v || typeof v !== 'object') {
+        return { min: '', max: '' }
+      }
+      return { min: v.min ?? '', max: v.max ?? '' }
+    }
+  },
+  render() {
+    const { rangeValue } = this
+    return h('div', { class: 'range-input-wrapper' }, [
+      h(TinyInput, {
+        modelValue: rangeValue.min,
+        placeholder: '最小值',
+        size: 'small',
+        clearable: true,
+        'onUpdate:modelValue': (val) => {
+          this.$emit('update:modelValue', { ...rangeValue, min: val })
+        }
+      }),
+      h('span', { class: 'range-separator' }, '～'),
+      h(TinyInput, {
+        modelValue: rangeValue.max,
+        placeholder: '最大值',
+        size: 'small',
+        clearable: true,
+        'onUpdate:modelValue': (val) => {
+          this.$emit('update:modelValue', { ...rangeValue, max: val })
+        }
+      })
+    ])
+  }
+}
+
+const tableData = ref([
+  { id: '1', name: 'GFD 科技', city: '福州', employees: 200 },
+  { id: '2', name: 'WWW 科技', city: '深圳', employees: 500 },
+  { id: '3', name: 'RFV 公司', city: '中山', employees: 800 },
+  { id: '4', name: 'TGB 科技', city: '福州', employees: 350 },
+  { id: '5', name: 'YHN 科技', city: '韶关', employees: 1200 }
+])
+
+const employeesFilter = ref({
+  layout: 'input,base',
+  inputFilter: {
+    component: RangeInput,
+    attrs: {},
+    relation: 'range',
+    relations: [
+      {
+        label: '范围内',
+        value: 'range',
+        method: ({ value, input }) => {
+          if (!input || typeof input !== 'object') return true
+          const num = Number(value)
+          const minVal = input.min === '' || input.min === undefined ? null : Number(input.min)
+          const maxVal = input.max === '' || input.max === undefined ? null : Number(input.max)
+          if (isNaN(num)) return false
+          if (minVal !== null && !isNaN(minVal) && num < minVal) return false
+          if (maxVal !== null && !isNaN(maxVal) && num > maxVal) return false
+          return true
+        }
+      }
+    ]
+  }
+})
+
+function filterChangeEvent({ filters }) {
+  TinyModal.message({ message: `筛选条件：${JSON.stringify(filters)}`, status: 'info' })
+}
+</script>
+
+<style>
+/* 范围输入样式：筛选面板使用 popper 渲染，需非 scoped */
+.tiny-grid__filter-wrapper .range-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 0 8px;
+}
+.tiny-grid__filter-wrapper .range-input-wrapper .tiny-input {
+  flex: 1;
+  min-width: 90px;
+}
+.tiny-grid__filter-wrapper .range-input-wrapper .range-separator {
+  font-size: 12px;
+  color: var(--ti-common-color-text-placeholder, #adb0b8);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+</style>

package/demos/pc/app/grid/filter/input-filter-custom-component.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义输入组件 - 范围筛选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-filter#filter-input-custom-component')
+
+  // 点击员工数列筛选图标
+  await page.getByRole('cell', { name: '员工数' }).getByRole('img').first().click()
+
+  // 等待筛选面板打开并填写范围：最小值 300，最大值 600
+  const filterPanel = page.locator('.tiny-grid__filter-wrapper.filter__active')
+  await filterPanel.waitFor({ state: 'visible' })
+  await filterPanel.getByPlaceholder('最小值').nth(1).fill('300')
+  await filterPanel.getByPlaceholder('最大值').nth(1).fill('600')
+
+  await filterPanel.getByRole('button', { name: '确定' }).click()
+
+  // 应显示员工数在 300-600 之间的行：500(WWW)、350(TGB)，使用 :visible 只统计可见行
+  await expect(page.locator('.tiny-grid-body__row:visible')).toHaveCount(2)
+})

package/demos/pc/app/grid/filter/input-filter-custom-component.vue

@@ -0,0 +1,126 @@
+<template>
+  <tiny-grid :data="tableData" @filter-change="filterChangeEvent">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数" :filter="employeesFilter"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { h } from 'vue'
+import { TinyGrid, TinyGridColumn, TinyInput, TinyModal } from '@opentiny/vue'
+
+// 范围输入组件：左最小值、右最大值，与 demo 同文件（使用 render 避免运行时编译）
+const RangeInput = {
+  name: 'RangeInput',
+  components: { TinyInput },
+  props: {
+    modelValue: {
+      type: [Object, String],
+      default: () => ({ min: '', max: '' })
+    }
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    rangeValue() {
+      const v = this.modelValue
+      if (!v || typeof v !== 'object') {
+        return { min: '', max: '' }
+      }
+      return { min: v.min ?? '', max: v.max ?? '' }
+    }
+  },
+  render() {
+    const { rangeValue } = this
+    return h('div', { class: 'range-input-wrapper' }, [
+      h(TinyInput, {
+        modelValue: rangeValue.min,
+        placeholder: '最小值',
+        size: 'small',
+        clearable: true,
+        'onUpdate:modelValue': (val) => {
+          this.$emit('update:modelValue', { ...rangeValue, min: val })
+        }
+      }),
+      h('span', { class: 'range-separator' }, '～'),
+      h(TinyInput, {
+        modelValue: rangeValue.max,
+        placeholder: '最大值',
+        size: 'small',
+        clearable: true,
+        'onUpdate:modelValue': (val) => {
+          this.$emit('update:modelValue', { ...rangeValue, max: val })
+        }
+      })
+    ])
+  }
+}
+
+export default {
+  components: {
+    TinyGrid,
+    TinyGridColumn
+  },
+  data() {
+    return {
+      tableData: [
+        { id: '1', name: 'GFD 科技', city: '福州', employees: 200 },
+        { id: '2', name: 'WWW 科技', city: '深圳', employees: 500 },
+        { id: '3', name: 'RFV 公司', city: '中山', employees: 800 },
+        { id: '4', name: 'TGB 科技', city: '福州', employees: 350 },
+        { id: '5', name: 'YHN 科技', city: '韶关', employees: 1200 }
+      ],
+      employeesFilter: {
+        layout: 'input,base',
+        inputFilter: {
+          component: RangeInput,
+          attrs: {},
+          relation: 'range',
+          relations: [
+            {
+              label: '范围内',
+              value: 'range',
+              method: ({ value, input }) => {
+                if (!input || typeof input !== 'object') return true
+                const num = Number(value)
+                const minVal = input.min === '' || input.min === undefined ? null : Number(input.min)
+                const maxVal = input.max === '' || input.max === undefined ? null : Number(input.max)
+                if (isNaN(num)) return false
+                if (minVal !== null && !isNaN(minVal) && num < minVal) return false
+                if (maxVal !== null && !isNaN(maxVal) && num > maxVal) return false
+                return true
+              }
+            }
+          ]
+        }
+      }
+    }
+  },
+  methods: {
+    filterChangeEvent({ filters }) {
+      TinyModal.message({ message: `筛选条件：${JSON.stringify(filters)}`, status: 'info' })
+    }
+  }
+}
+</script>
+
+<style>
+/* 范围输入样式：筛选面板使用 popper 渲染，需非 scoped */
+.tiny-grid__filter-wrapper .range-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 0 8px;
+}
+.tiny-grid__filter-wrapper .range-input-wrapper .tiny-input {
+  flex: 1;
+  min-width: 90px;
+}
+.tiny-grid__filter-wrapper .range-input-wrapper .range-separator {
+  font-size: 12px;
+  color: var(--ti-common-color-text-placeholder, #adb0b8);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+</style>

package/demos/pc/app/grid/filter/layout-order-filter-composition-api.vue

@@ -0,0 +1,114 @@
+<template>
+  <tiny-grid :data="tableData" @filter-change="filterChangeEvent">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称" :filter="nameFilter"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市" :filter="cityFilter"></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数" :filter="employeesFilter"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyGrid, TinyGridColumn, TinyModal, TinyNumeric } from '@opentiny/vue'
+
+const cityData = [
+  { label: '福州', value: '福州' },
+  { label: '深圳', value: '深圳' },
+  { label: '中山', value: '中山' }
+]
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD 科技 YX 公司',
+    city: '福州',
+    employees: 800,
+    createdDate: '2014-04-30 00:56:00'
+  },
+  {
+    id: '2',
+    name: 'WWW 科技 YX 公司',
+    city: '深圳',
+    employees: 300,
+    createdDate: '2016-07-08 12:36:22'
+  },
+  {
+    id: '3',
+    name: 'RFV 有限责任公司',
+    city: '中山',
+    employees: 1300,
+    createdDate: '2014-02-14 14:14:14'
+  },
+  {
+    id: '4',
+    name: 'TGB 科技 YX 公司',
+    city: '龙岩',
+    employees: 360,
+    createdDate: '2013-01-13 13:13:13'
+  },
+  {
+    id: '5',
+    name: 'YHN 科技 YX 公司',
+    city: '韶关',
+    employees: 810,
+    createdDate: '2012-12-12 12:12:12'
+  },
+  {
+    id: '6',
+    name: 'WSX 科技 YX 公司',
+    city: '黄冈',
+    employees: 800,
+    createdDate: '2011-11-11 11:11:11'
+  },
+  {
+    id: '7',
+    name: 'KBG 物业 YX 公司',
+    city: '赤壁',
+    employees: 400,
+    createdDate: '2016-04-30 23:56:00'
+  },
+  {
+    id: '8',
+    name: '深圳市福德宝网络技术 YX 公司',
+    city: '厦门',
+    employees: 540,
+    createdDate: '2016-06-03 13:53:25'
+  }
+])
+
+const cityFilter = ref({
+  multi: true,
+  enumable: true,
+  inputFilter: false,
+  defaultFilter: false,
+  values: cityData,
+  layout: 'enum,base'
+})
+
+const nameFilter = ref({
+  enumable: false,
+  inputFilter: true,
+  defaultFilter: false,
+  layout: 'input,base'
+})
+
+const employeesFilter = ref({
+  layout: 'extends,input,base',
+  inputFilter: {
+    component: TinyNumeric,
+    attrs: {},
+    relations: [
+      { label: '小于', value: 'lessThan' },
+      { label: '大于', value: 'greaterThan' }
+    ]
+  },
+  extends: [
+    { label: '大型企业(>500)', method: ({ value }) => value > 500 },
+    { label: '小型企业(<500)', method: ({ value }) => value < 500 }
+  ]
+})
+
+function filterChangeEvent({ filters }) {
+  TinyModal.message({ message: `筛选条件：${JSON.stringify(filters)}`, status: 'info' })
+}
+</script>