|
|
|
@ -8,132 +8,138 @@ import {
|
|
|
|
reactive,
|
|
|
|
reactive,
|
|
|
|
ref,
|
|
|
|
ref,
|
|
|
|
unref,
|
|
|
|
unref,
|
|
|
|
} from "vue";
|
|
|
|
} from 'vue'
|
|
|
|
import { NDataTable } from "naive-ui";
|
|
|
|
import { NDataTable, useModal } from 'naive-ui'
|
|
|
|
import type { DataTableColumns, DataTableRowKey } from "naive-ui";
|
|
|
|
import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
|
|
|
|
import type { SortableEvent } from "sortablejs";
|
|
|
|
import type { SortableEvent } from 'sortablejs'
|
|
|
|
import Sortable from "sortablejs";
|
|
|
|
import Sortable from 'sortablejs'
|
|
|
|
import { debounce } from "lodash-es";
|
|
|
|
import { debounce } from 'lodash-es'
|
|
|
|
import Action from "../Action.vue";
|
|
|
|
import selection from 'naive-ui/es/_internal/selection'
|
|
|
|
import { deleteCondition, getConditionList, sort } from "@/api/home/filter";
|
|
|
|
import Action from '../Action.vue'
|
|
|
|
import type { FilterSearchParam } from "/#/api";
|
|
|
|
import { deleteCondition, getConditionList, sort } from '@/api/home/filter'
|
|
|
|
import selection from "naive-ui/es/_internal/selection";
|
|
|
|
import type { FilterSearchParam } from '/#/api'
|
|
|
|
import SvgIcon from "@/components/Icon/SvgIcon.vue";
|
|
|
|
import SvgIcon from '@/components/Icon/SvgIcon.vue'
|
|
|
|
|
|
|
|
|
|
|
|
import { useModal } from "naive-ui";
|
|
|
|
defineOptions({ name: 'FilterModal' })
|
|
|
|
const modal = useModal();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
defineOptions({ name: "FilterModal" });
|
|
|
|
|
|
|
|
const $message = window["$message"];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
const props = defineProps({
|
|
|
|
type: {
|
|
|
|
type: {
|
|
|
|
type: Number,
|
|
|
|
type: Number,
|
|
|
|
default: () => 0,
|
|
|
|
default: () => 0,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits<{
|
|
|
|
const emit = defineEmits<{
|
|
|
|
(e: "showNewFilter"): void;
|
|
|
|
(e: 'showNewFilter'): void
|
|
|
|
(e: "editFilter", filter: any): void;
|
|
|
|
(e: 'editFilter', filter: any): void
|
|
|
|
(e: "handleOk", item: any): void;
|
|
|
|
(e: 'handleOk', item: any): void
|
|
|
|
}>();
|
|
|
|
}>()
|
|
|
|
|
|
|
|
|
|
|
|
const show = ref(false);
|
|
|
|
const modal = useModal()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const $message = window.$message
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const show = ref(false)
|
|
|
|
|
|
|
|
const tableData = ref<Array<RowData>>([])
|
|
|
|
|
|
|
|
const keyword = ref('')
|
|
|
|
const cardStyle = {
|
|
|
|
const cardStyle = {
|
|
|
|
width: "808px",
|
|
|
|
'width': '808px',
|
|
|
|
height: "840px",
|
|
|
|
'height': '840px',
|
|
|
|
"--n-padding-bottom": "10px",
|
|
|
|
'--n-padding-bottom': '10px',
|
|
|
|
"--n-padding-left": "10px",
|
|
|
|
'--n-padding-left': '10px',
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
interface RowData {
|
|
|
|
interface RowData {
|
|
|
|
id: string;
|
|
|
|
id: string
|
|
|
|
searchname: string;
|
|
|
|
searchname: string
|
|
|
|
createby: string;
|
|
|
|
createby: string
|
|
|
|
createtime: string;
|
|
|
|
createtime: string
|
|
|
|
updateby: string;
|
|
|
|
updateby: string
|
|
|
|
updatetime: string;
|
|
|
|
updatetime: string
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function sortData(row) {
|
|
|
|
function sortData(row) {
|
|
|
|
console.log("sortData", row);
|
|
|
|
console.log('sortData', row)
|
|
|
|
if (row.order == "descend") {
|
|
|
|
if (row.order == 'descend') {
|
|
|
|
tableData.value.sort(
|
|
|
|
tableData.value.sort(
|
|
|
|
(a, b) =>
|
|
|
|
(a, b) =>
|
|
|
|
new Date(a[row.columnKey]).getTime() - new Date(b[row.columnKey]).getTime()
|
|
|
|
new Date(a[row.columnKey]).getTime() - new Date(b[row.columnKey]).getTime(),
|
|
|
|
);
|
|
|
|
)
|
|
|
|
} else if (row.order == "ascend") {
|
|
|
|
}
|
|
|
|
|
|
|
|
else if (row.order == 'ascend') {
|
|
|
|
tableData.value.sort(
|
|
|
|
tableData.value.sort(
|
|
|
|
(a, b) =>
|
|
|
|
(a, b) =>
|
|
|
|
new Date(b[row.columnKey]).getTime() - new Date(a[row.columnKey]).getTime()
|
|
|
|
new Date(b[row.columnKey]).getTime() - new Date(a[row.columnKey]).getTime(),
|
|
|
|
);
|
|
|
|
)
|
|
|
|
} else {
|
|
|
|
}
|
|
|
|
|
|
|
|
else {
|
|
|
|
tableData.value.sort(
|
|
|
|
tableData.value.sort(
|
|
|
|
(a, b) => Number((a as any).reorder) - Number((b as any).reorder)
|
|
|
|
(a, b) => Number((a as any).reorder) - Number((b as any).reorder),
|
|
|
|
);
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const columns: DataTableColumns<RowData> = [
|
|
|
|
const columns: DataTableColumns<RowData> = [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
type: "selection",
|
|
|
|
type: 'selection',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: "操作",
|
|
|
|
title: '操作',
|
|
|
|
key: "action",
|
|
|
|
key: 'action',
|
|
|
|
render(row) {
|
|
|
|
render(row) {
|
|
|
|
return h(Action, {
|
|
|
|
return h(Action, {
|
|
|
|
options: [
|
|
|
|
options: [
|
|
|
|
{ label: "编辑", key: 1 },
|
|
|
|
{ label: '编辑', key: 1 },
|
|
|
|
{ label: "删除", key: 2 },
|
|
|
|
{ label: '删除', key: 2 },
|
|
|
|
],
|
|
|
|
],
|
|
|
|
id: row.id,
|
|
|
|
id: row.id,
|
|
|
|
select,
|
|
|
|
select,
|
|
|
|
});
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// j
|
|
|
|
// j
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: "名称",
|
|
|
|
title: '名称',
|
|
|
|
key: "searchname",
|
|
|
|
key: 'searchname',
|
|
|
|
ellipsis: {
|
|
|
|
ellipsis: {
|
|
|
|
tooltip: true,
|
|
|
|
tooltip: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: "创建者",
|
|
|
|
title: '创建者',
|
|
|
|
key: "createby",
|
|
|
|
key: 'createby',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: "创建时间",
|
|
|
|
title: '创建时间',
|
|
|
|
key: "createtime",
|
|
|
|
key: 'createtime',
|
|
|
|
width: 180,
|
|
|
|
width: 180,
|
|
|
|
renderSorterIcon: ({ order }) => {
|
|
|
|
renderSorterIcon: ({ order }) => {
|
|
|
|
if (order === false) return h(SvgIcon, { name: "sort-2" });
|
|
|
|
if (order === false)
|
|
|
|
if (order === "ascend") return h(SvgIcon, { name: "sort-1" });
|
|
|
|
return h(SvgIcon, { name: 'sort-2' })
|
|
|
|
if (order === "descend") return h(SvgIcon, { name: "sort-3" });
|
|
|
|
if (order === 'ascend')
|
|
|
|
|
|
|
|
return h(SvgIcon, { name: 'sort-1' })
|
|
|
|
|
|
|
|
if (order === 'descend')
|
|
|
|
|
|
|
|
return h(SvgIcon, { name: 'sort-3' })
|
|
|
|
},
|
|
|
|
},
|
|
|
|
sorter: (row1, row2) => {
|
|
|
|
sorter: (row1, row2) => {
|
|
|
|
// tableData.value.sort(
|
|
|
|
// tableData.value.sort(
|
|
|
|
// (a, b) => new Date(a?.createtime).getTime() - new Date(b?.createtime).getTime()
|
|
|
|
// (a, b) => new Date(a?.createtime).getTime() - new Date(b?.createtime).getTime()
|
|
|
|
// );
|
|
|
|
// );
|
|
|
|
return new Date(row1?.createtime).getTime() - new Date(row2?.createtime).getTime();
|
|
|
|
return new Date(row1?.createtime).getTime() - new Date(row2?.createtime).getTime()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: "更新者",
|
|
|
|
title: '更新者',
|
|
|
|
key: "updateby",
|
|
|
|
key: 'updateby',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: "更新时间",
|
|
|
|
title: '更新时间',
|
|
|
|
key: "updatetime",
|
|
|
|
key: 'updatetime',
|
|
|
|
width: 180,
|
|
|
|
width: 180,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
];
|
|
|
|
]
|
|
|
|
const total = ref(0);
|
|
|
|
const total = ref(0)
|
|
|
|
const loading = ref(true);
|
|
|
|
const loading = ref(true)
|
|
|
|
const pagination = reactive({
|
|
|
|
const pagination = reactive({
|
|
|
|
page: 1,
|
|
|
|
page: 1,
|
|
|
|
pageCount: 1,
|
|
|
|
pageCount: 1,
|
|
|
|
@ -141,83 +147,82 @@ const pagination = reactive({
|
|
|
|
showSizePicker: true,
|
|
|
|
showSizePicker: true,
|
|
|
|
pageSizes: [
|
|
|
|
pageSizes: [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
label: "10 每页",
|
|
|
|
label: '10 每页',
|
|
|
|
value: 10,
|
|
|
|
value: 10,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
label: "15 每页",
|
|
|
|
label: '15 每页',
|
|
|
|
value: 15,
|
|
|
|
value: 15,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
label: "30 每页",
|
|
|
|
label: '30 每页',
|
|
|
|
value: 30,
|
|
|
|
value: 30,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
label: "50 每页",
|
|
|
|
label: '50 每页',
|
|
|
|
value: 50,
|
|
|
|
value: 50,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
showQuickJumper: true,
|
|
|
|
showQuickJumper: true,
|
|
|
|
prefix: () => `共 ${total.value} 条数据`,
|
|
|
|
prefix: () => `共 ${total.value} 条数据`,
|
|
|
|
});
|
|
|
|
})
|
|
|
|
const tableData = ref<Array<RowData>>([]);
|
|
|
|
|
|
|
|
const keyword = ref("");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function query(page: number, pageSize: number) {
|
|
|
|
async function query(page: number, pageSize: number) {
|
|
|
|
const searchParam: FilterSearchParam = {
|
|
|
|
const searchParam: FilterSearchParam = {
|
|
|
|
search_searchname: { value: keyword.value, op: "like", type: "string" },
|
|
|
|
search_searchname: { value: keyword.value, op: 'like', type: 'string' },
|
|
|
|
};
|
|
|
|
}
|
|
|
|
const result = await getConditionList(
|
|
|
|
const result = await getConditionList(
|
|
|
|
{ pageNo: page, pageSize },
|
|
|
|
{ pageNo: page, pageSize },
|
|
|
|
searchParam,
|
|
|
|
searchParam,
|
|
|
|
props.type
|
|
|
|
props.type,
|
|
|
|
);
|
|
|
|
)
|
|
|
|
const { data, pageCount, total: totalCount } = result;
|
|
|
|
const { data, pageCount, total: totalCount } = result
|
|
|
|
tableData.value = data;
|
|
|
|
tableData.value = data
|
|
|
|
pagination.page = page;
|
|
|
|
pagination.page = page
|
|
|
|
total.value = totalCount;
|
|
|
|
total.value = totalCount
|
|
|
|
pagination.pageCount = pageCount;
|
|
|
|
pagination.pageCount = pageCount
|
|
|
|
loading.value = false;
|
|
|
|
loading.value = false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function afterLeave() {
|
|
|
|
function afterLeave() {
|
|
|
|
pagination.page = 1;
|
|
|
|
pagination.page = 1
|
|
|
|
pagination.pageCount = 1;
|
|
|
|
pagination.pageCount = 1
|
|
|
|
pagination.pageSize = 10;
|
|
|
|
pagination.pageSize = 10
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const selectionIds = ref<DataTableRowKey[]>([]);
|
|
|
|
const selectionIds = ref<DataTableRowKey[]>([])
|
|
|
|
|
|
|
|
|
|
|
|
const rowKey = (row: RowData) => row.id;
|
|
|
|
const rowKey = (row: RowData) => row.id
|
|
|
|
|
|
|
|
|
|
|
|
function rowProps(row: RowData) {
|
|
|
|
function rowProps(row: RowData) {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
"data-id": row.id,
|
|
|
|
'data-id': row.id,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function handleCheck(rowKeys: DataTableRowKey[]) {
|
|
|
|
function handleCheck(rowKeys: DataTableRowKey[]) {
|
|
|
|
selectionIds.value = rowKeys;
|
|
|
|
selectionIds.value = rowKeys
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function select(key: number, id: string) {
|
|
|
|
function select(key: number, id: string) {
|
|
|
|
switch (key) {
|
|
|
|
switch (key) {
|
|
|
|
case 1:
|
|
|
|
case 1:
|
|
|
|
editSelection(id);
|
|
|
|
editSelection(id)
|
|
|
|
break;
|
|
|
|
break
|
|
|
|
case 2:
|
|
|
|
case 2:
|
|
|
|
const modalInst = modal.create({
|
|
|
|
deleteSelection(id)
|
|
|
|
title: "确认提示",
|
|
|
|
// const modalInst = modal.create({
|
|
|
|
content: "确认删除该条过滤条件吗?",
|
|
|
|
// title: "确认提示",
|
|
|
|
positiveText: "确定",
|
|
|
|
// content: "确认删除该条过滤条件吗?",
|
|
|
|
negativeText: "取消",
|
|
|
|
// positiveText: "确定",
|
|
|
|
preset: "dialog",
|
|
|
|
// negativeText: "取消",
|
|
|
|
onPositiveClick: () => deleteSelection(id),
|
|
|
|
// preset: "dialog",
|
|
|
|
onNegativeClick: () => modalInst.destroy(),
|
|
|
|
// onPositiveClick: () => deleteSelection(id),
|
|
|
|
});
|
|
|
|
// onNegativeClick: () => modalInst.destroy(),
|
|
|
|
break;
|
|
|
|
// });
|
|
|
|
|
|
|
|
break
|
|
|
|
default:
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
break
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -227,145 +232,149 @@ function editSelection(id) {
|
|
|
|
// $message.error("请选中一条过滤");
|
|
|
|
// $message.error("请选中一条过滤");
|
|
|
|
// return;
|
|
|
|
// return;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
const selectedId = id;
|
|
|
|
const selectedId = id
|
|
|
|
const selectedFilter = tableData.value.find((item: any) => {
|
|
|
|
const selectedFilter = tableData.value.find((item: any) => {
|
|
|
|
return item.id === selectedId;
|
|
|
|
return item.id === selectedId
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
emit("editFilter", selectedFilter);
|
|
|
|
emit('editFilter', selectedFilter)
|
|
|
|
closeModal();
|
|
|
|
closeModal()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function deleteSelection(id = "") {
|
|
|
|
function deleteSelection(id = '') {
|
|
|
|
if (selectionIds.value.length === 0) {
|
|
|
|
if (selectionIds.value.length === 0) {
|
|
|
|
deleteCondition({ ids: id }).then(() => {
|
|
|
|
deleteCondition({ ids: id }).then(() => {
|
|
|
|
query(pagination.page, pagination.pageSize);
|
|
|
|
query(pagination.page, pagination.pageSize)
|
|
|
|
});
|
|
|
|
})
|
|
|
|
return;
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const modalInst = modal.create({
|
|
|
|
const modalInst = modal.create({
|
|
|
|
title: "确认提示",
|
|
|
|
title: '确认提示',
|
|
|
|
content: "确认删除所选过滤条件吗?",
|
|
|
|
content: '确认删除所选过滤条件吗?',
|
|
|
|
positiveText: "确定",
|
|
|
|
positiveText: '确定',
|
|
|
|
negativeText: "取消",
|
|
|
|
negativeText: '取消',
|
|
|
|
preset: "dialog",
|
|
|
|
preset: 'dialog',
|
|
|
|
onPositiveClick: () =>
|
|
|
|
onPositiveClick: () =>
|
|
|
|
deleteCondition({ ids: selectionIds.value.join(",") }).then(() => {
|
|
|
|
deleteCondition({ ids: selectionIds.value.join(',') }).then(() => {
|
|
|
|
selectionIds.value = [];
|
|
|
|
selectionIds.value = []
|
|
|
|
query(pagination.page, pagination.pageSize);
|
|
|
|
query(pagination.page, pagination.pageSize)
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
onNegativeClick: () => modalInst.destroy(),
|
|
|
|
onNegativeClick: () => modalInst.destroy(),
|
|
|
|
});
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function handlePageChange(currentPage) {
|
|
|
|
async function handlePageChange(currentPage) {
|
|
|
|
if (loading.value) return;
|
|
|
|
if (loading.value)
|
|
|
|
pagination.page = currentPage;
|
|
|
|
return
|
|
|
|
const { pageSize } = pagination;
|
|
|
|
pagination.page = currentPage
|
|
|
|
await query(currentPage, pageSize);
|
|
|
|
const { pageSize } = pagination
|
|
|
|
|
|
|
|
await query(currentPage, pageSize)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function handlePageSizeChange(currentPageSize) {
|
|
|
|
async function handlePageSizeChange(currentPageSize) {
|
|
|
|
if (loading.value) return;
|
|
|
|
if (loading.value)
|
|
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
|
|
const { page } = pagination;
|
|
|
|
const { page } = pagination
|
|
|
|
pagination.pageSize = currentPageSize;
|
|
|
|
pagination.pageSize = currentPageSize
|
|
|
|
await query(page, currentPageSize);
|
|
|
|
await query(page, currentPageSize)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function handleClick() {
|
|
|
|
function handleClick() {
|
|
|
|
emit("showNewFilter");
|
|
|
|
emit('showNewFilter')
|
|
|
|
closeModal();
|
|
|
|
closeModal()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let sortTable: Sortable | null = null;
|
|
|
|
let sortTable: Sortable | null = null
|
|
|
|
const tableRef = ref<InstanceType<typeof NDataTable>>();
|
|
|
|
const tableRef = ref<InstanceType<typeof NDataTable>>()
|
|
|
|
|
|
|
|
|
|
|
|
async function showModal() {
|
|
|
|
async function showModal() {
|
|
|
|
show.value = true;
|
|
|
|
show.value = true
|
|
|
|
|
|
|
|
|
|
|
|
const { page, pageSize } = pagination;
|
|
|
|
const { page, pageSize } = pagination
|
|
|
|
await query(page, pageSize);
|
|
|
|
await query(page, pageSize)
|
|
|
|
|
|
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
nextTick(() => {
|
|
|
|
if (sortTable !== null) destory();
|
|
|
|
if (sortTable !== null)
|
|
|
|
|
|
|
|
destory()
|
|
|
|
const el: HTMLDivElement = tableRef.value?.$el;
|
|
|
|
|
|
|
|
const tbody: HTMLElement | null = el.querySelector("tbody.n-data-table-tbody")!;
|
|
|
|
const el: HTMLDivElement = tableRef.value?.$el
|
|
|
|
if (tbody) sortTable = Sortable.create(tbody, { onEnd, onMove });
|
|
|
|
const tbody: HTMLElement | null = el.querySelector('tbody.n-data-table-tbody')!
|
|
|
|
});
|
|
|
|
if (tbody)
|
|
|
|
|
|
|
|
sortTable = Sortable.create(tbody, { onEnd, onMove })
|
|
|
|
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
let relatedId = "";
|
|
|
|
let relatedId = ''
|
|
|
|
let insertafter = false;
|
|
|
|
let insertafter = false
|
|
|
|
|
|
|
|
|
|
|
|
// TODO: 有bug，需跟后端联调
|
|
|
|
// TODO: 有bug，需跟后端联调
|
|
|
|
function onEnd(event: SortableEvent) {
|
|
|
|
function onEnd(event: SortableEvent) {
|
|
|
|
const data = unref(tableData);
|
|
|
|
const data = unref(tableData)
|
|
|
|
const oldElem = data[event.oldIndex!];
|
|
|
|
const oldElem = data[event.oldIndex!]
|
|
|
|
data.splice(event.oldIndex!, 1);
|
|
|
|
data.splice(event.oldIndex!, 1)
|
|
|
|
data.splice(event.newIndex!, 0, oldElem);
|
|
|
|
data.splice(event.newIndex!, 0, oldElem)
|
|
|
|
|
|
|
|
|
|
|
|
const dragId = oldElem.id;
|
|
|
|
const dragId = oldElem.id
|
|
|
|
const index = data.findIndex((item) => {
|
|
|
|
const index = data.findIndex((item) => {
|
|
|
|
return item.id === relatedId;
|
|
|
|
return item.id === relatedId
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 插入到元素后，索引-1；插入到元素前，索引+1
|
|
|
|
// 插入到元素后，索引-1；插入到元素前，索引+1
|
|
|
|
const order = insertafter ? index - 1 : index + 1;
|
|
|
|
const order = insertafter ? index - 1 : index + 1
|
|
|
|
// console.log('dragid:', dragId, 'order:', order)
|
|
|
|
// console.log('dragid:', dragId, 'order:', order)
|
|
|
|
sort(dragId, order);
|
|
|
|
sort(dragId, order)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function onMove(evt: any) {
|
|
|
|
function onMove(evt: any) {
|
|
|
|
relatedId = evt.related?.dataset?.id;
|
|
|
|
relatedId = evt.related?.dataset?.id
|
|
|
|
insertafter = evt.willInsertAfter;
|
|
|
|
insertafter = evt.willInsertAfter
|
|
|
|
// console.log(`你正在拖动：${evt.dragged.dataset.id},替换了：${evt.related}`, 'insertafter', evt.willInsertAfter)
|
|
|
|
// console.log(`你正在拖动：${evt.dragged.dataset.id},替换了：${evt.related}`, 'insertafter', evt.willInsertAfter)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function destory() {
|
|
|
|
function destory() {
|
|
|
|
sortTable && sortTable.destroy();
|
|
|
|
sortTable && sortTable.destroy()
|
|
|
|
sortTable = null;
|
|
|
|
sortTable = null
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
onUnmounted(() => {
|
|
|
|
destory();
|
|
|
|
destory()
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
function closeModal() {
|
|
|
|
function closeModal() {
|
|
|
|
selectionIds.value = [];
|
|
|
|
selectionIds.value = []
|
|
|
|
show.value = false;
|
|
|
|
show.value = false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
defineExpose({
|
|
|
|
defineExpose({
|
|
|
|
showModal,
|
|
|
|
showModal,
|
|
|
|
query,
|
|
|
|
query,
|
|
|
|
pagination,
|
|
|
|
pagination,
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const inputHandler = debounce((word) => {
|
|
|
|
const inputHandler = debounce((word) => {
|
|
|
|
keyword.value = word;
|
|
|
|
keyword.value = word
|
|
|
|
query(1, 5);
|
|
|
|
query(1, 5)
|
|
|
|
}, 300);
|
|
|
|
}, 300)
|
|
|
|
|
|
|
|
|
|
|
|
const showSearch = computed(() => {
|
|
|
|
const showSearch = computed(() => {
|
|
|
|
return selectionIds.value.length > 0;
|
|
|
|
return selectionIds.value.length > 0
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const handleOk = () => {
|
|
|
|
function handleOk() {
|
|
|
|
if (selectionIds.value.length > 1) {
|
|
|
|
if (selectionIds.value.length > 1) {
|
|
|
|
$message.error("只能选择一条筛选条件");
|
|
|
|
$message.error('只能选择一条筛选条件')
|
|
|
|
return;
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (selectionIds.value.length == 1) {
|
|
|
|
if (selectionIds.value.length == 1) {
|
|
|
|
const selectedId = selectionIds.value[0];
|
|
|
|
const selectedId = selectionIds.value[0]
|
|
|
|
let item = tableData.value.find((v) => v.id == selectedId);
|
|
|
|
const item = tableData.value.find(v => v.id == selectedId)
|
|
|
|
emit("handleOk", item);
|
|
|
|
emit('handleOk', item)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (selectionIds.value.length == 0) {
|
|
|
|
if (selectionIds.value.length == 0)
|
|
|
|
emit("handleOk", "");
|
|
|
|
emit('handleOk', '')
|
|
|
|
}
|
|
|
|
|
|
|
|
closeModal();
|
|
|
|
closeModal()
|
|
|
|
};
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
@ -374,9 +383,9 @@ const handleOk = () => {
|
|
|
|
v-model:show="show"
|
|
|
|
v-model:show="show"
|
|
|
|
transform-origin="center"
|
|
|
|
transform-origin="center"
|
|
|
|
display-directive="if"
|
|
|
|
display-directive="if"
|
|
|
|
@after-leave="afterLeave"
|
|
|
|
|
|
|
|
:mask-closable="false"
|
|
|
|
:mask-closable="false"
|
|
|
|
class="modal_wrapper"
|
|
|
|
class="modal_wrapper"
|
|
|
|
|
|
|
|
@after-leave="afterLeave"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<n-card
|
|
|
|
<n-card
|
|
|
|
:style="cardStyle"
|
|
|
|
:style="cardStyle"
|
|
|
|
@ -396,8 +405,7 @@ const handleOk = () => {
|
|
|
|
'font-weight': '600',
|
|
|
|
'font-weight': '600',
|
|
|
|
}"
|
|
|
|
}"
|
|
|
|
class="wrapper-info-title"
|
|
|
|
class="wrapper-info-title"
|
|
|
|
>基本信息</span
|
|
|
|
>基本信息</span>
|
|
|
|
>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
@ -429,13 +437,11 @@ const handleOk = () => {
|
|
|
|
</n-button>
|
|
|
|
</n-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="msg">
|
|
|
|
<div class="msg">
|
|
|
|
<span
|
|
|
|
<span>已选中
|
|
|
|
>已选中
|
|
|
|
|
|
|
|
<span style="color: #507afd; font-size: 16px">{{
|
|
|
|
<span style="color: #507afd; font-size: 16px">{{
|
|
|
|
selectionIds.length
|
|
|
|
selectionIds.length
|
|
|
|
}}</span>
|
|
|
|
}}</span>
|
|
|
|
项</span
|
|
|
|
项</span>
|
|
|
|
>
|
|
|
|
|
|
|
|
<a @click="selectionIds = []">清空</a>
|
|
|
|
<a @click="selectionIds = []">清空</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
