仓储管理系统实现审批功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// api/inventory.js
import request from '@/utils/request'

export function getPendingTransactions(query) {
  return request({
    url: '/api/inventory/approval/pending',
    method: 'get',
    params: query
  })
}

export function submitApproval(data) {
  return request({
    url: '/api/inventory/approval/submit',
    method: 'post',
    data
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
  <!-- 假设这是已有的库存流水列表页面 -->
  <div class="inventory-list">
  <!-- 已有的搜索功能区域 -->
  <div class="existing-search-area">
  <!-- 现有代码... -->
  </div>

  <!-- 添加的操作按钮区域 -->
  <div class="operation-buttons">
  <el-button 
type="primary" 
icon="el-icon-check" 
:disabled="selectedRows.length === 0"
@click="handleApprove">审批</el-button>
  <el-button 
type="danger" 
icon="el-icon-close" 
:disabled="selectedRows.length === 0"
@click="handleReject">拒绝</el-button>
  </div>

  <!-- 已有的表格组件，添加@selection-change事件 -->
  <el-table
ref="inventoryTable"
:data="inventoryList"
@selection-change="handleSelectionChange">
  <!-- 添加选择列 -->
  <el-table-column type="selection" width="55" />

  <!-- 现有的表格列... -->
  </el-table>

  <!-- 现有的分页组件... -->
  </div>
  </template>
  <script>
  // 引入已有的API方法，添加submitApproval方法
  import { submitApproval } from '@/api/inventory'

export default {
  // 扩展现有组件
  data() {
    // 添加选中行数据
    return {
      selectedRows: []
    }
  },
  methods: {
    // 处理表格选择变化
    handleSelectionChange(val) {
      this.selectedRows = val
    },

    // 处理审批操作
    handleApprove() {
      if (this.selectedRows.length === 0) return

      this.$confirm(`确认审批选中的 ${this.selectedRows.length} 条记录?`, '确认信息', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitApprovalRequest(true)
      })
    },

    // 处理拒绝操作
    handleReject() {
      if (this.selectedRows.length === 0) return

      this.$confirm(`确认拒绝选中的 ${this.selectedRows.length} 条记录?`, '确认信息', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitApprovalRequest(false)
      })
    },

    // 提交审批请求
    submitApprovalRequest(isApproved) {
      const transactionIds = this.selectedRows.map(item => item.transactionID)

      submitApproval({
        transactionIds,
        approved: isApproved,
        approverID: this.$store.getters.userId
      }).then(() => {
        this.$message.success('操作成功')
        // 刷新列表数据
        this.refreshList()
        // 清空选择
        this.$refs.inventoryTable.clearSelection()
      }).catch(error => {
        this.$message.error('操作失败: ' + error.message)
      })
    },

    // 刷新列表数据（调用现有方法）
    refreshList() {
      // 调用已有的获取列表数据方法
      this.getInventoryList()
    }
  }
}
  </script>
  <style scoped>
  .operation-buttons {
  margin: 10px 0;
  text-align: right;
}
</style>