搜索,表格封装更改

This commit is contained in:
Songsl 2026-06-14 15:42:35 +08:00
parent 7e117b176d
commit a3ef32d035
2 changed files with 73 additions and 8 deletions

View File

@ -25,8 +25,8 @@
:type="item.dateType || 'date'" :range-separator="item.rangeSeparator || '至'" :type="item.dateType || 'date'" :range-separator="item.rangeSeparator || '至'"
:placeholder="item.placeholder" :placeholder="item.placeholder"
:start-placeholder="item.startPlaceholder || '开始日期'" :end-placeholder="item.endPlaceholder || '结束日期'" :start-placeholder="item.startPlaceholder || '开始日期'" :end-placeholder="item.endPlaceholder || '结束日期'"
:value-format="item.valueFormat || 'YYYY-MM-DD'" :clearable="item.clearable ?? true" :value-format="item.valueFormat || 'YYYY-MM-DD'" :format="item.format || item.valueFormat || 'YYYY-MM-DD'" :clearable="item.clearable ?? true"
:disabled-date="item.disabledDate" :locale="'zhCn'" /> :disabled-date="item.disabledDate" :locale="'zhCn'" @change="(val: any) => handleDateChange(item, val)" />
</el-form-item> </el-form-item>
<!-- 自定义插槽项 --> <!-- 自定义插槽项 -->
@ -73,10 +73,12 @@ interface SearchOption {
startPlaceholder?: string // startPlaceholder?: string //
endPlaceholder?: string // endPlaceholder?: string //
valueFormat?: string // valueFormat?: string //
format?: string //
disabledDate?: (date: Date) => boolean // disabledDate?: (date: Date) => boolean //
width?: string // width?: string //
minWidth?: string // minWidth?: string //
auth?: string // auth?: string //
defaultTime?: 'start' | 'end' // start=00:00:00, end=23:59:59
} }
// //
@ -111,6 +113,34 @@ const emit = defineEmits(['search', 'reset', 'blur-input'])
const handleBlur = () => { const handleBlur = () => {
emit('blur-input') emit('blur-input')
} }
// /
const handleDateChange = (item: SearchOption, val: any) => {
if (!val || !item.defaultTime) return
const date = new Date(val)
if (item.defaultTime === 'start') {
date.setHours(0, 0, 0, 0)
} else if (item.defaultTime === 'end') {
date.setHours(23, 59, 59, 999)
}
//
const formatDate = (d: Date, format: string): string => {
const year = d.getFullYear()
const month = String(d.getMonth() + 1).padStart(2, '0')
const day = String(d.getDate()).padStart(2, '0')
const hours = String(d.getHours()).padStart(2, '0')
const minutes = String(d.getMinutes()).padStart(2, '0')
const seconds = String(d.getSeconds()).padStart(2, '0')
return format.replace(/YYYY|MM|DD|HH|mm|ss/g, (match) => {
const map: Record<string, string | number> = {
YYYY: year, MM: month, DD: day, HH: hours, mm: minutes, ss: seconds
}
return String(map[match])
})
}
const format = item.valueFormat || 'YYYY-MM-DD HH:mm:ss'
searchForm.value[item.prop] = formatDate(date, format)
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

View File

@ -131,10 +131,16 @@
</div> </div>
</template> </template>
<template v-if="column.isNumber" #default="{ row }"> <template v-if="column.isNumber" #default="{ row }">
<span>{{ formatDecimalTruncate(row[column.prop]) }}</span> <span class="cell-content">{{ formatDecimalTruncate(row[column.prop]) }}</span>
<el-icon v-if="column.copy" class="copy-icon" @click.stop="handleCopy(row[column.prop])"><DocumentCopy /></el-icon>
</template> </template>
<template v-else-if="column.options" #default="{ row }"> <template v-else-if="column.options" #default="{ row }">
<span>{{ getOptionLabel(column.options, row[column.prop]) }}</span> <span class="cell-content">{{ getOptionLabel(column.options, row[column.prop]) }}</span>
<el-icon v-if="column.copy" class="copy-icon" @click.stop="handleCopy(row[column.prop])"><DocumentCopy /></el-icon>
</template>
<template v-else #default="{ row }">
<span class="cell-content">{{ row[column.prop] }}</span>
<el-icon v-if="column.copy" class="copy-icon" @click.stop="handleCopy(row[column.prop])"><DocumentCopy /></el-icon>
</template> </template>
</el-table-column> </el-table-column>
@ -157,9 +163,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, computed, onMounted, reactive } from 'vue' import { ref, watch, computed, onMounted, reactive } from 'vue'
import { Setting, Rank, Filter } from '@element-plus/icons-vue' import { Setting, Rank, Filter, DocumentCopy } from '@element-plus/icons-vue'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import type { TableInstance } from 'element-plus' import type { TableInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { formatDecimalTruncate } from '@/utils/formatDecimal' import { formatDecimalTruncate } from '@/utils/formatDecimal'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/modules/user' import { useUserStore } from '@/stores/modules/user'
@ -193,6 +200,8 @@ interface TableColumn {
filterMethod?: (value: any, row: any, column: any) => boolean filterMethod?: (value: any, row: any, column: any) => boolean
filterable?: boolean filterable?: boolean
filterPlaceholder?: string filterPlaceholder?: string
//
copy?: boolean
} }
// //
@ -505,6 +514,16 @@ const handleFilterClear = (column: TableColumn) => {
emit('filter-change', { ...filterStates }) emit('filter-change', { ...filterStates })
} }
//
const handleCopy = async (text: string) => {
try {
await navigator.clipboard.writeText(text)
ElMessage.success('复制成功')
} catch (error) {
console.error('复制失败', error)
}
}
// //
defineExpose({ defineExpose({
clearCurrentRow: () => { clearCurrentRow: () => {
@ -651,4 +670,20 @@ defineExpose({
} }
} }
} }
//
.copy-icon {
margin-left: 4px;
cursor: pointer;
color: #909399;
font-size: 14px;
&:hover {
color: #409eff;
}
}
.cell-content {
//
}
</style> </style>