<template>
|
<div class="monitor-obj-wrapper">
|
<el-affix v-if="affix" :offset="60" target=".monitor-obj-wrapper">
|
<el-scrollbar class="p-b-8" always>
|
<!-- <el-segmented
|
:model-value="activeName"
|
:options="activeTabs"
|
@change="tabChange"
|
/> -->
|
<el-tabs v-model="activeName" @tab-change="tabChange">
|
<el-tab-pane
|
v-for="item in activeTabs"
|
:key="item"
|
:label="item"
|
:name="item"
|
></el-tab-pane>
|
</el-tabs>
|
</el-scrollbar>
|
</el-affix>
|
<el-scrollbar class="" always v-else>
|
<!-- <el-segmented
|
:model-value="activeName"
|
:options="activeTabs"
|
@change="tabChange"
|
/> -->
|
<el-tabs v-model="activeName" @tab-change="tabChange">
|
<el-tab-pane
|
v-for="item in activeTabs"
|
:key="item"
|
:label="item"
|
:name="item"
|
></el-tab-pane>
|
</el-tabs>
|
</el-scrollbar>
|
<el-space size="large">
|
<el-tag type="info"> 总数：{{ activeData.length }} </el-tag>
|
<el-checkbox-group v-model="checkList">
|
<el-checkbox label="未监管" :value="0" />
|
<el-checkbox label="已监管" :value="1" />
|
<el-checkbox label="已复核" :value="2" />
|
</el-checkbox-group>
|
</el-space>
|
<el-scrollbar :height="height">
|
<el-space wrap>
|
<ItemMonitorObj v-for="obj in activeData" :key="obj.movid" :item="obj">
|
<template #default="{ item }">
|
<slot :item="item">
|
<el-button
|
v-if="showBtn"
|
size="small"
|
plain
|
:type="btnType"
|
@click="itemClick(item)"
|
>{{ btnName }}</el-button
|
>
|
</slot>
|
</template>
|
</ItemMonitorObj>
|
</el-space>
|
</el-scrollbar>
|
</div>
|
</template>
|
|
<script>
|
const defaultTabName = '全部';
|
export default {
|
props: {
|
data: {
|
type: Array,
|
default: () => []
|
},
|
tabName: {
|
type: String,
|
default: defaultTabName
|
},
|
tabOptions: Array,
|
showData: Array,
|
// 是否添加默认的全部选项
|
allOption: Boolean,
|
showBtn: Boolean,
|
btnName: {
|
type: String,
|
default: '移除'
|
},
|
btnType: {
|
type: String,
|
default: 'default'
|
},
|
// 头部选项是否吸顶
|
affix: Boolean,
|
height: String
|
},
|
emits: ['update:tabName', 'update:showData', 'itemClick'],
|
data() {
|
return {
|
activeName: defaultTabName,
|
tabs: [],
|
checkList: [0, 1, 2]
|
};
|
},
|
computed: {
|
activeData() {
|
const list = this.data.filter((v) => {
|
// 筛选当前选择的标签页对应的场景类型
|
const b1 =
|
this.activeName == defaultTabName || v.sceneType == this.activeName;
|
|
// 计算场景的监管状态
|
let status;
|
if (v.extension1 == undefined || null) {
|
// 未监管
|
status = 0;
|
} else {
|
const num = parseInt(v.extension1);
|
if (num >= 2) {
|
// 已复核
|
status = 2;
|
} else {
|
// 已监管（1次）
|
status = num;
|
}
|
}
|
const b2 = this.checkList.indexOf(status) != -1;
|
return b1 && b2;
|
});
|
this.$emit('update:showData', list);
|
return list;
|
},
|
activeTabs() {
|
if (this.tabOptions) {
|
return this.tabOptions;
|
} else {
|
return this.tabs;
|
}
|
}
|
},
|
watch: {
|
data: {
|
handler(nV, oV) {
|
if (nV != oV && nV.length > 0) {
|
this.getTabs(nV);
|
}
|
},
|
immediate: true
|
},
|
tabs: {
|
handler(nV, oV) {
|
if (nV != oV && nV.length > 0) {
|
this.activeName = nV[0];
|
this.tabChange(nV[0]);
|
}
|
},
|
immediate: true
|
},
|
tabName(nV, oV) {
|
if (nV != oV) {
|
this.activeName = nV;
|
}
|
}
|
},
|
methods: {
|
getTabs(dataList) {
|
const list = [];
|
dataList.forEach((d) => {
|
if (list.indexOf(d.sceneType) == -1) list.push(d.sceneType);
|
});
|
this.tabs = list.sort();
|
},
|
tabChange(tabName) {
|
this.activeName = tabName;
|
this.$emit('update:tabName', tabName);
|
},
|
itemClick(item) {
|
this.$emit('itemClick', item);
|
}
|
}
|
};
|
</script>
|
|
<style scoped></style>
|
