lshcomment 1.0.0

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

@@ -0,0 +1,316 @@
+<template>
+  <div class="wrap-chinaara" ref="select">
+    <div @click="inputClick">
+      <b-form-input :value="text" :state="eorror ? 'invalid' : null" readonly/>
+    </div>
+    <div class="clear" v-if="data.text && clear && !readonly" @click="clearClick()">
+      <i class="el-icon-circle-close"></i>
+    </div>
+    <div class="external-box-chinaara" v-show="areaShow">
+      <ul class="list-wrap-chinaara">
+        <item
+          :dataArray="firstFloor"
+          :data="item"
+          v-for="(item,index) in firstFloor"
+          :key="index"
+          :load="firstFloorClick"
+        ></item>
+      </ul>
+      <div class="text-right">
+        <button
+          type="button"
+          class="btn btn-primary btn-sm pull-right mr-3 br-50%"
+          @click="confirm"
+        >确定</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+/**
+ *    date : 2018-03-12
+ * @author : joly.Pan
+ * @prop :
+ * readonly 默认false  不禁用
+ * value 设置默认值 示列：{text:"上海市"，value:"00001"}
+ * eorror  true的话会提示红框
+ * clear   true的话会显示清除按钮
+ * @event :  checkChange (value)
+ * value  返回选择的数据 示列：{text:"上海市"，value:"00001"}
+ */
+
+import item from "./list-item";
+import treeapi from "./treeapi";
+export default {
+  model: {
+    prop: "text",
+    event: "textChange"
+  },
+  props: {
+    text: {
+      type: String,
+      default: ""
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: Object,
+      default: function() {
+        return null;
+      }
+    },
+    eorror: {
+      type: Boolean,
+      default: false
+    },
+    clear: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      areaShow: false, //控制列表区域是否显示
+      firstFloor: [], //第一层数据
+      data: {},
+      options: []
+    };
+  },
+  components: {
+    item
+  },
+  methods: {
+    //input框呗点击的时候触发
+    inputClick() {
+      const _this = this;
+      //让列表框显示隐藏状态切换
+      if (!_this.readonly) {
+        _this.areaShow = !_this.areaShow;
+      }
+    },
+    clearClick() {
+      const _this = this;
+      _this.data = {};
+    },
+    firstFloorClick(data, resolve) {
+      const _this = this;
+      _this.data = data;
+      // _this.$emit("textChange", _this.data.text);
+      if (!data.open) {
+        //折叠状态需要打开
+        treeapi.getchinaarea(
+          {
+            levels: parseInt(data.levels) + 1,
+            fatherAreaCode: data.value
+          },
+          msg => {
+            if (msg.length == 0) {
+              data.nodata = true;
+              data.open = true;
+            } else {
+              let i = 0
+              data.levels == 2 && (i = 1)
+
+              for (; i < msg.length; i++) {
+                const index = data.levels == 2 ? i - 1 : i
+
+                _this.$set(data.children, index, msg[i]);
+              }
+              data.open = true;
+            }
+            
+            if(this.options.length) {
+              const value = data.levels < 3 && this.options[data.levels].value
+              value && this.setSelectedOnNode(data.children, value)
+            }
+
+            resolve(data);
+          }
+        );
+      } else {
+        //打开状态需要折叠
+        data.children = [];
+        data.open = false;
+        resolve(data);
+      }
+    },
+    confirm() {
+      const _this = this;
+      _this.inputClick();
+      let data = _this.firstFloor;
+      let checkData = _this.data;
+      let parentNode = [];
+      let node = null;
+      function getNode(json, nodeId) {
+        //1.第一层 root 深度遍历整个JSON
+        for (var i = 0; i < json.length; i++) {
+          //找到子节点直接结束for
+          if (node) {
+            break;
+          }
+          var obj = json[i];
+          //没有节点就下一个for
+          if (!obj || !obj.value) {
+            continue;
+          }
+          //2.有节点就开始找，一直递归下去
+          if (obj.value == nodeId) {
+            //找到了与nodeId匹配的节点，结束递归
+            node = obj;
+            break;
+          } else {
+            //3.如果有子节点就开始找
+            if (obj.children.length !== 0) {
+              //4.递归前，记录当前节点，作为parent父亲
+              parentNode.push({
+                value: obj.value,
+                text: obj.text,
+                levels: obj.levels,
+                children: obj.children
+              });
+              //递归往下找
+              getNode(obj.children, nodeId);
+            } else {
+              //跳出当前循环，进行下一次递归
+              continue;
+            }
+          }
+        }
+        //5.没有找到匹配的子节点，那也就没有父节点没有，删除父节点
+        if (!node) {
+          parentNode.splice(parentNode.length - 1, 1);
+        }
+        //6.返回结果obj
+        return {
+          parentNode: parentNode,
+          node: {
+            value: node && node.value,
+            text: node && node.text,
+            levels: node && node.levels,
+            children: node && node.children
+          }
+        };
+      }
+
+      _this.$emit("check-change", getNode(data, checkData.value));
+
+      this.setSelectedNodes(getNode(data, checkData.value))
+    },
+
+    setSelectedNodes(info) {
+      const { node, parentNode } = info
+      let selNodes = []
+      selNodes = [...parentNode]
+      if(node.value) {
+        selNodes = [...parentNode, {...node}]
+      }
+      selNodes.forEach((k, i) => {
+        k.levels == 1 
+          ? this.setSelectedOnNode(this.firstFloor, k.value) 
+          : this.setSelectedOnNode(selNodes[i - 1].children, k.value)
+      })
+    },
+    setSelectedOnNode(nodes, value) {
+      nodes.forEach(k => {
+        k.value == value 
+          ? this.$set(k, 'selected', true)
+          : this.$set(k, 'selected', false)
+      })
+    },
+    // 供外部调用
+    setNodes(options) {
+      this.options = options
+    },
+  },
+  mounted() {
+    const _this = this;
+    treeapi.getchinaarea(
+      {
+        levels: 1
+      },
+      msg => {
+        _this.firstFloor = msg;
+        
+        if(this.options.length) {
+          const value = this.options[0].value
+          value && this.setSelectedOnNode(this.firstFloor, value)
+        }
+      }
+    );
+  },
+  watch: {
+    value: function() {
+      const _this = this;
+      if (_this.value) {
+        _this.data = _this.value;
+      }
+    },
+    areaShow(val) {
+      document.addEventListener("click", e => {
+        let _select = this.$refs.select;
+        if (_select && !_select.contains(e.target)) this.areaShow = false;
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.wrap-chinaara {
+  position: relative;
+}
+.external-box-chinaara {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  margin-top: 5px;
+  box-shadow: 0 6px 8px 0 rgba(155, 155, 155, 0.8);
+  z-index: 1;
+  background-color: #fff;
+  border-radius: 3px;
+  padding-bottom: 15px;
+}
+.list-wrap-chinaara {
+  padding-left: 0;
+  padding-top: 5px;
+  overflow-y: auto;
+  height: 190px;
+  overflow-x: hidden;
+}
+.list-wrap-chinaara li {
+  text-align: left;
+  background-color: #fff;
+}
+#app .main .list-wrap-chinaara li a {
+  display: block;
+  text-decoration: none;
+  color: black;
+  width: 100%;
+  height: 100%;
+  padding: 5px 0;
+  margin-top: 2px;
+}
+#app .main .list-wrap-chinaara li a:hover {
+  background-color: #e4e8f1;
+}
+.icon-chinaarea {
+  margin-right: 5px;
+}
+.visibility {
+  visibility: hidden;
+}
+.clear {
+  position: absolute;
+  top: 8px;
+  right: 14px;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  color: #fff;
+  text-align: center;
+  line-height: 18px;
+  cursor: pointer;
+}
+</style>

package/src/components/iris-chinaarea/list-item.vue

@@ -0,0 +1,112 @@
+<template>
+  <li>
+    <a href="javascript:;" @click="listItemClick(data,dataArray)" 
+      :style="{marginLeft: 16 * data.levels + 'px'}"
+      :class="{ 'high_light' : data.selected }">
+      <span class="icon-chinaarea el-tree-node__expand-icon" 
+        :class="{expanded:data.open,visibility:data.nodata}">
+      </span>
+      {{data.text}}
+    </a>
+    <ul class="list-wrap-chinaara" v-if="data.open">        
+      <item :dataArray="data.children" :data='item' 
+        v-for='(item,index) in data.children' 
+        :key="index" :load="load">
+      </item>            
+    </ul>
+  </li>
+</template>
+<script>
+/**
+ *    date : 2018-03-12 
+ * @author : joly.Pan
+ * @prop :
+ * 
+ * @event :  
+ */            
+import treeapi from "./treeapi";
+export default {
+  name: 'item',
+  props: {
+    data:{
+      type:Object,
+      dafault:function(){
+        return {}
+      }
+    },
+    dataArray:{
+      type:Array,
+      dafault:function(){
+        return []
+      }
+    },
+    load:{
+      type:Function,
+      dafault:function(){
+        return function(){
+
+        }
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    listItemClick(data,dataArr){
+      this.setSelectedOnNode(dataArr, data.value)
+
+      const _this = this;
+      if(!data.open){
+        for (let i = 0; i < dataArr.length; i++) {
+          _this.$set(dataArr[i],'open',false)
+        }
+      }
+      _this.load(data,(msg)=>{
+        data =  JSON.parse(JSON.stringify(msg))
+      })
+    },
+
+    setSelectedOnNode(nodes, value) {
+      nodes.forEach(k => {
+        k.value == value 
+          ? this.$set(k, 'selected', true)
+          : this.$set(k, 'selected', false)
+      })
+    }
+  },
+};
+</script>
+
+<style >
+.list-wrap-chinaara{
+  padding-left: 0;
+}
+.list-wrap-chinaara li {
+  text-align:left;
+  background-color: #fff;
+}
+#app .main  .list-wrap-chinaara li a{
+  display: block;
+  text-decoration:none;
+  color: black;
+  width:100%;
+  height:100%;  
+  padding:5px 0;
+  margin-top: 2px
+}
+#app .main  .list-wrap-chinaara li a:hover{
+  background-color: #e4e8f1;
+}
+.icon-chinaarea{
+  margin-right:5px;
+}
+
+.visibility{
+  visibility:hidden;
+}
+
+.high_light {
+  background-color: #edf7ff;
+}
+</style>

package/src/components/iris-chinaarea/treeapi.js

@@ -0,0 +1,23 @@
+import api from "../../common/api";
+class TreeApi{
+    getchinaarea(obj = {}, callback){
+        let returnData = [];
+        api.chinaarea.querychinaarea(obj, (msg) => {
+            if (msg.data.message == 'success') {
+                let data = msg.data.obj
+                for (let i = 0; i < data.length; i++) {
+                    returnData[i] = {
+                        text: data[i].areaName,
+                        value: data[i].areaCode,
+                        open: false,
+                        levels: data[i].levels,
+                        children:[],
+                        nodata:false
+                    }
+                }
+                callback && callback(returnData)
+            }
+        })
+    }
+}
+export default new TreeApi

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

@@ -0,0 +1,226 @@
+<template>
+    <div class="searchContent" ref="select">
+        <div ref="sel" class="oBox"  @click="setSearch">
+            <div class="searchBox">
+                <input type="text" class="form-control" v-model="oData" placeholder=""  @blur="blurInput">
+            </div>
+            <div class="dataContent" @scroll="onScroll($event)" ref="oScroll" v-show="showSearch">
+                <ul>
+                    <li v-show="!dataList.length">无数据...</li>
+                    <li @click="itemClick(item)" v-for="(item, index) in dataList" :key="index">{{item[option]}}</li>
+                </ul>
+            </div>
+        </div>  
+    </div>
+</template>
+<script>
+/**
+ *    date : 2017-08-06 
+ * @author : NS-5
+ *  @prop :  dataList( 下拉框展示的数据列表 ), 
+ *           option( 参数类型名称key ), 
+ *           disabled( 默认false ), 
+ *           hasCheck( 校验非空 默认false ),
+ *           checkText( 自定义校验内容 ),
+ * 
+ * @event :  dataChange( 搜索框中的值发生变化触发的事件 ),
+ *           itemValue( 点击列表中的一条数据触发事件 ),   
+ *           clickShowBack( 下拉搜索展示时, 触发事件抛出传入的 option, 也就是说你可以在点击弹出的时候去请求第一组数据),
+ *           comScroll( 滚动事件, 返回boolean值 => true 表示滚动到底部了 ),
+ *           setValue( 调用此方法默认是清空操作, 也可以传name值 ) 用法: 组件上绑定 ref = 'demo' 属性  this.$refs.demo.setValue()
+ *           clearValue( 外部清空事件 => 真实的清空 code)
+ *            blurInput(input框失去焦点触发)
+ */            
+export default {
+  props: {
+    dataList: {
+      type: [Array],
+      default: function() {
+        return []
+      }
+    },
+    option: {
+      type: [String],
+      default: "brandName"
+    },
+    disabled: {
+      type: [Boolean],
+      default: false
+    },
+    hasCheck: {
+      type: [Boolean],
+      default: false
+    },
+    // checkText: {
+    //   type: [String],
+    //   default: '必填项'
+    // },
+    valueObj: {
+      type: [Object],
+      default: function() {
+        return {
+          codeName: '',
+          code: ''
+        }
+      }
+    }
+  },
+  computed: {
+ 
+  },
+  data() {
+    return {
+      oData: "",
+      showSearch: false,
+      optionName: this.option,
+      items: [],
+    };
+  },
+  mounted() {
+    
+  },
+  methods: {
+    setSearch() {
+      this.showSearch = !this.showSearch;
+      if(this.showSearch) {        
+          this.$emit("dataChange", this.oData);
+      }
+      
+    },
+    blurInput() {
+      setTimeout(() => {
+        this.showSearch = false;
+        this.$emit("blurInput", this.oData);
+      }, 140)
+      
+    },
+    itemClick(item) {
+      console.log(item)
+      this.$emit("itemValue", item);
+      this.oData = item[this.optionName];
+      //this.showSearch = false;
+    },
+    onScroll(event) {
+      let _scrollTop = event.target.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.oData = 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           
+      })
+      let modal = document.getElementsByClassName('modal-content')[1]
+      if(modal) {
+        modal.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.oData = this.dataList[i][this.optionName];
+          }
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style  scoped>
+.oBox {
+  box-sizing: border-box;
+  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: 96%;
+}
+.searchBox {
+  padding: 0px;
+}
+.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;
+}
+.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: #fff;
+    /* background-color: rgba(102, 175, 233, 0.6); */
+    text-align: center;
+    line-height: 18px;
+    cursor: pointer;
+}
+.input-box input{
+    border: 1px solid #f86c6b;
+}
+.input-box p {
+    margin-top: .25rem;
+    font-size: .875rem;
+    color: #f86c6b;
+}
+</style>