489 lines
15 KiB
Vue
489 lines
15 KiB
Vue
<template>
|
|
<div class="layout-padding">
|
|
<div class="layout-padding-auto layout-padding-view">
|
|
<!-- 图表统计 -->
|
|
<div style="text-align: right; margin-bottom: 20px;">
|
|
<el-collapse accordion @change="initChartOption">
|
|
<el-collapse-item title="资格等级统计">
|
|
<div style="width: 100%">
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<v-chart ref="chartRef" style="width: 100%; height: 400px;" :option="chartOption" />
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-table :data="chartData" border show-summary style="width: 100%">
|
|
<el-table-column prop="name" label="等级" width="180" align="center" />
|
|
<el-table-column prop="value" label="人数" width="180" align="center" />
|
|
<el-table-column prop="rate" label="占比" width="180" align="center" />
|
|
</el-table>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
|
|
<!-- 搜索表单 -->
|
|
<search-form
|
|
v-show="showSearch"
|
|
:model="search"
|
|
ref="searchFormRef"
|
|
@keyup-enter="handleFilter"
|
|
>
|
|
<template #default="{ visible }">
|
|
<template v-if="visible">
|
|
<el-form-item label="审核状态" prop="state">
|
|
<el-select
|
|
v-model="search.state"
|
|
clearable
|
|
style="width: 200px"
|
|
placeholder="请选择审核状态"
|
|
>
|
|
<el-option
|
|
v-for="item in professionalState"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="工号" prop="teacherNo">
|
|
<el-input
|
|
v-model="search.teacherNo"
|
|
clearable
|
|
style="width: 200px"
|
|
placeholder="请输入工号"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="姓名" prop="realName">
|
|
<el-input
|
|
v-model="search.realName"
|
|
clearable
|
|
style="width: 200px"
|
|
placeholder="请输入姓名"
|
|
/>
|
|
</el-form-item>
|
|
</template>
|
|
</template>
|
|
|
|
<!-- 操作按钮 -->
|
|
<template #actions>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleFilter" icon="Search">查询</el-button>
|
|
<el-button @click="resetQuery" icon="Refresh">重置</el-button>
|
|
</el-form-item>
|
|
</template>
|
|
</search-form>
|
|
|
|
<!-- 操作按钮 -->
|
|
<el-row>
|
|
<div class="mb15" style="width: 100%;">
|
|
<el-button
|
|
type="primary"
|
|
icon="FolderAdd"
|
|
@click="handleAdd"
|
|
v-if="permissions.professional_professionalqualificationrelation_add">新 增
|
|
</el-button>
|
|
<el-button
|
|
type="success"
|
|
icon="Download"
|
|
v-if="permissions.professional_teacherbase_export"
|
|
@click="handleDownLoadWord"
|
|
:loading="exportLoading">导出信息
|
|
</el-button>
|
|
</div>
|
|
</el-row>
|
|
|
|
<!-- 表格 -->
|
|
<el-table
|
|
ref="tableRef"
|
|
:data="state.dataList"
|
|
v-loading="state.loading"
|
|
border
|
|
:cell-style="tableStyle.cellStyle"
|
|
:header-cell-style="tableStyle.headerCellStyle"
|
|
>
|
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
|
|
|
<el-table-column prop="state" label="审核状态" width="120" align="center">
|
|
<template #default="scope">
|
|
<el-tag v-if="scope.row.state === '1'" type="success">通过</el-tag>
|
|
<el-tag v-else-if="scope.row.state === '-2'" type="danger">驳回</el-tag>
|
|
<el-tag v-else-if="scope.row.state === '0'" type="warning">待审核</el-tag>
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="backReason" label="驳回理由" min-width="150" align="center" show-overflow-tooltip />
|
|
|
|
<el-table-column prop="teacherNo" label="工号" min-width="120" align="center" show-overflow-tooltip />
|
|
|
|
<el-table-column prop="realName" label="姓名" min-width="120" align="center" show-overflow-tooltip />
|
|
|
|
<el-table-column prop="qualificationConfigId" label="资格等级" min-width="150" align="center" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ getQualificationLevelName(scope.row.qualificationConfigId) }}
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="worker" label="工种" min-width="150" align="center" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ getWorkTypeName(scope.row.worker) }}
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="updateTime" label="更新时间" width="180" align="center" />
|
|
|
|
<el-table-column label="证明材料" width="120" align="center">
|
|
<template #default="scope">
|
|
<el-button
|
|
v-if="scope.row.evidenceA && scope.row.evidenceA !== ''"
|
|
type="primary"
|
|
link
|
|
@click="handlePreview(scope.row.srcList)">查看
|
|
</el-button>
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="操作" width="250" align="center" fixed="right">
|
|
<template #default="scope">
|
|
<el-button
|
|
type="primary"
|
|
link
|
|
icon="Edit"
|
|
v-if="permissions.professional_professionalqualificationrelation_edit && (scope.row.state === '0' || scope.row.state === '-2')"
|
|
@click="handleEdit(scope.row)">编辑
|
|
</el-button>
|
|
<el-button
|
|
type="success"
|
|
link
|
|
icon="Check"
|
|
v-if="permissions.professional_professionalqualificationrelation_exam && scope.row.state === '0'"
|
|
@click="changeState(scope.row, 1)">通过
|
|
</el-button>
|
|
<el-button
|
|
type="danger"
|
|
link
|
|
icon="Close"
|
|
v-if="permissions.professional_professionalqualificationrelation_exam && (scope.row.state === '0' || scope.row.state === '1')"
|
|
@click="changeState(scope.row, -2)">驳回
|
|
</el-button>
|
|
<el-button
|
|
type="danger"
|
|
link
|
|
icon="Delete"
|
|
v-if="permissions.professional_professionalqualificationrelation_del"
|
|
@click="handleDel(scope.row)">删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<pagination
|
|
v-bind="state.pagination"
|
|
@current-change="currentChangeHandle"
|
|
@size-change="sizeChangeHandle"
|
|
/>
|
|
|
|
<!-- 材料预览对话框 -->
|
|
<el-dialog v-model="dialogVisible" title="职业资格材料" append-to-body width="90%">
|
|
<auth-img
|
|
v-for="src in imgUrl"
|
|
:key="src.title"
|
|
:authSrc="src.url"
|
|
style="height:1000px;"
|
|
/>
|
|
</el-dialog>
|
|
|
|
<!-- 子组件 -->
|
|
<MultiDialog ref="multiDialogRef" @getList="getDataList" :page="state.pagination" :nowRow="null" />
|
|
<DataForm ref="dataFormRef" @refreshData="handleFilter" />
|
|
<ProfessionalBackResaon ref="backReasonRef" @refreshData="handleFilter" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useUserInfo } from '/@/stores/userInfo'
|
|
import { BasicTableProps, useTable } from '/@/hooks/table'
|
|
import { useMessage } from '/@/hooks/message'
|
|
import { useMessageBox } from '/@/hooks/message'
|
|
import { useDict } from '/@/hooks/dict'
|
|
import VChart from 'vue-echarts'
|
|
import { use } from 'echarts/core'
|
|
import { PieChart } from 'echarts/charts'
|
|
import { TooltipComponent, LegendComponent } from 'echarts/components'
|
|
import { CanvasRenderer } from 'echarts/renderers'
|
|
import {
|
|
fetchList,
|
|
putObj,
|
|
delObj,
|
|
getChartOption,
|
|
exportExcel
|
|
} from '/@/api/professional/professionaluser/professionalqualificationrelation'
|
|
import { getLevelList } from '/@/api/professional/rsbase/professionalqualificationconfig'
|
|
import { getWorkTypeList } from '/@/api/professional/rsbase/professionalworktype'
|
|
import { defineAsyncComponent } from 'vue'
|
|
const MultiDialog = defineAsyncComponent(() => import('/@/views/professional/teacherbase/multiDialog.vue'))
|
|
import DataForm from './form.vue'
|
|
import ProfessionalBackResaon from '/@/views/professional/common/professional-back-resaon.vue'
|
|
const authImg = defineAsyncComponent(() => import('/@/components/tools/auth-img.vue'))
|
|
|
|
// 注册 ECharts 组件
|
|
use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer])
|
|
|
|
// 使用 Pinia store
|
|
const userInfoStore = useUserInfo()
|
|
const { userInfos } = storeToRefs(userInfoStore)
|
|
|
|
// 创建权限对象
|
|
const permissions = computed(() => {
|
|
const perms: Record<string, boolean> = {}
|
|
userInfos.value.authBtnList.forEach((perm: string) => {
|
|
perms[perm] = true
|
|
})
|
|
return perms
|
|
})
|
|
|
|
// 消息提示 hooks
|
|
const message = useMessage()
|
|
const messageBox = useMessageBox()
|
|
|
|
// 字典数据
|
|
const { professional_state: professionalState } = useDict('professional_state')
|
|
|
|
// 表格引用
|
|
const tableRef = ref()
|
|
const searchFormRef = ref()
|
|
const multiDialogRef = ref()
|
|
const dataFormRef = ref()
|
|
const backReasonRef = ref()
|
|
const chartRef = ref()
|
|
const showSearch = ref(true)
|
|
|
|
// 搜索表单数据
|
|
const search = reactive({
|
|
state: '',
|
|
teacherNo: '',
|
|
realName: ''
|
|
})
|
|
|
|
// 图表数据
|
|
const chartOption = ref<any>({})
|
|
const chartData = ref<any[]>([])
|
|
|
|
// 材料预览
|
|
const dialogVisible = ref(false)
|
|
const imgUrl = ref<Array<{ title: string; url: string }>>([])
|
|
|
|
// 导出加载状态
|
|
const exportLoading = ref(false)
|
|
|
|
// 资格等级和工种列表
|
|
const qualificationLevelList = ref<any[]>([])
|
|
const workTypeList = ref<any[]>([])
|
|
|
|
// 配置 useTable
|
|
const state: BasicTableProps = reactive<BasicTableProps>({
|
|
pageList: async (params: any) => {
|
|
const response = await fetchList(params)
|
|
const records = response.data.records || []
|
|
// 处理证明材料列表
|
|
records.forEach((v: any) => {
|
|
v.srcList = []
|
|
if (v.evidenceA != null) {
|
|
v.srcList.push(v.evidenceA)
|
|
}
|
|
})
|
|
return {
|
|
data: {
|
|
records,
|
|
total: response.data.total || 0
|
|
}
|
|
}
|
|
},
|
|
queryForm: search
|
|
})
|
|
|
|
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state)
|
|
|
|
// 初始化图表
|
|
const initChartOption = async () => {
|
|
try {
|
|
const response = await getChartOption()
|
|
chartOption.value = response.data.data.option || {}
|
|
|
|
let total = 0
|
|
if (chartOption.value.series && chartOption.value.series[0] && chartOption.value.series[0].data) {
|
|
chartOption.value.series[0].data.forEach((item: any) => {
|
|
total += item.value || 0
|
|
})
|
|
|
|
chartData.value = []
|
|
chartOption.value.series[0].data.forEach((item: any) => {
|
|
const rate = total > 0 ? Number((item.value / total * 100).toFixed(1)) : 0
|
|
chartData.value.push({
|
|
name: item.name,
|
|
value: item.value,
|
|
rate: `${rate}%`
|
|
})
|
|
})
|
|
}
|
|
} catch (error) {
|
|
// Failed to load chart data
|
|
}
|
|
}
|
|
|
|
// 预览材料
|
|
const handlePreview = (list: string[]) => {
|
|
imgUrl.value = []
|
|
nextTick(() => {
|
|
list.forEach(v => {
|
|
imgUrl.value.push({
|
|
title: '',
|
|
url: v
|
|
})
|
|
})
|
|
nextTick(() => {
|
|
dialogVisible.value = true
|
|
})
|
|
})
|
|
}
|
|
|
|
// 审核状态变更
|
|
const changeState = (row: any, val: number) => {
|
|
if (val === 1) {
|
|
// 通过
|
|
const str = '通过'
|
|
messageBox.confirm(`是否确认${str}${row.realName}的申请`).then(async () => {
|
|
try {
|
|
await putObj({
|
|
id: row.id,
|
|
state: val
|
|
})
|
|
message.success('操作成功')
|
|
getDataList()
|
|
} catch (error) {
|
|
// Failed to change state
|
|
}
|
|
}).catch(() => {})
|
|
} else if (val === -2) {
|
|
// 驳回
|
|
backReasonRef.value?.init(row, 'qua')
|
|
}
|
|
}
|
|
|
|
|
|
// 查询
|
|
const handleFilter = () => {
|
|
getDataList()
|
|
}
|
|
|
|
// 重置查询
|
|
const resetQuery = () => {
|
|
Object.assign(search, {
|
|
state: '',
|
|
teacherNo: '',
|
|
realName: ''
|
|
})
|
|
getDataList()
|
|
}
|
|
|
|
// 打开新增窗口
|
|
const handleAdd = () => {
|
|
multiDialogRef.value?.init(3)
|
|
}
|
|
|
|
// 打开编辑窗口
|
|
const handleEdit = (row: any) => {
|
|
dataFormRef.value?.openDialog(row)
|
|
}
|
|
|
|
// 删除
|
|
const handleDel = (row: any) => {
|
|
messageBox.confirm('是否确认删除该条记录').then(async () => {
|
|
try {
|
|
await delObj(row.id)
|
|
message.success('删除成功')
|
|
// 如果当前页只剩一条数据，且不是第一页，则跳转到上一页
|
|
if (state.pagination && state.dataList && state.dataList.length === 1 && state.pagination.current && state.pagination.current > 1) {
|
|
state.pagination.current = state.pagination.current - 1
|
|
}
|
|
getDataList()
|
|
} catch (error) {
|
|
// Failed to delete
|
|
}
|
|
}).catch(() => {})
|
|
}
|
|
|
|
// 导出
|
|
const handleDownLoadWord = async () => {
|
|
exportLoading.value = true
|
|
try {
|
|
const response: any = await exportExcel(search)
|
|
|
|
const blob = new Blob([response as BlobPart])
|
|
const fileName = '职业资格信息.xls'
|
|
const elink = document.createElement('a')
|
|
elink.download = fileName
|
|
elink.style.display = 'none'
|
|
elink.href = URL.createObjectURL(blob)
|
|
document.body.appendChild(elink)
|
|
elink.click()
|
|
URL.revokeObjectURL(elink.href)
|
|
document.body.removeChild(elink)
|
|
message.success('导出成功')
|
|
} catch (error) {
|
|
message.error('导出失败')
|
|
} finally {
|
|
exportLoading.value = false
|
|
}
|
|
}
|
|
|
|
// 获取资格等级名称
|
|
const getQualificationLevelName = (id: string | number) => {
|
|
const item = qualificationLevelList.value.find((item: any) => item.id === id)
|
|
return item ? item.levelName : '-'
|
|
}
|
|
|
|
// 获取工种名称
|
|
const getWorkTypeName = (id: string | number) => {
|
|
const item = workTypeList.value.find((item: any) => item.id === id)
|
|
return item ? item.workName : '-'
|
|
}
|
|
|
|
// 加载字典数据
|
|
const loadDictData = async () => {
|
|
try {
|
|
// 加载资格等级列表
|
|
const levelRes = await getLevelList()
|
|
if (levelRes && levelRes.data) {
|
|
qualificationLevelList.value = levelRes.data
|
|
}
|
|
|
|
// 加载工种列表
|
|
const workRes = await getWorkTypeList()
|
|
if (workRes && workRes.data) {
|
|
workTypeList.value = workRes.data
|
|
}
|
|
} catch (error) {
|
|
// Failed to load dict data
|
|
}
|
|
}
|
|
|
|
// 初始化
|
|
onMounted(async () => {
|
|
await loadDictData()
|
|
getDataList()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|