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

Merge pull request 'fix: 样式bug处理' (#90) from fix/styleProblem into test

Browse Source 
Reviewed-on: #90
pull/95/head
wangyanjun 1 year ago
parent 057ebb8db6 49c2fe1b8e
commit 2e477c9bcf
12 changed files with 790 additions and 693 deletions
Show Stats Download Patch File Download Diff File

12
src/layout/components/Header/ShortcutModal.vue
Unescape View File

@ -9,6 +9,7 @@ const cardStyle = {
'width': '800px', 'width': '800px',
'--n-padding-bottom': '10px', '--n-padding-bottom': '10px',
'--n-padding-left': '10px', '--n-padding-left': '10px',
'padding-bottom':'100px'
} }
function showModal() { function showModal() {
@ -130,9 +131,9 @@ defineExpose({
</table> </table>
</div> </div>
</div> </div>
<n-divider /> <!-- <n-divider /> -->
<template #footer> <!-- <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button type="info" @click="closeModal"> <n-button type="info" @click="closeModal">
确认 确认
@ -141,7 +142,7 @@ defineExpose({
取消 取消
</n-button> </n-button>
</div> </div>
</template> </template> -->
</n-card> </n-card>
</n-modal> </n-modal>
</div> </div>
@ -253,6 +254,11 @@ defineExpose({
tr td:first-child{ tr td:first-child{
text-align: right; text-align: right;
padding-right: 10px; padding-right: 10px;
color: #515457;
}
tr td{
color: #333333;
} }
tr span{ tr span{
padding: 0 10px; padding: 0 10px;

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

@ -1,239 +1,250 @@
<script lang="ts" setup> <script lang="ts" setup>
import { setFilter } from "@/api/home/filter"; import { debounce, difference } from 'lodash-es'
import { asideMap } from "@/config/final"; import { computed, ref, watch } from 'vue'
import { useFinal } from "@/store/modules/final"; import { VueDraggable } from 'vue-draggable-plus'
import { debounce, difference } from "lodash-es"; import { setFilter } from '@/api/home/filter'
import { computed, ref, watch } from "vue"; import { asideMap } from '@/config/final'
import { VueDraggable } from "vue-draggable-plus"; import { useFinal } from '@/store/modules/final'
const show = ref(false); const show = ref(false)
const checkAll = ref(false); const checkAll = ref(false)
const selectIds = ref<string[]>([]); const selectIds = ref<string[]>([])
const finalStore = useFinal(); const finalStore = useFinal()
function showModal() { function showModal() {
show.value = true; show.value = true
} }
function closeModal() { function closeModal() {
show.value = false; show.value = false
} }
// 左侧隐藏列表 // 左侧隐藏列表
const offList = ref<any[]>([]); const offList = ref<any[]>([])
// 右侧显示列表 // 右侧显示列表
const onList = ref<any[]>([]); const onList = ref<any[]>([])
const allCount = computed(() => { const allCount = computed(() => {
return `全部筛选(共${offList.value.length}个)`; return `全部筛选(共${offList.value.length}个)`
}); })
const selectCount = computed(() => { const selectCount = computed(() => {
return `已选筛选(共${onList.value.length}个)`; return `已选筛选(共${onList.value.length}个)`
}); })
defineExpose({ defineExpose({
showModal, showModal,
}); })
function generateDefaultList() { function generateDefaultList() {
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) {
const config = { const config = {
id: key, id: key,
name: label || "未配置", name: label || '未配置',
fix: isDefaultFilter, fix: isDefaultFilter,
checked: true, checked: true,
}; }
return [...acc, config]; return [...acc, config]
} else { }
return acc; else {
return acc
} }
}, []); }, [])
} }
function generatList(customConfig) { function generatList(customConfig) {
const keys = Object.keys(asideMap); const keys = Object.keys(asideMap)
let onList: object[] = []; let onList: object[] = []
const offList: object[] = []; const offList: object[] = []
const showKeys = customConfig.map((key: string) => key.toLowerCase()); const showKeys = customConfig.map((key: string) => key.toLowerCase())
for (const key of keys) { for (const key of keys) {
if (!key.startsWith("iz") || asideMap[key] === undefined) continue; if (!key.startsWith('iz') || asideMap[key] === undefined)
continue
const name = asideMap[key]?.label; const name = asideMap[key]?.label
const isDefaultFilter = asideMap[key]?.isDefaultFilter; const isDefaultFilter = asideMap[key]?.isDefaultFilter
// 不是默认配置 // 不是默认配置
const isChecked = asideMap[key].isDefaultFilter || showKeys.includes(key); const isChecked = asideMap[key].isDefaultFilter || showKeys.includes(key)
offList.push({ offList.push({
id: key, id: key,
name: name || "未配置", name: name || '未配置',
fix: isDefaultFilter, fix: isDefaultFilter,
checked: isChecked, checked: isChecked,
}); })
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 (isDefaultFilter === false) {
const config = { const config = {
id: key, id: key,
name: asideMap[key].label || "未配置", name: asideMap[key].label || '未配置',
fix: asideMap[key].isDefaultFilter, fix: asideMap[key].isDefaultFilter,
}; }
return [...acc, config]; return [...acc, config]
} else { }
return acc; else {
return acc
} }
}, []); }, [])
const fixedList = generateDefaultList(); const fixedList = generateDefaultList()
onList.unshift(...fixedList); onList.unshift(...fixedList)
return { showList: onList, hideList: offList }; return { showList: onList, hideList: offList }
} }
finalStore.$subscribe(() => { finalStore.$subscribe(() => {
const customConfig = finalStore.getCustomConfig; const customConfig = finalStore.getCustomConfig
if (customConfig === null) return; if (customConfig === null)
return
const { showList, hideList } = generatList(customConfig); const { showList, hideList } = generatList(customConfig)
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 const param = onList.value
.filter((item) => !asideMap[item.id].isDefaultFilter) .filter(item => !asideMap[item.id].isDefaultFilter)
.map((item) => { .map((item) => {
return item.id; return item.id
}) })
.join(","); .join(',')
await setFilter({ searchcount: param, type: 1 }); await setFilter({ searchcount: param, type: 1 })
finalStore.fetchCustomConfig(); finalStore.fetchCustomConfig()
closeModal(); closeModal()
} }
function onCheckAllChange(value) { function onCheckAllChange(value) {
const ids: string[] = []; const ids: string[] = []
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 : []
} }
function onCheckChange(checked: any, item: any) { 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
let currentIndex = offList.value.findIndex((v) => v.id == item.id); const currentIndex = offList.value.findIndex(v => v.id == item.id)
offList.value[currentIndex].checked = item.checked; offList.value[currentIndex].checked = item.checked
if (index === -1 && checked) selectIds.value.push(item.id); if (index === -1 && checked)
else selectIds.value.splice(index, 1); selectIds.value.push(item.id)
else selectIds.value.splice(index, 1)
} }
const showIds = computed(() => { const showIds = computed(() => {
return onList.value.map((item) => { return onList.value.map((item) => {
return item.id; return item.id
}); })
}); })
watch( watch(
() => selectIds.value.length, () => selectIds.value.length,
(newVal, oldVal) => { (newVal, oldVal) => {
if (newVal === oldVal) return; if (newVal === oldVal)
return
const action = newVal > oldVal ? "add" : "remove"; const action = newVal > oldVal ? 'add' : 'remove'
const diff = const diff
action === "add" = action === 'add'
? difference(selectIds.value, showIds.value) ? difference(selectIds.value, showIds.value)
: difference(showIds.value, selectIds.value); : difference(showIds.value, selectIds.value)
if (diff.length === 0) return; if (diff.length === 0)
return
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)) {
onList.value.push({ onList.value.push({
id: item.id, id: item.id,
name: item.name || "未配置", name: item.name || '未配置',
fix: item.fix || false, fix: item.fix || false,
}); })
} }
} }
} else { }
const list = onList.value; else {
const list = onList.value
for (let index = 0; index < list.length; index++) { for (let index = 0; index < list.length; index++) {
const item = list[index]; const item = list[index]
if (!item.fix && diff.includes(item.id)) { if (!item.fix && diff.includes(item.id)) {
list.splice(index, 1); list.splice(index, 1)
index--; index--
} }
} }
} }
} },
); )
watch( watch(
() => showIds.value.length, () => showIds.value.length,
(newVal, oldVal) => { (newVal, oldVal) => {
if (newVal === oldVal) return; if (newVal === oldVal)
return
const diff = difference(selectIds.value, showIds.value); const diff = difference(selectIds.value, showIds.value)
if (diff.length === 0) return; if (diff.length === 0)
return
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)) {
const index = selectIds.value.indexOf(item.id); const index = selectIds.value.indexOf(item.id)
item.checked = false; item.checked = false
selectIds.value.splice(index, 1); selectIds.value.splice(index, 1)
} }
} }
} },
); )
function clearDragSource() { function clearDragSource() {
onList.value = onList.value.filter((item) => { onList.value = onList.value.filter((item) => {
return item.fix === true; return item.fix === true
}); })
} }
function removeHandler(id: string) { function removeHandler(id: string) {
const index = onList.value.findIndex((item) => { const index = onList.value.findIndex((item) => {
return item.id === id; return item.id === id
}); })
if (index !== -1) onList.value.splice(index, 1); if (index !== -1)
onList.value.splice(index, 1)
} }
const offKeyword = ref(""); const offKeyword = ref('')
const onKeyword = ref(""); const onKeyword = ref('')
const leftInputHandler = debounce((keyword) => { const leftInputHandler = debounce((keyword) => {
offKeyword.value = keyword; offKeyword.value = keyword
}, 300); }, 300)
const rightInputHandler = debounce((keyword) => { const rightInputHandler = debounce((keyword) => {
onKeyword.value = keyword; onKeyword.value = keyword
}, 300); }, 300)
</script> </script>
<template> <template>
@ -246,10 +257,10 @@ const rightInputHandler = debounce((keyword) => {
aria-modal="true" aria-modal="true"
> >
<div class="wrapper"> <div class="wrapper">
<span class="wrapper-title">自定义筛选</span> <span class="wrapper-title" style="color: #333333;">自定义筛选</span>
<div class="wrapper-bar"> <div class="wrapper-bar">
<div class="wrapper-info"> <div class="wrapper-info" style="background-color: #F8F8F8;">
<span :style="{ 'margin-left': '18px' }">筛选项信息</span> <span :style="{ 'margin-left': '18px' ,'color':'#333333'}">筛选项信息</span>
</div> </div>
</div> </div>
@ -263,7 +274,7 @@ const rightInputHandler = debounce((keyword) => {
:bordered="false" :bordered="false"
> >
<div> <div>
<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" color="#999999" />
</template> </template>
@ -313,7 +324,8 @@ const rightInputHandler = debounce((keyword) => {
<span class="textbtnStyle" @click="clearDragSource">清空</span> <span class="textbtnStyle" @click="clearDragSource">清空</span>
</template> </template>
<div> <div>
<n-input placeholder="搜索关键字" @input="rightInputHandler"> <!-- j -->
<n-input placeholder="搜索关键词" @input="rightInputHandler">
<template #suffix> <template #suffix>
<SvgIcon size="14px" name="magnifying-1" color="#999999" /> <SvgIcon size="14px" name="magnifying-1" color="#999999" />
</template> </template>
@ -337,8 +349,8 @@ const rightInputHandler = debounce((keyword) => {
:class="{ fix: item.fix }" :class="{ fix: item.fix }"
class="cursor-move draggable-li" class="cursor-move draggable-li"
> >
<!-- v-show="!item.fix" 判断是否为固定值 --> <!-- v-show="!item.fix" 判断是否为固定值 -->
<SvgIcon name="drag" size="14" /> <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"
@ -357,7 +369,9 @@ const rightInputHandler = debounce((keyword) => {
</div> </div>
<template #footer> <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button type="info" @click="handleSumbit"> 确定 </n-button> <n-button type="info" @click="handleSumbit">
确定
</n-button>
<n-button secondary style="margin-left: 15px" @click="closeModal"> <n-button secondary style="margin-left: 15px" @click="closeModal">
取消 取消
</n-button> </n-button>
@ -414,7 +428,7 @@ const rightInputHandler = debounce((keyword) => {
.cardstyle { .cardstyle {
width: 620px; width: 620px;
height: 800px; height: 800px;
--n-padding-bottom: 20px; --n-padding-bottom: 16px;
--n-padding-left: 24px; --n-padding-left: 24px;
--n-padding-right: 24px; --n-padding-right: 24px;
--n-padding-top: 20px; --n-padding-top: 20px;
@ -455,6 +469,7 @@ const rightInputHandler = debounce((keyword) => {
::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;
} }
::v-deep(.n-scrollbar) { ::v-deep(.n-scrollbar) {
border-top: none !important; border-top: none !important;

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

@ -323,14 +323,16 @@ const moveEnd = () => {
v-if="item.favorite && !item.isDefaultFilter" v-if="item.favorite && !item.isDefaultFilter"
name="favorite-fill" name="favorite-fill"
color="#fd9b0a" color="#fd9b0a"
size="18" width="13"
height="12"
style="margin-right: 3px" style="margin-right: 3px"
@click="unFavoriteHandler($event, item)" @click="unFavoriteHandler($event, item)"
/> />
<SvgIcon <SvgIcon
v-else-if="!item.favorite && !item.isDefaultFilter" v-else-if="!item.favorite && !item.isDefaultFilter"
name="favorite-unfill" name="favorite-unfill"
size="18" width="13"
height="12"
style="margin-right: 3px" style="margin-right: 3px"
@click="favoriteHandler($event, item)" @click="favoriteHandler($event, item)"
/> />
@ -357,7 +359,8 @@ const moveEnd = () => {
v-if="item.favorite && !item.isDefaultFilter" v-if="item.favorite && !item.isDefaultFilter"
name="favorite-fill" name="favorite-fill"
color="#fd9b0a" color="#fd9b0a"
size="18" width="13"
height="12"
fill="#666666" fill="#666666"
style="cursor: pointer !important; margin-right: 3px" style="cursor: pointer !important; margin-right: 3px"
@click="unFavoriteHandler($event, item)" @click="unFavoriteHandler($event, item)"
@ -365,7 +368,8 @@ const moveEnd = () => {
<SvgIcon <SvgIcon
v-else-if="!item.favorite && !item.isDefaultFilter" v-else-if="!item.favorite && !item.isDefaultFilter"
name="favorite-unfill" name="favorite-unfill"
size="18" width="13"
height="12"
fill="#666666" fill="#666666"
style="cursor: pointer !important; margin-right: 3px" style="cursor: pointer !important; margin-right: 3px"
@click="favoriteHandler($event, item)" @click="favoriteHandler($event, item)"

138
src/views/home/aside/comp/modals/CustomFilterModal.vue
Unescape View File

@ -1,12 +1,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import { cloneDeep, debounce, difference, isEqual } from 'lodash-es'
import { computed, defineOptions, onMounted, ref, watch } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import { getAllfieldList, getfieldList, setFilter } from '@/api/home/filter' import { getAllfieldList, getfieldList, setFilter } from '@/api/home/filter'
import { asideMap } from '@/config/aside' import { asideMap } from '@/config/aside'
import { useConfig } from '@/store/modules/asideConfig' import { useConfig } from '@/store/modules/asideConfig'
import { useUser } from "@/store/modules/user" import { useUser } from '@/store/modules/user'
import { debounce, difference, cloneDeep, isEqual } from 'lodash-es'
import { computed, defineOptions, onMounted, ref, watch } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
defineOptions({ name: 'CustomFilterModal' }) defineOptions({ name: 'CustomFilterModal' })
@ -17,7 +16,6 @@ const selectIds = ref<string[]>([])
const tempList = ref<string[]>([]) const tempList = ref<string[]>([])
function showModal() { function showModal() {
show.value = true show.value = true
// 重置左右列表数据 // 重置左右列表数据
@ -26,19 +24,19 @@ function showModal() {
if (config == null || customConfig == null) if (config == null || customConfig == null)
return return
if(tempList.value.length > 0 && isEqual(tempList.value, configStore.getFilterConfig)) { if (tempList.value.length > 0 && isEqual(tempList.value, configStore.getFilterConfig))
return return
}
console.log("开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------", customConfig); console.log('开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------', customConfig)
const { showList, hideList } = generatList(config, customConfig) const { showList, hideList } = generatList(config, customConfig)
tempList.value = cloneDeep(showList); tempList.value = cloneDeep(showList)
if(tempList.value.length > 0) { if (tempList.value.length > 0)
configStore.setFilterConfig(tempList.value) configStore.setFilterConfig(tempList.value)
}
onList.value = showList onList.value = showList
offList.value = hideList offList.value = hideList
// 重置全选状态 // 重置全选状态
checkAll.value = hideList.every(item => item.checked); checkAll.value = hideList.every(item => item.checked)
// 重置输入框查询条件 // 重置输入框查询条件
offKeyword.value = '' offKeyword.value = ''
onKeyword.value = '' onKeyword.value = ''
@ -108,9 +106,8 @@ function generatList(config, customConfig) {
fix: isDefaultFilter, fix: isDefaultFilter,
checked: isChecked, checked: isChecked,
}) })
if (isChecked && selectIds.value.indexOf(key) === -1) { if (isChecked && !selectIds.value.includes(key))
isChecked && selectIds.value.push(key) isChecked && selectIds.value.push(key)
}
} }
} }
@ -134,30 +131,31 @@ function generatList(config, customConfig) {
const fixedList = generateDefaultList(config) const fixedList = generateDefaultList(config)
offList.unshift(...fixedList) offList.unshift(...fixedList)
onList.unshift(...fixedList) onList.unshift(...fixedList)
console.log("原始筛选条件customConfig", customConfig); console.log('原始筛选条件customConfig', customConfig)
// onList按照customConfig排序 // onList按照customConfig排序
let tempOnList = cloneDeep(onList); const tempOnList = cloneDeep(onList)
console.log("原始筛选条件tempOnList", tempOnList); console.log('原始筛选条件tempOnList', tempOnList)
let sortKeyList: any = []; const sortKeyList: any = []
configStore.getFilterConfig.map((item: any) => { configStore.getFilterConfig.map((item: any) => {
sortKeyList.push(item.id); sortKeyList.push(item.id)
}); })
console.log("原始筛选条件sortKeyList", sortKeyList); console.log('原始筛选条件sortKeyList', sortKeyList)
let sortList: any = []; const sortList: any = []
if(sortKeyList.length > 0) { if (sortKeyList.length > 0) {
sortKeyList.map(key => { sortKeyList.map((key) => {
let tempItem = tempOnList.find(item => item.id == key); const tempItem = tempOnList.find(item => item.id == key)
sortList.push(tempItem); sortList.push(tempItem)
}); })
}else {
customConfig.map(key => {
let tempItem = tempOnList.find(item => item.id == key);
sortList.push(tempItem);
});
} }
console.log("原始筛选条件sortList", sortList ); else {
console.log("原始筛选条件configStore.getFilterConfig", configStore.getFilterConfig, ); customConfig.map((key) => {
const tempItem = tempOnList.find(item => item.id == key)
sortList.push(tempItem)
})
}
console.log('原始筛选条件sortList', sortList)
console.log('原始筛选条件configStore.getFilterConfig', configStore.getFilterConfig)
// return { showList: onList, hideList: offList } // return { showList: onList, hideList: offList }
return { showList: sortList, hideList: offList } return { showList: sortList, hideList: offList }
} }
@ -168,17 +166,17 @@ configStore.$subscribe(() => {
if (config == null || customConfig == null) if (config == null || customConfig == null)
return return
console.log("tempList.value-----------", tempList.value); console.log('tempList.value-----------', tempList.value)
console.log("configStore.getFilterConfig-----------", configStore.getFilterConfig); console.log('configStore.getFilterConfig-----------', configStore.getFilterConfig)
if(tempList.value.length > 0 && isEqual(tempList.value, configStore.getFilterConfig)) { if (tempList.value.length > 0 && isEqual(tempList.value, configStore.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); console.log('克隆条件', tempList.value)
if(tempList.value.length > 0) { if (tempList.value.length > 0)
configStore.setFilterConfig(tempList.value) configStore.setFilterConfig(tempList.value)
}
// setTimeout(() => { // setTimeout(() => {
// }, 500); // }, 500);
onList.value = showList onList.value = showList
@ -193,19 +191,19 @@ async function handleSumbit(e: MouseEvent) {
await setFilter({ searchcount: param, type: 0 }) await setFilter({ searchcount: param, type: 0 })
const obj = await configStore.fetchCustomConfig() const obj = await configStore.fetchCustomConfig()
console.log("obj-------------------------------", obj); console.log('obj-------------------------------', obj)
let tempOnList = cloneDeep(onList.value); const tempOnList = cloneDeep(onList.value)
console.log("原始筛选条件tempOnList", tempOnList); console.log('原始筛选条件tempOnList', tempOnList)
let sortList: any = []; const sortList: any = []
obj.map(key => { obj.map((key) => {
let tempItem = tempOnList.find(item => item.id == key); const tempItem = tempOnList.find(item => item.id == key)
sortList.push(tempItem); sortList.push(tempItem)
}); })
console.log("configStore.sortList---------------", sortList); console.log('configStore.sortList---------------', sortList)
// setTimeout(() => { // setTimeout(() => {
if(sortList.length > 0) { if (sortList.length > 0)
configStore.setFilterConfig(sortList) configStore.setFilterConfig(sortList)
}
// }, 500); // }, 500);
closeModal() closeModal()
} }
@ -232,8 +230,8 @@ function onCheckChange(checked: any, item: any) {
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)
} }
const showIds = computed(() => { const showIds = computed(() => {
@ -328,23 +326,21 @@ const rightInputHandler = debounce((keyword) => {
}, 300) }, 300)
async function getfield() { async function getfield() {
let res; let res
res = await getAllfieldList(3) res = await getAllfieldList(3)
const userStore = useUser(); const userStore = useUser()
const userInfo = userStore.getUserInfo; const userInfo = userStore.getUserInfo
res = await getfieldList(3, userInfo.id) res = await getfieldList(3, userInfo.id)
} }
function onMove(e) { function onMove(e) {
// 这里的e表示即将停靠的元素。 // 这里的e表示即将停靠的元素。
if (e?.related?.className?.indexOf('fix') !== -1) { if (e?.related?.className?.indexOf('fix') !== -1)
return false; return false
}
} }
onMounted(() => { onMounted(() => {
getfield(); getfield()
}) })
</script> </script>
<template> <template>
@ -373,7 +369,7 @@ onMounted(() => {
<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="全选" @update:checked="onCheckAllChange" :indeterminate="!checkAll"/> <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 }"
@ -407,12 +403,14 @@ onMounted(() => {
</template> </template>
</n-input> </n-input>
<n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;" class="scroll"> <n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;" class="scroll">
<VueDraggable v-model="onList" class="draggable-ul" :animation="150" group="shared" > <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"> <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 v-if="!item.fix" size="16px" style="display:block;margin-left: auto;cursor: pointer;" <SvgIcon
name="clear" @click="removeHandler(item.id)" /> v-if="!item.fix" size="16px" style="display:block;margin-left: auto;cursor: pointer;"
name="clear" @click="removeHandler(item.id)"
/>
</div> </div>
</VueDraggable> </VueDraggable>
</n-scrollbar> </n-scrollbar>

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

@ -8,116 +8,122 @@ import {
reactive, reactive,
ref, ref,
unref, unref,
} from "vue"; } from 'vue'
import { NDataTable } from "naive-ui"; import { NDataTable } from 'naive-ui'
import type { DataTableColumns, DataTableRowKey } from "naive-ui"; import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
import type { SortableEvent } from "sortablejs"; import type { SortableEvent } from 'sortablejs'
import Sortable from "sortablejs"; import Sortable from 'sortablejs'
import { debounce } from "lodash-es"; import { debounce } from 'lodash-es'
import Action from "../Action.vue"; import Action from '../Action.vue'
import { deleteCondition, getConditionList, sort } from "@/api/home/filter"; import { deleteCondition, getConditionList, sort } from '@/api/home/filter'
import type { FilterSearchParam } from "/#/api"; import type { FilterSearchParam } from '/#/api'
defineOptions({ name: "FilterModal" }); defineOptions({ name: 'FilterModal' })
const props = defineProps({ const props = defineProps({
type: { type: {
type: Number, type: Number,
default: () => 0, default: () => 0,
}, },
}); })
const emit = defineEmits<{ const emit = defineEmits<{
(e: "showNewFilter"): void; (e: 'showNewFilter'): void
(e: "editFilter", filter: any): void; (e: 'editFilter', filter: any): void
}>(); }>()
const show = ref(false); const show = ref(false)
const cardStyle = { const cardStyle = {
width: "800px", 'width': '800px',
height: "830px", 'height': '830px',
"--n-padding-bottom": "10px", '--n-padding-bottom': '10px',
"--n-padding-left": "10px", '--n-padding-left': '10px',
}; }
interface RowData { interface RowData {
id: string; id: string
searchname: string; searchname: string
createby: string; createby: string
createtime: string; createtime: string
updateby: string; updateby: string
updatetime: string; updatetime: string
} }
const sortData = (row) => { function sortData(row) {
console.log("sortData", row); console.log('sortData', row)
if (row.order == "descend") { if (row.order == 'descend') {
tableData.value.sort( tableData.value.sort(
(a, b) => (a, b) =>
new Date(a[row.columnKey]).getTime() - new Date(b[row.columnKey]).getTime() new Date(a[row.columnKey]).getTime() - new Date(b[row.columnKey]).getTime(),
); )
} else if (row.order == "ascend") { }
else if (row.order == 'ascend') {
tableData.value.sort( tableData.value.sort(
(a, b) => (a, b) =>
new Date(b[row.columnKey]).getTime() - new Date(a[row.columnKey]).getTime() new Date(b[row.columnKey]).getTime() - new Date(a[row.columnKey]).getTime(),
); )
} else { }
else {
tableData.value.sort( tableData.value.sort(
(a, b) => Number((a as any).reorder) - Number((b as any).reorder) (a, b) => Number((a as any).reorder) - Number((b as any).reorder),
); )
} }
}; }
const columns: DataTableColumns<RowData> = [ const columns: DataTableColumns<RowData> = [
{ {
type: "selection", type: 'selection',
}, },
{ {
title: "操作", title: '操作',
key: "action", key: 'action',
render(row) { render(row) {
return h(Action, { return h(Action, {
options: [ options: [
{ label: "编辑", key: 1 }, { label: '编辑', key: 1 },
{ label: "删除", key: 2 }, { label: '删除', key: 2 },
], ],
id: row.id, id: row.id,
select, select,
}); })
}, },
}, },
// j
{ {
title: "名称", title: '名称',
key: "searchname", key: 'searchname',
ellipsis: {
tooltip: true,
},
}, },
{ {
title: "创建者", title: '创建者',
key: "createby", key: 'createby',
}, },
{ {
title: "创建时间", title: '创建时间',
key: "createtime", key: 'createtime',
width: 180, width: 180,
sorter: (row1, row2) => { sorter: (row1, row2) => {
// tableData.value.sort( // tableData.value.sort(
// (a, b) => new Date(a?.createtime).getTime() - new Date(b?.createtime).getTime() // (a, b) => new Date(a?.createtime).getTime() - new Date(b?.createtime).getTime()
// ); // );
return new Date(row1?.createtime).getTime() - new Date(row2?.createtime).getTime(); return new Date(row1?.createtime).getTime() - new Date(row2?.createtime).getTime()
}, },
}, },
{ {
title: "更新者", title: '更新者',
key: "updateby", key: 'updateby',
}, },
{ {
title: "更新时间", title: '更新时间',
key: "updatetime", key: 'updatetime',
width: 180, width: 180,
}, },
]; ]
const total = ref(0); const total = ref(0)
const loading = ref(true); const loading = ref(true)
const pagination = reactive({ const pagination = reactive({
page: 1, page: 1,
pageCount: 1, pageCount: 1,
@ -125,196 +131,198 @@ const pagination = reactive({
showSizePicker: true, showSizePicker: true,
pageSizes: [ pageSizes: [
{ {
label: "10 每页", label: '10 每页',
value: 10, value: 10,
}, },
{ {
label: "15 每页", label: '15 每页',
value: 15, value: 15,
}, },
{ {
label: "30 每页", label: '30 每页',
value: 30, value: 30,
}, },
{ {
label: "50 每页", label: '50 每页',
value: 50, value: 50,
}, },
], ],
showQuickJumper: true, showQuickJumper: true,
prefix: () => `共 ${total.value} 条数据`, prefix: () => `共 ${total.value} 条数据`,
}); })
const tableData = ref<Array<RowData>>([]); const tableData = ref<Array<RowData>>([])
const keyword = ref(""); const keyword = ref('')
async function query(page: number, pageSize: number) { async function query(page: number, pageSize: number) {
const searchParam: FilterSearchParam = { const searchParam: FilterSearchParam = {
search_searchname: { value: keyword.value, op: "like", type: "string" }, search_searchname: { value: keyword.value, op: 'like', type: 'string' },
}; }
const result = await getConditionList({ pageNo: page, pageSize }, searchParam, props.type); const result = await getConditionList({ pageNo: page, pageSize }, searchParam, props.type)
const { data, pageCount, total: totalCount } = result; const { data, pageCount, total: totalCount } = result
tableData.value = data; tableData.value = data
pagination.page = page; pagination.page = page
total.value = totalCount; total.value = totalCount
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) { switch (key) {
case 1: case 1:
editSelection(id); editSelection(id)
break; break
case 2: case 2:
deleteSelection(id); deleteSelection(id)
break; break
default: default:
break; break
} }
} }
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
} }
deleteCondition({ ids: selectionIds.value.join(",") }).then(() => { deleteCondition({ ids: selectionIds.value.join(',') }).then(() => {
selectionIds.value = []; selectionIds.value = []
query(pagination.page, pagination.pageSize); query(pagination.page, pagination.pageSize)
}); })
} }
async function handlePageChange(currentPage) { async function handlePageChange(currentPage) {
if (loading.value) 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;
} }
let sortTable: Sortable | null = null; let sortTable: Sortable | null = null
const tableRef = ref<InstanceType<typeof NDataTable>>(); const tableRef = ref<InstanceType<typeof NDataTable>>()
async function showModal() { async function showModal() {
show.value = true; show.value = true
const { page, pageSize } = pagination; const { page, pageSize } = pagination
await query(page, pageSize); await query(page, pageSize)
nextTick(() => { nextTick(() => {
if (sortTable !== null) 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
}); })
</script> </script>
<template> <template>
@ -340,12 +348,11 @@ const showSearch = computed(() => {
<span <span
:style="{ 'margin-left': '18px', 'font-size': '16px' }" :style="{ 'margin-left': '18px', 'font-size': '16px' }"
class="wrapper-info-title" class="wrapper-info-title"
>基本信息</span >基本信息</span>
>
</div> </div>
</div> </div>
<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="请输入过滤条件名称搜索"
@ -363,52 +370,50 @@ const showSearch = computed(() => {
</n-button> </n-button>
</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"> <n-button 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 删除
> </n-button>
</div> </div>
<div class="msg"> <div class="msg">
<span <span>已选中
>已选中
<span style="color: #507afd; font-size: 16px">{{ <span style="color: #507afd; font-size: 16px">{{
selectionIds.length selectionIds.length
}}</span> }}</span>
项</span 项</span>
>
<a @click="selectionIds = []">清空</a> <a @click="selectionIds = []">清空</a>
</div> </div>
</div> </div>
<div class="wrapper-table"> <div class="wrapper-table">
<NDataTable <NDataTable
ref="tableRef" ref="tableRef"
:max-height="480" :max-height="480"
remote remote
:bordered="false"
:row-props="rowProps as any" :row-props="rowProps as any"
:columns="columns" :columns="columns"
:data="tableData" :data="tableData"
: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"
@update:sorter="sortData" @update:sorter="sortData"
: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> <n-button style="background-color: #507AFD;" type="info" @click="closeModal">
确定
</n-button>
<n-button secondary style="margin-left: 15px" @click="closeModal"> <n-button secondary style="margin-left: 15px" @click="closeModal">
取消 取消
</n-button> </n-button>
@ -483,4 +488,12 @@ const showSearch = computed(() => {
::v-deep(.n-data-table .n-data-table-th) { ::v-deep(.n-data-table .n-data-table-th) {
font-weight: bold !important; font-weight: bold !important;
} }
::v-deep(table thead tr th) {
background-color: #FAFAFA !important;
}
::v-deep(.n-button--secondary) {
background-color: #fff;
border: 1px solid #cad2dd !important;
}
</style> </style>

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

@ -1,107 +1,107 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { FormInst, FormItemRule, FormRules } from "naive-ui"; import type { FormInst, FormItemRule, FormRules } from 'naive-ui'
import { computed, defineOptions, onBeforeMount, reactive, ref, unref, watch } from "vue"; import { computed, defineOptions, onBeforeMount, reactive, ref, unref, watch } from 'vue'
import { asideMap } from "@/config/aside"; import { asideMap } from '@/config/aside'
import { useDictionary } from "@/store/modules/dictonary"; import { useDictionary } from '@/store/modules/dictonary'
import { useConfig } from "@/store/modules/asideConfig"; import { useConfig } from '@/store/modules/asideConfig'
import type { FilterCondition } from "/#/api"; import type { FilterCondition } from '/#/api'
import { addCondition, updateCondition } from "@/api/home/filter"; import { addCondition, updateCondition } from '@/api/home/filter'
import { formatToDate2, formatToDate3 } from "@/utils/dateUtil"; import { formatToDate2, formatToDate3 } from '@/utils/dateUtil'
type Status = "edit" | "new"; type Status = 'edit' | 'new'
const show = ref(false); const emit = defineEmits(['onOk'])
const configStore = useConfig(); const show = ref(false)
const dicStore = useDictionary(); const configStore = useConfig()
const currentStatus = ref<Status>("new"); const dicStore = useDictionary()
let currentEditId: string | null = null; const currentStatus = ref<Status>('new')
const emit = defineEmits(["onOk"]); let currentEditId: string | null = null
const modalTitle = computed(() => { const modalTitle = computed(() => {
return currentStatus.value === "new" ? "新建过滤条件" : "编辑过滤条件"; return currentStatus.value === 'new' ? '新建过滤条件' : '编辑过滤条件'
}); })
const cardStyle = { const cardStyle = {
width: "800px", 'width': '800px',
"--n-padding-bottom": "10px", '--n-padding-bottom': '10px',
"--n-padding-left": "10px", '--n-padding-left': '10px',
}; }
const noBorderInput = { const noBorderInput = {
"--n-border": "0px", '--n-border': '0px',
"--n-border-hover": "0px", '--n-border-hover': '0px',
"--n-border-pressed": "0px", '--n-border-pressed': '0px',
}; }
const formItemStyle = { const formItemStyle = {
"--n-label-height": "0px", '--n-label-height': '0px',
"--n-feedback-height": "8px", '--n-feedback-height': '8px',
}; }
interface FormType { interface FormType {
name: string | null; name: string | null
logic: string | null; logic: string | null
conditions: Condition[]; conditions: Condition[]
} }
interface Condition { interface Condition {
type: string | null; type: string | null
operator: string | null; operator: string | null
result: any; result: any
} }
interface Option { interface Option {
label: string; label: string
value: string; value: string
} }
const rules: FormRules = { const rules: FormRules = {
name: { name: {
required: true, required: true,
message: "请输入过滤条件名称", message: '请输入过滤条件名称',
trigger: "blur", trigger: 'blur',
}, },
logic: { logic: {
required: true, required: true,
message: "请选择逻辑关系", message: '请选择逻辑关系',
trigger: "blur", trigger: 'blur',
}, },
conditions: { conditions: {
required: true, required: true,
validator(rule: FormItemRule, value: Condition[]) { validator(rule: FormItemRule, value: Condition[]) {
for (const item of value) { for (const item of value) {
const { type, operator, result } = item; const { type, operator, result } = item
if (type === null || operator === null || result === null) if (type === null || operator === null || result === null)
return new Error("请选择过滤条件"); return new Error('请选择过滤条件')
} }
return true; return true
}, },
trigger: ["input", "blur"], trigger: ['input', 'blur'],
}, },
}; }
const formRef = ref<FormInst | null>(null); const formRef = ref<FormInst | null>(null)
const formValue = reactive<FormType>({ const formValue = reactive<FormType>({
name: null, name: null,
logic: "where", logic: 'where',
conditions: [ conditions: [
{ {
type: null, type: null,
operator: "eq", operator: 'eq',
result: null, result: null,
}, },
], ],
}); })
function handleSumbit(e: MouseEvent) { function handleSumbit(e: MouseEvent) {
e.preventDefault(); e.preventDefault()
formRef.value?.validate((errors) => { formRef.value?.validate((errors) => {
if (errors) return; if (errors)
return
const list = formValue.conditions.map((item, index) => { const list = formValue.conditions.map((item, index) => {
const { type, operator, result } = item; const { type, operator, result } = item
return { return {
searchfield: type!, searchfield: type!,
@ -109,84 +109,85 @@ function handleSumbit(e: MouseEvent) {
searchvalue: formatValue(type!, result), searchvalue: formatValue(type!, result),
searchRelationType: formValue.logic!, searchRelationType: formValue.logic!,
orderNum: index + 1, orderNum: index + 1,
}; }
}); })
const param: FilterCondition = { const param: FilterCondition = {
searchname: formValue.name!, searchname: formValue.name!,
type: 0, type: 0,
ocrUsersearchchildList: list, ocrUsersearchchildList: list,
}; }
if (currentStatus.value === "new") addCondition(param); if (currentStatus.value === 'new')
else updateCondition({ id: currentEditId!, ...param }); addCondition(param)
emit("onOk"); else updateCondition({ id: currentEditId!, ...param })
emit('onOk')
setTimeout(() => { setTimeout(() => {
closeModal(); closeModal()
}, 300); }, 300)
}); })
} }
// 调用接口前转换为服务端格式 // 调用接口前转换为服务端格式
function formatValue(searchfield: string, searchvalue: any) { function formatValue(searchfield: string, searchvalue: any) {
if (searchfield === "izyear") { if (searchfield === 'izyear') {
const start = formatToDate2(searchvalue[0]); const start = formatToDate2(searchvalue[0])
const end = formatToDate2(searchvalue[1]); const end = formatToDate2(searchvalue[1])
return `${start}-${end}`; return `${start}-${end}`
} }
if (searchfield === "izsimilarity" && Array.isArray(searchvalue)) if (searchfield === 'izsimilarity' && Array.isArray(searchvalue))
return searchvalue.join(","); return searchvalue.join(',')
return searchvalue; return searchvalue
} }
// 编辑前前转换为服务端格式 // 编辑前前转换为服务端格式
function unformatValue(searchfield: string, searchvalue: any) { function unformatValue(searchfield: string, searchvalue: any) {
// 2022/01/03-2023/02/04 // 2022/01/03-2023/02/04
if (searchfield === "izyear") { if (searchfield === 'izyear') {
const dataStrs = searchvalue.split("-"); const dataStrs = searchvalue.split('-')
const start = formatToDate3(dataStrs[0]); const start = formatToDate3(dataStrs[0])
const end = formatToDate3(dataStrs[1]); const end = formatToDate3(dataStrs[1])
return [start, end]; return [start, end]
} }
// 80,90 // 80,90
// if (searchfield === "izsimilarity") return searchvalue.split(","); // if (searchfield === "izsimilarity") return searchvalue.split(",");
return searchvalue; return searchvalue
} }
function createCondition() { function createCondition() {
formValue.conditions.push({ formValue.conditions.push({
type: null, type: null,
operator: "eq", operator: 'eq',
result: null, result: null,
}); })
} }
function removeCondition(index: number) { function removeCondition(index: number) {
formValue.conditions.splice(index, 1); formValue.conditions.splice(index, 1)
} }
function formLabel(index: number) { function formLabel(index: number) {
return index === 0 ? "筛选条件" : ""; return index === 0 ? '筛选条件' : ''
} }
const typeOptions = ref<Option[]>([]); const typeOptions = ref<Option[]>([])
const operatorOptions = [ const operatorOptions = [
{ {
label: "等于", label: '等于',
value: "eq", value: 'eq',
}, },
{ {
label: "不等于", label: '不等于',
value: "notEq", value: 'notEq',
}, },
]; ]
const logicOptions = ref([]); const logicOptions = ref([])
const similarityOptions = [ const similarityOptions = [
{ {
@ -201,57 +202,58 @@ const similarityOptions = [
label: "100%-100%", label: "100%-100%",
value: '100,100', value: '100,100',
}, },
]; ]
onBeforeMount(() => { onBeforeMount(() => {
dicStore.fetchRelationTypeList(); dicStore.fetchRelationTypeList()
}); })
watch( watch(
() => dicStore.relationTypeList, () => dicStore.relationTypeList,
(newval) => { (newval) => {
logicOptions.value = newval; logicOptions.value = newval
} },
); )
function showModal() { function showModal() {
const list = generateAllData(configStore.systemConfig); const list = generateAllData(configStore.systemConfig)
typeOptions.value = list; typeOptions.value = list
show.value = true; show.value = true
} }
function closeModal() { function closeModal() {
show.value = false; show.value = false
} }
function generateAllData(config): Option[] { function generateAllData(config): Option[] {
const initVal: Option[] = []; const initVal: Option[] = []
const list = Object.keys(config).reduce((acc, value) => { const list = Object.keys(config).reduce((acc, value) => {
if (value.startsWith("iz") && asideMap[value]?.inFilterList !== false) { if (value.startsWith('iz') && asideMap[value]?.inFilterList !== false) {
const name = asideMap[value]?.label; const name = asideMap[value]?.label
name && name
acc.push({ && acc.push({
value, value,
label: name || "未配置", label: name || '未配置',
}); })
} }
return acc; return acc
}, initVal); }, initVal)
return list; return list
} }
watch( watch(
() => configStore.systemConfig, () => configStore.systemConfig,
(newVal) => { (newVal) => {
if (!newVal) return; if (!newVal)
return
const list = generateAllData(newVal); const list = generateAllData(newVal)
typeOptions.value = list; typeOptions.value = list
} },
); )
function getOptions(key: string) { function getOptions(key: string) {
if (key === "izsimilarity") return similarityOptions; if (key === "izsimilarity") return similarityOptions;
@ -261,17 +263,17 @@ function getOptions(key: string) {
} }
function leaveHandler() { function leaveHandler() {
currentStatus.value = "new"; currentStatus.value = 'new'
currentEditId = null; currentEditId = null
formValue.name = null; formValue.name = null
formValue.conditions = [ formValue.conditions = [
{ {
type: null, type: null,
operator: "eq", operator: 'eq',
result: null, result: null,
}, },
]; ]
} }
function edit(editFilter: any) { function edit(editFilter: any) {
@ -285,14 +287,14 @@ function edit(editFilter: any) {
type: item.searchfield, type: item.searchfield,
operator: item.searchtype, operator: item.searchtype,
result: unformatValue(item.searchfield, item.searchvalue), result: unformatValue(item.searchfield, item.searchvalue),
}; }
}); })
} }
defineExpose({ defineExpose({
showModal, showModal,
edit, edit,
}); })
</script> </script>
<template> <template>
@ -314,16 +316,18 @@ defineExpose({
<div class="wrapper-form"> <div class="wrapper-form">
<n-form ref="formRef" :model="formValue" :rules="rules"> <n-form ref="formRef" :model="formValue" :rules="rules">
<n-form-item path="name" label="标题"> <n-form-item path="name" label="标题">
<!-- j -->
<n-input <n-input
v-model:value="formValue.name" v-model:value="formValue.name"
:style="{ width: '780px' }" :style="{ width: '780px' }"
maxlength="15"
@keydown.enter.prevent @keydown.enter.prevent
/> />
</n-form-item> </n-form-item>
<n-form-item path="logic" label="逻辑关系" v-show="false"> <n-form-item v-show="false" path="logic" label="逻辑关系">
<n-select <n-select
filterable
v-model:value="formValue.logic" v-model:value="formValue.logic"
filterable
placeholder="请选择逻辑关系" placeholder="请选择逻辑关系"
:options="logicOptions" :options="logicOptions"
/> />
@ -336,14 +340,14 @@ defineExpose({
:label="formLabel(index)" :label="formLabel(index)"
> >
<n-select <n-select
filterable
v-model:value="item.type" v-model:value="item.type"
filterable
placeholder="请选择筛选项名称" placeholder="请选择筛选项名称"
:options="typeOptions" :options="typeOptions"
/> />
<n-select <n-select
filterable
v-model:value="item.operator" v-model:value="item.operator"
filterable
style="margin-left: 8px" style="margin-left: 8px"
placeholder="请选择" placeholder="请选择"
:options="operatorOptions" :options="operatorOptions"
@ -357,9 +361,9 @@ defineExpose({
/> />
</n-space> </n-space>
<n-select <n-select
filterable
v-else v-else
v-model:value="item.result" v-model:value="item.result"
filterable
style="margin-left: 8px" style="margin-left: 8px"
placeholder="请选择" placeholder="请选择"
:options="getOptions(item.type!)" :options="getOptions(item.type!)"
@ -370,7 +374,19 @@ defineExpose({
@click="removeCondition(index)" @click="removeCondition(index)"
> >
<template #icon> <template #icon>
<SvgIcon size="24" name="close" /> <!-- <SvgIcon size="24" name="close" color="#F00"/>
-->
<svg width="24px" height="24px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>清除</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="PrevailCloud-Design-图标集" transform="translate(-3040.000000, -3118.000000)" fill-rule="nonzero">
<g id="清除" transform="translate(3040.000000, 3118.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="64" height="64"></rect>
<path d="M32,4 C16.5619675,4 4,16.5600322 4,32 C4,47.4399678 16.5600322,60 32,60 C47.4380325,60 60,47.4399678 60,32 C60,16.5600322 47.4399678,4 32,4 Z M43.4220132,40.6240021 C44.2020159,41.4079827 44.1999731,42.6720064 43.4180353,43.4520091 C43.0280877,43.8400215 42.5180487,44.0360166 42.0060745,44.0360166 C41.4920576,44.0360166 40.9800834,43.8400214 40.5900283,43.4480311 L31.9900014,34.8219862 L23.3620213,43.3580432 C22.9720737,43.7420776 22.4639699,43.9360301 21.9559737,43.9360301 C21.4400215,43.9360301 20.9260046,43.7379922 20.5340143,43.3420239 C19.7579895,42.5560005 19.7640102,41.2919768 20.5500336,40.5140169 L29.1680151,31.9900013 L20.5819648,23.3759978 C19.8019621,22.5939524 19.8040049,21.3279935 20.5859428,20.5479908 C21.3679882,19.7659454 22.6319043,19.7700309 23.4139498,20.5519687 L32.0119339,29.1759709 L40.639914,20.6400214 C41.4238946,19.8620614 42.6918962,19.8700173 43.467921,20.6560407 C44.2458809,21.4420641 44.2379251,22.708023 43.4519016,23.4840477 L34.8340277,32.0079559 L43.4220132,40.6240021 Z" id="形状" fill="#DDDDDD"></path>
</g>
</g>
</g>
</svg>
</template> </template>
</n-button> </n-button>
</n-form-item> </n-form-item>
@ -383,8 +399,10 @@ defineExpose({
</div> </div>
<template #footer> <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button type="info" @click="handleSumbit"> 保存 </n-button> <n-button style="background-color: #507AFD;" type="info" @click="handleSumbit">
<n-button secondary style="margin-left: 15px" @click="closeModal"> 确定
</n-button>
<n-button secondary style="margin-left: 15px;background-color: #ffffff;border: 1px solid #cad2dd;color: #333333;" @click="closeModal">
取消 取消
</n-button> </n-button>
</div> </div>
@ -451,4 +469,11 @@ defineExpose({
} }
} }
} }
/*j */
// ::v-deep(.n-input .n-input-wrapper) {
// padding-left: 0;
// }
::v-deep(.n-input__suffix){
margin-right: -8px;
}
</style> </style>

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

@ -27,11 +27,11 @@ const onShowList = ref<any[]>([]);
const fixShowList = ref<any[]>([]); const fixShowList = ref<any[]>([]);
const allCount = computed(() => { const allCount = computed(() => {
return `全部筛选(共${offList.value.length - 1}个)`; return `全部字段(共${offList.value.length - 1}个)`;
}); });
const selectCount = computed(() => { const selectCount = computed(() => {
return `全部筛选(共${onList.value.length}个)`; return `显示字段(共${onList.value.length}个)`;
}); });
function generatList() { function generatList() {
@ -389,7 +389,7 @@ const queryData = (value, type) => {
> >
<div> <div>
<n-input <n-input
placeholder="搜索关键字" placeholder="搜索关键词"
@input="(value) => queryData(value, 'off')" @input="(value) => queryData(value, 'off')"
> >
<template #suffix> <template #suffix>
@ -400,7 +400,7 @@ const queryData = (value, type) => {
<div class="draggable-li" :class="{ checkAll: indeterminate }"> <div class="draggable-li" :class="{ checkAll: indeterminate }">
<n-checkbox <n-checkbox
v-model:checked="checkAll" v-model:checked="checkAll"
label="全部" label="全选"
@update:checked="onCheckAllChange" @update:checked="onCheckAllChange"
:indeterminate="indeterminate" :indeterminate="indeterminate"
/> />
@ -438,7 +438,7 @@ const queryData = (value, type) => {
</template> </template>
<div> <div>
<n-input <n-input
placeholder="搜索关键字" placeholder="搜索关键词"
@input="(value) => queryData(value, 'on')" @input="(value) => queryData(value, 'on')"
> >
<template #suffix> <template #suffix>
@ -487,7 +487,7 @@ const queryData = (value, type) => {
</div> </div>
<template #footer> <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button type="info" @click="handleSumbit"> 确认 </n-button> <n-button type="info" @click="handleSumbit"> 确定 </n-button>
<n-button secondary style="margin-left: 15px" @click="getData();closeModal()"> <n-button secondary style="margin-left: 15px" @click="getData();closeModal()">
取消 取消
</n-button> </n-button>
@ -628,5 +628,6 @@ const queryData = (value, type) => {
} }
::v-deep(.n-button--default-type) { ::v-deep(.n-button--default-type) {
border: 1px solid #cad2dd !important; border: 1px solid #cad2dd !important;
background-color: #fff;
} }
</style> </style>

158
src/views/task/modal/CustomSettingModal.vue
Unescape View File

@ -1,8 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, defineEmits, defineProps, onMounted, ref } from "vue"; import { computed, defineEmits, defineProps, onMounted, ref } from 'vue'
import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter"; import { getAllfieldList, getfieldList, savefield } from '@/api/home/filter'
import { ReportInfoConfig } from "@/config/workorder"; import { ReportInfoConfig } from '@/config/workorder'
import { useUser } from "@/store/modules/user"; import { useUser } from '@/store/modules/user'
const props = defineProps({ const props = defineProps({
reviewType: { reviewType: {
@ -10,143 +10,145 @@ const props = defineProps({
default: () => 3, default: () => 3,
require: true, require: true,
}, },
}); })
const emit = defineEmits(["onOk"]); const emit = defineEmits(['onOk'])
onMounted(async () => { onMounted(async () => {
const userStore = useUser(); const userStore = useUser()
const userInfo = userStore.getUserInfo; const userInfo = userStore.getUserInfo
let res; let res
res = await getAllfieldList(props.reviewType); // 所有筛选项目 res = await getAllfieldList(props.reviewType) // 所有筛选项目
const allList = res.data; const allList = res.data
res = await getfieldList(props.reviewType, userInfo.id); // 当前用户选择的项目 res = await getfieldList(props.reviewType, userInfo.id) // 当前用户选择的项目
const useList = res.data; const useList = res.data
/** /**
* name 标题 * name 标题
* id 键值 * id 键值
* fix 是否默认 * fix 是否默认
* checked 是否选中 * checked 是否选中
*/ */
const userFieldFixed = useList.userFieldFixed?.split(","); const userFieldFixed = useList.userFieldFixed?.split(',')
const userFieldUnFixed = useList.userFieldUnFixed?.split(","); const userFieldUnFixed = useList.userFieldUnFixed?.split(',')
allList.map((v) => { allList.map((v) => {
const item = { const item = {
name: v.fieldDesc, name: v.fieldDesc,
id: v.name, id: v.name,
fix: v.isrequired == 2, fix: v.isrequired == 2,
checked: checked:
v.isrequired == 2 || v.isrequired == 2
Boolean(userFieldFixed?.find((v2) => v2 == v.name)) || || Boolean(userFieldFixed?.find(v2 => v2 == v.name))
Boolean(userFieldUnFixed?.find((v2) => v2 == v.name)), || Boolean(userFieldUnFixed?.find(v2 => v2 == v.name)),
};
offList.value.push(item);
if(item.checked){
selectIds.value.push(item.id);
} }
}); offList.value.push(item)
}); if (item.checked)
selectIds.value.push(item.id)
})
})
const offList = ref<any[]>([]); const offList = ref<any[]>([])
function generatList() { function generatList() {
const keys = Object.keys(ReportInfoConfig); const keys = Object.keys(ReportInfoConfig)
const hideList: object[] = []; const hideList: object[] = []
for (const key of keys) { for (const key of keys) {
const name = ReportInfoConfig[key]?.label; const name = ReportInfoConfig[key]?.label
const isDefault = ReportInfoConfig[key]?.isDefault; const isDefault = ReportInfoConfig[key]?.isDefault
// 系统配置为Y且不是默认配置 // 系统配置为Y且不是默认配置
if (!isDefault) { if (!isDefault) {
hideList.push({ hideList.push({
id: key, id: key,
name: name || "未配置", name: name || '未配置',
fix: isDefault, fix: isDefault,
checked: ReportInfoConfig[key].isDefault, checked: ReportInfoConfig[key].isDefault,
}); })
} }
} }
const fixedList = generateDefaultList(); const fixedList = generateDefaultList()
hideList.unshift(...fixedList); hideList.unshift(...fixedList)
offList.value = hideList; offList.value = hideList
return { hideList }; return { hideList }
} }
function generateDefaultList() { function generateDefaultList() {
return Object.keys(ReportInfoConfig).reduce((acc, key) => { return Object.keys(ReportInfoConfig).reduce((acc, key) => {
const { label, isDefault } = ReportInfoConfig[key]; const { label, isDefault } = ReportInfoConfig[key]
if (isDefault) { if (isDefault) {
const config = { const config = {
id: key, id: key,
name: label || "未配置", name: label || '未配置',
fix: true, fix: true,
checked: true, checked: true,
}; }
return [...acc, config]; return [...acc, config]
} else {
return acc;
} }
}, []); else {
return acc
}
}, [])
} }
const show = ref(false); const show = ref(false)
const checkAll = computed(() => { const checkAll = computed(() => {
return offList.value.length == selectIds.value.length; return offList.value.length == selectIds.value.length
}); })
function showModal() { function showModal() {
show.value = true; show.value = true
} }
function closeModal() { function closeModal() {
show.value = false; show.value = false
} }
async function handleSumbit(e: MouseEvent) { async function handleSumbit(e: MouseEvent) {
const userStore = useUser(); const userStore = useUser()
const userInfo = userStore.getUserInfo; const userInfo = userStore.getUserInfo
let userField = ""; let userField = ''
offList.value.map((v) => { offList.value.map((v) => {
if (v.checked) userField += `${v.id},`; if (v.checked)
}); userField += `${v.id},`
userField = userField.slice(0, userField.length - 1); })
savefield(props.reviewType, userInfo.id, userField); userField = userField.slice(0, userField.length - 1)
e.preventDefault(); savefield(props.reviewType, userInfo.id, userField)
closeModal(); e.preventDefault()
emit("onOk"); closeModal()
emit('onOk')
} }
defineExpose({ defineExpose({
showModal, showModal,
}); })
// generatList(); // generatList();
const selectIds = ref<string[]>([]); const selectIds = ref<string[]>([])
function onCheckAllChange(value) { function onCheckAllChange(value) {
const ids: string[] = []; const ids: string[] = []
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 : []
} }
function onCheckChange(checked: any, item: any) { 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
if (index === -1 && checked) selectIds.value.push(item.id); if (index === -1 && checked)
else selectIds.value.splice(index, 1); selectIds.value.push(item.id)
else selectIds.value.splice(index, 1)
} }
const indeterminate = computed(() => { const indeterminate = computed(() => {
return selectIds.value.length > 0 && offList.value.length > selectIds.value.length; return selectIds.value.length > 0 && offList.value.length > selectIds.value.length
}); })
</script> </script>
<template> <template>
@ -171,13 +173,14 @@ const indeterminate = computed(() => {
> >
<div> <div>
<div class="draggable-ul"> <div class="draggable-ul">
<div class="draggable-li" style="background: #f8f8f8"> <!-- j -->
<div class="draggable-li" style="background: #f8f8f8 !important">
<n-checkbox <n-checkbox
v-model:checked="checkAll" v-model:checked="checkAll"
label="全选" label="全选"
@update:checked="onCheckAllChange"
:class="{ checkAll: indeterminate }" :class="{ checkAll: indeterminate }"
:indeterminate="indeterminate" :indeterminate="indeterminate"
@update:checked="onCheckAllChange"
/> />
</div> </div>
<div class="content"> <div class="content">
@ -204,8 +207,10 @@ const indeterminate = computed(() => {
</div> </div>
<template #footer> <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button type="info" @click="handleSumbit"> 确定 </n-button> <n-button style="background-color: #507AFD;" type="info" @click="handleSumbit">
<n-button secondary style="margin-left: 15px" @click="closeModal"> 确定
</n-button>
<n-button class="style-btn" secondary style="margin-left: 15px;background-color: #ffffff" @click="closeModal">
取消 取消
</n-button> </n-button>
</div> </div>
@ -307,4 +312,11 @@ const indeterminate = computed(() => {
--n-padding-top: 0px; --n-padding-top: 0px;
--n-padding-bottom: 12px; --n-padding-bottom: 12px;
} }
::v-deep(.wrapper-title){
font-weight: 500;
color: #333333;
}
::v-deep(.style-btn){
border: 1px solid #CAD2DD !important;
}
</style> </style>

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

@ -1,10 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { getAllfieldList, getfieldList } from "@/api/home/filter"; import { debounce } from 'lodash-es'
import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
import { useUser } from "@/store/modules/user";
import { useWorkOrder } from "@/store/modules/workOrder";
import { getViewportOffset } from "@/utils/domUtils";
import { debounce } from "lodash-es";
import { import {
computed, computed,
defineOptions, defineOptions,
@ -23,16 +18,16 @@ import WorkSheetList from "./WorkSheetList.vue";
defineOptions({ name: "AsideContent" }); defineOptions({ name: "AsideContent" });
const emit = defineEmits(["ApprovalOver"]); const emit = defineEmits(["ApprovalOver"]);
const collapse = ref(false); const collapse = ref(false)
const workStore = useWorkOrder(); const workStore = useWorkOrder()
const filterModalRef = ref(null); const filterModalRef = ref(null)
const packageListRef = ref<HTMLDivElement | null>(null); const packageListRef = ref<HTMLDivElement | null>(null)
// 展示字段 // 展示字段
const showFieldList = ref<any[]>([]); const showFieldList = ref<any[]>([])
const reviewType = 1; const reviewType = 1
const dicts = ref<any>([]); const dicts = ref<any>([])
function collapseHandler() { function collapseHandler() {
collapse.value = !collapse.value; collapse.value = !collapse.value
} }
const mousetrap = inject('mousetrap') as any const mousetrap = inject('mousetrap') as any
mousetrap.bind('[', collapseHandler) mousetrap.bind('[', collapseHandler)
@ -40,46 +35,46 @@ mousetrap.bind('[', collapseHandler)
const searchKeyword = ref('') const searchKeyword = ref('')
const asideWidth = computed(() => { const asideWidth = computed(() => {
return collapse.value ? 0 : 308; return collapse.value ? 0 : 308
}); })
const asideStyle = computed(() => { const asideStyle = computed(() => {
return { return {
width: `${asideWidth.value}px`, width: `${asideWidth.value}px`,
}; }
}); })
const collapseIcon = computed(() => { const collapseIcon = computed(() => {
return collapse.value ? "expand-cir" : "collapse-cir"; return collapse.value ? 'expand-cir' : 'collapse-cir'
}); })
const listHeight = ref(700); const listHeight = ref(700)
function computeListHeight() { function computeListHeight() {
const listEl = document.querySelector(".work-sheet-list")!; const listEl = document.querySelector('.work-sheet-list')!
const { bottomIncludeBody } = getViewportOffset(listEl); const { bottomIncludeBody } = getViewportOffset(listEl)
const height = bottomIncludeBody; const height = bottomIncludeBody
listHeight.value = height - 25; listHeight.value = height - 25
} }
const listStyle = computed(() => { const listStyle = computed(() => {
return { return {
height: `${listHeight.value}px`, height: `${listHeight.value}px`,
}; }
}); })
useWindowSizeFn(computeListHeight, 280); useWindowSizeFn(computeListHeight, 280)
async function getshowFieldList() { async function getshowFieldList() {
showFieldList.value = []; showFieldList.value = []
const userStore = useUser(); const userStore = useUser()
const userInfo = userStore.getUserInfo; const userInfo = userStore.getUserInfo
let res; let res
res = await getAllfieldList(reviewType); //所有筛选项目 res = await getAllfieldList(reviewType) // 所有筛选项目
const allList = res.data; const allList = res.data
dicts.value = res.data; dicts.value = res.data
res = await getfieldList(reviewType, userInfo.id); //当前用户选择的项目 res = await getfieldList(reviewType, userInfo.id) // 当前用户选择的项目
const useList = res.data; const useList = res.data
/** /**
* name 标题 * name 标题
* id 键值 * id 键值
@ -87,64 +82,65 @@ async function getshowFieldList() {
* checked 是否选中 * checked 是否选中
*/ */
if (useList.userFieldFixed) { if (useList.userFieldFixed) {
useList.userFieldFixed?.split(",").map((v) => { useList.userFieldFixed?.split(',').map((v) => {
let item = allList.find((v2) => v2.name == v); let item = allList.find(v2 => v2.name == v)
if (item) { if (item) {
item = { item = {
name: item.fieldDesc, name: item.fieldDesc,
id: item.name, id: item.name,
fix: item.isrequired == 2, fix: item.isrequired == 2,
checked: true, checked: true,
}; }
showFieldList.value.push(item); showFieldList.value.push(item)
} }
}); })
} else { }
else {
// 若为首次获取 则赋默认值 // 若为首次获取 则赋默认值
allList.map((v) => { allList.map((v) => {
if (v.isrequired == 2) { if (v.isrequired == 2) {
let item = { const item = {
name: v.fieldDesc, name: v.fieldDesc,
id: v.name, id: v.name,
fix: v.isrequired == 2, fix: v.isrequired == 2,
checked: true, checked: true,
}; }
showFieldList.value.push(item); showFieldList.value.push(item)
} }
}); })
} }
} }
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
computeListHeight(); computeListHeight()
getshowFieldList(); getshowFieldList()
}); })
}); })
const asideEnter = ref(false); const asideEnter = ref(false)
const showCollapse = computed(() => { const showCollapse = computed(() => {
return collapse.value ? true : asideEnter.value; return collapse.value ? true : asideEnter.value
}); })
function showFilter() { function showFilter() {
const modal = unref(filterModalRef)! as any; const modal = unref(filterModalRef)! as any
modal.showModal(); modal.showModal()
} }
watch( watch(
() => workStore.immersion, () => workStore.immersion,
() => { () => {
collapse.value = true; collapse.value = true
} },
); )
const showSearch = ref(false); const showSearch = ref(false)
function setShowSearch(value: boolean) { function setShowSearch(value: boolean) {
showSearch.value = value; showSearch.value = value
if (value === false) { if (value === false) {
(packageListRef.value as any).search(""); (packageListRef.value as any).search('')
searchKeyword.value = '' searchKeyword.value = ''
}; };
} }
@ -175,7 +171,8 @@ const ApprovalOver = (packageId)=>{
<div v-show="!showSearch" class="warpper"> <div v-show="!showSearch" class="warpper">
<div class="left"> <div class="left">
<svg-icon name="all-worksheet" size="32" /> <svg-icon name="all-worksheet" size="32" />
<span style="margin-left: 8px">所有任务包</span> <!-- j -->
<span style="margin-left: 8px;color: #333333;">所有任务包</span>
</div> </div>
<div class="right"> <div class="right">
<SvgIcon <SvgIcon
@ -194,10 +191,10 @@ const ApprovalOver = (packageId)=>{
</div> </div>
<div v-show="showSearch" class="warpper"> <div v-show="showSearch" class="warpper">
<n-input <n-input
v-model:value="searchKeyword"
style="flex: 1; height: 32px" style="flex: 1; height: 32px"
placeholder="请输入你需要搜索的内容" placeholder="请输入你需要搜索的内容"
@input="inputHandler" @input="inputHandler"
v-model:value="searchKeyword"
> >
<template #suffix> <template #suffix>
<SvgIcon size="14px" name="magnifying-1" /> <SvgIcon size="14px" name="magnifying-1" />
@ -214,7 +211,7 @@ const ApprovalOver = (packageId)=>{
<WorkSheetList <WorkSheetList
ref="packageListRef" ref="packageListRef"
class="work-sheet-list" class="work-sheet-list"
:showFieldList="showFieldList" :show-field-list="showFieldList"
:dicts="dicts" :dicts="dicts"
@ApprovalOver="ApprovalOver" @ApprovalOver="ApprovalOver"
/> />

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

@ -1,11 +1,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import { format } from 'date-fns'; import { format } from 'date-fns'
import { computed, onMounted, ref } from "vue"; import { computed, onMounted, ref } from 'vue'
import type { PackageListItem } from "/#/workorder"; import type { PackageListItem } from '/#/workorder'
defineOptions({ name: "ListItem" });
const emit = defineEmits(['dismisClick'])
defineOptions({ name: 'ListItem' })
const props = defineProps({ const props = defineProps({
selected: { selected: {
type: Boolean, type: Boolean,
@ -27,17 +25,20 @@ const props = defineProps({
type: Array, type: Array,
default: () => [], default: () => [],
}, },
}); })
const emit = defineEmits(['dismisClick'])
const svgName = computed(() => { const svgName = computed(() => {
return props.selected ? "taskpack-select" : "taskpack"; return props.selected ? 'taskpack-select' : 'taskpack'
}); })
const popconfirmTarget: any = ref(null) const popconfirmTarget: any = ref(null)
const popconfirmRef: any = ref(null) const popconfirmRef: any = ref(null)
function handleDismissTask() { function handleDismissTask() {
emit('dismisClick', props.mouseOverTask.id) emit('dismisClick', props.mouseOverTask.id)
popconfirmRef.value[0]?.setShow(false); // 关闭 popconfirm popconfirmRef.value[0]?.setShow(false) // 关闭 popconfirm
} }
onMounted(async () => { onMounted(async () => {
@ -45,23 +46,25 @@ onMounted(async () => {
</script> </script>
<template> <template>
<div class="list-item" :class="{ 'list-item-selected': selected }" ref="popconfirmTarget"> <div ref="popconfirmTarget" class="list-item" :class="{ 'list-item-selected': selected }">
<div v-for="(item, index) in showFieldList" :key="index"> <div v-for="(item, index) in showFieldList" :key="index">
<div v-if="item.id === 'name'" class="list-item-header"> <div v-if="item.id === 'name'" class="list-item-header">
<div class="id-wrap"> <div class="id-wrap">
<SvgIcon :name="svgName" size="28" /> <SvgIcon :name="svgName" size="28" />
<span class="list-item-header-name" :class="{ 'list-item-header-selected': selected }"> <span class="list-item-header-name" :class="{ 'list-item-header-selected': selected }">
<n-ellipsis style="max-width: 180px"> <n-ellipsis style="max-width: 180px">
{{ listItem.name }} #{{ listItem.name }}
</n-ellipsis> </n-ellipsis>
<span class="list-item-header-selected">({{ listItem.pictureCount }})</span> <span class="list-item-header-selected">({{ listItem.pictureCount }})</span>
<n-popconfirm id="taskPopconfirmRef" ref="popconfirmRef" :show-icon="false" :show-arrow="false" <n-popconfirm
placement="bottom" trigger="click"> id="taskPopconfirmRef" ref="popconfirmRef" :show-icon="false" :show-arrow="false"
placement="bottom" trigger="click"
>
<template #trigger> <template #trigger>
<span class="dismiss-task-pack" v-show="mouseOverTask?.id" style="cursor: pointer;">...</span> <span v-show="mouseOverTask?.id" class="dismiss-task-pack" style="cursor: pointer;">...</span>
</template> </template>
<template #action> <template #action>
<span @click="handleDismissTask" style="cursor: pointer;">解散任务包</span> <span style="cursor: pointer;" @click="handleDismissTask">解散任务包</span>
</template> </template>
</n-popconfirm> </n-popconfirm>
</span> </span>
@ -69,21 +72,31 @@ onMounted(async () => {
</div> </div>
<ul v-else class="list-item-detail"> <ul v-else class="list-item-detail">
<li v-if="item.id === 'statshisText'"> <li v-if="item.id === 'statshisText'">
审批状态：<n-ellipsis style="max-width: 170px"><span class="list-item-status" :class="listItem.statshisText === '通过' 审批状态：<n-ellipsis style="max-width: 170px">
? 'list-item-success' <span
: listItem.statshisText === '不通过' class="list-item-status" :class="listItem.statshisText === '通过'
? 'list-item-error' ? 'list-item-success'
: 'list-item-watting' : listItem.statshisText === '不通过'
">{{ listItem.statshisText }}</span> ? 'list-item-error'
</n-ellipsis></li> : 'list-item-watting'
"
>{{ listItem.statshisText }}</span>
</n-ellipsis>
</li>
<li v-else-if="item.id === 'createdate'"> <li v-else-if="item.id === 'createdate'">
提交时间：<n-ellipsis style="max-width: 170px">{{ listItem.createdate && format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") }}</n-ellipsis> 提交时间：<n-ellipsis style="max-width: 170px">
{{ listItem.createdate && format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") }}
</n-ellipsis>
</li> </li>
<li v-else-if="item.id === 'createTime'"> <li v-else-if="item.id === 'createTime'">
生成时间：<n-ellipsis style="max-width: 170px">{{ listItem.createTime && format(listItem.createTime, "yyyy-MM-dd HH:mm:ss") }}</n-ellipsis> 生成时间：<n-ellipsis style="max-width: 170px">
{{ listItem.createTime && format(listItem.createTime, "yyyy-MM-dd HH:mm:ss") }}
</n-ellipsis>
</li> </li>
<li v-else class="ellipsis"> <li v-else class="ellipsis">
<span class="label">{{ item.name }}：</span><n-ellipsis style="max-width: 170px">{{ listItem[item.id] }}</n-ellipsis> <span class="label">{{ item.name }}：</span><n-ellipsis style="max-width: 170px">
{{ listItem[item.id] }}
</n-ellipsis>
</li> </li>
</ul> </ul>
</div> </div>
@ -152,9 +165,9 @@ onMounted(async () => {
line-height: 22px; line-height: 22px;
margin: 0px 0px 8px 8px; margin: 0px 0px 8px 8px;
} }
/*j*/
&-selected { &-selected {
color: #507afd; color: #507afd !important;
} }
} }
@ -185,5 +198,6 @@ onMounted(async () => {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
} }
}</style> }
</style>
../types ../types

43
src/views/worksheet/components/PictureInfo.vue
Unescape View File

@ -1,30 +1,32 @@
<script setup lang="ts"> <script setup lang="ts">
import { fieldMap } from "@/config/workorder"; import { format } from 'date-fns'
import { TASK_STATUS_OBJ } from '@/enums/index'; import { pickBy } from 'lodash-es'
import { format } from 'date-fns'; import { computed, defineProps } from 'vue'
import { pickBy } from "lodash-es"; import { TASK_STATUS_OBJ } from '@/enums/index'
import { computed, defineProps } from "vue"; import { fieldMap } from '@/config/workorder'
const props = defineProps({ const props = defineProps({
taskDetailInfo: { taskDetailInfo: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
}); })
const propertys = computed(() => { const propertys = computed(() => {
const { ocrPicture } = props.taskDetailInfo; const { ocrPicture } = props.taskDetailInfo
const v = pickBy(ocrPicture, (value, key: string) => { const v = pickBy(ocrPicture, (value, key: string) => {
return key.startsWith("field") && value !== null; return key.startsWith('field') && value !== null
}); })
return v; return v
}); })
</script> </script>
<template> <template>
<div class="right"> <div class="right">
<n-scrollbar style="max-height: 100%"> <n-scrollbar style="max-height: 100%">
<n-ellipsis style="max-width: 350px">任务ID：{{ taskDetailInfo.taskname }}</n-ellipsis> <n-ellipsis style="max-width: 350px">
任务ID：{{ taskDetailInfo.taskname }}
</n-ellipsis>
<div class="tags"> <div class="tags">
<div class="tag tag-submiting" v-if="taskDetailInfo.historyStates == 1">待审批</div> <div class="tag tag-submiting" v-if="taskDetailInfo.historyStates == 1">待审批</div>
<div class="tag tag-submited" v-else-if="taskDetailInfo.historyStates == 2 || taskDetailInfo.workStatus == 3">已审批</div> <div class="tag tag-submited" v-else-if="taskDetailInfo.historyStates == 2 || taskDetailInfo.workStatus == 3">已审批</div>
@ -33,31 +35,32 @@ const propertys = computed(() => {
</div> </div>
<n-divider class="divider-line" /> <n-divider class="divider-line" />
<div class="property"> <div class="property">
<span class="property-name top" style="color: #666666">图片大小</span> <!-- j -->
<span class="property-name top" style="color: #999999">图片大小</span>
<span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgSize && (taskDetailInfo.pictureInfo.imgSize / 1000).toFixed(2) }}KB</span> <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgSize && (taskDetailInfo.pictureInfo.imgSize / 1000).toFixed(2) }}KB</span>
</div> </div>
<div class="property"> <div class="property">
<span class="property-name top" style="color: #666666">图片格式</span> <span class="property-name top" style="color: #999999">图片格式</span>
<span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgFormat }}</span> <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgFormat }}</span>
</div> </div>
<div class="property"> <div class="property">
<span class="property-name top" style="color: #666666">图片尺寸</span> <span class="property-name top" style="color: #999999">图片尺寸</span>
<span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgMeasure }}</span> <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgMeasure }}</span>
</div> </div>
<div class="property"> <div class="property">
<span class="property-name top" style="color: #666666">色彩空间</span> <span class="property-name top" style="color: #999999">色彩空间</span>
<span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgSpace }}</span> <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgSpace }}</span>
</div> </div>
<div class="property"> <div class="property">
<span class="property-name top" style="color: #666666">提报人</span> <span class="property-name top" style="color: #999999">提报人</span>
<span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.upname || "-" }}</span> <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.upname || "-" }}</span>
</div> </div>
<div class="property"> <div class="property">
<span class="property-name top" style="color: #666666">创建时间</span> <span class="property-name top" style="color: #999999">创建时间</span>
<span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.createTime }}</span> <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.createTime }}</span>
</div> </div>
<div class="property"> <div class="property">
<span class="property-name top" style="color: #666666">提报时间</span> <span class="property-name top" style="color: #999999">提报时间</span>
<span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.submitDateTimestamp && format(taskDetailInfo.submitDateTimestamp, 'yyyy-MM-dd HH:mm:ss') || '-' }}</span> <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.submitDateTimestamp && format(taskDetailInfo.submitDateTimestamp, 'yyyy-MM-dd HH:mm:ss') || '-' }}</span>
</div> </div>
<div v-for="(value, key) in propertys" :key="key" class="property"> <div v-for="(value, key) in propertys" :key="key" class="property">
@ -87,7 +90,6 @@ const propertys = computed(() => {
padding: 24px; padding: 24px;
// background: lime; // background: lime;
.task-name { .task-name {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
@ -175,7 +177,6 @@ const propertys = computed(() => {
} }
} }
::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;

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

@ -24,11 +24,11 @@ const onList = ref<any[]>([]);
const fixList = ref<any[]>([]); const fixList = ref<any[]>([]);
const allCount = computed(() => { const allCount = computed(() => {
return `全部筛选(共${offList.value.length - 1}个)`; return `全部字段(共${offList.value.length - 1}个)`;
}); });
const selectCount = computed(() => { const selectCount = computed(() => {
return `全部筛选(共${onList.value.length}个)`; return `显示字段(共${onList.value.length}个)`;
}); });
function generatList() { function generatList() {
@ -322,7 +322,7 @@ const indeterminate = computed(() => {
aria-modal="true" aria-modal="true"
> >
<div class="wrapper"> <div class="wrapper">
<span class="wrapper-title">自定义任务包字段</span> <span class="wrapper-title" style="color: #333;">自定义任务包字段</span>
<div class="wrapper-bar"> <div class="wrapper-bar">
<div class="wrapper-info"> <div class="wrapper-info">
<span :style="{ 'margin-left': '18px' }">字段信息</span> <span :style="{ 'margin-left': '18px' }">字段信息</span>
@ -338,7 +338,7 @@ const indeterminate = computed(() => {
:bordered="false" :bordered="false"
> >
<div> <div>
<n-input placeholder="搜索关键字"> <n-input placeholder="搜索关键词">
<template #suffix> <template #suffix>
<SvgIcon size="14px" name="magnifying-1" /> <SvgIcon size="14px" name="magnifying-1" />
</template> </template>
@ -347,7 +347,7 @@ const indeterminate = computed(() => {
<div class="draggable-li" :class="{ checkAll: indeterminate }"> <div class="draggable-li" :class="{ checkAll: indeterminate }">
<n-checkbox <n-checkbox
v-model:checked="checkAll" v-model:checked="checkAll"
label="全部" label="全选"
@update:checked="onCheckAllChange" @update:checked="onCheckAllChange"
:indeterminate="indeterminate" :indeterminate="indeterminate"
/> />
@ -381,10 +381,10 @@ const indeterminate = computed(() => {
: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>
<n-input placeholder="搜索关键字"> <n-input placeholder="搜索关键词">
<template #suffix> <template #suffix>
<SvgIcon size="14px" name="magnifying-1" /> <SvgIcon size="14px" name="magnifying-1" />
</template> </template>
@ -396,7 +396,7 @@ const indeterminate = computed(() => {
:class="{ fix: item.fix }" :class="{ fix: item.fix }"
class="cursor-move draggable-item" class="cursor-move draggable-item"
> >
<span class="ml-2">{{ item.name }}</span> <span class="ml-2" style="color: #666;">{{ item.name }}</span>
</div> </div>
</div> </div>
<VueDraggable <VueDraggable
@ -429,7 +429,7 @@ const indeterminate = computed(() => {
</div> </div>
<template #footer> <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button type="info" @click="handleSumbit"> 确认 </n-button> <n-button type="info" @click="handleSumbit" style="background-color: #507AFD;"> 确定 </n-button>
<n-button secondary style="margin-left: 15px" @click="getData();closeModal();"> <n-button secondary style="margin-left: 15px" @click="getData();closeModal();">
取消 取消
</n-button> </n-button>
@ -468,7 +468,7 @@ const indeterminate = computed(() => {
font-size: 14px; font-size: 14px;
&:before { &:before {
background-color: #1980ff; background-color: #507AFD;
content: ""; content: "";
width: 5px; width: 5px;
border-radius: 2px; border-radius: 2px;
@ -558,4 +558,15 @@ const indeterminate = computed(() => {
::v-deep(.checkAll .n-checkbox-icon svg) { ::v-deep(.checkAll .n-checkbox-icon svg) {
display: none !important; display: none !important;
} }
::v-deep(.n-card-header__main){
color: #666 !important;
}
::v-deep(.n-button--secondary) {
background-color: #fff;
border: 1px solid #cad2dd !important;
}
::v-deep(.n-button--secondary):hover {
background-color: #fff !important;
border: 1px solid #cad2dd !important;
}
</style> </style>

Write Preview
Loading…
Cancel
Save