<template>
|
<div :class="['menuTabs',isOpen?'isOpen':'']">
|
<span
|
:class="['tabName',activeId === item.id?'activeTab':'']"
|
v-for="(item, index) in diyList"
|
:key="item.id"
|
@click="handleClick(item,index)"
|
>
|
<img class="tabImg" :src="srcUrlArr[index]">
|
<span v-show="item.title">{{index ? `${index}-${item.title}` : item.title}}</span>
|
<span v-show="!item.title">{{index>=0 && useSceneMap[item.type]? `${index}-${useSceneMap[item.type]}` : `${index}-热区`}}</span>
|
</span>
|
<span class="icon-btn">
|
<i v-if="!isOpen" @click="tabUpDown(1)" class="el-icon-arrow-down"></i>
|
<i v-else @click="tabUpDown(2)" class="el-icon-arrow-up"></i>
|
</span>
|
<el-dialog :visible.sync="dialogVisible" :title="title" width="400px" :close-on-click-modal="false" :modal-append-to-body="false" v-if="dialogVisible">
|
<el-form ref="form" size="mini" @submit.native.prevent :model="form">
|
<el-form-item prop="title" :rules="titleRules">
|
<el-input v-model="form.title" @keyup.enter.native="submit" placeholder="请输入标题名称"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="submit" type="primary">确定</el-button>
|
<el-button size="mini" @click="dialogVisible = false">取消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
export default {
|
props: ['useSceneMap', 'useSceneArray'],
|
data () {
|
return {
|
tabIndex: 1,
|
isOpen: false,
|
clickTimes: 0,
|
dialogVisible: false,
|
title: null,
|
form: { title: null },
|
titleRules: [
|
{ required: true, message: '请输入标题名称', trigger: 'change' },
|
{ max: 6, message: '标题名称最多只能输入 6 个字' }
|
],
|
clickData: null
|
}
|
},
|
computed: {
|
...mapState(['diyList', 'mousedown']),
|
hotAreaTabs () {
|
return this.diyList
|
},
|
activeId () {
|
this.$emit('get-tab', this.mousedown.activeId)
|
return this.mousedown.activeId
|
},
|
srcUrlArr () {
|
const srcUrlArr = []
|
this.diyList.forEach(item => {
|
this.useSceneArray.forEach(i => {
|
if (i.value === item.type) {
|
srcUrlArr.push(require('../../../../assets/img/' + i.src))
|
}
|
})
|
if (item.type === 'basicSet') {
|
srcUrlArr.push(require('../../../../assets/img/basicSet.png'))
|
}
|
if (!item.type) {
|
srcUrlArr.push('')
|
}
|
})
|
return srcUrlArr
|
}
|
},
|
created () {
|
const arr = this.hotAreaTabs.filter((v) => {
|
return v.id === this.activeId
|
})
|
arr.length && this.$emit('get-tab', arr[0].type)
|
},
|
methods: {
|
/**
|
* 修改diy热区名字
|
*/
|
submit () {
|
this.$refs.form.validate().then(res => {
|
if (this.diyList.find(v => {
|
return this.clickData.id !== v.id && v.title === this.form.title
|
})) {
|
this.$message({
|
type: 'info',
|
message: `${this.form.title}已存在`
|
})
|
return
|
}
|
this.$set(this.clickData, 'title', this.form.title)
|
this.dialogVisible = false
|
})
|
},
|
handleClick (val, index) {
|
const _this = this
|
_this.clickTimes++
|
if (_this.clickTimes === 2) {
|
_this.clickTimes = 0
|
if (val.type !== 'basicSet') {
|
_this.dialogVisible = true
|
_this.title = val.title ? `修改 ${index}-${val.title}` : `修改 ${index}-${this.useSceneMap[val.type]}`
|
_this.clickData = val
|
_this.form.title = val.title ? val.title : this.useSceneMap[val.type]
|
}
|
}
|
setTimeout(function () {
|
if (_this.clickTimes === 1) {
|
// 单击事件
|
_this.clickTimes = 0
|
val.isActive = true
|
_this.mousedown.activeId = val.id
|
_this.$emit('get-tab', val.id)
|
}
|
}, 300)
|
// document.body.scrollTop = document.getElementById('main-container').scrollTop = 0
|
},
|
/**
|
* 表格收起展开
|
*/
|
tabUpDown (val) {
|
this.isOpen = val === 1
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.menuTabs {
|
// background-color: #f5f7fa;
|
border-bottom: 4px solid #fafafa;
|
// box-shadow:2px 2px 5px rgba(0,0,0,0.2);
|
height: 82px;
|
overflow: hidden;
|
position: relative;
|
.tabName{
|
height: 40px;
|
display: inline-block;
|
padding: 20px 30px;
|
line-height: 40px;
|
border: 1px solid transparent;
|
color: #333333;
|
cursor: pointer;
|
font-weight: 400;
|
.tabImg{
|
display: block;
|
margin: 0 auto;
|
}
|
}
|
.activeTab{
|
color: #d70012;
|
// background-color: #fff;
|
// border-left-color: #dcdfe6;
|
// border-right-color: #dcdfe6;
|
}
|
.icon-btn{
|
position: absolute;
|
top: 30%;
|
right: 10px;
|
i{
|
cursor: pointer;
|
}
|
}
|
}
|
.isOpen{
|
height: auto;
|
}
|
</style>
|
