hd-idevvue3 3.0.2 → 3.0.4

package/src/views/privilege/orgDept/orgTree.vue

@@ -1,88 +1,99 @@
-<template>
-  <hd-tree ref="tree" :show-checkbox="false" :highlight-current="true" :expand-on-click-node="false" :data="hdResult"
-           :props="opts" @node-click="handleNodeClick" node-key="id" :filter-node-method="filterNode"
-           :default-expanded-keys="defaultExpandedKeys"></hd-tree>
-</template>
-
-<script>
-
-export default {
-  name: 'orgTree',
-  data() {
-    return {
-      hdQuery: new HdQuery(this),
-      hdResult: [],
-      listLoading: true,
-      visible: false,
-      opts: {
-        label: 'text'
-      },
-      currentNodeData: {}
-    }
-  },
-  props: { idVal: String }, // 设置value为props属性-必须
-  mounted() {
-    this.doQuery()
-  },
-  methods: {
-    doQuery() {
-      // 显示loading框
-      this.listLoading = true
-      this.$http.post('/webresources/login/privilege/AuthOrgn/gentree', this.hdQuery).then(response => {
-        const data = response.data
-        this.hdResult = data
-        this.listLoading = false
-      })
-    },
-    handleNodeClick(data) {
-      this.$emit('org-node-click', data)
-      this.currentNodeData = data
-    },
-    refresh: function(data) {
-      const tree = this.$refs.tree.$refs.eltree
-      if (data.type === 'add') {
-        this.currentNodeData.children.push(data.data)
-      } else if (data.type === 'edit') {
-        const array = this.currentNodeData.children
-        for (let i = 0; i < array.length; i++) {
-          const obj = array[i]
-          if (obj.id === data.data.id) {
-            Object.assign(array[i], data.data)
-            break
-          }
-        }
-      } else if (data.type === 'remove') {
-        const array = this.currentNodeData.children
-        for (let i = 0; i < array.length; i++) {
-          const obj = array[i]
-          if (obj.id === data.data.id) {
-            array.splice(i, 1)
-            break
-          }
-        }
-      }
-    },
-    filterNode(value, data) {
-      if (!value) return true
-      return data.text.indexOf(value) !== -1
-    },
-    filter(val) {
-      this.$refs.tree.$refs.eltree.filter(val)
-    }
-  },
-  watch: {
-    // 都有值才适合查询
-    idVal: function(newVal) {
-      this.$refs.tree.$refs.eltree.setCurrentKey(this.idVal)
-    }
-  },
-  computed: {// 给外层v-model赋值
-    defaultExpandedKeys() {
-      if (this.idVal) {
-        return [this.idVal]
-      }
-      return []
-    }
-  }
-}
-</script>
+<template>
+  <hd-tree
+    ref="tree"
+    :show-checkbox="false"
+    :highlight-current="true"
+    :expand-on-click-node="false"
+    :data="hdResult"
+    :props="opts"
+    @node-click="handleNodeClick"
+    node-key="id"
+    :filter-node-method="filterNode"
+    :default-expanded-keys="defaultExpandedKeys"
+  ></hd-tree>
+</template>
+
+<script>
+export default {
+  name: 'orgTree',
+  data() {
+    return {
+      hdQuery: new HdQuery(this),
+      hdResult: [],
+      listLoading: true,
+      visible: false,
+      opts: {
+        label: 'text',
+      },
+      currentNodeData: {},
+    }
+  },
+  props: { idVal: String }, // 设置value为props属性-必须
+  mounted() {
+    this.doQuery()
+  },
+  methods: {
+    doQuery() {
+      // 显示loading框
+      this.listLoading = true
+      this.$http
+        .post('/webresources/login/privilege/AuthOrgn/gentree', this.hdQuery)
+        .then((response) => {
+          const data = response.data
+          this.hdResult = data
+          this.listLoading = false
+        })
+    },
+    handleNodeClick(data) {
+      this.$emit('org-node-click', data)
+      this.currentNodeData = data
+    },
+    refresh: function (data) {
+      const tree = this.$refs.tree.$refs.eltree
+      if (data.type === 'add') {
+        this.currentNodeData.children.push(data.data)
+      } else if (data.type === 'edit') {
+        const array = this.currentNodeData.children
+        for (let i = 0; i < array.length; i++) {
+          const obj = array[i]
+          if (obj.id === data.data.id) {
+            Object.assign(array[i], data.data)
+            break
+          }
+        }
+      } else if (data.type === 'remove') {
+        const array = this.currentNodeData.children
+        for (let i = 0; i < array.length; i++) {
+          const obj = array[i]
+          if (obj.id === data.data.id) {
+            array.splice(i, 1)
+            break
+          }
+        }
+      }
+    },
+    filterNode(value, data) {
+      if (!value) return true
+      return data.text.indexOf(value) !== -1
+    },
+    filter(val) {
+      this.$refs.tree.$refs.eltree.filter(val)
+    },
+  },
+  watch: {
+    // 都有值才适合查询
+    idVal: function (newVal) {
+      this.$refs.tree.$refs.eltree.setCurrentKey(this.idVal)
+    },
+  },
+  computed: {
+    // 给外层v-model赋值
+    defaultExpandedKeys() {
+      if (this.idVal) {
+        return [this.idVal]
+      }
+      return []
+    },
+  },
+}
+</script>

