|
|
|
|
<template>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<basic-crumb></basic-crumb>
|
|
|
|
|
<div class="pageTitle">订单管理</div>
|
|
|
|
|
<!-- 搜索表单区域 -->
|
|
|
|
|
<div class="english_box">
|
|
|
|
|
<el-form :model="searchForm" class="search-form" @submit.prevent>
|
|
|
|
|
<el-row gutter="15">
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
<el-form-item label="订单编号" label-width="140px" prop="code">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="searchForm.code"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
<el-form-item label="订单名称" label-width="140px" prop="name">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="searchForm.name"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="客户名称"
|
|
|
|
|
label-width="140px"
|
|
|
|
|
prop="customerName"
|
|
|
|
|
>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="searchForm.customerName"
|
|
|
|
|
filterable
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in customerList"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:label="item.companyName"
|
|
|
|
|
:value="item.companyName"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
<el-form-item label="状态" label-width="140px" prop="status">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="searchForm.status"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
>
|
|
|
|
|
<!-- 1-草稿 2-审批中 3-通过 4-驳回 5-完成 6-关闭 -->
|
|
|
|
|
<el-option label="全部" value="" />
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in statusList"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:label="item.dictValue"
|
|
|
|
|
:value="item.dictKey"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row :gutter="15">
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
<el-form-item
|
|
|
|
|
label="交货日期"
|
|
|
|
|
label-width="140px"
|
|
|
|
|
prop="deliveryDate"
|
|
|
|
|
>
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="searchForm.deliveryDate"
|
|
|
|
|
type="date"
|
|
|
|
|
placeholder="年/月/日"
|
|
|
|
|
format="yyyy/MM/dd"
|
|
|
|
|
label-width="100px"
|
|
|
|
|
value-format="yyyy/MM/dd"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="18" style="display: flex; justify-content: flex-end">
|
|
|
|
|
<el-button size="small" type="primary" @click="handleSearch" class="el-button--big"
|
|
|
|
|
>搜索</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button size="small" @click="handleReset" class="el-button--big" style="margin:0 40px">清空</el-button>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 功能按钮区域 -->
|
|
|
|
|
<div class="function-btns">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="18">
|
|
|
|
|
<!-- <el-button type="primary" size="mini" @click="handleGenerateContract">
|
|
|
|
|
生成合同
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
size="mini"
|
|
|
|
|
style="background-color: #409eff; border-color: #409eff"
|
|
|
|
|
@click="handleGenerateStockList"
|
|
|
|
|
>
|
|
|
|
|
生成备货明细表
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
size="mini"
|
|
|
|
|
style="background-color: #e6a23c; border-color: #e6a23c"
|
|
|
|
|
@click="handleGenerateDeliveryList"
|
|
|
|
|
>
|
|
|
|
|
生成发货明细表
|
|
|
|
|
</el-button> -->
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="6" style="display: flex; justify-content: flex-end">
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="handleAddOrder"
|
|
|
|
|
class="el-button--big"
|
|
|
|
|
style="margin:0 20px"
|
|
|
|
|
>
|
|
|
|
|
新增订单
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- :row-class-name="tableRowClassName" -->
|
|
|
|
|
<!-- 订单表格区域 -->
|
|
|
|
|
<div class="table-wrapper">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="orderTableData"
|
|
|
|
|
height="100%"
|
|
|
|
|
border
|
|
|
|
|
:style="{ width: '100%'}"
|
|
|
|
|
:loading="isLoading"
|
|
|
|
|
:header-cell-style="{ 'text-align': 'center' }"
|
|
|
|
|
:cell-style="{ 'text-align': 'center' }"
|
|
|
|
|
@selection-change="selectionChange"
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="订单编号" prop="code" width="200"/>
|
|
|
|
|
<el-table-column label="订单名称" prop="name" width="180" />
|
|
|
|
|
<el-table-column label="客户公司名称" prop="customerName" width="220" />
|
|
|
|
|
<el-table-column label="交货日期" prop="deliveryDate" width="160" />
|
|
|
|
|
<el-table-column label="销售价（元）" prop="sellingPrice" width="180"/>
|
|
|
|
|
<el-table-column label="分成金额（元）" prop="splitPrice" width="180"/>
|
|
|
|
|
<el-table-column label="合同价" prop="contractPrice" width="150"/>
|
|
|
|
|
<el-table-column label="已汇金额" prop="remittedAmount" width="150" />
|
|
|
|
|
<el-table-column label="待汇金额" prop="unremittedAmount" width="150"/>
|
|
|
|
|
<el-table-column label="货币单位" width="160">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<!-- 调用方法，传入编码获取名称 -->
|
|
|
|
|
{{ getMonetaryUnitText(scope.row.monetaryUnit) }}
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="订单日期" prop="orderDate" width="170" />
|
|
|
|
|
<el-table-column label="状态" prop="status" width="160">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-tag :type="getStatusTagType(scope.row.status)" class="tag">
|
|
|
|
|
{{ getStatusText(scope.row.status) }}
|
|
|
|
|
</el-tag>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="操作" min-width="300" fixed="right">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<!-- 1-草稿 2-审批中 3-通过 4-驳回 5-完成 6-关闭 -->
|
|
|
|
|
<!-- 草稿状态操作 -->
|
|
|
|
|
<template v-if="scope.row.status == '1'">
|
|
|
|
|
|
|
|
|
|
<el-link type="primary" @click="handleEditOrder(scope.row)"
|
|
|
|
|
>修改</el-link
|
|
|
|
|
>
|
|
|
|
|
<el-link type="primary" @click="handleViewOrderDetail(scope.row)"
|
|
|
|
|
>订单详情</el-link
|
|
|
|
|
>
|
|
|
|
|
<el-link type="primary" @click="handleViewChangeLog(scope.row)" v-if="isSuperAdmin"
|
|
|
|
|
>修改记录</el-link
|
|
|
|
|
>
|
|
|
|
|
<el-link type="primary" @click="handleSubmitReview(scope.row)"
|
|
|
|
|
>提交审批</el-link
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
<!-- 审批中状态操作 -->
|
|
|
|
|
<template v-else-if="scope.row.status == '2'">
|
|
|
|
|
<el-link type="primary" @click="handleViewOrderDetail(scope.row)"
|
|
|
|
|
>订单详情</el-link
|
|
|
|
|
>
|
|
|
|
|
<el-link type="primary" @click="handleViewChangeLog(scope.row)" v-if="isSuperAdmin"
|
|
|
|
|
>修改记录</el-link
|
|
|
|
|
>
|
|
|
|
|
</template>
|
|
|
|
|
<!-- 审批通过状态操作 -->
|
|
|
|
|
<template v-else-if="scope.row.status == '3'">
|
|
|
|
|
<el-link type="primary" @click="handleViewOrderDetail(scope.row)"
|
|
|
|
|
>订单详情</el-link
|
|
|
|
|
>
|
|
|
|
|
<el-link type="primary" @click="handleViewChangeLog(scope.row)" v-if="isSuperAdmin"
|
|
|
|
|
>修改记录</el-link
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<el-link type="primary" @click="handleFinish(scope.row)"
|
|
|
|
|
>订单完成</el-link
|
|
|
|
|
>
|
|
|
|
|
<el-link type="primary" @click="openUploadDialog(scope.row)"
|
|
|
|
|
>上传水单</el-link
|
|
|
|
|
>
|
|
|
|
|
<el-link type="primary" @click="handleViewReceipt(scope.row)" v-if="scope.row.isWaterBill == 1"
|
|
|
|
|
>查看水单</el-link
|
|
|
|
|
>
|
|
|
|
|
</template>
|
|
|
|
|
<!-- 被驳回状态操作 -->
|
|
|
|
|
<template v-else-if="scope.row.status == '4'">
|
|
|
|
|
|
|
|
|
|
<el-link type="primary" @click="handleEditOrder(scope.row)"
|
|
|
|
|
>修改</el-link
|
|
|
|
|
>
|
|
|
|
|
<el-link type="primary" @click="handleViewOrderDetail(scope.row)"
|
|
|
|
|
>订单详情</el-link
|
|
|
|
|
>
|
|
|
|
|
<el-link type="primary" @click="handleViewChangeLog(scope.row)" v-if="isSuperAdmin"
|
|
|
|
|
>修改记录</el-link
|
|
|
|
|
>
|
|
|
|
|
<el-link type="primary" @click="handleCloseOrder(scope.row)"
|
|
|
|
|
>关闭</el-link
|
|
|
|
|
>
|
|
|
|
|
<el-link type="primary" @click="handleResubmitReview(scope.row)"
|
|
|
|
|
>重新提交</el-link
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else-if="scope.row.status == '5'">
|
|
|
|
|
<el-link type="primary" @click="handleViewOrderDetail(scope.row)"
|
|
|
|
|
>订单详情</el-link
|
|
|
|
|
>
|
|
|
|
|
<el-link type="primary" @click="handleViewChangeLog(scope.row)" v-if="isSuperAdmin"
|
|
|
|
|
>修改记录</el-link
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<el-link type="primary" @click="handleViewReceipt(scope.row)" v-if="scope.row.isWaterBill == 1"
|
|
|
|
|
>查看水单</el-link
|
|
|
|
|
>
|
|
|
|
|
</template>
|
|
|
|
|
<!-- 关闭状态操作 -->
|
|
|
|
|
<template v-else-if="scope.row.status == '6'">
|
|
|
|
|
<el-link type="primary" @click="handleViewOrderDetail(scope.row)"
|
|
|
|
|
>订单详情</el-link
|
|
|
|
|
>
|
|
|
|
|
<el-link type="primary" @click="handleViewChangeLog(scope.row)" v-if="isSuperAdmin"
|
|
|
|
|
>修改记录</el-link
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 分页区域 -->
|
|
|
|
|
<el-pagination
|
|
|
|
|
style="display: flex; justify-content: flex-end; margin-top: 10px"
|
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
:current-page="current"
|
|
|
|
|
:page-sizes="[10, 20, 30, 40, 50, 100]"
|
|
|
|
|
:page-size="size"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
:total="total"
|
|
|
|
|
>
|
|
|
|
|
</el-pagination>
|
|
|
|
|
<!-- 上传水单弹窗 -->
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="上传水单"
|
|
|
|
|
:visible.sync="uploadDialogVisible"
|
|
|
|
|
width="500px"
|
|
|
|
|
append-to-body
|
|
|
|
|
>
|
|
|
|
|
<el-form
|
|
|
|
|
ref="uploadFormRef"
|
|
|
|
|
:model="uploadForm"
|
|
|
|
|
:rules="uploadFormRules"
|
|
|
|
|
label-width="140px"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item label="名称:" prop="name">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="uploadForm.name"
|
|
|
|
|
placeholder="请输入名称"
|
|
|
|
|
maxlength="20"
|
|
|
|
|
show-word-limit
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="上传文件:" prop="url" style="width: 300px">
|
|
|
|
|
<el-upload
|
|
|
|
|
class="avatar-uploader"
|
|
|
|
|
ref="upload"
|
|
|
|
|
:action="uploadUrl"
|
|
|
|
|
:headers="uploadHeaders"
|
|
|
|
|
:on-success="handleUploadSuccess"
|
|
|
|
|
:on-error="handleUploadError"
|
|
|
|
|
:on-remove="handleRemoveFile"
|
|
|
|
|
:before-upload="beforeUpload"
|
|
|
|
|
:on-exceed="handleExceed"
|
|
|
|
|
accept=".jpg,.jpeg,.png"
|
|
|
|
|
:limit="1"
|
|
|
|
|
:show-file-list="false"
|
|
|
|
|
>
|
|
|
|
|
<!-- 有图片时显示图片 + 删除按钮 -->
|
|
|
|
|
<div v-if="uploadForm.url" class="avatar-container">
|
|
|
|
|
<img :src="uploadForm.url" class="avatar" />
|
|
|
|
|
<!-- 删除按钮：悬浮显示 -->
|
|
|
|
|
<div class="avatar-delete" @click.stop="handleRemoveFile()">
|
|
|
|
|
<i class="el-icon-delete"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 无图片时显示加号 -->
|
|
|
|
|
<div v-else class="upload-icon-container">
|
|
|
|
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</el-upload>
|
|
|
|
|
<!-- <div style="font-size: 12px; color: #999; margin-top: 5px">
|
|
|
|
|
提示：仅支持jpg/jpeg/png格式，文件大小不超过2MB
|
|
|
|
|
</div> -->
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button
|
|
|
|
|
class="el-button--big"
|
|
|
|
|
@click="
|
|
|
|
|
uploadDialogVisible = false;
|
|
|
|
|
resetUpload;
|
|
|
|
|
"
|
|
|
|
|
>取消</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button type="primary" @click="confirmUpload" class="el-button--big" style="margin-left:0 20px"> 确认上传</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import basicCrumb from "@/components/basic-crumb/main";
|
|
|
|
|
import {
|
|
|
|
|
getCurrencyList,
|
|
|
|
|
} from "@/api/order/orderAddEdit";
|
|
|
|
|
import { mapGetters } from "vuex";
|
|
|
|
|
import website from "@/config/website";
|
|
|
|
|
import { getToken } from "@/util/auth";
|
|
|
|
|
import { Base64 } from "js-base64";
|
|
|
|
|
import {
|
|
|
|
|
getCustomerList,
|
|
|
|
|
fetchOrderList,
|
|
|
|
|
finishOrder,
|
|
|
|
|
saveWaterBill,
|
|
|
|
|
getOrderStatus,
|
|
|
|
|
updateOrder,
|
|
|
|
|
} from "@/api/order/orderList";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "OrderManagement",
|
|
|
|
|
components: {
|
|
|
|
|
basicCrumb,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 搜索表单
|
|
|
|
|
searchForm: {},
|
|
|
|
|
// 客户列表（下拉选项）
|
|
|
|
|
customerList: [],
|
|
|
|
|
// 订单表格数据
|
|
|
|
|
orderTableData: [],
|
|
|
|
|
// 分页信息
|
|
|
|
|
total: 0,
|
|
|
|
|
current: 1,
|
|
|
|
|
size: 10,
|
|
|
|
|
// 加载状态
|
|
|
|
|
isLoading: false,
|
|
|
|
|
uploadDialogVisible: false,
|
|
|
|
|
uploadUrl: "/api/blade-resource/oss/endpoint/put-file-attach",
|
|
|
|
|
uploadHeaders: {
|
|
|
|
|
authorization: `Basic ${Base64.encode(
|
|
|
|
|
`${website.clientId}:${website.clientSecret}`
|
|
|
|
|
)}`,
|
|
|
|
|
"blade-auth": "bearer " + getToken(),
|
|
|
|
|
},
|
|
|
|
|
fileList: [],
|
|
|
|
|
currentOrder: null,
|
|
|
|
|
uploadForm: {
|
|
|
|
|
name: "",
|
|
|
|
|
url: "",
|
|
|
|
|
},
|
|
|
|
|
uploadFormRules: {
|
|
|
|
|
name: [
|
|
|
|
|
{ required: true, message: "请输入名称", trigger: "blur" },
|
|
|
|
|
{
|
|
|
|
|
min: 1,
|
|
|
|
|
max: 50,
|
|
|
|
|
message: "名称长度在 1 到 50 个字符",
|
|
|
|
|
trigger: "blur",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
url: [{ required: true, message: "请上传水单文件", trigger: "change" }],
|
|
|
|
|
},
|
|
|
|
|
// 状态映射常量（统一管理） 1-草稿 2-审批中 3-通过 4-驳回 5-完成 6-关闭
|
|
|
|
|
statusConfig: {
|
|
|
|
|
1: { text: "草稿", tagType: "info" },
|
|
|
|
|
2: { text: "审批中", tagType: "warning" },
|
|
|
|
|
3: { text: "进行中", tagType: "processing" },
|
|
|
|
|
4: { text: "驳回", tagType: "danger" },
|
|
|
|
|
5: { text: "完成", tagType: "success" },
|
|
|
|
|
6: { text: "关闭", tagType: "gray" },
|
|
|
|
|
},
|
|
|
|
|
monetaryUnitList:[]
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.loadCurrencyList();
|
|
|
|
|
// 初始化页面：加载客户列表 + 订单列表
|
|
|
|
|
this.loadCustomerList();
|
|
|
|
|
this.loadOrderList();
|
|
|
|
|
// console.log("this.$route--------订单管理-", this.$route);
|
|
|
|
|
// console.log("this.routeData---------订单管理", this.routeData);
|
|
|
|
|
let arr = [{ name: "工作台", url: "/wel" }];
|
|
|
|
|
this.$store.commit("SET_ROUTE_DATA", arr);
|
|
|
|
|
this.loadStatusList();
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
...mapGetters(["routeData","userInfo"]),
|
|
|
|
|
isSuperAdmin() {
|
|
|
|
|
// 将角色字符串按逗号分割成数组
|
|
|
|
|
const userRoles = this.userInfo.role_name.split(',').map(role => role.trim())
|
|
|
|
|
// 允许的角色列表
|
|
|
|
|
const allowedRoles = ['administrator', 'jinchao']
|
|
|
|
|
// 检查用户角色是否包含允许的角色
|
|
|
|
|
return userRoles.some(role => allowedRoles.includes(role))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 加载货币单位列表
|
|
|
|
|
async loadCurrencyList() {
|
|
|
|
|
try {
|
|
|
|
|
const res = await getCurrencyList();
|
|
|
|
|
if (res.data.code === 200) {
|
|
|
|
|
this.monetaryUnitList = res.data.data || [];
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {
|
|
|
|
|
this.$message.error("网络异常，无法加载货币单位列表");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getMonetaryUnitText(code) {
|
|
|
|
|
|
|
|
|
|
if (!code) return "-";
|
|
|
|
|
const unitItem = this.monetaryUnitList.find(item => item.dictKey === code);
|
|
|
|
|
// 匹配到返回名称，未匹配到返回原编码（避免显示空白）
|
|
|
|
|
return unitItem ? unitItem.dictValue : code;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 加载订单列表
|
|
|
|
|
async loadOrderList() {
|
|
|
|
|
this.isLoading = true;
|
|
|
|
|
try {
|
|
|
|
|
// 构造请求参数
|
|
|
|
|
const params = {
|
|
|
|
|
...this.searchForm,
|
|
|
|
|
current: this.current,
|
|
|
|
|
size: this.size,
|
|
|
|
|
};
|
|
|
|
|
const res = await fetchOrderList(params);
|
|
|
|
|
// console.log("res1111", res);
|
|
|
|
|
// console.log("code", res.data.code);
|
|
|
|
|
|
|
|
|
|
if (res.data.code === 200) {
|
|
|
|
|
const records = res.data.data.records || [];
|
|
|
|
|
this.orderTableData = records.map((item) => ({
|
|
|
|
|
...item,
|
|
|
|
|
status: item.status,
|
|
|
|
|
statusText: this.getStatusText(item.status),
|
|
|
|
|
}));
|
|
|
|
|
// 更新分页信息
|
|
|
|
|
this.total = res.data.data.total;
|
|
|
|
|
console.log("orderTableData", this.orderTableData);
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {
|
|
|
|
|
console.log("err", err);
|
|
|
|
|
} finally {
|
|
|
|
|
this.isLoading = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async loadStatusList() {
|
|
|
|
|
try {
|
|
|
|
|
this.statusLoading = true;
|
|
|
|
|
// 调用获取状态列表的接口（可根据需求传参）
|
|
|
|
|
const res = await getOrderStatus();
|
|
|
|
|
if (res.data.code === 200) {
|
|
|
|
|
this.statusList = res.data.data || [];
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.warning("获取订单状态列表失败：" + res.data.msg);
|
|
|
|
|
this.statusList = [];
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {
|
|
|
|
|
console.error("获取订单状态列表异常：", err);
|
|
|
|
|
this.$message.error("获取订单状态列表失败，请重试");
|
|
|
|
|
} finally {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 搜索订单
|
|
|
|
|
handleSearch() {
|
|
|
|
|
this.current = 1;
|
|
|
|
|
this.size = 10;
|
|
|
|
|
this.loadOrderList();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 清空搜索条件
|
|
|
|
|
handleReset() {
|
|
|
|
|
this.searchForm = {};
|
|
|
|
|
this.current = 1;
|
|
|
|
|
this.size = 10;
|
|
|
|
|
this.loadOrderList();
|
|
|
|
|
},
|
|
|
|
|
tableRowClassName({ row, rowIndex }) {
|
|
|
|
|
// 偶数行添加 alternate-row 类名
|
|
|
|
|
if (rowIndex % 2 === 1) {
|
|
|
|
|
return "alternate-row";
|
|
|
|
|
}
|
|
|
|
|
return "";
|
|
|
|
|
},
|
|
|
|
|
loadCustomerList() {
|
|
|
|
|
getCustomerList({
|
|
|
|
|
current: 1,
|
|
|
|
|
size: 10000000,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
// this.tableData = res.data.data.records
|
|
|
|
|
this.customerList = res.data.data.records || [];
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
async handleFinish(row) {
|
|
|
|
|
try {
|
|
|
|
|
// 点击完成的时候如果待汇不是0 需要提醒一下待汇不为0，是否完成此订单 如果待汇是0 提醒是否完成此订单
|
|
|
|
|
const unremittedAmount = Number(row.unremittedAmount) || 0;
|
|
|
|
|
// 2. 不同场景的确认提示
|
|
|
|
|
let confirmMessage = "";
|
|
|
|
|
if (unremittedAmount !== 0) {
|
|
|
|
|
confirmMessage = `当前订单待汇金额不为0，是否确认完成此订单？`;
|
|
|
|
|
} else {
|
|
|
|
|
confirmMessage = "是否确认完成此订单？";
|
|
|
|
|
}
|
|
|
|
|
// 3. 确认框
|
|
|
|
|
await this.$confirm(confirmMessage, "订单完成确认", {
|
|
|
|
|
type: "warning",
|
|
|
|
|
confirmButtonText: "确认",
|
|
|
|
|
cancelButtonText: "取消",
|
|
|
|
|
});
|
|
|
|
|
// 4. 调用完成订单接口
|
|
|
|
|
const res = await finishOrder({ id: row.id, status: 5 });
|
|
|
|
|
if (res.data.code === 200) {
|
|
|
|
|
this.$message.success("操作成功！");
|
|
|
|
|
this.loadOrderList(); // 刷新列表
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.data.msg || "订单完成失败");
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {
|
|
|
|
|
console.log('err',err)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 打开上传水单弹窗
|
|
|
|
|
openUploadDialog(row) {
|
|
|
|
|
this.currentOrder = row;
|
|
|
|
|
this.uploadDialogVisible = true;
|
|
|
|
|
// 重置表单和文件
|
|
|
|
|
this.resetUpload();
|
|
|
|
|
},
|
|
|
|
|
// 上传前校验
|
|
|
|
|
beforeUpload(file) {
|
|
|
|
|
const isImageOrPdf =
|
|
|
|
|
file.type === "image/jpeg" ||
|
|
|
|
|
file.type === "image/png"
|
|
|
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
|
|
if (!isImageOrPdf) {
|
|
|
|
|
this.$message.error("只能上传图片！");
|
|
|
|
|
}
|
|
|
|
|
if (!isLt2M) {
|
|
|
|
|
this.$message.error("文件大小不能超过2MB！");
|
|
|
|
|
}
|
|
|
|
|
return isImageOrPdf && isLt2M;
|
|
|
|
|
},
|
|
|
|
|
// 新增：文件超出数量限制
|
|
|
|
|
handleExceed(files, fileList) {
|
|
|
|
|
// this.$message.warning(`最多只能上传1个文件`);
|
|
|
|
|
},
|
|
|
|
|
// 上传成功
|
|
|
|
|
handleUploadSuccess(response, file, fileList) {
|
|
|
|
|
console.log("response", response, file, fileList);
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
// this.$message.success("文件上传成功");
|
|
|
|
|
// 保存文件链接
|
|
|
|
|
this.uploadForm.url = response.data.link;
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(response.msg || "文件上传失败");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 上传失败
|
|
|
|
|
handleUploadError(err, file, fileList) {
|
|
|
|
|
this.$message.error("网络异常，上传失败");
|
|
|
|
|
},
|
|
|
|
|
// 移除文件
|
|
|
|
|
handleRemoveFile(file, fileList) {
|
|
|
|
|
// 清空上传表单的url
|
|
|
|
|
this.uploadForm.url = "";
|
|
|
|
|
// 清空fileList
|
|
|
|
|
this.fileList = [];
|
|
|
|
|
// 手动清空上传组件的文件列表
|
|
|
|
|
if (this.$refs.upload) {
|
|
|
|
|
this.$refs.upload.clearFiles();
|
|
|
|
|
}
|
|
|
|
|
// 提示（可选）
|
|
|
|
|
// this.$message.info("已移除上传的文件");
|
|
|
|
|
},
|
|
|
|
|
// 重置上传表单和文件
|
|
|
|
|
resetUpload() {
|
|
|
|
|
if (this.$refs.uploadFormRef) {
|
|
|
|
|
this.$refs.uploadFormRef.resetFields();
|
|
|
|
|
}
|
|
|
|
|
if (this.$refs.upload) {
|
|
|
|
|
this.$refs.upload.clearFiles();
|
|
|
|
|
}
|
|
|
|
|
this.fileList = [];
|
|
|
|
|
this.uploadForm = {
|
|
|
|
|
name: "",
|
|
|
|
|
url: "",
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
// 确认上传
|
|
|
|
|
async confirmUpload() {
|
|
|
|
|
try {
|
|
|
|
|
await this.$refs.uploadFormRef.validate();
|
|
|
|
|
|
|
|
|
|
if (!this.uploadForm.url) {
|
|
|
|
|
this.$message.warning("文件上传失败，请重新上传");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 第三步：调用接口保存文件
|
|
|
|
|
const res = await saveWaterBill({
|
|
|
|
|
orderId: this.currentOrder.id,
|
|
|
|
|
name: this.uploadForm.name,
|
|
|
|
|
url: this.uploadForm.url, //
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (res.data.code === 200) {
|
|
|
|
|
this.$message.success("水单上传成功");
|
|
|
|
|
this.uploadDialogVisible = false;
|
|
|
|
|
this.resetUpload();
|
|
|
|
|
this.loadOrderList(); // 刷新列表
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.msg || "保存失败");
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
// 表单校验失败
|
|
|
|
|
console.error("表单校验失败：", error);
|
|
|
|
|
this.$message.warning("请填写完整的表单信息");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 生成合同
|
|
|
|
|
handleGenerateContract() {
|
|
|
|
|
this.$message.info("生成合同功能待实现");
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 生成备货明细表
|
|
|
|
|
handleGenerateStockList() {
|
|
|
|
|
this.$message.info("生成备货明细表功能待实现");
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 生成发货明细表
|
|
|
|
|
handleGenerateDeliveryList() {
|
|
|
|
|
this.$message.info("生成发货明细表功能待实现");
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 新增订单
|
|
|
|
|
handleAddOrder() {
|
|
|
|
|
this.$router.push({
|
|
|
|
|
path: "/order/addEdit",
|
|
|
|
|
query: {
|
|
|
|
|
mode: "add"
|
|
|
|
|
}
|
|
|
|
|
}); // 跳转到新增页面
|
|
|
|
|
|
|
|
|
|
let arr = [...this.routeData, { name: "订单管理", url: "/order" }];
|
|
|
|
|
this.$store.commit("SET_ROUTE_DATA", arr);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 编辑订单
|
|
|
|
|
handleEditOrder(row) {
|
|
|
|
|
this.$router.push({
|
|
|
|
|
path: `/order/addEdit`, // 带订单ID跳转到编辑页面
|
|
|
|
|
query: {
|
|
|
|
|
id: row.id,
|
|
|
|
|
mode: "edit",
|
|
|
|
|
see:true
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
let arr = [...this.routeData, { name: "订单管理", url: "/order" }];
|
|
|
|
|
this.$store.commit("SET_ROUTE_DATA", arr);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 查看修改记录
|
|
|
|
|
handleViewChangeLog(row) {
|
|
|
|
|
this.$router.push({
|
|
|
|
|
path: "/order/orderChangeLog",
|
|
|
|
|
query: { code: row.code },
|
|
|
|
|
see:true
|
|
|
|
|
});
|
|
|
|
|
let arr = [...this.routeData, { name: "订单管理", url: "/order" }];
|
|
|
|
|
this.$store.commit("SET_ROUTE_DATA", arr);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 提交审核
|
|
|
|
|
async handleSubmitReview(row) {
|
|
|
|
|
try {
|
|
|
|
|
await this.$confirm("确定将订单提交审批吗？", "提示", {
|
|
|
|
|
type: "danger",
|
|
|
|
|
});
|
|
|
|
|
const res = await updateOrder({
|
|
|
|
|
id: row.id,
|
|
|
|
|
status: 2,
|
|
|
|
|
});
|
|
|
|
|
if (res.data.code === 200) {
|
|
|
|
|
this.$message.success("订单提交审批成功");
|
|
|
|
|
this.loadOrderList(); // 刷新订单列表
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error("订单提交审批失败");
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 关闭订单
|
|
|
|
|
async handleCloseOrder(row) {
|
|
|
|
|
try {
|
|
|
|
|
await this.$confirm("确定关闭该订单吗？关闭后将无法继续操作", "警告", {
|
|
|
|
|
type: "danger",
|
|
|
|
|
});
|
|
|
|
|
const res = await updateOrder({
|
|
|
|
|
id: row.id,
|
|
|
|
|
status: 6,
|
|
|
|
|
});
|
|
|
|
|
if (res.data.code === 200) {
|
|
|
|
|
this.$message.success("订单关闭成功");
|
|
|
|
|
this.loadOrderList(); // 刷新订单列表
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error("关闭订单失败");
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 重新提交审核
|
|
|
|
|
async handleResubmitReview(row) {
|
|
|
|
|
try {
|
|
|
|
|
await this.$confirm("确定将订单重新提交吗？", "提示", {
|
|
|
|
|
type: "danger",
|
|
|
|
|
});
|
|
|
|
|
const res = await updateOrder({
|
|
|
|
|
id: row.id,
|
|
|
|
|
status: 2,
|
|
|
|
|
});
|
|
|
|
|
if (res.data.code === 200) {
|
|
|
|
|
this.$message.success("订单重新提交成功");
|
|
|
|
|
this.loadOrderList(); // 刷新订单列表
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error("订单重新提交失败");
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 查看水单
|
|
|
|
|
handleViewReceipt(row) {
|
|
|
|
|
let arr = [...this.routeData, { name: "订单管理", url: "/order" }];
|
|
|
|
|
this.$store.commit("SET_ROUTE_DATA", arr);
|
|
|
|
|
this.$router.push({
|
|
|
|
|
path: "/order/bankReceiptDetail",
|
|
|
|
|
query: { id: row.id },
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 查看订单详情
|
|
|
|
|
handleViewOrderDetail(row) {
|
|
|
|
|
let arr = [...this.routeData, { name: "订单管理", url: "/order" }];
|
|
|
|
|
this.$store.commit("SET_ROUTE_DATA", arr);
|
|
|
|
|
this.$router.push({
|
|
|
|
|
path: `/order/addEdit`, // 带订单ID跳转到详情页面
|
|
|
|
|
query: {
|
|
|
|
|
id: row.id,
|
|
|
|
|
mode: "view",
|
|
|
|
|
see:true
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 根据状态编码获取状态文本（统一使用statusConfig）
|
|
|
|
|
getStatusText(status) {
|
|
|
|
|
return this.statusConfig[status] && this.statusConfig[status].text
|
|
|
|
|
? this.statusConfig[status].text
|
|
|
|
|
: "未知状态";
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 根据状态获取标签类型（统一使用statusConfig）
|
|
|
|
|
getStatusTagType(status) {
|
|
|
|
|
return this.statusConfig[status] && this.statusConfig[status].tagType
|
|
|
|
|
? this.statusConfig[status].tagType
|
|
|
|
|
: "gray";
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 分页：每页条数变更
|
|
|
|
|
handleSizeChange(val) {
|
|
|
|
|
this.size = val;
|
|
|
|
|
this.loadOrderList();
|
|
|
|
|
},
|
|
|
|
|
// 分页：当前页变更
|
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
this.current = val;
|
|
|
|
|
this.loadOrderList();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
@import '@/styles/variables.scss';
|
|
|
|
|
.container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height:calc(100% - 8px);
|
|
|
|
|
background: rgb(255, 255, 255);
|
|
|
|
|
// margin: 0 auto;
|
|
|
|
|
margin-top: 8px;
|
|
|
|
|
padding: 20px !important;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 页面标题
|
|
|
|
|
.pageTitle{
|
|
|
|
|
// font-size: 26px;
|
|
|
|
|
font-size:$font-size-title;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.table-wrapper {
|
|
|
|
|
flex: 1;
|
|
|
|
|
// max-height: 600px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.english_box {
|
|
|
|
|
width: 98%;
|
|
|
|
|
padding: 10px 10px 0 10px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
|
|
|
|
&.info_box {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top_box {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
border-bottom: 1px solid #ccc;
|
|
|
|
|
|
|
|
|
|
&.info_top {
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.info_top {
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top_left {
|
|
|
|
|
// font-size: 26px;
|
|
|
|
|
font-size: 1.4vw;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top_bottom {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
|
|
|
|
.el-col {
|
|
|
|
|
margin-bottom: 0px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 功能按钮
|
|
|
|
|
.function-btns {
|
|
|
|
|
margin: 8px 0;
|
|
|
|
|
|
|
|
|
|
.el-button {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .el-link {
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
font-size: 23px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .alternate-row {
|
|
|
|
|
background-color: #f2f2f2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .el-tag {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
font-size: $font-size-24 !important;
|
|
|
|
|
// width: 8vw;
|
|
|
|
|
// height: 2.6vw;
|
|
|
|
|
padding: 20px !important;
|
|
|
|
|
// color: #ccc;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
// 上传水单样式
|
|
|
|
|
.avatar-uploader-wrap {
|
|
|
|
|
width: 178px;
|
|
|
|
|
height: 178px;
|
|
|
|
|
}
|
|
|
|
|
.avatar-uploader .el-upload {
|
|
|
|
|
width: 178px;
|
|
|
|
|
height: 178px;
|
|
|
|
|
border: 1px dashed #d9d9d9;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background: #fbfdff;
|
|
|
|
|
}
|
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
|
|
|
border-color: #409eff;
|
|
|
|
|
}
|
|
|
|
|
.upload-icon-container {
|
|
|
|
|
width: 178px;
|
|
|
|
|
height: 178px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
.avatar-uploader-icon {
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
color: #8c939d;
|
|
|
|
|
}
|
|
|
|
|
.avatar-container {
|
|
|
|
|
width: 178px;
|
|
|
|
|
height: 178px;
|
|
|
|
|
position: relative; // 新增：为删除按钮定位
|
|
|
|
|
}
|
|
|
|
|
.avatar {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: block;
|
|
|
|
|
// object-fit: cover; // 图片自适应
|
|
|
|
|
}
|
|
|
|
|
// 新增：删除按钮样式
|
|
|
|
|
.avatar-delete {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
|
|
color: #fff;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
display: none; // 默认隐藏
|
|
|
|
|
border-radius: 0 6px 0 0;
|
|
|
|
|
}
|
|
|
|
|
.avatar-container:hover .avatar-delete {
|
|
|
|
|
display: block; // 悬浮显示
|
|
|
|
|
}
|
|
|
|
|
</style>
|
