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

feat: 高级筛选弹窗列表与数据联动

Browse Source
pull/98/head
刘释隆 1 year ago
parent eeded59b52
commit d13f61e972
7 changed files with 336 additions and 268 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>({ const formValue = reactive<FormType>({
name: null, name: null,
logic: 'where', logic: 'and',
conditions: [{ conditions: [{
type: null, type: null,
operator: 'eq', operator: 'eq',

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

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

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

@ -8,122 +8,123 @@ import {
reactive, reactive,
ref, ref,
unref, unref,
} from 'vue' } from "vue";
import { NDataTable } from 'naive-ui' import { NDataTable } 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 Action from "../Action.vue";
import { deleteCondition, getConditionList, sort } from '@/api/home/filter' import { deleteCondition, getConditionList, sort } from "@/api/home/filter";
import type { FilterSearchParam } from '/#/api' import type { FilterSearchParam } from "/#/api";
import selection from "naive-ui/es/_internal/selection";
defineOptions({ name: 'FilterModal' })
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;
}>();
const show = ref(false) const show = ref(false);
const cardStyle = { const cardStyle = {
'width': '800px', width: "800px",
'height': '830px', height: "830px",
'--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,
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,
@ -131,71 +132,75 @@ 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 tableData = ref<Array<RowData>>([]);
const keyword = ref('') 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({ pageNo: page, pageSize }, searchParam, props.type) const result = await getConditionList(
const { data, pageCount, total: totalCount } = result { pageNo: page, pageSize },
tableData.value = data searchParam,
pagination.page = page props.type
total.value = totalCount );
pagination.pageCount = pageCount const { data, pageCount, total: totalCount } = result;
loading.value = false tableData.value = data;
pagination.page = page;
total.value = totalCount;
pagination.pageCount = pageCount;
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:
deleteSelection(id) deleteSelection(id);
break break;
default: default:
break break;
} }
} }
@ -205,124 +210,137 @@ 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;
} }
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);
}) });
} }
async function handlePageChange(currentPage) { async function handlePageChange(currentPage) {
if (loading.value) if (loading.value) return;
return pagination.page = currentPage;
pagination.page = currentPage const { pageSize } = pagination;
const { pageSize } = pagination await query(currentPage, pageSize);
await query(currentPage, pageSize)
} }
async function handlePageSizeChange(currentPageSize) { async function handlePageSizeChange(currentPageSize) {
if (loading.value) if (loading.value) return;
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");
// show.value = false; // show.value = false;
} }
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) if (sortTable !== null) destory();
destory()
const el: HTMLDivElement = tableRef.value?.$el;
const el: HTMLDivElement = tableRef.value?.$el const tbody: HTMLElement | null = el.querySelector("tbody.n-data-table-tbody")!;
const tbody: HTMLElement | null = el.querySelector('tbody.n-data-table-tbody')! if (tbody) sortTable = Sortable.create(tbody, { onEnd, onMove });
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() {
show.value = false selectionIds.value = [];
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 = () => {
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> </script>
<template> <template>
@ -348,7 +366,8 @@ const showSearch = computed(() => {
<span <span
:style="{ 'margin-left': '18px', 'font-size': '16px' }" :style="{ 'margin-left': '18px', 'font-size': '16px' }"
class="wrapper-info-title" class="wrapper-info-title"
>基本信息</span> >基本信息</span
>
</div> </div>
</div> </div>
@ -380,11 +399,13 @@ const showSearch = computed(() => {
</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>
@ -411,7 +432,7 @@ const showSearch = computed(() => {
</div> </div>
<template #footer> <template #footer>
<div class="wrapper-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>
<n-button secondary style="margin-left: 15px" @click="closeModal"> <n-button secondary style="margin-left: 15px" @click="closeModal">
@ -489,11 +510,10 @@ const showSearch = computed(() => {
font-weight: bold !important; font-weight: bold !important;
} }
::v-deep(table thead tr th) { ::v-deep(table thead tr th) {
background-color: #FAFAFA !important; background-color: #fafafa !important;
} }
::v-deep(.n-button--secondary) { ::v-deep(.n-button--secondary) {
background-color: #fff; background-color: #fff;
border: 1px solid #cad2dd !important; border: 1px solid #cad2dd !important;
} }
</style> </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>({ const formValue = reactive<FormType>({
name: null, name: null,
logic: 'where', logic: 'and',
conditions: [ conditions: [
{ {
type: null, 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>({ const formValue = reactive<FormType>({
name: null, name: null,
logic: "where", logic: "and",
conditions: [ conditions: [
{ {
type: null, type: null,

7
src/views/worksheet/aside/Aside.vue
Unescape View File

@ -1,5 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { debounce } from 'lodash-es' import { getAllfieldList, getfieldList } from "@/api/home/filter";
import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
import { useUser } from "@/store/modules/user";
import { useWorkOrder } from "@/store/modules/workOrder";
import { getViewportOffset } from "@/utils/domUtils";
import { debounce } from "lodash-es";
import { import {
computed, computed,
defineOptions, defineOptions,

Write Preview
Loading…
Cancel
Save