修改页面样式
This commit is contained in:
parent
c45f8a5f6a
commit
d1317f9c7f
|
|
@ -43,7 +43,28 @@
|
|||
</div>
|
||||
<div class="head-container">
|
||||
<div class="table_list" v-loading="loading">
|
||||
<div class="item" v-for="item in tableList" :key="item.id">
|
||||
<div
|
||||
class="item"
|
||||
v-for="item in tableList"
|
||||
:key="item.id"
|
||||
:class="{ using: item.status == 'using' }"
|
||||
>
|
||||
<div class="new-top flex u-row-between">
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<el-dropdown trigger="click" @command="tableComman($event,item)">
|
||||
<i class="el-icon-more cur-pointer color-fff"></i>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="edit">
|
||||
<i class="i el-icon-edit"></i>
|
||||
<span>编辑</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="del">
|
||||
<i class="i el-icon-delete"></i>
|
||||
<span>删除</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="top">
|
||||
<div class="row row1">
|
||||
<span>{{ item.name }}</span>
|
||||
|
|
@ -76,25 +97,40 @@
|
|||
type="primary"
|
||||
:disabled="!item.tableId || item.status === 'closed'"
|
||||
@click="diancanShow(item)"
|
||||
>开始点餐</el-button>
|
||||
>开始点餐</el-button
|
||||
>
|
||||
</template>
|
||||
<template v-if="item.status == 'using'">
|
||||
<el-button
|
||||
:disabled="!item.tableId || item.status === 'closed'"
|
||||
@click="diancanShow(item,'isAddGoods')"
|
||||
>加菜</el-button >
|
||||
<template v-else >
|
||||
<template v-if="item.status == 'using'">
|
||||
<el-button
|
||||
:disabled="!item.tableId || item.status === 'closed'"
|
||||
@click="diancanShow(item, 'isAddGoods')"
|
||||
>加菜</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
:disabled="!item.tableId || item.status === 'closed'"
|
||||
@click="diancanShow(item,'isPayOrder')"
|
||||
>结账</el-button >
|
||||
@click="diancanShow(item, 'isPayOrder')"
|
||||
>结账</el-button
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-button
|
||||
type="primary"
|
||||
disabled
|
||||
>开始点餐</el-button
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<!-- <div class="u-flex u-col-center">
|
||||
<img style="width: 16px;height: 16px;" src="@/assets/images/perpole.png" alt="">
|
||||
<span class="color-000 u-font-12">{{ item.maxCapacity }}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="btm">
|
||||
<!-- <div class="btm_item">
|
||||
<i class="i el-icon-edit"></i>
|
||||
</div> -->
|
||||
<!-- <div class="btm">
|
||||
|
||||
<div class="btm_item" @click="$refs.addTable.show(item)">
|
||||
<i class="i el-icon-edit"></i>
|
||||
</div>
|
||||
|
|
@ -107,7 +143,7 @@
|
|||
<i class="i el-icon-delete"></i>
|
||||
</div>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="empty_wrap">
|
||||
<el-empty description="空空如也~" v-if="!tableList.length"></el-empty>
|
||||
|
|
@ -188,13 +224,32 @@ export default {
|
|||
this.tbShopAreaGet();
|
||||
},
|
||||
methods: {
|
||||
tableComman(command,item){
|
||||
if(command=='edit'){
|
||||
return this.$refs.addTable.show(item)
|
||||
}
|
||||
if(command=='del'){
|
||||
return this.delPop(item)
|
||||
}
|
||||
},
|
||||
delPop(item){
|
||||
this.$confirm('是否删除'+item.name+'台桌', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.delTableHandle([item.id])
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
onDiancanClose() {
|
||||
this.tbShopTableGet();
|
||||
},
|
||||
diancanShow(item,key) {
|
||||
diancanShow(item, key) {
|
||||
//key isAddGoods 加菜
|
||||
//key isPayOrder结账
|
||||
this.$refs.dianan.open(item,key);
|
||||
this.$refs.dianan.open(item, key);
|
||||
},
|
||||
tabClick() {
|
||||
this.tbShopTableGet();
|
||||
|
|
@ -227,7 +282,7 @@ export default {
|
|||
areaId: this.tabVlaue,
|
||||
});
|
||||
console.log(content);
|
||||
this.tableList=content
|
||||
this.tableList = content;
|
||||
// this.tableList = content.sort((a,b)=>{
|
||||
// if(a.status=='idle'&&b.status!='idle'){
|
||||
// return 1
|
||||
|
|
@ -269,7 +324,15 @@ export default {
|
|||
.icon {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
::v-deep .btn-group .el-button {
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .el-dropdown-menu__item {
|
||||
line-height: 36px;
|
||||
padding: 0 20px;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
.table_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -281,21 +344,42 @@ export default {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn-group{
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
::v-deep .el-button{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 1px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ddd;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border-radius: 6px;
|
||||
background-color: #1890ff;
|
||||
min-width: 162px;
|
||||
&.using {
|
||||
background-color: rgb(250, 85, 85);
|
||||
}
|
||||
.new-top {
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.name {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
margin-right: 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.top {
|
||||
padding: 20px;
|
||||
|
||||
background-color: #fff;
|
||||
flex:1;
|
||||
// border-radius: 6px 6px 0 0;
|
||||
border-radius: 6px;
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
|
@ -305,7 +389,7 @@ export default {
|
|||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&.row1 {
|
||||
|
|
@ -315,7 +399,6 @@ export default {
|
|||
.state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 80px;
|
||||
|
||||
.dot {
|
||||
$size: 6px;
|
||||
|
|
@ -333,7 +416,7 @@ export default {
|
|||
border-top: 1px solid #ddd;
|
||||
background-color: #efefef;
|
||||
display: flex;
|
||||
|
||||
border-radius: 0 0 6px 6px;
|
||||
.btm_item {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue