| <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">{{info.name}}</div> | 
|                 </div> | 
|                 <div class="item"> | 
|                     <div class="la">盘点日期</div> | 
|                     <div class="val">{{info.planDate}}</div> | 
|                 </div> | 
|                 <div class="item"> | 
|                     <div class="la">盘点仓库</div> | 
|                     <div class="val">{{info.warehouseName}}</div> | 
|                 </div> | 
|                 <div class="item"> | 
|                     <div class="la">盘点员</div> | 
|                     <div class="val">{{info.userName}}</div> | 
|                 </div> | 
|                 <div class="item"> | 
|                     <div class="la">盘点状态</div> | 
|                     <div class="val" v-if="info.status === 0">未开始</div> | 
|                     <div class="val" v-if="info.status === 1">进行中</div> | 
|                     <div class="val" v-if="info.status === 2">已完成</div> | 
|                     <div class="val" v-if="info.status === 3">已取消</div> | 
|                 </div> | 
|             </div> | 
|             <div class="title">盘点结果</div> | 
|             <div class="list"> | 
|                 <div class="list_search"> | 
|                     <div class="list_search_left"> | 
|                         <el-input v-model="form.code" style="width: 200px; margin-right: 10px;" placeholder="请输入物料名称/编码"></el-input> | 
|                         <el-select v-model="form.status" style="width: 150px; margin-right: 10px;" placeholder="盘点状态"> | 
|                             <el-option label="已盘" :value="1"></el-option> | 
|                             <el-option label="未盘" :value="0"></el-option> | 
|                         </el-select> | 
|                         <el-select v-model="form.type" style="width: 150px; margin-right: 10px;" placeholder="盘点结果"> | 
|                             <el-option label="账实相符" :value="0"></el-option> | 
|                             <el-option label="盘亏" :value="1"></el-option> | 
|                             <el-option label="盘盈" :value="2"></el-option> | 
|                         </el-select> | 
|                         <el-button type="primary" @click="getList">查询</el-button> | 
|                         <el-button @click="clear">清空</el-button> | 
|                         <el-button>导出</el-button> | 
|                     </div> | 
|                     <div class="list_search_right"> | 
|                         <span>已盘:{{info.finishAmount || 0}}</span> | 
|                         <span>未盘:{{info.unFinishAmount || 0}}</span> | 
|                         <span>账实相符:{{info.equalAmount || 0}}</span> | 
|                         <span>盘盈:{{info.profitAmount || 0}}</span> | 
|                         <span>盘亏:{{info.lossAmount || 0}}</span> | 
|                     </div> | 
|                 </div> | 
|                 <div style="width: 100%; margin: 20px 0;"> | 
|                     <el-table :data="list" stripe> | 
|                         <el-table-column prop="materialCode" label="资产编码" show-overflow-tooltip /> | 
|                         <el-table-column prop="materialName" label="资产名称" show-overflow-tooltip /> | 
|                         <el-table-column prop="materialQrcode" label="条码" show-overflow-tooltip /> | 
|                         <el-table-column prop="materialBrand" label="品牌" show-overflow-tooltip /> | 
|                         <el-table-column prop="materialAttr" label="规格型号" show-overflow-tooltip /> | 
|                         <el-table-column prop="materialUnitName" label="单位" show-overflow-tooltip /> | 
|                         <el-table-column prop="warehouseName" label="所在仓库" show-overflow-tooltip /> | 
|                         <el-table-column prop="stock" label="账面数量" show-overflow-tooltip /> | 
|                         <el-table-column prop="actStock" label="盘点数量" show-overflow-tooltip /> | 
|                         <el-table-column prop="remark" 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' | 
|   import { ywStocktakingRecordPage, getById } from '@/api/ywStocktaking' | 
|   export default { | 
|     name: "inventoryDetails", | 
|     components: { | 
|       GlobalWindow | 
|     }, | 
|     extends: BaseOpera, | 
|     data() { | 
|       return { | 
|         id: null, | 
|         info: {}, | 
|         list: [], | 
|         form: { | 
|           code: '', | 
|           status: '', | 
|           type: '' | 
|         }, | 
|         pageSize: 10, | 
|         total: 0, | 
|         page: 1 | 
|       } | 
|     }, | 
|     methods: { | 
|       handleSizeChange(size) { | 
|         this.pageSize = size | 
|         this.getList() | 
|       }, | 
|       handleCurrentChange(page) { | 
|         this.page = page | 
|         this.getList() | 
|       }, | 
|       open (title, id) { | 
|         this.title = title | 
|         this.visible = true | 
|         this.id = id | 
|         this.getDetails() | 
|         this.getList() | 
|       }, | 
|       getDetails() { | 
|         getById(this.id) | 
|             .then(res => { | 
|               this.info = res | 
|             }) | 
|       }, | 
|       clear() { | 
|         this.form.name = '' | 
|         this.form.status = '' | 
|         this.form.type = '' | 
|         this.page = 1 | 
|         this.getList() | 
|       }, | 
|       getList() { | 
|         ywStocktakingRecordPage({ | 
|           capacity: this.pageSize, | 
|           page: this.page, | 
|           model: { | 
|             stocktakingId: this.id, | 
|             code: this.form.code, | 
|             status: this.form.status, | 
|             type: this.form.type | 
|           } | 
|         }).then(res => { | 
|           this.list = res.records | 
|         }) | 
|       } | 
|     } | 
|   } | 
| </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> |