<
template>
<div>
<div class="alarm
-type
-container" v
-if="selectList.length">
<a
-input
-search :placeholder="$t('请输入报警类型名称')" @search="search" style="width: 100%;margin
-bottom: 15px;" />
<
template v
-if="listShow">
<
template v
-for="(item, index) in selectList">
<div class="allCheckBox" v
-if="item.count != 0" :key="item.id">
<div class="allCheck">
<a
-checkbox :indeterminate="item.indeterminate" :checked="item.checkAll"
@change="checked => onCheckAllChange(checked, index)">{{ $t(item.alarmBigTypeName)
}}</a
-checkbox>
<img class="down" @click="setHeight(index)" :class="item.flag ? 'up' : ''"
src="~@/assets/img/down.png" alt="" />
</div>
<div :class="['checkboxGroupList', { 'checkboxUp': item.flag, 'checkboxDown': !item.flag }]">
<a
-checkbox
-group :value="item.codes" @change="checked => onChange(checked, index)">
<
template v
-for="check in item.alarmTypeVoList">
<a
-checkbox :key="check.alarmTypeCode" v
-if="!check.show"
:value="check.alarmTypeCode">
<span :title="$t(check.alarmTypeName)">
{{ $t(check.alarmTypeName) }}
</span>
</a
-checkbox>
</
template>
</a
-checkbox
-group>
</div>
</div>
</
template>
</
template>
<noData v
-else />
</div>
<div class="alarm
-type
-container" style="display:
flex;justify
-content: center;" v
-else>
<a
-space :size="6
4">
<a
-spin tip="加载中，请稍候..." />
</a
-space>
</div>
</div>
</
template>
<script>
import moment from "moment";
import noData from '@/components/tableNoData'
export default {
name: "alarm
-type
-container",
components: { noData },
props: {
visible: {
type: Boolean,
default: () => false
},
selectData: {
type: Array,
default: () => {
return [];
}
},
is
Template: {
type: Boolean,
default: () => false
}
},
data() {
return {
selectList: [],
searchValue: '',
codeList: [],
listShow: true,
checkCodes: [],
delList: [],
seatchType: false,
selectListBak: []
};
},
watch: {
},
created() {
},
methods: {
moment,
deWeightCode(tempArr) {
let newArr = [];
for (let i = 0; i < tempArr.length; i++) {
if (newArr.indexOf(tempArr[i]) ==
-1) {
newArr.push(tempArr[i]);
} else {
tempArr.splice(i, 1);
}
}
return tempArr;
},
search(val, e) {
if (val) {
this.listShow = false//是否有数据
this.selectList.forEach((item, index) => {
item.count = item.alarmTypeVoList.length
item.alarmTypeVoList.forEach(select => { //控制显示隐藏
if (select.alarmTypeName.indexOf(val) >
-1) {
this.listShow = true
select.show = false
} else {
item.count = item.count
- 1
select.show = true
}
})
if (this.selectList.length > this.codeList.length) {
this.codeList.push({ alarmBigTypeCode: item.alarmBigTypeCode, codes: item.codes ? item.codes : [], showCodes: [], showLength: [] })
}
if (item.codes) {
this.codeList[index].showCodes = []
if (item.alarmBigTypeCode == this.codeList[index].alarmBigTypeCode) {
this.codeList[index].codes = [...item.codes, ...this.codeList[index].codes]
}
const uniqueArr = Array.from(new Set(item.codes));
item.codes = uniqueArr
item.checkedList = uniqueArr
this.codeList[index].codes = uniqueArr
this.codeList[index].showLength = item.alarmTypeVoList.filter(it => {
return it.show == false
})
item.alarmTypeVoList.forEach(ele => {
item.codes.forEach(el => {
if (!ele.show && ele.alarmTypeCode == el) {
this.codeList[index].showCodes.push(el)
}
})
});
this.selectListBak[index] = item.codes
}
// 改变全选状态
item.indeterminate =
!!this.codeList[index].showCodes.length &&
this.codeList[index].showCodes.length < this.codeList[index].showLength.length;
item.checkAll =
(this.codeList[index].showCodes.length === this.codeList[index].showLength.length) && this.codeList[index].showCodes.length != 0;
})
this.seatchType = true
} else {
this.selectList.forEach((item, index) => {
if (!item.codes) {
item.codes = []
}
item.count = item.alarmTypeVoList.length
item.alarmTypeVoList.forEach(select => {
select.show = false
})
item.codes = [...new Set(item.codes)]
item.indeterminate =
!!item.codes.length &&
item.codes.length < item.alarmTypeVoList.length;
item.checkAll =
item.codes.length === item.alarmTypeVoList.length;
this.selectListBak[index] = []
})
this.listShow = true
this.seatchType = false
this.codeList = []
}
this.$forceUpdate()
},
setHeight(index) {
this.selectList[index].flag = !this.selectList[index].flag;
this.$forceUpdate();
},
getEle() {
return document.querySelector("#app>.standard
-page");
},
onChange(checkedList, index) {
checkedList = [...new Set(checkedList)]
this.delList = []
if (this.codeList.length && this.selectList[index].codes && this.codeList[index].showCodes.length) {
let oldCodes = [this.selectListBak[index]]//搜索前选中的
this.codeList[index].showCodes = [...this.codeList[index].showCodes, ...checkedList]
this.codeList[index].showCodes = [...new Set(this.codeList[index].showCodes)]
this.codeList[index].showCodes.forEach(items => {
if (checkedList.indexOf(items) >
-1) {
} else {
this.delList.push(items)
this.delList = [...new Set(this.delList)]
}
});
let list = [...this.selectListBak[index].filter(e => !this.delList.includes(e)), ...checkedList]
list = [...new Set(list)]
this.selectList[index].checkedList = [...list]
this.selectList[index].codes = [...list]
} else {
if (this.selectListBak[index]) {
let list = []
if (this.selectListBak[index].length == this.selectList[index].alarmTypeVoList.length || !this.seatchType) {
list = [...checkedList]
} else {
list = [...this.selectListBak[index], ...checkedList]
}
this.selectList[index].checkedList = [...new Set(list)]
this.selectList[index].codes = [...new Set(list)]
this.selectList[index].checkedList = [...new Set(list)]
} else {
this.selectList[index].checkedList = [...checkedList]
this.selectList[index].codes = [...checkedList]
}
}
this.selectList[index].indeterminate =
!!checkedList.length &&
checkedList.length < this.selectList[index].alarmTypeVoList.length;
this.selectList[index].checkAll =
checkedList.length === this.selectList[index].alarmTypeVoList.length;
this.$forceUpdate();
if (this.is
Template) {
this.onSubmit();
}
},
//全选
onCheckAllChange(e, index) {
Object.assign(this.selectList[index], {
checkedList: e.
target.checked
? [...this.selectListBak[index], ...this.dataEach(this.selectList[index].alarmTypeVoList)]
: [...this.selectListBak[index].filter(e => !this.dataEach(this.selectList[index].alarmTypeVoList).includes(e))],
codes: e.
target.checked
? [...this.selectListBak[index], ...this.dataEach(this.selectList[index].alarmTypeVoList)]
: [...this.selectListBak[index].filter(e => !this.dataEach(this.selectList[index].alarmTypeVoList).includes(e))],
indeterminate: false,
checkAll: e.
target.checked
});
if (this.is
Template) {
this.onSubmit();
}
this.$forceUpdate();
},
dataEach(val) {
return val.map(item => {
if (!item.show) {
return item.alarmTypeCode
} else {
return null
}
})
},
// 提交
onSubmit(type) {
if (!this.is
Template) {
this.search()
}
this.selectList.forEach((select, index) => {
select.list = [];
if (select.codes) {
const uniqueArr = Array.from(new Set(select.codes));
select.codes = uniqueArr
select.checkedList = uniqueArr
}
select.alarmTypeVoList.forEach(item => {
if (select.codes.length) {
select.codes.forEach(code => {
if (item.alarmTypeCode == code) {
select.list.push(item);
}
});
}
});
});
if (!type) {
this.$emit("checkData", this.selectList);
}
},
getSelectData(data, type) {
this.selectList = []
this.selectListBak = []
data.forEach(items => {
items.flag = true;
items.count = 1
if (type) {
items.checkAll = false
items.indeterminate = false
items.checkedList = []
items.checkedOption = []
} else {
if (items.checkedOption) {//如果有选中的数据
items.checkAll =
items.checkedOption.length == items.alarmTypeVoList.length
? true
: false;
items.indeterminate = items.checkedOption.length && !items.checkAll ? true : false;
items.checkedList = items.checkedOption.map(item => {
return item;
});
items.codes = items.checkedOption.map(item => {
if (item) {
return item.alarmTypeCode;
}
});
} else { //反之
items.checkAll = false
items.indeterminate = false
items.checkedList = []
items.checkedOption = []
}
}
this.selectList.push(items);
this.selectListBak.push(items.codes || []);
});
console.log(this.selectList, 'this.selectListthis.selectListthis.selectListthis.selectList');
}
}
};
</script>
<style lang="less" scoped>
/deep/.
ant-checkbox
-checked {
.
ant-checkbox
-inner:after{
transform: rotate(
45deg) scale(1) translate(
-50%,
-50%) translateZ(0) !import
ant;
}
}
.alarm
-type
-container {
width: 100%;
min
-height:
400px;
.allCheckBox {
border: 1px solid var(
--split);
border
-radius:
4px;
margin
-bottom: 10px;
}
.allCheck {
background
-color: #f0f3f7;
padding: 10px 16px;
display:
flex;
justify
-content: space
-between;
align
-items: center;
.down {
transition: all 0.5s;
width: 13px;
height: 8px;
cursor: pointer;
}
.up {
transform: rotate(180deg);
}
}
.checkboxGroupList {
transition: all 1s;
width: 100%;
overflow: hidden;
.
ant-checkbox
-group {
width: 100%;
padding: 8px 0 8px 1
4px;
}
.
ant-checkbox
-group
-item {
padding: 10px 16px;
}
.
ant-checkbox
-wrapper {
padding:
4px;
margin: 0;
}
.active {
color: #2b81f1;
}
.
ant-checkbox
-wrapper {
width: 25%;
line
-height: 28px;
border
-right: 1px solid #f0f3f7;
padding
-left: 18px;
white
-space: nowrap;
overflow: hidden;
text
-overflow: ellipsis;
}
.
ant-checkbox
-wrapper:nth
-child(
4n) {
border
-right: none;
}
}
.checkboxDown {
height: 0px;
}
.checkboxUp {
min
-height: 30px;
}
}
</style>
代码优化
本文介绍了在Flex4 SDK4.1.0中使用HTML Wrapper时遇到的问题，即无法直接指定自定义模板路径。通过源代码修改，实现了支持自定义模板的功能，并提供了修改后的html-wrapper标签用法。
扫一扫
839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
