|  |  | 
 |  |  | <template> | 
 |  |  |     <div> | 
 |  |  |         <vol-box v-model="showDetialBox" :lazy="true" width="1500px" :padding="15" title="å
¥åºåæ®æç»"> | 
 |  |  |             <div class="box-table" style="margin-top: 1%"> | 
 |  |  |                 <el-table ref="singleTable" :data="tableData" style="width: 100%; height: 100%" highlight-current-row | 
 |  |  |                     @row-click="handleRowClick" height="500px" @selection-change="handleSelectionChange"> | 
 |  |  |                     > | 
 |  |  |                     <el-table-column type="selection" width="55"> </el-table-column> | 
 |  |  |                     <el-table-column label="åºå·" type="index" fixed="left" width="55" align="center"></el-table-column> | 
 |  |  |                     <el-table-column v-for="(item, index) in tableColumns.filter((x) => !x.hidden)" :key="index" | 
 |  |  |                         :prop="item.field" :label="item.title" :width="item.width" align="center"> | 
 |  |  |                         <template #default="scoped"> | 
 |  |  |                             <div v-if="item.type == 'icon'"> | 
 |  |  |                                 <el-tooltip class="item" effect="dark" :content="item.title" | 
 |  |  |                                     placement="bottom"><el-button type="text" | 
 |  |  |                                         @click="tableButtonClick(scoped.row, item)"><i :class="item.icon" | 
 |  |  |                                             style="font-size: 22px"></i></el-button></el-tooltip> | 
 |  |  |                             </div> | 
 |  |  |                             <div v-else-if="item.type == 'tag'"> | 
 |  |  |                                 <el-tag size="small"> | 
 |  |  |                                     {{ getDictionary(scoped.row, item) }} | 
 |  |  |                                 </el-tag> | 
 |  |  |                             </div> | 
 |  |  |                         </template> | 
 |  |  |                     </el-table-column> | 
 |  |  |                 </el-table> | 
 |  |  |             </div> | 
 |  |  |         </vol-box> | 
 |  |  |     </div> | 
 |  |  |   <div> | 
 |  |  |     <vol-box | 
 |  |  |       v-model="showDetialBox" | 
 |  |  |       :lazy="true" | 
 |  |  |       width="1500px" | 
 |  |  |       :padding="15" | 
 |  |  |       title="è´§ä½ç¶æåå¨è®°å½" | 
 |  |  |     > | 
 |  |  |       <div class="box-table" style="margin-top: 1%"> | 
 |  |  |         <el-table | 
 |  |  |           ref="singleTable" | 
 |  |  |           :data="tableData" | 
 |  |  |           style="width: 100%; height: 100%" | 
 |  |  |           highlight-current-row | 
 |  |  |           @row-click="handleRowClick" | 
 |  |  |           height="500px" | 
 |  |  |           @selection-change="handleSelectionChange" | 
 |  |  |         > | 
 |  |  |           > | 
 |  |  |           <!-- <el-table-column type="selection" width="55"> </el-table-column> --> | 
 |  |  |           <el-table-column | 
 |  |  |             label="åºå·" | 
 |  |  |             type="index" | 
 |  |  |             fixed="left" | 
 |  |  |             width="55" | 
 |  |  |             align="center" | 
 |  |  |           ></el-table-column> | 
 |  |  |           <el-table-column | 
 |  |  |             v-for="(item, index) in tableColumns.filter((x) => !x.hidden)" | 
 |  |  |             :key="index" | 
 |  |  |             :prop="item.field" | 
 |  |  |             :label="item.title" | 
 |  |  |             :width="item.width" | 
 |  |  |             align="center" | 
 |  |  |           > | 
 |  |  |             <template #default="scoped"> | 
 |  |  |               <div v-if="item.type == 'icon'"> | 
 |  |  |                 <el-tooltip | 
 |  |  |                   class="item" | 
 |  |  |                   effect="dark" | 
 |  |  |                   :content="item.title" | 
 |  |  |                   placement="bottom" | 
 |  |  |                   ><el-button | 
 |  |  |                     type="text" | 
 |  |  |                     @click="tableButtonClick(scoped.row, item)" | 
 |  |  |                     ><i | 
 |  |  |                       :class="item.icon" | 
 |  |  |                       style="font-size: 22px" | 
 |  |  |                     ></i></el-button | 
 |  |  |                 ></el-tooltip> | 
 |  |  |               </div> | 
 |  |  |               <div v-else-if="item.type == 'tag'"> | 
 |  |  |                 <el-tag size="small"> | 
 |  |  |                   {{ getDictionary(scoped.row, item) }} | 
 |  |  |                 </el-tag> | 
 |  |  |               </div> | 
 |  |  |             </template> | 
 |  |  |           </el-table-column> | 
 |  |  |         </el-table> | 
 |  |  |       </div> | 
 |  |  |     </vol-box> | 
 |  |  |   </div> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | import VolBox from "@/components/basic/VolBox.vue"; | 
 |  |  | export default { | 
 |  |  |     components: { VolBox }, | 
 |  |  |     data() { | 
 |  |  |         return { | 
 |  |  |             showDetialBox: false, | 
 |  |  |             row: null, | 
 |  |  |             tableData: [], | 
 |  |  |             tableColumns: [ | 
 |  |  |                 { | 
 |  |  |                     field: "locationId", | 
 |  |  |                     title: "è´§ä½ä¸»é®", | 
 |  |  |                     type: "string", | 
 |  |  |                     width: 90, | 
 |  |  |                     align: "left", | 
 |  |  |                 }, | 
 |  |  |                 { | 
 |  |  |                     field: "locationCode", | 
 |  |  |                     title: "è´§ä½ç¼å·", | 
 |  |  |                     type: "string", | 
 |  |  |                     width: 160, | 
 |  |  |                     align: "left", | 
 |  |  |                 }, | 
 |  |  |                 { | 
 |  |  |                     field: "beforeStatus", | 
 |  |  |                     title: "åå¨åè´§ä½ç¶æ", | 
 |  |  |                     type: "tag", | 
 |  |  |                     width: 150, | 
 |  |  |                     align: "left", | 
 |  |  |                     bindKey: "locationStatusEnum" | 
 |  |  |                 }, | 
 |  |  |                 { | 
 |  |  |                     field: "afterStatus", | 
 |  |  |                     title: "åå¨åè´§ä½ç¶æ", | 
 |  |  |                     type: "tag", | 
 |  |  |                     width: 150, | 
 |  |  |                     align: "left", | 
 |  |  |                     bindKey: "locationStatusEnum" | 
 |  |  |                 }, | 
 |  |  |                 { | 
 |  |  |                     field: "changeType", | 
 |  |  |                     title: "åå¨ç±»å", | 
 |  |  |                     type: "tag", | 
 |  |  |                     width: 100, | 
 |  |  |                     align: "left", | 
 |  |  |                     bindKey: "stockChangeType", | 
 |  |  |                 }, | 
 |  |  |                 { | 
 |  |  |                     field: "orderId", | 
 |  |  |                     title: "忮䏻é®", | 
 |  |  |                     type: "string", | 
 |  |  |                     width: 90, | 
 |  |  |                     align: "left", | 
 |  |  |                     hidden: true, | 
 |  |  |                 }, | 
 |  |  |                 { | 
 |  |  |                     field: "orderNo", | 
 |  |  |                     title: "åæ®ç¼å·", | 
 |  |  |                     type: "int", | 
 |  |  |                     width: 160, | 
 |  |  |                     align: "left", | 
 |  |  |                 }, | 
 |  |  |                 { | 
 |  |  |                     field: "orderDetailId", | 
 |  |  |                     title: "åæ®æç»ä¸»é®", | 
 |  |  |                     type: "string", | 
 |  |  |                     width: 200, | 
 |  |  |                     align: "left", | 
 |  |  |                     hidden: true, | 
 |  |  |                 }, | 
 |  |  |                 { | 
 |  |  |                     field: "taskNum", | 
 |  |  |                     title: "ä»»å¡å·", | 
 |  |  |                     type: "string", | 
 |  |  |                     width: 180, | 
 |  |  |                     align: "left", | 
 |  |  |                 }, | 
 |  |  |                 { | 
 |  |  |                     field: "creater", | 
 |  |  |                     title: "å建人", | 
 |  |  |                     type: "string", | 
 |  |  |                     width: 90, | 
 |  |  |                     align: "left", | 
 |  |  |                 }, | 
 |  |  |                 { | 
 |  |  |                     field: "createDate", | 
 |  |  |                     title: "å建æ¶é´", | 
 |  |  |                     type: "datetime", | 
 |  |  |                     width: 160, | 
 |  |  |                     align: "left", | 
 |  |  |                     sort: true, | 
 |  |  |                 }, | 
 |  |  |                 { | 
 |  |  |                     field: "modifier", | 
 |  |  |                     title: "ä¿®æ¹äºº", | 
 |  |  |                     type: "string", | 
 |  |  |                     width: 100, | 
 |  |  |                     align: "left", | 
 |  |  |                     hidden: true, | 
 |  |  |                 }, | 
 |  |  |                 { | 
 |  |  |                     field: "modifyDate", | 
 |  |  |                     title: "ä¿®æ¹æ¶é´", | 
 |  |  |                     type: "datetime", | 
 |  |  |                     width: 160, | 
 |  |  |                     align: "left", | 
 |  |  |                     hidden: true, | 
 |  |  |                     sort: true, | 
 |  |  |                 }, | 
 |  |  |                 { | 
 |  |  |                     field: "remark", | 
 |  |  |                     title: "夿³¨", | 
 |  |  |                     type: "string", | 
 |  |  |                     width: 100, | 
 |  |  |                     align: "left", | 
 |  |  |                     hidden: true, | 
 |  |  |                 }, | 
 |  |  |             ], | 
 |  |  |             paginations: { | 
 |  |  |                 sort: "CreateDate", | 
 |  |  |                 order: "desc", | 
 |  |  |                 Foots: "", | 
 |  |  |                 total: 0, | 
 |  |  |                 // 2020.08.29å¢å èªå®ä¹å页æ¡å¤§å° | 
 |  |  |                 sizes: [30, 60, 100, 120], | 
 |  |  |                 size: 30, // é»è®¤åé¡µå¤§å° | 
 |  |  |                 Wheres: [], | 
 |  |  |                 page: 1, | 
 |  |  |                 rows: 30, | 
 |  |  |             }, | 
 |  |  |             dictionaryList: null, | 
 |  |  |         }; | 
 |  |  |   components: { VolBox }, | 
 |  |  |   data() { | 
 |  |  |     return { | 
 |  |  |       showDetialBox: false, | 
 |  |  |       row: null, | 
 |  |  |       tableData: [], | 
 |  |  |       tableColumns: [ | 
 |  |  |         { | 
 |  |  |           field: "locationId", | 
 |  |  |           title: "è´§ä½ä¸»é®", | 
 |  |  |           type: "string", | 
 |  |  |           width: 90, | 
 |  |  |           align: "left", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           field: "locationCode", | 
 |  |  |           title: "è´§ä½ç¼å·", | 
 |  |  |           type: "string", | 
 |  |  |           align: "left", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           field: "beforeStatus", | 
 |  |  |           title: "åå¨åè´§ä½ç¶æ", | 
 |  |  |           type: "tag", | 
 |  |  |           width: 150, | 
 |  |  |           align: "left", | 
 |  |  |           bindKey: "locationStatusEnum", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           field: "afterStatus", | 
 |  |  |           title: "åå¨åè´§ä½ç¶æ", | 
 |  |  |           type: "tag", | 
 |  |  |           width: 150, | 
 |  |  |           align: "left", | 
 |  |  |           bindKey: "locationStatusEnum", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           field: "changeType", | 
 |  |  |           title: "åå¨ç±»å", | 
 |  |  |           type: "tag", | 
 |  |  |           width: 100, | 
 |  |  |           align: "left", | 
 |  |  |           bindKey: "locationChangeType", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           field: "orderId", | 
 |  |  |           title: "忮䏻é®", | 
 |  |  |           type: "string", | 
 |  |  |           width: 90, | 
 |  |  |           align: "left", | 
 |  |  |           hidden: true, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           field: "orderNo", | 
 |  |  |           title: "åæ®ç¼å·", | 
 |  |  |           type: "int", | 
 |  |  |           width: 160, | 
 |  |  |           align: "left", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           field: "orderDetailId", | 
 |  |  |           title: "åæ®æç»ä¸»é®", | 
 |  |  |           type: "string", | 
 |  |  |           width: 200, | 
 |  |  |           align: "left", | 
 |  |  |           hidden: true, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           field: "taskNum", | 
 |  |  |           title: "ä»»å¡å·", | 
 |  |  |           type: "string", | 
 |  |  |           width: 180, | 
 |  |  |           align: "left", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           field: "creater", | 
 |  |  |           title: "å建人", | 
 |  |  |           type: "string", | 
 |  |  |           width: 90, | 
 |  |  |           align: "left", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           field: "createDate", | 
 |  |  |           title: "å建æ¶é´", | 
 |  |  |           type: "datetime", | 
 |  |  |           width: 160, | 
 |  |  |           align: "left", | 
 |  |  |           sort: true, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           field: "modifier", | 
 |  |  |           title: "ä¿®æ¹äºº", | 
 |  |  |           type: "string", | 
 |  |  |           width: 100, | 
 |  |  |           align: "left", | 
 |  |  |           hidden: true, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           field: "modifyDate", | 
 |  |  |           title: "ä¿®æ¹æ¶é´", | 
 |  |  |           type: "datetime", | 
 |  |  |           width: 160, | 
 |  |  |           align: "left", | 
 |  |  |           hidden: true, | 
 |  |  |           sort: true, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           field: "remark", | 
 |  |  |           title: "夿³¨", | 
 |  |  |           type: "string", | 
 |  |  |           width: 100, | 
 |  |  |           align: "left", | 
 |  |  |           hidden: true, | 
 |  |  |         }, | 
 |  |  |       ], | 
 |  |  |       paginations: { | 
 |  |  |         sort: "CreateDate", | 
 |  |  |         order: "desc", | 
 |  |  |         Foots: "", | 
 |  |  |         total: 0, | 
 |  |  |         // 2020.08.29å¢å èªå®ä¹å页æ¡å¤§å° | 
 |  |  |         sizes: [30, 60, 100, 120], | 
 |  |  |         size: 30, // é»è®¤åé¡µå¤§å° | 
 |  |  |         Wheres: [], | 
 |  |  |         page: 1, | 
 |  |  |         rows: 30, | 
 |  |  |       }, | 
 |  |  |       dictionaryList: null, | 
 |  |  |     }; | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     open(row) { | 
 |  |  |       this.row = row; | 
 |  |  |       this.showDetialBox = true; | 
 |  |  |       this.getDetailData(); | 
 |  |  |       this.getDictionaryData(); | 
 |  |  |     }, | 
 |  |  |     methods: { | 
 |  |  |         open(row) { | 
 |  |  |             this.row = row; | 
 |  |  |             this.showDetialBox = true; | 
 |  |  |             this.getDetailData(); | 
 |  |  |             this.getDictionaryData(); | 
 |  |  |         }, | 
 |  |  |         getDetailData() { | 
 |  |  |             this.http | 
 |  |  |                 .post( | 
 |  |  |                     "/api/LocationStatusChangeRecord/GetLocationState?id=" + this.row.id, | 
 |  |  |                     {}, | 
 |  |  |                     true | 
 |  |  |                 ) | 
 |  |  |                 .then((x) => { | 
 |  |  |                     if (!x.status) return this.$message.error(x.message); | 
 |  |  |                     this.tableData = x.data; | 
 |  |  |                 }); | 
 |  |  |         }, | 
 |  |  |         getDictionaryData() { | 
 |  |  |             if (this.dictionaryList) { | 
 |  |  |                 return; | 
 |  |  |             } | 
 |  |  |             var param = []; | 
 |  |  |             this.tableColumns.forEach((x) => { | 
 |  |  |                 if (x.type == "tag" && x.bindKey != "") { | 
 |  |  |                     param.push(x.bindKey); | 
 |  |  |                 } | 
 |  |  |             }); | 
 |  |  |             this.http | 
 |  |  |                 .post("api/Sys_Dictionary/GetVueDictionary", param, "æ¥è¯¢ä¸") | 
 |  |  |                 .then((x) => { | 
 |  |  |                     if (x.length > 0) { | 
 |  |  |                         this.dictionaryList = x; | 
 |  |  |                     } | 
 |  |  |                 }); | 
 |  |  |         }, | 
 |  |  |         getDictionary(row, column) { | 
 |  |  |             if (this.dictionaryList) { | 
 |  |  |                 var item = this.dictionaryList.find((x) => x.dicNo == column.bindKey); | 
 |  |  |                 if (item) { | 
 |  |  |                     var dicItem = item.data.find((x) => x.key == row[column.field]); | 
 |  |  |                     console.log(dicItem); | 
 |  |  |                     if (dicItem) { | 
 |  |  |                         return dicItem.value; | 
 |  |  |                     } | 
 |  |  |                     else { | 
 |  |  |                         return row[column.field]; | 
 |  |  |                     } | 
 |  |  |                 } else { | 
 |  |  |                     return row[column.field]; | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }, | 
 |  |  |     getDetailData() { | 
 |  |  |       this.http | 
 |  |  |         .post( | 
 |  |  |           "/api/LocationStatusChangeRecord/GetLocationState?id=" + this.row.id, | 
 |  |  |           {}, | 
 |  |  |           true | 
 |  |  |         ) | 
 |  |  |         .then((x) => { | 
 |  |  |           if (!x.status) return this.$message.error(x.message); | 
 |  |  |           this.tableData = x.data; | 
 |  |  |         }); | 
 |  |  |     }, | 
 |  |  |     getDictionaryData() { | 
 |  |  |       if (this.dictionaryList) { | 
 |  |  |         return; | 
 |  |  |       } | 
 |  |  |       var param = []; | 
 |  |  |       this.tableColumns.forEach((x) => { | 
 |  |  |         if (x.type == "tag" && x.bindKey != "") { | 
 |  |  |           param.push(x.bindKey); | 
 |  |  |         } | 
 |  |  |       }); | 
 |  |  |       this.http | 
 |  |  |         .post("api/Sys_Dictionary/GetVueDictionary", param, "æ¥è¯¢ä¸") | 
 |  |  |         .then((x) => { | 
 |  |  |           if (x.length > 0) { | 
 |  |  |             this.dictionaryList = x; | 
 |  |  |           } | 
 |  |  |         }); | 
 |  |  |     }, | 
 |  |  |     getDictionary(row, column) { | 
 |  |  |       if (this.dictionaryList) { | 
 |  |  |         var item = this.dictionaryList.find((x) => x.dicNo == column.bindKey); | 
 |  |  |         if (item) { | 
 |  |  |           var dicItem = item.data.find((x) => x.key == row[column.field]); | 
 |  |  |           console.log(dicItem); | 
 |  |  |           if (dicItem) { | 
 |  |  |             return dicItem.value; | 
 |  |  |           } else { | 
 |  |  |             return row[column.field]; | 
 |  |  |           } | 
 |  |  |         } else { | 
 |  |  |           return row[column.field]; | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |   }, | 
 |  |  |  | 
 |  |  |  | 
 |  |  |     created() { }, | 
 |  |  |   created() {}, | 
 |  |  | }; | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style scoped> | 
 |  |  | .el-col { | 
 |  |  |     border-radius: 4px; | 
 |  |  |   border-radius: 4px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .grid-content { | 
 |  |  |     border-radius: 4px; | 
 |  |  |     min-height: 36px; | 
 |  |  |   border-radius: 4px; | 
 |  |  |   min-height: 36px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .content-text { | 
 |  |  |     display: flex; | 
 |  |  |     align-items: center; | 
 |  |  |     justify-content: center; | 
 |  |  |   display: flex; | 
 |  |  |   align-items: center; | 
 |  |  |   justify-content: center; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .right-text { | 
 |  |  |     display: flex; | 
 |  |  |     align-items: center; | 
 |  |  |     justify-content: flex-end; | 
 |  |  |   display: flex; | 
 |  |  |   align-items: center; | 
 |  |  |   justify-content: flex-end; | 
 |  |  | } | 
 |  |  | </style> | 
 |  |  | <style> | 
 |  |  | .el-table .warning-row { | 
 |  |  |     background: #e6a23c; | 
 |  |  |   background: #e6a23c; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .el-table .success-row { | 
 |  |  |     background: #f0f9eb; | 
 |  |  |   background: #f0f9eb; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .el-table .error-row { | 
 |  |  |     background: #f56c6c; | 
 |  |  |   background: #f56c6c; | 
 |  |  | } | 
 |  |  | </style> |