Jelajahi Sumber

feat(营销活动): 添加审批记录查看功能

yz 1 bulan lalu
induk
melakukan
3f77266acd

+ 59 - 0
src/api/order/marketing-activity.js

@@ -85,6 +85,34 @@ import request from '@/router/axios';
  */
 
 /**
+ * 审批记录查询参数类型定义
+ * @typedef {Object} ApprovalRecordQueryParams
+ * @property {number} current - 当前页码
+ * @property {number} size - 每页大小
+ * @property {string|number} activityId - 活动ID
+ */
+
+/**
+ * 审批记录列表项类型定义
+ * @typedef {Object} ApprovalRecordItem
+ * @property {string} id - 审批记录ID
+ * @property {string} createUser - 创建用户ID
+ * @property {string} createDept - 创建部门ID
+ * @property {string} createTime - 创建时间
+ * @property {string} updateUser - 更新用户ID
+ * @property {string} updateTime - 更新时间
+ * @property {number} status - 状态 1-正常 0-禁用
+ * @property {number} isDeleted - 是否删除 0-未删除 1-已删除
+ * @property {string|number} activityId - 活动ID
+ * @property {string} activityCode - 活动编码
+ * @property {number} approvalStatus - 审批状态 1-待审批 2-审批通过 3-审批拒绝
+ * @property {string} approvalRemark - 审批备注
+ * @property {number} approverId - 审批人ID
+ * @property {string} approverName - 审批人姓名
+ * @property {string} approvalTime - 审批时间
+ */
+
+/**
  * API响应类型定义
  * @template T
  * @typedef {Object} ApiResponse
@@ -180,4 +208,35 @@ export const approve = async (params) => {
   }
   
   return update(updateData)
+}
+
+/**
+ * 获取营销活动审批记录列表
+ * @param {number} current - 当前页码
+ * @param {number} size - 每页大小
+ * @param {string|number} activityId - 活动ID
+ * @returns {Promise<ApiResponse<PageResult<ApprovalRecordItem>>>} 审批记录分页查询结果
+ */
+export const getApprovalRecords = (current, size, activityId) => {
+  return request({
+    url: '/api/blade-factory/api/factory/activity-approval',
+    method: 'get',
+    params: {
+      current,
+      size,
+      activityId
+    }
+  })
+}
+
+/**
+ * 获取单条审批记录详情
+ * @param {string|number} activityApprovalId - 审批记录ID
+ * @returns {Promise<ApiResponse<ApprovalRecordItem>>} 审批记录详情
+ */
+export const getApprovalRecordDetail = (activityApprovalId) => {
+  return request({
+    url: `/api/blade-factory/api/factory/activity-approval/${activityApprovalId}`,
+    method: 'get'
+  })
 }

+ 210 - 1
src/views/order/marketing-activity/index.vue

@@ -64,6 +64,15 @@
         <el-button
           type="text"
           size="small"
+          icon="el-icon-document"
+          style="color: #409eff;"
+          @click="handleViewApprovalRecords(row)"
+        >
+          审批记录
+        </el-button>
+        <el-button
+          type="text"
+          size="small"
           icon="el-icon-view"
           @click="handleView(row)"
         >
@@ -142,11 +151,84 @@
         </el-button>
       </div>
     </el-dialog>
+ <el-dialog
+      title="审批记录"
+      :visible.sync="approvalRecordsDialog.visible"
+      width="1000px"
+      append-to-body
+      @close="resetApprovalRecordsDialog"
+    >
+      <div class="approval-records-header">
+        <h4>{{ approvalRecordsDialog.activityTitle }}</h4>
+        <p>活动编码:{{ approvalRecordsDialog.activityCode }}</p>
+      </div>
+
+      <el-table
+        v-loading="approvalRecordsDialog.loading"
+        :data="approvalRecordsDialog.data"
+        border
+        stripe
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="approverName"
+          label="审批人"
+          width="100"
+          align="center"
+        />
+        <el-table-column
+          prop="approvalStatus"
+          label="审批结果"
+          width="100"
+          align="center"
+        >
+          <template slot-scope="{ row }">
+            <el-tag
+              :type="getApprovalStatusType(row.approvalStatus)"
+              size="small"
+            >
+              {{ getApprovalStatusText(row.approvalStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="approvalRemark"
+          label="审批意见"
+          min-width="200"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="approvalTime"
+          label="审批时间"
+          width="160"
+          align="center"
+        />
+        <el-table-column
+          prop="createTime"
+          label="记录创建时间"
+          width="160"
+          align="center"
+        />
+      </el-table>
+
+      <div class="approval-records-pagination">
+        <el-pagination
+          :current-page="approvalRecordsDialog.page.current"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="approvalRecordsDialog.page.size"
+          :total="approvalRecordsDialog.page.total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleApprovalRecordsSizeChange"
+          @current-change="handleApprovalRecordsCurrentChange"
+        />
+      </div>
+
+    </el-dialog>
   </basic-container>
 </template>
 
 <script>
-import { getList, getDetail, update, approve } from '@/api/order/marketing-activity'
+import { getList, getDetail, update, approve, getApprovalRecords } from '@/api/order/marketing-activity'
 import { mapGetters } from 'vuex'
 
 /**
@@ -189,6 +271,23 @@ export default {
   data() {
     return {
       /**
+       * 审批记录对话框配置
+       * @type {Object}
+       */
+      approvalRecordsDialog: {
+        visible: false,
+        loading: false,
+        activityId: '',
+        activityCode: '',
+        activityTitle: '',
+        data: [],
+        page: {
+          current: 1,
+          size: 10,
+          total: 0
+        }
+      },
+      /**
        * 表格数据
        * @type {MarketingActivityRecord[]}
        */
@@ -445,6 +544,92 @@ export default {
   },
 
   methods: {
+
+    /**
+     * 查看审批记录
+     * @param {MarketingActivityRecord} row - 营销活动记录
+     */
+    async handleViewApprovalRecords(row) {
+      this.approvalRecordsDialog.visible = true
+      this.approvalRecordsDialog.activityId = row.id
+      this.approvalRecordsDialog.activityCode = row.activityCode
+      this.approvalRecordsDialog.activityTitle = row.title
+      this.approvalRecordsDialog.page.current = 1
+      this.approvalRecordsDialog.page.size = 10
+
+      await this.loadApprovalRecords()
+    },
+
+    /**
+     * 加载审批记录数据
+     */
+    async loadApprovalRecords() {
+      try {
+        this.approvalRecordsDialog.loading = true
+
+        const response = await getApprovalRecords(
+          this.approvalRecordsDialog.page.current,
+          this.approvalRecordsDialog.page.size,
+          this.approvalRecordsDialog.activityId
+        )
+
+        if (response.data.success) {
+          const { records, total, current, size } = response.data.data
+          this.approvalRecordsDialog.data = records || []
+          this.approvalRecordsDialog.page.total = total || 0
+          this.approvalRecordsDialog.page.current = current || 1
+          this.approvalRecordsDialog.page.size = size || 10
+        } else {
+          this.$message.error(response.data.msg || '获取审批记录失败')
+          this.approvalRecordsDialog.data = []
+          this.approvalRecordsDialog.page.total = 0
+        }
+      } catch (error) {
+        console.error('获取审批记录失败:', error)
+        this.$message.error('获取审批记录失败,请稍后重试')
+        this.approvalRecordsDialog.data = []
+        this.approvalRecordsDialog.page.total = 0
+      } finally {
+        this.approvalRecordsDialog.loading = false
+      }
+    },
+
+    /**
+     * 审批记录分页大小变化
+     * @param {number} size - 新的分页大小
+     */
+    async handleApprovalRecordsSizeChange(size) {
+      this.approvalRecordsDialog.page.size = size
+      this.approvalRecordsDialog.page.current = 1
+      await this.loadApprovalRecords()
+    },
+
+    /**
+     * 审批记录当前页变化
+     * @param {number} current - 新的当前页
+     */
+    async handleApprovalRecordsCurrentChange(current) {
+      this.approvalRecordsDialog.page.current = current
+      await this.loadApprovalRecords()
+    },
+
+    /**
+     * 重置审批记录对话框
+     */
+    resetApprovalRecordsDialog() {
+      this.approvalRecordsDialog.visible = false
+      this.approvalRecordsDialog.loading = false
+      this.approvalRecordsDialog.activityId = ''
+      this.approvalRecordsDialog.activityCode = ''
+      this.approvalRecordsDialog.activityTitle = ''
+      this.approvalRecordsDialog.data = []
+      this.approvalRecordsDialog.page = {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    },
+
     /**
      * 获取审批状态文本
      * @param {number} status - 审批状态
@@ -758,6 +943,30 @@ export default {
 </script>
 
 <style scoped>
+.approval-records-header {
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.approval-records-header h4 {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.approval-records-header p {
+  margin: 0;
+  font-size: 14px;
+  color: #606266;
+}
+
+.approval-records-pagination {
+  margin-top: 20px;
+  text-align: right;
+}
+
 .dialog-footer {
   text-align: right;
 }