backstage / wutong

Commit 44ba74bd4d690094584f39a65cf2df21dab7a5a6

Authored by “wangming”
1 parent ec04c7b4

refactor(xsckd): improve form layout and table structure for better readability 

- Adjusted the layout of form elements for consistency and clarity.
- Enhanced the NCC-table structure with improved column definitions and added min-width for better display.
- Included show-overflow-tooltip for various columns to enhance user experience.
- Cleaned up unnecessary line breaks and improved overall code formatting.
Inline Side-by-side
Showing 1 changed file with 198 additions and 84 deletions
Antis.Erp.Plat/antis-ncc-admin/src/views/wtXsckd/index.vue
  View file @44ba74b
@@ -5,19 +5,18 @@ @@ -5,19 +5,18 @@
5 <el-form @submit.native.prevent> 5 <el-form @submit.native.prevent>
6 <el-col :span="6"> 6 <el-col :span="6">
7 <el-form-item label="单据编号"> 7 <el-form-item label="单据编号">
8 - <el-input v-model="query.id" placeholder="单据编号" clearable /> 8 + <el-input v-model="query.id" placeholder="单据编号" clearable />
9 </el-form-item> 9 </el-form-item>
10 </el-col> 10 </el-col>
11 <el-col :span="6"> 11 <el-col :span="6">
12 <el-form-item label="单据日期"> 12 <el-form-item label="单据日期">
13 - <el-date-picker v-model="query.djrq" type="daterange" value-format="timestamp" format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">  
14 - </el-date-picker> 13 + <el-date-picker v-model="query.djrq" type="daterange" value-format="timestamp" format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" />
15 </el-form-item> 14 </el-form-item>
16 </el-col> 15 </el-col>
17 <el-col :span="6"> 16 <el-col :span="6">
18 <el-form-item label="出库仓库"> 17 <el-form-item label="出库仓库">
19 - <el-select v-model="query.cjck" placeholder="出库仓库" clearable >  
20 - <el-option v-for="(item, index) in cjckOptions" :key="index" :label="item.F_mdmc" :value="item.F_Id" /> 18 + <el-select v-model="query.cjck" placeholder="出库仓库" clearable>
  19 + <el-option v-for="(item, index) in cjckOptions" :key="index" :label="item.F_mdmc" :value="item.F_Id" />
21 </el-select> 20 </el-select>
22 </el-form-item> 21 </el-form-item>
23 </el-col> 22 </el-col>
@@ -34,8 +33,8 @@ @@ -34,8 +33,8 @@
34 </el-col> 33 </el-col>
35 <el-col :span="6"> 34 <el-col :span="6">
36 <el-form-item label="收款账户"> 35 <el-form-item label="收款账户">
37 - <el-select v-model="query.skzh" placeholder="收款账户" clearable >  
38 - <el-option v-for="(item, index) in skzhOptions" :key="index" :label="item.fullName" :value="item.id" /> 36 + <el-select v-model="query.skzh" placeholder="收款账户" clearable>
  37 + <el-option v-for="(item, index) in skzhOptions" :key="index" :label="item.fullName" :value="item.id" />
