You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
346 lines
10 KiB
346 lines
10 KiB
<template>
|
|
<div class="module-box link-select" :class="styleType && 'style'+styleType">
|
|
<div class="link-select__warp">
|
|
<div class="module-box__title">
|
|
<label class="module-box__label">{{title}}</label>
|
|
</div>
|
|
<el-select class="link-select__select" :popper-append-to-body="false" v-model="selsectValue" placeholder="请选择跳转到的页面" @change="selectChanged">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="link-select__confirm" v-show="confirmBtnVisible">
|
|
<div class="btn" v-if="!selectName" @click="openDialog">
|
|
<span class="iconfont"></span> 添加{{typeText}}
|
|
</div>
|
|
<div class="info" v-else>
|
|
<span class="text">{{typeText}}</span>
|
|
<span class="name">{{selectName}}</span>
|
|
<span class="iconfont" @click="openDialog"></span>
|
|
<span class="iconfont" @click="delSelect"></span>
|
|
</div>
|
|
</div>
|
|
<el-dialog width="600px" title="选择类别" :visible.sync="categoryVisible">
|
|
<category-select ref="categorySelect"></category-select>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="categoryVisible = false">{{ $t('common.cancel') }}</el-button>
|
|
<el-button type="primary" @click="categoryChanged">{{ $t('common.sure') }}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<el-dialog title="选择商品" :visible.sync="productVisible">
|
|
<product-select ref="productSelect"></product-select>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="productVisible = false">{{ $t('common.cancel') }}</el-button>
|
|
<el-button type="primary" @click="productChanged">{{ $t('common.sure') }}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<el-dialog title="选择店辅" :visible.sync="shopVisible">
|
|
<shop-select ref="shopSelect"></shop-select>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="shopVisible = false">{{ $t('common.cancel') }}</el-button>
|
|
<el-button type="primary" @click="shopChanged">{{ $t('common.sure') }}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<el-dialog title="选择自定义页面" :visible.sync="customVisible">
|
|
<custom-page-select ref="customPageSelect"></custom-page-select>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="customVisible = false">{{ $t('common.cancel') }}</el-button>
|
|
<el-button type="primary" @click="customChanged">{{ $t('common.sure') }}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<el-dialog title="选择公告" :visible.sync="noticeVisible">
|
|
<notice-select ref="noticeSelect"></notice-select>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="noticeVisible = false">{{ $t('common.cancel') }}</el-button>
|
|
<el-button type="primary" @click="noticeChanged">{{ $t('common.sure') }}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ProductSelect from './product-select'
|
|
import ShopSelect from './shop-select'
|
|
import CategorySelect from './category-select'
|
|
import CustomPageSelect from './custom-page-select'
|
|
import NoticeSelect from "./notice-select";
|
|
export default {
|
|
name: 'tool-select-link',
|
|
components: {NoticeSelect, CustomPageSelect, CategorySelect, ShopSelect, ProductSelect },
|
|
data () {
|
|
return {
|
|
selsectValue: '',
|
|
confirmBtnVisible: false,
|
|
selectName: '',
|
|
typeText: '',
|
|
productVisible: false,
|
|
shopVisible: false,
|
|
categoryVisible: false,
|
|
customVisible: false,
|
|
noticeVisible: false
|
|
}
|
|
},
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: '链接'
|
|
},
|
|
styleType: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
linkObj: {
|
|
type: Object,
|
|
default: () => ({
|
|
selsectValue: '',
|
|
selectName: '',
|
|
typeText: '',
|
|
url: ''
|
|
})
|
|
},
|
|
options: {
|
|
type: Array,
|
|
default: () => [
|
|
// {
|
|
// value: '/index',
|
|
// label: '首页'
|
|
// },
|
|
{
|
|
value: '/category',
|
|
label: '分类页面'
|
|
},
|
|
{
|
|
value: '/shop',
|
|
label: '店辅主页'
|
|
},
|
|
{
|
|
value: '/detail',
|
|
label: '商品详情'
|
|
},
|
|
{
|
|
value: '/notice',
|
|
label: '公告'
|
|
},
|
|
// {
|
|
// value: '/custom',
|
|
// label: '自定义页面'
|
|
// }
|
|
]
|
|
}
|
|
},
|
|
mounted () {
|
|
this.selsectValue = this.linkObj.selsectValue
|
|
this.selectName = this.linkObj.selectName
|
|
this.typeText = this.linkObj.typeText
|
|
this.confirmBtnVisible = this.selsectValue !== '/index' && this.selsectValue
|
|
},
|
|
methods: {
|
|
// 链接选择
|
|
selectChanged (value) {
|
|
this.categoryVisible = false
|
|
this.shopVisible = false
|
|
this.productVisible = false
|
|
this.confirmBtnVisible = true
|
|
this.selectName = ''
|
|
this.typeText = ''
|
|
switch (value) {
|
|
case '/category':
|
|
this.typeText = '类别'
|
|
break
|
|
case '/shop':
|
|
this.typeText = '店辅'
|
|
break
|
|
case '/detail':
|
|
this.typeText = '商品'
|
|
break
|
|
case '/custom':
|
|
this.typeText = '自定义'
|
|
case '/notice':
|
|
this.typeText = '公告'
|
|
break
|
|
default:
|
|
this.confirmBtnVisible = false
|
|
let linkObj = {
|
|
selsectValue: this.selsectValue,
|
|
selectName: '',
|
|
typeText: '',
|
|
url: '/'
|
|
}
|
|
this.$emit('update:linkObj', linkObj)
|
|
}
|
|
},
|
|
// 打开添加弹窗
|
|
openDialog () {
|
|
switch (this.typeText) {
|
|
case '类别':
|
|
this.categoryVisible = true
|
|
break
|
|
case '店辅':
|
|
this.shopVisible = true
|
|
break
|
|
case '商品':
|
|
this.productVisible = true
|
|
break
|
|
case '自定义':
|
|
this.customVisible = true
|
|
case '公告':
|
|
this.noticeVisible = true
|
|
break
|
|
}
|
|
},
|
|
// 类别选择
|
|
categoryChanged () {
|
|
let nodesObj = this.$refs.categorySelect.$refs['cascader'].getCheckedNodes()
|
|
if (nodesObj) {
|
|
var data = nodesObj[0].data
|
|
this.selectName = nodesObj[0].label
|
|
this.categoryVisible = false
|
|
let linkObj = {
|
|
selsectValue: this.selsectValue,
|
|
selectName: this.selectName,
|
|
typeText: this.typeText,
|
|
data: data
|
|
}
|
|
this.$emit('update:linkObj', linkObj)
|
|
}
|
|
},
|
|
// 商品选择
|
|
productChanged () {
|
|
console.log(this.$refs.productSelect)
|
|
var data = this.$refs.productSelect.tableRadio
|
|
this.productVisible = false
|
|
this.selectName = this.$refs.productSelect.tableRadio.productName
|
|
let linkObj = {
|
|
selsectValue: this.selsectValue,
|
|
selectName: this.selectName,
|
|
typeText: this.typeText,
|
|
data: data
|
|
}
|
|
this.$emit('update:linkObj', linkObj)
|
|
},
|
|
// 店辅选择
|
|
shopChanged () {
|
|
var data = this.$refs.shopSelect.tableRadio
|
|
this.shopVisible = false
|
|
this.selectName = this.$refs.shopSelect.tableRadio.shopName
|
|
let linkObj = {
|
|
selsectValue: this.selsectValue,
|
|
selectName: this.selectName,
|
|
typeText: this.typeText,
|
|
data: data
|
|
}
|
|
this.$emit('update:linkObj', linkObj)
|
|
},
|
|
// 自定义页面选择
|
|
customChanged () {
|
|
var data = this.$refs.customPageSelect.tableRadio
|
|
this.customVisible = false
|
|
this.selectName = this.$refs.customPageSelect.tableRadio.name
|
|
let linkObj = {
|
|
selsectValue: this.selsectValue,
|
|
selectName: this.selectName,
|
|
typeText: this.typeText,
|
|
data: data
|
|
}
|
|
this.$emit('update:linkObj', linkObj)
|
|
},
|
|
// 公告选择
|
|
noticeChanged () {
|
|
var data = this.$refs.noticeSelect.tableRadio
|
|
this.noticeVisible = false
|
|
this.selectName = this.$refs.noticeSelect.tableRadio.noticeTitle
|
|
let linkObj = {
|
|
selsectValue: this.selsectValue,
|
|
selectName: this.selectName,
|
|
typeText: this.typeText,
|
|
data: data
|
|
}
|
|
this.$emit('update:linkObj', linkObj)
|
|
},
|
|
// 删除选择
|
|
delSelect () {
|
|
let linkObj = {
|
|
selsectValue: '',
|
|
selectName: '',
|
|
typeText: '',
|
|
data: {}
|
|
}
|
|
this.$emit('update:linkObj', linkObj)
|
|
}
|
|
},
|
|
watch: {
|
|
linkObj: {
|
|
handler (newVal, oldVal) {
|
|
this.selsectValue = newVal.selsectValue
|
|
this.selectName = newVal.selectName
|
|
this.typeText = newVal.typeText
|
|
this.confirmBtnVisible = this.selsectValue !== '/index' && this.selsectValue
|
|
},
|
|
deep: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.link-select{
|
|
&__select{
|
|
width: 100%;
|
|
}
|
|
&__confirm{
|
|
margin-top: 10px;
|
|
.btn{
|
|
text-align: center;
|
|
background-color: $mainColor;
|
|
color: #fff;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.info{
|
|
height: 36px;
|
|
line-height: 36px;
|
|
border-radius: 4px;
|
|
padding: 0 10px;
|
|
border:1px solid $mainColor;
|
|
display: flex;
|
|
.text{
|
|
color: $mainColor;
|
|
}
|
|
.name{
|
|
flex: 1;
|
|
margin-left: 10px;
|
|
overflow: hidden;
|
|
text-overflow:ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.iconfont{
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
&.style1{
|
|
.link-select__warp{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
align-items: center;
|
|
}
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
.module-box__title{
|
|
margin-bottom: 0;
|
|
}
|
|
.link-select__select{
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|