zkthink
5 years ago
31 changed files with 1199 additions and 510 deletions
@ -0,0 +1,245 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog |
||||||
|
:close-on-click-modal="false" |
||||||
|
:title="title" |
||||||
|
top="25px" |
||||||
|
:visible.sync="isVisible" |
||||||
|
class="goods-dialog" |
||||||
|
@opened="open" |
||||||
|
> |
||||||
|
<div class="product-page"> |
||||||
|
<div class="toolbar"> |
||||||
|
<el-form |
||||||
|
:inline="true" |
||||||
|
:model="formParams" |
||||||
|
> |
||||||
|
<el-form-item> |
||||||
|
<el-input |
||||||
|
v-model="formParams.storeName" |
||||||
|
size="mini" |
||||||
|
placeholder="店铺名称" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
size="mini" |
||||||
|
@click="fetch" |
||||||
|
> |
||||||
|
查询 |
||||||
|
</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
<div class="product-content"> |
||||||
|
<el-table |
||||||
|
ref="multipleTable" |
||||||
|
:data="tableData.records" |
||||||
|
style="width: 100%" |
||||||
|
> |
||||||
|
<el-table-column width="55" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-radio |
||||||
|
v-model="radioId" |
||||||
|
:label="scope.row.id" |
||||||
|
size="medium" |
||||||
|
class="textRadio" |
||||||
|
@change.native="getCurrentRow(scope.row)" |
||||||
|
> </el-radio> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
prop="storeName" |
||||||
|
label="店铺名称" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
prop="mobile" |
||||||
|
label="手机号" |
||||||
|
/> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
<pagination |
||||||
|
v-show="tableData.total > 0" |
||||||
|
:limit.sync="formParams.size" |
||||||
|
:page.sync="formParams.current" |
||||||
|
:total="Number(tableData.total)" |
||||||
|
@pagination="fetch" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div slot="footer" class="add-btn-wrap"> |
||||||
|
<el-button @click="close">取 消</el-button> |
||||||
|
<el-button type="primary" @click="onSubmit">确 定</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import Applet from '@/api/Applet' |
||||||
|
import Pagination from '@/components/Pagination' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
Pagination |
||||||
|
}, |
||||||
|
props: { |
||||||
|
exclude: { |
||||||
|
type: Array, |
||||||
|
default() { |
||||||
|
return [] |
||||||
|
} |
||||||
|
}, |
||||||
|
dialogVisible: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
} |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
tableData: {}, |
||||||
|
formParams: { |
||||||
|
"current": 1, |
||||||
|
"map": {}, |
||||||
|
"model": { |
||||||
|
"id": 0, |
||||||
|
"isAutoSendRefundAddress": 0, |
||||||
|
"logo": "", |
||||||
|
"mobile": "", |
||||||
|
"refundAddress": "", |
||||||
|
"refundContact": "", |
||||||
|
"refundTel": "", |
||||||
|
"remark": "", |
||||||
|
"shipAddress": "", |
||||||
|
"storeName": "" |
||||||
|
}, |
||||||
|
"order": "descending", |
||||||
|
"size": 10, |
||||||
|
"sort": "id" |
||||||
|
}, |
||||||
|
radioId: null |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
isVisible: { |
||||||
|
get () { |
||||||
|
return this.dialogVisible |
||||||
|
}, |
||||||
|
set () { |
||||||
|
this.close() |
||||||
|
this.reset() |
||||||
|
} |
||||||
|
}, |
||||||
|
title () { |
||||||
|
return '选择商品' |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getCurrentRow(row) { |
||||||
|
this.radioId = row.id |
||||||
|
this.selectOneShop = { |
||||||
|
id: row.id, |
||||||
|
storeName: row.storeName |
||||||
|
} |
||||||
|
}, |
||||||
|
async getStorePage () { |
||||||
|
const res = await Applet.getStorePage(this.formParams) |
||||||
|
const resData = res.data |
||||||
|
const { code } = resData |
||||||
|
if (code === 0) { |
||||||
|
this.tableData = resData.data |
||||||
|
} |
||||||
|
}, |
||||||
|
fetch (config) { |
||||||
|
const { limit, page } = config |
||||||
|
this.formParams.current = page || 1 |
||||||
|
this.formParams.size = limit || 10 |
||||||
|
this.getStorePage() |
||||||
|
}, |
||||||
|
editClose () { |
||||||
|
this.dialog.isVisible = false |
||||||
|
}, |
||||||
|
onSubmit () { |
||||||
|
this.$emit('success', [this.selectOneShop]) |
||||||
|
this.close() |
||||||
|
}, |
||||||
|
close () { |
||||||
|
this.$emit('close') |
||||||
|
}, |
||||||
|
open() { |
||||||
|
this.getStorePage() |
||||||
|
}, |
||||||
|
reset () { |
||||||
|
this.radioId = null |
||||||
|
this.formParams = { |
||||||
|
"current": 1, |
||||||
|
"map": {}, |
||||||
|
"model": { |
||||||
|
"id": 0, |
||||||
|
"isAutoSendRefundAddress": 0, |
||||||
|
"logo": "", |
||||||
|
"mobile": "", |
||||||
|
"refundAddress": "", |
||||||
|
"refundContact": "", |
||||||
|
"refundTel": "", |
||||||
|
"remark": "", |
||||||
|
"shipAddress": "", |
||||||
|
"storeName": "" |
||||||
|
}, |
||||||
|
"order": "descending", |
||||||
|
"size": 10, |
||||||
|
"sort": "id" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="less"> |
||||||
|
.add-dialog-component { |
||||||
|
.form-inline{ |
||||||
|
display: inline-block; |
||||||
|
margin: auto; |
||||||
|
} |
||||||
|
.tree-box { |
||||||
|
.el-tree-node__content { |
||||||
|
margin-bottom: 15px; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
<style lang="less" scoped> |
||||||
|
.goods-dialog{ |
||||||
|
/deep/ .el-dialog { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
max-height: 90vh; |
||||||
|
min-width: 1000px; |
||||||
|
overflow: hidden; |
||||||
|
.el-dialog__body { |
||||||
|
flex: 1; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.dialog-from { |
||||||
|
width: 80%; |
||||||
|
margin: auto; |
||||||
|
} |
||||||
|
.btn-wrap { |
||||||
|
margin: 45px auto 0; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.form-item-row { |
||||||
|
padding-top: 40px; |
||||||
|
/deep/ .el-input { |
||||||
|
width: 100px; |
||||||
|
margin: 0 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.product-page { |
||||||
|
padding: 15px 20px; |
||||||
|
.toolbar { |
||||||
|
margin-bottom: 25px; |
||||||
|
.product-name { |
||||||
|
width: 180px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,242 @@ |
|||||||
|
<template> |
||||||
|
<div class="jump-component"> |
||||||
|
<div class="config-title">跳转至</div> |
||||||
|
<el-select |
||||||
|
v-model="item.href" |
||||||
|
placeholder="请选择" |
||||||
|
class="full-input" |
||||||
|
@change="selectHref(item)" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="link in templatePage" |
||||||
|
:key="link.value" |
||||||
|
:label="link.label" |
||||||
|
:value="link.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
<div v-if="item.detailId && item.detailId.length"> |
||||||
|
<div |
||||||
|
v-for="(category, index1) in item.detailId" |
||||||
|
:key="index1" |
||||||
|
class="class-item" |
||||||
|
> |
||||||
|
<div class="left"> |
||||||
|
商品 |
||||||
|
</div> |
||||||
|
<div class="content text-overflow">{{ category.productName }}</div> |
||||||
|
<div class="right"> |
||||||
|
<i class="el-icon-delete" @click="delectGoods(item)"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<a |
||||||
|
v-if="item.hasOwnProperty('detailId') && !item.detailId" |
||||||
|
class="add-shop" |
||||||
|
href="javascript:;" |
||||||
|
@click="addGoods()" |
||||||
|
> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
添加商品 |
||||||
|
</a> |
||||||
|
<div v-if="item.category3Id && item.category3Id.length"> |
||||||
|
<div |
||||||
|
v-for="(category, index2) in item.category3Id" |
||||||
|
:key="index2" |
||||||
|
class="class-item" |
||||||
|
> |
||||||
|
<div class="left"> |
||||||
|
类别 |
||||||
|
</div> |
||||||
|
<div class="content text-overflow">{{ category.categoryName }}</div> |
||||||
|
<div class="right"> |
||||||
|
<i class="el-icon-delete" @click="delectCategory(item)"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<a |
||||||
|
v-if="item.hasOwnProperty('category3Id') && !item.category3Id" |
||||||
|
class="add-shop" |
||||||
|
href="javascript:;" |
||||||
|
@click="addGoodsClass()" |
||||||
|
> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
添加类别 |
||||||
|
</a> |
||||||
|
<div v-if="item.shopId && item.shopId.length"> |
||||||
|
<div |
||||||
|
v-for="(shop, index3) in item.shopId" |
||||||
|
:key="index3" |
||||||
|
class="class-item" |
||||||
|
> |
||||||
|
<div class="left"> |
||||||
|
店铺 |
||||||
|
</div> |
||||||
|
<div class="content text-overflow">{{ shop.storeName }}</div> |
||||||
|
<div class="right"> |
||||||
|
<i class="el-icon-delete" @click="delectShop(item)"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<a |
||||||
|
v-if="item.hasOwnProperty('shopId') && !item.shopId" |
||||||
|
class="add-shop" |
||||||
|
href="javascript:;" |
||||||
|
@click="addShop()" |
||||||
|
> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
添加店铺 |
||||||
|
</a> |
||||||
|
<goods-class |
||||||
|
ref="edit" |
||||||
|
:dialog-visible="dialog1.isVisible" |
||||||
|
:type="dialog1.type" |
||||||
|
:deep="3" |
||||||
|
@close="close1" |
||||||
|
@success="success1" |
||||||
|
/> |
||||||
|
<goods-dialog |
||||||
|
ref="edit" |
||||||
|
:dialog-visible="dialog2.isVisible" |
||||||
|
:type="dialog2.type" |
||||||
|
:radio-state="true" |
||||||
|
@close="close2" |
||||||
|
@success="success2" |
||||||
|
/> |
||||||
|
<shop-dialog |
||||||
|
ref="edit" |
||||||
|
:dialog-visible="dialog3.isVisible" |
||||||
|
:type="dialog3.type" |
||||||
|
:radio-state="true" |
||||||
|
@close="close3" |
||||||
|
@success="success3" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import GoodsClass from '@/components/applet/GoodsClass' |
||||||
|
import GoodsDialog from '@/components/applet/Goods' |
||||||
|
import ShopDialog from '@/components/applet/Shops' |
||||||
|
import { mapState } from 'vuex' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
GoodsClass, |
||||||
|
GoodsDialog, |
||||||
|
ShopDialog |
||||||
|
}, |
||||||
|
props: { |
||||||
|
item: { |
||||||
|
type: Object, |
||||||
|
default() { |
||||||
|
return {} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
dialog1: { |
||||||
|
type: 'add', |
||||||
|
isVisible: false |
||||||
|
}, |
||||||
|
dialog2: { |
||||||
|
type: 'add', |
||||||
|
isVisible: false |
||||||
|
}, |
||||||
|
dialog3: { |
||||||
|
type: 'add', |
||||||
|
isVisible: false |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapState('creationCamp', ['templatePage']), |
||||||
|
currentSub() { |
||||||
|
return this.currentComponentConfig |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
addGoodsClass() { |
||||||
|
this.dialog1.isVisible = true |
||||||
|
}, |
||||||
|
addGoods() { |
||||||
|
this.dialog2.isVisible = true |
||||||
|
}, |
||||||
|
addShop() { |
||||||
|
this.dialog3.isVisible = true |
||||||
|
}, |
||||||
|
success1(obj) { |
||||||
|
this.item.category3Id = [obj] |
||||||
|
}, |
||||||
|
close1() { |
||||||
|
this.dialog1.isVisible = false |
||||||
|
}, |
||||||
|
success2(obj) { |
||||||
|
this.item.detailId = obj |
||||||
|
}, |
||||||
|
close2() { |
||||||
|
this.dialog2.isVisible = false |
||||||
|
}, |
||||||
|
success3(obj) { |
||||||
|
this.item.shopId = obj |
||||||
|
}, |
||||||
|
close3() { |
||||||
|
this.dialog3.isVisible = false |
||||||
|
}, |
||||||
|
selectHref(item) { |
||||||
|
const { href } = item |
||||||
|
var re = /{(.*?)}/g |
||||||
|
const execArray = re.exec(href) |
||||||
|
delete item.detailId |
||||||
|
delete item.category3Id |
||||||
|
delete item.shopId |
||||||
|
if (execArray) { |
||||||
|
this.$set(item, execArray[1], '') |
||||||
|
} |
||||||
|
if (href.indexOf('/') > -1) { |
||||||
|
item.isCustom = false |
||||||
|
} else { |
||||||
|
item.isCustom = true |
||||||
|
} |
||||||
|
}, |
||||||
|
delectGoods(item) { |
||||||
|
item.detailId = '' |
||||||
|
}, |
||||||
|
delectCategory(item) { |
||||||
|
item.category3Id = '' |
||||||
|
}, |
||||||
|
delectShop(item) { |
||||||
|
item.shopId = '' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="less" scoped> |
||||||
|
.jump-component { |
||||||
|
.class-item { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
height: 36px; |
||||||
|
padding: 0 12px; |
||||||
|
margin-top: 10px; |
||||||
|
border: 1px solid #eee; |
||||||
|
font-size: 12px; |
||||||
|
.left { |
||||||
|
color: #409eff; |
||||||
|
} |
||||||
|
.content { |
||||||
|
flex: 1; |
||||||
|
margin: 0 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
.add-shop { |
||||||
|
height: 30px; |
||||||
|
line-height: 30px; |
||||||
|
font-size: 14px; |
||||||
|
color: #409eff; |
||||||
|
border: 1px dashed #ccc; |
||||||
|
text-align: center; |
||||||
|
display: block; |
||||||
|
cursor: pointer; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue