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

✨ feat: l2过程跟踪

Browse Source
This commit is contained in:
砂糖
2025-10-09 10:34:57 +08:00
parent 2526ed70f6
commit e9e8d10ded
27 changed files with 2261 additions and 998 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
klp-ui/src/api/l2/track.js Normal file
View File

@@ -0,0 +1,95 @@
import axios from 'axios'
export default function createFetch(url) {
const l2Request = axios.create({
baseURL: url,
headers: {
'Content-Type': 'application/json'
},
timeout: 10000
})
l2Request.interceptors.response.use(response => {
return response.data
})
return {
adjustPosition: (data) => l2Request({
method: 'put',
url: '/api/track/position',
data
}),
operateMat: (data) => l2Request({
method: 'put',
url: '/api/track/manual/operate/mat',
data
}),
getBackData: (params) => l2Request({
method: 'get',
url: '/api/track/return/info',
params
}),
getTrackMatPosition: () => l2Request({
method: 'get',
url: '/api/track/coil/position',
})
}
}
/**
* 手动调整钢卷位置
* data.targetPos 目标位置 必须
* data.currentPos 当前位置 必须
*/
export function adjustPosition(data) {
return l2Request({
method: 'put',
url: '/api/track/position',
data
})
}
/**
* 手动操作钢卷
* {
"porIdx": 0, // 必须
"trIdx": 0, // 必须
"planId": "", // 必须
"entryMatId": "", // 必须
"planNo": "", // 必须
"operation": "", // 必须
"returnMatId": "", // 必须
"returnWeight": 0, // 必须
"returnRemark": "", // 必须
"coilLength": 0 // 必须
}
*/
export function operateMat(data) {
return l2Request({
method: 'put',
url: '/api/track/manual/operate/mat',
data
})
}
/**
* 获取回退数据
* params.posIdx 必须
*/
export function getBackData(params) {
return l2Request({
method: 'get',
url: '/api/track/return/info',
params
})
}
/**
* 获取跟踪带钢位置
*/
export function getTrackMatPosition() {
return l2Request({
method: 'get',
url: '/api/track/coil/position',
})
}

451
klp-ui/src/components/KLPUI/KLPList/index.vue
View File

@@ -1,35 +1,103 @@
<template>
<div class="klp-list-container">
<!-- 列表加载状态 -->
<!-- 列表加载状态（Element UI Vue2 支持 v-loading 指令） -->
<div v-loading="loading" class="list-loading-wrapper">
<!-- 列表项渲染 -->
<!-- 列表项渲染（分两行布局） -->
<div
v-for="(item, index) in listData"
:key="item[listKey] || index"
class="klp-list-item"
:class="{ 'active': isSelected(item) }"
@click.stop="handleItemClick(item)"
:class="{ 'active': isSelected(item) }"
@click.stop="handleItemClick(item)"
>
<!-- 列表标题区域 - 文字溢出省略+Tooltip -->
<div class="klp-list-title">
<span class="title-label">{{ titleLabel }}：</span>
<el-tooltip
:content="item[titleField]"
placement="top"
:disabled="!isContentOverflow(item)"
effect="light"
>
<span class="title-value">{{ item[titleField] }}</span>
</el-tooltip>
</div>
<!-- 核心内容区：分两行展示6个信息位 -->
<div class="klp-list-content">
<!-- 第一行：主标题 + 副标题 + 状态（info1~info3） -->
<div class="klp-list-row klp-list-row1" :style="{ gap: `${rowGap}px` }">
<!-- 信息位1：主标题（保留原Tooltip溢出检测） -->
<div class="klp-list-info-item" v-if="showInfoItem('info1', item)">
<slot name="info1" :item="item" :isSelected="isSelected(item)">
<!-- Vue2 作用域插槽后备内容需用 template + slot-scope 包裹 -->
<template slot-scope="{ item, isSelected }">
<span class="info-label" v-if="info1Label">{{ info1Label }}：</span>
<el-tooltip
:content="item[info1Field]"
placement="top"
:disabled="!isContentOverflow(item, 'info1')"
effect="light"
>
<span class="info-value info-value--primary">{{ item[info1Field] }}</span>
</el-tooltip>
</template>
</slot>
</div>
<!-- 右侧操作按钮组 -->
<!-- 信息位2：副标题 -->
<div class="klp-list-info-item" v-if="showInfoItem('info2', item)">
<slot name="info2" :item="item" :isSelected="isSelected(item)">
<template slot-scope="{ item, isSelected }">
<span class="info-label" v-if="info2Label">{{ info2Label }}：</span>
<span class="info-value">{{ item[info2Field] }}</span>
</template>
</slot>
</div>
<!-- 信息位3：状态（常用插槽自定义，如标签） -->
<div class="klp-list-info-item" v-if="showInfoItem('info3', item)">
<slot name="info3" :item="item" :isSelected="isSelected(item)">
<template slot-scope="{ item, isSelected }">
<span class="info-label" v-if="info3Label">{{ info3Label }}：</span>
<span class="info-value">{{ item[info3Field] }}</span>
</template>
</slot>
</div>
</div>
<!-- 第二行：时间 + 数量 + 备注（info4~info6） -->
<div class="klp-list-row klp-list-row2" :style="{ gap: `${rowGap}px`, marginBottom: `${rowMarginBottom}px` }">
<!-- 信息位4：时间 -->
<div class="klp-list-info-item" v-if="showInfoItem('info4', item)">
<slot name="info4" :item="item" :isSelected="isSelected(item)">
<template slot-scope="{ item, isSelected }">
<span class="info-label" v-if="info4Label">{{ info4Label }}：</span>
<span class="info-value">{{ item[info4Field] }}</span>
</template>
</slot>
</div>
<!-- 信息位5：数量/金额 -->
<div class="klp-list-info-item" v-if="showInfoItem('info5', item)">
<slot name="info5" :item="item" :isSelected="isSelected(item)">
<template slot-scope="{ item, isSelected }">
<span class="info-label" v-if="info5Label">{{ info5Label }}：</span>
<span class="info-value">{{ item[info5Field] }}</span>
</template>
</slot>
</div>
<!-- 信息位6：备注 -->
<div class="klp-list-info-item" v-if="showInfoItem('info6', item)">
<slot name="info6" :item="item" :isSelected="isSelected(item)">
<template slot-scope="{ item, isSelected }">
<span class="info-label" v-if="info6Label">{{ info6Label }}：</span>
<span class="info-value">{{ item[info6Field] }}</span>
</template>
</slot>
</div>
</div>
</div>
<!-- 右侧操作按钮组（位置不变） -->
<div class="klp-list-actions">
<slot name="actions" :item="item" :isSelected="isSelected(item)"></slot>
<slot name="actions" :item="item" :isSelected="isSelected(item)">
<template slot-scope="{ item, isSelected }">
<!-- 操作栏后备内容（若父组件未提供则显示空） -->
</template>
</slot>
</div>
</div>
<!-- 空状态提示 -->
<!-- 空状态提示（Vue2 需显式注册 ElEmpty 组件） -->
<div v-if="listData.length === 0 && !loading" class="klp-list-empty">
<el-empty description="暂无数据" />
</div>
@@ -38,37 +106,26 @@
</template>
<script>
// Vue2 需显式引入 Element UI 组件
import { ElTooltip, ElEmpty } from 'element-ui';
export default {
name: "KLPList",
components: {},
// 注册引入的 Element 组件
components: { ElTooltip, ElEmpty },
props: {
// ---------------------- 原有核心Props（保留） ----------------------
/** 列表数据源（必传） */
listData: {
type: Array,
required: true,
default: () => []
},
/** 列表项唯一标识字段（必传，如orderId、id） */
/** 列表项唯一标识字段（必传） */
listKey: {
type: String,
required: true
},
/** 列表标题前置标签（如"订单编号："） */
titleLabel: {
type: String,
required: true,
default: "标题"
},
/** 列表项标题对应的字段名（如orderCode、name） */
titleField: {
type: String,
required: true,
default: "title"
},
/** 列表加载状态 */
loading: {
type: Boolean,
@@ -76,67 +133,128 @@ export default {
default: false
},
/** 标题最大宽度占容器的百分比（0-100），控制文字溢出 */
titleMaxPercent: {
// ---------------------- 新增：6个信息位配置 ----------------------
// 信息位1（主标题，兼容原titleField）
info1Field: {
type: String,
required: false,
default: "title" // 默认对应原titleField
},
info1Label: {
type: String,
required: false,
default: "" // 兼容原titleLabel
},
// 信息位2（副标题）
info2Field: {
type: String,
required: false,
default: ""
},
info2Label: {
type: String,
required: false,
default: ""
},
// 信息位3（状态）
info3Field: {
type: String,
required: false,
default: ""
},
info3Label: {
type: String,
required: false,
default: ""
},
// 信息位4（时间）
info4Field: {
type: String,
required: false,
default: ""
},
info4Label: {
type: String,
required: false,
default: ""
},
// 信息位5（数量/金额）
info5Field: {
type: String,
required: false,
default: ""
},
info5Label: {
type: String,
required: false,
default: ""
},
// 信息位6（备注）
info6Field: {
type: String,
required: false,
default: ""
},
info6Label: {
type: String,
required: false,
default: ""
},
// ---------------------- 新增：样式控制Props ----------------------
/** 每行内部信息位的间距（px） */
rowGap: {
type: Number,
required: false,
default: 80 // 默认占容器80%宽度
default: 16 // 默认间距16px
},
/** 两行之间的垂直间距（px） */
rowMarginBottom: {
type: Number,
required: false,
default: 4 // 默认4px
},
/** 主标题最大宽度占内容区的百分比（控制溢出） */
info1MaxPercent: {
type: Number,
required: false,
default: 60 // 主标题占比下调，给其他信息位留空间
}
},
data() {
return {
// 内部管理选中状态：存储当前选中项的唯一键值（单选中）
selectedKey: null,
// 文字溢出检测临时元素（避免重复创建）
overflowCheckElements: {},
// 容器宽度缓存
containerWidth: 0
selectedKey: null, // 选中状态（不变）
overflowCheckElements: {}, // 溢出检测临时元素（不变）
containerWidth: 0 // 容器宽度缓存（不变）
};
},
methods: {
/**
* 判断当前列表项是否被选中
* @param {Object} item - 列表项数据
* @returns {Boolean} 选中状态
*/
// ---------------------- 原有核心方法（保留+微调） ----------------------
/** 判断列表项是否选中（不变） */
isSelected(item) {
const itemKey = item[this.listKey];
return this.selectedKey === itemKey;
},
/**
* 列表项点击事件：切换选中状态（单选中逻辑）
* @param {Object} item - 点击的列表项数据
*/
/** 列表项点击事件（不变） */
handleItemClick(item) {
const itemKey = item[this.listKey];
// 单选中逻辑：点击已选中项取消选中，点击未选中项切换选中（取消其他项）
// this.selectedKey = this.selectedKey === itemKey ? null : itemKey;
const itemKey = item[this.listKey];
this.selectedKey = itemKey;
// 向父组件触发事件：传递当前选中项（null表示无选中）
const selectedItem = this.selectedKey ? item : null;
this.$emit("item-click", selectedItem, item);
},
/**
* 清空选中状态（支持父组件通过ref调用）
*/
/** 清空选中状态（不变） */
clearSelection() {
this.selectedKey = null;
// 触发清空选中事件
this.$emit("selection-cleared");
},
/**
* 主动设置选中项（支持父组件通过ref调用）
* @param {String/Number} targetKey - 要选中项的唯一键值
*/
/** 主动设置选中项（不变） */
setSelection(targetKey) {
const isExist = this.listData.some(item => item[this.listKey] === targetKey);
if (isExist) {
this.selectedKey = targetKey;
// 触发选中事件
const selectedItem = this.listData.find(item => item[this.listKey] === targetKey);
this.$emit("item-click", selectedItem);
} else {
@@ -145,31 +263,58 @@ export default {
}
},
// ---------------------- 新增：信息位控制方法（适配Vue2插槽） ----------------------
/**
* 判断文字是否溢出（控制Tooltip显示/隐藏）
* 判断信息位是否需要显示（插槽存在 或 字段有值）
* @param {String} infoKey - 信息位标识（info1~info6）
* @param {Object} item - 列表项数据
* @returns {Boolean} 是否显示
*/
showInfoItem(infoKey, item) {
// 前置容错：避免item为undefined导致报错
if (!item) return false;
// Vue2 作用域插槽判断：$scopedSlots 中插槽以函数形式存在
const hasSlot = typeof this.$scopedSlots[infoKey] === 'function';
if (hasSlot) return true;
// 2. 无插槽时，判断字段配置是否存在 + 字段值是否有效
const field = this[`${infoKey}Field`];
// 容错：字段未配置（如没传info1Field）则不显示
if (!field) return false;
// 字段值有效判断（排除 undefined/null/空字符串）
return item[field] !== undefined && item[field] !== null && item[field] !== "";
},
/**
* 信息位1（主标题）溢出检测（适配新字段）
* @param {Object} item - 列表项数据
* @param {String} infoKey - 信息位标识（仅info1需要）
* @returns {Boolean} 是否溢出
*/
isContentOverflow(item) {
isContentOverflow(item, infoKey) {
const itemKey = item[this.listKey];
const content = item[this.titleField] || "";
const field = this[`${infoKey}Field`];
const content = item[field] || "";
// 内容为空时不显示Tooltip
if (!content) return false;
// 内容为空或无字段时不显示Tooltip
if (!content || !field) return false;
// 获取容器宽度并增加存在性检查
const container = this.$el.querySelector('.klp-list-container');
if (!container) return false; // 容器不存在时直接返回
this.containerWidth = container.clientWidth;
// 计算标题内容最大可用宽度（减去标签和边距）
const labelWidth = this.$el.querySelector('.title-label')?.offsetWidth || 60;
const availableWidth = (this.containerWidth * this.titleMaxPercent / 100) - labelWidth - 20;
// 获取内容区宽度（原容器宽度改为内容区宽度）
// 注意：listData.indexOf(item) 可能因重复项导致索引错误，建议确保listData唯一
const itemIndex = this.listData.indexOf(item);
const contentEl = this.$el.querySelector(`.klp-list-item:nth-child(${itemIndex + 1}) .klp-list-content`);
if (!contentEl) return false;
const contentWidth = contentEl.clientWidth;
// 创建临时元素测量文字实际宽度（复用元素避免性能问题）
// 计算信息位1的最大可用宽度（减去标签宽度）
const labelEl = this.$el.querySelector(`.klp-list-item:nth-child(${itemIndex + 1}) .info-label`);
const labelWidth = labelEl ? labelEl.offsetWidth : 40;
const maxWidth = (contentWidth * this.info1MaxPercent) / 100 - labelWidth - 12;
// 复用临时元素检测宽度（不变）
if (!this.overflowCheckElements[itemKey]) {
const tempEl = document.createElement("span");
// 复制title-value的样式（确保测量准确）
tempEl.style.cssText = `
visibility: hidden;
position: absolute;
@@ -183,26 +328,21 @@ export default {
this.overflowCheckElements[itemKey] = tempEl;
}
// 比较文字实际宽度与可用宽度
const tempEl = this.overflowCheckElements[itemKey];
return tempEl.offsetWidth > availableWidth;
return tempEl.offsetWidth > maxWidth;
},
/**
* 监听容器宽度变化
*/
/** 窗口 resize 重新计算（不变） */
handleResize() {
// 宽度变化时重新计算溢出状态
this.$forceUpdate();
}
},
watch: {
/** 列表数据变化时，重置选中状态和溢出检测元素 */
/** 列表数据变化时清理临时元素（不变） */
listData: {
deep: true,
handler() {
this.clearSelection();
// 清理临时测量元素
Object.values(this.overflowCheckElements).forEach(el => {
document.body.removeChild(el);
});
@@ -210,112 +350,139 @@ export default {
}
},
/** 标题最大百分比变化时，重新计算溢出 */
titleMaxPercent() {
/** 主标题占比变化时重新计算溢出（适配新prop） */
info1MaxPercent() {
this.$forceUpdate();
}
},
mounted() {
// 初始化内容区宽度（适配新结构）
this.$nextTick(() => {
const container = this.$el.querySelector('.klp-list-container');
// 增加存在性检查
this.containerWidth = container ? container.clientWidth : 0;
const contentEl = this.$el.querySelector('.klp-list-content');
this.containerWidth = contentEl ? contentEl.clientWidth : 0;
});
// 监听窗口大小变化
window.addEventListener('resize', this.handleResize);
},
// Vue2 销毁钩子：beforeDestroy（Vue3为onBeforeUnmount）
beforeDestroy() {
// 清理临时元素
// 清理临时元素和事件监听（不变）
Object.values(this.overflowCheckElements).forEach(el => {
document.body.removeChild(el);
});
// 移除事件监听
window.removeEventListener('resize', this.handleResize);
}
};
</script>
<style scoped>
/* 列表容器基础样式 */
/* 列表容器（不变） */
.klp-list-container {
max-height: calc(100vh - 220px);
overflow-y: auto;
padding-right: 8px;
margin-top: 10px;
width: 100%; /* 确保容器宽度正确计算 */
width: 100%;
box-sizing: border-box;
}
/* 加载状态容器（避免加载时容器塌陷） */
/* 加载容器（不变） */
.list-loading-wrapper {
min-height: 100px;
}
/* 列表项样式 */
/* 列表项：改为上下两行+右侧操作的布局 */
.klp-list-item {
padding: 6px 8px;
margin-bottom: 6px;
border-bottom: 1px solid #111;
padding: 10px 12px;
/* 增加内边距，适配两行 */
margin-bottom: 8px;
border-bottom: 1px solid #f5f7fa;
/* 弱化底边框，突出选中态 */
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: flex-start;
/* 顶部对齐，避免操作区下移 */
justify-content: space-between;
align-items: center;
box-sizing: border-box;
width: 100%; /* 确保列表项占满容器宽度 */
width: 100%;
background-color: #fafafa;
/* 未选中时浅背景，区分选中态 */
}
/* 列表项选中状态（左侧高亮边框+背景色） */
/* 列表项选中状态（不变） */
.klp-list-item.active {
border-left: 3px solid #2bf;
/* background-color: #fff; */
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
/* 增加轻微阴影，突出选中项 */
}
/* 列表标题区域（占满中间空间，让操作按钮靠右） */
.klp-list-title {
/* 内容区：包裹两行信息位，占满剩余空间 */
.klp-list-content {
flex: 1;
min-width: 0;
/* 关键：允许内容区缩小，避免溢出 */
display: flex;
flex-direction: column;
}
/* 行容器：控制单行信息位布局 */
.klp-list-row {
display: flex;
align-items: center;
flex: 1;
min-width: 0; /* 关键：允许flex项缩小到内容尺寸以下 */
overflow: hidden; /* 确保内容不会超出容器 */
flex-wrap: nowrap;
/* 禁止换行，溢出省略 */
overflow: hidden;
/* 隐藏超出行的内容 */
}
/* 标题前置标签样式 */
.klp-list-title .title-label {
color: #111;
margin-right: 6px;
font-size: 13px;
white-space: nowrap; /* 标签不换行 */
flex-shrink: 0; /* 标签不缩小 */
/* 信息位容器：单个信息的最小单元 */
.klp-list-info-item {
display: flex;
align-items: center;
white-space: nowrap;
/* 禁止信息位内部换行 */
}
/* 标题内容样式（溢出省略） */
.klp-list-title .title-value {
color: #111;
font-weight: 500;
/* 信息位标签：次要文字，颜色偏浅 */
.info-label {
color: #606266;
font-size: 12px;
margin-right: 4px;
white-space: nowrap;
}
/* 信息位值：默认样式 */
.info-value {
color: #303133;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* 溢出显示省略号 */
}
/* 主标题（info1）值：加粗突出 */
.info-value--primary {
font-size: 14px;
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
flex: 1; /* 占据剩余空间 */
min-width: 0; /* 关键：允许内容区域缩小 */
font-weight: 500;
}
/* 操作按钮组（按钮间距控制） */
/* 右侧操作区（不变，增加顶部对齐） */
.klp-list-actions {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0; /* 操作区不缩小 */
margin-left: 8px;
align-items: flex-start;
/* 与内容区顶部对齐 */
gap: 6px;
flex-shrink: 0;
margin-left: 12px;
padding-top: 2px;
/* 微调垂直位置 */
}
/* 空状态样式（居中显示） */
/* 空状态（不变） */
.klp-list-empty {
padding: 40px 0;
text-align: center;
}
</style>
</style>

2
klp-ui/src/layout/components/Navbar.vue
View File

@@ -159,7 +159,7 @@ export default {
height: 100%;
font-size: 18px;
// 金属风格文字色
color: #ddd;
color: #111;
vertical-align: text-bottom;
transition: all 0.2s ease;

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

@@ -1,6 +1,7 @@
import Vue from 'vue'
import Cookies from 'js-cookie'
import VueKonva from 'vue-konva';
import Element from 'element-ui'
import './assets/styles/element-variables.scss'
@@ -67,6 +68,7 @@ Vue.use(vueFlvPlayer)
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
Vue.use(VueKonva);
DictData.install()
/**

394
klp-ui/src/views/finance/components/PayTable.vue Normal file
View File

@@ -0,0 +1,394 @@
<template>
<div>
<el-form v-if="searchable" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="供应商" prop="supplierId">
<VendorSelect v-model="queryParams.supplierId" />
</el-form-item>
<el-form-item label="订单编号" prop="orderCode">
<el-input
v-model="queryParams.orderCode"
placeholder="请输入订单ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="到期日" prop="dueDate">
<el-date-picker clearable
v-model="queryParams.dueDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择到期日">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar v-if="searchable" :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" :data="payableList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="应付ID" align="center" prop="payableId" v-if="false"/>
<el-table-column label="供应商" align="center" prop="supplierName" />
<el-table-column label="订单ID" align="center" prop="orderId" />
<el-table-column label="到期日" align="center" prop="dueDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
<el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
<el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天</el-tag>
</template>
</el-table-column>
<el-table-column label="应付金额" align="center" prop="amount" />
<el-table-column label="已付金额" align="center" prop="paidAmount" />
<el-table-column label="未付金额" align="center" prop="balanceAmount" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-money"
@click="handlePay(scope.row)"
>付款</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改应付款管理（宽松版）对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="供应商ID" prop="supplierId">
<VendorSelect v-model="form.supplierId" />
</el-form-item>
<el-form-item label="订单ID" prop="orderId">
<el-input v-model="form.orderId" placeholder="请输入订单ID" />
</el-form-item>
<el-form-item label="到期日" prop="dueDate">
<el-date-picker clearable
v-model="form.dueDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择到期日">
</el-date-picker>
</el-form-item>
<el-form-item label="应付金额" prop="amount">
<el-input v-model="form.amount" placeholder="请输入应付金额" />
</el-form-item>
<el-form-item label="已付金额" prop="paidAmount">
<el-input v-model="form.paidAmount" disabled placeholder="请输入已付金额" />
</el-form-item>
<!-- <el-form-item label="未付金额" prop="balanceAmount">
<el-input v-model="form.balanceAmount" placeholder="请输入未付金额" />
</el-form-item> -->
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="付款" :visible.sync="payOpen" width="500px" append-to-body>
<el-form ref="payForm" :model="payForm" :rules="rules" label-width="80px">
<el-form-item label="付款金额" prop="amount">
<el-input-number :controls=false controls-position="right" v-model="payForm.amount" :step="1.00" :precision="2" placeholder="请输入付款金额" :min="0" :max="payForm.balanceAmount" style="width: 100%;"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitPayForm">确 定</el-button>
<el-button @click="cancelPay">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listPayable, getPayable, delPayable, addPayable, updatePayable, updatePaidAmount } from "@/api/finance/payable";
import VendorSelect from '@/components/KLPService/VendorSelect/index.vue';
export default {
name: "Payable",
components: {
VendorSelect
},
props: {
searchable: {
type: Boolean,
default: true
},
orderId: {
type: String,
default: undefined
}
},
watch: {
orderId: {
handler(newVal) {
if (newVal) {
this.queryParams.orderId = newVal;
this.getList();
}
},
immediate: true
}
},
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 应付款管理（宽松版）表格数据
payableList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
supplierId: undefined,
orderCode: undefined,
dueDate: undefined,
amount: undefined,
paidAmount: undefined,
balanceAmount: undefined,
status: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
},
// 付款表单参数
payForm: {},
// 是否显示付款弹出层
payOpen: false
};
},
created() {
this.getList();
},
methods: {
/** 查询应付款管理（宽松版）列表 */
getList() {
this.loading = true;
listPayable(this.queryParams).then(response => {
this.payableList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
payableId: undefined,
supplierId: undefined,
orderId: this.orderId,
dueDate: undefined,
amount: undefined,
paidAmount: 0,
balanceAmount: undefined,
status: undefined,
delFlag: undefined,
remark: undefined,
createTime: undefined,
createBy: undefined,
updateTime: undefined,
updateBy: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.payableId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加应付款管理（宽松版）";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.reset();
const payableId = row.payableId || this.ids
getPayable(payableId).then(response => {
this.loading = false;
this.form = response.data;
this.open = true;
this.title = "修改应付款管理（宽松版）";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.payableId != null) {
const {balanceAmount, ...payload} = this.form;
updatePayable(payload).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addPayable(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const payableIds = row.payableId || this.ids;
this.$modal.confirm('是否确认删除应付款管理（宽松版）编号为"' + payableIds + '"的数据项？').then(() => {
this.loading = true;
return delPayable(payableIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('klp/payable/export', {
...this.queryParams
}, `payable_${new Date().getTime()}.xlsx`)
},
// 付款按钮操作
handlePay(row) {
this.payForm = {
payableId: row.payableId,
amount: row.balanceAmount,
balanceAmount: row.balanceAmount
};
this.payOpen = true;
},
// 取消付款按钮操作
cancelPay() {
this.payOpen = false;
this.payForm = {};
},
submitPayForm() {
const payload = {
payableId: this.payForm.payableId,
paidAmount: this.payForm.amount
}
this.buttonLoading = true;
updatePaidAmount(payload).then(response => {
this.$modal.msgSuccess("付款成功");
this.payOpen = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
};
</script>

394
klp-ui/src/views/finance/components/ReceiveTable.vue Normal file
View File

@@ -0,0 +1,394 @@
<template>
<div>
<el-form v-if="searchable" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="客户名称" prop="customerId">
<CustomerSelect v-model="queryParams.customerId" />
</el-form-item>
<el-form-item label="订单ID" prop="orderCode">
<el-input
v-model="queryParams.orderCode"
placeholder="请输入订单ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="到期日" prop="dueDate">
<el-date-picker clearable
v-model="queryParams.dueDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择到期日">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar v-if="searchable" :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" :data="receivableList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="应收ID" align="center" prop="receivableId" v-if="false"/>
<el-table-column label="客户" align="center" prop="customerName" />
<el-table-column label="订单ID" align="center" prop="orderId" />
<el-table-column label="到期日" align="center" prop="dueDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
<el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
<el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天</el-tag>
</template>
</el-table-column>
<el-table-column label="应收金额" align="center" prop="amount" />
<el-table-column label="已收金额" align="center" prop="paidAmount" />
<el-table-column label="未收金额" align="center" prop="balanceAmount" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-money"
@click="handleReceive(scope.row)"
>收款</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改应收款管理（宽松版）对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="客户ID" prop="customerId">
<CustomerSelect v-model="form.customerId" />
</el-form-item>
<el-form-item label="订单ID" prop="orderId">
<el-input v-model="form.orderId" placeholder="请输入订单ID" />
</el-form-item>
<el-form-item label="到期日" prop="dueDate">
<el-date-picker clearable
v-model="form.dueDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择到期日">
</el-date-picker>
</el-form-item>
<el-form-item label="应收金额" prop="amount">
<el-input v-model="form.amount" placeholder="请输入应收金额" />
</el-form-item>
<el-form-item label="已收金额" prop="paidAmount">
<el-input v-model="form.paidAmount" disabled placeholder="请输入已收金额" />
</el-form-item>
<!-- <el-form-item label="未收金额" prop="balanceAmount">
<el-input v-model="form.balanceAmount" placeholder="请输入未收金额" />
</el-form-item> -->
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="收款" :visible.sync="receiveOpen" width="500px" append-to-body>
<el-form ref="receiveForm" :model="receiveForm" :rules="rules" label-width="80px">
<el-form-item label="收款金额" prop="amount">
<el-input-number :controls=false controls-position="right" v-model="receiveForm.amount" :step="1.00" :precision="2" placeholder="请输入收款金额" :min="0" :max="receiveForm.balanceAmount" style="width: 100%;"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitReceiveForm">确 定</el-button>
<el-button @click="cancelReceive">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listReceivable, getReceivable, delReceivable, addReceivable, updateReceivable, updatePaidAmount } from "@/api/finance/receivable";
import CustomerSelect from '@/components/KLPService/CustomerSelect/index.vue';
export default {
name: "Receivable",
components: {
CustomerSelect
},
props: {
searchable: {
type: Boolean,
default: true
},
orderId: {
type: String,
default: undefined
}
},
watch: {
orderId: {
handler(newVal) {
if (newVal) {
this.queryParams.orderId = newVal;
this.getList();
}
},
immediate: true
}
},
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 应收款管理（宽松版）表格数据
receivableList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
customerId: undefined,
orderCode: undefined,
dueDate: undefined,
amount: undefined,
paidAmount: undefined,
balanceAmount: undefined,
status: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
},
// 收款表单参数
receiveForm: {},
// 是否显示收款弹出层
receiveOpen: false
};
},
created() {
this.getList();
},
methods: {
/** 查询应收款管理（宽松版）列表 */
getList() {
this.loading = true;
listReceivable(this.queryParams).then(response => {
this.receivableList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
receivableId: undefined,
customerId: undefined,
orderId: this.orderId,
dueDate: undefined,
amount: undefined,
paidAmount: 0,
balanceAmount: undefined,
status: undefined,
delFlag: undefined,
remark: undefined,
createTime: undefined,
createBy: undefined,
updateTime: undefined,
updateBy: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.receivableId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加应收款管理（宽松版）";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.reset();
const receivableId = row.receivableId || this.ids
getReceivable(receivableId).then(response => {
this.loading = false;
this.form = response.data;
this.open = true;
this.title = "修改应收款管理（宽松版）";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.receivableId != null) {
const {balanceAmount, ...payload} = this.form;
updateReceivable(payload).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addReceivable(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const receivableIds = row.receivableId || this.ids;
this.$modal.confirm('是否确认删除应收款管理（宽松版）编号为"' + receivableIds + '"的数据项？').then(() => {
this.loading = true;
return delReceivable(receivableIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('klp/receivable/export', {
...this.queryParams
}, `receivable_${new Date().getTime()}.xlsx`)
},
// 收款按钮操作
handleReceive(row) {
this.receiveForm = {
receivableId: row.receivableId,
amount: row.balanceAmount,
balanceAmount: row.balanceAmount
};
this.receiveOpen = true;
},
// 取消收款按钮操作
cancelReceive() {
this.receiveOpen = false;
this.receiveForm = {};
},
submitReceiveForm() {
const payload = {
receivableId: this.receiveForm.receivableId,
paidAmount: this.receiveForm.amount
}
this.buttonLoading = true;
updatePaidAmount(payload).then(response => {
this.$modal.msgSuccess("收款成功");
this.receiveOpen = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
};
</script>

124
klp-ui/src/views/finance/order/index.vue
View File

@@ -4,43 +4,40 @@
<el-col :span="6">
<div>
<el-row>
<el-input
v-model="queryParams.orderCode"
placeholder="请输入单据编号"
clearable
@keyup.enter.native="handleQuery"
/>
<el-input v-model="queryParams.orderCode" placeholder="请输入单据编号" clearable
@keyup.enter.native="handleQuery" />
</el-row>
<!-- 使用klp-list组件替换el-tree -->
<klp-list
v-loading="orderListLoading"
:list-data="orderList"
list-key="orderId"
title-label="订单编号"
title-field="orderCode"
:title-max-width="180"
@item-click="handleItemClick"
>
<!-- 操作按钮插槽 -->
<!-- <template #actions="{ item, isSelected }">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click.stop="handleViewDetail(item)"
title="查看详情"
></el-button>
</template> -->
<klp-list :list-data="orderList" list-key="orderId" :loading="loading" @item-click="handleItemClick"
info1-field="orderCode" info1-max-percent="40" info5-field="createTime" info4-field="taxAmount">
<!-- info4 插槽：Vue2 用 slot 指定插槽名，slot-scope 接收作用域变量 -->
<template slot="info4" slot-scope="{ item }">
<span class="info-value info-value--primary">
{{ item.taxAmount }}元（含税）
</span>
</template>
<!-- info1 插槽：同理修改插槽语法 -->
<template slot="info1" slot-scope="{ item }">
<span class="info-value info-value--primary">
{{ item.salesManager }}【{{ item.orderCode }}】
</span>
</template>
<!-- info2 插槽：dict-tag 若为 Vue2 兼容组件，用法不变 -->
<template slot="info2" slot-scope="{ item }">
<dict-tag :options="dict.type.order_status" :value="item.orderStatus" />
</template>
<!-- actions 插槽：el-button 为 Element UI Vue2 组件，用法不变 -->
<template slot="actions" slot-scope="{ item }">
<el-button size="small" type="text" style="color: red" icon="el-icon-delete"
@click.stop="handleDelete(item)"></el-button>
</template>
</klp-list>
<pagination
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
:total="total"
layout="prev, pager, next"
@pagination="getList"
/>
<pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :total="total"
layout="prev, pager, next" @pagination="getList" />
</div>
</el-col>
@@ -72,44 +69,14 @@
<order-detail-list :orderId="currentOrder.orderId" :editable="false" />
</el-tab-pane>
<el-tab-pane label="应收明细" name="receivable">
<KLPTable v-loading="rightLoading" :data="currentOrder.receivables" empty-text="暂无数据">
<el-table-column label="客户" align="center" prop="customerName" />
<el-table-column label="订单ID" align="center" prop="orderId" />
<el-table-column label="到期日" align="center" prop="dueDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
<el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
<el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">
还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天
</el-tag>
</template>
</el-table-column>
<el-table-column label="应收金额" align="center" prop="amount" />
<el-table-column label="已收金额" align="center" prop="paidAmount" />
<el-table-column label="未收金额" align="center" prop="balanceAmount" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column label="备注" align="center" prop="remark" />
</KLPTable>
<div style="margin-top: 10px;">
<ReceiveTable :order-id="currentOrder.orderId" :searchable="false" />
</div>
</el-tab-pane>
<el-tab-pane label="应付明细" name="payable">
<KLPTable v-loading="rightLoading" :data="currentOrder.payables" empty-text="暂无数据">
<el-table-column label="供应商" align="center" prop="supplierName" />
<el-table-column label="订单ID" align="center" prop="orderId" />
<el-table-column label="到期日" align="center" prop="dueDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
<el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
<el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">
还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天
</el-tag>
</template>
</el-table-column>
<el-table-column label="应付金额" align="center" prop="amount" />
<el-table-column label="已付金额" align="center" prop="paidAmount" />
<el-table-column label="未付金额" align="center" prop="balanceAmount" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column label="备注" align="center" prop="remark" />
</KLPTable>
<div style="margin-top: 10px;">
<PayTable :order-id="currentOrder.orderId" :searchable="false" />
</div>
</el-tab-pane>
<el-tab-pane label="凭证管理" name="document">
<KLPTable :data="currentOrder.documents" style="width: 100%" empty-text="暂无数据">
@@ -136,13 +103,18 @@ import { listFinancialDocument } from "@/api/finance/financialDocument";
import OrderDetailList from '@/views/wms/order/panels/detail.vue'
import klpList from "@/components/KLPUI/KLPList/index.vue"; // 引入klp-list组件
import ReceiveTable from '../components/ReceiveTable.vue';
import PayTable from '../components/PayTable.vue';
export default {
name: "Order",
components: {
OrderDetailList,
klpList // 注册klp-list组件
klpList, // 注册klp-list组件
ReceiveTable,
PayTable
},
dicts: ['order_status'],
data() {
return {
activeTab: "orderDetail",
@@ -163,7 +135,7 @@ export default {
},
methods: {
handleQuery() {
this.queryParams.pageNum = 1;
this.queryParams.pageNum = 1;
this.getList();
},
getList() {
@@ -181,12 +153,12 @@ export default {
this.currentOrder = null;
return;
}
if (this.rightLoading) {
this.$message.warning('请等待当前订单加载完成');
return;
}
this.currentOrder = selectedItem;
this.fetchData(selectedItem.orderId);
},
@@ -210,7 +182,7 @@ export default {
listPayable({ orderId, pageSize: 1000 }),
listFinancialDocument({ orderId, pageSize: 1000 })
]);
this.currentOrder = {
...this.currentOrder,
details: orderDetailRes.rows,

363
klp-ui/src/views/finance/pay/index.vue
View File

@@ -1,373 +1,16 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="供应商" prop="supplierId">
<VendorSelect v-model="queryParams.supplierId" />
</el-form-item>
<el-form-item label="订单编号" prop="orderCode">
<el-input
v-model="queryParams.orderCode"
placeholder="请输入订单ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="到期日" prop="dueDate">
<el-date-picker clearable
v-model="queryParams.dueDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择到期日">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" :data="payableList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="应付ID" align="center" prop="payableId" v-if="false"/>
<el-table-column label="供应商" align="center" prop="supplierName" />
<el-table-column label="订单ID" align="center" prop="orderId" />
<el-table-column label="到期日" align="center" prop="dueDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
<el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
<el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天</el-tag>
</template>
</el-table-column>
<el-table-column label="应付金额" align="center" prop="amount" />
<el-table-column label="已付金额" align="center" prop="paidAmount" />
<el-table-column label="未付金额" align="center" prop="balanceAmount" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-money"
@click="handlePay(scope.row)"
>付款</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改应付款管理（宽松版）对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="供应商ID" prop="supplierId">
<VendorSelect v-model="form.supplierId" />
</el-form-item>
<el-form-item label="订单ID" prop="orderId">
<el-input v-model="form.orderId" placeholder="请输入订单ID" />
</el-form-item>
<el-form-item label="到期日" prop="dueDate">
<el-date-picker clearable
v-model="form.dueDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择到期日">
</el-date-picker>
</el-form-item>
<el-form-item label="应付金额" prop="amount">
<el-input v-model="form.amount" placeholder="请输入应付金额" />
</el-form-item>
<el-form-item label="已付金额" prop="paidAmount">
<el-input v-model="form.paidAmount" disabled placeholder="请输入已付金额" />
</el-form-item>
<!-- <el-form-item label="未付金额" prop="balanceAmount">
<el-input v-model="form.balanceAmount" placeholder="请输入未付金额" />
</el-form-item> -->
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="付款" :visible.sync="payOpen" width="500px" append-to-body>
<el-form ref="payForm" :model="payForm" :rules="rules" label-width="80px">
<el-form-item label="付款金额" prop="amount">
<el-input-number :controls=false controls-position="right" v-model="payForm.amount" :step="1.00" :precision="2" placeholder="请输入付款金额" :min="0" :max="payForm.balanceAmount" style="width: 100%;"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitPayForm">确 定</el-button>
<el-button @click="cancelPay">取 消</el-button>
</div>
</el-dialog>
<PayTable />
</div>
</template>
<script>
import { listPayable, getPayable, delPayable, addPayable, updatePayable, updatePaidAmount } from "@/api/finance/payable";
import VendorSelect from '@/components/KLPService/VendorSelect/index.vue';
import PayTable from '../components/PayTable.vue';
export default {
name: "Payable",
components: {
VendorSelect
PayTable
},
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 应付款管理（宽松版）表格数据
payableList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
supplierId: undefined,
orderCode: undefined,
dueDate: undefined,
amount: undefined,
paidAmount: undefined,
balanceAmount: undefined,
status: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
},
// 付款表单参数
payForm: {},
// 是否显示付款弹出层
payOpen: false
};
},
created() {
this.getList();
},
methods: {
/** 查询应付款管理（宽松版）列表 */
getList() {
this.loading = true;
listPayable(this.queryParams).then(response => {
this.payableList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
payableId: undefined,
supplierId: undefined,
orderId: undefined,
dueDate: undefined,
amount: undefined,
paidAmount: 0,
balanceAmount: undefined,
status: undefined,
delFlag: undefined,
remark: undefined,
createTime: undefined,
createBy: undefined,
updateTime: undefined,
updateBy: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.payableId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加应付款管理（宽松版）";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.reset();
const payableId = row.payableId || this.ids
getPayable(payableId).then(response => {
this.loading = false;
this.form = response.data;
this.open = true;
this.title = "修改应付款管理（宽松版）";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.payableId != null) {
const {balanceAmount, ...payload} = this.form;
updatePayable(payload).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addPayable(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const payableIds = row.payableId || this.ids;
this.$modal.confirm('是否确认删除应付款管理（宽松版）编号为"' + payableIds + '"的数据项？').then(() => {
this.loading = true;
return delPayable(payableIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('klp/payable/export', {
...this.queryParams
}, `payable_${new Date().getTime()}.xlsx`)
},
// 付款按钮操作
handlePay(row) {
this.payForm = {
payableId: row.payableId,
amount: row.balanceAmount,
balanceAmount: row.balanceAmount
};
this.payOpen = true;
},
// 取消付款按钮操作
cancelPay() {
this.payOpen = false;
this.payForm = {};
},
submitPayForm() {
const payload = {
payableId: this.payForm.payableId,
paidAmount: this.payForm.amount
}
this.buttonLoading = true;
updatePaidAmount(payload).then(response => {
this.$modal.msgSuccess("付款成功");
this.payOpen = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
};
</script>

363
klp-ui/src/views/finance/receive/index.vue
View File

@@ -1,373 +1,16 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="客户名称" prop="customerId">
<CustomerSelect v-model="queryParams.customerId" />
</el-form-item>
<el-form-item label="订单ID" prop="orderCode">
<el-input
v-model="queryParams.orderCode"
placeholder="请输入订单ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="到期日" prop="dueDate">
<el-date-picker clearable
v-model="queryParams.dueDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择到期日">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" :data="receivableList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="应收ID" align="center" prop="receivableId" v-if="false"/>
<el-table-column label="客户" align="center" prop="customerName" />
<el-table-column label="订单ID" align="center" prop="orderId" />
<el-table-column label="到期日" align="center" prop="dueDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
<el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
<el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天</el-tag>
</template>
</el-table-column>
<el-table-column label="应收金额" align="center" prop="amount" />
<el-table-column label="已收金额" align="center" prop="paidAmount" />
<el-table-column label="未收金额" align="center" prop="balanceAmount" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-money"
@click="handleReceive(scope.row)"
>收款</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改应收款管理（宽松版）对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="客户ID" prop="customerId">
<CustomerSelect v-model="form.customerId" />
</el-form-item>
<el-form-item label="订单ID" prop="orderId">
<el-input v-model="form.orderId" placeholder="请输入订单ID" />
</el-form-item>
<el-form-item label="到期日" prop="dueDate">
<el-date-picker clearable
v-model="form.dueDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择到期日">
</el-date-picker>
</el-form-item>
<el-form-item label="应收金额" prop="amount">
<el-input v-model="form.amount" placeholder="请输入应收金额" />
</el-form-item>
<el-form-item label="已收金额" prop="paidAmount">
<el-input v-model="form.paidAmount" disabled placeholder="请输入已收金额" />
</el-form-item>
<!-- <el-form-item label="未收金额" prop="balanceAmount">
<el-input v-model="form.balanceAmount" placeholder="请输入未收金额" />
</el-form-item> -->
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="收款" :visible.sync="receiveOpen" width="500px" append-to-body>
<el-form ref="receiveForm" :model="receiveForm" :rules="rules" label-width="80px">
<el-form-item label="收款金额" prop="amount">
<el-input-number :controls=false controls-position="right" v-model="receiveForm.amount" :step="1.00" :precision="2" placeholder="请输入收款金额" :min="0" :max="receiveForm.balanceAmount" style="width: 100%;"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitReceiveForm">确 定</el-button>
<el-button @click="cancelReceive">取 消</el-button>
</div>
</el-dialog>
<ReceiveTable />
</div>
</template>
<script>
import { listReceivable, getReceivable, delReceivable, addReceivable, updateReceivable, updatePaidAmount } from "@/api/finance/receivable";
import CustomerSelect from '@/components/KLPService/CustomerSelect/index.vue';
import ReceiveTable from '../components/ReceiveTable.vue';
export default {
name: "Receivable",
components: {
CustomerSelect
},
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 应收款管理（宽松版）表格数据
receivableList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
customerId: undefined,
orderCode: undefined,
dueDate: undefined,
amount: undefined,
paidAmount: undefined,
balanceAmount: undefined,
status: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
},
// 收款表单参数
receiveForm: {},
// 是否显示收款弹出层
receiveOpen: false
};
},
created() {
this.getList();
},
methods: {
/** 查询应收款管理（宽松版）列表 */
getList() {
this.loading = true;
listReceivable(this.queryParams).then(response => {
this.receivableList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
receivableId: undefined,
customerId: undefined,
orderId: undefined,
dueDate: undefined,
amount: undefined,
paidAmount: 0,
balanceAmount: undefined,
status: undefined,
delFlag: undefined,
remark: undefined,
createTime: undefined,
createBy: undefined,
updateTime: undefined,
updateBy: undefined
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.receivableId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加应收款管理（宽松版）";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.reset();
const receivableId = row.receivableId || this.ids
getReceivable(receivableId).then(response => {
this.loading = false;
this.form = response.data;
this.open = true;
this.title = "修改应收款管理（宽松版）";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.receivableId != null) {
const {balanceAmount, ...payload} = this.form;
updateReceivable(payload).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addReceivable(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const receivableIds = row.receivableId || this.ids;
this.$modal.confirm('是否确认删除应收款管理（宽松版）编号为"' + receivableIds + '"的数据项？').then(() => {
this.loading = true;
return delReceivable(receivableIds);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('klp/receivable/export', {
...this.queryParams
}, `receivable_${new Date().getTime()}.xlsx`)
},
// 收款按钮操作
handleReceive(row) {
this.receiveForm = {
receivableId: row.receivableId,
amount: row.balanceAmount,
balanceAmount: row.balanceAmount
};
this.receiveOpen = true;
},
// 取消收款按钮操作
cancelReceive() {
this.receiveOpen = false;
this.receiveForm = {};
},
submitReceiveForm() {
const payload = {
receivableId: this.receiveForm.receivableId,
paidAmount: this.receiveForm.amount
}
this.buttonLoading = true;
updatePaidAmount(payload).then(response => {
this.$modal.msgSuccess("收款成功");
this.receiveOpen = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
ReceiveTable
}
};
</script>

119
klp-ui/src/views/lines/components/knovaStage.vue Normal file
View File

@@ -0,0 +1,119 @@
<template>
<v-stage :config="stageSize">
<v-layer>
<!-- 设备分组：每个分组包含矩形和对应的文字 -->
<v-group
v-for="rect in innerRects"
:key="rect.id"
@click="handleRectClick(rect)"
:style="{ cursor: rect.config.cursor || 'default' }"
>
<!-- 矩形元素：根据选中状态动态设置边框颜色 -->
<v-rect
:config="{
...rect.config,
// 选中时边框为橘色，未选中时使用默认边框颜色
stroke: rect.id === selectedRectId ? '#4874cb' : rect.config.stroke,
// 选中时可以增加边框宽度，增强视觉效果
strokeWidth: rect.id === selectedRectId ? 3 : rect.config.strokeWidth
}"
/>
<!-- 如果存在meta.rollid，则显示钢卷号 -->
<v-text
v-if="rect.meta && rect.meta.matId"
:config="{
x: rect.config.x + rect.config.width / 4,
y: rect.config.y + rect.config.height / 2,
text: '[' + rect.meta.matId + ']',
fill: 'black',
fontSize: 14,
textAlign: 'center',
textBaseline: 'middle'
}"
/>
<!-- 让x轴方向文字居中 -->
<v-text
:config="{
x: rect.config.x + rect.config.width / 2 - rect.textConfig.text.length * 5,
y: rect.config.y,
text: rect.textConfig.text,
fill: rect.textConfig.fill || 'black',
fontSize: rect.textConfig.fontSize || 14,
textAlign: 'center',
textBaseline: 'middle'
}"
/>
</v-group>
<!-- 连接线 -->
<v-line
v-for="line in lines"
:key="line.id"
:config="line.config"
/>
</v-layer>
</v-stage>
</template>
<script>
export default {
name: 'PreciseFlowChart',
props: {
matMapList: {
required: true,
type: Array,
},
rects: {
required: true,
type: Array,
},
lines: {
required: true,
type: Array,
},
},
data() {
return {
// 舞台配置
stageSize: {
width: 1000,
height: 650,
background: 'white'
},
innerRects: [],
// 记录当前选中的矩形ID，初始为null（无选中）
selectedRectId: null
};
},
watch: {
matMapList: {
handler(newVal) {
console.log('matMapList', newVal);
// 根据matMapList中每一项的positionNameEn字段和rects中的id字段进行匹配
this.innerRects = [...this.rects];
newVal.forEach(item => {
const rect = this.innerRects.find(rect => rect.id === item.positionNameEn);
if (rect) {
this.$set(rect, 'meta', item);
}
});
},
deep: true,
immediate: true
}
},
methods: {
// 矩形分组点击事件处理
handleRectClick(rect) {
// 切换选中状态：如果点击的是当前选中项，则取消选中；否则选中当前项
if (this.selectedRectId === rect.id) {
this.selectedRectId = null;
} else {
this.selectedRectId = rect.id;
}
this.$emit('rectClick', rect.meta);
}
}
};
</script>

356
klp-ui/src/views/lines/rects.js Normal file
View File

@@ -0,0 +1,356 @@
export const rects = [
// 左侧：开卷机
{
id: 'POR1',
config: {
x: 40,
y: 110,
width: 200,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '1#开卷机[POR1]' }
},
{
id: 'POR2',
config: {
x: 40,
y: 220,
width: 200,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '2#开卷机[POR2]' }
},
// 中上部：焊机、入口活套
{
id: 'WELDER',
config: {
x: 300,
y: 30,
width: 220,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '焊机[WELDER]' }
},
{
id: 'ENL1',
config: {
x: 300,
y: 110,
width: 220,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '入口活套1[ENL1]' }
},
{
id: 'ENL2',
config: {
x: 300,
y: 160,
width: 220,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '入口活套2[ENL2]' }
},
// 中下部：清洗段
{
id: 'CLEAN',
config: {
x: 300,
y: 240,
width: 220,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '清洗段[CLEAN]' }
},
// 右侧上：退火炉1-4
{
id: 'FUR1',
config: {
x: 600,
y: 70,
width: 220,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '退火炉[FUR1]' }
},
{
id: 'FUR2',
config: {
x: 600,
y: 120,
width: 220,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '退火炉[FUR2]' }
},
{
id: 'FUR3',
config: {
x: 600,
y: 170,
width: 220,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '退火炉[FUR3]' }
},
{
id: 'FUR4',
config: {
x: 600,
y: 220,
width: 220,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '退火炉[FUR4]' }
},
// 右侧中：光整机
{
id: 'TM',
config: {
x: 600,
y: 400,
width: 220,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '光整机[TM]' }
},
// 右侧下：拉矫机
{
id: 'TL',
config: {
x: 600,
y: 480,
width: 220,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '拉矫机[TL]' }
},
// 中下：后处理
{
id: 'COAT',
config: {
x: 300,
y: 360,
width: 220,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '后处理[COAT]' }
},
// 中下：出口活套
{
id: 'CXL1',
config: {
x: 300,
y: 440,
width: 220,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '出口活套[CXL1]' }
},
{
id: 'CXL2',
config: {
x: 300,
y: 490,
width: 220,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '出口活套[CXL2]' }
},
// 左下：卷取机、称重位
{
id: 'TR',
config: {
x: 40,
y: 380,
width: 200,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '卷取机[TR]' }
},
{
id: 'WEIT',
config: {
x: 40,
y: 460,
width: 200,
height: 50,
fill: '#d3d3d3',
stroke: 'black',
strokeWidth: 1,
cursor: 'pointer'
},
textConfig: { text: '称重位[WEIT]' }
}
]
export const lines = [
// 1#开卷机 → 焊机
{
id: 'line-por1-welder',
config: {
points: [
40 + 200, 110 + 25,
40 + 200 + 30, 110 + 25,
40 + 200 + 30, 30 + 25,
300, 30 + 25
],
stroke: '#686868',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round'
}
},
// 2#开卷机 → 焊机
{
id: 'line-por2-welder',
config: {
points: [
40 + 200, 220 + 25,
40 + 200 + 30, 220 + 25,
40 + 200 + 30, 30 + 25,
300, 30 + 25
],
stroke: '#686868',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round'
}
},
// 清洗段 → 退火炉1
{
id: 'line-clean-fur1',
config: {
points: [
300 + 220, 240 + 25,
300 + 220 + 40, 240 + 25,
300 + 220 + 40, 70 + 25,
600, 70 + 25
],
stroke: '#686868',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round'
}
},
// 退火炉4 → 光整机
{
id: 'line-fur4-tm',
config: {
points: [
600 + 220, 220 + 25,
600 + 220 + 40, 220 + 25,
600 + 220 + 40, 400 + 25,
600 + 220, 400 + 25
],
stroke: '#686868',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round'
}
},
// 拉矫机 → 后处理
{
id: 'line-tl-coat',
config: {
points: [
600, 480 + 25,
600 - 40, 480 + 25,
600 - 40, 360 + 25,
600 - 80, 360 + 25
],
stroke: '#686868',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round'
}
},
// 出口活套2 → 卷取机
{
id: 'line-cxl2-tr',
config: {
points: [
300, 490 + 25,
300 - 30, 490 + 25,
300 - 30, 380 + 25,
300 - 60, 380 + 25
],
stroke: '#686868',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round'
}
}
]

466
klp-ui/src/views/lines/zine.vue Normal file
View File

@@ -0,0 +1,466 @@
<template>
<div class="graph-container-box">
<el-row>
<el-col :span="16">
<knova-stage @rectClick="selectCard" :matMapList="matMapList" :rects="rects" :lines="lines"></knova-stage>
</el-col>
<el-col :span="8">
<div style="border: 1px solid #000; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
<!-- 调整工具，选择两个位置，两个下拉选，分别双向绑定 -->
<el-form :model="adjustForm" ref="adjustForm" label-width="80px">
<el-form-item label="当前位置" prop="current">
<el-select v-model="adjustForm.current" placeholder="请选择当前位置">
<el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn" :value="item.positionNameEn"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目标位置" prop="target">
<el-select v-model="adjustForm.target" placeholder="请选择目标位置">
<el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn" :value="item.positionNameEn"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-button type="primary" :disabled="!adjustForm.current || !adjustForm.target" @click="handleConfirmAdjust">确认调整</el-button>
</div>
<div style="border: 1px solid #000; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
<el-row v-if="selectedCard">
<el-col :span="12">
<div class="detail-item">
<span class="detail-label">位置名称：</span>
<span class="detail-value">{{ selectedCard.positionNameCn || '-' }}</span>
</div>
<div class="detail-item">
<span class="detail-label">位置代号：</span>
<span class="detail-value">{{ selectedCard.positionNameEn || '-' }}</span>
</div>
<div class="detail-item">
<span class="detail-label">钢卷号：</span>
<span class="detail-value">{{ selectedCard.matId || '-' }}</span>
</div>
<div class="detail-item">
<span class="detail-label">计划ID：</span>
<span class="detail-value">{{ selectedCard.planId || '-' }}</span>
</div>
<div class="detail-item">
<span class="detail-label">计划号：</span>
<span class="detail-value">{{ selectedCard.planNo || '-' }}</span>
</div>
<div class="detail-item">
<span class="detail-label">开卷机编号：</span>
<span class="detail-value">{{ selectedCard.porIdx || '-' }}</span>
</div>
<div class="detail-item">
<span class="detail-label">卷取机编号：</span>
<span class="detail-value">{{ selectedCard.trIdx || '-' }}</span>
</div>
</el-col>
<el-col :span="12">
<!-- 加载状态 -->
<div class="empty-tip" v-if="isLoadingReturn">加载回退信息中...</div>
<!-- 错误状态 -->
<div class="empty-tip" v-else-if="returnError" style="color: #f56c6c;">
{{ returnError }}
</div>
<!-- 回退信息内容 -->
<div class="detail-list" v-else-if="Object.keys(returnInfo).length > 0">
<div class="detail-item">
<span class="detail-label">回退钢卷号：</span>
<span class="detail-value">{{ returnInfo.entryMatId || '-' }}</span>
</div>
<div class="detail-item">
<span class="detail-label">回退计划ID：</span>
<span class="detail-value">{{ returnInfo.planId || '-' }}</span>
</div>
<div class="detail-item">
<span class="detail-label">回退计划号：</span>
<span class="detail-value">{{ returnInfo.planNo || '-' }}</span>
</div>
<div class="detail-item">
<span class="detail-label">回退类型：</span>
<span class="detail-value">{{ returnInfo.returnType || '-' }}</span>
</div>
<div class="detail-item">
<span class="detail-label">回退重量：</span>
<span class="detail-value">
{{ returnInfo.returnWeight || '-' }}
{{ returnInfo.returnWeight ? 'kg' : '' }}
</span>
</div>
</div>
<!-- 无回退信息 -->
<div class="empty-tip" v-else>无回退信息</div>
</el-col>
</el-row>
<el-row v-else>
<div class="empty-tip">请选择钢卷卡片查看详情</div>
</el-row>
</div>
<div style="border: 1px solid #000; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
<el-row v-if="selectedCard">
<div class="operation-panel">
<div class="panel-content">
<!-- 非调整模式：显示操作按钮 -->
<div class="operation-buttons">
<div class="button-group">
<el-button size="mini" type="primary" @click="handleOperate(selectedCard, 'ONLINE')"
class="btn-block">
钢卷上线
</el-button>
<el-button size="mini" type="warning" @click="handleOperate(selectedCard, 'UNLOAD')"
class="btn-block mt-2">
手动卸卷
</el-button>
<el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'ALL_RETURN')"
class="btn-block mt-2">
整卷回退
</el-button>
<el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'HALF_RETURN')"
class="btn-block mt-2">
半卷回退
</el-button>
<el-button size="mini" type="info" @click="handleOperate(selectedCard, 'BLOCK')"
class="btn-block mt-2">
卸卷并封闭
</el-button>
<!-- <el-button size="mini" type="info" @click="handleOperate(selectedCard, 'THROW_TAIL')" class="btn-block mt-2">
甩尾
</el-button> -->
</div>
</div>
</div>
</div>
</el-row>
<el-row v-else>
<div class="empty-tip">请选择钢卷卡片进行操作</div>
</el-row>
</div>
</el-col>
</el-row>
<el-dialog :visible.sync="operateMatStatus" :title="getOperateTitle" width="50%">
<el-form :model="operateMatForm" :rules="operateRules" ref="operateForm" label-width="120px">
<el-form-item label="开卷机编号" prop="porIdx">
<el-input v-model="operateMatForm.porIdx"></el-input>
</el-form-item>
<el-form-item label="卷取机编号" prop="trIdx">
<el-input v-model="operateMatForm.trIdx"></el-input>
</el-form-item>
<el-form-item label="计划id" prop="planId">
<el-input v-model="operateMatForm.planId" placeholder="请输入计划ID"></el-input>
</el-form-item>
<el-form-item label="钢卷号" prop="entryMatId">
<el-input v-model="operateMatForm.entryMatId" placeholder="请输入钢卷号"></el-input>
</el-form-item>
<!-- <el-form-item label="计划号" prop="planNo">
<el-input v-model="operateMatForm.planNo" placeholder="请输入计划号"></el-input>
</el-form-item> -->
<el-form-item label="操作类型" prop="operation">
<el-select v-model="operateMatForm.operation" disabled>
<el-option label="钢卷上线" value="ONLINE"></el-option>
<el-option label="手动卸卷" value="UNLOAD"></el-option>
<el-option label="整卷回退" value="ALL_RETURN"></el-option>
<el-option label="半卷回退" value="HALF_RETURN"></el-option>
<el-option label="卸卷并封闭" value="BLOCK"></el-option>
<!-- <el-option label="甩尾" value="THROW_TAIL"></el-option> -->
</el-select>
</el-form-item>
<!-- 回退相关字段 -->
<template v-if="['ALL_RETURN', 'HALF_RETURN'].includes(operateMatForm.operation)">
<el-form-item label="回退卷号" prop="returnMatId">
<el-input v-model="operateMatForm.returnMatId" placeholder="请输入回退卷号"></el-input>
</el-form-item>
<el-form-item label="回退重量" prop="returnWeight">
<el-input v-model="operateMatForm.returnWeight" placeholder="请输入回退重量"></el-input>
</el-form-item>
<el-form-item label="回退备注" prop="returnRemark">
<el-input v-model="operateMatForm.returnRemark" rows="3"></el-input>
</el-form-item>
</template>
<!-- 产出长度字段 -->
<template v-if="['PRODUCING', 'PRODUCT'].includes(operateMatForm.operation)">
<el-form-item label="产出钢卷长度" prop="coilLength">
<el-input v-model="operateMatForm.coilLength" type="number" placeholder="请输入产出钢卷长度"></el-input>
</el-form-item>
</template>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="operateMatStatus = false">取消</el-button>
<el-button type="primary" @click="submitOperateForm">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import createFetch from '@/api/l2/track'
import { getConfigKey } from '@/api/system/config'
import KnovaStage from './components/knovaStage.vue'
import { rects, lines } from './rects'
export default {
components: {
KnovaStage
},
data() {
return {
fetchApi: undefined,
rects,
lines,
matMapList: [],
selectedCard: null, // 非调整模式选中的单个卡片
adjustForm: {
current: null,
target: null
}, // 调整模式选中的位置：[当前, 目标]，双向绑定
adjustMode: false, // 是否为调整模式
deviceMap: {},
operateMatForm: {
porIdx: null,
trIdx: null,
planId: '',
entryMatId: '',
// planNo: '',
operation: '',
returnMatId: '',
returnWeight: null,
returnRemark: '',
coilLength: null
},
operateRules: {
planId: [{ required: true, message: '请输入计划id', trigger: 'blur' }],
entryMatId: [{ required: true, message: '请输入钢卷号', trigger: 'blur' }],
operation: [{ required: true, message: '请选择操作类型', trigger: 'change' }],
returnMatId: [
{
required: true,
message: '请输入回退卷号',
trigger: 'blur',
validator: (rule, val, cb) => {
if (['ALL_RETURN', 'HALF_RETURN'].includes(this.operateMatForm.operation) && !val) {
cb(new Error('请输入回退卷号'))
} else cb()
}
}
],
returnWeight: [
{
required: true,
message: '请输入回退重量',
trigger: 'blur',
validator: (rule, val, cb) => {
if (['ALL_RETURN', 'HALF_RETURN'].includes(this.operateMatForm.operation) && (val === null || val === '')) {
cb(new Error('请输入回退重量'))
} else cb()
}
}
]
},
operateMatStatus: false, // 操作对话框显示状态
returnInfo: {}, // 存储回退接口返回的数据
isLoadingReturn: false, // 回退信息加载状态
returnError: '' // 回退信息获取失败的提示
}
},
computed: {
// 操作对话框标题
getOperateTitle() {
const titleMap = {
'ONLINE': '钢卷上线',
'UNLOAD': '手动卸卷',
'ALL_RETURN': '整卷回退',
'HALF_RETURN': '半卷回退',
'BLOCK': '卸卷并封闭',
'THROW_TAIL': '甩尾'
}
return titleMap[this.operateMatForm.operation] || '钢卷操作'
}
},
methods: {
// 获取钢卷数据
fetchData() {
this.fetchApi.getTrackMatPosition().then(res => {
this.matMapList = res.data.matMapList || []
// this.deviceMap = res.data.matMapList || {}
}).catch(err => {
console.error('获取钢卷数据失败：', err)
this.$message.error('获取数据失败，请重试')
})
},
/**
* 获取回退信息
* @param {Number} posIdx - 位置索引（接口必填query参数）
*/
fetchReturnData(posIdx) {
// 1. 校验posIdx
if (!posIdx && posIdx !== 0) {
this.returnInfo = {};
this.returnError = '缺少位置索引（posIdx），无法获取回退信息';
return;
}
// 2. 加载状态初始化
this.isLoadingReturn = true;
this.returnError = '';
// 3. 调用回退接口（posIdx作为query参数传递）
this.fetchApi.getBackData({ posIdx })
.then(res => {
this.isLoadingReturn = false;
// 接口成功且有数据
if (res.code === 200 && res.data) {
this.returnInfo = res.data;
} else {
this.returnInfo = {};
this.returnError = res.msg || '获取回退信息失败';
}
})
.catch(err => {
this.isLoadingReturn = false;
this.returnInfo = {};
this.returnError = '获取回退信息出错，请重试';
console.error('回退信息接口异常：', err);
});
},
// 选择卡片（区分调整/非调整模式）
selectCard(item) {
this.selectedCard = this.selectedCard === item ? null : item
// 选中卡片时查询回退信息，取消选中时清空
if (this.selectedCard) {
this.fetchReturnData(this.selectedCard.posIdx);
this.adjustForm.current = this.selectedCard.positionNameEn
} else {
this.returnInfo = {};
this.returnError = '';
this.adjustForm.current = null
}
},
// 确认调整位置
handleConfirmAdjust() {
const { current, target } = this.adjustForm
if (!current || !target) {
this.$message.warning('请选择当前位置和目标位置')
return
}
const params = {
currentPos: current,
targetPos: target,
}
this.$confirm(`确定将 ${current} 的钢卷调整到 ${target}？`, '确认调整', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.fetchApi.adjustPosition(params).then(() => {
this.$message.success('调整成功')
this.exitAdjustMode()
this.fetchData()
}).catch(err => {
console.error('调整失败：', err)
this.$message.error('调整失败，请重试')
})
}).catch(() => {
this.$message.info('已取消调整')
})
},
// 打开操作对话框
handleOperate(row, operation) {
this.$refs.operateForm?.resetFields()
this.operateMatForm = {
porIdx: row.posIdx || null,
trIdx: row.posIdx || null,
planId: row.planId || '',
entryMatId: row.matId || '',
planNo: row.planNo || '',
operation: operation,
returnMatId: '',
returnWeight: null,
returnRemark: '',
coilLength: null
}
this.operateMatStatus = true
},
// 提交操作表单
submitOperateForm() {
this.$refs.operateForm.validate(valid => {
if (valid) {
this.fetchApi.operateMat(this.operateMatForm).then(() => {
this.$message.success('操作成功')
this.operateMatStatus = false
this.fetchData()
}).catch(err => {
console.error('操作失败：', err)
this.$message.error('操作失败，请重试')
})
} else {
this.$message.warning('请完善表单信息')
}
})
}
},
mounted() {
getConfigKey('line.zine.baseURL').then(res => {
this.fetchApi = createFetch(res.msg)
this.fetchData()
})
}
}
</script>
<style scoped lang="scss">
.graph-container-box {
width: 100%;
box-sizing: border-box;
height: calc(100vh - 86px);
padding: 20px;
// background-color: #c0c0c0;
overflow: hidden;
}
.graph-container {
width: 100%;
height: 100%;
position: relative;
img {
width: 1881px;
height: 608px;
}
// 图形元素基础样式
.graph-list>div {
position: absolute;
}
// 文字容器样式
.text-wrapper {
position: relative;
height: 100%;
}
// 文字基础样式（可被配置项覆盖）
.text-wrapper span {
position: absolute;
color: #333;
/* 默认文字颜色 */
font-size: 14px;
/* 默认文字大小 */
}
}
</style>

18
klp-ui/src/views/wms/order/panels/detail.vue
View File

@@ -16,20 +16,20 @@
</el-descriptions-item>
</el-descriptions> -->
<el-row :gutter="10" class="mb8" v-if="editable">
<el-col :span="1.5">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5" v-if="editable">
<el-button type="primary" plain icon="el-icon-plus" size="mini" :disabled="!canEdit"
@click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-col :span="1.5" v-if="editable">
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single || !canEdit"
@click="handleUpdate">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-col :span="1.5" v-if="editable">
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple || !canEdit"
@click="handleDelete">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-col :span="1.5" v-if="editable">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
</el-col>
@@ -64,7 +64,7 @@
</ProductInfo>
</template>
</el-table-column>
<el-table-column label="BOM" align="center">
<el-table-column label="SKU" align="center">
<template slot-scope="scope">
<BomInfoMini item-type="product" :item-id="scope.row.productId" />
</template>
@@ -78,7 +78,7 @@
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" :disabled="!canEdit"
@click="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-document" @click="handleSpec(scope.row)">产品规范</el-button>
<!-- <el-button size="mini" type="text" icon="el-icon-document" @click="handleSpec(scope.row)">产品规范</el-button> -->
<el-button size="mini" type="text" icon="el-icon-delete" :disabled="!canEdit"
@click="handleDelete(scope.row)">删除</el-button>
</template>
@@ -120,7 +120,7 @@
</div>
</el-dialog>
<el-dialog title="产品规范" :visible.sync="specDialogVisible" width="700px" append-to-body>
<!-- <el-dialog title="产品规范" :visible.sync="specDialogVisible" width="700px" append-to-body>
<ProductSpec v-if="form.groupId" :groupId="form.groupId" :readonly="!canEdit" />
<div v-else-if="canEdit">
<el-select placeholder="请选择产品规范" @change="handleChangeSpec" style="width: 100%;">
@@ -133,7 +133,7 @@
<div v-else>
暂无产品规范
</div>
</el-dialog>
</el-dialog> -->
</div>
</template>

72
klp-ui/src/views/wms/order/panels/orderPage.vue
View File

@@ -9,8 +9,7 @@
class="mb-4">
<el-row :gutter="10">
<el-col :span="16">
<el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable
@change="handleQuery" />
<el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable @change="handleQuery" />
</el-col>
<el-col :span="8">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
@@ -20,23 +19,33 @@
</el-form>
<!-- klp-list组件 -->
<klp-list
:list-data="orderList"
:model-value="selectedIds"
title-field="orderCode"
list-key="orderId"
title-label="订单编号"
:loading="loading"
@item-click="handleRowClick"
>
<!-- 自定义操作按钮 -->
<template #actions="{ item }">
<!-- 预订单确认按钮 -->
<klp-list :list-data="orderList" list-key="orderId" :loading="loading" @item-click="handleRowClick"
info1-field="orderCode" info1-max-percent="40" info5-field="createTime" info4-field="taxAmount">
<!-- info4 插槽：Vue2 用 slot 指定插槽名，slot-scope 接收作用域变量 -->
<template slot="info4" slot-scope="{ item }">
<span class="info-value info-value--primary">
{{ item.taxAmount }}元（含税）
</span>
</template>
<!-- info1 插槽：同理修改插槽语法 -->
<template slot="info1" slot-scope="{ item }">
<span class="info-value info-value--primary">
{{ item.salesManager }}【{{ item.orderCode }}】
</span>
</template>
<!-- info2 插槽：dict-tag 若为 Vue2 兼容组件，用法不变 -->
<template slot="info2" slot-scope="{ item }">
<dict-tag :options="dict.type.order_status" :value="item.orderStatus" />
</template>
<!-- actions 插槽：el-button 为 Element UI Vue2 组件，用法不变 -->
<template slot="actions" slot-scope="{ item }">
<el-button size="mini" plain title="预订单确认" type="success" icon="el-icon-check" v-if="isPre"
@click.stop="handleStartProduction(item)"></el-button>
<!-- 删除按钮 -->
<el-button size="mini" type="text" style="color: red" icon="el-icon-delete" @click.stop="handleDelete(item)"></el-button>
<el-button size="small" type="text" style="color: red" icon="el-icon-delete"
@click.stop="handleDelete(item)"></el-button>
</template>
</klp-list>
@@ -66,36 +75,37 @@
@click.stop="copyOrderId(form.orderId)"></el-button>
</el-input>
</el-form-item>
<el-form-item label="订单编号" prop="orderCode">
<el-input style="width: 60%;" v-model="form.orderCode" placeholder="无" disabled />
</el-form-item>
<el-form-item label="客户名称" prop="customerId">
<customer-select style="width: 60%;" v-model="form.customerId" />
</el-form-item>
<el-form-item label="销售经理" prop="salesManager">
<el-input style="width: 60%;" v-model="form.salesManager" placeholder="无" />
</el-form-item>
<el-form-item label="含税金额" prop="taxAmount">
<el-input-number style="width: 60%;" :controls="false" v-model="form.taxAmount" placeholder="0.00" precision="2"
:min="0" />
<el-input-number style="width: 60%;" :controls="false" v-model="form.taxAmount" placeholder="0.00"
precision="2" :min="0" />
</el-form-item>
<el-form-item label="无税金额" prop="noTaxAmount">
<el-input-number style="width: 60%;" :controls="false" v-model="form.noTaxAmount" placeholder="0.00" precision="2"
:min="0" />
<el-input-number style="width: 60%;" :controls="false" v-model="form.noTaxAmount" placeholder="0.00"
precision="2" :min="0" />
</el-form-item>
<el-form-item label="订单状态" prop="orderStatus" v-if="!isPre">
<el-select style="width: 60%;" v-model="form.orderStatus" @change="handleOrderStatusChange" size="mini">
<el-select style="width: 60%;" v-model="form.orderStatus" @change="handleOrderStatusChange"
size="mini">
<el-option v-for="item in dict.type.order_status" :key="item.value" :label="item.label"
:value="parseInt(item.value)" />
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input style="width: 60%;" v-model="form.remark" placeholder="无" type="textarea" rows="4" />
</el-form-item>
@@ -141,8 +151,8 @@
</el-col>
<el-col :span="12">
<el-form-item label="含税金额" prop="taxAmount">
<el-input-number :controls="false" style="width: 100%;" v-model="form.taxAmount" placeholder="请输入含税金额" precision="2"
:min="0" />
<el-input-number :controls="false" style="width: 100%;" v-model="form.taxAmount" placeholder="请输入含税金额"
precision="2" :min="0" />
</el-form-item>
</el-col>
<el-col :span="12">

6
klp-ui/src/views/wms/product/index.vue
View File

@@ -125,7 +125,7 @@
<dict-tag :options="dict.type.common_swicth" :value="scope.row.isEnabled"/>
</template>
</el-table-column>
<el-table-column label="BOM" align="center">
<el-table-column label="SKU" align="center">
<template slot-scope="scope">
<BomInfoMini :bomId="scope.row.bomId" />
</template>
@@ -155,7 +155,7 @@
type="text"
icon="el-icon-data-analysis"
@click="handleBom(scope.row)"
>BOM</el-button>
>SKU</el-button>
</template>
</el-table-column>
</KLPTable>
@@ -256,7 +256,7 @@
</div>
</el-dialog>
<el-dialog title="BOM" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
<el-dialog title="SKU" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
<BomPanel :id="bomId" type="product" @addBom="handleAddBom" :itemId="itemId" />
</el-dialog>
</div>

6
klp-ui/src/views/wms/product/semi.vue
View File

@@ -128,7 +128,7 @@
<dict-tag :options="dict.type.common_swicth" :value="scope.row.isEnabled"/>
</template>
</el-table-column> -->
<el-table-column label="BOM" align="center">
<el-table-column label="SKU" align="center">
<template slot-scope="scope">
<BomInfoMini :bomId="scope.row.bomId" />
</template>
@@ -158,7 +158,7 @@
type="text"
icon="el-icon-data-analysis"
@click="handleBom(scope.row)"
>BOM</el-button>
>SKU</el-button>
</template>
</el-table-column>
</KLPTable>
@@ -259,7 +259,7 @@
</div>
</el-dialog>
<el-dialog title="BOM" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
<el-dialog title="SKU" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
<BomPanel :id="bomId" type="product" @addBom="handleAddBom" :itemId="itemId" />
</el-dialog>
</div>

2
klp-ui/src/views/wms/purchasePlan/list.vue
View File

@@ -59,7 +59,7 @@
</RawMaterialInfo>
</template>
</el-table-column>
<el-table-column label="BOM" align="center">
<el-table-column label="SKU" align="center">
<template slot-scope="scope">
<BomInfoMini item-type="raw_material" :item-id="scope.row.rawMaterialId" />
</template>

2
klp-ui/src/views/wms/purchasePlan/panels/CreatePurchasePanel.vue
View File

@@ -32,7 +32,7 @@
<RawMaterialSelect v-model="scope.row.rawMaterialId" placeholder="请选择原材料" />
</template>
</el-table-column>
<el-table-column label="BOM" align="center">
<el-table-column label="SKU" align="center">
<template #default="scope">
<BomInfoMini item-type="raw_material" :item-id="scope.row.rawMaterialId" />
</template>

2
klp-ui/src/views/wms/purchasePlan/panels/detail.vue
View File

@@ -65,7 +65,7 @@
</RawMaterialInfo>
</template>
</el-table-column>
<el-table-column label="BOM" align="center">
<el-table-column label="SKU" align="center">
<template slot-scope="scope">
<BomInfoMini item-type="raw_material" :item-id="scope.row.rawMaterialId" />
</template>

2
klp-ui/src/views/wms/purchasePlan/panels/stockin.vue
View File

@@ -64,7 +64,7 @@
style="width: 100%"
>
<el-table-column label="原材料" align="center" prop="rawMaterialName" />
<el-table-column label="BOM" align="center">
<el-table-column label="SKU" align="center">
<template slot-scope="scope">
<BomInfoMini item-type="raw_material" :item-id="scope.row.rawMaterialId" />
</template>

4
klp-ui/src/views/wms/purchasePlan/panels/transfer.vue
View File

@@ -26,7 +26,7 @@
<RawMaterialInfo :materialId="scope.row.rawMaterialId" />
</template>
</el-table-column>
<el-table-column label="BOM" align="center">
<el-table-column label="SKU" align="center">
<template #default="scope">
<BomInfoMini item-type="raw_material" :item-id="scope.row.rawMaterialId" />
</template>
@@ -70,7 +70,7 @@
<RawMaterialInfo :materialId="scope.row.rawMaterialId" />
</template>
</el-table-column>
<el-table-column label="BOM" align="center">
<el-table-column label="SKU" align="center">
<template #default="scope">
<BomInfoMini item-type="raw_material" :item-id="scope.row.rawMaterialId" />
</template>

6
klp-ui/src/views/wms/rawMaterial/index.vue
View File

@@ -131,7 +131,7 @@
<dict-tag :options="dict.type.common_swicth" :value="scope.row.isEnabled"/>
</template>
</el-table-column> -->
<el-table-column label="BOM" align="center">
<el-table-column label="SKU" align="center">
<template slot-scope="scope">
<BomInfoMini :bomId="scope.row.bomId" />
</template>
@@ -140,7 +140,7 @@
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<!-- <el-button size="mini" type="text" icon="el-icon-info" @click="showParamDetail(scope.row)">参数详情</el-button> -->
<el-button size="mini" type="text" icon="el-icon-plus" @click="handleBom(scope.row)">BOM</el-button>
<el-button size="mini" type="text" icon="el-icon-plus" @click="handleBom(scope.row)">SKU</el-button>
<el-button
size="mini"
type="text"
@@ -290,7 +290,7 @@
</el-descriptions>
</el-dialog>
<el-dialog title="BOM" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
<el-dialog title="SKU" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
<BomPanel :id="bomId" type="raw_material" @addBom="handleAddBom" :itemId="itemId" />
</el-dialog>
</div>

2
klp-ui/src/views/wms/stock/index.vue
View File

@@ -47,7 +47,7 @@
</RawMaterialInfo>
</template>
</el-table-column>
<el-table-column label="BOM">
<el-table-column label="SKU">
<template slot-scope="scope">
<BomInfoMini :itemType="scope.row.itemType" :itemId="scope.row.itemId" />
</template>

2
klp-ui/src/views/wms/stockIo/panels/detail.vue
View File

@@ -124,7 +124,7 @@
<span v-else>{{ scope.row.itemId }}</span>
</template>
</el-table-column>
<el-table-column label="BOM" align="center">
<el-table-column label="SKU" align="center">
<template slot-scope="scope">
<BomInfoMini :item-type="scope.row.itemType" :item-id="scope.row.itemId" />
</template>

2
klp-ui/src/views/wms/stockIo/panels/returnCreate.vue
View File

@@ -39,7 +39,7 @@
<span v-else>{{ scope.row.itemId }}</span>
</template>
</el-table-column>
<el-table-column label="BOM" align="center">
<el-table-column label="SKU" align="center">
<template slot-scope="scope">
<BomInfoMini :item-type="scope.row.itemType" :item-id="scope.row.itemId" />
</template>

2
klp-ui/src/views/wms/work/schedulePlan/panes/target.vue
View File

@@ -15,7 +15,7 @@
</ProductInfo>
</template>
</el-table-column>
<el-table-column label="BOM" align="center">
<el-table-column label="SKU" align="center">
<template slot-scope="scope">
<BomInfoMini item-type="product" :item-id="scope.row.productId" />
</template>