mall-web-ssr/components/applyPurchase/SeekProduct.vue

<template>
  <div class="seek-product">
    <el-dialog
      title="我要询价"
      :visible.sync="showObj.show">
      <div class="form_dialog">
        <ul class="list-inline">
          <li class="form-item">
            <span>品牌：</span>
            <p>{{productItem.brand}}</p>
          </li>
          <li class="form-item">
            <span>物料名称：</span>
            <p>{{productItem.prodName}}</p>
          </li>
          <li class="form-item">
            <span>型号：</span>
            <p>{{productItem.cmpCode}}</p>
          </li>
          <li class="form-item">
            <span>规格：</span>
            <p>{{productItem.spec}}</p>
          </li>
          <li class="form-item">
            <span><i>*</i>截止日期：</span>
            <el-date-picker
              :class="{'error': !validObj.deadline}"
              v-model="applyObj.deadline"
              type="date"
              :picker-options="pickerOptions"
              @change="setDeadLineValid"
              :editable="false"
              :clearable="true"
              size="mini">
            </el-date-picker>
          </li>
          <li class="form-item">
            <span>封装：</span>
            <input type="text" class="form-control" v-model="applyObj.encapsulation"/>
          </li>
          <!--<li class="form-item">-->
          <!--<span>单价预算：</span>-->
          <!--<select v-model="applyObj.currency" class="form-control" style="width:40px;">-->
          <!--<option value="RMB">¥</option>-->
          <!--<option value="USD">$</option>-->
          <!--</select>-->
          <!--<input type="number" v-model="applyObj.unitPrice" class="form-control" :class="{'error': !validObj.unitPrice}"/>-->
          <!--</li>-->
          <!--<li class="form-item">-->
          <!--<span>生产日期：</span>-->
          <!--<input type="text" class="form-control" v-model="applyObj.produceDate"/>-->
          <!--</li>-->
          <li class="form-item">
            <span>采购数量(PCS)：</span>
            <input type="number" class="form-control" v-model="applyObj.amount" :class="{'error': !validObj.amount}"/>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <button @click="authorityInterceptor(baseUrls.userPublishSeek, goPublish)">询价提交</button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { seekProduct } from '~utils/mixin'
  export default {
    mixins: [seekProduct],
    props: {
      showObj: {
        type: Object,
        default: function () {
          return {show: false}
        }
      },
      /*
      *  spec: '',
       prodName: '',
       brand: '',
       cmpCode: ''
      * */
      productItem: {
        type: Object,
        default: {}
      }
    },
    watch: {
      'showObj.show': {
        handler: function (val) {
          if (val) {
            this.emptyForm()
          }
        }
      }
    }
  }
</script>
<style lang="scss">
  .seek-product {
    .el-dialog{
      width: 680px!important;
      .el-dialog__header{
        background: #4290f7;
        line-height: 40px;
        padding: 0 20px 0;
        display:block;
        .el-dialog__title{
          color:#fff;
        }
        .el-dialog__headerbtn:hover .el-dialog__close, .el-dialog__headerbtn:focus .el-dialog__close{
          color:#fff;
        }
      }
      .el-dialog__body{
        padding: 10px 20px;
      }
      .el-dialog__footer{
        text-align: center;
        button{
          display:inline-block;
          border:0;
          box-shadow: none;
          background: #3c7cf5;
          color:#fff;
          font-size: 14px;
          line-height: 30px;
          height:30px;
          padding:0 10px;
          border-radius:5px;
        }
      }
    }
    .form_dialog{
      .el-date-editor--date {
        width: 230px;
        &.error {
          input {
            border: 1px solid #f4645f !important;
          }
        }
      }
      ul{
        li{
          width:50%;
          font-size: 14px;
          color:#666;
          vertical-align: top;
          margin-bottom:15px;
          &.form-item {
            position: relative;
            p{
              margin:0;
              margin-left:112px;
              word-break: break-all;
              word-wrap: break-word;
            }
            span {
              float:left;
              width: 112px;
              text-align: right;
              display: inline-block;
              color:#3c7cf5;
              i {
                position: relative;
                top: 2px;
                right: 5px;
                color: #e41515;
              }
            }
            ul {
              line-height: normal;
              position: absolute;
              top: 19px;
              left: 79px;
              background: #fff;
              border: 1px solid #b5b5b5;
              z-index: 1;
              max-height: 120px;
              overflow-y: auto;
              overflow-x: hidden;
              border-radius: 3px;
              width: 114px;
              font-size: 12px;
              li {
                height: 24px;
                line-height: 24px;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0 5px;
                &:hover {
                  background: #ddd;
                }
              }
            }
            select {
              width: 40px;
              position: absolute;
              height: 20px;
              background: url('/images/applyPurchase/select.png')no-repeat right;
              background-position-x: 23px;
              padding: 0 0 0 7px;
              border-radius: 0;
              & + input {
                padding-left: 45px;
              }
            }
            .el-input {
              width: 198px;
            }
            input {
              font-size: 14px;
              width: 198px;
              height: 20px;
              line-height: 20px;
              border-radius: 2px;
              padding: 0 3px;
              box-shadow: none;
              -webkit-box-shadow: none;
              -moz-box-shadow: none;
              &.error {
                border-color: #f4645f!important;
              }
            }
          }
        }
      }
    }
  }
</style>