|
@@ -0,0 +1,188 @@
|
|
|
+<template>
|
|
|
+ <basic-container>
|
|
|
+ <avue-crud
|
|
|
+ :option="option"
|
|
|
+ :table-loading="loading"
|
|
|
+ :data="data"
|
|
|
+ :page.sync="page"
|
|
|
+ :permission="permissionList"
|
|
|
+ v-model="form"
|
|
|
+ ref="crud"
|
|
|
+ @search-change="searchChange"
|
|
|
+ @search-reset="searchReset"
|
|
|
+ @selection-change="selectionChange"
|
|
|
+ @current-change="currentChange"
|
|
|
+ @size-change="sizeChange"
|
|
|
+ @refresh-change="refreshChange"
|
|
|
+ @on-load="onLoad"
|
|
|
+ >
|
|
|
+ <!-- 订单类型显示 -->
|
|
|
+ <template slot="orderType" slot-scope="{row}">
|
|
|
+ <el-tag :type="getOrderTypeTagType(row.orderType)">
|
|
|
+ {{ getOrderTypeLabel(row.orderType) }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 订单总金额显示 -->
|
|
|
+ <template slot="totalAmount" slot-scope="{row}">
|
|
|
+ ¥{{ parseFloat(row.totalAmount || 0).toFixed(2) }}
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 订单总数量显示 -->
|
|
|
+ <template slot="totalQuantity" slot-scope="{row}">
|
|
|
+ {{ parseInt(row.totalQuantity || 0) }}
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 订单状态显示 -->
|
|
|
+ <template slot="status" slot-scope="{row}">
|
|
|
+ <el-tag :type="getOrderStatusTagType(row.status)">
|
|
|
+ {{ getOrderStatusLabel(row.status) }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 行展开 - 展示订单明细 -->
|
|
|
+ <template slot="expand" slot-scope="{row}">
|
|
|
+ <div class="order-expand-content">
|
|
|
+ <div class="expand-header">
|
|
|
+ <h4>订单明细信息</h4>
|
|
|
+ <span class="order-code">订单编码:{{ row.orderCode }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="expand-body">
|
|
|
+ <!-- 使用 safeBigInt 转换可能为 bigint 的主键值,避免精度问题 -->
|
|
|
+ <order-item-table :order-id="safeBigInt(row.id)" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </avue-crud>
|
|
|
+ </basic-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+/**
|
|
|
+ * @typedef {import('./types').FactoryOrderQueryParams} FactoryOrderQueryParams
|
|
|
+ * @typedef {import('./types').FactoryOrderRecord} FactoryOrderRecord
|
|
|
+ * @typedef {import('./types').FactoryOrderPage} FactoryOrderPage
|
|
|
+ */
|
|
|
+import { option as baseOption } from '../order/option'
|
|
|
+import { getList } from '@/api/order/order'
|
|
|
+import { getOrderTypeLabel, getOrderTypeTagType, getOrderStatusLabel, getOrderStatusTagType } from '@/constants'
|
|
|
+import OrderItemTable from '@/components/order-item-table/index.vue'
|
|
|
+import { safeBigInt } from '@/util/util'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'FactoryOrderList',
|
|
|
+ components: { OrderItemTable },
|
|
|
+ data() {
|
|
|
+ // 深拷贝基础配置,禁用新增/编辑/查看/删除,保持与订单模块一致的列和搜索
|
|
|
+ const opt = JSON.parse(JSON.stringify(baseOption || {}))
|
|
|
+ opt.addBtn = false
|
|
|
+ opt.editBtn = false
|
|
|
+ opt.viewBtn = false
|
|
|
+ opt.delBtn = false
|
|
|
+ // 工厂端列表不需要左侧自定义菜单
|
|
|
+ opt.menu = true
|
|
|
+
|
|
|
+ return {
|
|
|
+ option: opt,
|
|
|
+ data: [],
|
|
|
+ form: {},
|
|
|
+ loading: true,
|
|
|
+ selectionList: [],
|
|
|
+ page: { pageSize: 10, currentPage: 1, total: 0 },
|
|
|
+ // 记录最后一次有效的搜索参数,保证分页时参数不丢失
|
|
|
+ lastQuery: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 禁用所有内置操作按钮
|
|
|
+ permissionList() {
|
|
|
+ return { addBtn: false, viewBtn: false, editBtn: false, delBtn: false }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 常量/标签方法透传,供插槽使用
|
|
|
+ getOrderTypeLabel,
|
|
|
+ getOrderTypeTagType,
|
|
|
+ getOrderStatusLabel,
|
|
|
+ getOrderStatusTagType,
|
|
|
+ safeBigInt,
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 加载表格数据(主列表)
|
|
|
+ * 使用工厂订单接口:api/order/order.js#getList
|
|
|
+ * @param {FactoryOrderPage} page
|
|
|
+ * @param {Partial<FactoryOrderQueryParams>=} params
|
|
|
+ */
|
|
|
+ onLoad(page, params = undefined) {
|
|
|
+ this.loading = true
|
|
|
+ // 合并来源:上次有效参数 + 当前表单 + 本次传入
|
|
|
+ const source = Object.assign({}, this.lastQuery || {}, this.form || {}, params || {})
|
|
|
+ // 仅映射后端支持的查询参数,并兼容 Avue 日期范围
|
|
|
+ const query = {
|
|
|
+ orderCode: source.orderCode,
|
|
|
+ orgName: source.orgName,
|
|
|
+ customerName: source.customerName,
|
|
|
+ receiverName: source.receiverName,
|
|
|
+ receiverPhone: source.receiverPhone,
|
|
|
+ createTimeStart: source.createTimeStart || (Array.isArray(source.createTime) ? source.createTime[0] : undefined),
|
|
|
+ createTimeEnd: source.createTimeEnd || (Array.isArray(source.createTime) ? source.createTime[1] : undefined),
|
|
|
+ orderType: source.orderType,
|
|
|
+ status: source.status
|
|
|
+ }
|
|
|
+ Object.keys(query).forEach(k => query[k] === undefined && delete query[k])
|
|
|
+ // 持久化搜索条件,确保翻页时不丢失
|
|
|
+ this.lastQuery = Object.assign({}, query)
|
|
|
+
|
|
|
+ getList(page.currentPage, page.pageSize, query)
|
|
|
+ .then(res => {
|
|
|
+ const data = res.data && res.data.data ? res.data.data : { records: [], total: 0 }
|
|
|
+ this.data = Array.isArray(data.records) ? data.records : []
|
|
|
+ this.page.total = Number(data.total || 0)
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ .catch(() => { this.loading = false })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 搜索触发
|
|
|
+ * @param {Partial<FactoryOrderQueryParams>} params
|
|
|
+ * @param {() => void} [done]
|
|
|
+ */
|
|
|
+ searchChange(params, done) {
|
|
|
+ // 保存本次搜索条件
|
|
|
+ this.lastQuery = Object.assign({}, params || {})
|
|
|
+ this.onLoad(this.page, params)
|
|
|
+ done && done()
|
|
|
+ },
|
|
|
+ /** 重置搜索 */
|
|
|
+ searchReset() {
|
|
|
+ this.form = {}
|
|
|
+ this.lastQuery = {}
|
|
|
+ this.onLoad(this.page)
|
|
|
+ },
|
|
|
+ /** 选择变化 */
|
|
|
+ selectionChange(list) {
|
|
|
+ this.selectionList = list
|
|
|
+ },
|
|
|
+ /** 页码变化:保持搜索条件不丢失并重新加载 */
|
|
|
+ currentChange(currentPage) {
|
|
|
+ this.page.currentPage = currentPage
|
|
|
+ this.onLoad(this.page, this.lastQuery)
|
|
|
+ },
|
|
|
+ /** 每页大小变化:保持搜索条件不丢失并重新加载 */
|
|
|
+ sizeChange(pageSize) {
|
|
|
+ this.page.pageSize = pageSize
|
|
|
+ this.onLoad(this.page, this.lastQuery)
|
|
|
+ },
|
|
|
+ /** 刷新 */
|
|
|
+ refreshChange() {
|
|
|
+ this.onLoad(this.page, this.lastQuery)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.order-expand-content { padding: 8px 12px; }
|
|
|
+.expand-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
|
|
+.order-code { color: #666; font-size: 12px; }
|
|
|
+</style>
|