<template>
|
<div class="app-container">
|
<el-card class="box-card">
|
<template #header>
|
<div class="card-header">
|
<span>用印管理与规章制度发布</span>
|
<el-button type="primary" @click="showSealApplyDialog = true">
|
<el-icon><Plus /></el-icon>
|
申请用印
|
</el-button>
|
</div>
|
</template>
|
|
<el-tabs v-model="activeTab" type="border-card">
|
<!-- 用印申请管理 -->
|
<el-tab-pane label="用印申请管理" name="seal">
|
<div class="tab-content">
|
<el-row :gutter="20" class="mb-20">
|
<el-col :span="6">
|
<el-input v-model="sealSearchForm.keyword" placeholder="请输入申请标题或申请人" clearable />
|
</el-col>
|
<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="4">
|
<el-button type="primary" @click="searchSealApplications">搜索</el-button>
|
<el-button @click="resetSealSearch">重置</el-button>
|
</el-col>
|
</el-row>
|
|
<el-table :data="sealApplications" style="width: 100%">
|
<el-table-column prop="id" label="申请编号" width="120" />
|
<el-table-column prop="title" label="申请标题" min-width="200" />
|
<el-table-column prop="applicant" label="申请人" width="120" />
|
<el-table-column prop="department" label="所属部门" width="150" />
|
<el-table-column prop="sealType" label="用印类型" width="120" />
|
<el-table-column prop="applyTime" label="申请时间" width="180" />
|
<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 label="操作" width="200" fixed="right">
|
<template #default="scope">
|
<el-button link @click="viewSealDetail(scope.row)">查看</el-button>
|
<el-button
|
v-if="scope.row.status === 'pending'"
|
link
|
type="primary"
|
@click="approveSeal(scope.row)"
|
>
|
审批
|
</el-button>
|
<el-button
|
v-if="scope.row.status === 'pending'"
|
link
|
type="danger"
|
@click="rejectSeal(scope.row)"
|
>
|
拒绝
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-tab-pane>
|
|
<!-- 规章制度管理 -->
|
<el-tab-pane label="规章制度管理" name="regulations">
|
<div class="tab-content">
|
<el-row :gutter="20" class="mb-20">
|
<el-col :span="6">
|
<el-input v-model="regulationSearchForm.keyword" placeholder="请输入制度标题或发布人" clearable />
|
</el-col>
|
<el-col :span="4">
|
<el-select v-model="regulationSearchForm.category" placeholder="制度分类" clearable>
|
<el-option label="人事制度" value="hr" />
|
<el-option label="财务制度" value="finance" />
|
<el-option label="安全制度" value="safety" />
|
<el-option label="技术制度" value="tech" />
|
</el-select>
|
</el-col>
|
<el-col :span="8">
|
<el-button type="primary" @click="searchRegulations">搜索</el-button>
|
<el-button @click="resetRegulationSearch">重置</el-button>
|
<el-button type="success" @click="showRegulationDialog = true">
|
发布制度
|
</el-button>
|
</el-col>
|
</el-row>
|
|
<el-table :data="regulations" style="width: 100%">
|
<el-table-column prop="id" label="制度编号" width="120" />
|
<el-table-column prop="title" label="制度标题" min-width="200" />
|
<el-table-column prop="category" label="分类" width="120">
|
<template #default="scope">
|
<el-tag>{{ getCategoryText(scope.row.category) }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="version" label="版本" width="80" />
|
<el-table-column prop="publisher" label="发布人" width="120" />
|
<el-table-column prop="publishTime" label="发布时间" width="180" />
|
<el-table-column prop="status" label="状态" width="100">
|
<template #default="scope">
|
<el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
|
{{ scope.row.status === 'active' ? '生效中' : '已废止' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="readCount" label="已读人数" width="100" />
|
<el-table-column label="操作" width="250" fixed="right">
|
<template #default="scope">
|
<el-button link @click="viewRegulation(scope.row)">查看</el-button>
|
<el-button link type="primary" @click="editRegulation(scope.row)">编辑</el-button>
|
<el-button link type="success" @click="viewVersionHistory(scope.row)">版本历史</el-button>
|
<el-button link type="warning" @click="viewReadStatus(scope.row)">阅读状态</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
|
<!-- 用印申请对话框 -->
|
<el-dialog v-model="showSealApplyDialog" title="申请用印" width="600px">
|
<el-form :model="sealForm" :rules="sealRules" ref="sealFormRef" label-width="100px">
|
<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="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>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="showSealApplyDialog = false">取消</el-button>
|
<el-button type="primary" @click="submitSealApplication">提交申请</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
|
<!-- 规章制度发布对话框 -->
|
<el-dialog v-model="showRegulationDialog" title="发布规章制度" width="800px">
|
<el-form :model="regulationForm" :rules="regulationRules" ref="regulationFormRef" label-width="100px">
|
<el-form-item label="制度标题" prop="title">
|
<el-input v-model="regulationForm.title" placeholder="请输入制度标题" />
|
</el-form-item>
|
<el-form-item label="制度分类" prop="category">
|
<el-select v-model="regulationForm.category" placeholder="请选择制度分类" style="width: 100%">
|
<el-option label="人事制度" value="hr" />
|
<el-option label="财务制度" value="finance" />
|
<el-option label="安全制度" value="safety" />
|
<el-option label="技术制度" value="tech" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="制度内容" prop="content">
|
<el-input v-model="regulationForm.content" type="textarea" :rows="10" placeholder="请输入制度详细内容" />
|
</el-form-item>
|
<el-form-item label="生效时间" prop="effectiveTime">
|
<el-date-picker v-model="regulationForm.effectiveTime" type="datetime" placeholder="选择生效时间" style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="适用范围" prop="scope">
|
<el-checkbox-group v-model="regulationForm.scope">
|
<el-checkbox label="all">全体员工</el-checkbox>
|
<el-checkbox label="manager">管理层</el-checkbox>
|
<el-checkbox label="hr">人事部门</el-checkbox>
|
<el-checkbox label="finance">财务部门</el-checkbox>
|
<el-checkbox label="tech">技术部门</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item label="是否需要确认" prop="requireConfirm">
|
<el-switch v-model="regulationForm.requireConfirm" />
|
<span class="ml-10">开启后员工需要阅读确认</span>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="showRegulationDialog = false">取消</el-button>
|
<el-button type="primary" @click="submitRegulation">发布制度</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
|
<!-- 用印详情对话框 -->
|
<el-dialog v-model="showSealDetailDialog" title="用印申请详情" width="700px">
|
<div v-if="currentSealDetail" class="mb10">
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="申请编号">{{ currentSealDetail.id }}</el-descriptions-item>
|
<el-descriptions-item label="申请标题">{{ currentSealDetail.title }}</el-descriptions-item>
|
<el-descriptions-item label="申请人">{{ currentSealDetail.applicant }}</el-descriptions-item>
|
<el-descriptions-item label="所属部门">{{ currentSealDetail.department }}</el-descriptions-item>
|
<el-descriptions-item label="用印类型">{{ currentSealDetail.sealType }}</el-descriptions-item>
|
<el-descriptions-item label="申请时间">{{ currentSealDetail.applyTime }}</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>
|
</el-dialog>
|
|
<!-- 规章制度详情对话框 -->
|
<el-dialog v-model="showRegulationDetailDialog" title="规章制度详情" width="800px">
|
<div v-if="currentRegulationDetail">
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="制度编号">{{ currentRegulationDetail.id }}</el-descriptions-item>
|
<el-descriptions-item label="制度标题">{{ currentRegulationDetail.title }}</el-descriptions-item>
|
<el-descriptions-item label="分类">{{ getCategoryText(currentRegulationDetail.category) }}</el-descriptions-item>
|
<el-descriptions-item label="版本">{{ currentRegulationDetail.version }}</el-descriptions-item>
|
<el-descriptions-item label="发布人">{{ currentRegulationDetail.publisher }}</el-descriptions-item>
|
<el-descriptions-item label="发布时间">{{ currentRegulationDetail.publishTime }}</el-descriptions-item>
|
</el-descriptions>
|
<div class="mt-20">
|
<h4>制度内容</h4>
|
<div class="regulation-content">{{ currentRegulationDetail.content }}</div>
|
</div>
|
</div>
|
</el-dialog>
|
|
<!-- 版本历史对话框 -->
|
<el-dialog v-model="showVersionHistoryDialog" title="版本历史" width="800px">
|
<el-table :data="versionHistory" style="width: 100%;margin-bottom: 10px">
|
<el-table-column prop="version" label="版本号" width="100" />
|
<el-table-column prop="updateTime" label="更新时间" width="180" />
|
<el-table-column prop="updater" label="更新人" width="120" />
|
<el-table-column prop="changeLog" label="变更说明" />
|
</el-table>
|
</el-dialog>
|
|
<!-- 阅读状态对话框 -->
|
<el-dialog v-model="showReadStatusDialog" title="阅读状态" width="800px">
|
<el-table :data="readStatusList" style="width: 100%;margin-bottom: 10px">
|
<el-table-column prop="employee" label="员工姓名" width="120" />
|
<el-table-column prop="department" label="所属部门" width="150" />
|
<el-table-column prop="readTime" label="阅读时间" width="180" />
|
<el-table-column prop="confirmTime" label="确认时间" width="180" />
|
<el-table-column prop="status" label="状态" width="100">
|
<template #default="scope">
|
<el-tag :type="scope.row.status === 'confirmed' ? 'success' : 'warning'">
|
{{ scope.row.status === 'confirmed' ? '已确认' : '未确认' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { Plus } from '@element-plus/icons-vue'
|
|
// 响应式数据
|
const activeTab = ref('seal')
|
|
// 用印申请相关
|
const showSealApplyDialog = ref(false)
|
const showSealDetailDialog = ref(false)
|
const currentSealDetail = ref(null)
|
const sealFormRef = ref()
|
const sealForm = reactive({
|
title: '',
|
sealType: '',
|
reason: '',
|
urgency: 'normal'
|
})
|
|
const sealRules = {
|
title: [{ required: true, message: '请输入申请标题', trigger: 'blur' }],
|
sealType: [{ required: true, message: '请选择用印类型', trigger: 'change' }],
|
reason: [{ required: true, message: '请输入申请原因', trigger: 'blur' }]
|
}
|
|
const sealSearchForm = reactive({
|
keyword: '',
|
status: ''
|
})
|
|
// 规章制度相关
|
const showRegulationDialog = ref(false)
|
const showRegulationDetailDialog = ref(false)
|
const showVersionHistoryDialog = ref(false)
|
const showReadStatusDialog = ref(false)
|
const currentRegulationDetail = ref(null)
|
const regulationFormRef = ref()
|
const regulationForm = reactive({
|
title: '',
|
category: '',
|
content: '',
|
effectiveTime: '',
|
scope: [],
|
requireConfirm: true
|
})
|
|
const regulationRules = {
|
title: [{ required: true, message: '请输入制度标题', trigger: 'blur' }],
|
category: [{ required: true, message: '请选择制度分类', trigger: 'change' }],
|
content: [{ required: true, message: '请输入制度内容', trigger: 'blur' }],
|
effectiveTime: [{ required: true, message: '请选择生效时间', trigger: 'change' }],
|
scope: [{ required: true, message: '请选择适用范围', trigger: 'change' }]
|
}
|
|
const regulationSearchForm = reactive({
|
keyword: '',
|
category: ''
|
})
|
|
// 假数据
|
const sealApplications = ref([
|
{
|
id: 'SEAL001',
|
title: '合同用印申请',
|
applicant: '张三',
|
department: '销售部',
|
sealType: '合同专用章',
|
applyTime: '2024-01-15 10:30:00',
|
status: 'pending',
|
reason: '客户合同需要盖章'
|
},
|
{
|
id: 'SEAL002',
|
title: '财务报告用印',
|
applicant: '王五',
|
department: '财务部',
|
sealType: '财务专用章',
|
applyTime: '2024-01-14 14:20:00',
|
status: 'approved',
|
reason: '季度财务报告需要盖章'
|
},
|
{
|
id: 'SEAL003',
|
title: '公司章程用印',
|
applicant: '孙七',
|
department: '法务部',
|
sealType: '公章',
|
applyTime: '2024-01-13 09:15:00',
|
status: 'rejected',
|
reason: '公司章程修改需要盖章'
|
}
|
])
|
|
const regulations = ref([
|
{
|
id: 'REG001',
|
title: '员工考勤管理制度',
|
category: 'hr',
|
version: 'v2.1',
|
publisher: '人事部',
|
publishTime: '2024-01-10 09:00:00',
|
status: 'active',
|
readCount: 45,
|
content: '为规范员工考勤管理，提高工作效率，特制定本制度...'
|
},
|
{
|
id: 'REG002',
|
title: '财务报销制度',
|
category: 'finance',
|
version: 'v1.5',
|
publisher: '财务部',
|
publishTime: '2024-01-08 14:30:00',
|
status: 'active',
|
readCount: 38,
|
content: '为规范财务报销流程，加强财务管理，特制定本制度...'
|
},
|
{
|
id: 'REG003',
|
title: '安全生产管理制度',
|
category: 'safety',
|
version: 'v3.0',
|
publisher: '安全部',
|
publishTime: '2024-01-05 16:00:00',
|
status: 'active',
|
readCount: 52,
|
content: '为确保员工人身安全，预防安全事故发生，特制定本制度...'
|
}
|
])
|
|
const versionHistory = ref([
|
{ version: 'v2.1', updateTime: '2024-01-10 09:00:00', updater: '人事部', changeLog: '更新考勤时间规定' },
|
{ version: 'v2.0', updateTime: '2023-12-15 10:30:00', updater: '人事部', changeLog: '新增加班管理规定' },
|
{ version: 'v1.0', updateTime: '2023-11-01 14:00:00', updater: '人事部', changeLog: '首次发布' }
|
])
|
|
const readStatusList = ref([
|
{ employee: '张三', department: '销售部', readTime: '2024-01-11 10:30:00', confirmTime: '2024-01-11 10:35:00', status: 'confirmed' },
|
{ employee: '李四', department: '技术部', readTime: '2024-01-11 14:20:00', confirmTime: '', status: 'unconfirmed' },
|
{ employee: '王五', department: '财务部', readTime: '2024-01-12 09:15:00', confirmTime: '2024-01-12 09:20:00', status: 'confirmed' }
|
])
|
|
// 方法
|
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 getCategoryText = (category) => {
|
const categoryMap = {
|
hr: '人事制度',
|
finance: '财务制度',
|
safety: '安全制度',
|
tech: '技术制度'
|
}
|
return categoryMap[category] || '未知'
|
}
|
|
const searchSealApplications = () => {
|
ElMessage.success('搜索完成')
|
}
|
|
const resetSealSearch = () => {
|
sealSearchForm.keyword = ''
|
sealSearchForm.status = ''
|
searchSealApplications()
|
}
|
|
const searchRegulations = () => {
|
ElMessage.success('搜索完成')
|
}
|
|
const resetRegulationSearch = () => {
|
regulationSearchForm.keyword = ''
|
regulationSearchForm.category = ''
|
searchRegulations()
|
}
|
|
const submitSealApplication = async () => {
|
try {
|
await sealFormRef.value.validate()
|
ElMessage.success('申请提交成功')
|
showSealApplyDialog.value = false
|
Object.assign(sealForm, {
|
title: '',
|
sealType: '',
|
reason: '',
|
urgency: 'normal'
|
})
|
} catch (error) {
|
ElMessage.error('请完善申请信息')
|
}
|
}
|
|
const submitRegulation = async () => {
|
try {
|
await regulationFormRef.value.validate()
|
ElMessage.success('制度发布成功')
|
showRegulationDialog.value = false
|
Object.assign(regulationForm, {
|
title: '',
|
category: '',
|
content: '',
|
effectiveTime: '',
|
scope: [],
|
requireConfirm: true
|
})
|
} catch (error) {
|
ElMessage.error('请完善制度信息')
|
}
|
}
|
|
const viewSealDetail = (row) => {
|
currentSealDetail.value = row
|
showSealDetailDialog.value = true
|
}
|
|
const approveSeal = (row) => {
|
ElMessageBox.confirm('确认通过该用印申请？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
row.status = 'approved'
|
ElMessage.success('审批通过')
|
})
|
}
|
|
const rejectSeal = (row) => {
|
ElMessageBox.prompt('请输入拒绝原因', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
inputPattern: /\S+/,
|
inputErrorMessage: '拒绝原因不能为空'
|
}).then(({ value }) => {
|
row.status = 'rejected'
|
ElMessage.success('已拒绝申请')
|
})
|
}
|
|
const viewRegulation = (row) => {
|
currentRegulationDetail.value = row
|
showRegulationDetailDialog.value = true
|
}
|
|
const editRegulation = (row) => {
|
ElMessage.info('编辑功能开发中...')
|
}
|
|
const viewVersionHistory = (row) => {
|
showVersionHistoryDialog.value = true
|
}
|
|
const viewReadStatus = (row) => {
|
showReadStatusDialog.value = true
|
}
|
|
onMounted(() => {
|
// 初始化
|
})
|
</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;
|
}
|
|
.mt-20 {
|
margin-top: 20px;
|
}
|
|
.ml-10 {
|
margin-left: 10px;
|
}
|
|
.regulation-content {
|
background-color: #f5f5f5;
|
padding: 15px;
|
border-radius: 4px;
|
line-height: 1.6;
|
white-space: pre-wrap;
|
}
|
|
.dialog-footer {
|
display: flex;
|
justify-content: flex-end;
|
gap: 10px;
|
}
|
</style>
|
