333 行
14 KiB
HTML
可执行文件
333 行
14 KiB
HTML
可执行文件
<!--[1.9.13]-->
|
|
<style>
|
|
.search-form .el-form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.table-operate-title-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #ecf5ff;
|
|
padding: 8px 10px;
|
|
margin-bottom: 2px;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" type="text/css" href="/Public/css/component-permission.css?v=1.0.1"/>
|
|
<div id="storeApp">
|
|
<!--搜索栏-->
|
|
<el-form :inline="true" class="search-form" size="small" style="margin-bottom: 10px">
|
|
<el-form-item>
|
|
<el-input v-model="searchForm.store_name" placeholder="请输入门店名称"
|
|
@keydown.enter.exact.native.prevent="handleCurrentChange(1)"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<select-industry :industry-id.sync="searchForm.industry_id" @change="handleCurrentChange(1)"
|
|
:show-common="true"></select-industry>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-select v-model="searchForm.store_class" @click="handleCurrentChange(1)" placeholder="门店类型">
|
|
<el-option label="直营店" value="1"></el-option>
|
|
<el-option label="加盟店" value="2"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" plain @click="handleCurrentChange(1)">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="table-operate-title-box"
|
|
v-if="operate.manageSet||operate.store_type_set||operate.addStore||operate.delStore">
|
|
<div>
|
|
<el-button size="small" v-if="operate.manageSet" @click="manageSet">开启/关闭门店</el-button>
|
|
|
|
<el-button size="small" v-if="operate.store_type_set" @click="storeTypeSet">主店设置</el-button>
|
|
|
|
<el-button size="small" v-if="operate.addStore" @click="addStore">
|
|
<i class="el-icon-circle-plus-outline"></i>
|
|
<span>添加门店</span>
|
|
</el-button>
|
|
</div>
|
|
|
|
<el-button size="small" v-if="operate.delStore" @click="delStore">
|
|
<i class="el-icon-delete"></i>
|
|
<span>删除门店</span>
|
|
</el-button>
|
|
</div>
|
|
<!--门店列表-->
|
|
<div>
|
|
<el-table :data="storeList" border size="medium" :header-cell-style="{background:'#F5F7FA',color:'#606266'}">
|
|
<el-table-column type="index" label="序号" fixed="left" width="50" align="center"></el-table-column>
|
|
<el-table-column prop="id" label="门店ID" fixed="left" width="80" align="center"></el-table-column>
|
|
<el-table-column label="门头照片" width="80" align="center">
|
|
<template slot-scope="scope">
|
|
<el-image style="width: 50px;max-height: 50px;max-width: 50px;" :src="scope.row.shopimg_url">
|
|
<div slot="error" class="image-slot">
|
|
<i class="el-icon-picture-outline"></i>
|
|
</div>
|
|
</el-image>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="store_name" label="门店名称" min-width="150" align="center"></el-table-column>
|
|
<el-table-column prop="industry_name" label="所属行业" min-width="100" align="center" show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column prop="store_type" label="经营类型" min-width="100" align="center" show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column label="门店地址" min-width="150" align="center">
|
|
<template slot-scope="scope">
|
|
<span v-text="scope.row.province"></span>
|
|
<span v-text="scope.row.city"></span>
|
|
<span v-text="scope.row.area"></span>
|
|
<span v-text="scope.row.detail_address"></span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="shop_manager" label="店长" min-width="80" align="center" show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column prop="tel" label="联系电话" min-width="120" align="center" show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column label="操作" fixed="right" width="140" align="center">
|
|
<template slot-scope="scope">
|
|
<div
|
|
style="width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
|
|
<el-button v-if="operate.manageStore" type="primary" plain size="mini"
|
|
icon="el-icon-edit-outline" style="margin-left: 0;margin-bottom: 5px;"
|
|
@click="toEditStore(scope.row.id)">
|
|
门店后台
|
|
</el-button>
|
|
<el-dropdown
|
|
v-if="operate.editStore||operate.daDaDelivery||operate.jurisdiction||operate.qrCode||operate.permission">
|
|
<el-button type="primary" plain size="mini" icon="el-icon-menu">
|
|
更多管理
|
|
</el-button>
|
|
<el-dropdown-menu slot="dropdown" size="mini">
|
|
<el-dropdown-item v-if="operate.editStore" @click.native="editStore(scope.row.id)">
|
|
信息管理
|
|
</el-dropdown-item>
|
|
|
|
<el-dropdown-item v-if="operate.daDaDelivery"
|
|
@click.native="dadaDelivery(scope.row.id)">达达配送
|
|
</el-dropdown-item>
|
|
|
|
<el-dropdown-item v-if="operate.jurisdiction"
|
|
@click.native="jurisdiction(scope.row.id)">使用限制
|
|
</el-dropdown-item>
|
|
|
|
<el-dropdown-item v-if="operate.permission"
|
|
@click.native="openPermission(scope.row.id)">门店权限
|
|
</el-dropdown-item>
|
|
|
|
<el-dropdown-item v-if="operate.qrCode" @click.native="downloadStoreCode(scope.row.id)">
|
|
门店二维码
|
|
</el-dropdown-item>
|
|
|
|
<el-dropdown-item v-if="operate.qrCode" @click.native="oauth(scope.row.id)">
|
|
门店授权
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination v-if="currentLen>0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
:current-page="searchForm.page" :page-sizes="[5, 10, 15]" :page-size="5"
|
|
layout="total, sizes, prev, pager, next, jumper" :total="currentLen">
|
|
</el-pagination>
|
|
</div>
|
|
<!-- 权限 -->
|
|
<edit-next-role :show.sync="permissionDialogVisible" :id="permissionStoreId" :type="4"></edit-next-role>
|
|
</div>
|
|
<script charset="utf-8" type="text/javascript" src="__PUBLIC__/Retail/common/js/select-industry.js"></script>
|
|
<script charset="utf-8" type="text/javascript" src="/Public/js/component-permission.js?v=1.0.2"></script>
|
|
<script charset="utf-8" type="text/javascript" src="/Public/js/component-operator.js?v=1.0.1"></script>
|
|
<script type="text/javascript">
|
|
var storeApp = new Vue({
|
|
el: "#storeApp",
|
|
data: {
|
|
searchForm: {
|
|
store_name: '',
|
|
store_class: '',
|
|
industry_id: '',
|
|
page: 1,
|
|
limit: 5,
|
|
},
|
|
currentLen: 0,
|
|
storeList: [],
|
|
operate: {},
|
|
permissionDialogVisible: false, //权限选择窗口
|
|
permissionStoreId: '', //当前正在处理的门店ID
|
|
},
|
|
methods: {
|
|
//管理门店
|
|
manageSet() {
|
|
MenuApp.pathData.push({
|
|
name: '开启/关闭门店',
|
|
path: '/index.php/Retail/Store/manageSet',
|
|
onClose: () => {
|
|
this.getData();
|
|
}
|
|
})
|
|
},
|
|
//主店设置
|
|
storeTypeSet() {
|
|
MenuApp.pathData.push({
|
|
name: '主店设置',
|
|
path: '/index.php/Retail/Store/store_type_set',
|
|
onClose: () => {
|
|
this.getData();
|
|
}
|
|
})
|
|
},
|
|
//删除门店
|
|
delStore() {
|
|
MenuApp.pathData.push({
|
|
name: '删除门店',
|
|
path: '/index.php/Retail/Store/delstore',
|
|
onClose: () => {
|
|
this.getData();
|
|
}
|
|
})
|
|
},
|
|
//切换每页数量
|
|
handleSizeChange(val) {
|
|
this.searchForm.limit = val;
|
|
this.searchForm.page = 1;
|
|
this.getData();
|
|
},
|
|
//切换页数
|
|
handleCurrentChange(val) {
|
|
this.searchForm.page = val;
|
|
this.getData();
|
|
},
|
|
//获取门店列表
|
|
getData() {
|
|
this.sendRequest('Retail/Store/getStoreList', {
|
|
data: this.searchForm,
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.storeList = [];
|
|
this.storeList = res.data;
|
|
this.currentLen = parseInt(res.count);
|
|
} else {
|
|
this.$message.error(res.message)
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//新增门店
|
|
addStore() {
|
|
layer.open({
|
|
type: 2,
|
|
title: '添加门店',
|
|
area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
|
|
offset: 'rb',
|
|
shade: 0,
|
|
content: '/index.php/Retail/Store/addstore',
|
|
end: () => {
|
|
this.getData();
|
|
}
|
|
});
|
|
},
|
|
//编辑门店信息
|
|
editStore(id) {
|
|
layer.open({
|
|
type: 2,
|
|
title: "门店管理--修改门店",
|
|
content: "{:U('/Retail/Store/editstore')}?id=" + id,
|
|
area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
|
|
offset: 'rb',
|
|
shade: 0,
|
|
move: false,
|
|
end: () => {
|
|
this.getData();
|
|
}
|
|
})
|
|
},
|
|
//门店后台管理
|
|
toEditStore(id) {
|
|
this.sendRequest('Retail/Store/toStore', {
|
|
data: {store_id: id},
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
location.href = "{:U('/Retail/Menu/index')}";
|
|
} else {
|
|
this.$message.error(res.message)
|
|
}
|
|
}
|
|
});
|
|
},
|
|
dadaDelivery(id) {
|
|
this.$confirm('确认将该门店信息同步到达达配送?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
}).then(() => {
|
|
this.sendRequest('Retail/Store/dadadelivery', {
|
|
data: {storeid: id},
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.$message.success(res.message);
|
|
} else {
|
|
this.$message.error(res.message)
|
|
}
|
|
}
|
|
});
|
|
}).catch(() => {
|
|
|
|
});
|
|
},
|
|
jurisdiction(id) {
|
|
layer.open({
|
|
type: 2,
|
|
title: "门店管理--使用限制",
|
|
content: "{:U('/Retail/Jurisdiction/index')}?id=" + id,
|
|
area: ['800px', '600px'],
|
|
anim: 2,
|
|
offset: '100px',
|
|
isOutAnim: true,
|
|
resize: false,
|
|
})
|
|
},
|
|
downloadStoreCode(id) {
|
|
this.sendRequest('Retail/Store/qrcode', {
|
|
data: {store_id: id},
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
window.open("{:U('downloadImg')}?url=" + res.pic_url + "&pic_name=" + res.pic_name)
|
|
} else {
|
|
this.$message.error(res.message)
|
|
}
|
|
}
|
|
});
|
|
},
|
|
oauth(id) {
|
|
window.open("{:U('maiyatian/express/oauth')}?id=" + id)
|
|
},
|
|
getOperate() {
|
|
this.checkOperateAuth({
|
|
addStore: '/index.php/Retail/Store/addstore',
|
|
editStore: '/index.php/Retail/Store/editstore',
|
|
delStore: '/index.php/Retail/Store/delstore',
|
|
store_type_set: '/index.php/Retail/Store/store_type_set',
|
|
manageSet: '/index.php/Retail/Store/manageSet',
|
|
daDaDelivery: '/index.php/Retail/Store/dadadelivery',
|
|
jurisdiction: '/index.php/Retail/Store/jurisdiction',
|
|
qrCode: '/index.php/Retail/Store/qrcode',
|
|
manageStore: '/index.php/Retail/Index/index',
|
|
permission: '/index.php/Retail/MerchantRoles/setStoreRole'
|
|
}, (data) => {
|
|
this.operate = data;
|
|
})
|
|
},
|
|
/**
|
|
* @description 获取门店权限
|
|
* @param {Number} storeId 门店ID
|
|
*/
|
|
openPermission(id) {
|
|
this.permissionStoreId = id;
|
|
this.permissionDialogVisible = true;
|
|
},
|
|
},
|
|
created() {
|
|
this.getOperate();
|
|
this.getData();
|
|
},
|
|
});
|
|
</script> |