搜索,表格封装更改
This commit is contained in:
parent
7e117b176d
commit
a3ef32d035
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue