lshcomment 1.0.0

package/src/components/iris-scope-clear/store.vue

@@ -0,0 +1,355 @@
+<template lang="html">
+    <div>
+        <div class="card card-inverse">
+            <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 :highlight-current=true :props="props" :load="loadNodeSales" lazy empty-text="暂无数据" node-key='value' @current-change="currentchange">
+                                </Tree>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-6 pb-3">
+                        <div class="border pt-3">
+                            <div class="col-md-12 col-lg-12">
+                                <b-form-fieldset horizontal label="销售区域" :label-cols="4" class="text-right">
+                                    <!-- <el-select v-if="multipleSelection" size="large" @change="StoreModelChange" no-data-text="请选择区域" v-model="checkTreeList" multiple placeholder="请选择区域">
+                                        <el-option
+                                        v-for="(item,index) in options"
+                                        :key="item.code"
+                                        :label="item.name"
+                                        :value="item.code">
+                                        </el-option>
+                                    </el-select> -->
+                                    <div class="text-left mt-2" v-if="multipleSelection">
+                                        <el-tag
+                                        class="ml-2 mb-2"                                        
+                                        v-for="tag in options"
+                                        :key="tag.code"
+                                        :closable="true"
+                                        type="primary"
+                                        @close="handleClose(tag)">
+                                        {{tag.name}}
+                                        </el-tag>
+                                    </div>
+                                    <b-form-input v-if="!multipleSelection" :state="status.checkTree" v-model="checkTree.name" disabled></b-form-input>                        
+                                </b-form-fieldset> 
+                            </div>
+                            <div class="col-md-12 col-lg-12">
+                                <b-form-fieldset horizontal label="经销商店" :label-cols="4" class="text-right">
+                                    <el-select style="width:308px;" v-if="multipleSelection" size="large" :class="{'allot-error':status.checkTree}" no-data-text="请选择经销商门店" v-model="storeCheckList" multiple placeholder="请选择经销商门店">
+                                        <el-option
+                                        v-for="(item,index) in storeList"
+                                        :key="item.code"
+                                        :label="item.name"
+                                        :value="item.code">
+                                        </el-option>
+                                    </el-select>
+                                     <b-form-select v-if="!multipleSelection" :state="status.storeCode" v-model="storeCode" size="15" :options="storeList"></b-form-select>                                                                           
+                                </b-form-fieldset> 
+                            </div>
+                            <div class="col-md-12 col-lg-12" v-for="(item , index) in COMadditionalSelect">
+                                <b-form-fieldset horizontal :label="item.name" :label-cols="4" class="text-right">
+                                     <b-form-select size="15" v-model="item.value" @input="selectClick(item)" :options="item.option"></b-form-select>                                                                           
+                                </b-form-fieldset> 
+                            </div>
+                            <div class="col-md-12 col-lg-12" v-for="(item , index) in COMadditionalInput">
+                                <b-form-fieldset horizontal :label="item.name" :label-cols="4" class="text-right">
+                                    <b-form-input  v-model="item.value"></b-form-input>                                                            
+                                </b-form-fieldset> 
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row mt-4">
+                    <div class="col-md-12 col-lg-12">
+                        <div class="pull-right">
+                            <b-button size="sm"  variant="default" @click="cancel">取消</b-button>                                                    
+                            <b-button size="sm"  variant="primary" @click="addScope">添加适用范围</b-button>                        
+                        </div>
+                    </div>
+                </div>
+            </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 { MessageBox, Tree , Tag, Message} from 'element-ui'
+Vue.use(Tag);
+export default {
+    components:{
+        Tree
+    },
+    props: {
+        storeInfoVo:{
+            type: Object,
+            default: function(){
+                return {}
+            }
+        },
+        availableType:{
+            type: String,
+            default: null
+        },
+        additionalSelect:{
+            type:Object,
+            default:function(){
+              return {}
+            }
+        },
+        additionalInput:{
+          type:Object,
+          default:function(){
+              return {}
+          }
+        },
+        multipleSelection:{
+            type:Boolean,
+            default: false
+        }
+    },
+    computed:{
+        COMadditionalSelect:function(){
+            const _this = this;
+            return _this.additionalSelect
+        },
+        COMadditionalInput:function(){
+            const _this = this;
+            return _this.additionalInput
+        },
+    },
+    data() {
+        return {
+            props: {
+                label: 'name',
+                children: 'zones',
+            },
+            checkTree:{},//选中点销售区域
+            status:{
+                checkTree:null,
+                storeCode:null
+            },
+            storeCode:null,
+            storeList:[],//门店列表
+            checkTreeList:[],//选中点销售区域   
+            storeCheckList:[],//选中单门店         
+            options:[],//多选框的数据
+        }
+    },
+    methods: {
+        handleClose(value){
+            const _this = this;
+            for (let index = 0; index < _this.options.length; index++) {
+                const element = _this.options[index];
+                if(element.code == value.code){
+                    _this.options.splice(index,1)
+                }
+            }
+            _this.StoreModelChange()
+        },
+        //加载子树节点的函数
+        loadNodeSales(node, resolve) {
+            if (node.level === 0) {
+                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 || "",
+                                code: msg.data.obj[0].areaCode || "",
+                            }]);
+                        }
+                    })
+                }
+            return;
+            }
+            this.getTareaTree(node.data.code, (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,
+                    code: data[i].areaCode
+                }
+                }
+                return resolve(arr);
+            }
+            return resolve([])
+            })
+        },
+        selectClick(item){
+            const _this = this;
+            let value = item.value;
+            let option = item.option;
+            for (var i = 0; i < option.length; i++) {
+                if(option[i].value == value){
+                    _this.$set(item, 'checkItem', option[i])
+                }
+            }
+        },
+        currentchange(a) {
+            const _this = this;
+            if(_this.multipleSelection){
+                for (let index = 0; index < _this.options.length; index++) {
+                    const element = _this.options[index];
+                    if(element.code == a.code){
+                        return;
+                    }
+                }
+                _this.$set(_this.options,_this.options.length,a)  
+                _this.StoreModelChange()              
+                // _this.$set(_this.checkTreeList,_this.checkTreeList.length,a.code)                
+            }else{
+                _this.checkTree = a
+                api.suitScope.queryShopInfo({
+                    salesAreaCodes: [a.code],
+                    needPageFlag: "0"
+                }, (msg)=>{
+                    if(msg.data.message == 'success'){
+                        let data = msg.data.obj
+                        _this.storeList = []
+                        for (let i = 0; i < data.length; i++) {
+                            const element = data[i];
+                            _this.$set(_this.storeList, _this.storeList.length ,{
+                                text:element.storeName,
+                                value:element.storeCode
+                            })
+                        }
+                    }
+                })
+            }
+            
+        },
+        getTareaTree(code, sc) {
+        api.area.getSalesAreaInfoByAreaCode({
+            areaCode: code
+        }, sc)
+        },
+        addScope(){
+            const _this = this;
+            if(_this.multipleSelection){
+                if(_this.storeCheckList.length == 0){
+                    _this.status.checkTree = 'invalid' 
+                    Message({
+                        type: 'warning',
+                        message: "请选择经销商门店！"
+                    });
+                    return;   
+                }
+                let storeCheckList = []
+                for (let index = 0; index < _this.storeCheckList.length; index++) {
+                    let element = _this.storeCheckList[index];
+                    for (let j = 0; j < _this.storeList.length; j++) {
+                        let element1 = _this.storeList[j];
+                        if(element == element1.code){
+                            element1.additionalSelect = _this.COMadditionalSelect 
+                            element1.COMadditionalInput = _this.COMadditionalInput 
+                            storeCheckList[index] = element1
+                        }
+                    }
+                }
+                _this.$emit("store-ok",storeCheckList)
+            }else{
+                const _this = this;
+                const salesArea = JSON.stringify(_this.checkTree)
+                if(_this.storeCode == null){
+                    _this.status.storeCode = 'invalid' 
+                }
+                if(salesArea == '{}'){
+                    _this.status.checkTree = 'invalid'
+                }
+                if((_this.storeCode == null) || salesArea == '{}'){
+                    return;
+                }
+                _this.checkTree.additionalSelect = _this.COMadditionalSelect 
+                _this.checkTree.COMadditionalInput = _this.COMadditionalInput 
+                for (let index = 0; index < _this.storeList.length; index++) {
+                    const element = _this.storeList[index];
+                    if(_this.storeCode == element.value){
+                        _this.checkTree.store = element
+                    }
+                }                                     
+                _this.$emit("store-ok",_this.checkTree)
+            }
+                                
+        },
+        cancel(){
+            const _this = this;
+            _this.$emit('cancel')
+        },
+        //销售区域改变的时候
+        StoreModelChange(){
+            const _this = this;
+            _this.storeList = []
+            let checkTreeList = []
+            for (let index = 0; index < _this.options.length; index++) {
+                const element = _this.options[index];
+                checkTreeList.push(element.code)
+            }
+            if(checkTreeList.length !== 0){
+                api.suitScope.queryShopInfo({
+                    salesAreaCodes: checkTreeList,
+                    needPageFlag: "0"
+                }, (msg)=>{
+                    if(msg.data.message == 'success'){
+                        let data = msg.data.obj
+                        this.storeList = []
+                        this.storeCode = ''
+                        for (let i = 0; i < data.length; i++) {
+                            const element = data[i];
+                            _this.$set(_this.storeList, _this.storeList.length ,{
+                                name:element.storeName,
+                                code:element.storeCode
+                            })
+                        }
+                    }
+                })
+            }
+        }
+    },
+    watch:{
+        storeInfoVo:function(){
+            const _this = this;
+            // 获取经销商店
+        }
+    },
+    mounted(){
+        const _this = this;
+        if((JSON.stringify(_this.storeInfoVo) != "{}")){
+            _this.storeList = [{text:_this.storeInfoVo.storeName,value:_this.storeInfoVo.storeCode}]
+            _this.storeCheckList = [_this.storeInfoVo.storeCode]
+            // _this.storeCode = _this.storeInfoVo.storeCode
+            _this.checkTree.name = _this.storeInfoVo.salesName
+            _this.checkTree.code = _this.storeInfoVo.salesCode
+            _this.options = [{
+                code:_this.storeInfoVo.salesCode,
+                name:_this.storeInfoVo.salesName
+            }]
+        }
+    }
+}
+</script>
+
+<style lang="css">
+    .tabBodyScroll {
+        height: 250px;
+        overflow: auto;
+        overflow-x: hidden;
+    }
+    .white {
+        color: #fff;
+    }
+    .border {
+        border: 2px solid #ccc;
+    }
+    .allot-error input{
+        border-color: #f86c6b !important;
+    }
+</style>

package/src/components/iris-search/search.vue

@@ -0,0 +1,299 @@
+<template>
+    <div class="searchContent" ref="select">
+      <div :class="{'input-box' : showCheck}" >
+        <el-tooltip v-if="tooltip" class="item" effect="dark" :content="inputValue" placement="top-start">
+          <input type="text" :class="styleFlag ? 'form-controls' : 'form-control'" :value="inputValue" readonly @click="_showBox" style="paddingRight: 30px"/>
+        </el-tooltip>
+        <input v-if="!tooltip" type="text" :class="styleFlag ? 'form-controls' : 'form-control'"  :value="inputValue" readonly @click="_showBox" style="paddingRight: 30px"/>
+      </div>
+        <div class="dowm" v-show="!inputValue"></div>
+        <div class="clear" v-show="inputValue && !disabled" @click="clearValue">x</div>
+        <div ref="sel" class="oBox" v-show="showBox">
+            <div class="searchBox" v-show="showSearch">
+                <input type="text" class="form-control" v-model.trim="oData" :placeholder="searchPlaceholder">
+            </div>
+            <div class="dataContent" @scroll="onScroll($event)" ref="oScroll">
+                <ul>
+                    <li v-show="!dataList.length" class="nodata">无数据...</li>
+                    <li @click="itemClick(item)" v-for="(item,index) in dataList" :key="index"  style="text-align: left">
+                      <span v-if="propName === 'service'">
+                        {{ propName ? item[`labourHourCode`] + ' / ' + item[`${propName}Name`] : item[option] }}
+                      </span>
+                       <span v-else>
+                        {{ propName ? item[`${propName}Code`] + ' / ' +  item[`originalCode`] + ' / ' +  item[`${propName}Name`]  : item[option] }}
+                      </span>
+                    </li>
+                </ul>
+            </div>
+        </div>  
+    </div>
+</template>
+<script>
+/**
+ *    date : 2017-08-06 
+ * @author : NS-5
+ *  @prop :  dataList( 下拉框展示的数据列表 ), 
+ *           option( 参数类型名称key ), 
+ *           disabled( 默认false ), 
+ *           hasCheck( 校验非空 默认false ),
+ *           checkText( 自定义校验内容 ),
+ *           showSearch( 是否需要搜索功能 默认true)
+ * 
+ * @event :  dataChange( 搜索框中的值发生变化触发的事件 ),
+ *           itemValue( 点击列表中的一条数据触发事件 ),   
+ *           clickShowBack( 下拉搜索展示时, 触发事件抛出传入的 option, 也就是说你可以在点击弹出的时候去请求第一组数据),
+ *           comScroll( 滚动事件, 返回boolean值 => true 表示滚动到底部了 ),
+ *           setValue( 调用此方法默认是清空操作, 也可以传name值 ) 用法: 组件上绑定 ref = 'demo' 属性  this.$refs.demo.setValue()
+ *           clearValue( 外部清空事件 => 真实的清空 code)
+ */           
+import vue from "vue";
+import {Tooltip} from "element-ui";
+vue.use(Tooltip)
+export default {
+  props: {
+    dataList: {
+      type: [Array],
+      default: function() {
+        return []
+      }
+    },
+    styleFlag: {
+      type: [Boolean],
+      default: false
+    },
+    tooltip: {
+      type: [Boolean],
+      default: false
+    },
+    option: {
+      type: [String],
+      default: "brandName"
+    },
+    disabled: {
+      type: [Boolean],
+      default: false
+    },
+    hasCheck: {
+      type: [Boolean],
+      default: false
+    },
+    showSearch: {
+      type: [Boolean],
+      default: true
+    },
+    propName: {
+      type: String,
+      default: ''
+    },
+    searchPlaceholder: {
+      type: String,
+      default: 'Search'
+    },
+    // checkText: {
+    //   type: [String],
+    //   default: '必填项'
+    // },
+    valueObj: {
+      type: [Object],
+      default: function() {
+        return {
+          codeName: '',
+          code: ''
+        }
+      }
+    }
+  },
+  computed: {
+    showCheck() {
+      //  return this.hasCheck && !this.inputValue
+       return this.hasCheck     
+    },
+  },
+  data() {
+    return {
+      oData: "",
+      showBox: false,
+      optionName: this.option,
+      items: [],
+      inputValue: ''
+    };
+  },
+  mounted() {
+    
+  },
+  methods: {
+    _showBox() {
+        if(!this.disabled) {
+           this.showBox = !this.showBox;         
+        }
+      //add by wjl
+      if (this.showBox) {
+        this.oData = ''
+        this.$emit("clickShowBack", this.option);        
+      }
+    },
+    itemClick(item) {
+      this.$emit("itemValue", item);
+      if(this.propName) {
+        let _propName = this.propName === 'service' ? 'labourHour' : this.propName
+        this.inputValue = item[`${_propName}Code`] + ' / ' + item[`${this.propName}Name`]
+      }else {
+        this.inputValue = item[this.optionName];
+      }
+      this.showBox = false;
+    },
+    reset() {
+      this.inputValue = ''
+    },
+    onScroll(event) {
+      let _scrollTop = event.target.scrollTop + 0.41;  // 有兼容问题， 个别电脑的 scrollTop值存在差异
+      let _offsetHeight = event.target.offsetHeight;
+      let _scrollHeight = event.target.scrollHeight;
+
+      if (_scrollTop + _offsetHeight >= _scrollHeight) {
+        this.$emit("comScroll", true);
+      } else {
+        this.$emit("comScroll", false);
+      }
+    },
+    setValue(val = '') {
+      this.$nextTick(() => {
+        this.inputValue = val;
+      })
+    },
+    clearValue() {
+      this.setValue()
+      this.$emit('clearValue')
+    }
+  },
+  watch: {
+    oData(data) {
+      this.$emit("dataChange", this.oData);
+      this.$refs.oScroll.scrollTop = 0;
+    },
+    showBox(val) {
+      /*document.addEventListener("click", e => {
+        if (!this.$el.contains(e.target)) this.showBox = false;
+      });*/
+      document.addEventListener('click', (e) => {
+          let _select = this.$refs.select;
+          if(_select && !_select.contains(e.target))  this.showBox = false           
+      }, true)
+      let modal = document.getElementsByClassName('modal-content')
+
+      let m = modal[3] || modal[1]
+      if(m) {
+        m.onclick = (e) => {
+          let _select = this.$refs.select;
+          if(_select && !_select.contains(e.target)) {
+            this.showBox = false  
+          }
+      }
+      }
+    },
+    // 组件外传 valueObj, 一个是code值, 一个是这个code的name
+    // 前提是组件不是用户点击再加载的 
+    // => 注: (想了一下 这种方法还是行不通的, datalist里面的数据并不是全部数据,只有默认的十条,所以并不能准确的找到对应code的name值)
+    valueObj(val) {
+      if(val) {
+        for(let i = 0; i < this.dataList.length; i++) {
+          if(val.code === this.dataList[i][val.codeName]) {
+            this.inputValue = this.dataList[i][this.optionName];
+          }
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style  scoped>
+.oBox {
+  position: absolute;
+  border: 1px solid #e3e3e3;
+  background-color: #fff;
+  z-index: 10000;
+  margin-top: 6px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+  border-radius: 5px !important;
+  /* width: 90%; */
+  min-width: 200px;
+}
+.searchBox {
+  padding: 6px 10px 6px 10px;
+}
+.searchBox input {
+  border-radius: 5px !important;
+  outline: 0;
+  border-color: #66afe9 !important;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+    0 0 8px rgba(102, 175, 233, 0.6);
+}
+.oBox div ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-right: 10px;
+}
+.oBox div ul li {
+  padding: 5px 10px;
+  margin-left: 10px;
+}
+.form-controls{
+  border-radius: 4px;
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25;
+  color: #3e515b;
+  background-color: #fff;
+  background-image: none;
+  background-clip: padding-box;
+  border: 1px solid #c2cfd6;
+}
+.oBox div ul li:hover {
+  background-color: rgba(102, 175, 233, 0.6);
+}
+.dowm {
+  position: absolute;
+  top: 14px;
+  right: 22px;
+  width: 6px;
+  height: 6px;
+  border-top: 6px solid #666;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 6px solid transparent;
+}
+.dataContent {
+  max-height: 260px;
+  overflow-y: scroll;
+}
+.clear {
+    position: absolute;
+    top: 8px;
+    right: 14px;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    color: #ccc;
+    /* background-color: rgba(102, 175, 233, 0.6); */
+    text-align: center;
+    line-height: 16px;
+    cursor: pointer;
+}
+.input-box input{
+    border: 1px solid #f86c6b;
+}
+.input-box p {
+    margin-top: .25rem;
+    font-size: .875rem;
+    color: #f86c6b;
+}
+.oBox .dataContent ul .nodata{
+  text-align: left !important;
+}
+</style>