Files
foton-laws-system-front/src/pages/processCenter/pages/newProcess/index.vue
T
2021-11-21 10:32:01 +08:00

706 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!--新建流程页面-->
<template>
<div id="NewProcess">
<div v-if="bzfggllc">
<el-divider content-position="left"><h2>标准法规管理流程</h2></el-divider>
<div class="process-box">
<el-col :span="size ? 6 : 8" v-btn-permission="'9adff72ab464793564c5d1de20b45620'">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('1')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">标准入库流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
<!-- <div class="card-bottom">-->
<!-- 流程简介: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。-->
<!-- </div>-->
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="'f4eeb9ed48eac5686a456a5582508d9c'">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('2')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">标准调研流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="'fc25b770ad3752cdec52f3bd7b35a6a1'">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('3')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">标准征求意见流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="'2d0f99ba961c551b1d8cad8ad5223731'">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('6')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">标准清单发布/更新流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="'90c7bae6308595f053c6f6f90167e493'">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('7')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">标准合规评估流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="'a151f5e2ee44f8df81e201b8696fca31'">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('8')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">未符合项整改流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="'2564bd61852551b99e0fe3d49a89b288'">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('9')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">标准解读流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="'7751d25f72d0a6515e4110ae41837db8'">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('10')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">项目合规评估流程-项目</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="'14f54ef4475d9210b1ee7872ab69eca8'">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('11')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">项目清单确认流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="''">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('laws1')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">政策入库流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="'2e3f4c0aaf77629755533255f1335801'">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('17')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">政策课题入会流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="'d415c764036a02559976b41b9dfe2cf1'">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('18')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">政策课题参会流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('16')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">外部署名推荐审批流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('15')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">加入标准化协会信息提报流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('14')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">参与外部标准制修订信息提报流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('20')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">外部标准化协会入会流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('21')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">外部标准化协会参会流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('12')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">政策征求意见流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
<!-- <div class="card-bottom">-->
<!-- 流程简介: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。-->
<!-- </div>-->
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('13')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">重点认证标准/政策合规性项目审查流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
<!-- <div class="card-bottom">-->
<!-- 流程简介: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。-->
<!-- </div>-->
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('23')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">企标复审流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('24')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">企标废止流程</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="size ? 6 : 8" v-btn-permission="">
<el-card shadow="hover">
<div class="card-box" @click="handleCreateProcess('25')">
<div class="card-top">
<div class="card-top-left">
<img :src="getImg(Math.floor(Math.random() * 6))">
</div>
<div class="card-top-right">
<div class="card-top-right-text">企标制修订计划管控</div>
<div class="card-top-right-line"></div>
</div>
</div>
</div>
</el-card>
</el-col>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'NewProcess',
data () {
return {
type: '',
size: true
}
},
methods: {
getImg (num) {
var url = ''
if (num == 0) {
url = require('@/assets/images/shangqi/img/process1.png')
} else if (num == 1) {
url = require('@/assets/images/shangqi/img/process2.png')
} else if (num == 2) {
url = require('@/assets/images/shangqi/img/process3.png')
} else if (num == 3) {
url = require('@/assets/images/shangqi/img/process4.png')
} else if (num == 4) {
url = require('@/assets/images/shangqi/img/process5.png')
} else if (num == 5) {
url = require('@/assets/images/shangqi/img/process6.png')
}
return url
},
// 新建流程
handleCreateProcess (prcType) {
this.$store.commit('setDetailMap', this.$route.path)
this.$store.commit('setHandleInfo')
switch (prcType) {
case '2':
// 标准调研流程
this.$router.push({
name: 'bzdyStep1'
})
break
case 'laws1':
// 政策入库流程
this.$router.push({
name: 'zcrkStep1'
})
break
case '1':
// 标准入库流程
this.$router.push({
name: 'bzrkStep1'
})
break
case '3':
// 标准征求意见流程
this.$router.push({
name:'bzzqyjStep1'
})
break
case '4':
this.$router.push({
name: 'bzfyStep1'
})
// 标准需求(翻译)申请流程
break
case '5':
this.$router.push({
name: 'bzffStep1'
})
// 标准发放申请流程
break
case '6':
//标准清单发布流程
this.$router.push({
name:'bzqdfbStep1'
})
break
case '7':
//项目评估流程 - 标准
this.$router.push({
name: 'xmpgStep1'
})
break
case '8':
//未符合项整改流程
this.$router.push({
name:'wfhxzgStep1'
})
break
case '9':
// 标准解读流程
this.$router.push({
name:'bzjdStep1'
})
break
case '10':
//项目评估流程- 项目
this.$router.push({
name: 'xmpg2Step1'
})
break
case '11':
// 项目清单确认流程
this.$router.push({
name:'xmqdqrStep1'
})
break
case '12':
// 政策征求意见流程
this.$router.push({
name: 'zczqyjStep1'
})
break
case '13':
// 重点认证标准/政策合规性项目审查流程
this.$router.push({
name: 'zdrzbzORzchgxxmscStep1'
})
break
case '17':
//政策课题入会流程
this.$router.push({
name: 'zcrhStep1'
})
break
case '18':
//政策课题参会流程
this.$router.push({
name: 'zcchStep1'
})
break
case '19':
//政策课题会后流程
this.$router.push({
name: 'zchhStep1'
})
break
case '16':
//外部署名推荐审批流程
this.$router.push({
name: 'wbsmStep1'
})
break
case '15':
//加入标准化协会信息提报流程
this.$router.push({
name: 'jrbzhxhStep1'
})
break
case '14':
//参与外部标准制修订信息提报流程
this.$router.push({
name: 'cywbbzzxdStep1'
})
break
// 外部标准化协会入会流程
case '20':
this.$router.push({
name: 'bzrhStep1'
})
break
// 外部标准化协会参会流程
case '21':
this.$router.push({
name: 'bzchStep1'
})
break
// 企标复审流程
case '23':
this.$router.push({
name: 'qbfsStep1'
})
break
// 企标废止流程
case '24':
this.$router.push({
name: 'qbfzStep1'
})
break
// 企标制修订计划管控
case '25':
this.$router.push({
name: 'qbzxdjhgkStep1'
})
break
}
},
checkPermission(permissionIdArray) {
return permissionIdArray.some(id => {
return this.$hasPermission(id)
})
}
},
watch: {
$route (newVal) {
this.type = newVal.params.type
}
},
computed: {
/**
* 标准法规管理流程
* @returns {boolean}
*/
bzfggllc() {
const idArray = ['2564bd61852551b99e0fe3d49a89b288', '2d0f99ba961c551b1d8cad8ad5223731', '7751d25f72d0a6515e4110ae41837db8', '90c7bae6308595f053c6f6f90167e493', '9adff72ab464793564c5d1de20b45620', 'a151f5e2ee44f8df81e201b8696fca31', 'f4eeb9ed48eac5686a456a5582508d9c', 'fc25b770ad3752cdec52f3bd7b35a6a1']
return this.checkPermission(idArray)
},
/**
* 政策管理流程
* @returns {boolean}
*/
zcgllc() {
const idArray = ['GFG2G4NGWBXQ5GMS33KU', '3PJAEEHWU6NYDB6MNZ6V']
return this.checkPermission(idArray)
},
/**
* 企标管理流程
* @returns {boolean}
*/
qbgllc() {
const idArray = ['L9AVMSGJPTD8T5SEGK6W', 'JCZTCC97UPRNGFJFC5HJ', 'ZZUF89DR92R8WEZYSHN5', '2PNXPCPW5CAWJHDYFHRY', 'K4KS87V6KFSA35VZFPC3']
return this.checkPermission(idArray)
},
/**
* 标准采购翻译申请流程
* @returns {boolean}
*/
bzcgfysqlc() {
const idArray = ['C2C8BENY5MRSZGP7W5RK', 'WR9C2TYTHD8TTRVJ5LH4']
return this.checkPermission(idArray)
},
/**
* 工作组会议管理流程
* @returns {boolean}
*/
gzzhygllc() {
const idArray = ['7FM6KNU2DCDY7G46RD2E']
return this.checkPermission(idArray)
},
/**
* 标准法规清单管理流程
* @returns {boolean}
*/
bzfgqdgllc() {
const idArray = ['4TR77UXU6RYHZPFHZND9']
return this.checkPermission(idArray)
}
},
mounted () {
let width = document.body.clientWidth
if (width > 1900) {
this.size = true
} else {
this.size = false
}
this.type = this.$route.params.type
}
}
</script>
<style lang="less" scoped>
#NewProcess{
width: 100%;
//height: 100%;
padding: 15px 15px 0;
background: #ffffff;
/deep/.el-card__body {
padding: 0;
}
.el-card {
margin: 25px;
border-radius: 10px;
}
.card-box {
cursor: pointer;
.card-top {
width: 100%;
background: #2d8cf0;
height: 100px;
display: flex;
justify-content: space-between;
.card-top-left {
img {
margin: 10px;
width: 80px;
height: 80px;
}
}
.card-top-right {
width: 250px;
.card-top-right-text {
margin: 40px 0 5px 0;
color: #e6e6e6;
font-size: 18px;
}
.card-top-right-line {
height: 3px;
width: 250px;
background: #e6e6e6;
}
}
}
.card-bottom {
width: calc(~'100% - 60px');
color: #c1c1c1;
margin: 10px 30px;
line-height: 20px;
font-size: 14px;
height: 100px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
}
.card-box:hover {
.card-top {
.card-top-right {
.card-top-right-text {
color: rgb(247, 186, 42);
}
.card-top-right-line {
background: rgb(247, 186, 42);
}
}
}
.card-bottom {
color: #2d8cf0;
}
}
.process-box{
margin-left: -5px;
margin-right: -5px;
padding-top: 20px;
padding-bottom: 20px;
.process-name{
width: 300px;
padding: 40px 0;
margin-bottom: 10px;
text-align: center;
border: 1px dashed #ddd;
border-radius: 5px;
background: #fdfdfd;
font-size: 18px;
font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial, sans-serif;
cursor: pointer;
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.process-name:hover {
transform:translateY(-5px);
border: 1px dashed #2d8cf0;
background: #c6e2ff;
color: #2d8cf0;
}
}
}
</style>