lshcomment 1.0.0

package/src/components/range/sales-area-tree.vue

@@ -0,0 +1,102 @@
+<template>
+<div class="sale-tree-box">
+    <el-tree 
+        :data="saleTreeData" 
+        :props="saleOptions" 
+        :load="saleLoad" 
+        node-key="id" lazy accordion check-strictly 
+        :default-expanded-keys="[0]" 
+        :expand-on-click-node="false" 
+        @node-click="saleItemClick">
+    </el-tree>
+</div>
+</template>
+<script>
+
+import Vue from 'vue'
+import { Tree } from 'element-ui'
+Vue.use(Tree)
+
+import api from 'common/api'
+
+export default {
+    data() {
+        return {
+            saleTreeData: [],
+            saleOptions: {
+                label: 'name',
+                children: 'zones'
+            },
+        }
+    },
+    computed: {
+        availableType() {
+            let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
+            return userInfo.hasOwnProperty('userAvailableInfo') 
+                    ? userInfo.userAvailableInfo.availableType
+                    : null
+        } 
+    },
+    methods: {
+        saleLoad(node, resolve) {
+            // && this.availableType != 0
+            if ( node.level === 0 ) {
+                this.getSalesAreaFirstLevel(obj => {
+                    let arr = [{
+                        id: 0,
+                        name: obj[0].areaName,
+                        code: obj[0].areaCode
+                    }];
+                    return resolve(arr);
+                })
+            } else if( node.level !== 0 ) {
+                let params = { areaCode: node.data.code }
+                this.getSalesAreaInfoByAreaCode(params, items => {
+                    let arr = [];
+                    if (items !== null) {
+                        items.forEach((item, index) => {
+                            let data = {
+                                name: item.areaName,
+                                code: item.areaCode,
+                            }
+                            arr.push(data)
+                        })
+                    } else {
+                        return resolve([])
+                    }
+                    return resolve(arr)
+                })
+            }
+        },
+        // 根据账号权限获取销售区域一级目录
+        getSalesAreaFirstLevel(next) {
+            api.getSalesAreaInfoByUserAvailableAllLevel(res => {
+                if (res.data.code === 'success') {
+                    let obj = res.data.obj
+                    next(obj)
+                }
+            })
+        },
+        getSalesAreaInfoByAreaCode(params, next) {
+            api.area.getSalesAreaInfoByAreaCode(params, res => {
+                if (res.data.code === 'success') {
+                    let items = res.data.obj.salesAreaSubInfo;
+                    next(items)
+                }
+            })
+        },
+        saleItemClick(data) {
+            this.$emit('itemClick', data);
+        },
+    }
+}
+</script>
+<style scoped>
+.sale-tree-box {
+    height: 200px;
+    overflow-y: scroll;
+}
+</style>
+
+
+

package/src/components/recom/index.vue

@@ -0,0 +1,208 @@
+<template>
+    <div>
+        <el-tabs v-model="activeName" @tab-click='tabClick'>
+            <el-tab-pane v-for="(recomTitle, index) in mileRecomTitle" :label="recomTitle" :key="index" :name="String(index)">
+                <div class="service-tab">
+                    <div class="service-item" :style="{ width: tabWidth ? tabWidth + 'px' : '100%' }">
+                        <template v-if="mileRecomContent.length">
+                            <div 
+                                class="item-info base" 
+                                ref="service" 
+                                v-for="(dataItem, index) of mileRecomContent" 
+                                :key="index"
+                                @click="handleContent(dataItem)"
+                                @mouseenter="enter(index)"
+                                @mouseleave="leave(index)"
+                            >
+                                <div class="service-tit">
+                                    <div>{{ dataItem.recomName }}</div>
+                                    <label>{{ recomTitle }}</label>
+                                </div>
+                                <div class="service-icon">
+                                    <img :src="dataItem.recomUrl" alt="" />
+                                </div>
+                            </div>
+                        </template>
+                        <div class="empty" v-else>暂无数据</div>
+                    </div>
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+        <popup ref="popup" @handleWh="handleWh" />
+    </div>
+</template>
+
+<script>
+    /**
+    * Author: Nassua
+    * Creat time: 2018-10-22
+    * Des: 服务 TAB 切换
+    */
+    import Vue from 'vue'
+    import { Tabs, TabPane, Message } from 'element-ui'
+    import Popup from './popup'
+    import api from 'common/api'
+
+    Vue.use(Tabs)
+    Vue.use(TabPane)
+
+    export default {
+        data() {
+            return {
+                activeName: '0',
+                mileRecomTitle: ['套餐推荐', '热销推荐', '里程推荐'],
+                mileRecomContent: [],
+                tabWidth: 0,
+                setMealItem: '', // 当前选择的套餐服务
+            }
+        },
+        props: {
+            tabContent: {
+                type: Array,
+                default: () => []
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            }
+        },
+        watch: {
+            tabContent: {
+                handler(list) {
+                    this.mileRecomContent = list
+                    this.tabWidth = 0
+                    list.length && this.$nextTick(() => { this.calcWidth() })
+                },
+                immediate: true
+            }
+        },
+        methods: {
+            
+            // 计算服务列表宽度 
+            calcWidth() {
+                console.log(this.$refs)
+                console.log(this.$refs.service)
+                this.$refs.service.forEach(item => { 
+                    this.tabWidth += (item.offsetWidth + (item.offsetWidth ? 16 : 0)) 
+                })
+            },
+
+            // 点击 header，切换服务
+            tabClick(tab) { 
+                this.$emit('handleTab', tab) 
+            },
+
+            // 选择服务
+            handleContent(item) {
+                // 查看禁止点击
+                if (this.disabled) return
+
+                // 套餐需要判断仓库
+                if (item.serviceSetPriceCode) {
+
+                    const { recomCode: serviceCode, serviceSetPriceCode, storeCode } = item
+                    const params = { serviceCode, serviceSetPriceCode, storeCode }
+
+                    api.appoint.validateServiceSetSkuStockNum(params, res => {
+                        if (res && res.data.code == 'success') {
+                            
+                            const list = res.data.obj || []
+                            
+                            if (!list.length) {
+                                Message({
+                                    type: 'warning',
+                                    message: '该套餐无库存，请重新选择',
+                                    showClose: true
+                                })
+                                return
+                            }
+
+                            if (list.length == 1) {
+                                const { whName, whCode } = list[0]
+                                this.$emit('handleContent', { ...item, whName, whCode })
+                                return
+                            }
+                            
+                            const whList = list.map(({ whName, whCode }) => ({ whName, whCode }))
+                            this.setMealItem = item
+                            this.$refs.popup.show(whList)
+                        }
+                    })
+                    return
+                }
+
+                this.$emit('handleContent', item)
+            },
+
+            // 确定仓库
+            handleWh(Vo) {
+                this.$emit('handleContent', { ...this.setMealItem, ...Vo })
+            },
+
+            // 鼠标移入
+            enter(index) {
+                this.mileRecomContent[index].recomUrl = this.mileRecomContent[index].recomUrl.replace(/service/, 'hover')
+            },
+
+            // 鼠标移除
+            leave(index) {
+                this.mileRecomContent[index].recomUrl = this.mileRecomContent[index].recomUrl.replace(/hover/, 'service')
+            }
+        },
+        components: {
+            Popup
+        }
+    }
+</script>
+
+<style lang="scss">
+    .service-tab {
+        overflow-x: auto;
+        .base {
+            box-sizing: border-box;
+            background: #FFFFFF;
+            border: 1px solid #E6E6E6;
+            border-radius: 5px;
+            box-shadow: 0 0 8px 0 rgba(222, 222, 222, 0.77);
+        }
+        .service-item {
+            min-width: 100%;
+            display: inline-block;
+            vertical-align: middle;
+        }
+        .item-info { 
+            float: left;
+            box-sizing: border-box;
+            margin: 0 15px 15px 0;
+            padding: 15px;
+            cursor: pointer;
+            &:hover {
+                background: #447CE6;
+                color: #FFF;
+                .service-tit label {
+                    color: #FFF;
+                }
+            }
+        }
+        .service-tit {
+            display: inline-block;
+            margin-right: 15px;
+            vertical-align: middle;
+            div { font-size: 16px }
+            label { color: #99B3ED }
+        }
+        .service-icon {
+            display: inline-block;
+            width: 60px;
+            height: 60px;
+            background: #D1DDF7;
+            border-radius: 50%;
+            vertical-align: middle;
+            img { width: 100% }
+        }
+        .empty {
+            text-align: center;
+            line-height: 40px;
+        }
+    }
+</style>

package/src/components/recom/popup.vue

@@ -0,0 +1,66 @@
+<template>
+    <el-dialog
+        title="选择套餐商品仓库"
+        :visible.sync="dialogVisible"
+    >   
+        <el-select v-model="wh" value-key="whCode" placeholder="请选择">
+            <el-option
+                v-for="item in whList"
+                :key="item.whCode"
+                :label="item.whName"
+                :value="item"
+            />
+        </el-select>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="commit">确 定</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+    /**
+    * @author: Nassua
+    * @description: 选择套餐添加仓库
+    * @see: 2019-03-20
+    */
+    import { Dialog, Select, Options, Message } from 'element-ui'
+
+    export default {
+        data() {
+            return {
+                dialogVisible: false,
+                whList: [],
+                wh: ''
+            }
+        },
+        methods: {
+
+            // 显示弹窗
+            show(list = []) {    
+                this.dialogVisible = true
+                this.whList = list
+                this.wh = list[0]
+            },
+
+            // 确定
+            commit() {
+                
+                if (!this.wh) {
+                    Message({
+                        type: 'warning',
+                        message: '请选择仓库',
+                        showClose: true
+                    })
+                    return
+                }
+
+                this.dialogVisible = false
+                this.$emit('handleWh', this.wh)
+            }
+        },
+        components: {
+            Dialog
+        }
+    }
+</script>

package/src/components/recom/recom.vue

@@ -0,0 +1,169 @@
+<template>
+  <div id="tab" v-if="MileRecomTitle.length">
+    <el-tabs type="border-card" v-model="activeName" @tab-click='tabClick'>
+      <el-tab-pane ref="tabs" v-for="(item, index) in MileRecomTitle" :key="index" :name="String(index)">
+        <div class="tabs" ref="tabs1" slot="label">{{item.recomTitle}}</div>
+        <div ref="content" class="content" v-if="MileRecom.length" v-for="(item, index) in MileRecom" :key="index">
+          <a href="javascript:;" @click="handleContent(item)">
+            <div class="img"></div>
+            <div class="txt">{{ item.recomName }}</div>
+          </a>
+        </div>
+        <div class="empty" v-if="!MileRecom.length">暂无数据</div>
+      </el-tab-pane>
+      <div @click="swicthLeft" class="left_arrow">
+        <i class="icon iconfont icon-left"></i>
+      </div>
+      <div @click="swicthRight" class="right_arrow">
+        <i class="icon iconfont icon-right"></i>
+      </div>
+    </el-tabs> 
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    tabHeader: {
+      type: Array,
+      default: () => []
+    },
+    tabContent: {
+      type: Array,
+      default: () => []
+    },
+    tabActiveName: {
+      type: String,
+      default: '0'
+    }
+  },
+  data() {
+    return {
+      MileRecomTitle: [],
+      MileRecom: [],
+      tabEle: [],
+      tabEleSub: [],
+      num: -1,
+      offsetLeft: 0,
+      activeName: '0'
+    };
+  },
+  watch: {
+    tabHeader(list) {
+      if (list.length) {
+        this.MileRecomTitle = list
+        this.$nextTick(() => {
+          var pane = this.$refs.tabs[0].$el.children
+          this.tabEle = pane
+          for (var j = 0; j < pane.length; j++) {
+            this.tabEleSub.push(j)
+          }
+        })
+      } else 
+        this.MileRecomTitle = []
+    },
+    tabContent(list) {
+      this.MileRecom = list
+    },
+    tabActiveName(val) {
+      this.activeName = val
+    }
+  },
+  methods: {
+
+    tabClick(tab) {
+      this.$emit("handleTab", tab);
+      this.num = -1
+      this.tabEle = tab.$el.children
+      for (var i = 0; i < this.tabEle.length; i++) {
+        this.tabEleSub = []
+      }
+      for (var j = 0; j < this.tabEle.length; j++) {
+        this.tabEleSub.push(j)
+      }
+      this.offsetLeft = 0
+      if (this.tabEle[0]) this.tabEle[0].style.marginLeft = this.offsetLeft.toString() + "px"
+    },
+
+    handleContent(item) {
+      this.$emit("handleContent", item)
+    },
+
+    swicthLeft() {
+      this.tabEleSub.splice(0, 1)
+      if (this.tabEleSub.length < 4) {
+        //控制显示切换
+        return false;
+      } else {
+        this.num++
+        this.offsetLeft -= this.tabEle[0].offsetWidth
+        this.tabEle[0].style.marginLeft = this.offsetLeft.toString() + "px"
+      }
+    },
+
+    swicthRight() {
+      this.tabEleSub = []
+      for (var i = 0; i < this.tabEle.length; i++) {
+        this.tabEleSub = []
+      }
+      for (var j = 0; j < this.tabEle.length; j++) {
+        this.tabEleSub.push(j)
+      }
+      if (this.offsetLeft >= 0) {
+        return false
+      } else {
+        this.offsetLeft += this.tabEle[0].offsetWidth
+        this.tabEle[0].style.marginLeft = this.offsetLeft.toString() + "px"
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  #tab {
+    position: relative;
+    margin-top: 20px;
+  }
+
+#tab {
+  position: relative;
+  margin-top: 20px;
+  .tabs {
+    width:140px;
+    text-align:center;
+    color:#48576A;
+  }
+  .content {
+    display: inline-block;
+    padding-left: 65px;
+    transition: all 300ms ease-in;
+    a{
+      text-decoration: none;
+    }
+  }
+  .img {
+    width: 40px;
+    height: 40px;
+    background-color: hotpink;
+    margin: 0 auto;
+  }
+  .txt {
+    text-align: center;
+    color: #48576A;
+  }
+  .right_arrow {
+    right: 12px;
+  }
+  .left_arrow, .right_arrow {
+    position: absolute;
+    top: 35px;
+  }
+  .left_arrow, .right_arrow:hover {
+    cursor: pointer;
+  }
+  .empty {
+    text-align: center;
+    line-height: 81px;
+  }
+}
+</style>

package/src/components/record/index.vue

@@ -0,0 +1,148 @@
+<template>
+    <div ref="list" :style="{ width: tabWidth }">
+        <template ref="item" v-if="recordList.length" >
+            <div class="item-info" v-for="(item, index) of recordList" :key="index">
+                <div class="channel-type">{{ item.businessTypeName }}</div>
+                <div>{{ item.confirmTime }}</div>
+                <div>
+                    <label>里程数：</label>
+                    <span class="color">{{ item.currentMileage }}KM</span>
+                </div>
+                <div class="color">No.{{ item.historyOrderNo }}</div>
+                <div>{{ item.storeName }}</div>
+                <div>
+                    <label>销售人：</label>
+                    <span>{{ item.salesEmpName }}</span>
+                </div>
+                <div class="ellipsis">{{ item.carDisplayName }}</div>
+                <div>{{ item.custPlates }}</div>
+                <div class="service-label">服务内容：</div>
+                <el-tooltip effect="dark" :content="item.serviceName" placement="top-start">
+                    <div class="ellipsis service-set color">{{ item.serviceName }}</div>
+                </el-tooltip>
+                <div class="status" v-if="item.isCancel != 1">{{item.orderStatus | orderStatusFliter }}</div>
+                <div class="status" v-else>废单</div>
+            </div>
+        </template>
+        <div v-else class="empty">暂无数据</div>
+    </div>
+</template>
+
+<script>
+    /**
+    * Author: Nassua
+    * Creat time: 2018-10-19
+    * Des: 历史进场记录
+    */
+    import Vue from 'vue'
+    import { Tooltip } from 'element-ui'
+    import api from 'common/api'
+
+    Vue.use(Tooltip)
+
+    export default {
+        data() {
+            return {
+                recordList: []
+            }
+        },
+        props: {
+            custPlates: {
+                type: String,
+                default: ''
+            }
+        },
+        computed: {
+            tabWidth() {
+                return this.recordList.length ? this.recordList.length * 235 + 'px' : '100%'
+            }
+        },
+        watch: {
+            custPlates(val) {
+                val && this.initRepairList(val)
+            } 
+        },
+        filters: {
+            orderStatusFliter(val) {
+                const Vo = { 0: '【待处理】', 1: '【处理中】', 9: '【待结算】', 10: '【已结算】' }
+                return Vo[val]
+            }
+        },
+        methods: {
+
+            // 初始化维修记录
+            initRepairList(custPlates) {
+
+                const params = { 
+                    custPlates,
+                    pageStart: 1, 
+                    pageNums: 10, 
+                }
+
+                api.appoint.queryBookOrderHistoryList(params, res => {
+                    if (res && res.data.code == 'success') {
+                        this.recordList = res.data.obj.list || []
+                        this.recordList.length && this.initServiceList()
+                    }
+                })
+            },
+
+            // 初始化服务
+            initServiceList() {
+
+                const params = this.recordList.map(({ historyOrderNo, isBookOrder }) => ({ historyOrderNo, isBookOrder }))
+
+                api.appoint.queryBookOrderDetailListNoPage(params, res => {
+                    if (res && res.data.code == 'success') {
+                        const Vo = res.data.obj || {}
+                        for(let [key, val] of Object.entries(Vo)) {
+                            let str = ''
+                            for(let [i, item] of val.entries()) { str += item.serviceName + '、' }
+                                for(let [i, item] of this.recordList.entries()) {
+                                if(item.historyOrderNo == key) {
+                                    this.recordList[i].serviceName = str.substr(0, str.length-1)
+                                    break
+                                }
+                            }
+                        }
+                    }
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .item-info {
+        display: inline-block;
+        width: 210px;
+        margin-right: 20px;
+        padding: 10px;
+        background: #F5F8FC;
+        border-radius: 3px;
+        vertical-align: middle;
+        line-height: 24px;
+        .color { color: #6185BD }
+        .service-label {
+            padding: 5px 0;
+            border-bottom: 1px solid #E0E5ED;
+        }
+        .ellipsis {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+        .service-set { 
+            height: 24px;
+        }
+        .status {
+            height: 24px;
+            color: #13a4e2;
+            line-height: 24px;
+        }
+    }
+    .empty {
+        text-align: center;
+        line-height: 40px;
+    }
+</style>