Merge remote-tracking branch 'origin/master'
This commit is contained in:
44
gear-ui3/src/api/finance/journal.js
Normal file
44
gear-ui3/src/api/finance/journal.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询资金日记账列表
|
||||
export function listJournal(query) {
|
||||
return request({
|
||||
url: '/oa/journal/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询资金日记账详细
|
||||
export function getJournal(journalId) {
|
||||
return request({
|
||||
url: '/oa/journal/' + journalId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增资金日记账
|
||||
export function addJournal(data) {
|
||||
return request({
|
||||
url: '/oa/journal',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改资金日记账
|
||||
export function updateJournal(data) {
|
||||
return request({
|
||||
url: '/oa/journal',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除资金日记账
|
||||
export function delJournal(journalId) {
|
||||
return request({
|
||||
url: '/oa/journal/' + journalId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
53
gear-ui3/src/api/finance/payable.js
Normal file
53
gear-ui3/src/api/finance/payable.js
Normal file
@@ -0,0 +1,53 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询应付款管理（宽松版）列表
|
||||
export function listPayable(query) {
|
||||
return request({
|
||||
url: '/oa/payable/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询应付款管理（宽松版）详细
|
||||
export function getPayable(payableId) {
|
||||
return request({
|
||||
url: '/oa/payable/' + payableId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增应付款管理（宽松版）
|
||||
export function addPayable(data) {
|
||||
return request({
|
||||
url: '/oa/payable',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改应付款管理（宽松版）
|
||||
export function updatePayable(data) {
|
||||
return request({
|
||||
url: '/oa/payable',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除应付款管理（宽松版）
|
||||
export function delPayable(payableId) {
|
||||
return request({
|
||||
url: '/oa/payable/' + payableId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 付款
|
||||
export function updatePaidAmount(data) {
|
||||
return request({
|
||||
url: '/oa/payable/updatePaidAmount',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
53
gear-ui3/src/api/finance/receivable.js
Normal file
53
gear-ui3/src/api/finance/receivable.js
Normal file
@@ -0,0 +1,53 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询应收款管理（宽松版）列表
|
||||
export function listReceivable(query) {
|
||||
return request({
|
||||
url: '/oa/receivable/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询应收款管理（宽松版）详细
|
||||
export function getReceivable(receivableId) {
|
||||
return request({
|
||||
url: '/oa/receivable/' + receivableId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增应收款管理（宽松版）
|
||||
export function addReceivable(data) {
|
||||
return request({
|
||||
url: '/oa/receivable',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改应收款管理（宽松版）
|
||||
export function updateReceivable(data) {
|
||||
return request({
|
||||
url: '/oa/receivable',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除应收款管理（宽松版）
|
||||
export function delReceivable(receivableId) {
|
||||
return request({
|
||||
url: '/oa/receivable/' + receivableId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 收款
|
||||
export function updatePaidAmount(data) {
|
||||
return request({
|
||||
url: '/oa/receivable/updatePaidAmount',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
@@ -3,7 +3,7 @@ import request from '@/utils/request'
|
||||
// 查询BOM 头，关联产品或原材料列表
|
||||
export function listBom(query) {
|
||||
return request({
|
||||
url: '/klp/bom/list',
|
||||
url: '/oa/bom/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
@@ -12,7 +12,7 @@ export function listBom(query) {
|
||||
// 查询BOM 头，关联产品或原材料详细
|
||||
export function getBom(bomId) {
|
||||
return request({
|
||||
url: '/klp/bom/' + bomId,
|
||||
url: '/oa/bom/' + bomId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
@@ -20,7 +20,7 @@ export function getBom(bomId) {
|
||||
// 新增BOM 头，关联产品或原材料
|
||||
export function addBom(data) {
|
||||
return request({
|
||||
url: '/klp/bom',
|
||||
url: '/oa/bom',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
@@ -29,7 +29,7 @@ export function addBom(data) {
|
||||
// 修改BOM 头，关联产品或原材料
|
||||
export function updateBom(data) {
|
||||
return request({
|
||||
url: '/klp/bom',
|
||||
url: '/oa/bom',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
@@ -38,7 +38,7 @@ export function updateBom(data) {
|
||||
// 删除BOM 头，关联产品或原材料
|
||||
export function delBom(bomId) {
|
||||
return request({
|
||||
url: '/klp/bom/' + bomId,
|
||||
url: '/oa/bom/' + bomId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import request from '@/utils/request'
|
||||
// 查询BOM 明细，存放属性–值列表
|
||||
export function listBomItem(query) {
|
||||
return request({
|
||||
url: '/wms/bomItem/list',
|
||||
url: '/oa/bomItem/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
@@ -12,7 +12,7 @@ export function listBomItem(query) {
|
||||
// 查询BOM 明细，存放属性–值详细
|
||||
export function getBomItem(itemId) {
|
||||
return request({
|
||||
url: '/wms/bomItem/' + itemId,
|
||||
url: '/oa/bomItem/' + itemId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
@@ -20,7 +20,7 @@ export function getBomItem(itemId) {
|
||||
// 新增BOM 明细，存放属性–值
|
||||
export function addBomItem(data) {
|
||||
return request({
|
||||
url: '/wms/bomItem',
|
||||
url: '/oa/bomItem',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
@@ -29,7 +29,7 @@ export function addBomItem(data) {
|
||||
// 修改BOM 明细，存放属性–值
|
||||
export function updateBomItem(data) {
|
||||
return request({
|
||||
url: '/wms/bomItem',
|
||||
url: '/oa/bomItem',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
@@ -38,7 +38,7 @@ export function updateBomItem(data) {
|
||||
// 删除BOM 明细，存放属性–值
|
||||
export function delBomItem(itemId) {
|
||||
return request({
|
||||
url: '/wms/bomItem/' + itemId,
|
||||
url: '/oa/bomItem/' + itemId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import request from '@/utils/request'
|
||||
// 查询产品列表
|
||||
export function listProduct(query) {
|
||||
return request({
|
||||
url: '/wms/product/list',
|
||||
url: '/oa/product/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
@@ -12,7 +12,7 @@ export function listProduct(query) {
|
||||
// 查询产品详细
|
||||
export function getProduct(productId) {
|
||||
return request({
|
||||
url: '/wms/product/' + productId,
|
||||
url: '/oa/product/' + productId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
@@ -20,7 +20,7 @@ export function getProduct(productId) {
|
||||
// 新增产品
|
||||
export function addProduct(data) {
|
||||
return request({
|
||||
url: '/wms/product',
|
||||
url: '/oa/product',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
@@ -29,7 +29,7 @@ export function addProduct(data) {
|
||||
// 修改产品
|
||||
export function updateProduct(data) {
|
||||
return request({
|
||||
url: '/wms/product',
|
||||
url: '/oa/product',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
@@ -38,7 +38,7 @@ export function updateProduct(data) {
|
||||
// 删除产品
|
||||
export function delProduct(productId) {
|
||||
return request({
|
||||
url: '/wms/product/' + productId,
|
||||
url: '/oa/product/' + productId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
60
gear-ui3/src/api/wms/order.js
Normal file
60
gear-ui3/src/api/wms/order.js
Normal file
@@ -0,0 +1,60 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询订单主列表
|
||||
export function listOrder(query) {
|
||||
return request({
|
||||
url: '/oa/order/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询订单主详细
|
||||
export function getOrder(orderId) {
|
||||
return request({
|
||||
url: '/oa/order/' + orderId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增订单主
|
||||
export function addOrder(data) {
|
||||
return request({
|
||||
url: '/oa/order',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改订单主
|
||||
export function updateOrder(data) {
|
||||
return request({
|
||||
url: '/oa/order',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除订单主
|
||||
export function delOrder(orderId) {
|
||||
return request({
|
||||
url: '/oa/order/' + orderId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// dashboard
|
||||
export function getDashboardData() {
|
||||
return request({
|
||||
url: '/oa/product/dashboard/overview',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function listByStatus(params) {
|
||||
return request({
|
||||
url: '/oa/order/listByStatus',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
44
gear-ui3/src/api/wms/orderDetail.js
Normal file
44
gear-ui3/src/api/wms/orderDetail.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询订单明细列表
|
||||
export function listOrderDetail(query) {
|
||||
return request({
|
||||
url: '/oa/orderDetail/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询订单明细详细
|
||||
export function getOrderDetail(detailId) {
|
||||
return request({
|
||||
url: '/oa/orderDetail/' + detailId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增订单明细
|
||||
export function addOrderDetail(data) {
|
||||
return request({
|
||||
url: '/oa/orderDetail',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改订单明细
|
||||
export function updateOrderDetail(data) {
|
||||
return request({
|
||||
url: '/oa/orderDetail',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除订单明细
|
||||
export function delOrderDetail(detailId) {
|
||||
return request({
|
||||
url: '/oa/orderDetail/' + detailId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
48
gear-ui3/src/components/CustomerSelect/index.vue
Normal file
48
gear-ui3/src/components/CustomerSelect/index.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<el-select filterable v-model="_customerId" remote :remote-method="remoteSearchCustomer" :loading="customerLoading" placeholder="请选择客户">
|
||||
<el-option v-for="item in customerList" :key="item.supplierId" :label="item.name" :value="item.supplierId" />
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listSupplier } from '@/api/oa/supplier';
|
||||
|
||||
export default {
|
||||
name: 'CustomerSelect',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_customerId: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('input', value);
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
customerList: [],
|
||||
customerLoading: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.remoteSearchCustomer('');
|
||||
},
|
||||
methods: {
|
||||
remoteSearchCustomer(query) {
|
||||
this.customerLoading = true;
|
||||
listSupplier({ name: query, pageNum: 1, pageSize: 10 }).then(response => {
|
||||
this.customerList = response.rows;
|
||||
}).finally(() => {
|
||||
this.customerLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
321
gear-ui3/src/components/GearList/index.vue
Normal file
321
gear-ui3/src/components/GearList/index.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<div class="klp-list-container">
|
||||
<!-- 列表加载状态 -->
|
||||
<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)"
|
||||
>
|
||||
<!-- 列表标题区域 - 文字溢出省略+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>
|
||||
|
||||
<!-- 右侧操作按钮组 -->
|
||||
<div class="klp-list-actions">
|
||||
<slot name="actions" :item="item" :isSelected="isSelected(item)"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态提示 -->
|
||||
<div v-if="listData.length === 0 && !loading" class="klp-list-empty">
|
||||
<el-empty description="暂无数据" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "KLPList",
|
||||
components: {},
|
||||
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,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
|
||||
/** 标题最大宽度占容器的百分比（0-100），控制文字溢出 */
|
||||
titleMaxPercent: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 80 // 默认占容器80%宽度
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 内部管理选中状态：存储当前选中项的唯一键值（单选中）
|
||||
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;
|
||||
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 {
|
||||
this.selectedKey = null;
|
||||
console.warn(`列表中不存在key为${targetKey}的项`);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断文字是否溢出（控制Tooltip显示/隐藏）
|
||||
* @param {Object} item - 列表项数据
|
||||
* @returns {Boolean} 是否溢出
|
||||
*/
|
||||
isContentOverflow(item) {
|
||||
const itemKey = item[this.listKey];
|
||||
const content = item[this.titleField] || "";
|
||||
|
||||
// 内容为空时不显示Tooltip
|
||||
if (!content) 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;
|
||||
|
||||
// 创建临时元素测量文字实际宽度（复用元素避免性能问题）
|
||||
if (!this.overflowCheckElements[itemKey]) {
|
||||
const tempEl = document.createElement("span");
|
||||
// 复制title-value的样式（确保测量准确）
|
||||
tempEl.style.cssText = `
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
`;
|
||||
tempEl.textContent = content;
|
||||
document.body.appendChild(tempEl);
|
||||
this.overflowCheckElements[itemKey] = tempEl;
|
||||
}
|
||||
|
||||
// 比较文字实际宽度与可用宽度
|
||||
const tempEl = this.overflowCheckElements[itemKey];
|
||||
return tempEl.offsetWidth > availableWidth;
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听容器宽度变化
|
||||
*/
|
||||
handleResize() {
|
||||
// 宽度变化时重新计算溢出状态
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/** 列表数据变化时，重置选中状态和溢出检测元素 */
|
||||
listData: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.clearSelection();
|
||||
// 清理临时测量元素
|
||||
Object.values(this.overflowCheckElements).forEach(el => {
|
||||
document.body.removeChild(el);
|
||||
});
|
||||
this.overflowCheckElements = {};
|
||||
}
|
||||
},
|
||||
|
||||
/** 标题最大百分比变化时，重新计算溢出 */
|
||||
titleMaxPercent() {
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const container = this.$el.querySelector('.klp-list-container');
|
||||
// 增加存在性检查
|
||||
this.containerWidth = container ? container.clientWidth : 0;
|
||||
});
|
||||
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
},
|
||||
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%; /* 确保容器宽度正确计算 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 加载状态容器（避免加载时容器塌陷） */
|
||||
.list-loading-wrapper {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
/* 列表项样式 */
|
||||
.klp-list-item {
|
||||
padding: 6px 8px;
|
||||
margin-bottom: 6px;
|
||||
border-bottom: 1px solid #111;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%; /* 确保列表项占满容器宽度 */
|
||||
}
|
||||
|
||||
/* 列表项选中状态（左侧高亮边框+背景色） */
|
||||
.klp-list-item.active {
|
||||
border-left: 3px solid #2bf;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
/* 列表标题区域（占满中间空间，让操作按钮靠右） */
|
||||
.klp-list-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0; /* 关键：允许flex项缩小到内容尺寸以下 */
|
||||
overflow: hidden; /* 确保内容不会超出容器 */
|
||||
}
|
||||
|
||||
/* 标题前置标签样式 */
|
||||
.klp-list-title .title-label {
|
||||
color: #ddd;
|
||||
margin-right: 6px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap; /* 标签不换行 */
|
||||
flex-shrink: 0; /* 标签不缩小 */
|
||||
}
|
||||
|
||||
/* 标题内容样式（溢出省略） */
|
||||
.klp-list-title .title-value {
|
||||
color: #ddd;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
white-space: nowrap; /* 禁止换行 */
|
||||
overflow: hidden; /* 超出部分隐藏 */
|
||||
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||||
flex: 1; /* 占据剩余空间 */
|
||||
min-width: 0; /* 关键：允许内容区域缩小 */
|
||||
}
|
||||
|
||||
/* 操作按钮组（按钮间距控制） */
|
||||
.klp-list-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0; /* 操作区不缩小 */
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* 空状态样式（居中显示） */
|
||||
.klp-list-empty {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
23
gear-ui3/src/components/GearTable/ColumnRender.vue
Normal file
23
gear-ui3/src/components/GearTable/ColumnRender.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'ColumnRender',
|
||||
functional: true,
|
||||
props: {
|
||||
column: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
render: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
render(h, { props }) {
|
||||
return props.render(h, props.data);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
179
gear-ui3/src/components/GearTable/TableActionToolbar.vue
Normal file
179
gear-ui3/src/components/GearTable/TableActionToolbar.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<el-col :span="12" class="table-action-toolbar">
|
||||
<el-button v-if="tools.includes('fullScreen')" size="mini" icon="el-icon-full-screen" circle
|
||||
@click="handleFullScreen"></el-button>
|
||||
<el-button v-if="tools.includes('refresh')" size="mini" icon="el-icon-refresh" circle
|
||||
@click="handleRefresh"></el-button>
|
||||
<el-button v-if="tools.includes('export')" size="mini" icon="el-icon-download" circle
|
||||
@click="handleExport"></el-button>
|
||||
<el-button v-if="tools.includes('print')" size="mini" icon="el-icon-printer" circle
|
||||
@click="handlePrint"></el-button>
|
||||
|
||||
<!-- 设置按钮和弹出框 -->
|
||||
<el-dropdown v-if="tools.includes('setting')" trigger="click" :hide-on-click="false" style="margin-left: 10px;">
|
||||
<el-tooltip class="item" effect="dark" content="显隐列" placement="top">
|
||||
<el-button size="mini" circle icon="el-icon-menu" />
|
||||
</el-tooltip>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="column in columns" :key="column.prop">
|
||||
<el-checkbox v-model="column.show">{{ column.label }}</el-checkbox>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import XLSX from 'xlsx';
|
||||
import { saveAs } from 'file-saver';
|
||||
|
||||
export default {
|
||||
name: 'TableActionToolbar',
|
||||
props: {
|
||||
// 控制显示哪些工具按钮
|
||||
tools: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
// 表格整体ref，用于获取DOM
|
||||
tableRef: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
// 表格数据，用于导出
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 表格列定义，用于导出和设置
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 导出文件名
|
||||
exportFileName: {
|
||||
type: String,
|
||||
default: '表格数据'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_columns: {
|
||||
get() {
|
||||
console.log(this.columns);
|
||||
return this.columns.filter(col => col.show);
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('columnChange', value);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 全屏处理
|
||||
handleFullScreen() {
|
||||
const tableEl = this.tableRef?.$el;
|
||||
if (!tableEl) {
|
||||
this.$emit('fullScreen');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
tableEl.requestFullscreen().catch(err => {
|
||||
this.$message.error(`全屏请求失败: ${err.message}`);
|
||||
});
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 刷新处理
|
||||
handleRefresh() {
|
||||
this.$emit('refresh');
|
||||
},
|
||||
|
||||
// 导出Excel处理
|
||||
handleExport() {
|
||||
if (this.tableData.length === 0) {
|
||||
this.$message.warning('没有数据可导出');
|
||||
return;
|
||||
}
|
||||
|
||||
// 准备导出数据 - 只包含列定义中指定的字段
|
||||
const exportData = this.tableData.map(row => {
|
||||
const formattedRow = {};
|
||||
this.columns.forEach(col => {
|
||||
if (col.prop && !col.hidden) {
|
||||
// 使用列的label作为表头，prop对应的数据作为值
|
||||
formattedRow[col.label || col.prop] = row[col.prop];
|
||||
}
|
||||
});
|
||||
return formattedRow;
|
||||
});
|
||||
|
||||
// 创建工作簿和工作表
|
||||
const worksheet = XLSX.utils.json_to_sheet(exportData);
|
||||
const workbook = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
|
||||
|
||||
// 生成Excel文件并下载
|
||||
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
|
||||
this.saveExcelFile(excelBuffer, this.exportFileName);
|
||||
},
|
||||
|
||||
// 保存Excel文件
|
||||
saveExcelFile(buffer, fileName) {
|
||||
const blob = new Blob([buffer], { type: 'application/octet-stream' });
|
||||
saveAs(blob, `${fileName}_${new Date().toLocaleDateString()}.xlsx`);
|
||||
},
|
||||
|
||||
// 打印处理
|
||||
handlePrint() {
|
||||
this.$emit('print');
|
||||
},
|
||||
|
||||
// 列显示状态变化处理
|
||||
handleColumnChange(checked) {
|
||||
// 找出所有列的显示状态变化
|
||||
const columnChanges = this.visibleColumns.map(col => ({
|
||||
prop: col.prop,
|
||||
hidden: !checked.includes(col.prop)
|
||||
}));
|
||||
|
||||
// 触发事件通知父组件更新列显示状态
|
||||
this.$emit('columnChange', columnChanges);
|
||||
|
||||
// 刷新表格布局
|
||||
if (this.tableRef && this.tableRef.doLayout) {
|
||||
this.tableRef.doLayout();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-action-toolbar {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* 按钮间距 */
|
||||
::v-deep .el-button {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.column-setting {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
263
gear-ui3/src/components/GearTable/index.vue
Normal file
263
gear-ui3/src/components/GearTable/index.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<div class="my-table-container">
|
||||
<!-- 扩展层：加载动画 -->
|
||||
<div v-if="loading" class="table-loading">
|
||||
<el-loading-spinner></el-loading-spinner>
|
||||
<p class="loading-text">{{ loadingText || "加载中..." }}</p>
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<!-- 自定义操作按钮，左对齐 -->
|
||||
<el-col :span="12">
|
||||
<slot name='actionRow'>
|
||||
<!-- 分页 -->
|
||||
<span style="color: #ccc;"></span>
|
||||
</slot>
|
||||
</el-col>
|
||||
|
||||
<!-- 通用操作工具栏 -->
|
||||
<TableActionToolbar
|
||||
:tools="actionTool"
|
||||
:table-ref="getTableInstance()"
|
||||
:table-data="tableData"
|
||||
:columns="columns"
|
||||
:export-file-name="exportFileName"
|
||||
@fullScreen="handleFullScreen"
|
||||
@refresh="handleRefresh"
|
||||
@export="handleExport"
|
||||
@print="handlePrint"
|
||||
@columnChange="updateColumnsVisibility"
|
||||
/>
|
||||
</el-row>
|
||||
|
||||
<!-- 原生 Table 核心 -->
|
||||
<el-table
|
||||
:ref="tableRef"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
:class="['my-table', customClass]"
|
||||
:data="tableData"
|
||||
>
|
||||
<!-- 透传列定义插槽 -->
|
||||
<template
|
||||
v-for="(column, index) in $attrs.columns || []"
|
||||
v-slot:[`header-${column.prop}`]="scope"
|
||||
>
|
||||
<slot :name="`header-${column.prop}`" v-bind="scope"></slot>
|
||||
</template>
|
||||
<template
|
||||
v-for="(column, index) in $attrs.columns || []"
|
||||
v-slot:[column.prop]="scope"
|
||||
>
|
||||
<slot :name="column.prop" v-bind="scope"></slot>
|
||||
</template>
|
||||
|
||||
<!-- 透传原生内置插槽 -->
|
||||
<template v-slot:empty="scope">
|
||||
<slot name="empty" v-bind="scope"></slot>
|
||||
</template>
|
||||
<template v-slot:append="scope">
|
||||
<slot name="append" v-bind="scope"></slot>
|
||||
</template>
|
||||
|
||||
<!-- 透传自定义列插槽 -->
|
||||
<slot v-bind:tableRef="tableRef"></slot>
|
||||
|
||||
<el-table-column
|
||||
v-if="selectionColumn"
|
||||
type="selection"
|
||||
width="55"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-if="indexColumn"
|
||||
type="index"
|
||||
width="55"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-for="(column, index) in _columns"
|
||||
v-bind="column"
|
||||
:width="column.width"
|
||||
:prop="column.prop"
|
||||
:align="column.align"
|
||||
:label="column.label"
|
||||
:min-width="column.minWidth"
|
||||
:fixed="column.fixed"
|
||||
:show-overflow-tooltip="column.showOverflowTooltip"
|
||||
:sortable="column.sortable"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<ColumnRender v-if="column.render" :column="column" :data="scope.row" :render="column.render"/>
|
||||
<Eclipse v-else-if="column.eclipse" :text="scope.row[column.prop]"></Eclipse>
|
||||
<span v-else>{{ scope.row[column.prop] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页插槽 -->
|
||||
<slot name="pagination"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColumnRender from './ColumnRender.vue';
|
||||
import Eclipse from './renderer/eclipse.vue';
|
||||
import TableActionToolbar from './TableActionToolbar.vue';
|
||||
|
||||
export default {
|
||||
name: "KLPTable",
|
||||
components: {
|
||||
ColumnRender,
|
||||
Eclipse,
|
||||
TableActionToolbar
|
||||
},
|
||||
props: {
|
||||
// 基础扩展属性
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: "加载中..."
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 表格数据
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 列定义
|
||||
customColumns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 选择列
|
||||
selectionColumn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 索引列
|
||||
indexColumn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 操作工具
|
||||
actionTool: {
|
||||
type: Array,
|
||||
default: () => ['fullScreen', 'export', 'setting']
|
||||
},
|
||||
// 导出文件名
|
||||
exportFileName: {
|
||||
type: String,
|
||||
default: '表格数据'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableRef: "myTableRef",
|
||||
columns: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
_columns() {
|
||||
return this.columns.filter(col => col.show);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
customColumns: {
|
||||
handler(newVal) {
|
||||
console.log(newVal, this.customColumns, '自定义列');
|
||||
this.columns = newVal.map(col => ({...col, show: true}));
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取表格实例
|
||||
getTableInstance() {
|
||||
return this.$refs[this.tableRef];
|
||||
},
|
||||
// 透传原生方法
|
||||
clearSelection() {
|
||||
const table = this.getTableInstance();
|
||||
if (table && table.clearSelection) {
|
||||
table.clearSelection();
|
||||
}
|
||||
},
|
||||
toggleRowSelection(row, selected) {
|
||||
const table = this.getTableInstance();
|
||||
if (table && table.toggleRowSelection) {
|
||||
table.toggleRowSelection(row, selected);
|
||||
}
|
||||
},
|
||||
// 操作处理方法（可被覆盖或扩展）
|
||||
handleFullScreen() {
|
||||
this.$emit('fullScreen');
|
||||
},
|
||||
handleRefresh() {
|
||||
this.$emit('refresh');
|
||||
},
|
||||
handleExport() {
|
||||
this.$emit('export');
|
||||
},
|
||||
handlePrint() {
|
||||
this.$emit('print');
|
||||
},
|
||||
// handleSetting() {
|
||||
// this.$emit('setting');
|
||||
// },
|
||||
updateColumnsVisibility(changes) {
|
||||
// 更新列的hidden属性
|
||||
changes.forEach(change => {
|
||||
const column = this.columns.find(col => col.prop === change.prop);
|
||||
if (column) {
|
||||
column.show = !column.show;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log("KLPTable 初始化完成，原生实例：", this.getTableInstance());
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my-table-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
margin-top: 12px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.my-table {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
34
gear-ui3/src/components/GearTable/renderer/eclipse.vue
Normal file
34
gear-ui3/src/components/GearTable/renderer/eclipse.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="eclipse-container">
|
||||
<el-tooltip :content="text" placement="top" :disabled="text.length < 10">
|
||||
<span class="eclipse">{{ text }}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Eclipse',
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.eclipse-container {
|
||||
position: relative; /* 为tooltip提供定位参考 */
|
||||
display: inline-block; /* 确保容器只占内容宽度 */
|
||||
}
|
||||
|
||||
.eclipse {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block; /* 确保元素有明确的尺寸 */
|
||||
max-width: 100%; /* 限制最大宽度，确保溢出效果生效 */
|
||||
}
|
||||
</style>
|
||||
254
gear-ui3/src/components/ProductSelect/BomPanel/BomItem.vue
Normal file
254
gear-ui3/src/components/ProductSelect/BomPanel/BomItem.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<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-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="bomItemList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="属性名称" align="center" prop="attrKey" />
|
||||
<el-table-column label="属性值" align="center" prop="attrValue" />
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改BOM 明细，存放属性–值对话框 -->
|
||||
<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="属性名称" prop="attrKey">
|
||||
<el-input v-model="form.attrKey" placeholder="请输入属性名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="属性值" prop="attrValue">
|
||||
<el-input v-model="form.attrValue" 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listBomItem, getBomItem, delBomItem, addBomItem, updateBomItem } from "@/api/oa/bomItem";
|
||||
|
||||
export default {
|
||||
name: "BomItem",
|
||||
props: {
|
||||
bomId: [String, Number],
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// BOM 明细，存放属性–值表格数据
|
||||
bomItemList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
bomId: this.bomId,
|
||||
attrKey: undefined,
|
||||
attrValue: undefined,
|
||||
isEnabled: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {
|
||||
bomId: this.bomId,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询BOM 明细，存放属性–值列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listBomItem(this.queryParams).then(response => {
|
||||
this.bomItemList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
itemId: undefined,
|
||||
bomId: this.bomId,
|
||||
attrKey: undefined,
|
||||
attrValue: undefined,
|
||||
remark: 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.itemId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加BOM 明细，存放属性–值";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const itemId = row.itemId || this.ids
|
||||
getBomItem(itemId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改BOM 明细，存放属性–值";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.itemId != null) {
|
||||
updateBomItem(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addBomItem(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const itemIds = row.itemId || this.ids;
|
||||
this.$modal.confirm('是否确认删除BOM 明细，存放属性–值编号为"' + itemIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delBomItem(itemIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
this.$store.dispatch('category/getBomMap');
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('wms/bomItem/export', {
|
||||
...this.queryParams
|
||||
}, `bomItem_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
236
gear-ui3/src/components/ProductSelect/BomPanel/index.vue
Normal file
236
gear-ui3/src/components/ProductSelect/BomPanel/index.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="bom-container">
|
||||
<!-- 当没有传入id时显示创建按钮 -->
|
||||
<div v-if="!id" class="create-bom">
|
||||
<el-button type="primary" :loading="createLoading" :disabled="createLoading" @click="handleCreate"
|
||||
class="create-button">
|
||||
<template v-if="!createLoading">
|
||||
<i class="el-icon-plus"></i> 创建BOM
|
||||
</template>
|
||||
<template v-else>
|
||||
创建中...
|
||||
</template>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 当传入id时显示数据区域 -->
|
||||
<div v-else class="bom-details">
|
||||
<div v-if="loading" class="loading-indicator">
|
||||
加载中...
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-message">
|
||||
加载失败: {{ error }}
|
||||
<button @click="fetchData" class="retry-button">重试</button>
|
||||
</div>
|
||||
|
||||
<div v-if="data && !loading">
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="BOM名称">
|
||||
<el-input v-model="info.bomName" @blur="handleUpdateBom" />
|
||||
</el-form-item>
|
||||
<el-form-item label="BOM编码">
|
||||
<el-input v-model="info.bomCode" @blur="handleUpdateBom" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<BomItem :bomId="id" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addBom, updateBom, getBom } from '@/api/oa/bom';
|
||||
import { listBomItem } from '@/api/oa/bomItem';
|
||||
import { updateProduct } from '@/api/oa/product';
|
||||
|
||||
import BomItem from './BomItem.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: [String, Number], // 支持字符串或数字类型的ID
|
||||
itemId: [String, Number],
|
||||
type: String // 可选类型参数
|
||||
},
|
||||
components: {
|
||||
BomItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
error: null,
|
||||
data: null,
|
||||
info: {},
|
||||
createLoading: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true, // 组件创建时立即执行
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
console.log('侦听到变化')
|
||||
this.fetchBomDetails();
|
||||
} else {
|
||||
// 没有ID时重置数据
|
||||
this.data = null;
|
||||
this.error = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchBomDetails() {
|
||||
try {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
// 实际项目中替换为真实API调用
|
||||
const response = await listBomItem({
|
||||
bomId: this.id
|
||||
})
|
||||
this.data = response.rows;
|
||||
|
||||
const response2 = await getBom(this.id)
|
||||
this.info = response2.data;
|
||||
} catch (err) {
|
||||
this.error = err.message || '请求失败，请重试';
|
||||
console.error('获取BOM详情失败:', err);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async handleCreate() {
|
||||
// 防止重复点击
|
||||
if (this.createLoading) return;
|
||||
|
||||
try {
|
||||
this.createLoading = true;
|
||||
// 添加一个semi类型
|
||||
const bomName = (this.type == 'product' ? '产品BOM' : (this.type == 'raw_material' ? '原材料BOM' : '半成品BOM')) + new Date().getTime();
|
||||
const bomCode = (this.type == 'product' ? 'P' : (this.type == 'raw_material' ? 'R' : 'S')) + new Date().getTime();
|
||||
const bomResponse = await addBom({
|
||||
bomName,
|
||||
bomCode
|
||||
});
|
||||
|
||||
this.$message.success('创建BOM成功');
|
||||
const bomData = bomResponse.data;
|
||||
|
||||
// 根据类型更新产品/原材料
|
||||
|
||||
await updateProduct({
|
||||
productId: this.itemId,
|
||||
bomId: bomData.bomId
|
||||
});
|
||||
this.$store.dispatch('category/getBomMap');
|
||||
|
||||
// 触发事件
|
||||
this.$emit('addBom', bomData);
|
||||
} catch (error) {
|
||||
console.error('创建失败:', error);
|
||||
this.$message.error(`创建失败: ${error.message || '未知错误'}`);
|
||||
} finally {
|
||||
this.createLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
handleUpdateBom() {
|
||||
this.$message.warning('正在更新BOM...');
|
||||
updateBom({
|
||||
bomId: this.id,
|
||||
bomName: this.info.bomName,
|
||||
bomCode: this.info.bomCode
|
||||
}).then(_ => {
|
||||
this.$message.success('更新BOM成功');
|
||||
this.$store.dispatch('category/getBomMap');
|
||||
})
|
||||
},
|
||||
|
||||
fetchData() {
|
||||
// 重试获取数据
|
||||
if (this.id) this.fetchBomDetails();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.create-bom {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.create-button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.create-button:hover {
|
||||
background-color: #388E3C;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
border-top-color: #3498db;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
padding: 20px;
|
||||
background-color: #ffebee;
|
||||
color: #d32f2f;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
padding: 8px 16px;
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.bom-info {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
border-left: 4px solid #2196F3;
|
||||
}
|
||||
|
||||
.bom-info p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
196
gear-ui3/src/components/ProductSelect/index.vue
Normal file
196
gear-ui3/src/components/ProductSelect/index.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<span>
|
||||
<el-select v-model="selected" :placeholder="placeholder" :disabled="disabled" filterable clearable
|
||||
@change="onChange" :value-key="'productId'">
|
||||
<template #empty>
|
||||
<el-button v-if="canAdd" @click="add" icon="el-icon-plus">未搜索到产品，点击添加</el-button>
|
||||
<div v-else style="padding: 10px;">未搜索到产品</div>
|
||||
</template>
|
||||
<el-option v-for="item in productOptions" :key="item.productId"
|
||||
:label="`${item.productName}（${item.productCode}）`" :value="item.productId">
|
||||
<div class="option-label">
|
||||
<span class="product-name">{{ item.productName }}</span>
|
||||
<span class="product-code">{{ item.productCode }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-dialog v-if="canAdd" :visible.sync="addDialogVisible" title="添加产品" width="700px" append-to-body>
|
||||
<el-steps align-center :active="activeStep" finish-status="success">
|
||||
<!-- 新增产品的步骤 -->
|
||||
<el-step title="创建产品"></el-step>
|
||||
<!-- 创建BOM的步骤 -->
|
||||
<el-step title="填写BOM信息"></el-step>
|
||||
</el-steps>
|
||||
|
||||
<el-form ref="form" v-if="activeStep === 0" :model="addForm" :rules="rules" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品编号" prop="productCode">
|
||||
<el-input v-model="addForm.productCode" placeholder="请输入产品编号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="产品名称" prop="productName">
|
||||
<el-input v-model="addForm.productName" placeholder="请输入产品名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="负责人" prop="owner">
|
||||
<el-input v-model="addForm.owner" :multiple="false" placeholder="请填写负责人" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="计量单位" prop="unit">
|
||||
<el-input v-model="addForm.unit" placeholder="请输入计量单位" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div v-if="activeStep === 0" slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">创建产品</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
|
||||
<BomPanel v-if="activeStep === 1" :id="bomId" :itemId="itemId" :type="addForm.type" @addBom="handleBom" />
|
||||
</el-dialog>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listProduct, addProduct } from '@/api/oa/product';
|
||||
import BomPanel from './BomPanel/index.vue';
|
||||
|
||||
export default {
|
||||
name: 'ProductSelect',
|
||||
props: {
|
||||
value: [String, null],
|
||||
disabled: Boolean,
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择产品'
|
||||
},
|
||||
canAdd: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
},
|
||||
components: {
|
||||
BomPanel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
productOptions: [],
|
||||
selected: this.value,
|
||||
addForm: {
|
||||
productCode: undefined,
|
||||
productName: undefined,
|
||||
owner: undefined,
|
||||
unit: undefined,
|
||||
type: 'product'
|
||||
},
|
||||
addDialogVisible: false,
|
||||
rules: {
|
||||
productCode: [
|
||||
{ required: true, message: "产品编号不能为空", trigger: "blur" }
|
||||
],
|
||||
productName: [
|
||||
{ required: true, message: "产品名称不能为空", trigger: "blur" }
|
||||
],
|
||||
owner: [
|
||||
{ required: true, message: "负责人不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
buttonLoading: false,
|
||||
itemId: undefined,
|
||||
activeStep: 0,
|
||||
bomId: undefined,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.selected = val;
|
||||
},
|
||||
selected(val) {
|
||||
this.$emit('input', val);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getProductOptions();
|
||||
},
|
||||
methods: {
|
||||
getProductOptions() {
|
||||
listProduct({ pageNum: 1, pageSize: 1000, type: 'product' }).then(res => {
|
||||
this.productOptions = res.rows || [];
|
||||
});
|
||||
},
|
||||
onChange(val) {
|
||||
// 通过val找到item
|
||||
const product = this.productOptions.find(p => p.productId === val);
|
||||
this.$emit('change', product);
|
||||
},
|
||||
add() {
|
||||
this.addDialogVisible = true;
|
||||
this.addForm = {
|
||||
productCode: undefined,
|
||||
productName: undefined,
|
||||
owner: undefined,
|
||||
unit: undefined,
|
||||
type: 'product'
|
||||
};
|
||||
this.bomId = undefined;
|
||||
this.itemId = undefined;
|
||||
},
|
||||
handleBom(bom) {
|
||||
this.bomId = bom.bomId;
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
// console.log(this.addForm);
|
||||
addProduct(this.addForm).then(res => {
|
||||
this.$modal && this.$modal.msgSuccess("创建产品成功");
|
||||
this.getProductOptions();
|
||||
console.log(res);
|
||||
this.itemId = res.productId;
|
||||
this.$emit('input', res.productId);
|
||||
this.activeStep = 1;
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.addDialogVisible = false;
|
||||
this.addForm = {
|
||||
productCode: undefined,
|
||||
productName: undefined,
|
||||
owner: undefined,
|
||||
unit: undefined,
|
||||
type: 'product'
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.option-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product-code {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -3,4 +3,13 @@ export const EExpressType = {
|
||||
ZTO: "ZTO",
|
||||
BEST: "Best",
|
||||
STO: "STO",
|
||||
}
|
||||
}
|
||||
|
||||
// 订单状态
|
||||
export const EOrderStatus = {
|
||||
NEW: 0,
|
||||
PRODUCTIONING: 1,
|
||||
FINISH: 2,
|
||||
CANCEL: 3
|
||||
}
|
||||
|
||||
|
||||
417
gear-ui3/src/views/oms/customer/index.vue
Normal file
417
gear-ui3/src/views/oms/customer/index.vue
Normal file
@@ -0,0 +1,417 @@
|
||||
<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="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入客户名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户等级" prop="level">
|
||||
<el-input
|
||||
v-model="queryParams.level"
|
||||
placeholder="请输入客户等级"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户来源" prop="source">
|
||||
<el-select v-model="queryParams.source" placeholder="请选择客户来源" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.customer_from"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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="customerList" @selection-change="handleSelectionChange" :customColumns="customColumns">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<!-- <el-table-column label="编号，主键自增" align="center" prop="customerId" v-if="false"/>
|
||||
<el-table-column label="客户名称" align="center" prop="name" />
|
||||
<el-table-column label="手机" align="center" prop="mobile" />
|
||||
<el-table-column label="电话" align="center" prop="telephone" />
|
||||
<el-table-column label="QQ" align="center" prop="qq" />
|
||||
<el-table-column label="微信" align="center" prop="wechat" />
|
||||
<el-table-column label="邮箱" align="center" prop="email" />
|
||||
<el-table-column label="地区编号" align="center" prop="areaId" />
|
||||
<el-table-column label="详细地址" align="center" prop="detailAddress" />
|
||||
<el-table-column label="客户等级" align="center" prop="level" />
|
||||
<el-table-column label="客户来源" align="center" prop="source">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.customer_from" :value="scope.row.source"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</KLPTable>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改CRM 客户对话框 -->
|
||||
<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="客户名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入客户名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机" prop="mobile">
|
||||
<el-input v-model="form.mobile" placeholder="请输入手机" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="telephone">
|
||||
<el-input v-model="form.telephone" placeholder="请输入电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="QQ" prop="qq">
|
||||
<el-input v-model="form.qq" placeholder="请输入QQ" />
|
||||
</el-form-item>
|
||||
<el-form-item label="微信" prop="wechat">
|
||||
<el-input v-model="form.wechat" placeholder="请输入微信" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
<el-form-item label="地区编号" prop="areaId">
|
||||
<el-input v-model="form.areaId" placeholder="请输入地区编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址" prop="detailAddress">
|
||||
<el-input v-model="form.detailAddress" placeholder="请输入详细地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="客户等级" prop="level">
|
||||
<el-input v-model="form.level" placeholder="请输入客户等级" />
|
||||
</el-form-item>
|
||||
<el-form-item label="客户来源" prop="source">
|
||||
<el-select v-model="form.source" placeholder="请选择客户来源">
|
||||
<el-option
|
||||
v-for="dict in dict.type.customer_from"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/wms/customer";
|
||||
import KLPTable from '@/components/KLPUI/KLPTable/index.vue';
|
||||
|
||||
export default {
|
||||
name: "Customer",
|
||||
dicts: ['customer_from'],
|
||||
components: {
|
||||
KLPTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
customColumns: [
|
||||
{
|
||||
label: '客户名称',
|
||||
prop: 'name'
|
||||
},
|
||||
{
|
||||
label: '手机',
|
||||
prop: 'mobile'
|
||||
},
|
||||
{
|
||||
label: '电话',
|
||||
prop: 'telephone'
|
||||
},
|
||||
{
|
||||
label: 'QQ',
|
||||
prop: 'qq'
|
||||
},
|
||||
{
|
||||
label: '微信',
|
||||
prop: 'wechat'
|
||||
},
|
||||
{
|
||||
label: '邮箱',
|
||||
prop: 'email'
|
||||
},
|
||||
{
|
||||
label: '地区编号',
|
||||
prop: 'areaId'
|
||||
},
|
||||
{
|
||||
label: '详细地址',
|
||||
prop: 'detailAddress',
|
||||
eclipse: true
|
||||
},
|
||||
{
|
||||
label: '客户等级',
|
||||
prop: 'level'
|
||||
},
|
||||
{
|
||||
label: '客户来源',
|
||||
prop: 'source'
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remark'
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
width: 150,
|
||||
fixed: 'right',
|
||||
render: (h, row) => {
|
||||
const actions = [];
|
||||
actions.push(<el-button type="text" size="mini" icon="el-icon-edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
|
||||
actions.push(<el-button type="text" size="mini" icon="el-icon-delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
|
||||
return actions;
|
||||
}
|
||||
}
|
||||
],
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// CRM 客户表格数据
|
||||
customerList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
name: undefined,
|
||||
mobile: undefined,
|
||||
telephone: undefined,
|
||||
qq: undefined,
|
||||
wechat: undefined,
|
||||
email: undefined,
|
||||
areaId: undefined,
|
||||
detailAddress: undefined,
|
||||
level: undefined,
|
||||
source: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询CRM 客户列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listCustomer(this.queryParams).then(response => {
|
||||
this.customerList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
customerId: undefined,
|
||||
name: undefined,
|
||||
followUpStatus: undefined,
|
||||
contactLastTime: undefined,
|
||||
contactLastContent: undefined,
|
||||
contactNextTime: undefined,
|
||||
ownerUserId: undefined,
|
||||
ownerTime: undefined,
|
||||
dealStatus: undefined,
|
||||
mobile: undefined,
|
||||
telephone: undefined,
|
||||
qq: undefined,
|
||||
wechat: undefined,
|
||||
email: undefined,
|
||||
areaId: undefined,
|
||||
detailAddress: undefined,
|
||||
industryId: undefined,
|
||||
level: undefined,
|
||||
source: undefined,
|
||||
remark: undefined,
|
||||
createBy: undefined,
|
||||
createTime: undefined,
|
||||
updateBy: undefined,
|
||||
updateTime: undefined,
|
||||
delFlag: 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.customerId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加CRM 客户";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const customerId = row.customerId || this.ids
|
||||
getCustomer(customerId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改CRM 客户";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.customerId != null) {
|
||||
updateCustomer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addCustomer(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const customerIds = row.customerId || this.ids;
|
||||
this.$modal.confirm('是否确认删除CRM 客户编号为"' + customerIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delCustomer(customerIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('wms/customer/export', {
|
||||
...this.queryParams
|
||||
}, `customer_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
294
gear-ui3/src/views/oms/jounery/index.vue
Normal file
294
gear-ui3/src/views/oms/jounery/index.vue
Normal file
@@ -0,0 +1,294 @@
|
||||
<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="journalDate">
|
||||
<el-date-picker clearable v-model="queryParams.journalDate" type="date" value-format="yyyy-MM-dd"
|
||||
placeholder="请选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="摘要" prop="summary">
|
||||
<el-input v-model="queryParams.summary" placeholder="请输入摘要" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="收支类型" prop="transType">
|
||||
<el-input v-model="queryParams.transType" placeholder="请输入收支类型" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="对方户名" prop="counterpart">
|
||||
<el-input v-model="queryParams.counterpart" placeholder="请输入对方户名" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="收入金额" prop="incomeAmount">
|
||||
<el-input v-model="queryParams.incomeAmount" placeholder="请输入收入金额" clearable
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="支出金额" prop="expenseAmount">
|
||||
<el-input v-model="queryParams.expenseAmount" placeholder="请输入支出金额" clearable
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="余额" prop="balanceAmount">
|
||||
<el-input v-model="queryParams.balanceAmount" placeholder="请输入余额" clearable @keyup.enter.native="handleQuery" />
|
||||
</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="journalList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="主键ID" align="center" prop="journalId" v-if="false" />
|
||||
<el-table-column label="日期" align="center" prop="journalDate" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.journalDate, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="摘要" align="center" prop="summary" />
|
||||
<el-table-column label="收支类型" align="center" prop="transType" />
|
||||
<el-table-column label="对方户名" align="center" prop="counterpart" />
|
||||
<el-table-column label="收入金额" align="center" prop="incomeAmount">
|
||||
<!-- 如果不是0用绿字展示，否则用正常颜色 -->
|
||||
<template slot-scope="scope">
|
||||
<span :style="Number(scope.row.incomeAmount) !== 0 ? { color: '#28a745' } : {}">
|
||||
{{ scope.row.incomeAmount }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="支出金额" align="center" prop="expenseAmount">
|
||||
<!-- 如果不是0用红字展示，否则用正常颜色 -->
|
||||
<template slot-scope="scope">
|
||||
<span :style="Number(scope.row.expenseAmount) !== 0 ? { color: '#dc3545' } : {}">
|
||||
{{ scope.row.expenseAmount }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="余额" align="center" prop="balanceAmount" />
|
||||
<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>
|
||||
</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="日期" prop="journalDate">
|
||||
<el-date-picker clearable v-model="form.journalDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="摘要" prop="summary">
|
||||
<el-input v-model="form.summary" placeholder="请输入摘要" />
|
||||
</el-form-item>
|
||||
<el-form-item label="收支类型" prop="transType">
|
||||
<el-input v-model="form.transType" placeholder="请输入收支类型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="对方户名" prop="counterpart">
|
||||
<el-input v-model="form.counterpart" placeholder="请输入对方户名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="收入金额" prop="incomeAmount">
|
||||
<el-input v-model="form.incomeAmount" :disabled="form.journalId" placeholder="请输入收入金额" />
|
||||
</el-form-item>
|
||||
<el-form-item label="支出金额" prop="expenseAmount">
|
||||
<el-input v-model="form.expenseAmount" :disabled="form.journalId" 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listJournal, getJournal, delJournal, addJournal, updateJournal } from "@/api/finance/journal";
|
||||
|
||||
export default {
|
||||
name: "Journal",
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 资金日记账表格数据
|
||||
journalList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
journalDate: undefined,
|
||||
summary: undefined,
|
||||
transType: undefined,
|
||||
counterpart: undefined,
|
||||
incomeAmount: undefined,
|
||||
expenseAmount: undefined,
|
||||
balanceAmount: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询资金日记账列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listJournal(this.queryParams).then(response => {
|
||||
this.journalList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
journalId: undefined,
|
||||
journalDate: undefined,
|
||||
summary: undefined,
|
||||
transType: undefined,
|
||||
counterpart: undefined,
|
||||
incomeAmount: undefined,
|
||||
expenseAmount: undefined,
|
||||
balanceAmount: undefined,
|
||||
remark: undefined,
|
||||
createBy: undefined,
|
||||
createTime: undefined,
|
||||
updateBy: undefined,
|
||||
updateTime: undefined,
|
||||
delFlag: 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.journalId)
|
||||
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 journalId = row.journalId || this.ids
|
||||
getJournal(journalId).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.journalId != null) {
|
||||
updateJournal(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addJournal(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const journalIds = row.journalId || this.ids;
|
||||
this.$modal.confirm('是否确认删除资金日记账编号为"' + journalIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delJournal(journalIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('klp/journal/export', {
|
||||
...this.queryParams
|
||||
}, `journal_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
16
gear-ui3/src/views/oms/order/index.vue
Normal file
16
gear-ui3/src/views/oms/order/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<OrderPage :isPre="false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderPage from './panels/orderPage.vue';
|
||||
|
||||
export default {
|
||||
name: 'Order',
|
||||
components: {
|
||||
OrderPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
299
gear-ui3/src/views/oms/order/panels/detail.vue
Normal file
299
gear-ui3/src/views/oms/order/panels/detail.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" size="mini" :disabled="!canEdit"
|
||||
@click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" size="mini" :disabled="single || !canEdit"
|
||||
@click="handleUpdate">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" size="mini" :disabled="multiple || !canEdit"
|
||||
@click="handleDelete">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" size="mini" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<KLPTable v-loading="loading" :data="orderDetailList">
|
||||
<el-table-column label="产品" align="center">
|
||||
<template slot-scope="scope">
|
||||
<ProductInfo :product-id="scope.row.productId">
|
||||
<template #default="{ product }">
|
||||
{{ product.productName }}<span v-if="product.productCode">({{ product.productCode }})</span>
|
||||
</template>
|
||||
</ProductInfo>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="BOM" align="center">
|
||||
<template slot-scope="scope">
|
||||
<BomInfoMini item-type="product" :item-id="scope.row.productId" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="产品数量" align="center" prop="quantity" />
|
||||
<el-table-column label="单位" align="center" prop="unit" />
|
||||
<el-table-column label="含税单价" align="center" prop="taxPrice" />
|
||||
<el-table-column label="无税单价" align="center" prop="noTaxPrice" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" icon="Edit"
|
||||
@click="handleUpdate(scope.row)">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="Delete"
|
||||
@click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</KLPTable>
|
||||
|
||||
<!-- 添加或修改订单明细对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="产品" prop="productId">
|
||||
<ProductSelect :can-add="true" v-model="form.productId" placeholder="请选择产品" @change="onProductChange" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品数量" prop="quantity">
|
||||
<el-input v-model="form.quantity" placeholder="请输入产品数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="单位" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="含税单价" prop="taxPrice">
|
||||
<el-input-number :controls=false controls-position="right" v-model="form.taxPrice" placeholder="请输入含税单价" />
|
||||
</el-form-item>
|
||||
<el-form-item label="无税单价" prop="noTaxPrice">
|
||||
<el-input-number :controls=false controls-position="right" v-model="form.noTaxPrice" placeholder="请输入无税单价"
|
||||
:min="0" :max="form.taxPrice" />
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listOrderDetail, getOrderDetail, delOrderDetail, addOrderDetail, updateOrderDetail } from "@/api/wms/orderDetail";
|
||||
import { getOrder } from "@/api/wms/order";
|
||||
import ProductSelect from '@/components/Selector/ProductSelect';
|
||||
import { EOrderStatus } from "@/utils/enums";
|
||||
import ProductInfo from '@/components/Renderer/ProductInfo.vue';
|
||||
import BomInfoMini from '@/components/Renderer/BomInfoMini.vue';
|
||||
import KLPTable from '@/components/GearTable/index.vue';
|
||||
|
||||
export default {
|
||||
name: "OrderDetailPanel",
|
||||
dicts: ['order_status'],
|
||||
props: {
|
||||
orderId: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ProductSelect,
|
||||
ProductInfo,
|
||||
BomInfoMini,
|
||||
KLPTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
buttonLoading: false,
|
||||
loading: true,
|
||||
ids: [],
|
||||
single: true,
|
||||
multiple: true,
|
||||
total: 0,
|
||||
orderDetailList: [],
|
||||
orderInfo: null, // 订单信息
|
||||
title: "",
|
||||
open: false,
|
||||
// 订单状态枚举
|
||||
EOrderStatus,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
orderId: this.orderId,
|
||||
productId: undefined,
|
||||
quantity: undefined,
|
||||
unit: undefined,
|
||||
},
|
||||
form: {
|
||||
orderId: this.orderId
|
||||
},
|
||||
rules: {
|
||||
orderId: [
|
||||
{ required: true, message: "订单ID不能为空", trigger: "blur" }
|
||||
],
|
||||
productId: [
|
||||
{ required: true, message: "产品ID不能为空", trigger: "blur" }
|
||||
],
|
||||
quantity: [
|
||||
{ required: true, message: "产品数量不能为空", trigger: "blur" },
|
||||
{ pattern: /^[1-9]\d*$/, message: "产品数量必须为正整数", trigger: "blur" }
|
||||
],
|
||||
unit: [
|
||||
{ required: true, message: "单位不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 是否可以编辑（订单状态为新建时才能编辑）
|
||||
canEdit() {
|
||||
return this.orderInfo && this.orderInfo.orderStatus === EOrderStatus.NEW;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
orderId(newVal) {
|
||||
this.queryParams.orderId = newVal;
|
||||
this.form.orderId = newVal;
|
||||
this.getOrderInfo();
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getOrderInfo();
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 获取订单信息
|
||||
getOrderInfo() {
|
||||
if (this.orderId) {
|
||||
getOrder(this.orderId).then(response => {
|
||||
this.orderInfo = response.data;
|
||||
}).catch(() => {
|
||||
this.orderInfo = null;
|
||||
});
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listOrderDetail(this.queryParams).then(response => {
|
||||
this.orderDetailList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
reset() {
|
||||
this.form = {
|
||||
detailId: undefined,
|
||||
orderId: this.orderId,
|
||||
productId: undefined,
|
||||
quantity: undefined,
|
||||
taxPrice: undefined,
|
||||
noTaxPrice: undefined,
|
||||
unit: undefined,
|
||||
remark: undefined,
|
||||
delFlag: undefined,
|
||||
createTime: undefined,
|
||||
createBy: undefined,
|
||||
updateTime: undefined,
|
||||
updateBy: undefined,
|
||||
};
|
||||
this.resetForm && this.resetForm("form");
|
||||
},
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.detailId)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
handleAdd() {
|
||||
if (!this.canEdit) {
|
||||
this.$modal && this.$modal.msgError("当前订单状态不允许新增明细");
|
||||
return;
|
||||
}
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加订单明细";
|
||||
},
|
||||
handleUpdate(row) {
|
||||
if (!this.canEdit) {
|
||||
this.$modal && this.$modal.msgError("当前订单状态不允许修改明细");
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const detailId = row.detailId || this.ids
|
||||
getOrderDetail(detailId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改订单明细";
|
||||
});
|
||||
},
|
||||
onProductChange(product) {
|
||||
if (product) {
|
||||
this.form.unit = product.unit;
|
||||
} else {
|
||||
this.form.unit = undefined;
|
||||
}
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.detailId != null) {
|
||||
updateOrderDetail(this.form).then(response => {
|
||||
this.$modal && this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addOrderDetail(this.form).then(response => {
|
||||
this.$modal && this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleDelete(row) {
|
||||
if (!this.canEdit) {
|
||||
this.$modal && this.$modal.msgError("当前订单状态不允许删除明细");
|
||||
return;
|
||||
}
|
||||
const detailIds = row.detailId || this.ids;
|
||||
this.$modal && this.$modal.confirm('是否确认删除订单明细编号为"' + detailIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delOrderDetail(detailIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal && this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleExport() {
|
||||
this.download && this.download('oa/orderDetail/export', {
|
||||
...this.queryParams
|
||||
}, `orderDetail_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-button--text {
|
||||
margin: 0 4px;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
484
gear-ui3/src/views/oms/order/panels/orderPage.vue
Normal file
484
gear-ui3/src/views/oms/order/panels/orderPage.vue
Normal file
@@ -0,0 +1,484 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 左右布局容器 -->
|
||||
<el-row :gutter="20">
|
||||
<!-- 左侧：使用klp-list组件（占6列） -->
|
||||
<el-col :span="6" style="display: table-cell;">
|
||||
<!-- 搜索表单 - 精简搜索项 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"
|
||||
class="mb-4">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="16">
|
||||
<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"
|
||||
class="w-full">新增订单</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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 }">
|
||||
<!-- 删除按钮 -->
|
||||
<el-button size="mini" type="text" style="color: red" icon="el-icon-delete" @click.stop="handleDelete(item)"></el-button>
|
||||
</template>
|
||||
</klp-list>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize" @pagination="getList" class="mt-4" />
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧：详情区（占18列） -->
|
||||
<el-col :span="18">
|
||||
<div>
|
||||
<!-- 未选中行时显示提示 -->
|
||||
<div v-if="!selectedOrderId" class="empty-tip">
|
||||
<el-empty description="请从左侧选择一个订单查看详情" />
|
||||
</div>
|
||||
|
||||
<!-- 选中行时显示Tab详情 -->
|
||||
<div v-else>
|
||||
<!-- Tab容器 -->
|
||||
<el-tabs v-loading="loading" v-model="activeTab" type="border-card" class="mt-2">
|
||||
<!-- 订单信息Tab -->
|
||||
<el-tab-pane label="订单信息" name="orderInfo">
|
||||
<el-form ref="detailForm" :model="form" :rules="rules" label-width="80px" size="small" class="mt-4">
|
||||
<el-form-item label="订单ID" prop="orderId">
|
||||
<el-input style="width: 60%;" v-model="form.orderId" placeholder="无" disabled>
|
||||
<el-button style="padding: -1;" slot="append" size="mini" type="text" icon="el-icon-document-copy"
|
||||
@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-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-form-item>
|
||||
|
||||
<el-form-item label="订单状态" prop="orderStatus">
|
||||
<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>
|
||||
|
||||
<!-- 更新按钮 -->
|
||||
<el-form-item class="text-right">
|
||||
<el-button type="primary" size="mini" :loading="buttonLoading"
|
||||
@click="submitDetailForm">更新订单信息</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 订单详情Tab -->
|
||||
<el-tab-pane label="订单详情" name="orderDetail">
|
||||
<div class="mt-4">
|
||||
<OrderDetailPanel :orderId="selectedOrderId" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 新增订单弹窗 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
||||
<el-form ref="addForm" :model="form" :rules="rules" label-width="100px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="订单编号" prop="orderCode">
|
||||
<el-input v-model="form.orderCode" placeholder="请输入订单编号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户名称" prop="customerId">
|
||||
<customer-select v-model="form.customerId" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="销售经理" prop="salesManager">
|
||||
<el-input v-model="form.salesManager" style="width: 100%;" placeholder="请输入销售经理" />
|
||||
</el-form-item>
|
||||
</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-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="无税金额" prop="noTaxAmount">
|
||||
<el-input-number :controls="false" v-model="form.noTaxAmount" placeholder="请输入无税金额" precision="2"
|
||||
:min="0" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" type="textarea" rows="3" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitAddForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOrder, delOrder, addOrder, updateOrder, listByStatus } from "@/api/wms/order";
|
||||
import OrderDetailPanel from './detail.vue';
|
||||
import { EOrderStatus } from "@/utils/enums";
|
||||
import CustomerSelect from '@/components/KLPService/CustomerSelect/index.vue';
|
||||
import klpList from "@/components/KLPUI/KLPList/index.vue";
|
||||
|
||||
export default {
|
||||
name: "Order",
|
||||
components: { OrderDetailPanel, CustomerSelect, klpList },
|
||||
dicts: ['order_status'],
|
||||
props: {
|
||||
tradeType: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
orderQueryStatus() {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 订单状态枚举
|
||||
EOrderStatus,
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 列表加载遮罩
|
||||
loading: true,
|
||||
// 选中的订单ID集合
|
||||
selectedIds: {},
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 订单列表数据
|
||||
orderList: [],
|
||||
// 新增弹窗标题
|
||||
title: "",
|
||||
// 新增弹窗显示状态
|
||||
open: false,
|
||||
// 当前选中的订单ID（控制右侧详情显示）
|
||||
selectedOrderId: null,
|
||||
// 右侧激活的Tab
|
||||
activeTab: "orderDetail",
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
orderCode: undefined,
|
||||
customerId: undefined,
|
||||
salesManager: undefined,
|
||||
orderStatus: undefined,
|
||||
tradeType: this.tradeType
|
||||
},
|
||||
// 表单参数
|
||||
form: {
|
||||
orderId: undefined,
|
||||
orderCode: undefined,
|
||||
customerId: undefined,
|
||||
salesManager: undefined,
|
||||
orderStatus: undefined,
|
||||
tradeType: this.tradeType,
|
||||
remark: undefined,
|
||||
delFlag: undefined,
|
||||
createTime: undefined,
|
||||
createBy: undefined,
|
||||
updateTime: undefined,
|
||||
updateBy: undefined,
|
||||
taxAmount: 0,
|
||||
noTaxAmount: 0,
|
||||
},
|
||||
// 表单校验规则
|
||||
rules: {
|
||||
orderCode: [
|
||||
{ required: true, message: "请输入订单编号", trigger: "blur" }
|
||||
],
|
||||
customerId: [
|
||||
{ required: true, message: "请选择客户名称", trigger: "change" }
|
||||
],
|
||||
salesManager: [
|
||||
{ required: true, message: "请输入销售经理", trigger: "blur" }
|
||||
],
|
||||
taxAmount: [
|
||||
{ required: true, message: "请输入含税金额", trigger: "blur" }
|
||||
],
|
||||
noTaxAmount: [
|
||||
{ required: true, message: "请输入无税金额", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryParams.orderStatus = this.orderQueryStatus;
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询订单列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listByStatus(this.queryParams).then(response => {
|
||||
this.orderList = response.rows;
|
||||
this.total = response.total;
|
||||
|
||||
// 重置选中状态
|
||||
this.selectedIds = {};
|
||||
|
||||
// 如果之前选中的订单不在列表中了，清空选中状态
|
||||
if (this.selectedOrderId && !this.orderList.some(item => item.orderId === this.selectedOrderId)) {
|
||||
this.selectedOrderId = null;
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/** 点击列表项加载详情 */
|
||||
handleRowClick(item) {
|
||||
this.selectedOrderId = item.orderId;
|
||||
this.loadOrderDetail(item.orderId);
|
||||
},
|
||||
|
||||
/** 加载订单详情 */
|
||||
loadOrderDetail(orderId) {
|
||||
this.buttonLoading = true;
|
||||
getOrder(orderId).then(response => {
|
||||
this.form = { ...response.data };
|
||||
this.form.taxAmount = this.form.taxAmount || 0;
|
||||
this.form.noTaxAmount = this.form.noTaxAmount || 0;
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("加载订单详情失败");
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/** 订单状态变更 */
|
||||
handleOrderStatusChange() {
|
||||
updateOrder(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.getList();
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("修改失败");
|
||||
this.loadOrderDetail(this.selectedOrderId); // 失败后重新加载原数据
|
||||
});
|
||||
},
|
||||
|
||||
/** 取消新增 */
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.resetForm("addForm");
|
||||
this.form = {
|
||||
orderId: undefined,
|
||||
orderCode: undefined,
|
||||
customerId: undefined,
|
||||
salesManager: undefined,
|
||||
orderStatus: this.orderQueryStatus,
|
||||
tradeType: this.tradeType,
|
||||
remark: undefined,
|
||||
taxAmount: 0,
|
||||
noTaxAmount: 0,
|
||||
};
|
||||
},
|
||||
|
||||
/** 搜索 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/** 重置搜索 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.queryParams.orderStatus = this.orderQueryStatus;
|
||||
this.handleQuery();
|
||||
},
|
||||
|
||||
/** 重置表单 */
|
||||
resetForm(formRef) {
|
||||
if (this.$refs[formRef]) {
|
||||
this.$refs[formRef].resetFields();
|
||||
}
|
||||
},
|
||||
|
||||
/** 复制订单ID */
|
||||
copyOrderId(orderId) {
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(orderId).then(() => {
|
||||
this.$modal.msgSuccess("复制成功");
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("复制失败，请手动复制");
|
||||
});
|
||||
} else {
|
||||
this.$modal.msgError("浏览器不支持复制功能");
|
||||
}
|
||||
},
|
||||
|
||||
/** 新增订单 */
|
||||
handleAdd() {
|
||||
this.resetForm("addForm");
|
||||
this.form = {
|
||||
orderId: undefined,
|
||||
orderCode: undefined,
|
||||
customerId: undefined,
|
||||
salesManager: undefined,
|
||||
orderStatus: this.orderQueryStatus,
|
||||
remark: undefined,
|
||||
taxAmount: 0,
|
||||
noTaxAmount: 0,
|
||||
};
|
||||
this.open = true;
|
||||
this.title = "添加订单";
|
||||
},
|
||||
|
||||
/** 提交新增表单 */
|
||||
submitAddForm() {
|
||||
this.$refs["addForm"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
addOrder(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("新增失败");
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/** 提交详情更新表单 */
|
||||
submitDetailForm() {
|
||||
this.$refs["detailForm"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
updateOrder(this.form).then(response => {
|
||||
this.$modal.msgSuccess("更新成功");
|
||||
this.getList();
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("更新失败");
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/** 删除订单 */
|
||||
handleDelete(row) {
|
||||
this.$modal.confirm(`是否确认删除订单"${row.orderCode}"？`).then(() => {
|
||||
this.loading = true;
|
||||
return delOrder([row.orderId]);
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
// 如果删除的是当前选中的订单，清空详情
|
||||
if (this.selectedOrderId === row.orderId) {
|
||||
this.selectedOrderId = null;
|
||||
}
|
||||
this.getList();
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("删除失败");
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/** 预订单确认 */
|
||||
handleStartProduction(row) {
|
||||
this.$modal.confirm(`是否确认将订单"${row.orderCode}"转为正式订单？`).then(() => {
|
||||
return updateOrder({
|
||||
orderId: row.orderId,
|
||||
orderStatus: 1
|
||||
});
|
||||
}).then(response => {
|
||||
this.$modal.msgSuccess("已转化为正式订单");
|
||||
if (this.selectedOrderId === row.orderId) {
|
||||
this.selectedOrderId = null;
|
||||
}
|
||||
this.getList();
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("转化失败");
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 页面容器样式 */
|
||||
.page-container {
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 空提示样式 */
|
||||
.empty-tip {
|
||||
height: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 表单样式调整 */
|
||||
.el-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
::v-deep .el-input-group__append,
|
||||
::v-deep .el-input-group__prepend {
|
||||
width: 20px !important;
|
||||
box-sizing: border-box !important;
|
||||
padding: 0 10px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
</style>
|
||||
16
gear-ui3/src/views/oms/order/trade.vue
Normal file
16
gear-ui3/src/views/oms/order/trade.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<OrderPage :isPre="false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderPage from './panels/orderPage.vue';
|
||||
|
||||
export default {
|
||||
name: 'Order',
|
||||
components: {
|
||||
OrderPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
373
gear-ui3/src/views/oms/pay/index.vue
Normal file
373
gear-ui3/src/views/oms/pay/index.vue
Normal file
@@ -0,0 +1,373 @@
|
||||
<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>
|
||||
</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
|
||||
},
|
||||
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>
|
||||
373
gear-ui3/src/views/oms/receive/index.vue
Normal file
373
gear-ui3/src/views/oms/receive/index.vue
Normal file
@@ -0,0 +1,373 @@
|
||||
<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>
|
||||
</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
|
||||
},
|
||||
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;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -58,12 +58,6 @@
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
|
||||
<!-- <el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-document"
|
||||
@click="goLedger(scope.row)"
|
||||
>台账</el-button> -->
|
||||
<el-button size="mini" type="text" icon="Document"
|
||||
@click="handleInstallManual(scope.row)">安装说明书</el-button>
|
||||
<el-button size="mini" type="text" icon="DataAnalysis" @click="handleBom(scope.row)">BOM</el-button>
|
||||
@@ -83,6 +77,9 @@
|
||||
<el-form-item label="产品名称" prop="productName">
|
||||
<el-input v-model="form.productName" placeholder="请输入产品名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品分类" prop="categoryId">
|
||||
<el-input v-model="form.categoryId" placeholder="请输入产品分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="owner">
|
||||
<el-input v-model="form.owner" :multiple="false" placeholder="请填写负责人" />
|
||||
</el-form-item>
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="供应商" prop="supplierId">
|
||||
<el-select v-model="form.supplierId" filterable clearable placeholder="请选择供应商">
|
||||
<el-option
|
||||
<el-option
|
||||
v-for="value in supplierList"
|
||||
:value="value.supplierId"
|
||||
:label="value.name"
|
||||
|
||||
Reference in New Issue
Block a user