发布确认页新增字段

components/applyPurchase/BatchPublish.vue

@@ -11,14 +11,11 @@
           <!--<label for="all"></label>-->
           <!--</label>全选-->
           <!--</th>-->
-          <th width="140"><i class="red-text">*</i>型号</th>
-          <th width="132"><i class="red-text">*</i>品牌</th>
-          <th width="80">采购数量</th>
-          <th width="108">单价预算</th>
-          <th width="76">封装</th>
-          <th width="102">生产日期</th>
-          <th width="124"><i class="red-text">*</i>截止时间</th>
-          <th width="192">操作</th>
+          <th width="615">产品信息</th>
+          <th width="95">采购数量</th>
+          <th width="114">生产日期</th>
+          <th width="136"><i class="red-text">*</i>截止时间</th>
+          <th width="186">操作</th>
         </tr>
         </thead>
         <tbody v-for="(item, index) in bomList.content">
@@ -30,37 +27,51 @@
             </label>
           </td>-->
           <td>
-            <div v-if="item.code && (!item.codeWord || item.codeWord.length == 0)" :title="item.code">{{item.code}}</div>
-            <span class="red-text" v-if="!item.code">请完善信息</span>
-            <div class="similar-select" v-if="item.codeWord && item.codeWord.length > 0" @click="setShowCodeWord(index, $event)">{{item.code}}</div>
-            <ul v-show="item.showCodeWord">
-              <li v-for="code in item.codeWord" @click="modifyItemByWord(index, code.code, 'code')" :title="code.code">{{code.code}}</li>
-            </ul>
-          </td>
-          <td>
-            <div v-if="item.brand && (!item.brandWord || item.brandWord.length == 0)" :title="item.brand">{{item.brand}}</div>
-            <span class="red-text" v-if="!item.brand">请完善信息</span>
-            <div class="similar-select" v-if="item.brandWord && item.brandWord.length > 0" @click="setShowBrandWord(index, $event)">{{item.brand}}</div>
-            <ul v-show="item.showBrandWord" class="brand-word-list">
-              <li v-for="brand in item.brandWord" @click="modifyItemByWord(index, brand.nameEn, 'brand')" :title="brand.nameEn">{{brand.nameEn}}</li>
-            </ul>
-          </td>
-          <td>
-            <div :title="item.amount">{{item.amount || '-'}}</div>
-          </td>
-          <td class="blue-text">
-            <div>
-              <span v-if="item.unitPrice">{{(item.currency === 'RMB' ? '¥' : '$') + item.unitPrice}}</span>
-              <span v-if="!item.unitPrice">-</span>
+            <div class="prod-items">
+              <div class="prod-item prod-item-large">
+                <span class="pi-title">类目：</span>
+                <div class="pi-content over-ell">{{item.prodTitle || '-'}}</div>
+              </div>
+              <div class="prod-item prod-item-large">
+                <span class="pi-title"><i class="red-text">*</i>品牌：</span>
+                <div class="pi-content over-ell" v-if="item.brand && (!item.brandWord || item.brandWord.length == 0)" :title="item.brand">{{item.brand}}</div>
+                <div class="pi-content red-text" v-if="!item.brand">请完善信息</div>
+                <div class="pi-content similar-select over-ell" v-if="item.brandWord && item.brandWord.length > 0" @click="setShowBrandWord(index, $event)">{{item.brand}}</div>
+                <ul v-show="item.showBrandWord">
+                  <li v-for="brand in item.brandWord" @click="modifyItemByWord(index, brand.nameEn, 'brand')" :title="brand.nameEn">{{brand.nameEn}}</li>
+                </ul>
+              </div>
+              <div class="prod-item prod-item-small">
+                <span class="pi-title">单价预算：</span>
+                <div class="pi-content over-ell" v-if="item.unitPrice">{{(item.currency === 'RMB' ? '¥' : '$') + item.unitPrice}}</div>
+                <div class="pi-content over-ell" v-else="!item.unitPrice">-</div>
+              </div>
+              <div class="prod-item prod-item-large">
+                <span class="pi-title"><i class="red-text">*</i>型号：</span>
+                <div class="pi-content over-ell" v-if="item.code && (!item.codeWord || item.codeWord.length == 0)" :title="item.code">{{item.code}}</div>
+                <div class="pi-content red-text" v-if="!item.code">请完善信息</div>
+                <div class="pi-content over-ell similar-select" v-if="item.codeWord && item.codeWord.length > 0" @click="setShowCodeWord(index, $event)">{{item.code}}</div>
+                <ul v-show="item.showCodeWord">
+                  <li v-for="code in item.codeWord" @click="modifyItemByWord(index, code.code, 'code')" :title="code.code">{{code.code}}</li>
+                </ul>
+              </div>
+              <div class="prod-item prod-item-large">
+                <span class="pi-title">规格：</span>
+                <div class="pi-content over-ell">{{item.spec || '-'}}</div>
+              </div>
+              <div class="prod-item prod-item-small">
+                <span class="pi-title">封装：</span>
+                <div class="pi-content over-ell">
+                  {{item.encapsulation || '-'}}
+                </div>
+              </div>
             </div>
           </td>
           <td>
