97 lines
2.5 KiB
HTML
97 lines
2.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<style>
|
|
.config-item {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.field-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.field-item {
|
|
border: 1px solid #ddd;
|
|
padding: 0.25rem 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<body class="container flex flex-col h-full gap-8">
|
|
<!-- 字段选择 -->
|
|
<h2 class="text-2xl">高级检索设置</h2>
|
|
<!-- 行数设置 -->
|
|
<div class="config-item">
|
|
<label>行数限制：</label>
|
|
<input type="number" !value="opts.page_size" @input='opts.page_size=Number($event.target.value)' min="1"
|
|
max="100" />
|
|
</div>
|
|
<!-- 排序设置 -->
|
|
<div class="config-item flex">
|
|
<label>排序字段：</label>
|
|
<input-select class="flex-grow" v:value='opts.sort_by' :options='options()'></input-select>
|
|
<label style="margin-left:1rem">排序方向：</label>
|
|
<input-select class="flex-grow" v:value='opts.order' :options='directionOpts'></input-select>
|
|
</div>
|
|
<div class="config-item">
|
|
<h4>选择显示字段：</h4>
|
|
<div class="field-list mt-4">
|
|
<span v-for="field in keys" :class="['field-item', field.hidden?'':'bg-blue-100' ]"
|
|
@click="field.hidden=!field.hidden">
|
|
{{ field.label || field.name }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- 筛选设置 -->
|
|
<div class="config-item">
|
|
<h4 class="mb-4">字段筛选：</h4>
|
|
<div class="flex flex-wrap justify-between">
|
|
<div v-for="field in keys" class="mb-2">
|
|
<div refu='input' label_width='8rem' :label='field.label' v:value='filters[field.name]' type='text'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow"></div>
|
|
<button class="float-right bg-blue-400 rounded px-4 py-2" @click="wrap_apply">应用配置</button>
|
|
</body>
|
|
<script setup>
|
|
keys = [
|
|
{name: 'id', label: 'ID', type: 'number'},
|
|
{name: 'name', label: '姓名', type: 'string'},
|
|
]
|
|
opts = {
|
|
page: 1,
|
|
page_size: 10,
|
|
keyword: '',
|
|
keywords: {},
|
|
sort_by: 'created_at',
|
|
order: 'desc',
|
|
}
|
|
filters = {}
|
|
options = () => keys.map(f => {
|
|
return {value: f.name, label: f.label}
|
|
})
|
|
directionOpts = [
|
|
{value: 'asc', label: '升序'},
|
|
{value: 'desc', label: '降序'}
|
|
]
|
|
apply = () => {
|
|
console.log('当前配置:', opts)
|
|
}
|
|
wrap_apply = () => {
|
|
let tmp = {}
|
|
for (let key in filters) {
|
|
if (filters[key] !== undefined && filters[key] !== '' && filters[key] !== null) {
|
|
tmp[key] = filters[key]
|
|
}
|
|
}
|
|
opts.keywords = tmp
|
|
console.log('当前配置:', opts)
|
|
apply()
|
|
}
|
|
</script>
|
|
|
|
</html>
|