From 69a1b3bf45738f048361ee4ccb6bdc64fce35720 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期三, 12 三月 2025 11:31:46 +0800
Subject: [PATCH] 更新
---
admin/src/components/common/QueryForm/queryForm.vue | 243 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 243 insertions(+), 0 deletions(-)
diff --git a/admin/src/components/common/QueryForm/queryForm.vue b/admin/src/components/common/QueryForm/queryForm.vue
new file mode 100644
index 0000000..092d6b6
--- /dev/null
+++ b/admin/src/components/common/QueryForm/queryForm.vue
@@ -0,0 +1,243 @@
+<template>
+ <div class="doumee-filter">
+ <el-form inline label-suffix="锛�" @submit.native.prevent>
+ <template v-for="(item, index) in queryFormConfig.formItems">
+ <el-form-item v-if="item.type === 'input' && (showZk || index < listLength)" :key="item.filed">
+ <el-input v-model="searchForm[item.filed]"
+ :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
+ :placeholder="item.label" class="w200" @change="changeForm(item.filed)"
+ @keyup.enter.native="handlekeyup(item.keyup || false)" />
+ </el-form-item>
+ <el-form-item v-if="item.type === 'moneySelect' && (showZk || index < listLength)" :key="item.label">
+ <el-input v-model="searchForm[item.filedStrt]"
+ :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
+ :placeholder="item.start" style="width: 150px" />
+ <div class="date-division-line" style="margin-left: 10px;margin-bottom: 0;">~</div>
+ <el-input v-model="searchForm[item.filedEnd]"
+ :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
+ :placeholder="item.end" style="width: 150px" />
+ </el-form-item>
+ <el-form-item v-if="item.type === 'select' && (showZk || index < listLength)" :key="item.filed">
+ <el-select v-model="searchForm[item.filed]" :filterable="item.filterable || true"
+ :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
+ :placeholder="item.label" class="w200" @change="changeForm(item.filed)">
+ <el-option v-for="opt, i in item.options" :key="i" :value="item.valueCode ? opt[item.valueCode] : opt.value"
+ :label="item.labelCode ? opt[item.labelCode] : opt.label" />
+ </el-select>
+ </el-form-item>
+ <el-form-item v-if="item.type === 'date' && (showZk || index < listLength)" :key="item.filed">
+ <el-date-picker v-model="searchForm[item.filed]" type="date" value-format="yyyy-MM-dd" class="w200"
+ :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
+ :placeholder="item.label" :picker-options="item.pickerOptions || {}" @change="changeForm(item.filed)" />
+ </el-form-item>
+ <el-form-item :label="item.label ? item.label : '璧锋鏃堕棿'"
+ v-if="item.type === 'datetime' && (showZk || index < listLength)" :key="item.filed1">
+ <el-date-picker v-model="searchForm[item.filed1]" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+ class="w200"
+ :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
+ placeholder="寮�濮嬫椂闂�" @change="changeForm(item.filed)" />
+ <el-date-picker v-model="searchForm[item.filed2]" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+ class="w200"
+ :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
+ placeholder="缁撴潫鏃堕棿" @change="changeForm(item.filed)" />
+ </el-form-item>
+ <el-form-item v-if="item.type === 'daterange' && (showZk || index < listLength)" :key="item.filed">
+ <el-date-picker v-model="searchForm[item.filed]" value-format="yyyy-MM-dd" type="daterange"
+ range-separator="鑷�"
+ :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
+ :start-placeholder="item.start || ''" :end-placeholder="item.end || ''"
+ :picker-options="item.pickerOptions || {}" class="w400" @change="changeForm(item.filed)" />
+ </el-form-item>
+ <el-form-item v-if="item.type === 'timePicker' && (showZk || index < listLength)" :key="item.filed">
+ <el-time-picker v-model="searchForm[item.filed]" is-range range-separator="鑷�" format="HH:mm"
+ value-format="HH:mm" start-placeholder="寮�濮嬫椂闂�" end-placeholder="缁撴潫鏃堕棿" placeholder="閫夋嫨鏃堕棿鑼冨洿" class="w400"
+ @change="changeForm(item.filed)" />
+ </el-form-item>
+ <el-form-item v-if="item.type === 'datetimerange' && (showZk || index < listLength)" :key="item.filed">
+ <el-date-picker v-model="searchForm[item.filed]" format="yyyy-MM-dd HH:mm:ss"
+ value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['00:00:00', '23:59:59']"
+ :picker-options="item.pickerOptions || pickerOptions" range-separator="鑷�"
+ :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
+ :start-placeholder="item.start || '寮�濮嬫椂闂�'" :end-placeholder="item.end || '缁撴潫鏃堕棿'" class="w400"
+ @change="changeForm(item.filed)" />
+ </el-form-item>
+ <el-form-item :label="item.label ? item.label : ''"
+ v-if="item.type === 'slot' && (showZk || index < listLength)" :key="item.filed">
+ <slot :name="item.filed" />
+ </el-form-item>
+ </template>
+ <!-- 鎿嶄綔 -->
+ <el-form-item>
+ <el-button type="primary" @click="handleQuery">鎼滅储</el-button>
+ <el-button v-if="showQk" @click="clear">閲嶇疆</el-button>
+ <slot name="btns" />
+ <template v-if="queryFormConfig.formItems.length > listLength">
+ <el-button v-if="!showZk" type="text" @click="zkBtn">灞曞紑<i
+ class="el-icon-caret-bottom primaryColor" /></el-button>
+ <el-button v-if="showZk" type="text" @click="zkBtn">鏀惰捣<i class="el-icon-caret-top primaryColor" /></el-button>
+ </template>
+ </el-form-item>
+ </el-form>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ value: {
+ type: Object,
+ default: () => { }
+ },
+ showQk: {
+ type: Boolean,
+ default: true
+ },
+ listLength: {
+ type: Number,
+ default: 6
+ },
+ queryFormConfig: {
+ type: Object,
+ default: () => { }
+ }
+ },
+ data() {
+ return {
+ showZk: false,
+ pickerOptions: {
+ shortcuts: [{
+ text: '杩�7澶�',
+ onClick(picker) {
+ const end = new Date()
+ const start = new Date()
+ start.setTime(end.getTime() - 3600 * 1000 * 24 * 6)
+ picker.$emit('pick', [start, end])
+ }
+ },
+ {
+ text: '杩�30澶�',
+ onClick(picker) {
+ const end = new Date()
+ const start = new Date()
+ start.setTime(end.getTime() - 3600 * 1000 * 24 * 29)
+ picker.$emit('pick', [start, end])
+ }
+ },
+ {
+ text: '杩�60澶�',
+ onClick(picker) {
+ const end = new Date()
+ const start = new Date()
+ start.setTime(end.getTime() - 3600 * 1000 * 24 * 59)
+ picker.$emit('pick', [start, end])
+ }
+ },
+ {
+ text: '杩�90澶�',
+ onClick(picker) {
+ const end = new Date()
+ const start = new Date()
+ start.setTime(end.getTime() - 3600 * 1000 * 24 * 89)
+ picker.$emit('pick', [start, end])
+ }
+ }],
+ disabledDate(time) {
+ var curDate = new Date(new Date().toLocaleDateString()).getTime()
+ var preDate = new Date(curDate + 24 * 60 * 60 * 1000 - 1)
+ return time.getTime() > preDate
+ }
+ }
+ }
+ },
+ emits: ['input', 'handleQuery', 'clear'],
+ computed: {
+ searchForm: {
+ get() {
+ return this.value
+ },
+ set(value) {
+ this.$emit('input', value)
+ }
+ }
+ },
+ methods: {
+ handleQuery() {
+ this.$emit('handleQuery')
+ },
+ handlekeyup(pd) {
+ if (pd) {
+ this.$emit('handleQuery')
+ }
+ },
+ changeForm(filed) {
+ this.$emit('changeForm', filed)
+ },
+ zkBtn() {
+ this.showZk = !this.showZk
+ this.$emit('zkBtn', this.zk)
+ },
+ clear() {
+ this.$emit('clear')
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.doumee-filter {
+ display: flex;
+ align-items: center;
+ position: relative;
+ flex-wrap: wrap;
+ align-items: center;
+ background-color: #fff;
+ border-bottom: 10px solid #f7f8f9;
+ margin: 0 -20px;
+ padding: 0 0 0 20px;
+
+ .el-input,
+ .el-select {
+ width: 200px;
+ margin-right: 20px;
+ margin-bottom: 20px;
+ height: 36px;
+
+ .el-input__inner {
+ /* color: $textColor; */
+ padding: 0 16px;
+ }
+ }
+
+ .el-date-editor {
+ width: 200px;
+ margin-right: 20px;
+ margin-bottom: 20px;
+
+ .el-input__inner {
+ padding-left: 30px;
+ }
+ }
+
+ .el-button {
+ margin-bottom: 20px;
+ }
+
+ .el-form-item {
+ margin-bottom: 20px;
+ margin-right: 20px;
+
+ .el-input,
+ .el-select,
+ .el-date-editor {
+ margin-right: 0;
+ }
+
+ .el-input,
+ .el-select,
+ .el-date-editor,
+ .el-button {
+ margin-bottom: 0;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3