<template>
<myModal :params="{title: $t('
选择报警类型')}" :modalWidthSize="'middle'" :visible="visible" @submit="handleOk"
@cancel="handleCancel">
<template v-slot:header><span></span></template>
<template v-slot:body>
<div class="alarm_type_modal">
<div class="main_content" v-if="alarmTypeList.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-model="checkedList" @change="onCheckChange">
<template v-for="el in filteredList">
<a-checkbox :key="el.alarmTypeCode" :value="el.alarmTypeCode">
<span :title="$t(el.alarmTypeName)">
{{ $t(el.alarmTypeName) }}
</span>
</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 factory from '../../factory';
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: [], // 所有选中项
alarmTypeList: [], // 原始数据
filteredList: [] // 过滤后列表
}
},
computed: {
alarmTypeCodes() {
return this.filteredList.map(item => item.alarmTypeCode)
},
// 当
前可见项的选中状态
alarmTypeChecked() {
return this.checkedList.filter(code => this.alarmTypeCodes.includes(code));
}
},
watch: {
//
监听过滤后的列表变化
filteredList: {
handler(newVal) {
this.isShowList = newVal.length > 0;
},
immediate: true
}
},
methods: {
getAlarmTypeList() {
factory.getAlarmTypeList().then(res => {
this.alarmTypeList = res || []
this.filteredList = [...this.alarmTypeList]; // 初始化过滤列表
})
},
// 打开弹窗
showModal(data) {
this.visible = true
this.checkedList = data
this.getAlarmTypeList()
},
// 报警类型搜索
handleAlarmTypeSearch(val) {
const searchTerm = val.toLowerCase().trim();
if (!searchTerm) {
this.filteredList = [...this.alarmTypeList];
} else {
this.filteredList = this.alarmTypeList.filter(item =>
item.alarmTypeName.toLowerCase().includes(searchTerm)
);
}
this.updateCheckState()
},
// 更新
选择状态
updateCheckState() {
this.checkAll = this.alarmTypeChecked.length === this.alarmTypeCodes.length;
this.indeterminate = !!this.alarmTypeChecked.length && !this.checkAll;
},
// 全选
onCheckAllChange(e) {
Object.assign(this, {
checkedList: e.target.checked ? [...this.alarmTypeCodes] : [],
indeterminate: false,
checkAll: e.target.checked,
});
},
changeIcon() {
this.expanded = !this.expanded
},
// 单选
onCheckChange() {
this.updateCheckState()
},
// 确定
handleOk() {
this.visible = false
},
// 取消
handleCancel() {
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: relative;
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: #f0f3f
7;
.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 #f0f3f
7;
&:nth-child(4n) {
border-right: none;
}
}
}
}
.checkboxDown {
height: 0px;
}
.checkboxUp {
min-height: 30px;
}
}
}
}
</style> alarmTypeList有1800条数据 有什么优化的地方 不改变原有代码逻辑
本文介绍了一种在软件开发中使用选择器监听的方法，该方法允许开发者在选择某一选项时，根据前一个选择的条件来过滤后续的选择项。例如，在选择省份之后，可以进一步选择城市，此时城市的选择将被省份的选择所限定。
扫一扫
4444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