39 </el-select> 38 </el-select>
40 </el-form-item> 39 </el-form-item>
41 </el-col> 40 </el-col>
@@ -80,17 +79,15 @@ @@ -80,17 +79,15 @@
80 </el-form-item> 79 </el-form-item>
81 </el-col> 80 </el-col>
82 81
83 - <el-col :span="6"> 82 + <el-col :span="6">
84 <el-form-item label="单据来源"> 83 <el-form-item label="单据来源">
85 - <el-select v-model="query.ly" placeholder="单据来源" clearable > 84 + <el-select v-model="query.ly" placeholder="单据来源" clearable>
86 <el-option label="后台" value="后台" /> 85 <el-option label="后台" value="后台" />
87 <el-option label="门店(收银台)" value="门店" /> 86 <el-option label="门店(收银台)" value="门店" />
88 <el-option label="抖音抓单" value="抖音抓单" /> 87 <el-option label="抖音抓单" value="抖音抓单" />
89 </el-select> 88 </el-select>
90 </el-form-item> 89 </el-form-item>
91 </el-col> 90 </el-col>
92 -  
93 -  
94 </template> 91 </template>
95 <el-col :span="6"> 92 <el-col :span="6">
96 <el-form-item> 93 <el-form-item>
@@ -116,41 +113,59 @@ @@ -116,41 +113,59 @@
116 <screenfull isContainer /> 113 <screenfull isContainer />
117 </div> 114 </div>
118 </div> 115 </div>
119 - <NCC-table v-loading="listLoading" :data="list" has-c @selection-change="handleSelectionChange">  
120 - <el-table-column prop="id" label="单据编号" align="left" />  
121 - <el-table-column prop="djrq" label="单据日期" align="left" :formatter="ncc.tableDateFormat" />  
122 - <el-table-column label="出库仓库" prop="cjck" align="left">  
123 - <template slot-scope="scope">{{ scope.row.cjck | dynamicText(cjckOptions) }}</template> 116 + <NCC-table
  117 + v-loading="listLoading"
  118 + class="wt-xsckd-table"
  119 + :data="list"
  120 + has-c
  121 + @selection-change="handleSelectionChange"
  122 + >
  123 + <el-table-column prop="id" label="单据编号" align="left" min-width="150" show-overflow-tooltip />
  124 + <el-table-column prop="djrq" label="单据日期" align="left" min-width="110" :formatter="ncc.tableDateFormat" show-overflow-tooltip />
  125 + <el-table-column label="出库仓库" prop="cjck" align="left" min-width="120" show-overflow-tooltip>
  126 + <template slot-scope="scope">{{ displayText(formatCjckDisplay(scope.row)) }}</template>
  127 + </el-table-column>
  128 + <el-table-column prop="jsr" label="经手人" align="left" min-width="88" show-overflow-tooltip>
  129 + <template slot-scope="scope">{{ displayText(scope.row.jsr) }}</template>
  130 + </el-table-column>
  131 + <el-table-column prop="hysjh" label="会员手机号码" align="left" min-width="120" show-overflow-tooltip>
  132 + <template slot-scope="scope">{{ displayText(scope.row.hysjh) }}</template>
124 </el-table-column> 133 </el-table-column>
125 - <el-table-column prop="jsr" label="经手人" align="left" />  
126 - <el-table-column prop="hysjh" label="会员手机号码" align="left" />  
127 - <el-table-column label="原价" align="left" min-width="90"> 134 + <el-table-column label="原价" align="right" min-width="96" show-overflow-tooltip>
128 <template slot-scope="scope">{{ getDisplayOriginalPrice(scope.row) }}</template> 135 <template slot-scope="scope">{{ getDisplayOriginalPrice(scope.row) }}</template>
129 </el-table-column> 136 </el-table-column>
130 - <el-table-column label="收款金额" align="left" min-width="90"> 137 + <el-table-column label="收款金额" align="right" min-width="96" show-overflow-tooltip>
131 <template slot-scope="scope">{{ getDisplayCollectionAmount(scope.row) }}</template> 138 <template slot-scope="scope">{{ getDisplayCollectionAmount(scope.row) }}</template>
132 </el-table-column> 139 </el-table-column>
133 - <el-table-column label="优惠金额" align="left" min-width="90"> 140 + <el-table-column label="优惠金额" align="right" min-width="96" show-overflow-tooltip>
134 <template slot-scope="scope">{{ getDisplayDiscountAmount(scope.row) }}</template> 141 <template slot-scope="scope">{{ getDisplayDiscountAmount(scope.row) }}</template>
135 </el-table-column> 142 </el-table-column>
136 - <el-table-column label="出库成本" align="left" min-width="90"> 143 + <el-table-column label="出库成本" align="right" min-width="96" show-overflow-tooltip>
137 <template slot-scope="scope">{{ getDisplayOutboundCost(scope.row) }}</template> 144 <template slot-scope="scope">{{ getDisplayOutboundCost(scope.row) }}</template>
138 </el-table-column> 145 </el-table-column>
139 - <el-table-column label="收款账户" prop="skzh" align="left">  
140 - <template slot-scope="scope">{{ formatSkzhRow(scope.row) }}</template> 146 + <el-table-column label="收款账户" prop="skzh" align="left" min-width="120" show-overflow-tooltip>
  147 + <template slot-scope="scope">{{ displayText(formatSkzhRow(scope.row)) }}</template>
  148 + </el-table-column>
  149 + <el-table-column prop="zdr" label="制单人" align="left" min-width="88" show-overflow-tooltip>
  150 + <template slot-scope="scope">{{ displayText(scope.row.zdr) }}</template>
  151 + </el-table-column>
  152 + <el-table-column prop="shr" label="审核人" align="left" min-width="88" show-overflow-tooltip>
  153 + <template slot-scope="scope">{{ displayText(scope.row.shr) }}</template>
  154 + </el-table-column>
  155 + <el-table-column prop="gzr" label="过账人" align="left" min-width="88" show-overflow-tooltip>
  156 + <template slot-scope="scope">{{ displayText(scope.row.gzr) }}</template>
  157 + </el-table-column>
  158 + <el-table-column prop="bz" label="备注" align="left" min-width="120" show-overflow-tooltip>
  159 + <template slot-scope="scope">{{ displayText(scope.row.bz) }}</template>
