customColumn.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  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. this.mylistNum = newValue
  89. },
  90. immediate: true
  91. // deep: true
  92. }
  93. },
  94. methods: {
  95. //li展示里的关闭按钮 删除当前被选中的这一个列
  96. deleteCol(item, index) {
  97. this.mylistNum = this.mylistNum.filter((item1, num) => {
  98. return num != index
  99. })
  100. },
  101. handleDragStart(e, item) {
  102. this.dragging = item
  103. },
  104. handleDragEnd(e, item) {
  105. this.dragging = null
  106. },
  107. //首先把div变成可以放置的元素,即重写dragenter/dragover
  108. handleDragOver(e) {
  109. e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
  110. },
  111. handleDragEnter(e, item) {
  112. e.dataTransfer.effectAllowed = 'move' //为需要移动的元素设置dragstart事件
  113. if (item === this.dragging) {
  114. return
  115. }
  116. const newItems = [...this.mylistNum]
  117. const src = newItems.findIndex(v => v.dataIndex === this.dragging)
  118. const dst = newItems.findIndex(v => v.dataIndex === item)
  119. newItems.splice(dst, 0, ...newItems.splice(src, 1))
  120. this.mylistNum = newItems
  121. },
  122. //弹出框确定
  123. handleOk(e) {
  124. this.loading = false
  125. this.visibleOk = false
  126. this.$emit('closeCustomColumn', false)
  127. this.$emit('changeColumn', this.mylistNum)
  128. },
  129. //取消按钮
  130. handleCancel() {
  131. this.visibleOk = false
  132. this.$emit('closeCustomColumn', false)
  133. },
  134. //清空全部
  135. clearAllList() {
  136. this.mylistNum = [...this.fiexColumn]
  137. },
  138. //从自定义列拿选择的项
  139. getshowlist(val) {
  140. var arr = []
  141. // console.log(val)
  142. if (val.length) {
  143. if (val.flag) {
  144. let newArr = val.arr
  145. newVal.map((item, index) => {
  146. // if(JSON.stringify(this.listNum).indexOf(JSON.stringify(item))==-1){
  147. // this.listNum.push(item); // 进行动态的操作
  148. // }
  149. var result = this.listNum.some(items => {
  150. if (items.dataIndex == item.dataIndex) {
  151. return true
  152. }
  153. })
  154. // console.log(result)
  155. if (result) {
  156. newArr.splice(index, 1)
  157. }
  158. })
  159. this.mylistNum = [...this.mylistNum, ...newArr]
  160. } else {
  161. //取消全选 清楚listNum中的val里的值
  162. val.arr.map((item, index) => {
  163. var result = this.mylistNum.some(items => {
  164. if (items.dataIndex == item.dataIndex) {
  165. return true
  166. }
  167. })
  168. // console.log(result)
  169. if (result) {
  170. this.mylistNum.splice(index, 1)
  171. }
  172. })
  173. }
  174. } else {
  175. arr = this.mylistNum.filter((item, index) => {
  176. return item.dataIndex == val.dataIndex
  177. })
  178. }
  179. if (arr.length) {
  180. var index
  181. this.mylistNum.map((item, ind) => {
  182. if (item.dataIndex == val.dataIndex) {
  183. index = ind
  184. }
  185. })
  186. this.mylistNum.splice(index, 1)
  187. } else {
  188. this.mylistNum.push(val)
  189. }
  190. }
  191. },
  192. mounted() {
  193. }
  194. }
  195. </script>
  196. <style lang="scss" scoped>
  197. .addlist {
  198. float: left;
  199. width: 70%;
  200. border: 1px solid #eee;
  201. .selectionList {
  202. padding: 10px 15px;
  203. height: 450px;
  204. overflow: auto;
  205. .leibie {
  206. .leiName {
  207. font-size: 26px;
  208. text-align: left;
  209. }
  210. }
  211. .jutixiang {
  212. display: inline-block;
  213. width: 32%;
  214. box-sizing: border-box;
  215. padding: 10px 3px;
  216. }
  217. }
  218. }
  219. .listNum {
  220. float: right;
  221. width: 28%;
  222. border: 1px solid #eee;
  223. position: relative;
  224. }
  225. .zhuti {
  226. margin-top: 15px;
  227. overflow: hidden;
  228. p {
  229. height: 40px;
  230. line-height: 20px;
  231. padding: 10px 15px;
  232. background: rgb(249, 250, 253);
  233. border-bottom: 1px solid #eee;
  234. }
  235. #btn {
  236. position: absolute;
  237. right: 0;
  238. top: 5px;
  239. }
  240. .selectlist {
  241. width: 100%;
  242. list-style: none;
  243. margin: 0;
  244. height: 450px;
  245. padding: 0 15px 10px;
  246. overflow: auto;
  247. li {
  248. width: 100%;
  249. padding: 5px 8px;
  250. margin: 6px 0;
  251. border-radius: 10px;
  252. background: rgb(248, 248, 248);
  253. height: 32px;
  254. position: relative;
  255. span {
  256. width: 80%;
  257. height: 100%;
  258. display: inline-block;
  259. margin: 0 10px;
  260. // overflow:hidden;
  261. // text-overflow:ellipsis;
  262. // white-space: nowrap;
  263. }
  264. .listText {
  265. position: absolute;
  266. top: 2;
  267. left: 10;
  268. width: 60%;
  269. overflow: hidden;
  270. white-space: nowrap;
  271. text-overflow: ellipsis;
  272. }
  273. #closeStyle {
  274. position: absolute;
  275. top: 9px;
  276. right: 7px;
  277. }
  278. }
  279. }
  280. }
  281. </style>