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

<!--
 * @Author: ysh
 * @Date: 2025-02-19 15:36:34
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-03-20 15:27:00
-->
<template>
  <view class="page-container">
    <!-- 搜索框 -->
    <view class="search-box">
      <uni-search-bar radius="34" placeholder="请输入流程名称" @confirm="search" @input="inputChange"
        v-model="queryParams.procDefName" />
    </view>

    <!-- 流程列表 -->
    <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false" :top="10">
      <uni-list>
        <uni-list-item v-for="(item, index) in list" :key="index" clickable>
          <template v-slot:body>
            <view class="list-item">
              <!-- 状态与标题行 -->
              <view class="header-line">
                <uni-tag :text="item.finishTime ? '已完成' : '进行中'" :type="item.finishTime ? 'success' : 'warning'"
                  size="small" class="status-tag" />
                <text class="proc-name">{{ 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="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 class="detail-item">
                    <uni-icons type="person" size="14" color="#999"></uni-icons>
                    <text class="detail-text">{{ item.assigneeName || '暂无待办人' }}</text>
                  </view>
                </view>
              </view>

              <!-- 操作按钮 -->
              <view class="action-box">
                <text class="view-detail">查看详情</text>
                <uni-icons type="more-filled" size="20" color="#666" @click="showAction(item)"
                  class="action-icon"></uni-icons>
              </view>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </mescroll-uni>

    <!-- 操作菜单 -->
    <uni-popup ref="actionPopup" type="bottom">
      <view class="action-menu">
        <view class="menu-item" @click="handleFlowRecord(selectedItem)">
          <text>办理进度</text>
        </view>
        <view class="menu-item" @click="handleFlowNote(selectedItem)">
          <text>表单信息</text>
        </view>
        <view class="menu-item danger" @click="handleDelete(selectedItem)"
          :class="{ disabled: !beDeleted(selectedItem) }">
          <text>取消流程</text>
        </view>
      </view>
    </uni-popup>

    <!-- 菜单抽屉 -->
    <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 { myProcessList, stopProcess } from "@/api/flowable/process";
import FlowRecord from '../../components/flowable/FlowRecord.vue';
export default {
  components: { FlowRecord },
  mixins: [MescrollMixin],
  data() {
    return {
      // 我发起的流程列表数据
      myProcessList: [],
      list: [], // 列表数据
      queryParams: {
        keyword: '',
        pageNum: 1,
        pageSize: 10
      },
      selectedItem: null, // 当前选中项
      debounceSearch: null, // 初始化防抖方法
      clickRow: {},
      active: 'record'
    }
  },
  created() {
    // 在生命周期中创建防抖方法
    this.debounceSearch = debounce(() => {
      this.search()
    }, 500)
  },
  methods: {
    // mescroll下拉刷新回调
    async downCallback() {
      this.queryParams.pageNum = 1
      const res = await this.loadData()
      this.list = res.data.list;
      this.mescroll.endSuccess(res.data.length)
      this.mescroll.endErr()
    },
    // mescroll上拉加载回调
    async upCallback(page) {
      this.queryParams.pageNum = page.num
      const res = await this.loadData()
      this.list = this.list.concat(res.data.list)
      this.mescroll.endSuccess(res.data.list.length, res.data.hasNextPage)
    },
    // 加载数据
    async loadData() {
      try {
        const res = await myProcessList(this.queryParams)
        return {
          data: {
            list: res.data.records,
            hasNextPage: res.hasNextPage
          }
        }
      } catch (e) {
        this.mescroll.endErr()
        return { data: { list: [], hasNextPage: false } }
      }
    },
    // 显示操作菜单
    showAction(item) {
      this.selectedItem = item
      this.$refs.actionPopup.open()
    },
    // 输入变化处理
    inputChange() {
      this.debounceSearch()
    },

    // 执行搜索
    search() {
      this.loadData()
      this.mescroll.resetUpScroll()
    },

    handleFlowRecord(row) {
      console.log(row);
      this.active = 'record';
      this.$refs.drawer.open();
    },
    handleFlowNote(row) { /* ... */ },
    handleDelete(row) { /* ... */ },
    beDeleted(row) { /* ... */ },
  },
}
</script>

<style lang="scss" scoped>
.list-item {
  padding: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  margin: 16rpx 24rpx;
  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;
}

.action-icon {
  padding: 8rpx;
}

/* 添加点击态效果 */
.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;
}


.action-menu {
  background: #fff;
  border-radius: 16rpx 16rpx 0 0;
  padding: 30rpx;
}

.menu-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.menu-item.danger {
  color: #f56c6c;
}

.menu-item.disabled {
  color: #c0c4cc;
  pointer-events: none;
}
</style>