<template>
|
<app-collapse-form title="表字段配置">
|
<template #header-button="scope">
|
<el-button
|
icon="Plus"
|
size="small"
|
type="primary"
|
@click="onOpen({})"
|
>
|
新增
|
</el-button>
|
</template>
|
<app-table-list v-bind="tableListProps">
|
<template #table-sort="scope">
|
<el-button
|
size="small"
|
icon="Rank"
|
link
|
>
|
</el-button>
|
</template>
|
<template #table-operate="scope">
|
<el-button
|
icon="Edit"
|
size="small"
|
type="primary"
|
@click="onOpen(scope.row)">
|
</el-button>
|
<el-button
|
size="small"
|
type="danger"
|
icon="Delete"
|
@click="onDelete(scope.row)"
|
>
|
</el-button>
|
</template>
|
</app-table-list>
|
</app-collapse-form>
|
<table-dialog v-bind="tableDialogProps"/>
|
<form-dialog v-bind="formDialogProps"/>
|
</template>
|
|
<script setup>
|
import FormDialog from './FormDialog';
|
import Sortable from "sortablejs";
|
|
const tableDialogRef = ref();
|
const formDialogRef = ref();
|
const tableListRef = ref();
|
|
import {meta} from "@/hooks";
|
|
const {useMetaData} = meta;
|
|
const tableDialogProps = {
|
ref: tableDialogRef,
|
subSubmit(selected) {
|
tableListRef.value.setTableData([...tableListRef.value.getTableData(), ...selected]);
|
}
|
};
|
|
const [columns, filters, fields] = useMetaData(
|
'sys_data_property',
|
({columnsTools}) => {
|
columnsTools.splice(0, 0,
|
{
|
type: 'slot',
|
label: "排序",
|
prop: 'sort',
|
table: {
|
fixed: true,
|
width: 55
|
}
|
}
|
);
|
columnsTools.splice(columns.length, 0,
|
{
|
type: 'slot',
|
label: "操作",
|
prop: 'operate',
|
table: {
|
width: 120
|
}
|
}
|
);
|
columns.forEach((e, index) => {
|
if (index !== 0) {
|
e.table.className = 'ignore-elements';
|
}
|
});
|
tableListProps.columns = columns;
|
tableListRef.value.$forceUpdate(tableListProps);
|
}
|
);
|
|
const formDialogProps = {
|
ref: formDialogRef,
|
subSubmit(row) {
|
let isNew = true;
|
const tableList = tableListRef.value.getTableData();
|
tableList.forEach((e, i) => {
|
if (e.id === row.id) {
|
isNew = false;
|
tableList[i] = row;
|
}
|
});
|
if (isNew) {
|
tableList.push(row);
|
}
|
|
tableList.forEach((e, index) => {
|
e.indexno = index + 1;
|
});
|
|
tableListRef.value.setTableData([...tableList]);
|
}
|
};
|
|
const tableListProps = {
|
class: 'fields-sort-table-class',
|
ref: tableListRef,
|
title: '字段列表',
|
complementHeight: 0,
|
columns,
|
};
|
|
const onDelete = (row) => {
|
let tableList = tableListRef.value.getTableData();
|
tableList.forEach((e, i) => {
|
if (e.id === row.id) {
|
tableList[i] = null;
|
}
|
});
|
tableList = tableList.filter(Boolean);
|
tableList.forEach((e, index) => {
|
e.indexno = index + 1;
|
});
|
tableListRef.value.setTableData([...tableList]);
|
}
|
|
const onOpen = (row) => {
|
formDialogRef.value.onOpen(row);
|
};
|
|
const onSetData = (list) => {
|
tableListRef.value.setTableData(list);
|
dragSortHandler();
|
}
|
|
const onGetData = () => {
|
return tableListRef.value.getTableData().map((row) => {
|
delete row.id;
|
return row;
|
});
|
}
|
|
let isSortable = false;
|
|
const dragSortHandler = async () => {
|
window.setTimeout(() => {
|
|
if (!isSortable) {
|
isSortable = true;
|
const elNode = document.querySelector(`.${tableListProps.class} tbody`);
|
Sortable.create(elNode, {
|
animation: 500,
|
forceFallback: true,
|
filter: ".ignore-elements",
|
onEnd({newIndex, oldIndex}) {
|
let list = tableListRef.value.getTableData();
|
const currRow = list.splice(oldIndex, 1)[0];
|
list.splice(newIndex, 0, currRow);
|
list.forEach((e, index) => {
|
e.indexno = index + 1;
|
});
|
tableListRef.value.setTableData([...list]);
|
}
|
});
|
}
|
}, 200);
|
};
|
|
defineExpose({
|
/**
|
* 初始化
|
*/
|
onSetData,
|
onGetData
|
});
|
|
</script>
|
