378 lines
9.1 KiB
Vue
378 lines
9.1 KiB
Vue
<template>
|
|
<section class="query-wrap">
|
|
<div class="query-title" @click="toggleCollapse">
|
|
<span class="title-text">{{ title }}</span>
|
|
<el-icon class="collapse-icon" :class="{ 'is-collapsed': isCollapsed }">
|
|
<ArrowDown />
|
|
</el-icon>
|
|
</div>
|
|
<div class="query-grid" v-show="!isCollapsed">
|
|
<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 v-else-if="field.type === 'slot'" class="checkbox-wrap">
|
|
<slot :name="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, ref, watch } from "vue";
|
|
import { ArrowDown } from '@element-plus/icons-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: () => []
|
|
},
|
|
defaultCollapsed: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
collapsedHeight: {
|
|
type: Number,
|
|
default: 34
|
|
},
|
|
expandedHeight: {
|
|
type: Number,
|
|
default: 276
|
|
}
|
|
});
|
|
|
|
|
|
const emit = defineEmits(['update:modelValue', "search", "submit", "reset", "collapse"]);
|
|
const formState = reactive({});
|
|
const isCollapsed = ref(props.defaultCollapsed);
|
|
|
|
const toggleCollapse = () => {
|
|
isCollapsed.value = !isCollapsed.value;
|
|
emit('collapse', isCollapsed.value);
|
|
};
|
|
|
|
watch(() => formState, val => {
|
|
emit('update:modelValue', val)
|
|
}, { immediate: true })
|
|
|
|
|
|
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,
|
|
isCollapsed,
|
|
collapsedHeight: props.collapsedHeight
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.query-wrap {
|
|
border: 1px solid #b8d3ff;
|
|
background: #fff;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.query-title {
|
|
height: 32px;
|
|
background: linear-gradient(to right, #9ed7ff, #e6f0f8);
|
|
line-height: 32px;
|
|
padding: 0 10px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #0d2148;
|
|
border-bottom: 1px solid #b8d3ff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
.title-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.collapse-icon {
|
|
font-size: 16px;
|
|
color: #0d2148;
|
|
transition: transform 0.3s;
|
|
|
|
&.is-collapsed {
|
|
transform: rotate(-90deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.query-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
flex: 1;
|
|
align-content: start;
|
|
}
|
|
|
|
.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;
|
|
flex-shrink: 0;
|
|
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>
|