| | |
| | | /> |
| | | </div> |
| | | </el-tab-pane> |
| | | |
| | | <!-- 餐饮店铺管理 --> |
| | | <el-tab-pane label="餐饮店铺管理" name="restaurants"> |
| | | <div class="tab-content"> |
| | | <!-- 搜索和添加按钮 --> |
| | | <div class="search-add-bar"> |
| | | <el-input |
| | | v-model="restaurantSearchQuery" |
| | | placeholder="搜索店铺" |
| | | style="width: 200px" |
| | | prefix-icon="el-icon-search" |
| | | /> |
| | | <el-button type="primary" @click="openRestaurantDialog"> |
| | | <el-icon><Plus /></el-icon> 添加店铺 |
| | | </el-button> |
| | | </div> |
| | | |
| | | <!-- 店铺表格 --> |
| | | <el-table :data="filteredRestaurants" style="width: 100%"> |
| | | <el-table-column prop="id" label="ID" width="80" /> |
| | | <el-table-column prop="name" label="店铺名称" /> |
| | | <el-table-column prop="address" label="地址" /> |
| | | <el-table-column prop="contact" label="联系人" /> |
| | | <el-table-column prop="phone" label="联系电话" /> |
| | | <el-table-column label="操作" width="250"> |
| | | <template #default="scope"> |
| | | <el-button size="small" @click="editRestaurant(scope.row)"> 编辑 </el-button> |
| | | <el-button size="small" type="danger" @click="deleteRestaurant(scope.row.id)"> |
| | | 删除 |
| | | </el-button> |
| | | <el-button size="small" @click="manageDevices(scope.row)"> 设备管理 </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | <!-- 分页 --> |
| | | <el-pagination |
| | | v-model:current-page="restaurantCurrentPage" |
| | | v-model:page-size="restaurantPageSize" |
| | | :page-sizes="[10, 20, 50]" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="restaurants.length" |
| | | style="margin-top: 20px" |
| | | /> |
| | | </div> |
| | | </el-tab-pane> |
| | | |
| | | <!-- 设备管理 --> |
| | | <el-tab-pane label="设备管理" name="devices"> |
| | | <div class="tab-content" v-if="selectedRestaurant"> |
| | | <h3>{{ selectedRestaurant.name }} - 设备列表</h3> |
| | | |
| | | <!-- 搜索和添加按钮 --> |
| | | <div class="search-add-bar"> |
| | | <el-input |
| | | v-model="deviceSearchQuery" |
| | | placeholder="搜索设备" |
| | | style="width: 200px" |
| | | prefix-icon="el-icon-search" |
| | | /> |
| | | <el-button type="primary" @click="openDeviceDialog"> |
| | | <el-icon><Plus /></el-icon> 添加设备 |
| | | </el-button> |
| | | </div> |
| | | |
| | | <!-- 设备表格 --> |
| | | <el-table :data="filteredDevices" style="width: 100%"> |
| | | <el-table-column prop="id" label="ID" width="80" /> |
| | | <el-table-column prop="deviceId" label="设备编号" /> |
| | | <el-table-column prop="type" label="设备类型" /> |
| | | <el-table-column prop="status" label="状态"> |
| | | <template #default="scope"> |
| | | <el-tag :type="scope.row.status === 'online' ? 'success' : 'danger'"> |
| | | {{ scope.row.status === 'online' ? '在线' : '离线' }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="installDate" label="安装日期" /> |
| | | <el-table-column label="操作" width="200"> |
| | | <template #default="scope"> |
| | | <el-button size="small" @click="editDevice(scope.row)"> 编辑 </el-button> |
| | | <el-button size="small" type="danger" @click="deleteDevice(scope.row.id)"> |
| | | 删除 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | <!-- 分页 --> |
| | | <el-pagination |
| | | v-model:current-page="deviceCurrentPage" |
| | | v-model:page-size="devicePageSize" |
| | | :page-sizes="[10, 20, 50]" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="devices.length" |
| | | style="margin-top: 20px" |
| | | /> |
| | | </div> |
| | | <div class="tab-content" v-else> |
| | | <el-empty description="请先选择一个餐饮店铺" /> |
| | | </div> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </el-card> |
| | | |