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="subprocess-selector-section" shadow="never" v-loading="subprocessLoading">
      <div class="subprocess-grid" v-if="availableSubprocesses.length > 0">
        <div
          v-for="subprocess in availableSubprocesses"
          :key="subprocess.id"
          class="subprocess-card"
          :class="{ active: selectedSubprocess?.id === subprocess.id }"
          @click="handleSubprocessSelect(subprocess)"
        >
          <div class="subprocess-icon">
            <el-icon :size="32">
              <component :is="getIcon(subprocess.icon || subprocess.custom_model?.icon)" />
            </el-icon>
          </div>
          <div class="subprocess-name">{{ subprocess.name || subprocess.custom_model?.name || '未命名流程' }}</div>
          <div class="subprocess-description" v-if="subprocess.description">
            {{ subprocess.description }}
          </div>
        </div>
      </div>
      <el-empty v-else description="暂无可用流程" />
    </el-card>

    <!-- 查询类型和筛选区域 -->
    <el-card class="filter-section" shadow="never">
      <!-- 查询类型和年份选择（合并到同一行） -->
      <div class="filter-bar" v-if="selectedSubprocess">
        <div class="filter-group">
          <span class="filter-label">关联状态：</span>
          <el-radio-group v-model="queryType" @change="handleQueryTypeChange">
            <el-radio-button label="not-linked">未关联支付</el-radio-button>
            <el-radio-button label="linked">已关联支付</el-radio-button>
          </el-radio-group>
        </div>
        <div class="filter-group" v-loading="loadingYears">
          <span class="filter-label">发起年份：</span>
          <el-radio-group v-model="selectedYear" @change="handleYearChange">
            <el-radio-button
              v-for="year in availableYears"
              :key="year"
              :label="year"
            >
              {{ year }}年
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <!-- 如果未选择子流程，只显示关联状态选择 -->
      <div class="filter-bar" v-else>
        <div class="filter-group">
          <span class="filter-label">关联状态：</span>
          <el-radio-group v-model="queryType" @change="handleQueryTypeChange">
            <el-radio-button label="not-linked">未关联支付</el-radio-button>
            <el-radio-button label="linked">已关联支付</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <!-- 筛选表单 -->
      <el-form :model="filterForm" inline style="margin-top: 16px">
        <el-form-item label="流程编号">
          <el-input
            v-model="filterForm.keyword"
            placeholder="请输入流程编号或关键词"
            style="width: 200px"
            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" border>
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="no" label="流程编号" width="180" />
        <!-- 动态字段列（放在流程编号后面） -->
        <template v-if="Array.isArray(dynamicFields) && dynamicFields.length > 0">
          <el-table-column
            v-for="field in dynamicFields"
            :key="field.id"
            :prop="`data.${field.name}`"
            :label="field.label"
            :min-width="getFieldWidth(field.type)"
          >
            <template #default="scope">
              {{ formatFieldValue(scope.row.data, field) }}
            </template>
          </el-table-column>
        </template>
        <el-table-column prop="custom_model" label="流程类型" min-width="150">
          <template #default="scope">
            <div class="type-cell">
              <el-icon :size="16" v-if="scope.row.custom_model?.icon || scope.row.customModel?.icon">
                <component :is="getIcon(scope.row.custom_model?.icon || scope.row.customModel?.icon)" />
              </el-icon>
              <span>{{ scope.row.custom_model?.name || scope.row.customModel?.name || '-' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip>
          <template #default="scope">
            <div class="title-cell">
              <span>{{ scope.row.title || '-' }}</span>
              <el-tooltip 
                :content="scope.row.is_created_by_me ? '我创建的' : '我办理过的'" 
                placement="top"
              >
                <el-icon 
                  :size="14" 
                  :color="scope.row.is_created_by_me ? '#409eff' : '#67c23a'"
                  style="margin-left: 6px; cursor: pointer;"
                >
                  <component :is="scope.row.is_created_by_me ? User : Check" />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="申请人" width="100">
          <template #default="scope">
            {{ scope.row.creator?.name || scope.row.creator_name || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="creator_department" label="部门" width="120">
          <template #default="scope">
            {{ scope.row.creator_department?.name || scope.row.creator_department_name || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="current_node" label="当前步骤" width="120">
          <template #default="scope">
            {{ scope.row.current_node?.name || scope.row.currentNode?.name || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="180">
          <template #default="scope">
            {{ formatDateTime(scope.row.created_at) }}
          </template>
        </el-table-column>
        <el-table-column label="相关支付情况" width="200" fixed="right">
          <template #default="scope">
            <div v-if="scope.row.related_payments && scope.row.related_payments.length > 0" class="related-payments">
              <el-tag
                v-for="(payment, idx) in scope.row.related_payments"
                :key="payment.id"
                type="primary"
                size="small"
                class="payment-tag"
                @click.stop="handleViewPayment(payment)"
              >
                {{ payment.serial_number }}
              </el-tag>
            </div>
            <span v-else class="no-payment">-</span>
          </template>
        </el-table-column>
        <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 === 0"
              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, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Search,
  Refresh,
  Document,
  User,
  Check
} from '@element-plus/icons-vue'
// 动态导入所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { preApprovalProcessConfigAPI, oaFlowAPI } from '@/utils/api'
import { getToken } from '@/utils/auth'
import config from '@/config'

const router = useRouter()

// 加载状态
const loading = ref(false)
const subprocessLoading = ref(false)
const loadingYears = ref(false)

// 可用子流程列表
const availableSubprocesses = ref([])
// 选中的子流程
const selectedSubprocess = ref(null)

// 查询类型：not-linked（未关联支付）或 linked（已关联支付）
const queryType = ref('not-linked')

// 动态字段列表（show_in_list=1的字段）
const dynamicFields = ref([])

// 表格数据
const tableData = ref([])

// 年份相关
const availableYears = ref([]) // 可用年份列表
const selectedYear = ref(null) // 选中的年份

// 筛选表单
const filterForm = ref({
  keyword: ''
})

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

// 图标映射
const iconMap = {
  Document
}

// 获取图标组件
const getIcon = (iconName) => {
  if (!iconName) {
    return Document
  }
  // 首先尝试从静态映射表获取
  if (iconMap[iconName]) {
    return iconMap[iconName]
  }
  // 然后尝试从ElementPlusIconsVue动态获取
  if (ElementPlusIconsVue[iconName]) {
    return ElementPlusIconsVue[iconName]
  }
  // 如果找不到，返回默认图标
  return Document
}

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    0: 'warning',  // 待审批
    1: 'success',  // 已批准
    2: 'danger',   // 已拒绝
    3: 'info'      // 已撤回
  }
  return statusMap[status] || ''
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待审批',
    1: '已批准',
    2: '已拒绝',
    3: '已撤回'
  }
  return statusMap[status] || '未知'
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取字段宽度
const getFieldWidth = (fieldType) => {
  const widthMap = {
    'text': 120,
    'textarea': 200,
    'number': 100,
    'money': 120,
    'date': 120,
    'datetime': 150,
    'select': 120,
    'file': 150
  }
  return widthMap[fieldType] || 120
}

// 格式化字段值
const formatFieldValue = (data, field) => {
  if (!data || !field || !field.name) return '-'
  
  // 尝试多种方式获取值
  let value = data[field.name]
  
  // 如果 data 是对象但没有该字段，尝试其他路径
  if (value === undefined && typeof data === 'object') {
    // 尝试使用字段的 label 或其他可能的键
    value = data[field.label] || data[`${field.name}_text`] || null
  }
  
  if (value === null || value === undefined || value === '') return '-'

  switch (field.type) {
    case 'number':
    case 'money':
      return typeof value === 'number' ? value.toLocaleString('zh-CN') : value
    case 'date':
      if (value) {
        try {
          const date = new Date(value)
          if (!isNaN(date.getTime())) {
            return date.toLocaleDateString('zh-CN')
          }
        } catch (e) {
          console.warn('日期格式化失败：', value, e)
        }
      }
      return '-'
    case 'datetime':
      if (value) {
        try {
          return formatDateTime(value)
        } catch (e) {
          console.warn('日期时间格式化失败：', value, e)
        }
      }
      return '-'
    case 'select':
    case 'radio':
      // 如果是选项类型，尝试显示选项文本
      if (field.options && Array.isArray(field.options)) {
        const option = field.options.find(opt => opt.value === value || opt.id === value)
        return option ? (option.label || option.name || value) : value
      }
      return value
    case 'file':
    case 'files':
      // 文件类型，显示文件数量或文件名
      if (Array.isArray(value)) {
        return `${value.length} 个文件`
      }
      return value
    default:
      return String(value)
  }
}

// 加载年份列表
const loadAvailableYears = async () => {
  if (!selectedSubprocess.value || !selectedSubprocess.value.custom_model_id) {
    availableYears.value = []
    return
  }
  
  loadingYears.value = true
  try {
    const response = await oaFlowAPI.getFlowYears({
      custom_model_id: selectedSubprocess.value.custom_model_id
    })
    
    if (response.code === 0 && Array.isArray(response.data)) {
      availableYears.value = response.data
      
      // 自动选定当年
      const currentYear = new Date().getFullYear()
      if (availableYears.value.includes(currentYear)) {
        selectedYear.value = currentYear
      } else if (availableYears.value.length > 0) {
        // 如果没有当年，选择最新的年份
        selectedYear.value = availableYears.value[0]
      } else {
        selectedYear.value = null
      }
    } else {
      availableYears.value = []
      // 如果没有年份数据，默认使用当年
      selectedYear.value = new Date().getFullYear()
    }
  } catch (error) {
    console.error('加载年份列表失败：', error)
    availableYears.value = []
    // 出错时默认使用当年
    selectedYear.value = new Date().getFullYear()
  } finally {
    loadingYears.value = false
  }
}

// 年份切换
const handleYearChange = () => {
  pagination.value.currentPage = 1
  filterForm.value.keyword = ''
  loadFlowList()
}

// 选择子流程
const handleSubprocessSelect = async (subprocess) => {
  if (!subprocess.custom_model_id) {
    ElMessage.warning('该流程项未关联OA模型')
    return
  }
  
  // 立即清空表格数据，避免显示上一个流程的数据
  tableData.value = []
  pagination.value.total = 0
  pagination.value.currentPage = 1
  
  selectedSubprocess.value = subprocess
  
  // 加载模型字段
  await loadModelFields(subprocess.custom_model_id)
  
  // 先加载年份列表
  await loadAvailableYears()
  
  // 年份加载完成后，再加载流程列表
  // 即使没有年份，loadFlowList 内部也会处理清空逻辑，但这里已经提前清空了
  if (selectedYear.value) {
    await loadFlowList()
  } else {
    // 如果没有年份数据，确保表格是空的（已经在上面清空了）
    // 可以显示提示信息
    console.log('该流程类型暂无数据')
  }
}

// 查询类型改变
const handleQueryTypeChange = () => {
  if (selectedSubprocess.value) {
    loadFlowList()
  }
}

// 加载可用子流程
const loadAvailableSubprocesses = async () => {
  subprocessLoading.value = true
  try {
    const res = await preApprovalProcessConfigAPI.getForStartProcess()
    if (res.code === 0) {
      // 提取所有流程项（第二层）
      const subprocesses = []
      
      // 确保 res.data 是数组
      const data = Array.isArray(res.data) ? res.data : []
      
      data.forEach(group => {
        // 确保 children 是数组
        const children = Array.isArray(group.active_children) 
          ? group.active_children 
          : Array.isArray(group.activeChildren)
          ? group.activeChildren
          : Array.isArray(group.children)
          ? group.children
          : []
        
        children.forEach(child => {
          if (child && child.custom_model_id) {
            subprocesses.push({
              id: child.id,
              name: child.name,
              description: child.description,
              icon: child.icon || child.custom_model?.icon,
              custom_model_id: child.custom_model_id,
              custom_model: child.custom_model
            })
          }
        })
      })
      
      availableSubprocesses.value = subprocesses
      
      // 默认选中第一个
      if (subprocesses.length > 0) {
        await handleSubprocessSelect(subprocesses[0])
      }
    } else {
      ElMessage.error(res.msg || res.message || '获取流程配置失败')
      availableSubprocesses.value = []
    }
  } catch (error) {
    ElMessage.error('获取流程配置失败：' + error.message)
    availableSubprocesses.value = []
  } finally {
    subprocessLoading.value = false
  }
}

// 加载模型字段
const loadModelFields = async (customModelId) => {
  try {
    const res = await oaFlowAPI.getCustomModelFields(customModelId)
    if (res.code === 0 && res.data?.customModel?.fields) {
      // 确保 fields 是数组
      const fieldsArray = Array.isArray(res.data.customModel.fields) 
        ? res.data.customModel.fields 
        : []
      
      // 筛选 show_in_list = 1 的字段，并按 myindex 排序
      const fields = fieldsArray
        .filter(field => field && field.show_in_list === 1)
        .sort((a, b) => (a.myindex || 0) - (b.myindex || 0))
      
      dynamicFields.value = fields
    } else {
      dynamicFields.value = []
    }
  } catch (error) {
    console.error('获取模型字段失败：', error)
    dynamicFields.value = []
  }
}

// 加载流程列表
const loadFlowList = async () => {
  if (!selectedSubprocess.value || !selectedSubprocess.value.custom_model_id) {
    return
  }

  // 如果没有选中年份，不加载数据
  if (!selectedYear.value) {
    tableData.value = []
    pagination.value.total = 0
    return
  }

  loading.value = true
  try {
    const params = {
      custom_model_id: selectedSubprocess.value.custom_model_id,
      year: selectedYear.value, // 必填：年份参数
      page: pagination.value.currentPage,
      page_size: pagination.value.pageSize,
      is_simple: 0, // 完整版本，包含data字段
      payment_link_status: queryType.value, // 关联支付状态：not-linked 或 linked
      ...filterForm.value
    }

    // 移除空值
    Object.keys(params).forEach(key => {
      if (params[key] === '' || params[key] === null || params[key] === undefined) {
        delete params[key]
      }
    })

    // 使用 "all" 类型，因为我们现在通过 payment_link_status 参数来过滤
    const res = await oaFlowAPI.getFlowList('all', params)
    if (res.code === 0) {
      // 后端返回结构：res.data.data 是分页对象（Laravel Paginator）
      // 分页对象包含：{ data: [...], total: 100, current_page: 1, per_page: 10, ... }
      const paginationData = res.data?.data
      
      if (paginationData) {
        // 如果 paginationData 有 data 属性，说明是分页对象
        if (paginationData.data && Array.isArray(paginationData.data)) {
          tableData.value = paginationData.data
          pagination.value.total = paginationData.total || 0
        } 
        // 如果 paginationData 本身就是数组，直接使用
        else if (Array.isArray(paginationData)) {
          tableData.value = paginationData
          // 尝试从其他地方获取总数
          pagination.value.total = res.data?.total || paginationData.length || 0
        }
        // 其他情况，尝试作为数组处理
        else {
          tableData.value = []
          pagination.value.total = 0
          console.warn('未识别的数据格式，完整响应：', res)
        }
      } else {
        // 如果没有 paginationData，尝试直接使用 res.data.data
        const data = res.data?.data
        if (Array.isArray(data)) {
          tableData.value = data
          pagination.value.total = res.data?.total || data.length || 0
        } else {
          tableData.value = []
          pagination.value.total = 0
          console.warn('数据格式异常，完整响应：', res)
        }
      }
      
      // 调试信息：检查数据是否正确加载
      if (tableData.value.length === 0 && pagination.value.total > 0) {
        console.warn('数据为空但总数不为0，可能数据格式不匹配')
      }
    } else {
      ElMessage.error(res.msg || res.message || '获取流程列表失败')
      tableData.value = []
      pagination.value.total = 0
    }
  } catch (error) {
    ElMessage.error('获取流程列表失败：' + error.message)
    tableData.value = []
    pagination.value.total = 0
  } finally {
    loading.value = false
  }
}

// 查询
const handleSearch = () => {
  pagination.value.currentPage = 1
  loadFlowList()
}

// 重置
const handleReset = () => {
  filterForm.value = {
    keyword: ''
  }
  pagination.value.currentPage = 1
  // 年份不重置，保持当前选择
  loadFlowList()
}

// 查看支付详情
const handleViewPayment = (payment) => {
  // 打开新窗口显示打印预览页
  const url = router.resolve({
    name: 'PaymentDetailPrint',
    params: { id: payment.id }
  }).href
  window.open(url, '_blank')
}

// 查看
const handleView = (row) => {
  // 跳转到OA流程详情页面
  const token = getToken()
  const baseUrl = '/oa/#/flow/view'
  const params = new URLSearchParams({
    id: row.id.toString(),
    isSinglePage: '1',
    module_name: 'oa',
    form_canal: 'budget'
  })
  if (token) {
    params.set('auth_token', token)
  }
  const fullUrl = `${baseUrl}?${params.toString()}`
  
  // 在新窗口打开
  window.open(fullUrl, '_blank')
}

// 编辑
const handleEdit = (row) => {
  // 跳转到OA流程编辑页面
  const token = getToken()
  const baseUrl = '/oa/#/flow/deal'
  const params = new URLSearchParams({
    id: row.id.toString(),
    isSinglePage: '1',
    module_name: 'oa',
    form_canal: 'budget'
  })
  if (token) {
    params.set('auth_token', token)
  }
  const fullUrl = `${baseUrl}?${params.toString()}`
  
  // 在新窗口打开
  window.open(fullUrl, '_blank')
}

// 分页大小改变
const handleSizeChange = (val) => {
  pagination.value.pageSize = val
  pagination.value.currentPage = 1
  loadFlowList()
}

// 当前页改变
const handleCurrentChange = (val) => {
  pagination.value.currentPage = val
  loadFlowList()
}

// 页面加载
onMounted(() => {
  loadAvailableSubprocesses()
})
</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;
}

.subprocess-selector-section {
  margin-bottom: 20px;
}

.subprocess-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.subprocess-card {
  padding: 20px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.subprocess-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.subprocess-card.active {
  border-color: #409eff;
  background: #409eff;
  color: white;
}

.subprocess-card.active .subprocess-icon {
  color: white;
}

.subprocess-icon {
  margin-bottom: 12px;
  color: #409eff;
}

.subprocess-card.active .subprocess-icon {
  color: white;
}

.subprocess-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.subprocess-description {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

.subprocess-card.active .subprocess-description {
  color: rgba(255, 255, 255, 0.8);
}

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

.filter-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 4px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
  white-space: nowrap;
}

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

.title-cell {
  display: flex;
  align-items: center;
  gap: 0;
}

.related-payments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.payment-tag {
  cursor: pointer;
  transition: all 0.2s;
}

.payment-tag:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

.no-payment {
  color: #909399;
  font-style: italic;
}

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

@media (max-width: 768px) {
  .subprocess-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
  
  .subprocess-card {
    padding: 16px;
  }
}
</style>