You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1010 lines
29 KiB
1010 lines
29 KiB
<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="销售价（元）" width="200"> |
|
<template #default="scope"> |
|
{{ formatPrice(scope.row.sellingPrice) }} |
|
</template> |
|
</el-table-column> |
|
<!-- 分成金额：千位分隔符格式化 --> |
|
<el-table-column label="分成金额（元）" width="220"> |
|
<template #default="scope"> |
|
{{ formatPrice(scope.row.splitPrice) }} |
|
</template> |
|
</el-table-column> |
|
<!-- 合同价：千位分隔符格式化 --> |
|
<el-table-column label="合同价" width="150"> |
|
<template #default="scope"> |
|
{{ formatPrice(scope.row.contractPrice) }} |
|
</template> |
|
</el-table-column> |
|
<!-- 已汇金额：千位分隔符格式化 --> |
|
<el-table-column label="已汇金额" width="150"> |
|
<template #default="scope"> |
|
{{ formatPrice(scope.row.remittedAmount) }} |
|
</template> |
|
</el-table-column> |
|
<!-- 待汇金额：千位分隔符格式化 --> |
|
<el-table-column label="待汇金额" width="150"> |
|
<template #default="scope"> |
|
{{ formatPrice(scope.row.unremittedAmount) }} |
|
</template> |
|
</el-table-column> |
|
<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 |
|
> |
|
<avue-form |
|
ref="uploadFormRef" |
|
:option="uploadFormOption" |
|
v-model="uploadForm" |
|
@submit="handleUploadSubmit" |
|
></avue-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
<el-button |
|
class="el-button--big" |
|
@click="uploadDialogVisible = false; resetUpload();" |
|
>取消</el-button |
|
> |
|
<el-button type="primary" @click="submitAvueForm" 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: [], |
|
uploadFormOption: { |
|
// 禁用Avue自带的提交按钮（用自定义底部按钮） |
|
submitBtn: false, |
|
emptyBtn: false, |
|
labelWidth: 140, |
|
column: [ |
|
{ |
|
label: "名称", |
|
prop: "name", |
|
span: 22, |
|
row: true, |
|
maxlength: 20, |
|
showWordLimit: true, |
|
rules: [ |
|
{ required: true, message: "请输入名称", trigger: "blur" }, |
|
{ min: 1, max: 50, message: "名称长度在 1 到 50 个字符", trigger: "blur" } |
|
] |
|
}, |
|
|
|
{ |
|
label: '上传文件', |
|
type: 'upload', |
|
listType: 'picture-img', |
|
propsHttp: { |
|
res: 'data', |
|
url: 'link', |
|
}, |
|
canvasOption: { |
|
text: ' ', |
|
ratio: 0.1 |
|
}, |
|
action: '/api/blade-resource/oss/endpoint/put-file-attach', |
|
tip: '只能上传jpg/png图片，且不超过500kb', |
|
span: 24, |
|
row: true, |
|
|
|
prop: 'url', |
|
rules: [ |
|
{ required: true, message: "请上传文件", trigger: "blur" }, |
|
|
|
] |
|
} |
|
] |
|
}, |
|
// Avue Form绑定的表单数据 |
|
uploadForm: { |
|
name: "", |
|
url: "" |
|
} |
|
}; |
|
}, |
|
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: { |
|
// 🌟 新增：金额格式化函数（千位分隔符 + 两位小数） |
|
formatPrice(price) { |
|
// 处理空值、0、非数字情况 |
|
if (!price || isNaN(Number(price))) { |
|
return "0.00"; |
|
} |
|
// 先转为数字，再移除可能的千位分隔符 |
|
const rawPrice = Number(price.toString().replace(/,/g, "")); |
|
// 格式化：千位分隔符 + 强制保留两位小数 |
|
return rawPrice.toLocaleString("zh-CN", { |
|
minimumFractionDigits: 2, |
|
maximumFractionDigits: 2, |
|
}); |
|
}, |
|
// 加载货币单位列表 |
|
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().then((res) => { |
|
// this.tableData = res.data.data.records |
|
console.log("res.data.data.records",res.data.data) |
|
this.customerList = res.data.data || []; |
|
}); |
|
}, |
|
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(); |
|
}, |
|
|
|
// 新增：文件超出数量限制 |
|
handleExceed(files, fileList) { |
|
// this.$message.warning(`最多只能上传1个文件`); |
|
}, |
|
|
|
|
|
// 移除文件 |
|
|
|
// 重置上传表单 |
|
resetUpload() { |
|
// 重置Avue Form |
|
if (this.$refs.uploadFormRef) { |
|
this.$refs.uploadFormRef.resetFields(); |
|
} |
|
this.uploadForm = { |
|
name: "", |
|
url: "" |
|
}; |
|
}, |
|
|
|
// 手动触发Avue Form提交 |
|
submitAvueForm() { |
|
this.$refs.uploadFormRef.submit(); |
|
}, |
|
|
|
// Avue Form提交处理 |
|
handleUploadSubmit(form, done) { |
|
// 先校验文件是否上传成功 |
|
if (!form.url) { |
|
this.$message.warning("请先上传水单文件"); |
|
done(); |
|
return; |
|
} |
|
// 调用保存水单接口 |
|
saveWaterBill({ |
|
orderId: this.currentOrder.id, |
|
name: form.name, |
|
url: form.url // 这里的url是文件上传接口返回的链接 |
|
}).then(res => { |
|
if (res.data.code === 200) { |
|
this.$message.success("水单上传成功"); |
|
this.uploadDialogVisible = false; |
|
this.resetUpload(); |
|
this.loadOrderList(); // 刷新列表 |
|
} else { |
|
this.$message.error(res.data.msg || "保存水单失败"); |
|
} |
|
done(); // 必须调用done()结束Avue的提交状态 |
|
}).catch(err => { |
|
console.error("保存水单失败：", err); |
|
this.$message.error("网络异常，保存失败"); |
|
done(); |
|
}); |
|
}, |
|
|
|
|
|
|
|
// 生成合同 |
|
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; |
|
|
|
::v-deep .el-table__fixed-right { |
|
z-index: 1000 !important; |
|
} |
|
|
|
|
|
// 页面标题 |
|
.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>
|
|
|