accountCheck.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <style>
  2. .checked-account {
  3. width: 100%;
  4. }
  5. .checked-account .ant-checkbox-wrapper {
  6. width: 20%;
  7. min-width: 300px;
  8. white-space: nowrap;
  9. text-overflow: ellipsis;
  10. overflow: hidden;
  11. }
  12. </style>
  13. <template>
  14. <div>
  15. <a-modal title="账户选择" v-model="showEdit" @ok="handleOk" @cancel="close" width="80%"
  16. :confirm-loading="confirmLoading">
  17. <!-- <a-checkbox :indeterminate="indeterminate" @change="onCheckAllChange" :checked="checkAll">全选</a-checkbox>
  18. <br />
  19. <a-checkbox-group :options="showList" v-model="dataValue" class="checked-account" @change="onChange" /> -->
  20. <a-input-search style="margin-bottom: 8px;width: 180px" @search="onSearch" allow-clear/>
  21. <a-tree
  22. v-model="checkedKeys"
  23. checkable
  24. :expanded-keys="expandedKeys"
  25. :auto-expand-parent="autoExpandParent"
  26. :selected-keys="selectedKeys"
  27. :tree-data="treeData"
  28. @expand="onExpand"
  29. @select="onSelect"
  30. />
  31. </a-modal>
  32. </div>
  33. </template>
  34. <script>
  35. import {deleteAction, getAction} from '@/api/manage'
  36. // import lifting from './components/lifting'
  37. export default {
  38. name: 'modules',
  39. components: {},
  40. data: function () {
  41. return {
  42. checkedKeys: [],
  43. showEdit: false,
  44. dataList: [],
  45. showList: null,
  46. dataValue: [],
  47. indeterminate: false,
  48. checkAll: false,
  49. expandedKeys: [],
  50. autoExpandParent: true,
  51. selectedKeys: [],
  52. treeData: [],
  53. confirmLoading: false,
  54. bytedanceUrl: null,
  55. bytedanceItem: null,
  56. }
  57. },
  58. watch: {
  59. checkedKeys(val) {
  60. console.log('onCheck', val)
  61. },
  62. },
  63. methods: {
  64. onSearch(e) {
  65. this.bytedanceItem.authName = undefined
  66. this.treeData = []
  67. if (e != '') {
  68. this.bytedanceItem.authName = e
  69. }
  70. this.confirmLoading = false
  71. this.showEdit = true
  72. this.dataList = []
  73. this.showList = null
  74. this.dataValue = []
  75. this.checkedKeys = []
  76. this.indeterminate = false
  77. this.checkAll = false
  78. getAction(this.bytedanceUrl, this.bytedanceItem).then((res) => {
  79. if (res.success) {
  80. let arrList = []
  81. this.treeData = res.result.map(item => {
  82. return {
  83. title: item.projectName,
  84. key: item.projectId + '-',
  85. children: item.userAllocationList.map(i => {
  86. return {
  87. title: i.authName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + (i.userName ? i.userName : '管理员'),
  88. key: i.accountId
  89. }
  90. })
  91. }
  92. }
  93. )
  94. }
  95. console.log(res)
  96. })
  97. },
  98. onExpand(expandedKeys) {
  99. console.log('onExpand', expandedKeys)
  100. // if not set autoExpandParent to false, if children expanded, parent can not collapse.
  101. // or, you can remove all expanded children keys.
  102. this.expandedKeys = expandedKeys
  103. this.autoExpandParent = false
  104. },
  105. onCheck(checkedKeys) {
  106. this.checkedKeys = checkedKeys
  107. },
  108. onSelect(selectedKeys, info) {
  109. this.selectedKeys = selectedKeys
  110. },
  111. handleOk(e) {
  112. this.confirmLoading = true
  113. let defaultData = this.checkedKeys.filter(item => item.toString().indexOf('-') === -1);
  114. this.showEdit = false
  115. this.$emit('synchro', defaultData)
  116. },
  117. close() {
  118. this.showEdit = false
  119. this.dataList = []
  120. this.showList = null
  121. this.dataValue = []
  122. this.indeterminate = false
  123. this.checkAll = false
  124. },
  125. onCheckAllChange(e) {
  126. Object.assign(this, {
  127. dataValue: e.target.checked
  128. ? this.showList.map((item) => {
  129. return item.value
  130. })
  131. : [],
  132. indeterminate: false,
  133. checkAll: e.target.checked,
  134. })
  135. },
  136. onChange(checkedList) {
  137. this.indeterminate = !!this.dataValue.length && this.dataValue.length < this.showList.length
  138. this.checkAll = this.dataValue.length === this.showList.length
  139. },
  140. getData(url, item) {
  141. this.bytedanceUrl = url,
  142. this.bytedanceItem = item,
  143. this.confirmLoading = false
  144. this.showEdit = true
  145. this.dataList = []
  146. this.showList = null
  147. this.dataValue = []
  148. this.checkedKeys = []
  149. this.indeterminate = false
  150. this.checkAll = false
  151. console.log(url, item)
  152. getAction(url, item).then((res) => {
  153. if (res.success) {
  154. let arrList = []
  155. this.treeData = res.result.map(item => {
  156. return {
  157. title: item.projectName,
  158. key: item.projectId + '-',
  159. children: item.userAllocationList.map(i => {
  160. return {
  161. title: i.authName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + (i.userName ? i.userName : '管理员'),
  162. key: i.accountId
  163. }
  164. })
  165. }
  166. }
  167. )
  168. }
  169. console.log(res)
  170. })
  171. },
  172. },
  173. computed: {},
  174. }
  175. </script>