141 </el-table-column> 160 </el-table-column>
142 - <el-table-column prop="zdr" label="制单人" align="left" />  
143 - <el-table-column prop="shr" label="审核人" align="left" />  
144 - <el-table-column prop="gzr" label="过账人" align="left" />  
145 - <el-table-column prop="bz" label="备注" align="left" />  
146 <el-table-column prop="sy_pch" label="收银批次" align="left" min-width="120" show-overflow-tooltip /> 161 <el-table-column prop="sy_pch" label="收银批次" align="left" min-width="120" show-overflow-tooltip />
147 - <el-table-column label="摘要" align="left" min-width="240"> 162 + <el-table-column label="摘要" align="left" min-width="200" show-overflow-tooltip>
148 <template slot-scope="scope"> 163 <template slot-scope="scope">
149 <ncc-table-summary-cell :row="scope.row" fields="zy,Zy" /> 164 <ncc-table-summary-cell :row="scope.row" fields="zy,Zy" />
150 </template> 165 </template>
151 </el-table-column> 166 </el-table-column>
152 - <el-table-column prop="djlx" label="单据类型" align="left" />  
153 - <el-table-column label="单据来源" prop="ly" align="left" min-width="100"> 167 + <el-table-column prop="djlx" label="单据类型" align="left" min-width="100" show-overflow-tooltip />
  168 + <el-table-column label="单据来源" prop="ly" align="left" min-width="110" show-overflow-tooltip>
154 <template slot-scope="scope">{{ formatLy(scope.row.ly) }}</template> 169 <template slot-scope="scope">{{ formatLy(scope.row.ly) }}</template>
155 </el-table-column> 170 </el-table-column>
156 <el-table-column prop="djzt" label="审核状态" align="left"> 171 <el-table-column prop="djzt" label="审核状态" align="left">
@@ -164,14 +179,24 @@ @@ -164,14 +179,24 @@
164 <el-tag v-else type="warning">{{ scope.row.djzt || '待审核' }}</el-tag> 179 <el-tag v-else type="warning">{{ scope.row.djzt || '待审核' }}</el-tag>
165 </template> 180 </template>
166 </el-table-column> 181 </el-table-column>
167 - <el-table-column label="操作" fixed="right" width="340"> 182 + <el-table-column label="退货" align="center" min-width="100" show-overflow-tooltip>
  183 + <template slot-scope="scope">
  184 + <el-tooltip v-if="hasLinkedSalesReturn(scope.row)" effect="dark" placement="top" :content="'关联退货单：' + (scope.row.thdh || '')">
  185 + <el-tag type="warning" size="small">已退货</el-tag>
  186 + </el-tooltip>
  187 + <span v-else class="wt-xsckd-return-none">无</span>
  188 + </template>
  189 + </el-table-column>
  190 + <el-table-column label="操作" fixed="right" :width="salesOutboundOperationColWidth" align="left">
168 <template slot-scope="scope"> 191 <template slot-scope="scope">
  192 + <div class="wt-xsckd-actions">
