charles
2024-08-06 5ecb7958c96d3f0b6d47b79aff7eb306c2cf690f
src/components/makepager/StatusCommonView.vue
@@ -1,15 +1,17 @@
<template>
  <div class="common-status">
    <div v-if="showButton" style="margin-left: 30px">
      <el-button plain size="mini" @click="delClick" :disabled="isDelClick">删除</el-button>
      <el-button plain size="mini" disabled>打印</el-button>
      <el-button v-if="isValidateClick" plain size="mini" @click="validateClick" :disabled="isCancel">验证</el-button>
      <el-button v-if="showOther" plain size="mini" @click="delClick" :disabled="isDelClick">删除</el-button>
      <el-button v-if="showCancel" plain size="mini" @click="btnCancel">取消</el-button>
      <!-- <el-button v-if="showOther" plain size="mini" disabled>打印</el-button> -->
    </div>
    <div class="arrowsBox">
      <div
        class="arrowsItem"
        v-for="(item, index) in list"
        :key="index"
        :style="item.status === 'active' && index === 0 ? { background: '#495057' } : ''"
        :style="item.status === 'active' && index === 0 ? { background: '#2a78fb' } : ''"
      >
        <div
          class="arrows_up arrows"
@@ -57,26 +59,54 @@
    isDelClick: {
      type: Boolean,
      default: false
    }
    },
    isCancel:{
      type:Boolean,
      default:false,
    },
    isValidateClick: {
      type: Boolean,
      default: false
    },
    showOther: {
      type: Boolean,
      default: true
    },
    showCancel: {
      type: Boolean,
      default:false
    },
  },
  data() {
    return {
      delClick() {
        this.$emit("delClick")
      }
    }
    return {}
  },
  methods: {}
  methods: {
    // 验证
    validateClick() {
      this.$emit("validateClick")
    },
    // 删除
    delClick() {
      this.$emit("delClick")
    },
    // 取消
    btnCancel(){
      this.$emit("btnCancel")
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.common-status {
  overflow: hidden;
  border: 1px solid #e9e9e9;
  // overflow: hidden;
  // border: 1px solid #e9e9e9;
  display: flex;
  align-items: center;
  margin: 10px 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e9e9e9;
  .arrowsBox {
    margin-left: auto;
    display: flex;
@@ -88,15 +118,20 @@
      position: relative;
      height: 100%;
      width: 80px;
      z-index: 9999;
      .arrows_up {
        box-sizing: border-box;
        transform-origin: right top;
        transform: skewX(30deg);
        border-top: 1px solid #e9e9e9;
        border-right: 1px solid #e9e9e9;
      }
      .arrows_down {
        box-sizing: border-box;
        transform-origin: right bottom;
        transform: skewX(-30deg);
        border-right: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
      }
      &:first-child {
        border-left: 1px solid #e9e9e9;
@@ -118,7 +153,7 @@
      //   background: #edf9ff;
      // }
      .arrows_active {
        background: #495057;
        background: #2a78fb;
      }
      // .arrows_todo {
      //   background: #2c2c2c;