| | |
| | | <template> |
| | | <div> |
| | | <el-segmented :model-value="tabName" :options="tabs" @change="tabChange" /> |
| | | <el-segmented :model-value="activeName" :options="activeTabs" @change="tabChange" /> |
| | | </div> |
| | | <el-space wrap> |
| | | <ItemMonitorObj v-for="obj in activeData" :key="obj.movid" :item="obj"> |
| | | <template #default="{ item }"> |
| | | <!-- <slot :item="item"></slot> --> |
| | | <el-button v-if="showDelete" size="small" type="danger" @click="deleteMov(item)" |
| | | >移除</el-button |
| | | > |
| | | <el-button v-if="showBtn" size="small" type="danger" @click="itemClick(item)">{{ |
| | | btnName |
| | | }}</el-button> |
| | | </template> |
| | | </ItemMonitorObj> |
| | | </el-space> |
| | |
| | | type: String, |
| | | default: defaultTabName |
| | | }, |
| | | tabOptions: Array, |
| | | showData: Array, |
| | | // 是否添加默认的全部选项 |
| | | allOption: Boolean, |
| | | showDelete: Boolean |
| | | showBtn: Boolean, |
| | | btnName: { |
| | | type: String, |
| | | default: '移除' |
| | | } |
| | | }, |
| | | emits: ['update:tabName', 'update:showData', 'deleteItem'], |
| | | emits: ['update:tabName', 'update:showData', 'itemClick'], |
| | | data() { |
| | | return { |
| | | activeName: defaultTabName, |
| | |
| | | computed: { |
| | | activeData() { |
| | | const list = this.data.filter((v) => { |
| | | // return this.activeName == defaultTabName || v.sceneType == this.activeName; |
| | | return this.tabName == defaultTabName || v.sceneType == this.tabName; |
| | | return this.activeName == defaultTabName || v.sceneType == this.activeName; |
| | | // return this.tabName == defaultTabName || v.sceneType == this.tabName; |
| | | }); |
| | | this.$emit('update:showData', list); |
| | | return list; |
| | | }, |
| | | activeTabs() { |
| | | if (this.tabOptions) { |
| | | return this.tabOptions; |
| | | } else { |
| | | return this.tabs; |
| | | } |
| | | } |
| | | }, |
| | | watch: { |
| | |
| | | tabs: { |
| | | handler(nV, oV) { |
| | | if (nV != oV && nV.length > 0) { |
| | | // this.activeName = nV[0]; |
| | | this.tabChange(nV); |
| | | this.activeName = nV[0]; |
| | | this.tabChange(nV[0]); |
| | | } |
| | | }, |
| | | immediate: true |
| | | }, |
| | | tabName(nV, oV) { |
| | | if (nV != oV) { |
| | | this.activeName = nV; |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | |
| | | dataList.forEach((d) => { |
| | | if (list.indexOf(d.sceneType) == -1) list.push(d.sceneType); |
| | | }); |
| | | this.tabs = list; |
| | | this.tabs = list.sort(); |
| | | }, |
| | | tabChange(tabName) { |
| | | this.activeName = tabName; |
| | | this.$emit('update:tabName', tabName); |
| | | }, |
| | | deleteMov(item) { |
| | | this.$emit('deleteItem', item); |
| | | itemClick(item) { |
| | | this.$emit('itemClick', item); |
| | | } |
| | | } |
| | | }; |