add 公用流程页面组件
This commit is contained in:
赵霄
+28
-23
@@ -1,26 +1,31 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="">
|
<html lang="">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||||
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
|
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
<style>
|
<style>
|
||||||
html {
|
html {
|
||||||
font-size: calc(100vw/7.5);
|
font-size: calc(100vw / 7.5);
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #F4F4F4;
|
background-color: #F4F4F4;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
<script src="<%= BASE_URL %>api_address_config.js"></script>
|
* {
|
||||||
</head>
|
box-sizing: border-box;
|
||||||
<body>
|
}
|
||||||
<noscript>
|
</style>
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<script src="<%= BASE_URL %>api_address_config.js"></script>
|
||||||
</noscript>
|
</head>
|
||||||
<div id="app"></div>
|
<body>
|
||||||
<!-- built files will be auto injected -->
|
<noscript>
|
||||||
</body>
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to
|
||||||
|
continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+2
-2
@@ -88,7 +88,7 @@ export default {
|
|||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
@import '~@assets/less/common.less';
|
@import '~@assets/less/common.less';
|
||||||
|
|
||||||
.van-nav-bar__content {
|
/deep/ .van-nav-bar__content {
|
||||||
height: 0.88rem;
|
height: 0.88rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -99,7 +99,7 @@ export default {
|
|||||||
|
|
||||||
/*头部导航固定*/
|
/*头部导航固定*/
|
||||||
.scroll-box {
|
.scroll-box {
|
||||||
height: calc(100vh - 0.92rem);
|
height: calc(100vh - 0.88rem);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -2,6 +2,10 @@
|
|||||||
@font-color: #1D2129;
|
@font-color: #1D2129;
|
||||||
@label-font-color: #767676;
|
@label-font-color: #767676;
|
||||||
|
|
||||||
|
.page-box {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
/* switch的样式 */
|
/* switch的样式 */
|
||||||
.top-wrapper {
|
.top-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -39,3 +43,32 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* switch的样式--end */
|
/* switch的样式--end */
|
||||||
|
|
||||||
|
/*底部按钮的公共样式*/
|
||||||
|
.operation-common-btn {
|
||||||
|
width: 2.19rem;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operation-common-btn:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*底部按钮的公共样式 end*/
|
||||||
|
|
||||||
|
/*按钮样式调整*/
|
||||||
|
.van-button--normal {
|
||||||
|
font-size: 0.32rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-button--primary {
|
||||||
|
background-color: @primary-color;
|
||||||
|
border-color: @primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*浅背景色按钮样式*/
|
||||||
|
.light-color-button {
|
||||||
|
background-color: #FFE3DC;
|
||||||
|
color: @primary-color;
|
||||||
|
border-color: @primary-color;
|
||||||
|
}
|
||||||
@@ -16,5 +16,11 @@ module.exports = {
|
|||||||
expirationDate: '截止日期',
|
expirationDate: '截止日期',
|
||||||
processExplain: '流程说明',
|
processExplain: '流程说明',
|
||||||
pleaseSelect: '请选择',
|
pleaseSelect: '请选择',
|
||||||
pleaseEnter: '请输入'
|
pleaseEnter: '请输入',
|
||||||
|
// toPc: '请前往PC端进行操作',
|
||||||
|
basicInfo: '基础信息',
|
||||||
|
personalInfo: '人员信息',
|
||||||
|
turnTo: '转办',
|
||||||
|
agree: '同意',
|
||||||
|
reject: '驳回'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,97 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="header-switch">
|
||||||
|
<!--基础信息-->
|
||||||
|
<div class="header-switch-item header-switch-left"
|
||||||
|
:class="{'header-switch-active': activeTab === 'basic'}"
|
||||||
|
@click="handleActiveTab('basic')">
|
||||||
|
{{ $t('basicInfo') }}
|
||||||
|
</div>
|
||||||
|
<!--人员信息-->
|
||||||
|
<div class="header-switch-item header-switch-right"
|
||||||
|
:class="{'header-switch-active': activeTab === 'person'}"
|
||||||
|
@click="handleActiveTab('person')">
|
||||||
|
{{ $t('personalInfo') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--流程信息部分-->
|
||||||
|
<div class="process-container" v-show="activeTab === 'basic'">
|
||||||
|
<slot name="process"></slot>
|
||||||
|
</div>
|
||||||
|
<!--人员信息，可以不用单独封组件了，放在这里就行-->
|
||||||
|
<div class="process-container" v-show="activeTab === 'person'">人员信息</div>
|
||||||
|
|
||||||
|
<!--底部操作按钮-->
|
||||||
|
<div class="operate-box">
|
||||||
|
<slot name="operation"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ProcessCommonLayout',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
activeTab: 'basic'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 切换标签页
|
||||||
|
* @param key
|
||||||
|
*/
|
||||||
|
handleActiveTab (key) {
|
||||||
|
this.activeTab = key
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
@import '~@assets/less/common.less';
|
||||||
|
|
||||||
|
.header-switch {
|
||||||
|
height: 1.11rem;
|
||||||
|
background: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-switch-item {
|
||||||
|
width: 2.09rem;
|
||||||
|
height: 0.68rem;
|
||||||
|
font-size: 0.28rem;
|
||||||
|
line-height: 0.68rem;
|
||||||
|
text-align: center;
|
||||||
|
color: @font-color;
|
||||||
|
border: 1px solid @primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-switch-left {
|
||||||
|
border-radius: 0.34rem 0 0 0.34rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-switch-right {
|
||||||
|
border-radius: 0 0.34rem 0.34rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-switch-active {
|
||||||
|
background-color: @primary-color;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-container {
|
||||||
|
height: calc(100% - 1.11rem - 1.28rem);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operate-box {
|
||||||
|
height: 1.28rem;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+10
-1
@@ -27,7 +27,16 @@ const routes = [
|
|||||||
hasBack: false
|
hasBack: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 标准法规入库/变更流程
|
||||||
|
{
|
||||||
|
path: '/standardEntryOrChangeProcess',
|
||||||
|
name: 'StandardEntryOrChangeProcess',
|
||||||
|
meta: {
|
||||||
|
hasNavBar: true,
|
||||||
|
hasBack: true
|
||||||
|
},
|
||||||
|
component: () => import('@/views/standardEntryOrChangeProcess/StandardEntryOrChangeProcess')
|
||||||
|
},
|
||||||
{ // 流程中节点不支持的页面
|
{ // 流程中节点不支持的页面
|
||||||
path: '/noMobile',
|
path: '/noMobile',
|
||||||
name: 'NoMobile',
|
name: 'NoMobile',
|
||||||
|
|||||||
@@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<process-common-layout class="page-box">
|
||||||
|
<template v-slot:process>
|
||||||
|
<div></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:operation>
|
||||||
|
<van-button icon="revoke" class="operation-common-btn">{{ $t('turnTo') }}</van-button>
|
||||||
|
<van-button icon="revoke" class="operation-common-btn" type="primary">{{ $t('agree') }}</van-button>
|
||||||
|
<van-button icon="revoke" class="operation-common-btn light-color-button">{{ $t('reject') }}</van-button>
|
||||||
|
</template>
|
||||||
|
</process-common-layout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ProcessCommonLayout from '../../components/ProcessCommonLayout'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'StandardEntryOrChangeProcess',
|
||||||
|
components: { ProcessCommonLayout }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
+1
-1
@@ -9,6 +9,6 @@ module.exports = {
|
|||||||
'nav-bar-icon-color': white,
|
'nav-bar-icon-color': white,
|
||||||
'nav-bar-text-color': white,
|
'nav-bar-text-color': white,
|
||||||
'nav-bar-title-text-color': white,
|
'nav-bar-title-text-color': white,
|
||||||
'nav-bar-background-color': primaryColor,
|
'nav-bar-background-color': primaryColor
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user