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

Compare commits

base: guoxiangbin:295f4b3ddf8335495c8df3f542ff13755236316f
Branches Tags
guoxiangbin:test
guoxiangbin:fix/change_task
guoxiangbin:fix/updatesyspic
guoxiangbin:fix/similarity_value
guoxiangbin:20240420keydown
guoxiangbin:feat/20240417similarite
guoxiangbin:refactor/project
guoxiangbin:fix/modifyStyle
guoxiangbin:fix/finalHighSearch
guoxiangbin:jia
guoxiangbin:main
guoxiangbin:bak
..
compare: guoxiangbin:b8658578d869f5aa65b68062c1cfe72954442af9
Branches Tags
guoxiangbin:test
guoxiangbin:fix/change_task
guoxiangbin:fix/updatesyspic
guoxiangbin:fix/similarity_value
guoxiangbin:20240420keydown
guoxiangbin:feat/20240417similarite
guoxiangbin:refactor/project
guoxiangbin:fix/modifyStyle
guoxiangbin:fix/finalHighSearch
guoxiangbin:jia
guoxiangbin:main
guoxiangbin:bak

No commits in common. '295f4b3ddf8335495c8df3f542ff13755236316f' and 'b8658578d869f5aa65b68062c1cfe72954442af9' have entirely different histories.
295f4b3ddf ... b8658578d8

13 changed files with 695 additions and 792 deletions
Show Stats

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

