砂糖
a4f8ecb48b
1. 新增批量修改钢卷合同接口与合同批量转单功能 2. 优化KLPTable多选列默认位置与物料预警查询交互 3. 升级CoilTable支持多选与自定义操作栏 4. 新增菜单导出功能 5. 优化钢卷面板列宽与操作按钮文案
235 lines
8.1 KiB
Vue
235 lines
8.1 KiB
Vue
<template>
|
||
<div class="contract-tabs">
|
||
<div v-if="orderId" class="tabs-content">
|
||
<el-tabs v-model="activeTab" type="border-card">
|
||
<!-- <el-tab-pane label="订单编辑" name="edit" v-hasPermi="['crm:order:edit']">
|
||
<div class="order-detail" v-if="activeTab === 'edit'">
|
||
<el-descriptions title="订单明细" />
|
||
<OrderDetail :orderId="currentOrder.orderId" />
|
||
</div>
|
||
</el-tab-pane> -->
|
||
<el-tab-pane label="财务状态" name="finance" v-hasPermi="['crm:order:finance']">
|
||
<div class="order-finance" v-if="activeTab === 'finance'">
|
||
<!-- 财务状态内容 -->
|
||
<ReceiveTable :order="currentOrder" />
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="订单异议" name="dispute" v-hasPermi="['crm:order:objection']">
|
||
<div class="order-dispute" v-if="activeTab === 'dispute'">
|
||
<!-- 订单异议内容 -->
|
||
<OrderObjection :order="currentOrder" />
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="生产成果" name="product">
|
||
<div class="order-record" v-if="activeTab === 'product'">
|
||
<!-- 生产成果内容 -->
|
||
<CoilTable ref="productCoilTable" :data="productList || []" :showSelection="true"
|
||
@selection-change="handleProductSelectionChange">
|
||
<template slot="filter-actions" slot-scope="{ selectedRows }">
|
||
<el-button type="primary" size="mini" icon="el-icon-refresh"
|
||
:disabled="!selectedRows.length" @click="handleBatchTransferContract(selectedRows)">
|
||
批量转单
|
||
</el-button>
|
||
</template>
|
||
</CoilTable>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="发货配卷" name="coil">
|
||
<div class="order-record" v-if="activeTab === 'coil'">
|
||
<!-- 发货配卷内容 -->
|
||
<CoilTable :data="coilList" />
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="发货单据" name="delivery">
|
||
<div class="order-record" v-if="activeTab === 'delivery'">
|
||
<!-- 发货单内容 -->
|
||
<DeliveryTable :data="deliveryWaybillList" />
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="合同附件" name="attachment" v-hasPermi="['crm:order:record']">
|
||
<div class="attachment-item">
|
||
<h4>商务附件</h4>
|
||
<FileList :oss-ids="contractAttachment" />
|
||
</div>
|
||
<div class="attachment-item">
|
||
<h4>技术附件</h4>
|
||
<FileList :oss-ids="technicalAgreement" />
|
||
</div>
|
||
<div class="attachment-item">
|
||
<h4>排产函</h4>
|
||
<FileList :oss-ids="otherAttachment" />
|
||
</div>
|
||
<div class="attachment-item">
|
||
<h4>其他附件</h4>
|
||
<FileList :oss-ids="form.annexFiles" />
|
||
</div>
|
||
</el-tab-pane>
|
||
<!-- <el-tab-pane label="操作记录" name="record" v-hasPermi="['crm:order:record']">
|
||
<div class="order-record" v-if="activeTab === 'record'">
|
||
<OrderRecord :orderId="currentOrder.orderId" />
|
||
</div>
|
||
</el-tab-pane> -->
|
||
</el-tabs>
|
||
|
||
<!-- 批量转单 - 选择目标合同弹窗 -->
|
||
<el-dialog title="批量转单" :visible.sync="batchTransferDialogVisible" width="500px" append-to-body
|
||
@closed="batchTargetContractId = ''">
|
||
<div style="margin-bottom: 12px;">
|
||
已选择 <strong>{{ (batchTransferCoilIds || []).length }}</strong> 卷钢卷，请选择目标合同：
|
||
</div>
|
||
<ContractSelect v-model="batchTargetContractId" mode="all" />
|
||
<span slot="footer">
|
||
<el-button @click="batchTransferDialogVisible = false">取消</el-button>
|
||
<el-button type="primary" :disabled="!batchTargetContractId" :loading="batchTransferLoading"
|
||
@click="confirmBatchTransfer">确认转单</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
<div v-else class="no-selection" style="display: flex; align-items: center; justify-content: center; height: 100%;">
|
||
<el-empty description="请先选择合同" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import OrderPage from "@/views/crm/order/index.vue";
|
||
import CoilTable from "../../components/CoilTable.vue";
|
||
import ContractSelect from "@/components/KLPService/ContractSelect";
|
||
import { batchUpdateContractCoil } from "@/api/wms/coil";
|
||
import FileList from "@/components/FileList";
|
||
import DeliveryTable from "../../components/DeliveryTable.vue";
|
||
|
||
// 导入可能需要的组件
|
||
import OrderDetail from "../../components/OrderDetail.vue";
|
||
import OrderEdit from "../../components/OrderEdit.vue";
|
||
import ReceiveTable from "../../components/ReceiveTable.vue";
|
||
import OrderObjection from "../../components/OrderObjection.vue";
|
||
import OrderRecord from "../../components/OrderRecord.vue";
|
||
|
||
export default {
|
||
name: "ContractTabs",
|
||
components: {
|
||
CoilTable,
|
||
ContractSelect,
|
||
FileList,
|
||
DeliveryTable,
|
||
OrderDetail,
|
||
OrderEdit,
|
||
ReceiveTable,
|
||
OrderObjection,
|
||
OrderRecord
|
||
},
|
||
props: {
|
||
orderId: {
|
||
type: [Number, String],
|
||
default: null
|
||
},
|
||
coilList: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
productList: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
loading: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 附件字段
|
||
contractAttachment: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
technicalAgreement: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
otherAttachment: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 新增必要的props
|
||
form: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
currentOrder: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
deliveryWaybillList: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 活动tab
|
||
activeTab: "finance",
|
||
selectedProductRows: [],
|
||
batchTransferDialogVisible: false,
|
||
batchTargetContractId: '',
|
||
batchTransferCoilIds: [],
|
||
batchTransferLoading: false
|
||
};
|
||
},
|
||
methods: {
|
||
handleProductSelectionChange(selection) {
|
||
this.selectedProductRows = selection;
|
||
},
|
||
handleBatchTransferContract(selectedRows) {
|
||
if (!selectedRows || !selectedRows.length) {
|
||
this.$message.warning('请先选择需要转单的钢卷');
|
||
return;
|
||
}
|
||
this.batchTransferCoilIds = selectedRows.map(row => row.coilId);
|
||
this.batchTargetContractId = '';
|
||
this.batchTransferDialogVisible = true;
|
||
},
|
||
confirmBatchTransfer() {
|
||
const coilIds = this.batchTransferCoilIds;
|
||
const contractId = this.batchTargetContractId;
|
||
if (!contractId) {
|
||
this.$message.warning('请选择目标合同');
|
||
return;
|
||
}
|
||
this.batchTransferLoading = true;
|
||
batchUpdateContractCoil(contractId, coilIds).then(res => {
|
||
this.$message.success(`成功将 ${coilIds.length} 卷钢卷转入目标合同`);
|
||
this.batchTransferDialogVisible = false;
|
||
// 刷新生产成果列表
|
||
this.$emit('refresh-product');
|
||
// 清除选中
|
||
if (this.$refs.productCoilTable) {
|
||
this.$refs.productCoilTable.clearSelection();
|
||
}
|
||
}).catch(err => {
|
||
console.error('批量转单失败：', err);
|
||
this.$message.error('批量转单失败，请重试');
|
||
}).finally(() => {
|
||
this.batchTransferLoading = false;
|
||
});
|
||
},
|
||
// 解析时间
|
||
parseTime(time, pattern) {
|
||
if (!time) return '';
|
||
const d = new Date(time);
|
||
const year = d.getFullYear();
|
||
const month = (d.getMonth() + 1).toString().padStart(2, '0');
|
||
const day = d.getDate().toString().padStart(2, '0');
|
||
const hours = d.getHours().toString().padStart(2, '0');
|
||
const minutes = d.getMinutes().toString().padStart(2, '0');
|
||
const seconds = d.getSeconds().toString().padStart(2, '0');
|
||
return pattern
|
||
.replace('{y}', year)
|
||
.replace('{m}', month)
|
||
.replace('{d}', day)
|
||
.replace('{h}', hours)
|
||
.replace('{i}', minutes)
|
||
.replace('{s}', seconds);
|
||
},
|
||
}
|
||
};
|
||
</script> |