<template>
|
<app-collapse-form v-bind="collapseFormProps">
|
<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-active="scope">
|
<app-column-tag
|
:value="scope.row?.active"
|
:valueEnum="{T:'生效',F:'失效'}"
|
:typeEnum="{T:'success',F:'danger'}"
|
/>
|
</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>
|
<monaco-dialog v-bind="monacoDialogProps"/>
|
</template>
|
|
<script setup>
|
import MonacoDialog from './MonacoDialog';
|
import {modal} from "@/plugins";
|
import Sortable from "sortablejs";
|
|
const collapseFormRef = ref();
|
|
const collapseFormProps = {
|
title: "sql配置",
|
ref: collapseFormRef,
|
}
|
|
const monacoDialogRef = ref();
|
|
const monacoDialogProps = {
|
ref: monacoDialogRef,
|
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.order_no = index + 1;
|
});
|
|
tableListRef.value.setTableData([...tableList]);
|
}
|
}
|
|
const tableListRef = ref();
|
|
const tableListProps = {
|
class: 'sql-sort-table-class',
|
ref: tableListRef,
|
title: 'sql列表',
|
complementHeight: 0,
|
columns: [
|
{
|
type: 'slot',
|
label: "排序",
|
prop: 'sort',
|
table: {
|
width: 55
|
}
|
},
|
{
|
prop: 'order_no',
|
label: "步骤",
|
table: {
|
className: 'ignore-elements',
|
width: 70
|
}
|
},
|
{
|
prop: 'name',
|
label: "名称",
|
table: {
|
className: 'ignore-elements',
|
width: 200
|
}
|
},
|
{
|
prop: 'sql_segment',
|
label: "sql语句",
|
table: {
|
className: 'ignore-elements',
|
}
|
},
|
{
|
type: 'slot',
|
prop: 'active',
|
label: "生效",
|
table: {
|
className: 'ignore-elements',
|
width: 80
|
}
|
},
|
{
|
type: 'slot',
|
prop: 'operate',
|
label: "操作",
|
table: {
|
className: 'ignore-elements',
|
width: 120
|
}
|
},
|
]
|
};
|
|
const onDelete = async (row) => {
|
await modal.confirm("是否确认删除？");
|
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.order_no = index + 1;
|
});
|
tableListRef.value.setTableData([...tableList]);
|
}
|
|
const onOpen = (row) => {
|
monacoDialogRef.value.onOpen(row);
|
}
|
|
const onSetData = (list) => {
|
tableListRef.value.setTableData(list);
|
dragSortHandler();
|
}
|
|
const onGetData = async () => {
|
return tableListRef.value.getTableData().map((row) => {
|
row.sql_segment = row.sql_segment || '';
|
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.order_no = index + 1;
|
});
|
tableListRef.value.setTableData([...list]);
|
}
|
});
|
}
|
}, 200);
|
};
|
|
defineExpose({
|
/**
|
* 初始化
|
*/
|
onSetData,
|
onGetData
|
});
|
</script>
|