-            <div :title="item.encapsulation">
-              {{item.encapsulation || '-'}}
-            </div>
+            <div class="over-ell" :title="item.amount">{{item.amount || '-'}}</div>
           </td>
           <td>
-            <div :title="item.produceDate">
+            <div class="over-ell" :title="item.produceDate">
               {{item.produceDate || '-'}}
             </div>
           </td>
@@ -128,30 +139,46 @@
              </label>
            </td>-->
           <td>
-            <input type="text" class="form-control" v-model="modifyObj.code" :class="{'error': !validObj.code}" @blur="checkCode" @input="onCodeChange" >
-            <ul v-show="showSimilarCodeList">
-              <li v-for="sCode in similarCode" @click="setCode(sCode.code)">{{sCode.code}}</li>
-            </ul>
-          </td>
-          <td>
-            <input type="text" class="form-control" v-model="modifyObj.brand" :class="{'error': !validObj.brand}" @blur="checkBrand" @input="onBrandChange">
-            <ul class="brand-similar-list" v-show="showSimilarBrandList">
-              <li v-for="sBrand in similarBrand" @click="setBrand(sBrand.nameEn)">{{sBrand.nameEn}}</li>
-            </ul>
+            <div class="prod-items">
+              <div class="prod-item prod-item-large">
+                <span class="pi-title">类目：</span>
+                <input type="text" class="form-control" v-model="modifyObj.prodTitle">
+              </div>
+              <div class="prod-item prod-item-large">
+                <span class="pi-title"><i class="red-text">*</i>品牌：</span>
+                <input type="text" class="form-control" v-model="modifyObj.brand" :class="{'error': !validObj.brand}" @blur="checkBrand" @input="onBrandChange">
+                <ul class="brand-similar-list" v-show="showSimilarBrandList">
+                  <li v-for="sBrand in similarBrand" @click="setBrand(sBrand.nameEn)">{{sBrand.nameEn}}</li>
+                </ul>
+              </div>
+              <div class="prod-item prod-item-small pi-select">
+                <span class="pi-title">单价预算：</span>
+                <select class="form-control" v-model="modifyObj.currency">
+                  <option value="RMB">¥</option>
+                  <option value="USD">$</option>
+                </select>
+                <input class="form-control" type="number" v-model="modifyObj.unitPrice" :class="{'error': !validObj.unitPrice}" @blur="checkUnitPrice" @input="onUnitPriceInput">
+              </div>
+              <div class="prod-item prod-item-large">
+                <span class="pi-title"><i class="red-text">*</i>型号：</span>
+                <input type="text" class="form-control" v-model="modifyObj.code" :class="{'error': !validObj.code}" @blur="checkCode" @input="onCodeChange" >
+                <ul v-show="showSimilarCodeList">
+                  <li v-for="sCode in similarCode" @click="setCode(sCode.code)">{{sCode.code}}</li>
+                </ul>
+              </div>
+              <div class="prod-item prod-item-large">
+                <span class="pi-title">规格：</span>
+                <input type="text" class="form-control" v-model="modifyObj.spec">
+              </div>
+              <div class="prod-item prod-item-small">
+                <span class="pi-title">封装：</span>
+                <input type="text" class="form-control" v-model="modifyObj.encapsulation" @input="onEncapsulationChange">
+              </div>
+            </div>
           </td>
           <td>
             <input type="text" class="form-control" v-model="modifyObj.amount" :class="{'error': !validObj.amount}" @blur="checkAmount" @input="onAmountInput">
           </td>
