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

Merge pull request 'bug:审批列表相似度展示模式和终审问题' (#87) from fix/shenpi into test

Browse Source 
Reviewed-on: #87
pull/88/head
shenhailong 1 year ago
parent 63b19a5e16 9fa25d4614
commit 218c56c5d3
6 changed files with 526 additions and 473 deletions
Show Stats Download Patch File Download Diff File

2
src/router/modules/final.ts
Unescape View File

@ -38,7 +38,7 @@ const routes: Array<RouteRecordRaw> = [
path: 'final-detail', path: 'final-detail',
name: 'final-detail', name: 'final-detail',
meta: { meta: {
title: '任务终审详情', title: '任务详情',
}, },
component: () => import('@/views/task/content/Content.vue'), component: () => import('@/views/task/content/Content.vue'),
}, },

4
src/views/final/comp/RepeatTaskTableModal.vue
Unescape View File

@ -68,6 +68,9 @@ const columns: DataTableColumns<RowData> = [
ellipsis: { ellipsis: {
tooltip: true, tooltip: true,
}, },
render(row: any) {
return row.fromtaskname
},
}, },
{ {
title: '任务名称', title: '任务名称',
@ -356,6 +359,7 @@ function showModal() {
function reload() { function reload() {
selectionIds.value = [] selectionIds.value = []
checkedRowKeys.value = [] checkedRowKeys.value = []
query(pagination.page, pagination.pageSize)
} }
function goDetail(row) { function goDetail(row) {

689
src/views/final/content/Content.vue
View File

File diff suppressed because it is too large Load Diff

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

@ -1,32 +1,32 @@
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref, toRefs } from "vue"; import { reactive, ref, toRefs } from 'vue'
import { format } from "date-fns"; import { format } from 'date-fns'
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from 'vue-router'
import { getMessageList, readAllMsg, readMsg } from "@/api/message/message"; import { getMessageList, readAllMsg, readMsg } from '@/api/message/message'
import iconApproveActive from "@/assets/images/message/approve-active.png"; import iconApproveActive from '@/assets/images/message/approve-active.png'
import iconApprove from "@/assets/images/message/approve.png"; import iconApprove from '@/assets/images/message/approve.png'
import iconSystemActive from "@/assets/images/message/system-active.png"; import iconSystemActive from '@/assets/images/message/system-active.png'
import iconSystem from "@/assets/images/message/system.png"; import iconSystem from '@/assets/images/message/system.png'
import iconArrowActive from "@/assets/images/message/arrow-active.png"; import iconArrowActive from '@/assets/images/message/arrow-active.png'
import iconArrow from "@/assets/images/message/arrow.png"; import iconArrow from '@/assets/images/message/arrow.png'
import iconClear from "@/assets/images/message/clear.png"; import iconClear from '@/assets/images/message/clear.png'
import iconArrowDown from "@/assets/images/message/arrow-down.png"; import iconArrowDown from '@/assets/images/message/arrow-down.png'
const emit = defineEmits(["goDetail"]); const emit = defineEmits(['goDetail'])
const router = useRouter(); const router = useRouter()
const route = useRoute(); const route = useRoute()
const hasNextPage = ref(false); const hasNextPage = ref(false)
const state = reactive({ const state = reactive({
tabList: [ tabList: [
{ {
name: "审批通知", name: '审批通知',
icon: iconApprove, icon: iconApprove,
activeIcon: iconApproveActive, activeIcon: iconApproveActive,
value: 1, value: 1,
}, },
{ {
name: "系统消息", name: '系统消息',
icon: iconSystem, icon: iconSystem,
activeIcon: iconSystemActive, activeIcon: iconSystemActive,
value: 2, value: 2,
@ -34,102 +34,105 @@ const state = reactive({
], ],
list: [] as any, list: [] as any,
pageNo: 1, pageNo: 1,
}); })
const { list, tabList } = toRefs(state); const { list, tabList } = toRefs(state)
const tab = ref(1); const tab = ref(1)
async function getList(type = "") { async function getList(type = '') {
let res = await getMessageList({ let res = await getMessageList({
pageNo: state.pageNo, pageNo: state.pageNo,
pageSize: "7", pageSize: '7',
msgCategory: tab.value, msgCategory: tab.value,
}); })
if (type == "more") { if (type == 'more') {
while (res.data.endRow > 0) { while (res.data.endRow > 0) {
if (res.code == "OK") { if (res.code == 'OK') {
if (tab.value === 1) { if (tab.value === 1) {
res.data.list.forEach((item) => { res.data.list.forEach((item) => {
item.tag = JSON.parse(item.busJson); item.tag = JSON.parse(item.busJson)
}); })
} }
state.list = state.list.concat(res.data.list); state.list = state.list.concat(res.data.list)
state.pageNo++; state.pageNo++
res = await getMessageList({ res = await getMessageList({
pageNo: state.pageNo, pageNo: state.pageNo,
pageSize: "7", pageSize: '7',
msgCategory: tab.value, msgCategory: tab.value,
}); })
} }
} }
hasNextPage.value = res.data.hasNextPage; hasNextPage.value = res.data.hasNextPage
} else { }
if (res.code === "OK") { else {
hasNextPage.value = res.data.hasNextPage; if (res.code === 'OK') {
hasNextPage.value = res.data.hasNextPage
if (tab.value === 1) { if (tab.value === 1) {
res.data.list.forEach((item) => { res.data.list.forEach((item) => {
item.tag = JSON.parse(item.busJson); item.tag = JSON.parse(item.busJson)
}); })
} }
state.list = state.list.concat(res.data.list); state.list = state.list.concat(res.data.list)
} }
} }
} }
getList(); getList()
async function clearMsg() { async function clearMsg() {
const res = await readAllMsg({ msgCategory: tab.value }); const res = await readAllMsg({ msgCategory: tab.value })
if (res.code === "OK") { if (res.code === 'OK') {
state.list = []; state.list = []
state.pageNo = 1; state.pageNo = 1
getList(); getList()
} }
} }
function switchTab(type: number) { function switchTab(type: number) {
tab.value = type; tab.value = type
state.list = []; state.list = []
state.pageNo = 1; state.pageNo = 1
getList(); getList()
} }
function goFinalDetail(row) { function goFinalDetail(row) {
console.log(row); console.log(row)
router.push({ router.push({
name: "final-detail", name: 'final-detail',
query: { id: row.tag.taskId, packageid: row.packageid }, query: { id: row.tag.fromId, packageid: row.packageid },
}); })
} }
function goDetail(item) { function goDetail(item) {
if (tab.value === 1) { if (tab.value === 1) {
clearMsgOne(item.id); clearMsgOne(item.id)
goFinalDetail(item); goFinalDetail(item)
} }
// emit('goDetail', item.id) // emit('goDetail', item.id)
else { else {
router.push({ name: "message-detail", query: { id: item.id } }); router.push({ name: 'message-detail', query: { id: item.id } })
} }
} }
async function clearMsgOne(id) { async function clearMsgOne(id) {
const res = await readMsg({ msgid: id }); const res = await readMsg({ msgid: id })
} }
function getMore() { function getMore() {
state.pageNo += 1; state.pageNo += 1
getList("more"); getList('more')
} }
</script> </script>
<template> <template>
<div class="wrapper-message"> <div class="wrapper-message">
<div class="flex justify-between header"> <div class="flex justify-between header">
<div class="header-title">消息通知</div> <div class="header-title">
消息通知
</div>
<div class="clear" @click="clearMsg"> <div class="clear" @click="clearMsg">
<img class="icon-clear" :src="iconClear" alt="" /> <img class="icon-clear" :src="iconClear" alt="">
清除未读 清除未读
</div> </div>
</div> </div>
@ -147,7 +150,7 @@ function getMore() {
class="icon" class="icon"
:src="tab === item.value ? item.activeIcon : item.icon" :src="tab === item.value ? item.activeIcon : item.icon"
alt="" alt=""
/> >
<div :class="{ 'text-active': tab === item.value }" class="text"> <div :class="{ 'text-active': tab === item.value }" class="text">
{{ item.name }} {{ item.name }}
</div> </div>
@ -156,7 +159,7 @@ function getMore() {
class="icon-arrow" class="icon-arrow"
:src="tab === item.value ? iconArrowActive : iconArrow" :src="tab === item.value ? iconArrowActive : iconArrow"
alt="" alt=""
/> >
<div v-if="tab === item.value" class="line" /> <div v-if="tab === item.value" class="line" />
</div> </div>
</div> </div>
@ -164,7 +167,7 @@ function getMore() {
<div <div
v-for="(item, index) in list" v-for="(item, index) in list"
:key="item.id" :key="item.id"
:class="{ pt0: index === 0, 'item-disabled': item.readFlag }" :class="{ 'pt0': index === 0, 'item-disabled': item.readFlag }"
class="item" class="item"
@click="goDetail(item)" @click="goDetail(item)"
> >
@ -185,7 +188,9 @@ function getMore() {
{{ item.titile }} {{ item.titile }}
</div> </div>
<div v-if="tab === 1" class="status"> <div v-if="tab === 1" class="status">
<div class="tag tag-blue">审批节点：{{ item.tag.nodeName }}</div> <div class="tag tag-blue">
审批节点：{{ item.tag.nodeName }}
</div>
<div :class="item.tag.states === 5 ? 'tag-red' : 'tag-green'" class="tag"> <div :class="item.tag.states === 5 ? 'tag-red' : 'tag-green'" class="tag">
审批状态：{{ item.tag.states }} 审批状态：{{ item.tag.states }}
</div> </div>
@ -199,11 +204,13 @@ function getMore() {
<span class="time">{{ format(item.sendTime, "yyyy-MM-dd HH:mm:ss") }}</span> <span class="time">{{ format(item.sendTime, "yyyy-MM-dd HH:mm:ss") }}</span>
</div> </div>
</div> </div>
<div class="look">查看</div> <div class="look">
查看
</div>
</div> </div>
<div v-if="hasNextPage" class="more" @click="getMore"> <div v-if="hasNextPage" class="more" @click="getMore">
查看更多<img class="icon-more" :src="iconArrowDown" alt="" /> 查看更多<img class="icon-more" :src="iconArrowDown" alt="">
</div> </div>
</div> </div>
</div> </div>

2
src/views/task/content/Content.vue
Unescape View File

@ -581,7 +581,7 @@ function switchBatch() {
<div <div
draggable="true" draggable="true"
class="img-wrapper" class="img-wrapper"
:style="{ 'background-image': `url(${item.imgUrl})` }" :style="{ 'background-image': `url(${item.serverThumbnailUrl})` }"
@dragend=" @dragend="
(event) => { (event) => {
handleDragEnd(event, item); handleDragEnd(event, item);

93
src/views/task/modal/BatchModal.vue
Unescape View File

@ -5,8 +5,10 @@ import { useInfiniteScroll } from '@vueuse/core'
import { debounce } from 'lodash-es' import { debounce } from 'lodash-es'
import imagesloaded from 'imagesloaded' import imagesloaded from 'imagesloaded'
import { useMessage } from 'naive-ui' import { useMessage } from 'naive-ui'
import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
import { getViewportOffset, off, on } from '@/utils/domUtils'
import { timeOptions, viewOptions } from '@/config/home' import { timeOptions, viewOptions } from '@/config/home'
import { off, on } from '@/utils/domUtils'
import { useTask } from '@/store/modules/task' import { useTask } from '@/store/modules/task'
import { TASK_STATUS_OBJ } from '@/enums/index' import { TASK_STATUS_OBJ } from '@/enums/index'
import { formatToDateHMS } from '@/utils/dateUtil' import { formatToDateHMS } from '@/utils/dateUtil'
@ -43,6 +45,7 @@ const viewLabel = computed(() => {
return item?.label return item?.label
}) })
const deviceHeight = ref(600)
const taskStore = useTask() const taskStore = useTask()
const masonryRef = ref<ComponentRef>(null) const masonryRef = ref<ComponentRef>(null)
@ -64,6 +67,14 @@ const sortBy: any = {
const batch = ref(false) const batch = ref(false)
let _imagesload: any let _imagesload: any
const message = useMessage() const message = useMessage()
async function computeListHeight() {
const headEl = document.querySelector('.wrapper-content')!
const { bottomIncludeBody } = getViewportOffset(headEl)
const height = bottomIncludeBody
deviceHeight.value = height - 40 - 16 - 24
}
useWindowSizeFn(computeListHeight)
const layout = debounce(() => { const layout = debounce(() => {
if (!show.value) if (!show.value)
@ -74,6 +85,7 @@ const layout = debounce(() => {
_masonry = new Masonry(masonryRef.value as any, { _masonry = new Masonry(masonryRef.value as any, {
itemSelector: '.grid-item', itemSelector: '.grid-item',
gutter: 17,
columnWidth: 214, columnWidth: 214,
percentPosition: true, percentPosition: true,
stagger: 10, stagger: 10,
@ -208,9 +220,9 @@ function upHandler(event: MouseEvent) {
start = null start = null
} }
const gridHeight = computed(() => { // const gridHeight = computed(() => {
return viewMode.value !== 'masonry' ? '157px' : '' // return viewMode.value !== 'masonry' ? '157px' : ''
}) // })
function addListeners() { function addListeners() {
selectionBox = document.querySelector('.selection-box') as HTMLDivElement selectionBox = document.querySelector('.selection-box') as HTMLDivElement
@ -346,6 +358,12 @@ watch(() => taskStore.activeId, async (newValue, oldValue) => {
refreshHandler() refreshHandler()
}) })
const listStyle = computed(() => {
return {
height: `${deviceHeight.value}px`,
}
})
function switchBatch() { function switchBatch() {
setBatch(!batch.value) setBatch(!batch.value)
} }
@ -363,19 +381,19 @@ function sortHandler(orderby: 'similarityScore' | 'createdate') {
refreshHandler() refreshHandler()
} }
// const gridHeight = computed(() => { const gridHeight = computed(() => {
// let height = '' let height = ''
// if (viewMode.value === 'masonry') if (viewMode.value === 'masonry')
// height = '' height = ''
// else if (viewMode.value === 'horizontalVersion') else if (viewMode.value === 'horizontalVersion')
// height = '145px' height = '122px'
// else if (viewMode.value === 'verticalVersion') else if (viewMode.value === 'verticalVersion')
// height = '300px' height = '300px'
// else if (viewMode.value === '3:4') else if (viewMode.value === '3:4')
// height = '240px' height = '240px'
// return height return height
// }) })
defineExpose({ defineExpose({
showModal, showModal,
@ -505,22 +523,27 @@ defineExpose({
</div> </div>
</div> </div>
<div ref="el" class="scroll"> <n-spin :show="loading">
<div ref="el" class="scroll" :style="listStyle">
<!-- <n-scrollbar :on-scroll="scrollHandler"> --> <!-- <n-scrollbar :on-scroll="scrollHandler"> -->
<div ref="masonryRef" class="grid"> <div ref="masonryRef" class="grid">
<div <div
v-for="(item, index) in listData" :key="index" :data-id="item.id" :style="{ height: gridHeight }" v-for="(item, index) in listData"
:key="index"
:style="{ height: gridHeight }"
class="grid-item" class="grid-item"
> >
<div class="img-wrap"> <div>
<!-- <img
class="wrapper-content-item-img"
:class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
> -->
<n-image <n-image
ref="imageRef" ref="imageRef"
class="img" class="img"
:class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" :src="item.serverThumbnailUrl || item.imgUrl"
:class="{
'img-fit': viewMode === 'horizontalVersion',
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
}"
:src="item.serverThumbnailUrl"
/> />
<div class="small-mark" /> <div class="small-mark" />
<div class="time"> <div class="time">
@ -550,6 +573,7 @@ defineExpose({
</div> </div>
<!-- </n-scrollbar> --> <!-- </n-scrollbar> -->
</div> </div>
</n-spin>
</div> </div>
<div class="close" @pointerdown="closeModal"> <div class="close" @pointerdown="closeModal">
@ -728,7 +752,7 @@ defineExpose({
} }
&-m32 { &-m32 {
margin-left: 19px; // margin-left: 19px;
} }
&-content { &-content {
@ -778,17 +802,20 @@ defineExpose({
display: block; display: block;
height: 100%; height: 100%;
} }
}
&-img-fit { .img-fit {
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
} overflow: hidden;
} }
.img { .img {
border-radius: 7px; border-radius: 7px;
display: block; display: block;
height: calc(100% - 25px); // height: calc(100% - 25px);
height: 100%;
width: 100%;
} }
.img-full { .img-full {
@ -804,8 +831,11 @@ defineExpose({
.grid-item { .grid-item {
width: 214px; width: 214px;
padding: 16px; // padding: 16px;
// width: 182px;
position: relative; position: relative;
margin-bottom: 32px;
transition: 0.5s;
.check{ .check{
position: absolute; position: absolute;
@ -851,4 +881,7 @@ defineExpose({
} }
} }
} }
::v-deep(.n-image img) {
width: 100%!important;
}
</style> </style>

Write Preview
Loading…
Cancel
Save