mirror of
https://gitee.com/wonderful-code/buildadmin
synced 2024-11-22 15:24:09 +00:00
feat:表格搜索的时间范围查询实现
This commit is contained in:
妙码生花
parent
944a78517e
commit
e27c0d9f2a
@ -149,7 +149,13 @@ class Backend extends Api
|
|||||||
|
|
||||||
// 日期时间
|
// 日期时间
|
||||||
if (isset($field['render']) && $field['render'] == 'datetime') {
|
if (isset($field['render']) && $field['render'] == 'datetime') {
|
||||||
|
if ($field['operator'] == 'RANGE' && is_array($field['val'])) {
|
||||||
|
$datetimeArr = array_filter(array_map("strtotime", $field['val']));
|
||||||
|
$where[] = [$fieldName, str_replace('RANGE', 'BETWEEN', $field['operator']), $datetimeArr];
|
||||||
|
continue;
|
||||||
|
}
|
||||||
$where[] = [$fieldName, '=', strtotime($field['val'])];
|
$where[] = [$fieldName, '=', strtotime($field['val'])];
|
||||||
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 范围查询
|
// 范围查询
|
||||||
@ -166,9 +172,10 @@ class Backend extends Api
|
|||||||
$operator = $field['operator'] == 'RANGE' ? '>=' : '<';
|
$operator = $field['operator'] == 'RANGE' ? '>=' : '<';
|
||||||
$arr = $arr[0];
|
$arr = $arr[0];
|
||||||
} else {
|
} else {
|
||||||
$operator = 'BETWEEN';
|
$operator = str_replace('RANGE', 'BETWEEN', $field['operator']);
|
||||||
}
|
}
|
||||||
$where[] = [$fieldName, $operator, $arr];
|
$where[] = [$fieldName, $operator, $arr];
|
||||||
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
switch ($field['operator']) {
|
switch ($field['operator']) {
|
||||||
|
|||||||
@ -4,38 +4,68 @@
|
|||||||
<el-form @keyup.enter="onComSearch" label-position="top" :model="state.form">
|
<el-form @keyup.enter="onComSearch" label-position="top" :model="state.form">
|
||||||
<el-row>
|
<el-row>
|
||||||
<template v-for="(item, idx) in field">
|
<template v-for="(item, idx) in field">
|
||||||
<el-col v-if="item.operator !== false" :span="6">
|
<template v-if="item.operator !== false">
|
||||||
<div class="com-search-col">
|
<el-col v-if="item.render == 'datetime' && (item.operator == 'RANGE' || item.operator == 'NOT RANGE')" :span="12">
|
||||||
<div class="com-search-col-label">{{ item.label }}</div>
|
<div class="com-search-col">
|
||||||
<div v-if="item.operator == 'RANGE' || item.operator == 'NOT RANGE'" class="com-search-col-input-range">
|
<div class="com-search-col-label w16">{{ item.label }}</div>
|
||||||
<el-input :placeholder="item.operatorPlaceholder" type="string" v-model="state.form[item.prop! + '-start']"></el-input>
|
<div class="com-search-col-input-range w83">
|
||||||
<div class="range-separator">至</div>
|
<el-date-picker
|
||||||
<el-input :placeholder="item.operatorPlaceholder" type="string" v-model="state.form[item.prop! + '-end']"></el-input>
|
class="datetime-picker"
|
||||||
|
v-model="state.form[item.prop!]"
|
||||||
|
type="datetimerange"
|
||||||
|
range-separator="To"
|
||||||
|
start-placeholder="Start date"
|
||||||
|
end-placeholder="End date"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="item.operator == 'NULL' || item.operator == 'NOT NULL'" class="com-search-col-input">
|
</el-col>
|
||||||
<el-checkbox v-model="state.form[item.prop!]" :label="item.operator" size="large"></el-checkbox>
|
<el-col v-else :span="6">
|
||||||
|
<div class="com-search-col">
|
||||||
|
<div class="com-search-col-label">{{ item.label }}</div>
|
||||||
|
<div v-if="item.operator == 'RANGE' || item.operator == 'NOT RANGE'" class="com-search-col-input-range">
|
||||||
|
<el-input
|
||||||
|
:placeholder="item.operatorPlaceholder"
|
||||||
|
type="string"
|
||||||
|
v-model="state.form[item.prop! + '-start']"
|
||||||
|
></el-input>
|
||||||
|
<div class="range-separator">至</div>
|
||||||
|
<el-input
|
||||||
|
:placeholder="item.operatorPlaceholder"
|
||||||
|
type="string"
|
||||||
|
v-model="state.form[item.prop! + '-end']"
|
||||||
|
></el-input>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="item.operator == 'NULL' || item.operator == 'NOT NULL'" class="com-search-col-input">
|
||||||
|
<el-checkbox v-model="state.form[item.prop!]" :label="item.operator" size="large"></el-checkbox>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="item.operator" class="com-search-col-input">
|
||||||
|
<el-date-picker
|
||||||
|
class="datetime-picker"
|
||||||
|
v-if="item.render == 'datetime'"
|
||||||
|
v-model="state.form[item.prop!]"
|
||||||
|
type="datetime"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
:placeholder="item.operatorPlaceholder"
|
||||||
|
></el-date-picker>
|
||||||
|
<el-select
|
||||||
|
:placeholder="item.operatorPlaceholder"
|
||||||
|
v-else-if="item.render == 'tag'"
|
||||||
|
v-model="state.form[item.prop!]"
|
||||||
|
>
|
||||||
|
<el-option v-for="(opt, okey) in item.replaceValue" :key="item.prop! + okey" :label="opt" :value="okey" />
|
||||||
|
</el-select>
|
||||||
|
<el-input
|
||||||
|
:placeholder="item.operatorPlaceholder"
|
||||||
|
v-else
|
||||||
|
type="string"
|
||||||
|
v-model="state.form[item.prop!]"
|
||||||
|
></el-input>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="item.operator" class="com-search-col-input">
|
</el-col>
|
||||||
<el-date-picker
|
</template>
|
||||||
class="datetime-picker"
|
|
||||||
v-if="item.render == 'datetime'"
|
|
||||||
v-model="state.form[item.prop!]"
|
|
||||||
type="datetime"
|
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
:placeholder="item.operatorPlaceholder"
|
|
||||||
></el-date-picker>
|
|
||||||
<el-select :placeholder="item.operatorPlaceholder" v-else-if="item.render == 'tag'" v-model="state.form[item.prop!]">
|
|
||||||
<el-option v-for="(opt, okey) in item.replaceValue" :key="item.prop! + okey" :label="opt" :value="okey" />
|
|
||||||
</el-select>
|
|
||||||
<el-input
|
|
||||||
:placeholder="item.operatorPlaceholder"
|
|
||||||
v-else
|
|
||||||
type="string"
|
|
||||||
v-model="state.form[item.prop!]"
|
|
||||||
></el-input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</template>
|
</template>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div class="com-search-col pl-20">
|
<div class="com-search-col pl-20">
|
||||||
@ -105,7 +135,11 @@ const onComSearch = () => {
|
|||||||
|
|
||||||
let val = ''
|
let val = ''
|
||||||
let fieldDataTemp = fieldData.get(key)
|
let fieldDataTemp = fieldData.get(key)
|
||||||
if (fieldDataTemp.operator == 'RANGE' || fieldDataTemp.operator == 'NOT RANGE') {
|
if (fieldDataTemp.render == 'datetime' && (fieldDataTemp.operator == 'RANGE' || fieldDataTemp.operator == 'NOT RANGE')) {
|
||||||
|
if (state.form[key].length >= 2) {
|
||||||
|
val = state.form[key]
|
||||||
|
}
|
||||||
|
} else if (fieldDataTemp.operator == 'RANGE' || fieldDataTemp.operator == 'NOT RANGE') {
|
||||||
if (!state.form[key + '-start'] && !state.form[key + '-end']) {
|
if (!state.form[key + '-start'] && !state.form[key + '-end']) {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
@ -180,4 +214,10 @@ const onResetForm = () => {
|
|||||||
.pl-20 {
|
.pl-20 {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
|
.w16 {
|
||||||
|
width: 16.5% !important;
|
||||||
|
}
|
||||||
|
.w83 {
|
||||||
|
width: 83.5% !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -164,7 +164,7 @@ const table: {
|
|||||||
{ label: '上传(引用)次数', prop: 'quote', align: 'center', width: 150, operator: 'RANGE', sortable: 'custom' },
|
{ label: '上传(引用)次数', prop: 'quote', align: 'center', width: 150, operator: 'RANGE', sortable: 'custom' },
|
||||||
{ label: '原始名称', prop: 'name', align: 'center', 'show-overflow-tooltip': true, operator: 'LIKE', operatorPlaceholder: '模糊查询' },
|
{ label: '原始名称', prop: 'name', align: 'center', 'show-overflow-tooltip': true, operator: 'LIKE', operatorPlaceholder: '模糊查询' },
|
||||||
{ label: '存储方式', prop: 'storage', align: 'center', width: 100, operator: 'LIKE', operatorPlaceholder: '模糊查询' },
|
{ label: '存储方式', prop: 'storage', align: 'center', width: 100, operator: 'LIKE', operatorPlaceholder: '模糊查询' },
|
||||||
{ label: '最后上传时间', prop: 'lastuploadtime', align: 'center', render: 'datetime', width: 160, sortable: 'custom' },
|
{ label: '最后上传时间', prop: 'lastuploadtime', align: 'center', render: 'datetime', operator: 'RANGE', width: 160, sortable: 'custom' },
|
||||||
{
|
{
|
||||||
label: '操作',
|
label: '操作',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user