You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
288 lines
7.8 KiB
288 lines
7.8 KiB
<template> |
|
<el-drawer :model-value="drawerShow" @close="close" title="编辑列表" size="40%"> |
|
<!-- <el-checkbox label="12" /> |
|
<el-checkbox label="2" /> --> |
|
<el-table :data="columnList" style="width: 100%; height: 700px" border ref="tableEl1"> |
|
<el-table-column v-for="column in headtop" :key="column.prop" :prop="column.prop" :label="column.label" |
|
:width="column.width" flexible> |
|
<template #header> |
|
<el-text class="mx-1">{{ column.label }}</el-text> |
|
</template> |
|
<template #default="scope"> |
|
<el-text class="mx-1" v-if="column.prop == 'label'">{{ scope.row[column.prop] }}</el-text> |
|
<el-checkbox-group v-else-if="column.label == '隐藏'" v-model="checkList"> |
|
<el-checkbox :key="scope.row['label']" :label="scope.row['label']" true-label="" false-label="" |
|
@change="checkboxitem(1)"> |
|
<!-- 用于隐藏文字 --> |
|
<template #default="scope"> |
|
<!-- {{ scope }} --> |
|
</template> |
|
</el-checkbox> |
|
</el-checkbox-group> |
|
<el-checkbox-group v-else-if="column.label == '冻结'" v-model="flexList"> |
|
<el-checkbox :key="scope.row['label']" :label="scope.row['label']" true-label="" false-label="" |
|
@change="checkboxitem(2)"> |
|
<!-- 用于隐藏文字 --> |
|
<template #default="scope"> |
|
<!-- {{ scope }} --> |
|
</template> |
|
</el-checkbox> |
|
</el-checkbox-group> |
|
<el-checkbox-group v-else-if="column.label == '排序'" v-model="sortlist"> |
|
<el-checkbox :key="scope.row['label']" :label="scope.row['label']" true-label="" false-label="" |
|
@change="checkboxitem(3)"> |
|
<!-- 用于隐藏文字 --> |
|
<template #default="scope"> |
|
<!-- {{ scope }} --> |
|
</template> |
|
</el-checkbox> |
|
</el-checkbox-group> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<!-- </el-checkbox-group> --> |
|
<div></div> |
|
</el-drawer> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { ref, watchEffect, onMounted, watch, inject, nextTick } from 'vue'; |
|
import type { PropType } from 'vue'; |
|
const functions = inject('functions') as any; |
|
import Sortable from "sortablejs"; |
|
interface TableColumnType { |
|
/** 表格列的key */ |
|
prop: string; |
|
/** 表格列的名字 */ |
|
label: string; |
|
/** |
|
* 对应列表头的类型 |
|
* 0:直接显示为单选，prop，label，全部传空 |
|
* 1:普通表格，正常显示 |
|
* 2:带输入框表格 |
|
* 3:带下拉框表格 |
|
* 4:带日期选择器列 |
|
* 5:带日期时间选择器 |
|
* 6:操作栏，prop，label，全部传空 |
|
* 7:测试 |
|
*/ |
|
type: number | string; |
|
/** 用于接受表头的值 */ |
|
values: number | string; |
|
/** 表头宽度 number string undefined */ |
|
width: number | string | undefined; |
|
/** 下拉框可选项 */ |
|
checkarr?: { |
|
value: string | number; |
|
label: string | number; |
|
}[]; |
|
/** 是否固定表头 |
|
* true false |
|
* left right |
|
*/ |
|
fixed: boolean | string; |
|
/** 是否统计 |
|
* true false 或者直接不写该参数 |
|
*/ |
|
isshowSummary?: boolean; |
|
/** 是否排序 |
|
* true false 或者直接不写该参数 |
|
*/ |
|
sortable?: boolean; |
|
/** 是否显示列 |
|
* true false 或者直接不写该参数 |
|
*/ |
|
head?: boolean; |
|
} |
|
interface headtoptype { |
|
prop: string; |
|
label: string; |
|
width?: string | number; |
|
} |
|
const checkList = ref<(string | number)[]>([]); |
|
const flexList = ref<(string | number)[]>([]); |
|
const sortlist = ref<(string | number)[]>([]); |
|
const tableEl1 = ref(null); |
|
|
|
|
|
if (functions.getStorage(window.location.pathname + 'checkList')) { |
|
checkList.value = functions.getStorage(window.location.pathname + 'checkList'); |
|
console.log(checkList.value); |
|
} |
|
if (functions.getStorage(window.location.pathname + 'flexList')) { |
|
flexList.value = functions.getStorage(window.location.pathname + 'flexList'); |
|
console.log(flexList.value); |
|
} |
|
if (functions.getStorage(window.location.pathname + 'sortlist')) { |
|
sortlist.value = functions.getStorage(window.location.pathname + 'sortlist'); |
|
console.log(sortlist.value); |
|
} |
|
let emit = defineEmits(['setcolum', 'closce']); |
|
let props = defineProps({ |
|
columnList: { |
|
type: Array as PropType<TableColumnType[]>, |
|
required: true, |
|
}, |
|
drawerShow: { |
|
type: Boolean as PropType<boolean>, |
|
required: true, |
|
}, |
|
}); |
|
|
|
onMounted(() => { |
|
nextTick(() => { |
|
console.log('onMounted') |
|
initSortable(); |
|
}); |
|
}) |
|
|
|
|
|
watch( |
|
() => props.drawerShow, |
|
(val) => { |
|
if (val) |
|
nextTick(() => { |
|
initSortable(); |
|
console.log('watch') |
|
}); |
|
} |
|
); |
|
|
|
const initSortable = () => { |
|
if (tableEl1.value && tableEl1.value.$el) { |
|
const el1 = tableEl1.value.$el.querySelector('.el-table__body tbody') |
|
console.log(el1) |
|
Sortable.create(el1, { |
|
// handle: '.move-icon', |
|
animation: 150, // 动画 |
|
onEnd: ({ newIndex, oldIndex }) => { |
|
console.log(newIndex, oldIndex) |
|
const arr = props.columnList |
|
const currRow = arr.splice(oldIndex, 1)[0] |
|
arr.splice(newIndex, 0, currRow) |
|
// nextTick(() => { |
|
// emit('setcolum', arr, 4); |
|
// }) |
|
} |
|
}) |
|
} |
|
|
|
} |
|
|
|
function close() { |
|
emit('closce', false); |
|
} |
|
// watch(checkList, post => { |
|
// console.log(post, '++++++++'); |
|
// props.columnList.map(item => { |
|
// if (post.length == 0) { |
|
// item.head = false; |
|
// } |
|
// (post as []).map(ite => { |
|
// // console.log(item.label,ite,'-+-+-+-+-+-+-+-+-+-+-+-+') |
|
// if (ite == item.label) { |
|
// item.head = true; |
|
// } else { |
|
// item.head = false; |
|
// } |
|
// }); |
|
// return item; |
|
// }); |
|
// emit('setcolum', props.columnList,post); |
|
// }); |
|
// watchEffect(() => { |
|
// console.log(checkList.value); |
|
// props.columnList.map(item => { |
|
// if (checkList.value.length == 0) { |
|
// item.head = false; |
|
// } |
|
// (checkList.value as []).map(ite => { |
|
// // console.log(item.label,ite,'-+-+-+-+-+-+-+-+-+-+-+-+') |
|
// if (ite == item.label) { |
|
// item.head = true; |
|
// } else { |
|
// item.head = false; |
|
// } |
|
// }); |
|
// return item; |
|
// }); |
|
// emit('setcolum', props.columnList); |
|
// }); |
|
|
|
// watchEffect(()=>{ |
|
// props.columnList.map(item => { |
|
// if(item.head){ |
|
// (checkList.value as string[]).push(item.label) |
|
// } |
|
// }); |
|
// }) |
|
function checkboxitem(type: number) { |
|
if (type == 1) { |
|
props.columnList.map(item => { |
|
item.head = false; |
|
}); |
|
(checkList.value as []).map(ite => { |
|
props.columnList.map(item => { |
|
if (ite == item.label) { |
|
item.head = true; |
|
} |
|
}); |
|
}); |
|
emit('setcolum', props.columnList, checkList.value, type); |
|
} else if (type == 2) { |
|
props.columnList.map(item => { |
|
item.fixed = false; |
|
}); |
|
(flexList.value as []).map(ite => { |
|
props.columnList.map(item => { |
|
if (ite == item.label) { |
|
if (item.type == 6) { |
|
item.fixed = 'right'; |
|
} else { |
|
item.fixed = true; |
|
} |
|
} |
|
}); |
|
}); |
|
emit('setcolum', props.columnList, flexList.value, type); |
|
} else if (type == 3) { |
|
props.columnList.map(item => { |
|
item.sortable = false; |
|
}); |
|
(sortlist.value as []).map(ite => { |
|
props.columnList.map(item => { |
|
if (ite == item.label) { |
|
item.sortable = true; |
|
} |
|
}); |
|
}); |
|
emit('setcolum', props.columnList, sortlist.value, type); |
|
} |
|
} |
|
let headtop = ref<headtoptype[]>([ |
|
{ |
|
prop: 'label', |
|
label: '列名', |
|
width: '', |
|
}, |
|
{ |
|
prop: '', |
|
label: '隐藏', |
|
// width:'150' |
|
}, |
|
{ |
|
prop: '', |
|
label: '冻结', |
|
// width:'150' |
|
}, |
|
{ |
|
prop: '', |
|
label: '排序', |
|
// width:'150' |
|
}, |
|
]); |
|
|
|
setTimeout(() => { |
|
}, 2000); |
|
</script> |
|
<style lang="scss"></style>
|
|
|