车间组件完成情况

src/views/ManufacturingCenter/CompletionOfWorkshopComponents/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="app-container">
     <el-card>
-      <el-select v-model="Machine" filterable clearable size="small" style="margin:0px 10px 0px 10px;width: 180px;" placeholder="机床号" @change="getTreeData">
+      <el-select v-model="MachineValue" filterable size="small" style="margin:0px 10px 0px 10px;width: 180px;" placeholder="机床号" @change="getTreeData">
         <el-option
-          v-for="item in Machines"
+          v-for="item in Machine"
           :key="item.value"
           :label="item.label"
           :value="item.value">
@@ -11,7 +11,7 @@
           <div style="float: right; color: #8492a6; font-size: 13px">{{ item.value2 }}</div>
         </el-option>
       </el-select>
-      <el-select v-model="Complete" size="small" clearable placeholder="是否完成" style="margin:0px 10px;width: 120px;">
+      <el-select v-show="false" v-model="Complete" size="small" clearable placeholder="是否完成" style="margin:0px 10px;width: 120px;">
         <el-option
           v-for="item in Completes"
           :key="item.value"
@@ -20,85 +20,79 @@
       </el-select>
     </el-card>
     <el-row>
-      <el-col style="width: 530px">
+      <el-col style="width: 450px">
         <el-card>
-          <el-table
-            :data="tableData1"
-            loading="loading"
-            class="table"
-            style="height: 800px"
-            highlight-current-row
-            empty-text="   "
-            border>
+          <el-table :data="tableData1" style="height: 670px" highlight-current-row border>
             <el-table-column type="index" label="序号" width="50"/>
-            <el-table-column align="center" label="工艺名" width="90">
+            <el-table-column align="center" label="工序名" width="150">
               <template slot-scope="scope">
                 {{ scope.row.工艺名称 }}
               </template>
             </el-table-column>
-            <el-table-column align="center" label="序间质检" width="90">
+            <el-table-column align="center" label="操作者" width="120">
               <template slot-scope="scope">
-                {{ scope.row.序间质检 }}
+                {{ scope.row.员工姓名 }}
               </template>
             </el-table-column>
-            <el-table-column align="center" label="不合格数" width="90">
+            <el-table-column align="center" label="数量" show-overflow-tooltip min-width="90">
               <template slot-scope="scope">
-                {{ scope.row.不合格数量 }}
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="操作者" show-overflow-tooltip width="90">
-              <template slot-scope="scope">
-                {{ scope.row.操作者 }}
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="完成日期" width="100">
-              <template slot-scope="scope">
-                {{ scope.row.完成日期 }}
+                {{ scope.row.投产数量 }}
               </template>
             </el-table-column>
           </el-table>
         </el-card>
       </el-col>
       <el-col style="width:600px">
