提交代码
This commit is contained in:
wangchengming
parent
9bd4988f07
commit
ca055e9792
|
|
@ -131,9 +131,21 @@ aside {
|
|||
|
||||
.app-container {
|
||||
// padding: 20px;
|
||||
height: calc(100vh - 139px);
|
||||
height: calc(100vh - 140px);
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
padding: 20px 20px 0 20px;
|
||||
}
|
||||
|
||||
|
||||
.my-container {
|
||||
height: calc(100vh - 140px);
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
overflow-y: auto;
|
||||
background: #F8F8F8;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.components-container {
|
||||
|
|
@ -187,4 +199,4 @@ aside {
|
|||
vertical-align: middle;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
// padding: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
margin-left: 20px;
|
||||
// margin-left: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -130,6 +130,11 @@ function addIframe() {
|
|||
}
|
||||
|
||||
// 全局table表格样式 开始
|
||||
.el-table {
|
||||
--el-table-border-color: transparent !important;
|
||||
--el-table-border: 1px solid #ebeef5 !important;
|
||||
}
|
||||
|
||||
.el-table .el-table__header-wrapper th,
|
||||
.el-table .el-table__fixed-header-wrapper th {
|
||||
word-break: break-word;
|
||||
|
|
@ -142,6 +147,7 @@ function addIframe() {
|
|||
font-size: 18px;
|
||||
text-align: left;
|
||||
color: #505050;
|
||||
// border-bottom: 1px solid ;
|
||||
}
|
||||
|
||||
.el-table .el-table__cell {
|
||||
|
|
@ -153,6 +159,4 @@ function addIframe() {
|
|||
color: #505050;
|
||||
}
|
||||
|
||||
// 全局table表格样式 结束
|
||||
|
||||
</style>
|
||||
// 全局table表格样式 结束</style>
|
||||
|
|
|
|||
|
|
@ -228,6 +228,20 @@ export const dynamicRoutes = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/safetyReview/examinerTasks/addTaskForm',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
permissions: ['safetyReview:examinerTasks:add'],
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: () => import('@/views/safetyReview/examinerTasks/addTaskForm'),
|
||||
name: 'addTaskForm',
|
||||
meta: { title: '审核员任务', activeMenu: '/safetyReview/examinerTasks' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/system/user-auth',
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
</el-form>
|
||||
|
||||
<div class="borderLine"></div>
|
||||
<el-table :data="tableData" height="calc(100% - 244px)" style="width: 100%">
|
||||
<el-table :data="tableData" height="calc(100% - 176px)" style="width: 100%">
|
||||
<el-table-column label="序号" width="60">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
|
|
@ -252,14 +252,6 @@ const handleApproval = () => {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
height: calc(100vh - 140px);
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
padding: 20px 20px 0 20px;
|
||||
}
|
||||
|
||||
.myRow {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
</el-form>
|
||||
|
||||
<div class="borderLine"></div>
|
||||
<el-table :data="tableData" height="calc(100% - 244px)" style="width: 100%">
|
||||
<el-table :data="tableData" height="calc(100% - 176px)" style="width: 100%">
|
||||
<el-table-column label="序号" width="60">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
|
|
@ -251,14 +251,6 @@ const handleApproval = () => {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
height: calc(100vh - 140px);
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
padding: 20px 20px 0 20px;
|
||||
}
|
||||
|
||||
.myRow {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="app-page-container">
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
||||
<div class="app-container clearBoth">
|
||||
<div class="my-container clearBoth">
|
||||
<div class="searchPanel">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true">
|
||||
<el-row class="myRow">
|
||||
|
|
@ -389,14 +389,6 @@ const initVehicleTrainBar = () => {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
height: calc(100vh - 140px);
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
overflow-y: auto;
|
||||
background: #F8F8F8;
|
||||
}
|
||||
|
||||
.searchPanel {
|
||||
background: #FFFFFF;
|
||||
padding: 20px 20px 0 20px;
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
</el-button>
|
||||
</div>
|
||||
<div class="borderLine"></div>
|
||||
<el-table :data="tableData" height="calc(100% - 244px)" style="width: 100%">
|
||||
<el-table :data="tableData" height="calc(100% - 220px)" style="width: 100%">
|
||||
<el-table-column label="序号" width="60">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
|
|
@ -256,14 +256,6 @@ const handleApproval = () => {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
height: calc(100vh - 140px);
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
padding: 20px 20px 0 20px;
|
||||
}
|
||||
|
||||
.myRow {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
</el-button>
|
||||
</div>
|
||||
<div class="borderLine"></div>
|
||||
<el-table :data="tableData" height="calc(100% - 244px)" style="width: 100%">
|
||||
<el-table :data="tableData" height="calc(100% - 226px)" style="width: 100%">
|
||||
<el-table-column label="序号" width="60">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
</el-button>
|
||||
</div>
|
||||
<div class="borderLine"></div>
|
||||
<el-table :data="tableData" height="calc(100% - 244px)" style="width: 100%">
|
||||
<el-table :data="tableData" height="calc(100% - 226px)" style="width: 100%">
|
||||
<el-table-column label="序号" width="60">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
|
|
|
|||
|
|
@ -56,13 +56,7 @@ onBeforeMount(() => {
|
|||
.clearBoth {
|
||||
clear: both;
|
||||
}
|
||||
.app-container {
|
||||
height: calc(100vh - 140px);
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
padding: 20px 20px 0 20px;
|
||||
}
|
||||
|
||||
// .page-container {
|
||||
// padding: 20px;
|
||||
// background: #ffffff;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="rootContainer">
|
||||
<div class="qualification-rootContainer">
|
||||
<div class="borderLine"></div>
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top">
|
||||
<div class="headerTitle">基本信息</div>
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="submitTool">
|
||||
<div class="qualification-submitTool">
|
||||
<el-button class="cancelApplyBtn" @click="handleCancel">取消</el-button>
|
||||
<el-button class="submitApplyBtn" @click="handleSubmit">提交</el-button>
|
||||
</div>
|
||||
|
|
@ -197,7 +197,7 @@ const handleSubmit = () => {
|
|||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.rootContainer {
|
||||
.qualification-rootContainer {
|
||||
width: 100%;
|
||||
height: calc(100vh - 320px);
|
||||
overflow-y: auto;
|
||||
|
|
@ -233,7 +233,7 @@ const handleSubmit = () => {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.submitTool {
|
||||
.qualification-submitTool {
|
||||
width: 100%;
|
||||
height: 76px;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="rootContainer">
|
||||
<div class="qualification-rootContainer">
|
||||
<div class="borderLine"></div>
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top">
|
||||
<div class="headerTitle">基本信息</div>
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="submitTool">
|
||||
<div class="qualification-submitTool">
|
||||
<el-button class="cancelApplyBtn" @click="handleCancel">取消</el-button>
|
||||
<el-button class="submitApplyBtn" @click="handleSubmit">提交</el-button>
|
||||
</div>
|
||||
|
|
@ -216,7 +216,7 @@ const handleSubmit = () => {
|
|||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.rootContainer {
|
||||
.qualification-rootContainer {
|
||||
width: 100%;
|
||||
height: calc(100vh - 320px);
|
||||
overflow-y: auto;
|
||||
|
|
@ -238,7 +238,7 @@ const handleSubmit = () => {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.submitTool {
|
||||
.qualification-submitTool {
|
||||
width: 100%;
|
||||
height: 76px;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="app-page-container">
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
||||
<div class="app-container clearBoth">
|
||||
<div class="my-container clearBoth">
|
||||
<el-splitter>
|
||||
<el-splitter-panel size="280">
|
||||
<div class="demo-panell">
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
</el-button>
|
||||
</el-button-group>
|
||||
|
||||
<div class="right-container">
|
||||
<div class="qualification-right-container">
|
||||
<qualification-train v-if="activeIndex == 0" />
|
||||
<vehicle-train v-if="activeIndex == 1" />
|
||||
<qualification-apply v-if="activeIndex == 2" />
|
||||
|
|
@ -254,7 +254,7 @@ const resizable = ref(false)
|
|||
border: 1px solid #1f1f1f;
|
||||
}
|
||||
|
||||
.right-container {
|
||||
.qualification-right-container {
|
||||
position: relative;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
</el-button>
|
||||
</div>
|
||||
<div class="borderLine"></div>
|
||||
<el-table :data="tableData" height="calc(100% - 244px)" style="width: 100%">
|
||||
<el-table :data="tableData" height="calc(100% - 220px)" style="width: 100%">
|
||||
<el-table-column label="序号" width="60">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
|
|
@ -256,14 +256,6 @@ const handleApproval = () => {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
height: calc(100vh - 140px);
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
padding: 20px 20px 0 20px;
|
||||
}
|
||||
|
||||
.myRow {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
</el-button>
|
||||
</div>
|
||||
<div class="borderLine"></div>
|
||||
<el-table :data="tableData" height="calc(100% - 244px)" style="width: 100%">
|
||||
<el-table :data="tableData" height="calc(100% - 170px)" style="width: 100%">
|
||||
<el-table-column label="序号" width="60">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
|
|
@ -228,14 +228,6 @@ const handleOpenApplyForm = () => {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
height: calc(100vh - 140px);
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
padding: 20px 20px 0 20px;
|
||||
}
|
||||
|
||||
.myRow {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
|
|
|
|||
507
src/views/safetyReview/dashboard/index.vue
Normal file
507
src/views/safetyReview/dashboard/index.vue
Normal file
|
|
@ -0,0 +1,507 @@
|
|||
<template>
|
||||
<div class="app-page-container">
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
||||
<div class="my-container clearBoth">
|
||||
<div class="searchPanel">
|
||||
<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="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-date-picker v-model="queryParams.year" type="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>
|
||||
<el-row class="chartsRow">
|
||||
<el-col :span="12" class="leftChart">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>当前角色饼图</span>
|
||||
</div>
|
||||
</template>
|
||||
<div id="qualificationPer" ref="qualificationPer"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" class="rightChart">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>培训需求</span>
|
||||
</div>
|
||||
</template>
|
||||
<div id="qualificationBar" ref="qualificationBar"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>车型培训情况</span>
|
||||
</div>
|
||||
</template>
|
||||
<div id="vehicleTrainBar" ref="vehicleTrainBar"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
import * as echarts from 'echarts'
|
||||
const router = useRouter()
|
||||
const qualificationPer = ref(null)
|
||||
const qualificationBar = ref(null)
|
||||
const vehicleTrainBar = ref(null)
|
||||
const queryParams = ref({
|
||||
userName: undefined,
|
||||
deptId: undefined,
|
||||
qualification: undefined
|
||||
})
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => { }
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
handleQuery()
|
||||
}
|
||||
onMounted(() => {
|
||||
initQualificationPer();
|
||||
initQualificationBar();
|
||||
initVehicleTrainBar();
|
||||
});
|
||||
const dataCake = [
|
||||
{ value: 2562, name: 'SH', percentage: '15.86%' },
|
||||
{ value: 6000, name: 'ES', percentage: '37.15%' },
|
||||
{ value: 2589, name: 'ESC', percentage: '16.03%' },
|
||||
{ value: 4000, name: 'CESC', percentage: '24.77%' },
|
||||
{ value: 1000, name: 'LLP', percentage: '6.19%' }
|
||||
]
|
||||
const initQualificationPer = () => {
|
||||
const _myChart = echarts.init(qualificationPer.value)
|
||||
_myChart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{b} : {c} 人 ({d}%)" //鼠标放上去 展示内容
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: '54%', //图例距离左的距离
|
||||
top: '18%',
|
||||
itemGap: 20,
|
||||
textStyle: { // 全局文本样式
|
||||
fontSize: 16, // 字号
|
||||
color: '#000000', // 颜色
|
||||
fontWeight: '400' // 加粗
|
||||
},
|
||||
formatter: function (name) {
|
||||
let target, percentage;
|
||||
for (let i = 0; i < dataCake.length; i++) {
|
||||
if (dataCake[i].name === name) {
|
||||
target = dataCake[i].value
|
||||
percentage = dataCake[i].percentage
|
||||
}
|
||||
}
|
||||
let arr = [name + ' ', " " + target + "人 ", " " + percentage]
|
||||
return arr.join(" ")
|
||||
},
|
||||
},
|
||||
color: ['#767C81', '#BABDC0', '#019167', '#32D3A4', '#FFA800'],//五个数据，五个颜色
|
||||
series: [
|
||||
{
|
||||
name: '-',
|
||||
type: 'pie',
|
||||
radius: ['60%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 10
|
||||
},
|
||||
center: ['30%', '45%'], //性设置图的上下左右的位置
|
||||
data: dataCake,
|
||||
// 设置值域的标签
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 24,
|
||||
fontWeight: '700',
|
||||
formatter: "{b}\n{c} 人" //鼠标放上去 展示内容
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
window.addEventListener("resize", () => {
|
||||
_myChart.resize()
|
||||
})
|
||||
}
|
||||
|
||||
const initQualificationBar = () => {
|
||||
const _myChart = echarts.init(qualificationBar.value)
|
||||
_myChart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' }
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '7%', // 右侧留更多空间显示长数值
|
||||
top: '0',
|
||||
bottom: '0',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: { // 注意：yAxis现在用于显示类别
|
||||
type: 'category',
|
||||
data: ['SH', 'ES', 'ESC', 'CESC', 'LLP'],
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
color: '#898989'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#F1F1F1'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 关闭刻度线显示
|
||||
alignWithLabel: true
|
||||
}
|
||||
},
|
||||
xAxis: { // 注意：xAxis现在用于显示数值
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#999',
|
||||
formatter: '{value}',
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#eee',
|
||||
},
|
||||
show: false
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: '数值',
|
||||
type: 'bar',
|
||||
barWidth: '16',
|
||||
data: [
|
||||
{ value: 97, name: 'SH' },
|
||||
{ value: 212, name: 'ES' },
|
||||
{ value: 427, name: 'ESC' },
|
||||
{ value: 935, name: 'CESC' },
|
||||
{ value: 486, name: 'LLP' }
|
||||
],
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
const colorList = ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'];
|
||||
return colorList[params.dataIndex];
|
||||
},
|
||||
borderRadius: [0, 4, 4, 0] // 右侧圆角（横向条形图的右侧）
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right', // 数值显示在条形右侧
|
||||
formatter: '{c}',
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
color: '#333'
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.3)'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 16,
|
||||
color: '#000'
|
||||
}
|
||||
}
|
||||
}]
|
||||
})
|
||||
window.addEventListener("resize", () => {
|
||||
_myChart.resize()
|
||||
})
|
||||
}
|
||||
|
||||
const initVehicleTrainBar = () => {
|
||||
const _myChart = echarts.init(vehicleTrainBar.value)
|
||||
_myChart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
top: '2%',
|
||||
bottom: '0%', // 为x轴标签留出更多空间
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
'BR 205 Plugin Hybrid',
|
||||
'BR 222 Plugin Hybrid',
|
||||
'V213 222 Plugin Hybrid',
|
||||
'V266 Plugin Hybrid',
|
||||
'BR 205 Plugin Hybrid',
|
||||
'V213 222 Plugin Hybrid',
|
||||
'V266 Plugin Hybrid',
|
||||
'V223 Plugin Hybrid',
|
||||
'V223 Plugin Hybrid',
|
||||
'V223 Plugin Hybrid'
|
||||
],
|
||||
axisLabel: {
|
||||
interval: 0, // 强制显示所有标签
|
||||
rotate: 45, // 标签旋转45度防止重叠
|
||||
fontSize: 16, // 缩小字体
|
||||
color: '#898989'
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#eee',
|
||||
},
|
||||
show: false
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
color: '#898989'
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#F1F1F1',
|
||||
},
|
||||
show: true
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: '数值',
|
||||
type: 'bar',
|
||||
barWidth: '16',
|
||||
data: [205, 222, 222, 266, 205, 222, 266, 223, 223, 223],
|
||||
itemStyle: {
|
||||
// color: '#767C81',
|
||||
|
||||
// 间隔变色函数
|
||||
color: function (params) {
|
||||
const colorList = [
|
||||
'#767C81', '#767C8150'
|
||||
];
|
||||
return colorList[params.dataIndex % colorList.length];
|
||||
},
|
||||
borderRadius: [0, 0, 0, 0] // 顶部圆角
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'top', // 数值显示在柱子上方
|
||||
formatter: '{c}',
|
||||
color: '#333'
|
||||
}
|
||||
}]
|
||||
})
|
||||
window.addEventListener("resize", () => {
|
||||
_myChart.resize()
|
||||
})
|
||||
}
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
.searchPanel {
|
||||
background: #FFFFFF;
|
||||
padding: 20px 20px 0 20px;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.myRow {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.chartsRow {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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-card {
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.el-card.is-always-shadow,
|
||||
.el-card.is-hover-shadow:focus,
|
||||
.el-card.is-hover-shadow:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
color: #000000;
|
||||
border-bottom: none;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 20px 10px 20px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
.leftChart {
|
||||
width: calc(50% - 10px);
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.rightChart {
|
||||
width: calc(50% - 10px);
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#qualificationPer {
|
||||
width: 100%;
|
||||
height: 293px;
|
||||
}
|
||||
|
||||
#qualificationBar {
|
||||
width: 100%;
|
||||
height: 293px;
|
||||
}
|
||||
|
||||
#vehicleTrainBar {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
</style>
|
||||
544
src/views/safetyReview/examinerApproval/approvalDetail.vue
Normal file
544
src/views/safetyReview/examinerApproval/approvalDetail.vue
Normal file
|
|
@ -0,0 +1,544 @@
|
|||
<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>申请标签：ESC</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" label-position="left">
|
||||
<!-- <div class="headerTitle">基本信息</div> -->
|
||||
<div class="applyFormContainer">
|
||||
<el-row class="myRow" :gutter="20">
|
||||
<el-col :span="20">
|
||||
<el-row class="myRow" :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="当前标签:" prop="targetQualification">
|
||||
ES
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="部门:" prop="departmentName">
|
||||
XXXX部门
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="科室:" prop="officeName">
|
||||
XXX科室
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="员工工号:" prop="employeeNumber">
|
||||
NO.43242342
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="员工姓名(中文):" prop="employeeChineseName">
|
||||
管思成
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="员工姓名(英文):" prop="employeeEnglishName">
|
||||
GuangSiCheng
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="属地:" prop="localityName">
|
||||
XXX属地
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="属地ESC:" prop="localityName">
|
||||
赵文杰
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="创建时间:" prop="employeeEnglishName">
|
||||
2024-12-24 14:23
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="审批状态" label-position="top" class="myFormItemLable">
|
||||
待审批
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" label-position="top">
|
||||
<div class="headerTitle">申请信息</div>
|
||||
<div class="applyFormContainer">
|
||||
<el-table :data="approvalData" style="width: 100%; margin-bottom: 20px;">
|
||||
<el-table-column prop="name" label="资质名称" />
|
||||
<el-table-column prop="certificate" label="资质证书" align="center">
|
||||
<template #default="scope">
|
||||
<el-image v-if="scope.row.certificate"
|
||||
style="width: 70px; height: 44px;line-height: 50px;"
|
||||
:src="scope.row.certificate" fit="fill" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="expired" label="是否过期">
|
||||
<template #default="scope">
|
||||
<el-text v-if="scope.row.expired == false && scope.row.certificate" type="success"
|
||||
class="successText">正常</el-text>
|
||||
<el-text v-if="scope.row.expired == true && scope.row.certificate" type="danger"
|
||||
class="dangerText">过期</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startTime" label="有效开始日期">
|
||||
<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="到期日期">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.expireTime && scope.row.certificate"> {{ scope.row.expireTime
|
||||
}}</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="headerTitle">审批记录</div>
|
||||
<div class="applyFormContainer">
|
||||
<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;">
|
||||
<el-table-column label="序号" width="160">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="节点名称" width="260" />
|
||||
<el-table-column prop="approvalResult" label="审批意见" min-width="100" align="left" />
|
||||
<el-table-column prop="approvalTime" label="审批时间" width="150">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.approvalTime && scope.row.approvalTime"> {{ scope.row.approvalTime
|
||||
}}</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" label-position="top">
|
||||
<div class="headerTitle">审批信息</div>
|
||||
<div class="applyFormContainer">
|
||||
<el-row class="myRow" :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="审批结果" prop="urgency">
|
||||
<el-radio-group v-model="ruleForm.urgency">
|
||||
<el-radio value="2">驳回</el-radio>
|
||||
<el-radio value="1">通过</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-form-item label="审批意见" prop="urgency">
|
||||
<el-input v-model="textarea" style="width: 100%" :rows="5" type="textarea"
|
||||
placeholder="请输入" />
|
||||
</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'
|
||||
|
||||
const router = useRouter()
|
||||
const levelList = ref([
|
||||
{ title: '标签管理', path: '/labelManage' },
|
||||
{ title: '标签审核员审批', path: '/labelManage/adminApproval' },
|
||||
{ title: '审批', path: '/labelManage/adminApproval/approvalDetail' }
|
||||
])
|
||||
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 approvalData = [
|
||||
{
|
||||
name: '电工证',
|
||||
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
expired: false,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: 'SH',
|
||||
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
expired: false,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: 'ES',
|
||||
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
expired: false,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: 'ESC',
|
||||
certificate: null,
|
||||
expired: null,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: 'CESC',
|
||||
certificate: null,
|
||||
expired: null,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: '急救证',
|
||||
certificate: null,
|
||||
expired: null,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: 'LLP',
|
||||
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
expired: true,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
]
|
||||
const { ruleForm, rules } = toRefs(data)
|
||||
const handleCancel = () => {
|
||||
proxy.resetForm("ruleFormRef")
|
||||
router.push({
|
||||
path: '/labelManage/adminApproval'
|
||||
})
|
||||
}
|
||||
const handleSubmit = () => {
|
||||
proxy.$refs["ruleFormRef"].validate(valid => {
|
||||
if (valid) {
|
||||
router.push({
|
||||
path: '/labelManage/adminApproval'
|
||||
})
|
||||
// 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: 0px 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;
|
||||
}
|
||||
</style>
|
||||
384
src/views/safetyReview/examinerApproval/index.vue
Normal file
384
src/views/safetyReview/examinerApproval/index.vue
Normal file
|
|
@ -0,0 +1,384 @@
|
|||
<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="userName">
|
||||
<el-date-picker v-model="rangeTime" type="daterange" range-separator="~" :clearable="false"
|
||||
style="width: 250px" start-placeholder="开始日期" end-placeholder="结束日期" />
|
||||
</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.userName" placeholder="请输入员工姓名" clearable
|
||||
style="width: 160px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-right: 10px;">
|
||||
<el-button v-if="!unfoldFlag" type="text" class="foladText" @click="handleFlod">展开
|
||||
<svg-icon icon-class="unfold" />
|
||||
</el-button>
|
||||
<el-button v-else type="text" class="foladText" @click="handleFlod">折叠
|
||||
<svg-icon icon-class="packUp" />
|
||||
</el-button>
|
||||
</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-row class="myRow" v-show="unfoldFlag">
|
||||
<el-col :span="20">
|
||||
<el-form-item label="部门" prop="qualification">
|
||||
<el-select v-model="queryParams.qualification" 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="qualification">
|
||||
<el-select v-model="queryParams.qualification" 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-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<div class="borderLine"></div>
|
||||
<el-table :data="tableData" height="calc(100% - 126px)" 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="属地" />
|
||||
<el-table-column prop="departmentName" label="部门" />
|
||||
<el-table-column prop="officeName" label="科室" />
|
||||
<el-table-column prop="jobNumber" label="工号" />
|
||||
<el-table-column prop="name" label="员工姓名" />
|
||||
<el-table-column prop="curQualification" label="当前标签" />
|
||||
<el-table-column prop="objectiveQualification" label="申请标签" />
|
||||
<el-table-column prop="status" label="状态" width="120">
|
||||
<template #default="scope">
|
||||
<el-text v-if="scope.row.status == 0" type="info" class="infoinfoText">待审核</el-text>
|
||||
<el-text v-if="scope.row.status == 1" type="success" class="successText">通过</el-text>
|
||||
<el-text v-if="scope.row.status == 2" type="danger" class="dangerText">驳回</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" text class="replayTextBtn" v-if="scope.row.status != 0"
|
||||
@click="handleView">查看</el-button>
|
||||
<el-button type="primary" v-if="scope.row.status == 0" text class="replayTextBtn"
|
||||
@click="handleApproval">审批</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'
|
||||
const router = useRouter()
|
||||
const total = ref(16)
|
||||
const unfoldFlag = ref(false)
|
||||
const rangeTime = ref([])
|
||||
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 handleFlod = () => {
|
||||
unfoldFlag.value = !unfoldFlag.value
|
||||
}
|
||||
/** 搜索按钮操作 */
|
||||
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 handleView = () => {
|
||||
router.push('/labelManage/adminApproval/approvalDetail')
|
||||
}
|
||||
const handleApproval = () => {
|
||||
router.push('/labelManage/adminApproval/approvalDetail')
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.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>
|
||||
544
src/views/safetyReview/examinerEscTask/approvalDetail.vue
Normal file
544
src/views/safetyReview/examinerEscTask/approvalDetail.vue
Normal file
|
|
@ -0,0 +1,544 @@
|
|||
<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>申请标签：ESC</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" label-position="left">
|
||||
<!-- <div class="headerTitle">基本信息</div> -->
|
||||
<div class="applyFormContainer">
|
||||
<el-row class="myRow" :gutter="20">
|
||||
<el-col :span="20">
|
||||
<el-row class="myRow" :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="当前标签:" prop="targetQualification">
|
||||
ES
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="部门:" prop="departmentName">
|
||||
XXXX部门
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="科室:" prop="officeName">
|
||||
XXX科室
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="员工工号:" prop="employeeNumber">
|
||||
NO.43242342
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="员工姓名(中文):" prop="employeeChineseName">
|
||||
管思成
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="员工姓名(英文):" prop="employeeEnglishName">
|
||||
GuangSiCheng
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="属地:" prop="localityName">
|
||||
XXX属地
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="属地ESC:" prop="localityName">
|
||||
赵文杰
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="创建时间:" prop="employeeEnglishName">
|
||||
2024-12-24 14:23
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="审批状态" label-position="top" class="myFormItemLable">
|
||||
待审批
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" label-position="top">
|
||||
<div class="headerTitle">申请信息</div>
|
||||
<div class="applyFormContainer">
|
||||
<el-table :data="approvalData" style="width: 100%; margin-bottom: 20px;">
|
||||
<el-table-column prop="name" label="资质名称" />
|
||||
<el-table-column prop="certificate" label="资质证书" align="center">
|
||||
<template #default="scope">
|
||||
<el-image v-if="scope.row.certificate"
|
||||
style="width: 70px; height: 44px;line-height: 50px;"
|
||||
:src="scope.row.certificate" fit="fill" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="expired" label="是否过期">
|
||||
<template #default="scope">
|
||||
<el-text v-if="scope.row.expired == false && scope.row.certificate" type="success"
|
||||
class="successText">正常</el-text>
|
||||
<el-text v-if="scope.row.expired == true && scope.row.certificate" type="danger"
|
||||
class="dangerText">过期</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startTime" label="有效开始日期">
|
||||
<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="到期日期">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.expireTime && scope.row.certificate"> {{ scope.row.expireTime
|
||||
}}</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="headerTitle">审批记录</div>
|
||||
<div class="applyFormContainer">
|
||||
<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;">
|
||||
<el-table-column label="序号" width="160">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="节点名称" width="260" />
|
||||
<el-table-column prop="approvalResult" label="审批意见" min-width="100" align="left" />
|
||||
<el-table-column prop="approvalTime" label="审批时间" width="150">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.approvalTime && scope.row.approvalTime"> {{ scope.row.approvalTime
|
||||
}}</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" label-position="top">
|
||||
<div class="headerTitle">审批信息</div>
|
||||
<div class="applyFormContainer">
|
||||
<el-row class="myRow" :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="审批结果" prop="urgency">
|
||||
<el-radio-group v-model="ruleForm.urgency">
|
||||
<el-radio value="2">驳回</el-radio>
|
||||
<el-radio value="1">通过</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-form-item label="审批意见" prop="urgency">
|
||||
<el-input v-model="textarea" style="width: 100%" :rows="5" type="textarea"
|
||||
placeholder="请输入" />
|
||||
</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'
|
||||
|
||||
const router = useRouter()
|
||||
const levelList = ref([
|
||||
{ title: '标签管理', path: '/labelManage' },
|
||||
{ title: '标签审核员审批', path: '/labelManage/adminApproval' },
|
||||
{ title: '审批', path: '/labelManage/adminApproval/approvalDetail' }
|
||||
])
|
||||
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 approvalData = [
|
||||
{
|
||||
name: '电工证',
|
||||
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
expired: false,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: 'SH',
|
||||
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
expired: false,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: 'ES',
|
||||
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
expired: false,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: 'ESC',
|
||||
certificate: null,
|
||||
expired: null,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: 'CESC',
|
||||
certificate: null,
|
||||
expired: null,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: '急救证',
|
||||
certificate: null,
|
||||
expired: null,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: 'LLP',
|
||||
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
expired: true,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
]
|
||||
const { ruleForm, rules } = toRefs(data)
|
||||
const handleCancel = () => {
|
||||
proxy.resetForm("ruleFormRef")
|
||||
router.push({
|
||||
path: '/labelManage/adminApproval'
|
||||
})
|
||||
}
|
||||
const handleSubmit = () => {
|
||||
proxy.$refs["ruleFormRef"].validate(valid => {
|
||||
if (valid) {
|
||||
router.push({
|
||||
path: '/labelManage/adminApproval'
|
||||
})
|
||||
// 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: 0px 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;
|
||||
}
|
||||
</style>
|
||||
384
src/views/safetyReview/examinerEscTask/index.vue
Normal file
384
src/views/safetyReview/examinerEscTask/index.vue
Normal file
|
|
@ -0,0 +1,384 @@
|
|||
<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="userName">
|
||||
<el-date-picker v-model="rangeTime" type="daterange" range-separator="~" :clearable="false"
|
||||
style="width: 250px" start-placeholder="开始日期" end-placeholder="结束日期" />
|
||||
</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.userName" placeholder="请输入员工姓名" clearable
|
||||
style="width: 160px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-right: 10px;">
|
||||
<el-button v-if="!unfoldFlag" type="text" class="foladText" @click="handleFlod">展开
|
||||
<svg-icon icon-class="unfold" />
|
||||
</el-button>
|
||||
<el-button v-else type="text" class="foladText" @click="handleFlod">折叠
|
||||
<svg-icon icon-class="packUp" />
|
||||
</el-button>
|
||||
</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-row class="myRow" v-show="unfoldFlag">
|
||||
<el-col :span="20">
|
||||
<el-form-item label="部门" prop="qualification">
|
||||
<el-select v-model="queryParams.qualification" 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="qualification">
|
||||
<el-select v-model="queryParams.qualification" 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-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<div class="borderLine"></div>
|
||||
<el-table :data="tableData" height="calc(100% - 126px)" 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="属地" />
|
||||
<el-table-column prop="departmentName" label="部门" />
|
||||
<el-table-column prop="officeName" label="科室" />
|
||||
<el-table-column prop="jobNumber" label="工号" />
|
||||
<el-table-column prop="name" label="员工姓名" />
|
||||
<el-table-column prop="curQualification" label="当前标签" />
|
||||
<el-table-column prop="objectiveQualification" label="申请标签" />
|
||||
<el-table-column prop="status" label="状态" width="120">
|
||||
<template #default="scope">
|
||||
<el-text v-if="scope.row.status == 0" type="info" class="infoinfoText">待审核</el-text>
|
||||
<el-text v-if="scope.row.status == 1" type="success" class="successText">通过</el-text>
|
||||
<el-text v-if="scope.row.status == 2" type="danger" class="dangerText">驳回</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" text class="replayTextBtn" v-if="scope.row.status != 0"
|
||||
@click="handleView">查看</el-button>
|
||||
<el-button type="primary" v-if="scope.row.status == 0" text class="replayTextBtn"
|
||||
@click="handleApproval">审批</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'
|
||||
const router = useRouter()
|
||||
const total = ref(16)
|
||||
const unfoldFlag = ref(false)
|
||||
const rangeTime = ref([])
|
||||
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 handleFlod = () => {
|
||||
unfoldFlag.value = !unfoldFlag.value
|
||||
}
|
||||
/** 搜索按钮操作 */
|
||||
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 handleView = () => {
|
||||
router.push('/labelManage/adminApproval/approvalDetail')
|
||||
}
|
||||
const handleApproval = () => {
|
||||
router.push('/labelManage/adminApproval/approvalDetail')
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.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>
|
||||
483
src/views/safetyReview/examinerTasks/addTaskForm.vue
Normal file
483
src/views/safetyReview/examinerTasks/addTaskForm.vue
Normal file
|
|
@ -0,0 +1,483 @@
|
|||
<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="left">
|
||||
<div class="headerTitle">基本信息</div>
|
||||
<div class="applyFormContainer">
|
||||
<el-row class="myRow" :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="年度" prop="userName">
|
||||
<el-date-picker v-model="queryParams.year" type="year" placeholder="请选择" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="部门" prop="deptId">
|
||||
<el-select v-model="queryParams.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="6">
|
||||
<el-form-item label="属地" prop="deptId">
|
||||
<el-select v-model="queryParams.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="6">
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<div class="headerTitle">问题追踪</div>
|
||||
<div class="applyFormContainer">
|
||||
<el-table :data="approvalData" style="width: 100%; margin-bottom: 20px;">
|
||||
<el-table-column prop="name" label="资质名称" />
|
||||
<el-table-column prop="certificate" label="资质证书" align="center">
|
||||
<template #default="scope">
|
||||
<el-image v-if="scope.row.certificate"
|
||||
style="width: 70px; height: 44px;line-height: 50px;" :src="scope.row.certificate"
|
||||
fit="fill" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="expired" label="是否过期">
|
||||
<template #default="scope">
|
||||
<el-text v-if="scope.row.expired == false && scope.row.certificate" type="success"
|
||||
class="successText">正常</el-text>
|
||||
<el-text v-if="scope.row.expired == true && scope.row.certificate" type="danger"
|
||||
class="dangerText">过期</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startTime" label="有效开始日期">
|
||||
<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="到期日期">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.expireTime && scope.row.certificate"> {{ scope.row.expireTime
|
||||
}}</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
</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'
|
||||
|
||||
const router = useRouter()
|
||||
const levelList = ref([
|
||||
{ title: '高压安全审查', path: '/safetyReview' },
|
||||
{ title: '审核员任务', path: '/safetyReview/examinerTasks' },
|
||||
{ title: '新增', path: '/safetyReview/examinerTasks/addTaskForm' }
|
||||
])
|
||||
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 approvalData = [
|
||||
{
|
||||
name: '电工证',
|
||||
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
expired: false,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: 'SH',
|
||||
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
expired: false,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: 'ES',
|
||||
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
expired: false,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: 'ESC',
|
||||
certificate: null,
|
||||
expired: null,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: 'CESC',
|
||||
certificate: null,
|
||||
expired: null,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: '急救证',
|
||||
certificate: null,
|
||||
expired: null,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
{
|
||||
name: 'LLP',
|
||||
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
expired: true,
|
||||
startTime: '2016-05-03',
|
||||
expireTime: '2019-05-03',
|
||||
},
|
||||
]
|
||||
const { ruleForm, rules } = toRefs(data)
|
||||
const handleCancel = () => {
|
||||
proxy.resetForm("ruleFormRef")
|
||||
router.push({
|
||||
path: '/safetyReview/examinerTasks'
|
||||
})
|
||||
}
|
||||
const handleSubmit = () => {
|
||||
proxy.$refs["ruleFormRef"].validate(valid => {
|
||||
if (valid) {
|
||||
router.push({
|
||||
path: '/safetyReview/examinerTasks'
|
||||
})
|
||||
// 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;
|
||||
}
|
||||
</style>
|
||||
371
src/views/safetyReview/examinerTasks/index.vue
Normal file
371
src/views/safetyReview/examinerTasks/index.vue
Normal file
|
|
@ -0,0 +1,371 @@
|
|||
<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-date-picker v-model="queryParams.year" type="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="exprotIcon" class="custom-icon" />
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="borderLine"></div>
|
||||
<el-table :data="tableData" height="calc(100% - 126px)" style="width: 100%">
|
||||
<el-table-column label="序号" width="60">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="year" label="年度" width="100" />
|
||||
<el-table-column prop="localityName" label="属地" min-width="130" />
|
||||
<el-table-column prop="departmentName" label="部门" min-width="150" />
|
||||
<el-table-column prop="jobNumber" label="工号" min-width="130" />
|
||||
<el-table-column prop="name" label="ESC" min-width="100" />
|
||||
<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">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.expireTime && scope.row.certificate"> {{ scope.row.expireTime }}</span>
|
||||
<span v-else>-</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'
|
||||
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('/safetyReview/examinerTasks/addTaskForm')
|
||||
}
|
||||
const handleView = () => {
|
||||
router.push('/labelManage/adminApproval/approvalDetail')
|
||||
}
|
||||
const handleApproval = () => {
|
||||
router.push('/labelManage/adminApproval/approvalDetail')
|
||||
}
|
||||
</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>
|
||||
Loading…
Reference in New Issue
Block a user