wangchengming/voltage_Safety_Vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加PPE工具界面

Browse Source
This commit is contained in:
wangchengming 2025-07-09 16:16:16 +08:00
parent e83f1c852e
commit c705229583
3 changed files with 867 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/router/index.js
View File

@ -360,8 +360,7 @@ export const dynamicRoutes = [
meta: { title: '审核员审批', activeMenu: '/safetyReview/examinerApproval' }
}
]
},
},
{
path: '/safetyReview/escTaskForm',
component: Layout,
@ -376,6 +375,20 @@ export const dynamicRoutes = [
}
]
},
{
path: '/ppeToolForm',
component: Layout,
hidden: true,
permissions: ['safetyReview:examinerTasks:add'],
children: [
{
path: ':Id(\\d+)?',
component: () => import('@/views/ppeTool/toolForm'),
name: 'escTaskForm',
meta: { title: 'ppeTool表单', activeMenu: '/ppeTool' }
}
]
},
{
path: '/system/userApprovalForm',
component: Layout,

370
src/views/ppeTool/index.vue Normal file
View File

@ -0,0 +1,370 @@
<template>
<div class="app-page-container">
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<div class="app-container clearBoth">
<el-form :model="queryParams" ref="queryRef" :inline="true">
<el-row class="myRow">
<el-col :span="20">
<el-form-item label="部门" prop="deptId">
<el-select v-model="queryParams.deptId" placeholder="请选择" clearable style="width: 160px">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="属地" prop="deptId">
<el-select v-model="queryParams.deptId" placeholder="请选择" clearable style="width: 160px">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="工具名称" prop="userName">
<el-input v-model="queryParams.year" placeholder="请选择工具名称" style="width: 140px" />
</el-form-item>
</el-col>
<el-col :span="4" style="text-align: right;">
<el-button type="primary" class="seachBtn" @click="handleQuery">查询</el-button>
<el-button class="resetBtn" @click="resetQuery">重置</el-button>
</el-col>
</el-row>
</el-form>
<div class="optionBtn">
<el-button type="primary" class="qualificationApplyBtn" @click="handleOpenAddForm">
<img :src="addIcon" class="custom-icon" />
新增
</el-button>
</div>
<div class="borderLine"></div>
<el-table :data="tableData" height="calc(100% - 166px)" style="width: 100%">
<el-table-column label="序号" width="60">
<template #default="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="localityName" label="属地" min-width="130" />
<el-table-column prop="name" label="ESC" min-width="100" />
<el-table-column prop="departmentName" label="部门" min-width="150" />
<el-table-column prop="jobNumber" label="工具名称" min-width="130" />
<el-table-column prop="curQualification" label="工具编号" min-width="130" />
<el-table-column prop="startTime" label="到期日期" min-width="130">
<template #default="scope">
<span v-if="scope.row.startTime && scope.row.certificate"> {{ scope.row.startTime }}</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column prop="expireTime" label="标定信息" min-width="150"></el-table-column>
<el-table-column prop="startTime" label="状态" min-width="100">
<template #default="scope">
<span>-</span>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="130">
<template #default="scope">
<el-button type="primary" text class="replayTextBtn">编辑</el-button>
<el-divider direction="vertical" class="verticalLine" />
<el-button type="primary" text class="deleteTextBtn">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Breadcrumb from '@/components/Breadcrumb'
import addIcon from '@/assets/images/addIcon.png'
const router = useRouter()
const total = ref(16)
const queryParams = ref({
pageNum: 1,
pageSize: 10,
userName: undefined,
deptId: undefined,
qualification: undefined
})
const tableData = [
{
localityName: 'XXX属地',
departmentName: 'XXX部门',
officeName: 'XXX科室',
jobNumber: '3523213',
name: '赵丽娟',
curQualification: '-',
objectiveQualification: 'SH',
status: 0
},
{
localityName: 'XXX属地',
departmentName: 'XXX部门',
officeName: 'XXX科室',
jobNumber: '3523213',
name: '赵丽娟',
curQualification: '-',
objectiveQualification: 'SH',
status: 1
},
{
localityName: 'XXX属地',
departmentName: 'XXX部门',
officeName: 'XXX科室',
jobNumber: '3523213',
name: '赵丽娟',
curQualification: '-',
objectiveQualification: 'SH',
status: 2
},
{
localityName: 'XXX属地',
departmentName: 'XXX部门',
officeName: 'XXX科室',
jobNumber: '3523213',
name: '赵丽娟',
curQualification: '-',
objectiveQualification: 'SH',
status: 0
},
{
localityName: 'XXX属地',
departmentName: 'XXX部门',
officeName: 'XXX科室',
jobNumber: '3523213',
name: '赵丽娟',
curQualification: '-',
objectiveQualification: 'SH',
status: 0
},
{
localityName: 'XXX属地',
departmentName: 'XXX部门',
officeName: 'XXX科室',
jobNumber: '3523213',
name: '赵丽娟',
curQualification: '-',
objectiveQualification: 'SH',
status: 0
},
{
localityName: 'XXX属地',
departmentName: 'XXX部门',
officeName: 'XXX科室',
jobNumber: '3523213',
name: '赵丽娟',
curQualification: '-',
objectiveQualification: 'SH',
status: 0
},
{
localityName: 'XXX属地',
departmentName: 'XXX部门',
officeName: 'XXX科室',
jobNumber: '3523213',
name: '赵丽娟',
curQualification: '-',
objectiveQualification: 'SH',
status: 0
},
{
localityName: 'XXX属地',
departmentName: 'XXX部门',
officeName: 'XXX科室',
jobNumber: '3523213',
name: '赵丽娟',
curQualification: '-',
objectiveQualification: 'SH',
status: 0
},
{
localityName: 'XXX属地',
departmentName: 'XXX部门',
officeName: 'XXX科室',
jobNumber: '3523213',
name: '赵丽娟',
curQualification: '-',
objectiveQualification: 'SH',
status: 0
},
]
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
dateRange.value = []
proxy.resetForm("queryRef")
queryParams.value.deptId = undefined
proxy.$refs.deptTreeRef.setCurrentKey(null)
handleQuery()
}
const getList = () => {
}
const handleOpenAddForm = () => {
router.push('/ppeToolForm')
}
const handleView = () => {
router.push('/ppeToolForm')
}
const handleApproval = () => {
router.push('/ppeToolForm')
}
</script>
<style lang='scss'>
.app-main {
min-height: 100vh !important;
width: 100%;
position: relative;
overflow: hidden;
background-color: #F8F8F8;
}
.app-page-container {
width: 100%;
height: 100%;
overflow-y: auto;
padding-bottom: 0px;
}
.clearBoth {
clear: both;
}
.myRow {
margin-left: 0 !important;
margin-right: 0 !important;
}
.optionBtn {
padding-bottom: 12px;
}
.qualificationApplyBtn {
// width: 84px !important;
height: 32px;
border-radius: 4px 4px 4px 4px;
background: #4276d1;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
text-align: center;
color: #FFFFFF;
}
.qualificationApplyBtn:hover {
background: #4276d1;
}
.custom-icon {
margin-right: 10px;
}
.infoinfoText {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #DD9200;
}
.successText {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #00B32A;
}
.dangerText {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #E13434;
}
.replayTextBtn {
padding: 0 !important;
color: #0090ff !important;
font-weight: 400;
font-family: Microsoft YaHei;
font-size: 18px;
line-height: 50px;
}
.verticalLine {
border-left: 1px solid #0090ff !important;
}
.deleteTextBtn {
padding: 0 !important;
color: #E13434 !important;
font-weight: 400;
font-family: Microsoft YaHei;
font-size: 18px;
line-height: 50px;
}
.el-form--inline .el-form-item {
display: inline-flex;
margin-right: 26px;
vertical-align: middle;
}
.el-form-item__label {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #000000;
min-width: 34px;
}
.el-input__inner {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
text-align: left;
color: #000000;
}
.el-select__wrapper {
font-weight: 400;
font-size: 18px;
text-align: left;
color: #000000;
}
.el-date-editor .el-range-input {
font-family: Arial;
font-weight: 400;
font-size: 18px;
text-align: right;
color: #000000;
width: 46%;
}
.el-date-editor .el-range__icon svg {
width: 18px;
height: 16px;
}
.el-date-editor .el-range__icon {
font-size: 16px;
// margin-left: 12px;
margin-right: 12px;
}
.el-range-editor.el-input__wrapper {
padding: 0 0 0 7px;
}
.foladText {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
text-align: left;
color: #0090FF 100%;
padding: 10px 0 !important;
}
</style>

