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-05-29 10:29:10
-->
<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 myProcessList" :key="index">
          <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>
        </view>
      </view>
    </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: selectedItem && 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 '@/pages/components/flowable/FlowRecord.vue';
import { getProcessVariables } from "@/api/flowable/definition";
import { getDeployment, delDeployment, addDeployment, updateDeployment, exportDeployment, flowRecord } from "@/api/flowable/finished";
import { deleteResources } from "@/utils/deleteResource";
export default {
  components: { FlowRecord },
  mixins: [MescrollMixin],
  data() {
    return {
      activeTabs: 0,
      mescroll: null, // mescroll实例
      // 我发起的流程列表数据
      myProcessList: [],
      total: 0,
      queryParams: {
        name: '',
        pageNum: 1,
        pageSize: 10
      },
      selectedItem: null, // 当前选中项
      debounceSearch: null, // 初始化防抖方法
      clickRow: {},
      active: 'record',
      downOption: {
        auto: true, // 手动初始化后需要关闭自动加载
        textOutOffset: '下拉刷新',
        textLoading: '加载中...'
      },
      upOption: {
        auto: false, // 自动加载初始页
        page: { num: 1, size: 10 }, // 初始页码和每页数量
        noMoreSize: 5, // 数据不足时显示"没有更多"
        empty: { tip: '暂无待审任务' },
        textNoMore: '~ 没有更多任务了 ~'
      }
    }
  },
  created() {

  },
  onLoad: function (options) {
    uni.startPullDownRefresh();
  },
  mounted() {
  },
  methods: {
    switchTabs(item) {
      this.activeTabs = item.index;
      this.queryParams.finishTime
    },
    // 初始化mescroll
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // mescroll下拉刷新回调
    async downCallback() {
      this.myProcessList = []; // 清空列表
      this.queryParams.pageNum = 1
      const res = await this.loadData()
      this.myProcessList = 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.myProcessList = this.myProcessList.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,
          }
        }
      } catch (e) {
        this.mescroll.endErr()
        return { data: { list: [] } }
      }
    },
    getMyprogressList() {
      myProcessList({
        pageNum: 1,
        pageSize: 10,
      }).then(response => {
        this.total = response.data.total;
        this.myProcessList = response.data.records;
        uni.stopPullDownRefresh();
      });
    },
    // 显示操作菜单
    showAction(item) {
      this.selectedItem = item
      this.$refs.actionPopup.open()
    },
    // 输入变化处理
    inputChange(res) {
      this.queryParams.name = res;
      this.search();
    },

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

    handleFlowRecord(row) {
      this.active = 'record';
      this.$refs.drawer.open();
    },
    handleFlowNote(row) {
      const query = {
        procInsId: row.procInsId,
        executionId: row.executionId,
        deployId: row.deployId,
        taskId: row.taskId,
        taskName: '',
        startUserName: row.startUserName,
        procDefName: row.procDefName
      }
      const encodedParams = encodeURIComponent(JSON.stringify(query));
      uni.navigateTo({
        url: `/pages/message/apply/detail?params=${encodedParams}`
      })
      this.$refs.actionPopup.close();
    },
    handleDelete(row) {
      const ids = row.procInsId || this.ids;// 暂不支持删除多个流程
      // 显示确认提交对话框
      uni.showModal({
        title: '提示',
        content: '删除流程后不可撤回，确认删除该流程吗？',
        success: (res) => {
          if (!res.confirm) {
            return;
          }
          getProcessVariables(row.taskId).then(res => {
            if (res.data) {
              let delId = res.data.formId;
              deleteResources(row.procDefName, delId)
            }
            return delDeployment(ids);
          }).then(() => {
            this.downCallback();
            this.$modal.msgSuccess("流程取消成功");
            this.$refs.actionPopup.close()
          })
        }
      });
    },
    beDeleted(row) {
      if (row.procDefName == '项目预算' || row.procDefName == '技术方案' || row.procDefName == '安全交底' || row.procDefName == '技术交底' || row.finishTime != null) {
        return true
      } else if (row.procDefName == '项目流转' && row.taskName != '项目登记') {
        return true
      } else {
        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;
}

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