1、终审样式

2、相似图样式
3、终审列表样式
4、审核完成状态改变bug
5、相似图筛选问题
6、缩略图问题
7、小结查重重复任务问题
8、移入刷新问题
pull/74/head
Dragon 1 year ago
parent 8518e70649
commit 43b3ebd078

@ -28,19 +28,25 @@ const actions = computed(() => {
</script> </script>
<template> <template>
<div :data-id="id"> <div :data-id="id" class="wrap">
<n-button <div
v-for="(action, index) in actions" :key="index" class="normal" v-for="(action, index) in actions" :key="index"
class="normal"
:class="{ gap: index !== 0, reject: action.key === 'reject' }" text @click="(trigger(action) as any)" :class="{ gap: index !== 0, reject: action.key === 'reject' }" text @click="(trigger(action) as any)"
> >
{{ action.label }} {{ action.label }}
</n-button> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.wrap{
display: flex;
align-items: center;
}
.normal { .normal {
color: #507AFD color: #507AFD;
cursor: pointer;
} }
.gap { .gap {

@ -397,25 +397,21 @@ defineExpose({
</div> </div>
</div> </div>
<div class="batch"> <div v-show="showActions" class="batch">
<div v-show="!showActions" style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<div class="btn-batch">
<SvgIcon style="margin-right: 6px" size="22" name="batch" />
批量审批
</div>
</div>
<div v-show="showActions" style="display: flex; align-items: center">
<NButton text @click="switchBatch()">
<template #icon>
<SvgIcon name="revoke" />
</template>
取消
</NButton>
<img class="btn-approval btn-left" style="margin-left: 16px" src="@/assets/images/task/btn-not-pass.png" alt="" @click.stop="batchReject"> <img class="btn-approval btn-left" style="margin-left: 16px" src="@/assets/images/task/btn-not-pass.png" alt="" @click.stop="batchReject">
<SvgIcon size="24" name="vs" /> <SvgIcon size="24" name="vs" />
<img class="btn-approval" src="@/assets/images/task/btn-pass.png" alt="" @click.stop="batchApproval"> <img class="btn-approval" src="@/assets/images/task/btn-pass.png" alt="" @click.stop="batchApproval">
</div> </div>
<div class="batch-right">
<div class="select">
已选中 <span class="num">{{ selectionIds.length }}</span>
</div>
<div class="line" />
<div class="clear" @click="switchBatch">
清空
</div>
</div>
</div> </div>
<div class="wrapper-content"> <div class="wrapper-content">
<NDataTable <NDataTable
@ -454,6 +450,7 @@ defineExpose({
.batch { .batch {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
margin-top: 27px; margin-top: 27px;
.btn-approval{ .btn-approval{
@ -462,6 +459,34 @@ defineExpose({
cursor: pointer; cursor: pointer;
} }
.batch-right {
display: flex;
align-items: center;
.select{
font-size: 14px;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 500;
text-align: center;
color: #666666;
}
.num{
color: #507AFD;
}
.line{
width: 1px;
height: 14px;
background: #d8d8d8;
margin: 0 16px;
}
.clear{
color: #507AFD;
cursor: pointer;
}
}
} }
.wrapper { .wrapper {
display: flex; display: flex;

@ -834,9 +834,9 @@ defineExpose({
<li> <li>
<SvgIcon size="20" name="download" /><span style="margin-left: 5px">导出全部数据</span> <SvgIcon size="20" name="download" /><span style="margin-left: 5px">导出全部数据</span>
</li> </li>
<!-- <li> <li>
<SvgIcon size="20" name="look" /><span style="margin-left: 5px">查看导入记录</span> <SvgIcon size="20" name="look" /><span style="margin-left: 5px">查看导入记录</span>
</li> --> </li>
</ul> </ul>
</n-popover> </n-popover>
</div> </div>
@ -1076,4 +1076,7 @@ defineExpose({
:deep(.n-data-table .n-data-table-td.n-data-table-td--fixed-right) { :deep(.n-data-table .n-data-table-td.n-data-table-td--fixed-right) {
z-index: 100 !important; z-index: 100 !important;
} }
:deep(.n-data-table-th__title) {
color: #333;
}
</style> </style>

@ -70,10 +70,8 @@ const showSearch = ref(false)
function setShowSearch(value: boolean) { function setShowSearch(value: boolean) {
if (!value) { if (!value) {
console.log('setShowSearch', value)
search.value = '' search.value = ''
taskListRef.value.search('') taskListRef.value.search('')
return
} }
showSearch.value = value showSearch.value = value
} }

@ -240,7 +240,9 @@ async function handleDragEnd(event, item) {
const res = await dubiousfileyd({ pictureid: item.pictureId }) const res = await dubiousfileyd({ pictureid: item.pictureId })
if (res.code === 'OK') { if (res.code === 'OK') {
message.success('加入成功') message.success('加入成功')
setBatch(false)
getTableData() getTableData()
getImgList()
} }
else { else {
message.error(res.message) message.error(res.message)
@ -355,6 +357,11 @@ async function getDetail() {
getImgList() getImgList()
} }
function notPassSuccess(param) {
batchModalRef.value.reload()
reloadList(param, '不通过')
}
function reloadList(param, text) { function reloadList(param, text) {
// //
const id = currentTaskId() const id = currentTaskId()
@ -643,10 +650,8 @@ function switchBatch() {
</n-tab-pane> </n-tab-pane>
</n-tabs> </n-tabs>
<NotPassed <NotPassed
ref="notPassModalRef" @success="(param) => { ref="notPassModalRef"
batchModalRef.value.reload() @success="notPassSuccess"
reloadList(param, '不通过')
}"
/> />
<BatchModal <BatchModal
ref="batchModalRef" ref="batchModalRef"

@ -100,15 +100,17 @@ watch(viewMode, () => {
let canloadMore = true let canloadMore = true
useInfiniteScroll( // useInfiniteScroll(
el as any, // el as any,
() => { // () => {
loadMore() // console.log(123456)
}, // loadMore()
{ distance: 10, canLoadMore: () => canloadMore }, // },
) // { distance: 10, canLoadMore: () => canloadMore },
// )
async function loadMore() { async function loadMore() {
console.log('loadMore')
if (loading.value || el.value == null) if (loading.value || el.value == null)
return return
@ -285,8 +287,12 @@ const showActions = computed(() => {
function setBatch(value: boolean) { function setBatch(value: boolean) {
batch.value = value batch.value = value
if (value === false) if (value === false) {
selectIds.value.length = 0 selectIds.value = []
listData.value.forEach((item) => {
item.checked = false
})
}
} }
function reject() { function reject() {
@ -321,6 +327,7 @@ async function refreshHandler() {
taskDetailInfo.value = await getTaskDetailInfo(taskId.value, '') taskDetailInfo.value = await getTaskDetailInfo(taskId.value, '')
nextTick(() => { nextTick(() => {
setTimeout(() => {
useInfiniteScroll( useInfiniteScroll(
el as any, el as any,
() => { () => {
@ -328,6 +335,7 @@ async function refreshHandler() {
}, },
{ distance: 10, canLoadMore: () => canloadMore }, { distance: 10, canLoadMore: () => canloadMore },
) )
}, 300)
}) })
} }
@ -343,8 +351,31 @@ function switchBatch() {
function reload() { function reload() {
selectIds.value = [] selectIds.value = []
setBatch(false)
refreshHandler()
}
function sortHandler(orderby: 'similarityScore' | 'createdate') {
sortBy.orderName = orderby
sortBy.orderType = sortBy.orderType === 'asc' ? 'desc' : 'asc'
refreshHandler() refreshHandler()
} }
// const gridHeight = computed(() => {
// let height = ''
// if (viewMode.value === 'masonry')
// height = ''
// else if (viewMode.value === 'horizontalVersion')
// height = '145px'
// else if (viewMode.value === 'verticalVersion')
// height = '300px'
// else if (viewMode.value === '3:4')
// height = '240px'
// return height
// })
defineExpose({ defineExpose({
showModal, showModal,
reload, reload,
@ -364,10 +395,10 @@ defineExpose({
<div class="wrapper"> <div class="wrapper">
<div class="wrapper-m32"> <div class="wrapper-m32">
<SvgIcon name="task-batch" size="16" /> <SvgIcon name="task-batch" size="16" />
<span style="margin-left: 8px;">任务审批</span> <span style="margin-left: 8px;color: #666;">任务审批</span>
</div> </div>
<div class="wrapper-title wrapper-m32"> <div class="wrapper-title wrapper-m32">
<span>任务ID:{{ taskDetailInfo.fromtaskname }}</span> <span style="color: #333;">任务ID:{{ taskDetailInfo.fromtaskname }}</span>
<SvgIcon size="22" class="forward" name="arrow-left" @click="backHandler" /> <SvgIcon size="22" class="forward" name="arrow-left" @click="backHandler" />
<SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" /> <SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" />
</div> </div>
@ -422,7 +453,7 @@ defineExpose({
<div class="wrapper-content"> <div class="wrapper-content">
<div class="wrapper-content-form wrapper-m32"> <div class="wrapper-content-form wrapper-m32">
<div> <div>
<n-popselect v-model:value="timeRange" :options="timeOptions" trigger="click" @change="onChange"> <!-- <n-popselect v-model:value="timeRange" :options="timeOptions" trigger="click" @change="onChange">
<div class="wrapper-content-form-dropdown"> <div class="wrapper-content-form-dropdown">
<span>{{ timeLabel || '时间模式' }}</span> <span>{{ timeLabel || '时间模式' }}</span>
<SvgIcon class="wrapper-content-form-dropdown-gap" name="arrow-botton" size="14" /> <SvgIcon class="wrapper-content-form-dropdown-gap" name="arrow-botton" size="14" />
@ -433,7 +464,22 @@ defineExpose({
<span>{{ viewLabel || '视图模式' }}</span> <span>{{ viewLabel || '视图模式' }}</span>
<SvgIcon class="wrapper-content-form-gap" name="arrow-botton" size="14" /> <SvgIcon class="wrapper-content-form-gap" name="arrow-botton" size="14" />
</div> </div>
</n-popselect> -->
<n-popselect v-model:value="viewMode" :options="viewOptions" trigger="click">
<div class="dropdown">
<!-- <span>{{ viewLabel || '请选择' }}</span> -->
<span>视图</span>
<SvgIcon class="gap" name="arrow-botton" size="14" />
</div>
</n-popselect> </n-popselect>
<div style="margin-left: 15px;cursor: pointer;color:#323233" @click="sortHandler('createdate')">
<span>时间排序</span>
<SvgIcon style="margin-left: 8px;" name="sort" size="12" />
</div>
<div style="margin-left: 15px;cursor: pointer;color:#323233" @click="sortHandler('similarityScore')">
<span>相似度排序</span>
<SvgIcon style="margin-left: 8px;" name="sort" size="12" />
</div>
</div> </div>
<div> <div>
<div v-show="!showActions" class="wrapper-content-form-button" @click="switchBatch()"> <div v-show="!showActions" class="wrapper-content-form-button" @click="switchBatch()">
@ -466,10 +512,15 @@ defineExpose({
class="grid-item" class="grid-item"
> >
<div class="img-wrap"> <div class="img-wrap">
<img <!-- <img
class="wrapper-content-item-img" class="wrapper-content-item-img"
:class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl" :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
> > -->
<n-image
ref="imageRef"
class="img"
:class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" :src="item.imgUrl"
/>
<div class="small-mark" /> <div class="small-mark" />
<div class="time"> <div class="time">
<div v-if="item.photoDateTimestamp" class="time-item"> <div v-if="item.photoDateTimestamp" class="time-item">
@ -659,7 +710,7 @@ defineExpose({
margin-bottom: 10px; margin-bottom: 10px;
th { th {
color: #d7d7d7; color: #999999;
text-align: left; text-align: left;
} }
@ -733,6 +784,23 @@ defineExpose({
} }
} }
.img {
border-radius: 7px;
display: block;
height: calc(100% - 25px);
}
.img-full {
width: 100%;
overflow: hidden;
::v-deep(img) {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.grid-item { .grid-item {
width: 214px; width: 214px;
padding: 16px; padding: 16px;

Loading…
Cancel
Save