|
@@ -0,0 +1,300 @@
|
|
|
+<template>
|
|
|
+ <div class="customColumnKS">
|
|
|
+ <a-modal v-model="visibleOk" title="自定义列" on-ok="handleOk" @cancel="handleCancel" width="65%">
|
|
|
+ <template slot="footer">
|
|
|
+ <a-button key="back" @click="handleCancel">取消</a-button>
|
|
|
+ <a-button key="submit" type="primary" :loading="loading" @click="handleOk">应用</a-button>
|
|
|
+ </template>
|
|
|
+ <!-- <a-input-search placeholder="输入要添加的列的名称" style="width: 40%" enter-button @search="onSearch" /> -->
|
|
|
+ <div class="zhuti">
|
|
|
+ <div class="addlist">
|
|
|
+ <p>可添加的列</p>
|
|
|
+ <div class="selectionList">
|
|
|
+ <!-- v-for="(item,index) in addColumns" :key="index" -->
|
|
|
+ <!-- <div v-if="mediaType==1"> -->
|
|
|
+ <selectComponent
|
|
|
+ :showCol="mylistNum"
|
|
|
+ @getshowlist="getshowlist"
|
|
|
+ :fixedCol="fiexColumn"
|
|
|
+ :mediaType='mediaType'
|
|
|
+
|
|
|
+ />
|
|
|
+ <!-- </div> -->
|
|
|
+ <!-- <div v-if="mediaType==2">
|
|
|
+ <selectComponentKS
|
|
|
+ :showCol="mylistNum"
|
|
|
+ @getshowlist="getshowlist"
|
|
|
+ :fixedCol="fiexColumn"
|
|
|
+ :mediaType='mediaType'
|
|
|
+
|
|
|
+ />
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="listNum">
|
|
|
+ <p>已选{{mylistNum.length}}列</p>
|
|
|
+ <a-button id="btn" type="link" @click="clearAllList">清空全部</a-button>
|
|
|
+ <ul class="selectlist">
|
|
|
+ <!-- draggable="true"
|
|
|
+ @dragstart="handleDragStart($event, item.dataIndex)"
|
|
|
+ @dragover.prevent="handleDragOver($event, item.dataIndex)"
|
|
|
+ @dragenter="handleDragEnter($event, item.dataIndex)"
|
|
|
+ @dragend="handleDragEnd($event, item.dataIndex)" -->
|
|
|
+ <li v-for="(item,index) in mylistNum" :key="index">
|
|
|
+ <span v-if=" index < fiexColumn.length">
|
|
|
+ <a-icon type="lock" />
|
|
|
+ <span class="listText">{{item.title}}</span>
|
|
|
+ </span>
|
|
|
+ <span v-else-if=" index >=fiexColumn.length" >
|
|
|
+ <a-icon type="menu" style="color:#ccc" />
|
|
|
+ <span class="listText">{{item.title}}</span>
|
|
|
+ <a-icon
|
|
|
+ type="close"
|
|
|
+ @click="deleteCol(item,index)"
|
|
|
+ id="closeStyle"
|
|
|
+ style="fontSize:12px;"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import selectComponent from './selectComponent'
|
|
|
+// import selectComponentKS from './selectComponentKS'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ selectComponent,
|
|
|
+ // selectComponentKS,
|
|
|
+ },
|
|
|
+ props: ['visible', 'listNum', 'fiexColumn','mediaType'],
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dragging: null,
|
|
|
+ dataKey: 0,
|
|
|
+ visibleOk: false,
|
|
|
+ mylistNum: [],
|
|
|
+ loading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ visible(n, o) {
|
|
|
+ // console.log(n,o)
|
|
|
+ this.visibleOk = this.visible
|
|
|
+ },
|
|
|
+ listNum: {
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ console.log(newValue, oldValue)
|
|
|
+ this.mylistNum = newValue
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ // deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //li展示里的关闭按钮 删除当前被选中的这一个列
|
|
|
+ deleteCol(item, index) {
|
|
|
+ this.mylistNum = this.mylistNum.filter((item1, num) => {
|
|
|
+ return num != index
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleDragStart(e, item) {
|
|
|
+ this.dragging = item
|
|
|
+ },
|
|
|
+ handleDragEnd(e, item) {
|
|
|
+ this.dragging = null
|
|
|
+ },
|
|
|
+ //首先把div变成可以放置的元素,即重写dragenter/dragover
|
|
|
+ handleDragOver(e) {
|
|
|
+ e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
|
|
|
+ },
|
|
|
+ handleDragEnter(e, item) {
|
|
|
+ e.dataTransfer.effectAllowed = 'move' //为需要移动的元素设置dragstart事件
|
|
|
+ if (item === this.dragging) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const newItems = [...this.mylistNum]
|
|
|
+ console.log(newItems)
|
|
|
+ const src = newItems.findIndex(v => v.dataIndex === this.dragging)
|
|
|
+ const dst = newItems.findIndex(v => v.dataIndex === item)
|
|
|
+
|
|
|
+ newItems.splice(dst, 0, ...newItems.splice(src, 1))
|
|
|
+
|
|
|
+ this.mylistNum = newItems
|
|
|
+ },
|
|
|
+ //弹出框确定
|
|
|
+ handleOk(e) {
|
|
|
+ this.loading = false
|
|
|
+ this.visibleOk = false
|
|
|
+ this.$emit('closeCustomColumn', false)
|
|
|
+ this.$emit('changeColumn', this.mylistNum)
|
|
|
+ },
|
|
|
+ //取消按钮
|
|
|
+ handleCancel() {
|
|
|
+ this.visibleOk = false
|
|
|
+ this.$emit('closeCustomColumn', false)
|
|
|
+ },
|
|
|
+ //清空全部
|
|
|
+ clearAllList() {
|
|
|
+ this.mylistNum = [...this.fiexColumn]
|
|
|
+ },
|
|
|
+ //从自定义列拿选择的项
|
|
|
+ getshowlist(val) {
|
|
|
+ var arr = []
|
|
|
+
|
|
|
+ // console.log(val)
|
|
|
+ if (val.length) {
|
|
|
+ if (val.flag) {
|
|
|
+ let newArr = val.arr
|
|
|
+ newVal.map((item, index) => {
|
|
|
+ // if(JSON.stringify(this.listNum).indexOf(JSON.stringify(item))==-1){
|
|
|
+ // this.listNum.push(item); // 进行动态的操作
|
|
|
+ // }
|
|
|
+ var result = this.listNum.some(items => {
|
|
|
+ if (items.dataIndex == item.dataIndex) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // console.log(result)
|
|
|
+ if (result) {
|
|
|
+ newArr.splice(index, 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.mylistNum = [...this.mylistNum, ...newArr]
|
|
|
+ } else {
|
|
|
+ //取消全选 清楚listNum中的val里的值
|
|
|
+ val.arr.map((item, index) => {
|
|
|
+ var result = this.mylistNum.some(items => {
|
|
|
+ if (items.dataIndex == item.dataIndex) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // console.log(result)
|
|
|
+ if (result) {
|
|
|
+ this.mylistNum.splice(index, 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ arr = this.mylistNum.filter((item, index) => {
|
|
|
+ return item.dataIndex == val.dataIndex
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (arr.length) {
|
|
|
+ var index
|
|
|
+ this.mylistNum.map((item, ind) => {
|
|
|
+ if (item.dataIndex == val.dataIndex) {
|
|
|
+ index = ind
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(index)
|
|
|
+ this.mylistNum.splice(index, 1)
|
|
|
+ } else {
|
|
|
+ this.mylistNum.push(val)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+
|
|
|
+.addlist {
|
|
|
+ float: left;
|
|
|
+ width: 70%;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ .selectionList {
|
|
|
+ padding: 10px 15px;
|
|
|
+ height: 450px;
|
|
|
+ overflow: auto;
|
|
|
+ .leibie {
|
|
|
+ .leiName {
|
|
|
+ font-size: 26px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .jutixiang {
|
|
|
+ display: inline-block;
|
|
|
+ width: 32%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.listNum {
|
|
|
+ float: right;
|
|
|
+ width: 28%;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.zhuti {
|
|
|
+ margin-top: 15px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ p {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 20px;
|
|
|
+ padding: 10px 15px;
|
|
|
+
|
|
|
+ background: rgb(249, 250, 253);
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ }
|
|
|
+ #btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 5px;
|
|
|
+ }
|
|
|
+ .selectlist {
|
|
|
+ width: 100%;
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ height: 450px;
|
|
|
+ padding: 0 15px 10px;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ li {
|
|
|
+ width: 100%;
|
|
|
+ padding: 5px 8px;
|
|
|
+ margin: 6px 0;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: rgb(248, 248, 248);
|
|
|
+ height: 32px;
|
|
|
+ position: relative;
|
|
|
+ span {
|
|
|
+ width: 80%;
|
|
|
+ height: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 10px;
|
|
|
+ // overflow:hidden;
|
|
|
+ // text-overflow:ellipsis;
|
|
|
+ // white-space: nowrap;
|
|
|
+ }
|
|
|
+ .listText {
|
|
|
+ position: absolute;
|
|
|
+ top: 2;
|
|
|
+ left: 10;
|
|
|
+ width: 60%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ #closeStyle {
|
|
|
+ position: absolute;
|
|
|
+ top: 9px;
|
|
|
+ right: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|