169 <el-button type="text" @click="openDetail(scope.row.id)">查看</el-button> 193 <el-button type="text" @click="openDetail(scope.row.id)">查看</el-button>
170 <el-button type="text" @click="addOrUpdateHandle(scope.row.id)" v-if="canEditDraft(scope.row)">编辑</el-button> 194 <el-button type="text" @click="addOrUpdateHandle(scope.row.id)" v-if="canEditDraft(scope.row)">编辑</el-button>
171 <el-button type="text" @click="handleApprove(scope.row.id)" v-if="canFirstApprove(scope.row)" style="color:#E6A23C">一级审核</el-button> 195 <el-button type="text" @click="handleApprove(scope.row.id)" v-if="canFirstApprove(scope.row)" style="color:#E6A23C">一级审核</el-button>
172 <el-button type="text" @click="handleApprove(scope.row.id)" v-if="canSecondApprove(scope.row)" style="color:#409EFF">二级审核</el-button> 196 <el-button type="text" @click="handleApprove(scope.row.id)" v-if="canSecondApprove(scope.row)" style="color:#409EFF">二级审核</el-button>
173 <el-button type="text" @click="handleReject(scope.row.id)" v-if="canRejectAudit(scope.row)" style="color:#F56C6C">审核不通过</el-button> 197 <el-button type="text" @click="handleReject(scope.row.id)" v-if="canRejectAudit(scope.row)" style="color:#F56C6C">审核不通过</el-button>
174 - <el-button type="text" @click="handleDel(scope.row.id)" class="NCC-table-delBtn" >删除</el-button> 198 + <el-button type="text" v-if="canDeleteSalesOutbound(scope.row)" @click="handleDel(scope.row.id)" class="NCC-table-delBtn">删除</el-button>
  199 + </div>
175 </template> 200 </template>
176 </el-table-column> 201 </el-table-column>
177 </NCC-table> 202 </NCC-table>
@@ -192,6 +217,7 @@ @@ -192,6 +217,7 @@
192 import { previewDataInterface } from '@/api/systemData/dataInterface' 217 import { previewDataInterface } from '@/api/systemData/dataInterface'
193 import { promptApprovalRemark, postApproveSalesOutbound, postRejectGeneric } from '@/utils/wtRejectApproval' 218 import { promptApprovalRemark, postApproveSalesOutbound, postRejectGeneric } from '@/utils/wtRejectApproval'
194 import { formatWtSkzhDisplay } from '@/utils/wtComboSkzhDisplay' 219 import { formatWtSkzhDisplay } from '@/utils/wtComboSkzhDisplay'
  220 + import { dynamicText } from '@/filters'
195 export default { 221 export default {
196 components: { NCCForm, DetailView, ExportBox }, 222 components: { NCCForm, DetailView, ExportBox },
197 data() { 223 data() {
@@ -241,13 +267,29 @@ @@ -241,13 +267,29 @@
241 { prop: 'sy_pch', label: '收银批次' }, 267 { prop: 'sy_pch', label: '收银批次' },
242 { prop: 'zy', label: '摘要' }, 268 { prop: 'zy', label: '摘要' },
243 { prop: 'djlx', label: '单据类型' }, 269 { prop: 'djlx', label: '单据类型' },
  270 + { prop: 'thdh', label: '关联退货单号' },
244 ], 271 ],
245 cjckOptions : [], 272 cjckOptions : [],
246 rkckOptions : [], 273 rkckOptions : [],
247 skzhOptions : [], 274 skzhOptions : [],
248 } 275 }
249 }, 276 },
250 - computed: {}, 277 + computed: {
  278 + /**
  279 + * 操作列宽度：表格列整表同宽，按当前页各行「可见按钮」估算宽度的最大值（与下方 v-if 一致）。
  280 + */
  281 + salesOutboundOperationColWidth() {
  282 + const rows = this.list || []
  283 + const minW = 80
  284 + if (!rows.length) return minW
  285 + let maxW = minW
  286 + for (let i = 0; i < rows.length; i++) {
  287 + const w = this.getSalesOutboundRowActionEstimatedWidth(rows[i])
  288 + if (w > maxW) maxW = w
  289 + }
  290 + return maxW
  291 + }
  292 + },