package/src/views/privilege/orgDept/orgnselect.vue

@@ -1,134 +1,155 @@
 <template>
   <div>
-    <el-popover :disabled="disabled" placement="bottom-start" ref="popSel" v-model="visible">
-      <div :style="{height: height}">
-        <orgTree :idVal="idVal" @org-node-click='doSel' ref='orgTree'></orgTree>
+    <el-popover
+      :disabled="disabled"
+      placement="bottom-start"
+      ref="popSel"
+      v-model="visible"
+    >
+      <div :style="{ height: height }">
+        <orgTree :idVal="idVal" @org-node-click="doSel" ref="orgTree"></orgTree>
       </div>
     </el-popover>
     <div>
       <!--readonly 在选择区隐藏时,不能输入-->
-      <el-input :clearable="false" :disabled="disabled"
-                :placeholder="placeholder?this.$t(placeholder):this.$t('请选择')" :readonly="!visible"
-                @focus="focus" @mouseenter.native="doMouseEnter"
-                @mouseleave.native="doMouseLeave" ref="sel" v-model="searchVal" v-popover:popSel>
-        <i @click.stop="doClear" class="el-input__icon el-icon-circle-close" slot="suffix" style="cursor:pointer "
-           v-if="!threePointShow"></i>
-        <i @click="$emit('pop')" class="el-input__icon el-icon-more" slot="suffix" style="cursor:pointer"
-           v-if="threePointShow"></i>
+      <el-input
+        :clearable="false"
+        :disabled="disabled"
+        :placeholder="placeholder ? this.$t(placeholder) : this.$t('请选择')"
+        :readonly="!visible"
+        @focus="focus"
+        @mouseenter.native="doMouseEnter"
+        @mouseleave.native="doMouseLeave"
+        ref="sel"
+        v-model="searchVal"
+        v-popover:popSel
+      >
+        <el-icon class="el-input__icon" style="cursor: pointer"
+          ><el-icon-circle-close
+        /></el-icon>
+        <el-icon class="el-input__icon" style="cursor: pointer"
+          ><el-icon-more
+        /></el-icon>
       </el-input>
     </div>
   </div>
 </template>
-<style>
-  .lucencyInput .el-input__inner {
-    border: 0px;
-  }
-</style>
+
 <script>
-  import orgTree from './orgTree'
+import {
+  CircleClose as ElIconCircleClose,
+  More as ElIconMore,
+} from '@element-plus/icons'
+import orgTree from './orgTree'
 
+export default {
+  components: {
+    orgTree,
+    ElIconCircleClose,
+    ElIconMore,
+  },
+  name: 'orgnselect',
+  data() {
+    return {
+      threePointShow: true,
+      searchVal: this.txtVal,
+      // isFocus: false,
+      visible: false,
+      isFirst: true, // 是否第一次打开
+      searchHandler: Object,
+      isSoftFocus: false, // 点击弹窗内容时,input重新获得焦点,但是不能触发focus
+      // focusTime: 0
+    }
+  },
+  inheritAttrs: false,
   /**
-   * 自定义列表下拉
-   * @module orgnselect
+   * Props  继承hd-com-grid的属性和事件
+   * @prop {String} txtVal 双向绑定 这里是为了clear清空用
+   * @prop {String} idVal 双向绑定 这里是为了clear清空用
+   * @prop {String} placeholder
+   * @prop {String} disabled 只读
+   * @prop {Object} hdQuery  查询封装类
+   * @prop {String} height  默认为40vh
+   * @prop {Function} beforeQuery  查询前的事件,通常需要绑定anyQuery
    */
-  export default {
-    name: 'orgnselect',
-    components: {
-      orgTree
+  // 设置value为props属性-必须
+  props: {
+    txtVal: String,
+    idVal: String,
+    placeholder: String,
+    disabled: Boolean,
+    hdQuery: Object,
+    url: String, // 全路径
+    height: {
+      // 高度
+      type: String,
+      default: '40vh',
     },
-    data() {
-      return {
-        threePointShow: true,
-        searchVal: this.txtVal,
-        // isFocus: false,
-        visible: false,
-        isFirst: true, // 是否第一次打开
-        searchHandler: Object,
-        isSoftFocus: false // 点击弹窗内容时,input重新获得焦点,但是不能触发focus
-        // focusTime: 0
+    beforeQuery: Function,
+  },
+  mounted() {
+    $(this.$parent.$el).find('.el-popover__reference').removeAttr('tabIndex') // 焦点用
+  },
+  methods: {
+    focus() {
+      // this.focusTime = new Date().getTime()
+      this.$emit('focus')
+      if (this.isSoftFocus) {
+        // click时
+        this.isSoftFocus = false // 点击时,防止焦点触发
+        return false
       }
+      setTimeout(() => {
+        // 否则会和默认的冲突
+        this.visible = true
+      }, 150)
+      // this.isFocus = true
     },
-    inheritAttrs: false,
-    /**
-     * Props  继承hd-com-grid的属性和事件
-     * @prop {String} txtVal 双向绑定 这里是为了clear清空用
-     * @prop {String} idVal 双向绑定 这里是为了clear清空用
-     * @prop {String} placeholder
-     * @prop {String} disabled 只读
-     * @prop {Object} hdQuery  查询封装类
-     * @prop {String} height  默认为40vh
-     * @prop {Function} beforeQuery  查询前的事件,通常需要绑定anyQuery
-     */
-    props: {
-      txtVal: String,
-      idVal: String,
-      placeholder: String,
-      disabled: Boolean,
-      hdQuery: Object,
-      url: String, // 全路径
-      height: {// 高度
-        type: String,
-        default: '40vh'
-      },
-      beforeQuery: Function
-    }, // 设置value为props属性-必须
-    mounted() {
-      $(this.$parent.$el).find('.el-popover__reference').removeAttr('tabIndex')// 焦点用
+    doClear() {
+      this.$emit('update:txtVal', '')
+      this.$emit('update:idVal', '')
+      this.$emit('clear')
     },
-    methods: {
-      focus() {
-        // this.focusTime = new Date().getTime()
-        this.$emit('focus')
-        if (this.isSoftFocus) { // click时
-          this.isSoftFocus = false // 点击时,防止焦点触发
-          return false
-        }
-        setTimeout(() => { // 否则会和默认的冲突
-          this.visible = true
-        }, 150)
-        // this.isFocus = true
-      },
-      doClear() {
-        this.$emit('update:txtVal', '')
-        this.$emit('update:idVal', '')
-        this.$emit('clear')
-      },
-      doMouseEnter() {
-        if (this.disabled) {
-          return false
-        }
-        if (this.idVal) {
-          this.threePointShow = false
-        }
-      },
-      doMouseLeave() {
-        this.threePointShow = true
-      },
-      doSel(data) {
-        this.$emit('update:txtVal', data.text)
-        this.$emit('update:idVal', data.id)
-        this.visible = false
+    doMouseEnter() {
+      if (this.disabled) {
+        return false
+      }
+      if (this.idVal) {
+        this.threePointShow = false
       }
     },
-
-    watch: {
-      // searchVal: function(newVal) {
-      //   this.$refs.orgTree.filter(newVal)
-      //   // this.visible = true
-      // },
-      txtVal: function (newVal) {
+    doMouseLeave() {
+      this.threePointShow = true
+    },
+    doSel(data) {
+      this.$emit('update:txtVal', data.text)
+      this.$emit('update:idVal', data.id)
+      this.visible = false
+    },
+  },
+  watch: {
+    // searchVal: function(newVal) {
+    //   this.$refs.orgTree.filter(newVal)
+    //   // this.visible = true
+    // },
+    txtVal: function (newVal) {
+      this.searchVal = this.txtVal
+    },
+    visible: function (newVal) {
+      console.log('newVal', newVal)
+      console.log(this.$refs.orgTree)
+      if (newVal) {
+        this.$refs.orgTree.filter('')
+      } else {
         this.searchVal = this.txtVal
-      },
-      visible: function (newVal) {
-        console.log('newVal', newVal)
-        console.log(this.$refs.orgTree)
-        if (newVal) {
-          this.$refs.orgTree.filter('')
-        } else {
-          this.searchVal = this.txtVal
-        }
       }
-    }
-  }
-
+    },
+  },
+}
 </script>
+
+<style>
+.lucencyInput .el-input__inner {
+  border: 0px;
+}
+</style>