feat(order): 新增订单财务管理功能
- 添加更新订单财务状态的API接口 - 创建订单财务页面，支持订单查询和筛选 - 实现订单财务状态的更新操作 - 添加订单导出功能 - 集成项目和订单详情抽屉组件 - 支持多种时间类型的筛选条件- 实现金额格式化显示过滤器dev_1.0.0
chenhao
parent
87e199ab4b
commit
0e764c997b
|
|
@ -70,3 +70,16 @@ export function uploadContractFile(data) {
|
|||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
})
|
||||
}
|
||||
|
||||
// 更新订单财务状态
|
||||
export function updateFinanceStatus(id, status) {
|
||||
const data = {
|
||||
id,
|
||||
financeStatus: status
|
||||
}
|
||||
return request({
|
||||
url: '/project/order/finance/update',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,345 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
|
||||
<el-form-item label="项目编号" prop="projectCode">
|
||||
<el-input
|
||||
v-model="queryParams.projectCode"
|
||||
placeholder="请输入项目编号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目名称" prop="projectName">
|
||||
<el-input
|
||||
v-model="queryParams.projectName"
|
||||
placeholder="请输入项目名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="合同编号" prop="orderCode">
|
||||
<el-input
|
||||
v-model="queryParams.orderCode"
|
||||
placeholder="请输入合同编号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="最终客户" prop="customerName">
|
||||
<el-input
|
||||
v-model="queryParams.customerName"
|
||||
placeholder="请输入最终客户"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单状态" prop="orderStatus">
|
||||
<el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.order_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="代表处" prop="agentName">
|
||||
<el-input
|
||||
v-model="queryParams.agentName"
|
||||
placeholder="请输入代表处"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="汇智负责人" prop="dutyName">
|
||||
<el-input
|
||||
v-model="queryParams.dutyName"
|
||||
placeholder="请输入汇智负责人"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="进货商" prop="partnerName">
|
||||
<el-input
|
||||
v-model="queryParams.partnerName"
|
||||
placeholder="请输入进货商"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="完结状态" prop="financeStatus">
|
||||
<el-select v-model="queryParams.financeStatus" placeholder="请选择完结状态" clearable>
|
||||
<el-option label="未完结" value="0" />
|
||||
<el-option label="已完结" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间选择" prop="timeType">
|
||||
<el-select v-model="queryParams.timeType" @change="changeTimeType">
|
||||
<el-option label="到货时间" value="0" />
|
||||
<el-option label="下单时间" value="1" />
|
||||
<el-option label="执行单截止时间" value="2" />
|
||||
<el-option label="归档时间" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-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="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['project:order:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="项目编号" prop="projectCode" width="120" />
|
||||
<el-table-column label="项目名称" prop="projectName" width="300" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<a @click="handleViewProject(scope.row)" class="link-type">{{ scope.row.projectName }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="合同编号" prop="orderCode" width="200" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<span class="link-type" @click="handleViewOrder(scope.row)">{{ scope.row.orderCode }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="最终客户" prop="customerName" width="200" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="金额(¥)" prop="actualPurchaseAmount" width="120" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ (scope.row.orderStatus == 1 || scope.row.orderStatus == 2) ? scope.row.actualPurchaseAmount : scope.row.shipmentAmount | formatAmount }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="订单状态" prop="orderStatus" width="100">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.order_status" :value="scope.row.orderStatus"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="完结状态" prop="financeStatus" width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.financeStatus == '1' ? '完结' : '未完结' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="代表处" prop="agentName" width="120" />
|
||||
<el-table-column label="汇智负责人" prop="dutyName" width="120" />
|
||||
<el-table-column label="物流状态" width="100" />
|
||||
<el-table-column label="进货商" prop="partnerName" width="200" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="到货时间" prop="deliveryTime" width="180" sortable/>
|
||||
<el-table-column label="下单时间" prop="estimatedOrderTime" width="180" sortable/>
|
||||
<el-table-column label="执行单截止时间" prop="orderEndTime" width="180" sortable/>
|
||||
<el-table-column label="归档时间" prop="approveTime" width="180" sortable/>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="scope.row.financeStatus != '1'"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdateFinanceStatus(scope.row, '1')"
|
||||
>完结</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"
|
||||
/>
|
||||
|
||||
<!-- 项目详情抽屉 -->
|
||||
<project-detail-drawer :visible.sync="projectDrawerVisible" :project-id="currentProjectId" />
|
||||
|
||||
<!-- 订单详情抽屉 -->
|
||||
<order-detail-drawer :visible.sync="orderDrawerVisible" :order-id="currentOrderId" title="订单详情" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listOrder, updateFinanceStatus } from "@/api/project/order";
|
||||
import ProjectDetailDrawer from '../info/ProjectDetailDrawer.vue';
|
||||
import OrderDetailDrawer from './OrderDetailDrawer.vue';
|
||||
|
||||
export default {
|
||||
name: "OrderFinance",
|
||||
components: {
|
||||
ProjectDetailDrawer,
|
||||
OrderDetailDrawer
|
||||
},
|
||||
dicts: ['order_status'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 订单管理表格数据
|
||||
orderList: [],
|
||||
// 日期范围
|
||||
dateRange: [],
|
||||
// --- 抽屉控制 ---
|
||||
projectDrawerVisible: false,
|
||||
orderDrawerVisible: false,
|
||||
currentProjectId: null,
|
||||
currentOrderId: null,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
projectCode: null,
|
||||
projectName: null,
|
||||
orderCode: null,
|
||||
customerName: null,
|
||||
orderStatus: '2',
|
||||
agentName: null,
|
||||
dutyName: null,
|
||||
partnerName: null,
|
||||
financeStatus: '0',
|
||||
timeType: '0',
|
||||
deliveryTimeStart: null,
|
||||
deliveryTimeEnd: null,
|
||||
estimatedOrderTimeStart: null,
|
||||
estimatedOrderTimeEnd: null,
|
||||
orderEndTimeStart: null,
|
||||
orderEndTimeEnd: null,
|
||||
approveTimeStart: null,
|
||||
approveTimeEnd: null,
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询订单管理列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
this.addDateRange(this.queryParams, this.dateRange);
|
||||
this.changeTimeType(); // Ensure correct date params are set
|
||||
listOrder(this.queryParams).then(response => {
|
||||
this.orderList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.dateRange = [];
|
||||
this.resetForm("queryForm");
|
||||
this.queryParams.financeStatus = '0';
|
||||
this.queryParams.timeType = '0';
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 完结按钮操作 */
|
||||
handleUpdateFinanceStatus(row, status) {
|
||||
this.$modal.confirm('确认要将此订单设置为"' + (status === '1' ? '完结' : '未完结') + '"状态吗？').then(function() {
|
||||
return updateFinanceStatus(row.id, status);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("操作成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.addDateRange(this.queryParams, this.dateRange);
|
||||
this.changeTimeType();
|
||||
this.download('/project/order/finance/export', {
|
||||
...this.queryParams
|
||||
}, `order_finance_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
/** 时间选择类型切换 */
|
||||
changeTimeType() {
|
||||
// Clear all date params first
|
||||
this.queryParams.deliveryTimeStart = null;
|
||||
this.queryParams.deliveryTimeEnd = null;
|
||||
this.queryParams.estimatedOrderTimeStart = null;
|
||||
this.queryParams.estimatedOrderTimeEnd = null;
|
||||
this.queryParams.orderEndTimeStart = null;
|
||||
this.queryParams.orderEndTimeEnd = null;
|
||||
this.queryParams.approveTimeStart = null;
|
||||
this.queryParams.approveTimeEnd = null;
|
||||
|
||||
if (this.dateRange && this.dateRange.length === 2) {
|
||||
const [start, end] = this.dateRange;
|
||||
const timeType = this.queryParams.timeType;
|
||||
if (timeType == 0) {
|
||||
this.queryParams.deliveryTimeStart = start;
|
||||
this.queryParams.deliveryTimeEnd = end;
|
||||
} else if (timeType == 1) {
|
||||
this.queryParams.estimatedOrderTimeStart = start;
|
||||
this.queryParams.estimatedOrderTimeEnd = end;
|
||||
} else if (timeType == 2) {
|
||||
this.queryParams.orderEndTimeStart = start;
|
||||
this.queryParams.orderEndTimeEnd = end;
|
||||
} else if (timeType == 3) {
|
||||
this.queryParams.approveTimeStart = start;
|
||||
this.queryParams.approveTimeEnd = end;
|
||||
}
|
||||
}
|
||||
},
|
||||
/** 查看项目详情 */
|
||||
handleViewProject(row) {
|
||||
this.currentProjectId = row.projectId;
|
||||
this.projectDrawerVisible = true;
|
||||
},
|
||||
/** 查看订单详情 */
|
||||
handleViewOrder(row) {
|
||||
this.currentOrderId = row.id;
|
||||
this.orderDrawerVisible = true;
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
formatAmount(value) {
|
||||
if (value === null || value === undefined) return '';
|
||||
return parseFloat(value).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dateRange() {
|
||||
this.changeTimeType();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue