|
|
|
@ -2,17 +2,28 @@
|
|
|
|
|
<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> |
|
|
|
|
<el-table :data="col" style="width: 100%; height: 700px" border ref="tableEl1"> |
|
|
|
|
<el-table-column |
|
|
|
|
v-for="column in headtop" |
|
|
|
|
:key="column.label + 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)"> |
|
|
|
|
<el-checkbox |
|
|
|
|
:key="scope.row['label']" |
|
|
|
|
:label="scope.row['label']" |
|
|
|
|
true-label="" |
|
|
|
|
false-label="" |
|
|
|
|
@change="checkboxitem(1)" |
|
|
|
|
> |
|
|
|
|
<!-- 用于隐藏文字 --> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
<!-- {{ scope }} --> |
|
|
|
@ -20,8 +31,13 @@
|
|
|
|
|
</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)"> |
|
|
|
|
<el-checkbox |
|
|
|
|
:key="scope.row['label']" |
|
|
|
|
:label="scope.row['label']" |
|
|
|
|
true-label="" |
|
|
|
|
false-label="" |
|
|
|
|
@change="checkboxitem(2)" |
|
|
|
|
> |
|
|
|
|
<!-- 用于隐藏文字 --> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
<!-- {{ scope }} --> |
|
|
|
@ -29,8 +45,13 @@
|
|
|
|
|
</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)"> |
|
|
|
|
<el-checkbox |
|
|
|
|
:key="scope.row['label']" |
|
|
|
|
:label="scope.row['label']" |
|
|
|
|
true-label="" |
|
|
|
|
false-label="" |
|
|
|
|
@change="checkboxitem(3)" |
|
|
|
|
> |
|
|
|
|
<!-- 用于隐藏文字 --> |
|
|
|
|
<template #default="scope"> |
|
|
|
|
<!-- {{ scope }} --> |
|
|
|
@ -49,7 +70,7 @@
|
|
|
|
|
import { ref, watchEffect, onMounted, watch, inject, nextTick } from 'vue'; |
|
|
|
|
import type { PropType } from 'vue'; |
|
|
|
|
const functions = inject('functions') as any; |
|
|
|
|
import Sortable from "sortablejs"; |
|
|
|
|
import Sortable from 'sortablejs'; |
|
|
|
|
interface TableColumnType { |
|
|
|
|
/** 表格列的key */ |
|
|
|
|
prop: string; |
|
|
|
@ -104,7 +125,6 @@ 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); |
|
|
|
@ -129,45 +149,51 @@ let props = defineProps({
|
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const col = ref([...props.columnList]); |
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
for (let index = 0; index < props.columnList.length; index++) { |
|
|
|
|
const item = props.columnList[index]; |
|
|
|
|
|
|
|
|
|
item.fixed = |
|
|
|
|
item.fixed === true || item.fixed === 'right' || item.fixed === 'left' ? item.fixed : false; |
|
|
|
|
} |
|
|
|
|
nextTick(() => { |
|
|
|
|
console.log('onMounted') |
|
|
|
|
console.log('onMounted'); |
|
|
|
|
initSortable(); |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
watch( |
|
|
|
|
() => props.drawerShow, |
|
|
|
|
(val) => { |
|
|
|
|
val => { |
|
|
|
|
if (val) |
|
|
|
|
nextTick(() => { |
|
|
|
|
initSortable(); |
|
|
|
|
console.log('watch') |
|
|
|
|
console.log('watch'); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const initSortable = () => { |
|
|
|
|
if (tableEl1.value && tableEl1.value.$el) { |
|
|
|
|
const el1 = tableEl1.value.$el.querySelector('.el-table__body tbody') |
|
|
|
|
console.log(el1) |
|
|
|
|
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) |
|
|
|
|
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); |
|
|
|
@ -282,7 +308,6 @@ let headtop = ref<headtoptype[]>([
|
|
|
|
|
}, |
|
|
|
|
]); |
|
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
}, 2000); |
|
|
|
|
setTimeout(() => {}, 2000); |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss"></style> |
|
|
|
|