feat:表格搜索的时间范围查询实现

This commit is contained in:
妙码生花 2022-03-15 21:06:11 +08:00
parent 944a78517e
commit e27c0d9f2a
3 changed files with 80 additions and 33 deletions

View File

@ -149,7 +149,13 @@ class Backend extends Api
// 日期时间
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'])];
continue;
}
// 范围查询
@ -166,9 +172,10 @@ class Backend extends Api
$operator = $field['operator'] == 'RANGE' ? '>=' : '<';
$arr = $arr[0];
} else {
$operator = 'BETWEEN';
$operator = str_replace('RANGE', 'BETWEEN', $field['operator']);
}
$where[] = [$fieldName, $operator, $arr];
continue;
}
switch ($field['operator']) {

View File

@ -4,13 +4,38 @@
<el-form @keyup.enter="onComSearch" label-position="top" :model="state.form">
<el-row>
<template v-for="(item, idx) in field">
<el-col v-if="item.operator !== false" :span="6">
<template v-if="item.operator !== false">
<el-col v-if="item.render == 'datetime' && (item.operator == 'RANGE' || item.operator == 'NOT RANGE')" :span="12">
<div class="com-search-col">
<div class="com-search-col-label w16">{{ item.label }}</div>
<div class="com-search-col-input-range w83">
<el-date-picker
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>
</el-col>
<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>
<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>
<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>
@ -24,7 +49,11 @@
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-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
@ -37,6 +66,7 @@
</div>
</el-col>
</template>
</template>
<el-col :span="6">
<div class="com-search-col pl-20">
<el-button @click="onComSearch" type="primary">搜索</el-button>
@ -105,7 +135,11 @@ const onComSearch = () => {
let val = ''
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']) {
continue
}
@ -180,4 +214,10 @@ const onResetForm = () => {
.pl-20 {
padding-left: 20px;
}
.w16 {
width: 16.5% !important;
}
.w83 {
width: 83.5% !important;
}
</style>

View File

@ -164,7 +164,7 @@ const table: {
{ 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: '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: '操作',
align: 'center',