142 lines
2.8 KiB
Vue
142 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<!-- 质检员 -->
|
||
|
|
<el-tooltip class="item" effect="dark" content="质检员设置" placement="top">
|
||
|
|
<el-popover
|
||
|
|
placement="bottom"
|
||
|
|
title="质检员设置"
|
||
|
|
width="260"
|
||
|
|
trigger="click"
|
||
|
|
v-model="visible"
|
||
|
|
>
|
||
|
|
<el-button
|
||
|
|
slot="reference"
|
||
|
|
icon="iconfont icon-zhijianyuanshezhi_fuzhi"
|
||
|
|
size="small"
|
||
|
|
class="btn"
|
||
|
|
></el-button>
|
||
|
|
<div class="content">
|
||
|
|
<el-checkbox
|
||
|
|
label="全选"
|
||
|
|
class="checkbox"
|
||
|
|
v-model="allcheckList"
|
||
|
|
@change="allchecked"
|
||
|
|
></el-checkbox>
|
||
|
|
<el-checkbox-group
|
||
|
|
v-model="checkList"
|
||
|
|
class="checkboxgroup"
|
||
|
|
@change="checked"
|
||
|
|
>
|
||
|
|
<el-checkbox
|
||
|
|
:label="item.value"
|
||
|
|
class="checkbox"
|
||
|
|
v-for="(item, index) in qcList"
|
||
|
|
:key="index"
|
||
|
|
>{{ item.label }}</el-checkbox
|
||
|
|
>
|
||
|
|
</el-checkbox-group>
|
||
|
|
<div class="btnbox">
|
||
|
|
<el-button size="mini" @click="reset">重置</el-button>
|
||
|
|
<el-button type="primary" size="mini" @click="comfirm"
|
||
|
|
>确定</el-button
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-popover>
|
||
|
|
</el-tooltip>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: ["qcList"],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
visible: false,
|
||
|
|
allcheckList: "", //质检员全选
|
||
|
|
checkList: [], //质检员v-model
|
||
|
|
};
|
||
|
|
},
|
||
|
|
components: {},
|
||
|
|
methods: {
|
||
|
|
//质检员全选
|
||
|
|
allchecked(e) {
|
||
|
|
if (e) {
|
||
|
|
this.qcList.forEach((item) => {
|
||
|
|
this.checkList.push(item.value);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.checkList = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//质检员单选
|
||
|
|
checked(e) {
|
||
|
|
if (this.qcList.length == this.checkList.length) {
|
||
|
|
this.allcheckList = true;
|
||
|
|
} else {
|
||
|
|
this.allcheckList = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//质检员重置
|
||
|
|
reset() {
|
||
|
|
this.checkList = [];
|
||
|
|
this.allcheckList = false;
|
||
|
|
},
|
||
|
|
//质检员确定
|
||
|
|
comfirm() {
|
||
|
|
this.visible = false;
|
||
|
|
this.$emit("get_op_user_id", this.checkList);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang='scss'>
|
||
|
|
.btnbox {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: center;
|
||
|
|
padding: 5px 0px 0;
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
border: none;
|
||
|
|
font-size: 26px;
|
||
|
|
padding: 5px;
|
||
|
|
margin-left: 0;
|
||
|
|
background: #f1f2f5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-popover__reference:focus,
|
||
|
|
.el-popover__reference:hover {
|
||
|
|
background: #e1e2e6;
|
||
|
|
color:#606266 ;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
margin: 0 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
.checkboxgroup {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
::v-deep .el-checkbox {
|
||
|
|
width: 100px;
|
||
|
|
margin-right: 0px;
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
width: 98%;
|
||
|
|
margin: 0 auto 0px;
|
||
|
|
}
|
||
|
|
::v-deep .el-popover__reference-wrapper::after{
|
||
|
|
content: "";
|
||
|
|
display: inline-block;
|
||
|
|
height: 13px;
|
||
|
|
border: 1px solid;
|
||
|
|
margin-left: 5px;
|
||
|
|
color: rgba(182, 181, 181, 0.753);
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|