add 公用流程页面组件

src/App.vue

@@ -88,7 +88,7 @@ export default {
 <style scoped lang="less">
 @import '~@assets/less/common.less';
 
-.van-nav-bar__content {
+/deep/ .van-nav-bar__content {
   height: 0.88rem;
 }
 
@@ -99,7 +99,7 @@ export default {
 
 /*头部导航固定*/
 .scroll-box {
-  height: calc(100vh - 0.92rem);
+  height: calc(100vh - 0.88rem);
   overflow: auto;
 }
 

src/assets/less/common.less

@@ -2,6 +2,10 @@
 @font-color: #1D2129;
 @label-font-color: #767676;
 
+.page-box {
+  height: 100%;
+}
+
 /* switch的样式 */
 .top-wrapper {
   width: 100%;
@@ -38,4 +42,33 @@
   color: #FFFFFF;
 }
 
-/* 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;
+}

src/common/lang/zh-cn.js

@@ -16,5 +16,11 @@ module.exports = {
   expirationDate: '截止日期',
   processExplain: '流程说明',
   pleaseSelect: '请选择',
-  pleaseEnter: '请输入'
+  pleaseEnter: '请输入',
+  // toPc: '请前往PC端进行操作',
+  basicInfo: '基础信息',
+  personalInfo: '人员信息',
+  turnTo: '转办',
+  agree: '同意',
+  reject: '驳回'
 }

src/components/ProcessCommonLayout.vue

@@ -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>

src/router/index.js

@@ -27,7 +27,16 @@ const routes = [
       hasBack: false
     }
   },
-
+  // 标准法规入库/变更流程
+  {
+    path: '/standardEntryOrChangeProcess',
+    name: 'StandardEntryOrChangeProcess',
+    meta: {
+      hasNavBar: true,
+      hasBack: true
+    },
+    component: () => import('@/views/standardEntryOrChangeProcess/StandardEntryOrChangeProcess')
+  },
   { // 流程中节点不支持的页面
     path: '/noMobile',
     name: 'NoMobile',

src/views/standardEntryOrChangeProcess/StandardEntryOrChangeProcess.vue

@@ -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>