customColumn.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <template>
  2. <div class="customColumn">
  3. <a-modal v-model="visibleOk" title="自定义列" on-ok="handleOk" @cancel="handleCancel" width="65%">
  4. <template slot="footer">
  5. <a-button key="back" @click="handleCancel">取消</a-button>
  6. <a-button key="submit" type="primary" :loading="loading" @click="handleOk">应用</a-button>
  7. </template>
  8. <!-- <a-input-search placeholder="输入要添加的列的名称" style="width: 40%" enter-button @search="onSearch" /> -->
  9. <div class="zhuti">
  10. <div class="addlist">
  11. <p>可添加的列</p>
  12. <div class="selectionList">
  13. <!-- v-for="(item,index) in addColumns" :key="index" -->
  14. <selectComponent
  15. :showCol="mylistNum"
  16. @getshowlist="getshowlist"
  17. :fixedCol="fiexColumn"
  18. />
  19. </div>
  20. </div>
  21. <div class="listNum">
  22. <p>已选{{mylistNum.length}}列</p>
  23. <a-button id="btn" type="link" @click="clearAllList">清空全部</a-button>
  24. <ul class="selectlist">
  25. <!-- draggable="true"
  26. @dragstart="handleDragStart($event, item.dataIndex)"
  27. @dragover.prevent="handleDragOver($event, item.dataIndex)"
  28. @dragenter="handleDragEnter($event, item.dataIndex)"
  29. @dragend="handleDragEnd($event, item.dataIndex)" -->
  30. <li v-for="(item,index) in mylistNum" :key="index">
  31. <span v-if=" index < fiexColumn.length">
  32. <a-icon type="lock" />
  33. <span class="listText">{{item.title}}</span>
  34. </span>
  35. <span v-else-if=" index >=fiexColumn.length" >
  36. <a-icon type="menu" style="color:#ccc" />
  37. <span class="listText">{{item.title}}</span>
  38. <a-icon
  39. type="close"
  40. @click="deleteCol(item,index)"
  41. id="closeStyle"
  42. style="fontSize:12px;"
  43. />
  44. </span>
  45. </li>
  46. </ul>
  47. </div>
  48. </div>
  49. </a-modal>
  50. </div>
  51. </template>
  52. <script>
  53. import selectComponent from './selectComponent'
  54. export default {
  55. components: {
  56. selectComponent
  57. },
  58. props: ['visible', 'listNum', 'fiexColumn'],
  59. data() {
  60. return {
  61. dragging: null,
  62. dataKey: 0,
  63. visibleOk: false,
  64. mylistNum: [],
  65. loading: false
  66. }
  67. },
  68. watch: {
  69. visible(n, o) {
  70. // console.log(n,o)
  71. this.visibleOk = this.visible
  72. },
  73. listNum: {
  74. handler(newValue, oldValue) {
  75. this.mylistNum = newValue
  76. },
  77. immediate: true
  78. // deep: true
  79. }
  80. },
  81. methods: {
  82. handleDragStart(e, item) {
  83. this.dragging = item
  84. },
  85. handleDragEnd(e, item) {
  86. this.dragging = null
  87. },
  88. //首先把div变成可以放置的元素,即重写dragenter/dragover
  89. handleDragOver(e) {
  90. e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
  91. },
  92. handleDragEnter(e, item) {
  93. e.dataTransfer.effectAllowed = 'move' //为需要移动的元素设置dragstart事件
  94. if (item === this.dragging) {
  95. return
  96. }
  97. const newItems = [...this.mylistNum]
  98. console.log(newItems)
  99. const src = newItems.findIndex(v => v.dataIndex === this.dragging)
  100. const dst = newItems.findIndex(v => v.dataIndex === item)
  101. newItems.splice(dst, 0, ...newItems.splice(src, 1))
  102. this.mylistNum = newItems
  103. },
  104. //弹出框确定
  105. handleOk(e) {
  106. this.loading = false
  107. this.visibleOk = false
  108. this.$emit('closeCustomColumn', false)
  109. this.$emit('changeColumn', this.mylistNum)
  110. },
  111. //取消按钮
  112. handleCancel() {
  113. this.visibleOk = false
  114. this.$emit('closeCustomColumn', false)
  115. },
  116. //清空全部
  117. clearAllList() {
  118. this.mylistNum = [...this.fiexColumn]
  119. },
  120. //从自定义列拿选择的项
  121. getshowlist(val) {
  122. var arr = []
  123. // console.log(val)
  124. if (val.length) {
  125. if (val.flag) {
  126. let newArr = val.arr
  127. newVal.map((item, index) => {
  128. // if(JSON.stringify(this.listNum).indexOf(JSON.stringify(item))==-1){
  129. // this.listNum.push(item); // 进行动态的操作
  130. // }
  131. var result = this.listNum.some(items => {
  132. if (items.dataIndex == item.dataIndex) {
  133. return true
  134. }
  135. })
  136. // console.log(result)
  137. if (result) {
  138. newArr.splice(index, 1)
  139. }
  140. })
  141. this.mylistNum = [...this.mylistNum, ...newArr]
  142. } else {
  143. //取消全选 清楚listNum中的val里的值
  144. val.arr.map((item, index) => {
  145. var result = this.mylistNum.some(items => {
  146. if (items.dataIndex == item.dataIndex) {
  147. return true
  148. }
  149. })
  150. // console.log(result)
  151. if (result) {
  152. this.mylistNum.splice(index, 1)
  153. }
  154. })
  155. }
  156. } else {
  157. arr = this.mylistNum.filter((item, index) => {
  158. return item.dataIndex == val.dataIndex
  159. })
  160. }
  161. if (arr.length) {
  162. var index
  163. this.mylistNum.map((item, ind) => {
  164. if (item.dataIndex == val.dataIndex) {
  165. index = ind
  166. }
  167. })
  168. console.log(index)
  169. this.mylistNum.splice(index, 1)
  170. } else {
  171. this.mylistNum.push(val)
  172. }
  173. }
  174. },
  175. mounted() {}
  176. }
  177. </script>
  178. <style lang="scss" scoped>
  179. .addlist {
  180. float: left;
  181. width: 70%;
  182. border: 1px solid #eee;
  183. .selectionList {
  184. padding: 10px 15px;
  185. height: 450px;
  186. overflow: auto;
  187. .leibie {
  188. .leiName {
  189. font-size: 26px;
  190. text-align: left;
  191. }
  192. }
  193. .jutixiang {
  194. display: inline-block;
  195. width: 32%;
  196. box-sizing: border-box;
  197. padding: 10px 3px;
  198. }
  199. }
  200. }
  201. .listNum {
  202. float: right;
  203. width: 28%;
  204. border: 1px solid #eee;
  205. position: relative;
  206. }
  207. .zhuti {
  208. margin-top: 15px;
  209. overflow: hidden;
  210. p {
  211. height: 40px;
  212. line-height: 20px;
  213. padding: 10px 15px;
  214. background: rgb(249, 250, 253);
  215. border-bottom: 1px solid #eee;
  216. }
  217. #btn {
  218. position: absolute;
  219. right: 0;
  220. top: 5px;
  221. }
  222. .selectlist {
  223. width: 100%;
  224. list-style: none;
  225. margin: 0;
  226. height: 450px;
  227. padding: 0 15px 10px;
  228. overflow: auto;
  229. li {
  230. width: 100%;
  231. padding: 5px 8px;
  232. margin: 6px 0;
  233. border-radius: 10px;
  234. background: rgb(248, 248, 248);
  235. height: 32px;
  236. position: relative;
  237. span {
  238. width: 80%;
  239. height: 100%;
  240. display: inline-block;
  241. margin: 0 10px;
  242. // overflow:hidden;
  243. // text-overflow:ellipsis;
  244. // white-space: nowrap;
  245. }
  246. .listText {
  247. position: absolute;
  248. top: 2;
  249. left: 10;
  250. width: 60%;
  251. overflow: hidden;
  252. white-space: nowrap;
  253. text-overflow: ellipsis;
  254. }
  255. #closeStyle {
  256. position: absolute;
  257. top: 9px;
  258. right: 7px;
  259. }
  260. }
  261. }
  262. }
  263. </style>