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

feat: 修复逻辑问题及样式缺陷

Browse Source
pull/207/head
刘释隆 2 years ago
parent dc249d2e52
commit e1ff1bef0e
14 changed files with 750 additions and 695 deletions
Show Stats Download Patch File Download Diff File

40
src/components/RichEditor/Quill.vue
Unescape View File

@ -1,10 +1,12 @@
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref } from 'vue' import { defineEmits, reactive, ref } from 'vue'
import { QuillEditor } from '@vueup/vue-quill' import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css' import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { debounce } from 'lodash-es' import { debounce } from 'lodash-es'
import { queryNote, saveNote } from '@/api/home/main' import { queryNote, saveNote } from '@/api/home/main'
const emit = defineEmits(['close'])
const quillEditor = ref() const quillEditor = ref()
const cardStyle = { const cardStyle = {
@ -27,12 +29,14 @@ const options = reactive({
}) })
function initHandler() { function initHandler() {
queryNote().then((res) => { queryNote()
.then((res) => {
if (res.data) if (res.data)
note.value = res.data.notecontent note.value = res.data.notecontent
console.log('note:', note.value) console.log('note:', note.value)
}).catch(e => console.log(e)) })
.catch(e => console.log(e))
} }
const saveHandler = debounce(() => { const saveHandler = debounce(() => {
@ -44,9 +48,17 @@ const saveHandler = debounce(() => {
<template> <template>
<div> <div>
<n-card :style="cardStyle" :bordered="false" class="mt-4 proCard"> <n-card :style="cardStyle" :bordered="false" class="mt-4 proCard">
<div class="top_box">
<div class="title"> <div class="title">
备注信息 备注信息
</div> </div>
<SvgIcon
size="24"
name="close-none-border"
class="close_box"
@click="emit('close')"
/>
</div>
<QuillEditor <QuillEditor
ref="quillEditor" ref="quillEditor"
v-model:content="note" v-model:content="note"
@ -62,15 +74,25 @@ const saveHandler = debounce(() => {
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.title{ .top_box {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
.close_box {
cursor: pointer;
margin-bottom: 25px;
}
}
.title {
font-size: 18px; font-size: 18px;
font-family: PingFang SC, PingFang SC-Medium; font-family: PingFang SC, PingFang SC-Medium;
font-weight: Medium; font-weight: Medium;
color: #333333; color: #333333;
margin-bottom: 24px; margin-bottom: 24px;
} }
.ql-toolbar.ql-snow { .ql-toolbar.ql-snow {
border-top: none; border-top: none;
border-left: none; border-left: none;
border-right: none; border-right: none;
@ -78,9 +100,9 @@ const saveHandler = debounce(() => {
margin-top: -10px; margin-top: -10px;
background: #f8f8f8; background: #f8f8f8;
border: 1px solid #d8d8d8; border: 1px solid #d8d8d8;
} }
.ql-container.ql-snow { .ql-container.ql-snow {
border: 1px solid #d8d8d8; border: 1px solid #d8d8d8;
} }
</style> </style>

4
src/components/Search/Search.vue
Unescape View File

@ -91,6 +91,8 @@ function highlightText(text, query) {
} }
onMounted(() => { onMounted(() => {
setTimeout(() => (value.value = '')) setTimeout(() => (value.value = ''))
handlerShowList()
handlerSearch('')
}) })
</script> </script>
@ -114,7 +116,7 @@ onMounted(() => {
</div> </div>
<div v-show="showList && (historyList.length || resultList.length)" class="list_box"> <div v-show="showList && (historyList.length || resultList.length)" class="list_box">
<div <div
v-if="historyList.length" v-if="historyList.length && !value"
class="list_classfiy_item" class="list_classfiy_item"
style="border-bottom: 1px solid #e4e4e4" style="border-bottom: 1px solid #e4e4e4"
> >

6
src/layout/components/Header/QuillModal.vue
Unescape View File

@ -24,11 +24,9 @@ defineExpose({
<template> <template>
<div> <div>
<n-modal v-model:show="show" transform-origin="center"> <n-modal v-model:show="show" transform-origin="center">
<Quill /> <Quill @close="show = false" />
</n-modal> </n-modal>
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped></style>
</style>

4
src/utils/image.ts
Unescape View File

@ -9,7 +9,9 @@ export function hideDownload(e: MouseEvent) {
const downloadEle: any = document.querySelector('.n-image-preview-toolbar')?.children[5] const downloadEle: any = document.querySelector('.n-image-preview-toolbar')?.children[5]
const asideValue = unref(configStore.getAsideValue) const asideValue = unref(configStore.getAsideValue)
const download = asideValue?.izimgdownload const download = asideValue?.izimgdownload
if (downloadEle && downloadEle.innerHTML === downloadSvg && download === false) // TODO 判断条件调整
// if (downloadEle && downloadEle.innerHTML === downloadSvg && download === false)
if (downloadEle && !download)
downloadEle.style.display = 'none' downloadEle.style.display = 'none'
else else
downloadEle.style.display = 'block' downloadEle.style.display = 'block'

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

@ -173,7 +173,8 @@ nextTick(() => {
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] asideVisible[key]
= (showKeys.includes(key) || asideMap[key].isDefaultFilter) && config[key] === 'Y' = (showKeys.includes(key) || asideMap[key].isDefaultFilter)
&& config[key] === 'Y'
} }
}) })
if (customObjRef.value) { if (customObjRef.value) {
@ -308,6 +309,7 @@ function inputChange(keyword) {
} }
function handleOk(item: any) { function handleOk(item: any) {
console.log('handleOk', item) console.log('handleOk', item)
// .setCurrentlySelectedAdvanced(item.searchname)
if (item) { if (item) {
AdvanceFilterRef.value.setCurrentlySelectedAdvanced(item.searchname) AdvanceFilterRef.value.setCurrentlySelectedAdvanced(item.searchname)
filterHandler(item.id) filterHandler(item.id)
@ -407,7 +409,7 @@ function updateComponent(key, e) {
width: 100%; width: 100%;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
margin-bottom: 15px; margin-bottom: 15px;
height: 58px height: 58px;
} }
&-divider { &-divider {

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

@ -1,46 +1,51 @@
<script lang="ts" setup> <script lang="ts" setup>
import { debounce, difference } from 'lodash-es' import { cloneDeep, debounce, difference, isEqual } from 'lodash-es'
import { computed, ref, watch, onMounted } from 'vue' import { computed, onMounted, ref, watch } 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 finalStore = useFinal()
const checkAll = ref(false) const checkAll = ref(false)
const selectIds = ref<string[]>([]) const selectIds = ref<string[]>([])
const tempList = ref<string[]>([]) const tempList = ref<string[]>([])
let extraCustomConfig :any = []; const extraCustomConfig: any = []
// 左侧隐藏列表
const offList = ref<any[]>([])
// 右侧显示列表
const onList = ref<any[]>([])
const allCount = computed(() => {
return `全部筛选(共${offList.value.length}个)`
})
const selectCount = computed(() => {
return `已选筛选(共${onList.value.length}个)`
})
const offKeyword = ref('')
const onKeyword = ref('')
Object.keys(asideMap).forEach((key) => { Object.keys(asideMap).forEach((key) => {
const { isDefaultFilter } = asideMap[key]; const { isDefaultFilter } = asideMap[key]
if (isDefaultFilter) { if (isDefaultFilter)
extraCustomConfig.push(key); extraCustomConfig.push(key)
} })
});
function showModal() { function showModal() {
show.value = true show.value = true
// 重置左右列表数据 // 重置左右列表数据
const config = finalStore.getSystemConfig const config = finalStore.getSystemConfig
const customConfig = finalStore.getCustomConfig const customConfig = finalStore.getCustomConfig
console.log('开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------',config, customConfig)
console.log('开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------',tempList.value, finalStore.getFilterConfig)
if (config == null || customConfig == null) if (config == null || customConfig == null)
return return
if (tempList.value.length > 0 && isEqual(tempList.value, finalStore.getFilterConfig)) if (tempList.value.length > 0 && isEqual(tempList.value, finalStore.getFilterConfig))
return return
const { showList, hideList } = generatList(config, customConfig) const { showList, hideList } = generatList(config, customConfig)
tempList.value = cloneDeep(showList) tempList.value = cloneDeep(showList)
console.log("tempList.value开启了lllllllllllllllllll", showList, hideList);
if (tempList.value.length > 0) if (tempList.value.length > 0)
finalStore.setFilterConfig(tempList.value) finalStore.setFilterConfig(tempList.value)
onList.value = showList onList.value = showList
offList.value = hideList offList.value = hideList
// 重置全选状态 // 重置全选状态
@ -51,22 +56,11 @@ function showModal() {
} }
function closeModal() { function closeModal() {
offKeyword.value = ''
onKeyword.value = ''
show.value = false show.value = false
} }
// 左侧隐藏列表
const offList = ref<any[]>([])
// 右侧显示列表
const onList = ref<any[]>([])
const allCount = computed(() => {
return `全部筛选(共${offList.value.length}个)`
})
const selectCount = computed(() => {
return `已选筛选(共${onList.value.length}个)`
})
defineExpose({ defineExpose({
showModal, showModal,
}) })
@ -94,16 +88,13 @@ function generateDefaultList(config) {
function generatList(config, customConfig) { function generatList(config, customConfig) {
const keys = Object.keys(config) const keys = Object.keys(config)
let onList: object[] = [] let onList: object[] = []
let offList: any = [] const offList: any = []
let showKeys = []; const showKeys = []
const tempShowKeys = [...customConfig, ...extraCustomConfig]; const tempShowKeys = [...customConfig, ...extraCustomConfig]
tempShowKeys.map(item => { tempShowKeys.forEach((item) => {
if(!showKeys.includes(item)) { if (!showKeys.includes(item))
showKeys.push(item); showKeys.push(item)
} })
});
console.log('原始筛选条件showKeys', showKeys)
console.log('原始筛选条件config customConfig', config, customConfig)
// for (const key of keys) { // for (const key of keys) {
// if (!key.startsWith('iz') || config[key] === 'N' || asideMap[key] === undefined) // if (!key.startsWith('iz') || config[key] === 'N' || asideMap[key] === undefined)
// continue // continue
@ -125,7 +116,7 @@ function generatList(config, customConfig) {
// isChecked && selectIds.value.push(key) // isChecked && selectIds.value.push(key)
// } // }
// } // }
Object.keys(asideMap).map(key => { Object.keys(asideMap).forEach((key) => {
const name = asideMap[key]?.label const name = asideMap[key]?.label
const isDefaultFilter = asideMap[key]?.isDefaultFilter const isDefaultFilter = asideMap[key]?.isDefaultFilter
@ -161,43 +152,30 @@ function generatList(config, customConfig) {
return acc return acc
} }
}, []) }, [])
console.log('原始筛选条件onList', onList)
const fixedList = generateDefaultList(config) const fixedList = generateDefaultList(config)
// offList.unshift(...fixedList) // offList.unshift(...fixedList)
console.log('原始筛选条件fixedList', fixedList)
onList.unshift(...fixedList) onList.unshift(...fixedList)
console.log('原始筛选条件customConfig', customConfig)
// onList按照customConfig排序 // onList按照customConfig排序
const tempOnList = cloneDeep(onList) const tempOnList = cloneDeep(onList)
console.log('原始筛选条件tempOnList', tempOnList)
const sortKeyList: any = [] const sortKeyList: any = []
finalStore.getFilterConfig.map((item: any) => { finalStore.getFilterConfig.forEach((item: any) => {
console.log("tFilterConfig item000000000000000", item);
sortKeyList.push(item.id) sortKeyList.push(item.id)
}) })
console.log('原始筛选条件sortKeyList', sortKeyList)
console.log('原始筛选条件showKeys', showKeys)
const sortList: any = [] const sortList: any = []
if (sortKeyList.length > 0) { if (sortKeyList.length > 0) {
sortKeyList.map((key) => { sortKeyList.forEach((key) => {
const tempItem = tempOnList.find(item => item.id == key) const tempItem = tempOnList.find(item => item.id == key)
if(tempItem) { if (tempItem)
sortList.push(tempItem) sortList.push(tempItem)
}
}) })
} }
else { else {
showKeys.map((key) => { showKeys.forEach((key) => {
const tempItem = tempOnList.find(item => item.id == key) const tempItem = tempOnList.find(item => item.id == key)
if(tempItem) { if (tempItem)
sortList.push(tempItem) sortList.push(tempItem)
}
}) })
} }
console.log('原始筛选条件showList', sortList)
console.log('原始筛选条件hideList', offList)
console.log('原始筛选条件configStore.getFilterConfig', finalStore.getFilterConfig)
// return { showList: onList, hideList: offList } // return { showList: onList, hideList: offList }
return { showList: sortList, hideList: offList } return { showList: sortList, hideList: offList }
} }
@ -208,48 +186,36 @@ finalStore.$subscribe(() => {
if (config == null || 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)) if (tempList.value.length > 0 && isEqual(tempList.value, finalStore.getFilterConfig))
return return
const { showList, hideList } = generatList(config, customConfig) const { showList, hideList } = generatList(config, customConfig)
tempList.value = cloneDeep(showList) tempList.value = cloneDeep(showList)
console.log('订阅克隆条件', tempList.value)
if (tempList.value.length > 0) if (tempList.value.length > 0)
finalStore.setFilterConfig(tempList.value) finalStore.setFilterConfig(tempList.value)
// setTimeout(() => {
// }, 500);
console.log('订阅showList, hideList-----------', showList, hideList)
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
.map((item) => {
return item.id return item.id
}).join(',') })
.join(',')
await setFilter({ searchcount: param, type: 1 }) await setFilter({ searchcount: param, type: 1 })
const obj = await finalStore.fetchCustomConfig() const obj = await finalStore.fetchCustomConfig()
console.log('obj-------------------------------', obj)
const tempOnList = cloneDeep(onList.value) const tempOnList = cloneDeep(onList.value)
console.log('提交筛选条件tempOnList', tempOnList)
const sortList: any = [] const sortList: any = []
obj.map((key) => { obj.forEach((key) => {
const tempItem = tempOnList.find(item => item.id == key) const tempItem = tempOnList.find(item => item.id == key)
if(tempItem) { if (tempItem)
sortList.push(tempItem) sortList.push(tempItem)
}
}) })
console.log('finalStore.sortList提交---------------', sortList)
// setTimeout(() => {
if (sortList.length > 0) if (sortList.length > 0)
finalStore.setFilterConfig(sortList) finalStore.setFilterConfig(sortList)
// }, 500);
closeModal() closeModal()
} }
@ -273,8 +239,7 @@ function onCheckChange(checked: any, item: any) {
if (index === -1 && checked) if (index === -1 && checked)
selectIds.value.push(item.id) selectIds.value.push(item.id)
else else index !== -1 && selectIds.value.splice(index, 1)
index !== -1 && selectIds.value.splice(index, 1)
checkAll.value = offList.value.every(item => item.checked) checkAll.value = offList.value.every(item => item.checked)
} }
@ -292,7 +257,10 @@ watch(
return return
const action = newVal > oldVal ? 'add' : 'remove' const action = newVal > oldVal ? 'add' : 'remove'
const diff = action === 'add' ? difference(selectIds.value, showIds.value) : difference(showIds.value, selectIds.value) const diff
= action === 'add'
? difference(selectIds.value, showIds.value)
: difference(showIds.value, selectIds.value)
if (diff.length === 0) if (diff.length === 0)
return return
@ -359,9 +327,6 @@ function removeHandler(id: string) {
onList.value.splice(index, 1) onList.value.splice(index, 1)
} }
const offKeyword = ref('')
const onKeyword = ref('')
const leftInputHandler = debounce((keyword) => { const leftInputHandler = debounce((keyword) => {
offKeyword.value = keyword offKeyword.value = keyword
}, 300) }, 300)
@ -390,7 +355,13 @@ onMounted(() => {
<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 class="cardstyle" :bordered="false" size="huge" role="dialog" aria-modal="true"> <n-card
class="cardstyle"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
<div class="wrapper"> <div class="wrapper">
<span class="wrapper-title">自定义筛选</span> <span class="wrapper-title">自定义筛选</span>
<div class="wrapper-bar"> <div class="wrapper-bar">
@ -402,7 +373,10 @@ onMounted(() => {
<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" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small" :title="allCount"
class="dragcardStyle"
:segmented="{ content: true, footer: true }"
size="small"
:bordered="false" :bordered="false"
> >
<div class="input_wrap"> <div class="input_wrap">
@ -411,17 +385,29 @@ onMounted(() => {
<SvgIcon size="14px" name="magnifying-1-color999" /> <SvgIcon size="14px" name="magnifying-1-color999" />
</template> </template>
</n-input> </n-input>
<n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;"> <n-scrollbar
style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px"
>
<div class="draggable-ul"> <div class="draggable-ul">
<div class="draggable-li"> <div class="draggable-li">
<n-checkbox v-model:checked="checkAll" label="全选" :indeterminate="!checkAll" @update:checked="onCheckAllChange" /> <n-checkbox
v-model:checked="checkAll"
label="全选"
:indeterminate="!checkAll"
@update:checked="onCheckAllChange"
/>
</div> </div>
<div <div
v-for="item in offList" v-show="item.name.includes(offKeyword)" :key="item.id" :class="{ 'disable-check': item.fix }" v-for="item in offList"
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" :label="item.name" :disabled="item.fix" v-model:checked="item.checked"
:label="item.name"
:disabled="item.fix"
@update:checked="onCheckChange($event, item)" @update:checked="onCheckChange($event, item)"
/> />
</div> </div>
@ -430,12 +416,15 @@ onMounted(() => {
</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" class="dragcardStyle" :segmented="{ content: true, footer: true }" size="small" :title="selectCount"
class="dragcardStyle"
:segmented="{ content: true, footer: true }"
size="small"
:bordered="false" :bordered="false"
> >
<template #header-extra> <template #header-extra>
@ -447,14 +436,31 @@ onMounted(() => {
<SvgIcon size="14px" name="magnifying-1-color999" /> <SvgIcon size="14px" name="magnifying-1-color999" />
</template> </template>
</n-input> </n-input>
<n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;" class="scroll"> <n-scrollbar
<VueDraggable v-model="onList" class="draggable-ul" :animation="150" group="shared"> style="max-height: 500px; border: 1px solid #cad2dd; border-radius: 2px"
<div v-for="item in onList" v-show="item.name.includes(onKeyword)" :key="item.id" :draggable="true" class="cursor-move draggable-li"> class="scroll"
>
<VueDraggable
v-model="onList"
class="draggable-ul"
:animation="150"
group="shared"
>
<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" /> <SvgIcon name="drag" size="24" />
<span class="ml-2">{{ item.name }}</span> <span class="ml-2">{{ item.name }}</span>
<SvgIcon <SvgIcon
v-if="!item.fix" size="16px" style="display:block;margin-left: auto;cursor: pointer;" v-if="!item.fix"
name="clear" @click="removeHandler(item.id)" size="16px"
style="display: block; margin-left: auto; cursor: pointer"
name="clear"
@click="removeHandler(item.id)"
/> />
</div> </div>
</VueDraggable> </VueDraggable>
@ -469,7 +475,11 @@ onMounted(() => {
<n-button type="info" @click="handleSumbit"> <n-button type="info" @click="handleSumbit">
确定 确定
</n-button> </n-button>
<n-button secondary style="margin-left:15px; border: 1px solid #CAD2DD;" @click="closeModal"> <n-button
secondary
style="margin-left: 15px; border: 1px solid #cad2dd"
@click="closeModal"
>
取消 取消
</n-button> </n-button>
</div> </div>
@ -498,10 +508,10 @@ onMounted(() => {
&-footer { &-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.n-button--info-type{ .n-button--info-type {
background: #507AFD !important; background: #507afd !important;
} }
.n-button--default-type{ .n-button--default-type {
background: #fff !important; background: #fff !important;
color: #333333; color: #333333;
} }
@ -513,7 +523,7 @@ onMounted(() => {
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;
@ -543,7 +553,7 @@ onMounted(() => {
.textbtnStyle { .textbtnStyle {
cursor: pointer; cursor: pointer;
color: #1980FF; color: #1980ff;
} }
.draggable-ul { .draggable-ul {
@ -576,33 +586,33 @@ onMounted(() => {
--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: #666; color: #666;
} }
::v-deep(.n-scrollbar){ ::v-deep(.n-scrollbar) {
border-left: 1px solid #cad2dd !important; border-left: 1px solid #cad2dd !important;
border-right: 1px solid #cad2dd !important; border-right: 1px solid #cad2dd !important;
border-bottom: 1px solid #E8E8E8 !important; border-bottom: 1px solid #e8e8e8 !important;
border-top: 1px solid #E8E8E8 !important; border-top: 1px solid #e8e8e8 !important;
} }
::v-deep(.n-card__content){ ::v-deep(.n-card__content) {
padding: 20px 24px 0 24px !important; padding: 20px 24px 0 24px !important;
} }
::v-deep(.n-card__footer){ ::v-deep(.n-card__footer) {
padding: 0 24px 16px 24px !important; padding: 0 24px 16px 24px !important;
} }
::v-deep(.n-input .n-input-wrapper){ ::v-deep(.n-input .n-input-wrapper) {
height: 44px !important; height: 44px !important;
border: 1px solid #cad2dd !important; border: 1px solid #cad2dd !important;
border-bottom: none !important; border-bottom: none !important;
// margin-bottom: -3px; // margin-bottom: -3px;
.n-input__input input{ .n-input__input input {
height: 44px !important; height: 44px !important;
} }
} }
::v-deep(.n-button--info-type){ ::v-deep(.n-button--info-type) {
background: #507AFD !important; background: #507afd !important;
} }
</style> </style>

373
src/views/final/comp/FilterModal.vue
Unescape View File

@ -1,5 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { import {
computed,
defineOptions, defineOptions,
h, h,
nextTick, nextTick,
@ -8,97 +9,100 @@ import {
reactive, reactive,
ref, ref,
unref, unref,
computed, } from 'vue'
} from "vue"; import { NButton, NDataTable, useModal } 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 '@/views/home/aside/comp/Action.vue'
import Action from "@/views/home/aside/comp/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 SvgIcon from "@/components/Icon/SvgIcon.vue";
import { useModal, NButton } from "naive-ui"; import SvgIcon from '@/components/Icon/SvgIcon.vue'
const modal = useModal();
defineOptions({ name: "FilterModal" }); defineOptions({ name: 'FilterModal' })
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 modal = useModal()
const checkedRowKeys = ref([]);
const show = ref(false)
const checkedRowKeys = ref([])
const $message = window.$message
const cardStyle = { const cardStyle = {
width: "800px", 'width': '800px',
height: "800px", 'height': '800px',
"--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
} }
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,
}); })
}, },
}, },
{ {
title: "名称", title: '名称',
key: "searchname", key: 'searchname',
}, },
{ {
title: "创建者", title: '创建者',
key: "createby", key: 'createby',
}, },
{ {
title: "创建时间", title: '创建时间',
key: "createtime", key: 'createtime',
renderSorterIcon: ({ order }) => { renderSorterIcon: ({ order }) => {
if (order === false) return h(SvgIcon, { name: "sort-2" }); if (order === false)
if (order === "ascend") return h(SvgIcon, { name: "sort-1" }); return h(SvgIcon, { name: 'sort-2' })
if (order === "descend") return h(SvgIcon, { name: "sort-3" }); if (order === 'ascend')
return h(SvgIcon, { name: 'sort-1' })
if (order === 'descend')
return h(SvgIcon, { name: 'sort-3' })
}, },
sorter: (row1, row2) => sorter: (row1, row2) =>
new Date(row1?.createtime).getTime() - new Date(row2?.createtime).getTime(), new Date(row1?.createtime).getTime() - new Date(row2?.createtime).getTime(),
}, },
{ {
title: "更新者", title: '更新者',
key: "updateby", key: 'updateby',
}, },
{ {
title: "更新时间", title: '更新时间',
key: "updatetime", key: 'updatetime',
}, },
]; ]
const loading = ref(true); const loading = ref(true)
const total = ref(0); const total = ref(0)
const pagination = reactive({ const pagination = reactive({
page: 1, page: 1,
pageCount: 1, pageCount: 1,
@ -106,220 +110,232 @@ 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, 1); const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 1)
const { data, pageCount, total: totalCount } = result; const { data, pageCount, total: totalCount } = result
total.value = totalCount; total.value = totalCount
tableData.value = data; tableData.value = data
pagination.page = page; pagination.page = page
pagination.pageCount = pageCount; pagination.pageCount = pageCount
loading.value = false; 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) { if (key == 1) {
case 1: editSelection(id)
editSelection(id); }
break; else {
case 2:
const modalInst = modal.create({ const modalInst = modal.create({
title: "确认提示", title: '确认提示',
content: "确认删除该条过滤条件吗?", content: '确认删除该条过滤条件吗?',
positiveText: "确定", positiveText: '确定',
negativeText: "取消", negativeText: '取消',
preset: "dialog", preset: 'dialog',
onPositiveClick: () => deleteSelection(id), onPositiveClick: () => deleteSelection(id),
onNegativeClick: () => modalInst.destroy(), onNegativeClick: () => modalInst.destroy(),
}); })
break;
default:
break;
} }
} }
function editSelection(id = "") { function editSelection(id = '') {
// eslint-disable-next-line dot-notation
// const $message = window["$message"]; // const $message = window["$message"];
// if (selectionIds.value.length === 0 || selectionIds.value.length > 1) { // if (selectionIds.value.length === 0 || selectionIds.value.length > 1) {
// $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 = '') {
// eslint-disable-next-line dot-notation
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
} }
const modalInst = modal.create({ const modalInst = modal.create({
title: "确认提示", title: '确认提示',
content: "确认删除所选过滤条件吗?", content: '确认删除所选过滤条件吗?',
positiveText: "确定", positiveText: '确定',
negativeText: "取消", negativeText: '取消',
preset: "dialog", preset: 'dialog',
onPositiveClick: () => onPositiveClick: () =>
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)
}), }),
onNegativeClick: () => modalInst.destroy(), onNegativeClick: () => modalInst.destroy(),
}); })
} }
async function handlePageChange(currentPage) { async function handlePageChange(currentPage) {
if (loading.value) return; if (loading.value)
pagination.page = currentPage; return
const { pageSize } = pagination; pagination.page = currentPage
await query(currentPage, pageSize); const { pageSize } = pagination
await query(currentPage, pageSize)
} }
async function handlePageSizeChange(currentPageSize) { async function handlePageSizeChange(currentPageSize) {
if (loading.value) return; if (loading.value)
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;
closeModal(); closeModal()
} }
let sortTable: Sortable | null = null; let sortTable: Sortable | null = null
const tableRef = ref<InstanceType<typeof NDataTable>>(); const tableRef = ref<InstanceType<typeof NDataTable>>()
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
console.log(tableRef.value, "tableRef"); console.log(tableRef.value, 'tableRef')
}); })
}); })
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) destory(); if (sortTable !== null)
destory()
const el: HTMLDivElement = tableRef.value?.$el;
const tbody: HTMLElement | null = el.querySelector("tbody.n-data-table-tbody")!; const el: HTMLDivElement = tableRef.value?.$el
if (tbody) sortTable = Sortable.create(tbody, { onEnd, onMove }); const tbody: HTMLElement | null = el.querySelector('tbody.n-data-table-tbody')!
}); 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; 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
}); })
function handleOk() {
if (selectionIds.value.length > 1) {
$message.error('只能选择一条筛选条件')
return
}
if (selectionIds.value.length == 1) {
const selectedId = selectionIds.value[0]
const item = tableData.value.find(v => v.id == selectedId)
emit('handleOk', item)
}
if (selectionIds.value.length == 0)
emit('handleOk', '')
closeModal()
}
</script> </script>
<template> <template>
@ -331,9 +347,9 @@ const showSearch = computed(() => {
v-model:show="show" v-model:show="show"
transform-origin="center" transform-origin="center"
display-directive="if" display-directive="if"
@after-leave="afterLeave"
:mask-closable="false" :mask-closable="false"
class="modal_wrapper" class="modal_wrapper"
@after-leave="afterLeave"
> >
<n-card <n-card
:style="cardStyle" :style="cardStyle"
@ -352,11 +368,10 @@ const showSearch = computed(() => {
'font-size': '16px', 'font-size': '16px',
'font-weight': '600', 'font-weight': '600',
}" }"
>基本信息</span >基本信息</span>
>
</div> </div>
</div> </div>
<div class="wrapper-form" v-if="!showSearch"> <div v-if="!showSearch" class="wrapper-form">
<n-input <n-input
:style="{ width: '360px', border: '1px solid #cad2dd' }" :style="{ width: '360px', border: '1px solid #cad2dd' }"
placeholder="请输入过滤条件名称搜索" placeholder="请输入过滤条件名称搜索"
@ -366,31 +381,29 @@ const showSearch = computed(() => {
<SvgIcon size="14px" name="magnifying-1" /> <SvgIcon size="14px" name="magnifying-1" />
</template> </template>
</n-input> </n-input>
<n-button type="info" @click="handleClick"> <NButton type="info" @click="handleClick">
创建 创建
<template #icon> <template #icon>
<SvgIcon size="14px" name="creatFilter" /> <SvgIcon size="14px" name="creatFilter" />
</template> </template>
</n-button> </NButton>
</div> </div>
<div class="wrapper-form" v-else> <div v-else class="wrapper-form">
<div class="del_btn"> <div class="del_btn">
<n-button icon-placement="left" size="medium" @click="deleteSelection"> <NButton icon-placement="left" size="medium" @click="deleteSelection">
<template #icon> <template #icon>
<SvgIcon name="delete-history" size="16" /> <SvgIcon name="delete-history" size="16" />
</template> </template>
删除</n-button 删除
> </NButton>
</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>
@ -405,19 +418,21 @@ const showSearch = computed(() => {
:loading="loading" :loading="loading"
:pagination="pagination" :pagination="pagination"
:row-key="rowKey" :row-key="rowKey"
:checked-row-keys="selectionIds"
@update:page="handlePageChange" @update:page="handlePageChange"
@update-page-size="handlePageSizeChange" @update-page-size="handlePageSizeChange"
@update:checked-row-keys="handleCheck" @update:checked-row-keys="handleCheck"
:checked-row-keys="selectionIds"
/> />
</div> </div>
</div> </div>
<template #footer> <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button type="info" @click="closeModal"> 确认 </n-button> <NButton type="info" @click="handleOk">
<n-button secondary style="margin-left: 15px" @click="closeModal"> 确认
</NButton>
<NButton secondary style="margin-left: 15px" @click="closeModal">
取消 取消
</n-button> </NButton>
</div> </div>
</template> </template>
</n-card> </n-card>

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

@ -1,14 +1,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import { favorite, getConditionList, unfavorite, sort } from "@/api/home/filter"; import { useInfiniteScroll } from '@vueuse/core'
import { asideMap } from "@/config/aside"; import { debounce } from 'lodash-es'
import { useInfiniteScroll } from "@vueuse/core"; import { onMounted, reactive, ref, watch } from 'vue'
import { debounce } from "lodash-es"; import type { FilterSearchParam } from '/#/api'
import { onMounted, reactive, ref, watch } from "vue"; import type { Filter, FilterEntity } from '/#/home'
import type { FilterSearchParam } from "/#/api"; import { VueDraggable } from 'vue-draggable-plus'
import type { Filter, FilterEntity } from "/#/home"; import { asideMap } from '@/config/aside'
import { VueDraggable } from "vue-draggable-plus"; import { favorite, getConditionList, sort, unfavorite } from '@/api/home/filter'
defineOptions({ name: "AdvanceFilter" }); defineOptions({ name: 'AdvanceFilter' })
const props = defineProps({ const props = defineProps({
type: { type: {
@ -16,43 +16,42 @@ const props = defineProps({
default: 0, default: 0,
required: true, required: true,
}, },
}); })
const ruleForm = reactive({
keyword: "",
});
const ruleformRef = ref();
const emit = defineEmits<{ const emit = defineEmits<{
(e: "show-filter"): void; (e: 'show-filter'): void
(e: "show-custom"): void; (e: 'show-custom'): void
(e: "update:search"): void; (e: 'update:search'): void
(e: "select", id: string); (e: 'select', id: string)
}>(); }>()
const ruleForm = reactive({
const data = ref<FilterEntity[]>([]); keyword: '',
const unData = ref<FilterEntity[]>([]); })
const loading = ref(false); const ruleformRef = ref()
const canloadMore = true; const data = ref<FilterEntity[]>([])
const el = ref<HTMLDivElement | null>(null); const unData = ref<FilterEntity[]>([])
const popover = ref<ComponentRef | null>(null); const loading = ref(false)
const canloadMore = true
const el = ref<HTMLDivElement | null>(null)
const popover = ref<ComponentRef | null>(null)
const pagination = reactive({ const pagination = reactive({
pageNo: 1, pageNo: 1,
pageSize: 300, pageSize: 300,
}); })
const keyword = ref(""); const keyword = ref('')
const currentlySelectedAdvanced = ref("高级筛选"); const currentlySelectedAdvanced = ref('高级筛选')
onMounted(() => { onMounted(() => {
// data.value = generateDefaultConfig() // data.value = generateDefaultConfig()
}); })
// 默认的过滤配置 // 默认的过滤配置
function generateDefaultConfig(): FilterEntity[] { function generateDefaultConfig(): FilterEntity[] {
return Object.keys(asideMap).reduce((acc, key) => { return Object.keys(asideMap).reduce((acc, key) => {
const { label, defaultValue, isDefaultFilter } = asideMap[key]; const { label, defaultValue, isDefaultFilter } = asideMap[key]
if (isDefaultFilter === true) { if (isDefaultFilter === true) {
const config = { const config = {
id: "", id: '',
name: label, name: label,
favorite: false, favorite: false,
isDefaultFilter, isDefaultFilter,
@ -62,70 +61,73 @@ function generateDefaultConfig(): FilterEntity[] {
value: defaultValue, value: defaultValue,
}, },
], ],
};
return [...acc, config];
} else {
return acc;
} }
}, []); return [...acc, config]
}
else {
return acc
}
}, [])
} }
useInfiniteScroll( useInfiniteScroll(
el as any, el as any,
() => { () => {
loadMore(); loadMore()
}, },
{ distance: 10, interval: 300, canLoadMore: () => false } { distance: 10, interval: 300, canLoadMore: () => false },
); )
const showClick = async () => { async function showClick() {
getSearchedList(""); getSearchedList('')
}; }
async function loadMore() { async function loadMore() {
if (loading.value || el.value == null) return; if (loading.value || el.value == null)
return
const more = await featchList(); const more = await featchList()
if (more.length === 0) return; if (more.length === 0)
return
data.value.push(...more); data.value.push(...more)
} }
async function featchList() { async function featchList() {
loading.value = true; loading.value = true
try { try {
const searchParam: FilterSearchParam = { const searchParam: FilterSearchParam = {
search_searchname: { value: ruleForm.keyword, op: "like", type: "string" }, search_searchname: { value: ruleForm.keyword, op: 'like', type: 'string' },
}; }
const result = await getConditionList(pagination, searchParam, props.type); const result = await getConditionList(pagination, searchParam, props.type)
const { data } = result; const { data } = result
// pagination.pageNo += 1 // pagination.pageNo += 1
// canloadMore = pageCount >= pagination.pageNo // canloadMore = pageCount >= pagination.pageNo
const entityList = generateFilterEntityList(data); const entityList = generateFilterEntityList(data)
return entityList; return entityList
} catch (error) { }
return []; catch (error) {
} finally { return []
loading.value = false; }
finally {
loading.value = false
} }
} }
// 转换服务器数据格式 // 转换服务器数据格式
function generateFilterEntityList(data) { function generateFilterEntityList(data) {
const filterEntityList = data.map((item) => { const filterEntityList = data.map((item) => {
const { searchname, iztop, ocrUsersearchchildList, id, reorder } = item; const { searchname, iztop, ocrUsersearchchildList, id, reorder } = item
const list = ocrUsersearchchildList.map((item) => { const list = ocrUsersearchchildList.map((item) => {
const { searchfield, searchvalue } = item; const { searchfield, searchvalue } = item
return { return {
key: searchfield, key: searchfield,
value: searchvalue, value: searchvalue,
}; }
}); })
const reg = new RegExp(ruleForm.keyword, "gi"); const reg = new RegExp(ruleForm.keyword, 'gi')
const hilightText = searchname.replace(reg, `<span>${ruleForm.keyword}</span>`); const hilightText = searchname.replace(reg, `<span>${ruleForm.keyword}</span>`)
return { return {
id, id,
@ -135,132 +137,130 @@ function generateFilterEntityList(data) {
filterList: list, filterList: list,
reorder, reorder,
searchname, searchname,
}; }
}); })
return filterEntityList; return filterEntityList
} }
function selectHandler(item: FilterEntity) { function selectHandler(item: FilterEntity) {
(popover.value as any).setShow(false); (popover.value as any).setShow(false)
currentlySelectedAdvanced.value = item.searchname; currentlySelectedAdvanced.value = item.searchname
emit("select", item.id); emit('select', item.id)
} }
const inputHandler = debounce((word) => { const inputHandler = debounce((word) => {
ruleForm.keyword = word; ruleForm.keyword = word
ruleformRef.value.validate(); ruleformRef.value.validate()
if (word.length < 2 && word) { if (word.length < 2 && word)
return; return
}
getSearchedList(word); getSearchedList(word)
}, 300); }, 300)
function getSearchedList(word, isScroll = false) { function getSearchedList(word, isScroll = false) {
if (word) { if (word)
pagination.pageSize = 300; pagination.pageSize = 300
}
if (!word) { if (!word)
pagination.pageSize = 10; pagination.pageSize = 10
}
if (isScroll) { if (isScroll)
pagination.pageSize = 300; pagination.pageSize = 300
}
ruleForm.keyword = word; ruleForm.keyword = word
featchList().then((list) => { featchList().then((list) => {
let dataArr: FilterEntity[] = []; const dataArr: FilterEntity[] = []
let unDataArr: FilterEntity[] = []; const unDataArr: FilterEntity[] = []
list.map((item) => { list.forEach((item) => {
if (item.favorite && !item.isDefaultFilter) { if (item.favorite && !item.isDefaultFilter)
dataArr.push(item); dataArr.push(item)
}
if (!item.favorite && !item.isDefaultFilter) { if (!item.favorite && !item.isDefaultFilter)
unDataArr.push(item); unDataArr.push(item)
} })
});
data.value = dataArr.sort( data.value = dataArr.sort(
(a, b) => Number(new Date(a.createtime)) - Number(new Date(b.createtime)) (a, b) => Number(new Date(a.createtime)) - Number(new Date(b.createtime)),
); )
unData.value = unDataArr.sort( unData.value = unDataArr.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),
); )
}); })
} }
function favoriteHandler(event: MouseEvent, item: any) { function favoriteHandler(event: MouseEvent, item: any) {
event.stopImmediatePropagation(); event.stopImmediatePropagation()
event.stopPropagation(); event.stopPropagation()
const { isDefaultFilter, id } = item; const { isDefaultFilter, id } = item
if (!isDefaultFilter) { if (!isDefaultFilter) {
item.favorite = true; item.favorite = true
favorite(id); favorite(id)
data.value.map((v, index) => { data.value.forEach((v, index) => {
if (v.id == id) { if (v.id == id)
sort(v.id, 0); sort(v.id, 0)
} else { else
sort(v.id, index + 1); sort(v.id, index + 1)
} })
});
inputHandler(ruleForm.keyword)
inputHandler(ruleForm.keyword);
} }
} }
const rules = { const rules = {
keyword: [ keyword: [
{ {
trigger: ["blur", "input", "change"], trigger: ['blur', 'input', 'change'],
level: "error", level: 'error',
validator(_rule, value) { validator(_rule, value) {
if (value.length >= 2) { if (value.length >= 2)
return true; return true
} else { else
return new Error("搜索关键字最少为两个"); return new Error('搜索关键字最少为两个')
}
}, },
}, },
], ],
}; }
function unFavoriteHandler(event: MouseEvent, item) { function unFavoriteHandler(event: MouseEvent, item) {
event.stopImmediatePropagation(); event.stopImmediatePropagation()
event.stopPropagation(); event.stopPropagation()
const { isDefaultFilter, id } = item; const { isDefaultFilter, id } = item
if (!isDefaultFilter) { if (!isDefaultFilter) {
item.favorite = false; item.favorite = false
unfavorite(id); unfavorite(id)
inputHandler(ruleForm.keyword); inputHandler(ruleForm.keyword)
} }
} }
const handleScroll = (event) => { function handleScroll(event) {
let timer; let timer
if (timer) { if (timer) {
clearTimeout(timer); clearTimeout(timer)
} else { }
else {
timer = setTimeout(() => { timer = setTimeout(() => {
getSearchedList("", true); getSearchedList('', true)
}, 2000); }, 2000)
} }
}; }
const moveEnd = () => { function moveEnd() {
unData.value.map((v, index) => { unData.value.forEach((v, index) => {
sort(v.id, index); sort(v.id, index)
}); })
}; }
const setCurrentlySelectedAdvanced = (value: string) => { function setCurrentlySelectedAdvanced(value: string) {
currentlySelectedAdvanced.value = value; currentlySelectedAdvanced.value = value
}; }
defineExpose({ defineExpose({
setCurrentlySelectedAdvanced, setCurrentlySelectedAdvanced,
}); })
</script> </script>
<template> <template>
@ -284,8 +284,7 @@ defineExpose({
font-size: 17px; font-size: 17px;
font-weight: 600; font-weight: 600;
" "
>{{ currentlySelectedAdvanced }}</span >{{ currentlySelectedAdvanced }}</span>
>
<SvgIcon <SvgIcon
:style="{ marginLeft: '5px' }" :style="{ marginLeft: '5px' }"
name="down" name="down"
@ -296,7 +295,7 @@ defineExpose({
</template> </template>
<n-spin :show="loading"> <n-spin :show="loading">
<div class="wrapper-left-popover"> <div class="wrapper-left-popover">
<n-form :rules="rules" ref="ruleformRef" :model="ruleForm"> <n-form ref="ruleformRef" :rules="rules" :model="ruleForm">
<n-form-item path="keyword"> <n-form-item path="keyword">
<n-input <n-input
:style="{ :style="{
@ -305,9 +304,9 @@ defineExpose({
'--n-height': '40px', '--n-height': '40px',
}" }"
placeholder="请输入关键词" placeholder="请输入关键词"
@input="inputHandler"
:value="ruleForm.keyword" :value="ruleForm.keyword"
:minlength="2" :minlength="2"
@input="inputHandler"
> >
<template #prefix> <template #prefix>
<SvgIcon size="14px" name="magnifying-1" /> <SvgIcon size="14px" name="magnifying-1" />
@ -354,23 +353,23 @@ defineExpose({
style="margin-right: 3px" style="margin-right: 3px"
@click="favoriteHandler($event, item)" @click="favoriteHandler($event, item)"
/> />
<div v-html="item.name" style="color: #333333" /> <div style="color: #333333" v-html="item.name" />
</li> </li>
<!-- filter=".draggable-li[draggable='false']" --> <!-- filter=".draggable-li[draggable='false']" -->
<VueDraggable <VueDraggable
@end="moveEnd"
v-model="unData" v-model="unData"
class="draggable-ul" class="draggable-ul"
:animation="150" :animation="150"
group="shared" group="shared"
@end="moveEnd"
> >
<li <li
v-for="(item, index) in unData" v-for="(item, index) in unData"
:key="index" :key="index"
style="display: flex; align-items: center" style="display: flex; align-items: center"
@click="selectHandler(item)"
class="cursor-move draggable-li fix" class="cursor-move draggable-li fix"
:draggable="true" :draggable="true"
@click="selectHandler(item)"
> >
<SvgIcon name="drag" size="10" style="margin-right: 3px" /> <SvgIcon name="drag" size="10" style="margin-right: 3px" />
<SvgIcon <SvgIcon
@ -392,7 +391,7 @@ defineExpose({
style="cursor: pointer !important; margin-right: 3px" style="cursor: pointer !important; margin-right: 3px"
@click="favoriteHandler($event, item)" @click="favoriteHandler($event, item)"
/> />
<div v-html="item.name" style="color: #333333" /> <div style="color: #333333" v-html="item.name" />
</li> </li>
</VueDraggable> </VueDraggable>
</ul> </ul>
@ -441,6 +440,12 @@ defineExpose({
align-items: center; align-items: center;
margin-left: 12px; margin-left: 12px;
cursor: pointer; cursor: pointer;
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 120px;
}
} }
&-popvoer { &-popvoer {

68
src/views/home/aside/comp/items/Similarity.vue
Unescape View File

@ -1,47 +1,49 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref } from 'vue'
import { useConfig } from "@/store/modules/asideConfig"; import { useConfig } from '@/store/modules/asideConfig'
const configUseStore = useConfig(); const props = defineProps<{
value: [number, number]
label: string
}>()
const emit = defineEmits<{
(e: 'update:value', value: string): void
}>()
const range = ref<[number, number]>(props.value || [])
const marks = {
0: '0',
50: '50',
100: '100',
}
const isLoadValue = ref(false)
const configUseStore = useConfig()
configUseStore.$subscribe(() => { configUseStore.$subscribe(() => {
if (isLoadValue.value) { if (isLoadValue.value) {
isLoadValue.value = false; isLoadValue.value = false
return; return
} }
let asideValue = configUseStore.getAsideValue; const asideValue = configUseStore.getAsideValue
if (asideValue["izsimilarity"]) { if (asideValue.izsimilarity)
range.value = asideValue["izsimilarity"]; range.value = asideValue.izsimilarity
} else { else
range.value = [0, 100]; range.value = [0, 100]
}
console.log(range.value, "range.value"); console.log(range.value, 'range.value')
// else { // else {
// range.value = [0, 100]; // range.value = [0, 100];
// } // }
}); })
const props = defineProps<{
value: [number, number];
label: string;
}>();
const emit = defineEmits<{
(e: "update:value", value: string): void;
}>();
const range = ref<[number, number]>(props.value || []);
const marks = {
0: "0",
50: "50",
100: "100",
};
const isLoadValue = ref(false);
function onChange(value: number & number[]) { function onChange(value: number & number[]) {
range.value = value as any; value = value.sort((a, b) => a - b)
isLoadValue.value = true; range.value = value as any
let valueStr = value.join("-"); isLoadValue.value = true
emit("update:value", valueStr); const valueStr = value.join('-')
emit('update:value', valueStr)
} }
</script> </script>

186
src/views/message/content/List.vue
Unescape View File

@ -1,32 +1,32 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, reactive, ref, toRefs } from "vue"; import { computed, reactive, ref, toRefs } from 'vue'
import { format } from "date-fns"; import { format } from 'date-fns'
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from 'vue-router'
import { getMessageList, readAllMsg, readMsg } from "@/api/message/message"; import { getMessageList, readAllMsg, readMsg } from '@/api/message/message'
import iconApproveActive from "@/assets/images/message/approve-active.png"; import iconApproveActive from '@/assets/images/message/approve-active.png'
import iconApprove from "@/assets/images/message/approve.png"; import iconApprove from '@/assets/images/message/approve.png'
import iconSystemActive from "@/assets/images/message/system-active.png"; import iconSystemActive from '@/assets/images/message/system-active.png'
import iconSystem from "@/assets/images/message/system.png"; import iconSystem from '@/assets/images/message/system.png'
import iconArrowActive from "@/assets/images/message/arrow-active.png"; import iconArrowActive from '@/assets/images/message/arrow-active.png'
import iconArrow from "@/assets/images/message/arrow.png"; import iconArrow from '@/assets/images/message/arrow.png'
import iconClear from "@/assets/images/message/clear.png"; import iconClear from '@/assets/images/message/clear.png'
import iconArrowDown from "@/assets/images/message/arrow-down.png"; import iconArrowDown from '@/assets/images/message/arrow-down.png'
const emit = defineEmits(["goDetail"]); const emit = defineEmits(['goDetail'])
const router = useRouter(); const router = useRouter()
const route = useRoute(); const route = useRoute()
const hasNextPage = ref(false); const hasNextPage = ref(false)
const state = reactive({ const state = reactive({
tabList: [ tabList: [
// {
// name: "审批通知",
// icon: iconApprove,
// activeIcon: iconApproveActive,
// value: 1,
// },
{ {
name: "审批通知", name: '系统消息',
icon: iconApprove,
activeIcon: iconApproveActive,
value: 1,
},
{
name: "系统消息",
icon: iconSystem, icon: iconSystem,
activeIcon: iconSystemActive, activeIcon: iconSystemActive,
value: 2, value: 2,
@ -34,127 +34,148 @@ const state = reactive({
], ],
list: [] as any, list: [] as any,
pageNo: 1, pageNo: 1,
}); })
const { list, tabList } = toRefs(state); const { list, tabList } = toRefs(state)
const tab = ref(1); const tab = ref(2)
const getStateText = computed(() => { const getStateText = computed(() => {
return (value) => (value == 1 ? "待审批" : value == 2 ? "通过" : "不通过"); return value => (value == 1 ? '待审批' : value == 2 ? '通过' : '不通过')
}); })
async function getList(type = "") { async function getList(type = '') {
let res = await getMessageList({ let res = await getMessageList({
pageNo: state.pageNo, pageNo: state.pageNo,
pageSize: "20", pageSize: '20',
msgCategory: tab.value, msgCategory: tab.value,
}); })
console.log("getMessageList", res.data); console.log('getMessageList', res.data)
if (type == "more") { if (type == 'more') {
if (res.code == "OK") { if (res.code == 'OK') {
if (tab.value === 1) { if (tab.value === 1) {
res.data.list.forEach((item) => { res.data.list.forEach((item) => {
item.tag = JSON.parse(item.busJson); item.tag = JSON.parse(item.busJson)
}); })
} }
state.list = state.list.concat(res.data.list); state.list = state.list.concat(res.data.list)
state.pageNo++; state.pageNo++
res = await getMessageList({ res = await getMessageList({
pageNo: state.pageNo, pageNo: state.pageNo,
pageSize: "20", pageSize: '20',
msgCategory: tab.value, msgCategory: tab.value,
}); })
} }
hasNextPage.value = res.data.hasNextPage; hasNextPage.value = res.data.hasNextPage
} else { }
if (res.code === "OK") { else {
hasNextPage.value = res.data.hasNextPage; if (res.code === 'OK') {
hasNextPage.value = res.data.hasNextPage
if (tab.value === 1) { if (tab.value === 1) {
res.data.list.forEach((item) => { res.data.list.forEach((item) => {
item.tag = JSON.parse(item.busJson); item.tag = JSON.parse(item.busJson)
}); })
} }
state.list = state.list.concat(res.data.list); state.list = state.list.concat(res.data.list)
} }
} }
} }
getList(); getList()
async function clearMsg() { async function clearMsg() {
const res = await readAllMsg({ msgCategory: tab.value }); const res = await readAllMsg({ msgCategory: tab.value })
if (res.code === "OK") { if (res.code === 'OK') {
state.list = []; state.list = []
state.pageNo = 1; state.pageNo = 1
getList(); getList()
} }
} }
function switchTab(type: number) { function switchTab(type: number) {
tab.value = type; tab.value = type
state.list = []; state.list = []
state.pageNo = 1; state.pageNo = 1
getList(); getList()
} }
function goFinalDetail(row) { function goFinalDetail(row) {
console.log(row); console.log(row)
router.push({ router.push({
name: "final-detail", name: 'final-detail',
query: { id: row.tag.fromId, packageid: row.packageid }, query: { id: row.tag.fromId, packageid: row.packageid },
}); })
} }
function goDetail(item) { function goDetail(item) {
if (tab.value === 1) { if (tab.value === 1) {
clearMsgOne(item.id); clearMsgOne(item.id)
goFinalDetail(item); goFinalDetail(item)
} }
// emit('goDetail', item.id) // emit('goDetail', item.id)
else { else {
router.push({ name: "message-detail", query: { id: item.id } }); router.push({ name: 'message-detail', query: { id: item.id } })
} }
} }
async function clearMsgOne(id) { async function clearMsgOne(id) {
const res = await readMsg({ msgid: id }); const res = await readMsg({ msgid: id })
} }
function getMore() { function getMore() {
state.pageNo += 1; state.pageNo += 1
getList("more"); getList('more')
} }
console.log(tabList); console.log(tabList)
</script> </script>
<template> <template>
<div class="wrapper-message"> <div class="wrapper-message">
<div class="flex justify-between header"> <div class="flex justify-between header">
<div class="header-title">消息通知</div> <div class="header-title">
消息通知
</div>
<div class="clear" @click="clearMsg"> <div class="clear" @click="clearMsg">
<img class="icon-clear" :src="iconClear" alt="" /> <img class="icon-clear" :src="iconClear" alt="">
清除未读 清除未读
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div class="slider"> <div class="slider">
<div v-for="item in tabList" :key="item.value" :class="{ 'item-active': tab === item.value }" class="flex item" <div
@click="switchTab(item.value)"> v-for="item in tabList"
:key="item.value"
:class="{ 'item-active': tab === item.value }"
class="flex item"
@click="switchTab(item.value)"
>
<div class="flex item-left align-center"> <div class="flex item-left align-center">
<img class="icon" :src="tab === item.value ? item.activeIcon : item.icon" alt="" /> <img
class="icon"
:src="tab === item.value ? item.activeIcon : item.icon"
alt=""
>
<div :class="{ 'text-active': tab === item.value }" class="text"> <div :class="{ 'text-active': tab === item.value }" class="text">
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
<img class="icon-arrow" :src="tab === item.value ? iconArrowActive : iconArrow" alt="" /> <img
class="icon-arrow"
:src="tab === item.value ? iconArrowActive : iconArrow"
alt=""
>
<div v-if="tab === item.value" class="line" /> <div v-if="tab === item.value" class="line" />
</div> </div>
</div> </div>
<div class="list"> <div class="list">
<div v-for="(item, index) in list" :key="item.id" :class="{ pt0: index === 0, 'item-disabled': item.readFlag }" <div
class="item" @click="goDetail(item)"> v-for="(item, index) in list"
:key="item.id"
:class="{ 'pt0': index === 0, 'item-disabled': item.readFlag }"
class="item"
@click="goDetail(item)"
>
<div class="left"> <div class="left">
<div class="num"> <div class="num">
{{ format(item.sendTime, "dd") }} {{ format(item.sendTime, "dd") }}
@ -172,7 +193,9 @@ console.log(tabList);
{{ item.titile }} {{ item.titile }}
</div> </div>
<div v-if="tab === 1" class="status"> <div v-if="tab === 1" class="status">
<div class="tag tag-blue">审批节点：{{ item.tag.sendUserName }}</div> <div class="tag tag-blue">
审批节点：{{ item.tag.sendUserName }}
</div>
<div :class="item.tag.states === 3 ? 'tag-red' : 'tag-green'" class="tag"> <div :class="item.tag.states === 3 ? 'tag-red' : 'tag-green'" class="tag">
审批状态：{{ getStateText(item.tag.states) }} 审批状态：{{ getStateText(item.tag.states) }}
</div> </div>
@ -186,11 +209,13 @@ console.log(tabList);
<span class="time">{{ format(item.sendTime, "yyyy-MM-dd HH:mm:ss") }}</span> <span class="time">{{ format(item.sendTime, "yyyy-MM-dd HH:mm:ss") }}</span>
</div> </div>
</div> </div>
<div class="look">查看</div> <div class="look">
查看
</div>
</div> </div>
<div v-if="hasNextPage" class="more" @click="getMore"> <div v-if="hasNextPage" class="more" @click="getMore">
查看更多<img class="icon-more" :src="iconArrowDown" alt="" /> 查看更多<img class="icon-more" :src="iconArrowDown" alt="">
</div> </div>
</div> </div>
</div> </div>
@ -457,4 +482,5 @@ console.log(tabList);
// ::v-deep(.n-divider:not(.n-divider--vertical)) { // ::v-deep(.n-divider:not(.n-divider--vertical)) {
// margin-top: 12px; // margin-top: 12px;
// margin-bottom: 12px; // margin-bottom: 12px;
// }</style> // }
</style>

13
src/views/task/modal/CustomFieldModal.vue
Unescape View File

@ -31,7 +31,13 @@ const allCount = computed(() => {
}) })
const selectCount = computed(() => { const selectCount = computed(() => {
return `显示字段(共${onList.value.length}个)` let baseNum = 0
offList.value.forEach((item) => {
if (item.fix)
baseNum++
})
return `显示字段(共${baseNum + onList.value.length}个)`
// return `显示字段(共${onList.value.length}个)`
}) })
const show = ref(false) const show = ref(false)
@ -196,6 +202,11 @@ function clearDragSource() {
return item.fix === true return item.fix === true
}) })
onShowList.value = cloneDeep(onList.value) onShowList.value = cloneDeep(onList.value)
offList.value = offList.value.map(item => ({
...item,
checked: item.fix,
}))
offShowList.value = cloneDeep(offList.value)
} }
function removeHandler(id: string) { function removeHandler(id: string) {

4
src/views/worksheet/aside/ListItem.vue
Unescape View File

@ -24,7 +24,7 @@ const props = defineProps({
}, },
mouseOverTask: { mouseOverTask: {
type: Object, type: Object,
default: () => [], default: () => {},
}, },
}) })
const emit = defineEmits(['dismisClick']) const emit = defineEmits(['dismisClick'])
@ -189,7 +189,7 @@ onMounted(async () => {})
<style lang="less" scoped> <style lang="less" scoped>
.list-item { .list-item {
padding: 10px 0px 10px 8px; padding: 10px 0px 30px 8px;
position: relative; position: relative;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
// · transition: height: 0.2s ease-out; // · transition: height: 0.2s ease-out;

10
src/views/worksheet/aside/WorkSheetList.vue
Unescape View File

@ -11,7 +11,7 @@ import { isEmpty } from '@/utils'
import type { PackageListItem } from '/#/workorder' import type { PackageListItem } from '/#/workorder'
import NotPassed from '@/components/NotPassed.vue' import NotPassed from '@/components/NotPassed.vue'
defineProps({ const props = defineProps({
showFieldList: { showFieldList: {
type: Array, type: Array,
default: () => [], default: () => [],
@ -21,9 +21,13 @@ defineProps({
default: () => [], default: () => [],
}, },
}) })
const emit = defineEmits(['ApprovalOver']) const emit = defineEmits(['ApprovalOver'])
watch(
() => props.showFieldList,
(value) => {
console.log('showFieldList---->', value)
},
)
const workStore = useWorkOrder() const workStore = useWorkOrder()
const data = ref<PackageListItem[]>([]) const data = ref<PackageListItem[]>([])
const activeId = ref('') const activeId = ref('')

110
src/views/worksheet/modal/CustomFieldModal.vue
Unescape View File

@ -1,6 +1,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import { difference } from 'lodash-es' import { difference } from 'lodash-es'
import { computed, defineEmits, defineProps, onMounted, onUnmounted, ref, watch } from 'vue' import {
computed,
defineEmits,
defineProps,
onMounted,
onUnmounted,
ref,
watch,
} from 'vue'
import { VueDraggable } from 'vue-draggable-plus' import { VueDraggable } from 'vue-draggable-plus'
import { getAllfieldList, getfieldList, savefield } from '@/api/home/filter' import { getAllfieldList, getfieldList, savefield } from '@/api/home/filter'
import { workPackageMap } from '@/config/workorder' import { workPackageMap } from '@/config/workorder'
@ -40,73 +48,18 @@ const showOnList = computed(() => {
return onList.value.filter(i => i.name.includes(searchFixVal.value)) return onList.value.filter(i => i.name.includes(searchFixVal.value))
}) })
const selectCount = computed(() => { const selectCount = computed(() => {
return `显示字段(共${onList.value.length}个)` let baseNum = 0
}) offList.value.forEach((item) => {
if (item.fix)
function generatList() { baseNum++
const keys = Object.keys(workPackageMap)
let showList: object[] = []
const hideList: object[] = []
const showStr = 'status'
const showKeys = showStr.split(',').map((key: string) => key.toLowerCase())
for (const key of keys) {
const name = workPackageMap[key]?.label
const isDefault = workPackageMap[key]?.isDefault
// 系统配置为Y且不是默认配置
if (!isDefault) {
hideList.push({
id: key,
name: name || '未配置',
fix: isDefault,
checked: workPackageMap[key].isDefault,
}) })
} return `显示字段(共${baseNum + onList.value.length}个)`
} })
showList = showKeys.reduce((acc, key) => {
const config = {
id: key,
name: workPackageMap[key].label || '未配置',
fix: workPackageMap[key].isDefault,
}
return [...acc, config]
}, [])
const fixedList = generateDefaultList()
hideList.unshift(...fixedList)
showList.unshift(...fixedList)
onList.value = showList
offList.value = hideList
return { showList, hideList }
}
function generateDefaultList() {
return Object.keys(workPackageMap).reduce((acc, key) => {
const { label, isDefault } = workPackageMap[key]
if (isDefault) {
const config = {
id: key,
name: label || '未配置',
fix: true,
checked: true,
}
return [...acc, config]
}
else {
return acc
}
}, [])
}
const show = ref(false) const show = ref(false)
const checkAll = computed(() => { const checkAll = computed(() => {
let baseNum = 0 let baseNum = 0
offList.value.map((v) => { offList.value.forEach((v) => {
if (v.fix) if (v.fix)
baseNum += 1 baseNum += 1
}) })
@ -124,10 +77,10 @@ async function handleSumbit(e: MouseEvent) {
const userStore = useUser() const userStore = useUser()
const userInfo = userStore.getUserInfo const userInfo = userStore.getUserInfo
let userField = '' let userField = ''
fixList.value.map((v) => { fixList.value.forEach((v) => {
userField += `${v.id},` userField += `${v.id},`
}) })
onList.value.map((v) => { onList.value.forEach((v) => {
userField += `${v.id},` userField += `${v.id},`
}) })
userField = userField.slice(0, userField.length - 1) userField = userField.slice(0, userField.length - 1)
@ -141,20 +94,26 @@ defineExpose({
showModal, showModal,
}) })
// generatList();
const selectIds = ref<string[]>([]) const selectIds = ref<string[]>([])
function onCheckAllChange(value) { function onCheckAllChange(value) {
const ids: string[] = [] const ids: string[] = []
if (value) {
offList.value.forEach((v) => {
console.log()
if (!v.checked)
onList.value.push(v)
})
}
else {
onList.value = []
}
for (const item of offList.value) { for (const item of offList.value) {
if (!item.fix) { if (!item.fix) {
item.checked = value item.checked = value
ids.push(item.id) ids.push(item.id)
} }
} }
selectIds.value = value ? ids : [] selectIds.value = value ? ids : []
} }
@ -174,15 +133,12 @@ const showIds = computed(() => {
}) })
}) })
// 关闭弹窗，清空搜索条件 // 关闭弹窗，清空搜索条件
watch( watch(show, (val) => {
show,
(val) => {
if (!val) { if (!val) {
searchKey.value = '' searchKey.value = ''
searchFixVal.value = '' searchFixVal.value = ''
} }
}, })
)
watch( watch(
() => selectIds.value.length, () => selectIds.value.length,
(newVal, oldVal) => { (newVal, oldVal) => {
@ -288,7 +244,7 @@ async function getData() {
const userFieldFixed = useList.userFieldFixed?.split(',') const userFieldFixed = useList.userFieldFixed?.split(',')
const userFieldUnFixed = useList.userFieldUnFixed?.split(',') const userFieldUnFixed = useList.userFieldUnFixed?.split(',')
allList.map((v) => { allList.forEach((v) => {
const item = { const item = {
name: v.fieldDesc, name: v.fieldDesc,
id: v.name, id: v.name,
@ -303,7 +259,7 @@ async function getData() {
else offList.value.push(item) else offList.value.push(item)
}) })
offList.value.unshift(...fixList.value) offList.value.unshift(...fixList.value)
useList.userFieldFixed?.split(',').map((v) => { useList.userFieldFixed?.split(',').forEach((v) => {
let item = allList.find(v2 => v2.name == v) let item = allList.find(v2 => v2.name == v)
if (item) { if (item) {
item = { item = {
@ -338,7 +294,7 @@ onUnmounted(() => {
}) })
const indeterminate = computed(() => { const indeterminate = computed(() => {
let baseNum = 0 let baseNum = 0
offList.value.map((v) => { offList.value.forEach((v) => {
if (v.fix) if (v.fix)
baseNum += 1 baseNum += 1
}) })

Write Preview
Loading…
Cancel
Save