<template>
<myModal :params="{title: $t('选择报警类型')}" :modalWidthSize="'middle'" :visible="visible" @submit="handleOk"
@canc
el="handleCanc
el">
<template v
-slot:header><span></span></template>
<template v
-slot:body>
<div class="alarm_type_modal">
<div class="main_content" v
-if="alarmTyp
eList
.length">
<div class="search_item">
<a
-input-search @search="handleAlarmTypeSearch" :placeholder="$t('请输入报警类型名称')" />
</div>
<template v
-if="isShowList">
<div class="check_item">
<div class="all_check">
<a
-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
{{ $t("用电告警")}}
</a
-checkbox>
<img class="down" @click="changeIcon" :class="{'up': expanded}" src="~@/assets/img/down
.png" />
</div>
<div :class="['check_group_list', expanded ? 'checkboxUp': 'checkboxDown' ]">
<a
-checkbox
-group v
-mod
el="checkedList" @change="onCheckChange">
<template v
-for="
el in alarmTyp
eList">
<a
-checkbox v
-if="
el.show" :key="
el.alarmTypeCode" :value="
el.alarmTypeCode">
{{
el.alarmTypeName}}
</a
-checkbox>
</template>
</a
-checkbox
-group>
</div>
</div>
</template>
<noData v
-else />
</div>
<a
-space :size="64" v
-else>
<a
-spin tip="加载中，请稍候
..." />
</a
-space>
</div>
</template>
</myModal>
</template>
<script>
import noData from '@/components/tableNoData'
import myModal from "@/components/scfComponents/modalComponents/modal
.vue";
export default {
components: { noData, myModal },
data() {
return {
visible: false,
isShowList: true,
indeterminate: false,
checkAll: false,
expanded: true,
checkedList: [],
alarmTyp
eList: []
}
},
methods: {
getAlarmTyp
eList() {
this
.alarmTyp
eList = [{
"alarmTypeCode": 1001,
"alarmTypeName": "电流过高预警"
},
{
"alarmTypeCode": 1002,
"alarmTypeName": "温度过高预警"
},
{
"alarmTypeCode": 1005,
"alarmTypeName": "电压过高预警"
},
{
"alarmTypeCode": 1006,
"alarmTypeName": "电压过低预警"
},
{
"alarmTypeCode": 1007,
"alarmTypeName": "功率过载预警"
},
{
"alarmTypeCode": 1008,
"alarmTypeName": "功率过载报警"
},]
this
.alarmTyp
eList
.forEach(item => {
item
.show = true
})
console
.log(this
.alarmTyp
eList);
},
// 打开弹窗
showModal() {
this
.visible = true
this
.getAlarmTyp
eList()
},
// 报警类型搜索
handleAlarmTypeSearch(val) {
if (val) {
this
.alarmTyp
eList
.forEach(item => {
console
.log(item
.alarmTypeName
.indexOf(val) >
-1);
if (item
.alarmTypeName
.indexOf(val) ==
-1) {
item
.show = false
}
})
}
else {
this
.alarmTyp
eList
.forEach(item => {
item
.show = true
})
}
this
.$forceUpdate()
},
//
全选
onCheckAllChange(e) {
let checkCodes = this
.alarmTyp
eList
.map(item => item
.alarmTypeCode)
Object
.assign(this, {
checkedList: e
.target
.checked ? checkCodes : [],
indeterminate: false,
checkAll: e
.target
.checked,
});
},
changeIcon() {
this
.expanded = !this
.expanded
},
// 单选
onCheckChange(checkedList) {
this
.indeterminate = !!checkedList
.length && checkedList
.length < this
.alarmTyp
eList
.length;
this
.checkAll = checkedList
.length === this
.alarmTyp
eList
.length;
},
// 确定
handleOk() {
this
.visible = false
},
// 取消
handleCanc
el() {
this
.visible = false
}
},
}
</script>
<style lang="less" scoped>
.alarm_type_modal {
width: 100%;
display: flex;
padding: 24px;
box
-sizing: border
-box;
justify
-content: center;
.main_content {
width: 100%;
min
-height: 400px;
position: r
elative;
border
-radius: 8px;
border: solid 1px #c5cdd6;
padding: 23px 10px 10px 16px;
.search_item {
width: 100%;
margin
-bottom: 15px;
}
.check_item {
border
-radius: 4px;
margin
-bottom: 10px;
border: 1px solid var(
--split);
.all_check {
display: flex;
padding: 10px 16px;
align
-items: center;
justify
-content: space
-between;
background
-color: #f0f3f7;
.down {
width: 13px;
height: 8px;
transition: all 0
.5s;
cursor: pointer;
}
.up {
transform: rotate(180deg);
}
}
.check_group_list {
width: 100%;
overflow: hidden;
transition: all 1s;
.ant
-checkbox
-group {
width: 100%;
padding: 8px 0 8px 14px;
.ant
-checkbox
-wrapper {
margin: 0;
width: 25%;
padding: 4px;
overflow: hidden;
line
-height: 28px;
padding
-left: 18px;
white
-space: nowrap;
text
-overflow:
ellipsis;
border
-right: 1px solid #f0f3f7;
&:nth
-child(4n) {
border
-right: none;
}
}
}
}
.checkboxDown {
height: 0px;
}
.checkboxUp {
min
-height: 30px;
}
}
}
}
</style> 代码评审
本文深入探讨了基于Vue框架的El-input组件使用方法，包括如何通过v-model双向绑定数据，利用@keyup.enter.native监听回车事件，以及onfocus实现文本内容全选等功能。适合前端开发者学习。
扫一扫
724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
