|
|
<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>
|
|
|
|
|
|
<!-- 高级查询（仅在选择了子流程时显示） -->
|
|
|
<template v-if="selectedSubprocess && allModelFields.length > 0">
|
|
|
<el-form-item label="字段">
|
|
|
<el-select
|
|
|
v-model="filterForm.field_id"
|
|
|
placeholder="请选择字段"
|
|
|
style="width: 180px"
|
|
|
filterable
|
|
|
clearable
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="field in allModelFields"
|
|
|
:key="field.id"
|
|
|
:value="field.id"
|
|
|
:label="field.label"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="类型">
|
|
|
<el-select
|
|
|
v-model="filterForm.operator"
|
|
|
placeholder="请选择类型"
|
|
|
style="width: 150px"
|
|
|
clearable
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="op in operatorOptions"
|
|
|
:key="op.id"
|
|
|
:value="op.id"
|
|
|
:label="op.label"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="关键词">
|
|
|
<el-input
|
|
|
v-model="filterForm.field_keyword"
|
|
|
placeholder="请输入关键词"
|
|
|
style="width: 200px"
|
|
|
clearable
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</template>
|
|
|
|
|
|
<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="field.type === 'relation' ? 300 : getFieldWidth(field.type)"
|
|
|
>
|
|
|
<template #default="scope">
|
|
|
<div v-if="field.type === 'relation'" class="relation-field-renderer">
|
|
|
<el-table
|
|
|
:data="getRelationFieldData(scope.row.data, field)"
|
|
|
border
|
|
|
size="small"
|
|
|
style="width: 100%"
|
|
|
:show-header="true"
|
|
|
>
|
|
|
<el-table-column
|
|
|
v-for="subField in getSubFormFields(field.name)"
|
|
|
:key="subField.id"
|
|
|
:prop="subField.name"
|
|
|
:label="subField.label"
|
|
|
:min-width="100"
|
|
|
>
|
|
|
<template #default="subScope">
|
|
|
{{ formatSubFieldValue(subScope.row, subField) }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<span v-else>{{ formatFieldValue(scope.row.data, field) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</template>
|
|
|
<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="hasGlobalFlowSupervisionRole"
|
|
|
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, computed } 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'
|
|
|
import { useUserStore } from '@/store/user'
|
|
|
|
|
|
const router = useRouter()
|
|
|
const userStore = useUserStore()
|
|
|
|
|
|
// 加载状态
|
|
|
const loading = ref(false)
|
|
|
const subprocessLoading = ref(false)
|
|
|
const loadingYears = ref(false)
|
|
|
|
|
|
// 请求序列号，用于防止竞态条件
|
|
|
let requestSequence = 0
|
|
|
|
|
|
// 可用子流程列表
|
|
|
const availableSubprocesses = ref([])
|
|
|
// 选中的子流程
|
|
|
const selectedSubprocess = ref(null)
|
|
|
|
|
|
// 查询类型：not-linked（未关联支付）或 linked（已关联支付）
|
|
|
const queryType = ref('not-linked')
|
|
|
|
|
|
// 动态字段列表（show_in_list=1的字段）
|
|
|
const dynamicFields = ref([])
|
|
|
// 子表单字段映射（用于 relation 类型字段）
|
|
|
const subFormFieldsMap = ref({})
|
|
|
// 选项数据映射（用于 select 类型字段，key 为 selection_model，value 为选项数组）
|
|
|
const selectionOptionsMap = ref({})
|
|
|
|
|
|
// 表格数据
|
|
|
const tableData = ref([])
|
|
|
|
|
|
// 年份相关
|
|
|
const availableYears = ref([]) // 可用年份列表
|
|
|
const selectedYear = ref(null) // 选中的年份
|
|
|
|
|
|
// 筛选表单
|
|
|
const filterForm = ref({
|
|
|
keyword: '',
|
|
|
field_id: '',
|
|
|
operator: '',
|
|
|
field_keyword: ''
|
|
|
})
|
|
|
|
|
|
// 操作符选项
|
|
|
const operatorOptions = [
|
|
|
{ id: 'eq', label: '等于' },
|
|
|
{ id: 'neq', label: '不等于' },
|
|
|
{ id: 'like', label: '包含' }
|
|
|
]
|
|
|
|
|
|
// 所有模型字段（用于高级查询，不仅仅是show_in_list=1的字段）
|
|
|
const allModelFields = ref([])
|
|
|
|
|
|
// 分页
|
|
|
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 getSubFormFields = (fieldName) => {
|
|
|
return subFormFieldsMap.value[fieldName] || []
|
|
|
}
|
|
|
|
|
|
// 获取 relation 字段的数据（转换为数组格式）
|
|
|
const getRelationFieldData = (data, field) => {
|
|
|
if (!data || !field || !field.name) return []
|
|
|
|
|
|
let value = data[field.name]
|
|
|
|
|
|
// 如果 value 是字符串，尝试解析为 JSON
|
|
|
if (typeof value === 'string') {
|
|
|
try {
|
|
|
value = JSON.parse(value)
|
|
|
} catch (e) {
|
|
|
console.warn('解析 relation 字段 JSON 失败：', value, e)
|
|
|
return []
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 确保是数组
|
|
|
if (!Array.isArray(value)) {
|
|
|
return []
|
|
|
}
|
|
|
|
|
|
return value
|
|
|
}
|
|
|
|
|
|
// 格式化子表单字段值
|
|
|
const formatSubFieldValue = (rowData, subField) => {
|
|
|
if (!rowData || !subField || !subField.name) return '-'
|
|
|
|
|
|
let value = rowData[subField.name]
|
|
|
|
|
|
if (value === null || value === undefined || value === '') return '-'
|
|
|
|
|
|
switch (subField.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':
|
|
|
// 如果有 selection_model，从 selectionOptionsMap 中查找
|
|
|
if (subField.selection_model && selectionOptionsMap.value[subField.selection_model]) {
|
|
|
const options = selectionOptionsMap.value[subField.selection_model]
|
|
|
const option = options.find(opt =>
|
|
|
opt.id == value ||
|
|
|
opt.value == value ||
|
|
|
String(opt.id) === String(value) ||
|
|
|
String(opt.value) === String(value)
|
|
|
)
|
|
|
if (option) {
|
|
|
return option.label || option.name || value
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 如果没有 selection_model 或找不到，尝试使用 subField.options
|
|
|
if (subField.options && Array.isArray(subField.options)) {
|
|
|
const option = subField.options.find(opt => opt.value === value || opt.id === value)
|
|
|
return option ? (option.label || option.name || value) : value
|
|
|
}
|
|
|
return value
|
|
|
default:
|
|
|
return String(value)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 格式化字段值
|
|
|
const formatFieldValue = (data, field) => {
|
|
|
if (!data || !field || !field.name) return '-'
|
|
|
|
|
|
// relation 类型已经在模板中特殊处理，这里不需要处理
|
|
|
if (field.type === 'relation') {
|
|
|
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':
|
|
|
// 如果有 selection_model，从 selectionOptionsMap 中查找
|
|
|
if (field.selection_model && selectionOptionsMap.value[field.selection_model]) {
|
|
|
const options = selectionOptionsMap.value[field.selection_model]
|
|
|
const option = options.find(opt =>
|
|
|
opt.id == value ||
|
|
|
opt.value == value ||
|
|
|
String(opt.id) === String(value) ||
|
|
|
String(opt.value) === String(value)
|
|
|
)
|
|
|
if (option) {
|
|
|
return option.label || option.name || value
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 如果没有 selection_model 或找不到，尝试使用 field.options
|
|
|
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 (expectedCustomModelId = null) => {
|
|
|
if (!selectedSubprocess.value || !selectedSubprocess.value.custom_model_id) {
|
|
|
availableYears.value = []
|
|
|
return
|
|
|
}
|
|
|
|
|
|
const currentCustomModelId = selectedSubprocess.value.custom_model_id
|
|
|
|
|
|
// 如果传入了期望的 custom_model_id，检查是否仍然匹配
|
|
|
if (expectedCustomModelId && currentCustomModelId !== expectedCustomModelId) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
loadingYears.value = true
|
|
|
try {
|
|
|
const response = await oaFlowAPI.getFlowYears({
|
|
|
custom_model_id: currentCustomModelId
|
|
|
})
|
|
|
|
|
|
// 再次检查 custom_model_id 是否仍然匹配
|
|
|
if (selectedSubprocess.value?.custom_model_id !== currentCustomModelId) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
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) {
|
|
|
// 只有在 custom_model_id 仍然匹配时才处理错误
|
|
|
if (selectedSubprocess.value?.custom_model_id === currentCustomModelId) {
|
|
|
console.error('加载年份列表失败：', error)
|
|
|
availableYears.value = []
|
|
|
// 出错时默认使用当年
|
|
|
selectedYear.value = new Date().getFullYear()
|
|
|
}
|
|
|
} finally {
|
|
|
// 只有在 custom_model_id 仍然匹配时才更新加载状态
|
|
|
if (selectedSubprocess.value?.custom_model_id === currentCustomModelId) {
|
|
|
loadingYears.value = false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 年份切换
|
|
|
const handleYearChange = () => {
|
|
|
pagination.value.currentPage = 1
|
|
|
// 年份切换时只清空关键词，保留高级查询条件
|
|
|
filterForm.value.keyword = ''
|
|
|
// 增加请求序列号
|
|
|
requestSequence++
|
|
|
loadFlowList(requestSequence)
|
|
|
}
|
|
|
|
|
|
// 选择子流程
|
|
|
const handleSubprocessSelect = async (subprocess) => {
|
|
|
if (!subprocess.custom_model_id) {
|
|
|
ElMessage.warning('该流程项未关联OA模型')
|
|
|
return
|
|
|
}
|
|
|
|
|
|
// 增加请求序列号，取消之前的请求
|
|
|
requestSequence++
|
|
|
const currentSequence = requestSequence
|
|
|
|
|
|
// 重置分页和筛选
|
|
|
pagination.value.currentPage = 1
|
|
|
filterForm.value = {
|
|
|
keyword: '',
|
|
|
field_id: '',
|
|
|
operator: '',
|
|
|
field_keyword: ''
|
|
|
}
|
|
|
|
|
|
selectedSubprocess.value = subprocess
|
|
|
|
|
|
// 清空子表单字段映射、选项数据映射和所有字段
|
|
|
subFormFieldsMap.value = {}
|
|
|
selectionOptionsMap.value = {}
|
|
|
allModelFields.value = []
|
|
|
|
|
|
// 清空表格数据，避免显示旧数据
|
|
|
tableData.value = []
|
|
|
pagination.value.total = 0
|
|
|
|
|
|
try {
|
|
|
// 加载模型字段（传入期望的 custom_model_id 用于验证）
|
|
|
await loadModelFields(subprocess.custom_model_id, subprocess.custom_model_id)
|
|
|
|
|
|
// 检查是否仍然是最新的请求
|
|
|
if (currentSequence !== requestSequence) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
// 再次检查 selectedSubprocess 是否仍然匹配
|
|
|
if (selectedSubprocess.value?.custom_model_id !== subprocess.custom_model_id) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
// 先加载年份列表（传入期望的 custom_model_id 用于验证）
|
|
|
await loadAvailableYears(subprocess.custom_model_id)
|
|
|
|
|
|
// 检查是否仍然是最新的请求
|
|
|
if (currentSequence !== requestSequence) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
// 再次检查 selectedSubprocess 是否仍然匹配
|
|
|
if (selectedSubprocess.value?.custom_model_id !== subprocess.custom_model_id) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
// 年份加载完成后，再加载流程列表
|
|
|
if (selectedYear.value && selectedSubprocess.value?.custom_model_id === subprocess.custom_model_id) {
|
|
|
await loadFlowList(currentSequence)
|
|
|
}
|
|
|
} catch (error) {
|
|
|
// 如果请求被取消或出错，不显示错误（可能是用户快速切换导致的）
|
|
|
if (currentSequence === requestSequence) {
|
|
|
console.error('加载子流程数据失败：', error)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 查询类型改变
|
|
|
const handleQueryTypeChange = () => {
|
|
|
if (selectedSubprocess.value) {
|
|
|
// 重置分页
|
|
|
pagination.value.currentPage = 1
|
|
|
// 增加请求序列号
|
|
|
requestSequence++
|
|
|
loadFlowList(requestSequence)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 加载可用子流程
|
|
|
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, expectedCustomModelId = null) => {
|
|
|
// 如果传入了期望的 custom_model_id，检查是否仍然匹配
|
|
|
if (expectedCustomModelId && customModelId !== expectedCustomModelId) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
const res = await oaFlowAPI.getCustomModelFields(customModelId)
|
|
|
|
|
|
// 再次检查 custom_model_id 是否仍然匹配
|
|
|
if (expectedCustomModelId && customModelId !== expectedCustomModelId) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
// 检查当前选中的子流程是否仍然匹配
|
|
|
if (selectedSubprocess.value?.custom_model_id !== customModelId) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
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))
|
|
|
|
|
|
// 所有字段（用于高级查询，过滤掉没有name的字段）
|
|
|
const allFields = fieldsArray
|
|
|
.filter(field => field && field.name)
|
|
|
.sort((a, b) => (a.myindex || 0) - (b.myindex || 0))
|
|
|
|
|
|
// 再次检查是否仍然匹配
|
|
|
if (selectedSubprocess.value?.custom_model_id !== customModelId) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
dynamicFields.value = fields
|
|
|
allModelFields.value = allFields
|
|
|
|
|
|
// 加载 select 类型字段的选项数据（如果有 selection_model）
|
|
|
const selectFields = fields.filter(field =>
|
|
|
(field.type === 'select' || field.type === 'radio') &&
|
|
|
field.selection_model
|
|
|
)
|
|
|
for (const selectField of selectFields) {
|
|
|
// 检查是否仍然匹配
|
|
|
if (selectedSubprocess.value?.custom_model_id !== customModelId) {
|
|
|
break
|
|
|
}
|
|
|
|
|
|
// 如果还没有加载过这个 selection_model 的选项，则加载
|
|
|
if (!selectionOptionsMap.value[selectField.selection_model]) {
|
|
|
try {
|
|
|
const optionsRes = await oaFlowAPI.getSelectionOptions(selectField.selection_model)
|
|
|
|
|
|
// 再次检查是否仍然匹配
|
|
|
if (selectedSubprocess.value?.custom_model_id !== customModelId) {
|
|
|
break
|
|
|
}
|
|
|
|
|
|
if (optionsRes.code === 0 && Array.isArray(optionsRes.data)) {
|
|
|
selectionOptionsMap.value[selectField.selection_model] = optionsRes.data
|
|
|
} else {
|
|
|
selectionOptionsMap.value[selectField.selection_model] = []
|
|
|
}
|
|
|
} catch (error) {
|
|
|
// 只有在仍然匹配时才记录错误
|
|
|
if (selectedSubprocess.value?.custom_model_id === customModelId) {
|
|
|
console.error(`加载选项数据失败 (${selectField.selection_model}):`, error)
|
|
|
selectionOptionsMap.value[selectField.selection_model] = []
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 加载 relation 类型字段的子表单字段
|
|
|
const relationFields = fields.filter(field => field.type === 'relation' && field.sub_custom_model_id)
|
|
|
for (const relationField of relationFields) {
|
|
|
// 检查是否仍然匹配
|
|
|
if (selectedSubprocess.value?.custom_model_id !== customModelId) {
|
|
|
break
|
|
|
}
|
|
|
|
|
|
if (relationField.sub_custom_model_id && !subFormFieldsMap.value[relationField.name]) {
|
|
|
try {
|
|
|
const subRes = await oaFlowAPI.getCustomModelFields(relationField.sub_custom_model_id)
|
|
|
|
|
|
// 再次检查是否仍然匹配
|
|
|
if (selectedSubprocess.value?.custom_model_id !== customModelId) {
|
|
|
break
|
|
|
}
|
|
|
|
|
|
if (subRes.code === 0 && subRes.data?.customModel?.fields) {
|
|
|
const subFields = Array.isArray(subRes.data.customModel.fields)
|
|
|
? subRes.data.customModel.fields
|
|
|
: []
|
|
|
// 按 myindex 排序
|
|
|
subFormFieldsMap.value[relationField.name] = subFields.sort((a, b) => (a.myindex || 0) - (b.myindex || 0))
|
|
|
|
|
|
// 加载子表单中 select 类型字段的选项数据（如果有 selection_model）
|
|
|
const subSelectFields = subFields.filter(field =>
|
|
|
(field.type === 'select' || field.type === 'radio') &&
|
|
|
field.selection_model
|
|
|
)
|
|
|
for (const subSelectField of subSelectFields) {
|
|
|
// 如果还没有加载过这个 selection_model 的选项，则加载
|
|
|
if (!selectionOptionsMap.value[subSelectField.selection_model]) {
|
|
|
try {
|
|
|
const optionsRes = await oaFlowAPI.getSelectionOptions(subSelectField.selection_model)
|
|
|
if (optionsRes.code === 0 && Array.isArray(optionsRes.data)) {
|
|
|
selectionOptionsMap.value[subSelectField.selection_model] = optionsRes.data
|
|
|
} else {
|
|
|
selectionOptionsMap.value[subSelectField.selection_model] = []
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error(`加载子表单选项数据失败 (${subSelectField.selection_model}):`, error)
|
|
|
selectionOptionsMap.value[subSelectField.selection_model] = []
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
} catch (error) {
|
|
|
// 只有在仍然匹配时才记录错误
|
|
|
if (selectedSubprocess.value?.custom_model_id === customModelId) {
|
|
|
console.error(`加载子表单字段失败 (${relationField.name}):`, error)
|
|
|
subFormFieldsMap.value[relationField.name] = []
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
// 只有在仍然匹配时才更新
|
|
|
if (selectedSubprocess.value?.custom_model_id === customModelId) {
|
|
|
dynamicFields.value = []
|
|
|
}
|
|
|
}
|
|
|
} catch (error) {
|
|
|
// 只有在仍然匹配时才记录错误
|
|
|
if (selectedSubprocess.value?.custom_model_id === customModelId) {
|
|
|
console.error('获取模型字段失败：', error)
|
|
|
dynamicFields.value = []
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 加载流程列表
|
|
|
const loadFlowList = async (sequence = null) => {
|
|
|
// 如果没有传入序列号，使用当前序列号
|
|
|
if (sequence === null) {
|
|
|
requestSequence++
|
|
|
sequence = requestSequence
|
|
|
}
|
|
|
|
|
|
if (!selectedSubprocess.value || !selectedSubprocess.value.custom_model_id) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
// 如果没有选中年份，不加载数据
|
|
|
if (!selectedYear.value) {
|
|
|
tableData.value = []
|
|
|
pagination.value.total = 0
|
|
|
return
|
|
|
}
|
|
|
|
|
|
// 保存当前请求的关键参数，用于验证返回结果是否仍然有效
|
|
|
const currentCustomModelId = selectedSubprocess.value.custom_model_id
|
|
|
const currentYear = selectedYear.value
|
|
|
const currentQueryType = queryType.value
|
|
|
const currentPage = pagination.value.currentPage
|
|
|
|
|
|
loading.value = true
|
|
|
try {
|
|
|
const params = {
|
|
|
custom_model_id: currentCustomModelId,
|
|
|
year: currentYear, // 必填：年份参数
|
|
|
page: currentPage,
|
|
|
page_size: pagination.value.pageSize,
|
|
|
is_simple: 0, // 完整版本，包含data字段
|
|
|
payment_link_status: currentQueryType, // 关联支付状态：not-linked 或 linked
|
|
|
keyword: filterForm.value.keyword, // 流程编号关键词
|
|
|
// 高级查询参数
|
|
|
field_id: filterForm.value.field_id || undefined,
|
|
|
operator: filterForm.value.operator || undefined,
|
|
|
field_keyword: filterForm.value.field_keyword || undefined
|
|
|
}
|
|
|
|
|
|
// 移除空值
|
|
|
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 (sequence !== requestSequence) {
|
|
|
// 请求已被新的请求取代，忽略此结果
|
|
|
return
|
|
|
}
|
|
|
|
|
|
// 验证关键参数是否仍然匹配
|
|
|
if (
|
|
|
selectedSubprocess.value?.custom_model_id !== currentCustomModelId ||
|
|
|
selectedYear.value !== currentYear ||
|
|
|
queryType.value !== currentQueryType ||
|
|
|
pagination.value.currentPage !== currentPage
|
|
|
) {
|
|
|
// 关键参数已改变，忽略此结果
|
|
|
return
|
|
|
}
|
|
|
|
|
|
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 {
|
|
|
// 只有在请求仍然有效时才显示错误
|
|
|
if (sequence === requestSequence) {
|
|
|
ElMessage.error(res.msg || res.message || '获取流程列表失败')
|
|
|
}
|
|
|
tableData.value = []
|
|
|
pagination.value.total = 0
|
|
|
}
|
|
|
} catch (error) {
|
|
|
// 只有在请求仍然有效时才显示错误
|
|
|
if (sequence === requestSequence) {
|
|
|
ElMessage.error('获取流程列表失败：' + error.message)
|
|
|
}
|
|
|
tableData.value = []
|
|
|
pagination.value.total = 0
|
|
|
} finally {
|
|
|
// 只有在请求仍然有效时才更新加载状态
|
|
|
if (sequence === requestSequence) {
|
|
|
loading.value = false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 查询
|
|
|
const handleSearch = () => {
|
|
|
pagination.value.currentPage = 1
|
|
|
requestSequence++
|
|
|
loadFlowList(requestSequence)
|
|
|
}
|
|
|
|
|
|
// 重置
|
|
|
const handleReset = () => {
|
|
|
filterForm.value = {
|
|
|
keyword: '',
|
|
|
field_id: '',
|
|
|
operator: '',
|
|
|
field_keyword: ''
|
|
|
}
|
|
|
pagination.value.currentPage = 1
|
|
|
// 年份不重置，保持当前选择
|
|
|
requestSequence++
|
|
|
loadFlowList(requestSequence)
|
|
|
}
|
|
|
|
|
|
// 查看支付详情
|
|
|
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/detail'
|
|
|
const params = new URLSearchParams({
|
|
|
module_id: (row.custom_model_id || row.custom_model?.id || row.customModel?.id || '').toString(),
|
|
|
flow_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 hasGlobalFlowSupervisionRole = computed(() => {
|
|
|
return userStore.roles && userStore.roles.includes('全局流程监管')
|
|
|
})
|
|
|
|
|
|
// 编辑
|
|
|
const handleEdit = (row) => {
|
|
|
// 跳转到OA流程编辑页面
|
|
|
const token = getToken()
|
|
|
const baseUrl = '/oa/#/flow/edit'
|
|
|
const params = new URLSearchParams({
|
|
|
flow_id: row.id.toString(),
|
|
|
isSinglePage: '1'
|
|
|
})
|
|
|
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
|
|
|
requestSequence++
|
|
|
loadFlowList(requestSequence)
|
|
|
}
|
|
|
|
|
|
// 当前页改变
|
|
|
const handleCurrentChange = (val) => {
|
|
|
pagination.value.currentPage = val
|
|
|
requestSequence++
|
|
|
loadFlowList(requestSequence)
|
|
|
}
|
|
|
|
|
|
// 页面加载
|
|
|
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;
|
|
|
}
|
|
|
|
|
|
.relation-field-renderer {
|
|
|
max-width: 100%;
|
|
|
overflow-x: auto;
|
|
|
}
|
|
|
|
|
|
.relation-field-renderer :deep(.el-table) {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
.relation-field-renderer :deep(.el-table th) {
|
|
|
padding: 8px 4px;
|
|
|
background-color: #f5f7fa;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.relation-field-renderer :deep(.el-table td) {
|
|
|
padding: 6px 4px;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
.subprocess-grid {
|
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
|
gap: 12px;
|
|
|
}
|
|
|
|
|
|
.subprocess-card {
|
|
|
padding: 16px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
