Browse Source

feat(订单): 新增工厂端订单列表功能

yz 2 weeks ago
parent
commit
aa8a2857c7
3 changed files with 226 additions and 0 deletions
  1. 11 0
      src/router/views/index.js
  2. 188 0
      src/views/order/factory/index.vue
  3. 27 0
      src/views/order/factory/types.d.ts

+ 11 - 0
src/router/views/index.js

@@ -99,6 +99,17 @@ export default [
                     isAuth: true,
                     title: "订单管理"
                 }
+            },
+            // 新增:工厂端订单列表
+            {
+                path: "factory",
+                name: "工厂订单列表",
+                component: () => import("@/views/order/factory/index.vue"),
+                meta: {
+                    keepAlive: true,
+                    isAuth: true,
+                    title: "工厂订单列表"
+                }
             }
         ]
     },

+ 188 - 0
src/views/order/factory/index.vue

@@ -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>

+ 27 - 0
src/views/order/factory/types.d.ts

@@ -0,0 +1,27 @@
+import type { OrderType, OrderStatus, OrderRecord, OrderQueryParams } from '@/api/types/order'
+
+/**
+ * 工厂订单查询参数
+ * 说明:与订单列表查询保持一致,供工厂端列表复用
+ */
+export interface FactoryOrderQueryParams extends Pick<OrderQueryParams,
+  'orderCode' | 'orgName' | 'customerName' | 'receiverName' | 'receiverPhone' | 'createTimeStart' | 'createTimeEnd' | 'orderType' | 'status'
+> {}
+
+/**
+ * 工厂端订单记录
+ * 直接复用后端 OrderRecord 类型,便于与接口保持一致
+ */
+export type FactoryOrderRecord = OrderRecord & {
+  orderType: OrderType;
+  status: OrderStatus;
+}
+
+/**
+ * Avue 分页模型(Factory)
+ */
+export interface FactoryOrderPage {
+  pageSize: number;
+  currentPage: number;
+  total: number;
+}