|
|
|
|
@ -1,255 +1,302 @@
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { defineOptions, h, nextTick, onUnmounted, reactive, ref, unref } from 'vue'
|
|
|
|
|
import { NDataTable } from 'naive-ui'
|
|
|
|
|
import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
|
|
|
|
|
import type { SortableEvent } from 'sortablejs'
|
|
|
|
|
import Sortable from 'sortablejs'
|
|
|
|
|
import { debounce } from 'lodash-es'
|
|
|
|
|
import Action from '@/views/home/aside/comp/Action.vue'
|
|
|
|
|
import { deleteCondition, getConditionList, sort } from '@/api/home/filter'
|
|
|
|
|
import type { FilterSearchParam } from '/#/api'
|
|
|
|
|
|
|
|
|
|
defineOptions({ name: 'FilterModal' })
|
|
|
|
|
import {
|
|
|
|
|
defineOptions,
|
|
|
|
|
h,
|
|
|
|
|
nextTick,
|
|
|
|
|
onMounted,
|
|
|
|
|
onUnmounted,
|
|
|
|
|
reactive,
|
|
|
|
|
ref,
|
|
|
|
|
unref,
|
|
|
|
|
} from "vue";
|
|
|
|
|
import { NDataTable } from "naive-ui";
|
|
|
|
|
import type { DataTableColumns, DataTableRowKey } from "naive-ui";
|
|
|
|
|
import type { SortableEvent } from "sortablejs";
|
|
|
|
|
import Sortable from "sortablejs";
|
|
|
|
|
import { debounce } from "lodash-es";
|
|
|
|
|
import Action from "@/views/home/aside/comp/Action.vue";
|
|
|
|
|
import { deleteCondition, getConditionList, sort } from "@/api/home/filter";
|
|
|
|
|
import type { FilterSearchParam } from "/#/api";
|
|
|
|
|
|
|
|
|
|
defineOptions({ name: "FilterModal" });
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits<{
|
|
|
|
|
(e: 'showNewFilter'): void
|
|
|
|
|
(e: 'editFilter', filter: any): void
|
|
|
|
|
}>()
|
|
|
|
|
(e: "showNewFilter"): void;
|
|
|
|
|
(e: "editFilter", filter: any): void;
|
|
|
|
|
}>();
|
|
|
|
|
|
|
|
|
|
const show = ref(false)
|
|
|
|
|
const show = ref(false);
|
|
|
|
|
|
|
|
|
|
const cardStyle = {
|
|
|
|
|
'width': '800px',
|
|
|
|
|
'height': '800px',
|
|
|
|
|
'--n-padding-bottom': '10px',
|
|
|
|
|
'--n-padding-left': '10px',
|
|
|
|
|
}
|
|
|
|
|
width: "800px",
|
|
|
|
|
height: "800px",
|
|
|
|
|
"--n-padding-bottom": "10px",
|
|
|
|
|
"--n-padding-left": "10px",
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
interface RowData {
|
|
|
|
|
id: string
|
|
|
|
|
searchname: string
|
|
|
|
|
createby: string
|
|
|
|
|
createtime: string
|
|
|
|
|
updateby: string
|
|
|
|
|
updatetime: string
|
|
|
|
|
id: string;
|
|
|
|
|
searchname: string;
|
|
|
|
|
createby: string;
|
|
|
|
|
createtime: string;
|
|
|
|
|
updateby: string;
|
|
|
|
|
updatetime: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const columns: DataTableColumns<RowData> = [
|
|
|
|
|
{
|
|
|
|
|
type: 'selection',
|
|
|
|
|
type: "selection",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '操作',
|
|
|
|
|
key: 'action',
|
|
|
|
|
title: "操作",
|
|
|
|
|
key: "action",
|
|
|
|
|
render(row) {
|
|
|
|
|
return h(
|
|
|
|
|
Action,
|
|
|
|
|
{
|
|
|
|
|
options: [
|
|
|
|
|
{ label: '编辑', key: 1 },
|
|
|
|
|
{ label: '删除', key: 2 },
|
|
|
|
|
],
|
|
|
|
|
id: row.id,
|
|
|
|
|
select,
|
|
|
|
|
},
|
|
|
|
|
)
|
|
|
|
|
return h(Action, {
|
|
|
|
|
options: [
|
|
|
|
|
{ label: "编辑", key: 1 },
|
|
|
|
|
{ label: "删除", key: 2 },
|
|
|
|
|
],
|
|
|
|
|
id: row.id,
|
|
|
|
|
select,
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '名称',
|
|
|
|
|
key: 'searchname',
|
|
|
|
|
title: "名称",
|
|
|
|
|
key: "searchname",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '创建者',
|
|
|
|
|
key: 'createby',
|
|
|
|
|
title: "创建者",
|
|
|
|
|
key: "createby",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '创建时间',
|
|
|
|
|
key: 'createtime',
|
|
|
|
|
title: "创建时间",
|
|
|
|
|
key: "createtime",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '更新者',
|
|
|
|
|
key: 'updateby',
|
|
|
|
|
title: "更新者",
|
|
|
|
|
key: "updateby",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '更新时间',
|
|
|
|
|
key: 'updatetime',
|
|
|
|
|
title: "更新时间",
|
|
|
|
|
key: "updatetime",
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const loading = ref(true)
|
|
|
|
|
const loading = ref(true);
|
|
|
|
|
const pagination = reactive({
|
|
|
|
|
page: 1,
|
|
|
|
|
pageCount: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
})
|
|
|
|
|
const tableData = ref<Array<RowData>>([])
|
|
|
|
|
const keyword = ref('')
|
|
|
|
|
showSizePicker:true,
|
|
|
|
|
pageSizes: [
|
|
|
|
|
{
|
|
|
|
|
label: "10 每页",
|
|
|
|
|
value: 10,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "15 每页",
|
|
|
|
|
value: 15,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "30 每页",
|
|
|
|
|
value: 30,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "50 每页",
|
|
|
|
|
value: 50,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
const tableData = ref<Array<RowData>>([]);
|
|
|
|
|
const keyword = ref("");
|
|
|
|
|
|
|
|
|
|
async function query(page: number, pageSize: number) {
|
|
|
|
|
const searchParam: FilterSearchParam = { search_searchname: { value: keyword.value, op: 'like', type: 'string' } }
|
|
|
|
|
const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 1)
|
|
|
|
|
const { data, pageCount } = result
|
|
|
|
|
tableData.value = data
|
|
|
|
|
pagination.page = page
|
|
|
|
|
pagination.pageCount = pageCount
|
|
|
|
|
loading.value = false
|
|
|
|
|
const searchParam: FilterSearchParam = {
|
|
|
|
|
search_searchname: { value: keyword.value, op: "like", type: "string" },
|
|
|
|
|
};
|
|
|
|
|
const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 1);
|
|
|
|
|
const { data, pageCount } = result;
|
|
|
|
|
tableData.value = data;
|
|
|
|
|
pagination.page = page;
|
|
|
|
|
pagination.pageCount = pageCount;
|
|
|
|
|
loading.value = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function afterLeave() {
|
|
|
|
|
pagination.page = 1
|
|
|
|
|
pagination.pageCount = 1
|
|
|
|
|
pagination.pageSize = 10
|
|
|
|
|
pagination.page = 1;
|
|
|
|
|
pagination.pageCount = 1;
|
|
|
|
|
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) {
|
|
|
|
|
return {
|
|
|
|
|
'data-id': row.id,
|
|
|
|
|
}
|
|
|
|
|
"data-id": row.id,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleCheck(rowKeys: DataTableRowKey[]) {
|
|
|
|
|
selectionIds.value = rowKeys
|
|
|
|
|
selectionIds.value = rowKeys;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function select(key: number) {
|
|
|
|
|
switch (key) {
|
|
|
|
|
case 1:
|
|
|
|
|
editSelection()
|
|
|
|
|
break
|
|
|
|
|
editSelection();
|
|
|
|
|
break;
|
|
|
|
|
case 2:
|
|
|
|
|
deleteSelection()
|
|
|
|
|
break
|
|
|
|
|
deleteSelection();
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
break
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function editSelection() {
|
|
|
|
|
// eslint-disable-next-line dot-notation
|
|
|
|
|
const $message = window['$message']
|
|
|
|
|
const $message = window["$message"];
|
|
|
|
|
|
|
|
|
|
if (selectionIds.value.length === 0 || selectionIds.value.length > 1) {
|
|
|
|
|
$message.error('请选中一条过滤')
|
|
|
|
|
return
|
|
|
|
|
$message.error("请选中一条过滤");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const selectedId = selectionIds.value[0]
|
|
|
|
|
const selectedId = selectionIds.value[0];
|
|
|
|
|
const selectedFilter = tableData.value.find((item: any) => {
|
|
|
|
|
return item.id === selectedId
|
|
|
|
|
})
|
|
|
|
|
return item.id === selectedId;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
emit('editFilter', selectedFilter)
|
|
|
|
|
closeModal()
|
|
|
|
|
emit("editFilter", selectedFilter);
|
|
|
|
|
closeModal();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function deleteSelection() {
|
|
|
|
|
// eslint-disable-next-line dot-notation
|
|
|
|
|
const $message = window['$message']
|
|
|
|
|
const $message = window["$message"];
|
|
|
|
|
|
|
|
|
|
if (selectionIds.value.length === 0) {
|
|
|
|
|
$message.error('至少选中一条过滤')
|
|
|
|
|
return
|
|
|
|
|
$message.error("至少选中一条过滤");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
deleteCondition({ ids: selectionIds.value.join(',') }).then(() => {
|
|
|
|
|
query(pagination.page, pagination.pageSize)
|
|
|
|
|
})
|
|
|
|
|
deleteCondition({ ids: selectionIds.value.join(",") }).then(() => {
|
|
|
|
|
query(pagination.page, pagination.pageSize);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function handlePageChange(currentPage) {
|
|
|
|
|
if (loading.value)
|
|
|
|
|
return
|
|
|
|
|
if (loading.value) return;
|
|
|
|
|
|
|
|
|
|
const { pageSize } = pagination;
|
|
|
|
|
await query(currentPage, pageSize);
|
|
|
|
|
}
|
|
|
|
|
async function handlePageSizeChange(currentPageSize) {
|
|
|
|
|
if (loading.value) return;
|
|
|
|
|
|
|
|
|
|
const { page } = pagination;
|
|
|
|
|
pagination.pageSize = currentPageSize;
|
|
|
|
|
|
|
|
|
|
const { pageSize } = pagination
|
|
|
|
|
await query(currentPage, pageSize)
|
|
|
|
|
await query(page, currentPageSize);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function handleClick() {
|
|
|
|
|
emit('showNewFilter')
|
|
|
|
|
show.value = false
|
|
|
|
|
emit("showNewFilter");
|
|
|
|
|
show.value = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let sortTable: Sortable | null = null
|
|
|
|
|
const tableRef = ref<InstanceType<typeof NDataTable>>()
|
|
|
|
|
let sortTable: Sortable | null = null;
|
|
|
|
|
const tableRef = ref<InstanceType<typeof NDataTable>>();
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
console.log(tableRef.value, "tableRef");
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
async function showModal() {
|
|
|
|
|
show.value = true
|
|
|
|
|
show.value = true;
|
|
|
|
|
|
|
|
|
|
const { page, pageSize } = pagination
|
|
|
|
|
await query(page, pageSize)
|
|
|
|
|
const { page, pageSize } = pagination;
|
|
|
|
|
await query(page, pageSize);
|
|
|
|
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
if (sortTable !== null)
|
|
|
|
|
destory()
|
|
|
|
|
|
|
|
|
|
const el: HTMLDivElement = tableRef.value?.$el
|
|
|
|
|
const tbody: HTMLElement | null = el.querySelector('tbody.n-data-table-tbody')!
|
|
|
|
|
if (tbody)
|
|
|
|
|
sortTable = Sortable.create(tbody, { onEnd, onMove })
|
|
|
|
|
})
|
|
|
|
|
if (sortTable !== null) destory();
|
|
|
|
|
|
|
|
|
|
const el: HTMLDivElement = tableRef.value?.$el;
|
|
|
|
|
const tbody: HTMLElement | null = el.querySelector("tbody.n-data-table-tbody")!;
|
|
|
|
|
if (tbody) sortTable = Sortable.create(tbody, { onEnd, onMove });
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
let relatedId = ''
|
|
|
|
|
let insertafter = false
|
|
|
|
|
let relatedId = "";
|
|
|
|
|
let insertafter = false;
|
|
|
|
|
|
|
|
|
|
// TODO: 有bug，需跟后端联调
|
|
|
|
|
function onEnd(event: SortableEvent) {
|
|
|
|
|
const data = unref(tableData)
|
|
|
|
|
const oldElem = data[event.oldIndex!]
|
|
|
|
|
data.splice(event.oldIndex!, 1)
|
|
|
|
|
data.splice(event.newIndex!, 0, oldElem)
|
|
|
|
|
const data = unref(tableData);
|
|
|
|
|
const oldElem = data[event.oldIndex!];
|
|
|
|
|
data.splice(event.oldIndex!, 1);
|
|
|
|
|
data.splice(event.newIndex!, 0, oldElem);
|
|
|
|
|
|
|
|
|
|
const dragId = oldElem.id
|
|
|
|
|
const dragId = oldElem.id;
|
|
|
|
|
const index = data.findIndex((item) => {
|
|
|
|
|
return item.id === relatedId
|
|
|
|
|
})
|
|
|
|
|
return item.id === relatedId;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 插入到元素后，索引-1；插入到元素前，索引+1
|
|
|
|
|
const order = insertafter ? index - 1 : index + 1
|
|
|
|
|
const order = insertafter ? index - 1 : index + 1;
|
|
|
|
|
// console.log('dragid:', dragId, 'order:', order)
|
|
|
|
|
sort(dragId, order)
|
|
|
|
|
sort(dragId, order);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onMove(evt: any) {
|
|
|
|
|
relatedId = evt.related?.dataset?.id
|
|
|
|
|
insertafter = evt.willInsertAfter
|
|
|
|
|
relatedId = evt.related?.dataset?.id;
|
|
|
|
|
insertafter = evt.willInsertAfter;
|
|
|
|
|
// console.log(`你正在拖动：${evt.dragged.dataset.id},替换了：${evt.related}`, 'insertafter', evt.willInsertAfter)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function destory() {
|
|
|
|
|
sortTable && sortTable.destroy()
|
|
|
|
|
sortTable = null
|
|
|
|
|
sortTable && sortTable.destroy();
|
|
|
|
|
sortTable = null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
destory()
|
|
|
|
|
})
|
|
|
|
|
destory();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function closeModal() {
|
|
|
|
|
show.value = false
|
|
|
|
|
show.value = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
defineExpose({
|
|
|
|
|
showModal,
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const inputHandler = debounce((word) => {
|
|
|
|
|
keyword.value = word
|
|
|
|
|
query(1, 5)
|
|
|
|
|
}, 300)
|
|
|
|
|
keyword.value = word;
|
|
|
|
|
query(1, 5);
|
|
|
|
|
}, 300);
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<n-modal
|
|
|
|
|
v-model:show="show" transform-origin="center" display-directive="if"
|
|
|
|
|
v-model:show="show"
|
|
|
|
|
transform-origin="center"
|
|
|
|
|
display-directive="if"
|
|
|
|
|
@after-leave="afterLeave"
|
|
|
|
|
>
|
|
|
|
|
<n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
|
|
|
|
|
<n-card
|
|
|
|
|
:style="cardStyle"
|
|
|
|
|
:bordered="false"
|
|
|
|
|
size="huge"
|
|
|
|
|
role="dialog"
|
|
|
|
|
aria-modal="true"
|
|
|
|
|
>
|
|
|
|
|
<div class="wrapper">
|
|
|
|
|
<span class="wrapper-title">全部筛选值</span>
|
|
|
|
|
<div class="wrapper-bar">
|
|
|
|
|
@ -258,7 +305,11 @@ const inputHandler = debounce((word) => {
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrapper-form">
|
|
|
|
|
<n-input :style="{ width: '360px', border: '1px solid #cad2dd' }" placeholder="请输入过滤条件名称搜索" @input="inputHandler">
|
|
|
|
|
<n-input
|
|
|
|
|
:style="{ width: '360px', border: '1px solid #cad2dd' }"
|
|
|
|
|
placeholder="请输入过滤条件名称搜索"
|
|
|
|
|
@input="inputHandler"
|
|
|
|
|
>
|
|
|
|
|
<template #suffix>
|
|
|
|
|
<SvgIcon size="14px" name="magnifying-1" />
|
|
|
|
|
</template>
|
|
|
|
|
@ -272,18 +323,25 @@ const inputHandler = debounce((word) => {
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrapper-table">
|
|
|
|
|
<NDataTable
|
|
|
|
|
ref="tableRef" remote :row-props="rowProps as any" :columns="columns" :data="tableData" :loading="loading"
|
|
|
|
|
:pagination="pagination" :row-key="rowKey" @update:page="handlePageChange"
|
|
|
|
|
ref="tableRef"
|
|
|
|
|
remote
|
|
|
|
|
:row-props="rowProps as any"
|
|
|
|
|
:columns="columns"
|
|
|
|
|
:data="tableData"
|
|
|
|
|
:loading="loading"
|
|
|
|
|
:pagination="pagination"
|
|
|
|
|
:row-key="rowKey"
|
|
|
|
|
@update:page="handlePageChange"
|
|
|
|
|
@update-page-size="handlePageSizeChange"
|
|
|
|
|
@update:checked-row-keys="handleCheck"
|
|
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<div class="wrapper-footer">
|
|
|
|
|
<n-button type="info" @click="closeModal">
|
|
|
|
|
确认
|
|
|
|
|
</n-button>
|
|
|
|
|
<n-button secondary style="margin-left:15px" @click="closeModal">
|
|
|
|
|
<n-button type="info" @click="closeModal"> 确认 </n-button>
|
|
|
|
|
<n-button secondary style="margin-left: 15px" @click="closeModal">
|
|
|
|
|
取消
|
|
|
|
|
</n-button>
|
|
|
|
|
</div>
|
|
|
|
|
@ -316,7 +374,7 @@ const inputHandler = debounce((word) => {
|
|
|
|
|
|
|
|
|
|
.n-input {
|
|
|
|
|
width: 300px;
|
|
|
|
|
border: 1px solid gray
|
|
|
|
|
border: 1px solid gray;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -334,7 +392,7 @@ const inputHandler = debounce((word) => {
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
|
background-color: #1980FF;
|
|
|
|
|
background-color: #1980ff;
|
|
|
|
|
content: "";
|
|
|
|
|
width: 5px;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
|
Dragon
1 year ago
