apply-clients 4.0.65 → 4.1.0-weinan

package/src/components/product/VueUtils/Tree.vue

@@ -0,0 +1,330 @@
+<template>
+  <div id="treemx" class="tree fonte" v-if="refreshed" style="overflow-x: scroll;max-height: 80vh" >
+    <ul v-for='(rootindex,item) in menulist' :key="item.id">
+      <!-- 没有子集 -->
+      <li v-if='!item._child'>
+        <div class="treeItem" @click="selected(item)">
+          <a href="#">{{item.catename}}</a>
+          <div class="liright">
+            <span :class="item.enabled_text == '启用'?'bgYes':'bgNo'">{{item.enabled_text}}</span>
+          </div>
+        </div>
+      </li>
+      <!-- 有子集 -->
+      <li v-if='item._child'>
+        <div class="onechild treeItem" >
+          <a href="#" @click.native='toggleChildren(rootindex)'>{{item.expanded?'▼ ':'►'}}{{item.catename}}</a>
+          <div class="liright">
+            <span :class="item.enabled_text == '启用'?'bgYes':'bgNo'">{{item.enabled_text}}</span>
+          </div>
+        </div>
+        <ul v-show='item.expanded' class="childs" style="overflow-x: auto;">
+          <li v-for='(parentindex,child) in item._child' :key="child.id" >
+            <!-- 没有子集 -->
+            <div class="twochild treeItem marginL60" v-if="!child._child" @click="selected(child,rootindex)"><a href="#">{{child.catename}}</a>
+              <div class="liright">
+                <span :class="child.enabled_text == '启用'?'bgYes':'bgNo'">{{child.enabled_text}}</span>
+              </div>
+            </div>
+            <!-- 有子集 -->
+            <div class="twochild marginL60" v-if="child._child">
+              <div class="treeItem" >
+                <a href="#" @click.native='toggleChildren(rootindex,parentindex)'>{{child.expanded?'▼ ':'►'}}{{child.catename}}</a>
+                <div class="liright">
+                  <span :class="child.enabled_text == '启用'?'bgYes':'bgNo'">{{child.enabled_text}}</span>
+                </div>
+              </div>
+
+              <ul v-show='child.expanded'>
+                <!-- 遍历第三层 -->
+                <li class="threechild" v-for="(childIndex,child1) in child._child" :key="child1.id" style="overflow-x: auto;">
+                  <div class="treeItem marginL60">
+                      <a href="#" @click.native="add(rootindex,parentindex,childIndex)">{{child1.catename}}   <span v-if="child1.count">数量：{{child1.count}}</span></a>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </li>
+
+    </ul>
+  </div>
+
+  <modal :show.sync="addshow2" v-ref:modal backdrop="false">
+    <header slot="modal-header" class="modal-header">
+      <button type="button" class="close" @click="closeadd"><span>&times;</span></button>
+      <h4 class="modal-title">数量</h4>
+    </header>
+    <article slot="modal-body" class="modal-body">
+      <input class="form-control" style="background-color: #f7fbff;"
+             type="number"
+             v-model="inputvalue"
+             :value="inputvalue"
+      />
+    </article>
+    <footer slot="modal-footer" class="modal-footer">
+      <!--<button type="button" class="btn btn-default" @click='addclose'>取消</button>-->
+      <button type="button" class="btn btn-success" @click='addconfirm2'>确认</button>
+    </footer>
+  </modal>
+</template>
+
+<script>
+  export default {
+    title: 'new',
+    props: {
+      menulist: {
+        type: Array,
+        default: []
+      },
+      scrolltop:{
+        default:0
+      }
+    },
+    data() {
+      return {
+        rootindex:null,
+        parentindex:null,
+        childIndex:null,
+        inputvalue:null,
+        addshow2:false,
+        refreshed:true, //强制刷新
+        menulist: [{
+          catename: '水果',
+          expanded: false,
+          _child: [{
+            catename: '苹果',
+          }, {
+            catename: '荔枝'
+          }, {
+            catename: '葡萄'
+          }, {
+            catename: '火龙果',
+            expanded: false,
+            _child: [
+              {
+                id: 0,
+                catename: '白心',
+              }, {
+                id: 1,
+                catename: '红心',
+              },
+            ]
+          }]
+        }]
+      }
+    },
+    ready(){
+      this.updatecrollTop(this.scrolltop)
+    },
+    methods: {
+      updatecrollTop(hight){
+        console.log("scrollTop",hight)
+        let doc = document.getElementById("treemx")
+        doc.scrollTop = 0
+        doc.scrollTop = hight
+        // document.getElementById("treemx").scrollTop = hight
+        // document.documentElement.scrollTop = hight
+        // window.pageYOffset = hight
+        // document.body.scrollTop = hight
+      },
+      closeadd(){
+        this.rootindex = null
+        this.parentindex = null
+        this.childIndex = null
+        this.inputvalue = null
+        this.addshow2 = false
+      },
+      addconfirm2(){
+        this.menulist[this.rootindex]._child[this.parentindex]._child[this.childIndex].count = this.inputvalue
+        this.$dispatch('menulistSelected', this.menulist[this.rootindex]._child[this.parentindex]._child[this.childIndex],this.rootindex,this.parentindex)
+        this.closeadd()
+      },
+      add(rootindex,parentindex,childIndex){
+        this.rootindex = rootindex
+        this.parentindex = parentindex
+        this.childIndex = childIndex
+        this.addshow2 = true
+      },
+      selectedFormat(rootindex,parentindex,childIndex){
+        if(this.menulist[rootindex]._child[parentindex]._child[childIndex].showButton == undefined){
+          this.menulist[rootindex]._child[parentindex]._child[childIndex].showButton = false
+        }
+        this.menulist[rootindex]._child[parentindex]._child[childIndex].showButton = !this.menulist[rootindex]._child[parentindex]._child[childIndex].showButton
+        // this.refreshed = false
+        // this.$nextTick(()=>{
+        //   this.refreshed = true
+        // })
+      },
+      selectedCount(rootindex,parentindex,childIndex){
+        this.menulist[rootindex]._child[parentindex]._child[childIndex].expanded = true
+      },
+      inputCount(item,parentindex,childIndex){
+        console.log('count',item.count)
+        this.$dispatch('menulistSelected', item,val1,val2)
+      },
+      selected(item,val1,val2) {
+        console.log('item', item)
+        this.$dispatch('menulistSelected', item,val1,val2)
+      },
+      toggleChildren(rootindex,parentindex) {
+        if(parentindex!=undefined){
+          this.menulist[rootindex]._child[parentindex].expanded = !this.menulist[rootindex]._child[parentindex].expanded
+          // this.refreshed = false
+          // this.$nextTick(()=>{
+          //   this.refreshed = true
+          // })
+        }else if(rootindex!=undefined) {
+          this.menulist[rootindex].expanded = !this.menulist[rootindex].expanded
+        }
+        this.$dispatch('updateTree')
+
+      },
+    }
+  }
+</script>
+
+
+<style scoped>
+
+  ul {
+    display: block;
+    list-style-type: disc;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    padding-inline-start: 40px;
+  }
+
+  .addressBox {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 5.1rem;
+    z-index: 9;
+    background: #f5f5f5;
+    display: block !important;
+  }
+
+  span:focus {
+    background-color: silver;
+  }
+
+  a {
+    font-size: 20px;
+    text-decoration: none;
+    color: black;
+  }
+
+  a:hover {
+    font-size: 20px;
+    text-decoration: none;
+    color: deepskyblue;
+    /*background-color: silver;*/
+  }
+
+  .addressBox ul {
+    width: 33%;
+    height: 5.1rem;
+    background: #E6E6E6;
+    overflow-y: scroll;
+    overflow-x: auto;
+  }
+
+  .addressBox li {
+    height: 0.62rem;
+    font: normal 0.26rem/0.62rem "微软雅黑";
+    color: #666;
+    text-align: center;
+  }
+
+  .cityBox {
+    position: absolute;
+    top: 0;
+    left: 33%;
+    width: 100%;
+    height: 5.1rem;
+    display: none;
+    overflow-y: scroll;
+    z-index: 19;
+    background: #E6E6E6;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: auto;
+  }
+
+  .cityBox ul {
+    width: 100%;
+    height: 5.1rem;
+  }
+
+  .cityBox li {
+    padding-left: 0.17rem;
+    text-align: left;
+    border-bottom: 0.01rem solid #e6e6e6;
+  }
+
+  .areaBox {
+    position: absolute;
+    top: 0;
+    left: 33%;
+    width: 33%;
+    height: 5.1rem;
+    display: none;
+    overflow-y: scroll;
+    z-index: 9999;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /*模态框*/
+  .model {
+    position: absolute;
+    top: 0%;
+    left: 0%;
+    background: rgba(0, 0, 0, 0.3);
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 9999;
+  }
+
+  .model-content {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: .15rem;
+    margin: auto;
+    background-color: #ffffff;
+    text-align: center;
+  }
+
+  input {
+    font-size: 0.32rem;
+    width: 100%;
+    text-align: center;
+    margin-top: .3rem;
+    border: 1px solid #ccc;
+  }
+
+  /*点击省份，出现城市*/
+  .addressBox .active {
+    background: #f5f5f5;
+  }
+
+  .addressBox .active .cityBox {
+    display: block;
+  }
+
+  /*点击城市，出现区域*/
+  .cityBox .active {
+    background: #f5f5f5;
+  }
+
+  .cityBox .active .areaBox {
+    display: block;
+  }
+
+</style>