lshcomment 1.0.0

package/src/components/iris-suitscope/shop.vue

@@ -0,0 +1,262 @@
+<template lang="html">
+  <div class="">
+    <div v-if="!salesTable" class="card">
+      <div class="model" v-if="model">
+      </div>
+      <div class="card-header">
+        经销商店
+      </div>
+      <div class="card-block">
+        <div class="row mt-3">
+          <div class="col-6">
+            <div class="border">
+              <div class="tabBodyScroll">
+                <Tree :expand-on-click-node=false :check-strictly="true" :highlight-current=true :props="props" :load="loadNodeSales" lazy empty-text="暂无数据" node-key='value' @current-change="currentchange">
+                </Tree>
+              </div>
+            </div>
+          </div>
+          <div class="col-6">
+            <div class="card">
+              <div class="card-header">经销商店</div>
+              <div class="card-block">
+                <div class="text-center" v-if="!salesShop.length">
+                  暂无数据
+                </div>
+                <div v-for="(value , index) in salesShop">
+                  <label class=""><input :checked="value.checked" type="checkbox" @click="checked(value)"><span class="ml-2">{{value.storeName}}</span></label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-12 text-center mb-3 mt-3">
+        <b-button @click="close" type="button" variant="default">取消</b-button>
+        <b-button @click="preserve" type="button" variant="primary">保存</b-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import Vue from 'vue'
+  import API from '../../common/api'
+  import common from '../../common/common'
+  import config from '../../common/config'
+  import {
+    Tree
+  } from 'element-ui'
+  import {
+    mapState,
+    mapGetters,
+    mapActions
+  } from 'vuex'
+  export default {
+    props: {
+      tabData: {
+        type: Array,
+        default: function() {
+          return []
+        }
+      }
+    },
+    data() {
+      return {
+        //树形结构模拟数据
+        props: {
+          label: 'name',
+          children: 'zones'
+        },
+        salesTable: false, //销售区域的显示
+        salesShop: [], //选中的销售区域下的商店
+        salesName: "", //销售区域的名字
+        shopDataArr: [], //选中的经销商店
+        shopDataServe: [], //查出来的已选中经销商店
+        shopDataServeRemove: [], //删除的已经保存在后台的数据
+        model: false
+      }
+    },
+    methods: {
+      getTareaTree(type, code, sc) {
+        if (type == 'sales') {
+          //获取销售区域
+          API.area.getSalesAreaInfoByAreaCode({
+            areaCode: code
+          }, sc)
+        } else if (type == 'shop') {
+          // 获取经销商店
+          API.suitScope.queryShopInfo({
+            salesAreaCodes: [code],
+            needPageFlag: "0"
+          }, sc)
+        }
+      },
+      loadNodeSales(node, resolve) {
+        // =========================================
+        if (node.level === 0) {
+          API.getUserAvailableInfo((msg) => {
+            if (msg.data.message === 'success') {
+              this.availableType = msg.data.obj.availableType
+              if (msg.data.obj.storeInfoVo) {
+                var store = msg.data.obj.storeInfoVo.storeCode || ""
+              }
+              if (this.availableType === '1' || this.availableType === '2') {
+                API.getSalesAreaInfoByUserAvailableAllLevel((msg) => {
+                  if (msg.data.message == "success" && msg.data.obj.length != 0) {
+                    return resolve([{
+                      name: msg.data.obj[0].areaName || "",
+                      value: msg.data.obj[0].areaCode || "",
+                      disabled: true,
+                    }]);
+                  }
+                })
+              } else if (this.availableType === '0') {
+                this.model = true
+                this.getTareaTree('shop', msg.data.obj.storeInfoVo.salesCode, (msg) => {
+                  if (msg.data.message == "success") {
+                    this.salesShop = msg.data.obj; //经销商店
+                    for (var i = 0; i < this.salesShop.length; i++) {
+                      if (this.salesShop[i].storeCode === store) {
+                        this.salesShop = [this.salesShop[i]]
+                        for (let j = 0; j < this.shopDataServe.length; j++) {
+                          if (this.shopDataServe[j].storeCode == this.salesShop[i].storeCode) {
+                            this.salesShop[i].checked = true;
+                          }
+                        }
+                      }
+                    }
+                  }
+                })
+                return resolve([{
+                  name: msg.data.obj.storeInfoVo.salesName || "",
+                  value: msg.data.obj.storeInfoVo.salesCode || "",
+                }]);
+              }
+            }
+          })
+          return;
+        }
+        if (this.availableType !== '0') {
+          this.getTareaTree('sales', node.data.value, (msg) => {
+            //获取子集
+            let data = msg.data.obj.salesAreaSubInfo || 0
+            let arr = [];
+            if (data) {
+              for (var i = 0; i < data.length; i++) {
+                arr[i] = {
+                  name: data[i].areaName,
+                  value: data[i].areaCode
+                }
+              }
+              return resolve(arr);
+            }
+            return resolve([])
+          })
+        }
+      },
+      currentchange(a, b) {
+        // 获取经销商店
+        this.salesShop = []; //把经销商店先清空一遍（因为vue的缓存机制不清空checkbox会有缓存问题）
+        this.getTareaTree('shop', a.value, (msg) => {
+          if (msg.data.message == "success") {
+            this.salesShop = msg.data.obj; //经销商店
+            for (var i = 0; i < this.salesShop.length; i++) {
+              for (var j = 0; j < this.shopDataServe.length; j++) {
+                if (this.salesShop[i].storeCode === this.shopDataServe[j].storeCode) {
+                  this.salesShop[i].checked = true;
+                }
+              }
+              for (var h = 0; h < this.shopDataArr.length; h++) {
+                if (this.salesShop[i].storeCode === this.shopDataArr[h].storeCode) {
+                  this.salesShop[i].checked = true;
+                }
+              }
+            }
+            this.salesName = a.name //销售区域的名字
+          }
+        })
+      },
+      removeTree(value) {
+        //删除相应的经销商店
+        for (var i = 0; i < this.shopDataArr.length; i++) {
+          if (this.shopDataArr[i].storeCode == value.storeCode) {
+            this.shopDataArr.splice(i, 1);
+            return true;
+          }
+        }
+        for (var i = 0; i < this.shopDataServe.length; i++) {
+          if (this.shopDataServe[i].storeCode == value.storeCode) {
+            this.shopDataServeRemove.push(this.shopDataServe[i])
+            this.shopDataServe.splice(i, 1);
+            return true;
+          }
+        }
+        return false;
+      },
+      checked(value) {
+        this.$emit('data-change', ['shop'])
+        //判断选中没有，有就删除，没有就添加进去（选中它）
+        if ((this.shopDataArr.length != 0 || this.shopDataServe.length != 0) && this.removeTree(value)) {
+          return;
+        }
+        API.ordinalInfo.getSequence({
+          serviceCode: config.addFinanceCode.salesCode
+        }, (msg) => {
+          this.shopDataArr.push({
+            rangeCode: msg.data.obj,
+            storeCode: value.storeCode,
+            remark: value.storeName,
+            salesName: this.salesName,
+            rangeType: '0'
+          })
+        })
+      },
+      preserve() {
+        // 点击保存的时候
+        if (this.shopDataServeRemove.length !== 0) {
+          this.$emit('remove-tr', this.shopDataServeRemove)
+        }
+        if (this.shopDataArr.length !== 0) {
+          this.$emit('shop-preserve', this.shopDataArr) //触发保存事件把数据传送给使用者
+        }
+        this.$store.dispatch('suitscope/preserveShop', {
+          tabType: 'istabType', //切换到列表页面
+        });
+      },
+      close() {
+        //点击取消的时候切换到选择页
+        this.$store.dispatch('suitscope/preserveShop', {
+          tabType: 'home',
+        });
+      }
+    },
+    components: {
+      Tree
+    },
+    mounted() {
+      var index = 0;
+      for (var i = 0; i < this.tabData.length; i++) {
+        //经销商店的sales是null ，所以我们用sales来筛选出经销商店
+        if (!this.tabData[i].sales) {
+          this.$set(this.shopDataServe, index++, this.tabData[i])
+        }
+      }
+    }
+  }
+</script>
+<style lang="css">
+  .tabBodyScroll {
+    height: 250px;
+    overflow: auto;
+    overflow-x: hidden;
+  }
+  .border {
+    border: 2px solid #ccc;
+  }
+  .model {
+    width: 50%;
+    height: 350px;
+    position: absolute;
+    z-index: 999;
+  }
+</style>

