customColumn.vue 7.8 KB

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