zcui/src/views/workflow/process.vue

<template>
  <basic-container>
    <div class="my-process">
      <!-- 页面标题 -->
      <div class="page-header">
        <h3 class="page-title">我的流程</h3>
        <el-tag type="info" class="process-count">共 {{ processList.length }} 个流程</el-tag>
      </div>

      <!-- 流程卡片网格 -->
      <div class="process-grid">
        <div
          v-for="process in processList"
          :key="process.id"
          class="process-card"
          :style="{ '--process-color': process.processColor }"
          @click="handleStartProcess(process)"
        >
          <div class="process-content">
            <div
              class="process-icon"
              :style="{ backgroundColor: process.iconColor }"
            >
              <el-icon :size="36"><component :is="process.icon" /></el-icon>
            </div>
            <div class="process-info">
              <div class="process-name">{{ process.name }}</div>
              <div class="process-category">{{ process.category }}</div>
              <el-tag
                :type="process.status === 'active' ? 'success' : 'info'"
                size="small"
                class="process-status"
              >
                {{ process.status === 'active' ? '启用' : '停用' }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  </basic-container>
</template>

<script>
import { Document, OfficeBuilding, ShoppingCart, Connection } from '@element-plus/icons-vue';

export default {
  data() {
    return {
      processList: [
        {
          id: 1,
          code: 'WF2024052001',
          name: '非经营性商品录入',
          category: '非经营性商品管理',
          status: 'active',
          version: '1.0',
          icon: Document,
          iconColor: '#67c23a',
          processColor: '#67c23a',
        },
        {
          id: 2,
          code: 'WF2024052002',
          name: '年度招采计划申请',
          category: '招标管理',
          status: 'active',
          version: '1.0',
          icon: OfficeBuilding,
          iconColor: '#409eff',
          processColor: '#409eff',
        },
        {
          id: 3,
          code: 'WF2024052003',
          name: '预招标申请',
          category: '招标管理',
          status: 'active',
          version: '1.2',
          icon: Document,
          iconColor: '#e6a23c',
          processColor: '#e6a23c',
        },
        {
          id: 4,
          code: 'WF2024052004',
          name: '采购需求发起',
          category: '订单管理',
          status: 'active',
          version: '1.0',
          icon: Connection,
          iconColor: '#909399',
          processColor: '#909399',
        },
        {
          id: 5,
          code: 'WF2024052005',
          name: '询比价流程',
          category: '询比价管理',
          status: 'active',
          version: '1.1',
          icon: ShoppingCart,
          iconColor: '#f56c6c',
          processColor: '#f56c6c',
        },
      ],
    };
  },
  methods: {
    handleStartProcess(process) {
      this.$message.info(`流程"${process.name}"暂未实现`);
      // TODO: 后续接入流程发起表单页面
    },
  },
};
</script>

<style scoped>
.my-process {
  width: 100%;
  min-height: calc(100vh - 140px);
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 10px;
}

.page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.process-count {
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  padding: 10px;
}

.process-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  border: 1px solid #e4e7ed;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  position: relative;
  overflow: hidden;
}

.process-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--process-color) 0%, transparent 100%);
}

.process-card:hover {
  border-color: var(--process-color);
  box-shadow: 0 8px 30px rgba(64, 158, 255, 0.2);
  transform: translateY(-4px);
}

.process-card:hover::before {
  background: linear-gradient(90deg, var(--process-color) 0%, transparent 100%);
}

.process-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  z-index: 1;
}

.process-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.process-card:hover .process-icon {
  transform: scale(1.1) rotate(5deg);
}

.process-info {
  text-align: center;
  padding: 0 10px;
}

.process-name {
  font-size: 17px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
  line-height: 1.4;
}

.process-category {
  font-size: 14px;
  color: #909399;
  margin-bottom: 12px;
}

.process-status {
  margin-top: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .my-process {
    padding: 15px;
  }

  .process-grid {
    gap: 16px;
    padding: 5px;
  }

  .process-card {
    padding: 20px 15px;
  }

  .process-name {
    font-size: 15px;
  }
}
</style>