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

feat: 添加 CurrentCoilNo 组件并替换原有钢卷号显示

Browse Source 
引入新的 CurrentCoilNo 组件用于统一显示钢卷号，支持不同长度钢卷号的格式化显示和颜色区分
替换多个视图中的 el-tag 和 CoilNo 组件为新的 CurrentCoilNo 组件
This commit is contained in:
砂糖
2026-03-04 10:58:18 +08:00
parent 809a4506e7
commit 0aaa01f4bf
10 changed files with 87 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
klp-ui/src/components/KLPService/Renderer/CurrentCoilNo.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<div class="current-coil-no">
<template v-if="currentCoilNo.length < 10">
{{ currentCoilNo }}
</template>
<template v-else>
<span v-if="remainingPart" class="green-part">{{ firstFive }}</span>
<span v-if="middlePart" class="default-part">{{ middlePart }}</span>
<span v-if="remainingPart && lastTwo" class="blue-part">{{ lastTwo }}</span>
<span v-if="splitPart" class="red-part">{{ splitPart }}</span>
</template>
</div>
</template>
<script>
export default {
name: 'CurrentCoilNo',
props: {
currentCoilNo: {
type: String,
required: true
}
},
computed: {
splitPart() {
const index = Math.max(this.currentCoilNo.indexOf('-'), this.currentCoilNo.indexOf('/'));
return index > -1 ? this.currentCoilNo.substring(index) : '';
},
mainPart() {
const index = Math.max(this.currentCoilNo.indexOf('-'), this.currentCoilNo.indexOf('/'));
return index > -1 ? this.currentCoilNo.substring(0, index) : this.currentCoilNo;
},
firstFive() {
return this.mainPart.substring(0, 5);
},
middlePart() {
return this.mainPart.length > 7 ? this.mainPart.substring(5, this.mainPart.length - 2) : '';
},
lastTwo() {
return this.mainPart.length > 5 ? this.mainPart.substring(this.mainPart.length - 2) : '';
},
remainingPart() {
return this.mainPart.length > 0;
}
}
}
</script>
<style scoped>
.current-coil-no {
display: inline-block;
font-size: 12px;
background-color: #f4f4f5;
padding: 2px 4px;
border-radius: 4px;
}
.green-part {
color: rgb(0, 130, 46);
}
.default-part {
color: inherit;
}
.blue-part {
color: rgb(0, 149, 248);
}
.red-part {
color: rgb(250, 72, 72);
}
</style>

4
klp-ui/src/main.js
View File

@@ -46,7 +46,7 @@ import VueMeta from 'vue-meta'
import DictData from '@/components/DictData'
import KLPTable from '@/components/KLPUI/KLPTable/index.vue'
import MemoInput from '@/components/MemoInput/index.vue'
import CurrentCoilNo from '@/components/KLPService/Renderer/CurrentCoilNo.vue'
// 全局方法挂载
@@ -73,6 +73,8 @@ Vue.component('ImagePreview', ImagePreview)
Vue.component('KLPTable', KLPTable)
Vue.component('MemoInput', MemoInput)
Vue.component('CurrentCoilNo', CurrentCoilNo)
Vue.use(vueFlvPlayer)
Vue.use(directive)
Vue.use(plugins)

6
klp-ui/src/views/wms/coil/do/correct.vue
View File

