|
@@ -1,21 +1,69 @@
|
|
|
+/**
|
|
|
+ * 订单明细表格混入
|
|
|
+ * @fileoverview 提供订单明细表格组件的通用逻辑,包括数据加载、状态显示和数字格式化等功能
|
|
|
+ * @author System
|
|
|
+ * @since 1.0.0
|
|
|
+ */
|
|
|
+
|
|
|
import { getList } from '@/api/order/order-item'
|
|
|
import { getOrderItemStatusLabel, getOrderItemStatusTagType } from '@/constants'
|
|
|
|
|
|
+/**
|
|
|
+ * @typedef {import('@/api/order/order-item').OrderItemRecord} OrderItemRecord
|
|
|
+ */
|
|
|
+
|
|
|
+/**
|
|
|
+ * 订单明细表格混入对象
|
|
|
+ * @mixin
|
|
|
+ */
|
|
|
export default {
|
|
|
+ /**
|
|
|
+ * 组件属性定义
|
|
|
+ */
|
|
|
props: {
|
|
|
+ /**
|
|
|
+ * 订单ID
|
|
|
+ * @type {string|number}
|
|
|
+ * @required
|
|
|
+ * @description 用于查询订单明细数据的订单标识
|
|
|
+ */
|
|
|
orderId: {
|
|
|
type: [String, Number],
|
|
|
required: true
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 组件数据初始化
|
|
|
+ * @returns {Object} 组件数据对象
|
|
|
+ */
|
|
|
data() {
|
|
|
return {
|
|
|
+ /**
|
|
|
+ * 订单明细数据列表
|
|
|
+ * @type {OrderItemRecord[]}
|
|
|
+ * @description 存储从API获取的订单明细数据
|
|
|
+ */
|
|
|
itemData: [],
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 加载状态标识
|
|
|
+ * @type {boolean}
|
|
|
+ * @description 控制表格加载状态显示
|
|
|
+ */
|
|
|
loading: false
|
|
|
}
|
|
|
},
|
|
|
|
|
|
+ /**
|
|
|
+ * 数据监听器
|
|
|
+ */
|
|
|
watch: {
|
|
|
+ /**
|
|
|
+ * 监听订单ID变化
|
|
|
+ * @param {string|number} newVal - 新的订单ID值
|
|
|
+ * @description 当订单ID发生变化时自动重新加载明细数据
|
|
|
+ */
|
|
|
orderId: {
|
|
|
handler(newVal) {
|
|
|
if (newVal) {
|
|
@@ -25,7 +73,18 @@ export default {
|
|
|
immediate: true
|
|
|
}
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 组件方法定义
|
|
|
+ */
|
|
|
methods: {
|
|
|
+ /**
|
|
|
+ * 加载订单明细数据
|
|
|
+ * @async
|
|
|
+ * @function loadItemData
|
|
|
+ * @description 根据订单ID从API获取订单明细数据列表
|
|
|
+ * @returns {Promise<void>} 无返回值的Promise
|
|
|
+ * @throws {Error} 当API调用失败时抛出错误
|
|
|
+ */
|
|
|
async loadItemData() {
|
|
|
if (!this.orderId) return
|
|
|
|
|
@@ -41,14 +100,42 @@ export default {
|
|
|
this.loading = false
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取订单明细状态文本
|
|
|
+ * @function getStatusText
|
|
|
+ * @param {0|1|2|3} status - 订单明细状态值
|
|
|
+ * @returns {string} 状态对应的中文文本
|
|
|
+ * @description 将数字状态码转换为可读的中文状态文本
|
|
|
+ */
|
|
|
getStatusText(status) {
|
|
|
return getOrderItemStatusLabel(status)
|
|
|
},
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取订单明细状态Element UI标签类型
|
|
|
+ * @function getStatusType
|
|
|
+ * @param {0|1|2|3} status - 订单明细状态值
|
|
|
+ * @returns {'warning'|'primary'|'success'|'info'} Element UI标签类型
|
|
|
+ * @description 根据状态值返回对应的Element UI标签样式类型
|
|
|
+ */
|
|
|
getStatusType(status) {
|
|
|
return getOrderItemStatusTagType(status)
|
|
|
}
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 过滤器定义
|
|
|
+ * @description 提供数据格式化功能的过滤器集合
|
|
|
+ */
|
|
|
filters: {
|
|
|
+ /**
|
|
|
+ * 数字格式化过滤器
|
|
|
+ * @function numberFormat
|
|
|
+ * @param {string|number|null|undefined} value - 需要格式化的数值
|
|
|
+ * @param {number} [precision=2] - 小数位数,默认为2位
|
|
|
+ * @returns {string} 格式化后的数字字符串
|
|
|
+ * @description 将数值格式化为指定小数位数的字符串,处理空值情况
|
|
|
+ */
|
|
|
numberFormat(value, precision = 2) {
|
|
|
if (value === null || value === undefined || value === '') return '0.00'
|
|
|
return parseFloat(value).toFixed(precision)
|