485 lines
13 KiB
Vue
485 lines
13 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-card >
|
|
<div class="top-box">
|
|
<div class="d-s">
|
|
<el-input v-model="queryParams.name" placeholder="请输入油站名称" style="width: 200px;margin-right: 15px;"></el-input>
|
|
<el-select v-model="queryParams.contractDeptId" placeholder="请选择所属机构" style="width: 200px;margin-right: 15px;">
|
|
<el-option
|
|
v-for="item in deptListSelect"
|
|
:key="item.deptId"
|
|
:label="item.deptName"
|
|
:value="item.deptId+''"
|
|
></el-option>
|
|
</el-select>
|
|
<el-select v-model="queryParams.status" placeholder="请选择油站状态" style="width: 200px;margin-right: 15px;">
|
|
<el-option
|
|
v-for="dict in dict.type.zhzt"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"
|
|
/>
|
|
</el-select>
|
|
<el-select v-model="queryParams.turnoverType" placeholder="请选择计费方式" style="width: 200px;margin-right: 15px;">
|
|
<el-option value="1" label="无限制"></el-option>
|
|
<el-option value="2" label="时间限制"></el-option>
|
|
<el-option value="3" label="预付费"></el-option>
|
|
<el-option value="4" label="后付费"></el-option>
|
|
<el-option value="5" label="年付费"></el-option>
|
|
<el-option value="6" label="可创建油站站点数量"></el-option>
|
|
</el-select>
|
|
<el-date-picker
|
|
v-model="beginTime"
|
|
style="width: 140px"
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="开始日期">
|
|
</el-date-picker>
|
|
至
|
|
<el-date-picker
|
|
v-model="endTime"
|
|
style="width: 140px"
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="结束日期">
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="d-s">
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
|
<el-button icon="el-icon-refresh-right" @click="resetQuery">重置</el-button>
|
|
</div>
|
|
|
|
</div>
|
|
<el-table
|
|
:data="tableData"
|
|
border
|
|
style="width: 100%">
|
|
<el-table-column
|
|
type="index"
|
|
label="序号"
|
|
align="center"
|
|
width="50">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
align="center"
|
|
label="油站名称"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="deptName"
|
|
align="center"
|
|
label="所属机构"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="leaderName"
|
|
align="center"
|
|
width="100"
|
|
label="油站负责人"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="leaderPhone"
|
|
align="center"
|
|
label="联系电话"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="turnoverType"
|
|
align="center"
|
|
width="80"
|
|
label="计费方式"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.turnoverType == 1">无限制</span>
|
|
<span v-if="scope.row.turnoverType == 2">时间限制</span>
|
|
<span v-if="scope.row.turnoverType == 3">预付费</span>
|
|
<span v-if="scope.row.turnoverType == 4">后付费</span>
|
|
<span v-if="scope.row.turnoverType == 5">年付费</span>
|
|
<span v-if="scope.row.turnoverType == 6">可创建油站站点数量</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="remind"
|
|
align="center"
|
|
label="到期提醒"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.remind || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="userTotal"
|
|
align="center"
|
|
label="会员人数"
|
|
width="80"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.userTotal || 0 }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="status"
|
|
align="center"
|
|
width="80"
|
|
label="油站状态"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-switch
|
|
v-model="scope.row.status"
|
|
active-value="qy"
|
|
inactive-value="jy"
|
|
active-color="#13ce66"
|
|
inactive-color="#ff4949">
|
|
</el-switch>
|
|
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="createTime"
|
|
align="center"
|
|
label="创建时间"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="date"
|
|
align="center"
|
|
width="180"
|
|
label="操作">
|
|
<template slot-scope="scope">
|
|
<div style="display: flex;justify-content: center;width: 100%">
|
|
<div style="color: #409EFF;cursor: pointer;margin: 0 10px" v-hasPermi="['Service:enter']" @click="enterThePetrolStation(scope.row)">进入油站</div>
|
|
<div style="color: #409EFF;cursor: pointer;margin: 0 10px" @click="godetails(scope.row.id,scope.row.contractDeptId)">查看详情</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div style="margin-top: 20px">
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next"
|
|
:total="total">
|
|
</el-pagination>
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
<!-- <el-card style="margin-top: 20px" v-for="(item,index) in arrlist" :key="index">-->
|
|
<!-- <div slot="header" class="clearfix">-->
|
|
<!-- <span>{{item.storeName || ''}}</span>-->
|
|
|
|
<!-- </div>-->
|
|
<!-- <div class="box-wrap">-->
|
|
<!-- <div class="zong-box" v-for="(items,index) in item.storeList" :key="index" >-->
|
|
<!-- <div class="pur-box" @click="godetails(items.id,items.contractDeptId)">-->
|
|
<!-- <el-tag type="success" v-if="items.status=='qy'">启用</el-tag>-->
|
|
<!-- <el-tag type="danger" v-else>禁用</el-tag>-->
|
|
<!-- <div class="disper-box">-->
|
|
<!-- <div class="box-img">-->
|
|
<!-- <img v-if="items.logo" :src="imagePath + items.logo" style="width: 96px;height: 96px">-->
|
|
<!-- <img v-else src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" style="width: 96px;height: 96px">-->
|
|
<!-- </div>-->
|
|
<!-- <div >-->
|
|
<!-- <div class="title">{{items.name || ''}}</div>-->
|
|
<!-- <div class="box-hui">-->
|
|
<!-- <div>注册时间：</div>-->
|
|
<!-- <div>{{ items.createTime.substring(0,10) || ''}}</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="box-hui">-->
|
|
<!-- <div>联系人：</div>-->
|
|
<!-- <div>{{items.contact || '暂无'}}</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="box-hui">-->
|
|
<!-- <div>联系电话：</div>-->
|
|
<!-- <div>{{items.phone || '暂无'}}</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- </div>-->
|
|
<!-- <div class="hui-bottom">-->
|
|
<!-- <div>-->
|
|
<!-- <div class="shang-biao">{{item.storeList.length || 0}}</div>-->
|
|
<!-- <div class="xia-biao">创建门店数（个）</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div>-->
|
|
<!-- <!– <div class="shang-biao">{{ items.userNum}}</div> –>-->
|
|
<!-- <div class="shang-biao">{{ items.userNum}}</div>-->
|
|
<!-- <div class="xia-biao">会员数（人）</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div>-->
|
|
<!-- <div class="shang-biao">{{ items.orderNum}}</div>-->
|
|
<!-- <div class="xia-biao">支付订单（笔）</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- </div>-->
|
|
<!-- </el-card>-->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
Storelist, getUserNumApi,
|
|
getOrderNumApi, getStorelist, singleSignOnApi
|
|
} from "@/api/service/service";
|
|
import {selectChildByDeptId} from "@/api/system/Site/site";
|
|
export default {
|
|
name: 'service',
|
|
dicts: ['zhzt'],
|
|
data(){
|
|
return{
|
|
total:0,
|
|
options: [{
|
|
value: '选项1',
|
|
label: '黄金糕'
|
|
}, {
|
|
value: '选项2',
|
|
label: '双皮奶'
|
|
}, {
|
|
value: '选项3',
|
|
label: '蚵仔煎'
|
|
}, {
|
|
value: '选项4',
|
|
label: '龙须面'
|
|
}, {
|
|
value: '选项5',
|
|
label: '北京烤鸭'
|
|
}],
|
|
value: '',
|
|
tableData: [{
|
|
date: '2016-05-02',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
}, {
|
|
date: '2016-05-04',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1517 弄'
|
|
}, {
|
|
date: '2016-05-01',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1519 弄'
|
|
}, {
|
|
date: '2016-05-03',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1516 弄'
|
|
}],
|
|
form: {
|
|
name: '',
|
|
region: '',
|
|
date1: '',
|
|
date2: '',
|
|
delivery: false,
|
|
type: [],
|
|
resource: '',
|
|
desc: ''
|
|
},
|
|
imagePath: process.env.VUE_APP_SERVER_URL,
|
|
|
|
arrlist:[],
|
|
value1:'',
|
|
queryParams: {
|
|
name: '',
|
|
contractDeptId:'',
|
|
status: '',
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
|
|
},
|
|
beginTime:"",
|
|
endTime:"",
|
|
deptListSelect:[]
|
|
}
|
|
},
|
|
created() {
|
|
this.getStoreList();
|
|
this.selectChildByDeptIdApi();
|
|
},
|
|
async mounted() {
|
|
await this.getlist()
|
|
},
|
|
methods:{
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
this.queryParams = {
|
|
name: '',
|
|
contractDeptId:'',
|
|
status: '',
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
}
|
|
this.beginTime = ''
|
|
this.endTime = ''
|
|
this.handleQuery();
|
|
},
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
this.queryParams.pageNo = 1;
|
|
this.getStoreList();
|
|
},
|
|
// 查询
|
|
selectChildByDeptIdApi() {
|
|
selectChildByDeptId().then(res => {
|
|
this.deptListSelect = res.data
|
|
})
|
|
},
|
|
getStoreList(){
|
|
let dateRange = []
|
|
if (this.beginTime && this.endTime) {
|
|
dateRange.push(this.beginTime)
|
|
dateRange.push(this.endTime)
|
|
}
|
|
getStorelist(this.addDateRange(this.queryParams,dateRange)).then(res => {
|
|
this.tableData = res.data.records
|
|
this.total = res.data.total
|
|
})
|
|
},
|
|
async getlist(){
|
|
await Storelist(this.queryParams).then(res=>{
|
|
console.log(res)
|
|
this.arrlist = res.data.records
|
|
})
|
|
},
|
|
|
|
res() {
|
|
this.queryParams= {
|
|
storeName: '',
|
|
status: '',
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
|
|
}
|
|
|
|
this.getlist()
|
|
},
|
|
godetails(id,deptId){
|
|
this.$router.push({
|
|
path:'/Service/details',
|
|
query:{
|
|
id:id,
|
|
deptId:deptId
|
|
}
|
|
})
|
|
|
|
},
|
|
enterThePetrolStation(data) {
|
|
if (data.status === 'jy') {
|
|
this.$message('该油站已被禁用');
|
|
|
|
return
|
|
}
|
|
singleSignOnApi(data.id).then(res=>{
|
|
if (res.code == 200) {
|
|
window.open(this.pcUrl+'index?entrance='+data.id)
|
|
}
|
|
})
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.app-container{
|
|
width: 100%;
|
|
height: 100%;
|
|
/* height: 100vh; */
|
|
background: #f9f9f9;
|
|
}
|
|
.ding-top{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
.box-dis{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
.clearfix:after {
|
|
clear: both
|
|
}
|
|
.box-wrap{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.zong-box{
|
|
width: 18%;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
|
margin-bottom: 30px;
|
|
margin-right: 30px;
|
|
}
|
|
.pur-box{
|
|
width: 100%;
|
|
padding: 10px;
|
|
|
|
}
|
|
.disper-box{
|
|
display: flex;
|
|
margin-top: 10px;
|
|
}
|
|
.box-img{
|
|
width: 96px;
|
|
height: 96px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin-right: 10px;
|
|
}
|
|
.box-hui{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #99a9bf;
|
|
margin-top: 4px;
|
|
}
|
|
.title{
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
.hui-bottom{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
background: #fafafc;
|
|
padding: 20px 10px;
|
|
}
|
|
.shang-biao{
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.xia-biao{
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
.top-box{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
}
|
|
.d-s{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|