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 5 <el-form @submit.native.prevent>
6 6 <el-col :span="6">
7 7 <el-form-item label="单据编号">
8   - <el-input v-model="query.id" placeholder="单据编号" clearable />
  8 + <el-input v-model="query.id" placeholder="单据编号" clearable />
9 9 </el-form-item>
10 10 </el-col>
11 11 <el-col :span="6">
12 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 14 </el-form-item>
16 15 </el-col>
17 16 <el-col :span="6">
18 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 20 </el-select>
22 21 </el-form-item>
23 22 </el-col>
... ... @@ -34,8 +33,8 @@
34 33 </el-col>
35 34 <el-col :span="6">
36 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 38 </el-select>
40 39 </el-form-item>
41 40 </el-col>
... ... @@ -80,17 +79,15 @@
80 79 </el-form-item>
81 80 </el-col>
82 81  
83   - <el-col :span="6">
  82 + <el-col :span="6">
84 83 <el-form-item label="单据来源">
85   - <el-select v-model="query.ly" placeholder="单据来源" clearable >
  84 + <el-select v-model="query.ly" placeholder="单据来源" clearable>
86 85 <el-option label="后台" value="后台" />
87 86 <el-option label="门店(收银台)" value="门店" />
88 87 <el-option label="抖音抓单" value="抖音抓单" />
89 88 </el-select>
90 89 </el-form-item>
91 90 </el-col>
92   -
93   -
94 91 </template>
95 92 <el-col :span="6">
96 93 <el-form-item>
... ... @@ -116,41 +113,59 @@
116 113 <screenfull isContainer />
117 114 </div>
118 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 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 135 <template slot-scope="scope">{{ getDisplayOriginalPrice(scope.row) }}</template>
129 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 138 <template slot-scope="scope">{{ getDisplayCollectionAmount(scope.row) }}</template>
132 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 141 <template slot-scope="scope">{{ getDisplayDiscountAmount(scope.row) }}</template>
135 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 144 <template slot-scope="scope">{{ getDisplayOutboundCost(scope.row) }}</template>
138 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 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 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 163 <template slot-scope="scope">
149 164 <ncc-table-summary-cell :row="scope.row" fields="zy,Zy" />
150 165 </template>
151 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 169 <template slot-scope="scope">{{ formatLy(scope.row.ly) }}</template>
155 170 </el-table-column>
156 171 <el-table-column prop="djzt" label="审核状态" align="left">
... ... @@ -164,14 +179,24 @@
164 179 <el-tag v-else type="warning">{{ scope.row.djzt || '待审核' }}</el-tag>
165 180 </template>
166 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 191 <template slot-scope="scope">
  192 + <div class="wt-xsckd-actions">
169 193 <el-button type="text" @click="openDetail(scope.row.id)">查看</el-button>
170 194 <el-button type="text" @click="addOrUpdateHandle(scope.row.id)" v-if="canEditDraft(scope.row)">编辑</el-button>
171 195 <el-button type="text" @click="handleApprove(scope.row.id)" v-if="canFirstApprove(scope.row)" style="color:#E6A23C">一级审核</el-button>
172 196 <el-button type="text" @click="handleApprove(scope.row.id)" v-if="canSecondApprove(scope.row)" style="color:#409EFF">二级审核</el-button>
173 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 200 </template>
176 201 </el-table-column>
177 202 </NCC-table>
... ... @@ -192,6 +217,7 @@
192 217 import { previewDataInterface } from '@/api/systemData/dataInterface'
193 218 import { promptApprovalRemark, postApproveSalesOutbound, postRejectGeneric } from '@/utils/wtRejectApproval'
194 219 import { formatWtSkzhDisplay } from '@/utils/wtComboSkzhDisplay'
  220 + import { dynamicText } from '@/filters'
195 221 export default {
196 222 components: { NCCForm, DetailView, ExportBox },
197 223 data() {
... ... @@ -241,13 +267,29 @@
241 267 { prop: 'sy_pch', label: '收银批次' },
242 268 { prop: 'zy', label: '摘要' },
243 269 { prop: 'djlx', label: '单据类型' },
  270 + { prop: 'thdh', label: '关联退货单号' },
244 271 ],
245 272 cjckOptions : [],
246 273 rkckOptions : [],
247 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 293 created() {
252 294 this.initData()
253 295 this.getcjckOptions();
... ... @@ -255,6 +297,14 @@
255 297 this.getskzhOptions();
256 298 },
257 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 308 /** 非「后台」来源：不走 ERP 审核（与后端 IsSalesOutboundSkipErpAudit 一致；ly 空视为后台需审） */
259 309 isSkipErpAuditSource(row) {
260 310 if (!row) return false
... ... @@ -283,6 +333,26 @@
283 333 if (row.djzt === '草稿' || row.djzt === '已审核' || row.djzt === '审核不通过') return false
284 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 356 formatLy(ly) {
287 357 if (ly == null || ly === '') return '无'
288 358 if (ly === '门店') return '门店(收银台)'
... ... @@ -374,16 +444,23 @@
374 444 }
375 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 464 handleDel(id) {
388 465 this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
389 466 type: 'warning'
... ... @@ -442,34 +519,52 @@
442 519 const res = val.map(item => item.id)
443 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 568 openDetail(id) {
474 569 if (!id) return
475 570 this.detailVisible = true
... ... @@ -516,18 +611,19 @@
516 611 this.detailVisible = false
517 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 629 </script>
... ... @@ -535,4 +631,22 @@
535 631 .cell-nowrap {
536 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 652 </style>
539 653 \ No newline at end of file
... ...