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.
295 lines
8.8 KiB
295 lines
8.8 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 style="display: flex">
|
|
<Input clearable v-model="select.keywords" style="width: 200px; margin-right: 10px" placeholder="关键字搜索" />
|
|
<xy-selectors @search="getClubProduct">
|
|
<template v-slot:selected>
|
|
<div style="display: flex;padding: 0 0 10px 20px;">
|
|
<span style="padding-right: 6px">当前搜索条件：</span>
|
|
<div v-if="select.confinementServices">
|
|
<el-tag effect="light" size="small" closable @close="select.confinementServices = ''">
|
|
{{select.confinementServices.name}}
|
|
</el-tag>,
|
|
</div>
|
|
<div v-if="select.state === 0 || select.state === 1">
|
|
<el-tag effect="light" size="small" closable @close="select.state = ''">
|
|
{{select.state === 0 ? '有效' : '无效'}}
|
|
</el-tag>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template>
|
|
<div class="select-content-item">
|
|
<div class="select-content-item-label">
|
|
所属会所
|
|
</div>
|
|
<div>
|
|
<el-select size="small" clearable :value="select.confinementServices ? select.confinementServices.name : ''" style="width: 220px;" placeholder="请选择所属月子会所" @change="e => select.confinementServices = e">
|
|
<Scroll :on-reach-bottom="loadMoreClub">
|
|
<el-option v-for="item in clubs" :value="item" :key="item.id" :label="item.name">
|
|
</el-option>
|
|
</Scroll>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="select-content-item">
|
|
<div class="select-content-item-label">
|
|
状态
|
|
</div>
|
|
<div>
|
|
<el-radio v-model="select.state" :label="0">未启用</el-radio>
|
|
<el-radio v-model="select.state" :label="1">启用</el-radio>
|
|
<el-radio v-model="select.state" label="">全部</el-radio>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</xy-selectors>
|
|
|
|
<Button type="primary" @click="getClubProduct">查询</Button>
|
|
<Button type="primary" style="margin-left: 10px" @click="$refs['addClubProduct'].type = 'add',$refs['addClubProduct'].isShow = true">新增</Button>
|
|
</div>
|
|
</slot>
|
|
</lx-header>
|
|
</div>
|
|
|
|
<xy-table
|
|
:total="total"
|
|
:list="list"
|
|
:table-item="table"
|
|
@pageSizeChange="e => select.pageSize = e"
|
|
@pageIndexChange="pageChange">
|
|
<template v-slot:btns>
|
|
<el-table-column fixed="right" label="操作" :width="130" align="left" header-align="center">
|
|
<template slot-scope="scope">
|
|
<Poptip trigger="hover" transfer placement="bottom">
|
|
<Button ghost size="small" type="primary" style="margin: 0 6px 4px 0">编辑</Button>
|
|
|
|
<div slot="content" style="display:flex;flex-direction: column">
|
|
<Button size="small" type="primary" @click="editorClick(scope.row)" style="margin: 0 6px 4px 0">产品编辑</Button>
|
|
<Button size="small" type="primary" style="margin: 0 6px 4px 0" @click="comboClick(scope.row)">产品套餐</Button>
|
|
<Button size="small" type="primary" style="margin: 0 6px 4px 0" @click="picClick(scope.row)">产品图片</Button>
|
|
</div>
|
|
</Poptip>
|
|
|
|
<Poptip confirm transfer title="确认要删除吗" @on-ok="destroyProduct(scope.row)">
|
|
<Button ghost size="small" type="primary" style="margin: 0 6px 4px 0">删除</Button>
|
|
</Poptip>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
</xy-table>
|
|
|
|
<addClubProduct ref="addClubProduct" @refresh="getClubProduct"></addClubProduct>
|
|
<addProductCombo ref="addProductCombo"></addProductCombo>
|
|
<addProductPic ref="addProductPic"></addProductPic>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {index,destroy} from '@/api/clubProduct'
|
|
import { parseTime } from '@/utils'
|
|
import { Message } from 'element-ui'
|
|
|
|
import addClubProduct from '@/views/productService/components/confinement/addClubProduct'
|
|
import addProductCombo from '@/views/productService/components/confinement/addProductCombo'
|
|
import addProductPic from '@/views/productService/components/confinement/addProductPic'
|
|
import { index as clubIndex } from '@/api/confinementClub'
|
|
export default {
|
|
components:{
|
|
addClubProduct,
|
|
addProductCombo,
|
|
addProductPic
|
|
},
|
|
data() {
|
|
return {
|
|
clubs:[],
|
|
clubSelect:{
|
|
pageSize:10,
|
|
page:1
|
|
},
|
|
|
|
select:{
|
|
page:1,
|
|
pageSize:10,
|
|
keywords:'',
|
|
confinementServices:'',
|
|
state:''
|
|
},
|
|
|
|
total:0,
|
|
list:[],
|
|
table:[
|
|
{
|
|
prop:'name',
|
|
label:'名称',
|
|
minWidth: 240,
|
|
fixed:'left',
|
|
align:'left'
|
|
},
|
|
{
|
|
label:'所属会所',
|
|
prop:'service.name',
|
|
width: 220,
|
|
align:'left'
|
|
},
|
|
{
|
|
label:'产品信息',
|
|
width: 300,
|
|
align:'left',
|
|
customFn:(row)=>{
|
|
return (
|
|
<div>
|
|
<div>房间朝向：{row.room_orientation}</div>
|
|
<div>房间面积：{row.room_area}(平方米)</div>
|
|
<div>房间价格：{row.price}(元)</div>
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
label:'特色标签',
|
|
width: 260,
|
|
align:'left',
|
|
prop:'featured_label',
|
|
customFn:(row) => {
|
|
return (
|
|
<div>
|
|
{
|
|
row.featured_label ?
|
|
row.featured_label?.split(',').map(item => {
|
|
return <el-tag type="border" style={{'margin':'0 6px 4px 0'}}>{item}</el-tag>
|
|
}) : <div style={{'text-align':'center'}}>无</div>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
label:'排序',
|
|
width: 150,
|
|
prop:'sort_number'
|
|
},
|
|
{
|
|
label:'提交人',
|
|
width: 200,
|
|
prop:'admin.name'
|
|
},
|
|
{
|
|
label:'提交日期',
|
|
prop:'created_at',
|
|
width: 200,
|
|
formatter:(cell,data,value)=>{
|
|
return parseTime(new Date(value),'{y}-{m}-{d}')
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
async getClubs(){
|
|
const res = await clubIndex({
|
|
page:this.clubSelect.page,
|
|
page_size:this.clubSelect.pageSize,
|
|
},false)
|
|
if(res?.rows?.length === 0){
|
|
this.$Message.info({
|
|
content:'没有更多会所了',
|
|
duration:1
|
|
})
|
|
this.clubSelect.page --
|
|
}
|
|
this.clubs.push(...res.rows)
|
|
},
|
|
loadMoreClub(){
|
|
this.clubSelect.page ++
|
|
this.getClubs()
|
|
},
|
|
|
|
pageChange(e){
|
|
this.select.page = e
|
|
this.getClubProduct()
|
|
},
|
|
|
|
async getClubProduct(){
|
|
const res = await index({
|
|
keyword:this.select.keywords,
|
|
page:this.select.page,
|
|
page_size:this.select.pageSize,
|
|
confinement_services_id:this.select.confinementServices.id,
|
|
state:this.select.state
|
|
})
|
|
this.total = res.total
|
|
this.list = res.rows
|
|
console.log(res)
|
|
},
|
|
|
|
destroyProduct(row){
|
|
destroy({id:row.id}).then(res => {
|
|
Message({
|
|
type:'success',
|
|
message:'删除月子产品成功'
|
|
})
|
|
this.getClubProduct()
|
|
})
|
|
},
|
|
editorClick(row){
|
|
this.$refs['addClubProduct'].type = 'editor'
|
|
this.$refs['addClubProduct'].id = row.id
|
|
this.$refs['addClubProduct'].isShow = true
|
|
},
|
|
comboClick(row){
|
|
this.$refs['addProductCombo'].id = row.id
|
|
this.$refs['addProductCombo'].isShow = true
|
|
},
|
|
picClick(row){
|
|
this.$refs['addProductPic'].id = row.id
|
|
this.$refs['addProductPic'].isShow = true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getClubProduct()
|
|
this.getClubs()
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.select-content-item{
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
margin-bottom: 10px;
|
|
&-label{
|
|
width: 110px;
|
|
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
|
|
::v-deep .ivu-select-dropdown{
|
|
}
|
|
::v-deep .ivu-scroll-container{
|
|
height: 140px !important;
|
|
&::after{
|
|
content: '加载更多..';
|
|
text-align: center;
|
|
font-size: 10px;
|
|
zoom: 0.8;
|
|
color: rgb(160,160,160);
|
|
background: #fff;
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
</style>
|