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

fix: 处理图鉴管理布局样式

Browse Source
pull/178/head
zhouxiaoan 1 year ago
parent b80d9edef4
commit 878a81a355
3 changed files with 122 additions and 110 deletions
Show Stats Download Patch File Download Diff File

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

@ -132,7 +132,7 @@ onMounted(async () => {
<template <template
v-if="showFieldList?.length > 5" v-if="showFieldList?.length > 5"
> >
<div class="absolute bottom-0 py-[8px] pl-[36px] item-action"> <div class="absolute bottom-0 py-[8px] pl-[36px] text-[#666] item-action">
<span class="cursor-pointer" @click.stop="showFull = !showFull"> <span class="cursor-pointer" @click.stop="showFull = !showFull">
<SvgIcon style="margin-left: 6px" name="expand" size="16" /> <SvgIcon style="margin-left: 6px" name="expand" size="16" />
<SvgIcon style="margin-left: 6px" name="collapse" size="16" /> <SvgIcon style="margin-left: 6px" name="collapse" size="16" />

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

@ -1,15 +1,15 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, onUnmounted, reactive, ref, watch } from "vue"; import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { throttle } from "lodash-es"; import { throttle } from 'lodash-es'
import { useInfiniteScroll } from "@vueuse/core"; import { useInfiniteScroll } from '@vueuse/core'
import { useMessage } from "naive-ui"; import { useMessage } from 'naive-ui'
import ApprovalModal from "../modal/ApprovalModal.vue"; import ApprovalModal from '../modal/ApprovalModal.vue'
import ListItem from "./ListItem.vue"; import ListItem from './ListItem.vue'
import { deletePackage } from "@/api/home/main"; import { deletePackage } from '@/api/home/main'
import { useWorkOrder } from "@/store/modules/workOrder"; import { useWorkOrder } from '@/store/modules/workOrder'
import { isEmpty } from "@/utils"; import { isEmpty } from '@/utils'
import type { PackageListItem } from "/#/workorder"; import type { PackageListItem } from '/#/workorder'
import NotPassed from "@/components/NotPassed.vue"; import NotPassed from '@/components/NotPassed.vue'
defineProps({ defineProps({
showFieldList: { showFieldList: {
@ -20,57 +20,59 @@ defineProps({
type: Array, type: Array,
default: () => [], default: () => [],
}, },
}); })
const emit = defineEmits(["ApprovalOver"]); const emit = defineEmits(['ApprovalOver'])
const workStore = useWorkOrder(); const workStore = useWorkOrder()
const data = ref<PackageListItem[]>([]); const data = ref<PackageListItem[]>([])
const activeId = ref(""); const activeId = ref('')
const el = ref<HTMLDivElement | null>(null); const el = ref<HTMLDivElement | null>(null)
const keyword = ref(""); const keyword = ref('')
const canloadMore = ref(true); const canloadMore = ref(true)
const isLoading = ref(false); const isLoading = ref(false)
const pagination = reactive({ const pagination = reactive({
pageNo: 0, pageNo: 0,
pageSize: 10, pageSize: 10,
}); })
const approvalModalRef: any = ref(null); const approvalModalRef: any = ref(null)
const notPassedRef: any = ref(null); const notPassedRef: any = ref(null)
const overTask = ref<any>(null); const overTask = ref<any>(null)
function selectHandler(id: string, index: number) { function selectHandler(id: string, index: number) {
// console.log('selectHandler',id) // console.log('selectHandler',id)
workStore.setActive(index); workStore.setActive(index)
// showModal(approvalModalRef, id) // showModal(approvalModalRef, id)
} }
useInfiniteScroll( useInfiniteScroll(
el as any, el as any,
() => { () => {
loadMore(); loadMore()
}, },
{ {
distance: 10, distance: 10,
interval: 1500, interval: 1500,
canLoadMore: () => canloadMore.value, canLoadMore: () => canloadMore.value,
} },
); )
async function loadMore() { async function loadMore() {
if (isLoading.value || el.value == null) return; if (isLoading.value || el.value == null)
isLoading.value = true; return
isLoading.value = true
try { try {
const more = await fetchList(); const more = await fetchList()
more.forEach((ele) => { more.forEach((ele) => {
ele.search = JSON.parse(ele.search); ele.search = JSON.parse(ele.search)
// ele.search.createTime = ele.search.submit_date_timestamp // ele.search.createTime = ele.search.submit_date_timestamp
}); })
data.value.push(...more); data.value.push(...more)
} finally { }
isLoading.value = false; finally {
isLoading.value = false
} }
} }
@ -82,112 +84,117 @@ async function loadMore() {
async function fetchList() { async function fetchList() {
try { try {
pagination.pageNo += 1; pagination.pageNo += 1
const result = await workStore.fetchOrderList(pagination, keyword.value); const result = await workStore.fetchOrderList(pagination, keyword.value)
const { data, pageCount } = result; const { data, pageCount } = result
if (pageCount !== 0) canloadMore.value = pageCount >= pagination.pageNo; if (pageCount !== 0)
else canloadMore.value = false; canloadMore.value = pageCount >= pagination.pageNo
else canloadMore.value = false
return data || [];
} catch (error) { return data || []
canloadMore.value = false; }
return []; catch (error) {
canloadMore.value = false
return []
} }
} }
watch( watch(
() => workStore.activeId, () => workStore.activeId,
(newVal) => { (newVal) => {
if (isEmpty(newVal)) return; if (isEmpty(newVal))
activeId.value = newVal; return
approvalModalRef.value.showModal(workStore.dataId); activeId.value = newVal
} approvalModalRef.value.showModal(workStore.dataId)
); },
)
function reset() { function reset() {
pagination.pageNo = 0; pagination.pageNo = 0
pagination.pageSize = 10; pagination.pageSize = 10
canloadMore.value = true; canloadMore.value = true
data.value.length = 0; data.value.length = 0
workStore.reset(); workStore.reset()
} }
function notPass(value) { function notPass(value) {
notPassedRef.value.showModal(value); notPassedRef.value.showModal(value)
} }
async function search(word: string) { async function search(word: string) {
keyword.value = word; keyword.value = word
reset(); reset()
useInfiniteScroll( useInfiniteScroll(
el as any, el as any,
() => { () => {
loadMore(); loadMore()
}, },
{ distance: 10, canLoadMore: () => canloadMore.value } { distance: 10, canLoadMore: () => canloadMore.value },
); )
} }
function overTaskHandelr(item: any) { function overTaskHandelr(item: any) {
overTask.value = item; overTask.value = item
} }
function leaveTaskHandler(event) { function leaveTaskHandler(event) {
if (event?.relatedTarget?.id !== "taskPopconfirmRef") overTask.value = null; if (event?.relatedTarget?.id !== 'taskPopconfirmRef')
overTask.value = null
} }
const message = useMessage(); const message = useMessage()
function dismisClick(packageId: string) { function dismisClick(packageId: string) {
deletePackage({ packageId }).then((res) => { deletePackage({ packageId }).then((res) => {
if (res.code === "OK") { if (res.code === 'OK') {
message.success("解散任务包成功"); message.success('解散任务包成功')
reset(); reset()
loadMore(); loadMore()
} }
}); })
} }
function ApprovalOver(packageId) { function ApprovalOver(packageId) {
emit("ApprovalOver", packageId); emit('ApprovalOver', packageId)
} }
defineExpose({ defineExpose({
search, search,
}); })
const onKeydown = throttle((event) => { const onKeydown = throttle((event) => {
const eles = ["INPUT", "TEXTAREA"]; const eles = ['INPUT', 'TEXTAREA']
if (eles.includes(event.target.tagName)) return; if (eles.includes(event.target.tagName))
return
if (event.defaultPrevented) return; // 如果已取消默认操作，则不应执行任何操作 if (event.defaultPrevented)
return // 如果已取消默认操作，则不应执行任何操作
const handled = false; const handled = false
if (event.key !== undefined) { if (event.key !== undefined) {
// 使用 KeyboardEvent.key 处理事件，并将 handled 设置为 true。 // 使用 KeyboardEvent.key 处理事件，并将 handled 设置为 true。
} else if (event.keyCode !== undefined) { }
else if (event.keyCode !== undefined) {
// 使用 KeyboardEvent.keyCode 处理事件并将 handled 设置为 true。 // 使用 KeyboardEvent.keyCode 处理事件并将 handled 设置为 true。
} }
if (handled) { if (handled) {
// 如果事件已处理，则禁止“双重操作” // 如果事件已处理，则禁止“双重操作”
event.preventDefault(); event.preventDefault()
}
if (event.key === "ArrowUp") {
const prev = data.value[workStore.currentIndex - 1]?.id;
if (prev) selectHandler(prev, workStore.currentIndex - 1);
} }
if (event.key === "ArrowDown") { if (event.key === 'ArrowLeft') {
const next = data.value[workStore.currentIndex + 1]?.id; const prev = data.value[workStore.currentIndex - 1]?.id
if (next) selectHandler(next, workStore.currentIndex + 1); if (prev)
selectHandler(prev, workStore.currentIndex - 1)
} }
if (event.key === "ArrowRight" || event.key === "ArrowLeft") { if (event.key === 'ArrowRight') {
if (activeId.value) activeId.value = ""; const next = data.value[workStore.currentIndex + 1]?.id
else activeId.value = data.value[workStore.currentIndex]?.checkDuplicateId; if (next)
selectHandler(next, workStore.currentIndex + 1)
} }
}, 500); }, 500)
onMounted(() => { onMounted(() => {
document.addEventListener("keydown", onKeydown, true); document.addEventListener('keydown', onKeydown, true)
}); })
onUnmounted(() => { onUnmounted(() => {
document.removeEventListener("keydown", onKeydown); document.removeEventListener('keydown', onKeydown)
}); })
</script> </script>
<template> <template>

37
src/views/worksheet/content/Content.vue
Unescape View File

@ -109,7 +109,6 @@ function reset() {
loading.value = false loading.value = false
canloadMore = true canloadMore = true
} }
console.log(listData)
async function refreshHandler() { async function refreshHandler() {
reset() reset()
@ -283,15 +282,16 @@ function immersionHandler() {
function showAction() { function showAction() {
const item = taskDetailInfo.value const item = taskDetailInfo.value
if (item.historyStates === 2 || item.historyStates === 3) // if (item.historyStates === 2 || item.historyStates === 3)
return // return
if (batch.value === false) if (batch.value === false)
overTask.value = item overTask.value = item
} }
function hideAction() { function hideAction(event) {
overTask.value = null // overTask.value = null
previewHandler(event)
} }
function previewHandler(event: MouseEvent) { function previewHandler(event: MouseEvent) {
@ -535,7 +535,8 @@ defineExpose({
<div <div
class="left" class="left"
:style="{ 'background-image': `url(${taskDetailInfo?.imgurl})` }" :style="{ 'background-image': `url(${taskDetailInfo?.imgurl})` }"
@click="showAction" @click="previewHandler"
@mouseover="showAction"
@mouseleave="leaveTaskHandler" @mouseleave="leaveTaskHandler"
> >
<div class="footer-times"> <div class="footer-times">
@ -598,7 +599,7 @@ defineExpose({
</n-grid> </n-grid>
</div> </div>
<!-- 右上点击大图 --> <!-- 右上点击大图 -->
<div class="preview" @click="previewHandler"> <div class="preview" style="z-index: 5;" @click="previewHandler">
<SvgIcon size="16" name="zoom-out" /> <SvgIcon size="16" name="zoom-out" />
</div> </div>
<!-- 预览大图组件 --> <!-- 预览大图组件 -->
@ -710,7 +711,7 @@ defineExpose({
@update:checked="onCheckChange($event, item)" @update:checked="onCheckChange($event, item)"
/> />
</div> </div>
<div class="percent" :class="{ 'percent-red': item?.maxSimilarity >= 100 }"> <div class="percent">
<SvgIcon size="42" :name="item.maxSimilarity == 100 ? 'error_tag' : 'tag'" /> <SvgIcon size="42" :name="item.maxSimilarity == 100 ? 'error_tag' : 'tag'" />
<div class="val"> <div class="val">
{{ item?.maxSimilarity && Number(item?.maxSimilarity).toFixed(0) {{ item?.maxSimilarity && Number(item?.maxSimilarity).toFixed(0)
@ -727,7 +728,7 @@ defineExpose({
<div v-show="overTask && overTask.id === item.id" class="action"> <div v-show="overTask && overTask.id === item.id" class="action">
<SvgIcon v-if="item.historyStates === 1" style="cursor: pointer" name="t1" @click.stop="approvalHandler" /> <SvgIcon v-if="item.historyStates === 1" style="cursor: pointer" name="t1" @click.stop="approvalHandler" />
<SvgIcon <SvgIcon
v-if="[1, 3].includes(item.historyStates)" v-if="[1].includes(item.historyStates)"
style="cursor: pointer; margin-left: 40px" style="cursor: pointer; margin-left: 40px"
name="t2" name="t2"
@click.stop="singleRejectHandler(item)" @click.stop="singleRejectHandler(item)"
@ -735,17 +736,21 @@ defineExpose({
<SvgIcon style="cursor: pointer; margin-left: 30px" name="t9" @click.stop="handleRejectdubiousfileyd" /> <SvgIcon style="cursor: pointer; margin-left: 30px" name="t9" @click.stop="handleRejectdubiousfileyd" />
</div> </div>
</div> </div>
<n-back-top :listen-to="wrapperListRef" :bottom="220" :visibility-height="10"> <n-back-top :listen-to="wrapperListRef" :bottom="220" :visibility-height="10" style="height: 64px; width: 64px;border-radius: 32px;">
<div <div
style=" style="
width: 100px; width: 64px;
height: 40px; height: 64px;
line-height: 40px; /* line-height: 40px; */
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
position: relative
" "
> >
回到顶部 <svg-icon
name="top"
style="width:84px;height: 84px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);"
/>
</div> </div>
</n-back-top> </n-back-top>
</div> </div>
@ -942,7 +947,7 @@ defineExpose({
border-radius: 8px; border-radius: 8px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(0, 0, 0, 0.48); background: linear-gradient(180deg,rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 29%, rgba(3,0,0,0.73))
} }
.info { .info {
@ -1248,7 +1253,7 @@ defineExpose({
border-radius: 8px; border-radius: 8px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(0, 0, 0, 0.48); background: linear-gradient(180deg,rgba(0,0,0,0.01), rgba(0,0,0,0.44) 88%);
} }
} }
} }

Write Preview
Loading…
Cancel
Save