20200204创建外购计划，备料分配，外购备料请款界面修改

src/views/ManufacturingCenter/CreatePreparationBill/index.vue

@@ -18,47 +18,63 @@
         <el-tooltip :open-delay="1200" effect="dark" content="打印备料单" placement="top">
           <el-button type="primary" size="small" icon="el-icon-printer" style="margin-left:10px" @click="exportTable('BL')">打印自家备料单</el-button>
         </el-tooltip>
+        <el-tooltip :open-delay="1000" effect="dark" content="导出备料分配单" placement="top">
+          <el-button type="warning" class="el-icon-download" size="small" style="margin: 10px 0 0 140px" @click="exportExcel">导出</el-button>
+        </el-tooltip>
       </el-row>
     </el-card>
 
     <el-card>
-      <el-table v-loading="loading" :data="tableData" height="760" style="width: 100%;margin: 3px 0" size="mini" border stripe highlight-current-row element-loading-text="拼命加载中" @selection-change="handleSelectionChange">
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        height="760"
+        style="width: 1126px; margin: 3px 0"
+        size="mini"
+        border
+        stripe
+        sortable
+        highlight-current-row
+        element-loading-text="拼命加载中"
+        @sort-change="sortChange"
+        @selection-change="handleSelectionChange">
         <el-table-column
           type="selection"
-          width="55"
+          width="50"
           align="center"/>
-        <el-table-column label="打印状态" prop="备料打印" align="center">
+        <el-table-column label="备料分配" prop="备料分配" align="center" width="90">
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.备料打印!=='0'" type="success" size="mini">已导出</el-tag>
-            <el-tag v-else type="warning" size="mini">未导出</el-tag>
+            <el-tag v-if="scope.row.备料打印 ==='1' && scope.row.是否外购备料==='0'" type="success" size="mini">自家</el-tag>
+            <el-tag v-if="scope.row.备料打印 ==='0' && scope.row.是否外购备料==='1'" type="success" size="mini">外购</el-tag>
+            <el-tag v-if="scope.row.备料打印 ==='0' && scope.row.是否外购备料==='0'" type="warning" size="mini">未分配</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="零件名称" prop="零件名称" align="center" >
+        <el-table-column label="零件名称" prop="零件名称" align="center" width="280" sortable="custom" show-overflow-tooltip>
           <template slot-scope="scope">
             {{ scope.row.零件名称 }}
           </template>
         </el-table-column>
-        <el-table-column label="零件图号" prop="零件图号" align="center" >
+        <el-table-column label="零件图号" prop="零件图号" align="center" width="180" sortable="custom" show-overflow-tooltip>
           <template slot-scope="scope">
             {{ scope.row.零件图号 }}
           </template>
         </el-table-column>
-        <el-table-column label="数量" align="center" >
+        <el-table-column label="数量" align="center" width="60">
           <template slot-scope="scope">
             {{ scope.row.批次数量 }}
           </template>
         </el-table-column>
-        <el-table-column label="材料" align="center" >
+        <el-table-column label="材料" align="center" width="120" show-overflow-tooltip>
           <template slot-scope="scope">
             {{ scope.row.材料 }}
           </template>
         </el-table-column>
-        <el-table-column label="重量" align="center" >
+        <el-table-column label="重量" align="center" width="60" >
           <template slot-scope="scope">
             {{ scope.row.重量 }}
           </template>
         </el-table-column>
-        <el-table-column label="备料" align="center">
+        <el-table-column label="工艺要求" align="center" width="300" show-overflow-tooltip>
           <template slot-scope="scope">
             {{ scope.row.工艺要求 }}
           </template>
@@ -114,7 +130,7 @@
 </template>
 
 <script>
-import { searchtable, searchtable2, edit, edit2 } from '@/api/ManufacturingCenter/CreatePreparationBill'
+import { searchtable, searchtable2, edit, edit2, getExport } from '@/api/ManufacturingCenter/CreatePreparationBill'
 import { exportExcelMethod } from './exportExcel'
 import $ from 'jquery'
 export default {
@@ -129,13 +145,31 @@ export default {
       tableData: [], // 表格数据
       total: null, // 总条数
       pageSize: 30, // 每页显示条数
-      pageCurrent: 1 // 后台获取页
+      pageCurrent: 1, // 后台获取页
+      ordername: '',
+      order: ''
     }
   },
   created() {
     this.searchTable()
   },
   methods: {
+    sortChange(column, prop, order) {
+      console.log(column + '-' + column.prop + '-' + column.order, 11111)
+      this.ordername = column.prop
+      if (column.ordername === '零件名称') {
+        this.ordername = 1
+      } else if (column.ordername === '零件图号') { this.ordername = 2 } else {
+        this.ordername = ''
+      }
+
+      if (column.order === 'ascending') {
+        this.order = 1
+      } else if (column.order === 'descending') { this.order = 2 } else {
+        this.order = ''
+      }
+      this.searchTable()
+    },
     exportTable() {
       if (this.tableData2.length === 0) {
         this.$message.warning('暂无数据')
@@ -160,7 +194,8 @@ export default {
       } else {
         this.partNamecheck = false
       }
-      searchtable(this.partNamecheck, this.partName, !this.all, 0, this.pageCurrent, this.pageSize).then(response => {
+      searchtable(this.partNamecheck, this.partName, !this.all, 0, this.pageCurrent, this.pageSize, this.ordername, this.order).then(response => {
+        console.log(response)
         if (response.data.total === 0) {
           this.loading = false
         } else {
@@ -178,6 +213,7 @@ export default {
               零件名称: this.Data[i].零件名称,
               零件图号: this.Data[i].零件图号,
               备料打印: this.Data[i].备料打印,
+              是否外购备料: this.Data[i].是否外购备料,
               工艺要求: response.data[0].工艺要求,
               材料: this.Data[i].材料,
               重量: this.Data[i].重量,
@@ -242,9 +278,37 @@ export default {
     handleCurrentChange(val) {
       this.pageCurrent = val
       this.searchTable()
+    },
+    exportExcel() {
+      if (this.partName !== '' && this.partName !== null) {
+        this.partNamecheck = true
+      } else {
+        this.partNamecheck = false
+      }
+      getExport(this.partNamecheck, this.partName, !this.all, 0).then(res => {
+        import('@/vendor/Export2Excel').then(excel => {
+          const tHeader = ['备料分配', '零件名称', '零件图号', '数量', '材料', '重量', '工艺要求']
+          const filterVal = ['分配状态', '零件名称', '零件图号', '批次数量', '材料', '重量', '工艺要求']
+          const list = res.data
+          const data = this.formatJson(filterVal, list)
+          excel.export_json_to_excel({
+            header: tHeader,
+            data,
+            filename: '备料分配表',
+            autoWidth: true,
+            bookType: 'xlsx'
+          })
+        })
+      })
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => {
+        return v[j]
+      }))
     }
   }
 }
+
 </script>
 
 <style scoped>