上一步，下一步

src/dashoo.cn/frontend_web/src/components/floatButton/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="ys-float-btn" :style="{'width':itemWidth+'px','height':itemHeight+'px','left':left+'px','top':top+'px','cursor': 'pointer'}"
+       ref="div"
+       @click ="onBtnClicked">
+    <slot name="icon"></slot>
+    <span style="cursor: pointer;">{{text}}</span>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "FloatImgBtn",
+    props:{
+      text:{
+        type:String,
+        default:"默认文字"
+      },
+      itemWidth:{
+        type:Number,
+        default:60
+      },
+      itemHeight:{
+        type:Number,
+        default:60
+      },
+      gapWidth:{
+        type:Number,
+        default:10
+      },
+      coefficientHeight:{
+        type:Number,
+        default:0.8
+      }
+    },
+    created(){
+      this.clientWidth = document.documentElement.clientWidth;
+      this.clientHeight = document.documentElement.clientHeight;
+      this.left = this.clientWidth - this.itemWidth - this.gapWidth;
+      this.top = this.clientHeight*this.coefficientHeight;
+    },
+    mounted(){
+      window.addEventListener('scroll', this.handleScrollStart);
+      this.$nextTick(()=>{
+        const div = this.$refs.div;
+        div.addEventListener("touchstart",()=>{
+          div.style.transition = 'none';
+        });
+        div.addEventListener("touchmove",(e)=>{
+          if (e.targetTouches.length === 1) {
+            let touch = event.targetTouches[0];
+            this.left = touch.clientX - this.itemWidth/2;
+            this.top = touch.clientY - this.itemHeight/2;
+          }
+        });
+        div.addEventListener("touchend",()=>{
+          div.style.transition = 'all 0.3s';
+          if(this.left>this.clientWidth/2){
+            this.left = this.clientWidth - this.itemWidth - this.gapWidth;
+          }else{
+            this.left = this.gapWidth;
+          }
+        });
+
+      });
+    },
+    beforeDestroy(){
+      window.removeEventListener('scroll', this.handleScrollStart);
+    },
+    methods:{
+      onBtnClicked(){
+        this.$emit("onFloatBtnClicked");
+      },
+      handleScrollStart(){
+        this.timer&&clearTimeout(this.timer);
+        this.timer = setTimeout(()=>{
+          this.handleScrollEnd();
+        },300);
+        this.currentTop = document.documentElement.scrollTop || document.body.scrollTop;
+        if(this.left>this.clientWidth/2){
+          this.left = this.clientWidth - this.itemWidth/2;
+        }else{
+          this.left = -this.itemWidth/2;
+        }
+      },
+      handleScrollEnd(){
+        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+        if(scrollTop === this.currentTop){
+          if(this.left>this.clientWidth/2){
+            this.left = this.clientWidth - this.itemWidth - this.gapWidth;
+          }else{
+            this.left = this.gapWidth;
+          }
+          clearTimeout(this.timer);
+        }
+      }
+    },
+    data(){
+      return{
+        timer:null,
+        currentTop:0,
+        clientWidth:0,
+        clientHeight:0,
+        left:0,
+        top:0,
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .ys-float-btn{
+    background: #409EFF; //rgb(205,255,255);
+    box-shadow:0 2px 10px 0 rgba(0,0,0,0.1);
+    border-radius:50%;
+    color: #ffffff; //#666666;
+    z-index: 20;
+    transition: all 0.3s;
+    cursor: hand;
+    /*font-weight: bold;*/
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    position: fixed;
+    bottom: 20vw;
+
+    img{
+      width: 50%;
+      height: 50%;
+      object-fit: contain;
+      margin-bottom: 3px;
+    }
+
+    p{
+      font-size:7px;
+    }
+  }
+</style>

src/dashoo.cn/frontend_web/src/pages/oilsupplier/supplier/_opera/techedit.vue

@@ -5,13 +5,18 @@
       <el-breadcrumb-item :to="{ path: '/oilsupplier/supplier/techlist' }">技术服务类列表</el-breadcrumb-item>
       <el-breadcrumb-item>技术服务类供方准入评审表</el-breadcrumb-item>
     </el-breadcrumb>
+
+    <float-img-btn ref="floatBtn" text="下一步" :itemWidth="58" :itemHeight="30" :coefficientHeight="0.8" @onFloatBtnClicked="nextTab">
+    </float-img-btn>
+    <float-img-btn ref="floatBtn" text="上一步" :itemWidth="58" :itemHeight="30" :coefficientHeight="0.85" @onFloatBtnClicked="backTab">
+    </float-img-btn>
     <el-card class="box-card">
       <div slot="header">
         <span>
           <i class="icon icon-table2"></i> 信息
         </span>
         <span style="float: right;">
-          <el-button plain icon="el-icon-right" size="mini" style="margin-right: 5px" @click="nextTab">下一步</el-button>
+          <!--<el-button plain icon="el-icon-right" size="mini" style="margin-right: 5px" @click="nextTab">下一步</el-button>-->
           <el-popover>
             <el-steps :active="formData.Step" direction="vertical" align-center finish-status="success">
               <el-step title="填信息"></el-step>
@@ -287,10 +292,14 @@
   import TechInfo from '@/components/oilsupplier/techinfo'
 
   import ChooseAuditor from '@/components/oilsupplier/chooseauditor'
+  import FloatImgBtn from '@/components/floatButton/index'
+  import ElIcon from "../../../../../node_modules/element-ui/packages/icon/src/icon";
 
   export default {
 
     components: {
+      ElIcon,
+      FloatImgBtn,
       SupplierFileTable,
       WfHistory,
       WfBackHistory,
@@ -695,13 +704,40 @@
         })
       },
       nextTab () {
+        let totalTab = 4
+        if (this.formDataCert.Status > 0) {
+          totalTab = 6
+        }
+        let valid = true
+        if (this.formDataCert.Status <= 0 && this.activeName === '1') {
+          valid = this.saveEntity()
+        } else if (this.formDataCert.Status <= 0 && this.activeName === '2') {
+          this.updateNumberEntity()
+        }
+        if (!valid) {
+          return false
+        }
         let activeIdx = parseInt(this.activeName)
-        if (activeIdx < 4) {
+        if (activeIdx < totalTab) {
           this.activeName = (activeIdx + 1) + ''
         } else {
           this.activeName = '1'
         }
       },
+
+      backTab () {
+        let totalTab = 4
+        if (this.formDataCert.Status > 0) {
+          totalTab = 6
+        }
+
+        let activeIdx = parseInt(this.activeName)
+        if (activeIdx > 0) {
+          this.activeName = (activeIdx - 1) + ''
+        } else {
+          this.activeName = totalTab + ''
+        }
+      },
       /* getCityList(val) {
         let resultData = JSON.parse(val)
         let countstr = JSON.stringify(resultData.districts[0].districts)
@@ -711,25 +747,33 @@
 
       // 保存信息
       saveEntity() {
+        let valid1 = false
+        let valid2 = false
+
         this.$refs['TechInfo'].$refs['EntityForm'].validate((valid) => {
-             this.$refs["TechInfo"].$refs["EntityFormCert"].validate(vvalid => {
-          if (valid&&vvalid) {
-            if (!this.formData.SetupTime) {
-              this.formData.SetupTime = null
-            } else {
-              this.formData.SetupTime = new Date(this.formData.SetupTime)
-            }
-            // this.formData.WellNo = this.$refs.selectWellNo.selectedLabel + '';
-            if (!this.formData.Id || !this.certId) {
-              this.addEntity()
-            } else {
-              this.updateEntity()
-            }
-          } else {
-            return false
-          }
+          valid1 = valid
         })
+
+        this.$refs["TechInfo"].$refs["EntityFormCert"].validate(vvalid => {
+          valid2 = vvalid
         })
+
+        if (valid1 && valid2) {
+          if (!this.formData.SetupTime) {
+            this.formData.SetupTime = null
+          } else {
+            this.formData.SetupTime = new Date(this.formData.SetupTime)
+          }
+          // this.formData.WellNo = this.$refs.selectWellNo.selectedLabel + '';
+          if (!this.formData.Id || !this.certId) {
+            this.addEntity()
+          } else {
+            this.updateEntity()
+          }
+        } else {
+          return false
+        }
+
       },
 
       // 保存信息