@ -5,14 +5,14 @@
< div >
< el -button type = "primary" @click ="handleCreate" >
< icon name = "add" class = "mr-5px" / >
{ { $t ( 'approval.process.create' ) } }
{ { '创建(测试暂留)' } }
< / e l - b u t t o n >
< / 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" / >
< / e l - s e l e c t >
< el -button type = "primary" @click ="handleSearch" >
< icon name = "search" class = "mr-5px" / >
{ { $t ( 'common.search' ) } }
{ { '搜索' } }
< / e l - b u t t o n >
< el -button @click ="handleReset" >
< icon name = "refresh-right" class = "mr-5px" / >
{ { $t ( 'common.reset' ) } }
{ { '重置' } }
< / e l - b u t t o n >
< / 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" / >
< / e l - t a b s >
< 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 ="'申请人'" prop = "applicant_name " width = "100" / >
< el -table -column :label ="'申请时间' " prop = "application_time" width = "180" / >
< el -table -column :label ="'当前审批人' " prop = "current_approver_name " 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 ) } }
< / e l - t a g >
< / template >
< / e l - t a b l e - c o l u m n >
< 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' ) } }
{ { '详情' } }
< / e l - b u t t o n >
< 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' ) } }
{ { '取消' } }
< / e l - b u t t o n >
< 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' ) } }
{ { '审批' } }
< / e l - b u t t o n >
< / template >
< / e l - t a b l e - c o l u m n >
@ -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 = "'请输入流程名称' "
/ >
< / e l - f o r m - i t e m >
< 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 @@
/ >
< / e l - s e l e c t >
< / e l - f o r m - i t e m >
< 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 = "'请输入备注' "
/ >
< / e l - f o r m - i t e m >
< / e l - f o r m >
< template # footer >
< el -button @ click = "state.createDialog.visible = false" > { { $t ( 'common.cancel' ) } } < / e l - b u t t o n >
< el -button @ click = "state.createDialog.visible = false" > { { '取消' } } < / e l - b u t t o n >
< el -button type = "primary" :loading ="state.createDialog.loading" @click ="handleCreateSubmit" >
{ { $t ( 'common.confirm' ) } }
{ { '确认' } }
< / e l - b u t t o n >
< / template >
< / e l - d i a l o g >
@ -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' ) } } < / e l - r a d i o >
< el -radio label = "rejected" > { { $t ( 'approval.process.rejected' ) } } < / e l - r a d i o >
< el -radio label = "approved" > { { '已审批' } } < / e l - r a d i o >
< el -radio label = "rejected" > { { '已拒绝' } } < / e l - r a d i o >
< / e l - r a d i o - g r o u p >
< / e l - f o r m - i t e m >
< 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 = "'请输入备注' "
/ >
< / e l - f o r m - i t e m >
< / e l - f o r m >
< template # footer >
< el -button @ click = "state.approveDialog.visible = false" > { { $t ( 'common.cancel' ) } } < / e l - b u t t o n >
< el -button @ click = "state.approveDialog.visible = false" > { { '取消' } } < / e l - b u t t o n >
< el -button type = "primary" :loading ="state.approveDialog.loading" @click ="handleApproveSubmit" >
{ { $t ( 'common.confirm' ) } }
{ { '确认' } }
< / e l - b u t t o n >
< / template >
< / e l - d i a l o g >
@ -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 } }
< / e l - d e s c r i p t i o n s - i t e m >
< el -descriptions -item :label ="$t('approval.process.processName') " >
< el -descriptions -item :label ="'流程名称' " >
{ { state . detailDialog . info . process_name } }
< / e l - d e s c r i p t i o n s - i t e m >
< el -descriptions -item :label ="$t('approval.process.applicantId') " >
{ { state . detailDialog . info . applicant_id } }
< el -descriptions -item :label ="'申请人' " >
{ { state . detailDialog . info . applicant_name } }
< / e l - d e s c r i p t i o n s - i t e m >
< el -descriptions -item :label ="$t('approval.process.applicationTime') " >
< el -descriptions -item :label ="'申请时间' " >
{ { state . detailDialog . info . application_time } }
< / e l - d e s c r i p t i o n s - i t e m >
< el -descriptions -item :label ="$t('approval.process.currentApproverId') " >
{ { state . detailDialog . info . current_approver_id } }
< el -descriptions -item :label ="'当前审批人' " >
{ { state . detailDialog . info . current_approver_name } }
< / e l - d e s c r i p t i o n s - i t e m >
< 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 ) } }
< / e l - t a g >
< / e l - d e s c r i p t i o n s - i t e m >
< el -descriptions -item :label ="$t('approval.process.approvalTime') " >
< el -descriptions -item :label ="'审批时间' " >
{ { state . detailDialog . info . approval_time || '-' } }
< / e l - d e s c r i p t i o n s - i t e m >
< el -descriptions -item :label ="$t('approval.process.remarks') " >
< el -descriptions -item :label ="'备注' " >
{ { state . detailDialog . info . remarks || '-' } }
< / e l - d e s c r i p t i o n s - i t e m >
< / e l - d e s c r i p t i o n s >
< 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 } }
{ { '参与者' } } ： { { node . name } }
< / 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 >
< / e l - t i m e l i n e - i t e m >
< / e l - t i m e l i n e >
@ -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 '
/ / i m p o r t { u s e I 1 8 n } f r o m ' v u e - i 1 8 n '
/ / i m p o r t { u s e U s e r I n f o } f r o m ' @ / s t o r e s / u s e r I n f o '
const { t } = useI18n ( )
/ / c o n s t { t } = u s e I 1 8 n ( )
/ / c o n s t u s e r I n f o = u s e U s e r I n f o ( )
/ / 表 单 引 用
const createFormRef = ref < FormInstance > ( )
const approveFormRef = ref < FormInstance > ( )
/ / 在 s c r i p t 区 域 顶 部 添 加 接 口 定 义
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 / / 提 供 一 个 默 认 的 用 户 I D ， 实 际 项 目 中 应 该 从 s t o r e 获 取
} ,
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
}
