yoe-shop-web/src/views/organization/approvalFlow/index.vue

<template>
  <div class="approval-flow-container">
    <div class="page-header">
      <PageTitle title="审批流程" />
      <el-button type="danger" @click="handleAddFlow">新增流程</el-button>
    </div>

    <el-table v-loading="loading" :data="flowList" border>
      <el-table-column prop="flowName" label="流程名称" min-width="200" />
      <el-table-column prop="status" label="流程状态" min-width="120">
        <template #default="{ row }">
          <span :class="['status-text', row.status === '1' ? 'active' : '']">
            {{ row.status === '1' ? '生效' : '禁用' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="180" />
      <el-table-column label="操作" width="200" align="center">
        <template #default="{ row }">
          <el-button type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button
            :type="row.status === '1' ? 'warning' : 'success'"
            link
            size="small"
            @click="handleToggleStatus(row)"
          >{{ row.status === '1' ? '关闭' : '开启' }}</el-button>
          <el-button type="danger" link size="small" @click="handleDisable(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { PageTitle } from '@/components';
import { getOrderFlowList, deleteOrderFlow, startOrderFlow, closeOrderFlow } from '@/api/pc/enterprise/order';
import type { OrderCustomerFlow } from '@/api/pc/enterprise/orderTypes';

const router = useRouter();

const loading = ref(false);
const flowList = ref<OrderCustomerFlow[]>([]);

/** 加载流程列表 */
const loadFlowList = async () => {
  loading.value = true;
  try {
    const res = await getOrderFlowList();
    flowList.value = res.rows || [];
  } catch (e) {
    ElMessage.error('加载流程列表失败');
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadFlowList();
});

const handleAddFlow = () => {
  router.push('/organization/approvalFlow/create');
};

const handleEdit = (row: OrderCustomerFlow) => {
  router.push(`/organization/approvalFlow/create?id=${row.id}`);
};

const handleToggleStatus = (row: OrderCustomerFlow) => {
  const isActive = row.status === '1';
  const actionText = isActive ? '关闭' : '开启';
  ElMessageBox.confirm(`确定要${actionText}"${row.flowName}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      try {
        if (isActive) {
          await closeOrderFlow(row.id as number);
        } else {
          await startOrderFlow(row.id as number);
        }
        ElMessage.success(`${actionText}成功`);
        loadFlowList();
      } catch (e) {
        ElMessage.error(`${actionText}失败`);
      }
    })
    .catch(() => {});
};

const handleDisable = (row: OrderCustomerFlow) => {
  ElMessageBox.confirm(`确定要删除"${row.flowName}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      try {
        await deleteOrderFlow(row.id!);
        ElMessage.success('删除成功');
        loadFlowList();
      } catch (e) {
        ElMessage.error('删除失败');
      }
    })
    .catch(() => {});
};
</script>

<style scoped lang="scss">
.approval-flow-container {
  padding: 20px;
  background: #fff;
  min-height: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  :deep(.page-title) {
    margin-bottom: 0;
  }
}

:deep(.el-table) {
  th.el-table__cell {
    background: #fafafa;
    font-weight: 500;
    color: #333;
  }
  .el-table__cell {
    padding: 12px 0;
  }
}

.status-text {
  color: #999;
  &.active {
    color: #67c23a;
  }
}
</style>