DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 优化多个页面UI与交互细节

Browse Source 
1. 修改钢卷追踪页面标题，调整crm钢卷表格列宽与按钮文本
2. 优化采购审核、到货、计划页面表格列配置，添加材质列
3. 为多个页面添加详情加载状态，统一按钮间距样式
4. 新增采购到货页面模板下载功能，修复产品内容组件单元格内边距
This commit is contained in:
砂糖
2026-07-06 10:36:56 +08:00
parent ed69b65e96
commit f343552729
6 changed files with 69 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
klp-ui/src/views/erp/purchaseAudit/index.vue
View File

@@ -66,7 +66,7 @@
<p>从左侧选择一条采购合同进行审核</p>
</div>
<div v-else class="pa-view">
<div v-else class="pa-view" v-loading="detailLoading">
<div class="pa-d-head">
<div>
<span class="pa-d-title">{{ current.planNo }}</span>
@@ -91,8 +91,9 @@
<div class="pa-section">采购要求<span class="pa-section-hint" v-if="current.items && current.items.length">共 {{ current.items.length }} 项</span></div>
<el-table :data="current.items || []" border size="mini" max-height="320" class="pa-table">
<el-table-column label="#" type="index" width="44" align="center" />
<el-table-column label="规格" prop="spec" min-width="200" show-overflow-tooltip />
<el-table-column label="总重量(T)" prop="weight" min-width="110" align="right" />
<el-table-column label="规格" prop="spec" min-width="160" show-overflow-tooltip />
<el-table-column label="材质" prop="material" min-width="100" show-overflow-tooltip />
<el-table-column label="总重量(T)" prop="weight" min-width="100" align="right" />
<el-table-column label="厂商" prop="manufacturer" min-width="180" show-overflow-tooltip />
<template slot="empty"><span>无采购要求</span></template>
</el-table>
@@ -131,6 +132,7 @@ export default {
return {
loading: true,
buttonLoading: false,
detailLoading: false,
total: 0,
pendingCount: 0,
planList: [],
@@ -175,10 +177,11 @@ export default {
this.getList()
},
selectPlan(row) {
this.detailLoading = true
getPurchasePlan(row.planId).then(res => {
this.current = res.data || {}
this.auditOpinion = this.current.auditOpinion || ''
})
}).finally(() => { this.detailLoading = false })
},
doAudit(status) {
this.buttonLoading = true
@@ -192,10 +195,11 @@ export default {
this.getList(true) // 刷新列表但保留右侧当前计划
this.loadPendingCount()
// 右侧停留在刚审核的计划：状态/历史即时更新，驳回后可直接重新审核
this.detailLoading = true
getPurchasePlan(pid).then(res => {
this.current = res.data || {}
this.auditOpinion = ''
})
}).finally(() => { this.detailLoading = false })
}).finally(() => { this.buttonLoading = false })
},
auditText(s) {

24
klp-ui/src/views/erp/purchaseDelivery/index.vue
View File

@@ -53,7 +53,7 @@
<p>从左侧选择一条采购合同</p>
</div>
<div v-else>
<div v-else v-loading="detailLoading">
<div class="pd-d-head">
<div>
<span class="pd-d-title">{{ current.planNo }}</span>
@@ -61,6 +61,7 @@
</div>
<div class="pd-head-act">
<el-button size="small" icon="el-icon-refresh" :loading="refreshing" @click="doRefreshArrival">刷新到货</el-button>
<el-button size="small" icon="el-icon-download" @click="downloadTemplate">下载模板</el-button>
<el-upload
:headers="upload.headers"
:action="uploadUrl"
@@ -94,9 +95,10 @@
<div class="pd-sec-title">采购要求</div>
<el-table :data="current.items" border size="mini" max-height="300">
<el-table-column label="#" type="index" width="44" align="center" />
<el-table-column label="规格" prop="spec" min-width="200" show-overflow-tooltip />
<el-table-column label="总重量(T)" prop="weight" min-width="110" align="right" />
<el-table-column label="厂商" prop="manufacturer" min-width="180" show-overflow-tooltip />
<el-table-column label="规格" prop="spec" min-width="160" show-overflow-tooltip />
<el-table-column label="材质" prop="material" min-width="100" show-overflow-tooltip />
<el-table-column label="总重量(T)" prop="weight" min-width="100" align="right" />
<el-table-column label="厂商" prop="manufacturer" min-width="150" show-overflow-tooltip />
<template slot="empty"><span>无采购要求</span></template>
</el-table>
@@ -162,6 +164,7 @@ import {
refreshArrival
} from '@/api/erp/purchasePlan'
import { getToken } from '@/utils/auth'
import * as XLSX from 'xlsx'
export default {
name: 'ErpPurchaseDelivery',
@@ -176,6 +179,7 @@ export default {
deliveryList: [],
deliveryLoading: false,
refreshing: false,
detailLoading: false,
upload: { headers: { Authorization: 'Bearer ' + getToken() } },
progressColor: '#5b8db8'
}
@@ -220,7 +224,8 @@ export default {
refreshDetail() {
const planId = this.current.planId
if (!planId) return
getPurchasePlan(planId).then(res => { this.current = { ...this.current, ...(res.data || {}) } })
this.detailLoading = true
getPurchasePlan(planId).then(res => { this.current = { ...this.current, ...(res.data || {}) } }).finally(() => { this.detailLoading = false })
this.deliveryLoading = true
listDelivery(planId).then(res => { this.deliveryList = res.data || [] }).finally(() => { this.deliveryLoading = false })
},
@@ -269,6 +274,15 @@ export default {
},
contractStatusText(v) {
return { 0: '草稿', 1: '生效', 2: '作废', 3: '已完成' }[v] || '—'
},
downloadTemplate() {
const headers = ['日期', '牌号', '规格', '卷号', '单卷重量', '车号', '数量', '件数', '销售', '钢厂到站']
const sampleRow = ['2026-01-01', 'Q235B', '1.0*1250*C', 'COIL0001', '20.50', '辽A12345', '60.8', '3', 'XS001', '沈阳站']
const wb = XLSX.utils.book_new()
const ws = XLSX.utils.aoa_to_sheet([headers, sampleRow])
ws['!cols'] = headers.map(h => ({ wch: h.length > 4 ? 14 : 10 }))
XLSX.utils.book_append_sheet(wb, ws, '到货模板')
XLSX.writeFile(wb, '到货导入模板.xlsx')
}
}
}

25
klp-ui/src/views/erp/purchasePlan/index.vue
View File

@@ -124,10 +124,13 @@
</div>
<el-table :data="form.items" border size="mini" max-height="340">
<el-table-column label="#" type="index" width="44" align="center" />
<el-table-column label="规格" min-width="220">
<el-table-column label="规格" min-width="160">
<template slot-scope="s"><el-input v-model="s.row.spec" size="mini" placeholder="如 3.00×1230" /></template>
</el-table-column>
<el-table-column label="总重量(T)" min-width="120">
<el-table-column label="材质" min-width="120">
<template slot-scope="s"><el-input v-model="s.row.material" size="mini" placeholder="如 Q235B" /></template>
</el-table-column>
<el-table-column label="总重量(T)" min-width="110">
<template slot-scope="s"><el-input v-model="s.row.weight" size="mini" /></template>
</el-table-column>
<el-table-column label="厂商" min-width="200">
@@ -157,7 +160,7 @@
</div>
<!-- 查看 -->
<div v-else class="pp-view">
<div v-else class="pp-view" v-loading="detailLoading">
<div class="pp-d-head">
<div>
<span class="pp-d-title">{{ current.planNo }}</span>
@@ -212,9 +215,10 @@
<el-tab-pane label="采购要求" name="items">
<el-table :data="current.items" border size="mini" max-height="340">
<el-table-column label="#" type="index" width="44" align="center" />
<el-table-column label="规格" prop="spec" min-width="200" show-overflow-tooltip />
<el-table-column label="总重量(T)" prop="weight" min-width="110" align="right" />
<el-table-column label="厂商" prop="manufacturer" min-width="180" show-overflow-tooltip />
<el-table-column label="规格" prop="spec" min-width="160" show-overflow-tooltip />
<el-table-column label="材质" prop="material" min-width="100" show-overflow-tooltip />
<el-table-column label="总重量(T)" prop="weight" min-width="100" align="right" />
<el-table-column label="厂商" prop="manufacturer" min-width="150" show-overflow-tooltip />
<template slot="empty"><span>无采购要求</span></template>
</el-table>
</el-tab-pane>
@@ -367,6 +371,7 @@ export default {
},
buttonLoading: false,
submitLoading: false,
detailLoading: false,
selectedContracts: [],
// 合同选择器
pickerOpen: false,
@@ -419,7 +424,8 @@ export default {
refreshDetail() {
const planId = this.current.planId
if (!planId) return
getPurchasePlan(planId).then(res => { this.current = { ...this.current, ...(res.data || {}) } })
this.detailLoading = true
getPurchasePlan(planId).then(res => { this.current = { ...this.current, ...(res.data || {}) } }).finally(() => { this.detailLoading = false })
},
// ---- 新增 / 编辑 ----
resetForm() {
@@ -431,6 +437,7 @@ export default {
this.mode = 'edit'
},
handleEdit() {
this.detailLoading = true
getPurchasePlan(this.current.planId).then(res => {
const d = res.data || {}
this.form = {
@@ -440,7 +447,7 @@ export default {
}
this.selectedContracts = []
this.mode = 'edit'
})
}).finally(() => { this.detailLoading = false })
},
cancelEdit() {
this.mode = this.planList.length ? 'view' : 'empty'
@@ -520,7 +527,7 @@ export default {
}).catch(() => cb([]))
},
blankItem() {
return { spec: '', weight: '', manufacturer: '' }
return { spec: '', material: '', weight: '', manufacturer: '' }
},
addItem() {
// 新行继承上一行的厂商（同批多为同厂），规格/重量留空