@ -9,7 +9,6 @@ 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() {
@ -131,9 +130,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">
确认 确认
@ -142,7 +141,7 @@ defineExpose({
取消 取消
</n-button> </n-button>
</div> </div>
</template> --> </template>
</n-card> </n-card>
</n-modal> </n-modal>
</div> </div>
@ -254,11 +253,6 @@ 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,250 +1,239 @@
<script lang="ts" setup> <script lang="ts" setup>
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";
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";
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 {
else { return acc;
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) if (!key.startsWith("iz") || asideMap[key] === undefined) continue;
continue
const name = asideMap[key]?.label const name = asideMap[key]?.label;
const isDefaultFilter = asideMap[key]?.isDefaultFilter const isDefaultFilter = asideMap[key]?.isDefaultFilter;
// 不是默认配置 // 不是默认配置
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 {
else { return acc;
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) if (customConfig === null) return;
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;
const currentIndex = offList.value.findIndex(v => v.id == item.id) let 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) if (index === -1 && checked) selectIds.value.push(item.id);
selectIds.value.push(item.id) else selectIds.value.splice(index, 1);
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) if (newVal === oldVal) return;
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) if (diff.length === 0) return;
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 {
else { const list = onList.value;
const list = onList.value
for (let index = 0; index < list.length; index++) { for (let index = 0; index < list.length; index++) {
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) if (newVal === oldVal) return;
return
const diff = difference(selectIds.value, showIds.value) const diff = difference(selectIds.value, showIds.value);
if (diff.length === 0) if (diff.length === 0) return;
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) if (index !== -1) onList.value.splice(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>
@ -257,10 +246,10 @@ const rightInputHandler = debounce((keyword) => {
aria-modal="true" aria-modal="true"
> >
<div class="wrapper"> <div class="wrapper">
<span class="wrapper-title" style="color: #333333;">自定义筛选</span> <span class="wrapper-title">自定义筛选</span>
<div class="wrapper-bar"> <div class="wrapper-bar">
<div class="wrapper-info" style="background-color: #F8F8F8;"> <div class="wrapper-info">
<span :style="{ 'margin-left': '18px' ,'color':'#333333'}">筛选项信息</span> <span :style="{ 'margin-left': '18px' }">筛选项信息</span>
</div> </div>
</div> </div>
@ -274,7 +263,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>
@ -324,8 +313,7 @@ const rightInputHandler = debounce((keyword) => {
<span class="textbtnStyle" @click="clearDragSource">清空</span> <span class="textbtnStyle" @click="clearDragSource">清空</span>
</template> </template>
<div> <div>
<!-- j --> <n-input placeholder="搜索关键字" @input="rightInputHandler">
<n-input placeholder="搜索关键词" @input="rightInputHandler">
<template #suffix> <template #suffix>
<SvgIcon size="14px" name="magnifying-1" color="#999999" /> <SvgIcon size="14px" name="magnifying-1" color="#999999" />
</template> </template>
@ -349,8 +337,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"
@ -369,9 +357,7 @@ 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 type="info" @click="handleSumbit"> 确定 </n-button>
确定
</n-button>
<n-button secondary style="margin-left: 15px" @click="closeModal"> <n-button secondary style="margin-left: 15px" @click="closeModal">
取消 取消
</n-button> </n-button>
@ -428,7 +414,7 @@ const rightInputHandler = debounce((keyword) => {
.cardstyle { .cardstyle {
width: 620px; width: 620px;
height: 800px; height: 800px;
--n-padding-bottom: 16px; --n-padding-bottom: 20px;
--n-padding-left: 24px; --n-padding-left: 24px;
--n-padding-right: 24px; --n-padding-right: 24px;
--n-padding-top: 20px; --n-padding-top: 20px;
@ -469,7 +455,6 @@ 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,16 +323,14 @@ const moveEnd = () => {
v-if="item.favorite && !item.isDefaultFilter" v-if="item.favorite && !item.isDefaultFilter"
name="favorite-fill" name="favorite-fill"
color="#fd9b0a" color="#fd9b0a"
width="13" size="18"
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"
width="13" size="18"
height="12"
style="margin-right: 3px" style="margin-right: 3px"
@click="favoriteHandler($event, item)" @click="favoriteHandler($event, item)"
/> />
@ -359,8 +357,7 @@ const moveEnd = () => {
v-if="item.favorite && !item.isDefaultFilter" v-if="item.favorite && !item.isDefaultFilter"
name="favorite-fill" name="favorite-fill"
color="#fd9b0a" color="#fd9b0a"
width="13" size="18"
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)"
@ -368,8 +365,7 @@ const moveEnd = () => {
<SvgIcon <SvgIcon
v-else-if="!item.favorite && !item.isDefaultFilter" v-else-if="!item.favorite && !item.isDefaultFilter"
name="favorite-unfill" name="favorite-unfill"
width="13" size="18"
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,11 +1,12 @@
<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' })
@ -16,6 +17,7 @@ const selectIds = ref<string[]>([])
const tempList = ref<string[]>([]) const tempList = ref<string[]>([])
function showModal() { function showModal() {
show.value = true show.value = true
// 重置左右列表数据 // 重置左右列表数据
@ -24,19 +26,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 = ''
@ -106,8 +108,9 @@ function generatList(config, customConfig) {
fix: isDefaultFilter, fix: isDefaultFilter,
checked: isChecked, checked: isChecked,
}) })
if (isChecked && !selectIds.value.includes(key)) if (isChecked && selectIds.value.indexOf(key) === -1) {
isChecked && selectIds.value.push(key) isChecked && selectIds.value.push(key)
}
} }
} }
@ -131,31 +134,30 @@ 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排序
const tempOnList = cloneDeep(onList) let tempOnList = cloneDeep(onList);
console.log('原始筛选条件tempOnList', tempOnList) console.log("原始筛选条件tempOnList", tempOnList);
const sortKeyList: any = [] let 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);
const sortList: any = [] let sortList: any = [];
if (sortKeyList.length > 0) { if(sortKeyList.length > 0) {
sortKeyList.map((key) => { sortKeyList.map(key => {
const tempItem = tempOnList.find(item => item.id == key) let 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);
});
} }
else { console.log("原始筛选条件sortList", sortList );
customConfig.map((key) => { console.log("原始筛选条件configStore.getFilterConfig", configStore.getFilterConfig, );
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 }
} }
@ -166,17 +168,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
@ -191,19 +193,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);
const tempOnList = cloneDeep(onList.value) let tempOnList = cloneDeep(onList.value);
console.log('原始筛选条件tempOnList', tempOnList) console.log("原始筛选条件tempOnList", tempOnList);
const sortList: any = [] let sortList: any = [];
obj.map((key) => { obj.map(key => {
const tempItem = tempOnList.find(item => item.id == key) let 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()
} }
@ -230,8 +232,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(() => {
@ -326,21 +328,23 @@ 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>
@ -369,7 +373,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="全选" :indeterminate="!checkAll" @update:checked="onCheckAllChange" /> <n-checkbox v-model:checked="checkAll" label="全选" @update:checked="onCheckAllChange" :indeterminate="!checkAll"/>
</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 }"
@ -403,14 +407,12 @@ 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 <SvgIcon v-if="!item.fix" size="16px" style="display:block;margin-left: auto;cursor: pointer;"
v-if="!item.fix" size="16px" style="display:block;margin-left: auto;cursor: pointer;" name="clear" @click="removeHandler(item.id)" />
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,122 +8,116 @@ 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;
} }
function sortData(row) { const 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,
@ -131,198 +125,196 @@ 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) if (loading.value) return;
return pagination.page = currentPage;
pagination.page = currentPage const { pageSize } = pagination;
const { pageSize } = pagination await query(currentPage, pageSize);
await query(currentPage, pageSize)
} }
async function handlePageSizeChange(currentPageSize) { async function handlePageSizeChange(currentPageSize) {
if (loading.value) if (loading.value) return;
return
const { page } = pagination const { page } = pagination;
pagination.pageSize = currentPageSize pagination.pageSize = currentPageSize;
await query(page, currentPageSize) await query(page, currentPageSize);
} }
function handleClick() { function handleClick() {
emit('showNewFilter') emit("showNewFilter");
// show.value = false; // show.value = false;
} }
let sortTable: Sortable | null = null let sortTable: Sortable | null = null;
const tableRef = ref<InstanceType<typeof NDataTable>>() const tableRef = ref<InstanceType<typeof NDataTable>>();
async function showModal() { async function showModal() {
show.value = true show.value = true;
const { page, pageSize } = pagination const { page, pageSize } = pagination;
await query(page, pageSize) await query(page, pageSize);
nextTick(() => { nextTick(() => {
if (sortTable !== null) if (sortTable !== null) destory();
destory()
const el: HTMLDivElement = tableRef.value?.$el;
const el: HTMLDivElement = tableRef.value?.$el const tbody: HTMLElement | null = el.querySelector("tbody.n-data-table-tbody")!;
const tbody: HTMLElement | null = el.querySelector('tbody.n-data-table-tbody')! if (tbody) sortTable = Sortable.create(tbody, { onEnd, onMove });
if (tbody) });
sortTable = Sortable.create(tbody, { onEnd, onMove })
})
} }
let relatedId = '' let relatedId = "";
let insertafter = false let insertafter = false;
// TODO: 有bug，需跟后端联调 // TODO: 有bug，需跟后端联调
function onEnd(event: SortableEvent) { function onEnd(event: SortableEvent) {
const data = unref(tableData) const data = unref(tableData);
const oldElem = data[event.oldIndex!] const oldElem = data[event.oldIndex!];
data.splice(event.oldIndex!, 1) data.splice(event.oldIndex!, 1);
data.splice(event.newIndex!, 0, oldElem) data.splice(event.newIndex!, 0, oldElem);
const dragId = oldElem.id const dragId = oldElem.id;
const index = data.findIndex((item) => { const index = data.findIndex((item) => {
return item.id === relatedId return item.id === relatedId;
}) });
// 插入到元素后，索引-1；插入到元素前，索引+1 // 插入到元素后，索引-1；插入到元素前，索引+1
const order = insertafter ? index - 1 : index + 1 const order = insertafter ? index - 1 : index + 1;
// console.log('dragid:', dragId, 'order:', order) // console.log('dragid:', dragId, 'order:', order)
sort(dragId, order) sort(dragId, order);
} }
function onMove(evt: any) { function onMove(evt: any) {
relatedId = evt.related?.dataset?.id relatedId = evt.related?.dataset?.id;
insertafter = evt.willInsertAfter insertafter = evt.willInsertAfter;
// console.log(`你正在拖动：${evt.dragged.dataset.id},替换了：${evt.related}`, 'insertafter', evt.willInsertAfter) // console.log(`你正在拖动：${evt.dragged.dataset.id},替换了：${evt.related}`, 'insertafter', evt.willInsertAfter)
} }
function destory() { function destory() {
sortTable && sortTable.destroy() sortTable && sortTable.destroy();
sortTable = null sortTable = null;
} }
onUnmounted(() => { onUnmounted(() => {
destory() destory();
}) });
function closeModal() { function closeModal() {
show.value = false 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>
@ -348,11 +340,12 @@ 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 v-if="!showSearch" class="wrapper-form"> <div class="wrapper-form" v-if="!showSearch">
<n-input <n-input
:style="{ width: '360px', border: '1px solid #cad2dd' }" :style="{ width: '360px', border: '1px solid #cad2dd' }"
placeholder="请输入过滤条件名称搜索" placeholder="请输入过滤条件名称搜索"
@ -370,50 +363,52 @@ const showSearch = computed(() => {
</n-button> </n-button>
</div> </div>
<div v-else class="wrapper-form"> <div class="wrapper-form" v-else>
<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 style="background-color: #507AFD;" type="info" @click="closeModal"> <n-button type="info" @click="closeModal"> 确认 </n-button>
确定
</n-button>
<n-button secondary style="margin-left: 15px" @click="closeModal"> <n-button secondary style="margin-left: 15px" @click="closeModal">
取消 取消
</n-button> </n-button>
@ -488,12 +483,4 @@ 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 emit = defineEmits(['onOk']) const show = ref(false);
const show = ref(false) const configStore = useConfig();
const configStore = useConfig() const dicStore = useDictionary();
const dicStore = useDictionary() const currentStatus = ref<Status>("new");
const currentStatus = ref<Status>('new') let currentEditId: string | null = null;
let currentEditId: string | null = null const emit = defineEmits(["onOk"]);
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) if (errors) return;
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,85 +109,84 @@ 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') if (currentStatus.value === "new") addCondition(param);
addCondition(param) else updateCondition({ id: currentEditId!, ...param });
else updateCondition({ id: currentEditId!, ...param }) emit("onOk");
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 = [
{ {
@ -202,58 +201,57 @@ 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) if (!newVal) return;
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;
@ -263,17 +261,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) {
@ -287,14 +285,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>
@ -316,18 +314,16 @@ 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 v-show="false" path="logic" label="逻辑关系"> <n-form-item path="logic" label="逻辑关系" v-show="false">
<n-select <n-select
v-model:value="formValue.logic"
filterable filterable
v-model:value="formValue.logic"
placeholder="请选择逻辑关系" placeholder="请选择逻辑关系"
:options="logicOptions" :options="logicOptions"
/> />
@ -340,14 +336,14 @@ defineExpose({
:label="formLabel(index)" :label="formLabel(index)"
> >
<n-select <n-select
v-model:value="item.type"
filterable filterable
v-model:value="item.type"
placeholder="请选择筛选项名称" placeholder="请选择筛选项名称"
:options="typeOptions" :options="typeOptions"
/> />
<n-select <n-select
v-model:value="item.operator"
filterable filterable
v-model:value="item.operator"
style="margin-left: 8px" style="margin-left: 8px"
placeholder="请选择" placeholder="请选择"
:options="operatorOptions" :options="operatorOptions"
@ -361,9 +357,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!)"
@ -374,19 +370,7 @@ defineExpose({
@click="removeCondition(index)" @click="removeCondition(index)"
> >
<template #icon> <template #icon>
<!-- <SvgIcon size="24" name="close" color="#F00"/> <SvgIcon size="24" name="close" />
-->
<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>
@ -399,10 +383,8 @@ defineExpose({
</div> </div>
<template #footer> <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button style="background-color: #507AFD;" type="info" @click="handleSumbit"> <n-button type="info" @click="handleSumbit"> 保存 </n-button>
确定 <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>
@ -469,11 +451,4 @@ defineExpose({
} }
} }
} }
/*j */
// ::v-deep(.n-input .n-input-wrapper) {
// padding-left: 0;
// }
::v-deep(.n-input__suffix){
margin-right: -8px;
}
</style> </style>

4
src/views/home/content/Content.vue
Unescape View File

@ -473,13 +473,13 @@ function sortHandler(orderby: "pictureResult" | "fromuptime") {
refreshHandler(); refreshHandler();
} }
async function downloadImage(item) { async function downloadImage(item) {
if (!item.imgUrl) { if (!item.thumburl) {
message.error("请输入有效的图片链接地址"); message.error("请输入有效的图片链接地址");
return; return;
} }
try { try {
// 使用 fetch 发送 GET 请求获取图片 // 使用 fetch 发送 GET 请求获取图片
const response = await fetch(item.imgUrl, { const response = await fetch(item.thumburl, {
method: "GET", method: "GET",
mode: "cors", // 确保跨域请求被正确处理 mode: "cors", // 确保跨域请求被正确处理
cache: "default", cache: "default",

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,6 +628,5 @@ 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,145 +10,143 @@ 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) if (v.checked) userField += `${v.id},`;
userField += `${v.id},` });
}) userField = userField.slice(0, userField.length - 1);
userField = userField.slice(0, userField.length - 1) savefield(props.reviewType, userInfo.id, userField);
savefield(props.reviewType, userInfo.id, userField) e.preventDefault();
e.preventDefault() closeModal();
closeModal() emit("onOk");
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) if (index === -1 && checked) selectIds.value.push(item.id);
selectIds.value.push(item.id) else selectIds.value.splice(index, 1);
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>
@ -173,14 +171,13 @@ const indeterminate = computed(() => {
> >
<div> <div>
<div class="draggable-ul"> <div class="draggable-ul">
<!-- j --> <div class="draggable-li" style="background: #f8f8f8">
<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">
@ -207,10 +204,8 @@ const indeterminate = computed(() => {
</div> </div>
<template #footer> <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button style="background-color: #507AFD;" type="info" @click="handleSumbit"> <n-button type="info" @click="handleSumbit"> 确定 </n-button>
确定 <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>
@ -312,11 +307,4 @@ 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,5 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { debounce } from 'lodash-es' import { getAllfieldList, getfieldList } from "@/api/home/filter";
import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
import { useUser } from "@/store/modules/user";
import { useWorkOrder } from "@/store/modules/workOrder";
import { getViewportOffset } from "@/utils/domUtils";
import { debounce } from "lodash-es";
import { import {
computed, computed,
defineOptions, defineOptions,
@ -18,16 +23,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)
@ -35,46 +40,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 键值
@ -82,65 +87,64 @@ 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) {
const item = { let 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 = ''
}; };
} }
@ -171,8 +175,7 @@ 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" />
<!-- j --> <span style="margin-left: 8px">所有任务包</span>
<span style="margin-left: 8px;color: #333333;">所有任务包</span>
</div> </div>
<div class="right"> <div class="right">
<SvgIcon <SvgIcon
@ -191,10 +194,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" />
@ -211,7 +214,7 @@ const ApprovalOver = (packageId)=>{
<WorkSheetList <WorkSheetList
ref="packageListRef" ref="packageListRef"
class="work-sheet-list" class="work-sheet-list"
:show-field-list="showFieldList" :showFieldList="showFieldList"
:dicts="dicts" :dicts="dicts"
@ApprovalOver="ApprovalOver" @ApprovalOver="ApprovalOver"
/> />

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

@ -1,9 +1,11 @@
<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,
@ -25,20 +27,17 @@ 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 () => {
@ -46,25 +45,23 @@ onMounted(async () => {
</script> </script>
<template> <template>
<div ref="popconfirmTarget" class="list-item" :class="{ 'list-item-selected': selected }"> <div class="list-item" :class="{ 'list-item-selected': selected }" ref="popconfirmTarget">
<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 <n-popconfirm id="taskPopconfirmRef" ref="popconfirmRef" :show-icon="false" :show-arrow="false"
id="taskPopconfirmRef" ref="popconfirmRef" :show-icon="false" :show-arrow="false" placement="bottom" trigger="click">
placement="bottom" trigger="click"
>
<template #trigger> <template #trigger>
<span v-show="mouseOverTask?.id" class="dismiss-task-pack" style="cursor: pointer;">...</span> <span class="dismiss-task-pack" v-show="mouseOverTask?.id" style="cursor: pointer;">...</span>
</template> </template>
<template #action> <template #action>
<span style="cursor: pointer;" @click="handleDismissTask">解散任务包</span> <span @click="handleDismissTask" style="cursor: pointer;">解散任务包</span>
</template> </template>
</n-popconfirm> </n-popconfirm>
</span> </span>
@ -72,31 +69,21 @@ 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"> 审批状态：<n-ellipsis style="max-width: 170px"><span class="list-item-status" :class="listItem.statshisText === '通过'
<span ? 'list-item-success'
class="list-item-status" :class="listItem.statshisText === '通过' : listItem.statshisText === '不通过'
? 'list-item-success' ? 'list-item-error'
: listItem.statshisText === '不通过' : 'list-item-watting'
? 'list-item-error' ">{{ listItem.statshisText }}</span>
: 'list-item-watting' </n-ellipsis></li>
"
>{{ 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"> 提交时间：<n-ellipsis style="max-width: 170px">{{ listItem.createdate && format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") }}</n-ellipsis>
{{ 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"> 生成时间：<n-ellipsis style="max-width: 170px">{{ listItem.createTime && format(listItem.createTime, "yyyy-MM-dd HH:mm:ss") }}</n-ellipsis>
{{ 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"> <span class="label">{{ item.name }}：</span><n-ellipsis style="max-width: 170px">{{ listItem[item.id] }}</n-ellipsis>
{{ listItem[item.id] }}
</n-ellipsis>
</li> </li>
</ul> </ul>
</div> </div>
@ -165,9 +152,9 @@ onMounted(async () => {
line-height: 22px; line-height: 22px;
margin: 0px 0px 8px 8px; margin: 0px 0px 8px 8px;
} }
/*j*/
&-selected { &-selected {
color: #507afd !important; color: #507afd;
} }
} }
@ -198,6 +185,5 @@ 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,32 +1,30 @@
<script setup lang="ts"> <script setup lang="ts">
import { format } from 'date-fns' import { fieldMap } from "@/config/workorder";
import { pickBy } from 'lodash-es' import { TASK_STATUS_OBJ } from '@/enums/index';
import { computed, defineProps } from 'vue' import { format } from 'date-fns';
import { TASK_STATUS_OBJ } from '@/enums/index' import { pickBy } from "lodash-es";
import { fieldMap } from '@/config/workorder' import { computed, defineProps } from "vue";
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"> <n-ellipsis style="max-width: 350px">任务ID：{{ taskDetailInfo.taskname }}</n-ellipsis>
任务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>
@ -35,32 +33,31 @@ const propertys = computed(() => {
</div> </div>
<n-divider class="divider-line" /> <n-divider class="divider-line" />
<div class="property"> <div class="property">
<!-- j --> <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?.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: #999999">图片格式</span> <span class="property-name top" style="color: #666666">图片格式</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: #999999">图片尺寸</span> <span class="property-name top" style="color: #666666">图片尺寸</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: #999999">色彩空间</span> <span class="property-name top" style="color: #666666">色彩空间</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: #999999">提报人</span> <span class="property-name top" style="color: #666666">提报人</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: #999999">创建时间</span> <span class="property-name top" style="color: #666666">创建时间</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: #999999">提报时间</span> <span class="property-name top" style="color: #666666">提报时间</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">
@ -90,6 +87,7 @@ 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%;
@ -177,6 +175,7 @@ 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" style="color: #333;">自定义任务包字段</span> <span class="wrapper-title">自定义任务包字段</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" style="color: #666;">{{ item.name }}</span> <span class="ml-2">{{ 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" style="background-color: #507AFD;"> 确定 </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>
@ -468,7 +468,7 @@ const indeterminate = computed(() => {
font-size: 14px; font-size: 14px;
&:before { &:before {
background-color: #507AFD; background-color: #1980ff;
content: ""; content: "";
width: 5px; width: 5px;
border-radius: 2px; border-radius: 2px;
@ -558,15 +558,4 @@ 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