|
|
|
@ -5,14 +5,14 @@ |
|
|
|
<div> |
|
|
|
<el-button type="primary" @click="handleCreate"> |
|
|
|
<icon name="add" class="mr-5px" /> |
|
|
|
{{ $t('approval.process.create') }} |
|
|
|
{{ '创建(测试暂留)' }} |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
<div class="flex items-center"> |
|
|
|
<el-input |
|
|
|
v-model="state.searchParams.process_name" |
|
|
|
class="w-200px mr-15px" |
|
|
|
:placeholder="$t('approval.process.searchPlaceholder')" |
|
|
|
class="w-200 mr-15" |
|
|
|
:placeholder="'搜索'" |
|
|
|
clearable |
|
|
|
@keyup.enter="handleSearch" |
|
|
|
@clear="handleSearch" |
|
|
|
@ -20,29 +20,29 @@ |
|
|
|
<el-select |
|
|
|
v-model="state.searchParams.approval_status" |
|
|
|
class="w-150px mr-15px" |
|
|
|
:placeholder="$t('approval.process.statusPlaceholder')" |
|
|
|
:placeholder="'状态'" |
|
|
|
clearable |
|
|
|
@change="handleSearch" |
|
|
|
> |
|
|
|
<el-option :label="$t('approval.process.pending')" value="pending" /> |
|
|
|
<el-option :label="$t('approval.process.approved')" value="approved" /> |
|
|
|
<el-option :label="$t('approval.process.rejected')" value="rejected" /> |
|
|
|
<el-option :label="'待审批'" value="pending" /> |
|
|
|
<el-option :label="'已审批'" value="approved" /> |
|
|
|
<el-option :label="'已拒绝'" value="rejected" /> |
|
|
|
</el-select> |
|
|
|
<el-button type="primary" @click="handleSearch"> |
|
|
|
<icon name="search" class="mr-5px" /> |
|
|
|
{{ $t('common.search') }} |
|
|
|
{{ '搜索' }} |
|
|
|
</el-button> |
|
|
|
<el-button @click="handleReset"> |
|
|
|
<icon name="refresh-right" class="mr-5px" /> |
|
|
|
{{ $t('common.reset') }} |
|
|
|
{{ '重置' }} |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-tabs v-model="state.activeTab" class="mt-15px" @tab-click="handleTabChange"> |
|
|
|
<el-tab-pane :label="$t('approval.process.all')" name="all" /> |
|
|
|
<el-tab-pane :label="$t('approval.process.myCreate')" name="myCreate" /> |
|
|
|
<el-tab-pane :label="$t('approval.process.myApproval')" name="myApproval" /> |
|
|
|
<el-tab-pane :label="'全部'" name="all" /> |
|
|
|
<el-tab-pane :label="'我创建的'" name="myCreate" /> |
|
|
|
<el-tab-pane :label="'我审批的'" name="myApproval" /> |
|
|
|
</el-tabs> |
|
|
|
|
|
|
|
<el-table |
|
|
|
@ -50,22 +50,22 @@ |
|
|
|
:data="state.processList" |
|
|
|
:header-cell-style="{ background: '#fafafa', color: '#606266' }" |
|
|
|
> |
|
|
|
<el-table-column :label="$t('approval.process.id')" prop="id" width="80" /> |
|
|
|
<el-table-column :label="$t('approval.process.processName')" prop="process_name" min-width="180" /> |
|
|
|
<el-table-column :label="$t('approval.process.applicantId')" prop="applicant_id" width="100" /> |
|
|
|
<el-table-column :label="$t('approval.process.applicationTime')" prop="application_time" width="180" /> |
|
|
|
<el-table-column :label="$t('approval.process.currentApproverId')" prop="current_approver_id" width="100" /> |
|
|
|
<el-table-column :label="$t('approval.process.approvalStatus')" prop="approval_status" width="100"> |
|
|
|
<el-table-column :label="'ID'" prop="id" width="80" /> |
|
|
|
<el-table-column :label="'流程名称'" prop="process_name" min-width="180" /> |
|
|
|
<el-table-column :label="'申请人ID'" prop="applicant_id" width="100" /> |
|
|
|
<el-table-column :label="'申请时间'" prop="application_time" width="180" /> |
|
|
|
<el-table-column :label="'当前审批人ID'" prop="current_approver_id" width="100" /> |
|
|
|
<el-table-column :label="'审批状态'" prop="approval_status" width="100"> |
|
|
|
<template #default="{ row }"> |
|
|
|
<el-tag :type="getStatusType(row.approval_status)"> |
|
|
|
{{ getStatusText(row.approval_status) }} |
|
|
|
</el-tag> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column :label="$t('common.action')" width="180" fixed="right"> |
|
|
|
<el-table-column :label="'操作'" width="180" fixed="right"> |
|
|
|
<template #default="{ row }"> |
|
|
|
<el-button type="primary" link @click="handleDetail(row)"> |
|
|
|
{{ $t('common.detail') }} |
|
|
|
{{ '详情' }} |
|
|
|
</el-button> |
|
|
|
<el-button |
|
|
|
v-if="row.approval_status === 'pending' && row.applicant_id === state.userInfo.uid" |
|
|
|
@ -73,7 +73,7 @@ |
|
|
|
link |
|
|
|
@click="handleCancel(row)" |
|
|
|
> |
|
|
|
{{ $t('approval.process.cancel') }} |
|
|
|
{{ '取消' }} |
|
|
|
</el-button> |
|
|
|
<el-button |
|
|
|
v-if="row.approval_status === 'pending' && row.current_approver_id === state.userInfo.uid" |
|
|
|
@ -81,7 +81,7 @@ |
|
|
|
link |
|
|
|
@click="handleApprove(row)" |
|
|
|
> |
|
|
|
{{ $t('approval.process.approve') }} |
|
|
|
{{ '审批' }} |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
@ -103,7 +103,7 @@ |
|
|
|
<!-- 创建审批弹窗 --> |
|
|
|
<el-dialog |
|
|
|
v-model="state.createDialog.visible" |
|
|
|
:title="$t('approval.process.create')" |
|
|
|
:title="'创建审批'" |
|
|
|
width="600px" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:destroy-on-close="true" |
|
|
|
@ -114,17 +114,17 @@ |
|
|
|
:rules="state.createDialog.rules" |
|
|
|
label-width="120px" |
|
|
|
> |
|
|
|
<el-form-item :label="$t('approval.process.processName')" prop="process_name"> |
|
|
|
<el-form-item :label="'流程名称'" prop="process_name"> |
|
|
|
<el-input |
|
|
|
v-model="state.createDialog.form.process_name" |
|
|
|
:placeholder="$t('approval.process.processNamePlaceholder')" |
|
|
|
:placeholder="'请输入流程名称'" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('approval.process.configId')" prop="config_id"> |
|
|
|
<el-form-item :label="'审批流配置'" prop="config_id"> |
|
|
|
<el-select |
|
|
|
v-model="state.createDialog.form.config_id" |
|
|
|
class="w-full" |
|
|
|
:placeholder="$t('approval.process.configIdPlaceholder')" |
|
|
|
:placeholder="'请选择审批流配置'" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in state.configOptions" |
|
|
|
@ -134,19 +134,19 @@ |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('approval.process.remarks')" prop="remarks"> |
|
|
|
<el-form-item :label="'备注'" prop="remarks"> |
|
|
|
<el-input |
|
|
|
v-model="state.createDialog.form.remarks" |
|
|
|
type="textarea" |
|
|
|
:rows="3" |
|
|
|
:placeholder="$t('approval.process.remarksPlaceholder')" |
|
|
|
:placeholder="'请输入备注'" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<template #footer> |
|
|
|
<el-button @click="state.createDialog.visible = false">{{ $t('common.cancel') }}</el-button> |
|
|
|
<el-button @click="state.createDialog.visible = false">{{ '取消' }}</el-button> |
|
|
|
<el-button type="primary" :loading="state.createDialog.loading" @click="handleCreateSubmit"> |
|
|
|
{{ $t('common.confirm') }} |
|
|
|
{{ '确认' }} |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
@ -154,7 +154,7 @@ |
|
|
|
<!-- 审批弹窗 --> |
|
|
|
<el-dialog |
|
|
|
v-model="state.approveDialog.visible" |
|
|
|
:title="$t('approval.process.approve')" |
|
|
|
:title="'审批'" |
|
|
|
width="500px" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:destroy-on-close="true" |
|
|
|
@ -165,25 +165,25 @@ |
|
|
|
:rules="state.approveDialog.rules" |
|
|
|
label-width="80px" |
|
|
|
> |
|
|
|
<el-form-item :label="$t('approval.process.status')" prop="status"> |
|
|
|
<el-form-item :label="'审批状态'" prop="status"> |
|
|
|
<el-radio-group v-model="state.approveDialog.form.status"> |
|
|
|
<el-radio label="approved">{{ $t('approval.process.approved') }}</el-radio> |
|
|
|
<el-radio label="rejected">{{ $t('approval.process.rejected') }}</el-radio> |
|
|
|
<el-radio label="approved">{{ '已审批' }}</el-radio> |
|
|
|
<el-radio label="rejected">{{ '已拒绝' }}</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="$t('approval.process.remarks')" prop="remarks"> |
|
|
|
<el-form-item :label="'备注'" prop="remarks"> |
|
|
|
<el-input |
|
|
|
v-model="state.approveDialog.form.remarks" |
|
|
|
type="textarea" |
|
|
|
:rows="3" |
|
|
|
:placeholder="$t('approval.process.remarksPlaceholder')" |
|
|
|
:placeholder="'请输入备注'" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<template #footer> |
|
|
|
<el-button @click="state.approveDialog.visible = false">{{ $t('common.cancel') }}</el-button> |
|
|
|
<el-button @click="state.approveDialog.visible = false">{{ '取消' }}</el-button> |
|
|
|
<el-button type="primary" :loading="state.approveDialog.loading" @click="handleApproveSubmit"> |
|
|
|
{{ $t('common.confirm') }} |
|
|
|
{{ '确认' }} |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
@ -191,41 +191,41 @@ |
|
|
|
<!-- 详情弹窗 --> |
|
|
|
<el-dialog |
|
|
|
v-model="state.detailDialog.visible" |
|
|
|
:title="$t('approval.process.detail')" |
|
|
|
:title="'审批详情'" |
|
|
|
width="800px" |
|
|
|
:destroy-on-close="true" |
|
|
|
> |
|
|
|
<el-descriptions :column="1" border> |
|
|
|
<el-descriptions-item :label="$t('approval.process.id')"> |
|
|
|
<el-descriptions-item :label="'ID'"> |
|
|
|
{{ state.detailDialog.info.id }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item :label="$t('approval.process.processName')"> |
|
|
|
<el-descriptions-item :label="'流程名称'"> |
|
|
|
{{ state.detailDialog.info.process_name }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item :label="$t('approval.process.applicantId')"> |
|
|
|
<el-descriptions-item :label="'申请人ID'"> |
|
|
|
{{ state.detailDialog.info.applicant_id }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item :label="$t('approval.process.applicationTime')"> |
|
|
|
<el-descriptions-item :label="'申请时间'"> |
|
|
|
{{ state.detailDialog.info.application_time }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item :label="$t('approval.process.currentApproverId')"> |
|
|
|
<el-descriptions-item :label="'当前审批人ID'"> |
|
|
|
{{ state.detailDialog.info.current_approver_id }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item :label="$t('approval.process.approvalStatus')"> |
|
|
|
<el-descriptions-item :label="'审批状态'"> |
|
|
|
<el-tag :type="getStatusType(state.detailDialog.info.approval_status)"> |
|
|
|
{{ getStatusText(state.detailDialog.info.approval_status) }} |
|
|
|
</el-tag> |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item :label="$t('approval.process.approvalTime')"> |
|
|
|
<el-descriptions-item :label="'审批时间'"> |
|
|
|
{{ state.detailDialog.info.approval_time || '-' }} |
|
|
|
</el-descriptions-item> |
|
|
|
<el-descriptions-item :label="$t('approval.process.remarks')"> |
|
|
|
<el-descriptions-item :label="'备注'"> |
|
|
|
{{ state.detailDialog.info.remarks || '-' }} |
|
|
|
</el-descriptions-item> |
|
|
|
</el-descriptions> |
|
|
|
|
|
|
|
<div class="mt-20px"> |
|
|
|
<div class="font-bold text-16px mb-10px">{{ $t('approval.process.participants') }}</div> |
|
|
|
<div class="font-bold text-16px mb-10px">{{ '参与者' }}</div> |
|
|
|
<el-timeline> |
|
|
|
<el-timeline-item |
|
|
|
v-for="(node, index) in state.detailDialog.info.participants" |
|
|
|
@ -234,22 +234,22 @@ |
|
|
|
:color="getNodeColor(node.status)" |
|
|
|
> |
|
|
|
<div class="font-bold mb-5px"> |
|
|
|
{{ $t('approval.process.participantLabel', { index: index + 1 }) }} |
|
|
|
{{ '参与者' + (index + 1) }} |
|
|
|
</div> |
|
|
|
<div class="text-gray-500"> |
|
|
|
{{ $t('approval.process.participantId') }}:{{ node.participant_id }} |
|
|
|
{{ '参与者ID' }}:{{ node.participant_id }} |
|
|
|
</div> |
|
|
|
<div class="text-gray-500"> |
|
|
|
{{ $t('approval.process.sequence') }}:{{ node.sequence }} |
|
|
|
{{ '顺序' }}:{{ node.sequence }} |
|
|
|
</div> |
|
|
|
<div class="text-gray-500"> |
|
|
|
{{ $t('approval.process.status') }}:{{ getStatusText(node.status) }} |
|
|
|
{{ '状态' }}:{{ getStatusText(node.status) }} |
|
|
|
</div> |
|
|
|
<div class="text-gray-500"> |
|
|
|
{{ $t('approval.process.signType') }}:{{ node.sign_type === 'or_sign' ? $t('approval.process.orSign') : $t('approval.process.andSign') }} |
|
|
|
{{ '签名类型' }}:{{ node.sign_type === 'or_sign' ? '或签名' : '和签名' }} |
|
|
|
</div> |
|
|
|
<div class="text-gray-500"> |
|
|
|
{{ $t('approval.process.remarks') }}:{{ node.remarks || '-' }} |
|
|
|
{{ '备注' }}:{{ node.remarks || '-' }} |
|
|
|
</div> |
|
|
|
</el-timeline-item> |
|
|
|
</el-timeline> |
|
|
|
@ -263,23 +263,39 @@ import { reactive, ref, onMounted } from 'vue' |
|
|
|
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus' |
|
|
|
import { getProcessList, getProcessInfo, createProcess, approveProcess, cancelProcess } from '@/app/api/school_approval/process' |
|
|
|
import { getConfigList } from '@/app/api/school_approval/config' |
|
|
|
import { useI18n } from 'vue-i18n' |
|
|
|
// import { useI18n } from 'vue-i18n' |
|
|
|
// import { useUserInfo } from '@/stores/userInfo' |
|
|
|
|
|
|
|
const { t } = useI18n() |
|
|
|
// const { t } = useI18n() |
|
|
|
// const userInfo = useUserInfo() |
|
|
|
|
|
|
|
// 表单引用 |
|
|
|
const createFormRef = ref<FormInstance>() |
|
|
|
const approveFormRef = ref<FormInstance>() |
|
|
|
|
|
|
|
// 在script区域顶部添加接口定义 |
|
|
|
interface ConfigOption { |
|
|
|
label: string; |
|
|
|
value: number; |
|
|
|
} |
|
|
|
|
|
|
|
interface Participant { |
|
|
|
participant_id: number; |
|
|
|
sequence: number; |
|
|
|
status: string; |
|
|
|
sign_type: string; |
|
|
|
remarks?: string; |
|
|
|
} |
|
|
|
|
|
|
|
// 状态 |
|
|
|
const state = reactive({ |
|
|
|
loading: false, |
|
|
|
processList: [], |
|
|
|
total: 0, |
|
|
|
activeTab: 'all', |
|
|
|
userInfo: null, |
|
|
|
userInfo: { |
|
|
|
uid: 1 // 提供一个默认的用户ID,实际项目中应该从store获取 |
|
|
|
}, |
|
|
|
searchParams: { |
|
|
|
page: 1, |
|
|
|
limit: 10, |
|
|
|
@ -288,7 +304,7 @@ const state = reactive({ |
|
|
|
applicant_id: 0, |
|
|
|
approver_id: 0 |
|
|
|
}, |
|
|
|
configOptions: [], // 审批流配置选项 |
|
|
|
configOptions: [] as ConfigOption[], // 添加类型标注 |
|
|
|
createDialog: { |
|
|
|
visible: false, |
|
|
|
loading: false, |
|
|
|
@ -299,10 +315,10 @@ const state = reactive({ |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
process_name: [ |
|
|
|
{ required: true, message: t('approval.process.processNameRequired'), trigger: 'blur' } |
|
|
|
{ required: true, message: '请输入流程名称', trigger: 'blur' } |
|
|
|
], |
|
|
|
config_id: [ |
|
|
|
{ required: true, message: t('approval.process.configIdRequired'), trigger: 'change' } |
|
|
|
{ required: true, message: '请选择审批流配置', trigger: 'change' } |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -316,13 +332,23 @@ const state = reactive({ |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
status: [ |
|
|
|
{ required: true, message: t('approval.process.statusRequired'), trigger: 'change' } |
|
|
|
{ required: true, message: '请选择审批状态', trigger: 'change' } |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
detailDialog: { |
|
|
|
visible: false, |
|
|
|
info: {} |
|
|
|
info: { |
|
|
|
id: 0, |
|
|
|
process_name: '', |
|
|
|
applicant_id: 0, |
|
|
|
application_time: '', |
|
|
|
current_approver_id: 0, |
|
|
|
approval_status: '', |
|
|
|
approval_time: '', |
|
|
|
remarks: '', |
|
|
|
participants: [] as Participant[] // 添加类型标注 |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
@ -394,11 +420,11 @@ function handleTabChange() { |
|
|
|
async function getConfigOptions() { |
|
|
|
try { |
|
|
|
const res = await getConfigList({ status: 1 }) |
|
|
|
state.configOptions = res.data.list.map((item: any) => { |
|
|
|
state.configOptions = (res.data.list || []).map((item: any) => { |
|
|
|
return { |
|
|
|
label: item.config_name, |
|
|
|
value: item.id |
|
|
|
} |
|
|
|
label: item.config_name || '', |
|
|
|
value: item.id || 0 |
|
|
|
} as ConfigOption |
|
|
|
}) |
|
|
|
} catch (error) { |
|
|
|
console.error(error) |
|
|
|
@ -425,7 +451,7 @@ async function handleCreateSubmit() { |
|
|
|
state.createDialog.loading = true |
|
|
|
try { |
|
|
|
await createProcess(state.createDialog.form) |
|
|
|
ElMessage.success(t('approval.process.createSuccess')) |
|
|
|
ElMessage.success('创建成功') |
|
|
|
state.createDialog.visible = false |
|
|
|
getList() |
|
|
|
} catch (error) { |
|
|
|
@ -460,7 +486,7 @@ async function handleApproveSubmit() { |
|
|
|
status: state.approveDialog.form.status, |
|
|
|
remarks: state.approveDialog.form.remarks |
|
|
|
}) |
|
|
|
ElMessage.success(t('approval.process.approveSuccess')) |
|
|
|
ElMessage.success('审批成功') |
|
|
|
state.approveDialog.visible = false |
|
|
|
getList() |
|
|
|
} catch (error) { |
|
|
|
@ -473,15 +499,15 @@ async function handleApproveSubmit() { |
|
|
|
|
|
|
|
// 撤销 |
|
|
|
function handleCancel(row: any) { |
|
|
|
ElMessageBox.confirm(t('approval.process.confirmCancel'), t('common.warning'), { |
|
|
|
confirmButtonText: t('common.confirm'), |
|
|
|
cancelButtonText: t('common.cancel'), |
|
|
|
ElMessageBox.confirm('确认取消审批?', '警告', { |
|
|
|
confirmButtonText: '确认', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}) |
|
|
|
.then(async () => { |
|
|
|
try { |
|
|
|
await cancelProcess({ process_id: row.id }) |
|
|
|
ElMessage.success(t('approval.process.cancelSuccess')) |
|
|
|
ElMessage.success('取消成功') |
|
|
|
getList() |
|
|
|
} catch (error) { |
|
|
|
console.error(error) |
|
|
|
@ -514,9 +540,9 @@ function getStatusType(status: string) { |
|
|
|
// 获取状态文本 |
|
|
|
function getStatusText(status: string) { |
|
|
|
const map: Record<string, string> = { |
|
|
|
pending: t('approval.process.pending'), |
|
|
|
approved: t('approval.process.approved'), |
|
|
|
rejected: t('approval.process.rejected') |
|
|
|
pending: '待审批', |
|
|
|
approved: '已审批', |
|
|
|
rejected: '已拒绝' |
|
|
|
} |
|
|
|
return map[status] || status |
|
|
|
} |
|
|
|
|