askbot-dragon 1.6.76-beta → 1.6.76

package/src/components/tree.vue

@@ -1,295 +1,310 @@
-<template>
-  <div id="tree">
-    <div class="tree-header">
-      <span class="cacel" @click="cancelBtn">取消</span>
-      <span class="primary" @click="saveData">确认</span>
-    </div>
-    <div class="tree-input" v-if="setCascadeOption && setCascadeOption.length > 0">
-      <el-input
-          placeholder="请搜索"
-          v-model="filterText"
-      >
-      </el-input>
-    </div>
-    <div class="tree-container">
-      <el-tree :data="setCascadeOption"
-               :props="defaultProps"
-               ref="dataTree"
-               node-key="value"
-               :expand-on-click-node="false"
-               :filter-node-method="filterNode"
-      >
-       <span class="custom-tree-node" slot-scope="{ node,data}" @click="nodeClick(data)">
-        <span class="tree-label">{{ node.label }}</span>
-        <span>
-           <el-checkbox v-model="data.checked" v-if="dataOptions.extInfo.selectType ==='多选'"></el-checkbox>
-          <el-radio v-model="checked" v-else :label="data.value"></el-radio>
-        </span>
-      </span>
-      </el-tree>
-    </div>
-<!--    <div class="footer">
-      <el-button>取 消</el-button>
-      <el-button type="primary" @click="saveData">确 认</el-button>
-    </div>-->
-  </div>
-</template>
-
-<script>
-/* eslint-disable */
-export default {
-  name: "tree",
-  data(){
-    return{
-      defaultProps:{
-        label:"label",
-        value:"value"
-      },
-      checked:'',
-      // dataTree:[],
-      checkList:[],
-      checkDatas:[],
-      filterText:""
-    }
-  },
-  props:["dataOptions","fieldValue"],
-  methods:{
-    saveData(){
-      this.checkList = []
-       this.checkDatas = []
-       this.ergodicData(this.setCascadeOption,this.checkList)
-      this.$emit('saveData',this.checkList,this.checkDatas)
-    },
-    cancelBtn(){
-       this.$emit('cancelBtn')
-    },
-    ergodicData(list){
-      list.forEach(item=>{
-        if (this.dataOptions.extInfo.selectType === '多选'){
-          if (item.checked){
-            let data = this.$refs.dataTree.getNode(item)
-            let checkList = []
-            let arr = this.serchParent(data,checkList)
-            this.checkList.push(arr)
-            this.checkDatas.push(item)
-          }
-        }
-       else {
-          if (item.value === this.checked){
-            let data = this.$refs.dataTree.getNode(item)
-            let checkList = []
-            let arr = this.serchParent(data,checkList)
-            this.checkList = arr
-            this.checkDatas = [item]
-          }
-        }
-        if (item.children){
-          this.ergodicData(item.children)
-        }
-      })
-    },
-    serchParent(node,list) {
-      if(node) {
-        if(Object.prototype.toString.call(node.data) == '[object Object]') {
-          list.unshift(node.data.value)
-        }
-        if(node.parent) {
-          list = this.serchParent(node.parent,list)
-        }
-      }
-      return list
-    },
-    filterNode(value, data, node) {
-      if (!value) return true;
-      let upperCase = value.toUpperCase()
-      let lowerCase = value.toLowerCase()
-      let serchFlag = false
-      if (node.parent && Object.prototype.toString.call(node.parent.data) == '[object Object]') {
-        serchFlag = node.parent.data.label.indexOf(value) !== -1 || node.parent.data.label.indexOf(upperCase) !== -1 || node.parent.data.label.indexOf(lowerCase) !== -1
-      }
-      return data.label.indexOf(value) !== -1 || data.label.indexOf(upperCase) !== -1 || data.label.indexOf(lowerCase) !== -1 || serchFlag;
-    },
-    nodeClick(data,node){
-      if (this.dataOptions.extInfo.selectType !== '多选'){
-        this.ergodicCascade(this.setCascadeOption)
-      } else {
-        this.$set(data,'checked',!data.checked)
-      }
-      if (this.dataOptions.extInfo.selectType !== '多选'){
-        this.checked = data.value;
-      }
-    },
-    ergodicCascade(list){
-      list.forEach(item=>{
-        item.checked = false;
-        if (item.children){
-          this.ergodicCascade(item.children)
-        }
-      })
-    },
-  },
-  computed: {
-    dataTree() {
-      let arr = []
-      if (this.dataOptions.extInfo.cascadeDown && this.dataOptions.extInfo.cascadeDown.options){
-        arr = this.dataOptions.extInfo.cascadeDown.options
-      }
-      else if (this.dataOptions.extInfo.cascade){
-        arr = this.dataOptions.extInfo.cascade
-      }
-      else if (this.dataOptions.extInfo.cascadeDown && this.dataOptions.extInfo.cascadeDown[0]){
-        arr = this.dataOptions.extInfo.cascadeDown[0].options
-      }
-      return arr
-    },
-    //规则中限制极限的选项
-    setCascadeOption(){
-      let options = [];
-      let  arr = []
-      if (this.dataOptions.extInfo && (this.dataOptions.extInfo.cascadeDown || this.dataOptions.extInfo.cascade)){
-        arr = this.dataOptions.extInfo.cascadeDown && this.dataOptions.extInfo.cascadeDown.options ? this.dataOptions.extInfo.cascadeDown.options :
-            (this.dataOptions.extInfo.cascadeDown && this.dataOptions.extInfo.cascadeDown[0] ? this.dataOptions.extInfo.cascadeDown[0].options :
-                (this.dataOptions.extInfo.cascade ?  this.dataOptions.extInfo.cascade: []));
-      }
-      if (this.dataOptions.extInfo && this.dataOptions.extInfo.dependent && JSON.stringify(this.dataOptions.extInfo.dependent)!=='{}'){
-        for (let k in this.dataOptions.extInfo.dependent){
-          if (Array.isArray(this.fieldValue[k]) && Array.isArray(this.fieldValue[k][0])){
-            this.fieldValue[k].forEach(item=>{
-              this.dataOptions.extInfo.dependent[k].filterStruct.forEach(filter=>{
-                if (filter.input === item || item[item.length - 1] == filter.input){
-                  if (!options){
-                    options = []
-                  }
-                  options = options.concat(filter.output)
-                }
-              })
-            })
-          }
-          else {
-            console.log(this.dataOptions.extInfo.dependent[k].filterStruct);
-            this.dataOptions.extInfo.dependent[k].filterStruct.forEach(filter=>{
-              if (this.fieldValue[k] && (filter.input === this.fieldValue[k] || this.fieldValue[k][this.fieldValue[k].length - 1] == filter.input)){
-                options = filter.output;
-
-              }
-            })
-          }
-        }
-        const initCascade = (arr, parent)=>{
-          return JSON.parse(JSON.stringify(arr)).filter(item =>{
-            if (item.children){
-              item.children = initCascade(item.children, item)
-            }
-            let flag = null
-            for (let i = 0; i < options.length; i++) {
-              const optArr = options[i];
-              item.checked = false;
-              if(optArr.indexOf(item.value) !== -1) {
-                if(parent === null || item.children && item.children.length != 0) {
-                  flag = true
-                } else if(parent && optArr.indexOf(parent.value) !== -1 &&
-                    (Math.abs(optArr.indexOf(parent.value) - optArr.indexOf(item.value)) === 1 )) {
-                  flag = true
-                }
-              }
-            }
-            return flag && item
-          })
-        }
-        arr = initCascade(arr,null)
-      }
-      else {
-        return arr
-      }
-      console.debug('options',arr)
-      return arr
-    },
-  },
-  watch:{
-    filterText(val) {
-      this.$refs.dataTree.filter(val);
-    }
-  }
-  // mounted() {
-  //   if (this.dataOptions.extInfo.cascadeDown.options){
-  //     debugger
-  //     this.dataTree = this.dataOptions.extInfo.cascadeDown.options
-  //   }
-  //   else if (this.dataOptions.extInfo.cascade){
-  //     this.dataTree = this.dataOptions.extInfo.cascade
-  //   }
-  //   else if (this.dataOptions.extInfo.cascadeDown && this.dataOptions.extInfo.cascadeDown[0]){
-  //     this.dataTree = this.dataOptions.extInfo.cascadeDown[0].options
-  //   }
-  //   console.debug('dataTree',this.dataOptions,this.dataTree)
-  // }
-};
-</script>
-
-<style scoped lang="less">
-#tree{
-  height: 100%;
-  overflow: hidden;
-  /deep/.el-tree-node__content{
-    height: 38px;
-    line-height: 38px;
-  }
-  .tree-header{
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 0 20px;
-    width: calc(100% - 40px);
-    /*font-size: 14px;*/
-    padding-bottom: 20px;
-    .primary{
-      color: #366aff;
-      cursor: pointer;
-    }
-    .cacel{
-      color: #969799;
-      cursor: pointer;
-    }
-  }
-  .tree-input{
-    width: calc(100% - 20px);
-    margin: 0 10px 10px 10px;
-  }
-  .tree-container{
-    height:260px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-  }
-  .custom-tree-node{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: calc(100% - 40px);
-    font-size: 14px;
-    .tree-label{
-      max-width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    /deep/.el-radio__label{
-      display: none;
-    }
-  }
-  .footer{
-    position: absolute;
-    bottom: 0;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: calc(100% - 40px);
-    margin: 0 20px;
-    .el-button{
-      flex: 1;
-      border-radius: 9px;
-    }
-  }
-}
-</style>
+<template>
+  <div id="tree">
+    <div class="tree-header">
+      <span class="cacel" @click="cancelBtn">{{$t('dragonCommon.cancel')}}</span>
+      <span class="primary" @click="saveData">{{$t('dragonCommon.confirm')}}</span>
+    </div>
+    <div class="tree-input" v-if="setCascadeOption && setCascadeOption.length > 0">
+      <el-input placeholder="请搜索" v-model="filterText">
+      </el-input>
+    </div>
+    <div class="tree-container">
+      <el-tree :data="setCascadeOption" :props="defaultProps" ref="dataTree" node-key="value"
+        :expand-on-click-node="false" :filter-node-method="filterNode">
+        <span class="custom-tree-node" slot-scope="{ node,data}" @click="nodeClick(data)">
+          <span class="tree-label">{{ node.label }}</span>
+          <span>
+            <template v-if="webHookCascader">
+              <el-checkbox :disabled="data.children && data.children.length !== 0" v-model="data.checked"
+                v-if="dataOptions.extInfo.selectType === '多选'"></el-checkbox>
+              <el-radio :disabled="data.children && data.children.length !== 0" v-model="checked" v-else
+                :label="data.value"></el-radio>
+            </template>
+            <template v-else>
+              <el-checkbox v-model="data.checked" v-if="dataOptions.extInfo.selectType === '多选'"></el-checkbox>
+              <el-radio v-model="checked" v-else :label="data.value"></el-radio>
+            </template>
+          </span>
+        </span>
+      </el-tree>
+    </div>
+    <!--    <div class="footer">
+      <el-button>取 消</el-button>
+      <el-button type="primary" @click="saveData">确 认</el-button>
+    </div>-->
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+export default {
+  name: "tree",
+  data () {
+    return {
+      defaultProps: {
+        label: "label",
+        value: "value"
+      },
+      checked: '',
+      // dataTree:[],
+      checkList: [],
+      checkDatas: [],
+      filterText: ""
+    }
+  },
+  props: ["dataOptions", "fieldValue", "webHookCascader"],
+  methods: {
+    saveData () {
+      this.checkList = []
+      this.checkDatas = []
+      this.ergodicData(this.setCascadeOption, this.checkList)
+      this.$emit('saveData', this.checkList, this.checkDatas)
+    },
+    cancelBtn () {
+      this.$emit('cancelBtn')
+    },
+    ergodicData (list) {
+      list.forEach(item => {
+        if (this.dataOptions.extInfo.selectType === '多选') {
+          if (item.checked) {
+            let data = this.$refs.dataTree.getNode(item)
+            let checkList = []
+            let arr = this.serchParent(data, checkList)
+            this.checkList.push(arr)
+            this.checkDatas.push(item)
+          }
+        }
+        else {
+          if (item.value === this.checked) {
+            let data = this.$refs.dataTree.getNode(item)
+            let checkList = []
+            let arr = this.serchParent(data, checkList)
+            this.checkList = arr
+            this.checkDatas = [item]
+          }
+        }
+        if (item.children) {
+          this.ergodicData(item.children)
+        }
+      })
+    },
+    serchParent (node, list) {
+      if (node) {
+        if (Object.prototype.toString.call(node.data) == '[object Object]') {
+          list.unshift(node.data.value)
+        }
+        if (node.parent) {
+          list = this.serchParent(node.parent, list)
+        }
+      }
+      return list
+    },
+    filterNode (value, data, node) {
+      if (!value) return true;
+      let upperCase = value.toUpperCase()
+      let lowerCase = value.toLowerCase()
+      let serchFlag = false
+      if (node.parent && Object.prototype.toString.call(node.parent.data) == '[object Object]') {
+        serchFlag = node.parent.data.label.indexOf(value) !== -1 || node.parent.data.label.indexOf(upperCase) !== -1 || node.parent.data.label.indexOf(lowerCase) !== -1
+      }
+      return data.label.indexOf(value) !== -1 || data.label.indexOf(upperCase) !== -1 || data.label.indexOf(lowerCase) !== -1 || serchFlag;
+    },
+    nodeClick (data, node) {
+      if(this.webHookCascader && data.children && data.children.length != 0) {
+        return
+      }
+      if (this.dataOptions.extInfo.selectType !== '多选') {
+        this.ergodicCascade(this.setCascadeOption)
+      } else {
+        this.$set(data, 'checked', !data.checked)
+      }
+      if (this.dataOptions.extInfo.selectType !== '多选') {
+        this.checked = data.value;
+      }
+    },
+    ergodicCascade (list) {
+      list.forEach(item => {
+        item.checked = false;
+        if (item.children) {
+          this.ergodicCascade(item.children)
+        }
+      })
+    },
+  },
+  computed: {
+    dataTree () {
+      let arr = []
+      if (this.dataOptions.extInfo.cascadeDown && this.dataOptions.extInfo.cascadeDown.options) {
+        arr = this.dataOptions.extInfo.cascadeDown.options
+      }
+      else if (this.dataOptions.extInfo.cascade) {
+        arr = this.dataOptions.extInfo.cascade
+      }
+      else if (this.dataOptions.extInfo.cascadeDown && this.dataOptions.extInfo.cascadeDown[0]) {
+        arr = this.dataOptions.extInfo.cascadeDown[0].options
+      }
+      return arr
+    },
+    //规则中限制极限的选项
+    setCascadeOption () {
+      let options = [];
+      let arr = []
+      if (this.dataOptions.extInfo && (this.dataOptions.extInfo.cascadeDown || this.dataOptions.extInfo.cascade)) {
+        arr = this.dataOptions.extInfo.cascadeDown && this.dataOptions.extInfo.cascadeDown.options ? this.dataOptions.extInfo.cascadeDown.options :
+          (this.dataOptions.extInfo.cascadeDown && this.dataOptions.extInfo.cascadeDown[0] ? this.dataOptions.extInfo.cascadeDown[0].options :
+            (this.dataOptions.extInfo.cascade ? this.dataOptions.extInfo.cascade : []));
+      }
+      if (this.dataOptions.extInfo && this.dataOptions.extInfo.dependent && JSON.stringify(this.dataOptions.extInfo.dependent) !== '{}') {
+        for (let k in this.dataOptions.extInfo.dependent) {
+          if (Array.isArray(this.fieldValue[k]) && Array.isArray(this.fieldValue[k][0])) {
+            this.fieldValue[k].forEach(item => {
+              this.dataOptions.extInfo.dependent[k].filterStruct.forEach(filter => {
+                if (filter.input === item || item[item.length - 1] == filter.input) {
+                  if (!options) {
+                    options = []
+                  }
+                  options = options.concat(filter.output)
+                }
+              })
+            })
+          }
+          else {
+            console.log(this.dataOptions.extInfo.dependent[k].filterStruct);
+            this.dataOptions.extInfo.dependent[k].filterStruct.forEach(filter => {
+              if (this.fieldValue[k] && (filter.input === this.fieldValue[k] || this.fieldValue[k][this.fieldValue[k].length - 1] == filter.input)) {
+                options = filter.output;
+
+              }
+            })
+          }
+        }
+        const initCascade = (arr, parent) => {
+          return JSON.parse(JSON.stringify(arr)).filter(item => {
+            if (item.children) {
+              item.children = initCascade(item.children, item)
+            }
+            let flag = null
+            for (let i = 0; i < options.length; i++) {
+              const optArr = options[i];
+              item.checked = false;
+              if (optArr.indexOf(item.value) !== -1) {
+                if (parent === null || item.children && item.children.length != 0) {
+                  flag = true
+                } else if (parent && optArr.indexOf(parent.value) !== -1 &&
+                  (Math.abs(optArr.indexOf(parent.value) - optArr.indexOf(item.value)) === 1)) {
+                  flag = true
+                }
+              }
+            }
+            return flag && item
+          })
+        }
+        arr = initCascade(arr, null)
+      }
+      else {
+        return arr
+      }
+      console.debug('options', arr)
+      return arr
+    },
+  },
+  watch: {
+    filterText (val) {
+      this.$refs.dataTree.filter(val);
+    }
+  }
+  // mounted() {
+  //   if (this.dataOptions.extInfo.cascadeDown.options){
+  //     debugger
+  //     this.dataTree = this.dataOptions.extInfo.cascadeDown.options
+  //   }
+  //   else if (this.dataOptions.extInfo.cascade){
+  //     this.dataTree = this.dataOptions.extInfo.cascade
+  //   }
+  //   else if (this.dataOptions.extInfo.cascadeDown && this.dataOptions.extInfo.cascadeDown[0]){
+  //     this.dataTree = this.dataOptions.extInfo.cascadeDown[0].options
+  //   }
+  //   console.debug('dataTree',this.dataOptions,this.dataTree)
+  // }
+};
+</script>
+
+<style scoped lang="less">
+@import "../assets/less/variables.less";
+
+#tree {
+  height: 100%;
+  overflow: hidden;
+
+  /deep/.el-tree-node__content {
+    height: 38px;
+    line-height: 38px;
+  }
+
+  .tree-header {
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 20px;
+    width: calc(100% - 40px);
+    /*font-size: 14px;*/
+    padding-bottom: 20px;
+
+    .primary {
+      color: @font-primary-accent-color;
+      cursor: pointer;
+    }
+
+    .cacel {
+      color: @font-primary-color-r1;
+      cursor: pointer;
+    }
+  }
+
+  .tree-input {
+    width: calc(100% - 20px);
+    margin: 0 10px 10px 10px;
+  }
+
+  .tree-container {
+    height: 260px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+
+  .custom-tree-node {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: calc(100% - 40px);
+    font-size: 14px;
+
+    .tree-label {
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /deep/.el-radio__label {
+      display: none;
+    }
+  }
+
+  .footer {
+    position: absolute;
+    bottom: 0;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: calc(100% - 40px);
+    margin: 0 20px;
+
+    .el-button {
+      flex: 1;
+      border-radius: 9px;
+    }
+  }
+}</style>