lcw
This commit is contained in:
308
src/views/backOfficeSystem/ces/components/QueryFormPanel.vue
Normal file
308
src/views/backOfficeSystem/ces/components/QueryFormPanel.vue
Normal file
@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<section class="query-wrap">
|
||||
<div class="query-title">{{ title }}</div>
|
||||
<div class="query-grid">
|
||||
<div v-for="field in renderFields" :key="field.key" class="query-cell">
|
||||
<div class="cell-label">{{ field.label }}</div>
|
||||
<div class="cell-control" :class="{ 'is-checkbox': field.type === 'checkbox' }">
|
||||
<el-input clearable v-if="field.type === 'input'" v-model="formState[field.key]" class="control-input"
|
||||
:placeholder="field.placeholder || ''" />
|
||||
<el-input clearable v-else-if="field.type === 'number'" v-model="formState[field.key]" class="control-input"
|
||||
type="number" :placeholder="field.placeholder || ''" />
|
||||
<el-select clearable v-else-if="field.type === 'select'" v-model="formState[field.key]" class="control-select"
|
||||
:placeholder="field.placeholder || '请选择'" :multiple="field.multiple || false" collapse-tags
|
||||
collapse-tags-tooltip>
|
||||
<el-option v-for="item in field.options || []" :key="item.value ?? item" :label="item.label ?? item"
|
||||
:value="item.value ?? item" />
|
||||
</el-select>
|
||||
<el-date-picker clearable v-else-if="field.type === 'date'" v-model="formState[field.key]"
|
||||
class="control-date" type="date" :placeholder="field.placeholder || '请选择日期'" value-format="YYYY-MM-DD" />
|
||||
<el-date-picker clearable v-else-if="field.type === 'datetime'" v-model="formState[field.key]"
|
||||
class="control-date" type="datetime" :placeholder="field.placeholder || '请选择时间'"
|
||||
value-format="YYYY-MM-DD HH:mm:ss" />
|
||||
<el-date-picker clearable v-else-if="field.type === 'daterange'" v-model="formState[field.key]"
|
||||
class="control-date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD" />
|
||||
<el-date-picker clearable v-else-if="field.type === 'datetimerange'" v-model="formState[field.key]"
|
||||
class="control-date" type="datetimerange" range-separator="至" start-placeholder="开始时间"
|
||||
end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
|
||||
<template v-else-if="field.type === 'department'">
|
||||
<MOSTY.Department clearable v-model="formState[field.key]" class="control-select" />
|
||||
</template>
|
||||
<div v-else-if="field.type === 'checkbox'" class=" checkbox-wrap">
|
||||
<el-checkbox v-model="formState[field.key]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="query-action">
|
||||
<div>
|
||||
<slot name="but"></slot>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="small" type="primary" @click="handleSearch">{{ searchText }}</el-button>
|
||||
<el-button size="small" type="button" @click="handleReset">重置 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, watch } from 'vue'
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '查询条件'
|
||||
},
|
||||
searchText: {
|
||||
type: String,
|
||||
default: '查询'
|
||||
},
|
||||
fields: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
searchArr: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['search', 'submit', 'reset'])
|
||||
const formState = reactive({})
|
||||
|
||||
const renderFields = computed(() => {
|
||||
const source = props.searchArr.length ? props.searchArr : props.fields
|
||||
return source.map((field) => ({
|
||||
...field,
|
||||
key: field.key || field.prop,
|
||||
type: field.type || field.showType || 'input'
|
||||
})).filter((field) => field.key)
|
||||
})
|
||||
|
||||
const getResetValue = (field) => {
|
||||
if (field.defaultVal !== undefined) {
|
||||
return Array.isArray(field.defaultVal) ? [...field.defaultVal] : field.defaultVal
|
||||
}
|
||||
if (field.type === 'checkbox') {
|
||||
return false
|
||||
}
|
||||
if (field.type === 'daterange' || field.type === 'datetimerange') {
|
||||
return []
|
||||
}
|
||||
if (field.type === 'select') {
|
||||
if (field.multiple) {
|
||||
return []
|
||||
}
|
||||
return null
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
const buildResetPayload = () => {
|
||||
const payload = {}
|
||||
renderFields.value.forEach((field) => {
|
||||
payload[field.key] = getResetValue(field)
|
||||
})
|
||||
return payload
|
||||
}
|
||||
|
||||
const setFormState = (value = {}) => {
|
||||
Object.keys(formState).forEach((key) => {
|
||||
delete formState[key]
|
||||
})
|
||||
renderFields.value.forEach((field) => {
|
||||
if (value[field.key] !== undefined) {
|
||||
formState[field.key] = Array.isArray(value[field.key]) ? [...value[field.key]] : value[field.key]
|
||||
return
|
||||
}
|
||||
formState[field.key] = getResetValue(field)
|
||||
})
|
||||
}
|
||||
|
||||
const getFormSnapshot = () => {
|
||||
const snapshot = {}
|
||||
renderFields.value.forEach((field) => {
|
||||
const value = formState[field.key]
|
||||
if (Array.isArray(value)) {
|
||||
snapshot[field.key] = [...value]
|
||||
return
|
||||
}
|
||||
snapshot[field.key] = value
|
||||
})
|
||||
return snapshot
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
const payload = getFormSnapshot()
|
||||
emit('search', payload)
|
||||
emit('submit', payload)
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
const payload = buildResetPayload()
|
||||
setFormState(payload)
|
||||
emit('reset', true)
|
||||
emit('search', payload)
|
||||
emit('submit', payload)
|
||||
}
|
||||
|
||||
watch(
|
||||
renderFields,
|
||||
() => {
|
||||
setFormState(buildResetPayload())
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
defineExpose({
|
||||
formState,
|
||||
handleSearch,
|
||||
handleReset
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.query-wrap {
|
||||
border: 1px solid #b8d3ff;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.query-title {
|
||||
height: 32px;
|
||||
background: linear-gradient(to right, #9ed7ff, #e6f0f8);
|
||||
line-height: 32px;
|
||||
padding-left: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0d2148;
|
||||
border-bottom: 1px solid #b8d3ff;
|
||||
}
|
||||
|
||||
.query-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.query-cell {
|
||||
display: flex;
|
||||
min-height: 40px;
|
||||
border-right: 1px solid #b8d3ff;
|
||||
border-bottom: 1px solid #b8d3ff;
|
||||
}
|
||||
|
||||
.query-cell:nth-child(4n) {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.cell-label {
|
||||
width: 130px;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid #b8d3ff;
|
||||
font-size: 14px;
|
||||
color: #0d2148;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cell-control {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cell-control.is-checkbox {
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.control-input,
|
||||
.control-select,
|
||||
.control-date {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.control-input .el-input__wrapper),
|
||||
:deep(.control-select .el-select__wrapper),
|
||||
:deep(.control-date .el-input__wrapper) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 28px;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 0 1px #b8d3ff inset;
|
||||
}
|
||||
|
||||
:deep(.control-date.el-date-editor) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.control-date.el-date-editor .el-range-input) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.control-input .el-input__inner),
|
||||
:deep(.control-select .el-select__placeholder),
|
||||
:deep(.control-date .el-input__inner) {
|
||||
font-size: 14px;
|
||||
color: #0d2148;
|
||||
}
|
||||
|
||||
:deep(.control-date .el-range-input) {
|
||||
font-size: 14px;
|
||||
color: #0d2148;
|
||||
}
|
||||
|
||||
:deep(.control-date .el-range__icon),
|
||||
:deep(.control-date .el-range__close-icon) {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.checkbox-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.checkbox-wrap .el-checkbox) {
|
||||
margin-right: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.checkbox-wrap .el-checkbox__inner) {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.query-action {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
// justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 26px;
|
||||
min-width: 70px;
|
||||
border: 1px solid #0f5bbd;
|
||||
background: #0f5bbd;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user