feat(order): 优化订单详情页面布局和功能

- 移除物流状态列,调整表格字段布局-优化表单布局,调整列宽和输入控件宽度
- 添加选择器组件用于代理商、客户、合作伙伴和用户选择- 实现总代进货金额字段的条件显示
- 修改版本号输入为只读模式- 增加表单字段的可编辑性和交互逻辑- 优化产品配置组件,移除选择列改为序号列
- 添加样式优化,统一选择器和日期控件宽度
- 完善表单验证和数据回填逻辑
dev_1.0.0
chenhao 2025-11-13 11:18:42 +08:00
parent 0b12e0b88e
commit 0e2113e99c
3 changed files with 107 additions and 30 deletions

View File

@ -9,7 +9,7 @@
<el-button type="primary" size="small" icon="el-icon-plus" @click="addProduct('software')" :disabled="isActionDisabled">添加</el-button> <el-button type="primary" size="small" icon="el-icon-plus" @click="addProduct('software')" :disabled="isActionDisabled">添加</el-button>
</div> </div>
<el-table :data="softwareList" border style="width: 100%"> <el-table :data="softwareList" border style="width: 100%">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="60" align="center" /> <el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column label="产品编码" width="120" prop="productBomCode"> <el-table-column label="产品编码" width="120" prop="productBomCode">
<template slot-scope="scope"> <template slot-scope="scope">
@ -90,7 +90,7 @@
<el-button type="primary" size="small" icon="el-icon-plus" @click="addProduct('hardware')" :disabled="isActionDisabled">添加</el-button> <el-button type="primary" size="small" icon="el-icon-plus" @click="addProduct('hardware')" :disabled="isActionDisabled">添加</el-button>
</div> </div>
<el-table :data="hardwareList" border style="width: 100%"> <el-table :data="hardwareList" border style="width: 100%">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="60" align="center" /> <el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column label="产品编码" width="120" prop="productBomCode"> <el-table-column label="产品编码" width="120" prop="productBomCode">
<template slot-scope="scope"> <template slot-scope="scope">
@ -171,7 +171,7 @@
<el-button type="primary" size="small" icon="el-icon-plus" @click="addProduct('maintenance')" :disabled="isActionDisabled">添加</el-button> <el-button type="primary" size="small" icon="el-icon-plus" @click="addProduct('maintenance')" :disabled="isActionDisabled">添加</el-button>
</div> </div>
<el-table :data="maintenanceList" border style="width: 100%"> <el-table :data="maintenanceList" border style="width: 100%">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="60" align="center" /> <el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column label="产品编码" width="120" prop="productBomCode"> <el-table-column label="产品编码" width="120" prop="productBomCode">
<template slot-scope="scope"> <template slot-scope="scope">

View File