251 created() { 293 created() {
252 this.initData() 294 this.initData()
253 this.getcjckOptions(); 295 this.getcjckOptions();
@@ -255,6 +297,14 @@ @@ -255,6 +297,14 @@
255 this.getskzhOptions(); 297 this.getskzhOptions();
256 }, 298 },
257 methods: { 299 methods: {
  300 + displayText(val) {
  301 + if (val == null || String(val).trim() === '') return '无'
  302 + return String(val)
  303 + },
  304 + formatCjckDisplay(row) {
  305 + if (!row) return ''
  306 + return dynamicText(row.cjck, this.cjckOptions)
  307 + },
258 /** 非「后台」来源：不走 ERP 审核（与后端 IsSalesOutboundSkipErpAudit 一致；ly 空视为后台需审） */ 308 /** 非「后台」来源：不走 ERP 审核（与后端 IsSalesOutboundSkipErpAudit 一致；ly 空视为后台需审） */
259 isSkipErpAuditSource(row) { 309 isSkipErpAuditSource(row) {
260 if (!row) return false 310 if (!row) return false
@@ -283,6 +333,26 @@ @@ -283,6 +333,26 @@
283 if (row.djzt === '草稿' || row.djzt === '已审核' || row.djzt === '审核不通过') return false 333 if (row.djzt === '草稿' || row.djzt === '已审核' || row.djzt === '审核不通过') return false
284 return this.canFirstApprove(row) || this.canSecondApprove(row) 334 return this.canFirstApprove(row) || this.canSecondApprove(row)
285 }, 335 },
  336 + /** 列表行 thdh：后端填充的关联销售退货单号（逗号分隔），有值则不可删 */
  337 + hasLinkedSalesReturn(row) {
  338 + if (!row) return false
  339 + const t = row.thdh
  340 + return t != null && String(t).trim() !== ''
  341 + },
  342 + canDeleteSalesOutbound(row) {
  343 + return !this.hasLinkedSalesReturn(row)
  344 + },
  345 + /** 与操作列按钮展示条件一致，估算单行操作区所需宽度（px） */
  346 + getSalesOutboundRowActionEstimatedWidth(row) {
  347 + if (!row) return 80
  348 + let w = 44
  349 + if (this.canEditDraft(row)) w += 44
  350 + if (this.canFirstApprove(row)) w += 72
  351 + if (this.canSecondApprove(row)) w += 72
  352 + if (this.canRejectAudit(row)) w += 92
  353 + if (this.canDeleteSalesOutbound(row)) w += 44
  354 + return w + 32
  355 + },
286 formatLy(ly) { 356 formatLy(ly) {
287 if (ly == null || ly === '') return '无' 357 if (ly == null || ly === '') return '无'
288 if (ly === '门店') return '门店(收银台)' 358 if (ly === '门店') return '门店(收银台)'
@@ -374,16 +444,23 @@ @@ -374,16 +444,23 @@
374 } 444 }
375 query.djlx='销售出库单'; 445 query.djlx='销售出库单';
376 446
377 - request({  
378 - url: `/api/Extend/WtXsckd`,  
379 - method: 'GET',  
380 - data: query  
381 - }).then(res => {  
382 - this.list = res.data.list  
383 - this.total = res.data.pagination.total  
384 - this.listLoading = false  
385 - })  
386 - }, 447 + request({
  448 + url: `/api/Extend/WtXsckd`,
  449 + method: 'GET',
  450 + data: query
  451 + })
  452 + .then(res => {
  453 + this.list = res.data.list || []
  454 + this.total = (res.data.pagination && res.data.pagination.total) || 0
  455 + })
  456 + .catch(() => {
  457 + this.list = []
  458 + this.total = 0
  459 + })
  460 + .finally(() => {
  461 + this.listLoading = false
  462 + })
  463 + },