-        <el-row>
-          <el-card class="box-card" style="min-height: 400px">
-            <div>机床图号：{{ MachineLabel }} 机床名称：{{ MachineName }}</div>
-            <div style="min-height: 400px;margin-left: 50px;">
-              <el-tree
-                :data="departmentData"
-                :props="defaultProps"
-                :expand-on-click-node="false"
-                :indent="30"
-                class="gongyizhiding"
-                default-expand-all
-                @node-click="onClick"/>
-            </div>
-          </el-card>
-        </el-row>
-        <el-row>
-          <el-card style="height: 400px">
-            详情
-          </el-card>
-        </el-row>
+        <el-card>
+          <span>机床图号：{{ 机床图号 }} 机床名称：{{ 机床名称 }}</span>
+          <div style="margin: 10px 0 0 50px;height: 300px;overflow: auto">
+            <el-tree
+              :data="departmentData"
+              :props="defaultProps"
+              :indent="80"
+              :expand-on-click-node="false"
+              class="selectTree"
+              default-expand-all
+              @node-click="onClick"/>
+          </div>
+        </el-card>
+        <el-card style="height: 350px">
+          <el-table :data="tableData2" height="300" highlight-current-row border @row-click="searchTable1">
+            <el-table-column type="index" label="序号" width="50"/>
+            <el-table-column align="center" label="图号及规格" width="220">
+              <template slot-scope="scope">
+                {{ scope.row.零件图号 + '\xa0\xa0\xa0\xa0\xa0' + scope.row.规格 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="制品名称" width="200">
+              <template slot-scope="scope">
+                {{ scope.row.零件名称 }}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="数量" min-width="90">
+              <template slot-scope="scope">
+                {{ scope.row.投产总数量 }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import { getMachines, getGroups } from '@/api/ManufacturingCenter/CompletionOfWorkshopComponents'
-import Cookie from 'js-cookie'
+import { getMachines, getGroups, selectParts, selectProcedure } from '@/api/ManufacturingCenter/CompletionOfWorkshopComponents'
 
 export default {
   data() {
     return {
-      Machine: '', // 机床号
-      Machines: [],
-      Group: '', // 组号
-      Groups: [],
-      number: '', // 零件图号
+      MachineValue: '', // 机床号
+      Machine: [],
+      option: [], // 组号
       tableData1: [],
-      Complete: '',
+      tableData2: [],
+      Complete: 2,
       Completes: [{
         value: 1,
         label: '完成'
@@ -106,10 +100,13 @@ export default {
         value: 2,
         label: '在制'
       }],
-      departmentData: [], // 树状数据
-      MachineDrawingNumber: [], // 获取树状机床信息
-      MachineLabel: '', // 机床图号
-      MachineName: '' // 机床名称
+      机床图号: '',
+      机床名称: '',
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      departmentData: [] // 树状数据
     }
   },
   created() {
@@ -117,100 +114,85 @@ export default {
   },
   methods: {
     getMachine() {
-      if (Cookie.get('machineValue') !== undefined) {
-        this.Machine = ''
-        this.Machines = []
-        this.Group = ''
-        this.Groups = []
-        getMachines().then(response => {
-          for (let i = 0; i < response.data.length; i++) {
-            this.Machines.push({
-              label: response.data[i].机床图号,
-              value: response.data[i].机床流水号,
-              value2: response.data[i].机床名称
-            })
-          }
-          if (Cookie.get('group') !== undefined) {
-            this.Machine = parseInt(Cookie.get('machineValue'))
-            this.getGroup()
-            this.getTableData()
-            this.Group = parseInt(Cookie.get('group'))
-            // this.getTableData()
-            Cookie.remove('machineValue')
-            Cookie.remove('group')
-          } else {
-            // this.getTableData()
-            Cookie.remove('machineValue')
-            Cookie.remove('group')
-          }
-        })
-      } else {
-        this.Machine = ''
-        this.Machines = []
-        this.Group = ''
-        this.Groups = []
-        getMachines().then(response => {
-          for (let i = 0; i < response.data.length; i++) {
-            this.Machines.push({
-              label: response.data[i].机床图号,
-              value: response.data[i].机床流水号,
-              value2: response.data[i].机床名称
-            })
-          }
-        })
-      }
-    }, // 获取组号
-    getGroup() {
-      this.Group = ''
-      this.Groups = []
-      getGroups(this.Machine).then(response => {
+      this.MachineValue = ''
+      this.Machine = []
+      getMachines().then(response => {
         for (let i = 0; i < response.data.length; i++) {
-          this.Groups.push({
-            label: response.data[i].组号,
-            value: response.data[i].组件流水号
+          this.Machine.push({
+            label: response.data[i].机床图号,
+            value: response.data[i].机床流水号,
+            value2: response.data[i].机床名称
           })
         }
-        this.Group = response.data[0].组件流水号
+      }).then(() => {
+        this.MachineValue = this.Machine[0].value
+        this.getTreeData()
       })
-    }, // 获取树状数据
+    },
+    // 获取树状数据
     getTreeData() {
-      for (let i = 0; i < this.Machines.length; i++) {
-        if (this.Machine === this.Machines[i].value) {
-          this.MachineLabel = this.Machines[i].label
-          this.MachineName = this.Machines[i].value2
+      for (let i = 0; i < this.Machine.length; i++) {
+        if (this.MachineValue === this.Machine[i].value) {
+          this.机床图号 = this.Machine[i].label
+          this.机床名称 = this.Machine[i].value2
         }
       }
-      getGroups(this.Machine).then(response => { // 初始化机床图号分类
-        this.options = []
+      this.option = []
+      getGroups(this.MachineValue).then(response => {
         for (let i = 0; i < response.data.length; i++) {
-          this.options.push({
-            label: response.data[i].组号 + '..........' + response.data[i].组件名称,
+          this.option.push({
+            isLeaf: false,
+            label: response.data[i].组号 + '\xa0\xa0\xa0' + (response.data[i].组件名称 ? response.data[i].组件名称 : ''),
             value: response.data[i].组件流水号,
             father: true,
             children: []
           })
         }
       }).then(() => {
-        // this.options.map(firstLevel => {
-        //     processNameSelect(firstLevel.value).then(response => { // 根据分类查询机床图号
-        //         firstLevel.children = []
-        //         for (let j = 0; j < response.data.length; j++) {
-        //             firstLevel.children.push({
-        //                 label: response.data[j].机床图号,
-        //                 value: response.data[j].机床流水号,
-        //                 father: false
-        //             })
-        //         }
-        //     })
-        // })
+        this.option.map(firstLevel => {
+          // 根据分组查零件
+          selectParts(1, firstLevel.value, 0, 0).then(response => {
+            firstLevel.children = []
+            for (let j = 0; j < response.data.length; j++) {
+              firstLevel.children.push({
+                label: (response.data[j].零件图号 ? response.data[j].零件图号 : '无零件图号') + '\xa0\xa0\xa0\xa0\xa0\xa0' + (response.data[j].规格 ? response.data[j].规格 : '') + '\xa0\xa0\xa0\xa0\xa0\xa0' + (response.data[j].投产总数量 ? response.data[j].投产总数量 : '') + '..........' + (response.data[j].零件名称 ? response.data[j].零件名称 : '无零件名称'),
+                value: response.data[j].工艺计划流水号,
+                father: false
+              })
+            }
+          })
+        })
       }).then(() => {
-        this.departmentData = this.options
+        this.departmentData = this.option
+      })
+    },
+    onClick(num) {
+      this.tableData1 = []
+      this.tableData2 = []
+      if (num.father === true) {
+        selectParts(1, num.value, 0, 0).then(response => {
+          this.tableData2 = response.data
+        })
+      } else {
+        selectParts(0, 0, 1, num.value).then(response => {
+          this.tableData2 = response.data
+        })
+      }
+    },
+    searchTable1(row) {
+      this.tableData1 = []
+      selectProcedure(row.工艺计划流水号).then(response => {
+        this.tableData1 = response.data
       })
     }
   }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss">
+  .selectTree{
+    .el-tree-node__content>.el-tree-node__expand-icon{
+      display: inline !important;
+    }
+  }
 </style>