修改页面样式

src/views/table/table_list.vue

@@ -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'">
+              <template v-else >
-                <el-button
+                <template v-if="item.status == 'using'">
-                  :disabled="!item.tableId || item.status === 'closed'"
-                  @click="diancanShow(item,'isAddGoods')"
-                  >加菜</el-button >
                   <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')"
+                  @click="diancanShow(item, 'isPayOrder')"
-                  >结账</el-button >
+                  >结账</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">
-            <!-- <div class="btm_item">
+            
-                            <i class="i el-icon-edit"></i>
-                        </div> -->
             <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;