cmc-oa/oa-ui-app/pages/message/completed/index.vue

<!--
 * @Author: ysh
 * @Date: 2025-02-19 15:30:13
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-06-03 10:19:28
-->
<template>
  <view class="page-container">
    <!-- 搜索框 -->
    <view class="search-box">
      <uni-search-bar radius="34" placeholder="请输入流程名称" @input="inputChange" v-model="queryParams.name" />
    </view>
    <!-- 流程列表 -->
    <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
      :up="upOption" :fixed="false" :top="10" style="padding: 30rpx;">
      <view>
        <view v-for="(item, index) in finishedList" :key="index">
          <view class="list-item">
            <!-- 状态与标题行 -->
            <view class="header-line">
              <text class="proc-name" style="font-weight: bold; font-size: 30rpx; color: #FF5733;">{{ item.procDefName }}</text>
            </view>

            <!-- 主要内容 -->
            <view class="content-box">
              <!-- 标题 -->
              <view class="title-box">
                <uni-icons type="info" size="16" color="#666" class="title-icon"></uni-icons>
                <text class="title-text">{{ item.title }}</text>
              </view>

              <!-- 信息分割线 -->
              <uv-divider :dashed="true" margin="10rpx 0"></uv-divider>

              <!-- 详细信息 -->
              <view class="detail-grid">
                <view class="detail-item">
                  <uni-icons type="person" size="14" color="#999"></uni-icons>
                  <text class="detail-text">{{ item.startUserName }}</text>
                  <uni-tag style="margin-left: 10rpx;" :text="item.startDeptName" type="info" size="mini" />
                </view>

                <view class="detail-item">
                  <uni-icons type="calendar" size="14" color="#999"></uni-icons>
                  <text class="detail-text">{{ item.createTime }}</text>
                </view>

                <view class="detail-item">
                  <uni-icons type="clock" size="14" color="#999"></uni-icons>
                  <text class="detail-text">{{ item.duration }}</text>
                </view>

                <view class="detail-item">
                  <uni-icons type="location" size="14" color="#999"></uni-icons>
                  <text class="detail-text">{{ item.taskName }}</text>
                </view>
              </view>
            </view>

            <!-- 操作按钮 -->
            <view class="action-box">
              <text class="view-detail" @click="handleFlowRecord(item)">办理进度</text>
              <text class="view-detail" @click="handleFlowNote(item)">表单信息</text>
              <text class="view-detail" @click="handleRevoke(item)" :class="{ disabled: beDisabled(item) }">撤回</text>
            </view>
          </view>
        </view>
      </view>
    </mescroll-uni>

    <!-- 菜单抽屉 -->
    <uni-drawer ref="drawer" mode="right" :width="300">
      <flow-record :rows="selectedItem" v-if="active == 'record'"></flow-record>
    </uni-drawer>
  </view>
</template>

<script>
import { debounce } from 'lodash-es';
import MescrollMixin from '@/uni_modules/mescroll/components/mescroll-uni/mescroll-mixins.js'
import { finishedList, revokeProcess } from "@/api/flowable/finished";
import { getProcessVariables } from "@/api/flowable/definition";
import FlowRecord from '@/pages/components/flowable/FlowRecord.vue';

export default {
  components: { FlowRecord },
  mixins: [MescrollMixin],
  data() {
    return {
      mescroll: null, // mescroll实例
      // 已办任务列表数据
      finishedList: [],
      total: 0,
      queryParams: {
        name: '',
        pageNum: 1,
        pageSize: 10
      },
      selectedItem: null, // 当前选中项
      active: 'record',
      downOption: {
        auto: true,
        textOutOffset: '下拉刷新',
        textLoading: '加载中...'
      },
      upOption: {
        auto: false,
        page: { num: 1, size: 10 },
        noMoreSize: 5,
        empty: { tip: '暂无已办任务' },
        textNoMore: '~ 没有更多任务了 ~'
      }
    }
  },
  onLoad: function (options) {
    uni.startPullDownRefresh();
  },
  methods: {
    // 初始化mescroll
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // mescroll下拉刷新回调
    async downCallback() {
      this.finishedList = []; // 清空列表
      this.queryParams.pageNum = 1
      const res = await this.loadData()
      this.finishedList = res.data.list;
      this.mescroll.endSuccess(res.data.length)
      this.mescroll.endErr()
      uni.stopPullDownRefresh();
    },
    // mescroll上拉加载回调
    async upCallback(page) {
      this.queryParams.pageNum = page.num
      const res = await this.loadData()
      this.finishedList = this.finishedList.concat(res.data.list)
      this.mescroll.endSuccess(res.data.list.length, res.data.hasNextPage)
    },
    // 加载数据
    async loadData() {
      try {
        const res = await finishedList(this.queryParams)
        return {
          data: {
            list: res.data.records,
          }
        }
      } catch (e) {
        this.mescroll.endErr()
        return { data: { list: [] } }
      }
    },
    // 输入变化处理
    inputChange(res) {
      this.queryParams.name = res;
      this.search();
    },
    // 执行搜索
    search() {
      this.loadData()
      this.downCallback()
    },
    // 办理进度
    handleFlowRecord(row) {
      this.active = 'record';
      this.selectedItem = row;
      this.$refs.drawer.open();
    },
    // 表单信息
    handleFlowNote(row) {
      getProcessVariables(row.taskId).then(res => {
        if (res.data) {
          const query = {
            procInsId: row.procInsId,
            executionId: row.executionId,
            deployId: row.deployId,
            taskId: row.taskId,
            taskName: '',
            startUserName: row.startUserName,
            procDefName: row.procDefName,
            formId: res.data.formId
          }
          const encodedParams = encodeURIComponent(JSON.stringify(query));
          uni.navigateTo({
            url: `/pages/message/apply/detail?params=${encodedParams}`
          })
        }
      })
    },
    // 撤回任务
    handleRevoke(row) {
      if (this.beDisabled(row)) return;

      uni.showModal({
        title: '提示',
        content: '确定撤回任务吗？',
        success: (res) => {
          if (res.confirm) {
            const params = {
              instanceId: row.procInsId,
              taskId: row.taskId
            }
            revokeProcess(params).then(res => {
              this.$modal.msgSuccess(res.msg);
              this.downCallback();
            });
          }
        }
      });
    },
    // 判断是否禁用撤回
    beDisabled(row) {
      if (row.procDefName == '项目流转' && row.taskName == '项目安排') {
        return true
      }
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.list-item {
  padding: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  width: 100%;
}

/* 头部状态行 */
.header-line {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.proc-name {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-left: 16rpx;
}

.status-tag {
  transform: translateY(-2rpx);
}

/* 内容区域 */
.content-box {
  padding: 12rpx 0;
}

.title-box {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.title-icon {
  margin-right: 8rpx;
}

.title-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
}

/* 详细信息网格 */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx 24rpx;
  margin-top: 20rpx;
}

.detail-item {
  display: flex;
  align-items: center;
}

.detail-text {
  font-size: 24rpx;
  color: #666;
  margin-left: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 操作区域 */
.action-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #eee;
}

.view-detail {
  color: #2979FF;
  font-size: 26rpx;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  background: #f5f7fa;
}

.view-detail.disabled {
  color: #c0c4cc;
  pointer-events: none;
}

/* 添加点击态效果 */
.action-box:active {
  background: #f8f8f8;
  transform: scale(0.98);
  transition: all 0.2s;
}

/* 状态标签增强 */
.status-tag {
  padding: 4rpx 12rpx !important;
  border-radius: 8rpx !important;
}

/* 颜色增强 */
.proc-name {
  color: #1a1a1a;
}

.title-text {
  color: #2d2d2d;
}

/* 图标颜色统一 */
.detail-item uni-icons {
  color: #909399 !important;
}
</style>