guoxiangbin
/
ocr-web
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Merge pull request 'feat: 高级筛选弹窗列表与数据联动' (#98) from feat/super_filter into test

Browse Source 
Reviewed-on: #98
pull/99/head
刘释隆 1 year ago
parent 8302e0c8b0 04b0ae258b
commit 756ae89ff2
6 changed files with 330 additions and 267 deletions
Show Stats Download Patch File Download Diff File

2
src/views/final/comp/NewFilterModal.vue
Unescape View File

@ -84,7 +84,7 @@ const formRef = ref<FormInst | null>(null)
const formValue = reactive<FormType>({
name: null,
logic: 'where',
logic: 'and',
conditions: [{
type: null,
operator: 'eq',

255
src/views/home/aside/Aside.vue
Unescape View File

@ -1,109 +1,125 @@
<script lang="ts" setup>
import { computed, inject, nextTick, onBeforeMount, onMounted, reactive, ref, shallowRef, unref, watch } from 'vue'
import { CustomFilterModalVue, FilterModalVue, NewFilterModalVue } from './comp/modals'
import Search from './comp/Search.vue'
import AdvanceFilter from './comp/AdvanceFilter.vue'
import { getViewportOffset } from '@/utils/domUtils'
import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
import { useConfig } from '@/store/modules/asideConfig'
import type { Filter } from '/#/home'
import type { AsideEntity } from '@/config/aside'
import { asideMap } from '@/config/aside'
import type { AsideConfig } from '/#/api'
import emitter from '@/utils/mitt'
import { getFilterList } from '@/api/home/main'
import dayjs from 'dayjs'
import { cloneDeep, isEqual } from 'lodash-es'
const configStore = useConfig()
import {
computed,
inject,
nextTick,
onBeforeMount,
onMounted,
reactive,
ref,
shallowRef,
unref,
watch,
} from "vue";
import { CustomFilterModalVue, FilterModalVue, NewFilterModalVue } from "./comp/modals";
import Search from "./comp/Search.vue";
import AdvanceFilter from "./comp/AdvanceFilter.vue";
import { getViewportOffset } from "@/utils/domUtils";
import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
import { useConfig } from "@/store/modules/asideConfig";
import type { Filter } from "/#/home";
import type { AsideEntity } from "@/config/aside";
import { asideMap } from "@/config/aside";
import type { AsideConfig } from "/#/api";
import emitter from "@/utils/mitt";
import { getFilterList } from "@/api/home/main";
import dayjs from "dayjs";
import { cloneDeep, isEqual } from "lodash-es";
const configStore = useConfig();
// 所有左侧模块的值
let asideValue: Record<keyof typeof asideMap, any> = reactive({})
let asideValue: Record<keyof typeof asideMap, any> = reactive({});
// 左侧某个模块是否显示: 显示需同时满足系统配置和个人配置
const asideVisible: Partial<Record<keyof AsideConfig, boolean>> = reactive({})
const asideVisible: Partial<Record<keyof AsideConfig, boolean>> = reactive({});
// 当前显示的模块，按照数组顺序显示
const showItems = shallowRef<{ key: string, config: AsideEntity }[]>([])
const showItems = shallowRef<{ key: string; config: AsideEntity }[]>([]);
Object.keys(asideMap).forEach((key) => {
const entity = asideMap[key]
const { defaultValue } = entity
asideValue[key] = defaultValue
})
const filterModalRef:any = ref(null)
const newFilterModalRef = ref(null)
const customModalRef = ref(null)
const customObjRef = ref<any>(null) // 获取高级筛选获取的值
const customTempObjRef = ref<any>(null) // 获取高级筛选获取的值(作对比)
const configFilterRef = ref<any>([]) // 获取排序的值
const entity = asideMap[key];
const { defaultValue } = entity;
asideValue[key] = defaultValue;
});
const filterModalRef: any = ref(null);
const newFilterModalRef = ref(null);
const customModalRef = ref(null);
const customObjRef = ref<any>(null); // 获取高级筛选获取的值
const customTempObjRef = ref<any>(null); // 获取高级筛选获取的值(作对比)
const configFilterRef = ref<any>([]); // 获取排序的值
const AdvanceFilterRef: any = ref(null);
function showModal(modalRef: any) {
const modal = unref(modalRef)! as any
modal.showModal()
const modal = unref(modalRef)! as any;
modal.showModal();
}
onMounted(() => {
nextTick(() => {
computeSlideHeight()
computeSlideHeight();
let tempAsideValue = cloneDeep(asideValue);
// configStore.setAsideValue(tempAsideValue);
console.log("asideMap和asideValue", tempAsideValue);
})
})
});
});
const collapse = ref(false)
const mousetrap = inject('mousetrap') as any
mousetrap.bind('[', collapseHandler)
const collapse = ref(false);
const mousetrap = inject("mousetrap") as any;
mousetrap.bind("[", collapseHandler);
function collapseHandler() {
collapse.value = !collapse.value
collapse.value = !collapse.value;
}
const asideWidth = computed(() => {
return collapse.value ? 0 : 308
})
return collapse.value ? 0 : 308;
});
const asideHeight = ref(500)
const asideHeight = ref(500);
const asideStyle = computed(() => {
return {
width: `${asideWidth.value}px`,
height: `${asideHeight.value}px`,
}
})
};
});
const collapseIcon = computed(() => {
return collapse.value ? 'expand-cir' : 'collapse-cir'
})
return collapse.value ? "expand-cir" : "collapse-cir";
});
function computeSlideHeight() {
const headEl = document.querySelector('.aside-header')!
const { bottomIncludeBody } = getViewportOffset(headEl)
const height = bottomIncludeBody
asideHeight.value = height - 24
const headEl = document.querySelector(".aside-header")!;
const { bottomIncludeBody } = getViewportOffset(headEl);
const height = bottomIncludeBody;
asideHeight.value = height - 24;
}
useWindowSizeFn(computeSlideHeight, 280)
useWindowSizeFn(computeSlideHeight, 280);
onBeforeMount(async () => {
configStore.fetchConfig()
configStore.fetchCustomConfig()
})
configStore.fetchConfig();
configStore.fetchCustomConfig();
});
configStore.$subscribe(() => {
const config = configStore.getConfig
const customConfig = configStore.getCustomConfig
if((configFilterRef.value.length > 0 && isEqual(configFilterRef.value, configStore.getFilterConfig)) && customObjRef.value && isEqual(customObjRef.value, customTempObjRef.value)) {
return
const config = configStore.getConfig;
const customConfig = configStore.getCustomConfig;
if (
configFilterRef.value.length > 0 &&
isEqual(configFilterRef.value, configStore.getFilterConfig) &&
customObjRef.value &&
isEqual(customObjRef.value, customTempObjRef.value)
) {
return;
}
if (config == null || customConfig == null)
return
if (config == null || customConfig == null) return;
// console.log("config", config, "customConfig", customConfig);
/* rao
const showKeys = [...customConfig].filter(key => !asideMap[key].isDefaultFilter)// 获取customConfig 非isDefaultFilter的选项
const defaultKeys = Object.keys(asideMap).filter(key => asideMap[key].isDefaultFilter)// 获取asideMap isDefaultFilter的选项
showKeys.unshift(...defaultKeys)
*/
let sortKeyList: any = [];
configStore.getFilterConfig.map((item: any) => {
sortKeyList.push(item.id);
@ -111,35 +127,37 @@ configStore.$subscribe(() => {
const showKeys = [...sortKeyList];
Object.keys(config).forEach((key) => {
if (key.startsWith('iz') && asideMap[key] !== undefined)
asideVisible[key] = (showKeys.includes(key) || asideMap[key].isDefaultFilter) && config[key] === 'Y'
})
if(customObjRef.value) {// 赋值
Object.keys(customObjRef.value).map(key => {
if(asideMap.hasOwnProperty(key)) {
const str = key.toLowerCase()
if (key.startsWith("iz") && asideMap[key] !== undefined)
asideVisible[key] =
(showKeys.includes(key) || asideMap[key].isDefaultFilter) && config[key] === "Y";
});
if (customObjRef.value) {
// 赋值
Object.keys(customObjRef.value).map((key) => {
if (asideMap.hasOwnProperty(key)) {
const str = key.toLowerCase();
// console.log("customObjRef.value[str]1111111111111", customObjRef.value[str]);
if(str == "izsimilarity") {
if(typeof customObjRef.value[str] == "string") {
customObjRef.value[str] = customObjRef.value[str].split(',');
if (str == "izsimilarity") {
if (typeof customObjRef.value[str] == "string") {
customObjRef.value[str] = customObjRef.value[str].split(",");
}
asideValue[key] = customObjRef.value[str];// 赋值
asideValue[key] = customObjRef.value[str]; // 赋值
console.log("相似度2222222222", asideValue[key]);
}else if(str == "izyear") {
if(typeof customObjRef.value[str] == "string") {
let time = customObjRef.value[str].split('-');
time[0] = (new Date(time[0])).getTime();
time[1] = (new Date(time[1])).getTime();
} else if (str == "izyear") {
if (typeof customObjRef.value[str] == "string") {
let time = customObjRef.value[str].split("-");
time[0] = new Date(time[0]).getTime();
time[1] = new Date(time[1]).getTime();
customObjRef.value[str] = time;
}
asideValue[key] = customObjRef.value[str];// 赋值
asideValue[key] = customObjRef.value[str]; // 赋值
console.log("时间2222222222", asideValue[key]);
}else if((str != 'izsimilarity' && str != "izyear") && customObjRef.value[str]) {
} else if (str != "izsimilarity" && str != "izyear" && customObjRef.value[str]) {
console.log("customObjRef.value[str]222222", customObjRef.value[str]);
// let list = customObjRef.value[str].split(',');
// console.log("list222222", list);
asideValue[key] = customObjRef.value[str];// 赋值
}else {
asideValue[key] = customObjRef.value[str]; // 赋值
} else {
asideValue[key] = null;
}
// asideMap[str].defaultValue = customObjRef.value[str];// 赋值
@ -154,36 +172,35 @@ configStore.$subscribe(() => {
}
// console.log("showKeys", showKeys);
const items = showKeys.reduce((acc, key) => {
const { render } = asideMap[key]
const { render } = asideMap[key];
if (render !== false) {
const str = key.toLowerCase()
const str = key.toLowerCase();
const o = {
key: str,
config: asideMap[str],
}
return [...acc, o]
};
return [...acc, o];
} else {
return acc;
}
else {
return acc
}
}, [])
}, []);
console.log("showItems=================================", items);
showItems.value = items
showItems.value = items;
configFilterRef.value = configStore.getFilterConfig;
})
});
const asideEnter = ref(false)
const asideEnter = ref(false);
const showCollapse = computed(() => {
return collapse.value ? true : asideEnter.value
})
return collapse.value ? true : asideEnter.value;
});
const showSearch = ref(false)
const showSearch = ref(false);
function setShowSearch(value: boolean) {
showSearch.value = value
showSearch.value = value;
}
const newFilterOk = () => {
filterModalRef.value.query(
@ -194,21 +211,21 @@ const newFilterOk = () => {
// 滚动容器，让key对应模块处于可视区域
function scrollHandler(key: string) {
const element = document.querySelector(`#${key}`)
element?.scrollIntoView(true)
const element = document.querySelector(`#${key}`);
element?.scrollIntoView(true);
}
// 选择某个过滤配置，刷新图片墙 -> 筛选搜索条件
async function filterHandler(searchId: string) {
// emitter.emit('filter', searchId)
const res = await getFilterList({userSearchId: searchId});
const res = await getFilterList({ userSearchId: searchId });
// console.log("顾虑结果", res);
if(res.code == "OK") {
if (res.code == "OK") {
let obj = res.data;
customObjRef.value = res.data;
let showKeys: any[] = [];
Object.keys(obj).map(key => {
if(asideMap.hasOwnProperty(key)) {
Object.keys(obj).map((key) => {
if (asideMap.hasOwnProperty(key)) {
showKeys.push(key);
}
});
@ -218,9 +235,9 @@ async function filterHandler(searchId: string) {
}
function editFilter(filter: any) {
const modal = unref(newFilterModalRef)! as any
modal.showModal()
modal.edit(filter)
const modal = unref(newFilterModalRef)! as any;
modal.showModal();
modal.edit(filter);
}
function updateComponent(key, e) {
@ -228,15 +245,26 @@ function updateComponent(key, e) {
console.log("tempAsideValue跟新值", configStore.getAsideValue, asideValue);
// let tempAsideValue = configStore.getAsideValue || asideValue;
let tempobj = cloneDeep(asideValue);
console.log(tempobj,'tempobj')
console.log(tempobj, "tempobj");
tempobj[key] = e;
console.log(tempobj, 'tempobj After')
console.log(tempobj, "tempobj After");
customObjRef.value = tempobj;
// asideValue = Object.assign({}, asideValue, tempobj);
console.log("asideValue跟新值", tempobj);
configStore.setAsideValue(tempobj);
}
const handleOk = (item: any) => {
console.log("handleOk", item);
if (item) {
AdvanceFilterRef.value.setCurrentlySelectedAdvanced(item.searchname);
filterHandler(item.id);
} else {
AdvanceFilterRef.value.setCurrentlySelectedAdvanced("高级筛选");
filterHandler("");
}
};
// watch(asideValue, (newVal) => {
// console.log("asideValue处理后", newVal);
// configStore.setAsideValue(newVal)
@ -271,12 +299,18 @@ function updateComponent(key, e) {
@update:search="setShowSearch(true)"
@show-custom="showModal(customModalRef)"
@show-filter="showModal(filterModalRef)"
ref="AdvanceFilterRef"
/>
</div>
<component
:is="item.config.component" v-for="(item, index) in showItems" :id="item.key" :key="item.key" v-model:value="asideValue[item.key]"
:label="item.config.label" @update:value="e=>updateComponent(item.key, e)"
:is="item.config.component"
v-for="(item, index) in showItems"
:id="item.key"
:key="item.key"
v-model:value="asideValue[item.key]"
:label="item.config.label"
@update:value="(e) => updateComponent(item.key, e)"
/>
<!-- 过滤列表 -->
@ -284,6 +318,7 @@ function updateComponent(key, e) {
ref="filterModalRef"
@edit-filter="editFilter"
@show-new-filter="showModal(newFilterModalRef)"
@handleOk="handleOk"
/>
<!-- 新增过滤 -->
<NewFilterModalVue ref="newFilterModalRef" @onOk="newFilterOk" />

8
src/views/home/aside/comp/AdvanceFilter.vue
Unescape View File

@ -253,6 +253,14 @@ const moveEnd = () => {
sort(v.id, index);
});
};
const setCurrentlySelectedAdvanced = (value:string)=>{
currentlySelectedAdvanced.value = value;
}
defineExpose({
setCurrentlySelectedAdvanced
})
</script>
<template>

328
src/views/home/aside/comp/modals/FilterModal.vue
Unescape View File

@ -8,122 +8,123 @@ import {
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 '../Action.vue'
import { deleteCondition, getConditionList, sort } from '@/api/home/filter'
import type { FilterSearchParam } from '/#/api'
defineOptions({ name: 'FilterModal' })
} 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 "../Action.vue";
import { deleteCondition, getConditionList, sort } from "@/api/home/filter";
import type { FilterSearchParam } from "/#/api";
import selection from "naive-ui/es/_internal/selection";
defineOptions({ name: "FilterModal" });
const $message = window["$message"];
const props = defineProps({
type: {
type: Number,
default: () => 0,
},
})
});
const emit = defineEmits<{
(e: 'showNewFilter'): void
(e: 'editFilter', filter: any): void
}>()
(e: "showNewFilter"): void;
(e: "editFilter", filter: any): void;
(e: "handleOk", item: any): void;
}>();
const show = ref(false)
const show = ref(false);
const cardStyle = {
'width': '800px',
'height': '830px',
'--n-padding-bottom': '10px',
'--n-padding-left': '10px',
}
width: "800px",
height: "830px",
"--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;
}
function sortData(row) {
console.log('sortData', row)
if (row.order == 'descend') {
console.log("sortData", row);
if (row.order == "descend") {
tableData.value.sort(
(a, b) =>
new Date(a[row.columnKey]).getTime() - new Date(b[row.columnKey]).getTime(),
)
}
else if (row.order == 'ascend') {
new Date(a[row.columnKey]).getTime() - new Date(b[row.columnKey]).getTime()
);
} else if (row.order == "ascend") {
tableData.value.sort(
(a, b) =>
new Date(b[row.columnKey]).getTime() - new Date(a[row.columnKey]).getTime(),
)
}
else {
new Date(b[row.columnKey]).getTime() - new Date(a[row.columnKey]).getTime()
);
} else {
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> = [
{
type: 'selection',
type: "selection",
},
{
title: '操作',
key: 'action',
title: "操作",
key: "action",
render(row) {
return h(Action, {
options: [
{ label: '编辑', key: 1 },
{ label: '删除', key: 2 },
{ label: "编辑", key: 1 },
{ label: "删除", key: 2 },
],
id: row.id,
select,
})
});
},
},
// j
{
title: '名称',
key: 'searchname',
title: "名称",
key: "searchname",
ellipsis: {
tooltip: true,
},
},
{
title: '创建者',
key: 'createby',
title: "创建者",
key: "createby",
},
{
title: '创建时间',
key: 'createtime',
title: "创建时间",
key: "createtime",
width: 180,
sorter: (row1, row2) => {
// tableData.value.sort(
// (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: '更新者',
key: 'updateby',
title: "更新者",
key: "updateby",
},
{
title: '更新时间',
key: 'updatetime',
title: "更新时间",
key: "updatetime",
width: 180,
},
]
const total = ref(0)
const loading = ref(true)
];
const total = ref(0);
const loading = ref(true);
const pagination = reactive({
page: 1,
pageCount: 1,
@ -131,71 +132,75 @@ const pagination = reactive({
showSizePicker: true,
pageSizes: [
{
label: '10 每页',
label: "10 每页",
value: 10,
},
{
label: '15 每页',
label: "15 每页",
value: 15,
},
{
label: '30 每页',
label: "30 每页",
value: 30,
},
{
label: '50 每页',
label: "50 每页",
value: 50,
},
],
showQuickJumper: true,
prefix: () => `共 ${total.value} 条数据`,
})
const tableData = ref<Array<RowData>>([])
const keyword = ref('')
});
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, props.type)
const { data, pageCount, total: totalCount } = result
tableData.value = data
pagination.page = page
total.value = totalCount
pagination.pageCount = pageCount
loading.value = false
search_searchname: { value: keyword.value, op: "like", type: "string" },
};
const result = await getConditionList(
{ pageNo: page, pageSize },
searchParam,
props.type
);
const { data, pageCount, total: totalCount } = result;
tableData.value = data;
pagination.page = page;
total.value = totalCount;
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, id: string) {
switch (key) {
case 1:
editSelection(id)
break
editSelection(id);
break;
case 2:
deleteSelection(id)
break
deleteSelection(id);
break;
default:
break
break;
}
}
@ -205,124 +210,137 @@ function editSelection(id) {
// $message.error("请选中一条过滤");
// return;
// }
const selectedId = id
const selectedId = id;
const selectedFilter = tableData.value.find((item: any) => {
return item.id === selectedId
})
return item.id === selectedId;
});
emit('editFilter', selectedFilter)
emit("editFilter", selectedFilter);
// closeModal();
}
function deleteSelection(id = '') {
function deleteSelection(id = "") {
if (selectionIds.value.length === 0) {
deleteCondition({ ids: id }).then(() => {
query(pagination.page, pagination.pageSize)
})
return
query(pagination.page, pagination.pageSize);
});
return;
}
deleteCondition({ ids: selectionIds.value.join(',') }).then(() => {
selectionIds.value = []
query(pagination.page, pagination.pageSize)
})
deleteCondition({ ids: selectionIds.value.join(",") }).then(() => {
selectionIds.value = [];
query(pagination.page, pagination.pageSize);
});
}
async function handlePageChange(currentPage) {
if (loading.value)
return
pagination.page = currentPage
const { pageSize } = pagination
await query(currentPage, pageSize)
if (loading.value) return;
pagination.page = currentPage;
const { pageSize } = pagination;
await query(currentPage, pageSize);
}
async function handlePageSizeChange(currentPageSize) {
if (loading.value)
return
if (loading.value) return;
const { page } = pagination
pagination.pageSize = currentPageSize
await query(page, currentPageSize)
const { page } = pagination;
pagination.pageSize = currentPageSize;
await query(page, currentPageSize);
}
function handleClick() {
emit('showNewFilter')
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>>();
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
selectionIds.value = [];
show.value = false;
}
defineExpose({
showModal,
query,
pagination,
})
});
const inputHandler = debounce((word) => {
keyword.value = word
query(1, 5)
}, 300)
keyword.value = word;
query(1, 5);
}, 300);
const showSearch = computed(() => {
return selectionIds.value.length > 0
})
return selectionIds.value.length > 0;
});
const handleOk = () => {
if (selectionIds.value.length > 1) {
$message.error("只能选择一条筛选条件");
return;
}
if (selectionIds.value.length == 1) {
const selectedId = selectionIds.value[0];
let item = tableData.value.find(v=>v.id == selectedId);
emit("handleOk", item);
}
if (selectionIds.value.length == 0) {
emit("handleOk", "");
}
closeModal();
};
</script>
<template>
@ -348,7 +366,8 @@ const showSearch = computed(() => {
<span
:style="{ 'margin-left': '18px', 'font-size': '16px' }"
class="wrapper-info-title"
>基本信息</span>
>基本信息</span
>
</div>
</div>
@ -380,11 +399,13 @@ const showSearch = computed(() => {
</n-button>
</div>
<div class="msg">
<span>已选中
<span
>已选中
<span style="color: #507afd; font-size: 16px">{{
selectionIds.length
}}</span>
项</span>
项</span
>
<a @click="selectionIds = []">清空</a>
</div>
</div>
@ -411,7 +432,7 @@ const showSearch = computed(() => {
</div>
<template #footer>
<div class="wrapper-footer">
<n-button style="background-color: #507AFD;" type="info" @click="closeModal">
<n-button style="background-color: #507afd" type="info" @click="handleOk">
确定
</n-button>
<n-button secondary style="margin-left: 15px" @click="closeModal">
@ -489,11 +510,10 @@ const showSearch = computed(() => {
font-weight: bold !important;
}
::v-deep(table thead tr th) {
background-color: #FAFAFA !important;
background-color: #fafafa !important;
}
::v-deep(.n-button--secondary) {
background-color: #fff;
border: 1px solid #cad2dd !important;
}
</style>

2
src/views/home/aside/comp/modals/NewFilterModal.vue
Unescape View File

@ -84,7 +84,7 @@ const formRef = ref<FormInst | null>(null)
const formValue = reactive<FormType>({
name: null,
logic: 'where',
logic: 'and',
conditions: [
{
type: null,

2
src/views/task/modal/NewFilterModal.vue
Unescape View File

@ -85,7 +85,7 @@ const formRef = ref<FormInst | null>(null);
const formValue = reactive<FormType>({
name: null,
logic: "where",
logic: "and",
conditions: [
{
type: null,

Write Preview
Loading…
Cancel
Save