FunctionBtn.vue

<!-- 引用方法
<c-function-btn :handleSubmit="handleSubmit" :handleCheck="handleCheck" :handleStash="handleStash"
></c-function-btn>
-->
<template>
  <div class="m-Btn-eContainer" v-if="!buttonHide && ((!isReview && !funcBtnHide) || showSetBtn)">
    <div class="m-funcBtn-eContainer" v-if="!isReview && !buttonHide && !funcBtnHide">
      <el-button type="primary" size="small" @click="start" :loading="$store.state.Status.loading.submit">{{ $t('buttons.submit') }}</el-button>
      <el-button size="small" @click="check" :loading="$store.state.Status.loading.check">{{ $t('buttons.check') }}</el-button>
      <el-button size="small" @click="save" :loading="$store.state.Status.loading.stash">{{ $t('buttons.stash') }}</el-button>
      <el-button size="small" @click="handleCancel">{{ $t('buttons.quit') }}</el-button>
    </div>
    <div class="m-zhanWei-forfuncBtn" v-if="!buttonHide && showSetBtn && (funcBtnHide || isReview)"></div>
    <div class="m-openleft" v-if="!buttonHide && showSetBtn">
      <el-button
        type="primary"
        icon="el-icon-arrow-left"
        size="mini"
        class="m-setting-btn"
        v-show="!openflag"
        @click="open"
        >
        {{ $t('buttons.unfold') }}
        <i class="el-icon-setting" size="mini"></i>
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-arrow-right"
        size="mini"
        class="m-setting-btn"
        v-show="openflag"
        @click="close"
        >
        {{ $t('buttons.fold') }}
        <i class="el-icon-setting" size="mini"></i>
      </el-button>
      <div class="m-openleft-item" v-show="openflag">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
// 反洗钱组件引入

export default {
  // 如果需要制裁信息按钮则给组件传 showAml 方法，如果不需要则不传
  props: ["handleSubmit", "handleCheck", "handleStash", "handleExit", "hideFuncBtn"],
  data: function() {
    return {
      isReview: false,
      openflag: true,
      funcBtnHide: false
    };
  },
  created() {
    if (this.$route.path.indexOf("review") !== -1) {
      this.isReview = true;
    } else {
      this.isReview = false;
    }
    if (this.hideFuncBtn) {
      this.funcBtnHide = true;
    }
    // console.log("functionbtn标志isReview:", this.isReview)
    // console.log("functionbtn标志funcBtnHide:", this.funcBtnHide)
    // console.log("functionbtn标志buttonHide:", this.buttonHide)
    // console.log("functionbtn标志showSetBtn:", this.showSetBtn)
    // console.log("functionbtn标志mode:", this.mode)
    // console.log("functionbtn标志zhanwei:", !this.buttonHide && this.showSetBtn && (this.funcBtnHide || this.isReview))
  },
  computed: {
    showSetBtn() {
      return this.$slots.default !== undefined;
    },
    mode() {
      return this.$store.state.Status.mode;
    },
    buttonHide() {
      return this.$route.path.indexOf("display") !== -1;
    }
  },
  methods: {
    start: async function() {
      this.handleSubmit && (await this.handleSubmit());
    },
    check: async function() {
      this.handleCheck && (await this.handleCheck());
    },
    save: async function() {
      this.handleStash && (await this.handleStash());
    },
    handleCancel: function() {
      this.$confirm("确认退出？", "", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(res => {
          // this.$router.back();
          this.$store.dispatch("TagsView/delView", this.$route)
          this.handleExit && this.handleExit()
          if (this.$route.query && this.$route.query.routeParams) {
            setTimeout(() => {
              this.$router.back()
            }, 500)
          } 
          else {
            setTimeout(() => {
              this.$router.push('/home')
            }, 500)
          }
        })
        .catch(() => {});
    },
    open() {
      this.openflag = true;
    },
    close() {
      this.openflag = false;
    }
  }
};
</script>
<style>
.m-Btn-eContainer {
  display: flex; /*flex布局*/
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  height: 24px;
  margin-bottom: 5px;
}
.m-funcBtn-eContainer {
  order: 1;
}
.m-zhanWei-forfuncBtn{
  order: 2;
}
.m-openleft {
  order: 3;
}

.m-funcBtn-eContainer button,
.m-funcBtn-eContainer .el-button + .el-button {
  margin: 0px 0px 0px 0px;
}
.m-funcBtn-eContainer .el-button--default {
  background-image: linear-gradient(#fff,#dedede);
  border: 1px solid #ccc;
}
.m-funcBtn-eContainer .el-button--primary {
  border: 1px solid #0D4FBD;
}
.m-openleft-item {
  display: inline-block;
  padding: 0px;
}

.m-setting-btn {
  padding: 0px 10px 0px 8px;
  font-size: 12px;
  line-height: 22px;
}

.m-openleft-item > span {
  display: inline-block;
}
.m-openleft-item .el-button+.el-button {
  margin: 0;
}
.m-openleft-item > button,
.m-openleft-item > span > button,
.m-openleft-item > span > div > button {
  color: #606266;
  background-color: #fff;
  border: 1px #ccc solid;
  padding: 0px 7px;
  background-image: linear-gradient(#fff,#dedede);
}

.m-openleft-item > button:hover,
.m-openleft-item > span > button:hover,
.m-openleft-item > span > div > button:hover {
  background-color: #b3d8ff;
  color: #606266;
}
</style>