@@ -39,7 +39,7 @@
:style="getBorderStyle(item)">
<div class="card-header">
<div class="header-left">
<el-tag type="info" size="small" class="coil-no-tag">{{ item.currentCoilNo }}</el-tag>
<current-coil-no :current-coil-no="item.currentCoilNo"></current-coil-no>
<el-tag type="info" size="small" class="coil-no-tag" :style="getBorderStyle(item)">{{
getTypeLabel(item) }}</el-tag>
<span class="material-type">{{ item.materialType || '原料' }}</span>
@@ -660,7 +660,7 @@ export default {
// ========== 物料列表相关方法 ==========
/** 查询物料列表 */
handleRestoreMaterial(row) {
this.$modal.confirm('是否要将改钢卷还原到上次加工的状态（会删除该钢卷并将上一步的历史钢卷）').then(_ => {
this.$modal.confirm('是否要将改钢卷还原到上次加工的状态（会删除该钢卷并将上一步的历史钢卷还原）').then(_ => {
const loading = this.$loading({
lock: true,
text: '处理中...',
@@ -753,7 +753,7 @@ export default {
/** 删除按钮操作 */
hanleDeleteMaterial(row) {
const coilIds = row.coilId;
this.$modal.confirm('是否确认删除钢卷物料编号为"' + coilIds + '"的数据项，会同时清理刚钢卷相关的待操作记录且无法恢复！！！是否继续删除？').then(() => {
this.$modal.confirm('是否确认删除钢卷物料编号为"' + coilIds + '"的数据项？').then(() => {
this.loading = true;
return delMaterialCoil(coilIds);
}).then(() => {

2
klp-ui/src/views/wms/coil/do/packing.vue
View File

@@ -216,7 +216,7 @@
'important-card': item.priority === 1
}">
<div class="card-header">
<el-tag type="info" size="small" class="coil-no-tag">{{ item.currentCoilNo }}</el-tag>
<current-coil-no :current-coil-no="item.currentCoilNo"></current-coil-no>
</div>
<div class="card-body">

2
klp-ui/src/views/wms/coil/do/search.vue
View File

@@ -167,7 +167,7 @@
<div v-for="(item, index) in materialCoilList" :key="item.coilId || index" class="material-card">
<div class="card-header">
<div class="header-left">
<el-tag type="info" size="small" class="coil-no-tag">{{ item.currentCoilNo }}</el-tag>
<current-coil-no :current-coil-no="item.currentCoilNo"></current-coil-no>
<span class="material-type">{{ item.materialType || '原料' }}</span>
<el-popover v-if="item.rawMaterial || item.product" placement="top" width="280" trigger="hover"
popper-class="material-params-popover">

2
klp-ui/src/views/wms/coil/do/ship.vue
View File

@@ -174,7 +174,7 @@
}"
>
<div class="card-header">
<el-tag type="info" size="small" class="coil-no-tag">{{ item.currentCoilNo }}</el-tag>
<current-coil-no :current-coil-no="item.currentCoilNo"></current-coil-no>
</div>
<div class="card-body">

2
klp-ui/src/views/wms/coil/do/warehousing.vue
View File

@@ -176,7 +176,7 @@
<el-table v-else v-loading="loading" border :data="pendingActions" highlight-current-row>
<el-table-column label="钢卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true">
<template slot-scope="scope">
<CoilNo :coil-no="scope.row.currentCoilNo" :coil-id="scope.row.coilId" />
<current-coil-no :current-coil-no="scope.row.currentCoilNo"></current-coil-no>
<!-- <el-tag type="info" size="small">{{ scope.row.currentCoilNo }}</el-tag> -->
</template>
</el-table-column>

2
klp-ui/src/views/wms/coil/panels/base.vue
View File

@@ -86,7 +86,7 @@
</el-table-column>
<el-table-column label="当前钢卷号" align="center" prop="currentCoilNo">
<template slot-scope="scope">
<coil-no :coil-no="scope.row.currentCoilNo"></coil-no>
<current-coil-no :current-coil-no="scope.row.currentCoilNo"></current-coil-no>
</template>
</el-table-column>
<!-- <el-table-column label="厂家卷号" align="center" prop="supplierCoilNo" /> -->

4
klp-ui/src/views/wms/coil/panels/do.vue
View File

@@ -41,7 +41,7 @@
:style="{ border: item.abnormalCount > 0 ? '1px solid red' : ' 1px solid #e4e7ed' }">
<div class="card-header">
<div class="header-left">
<el-tag type="info" size="small" class="coil-no-tag">{{ item.currentCoilNo }}</el-tag>
<current-coil-no :current-coil-no="item.currentCoilNo"></current-coil-no>
<!-- <span class="material-type">{{ item.materialType || '原料' }}</span> -->
<el-popover v-if="item.rawMaterial || item.product" placement="top" width="280" trigger="hover"
popper-class="material-params-popover">
@@ -340,7 +340,7 @@
'important-card': item.priority === 1
}">
<div class="card-header">
<el-tag type="info" size="small" class="coil-no-tag">{{ item.currentCoilNo }}</el-tag>
<current-coil-no :current-coil-no="item.currentCoilNo"></current-coil-no>
<div class="status-tags">
<el-tag v-if="item.actionStatus === 0" type="info" size="mini">待处理</el-tag>
<el-tag v-else-if="item.actionStatus === 1" type="warning" size="mini">处理中</el-tag>

6
klp-ui/src/views/wms/delivery/components/detailTable.vue
View File

@@ -38,7 +38,11 @@
<el-table-column label="包装" align="center" prop="packaging" />
<el-table-column label="结算方式" align="center" prop="settlementType" />
<!-- <el-table-column label="原料厂家" align="center" prop="rawMaterialFactory" /> -->
<el-table-column label="卷号" align="center" prop="coilNo" />
<el-table-column label="卷号" align="center" prop="coilNo">
<template slot-scope="scope">
<current-coil-no :current-coil-no="scope.row.coilNo"></current-coil-no>
</template>
</el-table-column>
<el-table-column label="规格" align="center" prop="specification" />
<el-table-column label="材质" align="center" prop="material" />
<el-table-column label="数量" align="center" prop="quantity" />