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.
839 lines
25 KiB
839 lines
25 KiB
<template> |
|
<div class="container"> |
|
<basic-crumb></basic-crumb> |
|
<div class="title">订单管理</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="120px" 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="120px" 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="120px" |
|
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="120px" 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="120px" |
|
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" |
|
>查询</el-button |
|
> |
|
<el-button size="small" @click="handleReset">清空</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: end"> |
|
<el-button |
|
type="success" |
|
size="mini" |
|
class="add-order-btn" |
|
@click="handleAddOrder" |
|
> |
|
新增订单 |
|
</el-button> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
|
|
<!-- 订单表格区域 --> |
|
<el-table |
|
:data="orderTableData" |
|
border |
|
style="width: 100%" |
|
max-height="380px" |
|
:loading="isLoading" |
|
:header-cell-style="{ 'text-align': 'center', background: '#f2f2f2' }" |
|
:cell-style="{ 'text-align': 'center', height: '30px' }" |
|
@selection-change="selectionChange" |
|
:row-class-name="tableRowClassName" |
|
> |
|
<el-table-column label="订单编号" prop="code" width="200" /> |
|
<el-table-column label="订单名称" prop="name" width="200" /> |
|
<el-table-column label="客户公司名称" prop="customerName" width="220" /> |
|
<el-table-column label="交货日期" prop="deliveryDate" width="130" /> |
|
<el-table-column label="销售价" prop="sellingPrice" width="130" /> |
|
<el-table-column label="分成金额" prop="splitPrice" width="120" /> |
|
<el-table-column label="已汇金额" prop="remittedAmount" width="120" /> |
|
<el-table-column label="待汇金额" prop="unremittedAmount" width="120" /> |
|
<el-table-column label="货币单位" prop="monetaryUnit" width="120" /> |
|
<el-table-column label="订单日期" prop="orderDate" width="130" /> |
|
<el-table-column label="状态" prop="status" width="120"> |
|
<template slot-scope="scope"> |
|
<el-tag :type="getStatusTagType(scope.row.status)"> |
|
{{ getStatusText(scope.row.status) }} |
|
</el-tag> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作" width="220" 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="handleViewChangeLog(scope.row)" |
|
>修改记录</el-link |
|
> |
|
<el-link type="primary" @click="handleSubmitReview(scope.row)" |
|
>提交审批</el-link |
|
> |
|
<el-link type="primary" @click="handleViewOrderDetail(scope.row)" |
|
>订单详情</el-link |
|
> |
|
|
|
</template> |
|
<!-- 审批中状态操作 --> |
|
<template v-else-if="scope.row.status == '2'"> |
|
|
|
<el-link type="primary" @click="handleViewOrderDetail(scope.row)" |
|
>订单详情</el-link |
|
> |
|
|
|
</template> |
|
<!-- 审批通过状态操作 --> |
|
<template v-else-if="scope.row.status == '3'"> |
|
|
|
<el-link type="primary" @click="openUploadDialog(scope.row)" |
|
>上传水单</el-link |
|
> |
|
<el-link type="primary" @click="handleViewOrderDetail(scope.row)" |
|
>订单详情</el-link |
|
> |
|
<el-link type="primary" @click="handleFinish(scope.row)" |
|
>订单完成</el-link |
|
> |
|
<el-link type="primary" @click="handleViewReceipt(scope.row)" |
|
>查看水单</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="handleCloseOrder(scope.row)" |
|
>关闭</el-link |
|
> |
|
<el-link type="primary" @click="handleResubmitReview(scope.row)" |
|
>重新提交</el-link |
|
> |
|
<el-link type="primary" @click="handleViewOrderDetail(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="handleViewReceipt(scope.row)" |
|
>查看水单</el-link |
|
> |
|
</template> |
|
<!-- 关闭状态操作 --> |
|
<template v-else-if="scope.row.status == '6'"> |
|
|
|
<el-link type="primary" @click="handleViewOrderDetail(scope.row)" |
|
>订单详情</el-link |
|
> |
|
|
|
</template> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
|
|
<!-- 分页区域 --> |
|
<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="120px" |
|
> |
|
<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"> |
|
<el-upload |
|
ref="upload" |
|
:action="uploadUrl" |
|
:headers="uploadHeaders" |
|
:file-list="fileList" |
|
:on-success="handleUploadSuccess" |
|
:on-error="handleUploadError" |
|
:on-remove="handleRemoveFile" |
|
:before-upload="beforeUpload" |
|
:on-exceed="handleExceed" |
|
accept=".jpg,.jpeg,.png,.pdf" |
|
:limit="1" |
|
list-type="picture-card" |
|
> |
|
<i class="el-icon-plus" ></i> |
|
</el-upload> |
|
<div style="font-size: 12px; color: #999; margin-top: 5px"> |
|
提示：仅支持jpg/jpeg/png/pdf格式，文件大小不超过2MB |
|
</div> |
|
</el-form-item> |
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
<el-button |
|
@click=" |
|
uploadDialogVisible = false; |
|
resetUpload; |
|
" |
|
>取消</el-button |
|
> |
|
<el-button type="primary" @click="confirmUpload">确认上传</el-button> |
|
</div> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import basicCrumb from "@/components/basic-crumb/main"; |
|
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" }, |
|
}, |
|
}; |
|
}, |
|
created() {}, |
|
mounted() { |
|
// 初始化页面：加载客户列表 + 订单列表 |
|
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 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" || |
|
file.type === "application/pdf"; |
|
const isLt2M = file.size / 1024 / 1024 < 2; |
|
if (!isImageOrPdf) { |
|
this.$message.error("只能上传图片或PDF文件！"); |
|
} |
|
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) { |
|
this.fileList = fileList; |
|
// 移除文件时清空文件url |
|
this.uploadForm.url = ""; |
|
}, |
|
// 重置上传表单和文件 |
|
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) { |
|
this.$router.push({ |
|
path: "/approval/approvalDetails", |
|
query: { |
|
orderId: row.id, |
|
}, |
|
}); |
|
}, |
|
|
|
// 查看水单 |
|
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"> |
|
.container { |
|
width: 100%; |
|
// height:calc(100% - 18px); |
|
background: rgb(255, 255, 255); |
|
// margin: 0 auto; |
|
margin-top: 8px; |
|
padding: 20px !important; |
|
|
|
// 页面标题 |
|
.title { |
|
// font-size: 26px; |
|
font-size: 1.4vw; |
|
margin-bottom: 10px; |
|
width: 100%; |
|
text-align: center; |
|
} |
|
|
|
.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; |
|
} |
|
|
|
::v-deep .alternate-row { |
|
background-color: #f2f2f2; |
|
} |
|
} |
|
</style>
|
|
|