Se omiten las declaraciones de variables constantes. . . . arrogante
1. Efecto
<a-table
size="small"
:columns="sourceColumns"
:data-source="sourceData"
bordered
:pagination="
SourceTableConfig.pagination ? objArray.sourcePagination : false
"
v-if="SourceTableConfig.showSource"
:row-selection="
SourceTableConfig.sourceRowSelection
? {
fixed: true,
hideSelectAll: true,
selectedRowKeys: objArray.selectedSourceRowKey,
onChange: changeSourceRow,
}
: null
"
:rowKey="(record) => record.id"
class="sortTable"
>
<template #bodyCell="{ column, index, record, text }">
<template v-if="column.ellipsis == true">
<a-tooltip placement="topLeft" :title="text">
<span class="ellipsis">{
{ text }}</span>
</a-tooltip>
</template>
<template v-if="column && column.dataIndex == 'index'">
<span>{
{
`${
(objArray.sourcePagination.current - 1) *
objArray.sourcePagination.pageSize +
index +
1
}`
}}</span>
</template>
<template v-if="column.key === 'lastModificationTime'">
<span>{
{
record.lastModificationTime
? moment(record.lastModificationTime).format(
"YYYY-MM-DD HH:mm:ss"
)
: moment(record.creationTime).format("YYYY-MM-DD HH:mm:ss")
}}</span>
</template>
<template v-if="column.key === 'creationTimes'">
<span>{
{
record.creationTimes
? moment(record.creationTimes).format("YYYY-MM-DD HH:mm:ss")
: ""
}}</span>
</template>
<template v-if="column && column.dataIndex == 'action'">
<span>
<a @click="showUser(record)">对应用户</a>
<a-divider type="vertical" />
<a @click="delSourceEvent(record)">删除</a>
</span>
</template>
</template>
<template #title>
<a-button @click="addSourceEvent" v-show="curID">{
{
SourceTableConfig.addName
}}</a-button>
<a-button
v-if="SourceTableConfig.isSort && sourceData.length"
@click="changeSort"
style="margin-left: 20px"
v-show="curID"
>调整排序</a-button
>
<a-alert
v-if="sortType"
message=""
style="margin-top: 10px"
type="warning"
>
<template #description>
<span>
上下移动调整位置
<a
class="c_link"
style="margin-left: 10px"
@click="handleSaveSort"
>保存</a
>
<a class="c_link" style="margin-left: 10px" @click="cencleSort"
>撤销</a
>
</span>
</template>
</a-alert>
</template>
</a-table>// 排序
onMounted(() => {
rowDrop();
});
let sortTable = ref(null);
function rowDrop() {
nextTick(() => {
const el = document.querySelector(".sortTable .ant-table-tbody");
if (el) {
if (sortTable.value) {
sortTable.value.destroy();
}
sortTable.value = new Sortable(el, {
// draggable: ".ant-table-row",
disabled: !sortType.value,
onEnd({ newIndex, oldIndex }) {
const currRow = sourceData.value.splice(oldIndex, 1)[0];
sourceData.value.splice(newIndex, 0, currRow);
// 截止上面为止，数组已经进行了更换，但是会看到视图没有更新，所以就进行了数组清空重新赋值
const newArray = sourceData.value.slice(0);
sourceData.value = [];
sourceData.value = [...newArray];
},
});
}
});
}
const sortType = ref(false);
const changeSort = () => {
sortType.value = !sortType.value;
rowDrop();
};
const handleSaveSort = () => {
changeSort();
const params = sourceData.value.map((e, i) => {
return {
id: e.curid,
ordinal: i,
roleId: e.roleId,
};
});
props.SourceTableConfig.bulkOrganizationUpdate([...params], props.curID)
.then((res) => {
if (res) {
openNotificationWithIcon("success", "成功", `调整排序成功`, () => {
this.$emit("getTreeData");
});
} else openNotificationWithIcon("error", "提示");
})
.catch((err) => {
openNotificationWithIcon("error", "提示");
console.log(err);
});
};
const cencleSort = () => {
sortType.value = !sortType.value;
sourceData.value.splice(0);
getSourceTableData();
};2. Clasificación de listas
<div class="c_action_content">
<a-button class="contact_btn" size="small" @click="addSourceEvent" v-show="curID">添加子部门</a-button>
<a-button class="contact_btn" size="small" @click="changeSort" v-show="curID&&sourceData.length">调整排序</a-button>
</div>
<a-alert v-if="sortType == true" message="" type="warning">
<template v-slot:description>
<span>
上下移动调整位置
<a class="c_link" style="margin-left:10px;" @click="handleSaveSort">保存</a>
<a class="c_link" style="margin-left:10px;" @click="cencleSort">撤销</a>
</span>
</template>
</a-alert>
<a-list bordered class="c_subDep_list" size="small" :data-source="sourceData">
<div class="floor">
<a-list-item v-for="(item, index) in sourceData" :key="`sourceData${index}`" :class="sortType == true ? 'test' : '' " @click="handleNext(item)">
<span>{
{ item.name }}</span>
<right-outlined />
</a-list-item>
</div>
</a-list>
<a-empty class="ant-empty-normal" v-show="sourceData.length==0" :image="simpleImage"/>// 排序
let sortTable = ref(null);
function rowDrop() {
const tbody = document.querySelector('.floor')
if(tbody) {
Sortable.create(tbody, {
draggable: '.test',
chosenClass: 'sortable-chosen',
ghostClass: 'sortable-ghost',
onEnd ({ newIndex, oldIndex }) {
const currRow = sourceData.value.splice(oldIndex, 1)[0]
sourceData.value.splice(newIndex, 0, currRow)
// 截止上面为止，数组已经进行了更换，但是会看到视图没有更新，所以就进行了数组清空重新赋值
const newArray = sourceData.value.slice(0)
sourceData.value= []
nextTick(() => {
sourceData.value = [...newArray]
})
}
})
}
}
const sortType = ref(false);
const changeSort = () => {
sortType.value = !sortType.value;
rowDrop();
};
const handleSaveSort = () => {
changeSort()
const params = sourceData.value.map((e, i) => {
return {
id: e.id,
ordinal: i
}
})
props.SourceTableConfig.bulkOrganizationUpdate([...params],props.curID).then(res => {
if (res) {
message.success('调整排序成功')
props.refreshFunc()
} else message.error('调整排序失败')
}).catch(err => {
message.error('调整排序失败')
console.log(err)
})
};
const cencleSort = () => {
sortType.value = !sortType.value;
getSourceTableData()
rowDrop();
};