报表开发

src/api/mes/proTable/productProcess.js

@@ -11,7 +11,7 @@ export function getList(query) {
 
 
 // 生产进度:报工明细
-export function getListByProcess(query) {
+export function getFeedbackList(query) {
   return request({
     url: '/report/pro/workOrderProgress/getFeedbackList',
     method: "get",
@@ -20,7 +20,7 @@ export function getListByProcess(query) {
 }
 
 // 生产进度:工序明细
-export function getListByUser(query) {
+export function getProcessList(query) {
     return request({
       url: '/report/pro/workOrderProgress/getProcessList',
       method: "get",

src/views/mes/proTable/productProcess/index.vue

 <template>
-  <div class="app-container">
+  <div class="mys-container app-container">
     <el-form :model="queryParams" @submit.native.prevent ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
       <el-form-item :label="$t('项目号')" prop="customerProjectNo">
           <el-input v-model="queryParams.customerProjectNo" :placeholder="$t('请输入项目号')"  />
@@ -23,7 +23,7 @@
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{$t('重置')}}</el-button>
       </el-form-item>
     </el-form>
-    <el-table v-loading="loading" :data="tbodys" @row-click="mainTableClick">
+    <el-table v-loading="loading" :data="tbodys" @row-click="mainTableClick" :max-height="tableHeight">
         <el-table-column label="项目号" align="center" prop="customerProjectNo"></el-table-column>
         <el-table-column label="订单号" align="center" prop="orderCode"></el-table-column>
         <el-table-column label="生产工单" align="center" prop="workorderCode"></el-table-column>
@@ -50,7 +50,32 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-    <div class="second-box"></div>
+    <div class="second-box" v-if="isShowSecond">
+      <el-table v-loading="loadingLeft" :data="tbodysLeft" border @row-click="secondTableClick" :max-height="tableHeightSecond">
+        <el-table-column label="状态" align="center" prop="status"></el-table-column>
+        <el-table-column label="工序名称" align="center" prop="processName"></el-table-column>
+        <el-table-column label="派工数量" align="center" prop="quantity"></el-table-column>
+        <el-table-column label="报工数量" align="center" prop="quantityProduced">
+        </el-table-column>
+        <el-table-column label="合格数量" align="center" prop="quantityQualify"></el-table-column>
+        <el-table-column label="不合格数量" align="center" prop="quantityUnqualify"></el-table-column>
+        <el-table-column label="合格率" align="center" prop="passRate"></el-table-column>
+      </el-table>
+      <el-table v-loading="loadingRight" :data="tbodysRight" border :max-height="tableHeightSecond" style="margin-left: 15px">
+        <el-table-column label="报工人员" align="center" prop="nickName"></el-table-column>
+        <el-table-column label="报工数量" align="center" prop="quantityFeedback"></el-table-column>
+        <el-table-column label="合格数量" align="center" prop="quantityQualify"></el-table-column>
+        <el-table-column label="不合格数量" align="center" prop="quantityUnqualify">
+        </el-table-column>
+        <el-table-column label="标准工时" align="center" prop="stdWorkingTime"></el-table-column>
+        <el-table-column label="实际工时" align="center" prop="machineTime">
+          <template slot-scope="scope">
+            {{scope.row['machineTime'] ? Number(scope.row['machineTime']).toFixed(2) : scope.row['machineTime']}}
+          </template>
+        </el-table-column>
+        <el-table-column label="报工时间" align="center" prop="feedbackTime"></el-table-column>
+      </el-table>
+    </div>
     
     <ItemSelect ref="ItemSelectRef" @onSelected="onItemSelect"/>
   </div>
@@ -59,7 +84,7 @@
 <script>
 import i18n from '../../../../i18n/index'
 
-import { getList, getListByProcess, getListByUser, getListByWorkshop, getListByDefect, getListByWorkOrder, getListByWorkstation, getListByWorkunit } from "@/api/mes/proTable/productProcess";
+import { getList, getFeedbackList, getProcessList } from "@/api/mes/proTable/productProcess";
 import ItemSelect from "@/components/itemSelect/single.vue";
 
 export default {
@@ -70,7 +95,13 @@ export default {
 ],
   data() {
     return {
-      showQueryLPN: false,
+      loadingLeft: true,
+      loadingRight: true,
+      isShowSecond: false,
+      tbodysLeft:[],
+      tbodysRight:[],
+      tableHeightSecond: 0,
+      tableHeight: 0,
       // 遮罩层
       loading: true,
       selectedRows: [],
@@ -128,11 +159,40 @@ export default {
   created() {
     this.getList();
   },
+  mounted(){
+    this.$nextTick(()=>{
+      this._resizeHandler()
+    })
+    this._resizeHandler = () => {
+      this.tableHeight = (window.innerHeight / 2) - 120
+      this.tableHeightSecond = (window.innerHeight / 2) - 100
+    }
+    window.addEventListener('resize', this._resizeHandler)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this._resizeHandler)
+  },
   watch: {
   },
   methods: {
-    mainTableClick(){
-
+    mainTableClick(row){
+      this.loadingLeft = true;
+      getProcessList({workorderCode: row.workorderCode}).then(response => {
+        response.rows.forEach(element => {
+          element['workorderCode'] = row.workorderCode
+        });
+        this.tbodysLeft = response.rows
+        this.loadingLeft = false;
+        this.isShowSecond = true
+      });
+      this.secondTableClick(row)
+    },
+    secondTableClick(row) {
+      this.loadingRight = true;
+      getFeedbackList({workorderCode: row.workorderCode, taskId: row.taskId}).then(response => {
+        this.tbodysRight = response.rows;
+        this.loadingRight = false;
+      });
     },
     onItemSelect(row) {
       if (row != undefined) {
@@ -142,6 +202,7 @@ export default {
     /** 查询排产换型对照信息列表 */
     getList() {
       this.loading = true;
+      this.isShowSecond = false
       this.queryParams['defectStatus'] = true
       if (this.daterangePurchaseDate && this.daterangePurchaseDate.length > 0) {
         this.queryParams['startDate'] = this.daterangePurchaseDate[0]
@@ -191,4 +252,14 @@ export default {
     }
   }
 };
-</script>
+</script>\
+<style lang="scss" scoped>
+.second-box{
+  display: flex;
+}
+.mys-container {
+  .pagination-container {
+    padding: 0px 20px !important;
+  }
+}
+</style>