@ -1,28 +1,30 @@
<template> <template>
<div>
<!-- 添加或修改订单管理对话框 --> <!-- 添加或修改订单管理对话框 -->
<el-dialog :title="title" :visible.sync="internalVisible" width="1400px" append-to-body @close="handleClose"> <el-dialog :title="title" :visible.sync="internalVisible" width="1400px" append-to-body @close="handleClose">
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-tabs v-model="activeTab"> <el-tabs v-model="activeTab">
<el-tab-pane label="基础信息" name="basic"> <el-tab-pane label="基础信息" name="basic">
<div style="max-height: 60vh; overflow-y: auto; padding: 15px;">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="16">
<el-form-item label="项目名称" prop="projectName"> <el-form-item label="项目名称" prop="projectName">
<el-input v-model="form.projectName" placeholder="选择项目后带入" readonly> <el-input v-model="form.projectName" placeholder="选择项目后带入" readonly>
<el-button slot="append" icon="el-icon-search" @click="handleSelectProject"></el-button> <el-button slot="append" icon="el-icon-search" @click="handleSelectProject"></el-button>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="8">
<el-form-item label="版本号" prop="versionCode"> <el-form-item label="版本号" prop="versionCode">
<el-input-number v-model="form.versionCode" :min="1" label="版本号"></el-input-number> <el-input v-model="form.versionCode" :min="1" readonly label="版本号"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="8">
<el-form-item label="项目编号" prop="projectCode"> <el-form-item label="项目编号" prop="projectCode">
<el-input v-model="form.projectCode" placeholder="选择项目后带入" readonly/> <el-input v-model="form.projectCode" placeholder="选择项目后带入" readonly/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="16">
<el-form-item label="最终客户" prop="customerName"> <el-form-item label="最终客户" prop="customerName">
<el-input v-model="form.customerName" placeholder="选择项目后带入" readonly/> <el-input v-model="form.customerName" placeholder="选择项目后带入" readonly/>
</el-form-item> </el-form-item>
@ -61,13 +63,13 @@
<el-input v-model="form.businessPhone" placeholder="请输入联系方式"/> <el-input v-model="form.businessPhone" placeholder="请输入联系方式"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="8">
<el-form-item label="合同编号" prop="orderCode"> <el-form-item label="合同编号" prop="orderCode">
<el-input v-model="form.orderCode" placeholder="自动生成" readonly/> <el-input v-model="form.orderCode" placeholder="自动生成" readonly/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="16">
<el-form-item label="执行单有效截止时间" prop="orderEndTime"> <el-form-item label="执行单截止时间" prop="orderEndTime">
<el-date-picker v-model="form.orderEndTime" type="date" value-format="yyyy-MM-dd" placeholder="审批完成后自动计算" disabled></el-date-picker> <el-date-picker v-model="form.orderEndTime" type="date" value-format="yyyy-MM-dd" placeholder="审批完成后自动计算" disabled></el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -78,18 +80,27 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col
v-if="(form.processTemplate=='1' ||(form.processTemplate!='1' &&( form.orderStatus=='1'||form.orderStatus=='2')))"
:span="8">
<el-form-item label="总代进货金额" prop="actualPurchaseAmount">
<el-input v-model="form.actualPurchaseAmount" readonly/>
</el-form-item>
</el-col>
<el-col :span="(form.processTemplate=='1' ||(form.processTemplate!='1' &&( form.orderStatus=='1'||form.orderStatus=='2')))?8:16"
>
<el-form-item label="总代出货金额" prop="shipmentAmount"> <el-form-item label="总代出货金额" prop="shipmentAmount">
<el-input v-model="form.shipmentAmount" placeholder="请输入金额"/> <el-input v-model="form.shipmentAmount" placeholder="请输入金额"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="要求到货时间" prop="deliveryTime"> <el-form-item label="要求到货时间" prop="deliveryTime">
<el-date-picker clearable size="small" v-model="form.deliveryTime" type="date" value-format="yyyy-MM-dd" placeholder="选择要求到货时间"> <el-date-picker clearable v-model="form.deliveryTime" type="date" value-format="yyyy-MM-dd"
placeholder="选择要求到货时间">
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="16">
<el-form-item label="公司直发" prop="companyDelivery"> <el-form-item label="公司直发" prop="companyDelivery">
<el-select v-model="form.companyDelivery" placeholder="请选择"> <el-select v-model="form.companyDelivery" placeholder="请选择">
<el-option v-for="dict in companyDeliveryOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option> <el-option v-for="dict in companyDeliveryOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
@ -109,15 +120,15 @@
<el-input value="广州佳都技术有限公司" readonly/> <el-input value="广州佳都技术有限公司" readonly/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="form.orderChannel == '2' ? 16 : 8">
<el-form-item label="供货商" prop="supplier"> <el-form-item label="供货商" prop="supplier">
<el-input v-model="form.supplier" readonly/> <el-input v-model="form.supplier"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="汇智责任人" prop="dutyName"> <el-form-item label="汇智责任人" prop="dutyName">
<el-input v-model="form.dutyName" placeholder="请选择责任人"> <el-input v-model="form.dutyName" placeholder="请选择责任人" @click.native=" openSelectPeople()">
<el-button slot="append" icon="el-icon-search" @click="handleSelectUser"></el-button> <el-button slot="append" icon="el-icon-search" @click.native=" openSelectPeople()"></el-button>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -131,14 +142,14 @@
<el-input v-model="form.dutyPhone" placeholder="请输入联系方式"/> <el-input v-model="form.dutyPhone" placeholder="请输入联系方式"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="16">
<el-form-item label="进货商" prop="partnerName"> <el-form-item label="进货商" prop="partnerName">
<el-input v-model="form.partnerName" placeholder="请选择进货商"> <el-input v-model="form.partnerName" placeholder="请选择进货商" @click.native="openSelectPartner">
<el-button slot="append" icon="el-icon-search" @click="handleSelectPartner"></el-button> <el-button slot="append" icon="el-icon-search" @click.native="openSelectPartner"></el-button>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="8">
<el-form-item label="进货商类型" prop="level"> <el-form-item label="进货商类型" prop="level">
<el-select v-model="form.level" placeholder="选择后带入" disabled> <el-select v-model="form.level" placeholder="选择后带入" disabled>
<el-option v-for="dict in partnerLevelOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option> <el-option v-for="dict in partnerLevelOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
@ -180,14 +191,14 @@
<el-input v-model="form.notifierPhone" placeholder="请输入联系方式"/> <el-input v-model="form.notifierPhone" placeholder="请输入联系方式"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="8">
<el-form-item label="付款方式" prop="paymentMethod"> <el-form-item label="付款方式" prop="paymentMethod">
<el-select v-model="form.paymentMethod" placeholder="请选择付款方式" @change="handlePaymentMethodChange"> <el-select v-model="form.paymentMethod" placeholder="请选择付款方式" @change="handlePaymentMethodChange">
<el-option v-for="item in paymentMethodOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in paymentMethodOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="8">
<el-form-item label="付款比例" prop="paymentRatio"> <el-form-item label="付款比例" prop="paymentRatio">
<el-input-number v-model="form.paymentRatio" :min="0" :max="100" placeholder="请输入付款比例" @change="updatePaymentDescription"></el-input-number> <el-input-number v-model="form.paymentRatio" :min="0" :max="100" placeholder="请输入付款比例" @change="updatePaymentDescription"></el-input-number>
</el-form-item> </el-form-item>
@ -203,9 +214,12 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="配置信息" name="config"> <el-tab-pane label="配置信息" name="config">
<div style="max-height: 60vh; overflow-y: auto; padding: 15px;">
<product-config v-model="form" :disabled="!isEdit" /> <product-config v-model="form" :disabled="!isEdit" />
</div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="流转过程" name="flow"> <el-tab-pane label="流转过程" name="flow">
<!-- 流转过程 --> <!-- 流转过程 -->
@ -219,6 +233,7 @@
<el-tab-pane label="合同信息" name="contract"> <el-tab-pane label="合同信息" name="contract">
<!-- 合同信息 --> <!-- 合同信息 -->
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -226,17 +241,37 @@
<el-button @click="cancel"> </el-button> <el-button @click="cancel"> </el-button>
</div> </div>
</el-dialog> </el-dialog>
<select-agent :visible.sync="selectAgentVisible" @agent-selected="handleAgentSelected"/>
<select-customer :visible.sync="selectCustomerVisible" @customer-selected="handleCustomerSelected"/>
<select-partner :visible.sync="selectPartnerVisible" @partner-selected="handlePartnerSelected"/>
<select-user :visible.sync="selectUserVisible" @user-selected="handleUserSelected"/>
</div>
</template> </template>
<style scoped>
.el-form-item .el-select,
.el-form-item .el-date-picker {
width: 100%;
}
</style>
<script> <script>
import { getOrder, addOrder, updateOrder } from "@/api/project/order"; import { getOrder, addOrder, updateOrder } from "@/api/project/order";
import { getDicts } from "@/api/system/dict/data"; import { getDicts } from "@/api/system/dict/data";
import ProductConfig from '@/views/project/info/ProductConfig.vue'; import ProductConfig from '@/views/project/info/ProductConfig.vue';
import SelectAgent from "@/views/system/agent/selectAgent.vue";
import SelectCustomer from "@/views/system/customer/selectCustomer.vue";
import SelectPartner from "@/views/system/partner/selectPartner.vue";
import SelectUser from "@/views/system/user/selectUser.vue";
export default { export default {
name: "OrderDetail", name: "OrderDetail",
components: { components: {
ProductConfig SelectAgent,
SelectCustomer,
SelectPartner,
SelectUser,
ProductConfig,
}, },
props: { props: {
visible: { visible: {
@ -258,6 +293,10 @@ export default {
form: {}, form: {},
// //
internalVisible: this.visible, internalVisible: this.visible,
selectAgentVisible: false,
selectCustomerVisible: false,
selectPartnerVisible: false,
selectUserVisible: false,
// Tab // Tab
activeTab: 'basic', activeTab: 'basic',
// //
@ -314,6 +353,43 @@ export default {
this.getDicts("identify_level").then(response => { this.partnerLevelOptions = response.data; }); this.getDicts("identify_level").then(response => { this.partnerLevelOptions = response.data; });
}, },
methods: { methods: {
handleAgentSelected(agent) {
this.form.agentName = agent.agentName;
this.form.agentCode = agent.agentCode;
this.selectAgentVisible = false;
},
openSelectCustomer() {
this.selectCustomerVisible = true;
},
handleCustomerSelected(customer) {
this.form.customerName = customer.customerName;
this.form.customerCode = customer.customerCode;
this.form.customerUserName = customer.contactPerson;
this.form.customerPhone = customer.contactPhone;
this.selectCustomerVisible = false;
},
openSelectPartner() {
this.selectPartnerVisible = true;
},
handlePartnerSelected(partner) {
this.form.partnerName = partner.partnerName;
this.form.partnerCode = partner.partnerCode;
this.form.partnerUserName = partner.contactPerson;
this.form.level = partner.level;
this.form.partnerPhone = partner.contactPhone;
this.form.partnerEmail = partner.contactEmail;
this.selectPartnerVisible = false;
},
openSelectPeople() {
this.selectUserVisible = true;
},
handleUserSelected(user) {
this.form.dutyName = user.userName;
this.form.duty = user.userId;
this.form.dutyPhone = user.phonenumber;
this.form.dutyEmail = user.email;
this.selectUserVisible = false;
},
// //
handleOpen() { handleOpen() {
this.reset(); this.reset();
@ -357,6 +433,7 @@ export default {
orderCode: null, orderCode: null,
orderEndTime: null, orderEndTime: null,
currencyType: null, currencyType: null,
actualPurchaseAmount: null,
shipmentAmount: null, shipmentAmount: null,
deliveryTime: null, deliveryTime: null,
companyDelivery: '0', companyDelivery: '0',

View File

@ -94,7 +94,7 @@
</el-table-column> </el-table-column>
<el-table-column label="代表处" align="center" prop="agentName" width="100" :show-overflow-tooltip="true"/> <el-table-column label="代表处" align="center" prop="agentName" width="100" :show-overflow-tooltip="true"/>
<el-table-column label="汇智负责人" align="center" prop="dutyName" width="100"/> <el-table-column label="汇智负责人" align="center" prop="dutyName" width="100"/>
<el-table-column label="物流状态" align="center" width="100" />
<el-table-column label="进货商" align="center" prop="partnerName" width="200" :show-overflow-tooltip="true"/> <el-table-column label="进货商" align="center" prop="partnerName" width="200" :show-overflow-tooltip="true"/>
<el-table-column label="到货时间" align="center" prop="deliveryTime" width="200" sortable="custom"> <el-table-column label="到货时间" align="center" prop="deliveryTime" width="200" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">