cz-hjjc-budget/src/views/pre-approval/ProcessQuery.vue

<template>
  <div class="process-query-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">
        <el-icon :size="24"><Search /></el-icon>
        流程查询
      </h1>
    </div>

    <!-- 筛选区域 -->
    <el-card class="filter-section" shadow="never">
      <el-form :model="filterForm" inline>
        <el-form-item label="流程类型">
          <el-select v-model="filterForm.processType" clearable style="width: 200px" placeholder="全部">
            <el-option label="采购管理" value="procurement" />
            <el-option label="出差管理" value="travel" />
            <el-option label="会议审批" value="meeting" />
            <el-option label="合同审批" value="contract" />
            <el-option label="安装维修" value="installation" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filterForm.status" clearable style="width: 150px" placeholder="全部">
            <el-option label="待审批" value="pending" />
            <el-option label="已批准" value="approved" />
            <el-option label="处理中" value="processing" />
            <el-option label="已拒绝" value="rejected" />
          </el-select>
        </el-form-item>
        <el-form-item label="流程编号">
          <el-input
            v-model="filterForm.processNo"
            placeholder="请输入流程编号"
            style="width: 200px"
            clearable
          />
        </el-form-item>
        <el-form-item label="申请人">
          <el-input
            v-model="filterForm.applicant"
            placeholder="请输入申请人"
            style="width: 150px"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card shadow="never">
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="processNo" label="流程编号" width="180" />
        <el-table-column prop="processType" label="流程类型" min-width="200">
          <template #default="scope">
            <div class="type-cell">
              <el-icon :size="16" :color="getTypeColor(scope.row.processTypeIcon)">
                <component :is="getIcon(scope.row.processTypeIcon)" />
              </el-icon>
              <span>{{ scope.row.processType }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" min-width="200" />
        <el-table-column prop="applicant" label="申请人" width="100" />
        <el-table-column prop="department" label="部门" width="120" />
        <el-table-column prop="amount" label="金额" width="120" align="right">
          <template #default="scope">
            <span style="color: #409eff; font-weight: 600;">¥{{ formatNumber(scope.row.amount) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="currentStep" label="当前步骤" width="120" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="handleView(scope.row)">
              查看
            </el-button>
            <el-button
              v-if="scope.row.status === '待审批'"
              type="success"
              link
              size="small"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Search,
  Refresh,
  ShoppingBag,
  Promotion,
  ChatLineRound,
  Document,
  Tools
} from '@element-plus/icons-vue'
import { processList, delay } from '@/mock'

const loading = ref(false)
const tableData = ref([])
const filterForm = ref({
  processType: '',
  status: '',
  processNo: '',
  applicant: ''
})

const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const iconMap = {
  ShoppingBag,
  Promotion,
  ChatLineRound,
  Document,
  Tools
}

const getIcon = (iconName) => {
  return iconMap[iconName] || Document
}

const getTypeColor = (iconName) => {
  const colorMap = {
    ShoppingBag: '#409eff',
    Promotion: '#909399',
    ChatLineRound: '#67c23a',
    Document: '#e6a23c',
    Tools: '#909399'
  }
  return colorMap[iconName] || '#409eff'
}

const getStatusType = (status) => {
  const statusMap = {
    '待审批': 'warning',
    '已批准': 'success',
    '处理中': 'primary',
    '已拒绝': 'danger'
  }
  return statusMap[status] || ''
}

const formatNumber = (num) => {
  return Number(num).toLocaleString('zh-CN')
}

const handleSearch = () => {
  ElMessage.info('查询功能待对接后端API')
  loadData()
}

const handleReset = () => {
  filterForm.value = {
    processType: '',
    status: '',
    processNo: '',
    applicant: ''
  }
  loadData()
}

const handleView = (row) => {
  ElMessage.info(`查看流程: ${row.processNo}`)
}

const handleEdit = (row) => {
  ElMessage.info(`编辑流程: ${row.processNo}`)
}

const handleSizeChange = (val) => {
  pagination.value.pageSize = val
  loadData()
}

const handleCurrentChange = (val) => {
  pagination.value.currentPage = val
  loadData()
}

const loadData = async () => {
  loading.value = true
  await delay()
  tableData.value = processList
  pagination.value.total = processList.length
  loading.value = false
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.process-query-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100%;
}

.page-header {
  background: white;
  padding: 25px 30px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-section {
  margin-bottom: 20px;
}

.type-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>