| | |
| | | <template> |
| | | <div class="common-status"> |
| | | <div v-if="showButton" style="margin-left: 30px"> |
| | | <el-button v-if="isValidateClick" plain size="mini" @click="validateClick">验证</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="showOther" plain size="mini" disabled>打印</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" |
| | |
| | | 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") |
| | | }, |
| | | // 取消 |
| | | btnCancel(){ |
| | | this.$emit("btnCancel") |
| | | } |
| | | } |
| | | } |
| | |
| | | <!-- 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; |
| | |
| | | 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; |
| | |
| | | // background: #edf9ff; |
| | | // } |
| | | .arrows_active { |
| | | background: #495057; |
| | | background: #2a78fb; |
| | | } |
| | | // .arrows_todo { |
| | | // background: #2c2c2c; |