|
|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { debounce } from "lodash-es";
|
|
|
|
|
import { debounce } from 'lodash-es'
|
|
|
|
|
import {
|
|
|
|
|
computed,
|
|
|
|
|
inject,
|
|
|
|
|
@ -9,89 +9,89 @@ import {
|
|
|
|
|
shallowRef,
|
|
|
|
|
unref,
|
|
|
|
|
watch,
|
|
|
|
|
} from "vue";
|
|
|
|
|
import CustomFieldModal from "../modal/CustomFieldModal.vue";
|
|
|
|
|
import AdvanceFilter from "../../home/aside/comp/AdvanceFilter.vue";
|
|
|
|
|
import { FilterModalVue } from "../../home/aside/comp/modals";
|
|
|
|
|
import NewFilterModalVue from "../modal/NewFilterModal.vue";
|
|
|
|
|
import TaskList from "./TaskList.vue";
|
|
|
|
|
import type { AsideEntity } from "@/config/aside";
|
|
|
|
|
import { useUser } from "@/store/modules/user";
|
|
|
|
|
import { getAllfieldList, getfieldList } from "@/api/home/filter";
|
|
|
|
|
import { useTaskStore } from "@/store/modules/task";
|
|
|
|
|
import emitter from "@/utils/mitt";
|
|
|
|
|
import { useConfig } from "@/store/modules/asideConfig";
|
|
|
|
|
} from 'vue'
|
|
|
|
|
import CustomFieldModal from '../modal/CustomFieldModal.vue'
|
|
|
|
|
import AdvanceFilter from '../../home/aside/comp/AdvanceFilter.vue'
|
|
|
|
|
import { FilterModalVue } from '../../home/aside/comp/modals'
|
|
|
|
|
import NewFilterModalVue from '../modal/NewFilterModal.vue'
|
|
|
|
|
import TaskList from './TaskList.vue'
|
|
|
|
|
import type { AsideEntity } from '@/config/aside'
|
|
|
|
|
import { useUser } from '@/store/modules/user'
|
|
|
|
|
import { getAllfieldList, getfieldList } from '@/api/home/filter'
|
|
|
|
|
import { useTaskStore } from '@/store/modules/task'
|
|
|
|
|
import emitter from '@/utils/mitt'
|
|
|
|
|
import { useConfig } from '@/store/modules/asideConfig'
|
|
|
|
|
|
|
|
|
|
const CustomFieldModalRef = ref(null);
|
|
|
|
|
const collapse = ref(false);
|
|
|
|
|
const taskStore = useTaskStore();
|
|
|
|
|
const taskListRef: any = ref(null);
|
|
|
|
|
const CustomFieldModalRef = ref(null)
|
|
|
|
|
const collapse = ref(false)
|
|
|
|
|
const taskStore = useTaskStore()
|
|
|
|
|
const taskListRef: any = ref(null)
|
|
|
|
|
// 展示字段
|
|
|
|
|
const showFieldList = ref<any[]>([]);
|
|
|
|
|
const search = ref("");
|
|
|
|
|
const showFieldList = ref<any[]>([])
|
|
|
|
|
const search = ref('')
|
|
|
|
|
function collapseHandler() {
|
|
|
|
|
collapse.value = !collapse.value;
|
|
|
|
|
collapse.value = !collapse.value
|
|
|
|
|
}
|
|
|
|
|
const mousetrap = inject("mousetrap") as any;
|
|
|
|
|
mousetrap.bind("[", collapseHandler);
|
|
|
|
|
const mousetrap = inject('mousetrap') as any
|
|
|
|
|
mousetrap.bind('[', collapseHandler)
|
|
|
|
|
const asideWidth = computed(() => {
|
|
|
|
|
return collapse.value ? 0 : 308;
|
|
|
|
|
});
|
|
|
|
|
return collapse.value ? 0 : 308
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const asideStyle = computed(() => {
|
|
|
|
|
return {
|
|
|
|
|
width: `${asideWidth.value}px`,
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const collapseIcon = computed(() => {
|
|
|
|
|
return collapse.value ? "expand-cir" : "collapse-cir";
|
|
|
|
|
});
|
|
|
|
|
return collapse.value ? 'expand-cir' : 'collapse-cir'
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const asideEnter = ref(false);
|
|
|
|
|
const asideEnter = ref(false)
|
|
|
|
|
|
|
|
|
|
const showCollapse = computed(() => {
|
|
|
|
|
return collapse.value ? true : asideEnter.value;
|
|
|
|
|
});
|
|
|
|
|
return collapse.value ? true : asideEnter.value
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => taskStore.immersion,
|
|
|
|
|
() => {
|
|
|
|
|
collapse.value = true;
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
collapse.value = true
|
|
|
|
|
},
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
function showFilter() {
|
|
|
|
|
const modal = unref(CustomFieldModalRef)! as any;
|
|
|
|
|
modal.showModal();
|
|
|
|
|
const modal = unref(CustomFieldModalRef)! as any
|
|
|
|
|
modal.showModal()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const showSearch = ref(false);
|
|
|
|
|
const showSearch = ref(false)
|
|
|
|
|
|
|
|
|
|
function setShowSearch(value: boolean) {
|
|
|
|
|
if (!value) {
|
|
|
|
|
console.log("setShowSearch", value);
|
|
|
|
|
search.value = "";
|
|
|
|
|
taskListRef.value.search("");
|
|
|
|
|
return;
|
|
|
|
|
console.log('setShowSearch', value)
|
|
|
|
|
search.value = ''
|
|
|
|
|
taskListRef.value.search('')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
showSearch.value = value;
|
|
|
|
|
showSearch.value = value
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const inputHandler = debounce((word) => {
|
|
|
|
|
(taskListRef.value as any).search(word);
|
|
|
|
|
}, 500);
|
|
|
|
|
(taskListRef.value as any).search(word)
|
|
|
|
|
}, 500)
|
|
|
|
|
|
|
|
|
|
const reviewType = 2;
|
|
|
|
|
const reviewType = 2
|
|
|
|
|
async function getshowFieldList() {
|
|
|
|
|
showFieldList.value = [];
|
|
|
|
|
const userStore = useUser();
|
|
|
|
|
const userInfo = userStore.getUserInfo;
|
|
|
|
|
let res;
|
|
|
|
|
res = await getAllfieldList(reviewType); // 所有筛选项目
|
|
|
|
|
const allList = res.data;
|
|
|
|
|
res = await getfieldList(reviewType, userInfo.id); // 当前用户选择的项目
|
|
|
|
|
const useList = res.data;
|
|
|
|
|
showFieldList.value = []
|
|
|
|
|
const userStore = useUser()
|
|
|
|
|
const userInfo = userStore.getUserInfo
|
|
|
|
|
let res
|
|
|
|
|
res = await getAllfieldList(reviewType) // 所有筛选项目
|
|
|
|
|
const allList = res.data
|
|
|
|
|
res = await getfieldList(reviewType, userInfo.id) // 当前用户选择的项目
|
|
|
|
|
const useList = res.data
|
|
|
|
|
/**
|
|
|
|
|
* name 标题
|
|
|
|
|
* id 键值
|
|
|
|
|
@ -99,19 +99,20 @@ async function getshowFieldList() {
|
|
|
|
|
* checked 是否选中
|
|
|
|
|
*/
|
|
|
|
|
if (useList?.userFieldFixed) {
|
|
|
|
|
useList?.userFieldFixed?.split(",").map((v) => {
|
|
|
|
|
let item = allList.find((v2) => v2.name == v);
|
|
|
|
|
useList?.userFieldFixed?.split(',').map((v) => {
|
|
|
|
|
let item = allList.find(v2 => v2.name == v)
|
|
|
|
|
if (item) {
|
|
|
|
|
item = {
|
|
|
|
|
name: item.fieldDesc,
|
|
|
|
|
id: item.name,
|
|
|
|
|
fix: item.isrequired == 2,
|
|
|
|
|
checked: true,
|
|
|
|
|
};
|
|
|
|
|
showFieldList.value.push(item);
|
|
|
|
|
}
|
|
|
|
|
showFieldList.value.push(item)
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
// 若为首次获取 则赋默认值
|
|
|
|
|
allList?.map((v) => {
|
|
|
|
|
if (v.isrequired == 2) {
|
|
|
|
|
@ -120,58 +121,58 @@ async function getshowFieldList() {
|
|
|
|
|
id: v.name,
|
|
|
|
|
fix: v.isrequired == 2,
|
|
|
|
|
checked: true,
|
|
|
|
|
};
|
|
|
|
|
showFieldList.value.push(item);
|
|
|
|
|
}
|
|
|
|
|
showFieldList.value.push(item)
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getshowFieldList();
|
|
|
|
|
});
|
|
|
|
|
getshowFieldList()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 滚动容器，让key对应模块处于可视区域
|
|
|
|
|
function scrollHandler(key: string) {
|
|
|
|
|
const element = document.querySelector(`#${key}`);
|
|
|
|
|
element?.scrollIntoView(true);
|
|
|
|
|
const element = document.querySelector(`#${key}`)
|
|
|
|
|
element?.scrollIntoView(true)
|
|
|
|
|
}
|
|
|
|
|
// 选择某个过滤配置，刷新图片墙
|
|
|
|
|
function filterHandler(searchId: string) {
|
|
|
|
|
emitter.emit("filter", searchId);
|
|
|
|
|
emitter.emit('filter', searchId)
|
|
|
|
|
}
|
|
|
|
|
function showModal(modalRef: any) {
|
|
|
|
|
const modal = unref(modalRef)! as any;
|
|
|
|
|
modal.showModal();
|
|
|
|
|
const modal = unref(modalRef)! as any
|
|
|
|
|
modal.showModal()
|
|
|
|
|
}
|
|
|
|
|
// 当前显示的模块，按照数组顺序显示
|
|
|
|
|
const showItems = shallowRef<{ key: string; config: AsideEntity }[]>([]);
|
|
|
|
|
const filterModalRef: any = ref(null);
|
|
|
|
|
const newFilterModalRef = ref(null);
|
|
|
|
|
const customModalRef = ref(null);
|
|
|
|
|
const showItems = shallowRef<{ key: string, config: AsideEntity }[]>([])
|
|
|
|
|
const filterModalRef: any = ref(null)
|
|
|
|
|
const newFilterModalRef = ref(null)
|
|
|
|
|
const customModalRef = ref(null)
|
|
|
|
|
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)
|
|
|
|
|
}
|
|
|
|
|
const configStore = useConfig();
|
|
|
|
|
const newFilterOk = () => {
|
|
|
|
|
const configStore = useConfig()
|
|
|
|
|
function newFilterOk() {
|
|
|
|
|
filterModalRef.value.query(
|
|
|
|
|
filterModalRef.value.pagination.page,
|
|
|
|
|
filterModalRef.value.pagination.pageSize
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
filterModalRef.value.pagination.pageSize,
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
onBeforeMount(async () => {
|
|
|
|
|
configStore.fetchConfig();
|
|
|
|
|
configStore.fetchCustomConfig();
|
|
|
|
|
});
|
|
|
|
|
configStore.fetchConfig()
|
|
|
|
|
configStore.fetchCustomConfig()
|
|
|
|
|
})
|
|
|
|
|
function setAsideItemName(text) {
|
|
|
|
|
taskListRef.value.setStatusName(text);
|
|
|
|
|
taskListRef.value.setStatusName(text)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
defineExpose({
|
|
|
|
|
setAsideItemName,
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
@ -255,7 +256,7 @@ defineExpose({
|
|
|
|
|
@show-new-filter="showModal(newFilterModalRef)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 新增过滤 -->
|
|
|
|
|
<NewFilterModalVue ref="newFilterModalRef" @onOk="newFilterOk" />
|
|
|
|
|
<NewFilterModalVue ref="newFilterModalRef" @on-ok="newFilterOk" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
