treeRefer.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <div>
  3. <el-dialog :title="reciveForm.title" width="500px" :close-on-click-modal="false" :append-to-body="true" v-dialogDrag
  4. class="userDialog" :visible.sync="visible">
  5. <el-container style="height: 500px">
  6. <el-container>
  7. <el-main>
  8. <el-row :gutter="24" class="content">
  9. <el-col :span="24">
  10. <el-input placeholder="输入关键字进行过滤" size="small" v-model="filterText" style="margin-bottom: 16px">
  11. </el-input>
  12. <el-tree class="filter-tree" :data="threedata" :props="defaultProps" accordion node-key="id"
  13. highlight-current @node-click="clickTree" :filter-node-method="filterNode" ref="tree">
  14. <span slot-scope="{ node, data }">
  15. {{ data.code }}{{ data.name }}
  16. </span>
  17. </el-tree>
  18. </el-col>
  19. </el-row>
  20. </el-main>
  21. </el-container>
  22. </el-container>
  23. <span slot="footer" class="dialog-footer">
  24. <el-button size="small" @click="visible = false" icon="el-icon-circle-close">关闭</el-button>
  25. <el-button size="small" type="primary" icon="el-icon-circle-check" @click="doSubmit()">确定</el-button>
  26. </span>
  27. </el-dialog>
  28. </div>
  29. </template>
  30. <script>
  31. import { getRefer } from '@/api/purchase/basic'
  32. export default {
  33. data() {
  34. return {
  35. loading: false,
  36. visible: false,
  37. filterText: "",
  38. threedata: [],
  39. defaultProps: {
  40. children: "children",
  41. label: "name",
  42. },
  43. // 判断是否为最末级节点
  44. // isLast: false,
  45. // 选中的节点
  46. choosePoint: {},
  47. // 接收的参数
  48. reciveForm: {},
  49. };
  50. },
  51. props: {},
  52. watch: {
  53. filterText(val) {
  54. this.$refs.tree.filter(val);
  55. },
  56. },
  57. methods: {
  58. init(val) {
  59. this.visible = true;
  60. this.filterText = ''
  61. this.reciveForm = val
  62. this.$nextTick(() => {
  63. this.refreshList();
  64. });
  65. },
  66. // 获取数据列表
  67. refreshList(data) {
  68. this.loading = true;
  69. let params = this.reciveForm
  70. getRefer(params).then((res) => {
  71. console.log("res", res);
  72. if (res.code === 200) {
  73. this.threedata = res.rows
  74. }
  75. this.loading = false;
  76. });
  77. },
  78. clickTree(data) {
  79. console.log("树形节点信息:", data);
  80. this.choosePoint = data;
  81. },
  82. filterNode(value, data) {
  83. if (!value) return true;
  84. return data.name.indexOf(value) !== -1;
  85. },
  86. doSubmit() {
  87. console.log("子组件选择的数据", this.choosePoint);
  88. this.$emit("doSubmit", this.choosePoint);
  89. this.visible = false;
  90. },
  91. loadNode(node, resolve) {
  92. console.log("node, resolve", node, resolve);
  93. // if (!node.data.length)
  94. // resolve(node.data.childrens.sort((a, b) => a.code - b.code));
  95. // else resolve(this.threedata);
  96. },
  97. },
  98. };
  99. </script>
  100. <style lang="scss">
  101. .userDialog {
  102. .el-dialog__body {
  103. padding: 10px 0px 0px 10px;
  104. color: #606266;
  105. font-size: 14px;
  106. word-break: break-all;
  107. }
  108. .el-main {
  109. padding: 20px 20px 5px 20px;
  110. .el-pagination {
  111. margin-top: 5px;
  112. }
  113. }
  114. }
  115. </style>