<template>
|
<div class="app-container">
|
<el-card class="box-card">
|
<template #header>
|
<div class="card-header">
|
<span>用印管理发布</span>
|
</div>
|
</template>
|
|
|
<!-- 用印申请管理 -->
|
<div class="tab-content">
|
<el-row :gutter="20" class="mb-20 ">
|
<span class="ml-10">用印标题：</span>
|
<el-col :span="4">
|
<el-input v-model="sealSearchForm.title" placeholder="请输入申请标题" clearable />
|
</el-col>
|
<span class="ml-10">用印编号：</span>
|
<el-col :span="4">
|
<el-input v-model="sealSearchForm.applicationNum" placeholder="请输入用印编号" clearable />
|
</el-col>
|
<span class="search_title">审批状态：</span>
|
<el-col :span="4">
|
<el-select v-model="sealSearchForm.status" placeholder="审批状态" clearable>
|
<el-option label="待审批" value="pending" />
|
<el-option label="已通过" value="approved" />
|
<el-option label="已拒绝" value="rejected" />
|
</el-select>
|
</el-col>
|
<el-col :span="6">
|
<el-button type="primary" @click="searchSealApplications">搜索</el-button>
|
<el-button @click="resetSealSearch">重置</el-button>
|
<el-button @click="handleExport">导出</el-button>
|
<el-button type="primary" @click="showSealApplyDialog = true">申请用印
|
</el-button>
|
</el-col>
|
</el-row>
|
|
<PIMTable
|
rowKey="id"
|
:column="sealTableColumn"
|
:tableData="sealApplications"
|
:tableLoading="tableLoading"
|
:page="page"
|
:isShowPagination="true"
|
@pagination="paginationChange"
|
/>
|
</div>
|
</el-card>
|
|
<!-- 用印申请对话框 -->
|
<FormDialog
|
v-model="showSealApplyDialog"
|
title="申请用印"
|
:width="'600px'"
|
@close="closeSealApplyDialog"
|
@confirm="submitSealApplication"
|
@cancel="closeSealApplyDialog"
|
>
|
<el-form :model="sealForm" :rules="sealRules" ref="sealFormRef" label-width="100px">
|
<el-form-item label="申请编号" prop="applicationNum">
|
<el-input v-model="sealForm.applicationNum" placeholder="请输入申请编号" />
|
</el-form-item>
|
<el-form-item label="申请标题" prop="title">
|
<el-input v-model="sealForm.title" placeholder="请输入申请标题" />
|
</el-form-item>
|
<el-form-item label="用印类型" prop="sealType">
|
<el-select v-model="sealForm.sealType" placeholder="请选择用印类型" style="width: 100%">
|
<el-option label="公章" value="official" />
|
<el-option label="合同专用章" value="contract" />
|
<el-option label="财务专用章" value="finance" />
|
<el-option label="法人章" value="legal" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="申请原因" prop="reason">
|
<el-input v-model="sealForm.reason" type="textarea" :rows="4" placeholder="请详细说明用印原因" />
|
</el-form-item>
|
<el-form-item label="审批人" prop="approveUserId">
|
<el-select v-model="sealForm.approveUserId" placeholder="请选择审批人" style="width: 100%" filterable>
|
<el-option
|
v-for="user in userList"
|
:key="user.userId"
|
:label="user.nickName"
|
:value="user.userId"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="紧急程度" prop="urgency">
|
<el-radio-group v-model="sealForm.urgency">
|
<el-radio label="normal">普通</el-radio>
|
<el-radio label="urgent">紧急</el-radio>
|
<el-radio label="very-urgent">特急</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
</FormDialog>
|
|
<!-- 用印详情对话框 -->
|
<FormDialog
|
v-model="showSealDetailDialog"
|
title="用印申请详情"
|
:width="'700px'"
|
@close="closeSealDetailDialog"
|
@confirm="closeSealDetailDialog"
|
@cancel="closeSealDetailDialog"
|
>
|
<div v-if="currentSealDetail" class="mb10">
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="申请编号">{{ currentSealDetail.applicationNum }}</el-descriptions-item>
|
<el-descriptions-item label="申请标题">{{ currentSealDetail.title }}</el-descriptions-item>
|
<el-descriptions-item label="申请人">{{ currentSealDetail.createUserName }}</el-descriptions-item>
|
<el-descriptions-item label="所属部门">{{ currentSealDetail.department }}</el-descriptions-item>
|
<el-descriptions-item label="用印类型">{{ getSealTypeText(currentSealDetail.sealType) }}</el-descriptions-item>
|
<el-descriptions-item label="申请时间">{{ currentSealDetail.createTime }}</el-descriptions-item>
|
<el-descriptions-item label="状态">
|
<el-tag :type="getStatusType(currentSealDetail.status)">
|
{{ getStatusText(currentSealDetail.status) }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="申请原因" :span="2">{{ currentSealDetail.reason }}</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
</FormDialog>
|
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, getCurrentInstance, watch } from 'vue'
|
import { useRoute } from 'vue-router'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { listSealApplication, addSealApplication, updateSealApplication } from '@/api/collaborativeApproval/sealManagement.js'
|
import { userListNoPageByTenantId } from '@/api/system/user.js'
|
import useUserStore from '@/store/modules/user'
|
import FormDialog from '@/components/Dialog/FormDialog.vue'
|
import PIMTable from '@/components/PIMTable/PIMTable.vue'
|
|
// 响应式数据
|
// 用印申请相关
|
const userStore = useUserStore()
|
const route = useRoute()
|
const showSealApplyDialog = ref(false)
|
const tableLoading = ref(false)
|
const showSealDetailDialog = ref(false)
|
const currentSealDetail = ref(null)
|
const sealFormRef = ref()
|
const userList = ref([])
|
const sealForm = reactive({
|
applicationNum: '',
|
title: '',
|
sealType: '',
|
reason: '',
|
approveUserId: '',
|
urgency: 'normal',
|
status: 'pending'
|
})
|
|
const sealRules = {
|
applicationNum: [{ required: true, message: '请输入申请编号', trigger: 'blur' }],
|
title: [{ required: true, message: '请输入申请标题', trigger: 'blur' }],
|
sealType: [{ required: true, message: '请选择用印类型', trigger: 'change' }],
|
reason: [{ required: true, message: '请输入申请原因', trigger: 'blur' }],
|
approveUserId: [{ required: true, message: '请选择审批人', trigger: 'change' }]
|
}
|
|
const sealSearchForm = reactive({
|
title: '',
|
status: '',
|
applicationNum: ''
|
})
|
// 分页参数
|
const page = reactive({
|
current: 1,
|
size: 10,
|
total: 0
|
})
|
|
const sealApplications = ref([])
|
|
// 用印申请状态
|
const getStatusType = (status) => {
|
const statusMap = {
|
pending: 'warning',
|
approved: 'success',
|
rejected: 'danger'
|
}
|
return statusMap[status] || 'info'
|
}
|
// 用印申请状态文本
|
const getStatusText = (status) => {
|
const statusMap = {
|
pending: '待审批',
|
approved: '已通过',
|
rejected: '已拒绝'
|
}
|
return statusMap[status] || '未知'
|
}
|
// 用印类型
|
const getSealTypeText = (sealType) => {
|
const sealTypeMap = {
|
official: '公章',
|
contract: '合同专用章',
|
finance: '财务专用章',
|
legal: '法人章',
|
tegal: '技术专用章'
|
}
|
return sealTypeMap[sealType] || '未知'
|
}
|
|
// 用印申请表格列配置（需在 getStatusText/getSealTypeText 等之后定义）
|
const sealTableColumn = ref([
|
{ label: '申请编号', prop: 'applicationNum',},
|
{ label: '申请标题', prop: 'title', showOverflowTooltip: true },
|
{ label: '申请人', prop: 'createUserName', },
|
{ label: '所属部门', prop: 'department', width: 150 },
|
{
|
label: '用印类型',
|
prop: 'sealType',
|
dataType: 'tag',
|
formatData: (v) => getSealTypeText(v),
|
formatType: () => 'info'
|
},
|
{ label: '申请时间', prop: 'createTime', width: 180 },
|
{
|
label: '状态',
|
prop: 'status',
|
width: 100,
|
dataType: 'tag',
|
formatData: (v) => getStatusText(v),
|
formatType: (v) => getStatusType(v)
|
},
|
{
|
dataType: 'action',
|
label: '操作',
|
width: 200,
|
fixed: 'right',
|
align: 'center',
|
operation: [
|
{ name: '查看', clickFun: (row) => viewSealDetail(row) },
|
{
|
name: '审批',
|
clickFun: (row) => approveSeal(row),
|
showHide: (row) => row.status === 'pending'
|
},
|
{
|
name: '拒绝',
|
clickFun: (row) => rejectSeal(row),
|
showHide: (row) => row.status === 'pending'
|
}
|
]
|
}
|
])
|
|
// 搜索印章申请
|
const searchSealApplications = () => {
|
page.current=1
|
getSealApplicationList()
|
|
// ElMessage.success('搜索完成')
|
}
|
// 重置印章申请搜索
|
const resetSealSearch = () => {
|
sealSearchForm.title = ''
|
sealSearchForm.status = ''
|
sealSearchForm.applicationNum = ''
|
searchSealApplications()
|
}
|
// 提交用印申请
|
const submitSealApplication = async () => {
|
try {
|
await sealFormRef.value.validate()
|
addSealApplication(sealForm).then(res => {
|
if(res.code == 200){
|
ElMessage.success('申请提交成功')
|
closeSealApplyDialog()
|
getSealApplicationList()
|
Object.assign(sealForm, {
|
applicationNum: '',
|
title: '',
|
sealType: '',
|
reason: '',
|
approveUserId: '',
|
urgency: 'normal',
|
status: 'pending'
|
})
|
}
|
}).catch(err => {
|
console.log(err.msg)
|
})
|
|
} catch (error) {
|
}
|
}
|
// 关闭用印申请对话框
|
const closeSealApplyDialog = () => {
|
// 清空表单数据
|
Object.assign(sealForm, {
|
applicationNum: '',
|
title: '',
|
sealType: '',
|
reason: '',
|
approveUserId: '',
|
urgency: 'normal',
|
status: 'pending'
|
})
|
// 清除表单验证状态
|
if (sealFormRef.value) {
|
sealFormRef.value.clearValidate()
|
}
|
showSealApplyDialog.value = false
|
}
|
// 关闭用印详情对话框
|
const closeSealDetailDialog = () => {
|
showSealDetailDialog.value = false
|
}
|
|
// 查看用印申请详情
|
const viewSealDetail = (row) => {
|
currentSealDetail.value = row
|
showSealDetailDialog.value = true
|
}
|
// 审批用印申请
|
const approveSeal = (row) => {
|
ElMessageBox.confirm('确认通过该用印申请？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
row.status = 'approved'
|
updateSealApplication(row).then(res => {
|
if(res.code == 200){
|
ElMessage.success('审批通过')
|
getSealApplicationList()
|
}
|
})
|
})
|
}
|
// 拒绝用印申请
|
const rejectSeal = (row) => {
|
ElMessageBox.prompt('请输入拒绝原因', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
inputPattern: /\S+/,
|
inputErrorMessage: '拒绝原因不能为空'
|
}).then(({ value }) => {
|
row.status = 'rejected'
|
updateSealApplication(row).then(res => {
|
if(res.code == 200){
|
ElMessage.success('已拒绝申请')
|
getSealApplicationList()
|
}
|
})
|
})
|
}
|
|
// 导出用印申请
|
const { proxy } = getCurrentInstance()
|
const handleExport = () => {
|
proxy.download('/sealApplicationManagement/export', { ...sealSearchForm }, '用印申请.xlsx')
|
}
|
|
// 获取印章申请列表数据
|
const getSealApplicationList = async () => {
|
tableLoading.value = true
|
listSealApplication(page, sealSearchForm)
|
.then(res => {
|
sealApplications.value = res.data.records
|
page.total = res.data.total
|
tableLoading.value = false
|
}).catch(err => {
|
tableLoading.value = false
|
})
|
}
|
// 分页变化处理
|
const paginationChange = (obj) => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getSealApplicationList();
|
};
|
|
// 监听对话框打开，获取用户列表
|
watch(showSealApplyDialog, (newVal) => {
|
if (newVal) {
|
userListNoPageByTenantId().then((res) => {
|
userList.value = res.data;
|
});
|
}
|
});
|
|
onMounted(() => {
|
// 路由携带 applicationNum 时，预填并查询
|
if (route.query.applicationNum) {
|
sealSearchForm.applicationNum = String(route.query.applicationNum)
|
page.current = 1
|
getSealApplicationList()
|
} else {
|
getSealApplicationList()
|
}
|
})
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.tab-content {
|
padding: 20px 0;
|
}
|
|
.mb-20 {
|
margin-bottom: 20px;
|
}
|
|
.ml-10 {
|
margin-left: 10px;
|
}
|
</style>
|
