创建供应商模块

components/supplier/details.vue

@@ -17,23 +17,23 @@
           <img src="/images/store/common/default.png">
         </div>
         <div class="right">
-          <h4>32222222222222222222</h4>
+          <h4 v-text="detail.cmpCode">32222222222222222222</h4>
           <ul class="list-unstyled">
             <li class="item">
               <span>类目(名称)</span>
-              <p v-text="spliceString(test, 400)">3errrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr2</p>
+              <p v-text="detail.prodName? spliceString(detail.prodName, 400) : '暂无信息'">3errrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr2</p>
             </li>
             <li class="item">
               <span>品牌</span>
-              <p>32</p>
+              <p v-text="detail.brand ? detail.brand : '暂无信息'">32</p>
             </li>
             <li class="item">
               <span>单位</span>
-              <p>32</p>
+              <p v-text="detail.unit ? detail.unit : '暂无信息'">32</p>
             </li>
             <li class="item">
               <span>规格</span>
-              <p>32</p>
+              <p v-text="detail.spec ? detail.spec : '暂无信息'">32</p>
             </li>
             <li class="item">
               <span>种类</span>
@@ -95,8 +95,7 @@
     </div>
     <el-dialog
       title="我要询价"
-      :visible.sync="hasDialog "
-      :before-close="handleClose">
+      :visible.sync="hasDialog ">
       <div class="form_dialog">
         <ul class="list-inline">
           <li class="form-item">
@@ -165,7 +164,7 @@
 </template>
 
 <script>
-  import {cutOutString, formatDate} from '~utils/baseUtils.js'
+  import {spliceStr, formatDate} from '~utils/baseUtils.js'
   export default {
     name: 'DetailsView',
     data () {
@@ -192,6 +191,12 @@
         test: '322222222222222222222222222222222222222222222222222222'
       }
     },
+    computed: {
+      detail () {
+        console.log(this.$store.state.supplier.detail.detail.data)
+        return this.$store.state.supplier.detail.detail.data
+      }
+    },
     methods: {
       setDeadProduction () {
         this.form.name = formatDate(this.form.name, 'yyyy-MM-dd hh:mm:ss')
@@ -204,14 +209,7 @@
         console.log('submit!')
       },
       spliceString (str, length) {
-        return cutOutString(str, length)
-      },
-      handleClose (done) {
-        this.$confirm('确认关闭？')
-          .then(_ => {
-            done()
-          })
-          .catch(_ => {})
+        return spliceStr(str, length)
       }
     }
   }

components/supplier/merchant.vue

@@ -18,17 +18,16 @@
     </div>
     <div class="list_info">
       <ul class="list-inline">
-        <li v-for="item in list.content">
+        <li v-for="item in list.content" @click="jumpResource(item.enUU)">
           <div class="has_shop" v-if="item.isStore === 1">已开店</div>
           <div class="enterprise_name" v-text="item.enName">深圳英优软科技有限公司</div>
-          <div class="select_btn">添加为<br/>供应商</div>
-          <div class="select_btn" v-if="false">查看<br/>更多</div>
+          <div class="select_btn" v-html="isInFrame ? '添加为<br/>供应商' : '查看<br/>更多'" @mouseleave="hasJump = false" @mouseenter="hasJump = true" @click="addResource(item.enUU)"></div>
           <div class="popups">
-            <p>企业执照号：</p><p v-text="item.enBusinesscode ? item.enBusinesscode : '-'">hjfhqei</p>
-            <p>地址：</p><p v-text="item.enAddress ? item.enAddress : '-'"></p>
-            <p>邮箱：</p><p v-text="item.enEmail ? item.enEmail : '-'">h</p>
-            <p>电话：</p><p v-text="item.enTel ? item.enTel : '-'">1</p>
-            <p>行业：</p><p v-text="item.enProfession ? item.enProfession : '-'">1</p>
+            <p>企业执照号：</p><p v-text="item.enBusinesscode ? item.enBusinesscode : '暂无信息'">1</p>
+            <p>地址：</p><p v-text="item.enAddress ? item.enAddress : '暂无信息'">1</p>
+            <p>邮箱：</p><p v-text="item.enEmail ? item.enEmail : '暂无信息'">h</p>
+            <p>电话：</p><p v-text="item.enTel ? item.enTel : '暂无信息'">1</p>
+            <p>行业：</p><p v-text="item.enProfession ? item.enProfession : '暂无信息'">1</p>
           </div>
         </li>
       </ul>
@@ -48,6 +47,7 @@
     name: 'MerchantView',
     data () {
       return {
+        hasJump: false,
         searchCode: '',
         pageParams: {
           count: 20,
@@ -59,17 +59,35 @@
       Page
     },
     computed: {
+      isInFrame () {
+        if (this.$route.query.type === 'erp') {
+          return true
+        }
+      },
       list () {
         return this.$store.state.supplier.merchant.merchant.data
       }
     },
     methods: {
+      addResource (id) {
+        if (this.isInFrame) {
+          window.open(this.$route.query.localPath + this.$route.query.erpPath)
+        } else {
+          this.$router.push('supplier/' + id)
+        }
+      },
+      jumpResource (id) {
+        if (!this.hasJump) {
+          this.$router.push('supplier/' + id)
+        }
+      },
       goodsSearch (type) {
         if (type) {
           this.$store.dispatch('supplier/loadVendorList', {page: this.pageParams.page, size: this.pageParams.count, keyword: type})
         }
       },
       handleCurrentChange (type) {
+        this.pageParams.page = type
         this.$store.dispatch('supplier/loadVendorList', {page: type, size: this.pageParams.count})
       }
     }
@@ -216,7 +234,7 @@
           left:0;
           background: #6c6c6c;
           width:267px;
-          height:110px;
+          min-height:110px;
           padding:25px 15px 15px 10px;
           transition: all .3s ease;
           opacity: 0;
@@ -224,11 +242,12 @@
           overflow: hidden;
           p{
             float:left;
-            white-space:pre-wrap;
-            word-wrap:break-word;
             margin: 0 !important;
             line-height: 18px;
-            height:18px;
+            max-height:18px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
             &:nth-child(2n-1){
               width:42px;
             }
@@ -241,6 +260,12 @@
             &:nth-child(2){
               width:155px;
             }
+            &:nth-child(4){
+              max-height:38px;
+              overflow: auto;
+              white-space:pre-wrap;
+              word-wrap:break-word;
+            }
             &:last-child{
               overflow: hidden;
               text-overflow: ellipsis;

components/supplier/resource.vue

@@ -20,13 +20,15 @@
         </div>
         <div class="user_mes">
           <div class="mes-list">
-            <ul>
-              <li><span>企业执照号：</span><span>1</span></li>
-              <li><span>地址：</span><span>1</span></li>
-              <li><span>邮箱：</span><span>1</span></li>
-              <li><span>电话：</span><span>1</span></li>
-              <li><span>行业：</span><span>1</span></li>
-            </ul>
+            <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>
@@ -47,70 +49,152 @@
         <thead>
         <tr>
           <th width="66">序号</th>
-          <th width="336">原厂型号 / 品牌</th>
-          <th width="336">类目（名称） / 单位</th>
-          <th width="336">规格</th>
+          <th width="1008">
+            <span>原厂型号 / 品牌</span>
+            <span>类目（名称） / 单位</span>
+            <span>规格</span>
+          </th>
           <th width="116">操作</th>
         </tr>
         </thead>
         <tbody>
-          <tr>
-            <td>12</td>
+          <tr v-for="(item, index) in list.content" @click="jumpDetail(item.id)">
+            <td v-text="index + 1">12</td>
             <td>
-              <div class="item">
-                <span class="fl">原厂型号</span>
-                <p>12322222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p>
-              </div>
-              <div class="item">
-                <span class="fl">品牌</span>
-                <p>21322222222222222222222222222222222222222222222222222222222222322222222222222222222222222222222222222222222222222222222222222222222222222</p>
-              </div>
-            </td>
-            <td><div class="item">
-              <span class="fl">类目（名称）</span>
-              <p>1</p>
-            </div>
-              <div class="item">
-                <span class="fl">单位</span>
-                <p>1</p>
-              </div>
+              <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>
-              <div class="item">
-                <span class="fl">规格</span>
-                <p>1</p>
-              </div>
+              <a @click="hasDialog = true" @mouseleave="hasClick = false" @mouseenter="hasClick = true">立即询价</a>
             </td>
-            <td><a href="/">立即询价</a></td>
-          </tr>
-          <tr>
-            <td>212</td>
-            <td>212</td>
-            <td>212</td>
-            <td>212</td>
-            <td>212</td>
           </tr>
         </tbody>
       </table>
       <div style="float: right;background: #ecf1f1;">
-        <page :total="pageParams.total" :page-size="pageParams.count"
+        <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: {
-          total: 100,
           count: 10,
           page: 1
         }
@@ -121,24 +205,168 @@
     },
     computed: {
       list () {
-        console.log(this.$store.state.supplier.material.material.data)
         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) {
-        console.log(type)
+        this.pageParams.page = type
+        this.$store.dispatch('supplier/loadMaterialList', {page: type, size: 20, vendUU: this.$route.params.uuid})
       },
       goodsSearch (type) {
-        console.log(type)
+        if (type) {
+          this.$store.dispatch('supplier/loadMaterialList', {
+            page: 1,
+            size: 20,
+            vendUU: this.$route.params.uuid,
+            keyword: type
+          })
+        }
       }
     }
   }
 </script>
 
-<style scoped type="text/scss" lang="scss">
+<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{
@@ -206,9 +434,62 @@
           transform:rotate(45deg);
         }
         .mes-list{
-          padding:5px 10px;
+          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;
+              }
+            }
+          }
         }
       }
     }
@@ -235,6 +516,10 @@
             color:#fff;
             text-align: center;
             background: #3975f4;
+            span{
+              display:inline-block;
+              width:33%;
+            }
           }
         }
       }
@@ -281,10 +566,15 @@
               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;
@@ -294,12 +584,9 @@
               p{
                 display:block;
                 width:210px;
-                height:54px;
                 margin-left:100px;
                 margin-bottom:0;
                 color:#333;
-                overflow: hidden;
-                text-overflow: ellipsis;
                 word-break: break-all;
                 word-wrap:break-word;
               }

pages/supplier/material.vue → pages/supplier/_uuid/index.vue

@@ -11,7 +11,7 @@
     layout: 'main',
     fetch ({store, route}) {
       return Promise.all([
-        store.dispatch('supplier/loadMaterialList', {page: 1, size: 20, vendUU: route.query.uuid})
+        store.dispatch('supplier/loadMaterialList', {page: 1, size: 20, vendUU: route.params.uuid})
       ])
     },
     components: {

utils/baseUtils.js

@@ -96,6 +96,17 @@ export const cutOutString = (str, length) => {
   return str
 }
 
+// 根据字符长度剪切字符
+export const spliceStr = (str, length) => {
+  for (let i = 1; i <= str.length; i++) {
+    if (getRealLength(str.substr(0, i)) > length) {
+      str = str.substr(0, i - 1) + '...'
+      break
+    }
+  }
+  return str
+}
+
 // 格式化日期，返回字符串
 export const formatDate = (date, fmt) => {
   if (!date) {