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

feat: 优化产品信息展示组件，使用悬停弹窗替代对话框

Browse Source 
refactor: 重构原材料信息组件，采用与产品信息一致的交互方式
fix: 移除酸连轧工序页面，该功能已迁移至其他模块
style: 调整元素阴影样式，移除不必要的样式属性
chore: 添加调试日志，便于追踪参数传递
This commit is contained in:
砂糖
2025-11-24 17:21:26 +08:00
parent 0beb9e22f8
commit 9d7ce2472d
7 changed files with 69 additions and 1139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
klp-ui/src/assets/styles/element-ui.scss
View File

@@ -1303,7 +1303,7 @@ body {
.el-descriptions { .el-descriptions {
width: 100%; width: 100%;
// background: $--color-background !important; // 黑色背景 // background: $--color-background !important; // 黑色背景
box-shadow: $--metal-shadow; // box-shadow: $--metal-shadow;
overflow: hidden; overflow: hidden;
color: $--color-text-primary; // 白色文字 color: $--color-text-primary; // 白色文字

1
klp-ui/src/components/KLPService/RawMaterialSelect/index.vue
View File

@@ -186,6 +186,7 @@ export default {
try { try {
this.loading = true; this.loading = true;
const params = { ...this.queryParams, ...this.filters }; const params = { ...this.queryParams, ...this.filters };
console.log('params', params);
const response = await listRawMaterial(params); const response = await listRawMaterial(params);
if (response.code === 200) { if (response.code === 200) {
this.rawMaterialList = response.rows.map(item => ({ this.rawMaterialList = response.rows.map(item => ({

104
klp-ui/src/components/KLPService/Renderer/ProductInfo.vue
View File

@@ -1,71 +1,60 @@
<template> <template>
<div> <div>
<span class="product-name" @click.stop="clickHandle"> <el-popover
<slot name="default" :product="productFull"> trigger="hover"
{{ productFull.productName || '未知' }}[{{ productFull.specification || '无规格' }}] - (材质：{{ productFull.material || '无材质' }}) placement="top"
</slot> width="400"
</span> :visible-arrow="true"
<el-dialog append-to-body
:visible="showDetail" popper-class="product-info-popover"
@close="showDetail = false"
:title="productFull.productName || '--' "
width="500px"
append-to-body
> >
<el-descriptions :column="1" border> <!-- popover 内容（原dialog中的描述列表） -->
<el-descriptions :column="2" class="popover-content">
<el-descriptions-item label="产品名称"> <el-descriptions-item label="产品名称">
{{ product.productName || '--' }} {{ productFull.productName || '--' }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="产品编码"> <el-descriptions-item label="产品编码">
{{ product.productCode || '--' }} {{ productFull.productCode || '--' }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="规格"> <el-descriptions-item label="规格">
{{ product.specification || '--' }} {{ productFull.specification || '--' }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="材质"> <el-descriptions-item label="材质">
{{ product.material || '--' }} {{ productFull.material || '--' }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="表面处理"> <el-descriptions-item label="表面处理">
{{ product.surfaceTreatment || '--' }} {{ productFull.surfaceTreatment || '--' }}
</el-descriptions-item> </el-descriptions-item>
<!-- 锌层 -->
<el-descriptions-item label="锌层"> <el-descriptions-item label="锌层">
{{ product.zincLayer || '--' }} {{ productFull.zincLayer || '--' }}
</el-descriptions-item> </el-descriptions-item>
<!-- 厂家 -->
<el-descriptions-item label="厂家"> <el-descriptions-item label="厂家">
{{ product.manufacturer || '--' }} {{ productFull.manufacturer || '--' }}
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<!-- <BomInfo :bomId="product.bomId" /> -->
</el-dialog> <!-- 触发元素（原产品名称文本） -->
<span slot="reference" class="product-name">
<slot name="default" :product="productFull">
{{ productFull.productName || '未知' }}[{{ productFull.specification || '无规格' }}] - (材质：{{ productFull.material || '无材质' }})
</slot>
</span>
</el-popover>
</div> </div>
</template> </template>
<script> <script>
// import { mapState } from 'vuex';
// import BomInfo from './BomInfo.vue';
export default { export default {
name: 'ProductInfo', name: 'ProductInfo',
// components: {
// BomInfo
// },
props: { props: {
product: { product: {
type: Object, type: Object,
// required: true,
default: () => ({}) default: () => ({})
}, },
}, },
// mounted() {
// console.log(this.productId, this.productMap);
// },
data() { data() {
return { return {
showDetail: false, // 移除showDetail，无需弹窗控制
// product: {},
}; };
}, },
computed: { computed: {
@@ -83,44 +72,12 @@ export default {
surfaceTreatment: this.product.surfaceTreatment || '', surfaceTreatment: this.product.surfaceTreatment || '',
zincLayer: this.product.zincLayer || '', zincLayer: this.product.zincLayer || '',
manufacturer: this.product.manufacturer || '', manufacturer: this.product.manufacturer || '',
} };
} }
}, },
// computed: {
// ...mapState({
// productMap: state => state.category.productMap
// }),
// product() {
// // 检查 productMap 是否已加载
// if (!this.productMap || Object.keys(this.productMap).length === 0) {
// return {};
// }
// if (!this.productId) {
// return {};
// }
// return this.productMap[this.productId.toString()] || {};
// },
// loading() {
// return !this.productMap || Object.keys(this.productMap).length === 0
// }
// },
methods: { methods: {
clickHandle() { // 移除clickHandle方法，无需点击触发
this.showDetail = true;
}
}, },
// watch: {
// productId: {
// handler(newVal) {
// if (!newVal) {
// this.product = {};
// }
// const res = this.productMap[newVal.toString()] ? this.productMap[newVal.toString()] : {};
// this.product = res;
// },
// immediate: true
// }
// }
}; };
</script> </script>
@@ -129,10 +86,7 @@ export default {
color: #1890ff; color: #1890ff;
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
} /* 增加内边距，优化悬停触发区域 */
padding: 2px 4px;
/* 可选：调整描述列表的外边距 */
:deep(.el-descriptions) {
margin-top: -10px;
} }
</style> </style>

95
klp-ui/src/components/KLPService/Renderer/RawMaterialInfo.vue
View File

@@ -1,40 +1,37 @@
<template> <template>
<div> <div>
<!-- 作用域插槽 --> <!-- 原材料名称（仅hover触发popover） -->
<span class="material-name" @click.stop="showDetail = true"> <el-popover
<slot name="default" :material="materialFull"> trigger="hover"
{{ materialFull.rawMaterialName || '未知' }}[{{ materialFull.specification || '无规格' }}] - (材质：{{ materialFull.material || '无材质' }}) placement="top"
</slot> width="400"
</span> :visible-arrow="true"
<el-dialog :visible="showDetail" @close="showDetail = false" :title="materialFull.rawMaterialName || '--'" width="600px" append-to-body
append-to-body> popper-class="raw-material-info-popover"
<el-descriptions :column="1" border> >
<!-- <el-descriptions-item label="原材料ID">{{ materialFull.rawMaterialId }}</el-descriptions-item> --> <!-- popover 内容：两列布局的描述列表 -->
<el-descriptions :column="2" class="popover-content">
<el-descriptions-item label="原材料名称">{{ materialFull.rawMaterialName || '--' }}</el-descriptions-item> <el-descriptions-item label="原材料名称">{{ materialFull.rawMaterialName || '--' }}</el-descriptions-item>
<el-descriptions-item label="原材料编码">{{ materialFull.rawMaterialCode || '--' }}</el-descriptions-item> <el-descriptions-item label="原材料编码">{{ materialFull.rawMaterialCode || '--' }}</el-descriptions-item>
<el-descriptions-item label="规格">{{ materialFull.specification || '--' }}</el-descriptions-item> <el-descriptions-item label="规格">{{ materialFull.specification || '--' }}</el-descriptions-item>
<el-descriptions-item label="材质"> <el-descriptions-item label="材质">{{ materialFull.material || '--' }}</el-descriptions-item>
{{ materialFull.material || '--' }} <el-descriptions-item label="表面处理">{{ materialFull.surfaceTreatment || '--' }}</el-descriptions-item>
</el-descriptions-item> <el-descriptions-item label="锌层">{{ materialFull.zincLayer || '--' }}</el-descriptions-item>
<el-descriptions-item label="表面处理"> <el-descriptions-item label="厂家">{{ materialFull.manufacturer || '--' }}</el-descriptions-item>
{{ materialFull.surfaceTreatment || '--' }}
</el-descriptions-item>
<!-- 锌层 -->
<el-descriptions-item label="锌层">
{{ materialFull.zincLayer || '--' }}
</el-descriptions-item>
<!-- 厂家 -->
<el-descriptions-item label="厂家">
{{ materialFull.manufacturer || '--' }}
</el-descriptions-item>
</el-descriptions> </el-descriptions>
<!-- <BomInfo :bomId="material.bomId" /> -->
</el-dialog> <!-- 触发元素（原材料名称文本） -->
<span slot="reference" class="material-name">
<slot name="default" :material="materialFull">
{{ materialFull.rawMaterialName || '未知' }}[{{ materialFull.specification || '无规格' }}] - (材质：{{ materialFull.material || '无材质' }})
</slot>
</span>
</el-popover>
</div> </div>
</template> </template>
<script> <script>
import BomInfo from './BomInfo.vue'; import BomInfo from './BomInfo.vue'; // 保留导入（如需使用可解除注释）
export default { export default {
name: 'RawMaterialInfo', name: 'RawMaterialInfo',
@@ -44,19 +41,17 @@ export default {
props: { props: {
material: { material: {
type: Object, type: Object,
// required: true,
default: () => ({}) default: () => ({})
} }
}, },
data() { data() {
return { return {
showDetail: false, // 移除showDetail：hover触发无需弹窗控制变量
// material: {},
}; };
}, },
computed: { computed: {
materialFull() { materialFull() {
// 完整的material, 确保每个字段都有值 // 完整的material，确保每个字段有默认值
if (!this.material) { if (!this.material) {
return {}; return {};
} }
@@ -69,37 +64,13 @@ export default {
surfaceTreatment: this.material.surfaceTreatment || '', surfaceTreatment: this.material.surfaceTreatment || '',
zincLayer: this.material.zincLayer || '', zincLayer: this.material.zincLayer || '',
manufacturer: this.material.manufacturer || '', manufacturer: this.material.manufacturer || '',
} };
} }
}, },
// computed: { methods: {
// ...mapState({ // 移除click事件相关方法：无需点击触发
// materialMap: state => state.category.rawMaterialMap // 假设vuex中为material模块 },
// }), };
// material() {
// // 检查 materialMap 是否已加载
// if (!this.materialMap || Object.keys(this.materialMap).length === 0) {
// return {};
// }
// if (!this.materialId) {
// return {};
// }
// return this.materialMap[this.materialId.toString()] || {};
// },
// loading() {
// return !this.materialMap || Object.keys(this.materialMap).length === 0
// }
// },
// watch: {
// materialId: {
// handler: function (newVal) {
// const res = this.materialMap[newVal.toString()] ? this.materialMap[newVal.toString()] : {};
// this.material = res;
// },
// immediate: true
// }
// }
}
</script> </script>
<style scoped> <style scoped>
@@ -107,5 +78,7 @@ export default {
color: #1890ff; color: #1890ff;
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
/* 优化hover触发区域 */
padding: 2px 4px;
} }
</style> </style>

1
klp-ui/src/views/wms/coil/actflow.vue
View File

@@ -81,6 +81,7 @@
<span v-else-if="scope.row.actionType===4">发货操作已在移动端完成</span> <span v-else-if="scope.row.actionType===4">发货操作已在移动端完成</span>
<span v-else-if="scope.row.actionType===401">入库操作</span> <span v-else-if="scope.row.actionType===401">入库操作</span>
<span v-else-if="scope.row.actionType===402">发货操作</span> <span v-else-if="scope.row.actionType===402">发货操作</span>
<span v-else-if="scope.row.actionType===403">移库操作</span>
<dict-tag v-else :options='dict.type.action_type' :value="scope.row.actionType "></dict-tag> <dict-tag v-else :options='dict.type.action_type' :value="scope.row.actionType "></dict-tag>
</template> </template>
</el-table-column> </el-table-column>

1000
klp-ui/src/views/wms/coil/do/acid.vue
View File

File diff suppressed because it is too large Load Diff

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

@@ -202,11 +202,12 @@ export default {
pendingActions: [], pendingActions: [],
// 表单参数 // 表单参数
form: { form: {
materialType: null, materialType: '原料',
enterCoilNo: null, enterCoilNo: null,
currentCoilNo: null, currentCoilNo: null,
itemId: null, itemId: null,
itemType: null, itemType: 'raw_material',
warehouseId: '1988150044862377986', // 酸连轧原料库
netWeight: null, netWeight: null,
grossWeight: null, grossWeight: null,
remark: null, remark: null,