123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300 |
- <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>
|