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> |
||||
@ -1,24 +1,24 @@
|
||||
<template> |
||||
<el-row class="widget-formitem"> |
||||
<el-col class="content-wrapper" :span="18"> |
||||
<slot /> |
||||
<slot></slot> |
||||
</el-col> |
||||
<el-col class="control-wrapper" :span="6"> |
||||
<slot name="right" /> |
||||
<slot name="right"></slot> |
||||
</el-col> |
||||
</el-row> |
||||
</template> |
||||
<style lang="less" scoped> |
||||
.widget-formitem { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 36px; |
||||
margin-bottom: 10px; |
||||
.content-wrapper { |
||||
text-align: left; |
||||
} |
||||
.control-wrapper { |
||||
text-align: right; |
||||
} |
||||
display: flex; |
||||
align-items: center; |
||||
height: 36px; |
||||
margin-bottom: 10px; |
||||
.content-wrapper { |
||||
text-align: left; |
||||
} |
||||
.control-wrapper { |
||||
text-align: right; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue