tree-select.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <div class="tree-select-content">
  3. <!-- <a-input-search class="input-search" placeholder="请输入账户名或ID" @change="onChange" /> -->
  4. <div class="tree-select-class">
  5. <div class="select-class-left">
  6. <div class="class-left-header">可放开定向</div>
  7. <div class="class-left-content">
  8. <template>
  9. <a-checkbox-group v-model="checkedValue" @change="handleCheckGroup">
  10. <a-row>
  11. <a-col :span="24" v-for="item in changeCheckData" :key="item.value">
  12. <a-checkbox :value="item.value">{{ item.label }}</a-checkbox>
  13. </a-col>
  14. </a-row>
  15. </a-checkbox-group>
  16. </template>
  17. <div class="example">
  18. <span v-if="!changeCheckData.length">暂无数据</span>
  19. </div>
  20. </div>
  21. </div>
  22. <div class="select-class-right">
  23. <div class="class-left-header">
  24. 已选 ({{ applyTypeOption.length ? applyTypeOption.length : 0}})
  25. <span class="clear-all-class"><a @click="handleClearAll">清空</a></span>
  26. </div>
  27. <div v-if="applyTypeOption.length" class="class-left-content">
  28. <div class="apply-right-tree" v-for="item in applyTypeOption" :key="item.value">
  29. <p class="left-content-p">
  30. <a-tooltip placement="left">
  31. <template slot="title">
  32. <span>{{ item.label }}</span>
  33. </template>
  34. {{ item.label }}
  35. </a-tooltip>
  36. </p>
  37. <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
  38. </div>
  39. </div>
  40. <div v-else class="no-data-class">暂无数据</div>
  41. </div>
  42. </div>
  43. </div>
  44. </template>
  45. <script>
  46. import {mapGetters} from 'vuex';
  47. export default {
  48. name: 'tree-select',
  49. props: {
  50. defaultlist: {
  51. type: Array,
  52. default: () => []
  53. },
  54. editdata: {
  55. type: Array,
  56. default: () => []
  57. }
  58. },
  59. data() {
  60. return {
  61. checkedValue: [],
  62. checkedKeys: [],
  63. treeData: [],
  64. updateTreeData: [],
  65. applyTypeOption: [],
  66. changeCheckData: []
  67. };
  68. },
  69. mounted() {
  70. this.changeCheckData = this.defaultlist;
  71. this.updateTreeData = this.defaultlist;
  72. if (this.editdata.length) {
  73. this.checkedValue = [...this.editdata];
  74. const rightSelectList = [];
  75. this.updateTreeData.forEach(item => {
  76. if (this.editdata.includes(item.value)) {
  77. rightSelectList.push(item);
  78. }
  79. });
  80. this.applyTypeOption = rightSelectList;
  81. }
  82. },
  83. methods: {
  84. ...mapGetters(['userInfo']),
  85. handleCheckGroup(checkedValues) {
  86. const rightSelectList = [];
  87. this.checkedValue = checkedValues;
  88. this.updateTreeData.forEach(item => {
  89. if (checkedValues.includes(item.value)) {
  90. rightSelectList.push(item);
  91. }
  92. });
  93. this.applyTypeOption = rightSelectList;
  94. this.$emit('select-finally-result', this.applyTypeOption);
  95. },
  96. handleClearAll() {
  97. this.checkedValue = [];
  98. this.applyTypeOption = [];
  99. this.$emit('select-finally-result', this.applyTypeOption);
  100. },
  101. handleDelTree(list) {
  102. const defaultData = this.applyTypeOption;
  103. this.applyTypeOption = defaultData.filter(item => item.value !== list.value);
  104. this.checkedValue = this.applyTypeOption.map(item => item.value);
  105. this.$emit('select-finally-result', this.applyTypeOption);
  106. },
  107. onChange(e) {
  108. const value = e.target.value;
  109. this.changeCheckData = value !== '' ? this.getNewTreeData(this.updateTreeData, value) : [...this.updateTreeData];
  110. },
  111. getNewTreeData(data, value) {
  112. const checkList = [];
  113. data.forEach(item => {
  114. if (item.label.indexOf(value) !== -1) {
  115. checkList.push(item);
  116. }
  117. });
  118. return checkList;
  119. },
  120. }
  121. };
  122. </script>
  123. <style lang="less" scoped>
  124. @import 'tree-select';
  125. </style>