修改、删除、发布功能

components/applyPurchase/BatchPublish.vue

@@ -4,24 +4,24 @@
     <table>
       <thead>
         <tr>
-          <th>
+          <th width="60">
             <label class="com-check-box">
               <input type="checkbox" id="all" @change="onCheck()" v-model="isCheckAll">
               <label for="all"></label>
             </label>全选
           </th>
-          <th><i class="red-text">*</i>型号</th>
-          <th><i class="red-text">*</i>品牌</th>
-          <th>采购数量</th>
-          <th>单价预算</th>
-          <th>封装</th>
-          <th>生产日期</th>
-          <th><i class="red-text">*</i>截止时间</th>
-          <th>操作</th>
+          <th width="160"><i class="red-text">*</i>型号</th>
+          <th width="132"><i class="red-text">*</i>品牌</th>
+          <th width="100">采购数量</th>
+          <th width="128">单价预算</th>
+          <th width="76">封装</th>
+          <th width="102">生产日期</th>
+          <th width="144"><i class="red-text">*</i>截止时间</th>
+          <th width="92">操作</th>
         </tr>
       </thead>
       <tbody v-for="(item, index) in bomList.content">
-      <tr>
+      <tr v-if="!item.active">
         <td>
           <label class="com-check-box">
             <input type="checkbox" @change="onCheck(index)" v-model="item.checked" :id="index">
@@ -36,10 +36,45 @@
         <td>{{item.produceDate}}</td>
         <td>{{item.releaseDate | date}}</td>
         <td class="operate">
-          <a class="modify-btn">修改</a>
-          <a class="delete-btn">删除</a>
-          <!--<a class="submit-btn">确认</a>
-          <a class="cancel-btn">取消</a>-->
+          <a class="modify-btn" @click="modifyItem(index)">修改</a>
+          <a class="delete-btn" @click="deleteItem(index)">删除</a>
+        </td>
+      </tr>
+      <tr class="modify-row" v-if="item.active">
+        <td>
+          <label class="com-check-box">
+            <input type="checkbox" @change="onCheck(index)" v-model="item.checked" :id="index">
+            <label :for="index"></label>
+          </label>
+        </td>
+        <td>
+          <input type="text" class="form-control" v-model="modifyObj.code">
+        </td>
+        <td>
+          <input type="text" class="form-control" v-model="modifyObj.brand">
+        </td>
+        <td>
+          <input type="text" class="form-control" v-model="modifyObj.amount">
+        </td>
+        <td>
+          <select class="form-control" v-model="modifyObj.currency">
+            <option value="RMB">¥</option>
+            <option value="USD">$</option>
+          </select>
+          <input class="form-control" type="text" v-model="modifyObj.unitPrice">
+        </td>
+        <td>
+          <input type="text" class="form-control" v-model="modifyObj.encapsulation">
+        </td>
+        <td>
+          <input type="text" class="form-control" v-model="modifyObj.produceDate">
+        </td>
+        <td>
+          <input type="text" class="form-control" v-model="modifyObj.releaseDate">
+        </td>
+        <td class="operate">
+          <a class="submit-btn" @click="submitModify(index)">确认</a>
+          <a class="cancel-btn" @click="cancelModify(index)">取消</a>
         </td>
       </tr>
       </tbody>
@@ -76,7 +111,8 @@
         pageSize: 10,
         nowPage: 1,
         isCheckAll: false,
-        showRemindBox: false
+        showRemindBox: false,
+        modifyObj: {}
       }
     },
     components: {
@@ -87,6 +123,7 @@
         let list = this.$store.state.applyPurchase.bomMaterial.bomList.data
         for (let i = 0; i < list.content.length; i++) {
           list.content[i].checked = false
+          list.content[i].active = false
         }
         return list
       },
