refactor(forecast-audit): 重构预测审批模块代码结构

src/views/forecast-audit/auditIndex.js

@@ -1,4 +1,5 @@
-import { getForecastList, updateForecast } from '@/api/forecast'
+import { getForecastList, approveForecast, updateForecast } from '@/api/forecast'
+import { mapGetters } from 'vuex'
 import {
   APPROVAL_STATUS,
   APPROVAL_STATUS_OPTIONS,
@@ -9,7 +10,6 @@ import {
   formatNumber
 } from '@/constants/forecast'
 import { dateFormat } from '@/util/date'
-import { mapGetters } from 'vuex'
 
 /**
  * @typedef {import('@/api/forecast/types').ForecastRecord} ForecastRecord
@@ -22,9 +22,11 @@ import { mapGetters } from 'vuex'
 /**
  * 销售预测审核页面业务逻辑混入
  * @description 提供预测申报的审核功能，包括列表展示、详情查看、审批操作等
- * @this {ForecastAuditComponent & Vue}
  */
 export default {
+  /**
+   * @this {Vue & ForecastAuditComponent}
+   */
   data() {
     return {
       /** @type {Record<string, any>} 表单数据 */
@@ -33,15 +35,11 @@ export default {
       query: {},
       /** @type {boolean} 表格加载状态 */
       loading: true,
-      /** @type {boolean} 表单提交状态 */
+      /** @type {boolean} 提交状态 */
       submitting: false,
-      /** @type {boolean} 审批中状态 */
-      approving: false,
-      /** @type {boolean} 拒绝中状态 */
-      rejecting: false,
       /** @type {boolean} 详情弹窗显示状态 */
       detailDialogVisible: false,
-      /** @type {boolean} 审批确认弹窗显示状态 */
+      /** @type {boolean} 审批弹窗显示状态 */
       approvalDialogVisible: false,
       /** @type {PageConfig} 分页配置 */
       page: {
@@ -51,23 +49,17 @@ export default {
       },
       /** @type {Array<ForecastRecord>} 表格数据 */
       data: [],
-      /** @type {ForecastRecord} 详情表单数据 */
+      /** @type {Record<string, any>} 详情表单数据 */
       detailForm: {},
-      /** @type {ForecastRecord|null} 当前要审批的记录 */
-      currentApprovalRecord: null,
-      /** @type {boolean} 当前审批操作是否为通过 */
-      isCurrentApprovalApprove: true,
       /** @type {ApprovalFormData} 审批表单数据 */
       approvalForm: {
-        approvalComment: '',
+        id: null,
         isApprove: true,
-        currentRecord: null
+        comment: ''
       },
-      /** @type {import('smallwei__avue/crud').AvueCrudOption} avue表格配置 */
       option: {
         height: 'auto',
         calcHeight: 30,
-        tip: false,
         searchShow: true,
         searchMenuSpan: 6,
         border: true,
@@ -244,6 +236,7 @@ export default {
 
     /**
      * 权限列表
+     * @this {Vue & ForecastAuditComponent}
      * @returns {PermissionConfig} 权限配置对象
      */
     permissionList() {
@@ -261,6 +254,7 @@ export default {
 
     /**
      * 审批弹窗标题
+     * @this {Vue & ForecastAuditComponent}
      * @returns {string} 弹窗标题文本
      */
     approvalDialogTitle() {
@@ -293,24 +287,27 @@ export default {
 
     /**
      * 判断是否可以审批通过
-     * @param {ForecastItem} row - 数据行对象
+     * @this {Vue & ForecastAuditComponent}
+     * @param {ForecastRecord} row - 数据行对象
      * @returns {boolean} 是否可以审批通过
      */
     canApprove(row) {
-      return canApprove(row.approvalStatus)
+      return canApprove(row.approvalStatus || 0)
     },
 
     /**
      * 判断是否可以审批拒绝
-     * @param {ForecastItem} row - 数据行对象
+     * @this {Vue & ForecastAuditComponent}
+     * @param {ForecastRecord} row - 数据行对象
      * @returns {boolean} 是否可以审批拒绝
      */
     canReject(row) {
-      return canReject(row.approvalStatus)
+      return canReject(row.approvalStatus || 0)
     },
 
     /**
      * 格式化数字显示
+     * @this {Vue & ForecastAuditComponent}
      * @param {number|null|undefined} value - 数值
      * @returns {string} 格式化后的字符串
      */
@@ -320,7 +317,8 @@ export default {
 
     /**
      * 查看详情
-     * @param {ForecastItem} row - 数据行对象
+     * @this {Vue & ForecastAuditComponent}
+     * @param {ForecastRecord} row - 数据行对象
      * @param {number} index - 行索引
      * @returns {void}
      */
@@ -331,7 +329,8 @@ export default {
 
     /**
      * 审批通过记录
-     * @param {ForecastItem} row - 数据行对象
+     * @this {Vue & ForecastAuditComponent}
+     * @param {ForecastRecord} row - 数据行对象
      * @param {number} index - 行索引
      * @returns {void}
      */
@@ -346,10 +345,11 @@ export default {
         // 用户取消操作
       })
     },
-    
+
     /**
      * 审批拒绝记录
-     * @param {ForecastItem} row - 数据行对象
+     * @this {Vue & ForecastAuditComponent}
+     * @param {ForecastRecord} row - 数据行对象
      * @param {number} index - 行索引
      * @returns {void}
      */
@@ -364,9 +364,10 @@ export default {
         // 用户取消操作
       })
     },
-    
+
     /**
      * 从详情页面审批通过
+     * @this {Vue & ForecastAuditComponent}
      * @returns {void}
      */
     approveFromDetail() {
@@ -376,14 +377,15 @@ export default {
         type: 'success'
       }).then(() => {
         this.detailDialogVisible = false
-        this.performApproval(this.detailForm, true)
+        this.performApproval(/** @type {ForecastRecord} */ (this.detailForm), true)
       }).catch(() => {
         // 用户取消操作
       })
     },
-    
+
     /**
      * 从详情页面审批拒绝
+     * @this {Vue & ForecastAuditComponent}
      * @returns {void}
      */
     rejectFromDetail() {
@@ -393,51 +395,73 @@ export default {
         type: 'warning'
       }).then(() => {
         this.detailDialogVisible = false
-        this.performApproval(this.detailForm, false)
+        this.performApproval(/** @type {ForecastRecord} */ (this.detailForm), false)
       }).catch(() => {
         // 用户取消操作
       })
     },
-    
+
     /**
      * 执行审批操作
-     * @param {ForecastItem} record - 要审批的记录
+     * @this {Vue & ForecastAuditComponent}
+     * @param {ForecastRecord} record - 要审批的记录
      * @param {boolean} isApprove - 是否为通过审批
-     * @returns {Promise<void>}
-     * @throws {Error} 当审批操作失败时抛出错误
+     * @returns {void}
      */
-    async performApproval(record, isApprove) {
-      try {
-        this.submitting = true
-    
-        // 构建更新数据
-        const updateData = {
-          ...record,
-          approvalStatus: isApprove ? APPROVAL_STATUS.APPROVED : APPROVAL_STATUS.REJECTED,
-          approvalComment: null, // 不再需要审批备注
-          approvedBy: this.$store.getters.userInfo.user_id,
-          approvedName: this.$store.getters.userInfo.real_name,
-          approvedTime: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
-        }
-    
-        const res = await updateForecast(updateData)
-    
-        if (res.data && res.data.success) {
-          this.$message.success(`审批${isApprove ? '通过' : '拒绝'}成功`)
-          this.onLoad(this.page) // 重新加载数据
-        } else {
-          throw new Error(res.data?.msg || '审批操作失败')
-        }
-      } catch (error) {
-        console.error('审批操作失败:', error)
-        this.$message.error(error.message || '审批操作失败')
-      } finally {
-        this.submitting = false
+    performApproval(record, isApprove) {
+      this.approvalForm = {
+        id: Number(record.id),
+        isApprove: isApprove,
+        comment: ''
       }
+      this.approvalDialogVisible = true
     },
 
     /**
-     * 搜索变化事件
+     * 提交审批
+     * @this {Vue & ForecastAuditComponent}
+     * @returns {void}
+     */
+    submitApproval() {
+      /** @type {any} */ (this.$refs.approvalFormRef).validate(/** @param {boolean} valid */ (valid) => {
+        if (valid) {
+          this.submitting = true
+          const approvalData = {
+              id: String(this.approvalForm.id),
+              approvalStatus: this.approvalForm.isApprove ? APPROVAL_STATUS.APPROVED : APPROVAL_STATUS.REJECTED,
+              approvalComment: this.approvalForm.comment
+            }
+
+          approveForecast(approvalData).then(() => {
+            this.$message.success('审批操作成功')
+            this.approvalDialogVisible = false
+            this.onLoad(this.page)
+          }).catch(() => {
+            this.$message.error('审批操作失败')
+          }).finally(() => {
+            this.submitting = false
+          })
+        }
+      })
+    },
+
+     /**
+      * 取消审批
+      * @this {Vue & ForecastAuditComponent}
+      * @returns {void}
+      */
+     cancelApproval() {
+       this.approvalDialogVisible = false
+       this.approvalForm = {
+         id: null,
+         isApprove: true,
+         comment: ''
+       }
+     },
+
+     /**
+      * 搜索变化事件
+     * @this {Vue & ForecastAuditComponent}
      * @param {Record<string, any>} params - 搜索参数
      * @param {() => void} done - 完成回调
      * @returns {void}
@@ -450,6 +474,7 @@ export default {
 
     /**
      * 搜索重置事件
+     * @this {Vue & ForecastAuditComponent}
      * @returns {void}
      */
     searchReset() {
@@ -459,6 +484,7 @@ export default {
 
     /**
      * 刷新事件
+     * @this {Vue & ForecastAuditComponent}
      * @returns {void}
      */
     refreshChange() {
@@ -467,6 +493,7 @@ export default {
 
     /**
      * 加载数据
+     * @this {Vue & ForecastAuditComponent}
      * @param {PageConfig} page - 分页参数
      * @param {Record<string, any>} [params={}] - 查询参数
      * @returns {Promise<void>}
@@ -503,6 +530,7 @@ export default {
 
     /**
      * 页码变化
+     * @this {Vue & ForecastAuditComponent}
      * @param {number} currentPage - 当前页码
      * @returns {void}
      */
@@ -512,6 +540,7 @@ export default {
 
     /**
      * 页大小变化
+     * @this {Vue & ForecastAuditComponent}
      * @param {number} pageSize - 页大小
      * @returns {void}
      */

src/views/forecast-audit/index.js

@@ -0,0 +1,4 @@
+/**
+ * 预测审批模块入口文件
+ */
+export { default } from './auditIndex.js';

src/views/forecast-audit/types.d.ts

@@ -1,6 +1,5 @@
 // 销售预测审核页面类型定义
 
-import { AvueCrudOption } from '@/types/global'
 import { ForecastRecord } from '@/api/forecast/types'
 
 /**
@@ -19,12 +18,12 @@ export interface PageConfig {
  * 审批表单数据类型定义
  */
 export interface ApprovalFormData {
-  /** 审批意见 */
-  approvalComment: string
+  /** 记录ID */
+  id: number | null
   /** 是否为通过审批 */
   isApprove: boolean
-  /** 当前审批的记录 */
-  currentRecord: ForecastRecord | null
+  /** 审批意见 */
+  comment: string
 }
 
 /**
@@ -49,29 +48,21 @@ export interface ForecastAuditComponentData {
   form: Record<string, any>
   /** 查询参数 */
   query: Record<string, any>
-  /** 表格加载状态 */
+  /** 加载状态 */
   loading: boolean
-  /** 表单提交状态 */
+  /** 提交状态 */
   submitting: boolean
-  /** 审批中状态 */
-  approving: boolean
-  /** 拒绝中状态 */
-  rejecting: boolean
   /** 详情弹窗显示状态 */
   detailDialogVisible: boolean
-  /** 审批确认弹窗显示状态 */
+  /** 审批弹窗显示状态 */
   approvalDialogVisible: boolean
   /** 分页配置 */
   page: PageConfig
   /** 表格数据 */
   data: Array<ForecastRecord>
   /** 详情表单数据 */
-  detailForm: ForecastRecord
-  /** 当前要审批的记录 */
-  currentApprovalRecord: ForecastRecord | null
-  /** 当前审批操作是否为通过 */
-  isCurrentApprovalApprove: boolean
-  /** avue表格配置 */
+  detailForm: Record<string, any>
+  /** 表格配置 */
   option: AvueCrudOption
   /** 审批表单验证规则 */
   approvalFormRules: Record<string, Array<ValidationRule>>
@@ -83,9 +74,8 @@ export interface ForecastAuditComponentData {
  * 销售预测审核页面组件类型
  */
 export interface ForecastAuditComponent extends ForecastAuditComponentData {
-  /** Vue实例方法 */
-  $message: any
-  $confirm: any
-  $store: any
-  $refs: any
+  /** 加载数据方法 */
+  onLoad(page: PageConfig, params?: Record<string, any>): void
+  /** 执行审批操作方法 */
+  performApproval(row: ForecastRecord, isApprove: boolean): void
 }