add 公用流程页面组件

2023-11-30 11:30:06 +08:00
parent a536b0f75c
commit 341d94461b
8 changed files with 205 additions and 29 deletions
@@ -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>