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.

189 lines
4.1 KiB

<template>
<div style="padding: 0 20px">
<div ref="lxHeader">
<lx-header icon="md-apps" text="门店管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<div slot="content"></div>
<slot>
<div>
<Input clearable style="width: 200px; margin-right: 10px" v-model="select.keywords" placeholder="关键字搜索" />
<Button type="primary" @click="getStores" style="margin-right: 10px;">查询</Button>
<Button type="primary" @click="$refs['addStore'].isShow = true,$refs['addStore'].type = 'add'" style="margin-right: 10px;">新增</Button>
</div>
</slot>
</lx-header>
</div>
<xy-table :total="total" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange" :list="list" :table-item="tableItem" @delete="deleteStore" @editor="editorStore"></xy-table>
<!-- 新增门店-->
<add-store ref="addStore" @refresh="getStores"></add-store>
</div>
</template>
<script>
import {index,destroy} from '@/api/shop'
import addStore from '@/views/business/component/addStore'
import { Message } from 'element-ui'
export default {
components:{
addStore
},
data() {
return {
select:{
pageIndex:1,
pageSize:10,
keywords:''
},
total:0,
list:[],
tableItem:[
{
prop:'name',
label:'名称/用户名',
align:'left',
width:140
},
{
prop:'merchant.name',
label:'所属商户',
width:220,
align:'left'
},
{
prop:'address',
label:'地址',
width: 300,
align:'left'
},
{
prop:'contact',
label:'联系人',
width: 120
},
{
prop:'phone',
label:'联系电话',
width: 160
},
{
prop:'state',
label:'状态',
width: 120,
customFn:(row)=>{
if(row.state == 1 || row.state == 'active'){
return (<div style={{'color':'green'}}>启用</div>)
}else{
return (<div style={{'color':'red'}}>禁用</div>)
}
}
},
{
label:'是否为主营门店',
prop:'is_default',
width: 150,
customFn:(row)=>{
if(row.is_default == 1){
return (<div style={{'color':'green'}}>是</div>)
}else{
return (<div style={{'color':'red'}}>否</div>)
}
}
}
]
}
},
methods: {
pageSizeChange(e){
this.select.pageSize = e
this.doSearch();
},
doSearch(){
this.select.pageIndex = 1
this.getStores()
},
async getStores(){
const res = await index({
page_size:this.select.pageSize,
page:this.select.pageIndex,
keyword:this.select.keywords
})
this.list = res.data
this.total = res.total
},
pageChange(e){
this.select.pageIndex = e
this.getStores()
},
deleteStore(row){
destroy({
id:row.id
}).then(res => {
Message({
type:'success',
message:'删除成功'
})
this.getStores()
})
},
editorStore(row){
this.$refs['addStore'].type = 'editor'
this.$refs['addStore'].id = row.id
this.$refs['addStore'].isShow = true
}
},
mounted() {
this.getStores()
}
}
</script>
<style scoped lang="scss">
.selects {
display: flex;
flex-wrap: wrap;
&-item{
display: flex;
align-items: center;
justify-content: center;
margin-top: 6px;
&-label{
white-space: nowrap;
padding: 0px 6px;
}
}
}
.select-content-item{
display: flex;
align-items: center;
margin-bottom: 10px;
&-label{
padding: 0 20px;
}
}
$primaryColor: #bf617c;
::v-deep .ivu-alert-success{
color:#fff;
border-color: $primaryColor !important;
background: rgba(213, 120, 145, 0.8) !important;
margin: auto 0;
margin-right: 10px;
}
::v-deep .ivu-icon-ios-close:before{
color: #fff;
}
</style>