package/src/components/iris-suitscope/tableShow.vue

@@ -0,0 +1,84 @@
+<template lang="html">
+  <div>
+    <button @click="addFinanceArea" type="button" class="btn btn-success btn-sm mb-2">新增</button>
+    <table  class="table table-striped table-bordered">
+      <thead>
+        <tr class="text-center">
+          <th class="text-center">全国</th>
+          <th class="text-center">销售区域</th>
+          <th class="text-center">经销商店</th>
+          <th class="text-center">操作</th>
+        </tr>
+      </thead>
+      <tbody class="text-center">
+        <tr v-for="val in tabData">
+          <th>{{val.nationwide}}</th>
+          <th>{{val.sales}}</th>
+          <th>{{val.shop}}</th>
+          <th class="text-center"><button @click="removeTree(val)" type="button" class="btn btn-danger btn-sm">删除</button></th>
+        </tr>
+      <tr v-if="tabData.length==0">
+        <td colspan='13' class="text-left">暂无数据</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import API from '../../common/api.js'
+import common from '../../common/common.js'
+import { MessageBox } from 'element-ui'
+import {
+  mapState,
+  mapGetters,
+  mapActions
+} from 'vuex'
+Vue.component(MessageBox.name, MessageBox) //用use会在页面一加载的时候弹出一个框来
+export default {
+  props: {
+    tabData: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      tabArr: [], //tab要渲染的数据
+    }
+  },
+  methods: {
+    addFinanceArea() {
+       this.$emit('showHome')
+      //点击新增的时候切换回选择页面
+      this.$store.dispatch('suitscope/preserveShop', {
+        tabType: 'home',
+      });
+    },
+    removeTree(val) {
+      MessageBox.confirm('是否确认删除', '提示', {
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+        type: 'info'
+      }).then(() => {
+        this.$emit('remove-tr', [val])//触发事件把删除掉的对象发给他
+        for (var i = 0; i < this.tabData.length; i++) {
+          if (this.tabData[i].id == val.id) {
+            this.tabData.splice(i, 1);
+          }
+        }
+        this.tabindex = this.tabindexArr[this.tabindexArr.length - 2]
+      }).catch(() => {
+      });
+
+    }
+  }
+}
+</script>
+
+<style lang="css">
+
+</style>

