<template>
|
<div class="common-status">
|
<div v-if="showButton" style="margin-left: 30px">
|
<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: '#2a78fb' } : ''"
|
>
|
<div
|
class="arrows_up arrows"
|
:class="{
|
arrows_active: item.status === 'active',
|
arrows_done: item.status === 'done',
|
arrows_todo: item.status === 'todo'
|
}"
|
></div>
|
<div
|
class="arrows_down arrows"
|
:class="{
|
arrows_active: item.status === 'active',
|
arrows_done: item.status === 'done',
|
arrows_todo: item.status === 'todo'
|
}"
|
></div>
|
<div
|
class="arrows_label arrows"
|
:class="{
|
arrows_label_active: item.status === 'active',
|
arrows_label_done: item.status === 'done',
|
arrows_label_todo: item.status === 'todo'
|
}"
|
>
|
{{ item.label }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: "StatusCommonView",
|
props: {
|
list: {
|
type: Array,
|
//list:[{label: "完成", status: "active" }]
|
default: () => []
|
},
|
showButton: {
|
type: Boolean,
|
default: false
|
},
|
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 {}
|
},
|
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;
|
display: flex;
|
align-items: center;
|
margin: 10px 30px;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #e9e9e9;
|
.arrowsBox {
|
margin-left: auto;
|
display: flex;
|
height: 35px;
|
font-size: 14px;
|
border-top: #cccbcb;
|
border-bottom: #cccbcb;
|
.arrowsItem {
|
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;
|
width: 60px;
|
}
|
.arrows {
|
height: 50%;
|
}
|
.arrows_label {
|
position: absolute;
|
top: 50%;
|
transform: translateY(-50%);
|
left: 10px;
|
right: 0;
|
bottom: 0;
|
text-align: center;
|
}
|
// .arrows_done {
|
// background: #edf9ff;
|
// }
|
.arrows_active {
|
background: #2a78fb;
|
}
|
// .arrows_todo {
|
// background: #2c2c2c;
|
// }
|
// .arrows_label_done {
|
// color: #009fe9;
|
// }
|
.arrows_label_active {
|
color: #fff;
|
}
|
// .arrows_label_todo {
|
// color: #fff;
|
// }
|
}
|
}
|
}
|
</style>
|