482
src/views/ppeTool/toolForm.vue Normal file
View File

@ -0,0 +1,482 @@
<template>
<div class="app-page-container">
<el-breadcrumb class="app-breadcrumb" separator=">">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
<span v-if="index == levelList.length - 1" class="link-redirect">{{
item.title }}</span>
<span v-else class="no-redirect">{{ item.title }}</span>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
<div class="rootContainer clearBoth">
<el-card>
<template #header>
<div class="card-header">
<span>新建</span>
</div>
</template>
<el-form ref="ruleFormRef" :model="ruleForm" label-position="top">
<div class="applyFormContainer">
<el-row class="myRow" :gutter="20">
<el-col :span="8">
<el-form-item label="工具名称">
<el-select v-model="ruleForm.deptId" placeholder="请选择" clearable>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="工具编号">
<el-input v-model="ruleForm.deptId" placeholder="请选择" clearable />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="部门">
<el-select v-model="ruleForm.deptId" placeholder="请选择" clearable>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="属地">
<el-select v-model="ruleForm.deptId" placeholder="请选择" clearable>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="ESC">
<el-input v-model="ruleForm.deptId" placeholder="请选择" clearable />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="到期日期" prop="deptId">
<el-date-picker v-model="ruleForm.startTime" type="date" placeholder="请选择"
style="width: 100%;" />
</el-form-item>
</el-col>
</el-row>
<el-row class="myRow" :gutter="20">
<el-col :span="24">
<el-form-item label="标定信息" prop="deptId">
<el-upload class="upload-demo" drag action="#" :http-request="requestDocUpload"
:file-list="docUploadList" :before-upload="beforeDocUpload"
:on-remove="removeDocUpload">
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
将文件拖曳至此区域，或 <em>点击上传</em>
</div>
<div class="el-upload__text">
支持扩展名：.xlsx
</div>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</el-card>
</div>
<div class="submitTool">
<el-button class="cancelApplyBtn" @click="handleCancel">取消</el-button>
<el-button class="submitApplyBtn" @click="handleSubmit">提交</el-button>
</div>
</div>
</template>
<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { UploadFilled } from '@element-plus/icons-vue'
const router = useRouter()
const levelList = ref([
{ title: '高压PPE/工具管理', path: '/ppeTool' },
{ title: '新建', path: '/ppeToolForm' },
])
const { proxy } = getCurrentInstance()
const data = reactive({
ruleForm: {},
rules: {
targetQualification: [{ required: true, message: "目标资质不能为空", trigger: "change" }],
employeeNumber: [{ required: true, message: "员工工号不能为空", trigger: "blur" }],
employeeChineseName: [{ required: true, message: "员工姓名(中文)不能为空", trigger: "blur" }],
employeeEnglishName: [{ required: true, message: "员工姓名(英文)", trigger: "blur" }],
departmentName: [{ required: true, message: "部门不能为空", trigger: "change" }],
officeName: [{ required: true, message: "科室不能为空", trigger: "change" }],
localityName: [{ required: true, message: "属地不能为空", trigger: "change" }],
localityManager: [{ required: true, message: "属地ESC不能为空", trigger: "blur" }],
},
})
const tableData = [
{
name: '提交申请',
approvalResult: '-',
approvalTime: '2016-05-03'
},
{
name: 'ESC审批',
approvalResult: '同意',
approvalTime: '2016-05-08'
},
]
// 判断是否为图片文件
const isImageFile = (suffix) => {
return ['jpeg', 'jpg', 'png'].includes(suffix?.toLowerCase())
}
const fileList = [
{
name: 'XXXXX文件',
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
suffix: 'png'
},
{
name: 'XXXXX文件',
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
suffix: 'pdf'
},
{
name: 'XXXXX文件',
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
suffix: 'ppt'
},
{
name: 'XXXXX文件',
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
suffix: 'mp3'
},
{
name: 'XXXXX文件',
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
suffix: 'mov'
},
{
name: 'XXXXX文件XXXXX文件XXXXX文件',
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
suffix: 'json'
},
{
name: 'XXXXX文件',
certificate: null,
suffix: 'xls'
},
{
name: 'XXXXX文件',
certificate: null,
suffix: 'txt'
},
{
name: 'XXXXX文件',
certificate: null,
suffix: 'doc'
},
{
name: 'XXXXX文件',
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
suffix: 'zip'
},
]
const { ruleForm, rules } = toRefs(data)
const handleCancel = () => {
proxy.resetForm("ruleFormRef")
router.push({
path: '/safetyReview/examinerApproval'
})
}
const handleSubmit = () => {
proxy.$refs["ruleFormRef"].validate(valid => {
if (valid) {
router.push({
path: '/safetyReview/examinerApproval'
})
// if (form.value.roleId != undefined) {
// form.value.menuIds = getMenuAllCheckedKeys()
// updateRole(form.value).then(response => {
// proxy.$modal.msgSuccess("修改成功")
// open.value = false
// getList()
// })
// } else {
// form.value.menuIds = getMenuAllCheckedKeys()
// addRole(form.value).then(response => {
// proxy.$modal.msgSuccess("新增成功")
// open.value = false
// getList()
// })
// }
}
})
}
</script>
<style lang='scss'>
.app-main {
height: 100vh;
width: 100%;
position: relative;
overflow: hidden;
background-color: #F8F8F8;
}
.app-breadcrumb.el-breadcrumb {
width: 1200px;
margin: 0 auto;
height: 44px;
line-height: 44px;
font-size: 18px;
background: #f8f8f8;
.el-breadcrumb__item {
.el-breadcrumb__separator {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #000000 !important;
margin: 0 9px;
}
}
.no-redirect {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #000000;
cursor: text;
}
.link-redirect {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #0090FF;
cursor: text;
text-decoration: underline;
text-underline-offset: 4px;
}
}
.clearBoth {
clear: both;
}
.rootContainer {
width: 1200px;
margin: 0 auto;
height: calc(100vh - 216px);
overflow-y: auto;
overflow-x: hidden;
background: #ffffff;
}
.el-card {
border: none;
}
.el-card__header {
min-height: 50px;
font-family: Microsoft YaHei;
font-weight: 700;
font-size: 20px;
text-align: left;
color: #000000;
border-bottom: 1px solid #DCDCDC;
box-sizing: border-box;
padding: 10px 20px 17px 20px;
}
.el-card__body {
padding: 20px 20px 0 20px !important;
}
.el-card.is-always-shadow {
box-shadow: none;
}
.headerTitle {
font-family: Microsoft YaHei;
font-weight: 700;
font-size: 18px;
text-align: left;
color: #000000;
background: #e9e9e9;
padding: 6px 14px;
}
.successText {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #00B32A;
}
.dangerText {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #E13434;
}
.applyFormContainer {
padding-top: 20px;
overflow: hidden;
}
.submitTool {
width: 100%;
height: 76px;
position: absolute;
top: calc(100% - 76px);
background: #ffffff;
box-shadow: 1px 2px 10px 0 #93939333;
text-align: center;
line-height: 76px;
}
.cancelApplyBtn {
width: 100px;
height: 36px;
border-radius: 4px 4px 4px 4px;
background: #ea9f0e;
font-family: Microsoft YaHei;
font-weight: 700;
font-size: 16px;
text-align: center;
color: #FFFFFF;
}
.cancelApplyBtn:hover {
background: #ea9f0e;
color: #FFFFFF;
}
.submitApplyBtn {
width: 100px;
height: 36px;
border-radius: 4px 4px 4px 4px;
background: #4276d1;
font-family: Microsoft YaHei;
font-weight: 700;
font-size: 16px;
text-align: center;
color: #FFFFFF;
}
.submitApplyBtn:hover {
background: #4276d1;
color: #FFFFFF;
}
.myRow {
margin-left: 0 !important;
margin-right: 0 !important;
}
.el-form-item--default {
margin-bottom: 20px !important;
}
.el-form-item--label-left .el-form-item__label {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
text-align: left;
color: #787878;
padding: 0 10px 0 0;
}
.myFormItemLable {
padding-top: 22px;
}
.myFormItemLable .el-form-item__label {
font-family: Microsoft YaHei !important;
font-weight: 400 !important;
font-size: 16px !important;
text-align: left !important;
color: #787878 !important;
padding: 0 10px 0 60px;
}
.myFormItemLable .el-form-item__content {
font-family: Arial !important;
font-weight: 400 !important;
font-size: 18px !important;
text-align: left !important;
color: #000000 !important;
padding-left: 60px;
}
.el-form-item--label-left .el-form-item__content {
font-family: Arial;
font-weight: 400;
font-size: 18px;
text-align: left;
color: #000000;
}
.el-form-item--label-top .el-form-item__label {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
text-align: left;
color: #666666;
}
.el-form-item--label-top .el-form-item__content {
font-family: Arial;
font-weight: 400;
font-size: 18px;
text-align: left;
color: #000000;
}
.el-form-item--label-top .el-textarea__inner {
font-family: Arial;
font-weight: 400;
font-size: 18px;
color: #000000;
}
.el-input__inner {
font-weight: 400;
font-size: 18px;
text-align: left;
color: #000000;
}
.el-select__wrapper {
font-weight: 400;
font-size: 18px;
text-align: left;
color: #000000;
}
.el-form-item__error {
font-size: 16px;
}
.el-radio__inner {
width: 16px !important;
height: 16px !important;
}
.el-radio__label {
font-weight: 400;
font-size: 18px;
text-align: left;
color: #000000;
}
.el-upload-dragger {
width: 100%;
height: 260px;
border-radius: 6px 6px 6px 6px;
background: #0090ff05;
padding: 30px 450px !important;
}
</style>