429 lines
13 KiB
Vue
429 lines
13 KiB
Vue
<template>
|
||
<div class="aps-quick-sheet-preview excel-theme">
|
||
<div class="sheet-toolbar">
|
||
<div class="sheet-actions">
|
||
<el-date-picker
|
||
v-model="filter.range"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
value-format="yyyy-MM-dd"
|
||
size="small"
|
||
style="width: 240px"
|
||
@change="onFilterChange"
|
||
/>
|
||
<el-select v-model="filter.lineId" clearable filterable size="small" placeholder="产线" style="width: 160px" @change="onFilterChange">
|
||
<el-option v-for="line in lineOptions" :key="line.lineId" :label="line.lineName || line.lineCode || ('产线' + line.lineId)" :value="line.lineId" />
|
||
</el-select>
|
||
<el-input v-model="filter.customer" size="small" clearable placeholder="客户" style="width: 160px" @input="onFilterChange" />
|
||
<el-button size="small" icon="el-icon-refresh" @click="loadRows">刷新</el-button>
|
||
<el-button size="small" icon="el-icon-setting" @click="columnSettingVisible = true">列设置</el-button>
|
||
<el-button size="small" icon="el-icon-download" @click="exportExcel">导出</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sheet-body">
|
||
<el-table
|
||
ref="quickSheetPreviewTable"
|
||
v-loading="loading"
|
||
:data="displayRows"
|
||
border
|
||
size="mini"
|
||
class="excel-table"
|
||
>
|
||
<el-table-column label="序号" width="60" align="center" fixed="left">
|
||
<template slot-scope="scope">
|
||
{{ ((pager.pageNum - 1) * pager.pageSize) + scope.$index + 1 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
v-for="col in displayColumns"
|
||
:key="col.prop || col.label"
|
||
:label="col.label"
|
||
:prop="col.prop"
|
||
:width="col.width"
|
||
:min-width="col.minWidth"
|
||
:align="col.align || 'center'"
|
||
:fixed="fixedProps.includes(col.prop) ? 'left' : false"
|
||
:show-overflow-tooltip="col.showOverflowTooltip !== false"
|
||
/>
|
||
</el-table>
|
||
<div class="pager-wrap">
|
||
<el-pagination
|
||
small
|
||
background
|
||
layout="prev, pager, next, total"
|
||
:current-page.sync="pager.pageNum"
|
||
:page-size="pager.pageSize"
|
||
:total="totalRows"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<el-drawer
|
||
title="列设置"
|
||
:visible.sync="columnSettingVisible"
|
||
direction="rtl"
|
||
size="55%"
|
||
append-to-body
|
||
@open="resetColumnDraft">
|
||
<div class="col-setting-body">
|
||
<div class="col-setting-toolbar">
|
||
<el-button size="mini" @click="restoreDefaultColumns">恢复默认</el-button>
|
||
<el-button size="mini" @click="resetColumnDraft">重置</el-button>
|
||
<el-button size="mini" type="primary" @click="saveColumnSettings">保存</el-button>
|
||
</div>
|
||
|
||
<div class="col-section">
|
||
<div class="col-section-title">固定列（最多5列）</div>
|
||
<draggable v-model="fixedColumnList" handle=".drag-handle" animation="200" class="col-setting-grid">
|
||
<div v-for="item in fixedColumnList" :key="`fixed-${item.prop}`" class="col-setting-item">
|
||
<i class="el-icon-rank drag-handle" />
|
||
<span class="col-label">{{ item.label }}</span>
|
||
<el-button type="text" size="mini" @click="removeFromFixed(item.prop)">移除</el-button>
|
||
</div>
|
||
</draggable>
|
||
</div>
|
||
|
||
<div class="col-section">
|
||
<div class="col-section-title">其他列</div>
|
||
<draggable v-model="normalColumnList" handle=".drag-handle" animation="200" class="col-setting-grid">
|
||
<div v-for="item in normalColumnList" :key="`normal-${item.prop}`" class="col-setting-item">
|
||
<i class="el-icon-rank drag-handle" />
|
||
<span class="col-label">{{ item.label }}</span>
|
||
<el-button type="text" size="mini" @click="addToFixed(item.prop)">加入固定</el-button>
|
||
</div>
|
||
</draggable>
|
||
</div>
|
||
</div>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { fetchQuickSheetList, exportQuickSheet } from '@/api/aps/quickSheet'
|
||
import { listProductionLine } from '@/api/wms/productionLine'
|
||
import { getTemplateByKey } from './sheets/templates'
|
||
import { saveAs } from 'file-saver'
|
||
import draggable from 'vuedraggable'
|
||
|
||
export default {
|
||
name: 'ApsQuickSheetPreview',
|
||
components: { draggable },
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
rows: [],
|
||
lineOptions: [],
|
||
filter: {
|
||
range: [],
|
||
lineId: null,
|
||
customer: ''
|
||
},
|
||
pager: {
|
||
pageNum: 1,
|
||
pageSize: 25
|
||
},
|
||
columnSettingVisible: false,
|
||
columnSettingList: [],
|
||
fixedColumnList: [],
|
||
normalColumnList: []
|
||
}
|
||
},
|
||
computed: {
|
||
currentTemplate() {
|
||
return getTemplateByKey('unified')
|
||
},
|
||
flatColumns() {
|
||
const res = []
|
||
const loop = (cols) => {
|
||
;(cols || []).forEach(c => {
|
||
if (c.children && c.children.length) loop(c.children)
|
||
else res.push(c)
|
||
})
|
||
}
|
||
loop(this.currentTemplate.columns || [])
|
||
return res.filter(c => c && c.prop)
|
||
},
|
||
displayColumns() {
|
||
const setting = this.columnSettingList || []
|
||
const hasSetting = setting.length > 0
|
||
const base = this.flatColumns
|
||
|
||
const selected = hasSetting
|
||
? setting.filter(i => i.visible).map(i => base.find(c => c.prop === i.prop)).filter(Boolean)
|
||
: base
|
||
|
||
const selectedSet = new Set(selected.map(c => c.prop))
|
||
const rest = base.filter(c => !selectedSet.has(c.prop))
|
||
return [...selected, ...rest]
|
||
},
|
||
fixedProps() {
|
||
return (this.columnSettingList || []).filter(i => i.visible && i.fixed).map(i => i.prop).slice(0, 5)
|
||
},
|
||
filteredRows() {
|
||
const [startAfter, endBefore] = this.filter.range || []
|
||
const lineName = (this.filter.lineName || '').trim()
|
||
const customer = (this.filter.customer || '').trim().toLowerCase()
|
||
return this.rows.filter(r => {
|
||
if (startAfter || endBefore) {
|
||
const d = r.startTime ? String(r.startTime).slice(0, 10) : ''
|
||
if (startAfter && d && d < startAfter) return false
|
||
if (endBefore && d && d > endBefore) return false
|
||
}
|
||
if (lineName && r.lineName !== lineName) return false
|
||
if (customer) {
|
||
const txt = String(r.customerName || '').toLowerCase()
|
||
if (!txt.includes(customer)) return false
|
||
}
|
||
return true
|
||
})
|
||
},
|
||
displayRows() {
|
||
const start = (this.pager.pageNum - 1) * this.pager.pageSize
|
||
return this.filteredRows.slice(start, start + this.pager.pageSize)
|
||
},
|
||
totalRows() {
|
||
return this.filteredRows.length
|
||
}
|
||
},
|
||
created() {
|
||
const today = new Date()
|
||
const start = `${today.getFullYear()}-${`${today.getMonth() + 1}`.padStart(2, '0')}-${`${today.getDate()}`.padStart(2, '0')}`
|
||
this.filter.range = [start, '']
|
||
this.initColumnSettings()
|
||
this.loadRows()
|
||
this.loadLines()
|
||
},
|
||
beforeDestroy() {
|
||
this.persistColumnSettings()
|
||
},
|
||
methods: {
|
||
initColumnSettings() {
|
||
const key = this.getColumnSettingKey()
|
||
const stored = localStorage.getItem(key)
|
||
const base = this.flatColumns.map((col, idx) => ({ prop: col.prop, label: col.label, visible: true, fixed: idx < 5 }))
|
||
if (!stored) {
|
||
this.columnSettingList = base
|
||
return
|
||
}
|
||
try {
|
||
const parsed = JSON.parse(stored)
|
||
if (!Array.isArray(parsed)) {
|
||
this.columnSettingList = base
|
||
return
|
||
}
|
||
const map = new Map(parsed.map(item => [item.prop, item]))
|
||
const merged = base.map(item => {
|
||
const saved = map.get(item.prop)
|
||
return saved ? { ...item, visible: saved.visible !== false } : item
|
||
})
|
||
const savedProps = parsed.map(i => i.prop)
|
||
const extras = base.filter(i => !savedProps.includes(i.prop))
|
||
this.columnSettingList = [...parsed.filter(i => base.some(b => b.prop === i.prop)).map(i => {
|
||
const match = base.find(b => b.prop === i.prop)
|
||
return { ...match, visible: i.visible !== false, fixed: i.fixed === true }
|
||
}), ...extras]
|
||
this.resetColumnDraft()
|
||
} catch (e) {
|
||
this.columnSettingList = base
|
||
this.resetColumnDraft()
|
||
}
|
||
},
|
||
resetColumnDraft() {
|
||
const fixed = (this.columnSettingList || []).filter(i => i.visible && i.fixed).slice(0, 5)
|
||
const normal = (this.columnSettingList || []).filter(i => !i.fixed || !i.visible)
|
||
this.fixedColumnList = fixed.map(i => ({ ...i, visible: true, fixed: true }))
|
||
this.normalColumnList = normal.map(i => ({ ...i, visible: true, fixed: false }))
|
||
},
|
||
saveColumnSettings() {
|
||
const fixed = (this.fixedColumnList || []).map(i => ({ ...i, visible: true, fixed: true }))
|
||
const normal = (this.normalColumnList || []).map(i => ({ ...i, fixed: false }))
|
||
this.columnSettingList = [...fixed, ...normal]
|
||
this.persistColumnSettings()
|
||
this.columnSettingVisible = false
|
||
this.pager.pageNum = 1
|
||
this.loadRows().finally(() => {
|
||
this.$nextTick(() => {
|
||
this.$refs.quickSheetPreviewTable && this.$refs.quickSheetPreviewTable.doLayout && this.$refs.quickSheetPreviewTable.doLayout()
|
||
})
|
||
})
|
||
},
|
||
addToFixed(prop) {
|
||
if ((this.fixedColumnList || []).length >= 5) {
|
||
this.$message.warning('固定列最多5列')
|
||
return
|
||
}
|
||
const idx = (this.normalColumnList || []).findIndex(i => i.prop === prop)
|
||
if (idx < 0) return
|
||
const item = this.normalColumnList.splice(idx, 1)[0]
|
||
this.fixedColumnList.push({ ...item, fixed: true, visible: true })
|
||
},
|
||
removeFromFixed(prop) {
|
||
const idx = (this.fixedColumnList || []).findIndex(i => i.prop === prop)
|
||
if (idx < 0) return
|
||
const item = this.fixedColumnList.splice(idx, 1)[0]
|
||
this.normalColumnList.push({ ...item, fixed: false, visible: true })
|
||
},
|
||
persistColumnSettings() {
|
||
const key = this.getColumnSettingKey()
|
||
const payload = (this.columnSettingList || []).map(item => ({
|
||
prop: item.prop,
|
||
label: item.label,
|
||
visible: item.visible !== false,
|
||
fixed: item.fixed === true
|
||
}))
|
||
localStorage.setItem(key, JSON.stringify(payload))
|
||
},
|
||
restoreDefaultColumns() {
|
||
const base = this.flatColumns.map((col, idx) => ({ prop: col.prop, label: col.label, visible: true, fixed: idx < 5 }))
|
||
this.columnSettingList = base
|
||
this.resetColumnDraft()
|
||
this.persistColumnSettings()
|
||
},
|
||
getColumnSettingKey() {
|
||
return 'apsQuickSheetPreviewColumns_unified'
|
||
},
|
||
async loadLines() {
|
||
const res = await listProductionLine({ pageNum: 1, pageSize: 1000 })
|
||
this.lineOptions = res.rows || []
|
||
},
|
||
async loadRows() {
|
||
this.loading = true
|
||
try {
|
||
const params = this.buildQueryParams()
|
||
const res = await fetchQuickSheetList(params)
|
||
this.rows = (res.data || []).map(r => ({ ...r }))
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
onFilterChange() {
|
||
this.pager.pageNum = 1
|
||
this.loadRows()
|
||
},
|
||
exportExcel() {
|
||
const params = this.buildQueryParams()
|
||
exportQuickSheet(params)
|
||
.then(blob => {
|
||
const filename = `quick_sheet_preview_${new Date().getTime()}.xlsx`
|
||
saveAs(new Blob([blob], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }), filename)
|
||
})
|
||
},
|
||
buildQueryParams() {
|
||
const [startDate, endDate] = this.filter.range || []
|
||
return {
|
||
startDate: startDate || undefined,
|
||
endDate: endDate || undefined,
|
||
lineId: this.filter.lineId || undefined,
|
||
customerName: this.filter.customer || undefined
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.aps-quick-sheet-preview {
|
||
padding: 8px;
|
||
background: #f7f9fc;
|
||
}
|
||
|
||
.sheet-toolbar {
|
||
margin-bottom: 8px;
|
||
padding: 8px;
|
||
border: 1px solid #eef2f7;
|
||
border-radius: 8px;
|
||
background: #fff;
|
||
}
|
||
|
||
.sheet-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.sheet-body {
|
||
border: 1px solid #eef2f7;
|
||
border-radius: 8px;
|
||
background: #fff;
|
||
padding: 6px;
|
||
}
|
||
|
||
::v-deep .excel-table {
|
||
border: 1px solid #edf1f7;
|
||
}
|
||
::v-deep .excel-table th.el-table__cell {
|
||
background: #fafbfe;
|
||
color: #5d6b82;
|
||
font-weight: 600;
|
||
border-right: 1px solid #edf1f7;
|
||
border-bottom: 1px solid #edf1f7;
|
||
padding: 4px 0;
|
||
}
|
||
::v-deep .excel-table td.el-table__cell {
|
||
border-right: 1px solid #f0f2f6;
|
||
border-bottom: 1px solid #f0f2f6;
|
||
padding: 1px 2px;
|
||
}
|
||
|
||
.pager-wrap {
|
||
margin-top: 8px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.col-setting-body {
|
||
padding: 12px;
|
||
height: calc(100% - 12px);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.col-setting-toolbar {
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.col-section {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.col-section-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.col-setting-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 8px;
|
||
}
|
||
|
||
.col-setting-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 10px;
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 6px;
|
||
background: #fff;
|
||
margin-bottom: 0;
|
||
min-height: 38px;
|
||
}
|
||
|
||
.col-setting-item:hover {
|
||
border-color: #d9ecff;
|
||
background: #f5faff;
|
||
}
|
||
|
||
.drag-handle {
|
||
cursor: move;
|
||
color: #909399;
|
||
}
|
||
</style>
|