mall-web-ssr/components/supplier/resource.vue

<template>
<div class="resource_info">
  <div class="container">
    <div class="crumbs">
      <div class="container">
        <div class="menu-com row">
          <div class="menu-title col-md-12">
            <a href="/">首页 ></a>
            <a href="/supplier">供应商资源 ></a>
            <span>供应商物料</span>
          </div>
        </div>
      </div>
    </div>
    <div class="user_info">
      <div class="user_title">
        <div class="user_name">
          <span>深圳优软科技有限公司 &nbsp;<i class="fa fa-angle-down"></i></span>
          <a href="/">进入店铺</a>
        </div>
        <div class="user_mes">
          <div class="mes-list">
            <p>
              <span><i class="supplier_icon1"></i>企业执照号：155</span>
              <span><i class="supplier_icon2"></i> 地址：145</span>
            </p>
            <p>
              <span><i class="supplier_icon3"></i> 邮箱：1</span>
              <span><i class="supplier_icon4"></i> 电话：14553</span>
              <span><i class="supplier_icon5"></i> 行业：14444</span>
            </p>
          </div>
        </div>
      </div>
      <div class="search">
        <div class="input-group">
          <input type="search" class="form-control" placeholder="请输入要查找的内容"
                 v-model="searchCode" @search="goodsSearch(searchCode)"/>
          <span class="input-group-btn">
            <button type="button" class="btn" id="search_btn" @click="goodsSearch(searchCode)">
              搜索 <i class="fa fa-search"></i>
            </button>
        </span>
        </div>
      </div>
    </div>
    <div class="info_list">
      <table>
        <thead>
        <tr>
          <th width="66">序号</th>
          <th width="1008">
            <span>原厂型号 / 品牌</span>
            <span>类目（名称） / 单位</span>
            <span>规格</span>
          </th>
          <th width="116">操作</th>
        </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list.content" @click="jumpDetail(item.id)">
            <td v-text="index + 1">12</td>
            <td>
              <ul class="list-inline">
                <li class="item">
                  <span class="fl">原厂型号</span>
                  <p v-text="item.cmpCode ? spliceString(item.cmpCode, 95) : '暂无信息'">2</p>
                </li>
                <li class="item">
                  <span class="fl">类目（名称）</span>
                  <p v-text="item.prodName ? spliceString(item.prodName, 95) : '暂无信息'">1</p>
                </li>
                <li class="item">
                  <span class="fl">规格</span>
                  <p v-text="item.spec ? spliceString(item.spec, 95) : '暂无信息'">1</p>
                </li>
                <li class="item">
                  <span class="fl">品牌</span>
                  <p v-text="item.brand ? spliceString(item.brand, 95) : '暂无信息'">2</p>
                </li>
                <li class="item">
                  <span class="fl">单位</span>
                  <p v-text="item.unit ? item.unit : '暂无信息'">1</p>
                </li>
              </ul>
            </td>
            <td>
              <a @click="hasDialog = true" @mouseleave="hasClick = false" @mouseenter="hasClick = true">立即询价</a>
            </td>
          </tr>
        </tbody>
      </table>
      <div style="float: right;background: #ecf1f1;">
        <page :total="list.totalElements" :page-size="pageParams.count"
              :current="pageParams.page" v-on:childEvent="handleCurrentChange">
        </page>
      </div>
    </div>
    <el-dialog
      title="我要询价"
      :visible.sync="hasDialog ">
      <div class="form_dialog">
        <ul class="list-inline">
          <li class="form-item">
            <span>型号：</span>
            <p>32432</p>
          </li>
          <li class="form-item">
            <span>类目：</span>
            <p>3244333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333332</p>
          </li>
          <li class="form-item">
            <span>品牌：</span>
            <p>32432</p>
          </li>
          <li class="form-item">
            <span>规格：</span>
            <p>32432</p>
          </li>
          <li class="form-item">
            <span><i>*</i>截止日期：</span>
            <el-date-picker
              v-model="form.name"
              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="form.date1"/>
          </li>
          <li class="form-item">
            <span>单价预算：</span>
            <select v-model="form.date1" class="form-control" style="width:40px;">
              <option value="RMB">¥</option>
              <option value="USD">$</option>
            </select>
            <input type="number" class="form-control"/>
          </li>
          <li class="form-item">
            <span>生产日期：</span>
            <el-date-picker
              v-model="form.date2"
              type="date"
              :picker-options="pickerOptions"
              @change="setDeadProduction"
              :editable="false"
              :clearable="true"
              size="mini">
            </el-date-picker>
          </li>
          <li class="form-item">
            <span>采购数量：</span>
            <input type="number" class="form-control"/>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <a type="button" @click="hasDialog=false">询价提交</a>
      </span>
    </el-dialog>
  </div>
