zcui/saber3/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 { getProcessTypes } from '@/api/workflow';
import { Document, OfficeBuilding, ShoppingCart, Connection } from '@element-plus/icons-vue';

export default {
  data() {
    return {
      loading: false,
      processList: [],
    };
  },
  mounted() {
    this.loadProcessTypes();
  },
  methods: {
    loadProcessTypes() {
      this.loading = true;
      getProcessTypes().then(res => {
        const data = res.data.data;
        // 将接口返回的 {processName, processId} 映射为页面需要的结构
        const iconMap = [
          { icon: Document, iconColor: '#67c23a', processColor: '#67c23a', category: '非经营性商品管理' },
          { icon: OfficeBuilding, iconColor: '#409eff', processColor: '#409eff', category: '招标管理' },
          { icon: Document, iconColor: '#e6a23c', processColor: '#e6a23c', category: '招标管理' },
          { icon: Connection, iconColor: '#909399', processColor: '#909399', category: '订单管理' },
          { icon: ShoppingCart, iconColor: '#f56c6c', processColor: '#f56c6c', category: '询比价管理' },
        ];
        this.processList = data.map((item, index) => {
          const style = iconMap[index % iconMap.length];
          return {
            id: item.processId,
            code: item.processId,
            name: item.processName,
            category: style.category,
            status: 'active',
            version: '1.0',
            icon: style.icon,
            iconColor: style.iconColor,
            processColor: style.processColor,
          };
        });
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    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>