387 handleDel(id) { 464 handleDel(id) {
388 this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', { 465 this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
389 type: 'warning' 466 type: 'warning'
@@ -442,34 +519,52 @@ @@ -442,34 +519,52 @@
442 const res = val.map(item => item.id) 519 const res = val.map(item => item.id)
443 this.multipleSelection = res 520 this.multipleSelection = res
444 }, 521 },
445 - handleBatchRemoveDel() {  
446 - if (!this.multipleSelection.length) {  
447 - this.$message({  
448 - type: 'error',  
449 - message: '请选择一条数据',  
450 - duration: 1500,  
451 - })  
452 - return  
453 - }  
454 - const ids = this.multipleSelection  
455 - this.$confirm('您确定要删除这些数据吗, 是否继续？', '提示', {  
456 - type: 'warning'  
457 - }).then(() => {  
458 - request({  
459 - url: `/api/Extend/WtXsckd/batchRemove`,  
460 - method: 'POST',  
461 - data: ids ,  
462 - }).then(res => {  
463 - this.$message({  
464 - type: 'success',  
465 - message: res.msg,  
466 - onClose: () => {  
467 - this.initData()  
468 - }  
469 - });  
470 - })  
471 - }).catch(() => { })  
472 - }, 522 + handleBatchRemoveDel() {
  523 + if (!this.multipleSelection.length) {
  524 + this.$message({
  525 + type: 'error',
  526 + message: '请选择一条数据',
  527 + duration: 1500
  528 + })
  529 + return
  530 + }
  531 + const deletable = this.multipleSelection.filter((id) => {
  532 + const row = this.list.find((r) => r.id === id)
  533 + return row && this.canDeleteSalesOutbound(row)
  534 + })
  535 + if (!deletable.length) {
  536 + this.$message({
  537 + type: 'warning',
  538 + message: '所选单据均已关联销售退货，无法删除',
  539 + duration: 2000
  540 + })
  541 + return
  542 + }
  543 + const skipped = this.multipleSelection.length - deletable.length
  544 + const tip =
  545 + skipped > 0
  546 + ? `将删除 ${deletable.length} 条，已跳过 ${skipped} 条（已关联销售退货）。是否继续？`
  547 + : '您确定要删除这些数据吗, 是否继续？'
  548 + this.$confirm(tip, '提示', {
  549 + type: 'warning'
  550 + })
  551 + .then(() => {
  552 + request({
  553 + url: `/api/Extend/WtXsckd/batchRemove`,
  554 + method: 'POST',
  555 + data: deletable
  556 + }).then((res) => {
  557 + this.$message({
  558 + type: 'success',
  559 + message: res.msg,
  560 + onClose: () => {
  561 + this.initData()
  562 + }
  563 + })
  564 + })
  565 + })
  566 + .catch(() => {})
  567 + },
473 openDetail(id) { 568 openDetail(id) {
474 if (!id) return 569 if (!id) return
475 this.detailVisible = true 570 this.detailVisible = true
@@ -516,18 +611,19 @@ @@ -516,18 +611,19 @@
516 this.detailVisible = false 611 this.detailVisible = false
517 if (isrRefresh) this.reset() 612 if (isrRefresh) this.reset()
518 }, 613 },
519 - reset() {  
520 - for (let key in this.query) {  
521 - this.query[key] = undefined  
522 - }  
523 - this.listQuery = {  
524 - currentPage: 1,  
525 - pageSize: 20,  
526 - sort: "desc",  
527 - sidx: "",  
528 - }  
529 - this.initData()  
530 - } 614 + reset() {
  615 + for (const key in this.query) {
  616 + this.query[key] = undefined
  617 + }
  618 + this.query.djlx = '销售出库单'
  619 + this.listQuery = {
  620 + currentPage: 1,
  621 + pageSize: 20,
  622 + sort: 'desc',
  623 + sidx: ''
  624 + }
  625 + this.initData()
  626 + }
531 } 627 }
532 } 628 }
533 </script> 629 </script>
@@ -535,4 +631,22 @@ @@ -535,4 +631,22 @@
535 .cell-nowrap { 631 .cell-nowrap {
536 white-space: nowrap; 632 white-space: nowrap;
537 } 633 }
  634 +
  635 +.wt-xsckd-table {
  636 + ::v-deep .el-table .cell {
  637 + white-space: nowrap;
  638 + }
  639 +}
  640 +
  641 +.wt-xsckd-return-none {
  642 + color: #909399;
  643 + font-size: 13px;
  644 +}
  645 +
  646 +.wt-xsckd-actions {
  647 + display: inline-flex;
  648 + flex-wrap: nowrap;
  649 + align-items: center;
  650 + vertical-align: middle;
  651 +}
538 </style> 652 </style>
539 \ No newline at end of file 653 \ No newline at end of file