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

审核UI

Browse Source
pull/1/head
Dragon 1 year ago
parent b0b80ec70a
commit a3f9507700
3 changed files with 139 additions and 109 deletions
Show Stats Download Patch File Download Diff File

150
src/views/task/aside/Aside.vue
Unescape View File

@ -1,87 +1,85 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useTaskStore } from "@/store/modules/task"; import { debounce } from 'lodash-es'
import { debounce } from "lodash-es"; import { computed, onMounted, ref, shallowRef, unref, watch } from 'vue'
import { computed, onMounted, ref, unref, watch, shallowRef } from "vue"; import CustomFieldModal from '../modal/CustomFieldModal.vue'
import CustomFieldModal from "../modal/CustomFieldModal.vue"; import AdvanceFilter from '../../home/aside/comp/AdvanceFilter.vue'
import type { AsideEntity } from "@/config/aside";
import { useUser } from "@/store/modules/user";
import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter";
import TaskList from "./TaskList.vue";
import AdvanceFilter from "../../home/aside/comp/AdvanceFilter.vue";
import { import {
CustomFilterModalVue,
FilterModalVue, FilterModalVue,
NewFilterModalVue, NewFilterModalVue,
} from "../../home/aside/comp/modals"; } from '../../home/aside/comp/modals'
import TaskList from './TaskList.vue'
import type { AsideEntity } from '@/config/aside'
import { useUser } from '@/store/modules/user'
import { getAllfieldList, getfieldList } from '@/api/home/filter'
import emitter from "@/utils/mitt"; import { useTaskStore } from '@/store/modules/task'
const CustomFieldModalRef = ref(null); import emitter from '@/utils/mitt'
const collapse = ref(false);
const taskStore = useTaskStore(); const CustomFieldModalRef = ref(null)
const taskListRef = ref<HTMLDivElement | null>(null); const collapse = ref(false)
const taskStore = useTaskStore()
const taskListRef = ref<HTMLDivElement | null>(null)
// 展示字段 // 展示字段
const showFieldList = ref<any[]>([]); const showFieldList = ref<any[]>([])
function collapseHandler() { function collapseHandler() {
collapse.value = !collapse.value; collapse.value = !collapse.value
} }
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 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
}); })
watch( watch(
() => taskStore.immersion, () => taskStore.immersion,
() => { () => {
collapse.value = true; collapse.value = true
} },
); )
function showFilter() { function showFilter() {
const modal = unref(CustomFieldModalRef)! as any; const modal = unref(CustomFieldModalRef)! as any
modal.showModal(); modal.showModal()
} }
const showSearch = ref(false); const showSearch = ref(false)
function setShowSearch(value: boolean) { function setShowSearch(value: boolean) {
showSearch.value = value; showSearch.value = value
} }
const inputHandler = debounce((word) => { const inputHandler = debounce((word) => {
(taskListRef.value as any).search(word); (taskListRef.value as any).search(word)
}, 500); }, 500)
const reviewType = 2; const reviewType = 2
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
res = await getfieldList(reviewType, userInfo.id); //当前用户选择的项目 res = await getfieldList(reviewType, userInfo.id) // 当前用户选择的项目
const useList = res.data; const useList = res.data
/** /**
* name 标题 * name 标题
* id 键值 * id 键值
@ -89,60 +87,61 @@ async function getshowFieldList() {
* checked 是否选中 * checked 是否选中
*/ */
if (useList.userFieldFixed) { if (useList.userFieldFixed) {
useList.userFieldFixed?.split(",").map((v) => { useList.userFieldFixed?.split(',').map((v) => {
let item = allList.find((v2) => v2.name == v); let item = allList.find(v2 => v2.name == v)
if (item) { if (item) {
item = { item = {
name: item.fieldDesc, name: item.fieldDesc,
id: item.name, id: item.name,
fix: item.isrequired == 2, fix: item.isrequired == 2,
checked: true, checked: true,
}; }
showFieldList.value.push(item); showFieldList.value.push(item)
} }
}); })
} else { }
else {
// 若为首次获取 则赋默认值 // 若为首次获取 则赋默认值
allList.map((v) => { allList.map((v) => {
if (v.isrequired == 2) { if (v.isrequired == 2) {
let item = { const item = {
name: v.fieldDesc, name: v.fieldDesc,
id: v.name, id: v.name,
fix: v.isrequired == 2, fix: v.isrequired == 2,
checked: true, checked: true,
}; }
showFieldList.value.push(item); showFieldList.value.push(item)
} }
}); })
} }
} }
onMounted(() => { onMounted(() => {
getshowFieldList(); getshowFieldList()
}); })
// 滚动容器，让key对应模块处于可视区域 // 滚动容器，让key对应模块处于可视区域
function scrollHandler(key: string) { function scrollHandler(key: string) {
const element = document.querySelector(`#${key}`); const element = document.querySelector(`#${key}`)
element?.scrollIntoView(true); element?.scrollIntoView(true)
} }
// 选择某个过滤配置，刷新图片墙 // 选择某个过滤配置，刷新图片墙
function filterHandler(searchId: string) { function filterHandler(searchId: string) {
emitter.emit("filter", searchId); emitter.emit('filter', searchId)
} }
function showModal(modalRef: any) { function showModal(modalRef: any) {
const modal = unref(modalRef)! as any; const modal = unref(modalRef)! as any
modal.showModal(); modal.showModal()
} }
// 当前显示的模块，按照数组顺序显示 // 当前显示的模块，按照数组顺序显示
const showItems = shallowRef<{ key: string; config: AsideEntity }[]>([]); const showItems = shallowRef<{ key: string, config: AsideEntity }[]>([])
const filterModalRef = ref(null); const filterModalRef = ref(null)
const newFilterModalRef = ref(null); const newFilterModalRef = ref(null)
const customModalRef = ref(null); const customModalRef = ref(null)
function editFilter(filter: any) { function editFilter(filter: any) {
const modal = unref(newFilterModalRef)! as any; const modal = unref(newFilterModalRef)! as any
modal.showModal(); modal.showModal()
modal.edit(filter); modal.edit(filter)
} }
</script> </script>
@ -209,14 +208,14 @@ function editFilter(filter: any) {
</div> </div>
<TaskList <TaskList
ref="taskListRef" ref="taskListRef"
:showFieldList="showFieldList" :show-field-list="showFieldList"
style="height: calc(100vh - 146px)" style="height: calc(100vh - 146px)"
class="work-sheet-list" class="work-sheet-list"
/> />
<CustomFieldModal <CustomFieldModal
ref="CustomFieldModalRef" ref="CustomFieldModalRef"
:reviewType="reviewType" :review-type="reviewType"
@onOk="getshowFieldList" @on-ok="getshowFieldList"
/> />
<!-- 过滤列表 --> <!-- 过滤列表 -->
<FilterModalVue <FilterModalVue
@ -243,6 +242,7 @@ function editFilter(filter: any) {
padding: 12px 16px; padding: 12px 16px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border-bottom: 1px solid #e8e8e8;
.warpper { .warpper {
display: flex; display: flex;

86
src/views/task/aside/ListItem.vue
Unescape View File

@ -1,8 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { format } from "date-fns"; import { format } from 'date-fns'
import { computed } from "vue"; import { computed } from 'vue'
defineOptions({ name: "ListItem" }); defineOptions({ name: 'ListItem' })
const props = defineProps({ const props = defineProps({
selected: { selected: {
@ -14,23 +14,21 @@ const props = defineProps({
required: true, required: true,
}, },
showFieldList: { showFieldList: {
type: Array, type: Array as any,
default: () => [], default: () => [],
}, },
}); })
const svgName = computed(() => { const svgName = computed(() => {
return props.selected ? "task-select" : "task"; return props.selected ? 'task-select' : 'task'
}); })
</script> </script>
<template> <template>
<div class="list-item" :class="{ 'list-item-selected': selected }"> <div class="list-item" :class="{ 'list-item-selected': selected }">
<div v-for="(item, index) in showFieldList" :key="index"> <div v-for="(item, index) in showFieldList" :key="index">
<div v-if="item.id == 'fromtaskname'" class="list-item-header"> <div v-if="item.id === 'fromsourceid'" class="list-item-header">
<div style="display: flex"> <div class="id-wrap">
<SvgIcon :name="svgName" size="28" /> <SvgIcon :name="svgName" size="28" />
<span <span
class="list-item-header-name" class="list-item-header-name"
@ -41,26 +39,25 @@ const svgName = computed(() => {
</div> </div>
<!-- <SvgIcon v-show="selected" size="14" name="more-ver" /> --> <!-- <SvgIcon v-show="selected" size="14" name="more-ver" /> -->
</div> </div>
<ul class="list-item-detail" v-else> <ul v-else class="list-item-detail">
<li v-if="item.id == 'statshisText'"> <li v-if="item.id === 'statshisText'">
审批状态：<span 审批状态：<span
class="list-item-status" class="list-item-status"
:class=" :class="
listItem.statshisText == '通过' listItem.statshisText === '通过'
? 'list-item-success' ? 'list-item-success'
: listItem.statshisText == '不通过' : listItem.statshisText === '不通过'
? 'list-item-error' ? 'list-item-error'
: 'list-item-watting' : 'list-item-watting'
" "
>{{ listItem.statshisText }}</span >{{ listItem.statshisText }}</span>
> </li>
<li v-else-if="item.id === 'createdate'">
提交时间：{{ format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") }}
</li>
<li v-else>
<span class="label">{{ item.name }}：</span>{{ listItem[item.id] }}
</li> </li>
<li v-else-if="item.id == 'createdate'">
提交时间：{{ format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") }}
</li>
<li v-else>
{{ item.name }}：{{ listItem[item.id] }}
</li>
</ul> </ul>
</div> </div>
@ -109,6 +106,24 @@ const svgName = computed(() => {
display: flex; display: flex;
align-items: center; align-items: center;
.id-wrap{
display: flex;
align-items: center;
margin-bottom: 6px
}
.list-item-header-name{
width: 226px;
font-size: 14px;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: 500;
color: #333333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0;
}
&-name { &-name {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
@ -118,12 +133,21 @@ const svgName = computed(() => {
} }
&-selected { &-selected {
color: #507afd; color: #507afd!important;
} }
} }
.label{
font-size: 13px;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
text-align: left;
color: #666666;
line-height: 18px;
}
&-selected { &-selected {
background-color: #f2f5fe; background: rgba(68,113,232,0.07);
} }
&-status { &-status {

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

@ -249,7 +249,6 @@ function backHandler() {
async function handleDragEnd(event, item) { async function handleDragEnd(event, item) {
// 可以在这里添加拖拽结束后的逻辑 // 可以在这里添加拖拽结束后的逻辑
const flag = taskStore.getInFile const flag = taskStore.getInFile
console.log(item)
if (flag) { if (flag) {
const res = await dubiousfileyd({ pictureid: item.pictureid }) const res = await dubiousfileyd({ pictureid: item.pictureid })
if (res.code === 'OK') { if (res.code === 'OK') {
@ -522,7 +521,7 @@ function getPercent(pictureid: string) {
</n-grid> </n-grid>
</div> </div>
<div class="time"> <div class="time">
<SvgIcon color="#FFF" size="16" name="time" /> <SvgIcon class="svg-time" color="#FFF" size="16" name="time" />
<span>{{ formatToDateHMS(taskDetailInfo.createdate || 0) }}</span> <span>{{ formatToDateHMS(taskDetailInfo.createdate || 0) }}</span>
</div> </div>
<div style="display: none"> <div style="display: none">
@ -734,9 +733,16 @@ function getPercent(pictureid: string) {
z-index: 3; z-index: 3;
left: 2%; left: 2%;
bottom: 2%; bottom: 2%;
color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: 500;
color: #ffffff;
.svg-time{
margin-right: 5px
}
} }
.gi1 { .gi1 {

Write Preview
Loading…
Cancel
Save