| <template> | 
|     <GlobalWindow | 
|         :title="title" | 
|         :visible.sync="visible" | 
|         :withFooter="false" | 
|         :confirm-working="isWorking" | 
|         @confirm="confirm"> | 
|         <div class="main"> | 
|             <div class="title">盘点信息</div> | 
|             <div class="list"> | 
|                 <div class="item"> | 
|                     <div class="la">盘点单名称</div> | 
|                     <div class="val">库存盘点20241212</div> | 
|                 </div> | 
|                 <div class="item"> | 
|                     <div class="la">盘点日期</div> | 
|                     <div class="val">2024-11-17</div> | 
|                 </div> | 
|                 <div class="item"> | 
|                     <div class="la">盘点仓库</div> | 
|                     <div class="val">仓库1</div> | 
|                 </div> | 
|                 <div class="item"> | 
|                     <div class="la">盘点员</div> | 
|                     <div class="val">张三</div> | 
|                 </div> | 
|                 <div class="item"> | 
|                     <div class="la">盘点状态</div> | 
|                     <div class="val">已完成</div> | 
|                 </div> | 
|             </div> | 
|             <div class="title">盘点结果</div> | 
|             <div class="list"> | 
|                 <div class="list_search"> | 
|                     <div class="list_search_left"> | 
|                         <el-input v-model="input" style="width: 200px; margin-right: 10px;" placeholder="请输入内容"></el-input> | 
|                         <el-select v-model="input" style="width: 200px; margin-right: 10px;" placeholder="请选择"> | 
|                             <el-option | 
|                                 v-for="item in options" | 
|                                 :key="item.value" | 
|                                 :label="item.label" | 
|                                 :value="item.value"> | 
|                             </el-option> | 
|                         </el-select> | 
|                         <el-button type="primary">查询</el-button> | 
|                         <el-button>清空</el-button> | 
|                         <el-button>导出</el-button> | 
|                     </div> | 
|                     <div class="list_search_right"> | 
|                         <span>已盘:100</span> | 
|                         <span>未盘:20</span> | 
|                         <span>账实相符:88</span> | 
|                         <span>盘盈:2</span> | 
|                         <span>盘亏:20</span> | 
|                     </div> | 
|                 </div> | 
|                 <div style="width: 100%; margin: 20px 0;"> | 
|                     <el-table :data="roomList" stripe> | 
|                         <el-table-column prop="projectName" label="资产编码" show-overflow-tooltip /> | 
|                         <el-table-column prop="buildingName" label="资产名称" show-overflow-tooltip /> | 
|                         <el-table-column prop="buildingName" label="条码" show-overflow-tooltip /> | 
|                         <el-table-column prop="buildingName" label="品牌" show-overflow-tooltip /> | 
|                         <el-table-column prop="buildingName" label="规格型号" show-overflow-tooltip /> | 
|                         <el-table-column prop="buildingName" label="单位" show-overflow-tooltip /> | 
|                         <el-table-column prop="buildingName" label="所在仓库" show-overflow-tooltip /> | 
|                         <el-table-column prop="buildingName" label="账面数量" show-overflow-tooltip /> | 
|                         <el-table-column prop="buildingName" label="盘点数量" show-overflow-tooltip /> | 
|                         <el-table-column prop="buildingName" label="备注" show-overflow-tooltip /> | 
|                     </el-table> | 
|                 </div> | 
|                 <div class="list_pagination"> | 
|                     <el-pagination | 
|                         @size-change="handleSizeChange" | 
|                         @current-change="handleCurrentChange" | 
|                         :current-page="page" | 
|                         :page-sizes="[10, 20, 30, 40]" | 
|                         :page-size="pageSize" | 
|                         layout="total, sizes, prev, pager, next, jumper" | 
|                         :total="total"> | 
|                     </el-pagination> | 
|                 </div> | 
|             </div> | 
|         </div> | 
|     </GlobalWindow> | 
| </template> | 
|   | 
| <script> | 
|   import GlobalWindow from '@/components/common/GlobalWindow' | 
|   import BaseOpera from '@/components/base/BaseOpera' | 
|   export default { | 
|     name: "inventoryDetails", | 
|     components: { | 
|       GlobalWindow | 
|     }, | 
|     extends: BaseOpera, | 
|     data() { | 
|       return { | 
|         info: {}, | 
|         input: '', | 
|         options: [], | 
|         roomList: [], | 
|   | 
|         pageSize: 10, | 
|         total: 0, | 
|         page: 1 | 
|       } | 
|     }, | 
|     methods: { | 
|       handleSizeChange(size) { | 
|         this.pageSize = size | 
|       }, | 
|       handleCurrentChange(page) { | 
|         this.page = page | 
|       }, | 
|       open (title) { | 
|         this.title = title | 
|         this.visible = true | 
|       } | 
|     } | 
|   } | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
|     @import '@/assets/style/variables.scss'; | 
|      | 
|     .main { | 
|         .title { | 
|             font-weight: 500; | 
|             font-size: 18px; | 
|             padding-top: 20px; | 
|             box-sizing: border-box; | 
|             color: $primary-color; | 
|             margin-bottom: 15px; | 
|         } | 
|          | 
|         .list { | 
|             display: flex; | 
|             flex-wrap: wrap; | 
|             /*background: #F7F7F7;*/ | 
|             border-radius: 2px; | 
|             /*padding: 15px 20px;*/ | 
|             margin-bottom: 20px; | 
|              | 
|             .list_pagination { | 
|                 width: 100%; | 
|                 text-align: right; | 
|             } | 
|              | 
|             .list_search { | 
|                 width: 100%; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: space-between; | 
|                 .list_search_left { | 
|                     display: flex; | 
|                     align-items: center; | 
|                 } | 
|                 .list_search_right { | 
|                     display: flex; | 
|                     align-items: center; | 
|                     span { | 
|                         color: #7E7E7E; | 
|                         font-size: 14px; | 
|                         margin-right: 15px; | 
|                         &:last-child { | 
|                             margin: 0 !important; | 
|                         } | 
|                     } | 
|                 } | 
|             } | 
|              | 
|             .item { | 
|                 width: 20%; | 
|                 margin-bottom: 16px; | 
|                  | 
|                 .la { | 
|                     color: #7f7f7f; | 
|                     margin-bottom: 10px; | 
|                 } | 
|             } | 
|         } | 
|     } | 
| </style> |