|
|
<template>
|
|
|
<a-modal
|
|
|
:title="type === 'table' ? '表头自定义' : '查询条件自定义'"
|
|
|
:width="1200"
|
|
|
:visible="visible"
|
|
|
:confirmLoading="confirmLoading"
|
|
|
:maskClosable="false"
|
|
|
@ok="handleSubmit"
|
|
|
@cancel="handleCancel">
|
|
|
<a-spin :spinning="formLoading">
|
|
|
<div class="basic-from basic-from-show">
|
|
|
<div class="title">
|
|
|
<span class="left"></span>
|
|
|
<span class="right"></span>
|
|
|
<span class="tip">已显示数据列，可<b>拖动</b>调整显示顺序</span>
|
|
|
</div>
|
|
|
<div class="label-box">
|
|
|
<draggable v-model="fromLabel" animation="300" @start="onStart" @end="emitFromChange">
|
|
|
<transition-group>
|
|
|
<template v-for="(item, index) in fromLabel">
|
|
|
<div class="label" @click="handleAddSort(item)" :key="index" v-if="!item.noDraggable">
|
|
|
<span>{{ item.title }}</span>
|
|
|
<i class="iconfont icon-guanbi" @click.stop="removeFrom(item, index)"></i>
|
|
|
</div>
|
|
|
</template>
|
|
|
</transition-group>
|
|
|
</draggable>
|
|
|
<div class="no-data" v-if="fromLabel.length == 0">
|
|
|
<i class="iconfont icon-wushuju"></i>
|
|
|
<div class="no-text">请添加数据列</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="type == 'table'" class="basic-from basic-from-show">
|
|
|
<div class="title">
|
|
|
<span class="left"></span>
|
|
|
<span class="right"></span>
|
|
|
<span class="tip">按顺序排序，可<b>拖动</b>调整排序顺序 <template v-if="maxNum != 0"></template></span>
|
|
|
</div>
|
|
|
<div class="label-box-sort">
|
|
|
<draggable v-model="sortList" animation="300" @start="onStart" @end="emitFromChange">
|
|
|
<transition-group>
|
|
|
<template v-for="(item, index) in sortList">
|
|
|
<div class="label" style="background-color: #d1bc55;" :key="index" v-if="!item.noDraggable">
|
|
|
<span>{{ item.title }}</span>
|
|
|
<span class="sort">
|
|
|
<a-icon
|
|
|
:style="{ color: item.descSort == false ? '#409eff' : '' }"
|
|
|
@click="handleSort(item, index, false)"
|
|
|
type="caret-up" />
|
|
|
<a-icon
|
|
|
:style="{ color: item.descSort ? '#409eff' : '' }"
|
|
|
@click="handleSort(item, index, true)"
|
|
|
type="caret-down" />
|
|
|
</span>
|
|
|
<i class="iconfont icon-guanbi" @click="removeFromSort(item, index)"></i>
|
|
|
</div>
|
|
|
</template>
|
|
|
</transition-group>
|
|
|
</draggable>
|
|
|
<div class="no-data" v-if="sortList.length == 0">
|
|
|
<i class="iconfont icon-wushuju"></i>
|
|
|
<div class="no-text">请添加数据列</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="basic-from basic-from-hide">
|
|
|
<div class="title">
|
|
|
<span class="left"></span>
|
|
|
<span class="right"></span>
|
|
|
<span class="tip">未选择数据列</span>
|
|
|
</div>
|
|
|
<div class="label-box all-label">
|
|
|
<div class="label" v-for="(item, index) in fromAllLabel" :key="index">
|
|
|
<span>{{ item.title }}</span>
|
|
|
<i class="iconfont icon-zengjia" @click="addFrom(item, index)"></i>
|
|
|
</div>
|
|
|
<div class="no-data" v-if="fromAllLabel.length == 0">
|
|
|
<i class="iconfont icon-meiyoudingdan"></i>
|
|
|
<div class="no-text">没有更多数据了</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a-spin>
|
|
|
</a-modal>
|
|
|
</template>
|
|
|
<script>
|
|
|
import draggable from 'vuedraggable'
|
|
|
export default {
|
|
|
props: {
|
|
|
formData: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return []
|
|
|
}
|
|
|
},
|
|
|
formAllData: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return []
|
|
|
}
|
|
|
},
|
|
|
sortLabelList: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return []
|
|
|
}
|
|
|
},
|
|
|
firstSort: {
|
|
|
type: Object,
|
|
|
default: () => {
|
|
|
return {}
|
|
|
}
|
|
|
},
|
|
|
type: {
|
|
|
type: String,
|
|
|
default: ''
|
|
|
},
|
|
|
maxNum: {
|
|
|
type: Number,
|
|
|
default: 0
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
visible: false,
|
|
|
confirmLoading: false,
|
|
|
formLoading: true,
|
|
|
fromLabel: [],
|
|
|
sortList: [],
|
|
|
fromAllLabel: []
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
draggable
|
|
|
},
|
|
|
watch: {},
|
|
|
mounted() {
|
|
|
this.fromLabel = JSON.parse(JSON.stringify(this.formData))
|
|
|
this.fromAllLabel = JSON.parse(JSON.stringify(this.formAllData))
|
|
|
},
|
|
|
methods: {
|
|
|
handleSort(item, index, flag) {
|
|
|
item.descSort = flag
|
|
|
this.$set(this.sortList, index, item)
|
|
|
},
|
|
|
handleAddSort(item) {
|
|
|
console.log(item)
|
|
|
const arr = []
|
|
|
this.sortList.forEach(ite => {
|
|
|
if (ite.field === item.field) {
|
|
|
arr.push(1)
|
|
|
}
|
|
|
})
|
|
|
if (arr.length === 0) {
|
|
|
if (item.field !== 'bookstatus' && item.field !== 'statuslogs') {
|
|
|
item.descSort = true
|
|
|
this.sortList.push(item)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
open() {
|
|
|
this.visible = true
|
|
|
this.formLoading = false
|
|
|
if (this.sortLabelList.length > 0) {
|
|
|
const arr = []
|
|
|
this.sortLabelList.forEach(item => {
|
|
|
this.fromLabel.forEach(ite => {
|
|
|
if (ite.field === item.sortField) {
|
|
|
ite.descSort = item.descSort
|
|
|
arr.push(ite)
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
this.sortList = arr
|
|
|
} else {
|
|
|
this.sortList = []
|
|
|
const arr = []
|
|
|
this.fromLabel.forEach(ite => {
|
|
|
if (ite.field === this.firstSort.label) {
|
|
|
ite.descSort = this.firstSort.type === 'desc'
|
|
|
arr.push(ite)
|
|
|
}
|
|
|
})
|
|
|
this.sortList = arr
|
|
|
}
|
|
|
},
|
|
|
handleSubmit() {
|
|
|
this.confirmLoading = true
|
|
|
setTimeout(() => {
|
|
|
this.confirmLoading = false
|
|
|
this.$emit('ok', this.fromLabel)
|
|
|
this.$emit('sortList', this.sortList)
|
|
|
}, 1000)
|
|
|
},
|
|
|
handleCancel() {
|
|
|
this.visible = false
|
|
|
},
|
|
|
addFrom(item, index) {
|
|
|
if (this.maxNum !== 0 && this.fromLabel.length > (this.maxNum + 1)) {
|
|
|
this.$message.error(`最多选择${this.maxNum}条`)
|
|
|
return false
|
|
|
}
|
|
|
if (this.type === 'from') {
|
|
|
item.field = item.label.toLowerCase()
|
|
|
}
|
|
|
this.fromLabel.push(item)
|
|
|
this.fromAllLabel.splice(index, 1)
|
|
|
},
|
|
|
removeFrom(item, index) {
|
|
|
this.fromAllLabel.push(item)
|
|
|
this.fromLabel.splice(index, 1)
|
|
|
},
|
|
|
removeFromSort(item, index) {
|
|
|
this.sortList.splice(index, 1)
|
|
|
},
|
|
|
emitFromChange() {
|
|
|
console.log('拖动结束', this.fromLabel)
|
|
|
},
|
|
|
onStart() { }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.sort {
|
|
|
display: inline-block;
|
|
|
padding-top: 3px;
|
|
|
margin: 0 5px;
|
|
|
|
|
|
i {
|
|
|
height: 12px !important;
|
|
|
cursor: pointer;
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.basic-from {
|
|
|
margin-bottom: 5px;
|
|
|
|
|
|
.title {
|
|
|
height: 50px;
|
|
|
line-height: 40px;
|
|
|
|
|
|
// border-bottom: 1px solid #eee;
|
|
|
.left {
|
|
|
display: none;
|
|
|
/*display: inline-block;*/
|
|
|
width: 4px;
|
|
|
height: 24px;
|
|
|
background: #409eff;
|
|
|
margin-top: 10px;
|
|
|
margin-right: 10px;
|
|
|
vertical-align: top;
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
vertical-align: top;
|
|
|
font-weight: 600;
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
|
|
|
.tip {
|
|
|
font-size: 13px;
|
|
|
color: #999;
|
|
|
margin-top: 2px;
|
|
|
margin-left: 10px;
|
|
|
display: inline-block;
|
|
|
vertical-align: top;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.label-box {
|
|
|
padding-left: 10px;
|
|
|
|
|
|
// max-height: 300px;
|
|
|
// overflow: auto;
|
|
|
.label {
|
|
|
display: inline-block;
|
|
|
padding-left: 14px;
|
|
|
height: 32px;
|
|
|
line-height: 30px;
|
|
|
border-radius: 4px;
|
|
|
border: 1px dashed #ccc;
|
|
|
margin-right: 10px;
|
|
|
margin-bottom: 10px;
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:hover {
|
|
|
box-shadow: 0 0 6px #ccc;
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
vertical-align: top;
|
|
|
max-width: 150px;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
i {
|
|
|
display: inline-block;
|
|
|
vertical-align: top;
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
width: 25px;
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
margin-left: 8px;
|
|
|
margin-right: 4px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.no-data {
|
|
|
text-align: center;
|
|
|
color: #999;
|
|
|
|
|
|
.iconfont {
|
|
|
font-size: 60px;
|
|
|
line-height: 90px;
|
|
|
}
|
|
|
|
|
|
.no-text {
|
|
|
font-size: 16px;
|
|
|
line-height: 32px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.label-box-sort {
|
|
|
padding-left: 10px;
|
|
|
|
|
|
// max-height: 300px;
|
|
|
// overflow: auto;
|
|
|
.label {
|
|
|
display: inline-block;
|
|
|
padding-left: 14px;
|
|
|
height: 32px;
|
|
|
line-height: 30px;
|
|
|
border-radius: 4px;
|
|
|
border: 1px dashed #ccc;
|
|
|
margin-right: 10px;
|
|
|
margin-bottom: 10px;
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:hover {
|
|
|
box-shadow: 0 0 6px #ccc;
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
vertical-align: top;
|
|
|
max-width: 150px;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.no-data {
|
|
|
text-align: center;
|
|
|
color: #999;
|
|
|
|
|
|
.iconfont {
|
|
|
font-size: 60px;
|
|
|
line-height: 90px;
|
|
|
}
|
|
|
|
|
|
.no-text {
|
|
|
font-size: 16px;
|
|
|
line-height: 32px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.all-label {
|
|
|
.label {
|
|
|
border: 1px solid #f4f4f4;
|
|
|
background: #f4f4f4;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.basic-from-show {
|
|
|
padding-bottom: 20px;
|
|
|
border-bottom: 1px solid #eee;
|
|
|
|
|
|
.tip {
|
|
|
b {
|
|
|
color: #bc846d;
|
|
|
margin: 0 5px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.label {
|
|
|
background: @primary-color;
|
|
|
color: #fff;
|
|
|
border: none !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.basic-from-hide {
|
|
|
.label {
|
|
|
border: 1px solid @primary-color !important;
|
|
|
background: #f9fafe !important;
|
|
|
|
|
|
span {
|
|
|
color: @primary-color;
|
|
|
}
|
|
|
|
|
|
i {
|
|
|
color: @primary-color;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|