feat: popeditor adds the autoreset property (#562)
This commit is contained in:
Kif
GitHub
parent
feeb96b7a8
commit
43c8ff9b72
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<tiny-popeditor
|
||||
v-model="value"
|
||||
:grid-op="gridOp"
|
||||
text-field="name"
|
||||
value-field="id"
|
||||
:conditions="conditions"
|
||||
autoReset
|
||||
></tiny-popeditor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Popeditor as TinyPopeditor } from '@opentiny/vue'
|
||||
|
||||
const dataset = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
city: '福州',
|
||||
province: '福建'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
province: '广东'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
province: '广东'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
city: '龙岩',
|
||||
province: '福建'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
city: '韶关',
|
||||
province: '广东'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
city: '黄冈',
|
||||
province: '武汉'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
province: '武汉'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
province: '广东',
|
||||
city: '深圳'
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
province: '武汉'
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
province: '广东',
|
||||
city: '深圳'
|
||||
}
|
||||
]
|
||||
|
||||
const value = ref('')
|
||||
const gridOp = ref({
|
||||
columns: [
|
||||
{
|
||||
field: 'id',
|
||||
title: 'ID',
|
||||
width: 40
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '名称'
|
||||
},
|
||||
{
|
||||
field: 'province',
|
||||
title: '省份',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
field: 'city',
|
||||
title: '城市',
|
||||
width: 80
|
||||
}
|
||||
],
|
||||
data: dataset
|
||||
})
|
||||
const conditions = ref([
|
||||
{ label: '公司名', field: 'name' },
|
||||
{ label: '城市', field: 'city' }
|
||||
])
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('PopEditor 自定义查询条件 自动重置参数', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/popeditor/auto-reset')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const textBox = preview.getByRole('textbox')
|
||||
const dialogBox = page.locator('.tiny-dialog-box')
|
||||
const company = dialogBox.getByRole('listitem').filter({ hasText: '公司名' }).getByRole('textbox')
|
||||
const city = dialogBox.getByRole('listitem').filter({ hasText: '城市' }).getByRole('textbox')
|
||||
const searchBtn = dialogBox.getByRole('button', { name: '查 询' })
|
||||
const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })
|
||||
|
||||
await textBox.click()
|
||||
// 点击查询按钮搜索
|
||||
await company.fill('111')
|
||||
await searchBtn.click()
|
||||
await expect(dialogBox.locator('.tiny-grid__empty-block')).toBeVisible()
|
||||
// 点击确认按钮关闭
|
||||
await confirmBtn.click()
|
||||
await textBox.click()
|
||||
await expect(dialogBox.locator('.tiny-grid-body__row')).toHaveCount(10)
|
||||
})
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<tiny-popeditor
|
||||
v-model="value"
|
||||
:grid-op="gridOp"
|
||||
text-field="name"
|
||||
value-field="id"
|
||||
:conditions="conditions"
|
||||
auto-reset
|
||||
></tiny-popeditor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Popeditor } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPopeditor: Popeditor
|
||||
},
|
||||
data() {
|
||||
const dataset = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
city: '福州',
|
||||
province: '福建'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
city: '深圳',
|
||||
province: '广东'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
city: '中山',
|
||||
province: '广东'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
city: '龙岩',
|
||||
province: '福建'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
city: '韶关',
|
||||
province: '广东'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
city: '黄冈',
|
||||
province: '武汉'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
province: '武汉'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
province: '广东',
|
||||
city: '深圳'
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
name: 'KBG物业YX公司',
|
||||
city: '赤壁',
|
||||
province: '武汉'
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
name: '深圳市福德宝网络技术YX公司',
|
||||
province: '广东',
|
||||
city: '深圳'
|
||||
}
|
||||
]
|
||||
|
||||
return {
|
||||
value: '',
|
||||
gridOp: {
|
||||
columns: [
|
||||
{
|
||||
field: 'id',
|
||||
title: 'ID',
|
||||
width: 40
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '名称'
|
||||
},
|
||||
{
|
||||
field: 'province',
|
||||
title: '省份',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
field: 'city',
|
||||
title: '城市',
|
||||
width: 80
|
||||
}
|
||||
],
|
||||
data: dataset
|
||||
},
|
||||
conditions: [
|
||||
{ label: '公司名', field: 'name' },
|
||||
{ label: '城市', field: 'city' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -372,6 +372,16 @@ export default {
|
|||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['suggest.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'auto-reset',
|
||||
'name': { 'zh-CN': '自动重置', 'en-US': 'auto reset' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>配置 <code>autoReset</code> 开启自动重置筛选项，筛选后点击关闭弹窗即可重置\n',
|
||||
'en-US': ''
|
||||
},
|
||||
'codeFiles': ['auto-reset.vue']
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
|
|
@ -685,6 +695,16 @@ export default {
|
|||
'en-US': ''
|
||||
},
|
||||
'demoId': 'selected-box-op'
|
||||
},
|
||||
{
|
||||
'name': 'autoReset',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '筛选后点击关闭是否自动重置筛选条件',
|
||||
'en-US': 'After filtering, click Off to reset the filter automatically'
|
||||
},
|
||||
'demoId': 'auto-reset'
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
|
|
|
|||
|
|
@ -163,6 +163,9 @@ export const handleConfirm =
|
|||
if (skipBeforeClose !== true && typeof props.beforeClose === 'function' && props.beforeClose('confirm') === false) {
|
||||
return
|
||||
}
|
||||
if (props.autoReset) {
|
||||
handleReset({ api, state, props })()
|
||||
}
|
||||
|
||||
if (props.popseletor === constants.TYPE_GRID) {
|
||||
props.multi ? api.getMultiSelectedData({ props, state }) : api.getRadioSelectedData()
|
||||
|
|
|
|||
|
|
@ -206,6 +206,10 @@ export default defineComponent({
|
|||
tooltipConfig: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
autoReset: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup(props, context) {
|
||||
|
|
|
|||
|
|
@ -380,7 +380,8 @@ export default defineComponent({
|
|||
'beforeClose',
|
||||
'showSelectedBox',
|
||||
'selectedBoxOp',
|
||||
'tooltipConfig'
|
||||
'tooltipConfig',
|
||||
'autoReset'
|
||||
],
|
||||
emits: ['change', 'close', 'page-change', 'popup'],
|
||||
setup(props, context) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue