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

<template>
  <view class="page-container">
    <!-- 搜索框 -->
    <view class="search-box">
      <uni-search-bar radius="34" placeholder="请输入流程名称或标题" @confirm="search" @input="inputChange"
        v-model="queryParams.keyword" />
    </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" :title="item.procDefName"
          :note="`提交时间：${item.createTime}`" clickable>
          <template v-slot:body>
            <view class="list-item">
              <!-- 状态 -->
              <view class="status">
                <uni-tag :text="item.finishTime ? '已完成' : '进行中'" :type="item.finishTime ? 'success' : 'warning'"
                  size="small" />
              </view>

              <!-- 主要内容 -->
              <view class="content">
                <view class="title-line">
                  <text class="title"><b>标题：</b>{{ item.title }}</text>
                </view>
                <uv-divider :dashed="true"></uv-divider>
                <view class="info-line">
                  <view class="time">耗时：{{ item.duration }}</view>
                  <view class="node">当前节点：{{ item.taskName }}</view>
                  <view class="assignee">待办人：{{ item.assigneeName || '无' }}</view>
                </view>
              </view>

              <!-- 操作按钮 -->
              <view class="actions">
                <uni-icons type="more-filled" size="24" @click.stop="showAction(item)"></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>
  </view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll/components/mescroll-uni/mescroll-mixins.js'
import { myProcessList, stopProcess } from "@/api/flowable/process";
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      // 我发起的流程列表数据
      myProcessList: [],
      list: [], // 列表数据
      queryParams: {
        keyword: '',
        pageNum: 1,
        pageSize: 10
      },
      selectedItem: null, // 当前选中项
      debounceSearch: null // 初始化防抖方法
    }
  },
  created() {
    // 在生命周期中创建防抖方法
    this.debounceSearch = uni.$u.debounce(() => {
      this.search()
    }, 500)
  },
  methods: {
    // mescroll下拉刷新回调
    async downCallback() {
      this.queryParams.pageNum = 1
      const res = await this.loadData()
      this.list = res.data.list;
      console.log(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.mescroll.resetUpScroll()
    },

    handleFlowRecord(row) { /* ... */ },
    handleFlowNote(row) { /* ... */ },
    handleDelete(row) { /* ... */ },
    beDeleted(row) { /* ... */ },
  },
}
</script>

<style lang="scss" scoped>
.list-item {
  display: flex;
  align-items: center;
  padding: 12rpx 0;
  width: 100%;
  justify-content: space-between;
}

.status {
  margin-right: 20rpx;
}

.content {
  flex: 1;
}

.title-line {
  // display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.title {
  font-size: 28rpx;
  color: #333;
  max-width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time {
  font-size: 24rpx;
  color: #999;
}

.info-line {
  // display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #666;
}

.actions {
  padding-left: 20rpx;
}

.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>