-          <td>
-            <select class="form-control" v-model="modifyObj.currency">
-              <option value="RMB">¥</option>
-              <option value="USD">$</option>
-            </select>
-            <input class="form-control" type="number" v-model="modifyObj.unitPrice" :class="{'error': !validObj.unitPrice}" @blur="checkUnitPrice" @input="onUnitPriceInput">
-          </td>
-          <td>
-            <input type="text" class="form-control" v-model="modifyObj.encapsulation" @input="onEncapsulationChange">
-          </td>
           <td>
             <input type="text" class="form-control" v-model="modifyObj.produceDate" @input="onProduceDateChange">
           </td>
@@ -201,7 +228,9 @@
           encapsulation: '',
           produceDate: '',
           amount: '',
-          deadline: ''
+          deadline: '',
+          prodTitle: '',
+          spec: ''
         },
         pickerOptions: {
           disabledDate (time) {
@@ -291,15 +320,8 @@
         this.modifyObj.deadline = formatDate(this.modifyObj.deadline, 'yyyy-MM-dd hh:mm:ss')
       },
       initModifyObj: function () {
-        this.modifyObj = {
-          code: '',
-          brand: '',
-          unitPrice: '',
-          currency: 'RMB',
-          encapsulation: '',
-          produceDate: '',
-          amount: '',
-          deadline: ''
+        for (let attr in this.modifyObj) {
+          this.modifyObj[attr] = attr === 'currency' ? 'RMB' : ''
         }
       },
       initValidObj: function () {
@@ -964,6 +986,11 @@
     .blue-text {
       color: #3c7cf5;
     }
+    .over-ell {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
     > p {
       margin: 30px 0 0 0;
       font-size: 16px;
@@ -1007,8 +1034,7 @@
         }
         > tbody {
           > tr {
-            height: 70px;
-            line-height: 70px;
+            height: 101px;
             text-align: center;
             border : {
               bottom: 1px solid #bcd2ff;
@@ -1020,75 +1046,104 @@
             }
             > td {
               position: relative;
-              > ul {
-                line-height: normal;
-                position: absolute;
-                top: 48px;
-                left: 12px;
-                background: #fff;
-                border: 1px solid #b5b5b5;
-                z-index: 1;
-                max-height: 120px;
-                overflow-y: auto;
-                overflow-x: hidden;
-                border-radius: 2px;
-                width: 145px;
-                li {
+              .prod-items {
+                height: 100px;
+                padding-top: 17px;
+                .prod-item {
+                  position: relative;
+                  display: inline-block;
                   height: 30px;
                   line-height: 30px;
-                  cursor: pointer;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  white-space: nowrap;
-                  padding: 0 5px;
-                  text-align: left;
-                  &:hover {
-                    background: #89aefa;
-                    color: #fff;
+                  float: left;
+                  margin-right: 5px;
+                  &:nth-child(n + 4) {
+                    margin-top: 9px;
                   }
-                }
-                &.brand-similar-list {
-                  left: 7px;
-                }
-              }
-              > div {
-                overflow: hidden;
-                overflow-y: unset;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                &.similar-select {
-                  width: 145px;
-                  margin: 0 auto;
-                  border: 1px solid #b5b5b5;
-                  height: 30px;
-                  line-height: 30px;
-                  overflow-y: hidden;
-                  padding: 0 22px 0 5px;
-                  background: url('/images/all/select-icon-full.png') no-repeat;
-                  background-color: #fff;
-                  background-position: 125px 10px;
-                  cursor: default;
-                  border-radius: 2px;
-                  & + ul {
+                  &:nth-child(3n) {
+                    margin-right: 0;
+                  }
+                  .pi-title {
+                    display: inline-block;
+                    text-align: right;
+                    .red-text {
+                      margin-right: 3px;
+                    }
+                  }
+                  .pi-content {
+                    display: inline-block;
+                    text-align: left;
+                    vertical-align: middle;
+                  }
+                  &.prod-item-large {
+                    .pi-content {
+                      width: 145px;
+                    }
+                    .pi-title {
+                      width: 62px;
+                    }
+                  }
+                  &.prod-item-small {
+                    .pi-content {
+                      width: 105px;
+                    }
+                    .pi-title {
+                      width: 70px;
+                    }
+                  }
+                  > ul {
+                    line-height: normal;
+                    position: absolute;
+                    top: 31px;
+                    left: 62px;
+                    background: #fff;
+                    border: 1px solid #b5b5b5;
+                    z-index: 1;
+                    max-height: 120px;
+                    overflow-y: auto;
+                    overflow-x: hidden;
+                    border-radius: 2px;
                     width: 145px;
-                    top: 48px;
-                    left: 12px;
-                    &.brand-word-list {
-                      left: 7px;
+                    li {
+                      height: 30px;
+                      line-height: 30px;
+                      cursor: pointer;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
+                      padding: 0 5px;
+                      text-align: left;
+                      &:hover {
+                        background: #89aefa;
+                        color: #fff;
+                      }
                     }
                   }
                 }
               }
-              div.red-text {
-                line-height: normal;
-                position: absolute;
-                left: 42px;
-                top: 49px;
-                font-size: 12px;
+              .similar-select {
+                width: 145px;
+                margin: 0 auto;
+                border: 1px solid #b5b5b5;
+                height: 30px;
+                line-height: 30px;
+                overflow-y: hidden;
+                padding: 0 22px 0 5px;
+                background: url('/images/all/select-icon-full.png') no-repeat;
+                background-color: #fff;
+                background-position: 125px 10px;
+                cursor: default;
+                border-radius: 2px;
+                & + ul {
+                  width: 145px;
+                  top: 48px;
+                  left: 12px;
+                  &.brand-word-list {
+                    left: 7px;
+                  }
+                }
               }
               &.operate {
                 text-align: left;
-                padding-left: 18px;
                 font-size: 12px;
                 a {
                   color: #3c7cf5;
@@ -1215,72 +1270,72 @@
             }
             &.modify-row {
               td {
-                position: relative;
                 input, select {
                   height: 30px;
                   border-radius: 2px;
-                  border: 1px solid #b5b5b5;
+                  border: 1px solid #dadada;
                   text-align: center;
                   padding: 0 5px;
+                  display: inline-block;
                   &.error {
                     border-color: #f4645f !important;
                   }
                 }
                 input:focus {
-                -webkit-box-shadow: none;
-                -moz-box-shadow: none;
-                box-shadow: none;
-                border: 1px solid #3c7cf5;
-              }
-                &:nth-child(1) {
-                  input {
-                    width: 145px;
-                  }
-                }
-                &:nth-child(2) {
-                  input {
-                    width: 145px;
-                  }
+                  -webkit-box-shadow: none;
+                  -moz-box-shadow: none;
+                  box-shadow: none;
+                  border: 1px solid #3c7cf5;
                 }
-                &:nth-child(3) {
-                  input {
-                    width: 104px;
+                .prod-item {
+                  position: relative;
+                  &.prod-item-large {
+                    input {
+                      width: 145px;
+                    }
                   }
-                }
-                &:nth-child(4) {
-                  input {
-                    width: 103px;
-                    padding: 0 5px 0 30px;
+                  &.prod-item-small {
+                    input {
+                      width: 105px;
+                    }
                   }
-                  select {
-                    width: 25px;
-                    padding: 0 0 0 2px;
-                    background: url(/images/applyPurchase/select2.png) no-repeat right;
-                    background-size: 12px 28px;
-                    background-position: 12px 0;
-                    position: absolute;
-                    top: 20px;
-                    border-bottom: none;
-                    border-top: none;
-                    border-left: 0;
+                  &.pi-select {
+                    input {
+                      width: 103px;
+                      padding: 0 5px 0 30px;
+                    }
+                    select {
+                      width: 25px;
+                      padding: 0 0 0 2px;
+                      background: url(/images/applyPurchase/select2.png) no-repeat right;
+                      background-size: 12px 28px;
+                      background-position: 12px 0;
+                      position: absolute;
+                      top: 1px;
+                      border-bottom: none;
+                      border-top: none;
+                      border-left: 0;
+                    }
                   }
                 }
-                &:nth-child(5) {
+                &:nth-child(2) {
                   input {
-                    width: 96px;
+                    width: 83px;
                   }
                 }
-                &:nth-child(6) {
+                &:nth-child(3) {
                   input {
-                    width: 85px;
+                    width: 106px;
                   }
                 }
-                &:nth-child(7) {
+                &:nth-child(4) {
                   div {
-                    width: 101px;
+                    width: 106px;
                     overflow: unset;
                     input {
-                      width: 125px;
+                      width: 106px;
+                      border-radius: 2px;
+                      border: 1px solid #dadada;
                     }
                   }
                 }

components/applyPurchase/PublishApply.vue

@@ -59,6 +59,12 @@
             </select>
             <input type="number" class="form-control" :class="{'error': !validObj.unitPrice}" v-model="applyObj.unitPrice" @blur="checkUnitPrice" @input="onUnitPriceInput" />
           </div>
+          <div class="form-item">
+           <span>
+              类目：
+            </span>
+            <input type="text" class="form-control" v-model="applyObj.prodTitle"/>
+          </div>
           <div class="form-item">
            <span>
               规格：
@@ -158,6 +164,7 @@
           brand: '',
           unitPrice: '',
           currency: 'RMB',
+          prodTitle: '',
           spec: '',
           encapsulation: '',
           produceDate: '',
@@ -255,6 +262,7 @@
             inquiryItem.endDate = this.applyObj.deadline
             inquiryItem.encapsulation = this.applyObj.encapsulation
             inquiryItem.spec = this.applyObj.spec
+            inquiryItem.prodTitle = this.applyObj.prodTitle
             let inquiryItems = []
             inquiryItems.push(inquiryItem)
             inquiry.inquiryItems = inquiryItems
@@ -512,8 +520,8 @@
         float: left;
         height: 100%;
         p {
-          padding-top: 16px;
-          font-size: 26px;
+          padding-top: 8px;
+          font-size: 22px;
           color: #3975f4;
           margin-bottom: 4px;
         }
@@ -521,7 +529,7 @@
           text-align: left;
           margin-left: 14px;
           .form-item {
-            margin-bottom: 3px;
+            margin-bottom: 4px;
             position: relative;
             span {
               width: 80px;
@@ -581,8 +589,8 @@
             input {
               font-size: 12px;
               width: 111px;
-              height: 20px;
-              line-height: 20px;
+              height: 18px;
+              line-height: 18px;
               border-radius: 2px;
               padding: 0 3px;
               box-shadow: none;
@@ -617,8 +625,8 @@
         color: #fff;
         position: relative;
         h1 {
-          font-size: 26px;
-          margin: 22px 0 0 0;
+          font-size: 22px;
+          margin: 11px 0 0 0;
         }
         h2 {
           font-size: 16px;