</div>
</template>

<script>
  import {spliceStr, formatDate} from '~utils/baseUtils.js'
  import Page from '~/components/common/page/pageComponent.vue'
  export default {
    name: 'ResourceView',
    data () {
      return {
        pickerOptions: {
          disabledDate (time) {
            // 大于等于今天 小于三个月后
            return time.getTime() < Date.now() - 1000 * 60 * 60 * 24 || time.getTime() > Date.now() + 1000 * 60 * 60 * 24 * 30 * 3
          }
        },
        hasDialog: false,
        hasClick: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        dialogVisible: false,
        searchCode: '',
        pageParams: {
          count: 10,
          page: 1
        }
      }
    },
    components: {
      Page
    },
    computed: {
      list () {
        return this.$store.state.supplier.material.material.data
      }
    },
    methods: {
      setDeadProduction () {
        this.form.name = formatDate(this.form.name, 'yyyy-MM-dd hh:mm:ss')
      },
      setDeadLineValid: function () {
        this.form.date2 = formatDate(this.form.date2, 'yyyy-MM-dd hh:mm:ss')
        // this.validObj.deadline = true
      },
      onSubmit () {
        console.log('submit!')
      },
      spliceString (str, length) {
        return spliceStr(str, length)
      },
      jumpDetail (id) {
        if (!this.hasClick) {
          this.$router.push(this.$route.path + '/' + id)
        }
      },
      handleCurrentChange (type) {
        this.pageParams.page = type
        this.$store.dispatch('supplier/loadMaterialList', {page: type, size: 20, vendUU: this.$route.params.uuid})
      },
      goodsSearch (type) {
        if (type) {
          this.$store.dispatch('supplier/loadMaterialList', {
            page: 1,
            size: 20,
            vendUU: this.$route.params.uuid,
            keyword: type
          })
        }
      }
    }
  }
</script>

<style type="text/scss" lang="scss">
.resource_info{
  background: #ecf1f1;
  .el-dialog{
    width: 680px!important;
    .el-dialog__header{
      background: #4290f7;
      line-height: 40px;
      padding: 0 20px 0;
      .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;
      a{
        display:inline-block;
        background: #3c7cf5;
        color:#fff;
        font-size: 14px;
        line-height: 30px;
        height:30px;
        padding:0 10px;
        border-radius:5px;
      }
    }
  }
  .form_dialog{
    ul{
      li{
        width:50%;
        font-size: 14px;
        color:#666;
        vertical-align: top;
        margin-bottom:15px;
        &.form-item {
          position: relative;
          p{
            margin:0;
            margin-left:80px;
            word-break: break-all;
            word-wrap: break-word;
          }
          span {
            float:left;
            width: 80px;
            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: 230px;
          }
          input {
            font-size: 14px;
            width: 230px;
            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;
            }
          }
        }
      }
    }
  }
  .crumbs{
    background: #ecf1f1;
    .menu-com{
      margin: 0;
      .menu-title{
        line-height: 40px;
        font-size: 14px;
        padding-left: 0;
        margin:0;
        a{
          color: #5078cb;
          font-size: 14px;
        }
      }
    }
  }
  .user_info{
    .user_title{
      display:inline-block;
      position:relative;
      padding-bottom:13px;
      margin-right:330px;
      &:hover{
        .user_mes{
          display:block;
        }
      }
      .user_name{
        span{
          font-size: 20px;
          color:#666;
          font-weight: bold;
          margin-right:10px;
        }
        a{
          display:inline-block;
          padding:0 10px;
          border-radius:3px;
          font-size: 12px;
          height:24px;
          line-height: 24px;
          color:#fff;
          background: #ffa200;
        }
      }
      .user_mes{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        z-index: 200;
        height:10px;
        &:before{
          content: '';
          display:block;
          position:absolute;
          bottom:5px;
          left:20px;
          z-index: 100;
          border: 5px solid rgba(0,0,0,.7);
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -o-transform:rotate(45deg);
          -ms-transform: rotate(45deg);
          transform:rotate(45deg);
        }
        .mes-list{
          padding:10px 10px;
          background: rgba(0,0,0,.7);
          color:#fff;
          p{
            max-width:1183px;
            min-width:118px;
            margin:0;
            line-height: 20px;
            font-size: 12px;
            color:#fff;
            overflow: hidden;
            white-space: nowrap;
            span{
              margin: 0 5px;
              .supplier_icon1{
                display:inline-block;
                position: relative;
                top: 5px;
                width:20px;
                height:18px;
                background: url(/images/supplier/icon/supplier_icon.png)no-repeat 0 0;
              }
              .supplier_icon2{
                display:inline-block;
                position: relative;
                top: 5px;
                width:20px;
                height:18px;
                background: url(/images/supplier/icon/supplier_icon.png)no-repeat -20px 0;
              }
              .supplier_icon3{
                display:inline-block;
                position: relative;
                top: 5px;
                width:20px;
                height:18px;
                background: url(/images/supplier/icon/supplier_icon.png)no-repeat -40px 0;
              }
              .supplier_icon4{
                display:inline-block;
                position: relative;
                top: 5px;
                height:18px;
                width:22px;
                background: url(/images/supplier/icon/supplier_icon.png)no-repeat -60px 0;
              }
              .supplier_icon5{
                display:inline-block;
                position: relative;
                top: 5px;
                width:20px;
                height:18px;
                background: url(/images/supplier/icon/supplier_icon.png)no-repeat -85px 0;
              }
            }
          }
        }
      }
    }
    .search{
      width:310px;
      margin:0;
      float:right;
      .btn{
        background: #3c7cf5;
        color:#fff;
      }
    }
  }
  .info_list{
    padding-bottom:200px;
    table {
      table-layout: fixed;
      thead{
        tr{
          line-height: 32px;
          vertical-align: middle;
          th{
            font-size: 14px;
            color:#fff;
            text-align: center;
            background: #3975f4;
            span{
              display:inline-block;
              width:33%;
            }
          }
        }
      }
      tbody{
        tr{
          border:1px solid #dadada;
          &:nth-child(odd){
            background: #fff;
          }
          &:nth-child(even){
            background: #f8f8f8;
          }
          &:hover{
            cursor:pointer;
            background: #f8fafe;
            td{
              &:first-child{
                border-left:1px solid #3975f4;
              }
              &:last-child{
                border-right:1px solid #3975f4;
              }
              border-top:1px solid #3975f4;
              border-bottom:1px solid #3975f4;
            }
          }
          td{
            vertical-align: middle;
            margin:0 auto;
            padding:10px 0;
            &:first-child, &:last-child{
              color:#ed791c;
              text-align: center;
            }
            a{
              display:inline-block;
              padding:0 10px;
              margin:0 auto;
              line-height: 24px;
              border-radius:3px;
              height:24px;
              font-size: 12px;
              color:#fff;
              background: #3c7cf5;
              text-align: center;
            }
            ul{
              margin-left:5px;
            }
            .item{
              font-size: 12px;
              line-height: 18px;
              padding: 10px 0;
              vertical-align: top;
              width:33%;
              span{
                display:inline-block;
                width:85px;
                text-align: right;
                color:#3c7cf5;
              }
              p{
                display:block;
                width:210px;
                margin-left:100px;
                margin-bottom:0;
                color:#333;
                word-break: break-all;
                word-wrap:break-word;
              }
            }
          }
        }
      }
    }
  }
}
</style>