站位计划维护列表-样式修改

applications/dee-mes/src/views/assemblyPlanManagement/stationPlanMaintenance/index.vue

 <template>
-  <div class="show-page-com stationPlan-maintenance-page">
+  <div class="stationPlan-maintenance-page">
     <dee-tab :tabs="tabItems" :show-swipe="false" :is-detail="false">
       <div slot="0" style="height:100%;box-sizing:border-box">
         <split-pane
           :min-percent="18"
-          :default-percent="80"
+          :default-percent="78"
           split="vertical"
           class="detail-pane"
         >
@@ -20,7 +20,7 @@
           </template>
           <template slot="paneR">
             <div class="resourceTable-wrap">
-              <missingParts />
+              <missingParts :info="missInfo" />
             </div>
           </template>
         </split-pane>
@@ -50,7 +50,9 @@ export default {
       form: {},
       stateOptions: [],
       headerShow: true,
-      basicData: {}
+      basicData: {},
+      missInfo: {},
+      rowData: {}
     }
   },
   computed: {
@@ -95,11 +97,15 @@ export default {
 
   methods: {
     rowClick(data) {
+      this.rowData = data
       this.getLeftCount(data.row.extProcessPlan)
       this.getRightCount(data.row.extProcessPlan)
       this.getMissInfo(data.row.extProcessPlan)
       // this.$emit('rowClick', data.row)
     },
+    // getPageData(val) {
+    //   this.getMissInfo(this.rowData.row, val)
+    // },
     getLeftCount(obj) {
       const params = {
         'operator': 'AND',
@@ -132,8 +138,8 @@ export default {
       }
       post(`/ExtSupporting/count`, params).then(res => {
         if (res.items) {
-          // this.aoData = res.items.content[0]
-          // this.loading = true
+          this.$set(this.missInfo, 'leftItem', res.items)
+          // this.missInfo.leftItem = res.items
         }
       }).finally(() => {
       })
@@ -164,8 +170,7 @@ export default {
       }
       post(`/ExtProcessPlan/count`, params).then(res => {
         if (res.items) {
-          // this.aoData = res.items.content[0]
-          // this.loading = true
+          this.$set(this.missInfo, 'rightItem', res.items)
         }
       }).finally(() => {
       })
@@ -207,8 +212,7 @@ export default {
       }
       post(`/ExtSupportingItem/supportingItemAoId`, params).then(res => {
         if (res.items) {
-          // this.aoData = res.items.content[0]
-          // this.loading = true
+          this.$set(this.missInfo, 'missList', res.items)
         }
       }).finally(() => {
       })
@@ -239,16 +243,13 @@ export default {
     margin: 4px;
     margin-top: 0px;
     padding: 8px;
-    height: calc(100% - 20px);
-    width: calc(100% - 24px);
+    height: 100%;
+    width: 100%;
     background-color: #fff;
     .detail-pane {
       width: 100%;
       height: calc(100% - 6px);
     }
-    // .splitter-pane{
-    //   height: calc(100% - 6px);
-    // }
     .splitter-pane-resizer.vertical {
       opacity: 1;
       background-color: #F1F4F5;
@@ -258,7 +259,6 @@ export default {
     }
     .three-member-wrap{
       height: 100%;
-      overflow: auto;
       .dee-form2{
         margin-top:6px;
         .el-form-item{
@@ -268,15 +268,11 @@ export default {
     }
     .resourceTable-wrap {
       height: 100%;
-      overflow: auto;
       padding: 0 10px;
       box-sizing: border-box;
     }
     .dee-panel{
-      height: 100%;
-    }
-    .el-tab-pane{
-      height: calc(100% - 10px);
+      height: 100% !important;
     }
     .color{
      &.Not{

applications/dee-mes/src/views/assemblyPlanManagement/stationPlanMaintenance/missingParts.vue

@@ -3,47 +3,57 @@
   <div class="missing-parts">
     <div class="search-box">
       <div class="title">生产准备符合项</div>
-      <div class="num">127/72</div>
+      <div class="num">{{ detailInfo.leftItem }}/<span class="blue">{{ detailInfo.rightItem }} </span></div>
     </div>
     <div class="">
       <h4>缺件信息列表</h4>
       <el-table
-        :data="standData"
+        :data="detailInfo.missList && detailInfo.missList.content"
         border
         size="mini"
         align="center"
+        :height="420"
       >
         <el-table-column
-          prop="serialNumber"
+          prop="extMaterial.resName"
           label="物料名称"
           width="60"
           align="center"
         />
         <el-table-column
-          prop="serialNumber"
+          prop="reqAmount"
           label="需求数"
           min-width="50"
           align="center"
         />
         <el-table-column
-          prop="serialNumber"
+          prop="unableAmount"
           label="库存可用数"
           min-width="50"
           align="center"
         />
         <el-table-column
-          prop="serialNumber"
+          prop="takeAmount"
           label="库存占用数量"
           width="60"
           align="center"
         />
         <el-table-column
-          prop="serialNumber"
+          prop="lostAmount"
           label="缺件数"
           min-width="50"
           align="center"
         />
       </el-table>
+      <!-- <el-pagination
+        v-if="detailInfo.missList && detailInfo.missList.totalElements>0"
+        small
+        :current-page="page"
+        :page-size="1"
+        layout="total, prev, pager, next, jumper"
+        :total="detailInfo.missList && detailInfo.missList.totalElements"
+        @current-change="handleCurrentChange"
+      /> -->
     </div>
   </div>
 </template>
@@ -52,11 +62,27 @@
 // import { post } from '@/utils/http'
 export default {
   name: 'MissingParts',
+  props: {
+    info: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   data() {
     return {
-      standData: [{
-        serialNumber: 1
-      }]
+      detailInfo: {},
+      page: 1,
+      pageSize: 20
+    }
+  },
+  watch: {
+    info: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        console.log(1212, val)
+        this.detailInfo = val
+      }
     }
   },
   created() {
@@ -65,6 +91,9 @@ export default {
 
   },
   methods: {
+    handleCurrentChange(val) {
+      this.$emit('getInfo', val)
+    }
   }
 }
 </script>
@@ -89,6 +118,9 @@ export default {
     text-align: center;
     font-size:20px;
     margin: 10px 0;
+    .blue{
+      color:#59c4e6;
+    }
   }
  }
 }