351 lines
8.2 KiB
Vue
351 lines
8.2 KiB
Vue
<template>
|
|
<el-tooltip class="item" effect="dark" content="列配置" placement="top">
|
|
<el-popover
|
|
placement="bottom"
|
|
title=""
|
|
trigger="manual"
|
|
v-model="columnconfigvisible"
|
|
>
|
|
<el-button
|
|
slot="reference"
|
|
icon="iconfont icon-liepeizhi"
|
|
size="small"
|
|
class="btn"
|
|
@click="columnconfigClick"
|
|
></el-button>
|
|
<div class="column">
|
|
<!-- <el-dialog :visible.sync="dialogVisible" width="50%" center :before-close="close" class="dialog"> -->
|
|
<div class="title">
|
|
<span class="titleTop">列配置</span>
|
|
<el-checkbox v-model="checkAll" @change="handleCheckAllChange">{{
|
|
checkAll ? "取消全选" : "全选"
|
|
}}</el-checkbox>
|
|
</div>
|
|
|
|
<div class="columnConfig">
|
|
<div class="left">
|
|
<el-checkbox-group
|
|
v-model="checkedColumnsCld"
|
|
@change="handleCheckedList"
|
|
>
|
|
<div class="itembox">
|
|
<div class="item" v-for="item in columnOptions" :key="item.id">
|
|
<el-checkbox :label="item.label" :disabled="item.disabled">{{
|
|
item.label
|
|
}}</el-checkbox>
|
|
</div>
|
|
</div>
|
|
</el-checkbox-group>
|
|
</div>
|
|
<div class="right">
|
|
<vuedraggable
|
|
:scroll="true"
|
|
animation="300"
|
|
v-model="newcolumnOptions"
|
|
@end="end"
|
|
:move="onMove"
|
|
filter=".holdings"
|
|
>
|
|
<transition-group>
|
|
<div
|
|
v-for="(field, index) in newcolumnOptions"
|
|
:key="index"
|
|
style="margin: 10px"
|
|
:class="field.disabled ? 'holdings' : 'canDragon'"
|
|
handle=".canDragon"
|
|
>
|
|
<i class="iconfont icontuozhuai" v-if="!field.disabled"></i>
|
|
{{ field.label }}
|
|
</div>
|
|
</transition-group>
|
|
</vuedraggable>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dialog-footer">
|
|
<div class="left">
|
|
<el-button
|
|
class="buttonLeft"
|
|
type="primary"
|
|
size="small"
|
|
plain
|
|
@click="recoverChecked"
|
|
>恢复默认</el-button
|
|
>
|
|
<el-button @click="cancel" size="small" class="buttonRight"
|
|
>取 消</el-button
|
|
>
|
|
</div>
|
|
<div class="right">
|
|
<el-button
|
|
type="primary"
|
|
@click="submit"
|
|
size="small"
|
|
class="buttonRight"
|
|
>保 存</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<!-- </el-dialog> -->
|
|
</div>
|
|
</el-popover>
|
|
</el-tooltip>
|
|
</template>
|
|
|
|
<script>
|
|
import vuedraggable from "vuedraggable";
|
|
|
|
export default {
|
|
components: { vuedraggable },
|
|
props: {
|
|
dialogVisible: {
|
|
default: () => {
|
|
return false;
|
|
},
|
|
},
|
|
columnconfigvisible: {
|
|
default: () => {
|
|
return false;
|
|
},
|
|
},
|
|
//列属性
|
|
tableLabel: {
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
//表头
|
|
columnOptions: {
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
activeName: "fieldsChosen",
|
|
isIndeterminate: true,
|
|
checkAll: false,
|
|
// checkedColumnsCld: this.columnOptions,
|
|
checkedColumnsCld: [],
|
|
newcolumnOptions: this.columnOptions, //拖拽数据
|
|
fieldsTemp: [],
|
|
};
|
|
},
|
|
|
|
watch: {
|
|
columnOptions(newval) {
|
|
this.newcolumnOptions = newval;
|
|
},
|
|
},
|
|
computed: {
|
|
//默认选中项(禁用项)
|
|
defaultCheckItem() {
|
|
let result = this.columnOptions.map((item) => item.label);
|
|
return result;
|
|
},
|
|
},
|
|
created() {
|
|
//默认选中项(禁用项)
|
|
this.checkedColumnsCld = this.defaultCheckItem;
|
|
//默认全选
|
|
this.checkAll = true;
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
//列配置
|
|
columnconfigClick() {
|
|
this.$emit("columnconfigClick");
|
|
},
|
|
submit() {
|
|
//更新表格列顺序
|
|
//更改后列顺序this.fieldList
|
|
this.fieldsTemp = []; //清空存放按指定顺序排列的fields数组
|
|
let n = 0;
|
|
this.newcolumnOptions.map((item) => {
|
|
for (let i = 0; i < this.tableLabel.length; i++) {
|
|
if (this.tableLabel[i].label == item.label) {
|
|
this.fieldsTemp[n++] = this.tableLabel[i];
|
|
}
|
|
}
|
|
});
|
|
// this.tableLabel = this.fieldsTemp;
|
|
//更新表格展示列
|
|
this.$emit("columnConfigSubmit", this.fieldsTemp);
|
|
},
|
|
//全选
|
|
handleCheckAllChange(val) {
|
|
//筛选出禁用项，反选时选中
|
|
let result = this.columnOptions.filter((item) => item.disabled);
|
|
this.newcolumnOptions = val ? this.columnOptions : result;
|
|
this.checkedColumnsCld = val
|
|
? this.columnOptions.map((item) => item.label)
|
|
: result.map((item) => item.label);
|
|
this.$emit("columnCfgAllchange", this.newcolumnOptions);
|
|
// this.isIndeterminate = false;
|
|
},
|
|
//单选
|
|
handleCheckedList(val) {
|
|
//根据选中id返回查到的数据
|
|
let result = this.columnOptions.filter((item) =>
|
|
val.includes(item.label)
|
|
);
|
|
console.log(result, "result-----------");
|
|
this.$emit("columnCfgCheck", result);
|
|
this.newcolumnOptions = result;
|
|
let checkedCount = result.length;
|
|
this.checkAll = checkedCount === this.columnOptions.length;
|
|
// this.isIndeterminate = checkedCount > 0 && checkedCount <script this.columnOptions.length;
|
|
},
|
|
//重置
|
|
recoverChecked() {
|
|
this.$emit("columnCfgRest");
|
|
this.newcolumnOptions = this.columnOptions;
|
|
this.checkedColumnsCld = this.defaultCheckItem;
|
|
},
|
|
//取消
|
|
cancel() {
|
|
this.$emit("columnConfigClose", false);
|
|
},
|
|
//关闭
|
|
close() {
|
|
this.$emit("columnConfigClose", false);
|
|
},
|
|
//拖拽end
|
|
end(e) {
|
|
console.log(this.newcolumnOptions, "666---------------");
|
|
},
|
|
//部分禁用
|
|
onMove(e) {
|
|
// console.log(e, 'onMove------------------', e.relatedContext.element);
|
|
if (e.relatedContext.element.disabled) return false;
|
|
return true;
|
|
},
|
|
},
|
|
deactivated() {
|
|
this.$emit("columnConfigClose", false);
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang='scss'>
|
|
$btn-color: #606266;
|
|
.btnbox {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 5px 0px 0;
|
|
|
|
.btn {
|
|
border: none;
|
|
font-size: 26px;
|
|
padding: 5px;
|
|
margin-left: 0;
|
|
background: #f1f2f5;
|
|
}
|
|
|
|
.el-button:focus,
|
|
.el-button:hover {
|
|
background: #e1e2e6;
|
|
color: $btn-color;
|
|
}
|
|
|
|
span {
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.checkboxgroup {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
::v-deep .el-checkbox {
|
|
width: 70px;
|
|
}
|
|
.content {
|
|
width: 98%;
|
|
margin: 0 auto 0px;
|
|
}
|
|
.column {
|
|
.dialog {
|
|
}
|
|
|
|
.title {
|
|
padding-bottom: 10px;
|
|
::v-deep .el-checkbox__input {
|
|
opacity: 0;
|
|
}
|
|
::v-deep .el-checkbox__label {
|
|
color: #409eff;
|
|
}
|
|
.titleTop {
|
|
}
|
|
}
|
|
|
|
::v-deep .el-dialog--center {
|
|
text-align: left;
|
|
}
|
|
|
|
::v-deep .el-dialog__body {
|
|
min-height: 300px;
|
|
}
|
|
|
|
::v-deep .el-dialog--center .el-dialog__body {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
::v-deep .el-dialog__footer {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.columnConfig {
|
|
max-width: 900px;
|
|
max-height: 40vh;
|
|
display: flex;
|
|
|
|
.left {
|
|
width: 65%;
|
|
|
|
.itembox {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
|
|
.item {
|
|
width: calc((100% - 10px) / 4);
|
|
|
|
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 35%;
|
|
overflow-y: auto;
|
|
min-height: 300px;
|
|
border-left: 1px solid #e5e5e5;
|
|
max-height: 40vh;
|
|
|
|
/* 宽度和高度 */
|
|
&::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
.holdings {
|
|
padding-left: 20px;
|
|
}
|
|
.canDragon {
|
|
cursor: move;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-top: 1px solid #e5e5e5;
|
|
padding-top: 10px;
|
|
}
|
|
}
|
|
</style> |