index.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!--
  2. 下拉树组件
  3. @Author: linqian
  4. @Date: 2021-05-20 15:34
  5. -->
  6. <template>
  7. <div>
  8. <dg-tree-drop
  9. ref="tree"
  10. v-model="value"
  11. :props="props"
  12. :tree-props="treeProps"
  13. clearable
  14. filterable
  15. visible-type="branch"
  16. radioType= "all"
  17. @change="handleChange"
  18. >
  19. </dg-tree-drop>
  20. </div>
  21. </template>
  22. <script>
  23. import * as commonApi from "@/api/common";
  24. export default {
  25. props: {
  26. nodeKey: {
  27. type: String,
  28. default:"code",
  29. },
  30. apiName: {
  31. type: String,
  32. default: "getTree"
  33. }
  34. },
  35. components: {},
  36. data() {
  37. return {
  38. value: "",
  39. props: {
  40. value: this.nodeKey,
  41. label: "name",
  42. children: "children",
  43. isLeaf(data) {
  44. return data.isParent !== true;
  45. }
  46. },
  47. treeProps: {
  48. nodeKey: this.nodeKey,
  49. lazy: true,
  50. load: this.loadNode
  51. }
  52. };
  53. },
  54. computed: {},
  55. methods: {
  56. loadNode(node, resolve) {
  57. this.getTree(node.level === 0 ? void 0 : node.data.id, resolve, node.level);
  58. },
  59. // 组织机构
  60. getTree(id, resolve) {
  61. const { params, apiName } = this;
  62. commonApi[apiName]({ id, ...params })
  63. .then((res) => {
  64. // 就为了存根节点, 用于刷新
  65. return resolve(res || []);
  66. })
  67. .catch(() => resolve([]));
  68. },
  69. handleChange(val) {
  70. this.$emit("submitTreeValue", val)
  71. }
  72. },
  73. created() {},
  74. mounted() {}
  75. };
  76. </script>
  77. <style lang='scss'>
  78. </style>