package/src/components/iris-tabscarousel/index.vue

@@ -0,0 +1,268 @@
+<template>
+   <div class="tabs-carou-box" :style="{width: boxWdth + 'px'}" v-if="part">
+       <div class="tabc tabc-left-arrow"  @click="next">
+           <i class="tabc-left-arrow-img"></i>
+        </div>
+       <div class="tabc tabc-cotent"  ref="contbox">
+           <ul :style="{width: itemList.length *74 + 4 + 'px'}">
+               <li v-for="(item, index) in itemList" :key="index" :class="{'tabsc-active': activeIndex == index }" @click="seletItem(index, item)">
+                  <p :title="item[itemName]" class="one-line-text"> {{item[itemName]}}</p>
+                </li>
+           </ul>
+       </div>
+       <div class="tabc tabc-right-arrow" @click="pre">
+            <i class="tabc-right-arrow-img" ></i>
+       </div>
+   </div>
+</template>
+<script>
+// boxWdth容器宽度 类型Number 默认 438 
+// apiName请求接口名 类型String 如：skuData.getInfo
+// addParam请求接口附加参数 类型Object
+// itemCode 列表数据的code名 类型String 默认code；
+// itemName 列表数据的展示名 类型String 默认name；
+// seletCode 选中相应code的条目 类型String
+// defautSeletIndex 如果没有seletCode，则选中相应索引 类型Number 默认0；
+// 是否禁用isDisabled
+// 点击选中触发seletItem事件
+// 禁用状态下点击触发disabledEnent事件
+import Vue from 'vue'
+import api from "common/api";
+import config from "common/config";   
+import common from "common/common.js"
+import collectionApi from 'common/api-collection.js'
+
+
+export default {
+    components: {
+        
+    },
+    props: {
+        addParam:{   
+            type: Object,
+            default: function(){
+                return {};
+            }
+        },
+        boxWdth: {
+            type: Number,
+            default: function(){
+                return 438
+            }
+        },
+        apiName: {
+            type: String,
+            default: function(){
+                return "skuData.getInfo"
+            }
+        },
+        itemCode:{
+            type: String,
+            default: function(){
+                return "code"
+            }
+        },
+        itemName:{
+            type: String,
+            default: function(){
+                return "name"
+            }
+        },
+        defautSeletIndex:{
+            type: Number,
+            default: function(){
+                return 0;
+            }
+        },
+        seletCode: {
+            type: String,
+            default: function(){
+                return ""
+            }
+        },
+        isDisabled: {
+            type: Boolean,
+            default: function(){
+                return false;
+            }
+        }
+    },
+    data() {
+        return {
+            params:{
+                 pageNums: config.pageNums,
+            },
+            itemList: [
+            ],
+            scroll: '',
+            scrollNum: 0,
+            activeIndex: -1,
+            part:false
+        }
+    },
+    methods: {
+       _initData() {
+            let param = Object.assign({}, this.addParam)
+            let arrPropt = this.apiName.split('.');
+            api[arrPropt[0]][arrPropt[1]](param, res => {
+                if (res.data.code === "success") {
+                   this.itemList = res.data.obj;
+                   this.setSlectItem();
+                }
+            })
+        },
+        next() { 
+            if(this.isDisabled) {
+                this.$emit('disabledEnent');
+                return;
+            }
+            let maxNum = this.itemList.length - 5;
+            let currentScrollL = this.$refs.contbox.scrollLeft;
+            if(currentScrollL > 70) {        
+                let  timerNum = 0;
+                let timer = setInterval(() => {
+                    this.$refs.contbox.scrollLeft -= 4;
+                    timerNum++;
+                    if(timerNum >= 19) {
+                        clearInterval(timer)
+                    }
+                }, 20)
+            }      
+        },
+        pre() {
+            if(this.isDisabled) {
+                this.$emit('disabledEnent');
+                return;
+            }
+            let maxNum = this.itemList.length - 5;
+            let currentScrollL = this.$refs.contbox.scrollLeft;
+            if(currentScrollL < (maxNum)*70) {           
+                let  timerNum = 0;
+                let timer = setInterval(() => {
+                    this.$refs.contbox.scrollLeft += 4;
+                    timerNum++;
+                    if(timerNum >= 19) {
+                        clearInterval(timer)
+                    }
+                }, 20)
+            }
+        },
+        seletItem(ind, val) {
+            if(this.isDisabled) {
+                this.$emit('disabledEnent');
+                return;
+            }
+            this.activeIndex = ind;
+            this.$emit('seletItem', val);
+        },
+        setSlectItem() {
+            if(this.isDisabled) {
+                return;
+            }
+            if(this.seletCode !== '') {
+                for(let i=0; i < this.itemList.length; i++ ){
+                    if(this.itemList[i][this.itemCode] === this.seletCode) {
+                        this.activeIndex = i;
+                        this.$emit('seletItem', this.itemList[i]);
+                        return;
+                    }
+                }
+            }else {
+                this.activeIndex = this.defautSeletIndex;
+                if(this.itemList.length != 0) {
+                    this.$emit('seletItem', this.itemList[0]);
+                }                 
+            }         
+        },
+    },
+    watch: {
+        seletCode(val) {
+            // this.setSlectItem();
+        },
+        isDisabled(val) {
+            if(!val) {
+                this.setSlectItem();
+            }
+        },
+        itemList(val){
+            if(this.itemList.length != 0){
+                this.part=true
+            }
+        }
+    }
+}
+</script>
+<style scoped> 
+   .tabs-carou-box{
+        display: flex;
+        width: 438px;
+        height: 72px;
+        background-color: #20A0E9;
+        border-radius: 4px;
+        flex-direction: row; 
+   }
+   .tabc{
+        color: #fff;
+        font-size: 20px;
+   }
+   .tabc-left-arrow{
+        flex: 0 0 35px;   
+        padding-top: 26px;
+        padding-left: 8px;
+        font-size: 20px;
+   }
+   .tabc-left-arrow-img{
+       display: block;
+       width: 20px;
+       height: 20px;
+       background-image: url(../../../static/image/arrow-circle-left.png);
+       background-size: 100% 100%;
+   }
+   .tabc-cotent{
+        flex: 1 1 auto;
+        overflow: auto;
+   }
+    ::-webkit-scrollbar{height: 0;}
+   .tabc-right-arrow{
+        flex: 0 0 35px;   
+        text-align: right;  
+        padding-top: 26px;
+        padding-left: 6px;
+   }
+   .tabc-right-arrow-img{
+       display: block;
+       width: 20px;
+       height: 20px;
+       background-image: url(../../../static/image/arrow-circle-right.png);
+       background-size: 100% 100%;
+   }
+   .tabc-cotent ul{
+        height: 100%;
+        overflow: hidden;
+        clear: both;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        font-size: 16px;
+   }
+   .tabc-cotent ul li{
+        display: flex;
+        height: 64px;
+        width: 70px;
+        border-radius: 8px;
+        margin: 4px 2px;
+        align-items: center;
+        justify-content: center;
+        float: left;
+   }
+   .tabsc-active{
+        background-color: #92c6e8;
+   }
+   .one-line-text{
+        margin: 0;
+        white-space: nowrap;
+        overflow:hidden;
+        text-overflow:ellipsis;
+   }
+</style>
+