mirror of
https://gitee.com/wonderful-code/buildadmin
synced 2024-11-22 07:04:24 +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 ($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']) {
|
||||
|
||||
@ -4,38 +4,68 @@
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
<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 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>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</template>
|
||||
</template>
|
||||
<el-col :span="6">
|
||||
<div class="com-search-col pl-20">
|
||||
@ -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>
|
||||
|
||||
@ -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',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user