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

feat: 修改bug

Browse Source
pull/168/head
raofuzi 1 year ago
parent 28dde2bfa4
commit 663afdaf5e
4 changed files with 268 additions and 246 deletions
Show Stats Download Patch File Download Diff File

8
components.d.ts vendored
Unescape View File

@ -11,7 +11,6 @@ declare module 'vue' {
BasicModal: typeof import('./src/components/Modal/BasicModal.vue')['default'] BasicModal: typeof import('./src/components/Modal/BasicModal.vue')['default']
DataHeader: typeof import('./src/components/DataHeader/index.vue')['default'] DataHeader: typeof import('./src/components/DataHeader/index.vue')['default']
NAvatar: typeof import('naive-ui')['NAvatar'] NAvatar: typeof import('naive-ui')['NAvatar']
NBackTop: typeof import('naive-ui')['NBackTop']
NButton: typeof import('naive-ui')['NButton'] NButton: typeof import('naive-ui')['NButton']
NCard: typeof import('naive-ui')['NCard'] NCard: typeof import('naive-ui')['NCard']
NCheckbox: typeof import('naive-ui')['NCheckbox'] NCheckbox: typeof import('naive-ui')['NCheckbox']
@ -22,8 +21,6 @@ declare module 'vue' {
NDialogProvider: typeof import('naive-ui')['NDialogProvider'] NDialogProvider: typeof import('naive-ui')['NDialogProvider']
NDivider: typeof import('naive-ui')['NDivider'] NDivider: typeof import('naive-ui')['NDivider']
NDropdown: typeof import('naive-ui')['NDropdown'] NDropdown: typeof import('naive-ui')['NDropdown']
NEllipsis: typeof import('naive-ui')['NEllipsis']
NEmpty: typeof import('naive-ui')['NEmpty']
NForm: typeof import('naive-ui')['NForm'] NForm: typeof import('naive-ui')['NForm']
NFormItem: typeof import('naive-ui')['NFormItem'] NFormItem: typeof import('naive-ui')['NFormItem']
NGi: typeof import('naive-ui')['NGi'] NGi: typeof import('naive-ui')['NGi']
@ -35,7 +32,6 @@ declare module 'vue' {
NModal: typeof import('naive-ui')['NModal'] NModal: typeof import('naive-ui')['NModal']
NNotificationProvider: typeof import('naive-ui')['NNotificationProvider'] NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
NotPassed: typeof import('./src/components/NotPassed.vue')['default'] NotPassed: typeof import('./src/components/NotPassed.vue')['default']
NPopconfirm: typeof import('naive-ui')['NPopconfirm']
NPopover: typeof import('naive-ui')['NPopover'] NPopover: typeof import('naive-ui')['NPopover']
NPopselect: typeof import('naive-ui')['NPopselect'] NPopselect: typeof import('naive-ui')['NPopselect']
NProgress: typeof import('naive-ui')['NProgress'] NProgress: typeof import('naive-ui')['NProgress']
@ -45,11 +41,7 @@ declare module 'vue' {
NSpace: typeof import('naive-ui')['NSpace'] NSpace: typeof import('naive-ui')['NSpace']
NSpin: typeof import('naive-ui')['NSpin'] NSpin: typeof import('naive-ui')['NSpin']
NSwitch: typeof import('naive-ui')['NSwitch'] NSwitch: typeof import('naive-ui')['NSwitch']
NTabPane: typeof import('naive-ui')['NTabPane']
NTabs: typeof import('naive-ui')['NTabs']
NTag: typeof import('naive-ui')['NTag'] NTag: typeof import('naive-ui')['NTag']
NTimeline: typeof import('naive-ui')['NTimeline']
NTimelineItem: typeof import('naive-ui')['NTimelineItem']
NTooltip: typeof import('naive-ui')['NTooltip'] NTooltip: typeof import('naive-ui')['NTooltip']
NUpload: typeof import('naive-ui')['NUpload'] NUpload: typeof import('naive-ui')['NUpload']
NUploadDragger: typeof import('naive-ui')['NUploadDragger'] NUploadDragger: typeof import('naive-ui')['NUploadDragger']

28
src/store/modules/final.ts
Unescape View File

@ -2,6 +2,8 @@ import { defineStore } from 'pinia'
import { store } from '@/store' import { store } from '@/store'
import { getFilter } from '@/api/home/filter' import { getFilter } from '@/api/home/filter'
import { getConfig } from '@/api/system/user' import { getConfig } from '@/api/system/user'
import { asideMap } from "@/config/final";
import { cloneDeep, isEqual } from "lodash-es";
import type { AsideConfig } from '/#/api' import type { AsideConfig } from '/#/api'
@ -29,7 +31,7 @@ export const useFinalStore = defineStore({
filterConfig: [], filterConfig: [],
}), }),
getters: { getters: {
getConfig(): AsideConfig | null { getSystemConfig(): AsideConfig | null {
return this.systemConfig return this.systemConfig
}, },
getCustomConfig(): string[] | null { getCustomConfig(): string[] | null {
@ -52,7 +54,7 @@ export const useFinalStore = defineStore({
}, },
}, },
actions: { actions: {
setConfig(config: AsideConfig) { setSystemConfig(config: AsideConfig) {
this.systemConfig = config this.systemConfig = config
console.log("systemConfig----------", config); console.log("systemConfig----------", config);
}, },
@ -82,14 +84,28 @@ export const useFinalStore = defineStore({
async fetchConfig() { async fetchConfig() {
const response = await getConfig() const response = await getConfig()
console.log("response.data----------", response.data); console.log("response.data----------", response.data);
this.setConfig(response.data) this.setSystemConfig(response.data)
return response.data return response.data
}, },
// // 获取终审个性化配置
// async fetchCustomConfig() {
// const res = await getFilter(1)
// const { data } = res
// const list = data && data.searchcount ? data.searchcount.split(',') : [];
// console.log("listkey---------------", list);
// this.customConfig = list
// return list
// },
// 获取终审个性化配置 // 获取终审个性化配置
async fetchCustomConfig() { async fetchCustomConfig() {
const res = await getFilter(1) let list: any = [];
const { data } = res let tempAsideMap = cloneDeep(asideMap);
const list = data && data.searchcount ? data.searchcount.split(',') : [] Object.keys(tempAsideMap).map(key => {
if(!tempAsideMap[key].isDefaultFilter) {
list.push(key);
}
});
console.log("listkey---------------", list);
this.customConfig = list this.customConfig = list
return list return list
}, },

132
src/views/final/aside/Aside.vue
Unescape View File

@ -22,8 +22,8 @@ import type { AsideEntity } from "@/config/aside";
import { asideMap } from "@/config/final"; import { asideMap } from "@/config/final";
import type { AsideConfig } from "/#/api"; import type { AsideConfig } from "/#/api";
import emitter from "@/utils/mitt"; import emitter from "@/utils/mitt";
import { cloneDeep, isEqual } from "lodash-es";
import { getFilterList } from "@/api/home/main"; import { getFilterList } from "@/api/home/main";
import { cloneDeep, isEqual } from "lodash-es";
const emit = defineEmits(["inputChange"]); const emit = defineEmits(["inputChange"]);
const finalStore = useFinal(); const finalStore = useFinal();
@ -33,6 +33,16 @@ const 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 }[]>([]);
const initAsideValueRef = ref<any>(null); // 所有左侧模块的值(初始值)
const customObjRef = ref<any>(null); // 获取高级筛选获取的值
const customTempObjRef = ref<any>(null); // 获取高级筛选获取的值(作对比)
initAsideValueRef.value = cloneDeep(asideMap);
onBeforeMount(async () => {
finalStore.fetchConfig();
finalStore.fetchCustomConfig();
});
Object.keys(asideMap).forEach((key) => { Object.keys(asideMap).forEach((key) => {
const { defaultValue, inFilterList } = asideMap[key]; const { defaultValue, inFilterList } = asideMap[key];
@ -42,9 +52,6 @@ Object.keys(asideMap).forEach((key) => {
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 customTempObjRef = ref<any>(null); // 获取高级筛选获取的值(作对比)
const configFilterRef = ref<any>([]); // 获取排序的值
const AdvanceFilterRef: any = ref(null); const AdvanceFilterRef: any = ref(null);
function showModal(modalRef: any) { function showModal(modalRef: any) {
@ -66,7 +73,6 @@ mousetrap.bind("[", collapseHandler);
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
computeSlideHeight(); computeSlideHeight();
// let tempAsideValue = cloneDeep(asideValue);
}); });
}); });
@ -102,97 +108,43 @@ function computeSlideHeight() {
useWindowSizeFn(computeSlideHeight, 280); useWindowSizeFn(computeSlideHeight, 280);
onBeforeMount(async () => { onBeforeMount(async () => {
finalStore.fetchConfig();
finalStore.fetchCustomConfig(); finalStore.fetchCustomConfig();
}); });
nextTick(()=>{ nextTick(()=>{
finalStore.$subscribe(() => { finalStore.$subscribe(() => {
const config = finalStore.getConfig;
const customConfig = finalStore.getCustomConfig; const customConfig = finalStore.getCustomConfig;
console.log("customConfig", customConfig, config); console.log("customConfig111111111---------------", customConfig);
console.log("configFilterRef", configFilterRef.value, finalStore.getFilterConfig); if (customConfig === null) return;
console.log("customObjRef", customObjRef.value, customTempObjRef.value);
if (
configFilterRef.value.length > 0 &&
isEqual(configFilterRef.value, finalStore.getFilterConfig) &&
customObjRef.value &&
isEqual(customObjRef.value, customTempObjRef.value)
) {
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 = [];
finalStore.getFilterConfig.map((item: any) => {
sortKeyList.push(item?.id);
});
const showKeys = [...sortKeyList];
Object.keys(config).forEach((key) => { const showKeys: string[] = [...customConfig];
if (key.startsWith("iz") && asideMap[key] !== undefined) const defaultKeys = Object.keys(asideMap).filter(
(key) => asideMap[key].isDefaultFilter
);
showKeys.unshift(...defaultKeys);
Object.keys(asideMap).forEach((key) => {
// 设置显示的或者默认显示的
if (key.startsWith("iz"))
asideVisible[key] = asideVisible[key] =
(showKeys.includes(key) || asideMap[key].isDefaultFilter) && config[key] === "Y"; asideMap[key] && (showKeys.includes(key) || asideMap[key].isDefaultFilter);
});
if (customObjRef.value) {
// 赋值
Object.keys(customObjRef.value).map((key) => {
if (asideMap.hasOwnProperty(key)) {
const str = key.toLowerCase();
if (str == "izsimilarity") {
if (typeof customObjRef.value[str] == "string") {
customObjRef.value[str] = customObjRef.value[str].split(",");
}
asideValue[key] = customObjRef.value[str]; // 赋值
} 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]; // 赋值
} else if (str != "izsimilarity" && str != "izyear" && customObjRef.value[str]) {
asideValue[key] = customObjRef.value[str]; // 赋值
} else {
asideValue[key] = null;
}
// asideMap[str].defaultValue = customObjRef.value[str];// 赋值
}
}); });
customTempObjRef.value = customObjRef.value;
console.log("asideValue直接处理后的结果", asideValue);
console.log("customTempObjRef.value", customTempObjRef.value);
let tempobj = cloneDeep(asideValue);
console.log("tempObj", tempobj);
finalStore.setAsideValue(tempobj);
}
const items = showKeys.reduce((acc, key) => { const items = showKeys.reduce((acc, key) => {
const currentData = asideMap[key]; if (asideMap[key]) {
const render = currentData?.render; const config = {
if (render !== false) { key,
const str = key?.toLowerCase(); config: asideMap[key],
const o = {
key: str,
config: asideMap[str],
}; };
return [...acc, o]; return [...acc, config];
} else { } else {
return acc; return acc;
} }
}, []); }, []);
console.log("showItems=================================", items); console.log("showItems111111111---------------", items);
showItems.value = items; showItems.value = items;
configFilterRef.value = finalStore.getFilterConfig;
}); });
}); })
watch(asideVisible, (newVal) => { watch(asideVisible, (newVal) => {
Object.keys(asideValue).forEach((key) => { Object.keys(asideValue).forEach((key) => {
@ -222,7 +174,9 @@ function scrollHandler(key: string) {
} }
async function filterHandler(searchId: string) { async function filterHandler(searchId: string) {
emitter.emit("filter-final", 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; let obj = res.data;
customObjRef.value = res.data; customObjRef.value = res.data;
@ -232,10 +186,9 @@ async function filterHandler(searchId: string) {
showKeys.push(key); showKeys.push(key);
} }
}); });
// console.log(showKeys); console.log("showKeys1111111111111111", showKeys);
finalStore.setCustomConfig(showKeys); finalStore.setCustomConfig(showKeys);
} }
emitter.emit("filter-final", searchId);
} }
function editFilter(filter: any) { function editFilter(filter: any) {
@ -244,20 +197,6 @@ function editFilter(filter: any) {
modal.edit(filter); modal.edit(filter);
} }
function updateComponent(key, e) {
console.log("跟新值", key, e);
console.log("tempAsideValue跟新值", finalStore.getAsideValue, asideValue);
// let tempAsideValue = finalStore.getAsideValue || asideValue;
let tempobj = cloneDeep(asideValue);
console.log(tempobj, "tempobj");
tempobj[key] = e;
console.log(tempobj, "tempobj After");
customObjRef.value = tempobj;
// asideValue = Object.assign({}, asideValue, tempobj);
console.log("asideValue跟新值", tempobj);
finalStore.setAsideValue(tempobj);
}
watch(asideValue, (newVal) => { watch(asideValue, (newVal) => {
finalStore.setAsideValue(newVal); finalStore.setAsideValue(newVal);
}); });
@ -314,10 +253,9 @@ const handleOk = (item: any) => {
:is="item.config.component" :is="item.config.component"
v-for="(item, index) in showItems" v-for="(item, index) in showItems"
:id="item.key" :id="item.key"
:key="item.key" :key="index"
v-model:value="asideValue[item.key]" v-model:value="asideValue[item.key]"
:label="item.config.label" :label="item.config.label"
@update:value="(e) => updateComponent(item.key, e)"
/> />
<!-- 筛选 --> <!-- 筛选 -->

314
src/views/final/comp/CustomFilterModalVue.vue
Unescape View File

@ -1,18 +1,43 @@
<script lang="ts" setup> <script lang="ts" setup>
import { debounce, difference } from 'lodash-es' import { debounce, difference } from 'lodash-es'
import { computed, ref, watch } from 'vue' import { computed, ref, watch, onMounted } from 'vue'
import { VueDraggable } from 'vue-draggable-plus' import { VueDraggable } from 'vue-draggable-plus'
import { setFilter } from '@/api/home/filter' import { setFilter } from '@/api/home/filter'
import { asideMap } from '@/config/final' import { asideMap } from '@/config/final'
import { useFinal } from '@/store/modules/final' import { useFinal } from '@/store/modules/final'
import { cloneDeep, isEqual } from "lodash-es";
const show = ref(false) const show = ref(false)
const finalStore = useFinal()
const checkAll = ref(false) const checkAll = ref(false)
const selectIds = ref<string[]>([]) const selectIds = ref<string[]>([])
const finalStore = useFinal() const tempList = ref<string[]>([])
function showModal() { function showModal() {
show.value = true show.value = true
// 重置左右列表数据
const config = finalStore.getSystemConfig
const customConfig = finalStore.getCustomConfig
console.log('开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------',config, customConfig)
if (config == null || customConfig == null)
return
if (tempList.value.length > 0 && isEqual(tempList.value, finalStore.getFilterConfig))
return
const { showList, hideList } = generatList(config, customConfig)
tempList.value = cloneDeep(showList)
if (tempList.value.length > 0)
finalStore.setFilterConfig(tempList.value)
onList.value = showList
offList.value = hideList
// 重置全选状态
checkAll.value = hideList.every(item => item.checked)
// 重置输入框查询条件
offKeyword.value = ''
onKeyword.value = ''
} }
function closeModal() { function closeModal() {
@ -36,16 +61,16 @@ defineExpose({
showModal, showModal,
}) })
function generateDefaultList() { function generateDefaultList(config) {
return Object.keys(asideMap).reduce((acc, key) => { return Object.keys(asideMap).reduce((acc, key) => {
const { label, isDefaultFilter } = asideMap[key] const { label, isDefaultFilter } = asideMap[key]
// 默认开启配置 // 个人配置开启且系统配置开启
if (isDefaultFilter) { if (isDefaultFilter && config[key] === 'Y') {
const config = { const config = {
id: key, id: key,
name: label || '未配置', name: label || '未配置',
fix: isDefaultFilter, fix: true,
checked: true, checked: true,
} }
return [...acc, config] return [...acc, config]
@ -56,20 +81,21 @@ function generateDefaultList() {
}, []) }, [])
} }
function generatList(customConfig) { function generatList(config, customConfig) {
const keys = Object.keys(asideMap) const keys = Object.keys(config)
let onList: object[] = [] let onList: object[] = []
const offList: object[] = [] const offList: object[] = []
const showKeys = customConfig.map((key: string) => key.toLowerCase()) const showKeys = [...customConfig]
for (const key of keys) { for (const key of keys) {
if (!key.startsWith('iz') || asideMap[key] === undefined) if (!key.startsWith('iz') || config[key] === 'N' || asideMap[key] === undefined)
continue continue
const name = asideMap[key]?.label const name = asideMap[key]?.label
const isDefaultFilter = asideMap[key]?.isDefaultFilter const isDefaultFilter = asideMap[key]?.isDefaultFilter
// 不是默认配置 // 系统配置为Y，且不是默认配置
if (!isDefaultFilter) {
const isChecked = asideMap[key].isDefaultFilter || showKeys.includes(key) const isChecked = asideMap[key].isDefaultFilter || showKeys.includes(key)
offList.push({ offList.push({
@ -78,15 +104,16 @@ function generatList(customConfig) {
fix: isDefaultFilter, fix: isDefaultFilter,
checked: isChecked, checked: isChecked,
}) })
if (isChecked && !selectIds.value.includes(key))
isChecked && selectIds.value.push(key) isChecked && selectIds.value.push(key)
} }
}
onList = showKeys.reduce((acc, key) => { onList = showKeys.reduce((acc, key) => {
const isDefaultFilter = asideMap[key]?.isDefaultFilter const isDefaultFilter = asideMap[key]?.isDefaultFilter
// 把默认显示的过滤掉(理论上不会出现这种情况) // 也需要系统配置开启（可能个人开启后，系统配置关闭） && 把默认显示的过滤掉(理论上不会出现这种情况)
if (isDefaultFilter === false) { if (config[key] === 'Y' && isDefaultFilter === false) {
const config = { const config = {
id: key, id: key,
name: asideMap[key].label || '未配置', name: asideMap[key].label || '未配置',
@ -99,34 +126,85 @@ function generatList(customConfig) {
} }
}, []) }, [])
const fixedList = generateDefaultList() const fixedList = generateDefaultList(config)
offList.unshift(...fixedList)
onList.unshift(...fixedList) onList.unshift(...fixedList)
return { showList: onList, hideList: offList } console.log('原始筛选条件customConfig', customConfig)
// onList按照customConfig排序
const tempOnList = cloneDeep(onList)
console.log('原始筛选条件tempOnList', tempOnList)
const sortKeyList: any = []
finalStore.getFilterConfig.map((item: any) => {
sortKeyList.push(item.id)
})
console.log('原始筛选条件sortKeyList', sortKeyList)
const sortList: any = []
if (sortKeyList.length > 0) {
sortKeyList.map((key) => {
const tempItem = tempOnList.find(item => item.id == key)
sortList.push(tempItem)
})
}
else {
customConfig.map((key) => {
const tempItem = tempOnList.find(item => item.id == key)
if(tempItem) {
sortList.push(tempItem)
}
})
}
console.log('原始筛选条件sortList', sortList)
console.log('原始筛选条件configStore.getFilterConfig', finalStore.getFilterConfig)
// return { showList: onList, hideList: offList }
return { showList: sortList, hideList: offList }
} }
finalStore.$subscribe(() => { finalStore.$subscribe(() => {
const config = finalStore.getSystemConfig
const customConfig = finalStore.getCustomConfig const customConfig = finalStore.getCustomConfig
if (customConfig === null) if (config == null || customConfig == null)
return return
console.log('tempList.value-----------', tempList.value)
console.log('finalStore.getFilterConfig-----------', finalStore.getFilterConfig)
if (tempList.value.length > 0 && isEqual(tempList.value, finalStore.getFilterConfig))
return
const { showList, hideList } = generatList(config, customConfig)
tempList.value = cloneDeep(showList)
console.log('克隆条件', tempList.value)
if (tempList.value.length > 0)
finalStore.setFilterConfig(tempList.value)
const { showList, hideList } = generatList(customConfig) // setTimeout(() => {
// }, 500);
onList.value = showList onList.value = showList
offList.value = hideList offList.value = hideList
}) })
async function handleSumbit(e: MouseEvent) { async function handleSumbit(e: MouseEvent) {
e.preventDefault() e.preventDefault()
const param = onList.value.map((item) => {
const param = onList.value
.filter(item => !asideMap[item.id].isDefaultFilter)
.map((item) => {
return item.id return item.id
}).join(',')
await setFilter({ searchcount: param, type: 0 })
const obj = await finalStore.fetchCustomConfig()
console.log('obj-------------------------------', obj)
const tempOnList = cloneDeep(onList.value)
console.log('原始筛选条件tempOnList', tempOnList)
const sortList: any = []
obj.map((key) => {
const tempItem = tempOnList.find(item => item.id == key)
sortList.push(tempItem)
}) })
.join(',') console.log('finalStore.sortList---------------', sortList)
// setTimeout(() => {
if (sortList.length > 0)
finalStore.setFilterConfig(sortList)
await setFilter({ searchcount: param, type: 1 }) // }, 500);
finalStore.fetchCustomConfig()
closeModal() closeModal()
} }
@ -147,16 +225,18 @@ function onCheckChange(checked: any, item: any) {
const index = selectIds.value.indexOf(item.id) const index = selectIds.value.indexOf(item.id)
item.checked = checked item.checked = checked
const currentIndex = offList.value.findIndex(v => v.id == item.id)
offList.value[currentIndex].checked = item.checked
if (index === -1 && checked) if (index === -1 && checked)
selectIds.value.push(item.id) selectIds.value.push(item.id)
else selectIds.value.splice(index, 1) else
index !== -1 && selectIds.value.splice(index, 1)
checkAll.value = offList.value.every(item => item.checked)
} }
const showIds = computed(() => { const showIds = computed(() => {
return onList.value.map((item) => { return onList.value.map((item) => {
return item.id return item?.id
}) })
}) })
@ -167,10 +247,7 @@ watch(
return return
const action = newVal > oldVal ? 'add' : 'remove' const action = newVal > oldVal ? 'add' : 'remove'
const diff const diff = action === 'add' ? difference(selectIds.value, showIds.value) : difference(showIds.value, selectIds.value)
= action === 'add'
? difference(selectIds.value, showIds.value)
: difference(showIds.value, selectIds.value)
if (diff.length === 0) if (diff.length === 0)
return return
@ -178,6 +255,7 @@ watch(
if (action === 'add') { if (action === 'add') {
for (const item of offList.value) { for (const item of offList.value) {
if (!item.fix && diff.includes(item.id)) { if (!item.fix && diff.includes(item.id)) {
if (item.checked) {
onList.value.push({ onList.value.push({
id: item.id, id: item.id,
name: item.name || '未配置', name: item.name || '未配置',
@ -186,6 +264,7 @@ watch(
} }
} }
} }
}
else { else {
const list = onList.value const list = onList.value
for (let index = 0; index < list.length; index++) { for (let index = 0; index < list.length; index++) {
@ -245,62 +324,59 @@ const leftInputHandler = debounce((keyword) => {
const rightInputHandler = debounce((keyword) => { const rightInputHandler = debounce((keyword) => {
onKeyword.value = keyword onKeyword.value = keyword
}, 300) }, 300)
// async function getfield() {
// let res
// res = await getAllfieldList(3)
// const userStore = useUser()
// const userInfo = userStore.getUserInfo
// res = await getfieldList(3, userInfo.id)
// }
function onMove(e) {
// 这里的e表示即将停靠的元素。
if (e?.related?.className?.indexOf('fix') !== -1)
return false
}
onMounted(() => {
// getfield()
})
</script> </script>
<template> <template>
<n-modal v-model:show="show" transform-origin="center" :mask-closable="false"> <n-modal v-model:show="show" transform-origin="center" :mask-closable="false">
<n-card <n-card class="cardstyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
class="cardstyle"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
<div class="wrapper"> <div class="wrapper">
<span class="wrapper-title" style="color: #333333;">自定义筛选</span> <span class="wrapper-title">自定义筛选</span>
<div class="wrapper-bar"> <div class="wrapper-bar">
<div class="wrapper-info" style="background-color: #F8F8F8;"> <div class="wrapper-info">
<span :style="{ 'margin-left': '18px', 'color': '#333333' }">筛选项信息</span> <span :style="{ 'margin-left': '18px' }">筛选项信息</span>
</div> </div>
</div> </div>
<n-grid cols="24" class="mt-4 proCard" responsive="screen" :x-gap="24"> <n-grid cols="24" class="mt-4 proCard" responsive="screen" :x-gap="24">
<n-grid-item span="11"> <n-grid-item span="11">
<NCard <NCard
:title="allCount" :title="allCount" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small"
class="dragcardStyle"
:segmented="{ content: true, footer: true }"
size="small"
:bordered="false" :bordered="false"
> >
<div> <div class="input_wrap">
<n-input placeholder="搜索关键词" @input="leftInputHandler"> <n-input placeholder="搜索关键词" @input="leftInputHandler">
<template #suffix> <template #suffix>
<SvgIcon size="14px" name="magnifying-1" color="#999999" /> <SvgIcon size="14px" name="magnifying-1-color999" />
</template> </template>
</n-input> </n-input>
<n-scrollbar <n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;">
style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px"
>
<div class="draggable-ul"> <div class="draggable-ul">
<div class="draggable-li" style="color:#666666"> <div class="draggable-li">
<n-checkbox <n-checkbox v-model:checked="checkAll" label="全选" :indeterminate="!checkAll" @update:checked="onCheckAllChange" />
v-model:checked="checkAll"
label="全选"
@update:checked="onCheckAllChange"
/>
</div> </div>
<div <div
v-for="item in offList" v-for="item in offList" v-show="item.name.includes(offKeyword)" :key="item.id" :class="{ 'disable-check': item.fix }"
v-show="item.name.includes(offKeyword)"
:key="item.id"
:class="{ 'disable-check': item.fix }"
class="draggable-li" class="draggable-li"
> >
<n-checkbox <n-checkbox
v-model:checked="item.checked" v-model:checked="item.checked" :label="item.name" :disabled="item.fix"
:label="item.name"
:disabled="item.fix"
@update:checked="onCheckChange($event, item)" @update:checked="onCheckChange($event, item)"
/> />
</div> </div>
@ -309,55 +385,31 @@ const rightInputHandler = debounce((keyword) => {
</div> </div>
</NCard> </NCard>
</n-grid-item> </n-grid-item>
<n-grid-item style="display: flex; align-items: center" span="2"> <n-grid-item style="display: flex;align-items: center;" span="2">
<SvgIcon size="20" name="switchsvg" /> <SvgIcon size="20" name="switchsvg" />
</n-grid-item> </n-grid-item>
<n-grid-item span="11"> <n-grid-item span="11">
<NCard <NCard
:title="selectCount" :title="selectCount" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small"
class="dragcardStyle"
:segmented="{ content: true, footer: true }"
size="small"
:bordered="false" :bordered="false"
> >
<template #header-extra> <template #header-extra>
<span class="textbtnStyle" @click="clearDragSource">清空</span> <span class="textbtnStyle" @click="clearDragSource">清空</span>
</template> </template>
<div> <div class="input_wrap">
<!-- j -->
<n-input placeholder="搜索关键词" @input="rightInputHandler"> <n-input placeholder="搜索关键词" @input="rightInputHandler">
<template #suffix> <template #suffix>
<SvgIcon size="14px" name="magnifying-1" color="#999999" /> <SvgIcon size="14px" name="magnifying-1-color999" />
</template> </template>
</n-input> </n-input>
<n-scrollbar <n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;" class="scroll">
style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px" <VueDraggable v-model="onList" class="draggable-ul" :animation="150" group="shared">
class="scroll" <div v-for="item in onList" v-show="item.name.includes(onKeyword)" :key="item.id" :draggable="true" class="cursor-move draggable-li">
> <SvgIcon name="drag" size="24" />
<VueDraggable
v-model="onList"
class="draggable-ul"
filter=".draggable-li[draggable='false']"
:animation="150"
group="shared"
>
<div
v-for="item in onList"
v-show="item.name.includes(onKeyword)"
:key="item.id"
:draggable="!item.fix"
:class="{ fix: item.fix }"
class="cursor-move draggable-li"
>
<!-- v-show="!item.fix" 判断是否为固定值 -->
<SvgIcon name="drag" size="14" />
<span class="ml-2">{{ item.name }}</span> <span class="ml-2">{{ item.name }}</span>
<SvgIcon <SvgIcon
v-if="!item.fix" v-if="!item.fix" size="16px" style="display:block;margin-left: auto;cursor: pointer;"
size="16px" name="clear" @click="removeHandler(item.id)"
style="display: block; margin-left: auto; cursor: pointer"
name="clear"
@click="removeHandler(item.id)"
/> />
</div> </div>
</VueDraggable> </VueDraggable>
@ -372,7 +424,7 @@ const rightInputHandler = debounce((keyword) => {
<n-button type="info" @click="handleSumbit"> <n-button type="info" @click="handleSumbit">
确定 确定
</n-button> </n-button>
<n-button secondary style="margin-left: 15px" @click="closeModal"> <n-button secondary style="margin-left:15px; border: 1px solid #CAD2DD;" @click="closeModal">
取消 取消
</n-button> </n-button>
</div> </div>
@ -389,18 +441,25 @@ const rightInputHandler = debounce((keyword) => {
&-title { &-title {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
color: #333333;
} }
&-bar { &-bar {
background-color: #e8e8e8; background-color: #f8f8f8 !important;
width: 100%; width: calc(100% + 12px);
margin-top: 20px; margin-top: 20px;
color: #333333;
} }
&-footer { &-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.n-button--info-type{
background: #507AFD !important;
}
.n-button--default-type{
background: #fff !important;
color: #333333;
}
} }
&-info { &-info {
@ -409,7 +468,7 @@ const rightInputHandler = debounce((keyword) => {
font-size: 14px; font-size: 14px;
&:before { &:before {
background-color: #1980ff; background-color: #1980FF;
content: ""; content: "";
width: 5px; width: 5px;
border-radius: 2px; border-radius: 2px;
@ -423,20 +482,23 @@ const rightInputHandler = debounce((keyword) => {
.dragcardStyle { .dragcardStyle {
--n-padding-bottom: 0px !important; --n-padding-bottom: 0px !important;
--n-padding-left: 0px !important; --n-padding-left: 0px !important;
::v-deep(.n-card__content) {
padding-left: 0 !important;
padding-right: 0 !important;
}
} }
.cardstyle { .cardstyle {
width: 620px; width: 620px;
height: 800px; height: 800px;
--n-padding-bottom: 16px; --n-padding-bottom: 20px;
--n-padding-left: 24px; --n-padding-left: 24px;
--n-padding-right: 24px; // background-color: #f8f8f8 !important;
--n-padding-top: 20px;
} }
.textbtnStyle { .textbtnStyle {
cursor: pointer; cursor: pointer;
color: #1980ff; color: #1980FF;
} }
.draggable-ul { .draggable-ul {
@ -452,6 +514,10 @@ const rightInputHandler = debounce((keyword) => {
align-items: center; align-items: center;
} }
.fix {
cursor: default !important;
}
.disable-check { .disable-check {
color: gainsboro; color: gainsboro;
} }
@ -465,23 +531,33 @@ const rightInputHandler = debounce((keyword) => {
--n-padding-top: 0px; --n-padding-top: 0px;
--n-padding-bottom: 12px; --n-padding-bottom: 12px;
} }
::v-deep(.n-card > .n-card-header .n-card-header__main) { ::v-deep(.n-card > .n-card-header .n-card-header__main){
font-weight: lighter !important; font-weight: lighter !important;
font-size: 14px; font-size: 14px;
color: #666666; color: #666;
} }
::v-deep(.n-scrollbar) { ::v-deep(.n-scrollbar){
border-top: none !important; border-left: 1px solid #cad2dd !important;
border-right: 1px solid #cad2dd !important;
border-bottom: 1px solid #E8E8E8 !important;
border-top: 1px solid #E8E8E8 !important;
} }
::v-deep(.n-button--info-type) { ::v-deep(.n-card__content){
background: #507afd !important; padding: 20px 24px 0 24px !important;
} }
::v-deep(.n-card__footer) { ::v-deep(.n-card__footer){
padding: 0 16px 16px 16px !important; padding: 0 24px 16px 24px !important;
} }
::v-deep(.n-button--default-type) { ::v-deep(.n-input .n-input-wrapper){
height: 44px !important;
border: 1px solid #cad2dd !important; border: 1px solid #cad2dd !important;
color: #333333; border-bottom: none !important;
background: #ffffff; // margin-bottom: -3px;
.n-input__input input{
height: 44px !important;
}
}
::v-deep(.n-button--info-type){
background: #507AFD !important;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save