增加functionbtn

src/components/FunctionBtn.vue

@@ -3,43 +3,191 @@
 ></c-function-btn>
 -->
 <template>
-<el-col class="eContainer-func" v-if="!isReview">
-  <el-button type="primary" size="small" @click="handleStart">提交</el-button>
-  <el-button type="primary" size="small" @click="handleCheck">检核</el-button>
-  <el-button type="primary" size="small" @click="handleSave">暂存</el-button>
-  <el-button type="primary" size="small" @click="handleCancel">退出</el-button>
-</el-col>
+  <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.start"
+        >提交</el-button
+      >
+      <el-button size="small" @click="check" :loading="$store.state.Status.loading.check"
+        >检核</el-button
+      >
+      <el-button size="small" @click="save" :loading="$store.state.Status.loading.save"
+        >暂存</el-button
+      >
+      <el-button size="small" @click="handleCancel">退出</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"
+        >展开
+        <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"
+        >收起
+        <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: ['handleStart', 'handleCheck', 'handleSave'],
-    data: function () {
-      return {
-        isReview: false,
-      }
+export default {
+  // 如果需要制裁信息按钮则给组件传 showAml 方法，如果不需要则不传
+  props: ["handleStart", "handleCheck", "handleSave", "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.handleStart && (await this.handleStart());
+    },
+    check: async function() {
+      this.handleCheck && (await this.handleCheck());
     },
-    created () {
-      if (this.$route.path.indexOf('review') !== -1) {
-        this.isReview = true
-      } else {
-        this.isReview = false
-      }
+    save: async function() {
+      this.handleSave && (await this.handleSave());
     },
-    methods: {
-      handleCancel: function () {
-        this.$confirm('确认退出？', '', {
-          confirmButtonText: '确认',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(res => {
-          this.$router.push('/business/home')
-        }).catch(() => {})
-        
-      }
+    handleCancel: function() {
+      this.$confirm("确认退出？", "", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(res => {
+          // this.$router.back();
+          this.handleExit && this.handleExit()
+          if (this.$route.query && this.$route.query.routeParams) {
+            setTimeout(() => {
+              this.$router.back()
+            }, 500)
+          } else {
+            setTimeout(() => {
+              this.$router.push('/business/home')
+            }, 500)
+          }
+        })
+        .catch(() => {});
+    },
+    open() {
+      this.openflag = true;
+    },
+    close() {
+      this.openflag = false;
     }
   }
-</script>
\ No newline at end of file
+};
+</script>
+<style>
+.m-Btn-eContainer {
+  display: flex; /*flex布局*/
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  height: 32px;
+  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 > 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>