@@ -110,11 +147,23 @@
         this.$store.dispatch('applyPurchase/loadBOMMaterialList', {bomId: this.$route.params.id, page: this.nowPage, count: this.pageSize})
       },
       submitBOM: function () {
-        this.$http.post('/seek/confirmBom', {'bomId': Number(this.$route.params.id)})
+        let str = ''
+        for (let i = 0; i < this.bomList.content.length; i++) {
+          if (this.bomList.content[i].checked) {
+            str += this.bomList.content[i].id + ','
+          }
+        }
+        let param = {'bomId': Number(this.$route.params.id)}
+        if (str.length) {
+          str = str.substring(0, str.length - 1)
+          param.spIds = str
+        }
+        this.$http.post('/seek/confirmBom', param)
           .then(response => {
             if (response.data.success) {
               this.showRemindBox = true
               this.listenPage(1)
+              this.$store.dispatch('applyPurchase/loadBOMNumber', {bomId: this.$route.params.id})
             } else {
               this.$message.error('发布失败')
             }
@@ -124,7 +173,7 @@
           })
       },
       onCheck: function (index) {
-        if (!index) {
+        if (typeof index === 'undefined') {
           let isCheckedAll = true
           for (let i = 0; i < this.bomList.content.length; i++) {
             if (!this.bomList.content[i].checked) {
@@ -132,16 +181,63 @@
               break
             }
           }
-          console.log(isCheckedAll)
-          this.setAllCheck(isCheckedAll)
-        } else {
-          console.log(this.bomList.content[index].checked)
+          this.setAllCheck(!isCheckedAll)
+          this.isCheckAll = !isCheckedAll
         }
       },
       setAllCheck: function (flag) {
         for (let i = 0; i < this.bomList.content.length; i++) {
           this.bomList.content[i].checked = flag
         }
+      },
+      modifyItem: function (index) {
+        for (let i = 0; i < this.bomList.content.length; i++) {
+          this.bomList.content[i].active = false
+        }
+        this.bomList.content[index].active = true
+        this.modifyObj = this.bomList.content[index]
+        this.modifyObj.releaseDate = this.getDate(this.bomList.content[index].releaseDate)
+      },
+      cancelModify: function (index) {
+        this.bomList.content[index].active = false
+      },
+      getDate: function (input) {
+        const d = new Date(input)
+        const year = d.getFullYear()
+        const monthTemp = d.getMonth() + 1
+        const month = monthTemp < 10 ? '0' + monthTemp : '' + monthTemp
+        const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
+        return year + '-' + month + '-' + day
+      },
+      submitModify: function (index) {
+        this.$http.put('/seek/updateSeekPurchaseByBatch', this.modifyObj)
+          .then(response => {
+            console.log(response.data)
+            if (response.data.success) {
+              this.listenPage(1)
+              this.$message.success('修改成功')
+              this.bomList.content[index].active = false
+            } else {
+              this.$message.error('修改失败')
+            }
+          }, err => {
+            console.log(err)
+            this.$message.error('系统错误')
+          })
+      },
+      deleteItem: function (index) {
+        this.$http.put('/seek/deleteSeekPurchaseByBatch', this.bomList.content[index])
+          .then(response => {
+            if (response.data.success) {
+              this.listenPage(1)
+              this.$message.success('删除成功')
+            } else {
+              this.$message.error('删除失败')
+            }
+          }, err => {
+            console.log(err)
+            this.$message.error('系统错误')
+          })
       }
     }
   }
@@ -162,6 +258,7 @@
     }
     table {
       width: 100%;
+      table-layout: fixed;
       thead {
         tr {
           th {
@@ -194,6 +291,9 @@
             background: #f3f3f3;
           }
           td {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
             &.operate {
               a {
                 display: block;
@@ -216,6 +316,67 @@
               }
             }
           }
+          &.modify-row {
+            td {
+              position: relative;
+              input, select {
+                height: 20px;
+                border-radius: 3px;
+                background: #f4f4f4;
+                border: 1px solid #b5b5b5;
+                text-align: center;
+                padding: 0 5px;
+              }
+              &:nth-child(2) {
+                input {
+                  width: 113px;
+                }
+              }
+              &:nth-child(3) {
+                input {
+                  width: 93px;
+                }
+              }
+              &:nth-child(4) {
+                input {
+                  width: 71px;
+                }
+               }
+              &:nth-child(5) {
+                input {
+                  width: 65px;
+                  padding: 0 5px 0 30px;
+                }
+                select {
+                  width: 25px;
+                  padding: 0 0 0 2px;
+                  background: url(/images/applyPurchase/select.png) no-repeat right;
+                  background-size: 12px 19px;
+                  background-position: 13px 0px;
+                  position: absolute;
+                  top: 33px;
+                  border-bottom: none;
+                  border-top: none;
+                  border-left: 0;
+                }
+              }
+              &:nth-child(6) {
+                input {
+                  width: 54px;
+                }
+              }
+              &:nth-child(7) {
+                input {
+                  width: 72px;
+                }
+              }
+              &:nth-child(8) {
+                input {
+                  width: 101px;
+                }
+              }
+            }
+          }
         }
       }
     }