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

feat: 任务审批自定义字段逻辑修改及图审主图ui修改 #165

Merged
liushilong merged 1 commits from feat/ui_task_update into test 1 year ago
Conversation 0 Commits 1 Files Changed 2
2 changed files with 549 additions and 504 deletions
Show Stats Download Patch File Download Diff File

410
src/views/task/modal/CustomFieldModal.vue
Unescape View File

@ -1,10 +1,12 @@
<script lang="ts" setup> <script lang="ts" setup>
import { cloneDeep, difference } from 'lodash-es' import { cloneDeep, difference } from "lodash-es";
import { computed, defineEmits, defineProps, onMounted, ref, watch } from 'vue' import { computed, defineEmits, defineProps, onMounted, ref, watch } from "vue";
import { VueDraggable } from 'vue-draggable-plus' import { VueDraggable } from "vue-draggable-plus";
import { getAllfieldList, getfieldList, savefield } from '@/api/home/filter' import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter";
import { workPackageMap } from '@/config/workorder' import { workPackageMap } from "@/config/workorder";
import { useUser } from '@/store/modules/user' import { useUser } from "@/store/modules/user";
import { useMessage } from "naive-ui";
const message = useMessage();
const props = defineProps({ const props = defineProps({
reviewType: { reviewType: {
@ -12,355 +14,344 @@ const props = defineProps({
default: () => 1, default: () => 1,
require: true, require: true,
}, },
}) });
const emit = defineEmits(['onOk']) const emit = defineEmits(["onOk"]);
// 左侧隐藏列表 // 左侧隐藏列表
const offList = ref<any[]>([]) const offList = ref<any[]>([]);
// 右侧显示列表 // 右侧显示列表
const onList = ref<any[]>([]) const onList = ref<any[]>([]);
// 固定默认列表 // 固定默认列表
const fixList = ref<any[]>([]) const fixList = ref<any[]>([]);
const offShowList = ref<any[]>([]) const offShowList = ref<any[]>([]);
const onShowList = ref<any[]>([]) 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() {
const keys = Object.keys(workPackageMap) const keys = Object.keys(workPackageMap);
let showList: object[] = [] let showList: object[] = [];
const hideList: object[] = [] const hideList: object[] = [];
const showStr = 'status' const showStr = "status";
const showKeys = showStr.split(',').map((key: string) => key.toLowerCase()) const showKeys = showStr.split(",").map((key: string) => key.toLowerCase());
for (const key of keys) { for (const key of keys) {
const name = workPackageMap[key]?.label const name = workPackageMap[key]?.label;
const isDefault = workPackageMap[key]?.isDefault const isDefault = workPackageMap[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: workPackageMap[key].isDefault, checked: workPackageMap[key].isDefault,
}) });
} }
} }
showList = showKeys.reduce((acc, key) => { showList = showKeys.reduce((acc, key) => {
const config = { const config = {
id: key, id: key,
name: workPackageMap[key].label || '未配置', name: workPackageMap[key].label || "未配置",
fix: workPackageMap[key].isDefault, fix: workPackageMap[key].isDefault,
} };
return [...acc, config] return [...acc, config];
}, []) }, []);
const fixedList = generateDefaultList() const fixedList = generateDefaultList();
hideList.unshift(...fixedList) hideList.unshift(...fixedList);
showList.unshift(...fixedList) showList.unshift(...fixedList);
onList.value = showList onList.value = showList;
offList.value = hideList offList.value = hideList;
return { showList, hideList } return { showList, hideList };
} }
function generateDefaultList() { function generateDefaultList() {
return Object.keys(workPackageMap).reduce((acc, key) => { return Object.keys(workPackageMap).reduce((acc, key) => {
const { label, isDefault } = workPackageMap[key] const { label, isDefault } = workPackageMap[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 {
else { return acc;
return acc
} }
}, []) }, []);
} }
const show = ref(false) const show = ref(false);
const checkAll = computed(() => { const checkAll = computed(() => {
let baseNum = 0 let baseNum = 0;
offList.value.map((v) => { offList.value.map((v) => {
if (v.fix) if (v.fix) baseNum += 1;
baseNum += 1 });
}) return onList.value.length == offList.value.length - baseNum;
return onList.value.length == offList.value.length - baseNum });
})
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 userFieldFixed = '' let userFieldFixed = "";
fixList.value.map((v) => { fixList.value.map((v) => {
userFieldFixed += `${v.id},` userFieldFixed += `${v.id},`;
}) });
onList.value.map((v) => { onList.value.map((v) => {
userFieldFixed += `${v.id},` userFieldFixed += `${v.id},`;
}) });
userFieldFixed = userFieldFixed.slice(0, userFieldFixed.length - 1) userFieldFixed = userFieldFixed.slice(0, userFieldFixed.length - 1);
savefield(props.reviewType, userInfo.id, userFieldFixed) savefield(props.reviewType, userInfo.id, userFieldFixed);
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);
} }
} }
for (const item of offShowList.value) { for (const item of offShowList.value) {
if (!item.fix) if (!item.fix) item.checked = value;
item.checked = value
} }
selectIds.value = value ? ids : [] selectIds.value = value ? ids : [];
if (value) { if (value) {
offList.value.map((v) => { offList.value.map((v) => {
if (!v.checked) if (!v.checked) onList.value.push(v);
onList.value.push(v) });
}) onShowList.value = cloneDeep(onList.value);
onShowList.value = cloneDeep(onList.value) } else {
} onList.value = [];
else { onShowList.value = [];
onList.value = []
onShowList.value = []
} }
} }
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 if (index == -1 && selectIds.value.length >= 6) {
const currentIndex = offList.value.findIndex(v => v.id == item.id) item.checked = false;
offList.value[currentIndex].checked = checked message.error("自定义任务卡片字段一共勾选数量不能超过6个");
if (index === -1 && checked) return;
selectIds.value.push(item.id) }
else item.checked = checked;
selectIds.value.splice(index, 1) const currentIndex = offList.value.findIndex((v) => v.id == item.id);
offList.value[currentIndex].checked = checked;
if (index === -1 && checked) {
selectIds.value.push(item.id);
} 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,
}) });
} }
} }
onShowList.value = cloneDeep(onList.value) onShowList.value = cloneDeep(onList.value);
} } 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);
onShowList.value.splice(index, 1) onShowList.value.splice(index, 1);
index-- index--;
} }
} }
console.log(onShowList.value, list, 'onShowList') console.log(onShowList.value, list, "onShowList");
} }
}, }
) );
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;
}) });
onShowList.value = cloneDeep(onList.value) onShowList.value = cloneDeep(onList.value);
} }
function removeHandler(id: string) { function removeHandler(id: string) {
let index = onList.value.findIndex((item) => { let 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);
onShowList.value.splice(index, 1) onShowList.value.splice(index, 1);
} }
index = offList.value.findIndex(v => v.id == id) index = offList.value.findIndex((v) => v.id == id);
offList.value[index].checked = false offList.value[index].checked = false;
offShowList.value = cloneDeep(offList.value) offShowList.value = cloneDeep(offList.value);
} }
function initData() { function initData() {
offList.value = [] offList.value = [];
onList.value = [] onList.value = [];
fixList.value = [] fixList.value = [];
offShowList.value = [] offShowList.value = [];
onShowList.value = [] onShowList.value = [];
fixShowList.value = [] fixShowList.value = [];
selectIds.value = [] selectIds.value = [];
} }
async function getData(type = '') { async function getData(type = "") {
initData() initData();
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(",");
if (!type || type == 'off') { if (!type || type == "off") {
offList.value = [] offList.value = [];
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)),
} };
if (item.fix) if (item.fix) fixList.value.push(item);
fixList.value.push(item) else offList.value.push(item);
else });
offList.value.push(item) offList.value.unshift(...fixList.value);
})
offList.value.unshift(...fixList.value)
} }
if (!type || type == 'on') { if (!type || type == "on") {
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,
} };
selectIds.value.push(item.id) selectIds.value.push(item.id);
if (!item.fix) if (!item.fix) onList.value.push(item);
onList.value.push(item)
} }
}) });
} }
offShowList.value = cloneDeep(offList.value) offShowList.value = cloneDeep(offList.value);
fixShowList.value = cloneDeep(fixList.value) fixShowList.value = cloneDeep(fixList.value);
onShowList.value = cloneDeep(onList.value) onShowList.value = cloneDeep(onList.value);
} }
onMounted(() => getData()) onMounted(() => getData());
const indeterminate = computed(() => { const indeterminate = computed(() => {
let baseNum = 0 let baseNum = 0;
offList.value.map((v) => { offList.value.map((v) => {
if (v.fix) if (v.fix) baseNum += 1;
baseNum += 1 });
})
return ( return (
onShowList.value.length > 0 onShowList.value.length > 0 &&
&& offShowList.value.length - baseNum > onShowList.value.length offShowList.value.length - baseNum > onShowList.value.length
) );
}) });
function queryData(value, type) { function queryData(value, type) {
if (value) { if (value) {
if (type == 'off') { if (type == "off") {
offShowList.value = offList.value.filter(item => item.name.includes(value)) offShowList.value = offList.value.filter((item) => item.name.includes(value));
} else {
onShowList.value = onList.value.filter((item) => item.name.includes(value));
fixShowList.value = fixList.value.filter((item) => item.name.includes(value));
} }
else { } else {
onShowList.value = onList.value.filter(item => item.name.includes(value))
fixShowList.value = fixList.value.filter(item => item.name.includes(value))
}
}
else {
// getData(type); // getData(type);
if (type == 'off') { if (type == "off") {
offShowList.value = cloneDeep(offList.value) offShowList.value = cloneDeep(offList.value);
} } else {
else { onShowList.value = cloneDeep(onList.value);
onShowList.value = cloneDeep(onList.value) fixShowList.value = cloneDeep(fixList.value);
fixShowList.value = cloneDeep(fixList.value)
} }
} }
} }
@ -449,9 +440,7 @@ function queryData(value, type) {
<SvgIcon size="14px" name="magnifying-1" /> <SvgIcon size="14px" name="magnifying-1" />
</template> </template>
</n-input> </n-input>
<div class="draggable-title"> <div class="draggable-title">系统默认</div>
系统默认
</div>
<div class="draggable-ul" style="border-bottom: none"> <div class="draggable-ul" style="border-bottom: none">
<div <div
v-for="item in fixShowList" v-for="item in fixShowList"
@ -462,9 +451,7 @@ function queryData(value, type) {
<span class="ml-2">{{ item.name }}</span> <span class="ml-2">{{ item.name }}</span>
</div> </div>
</div> </div>
<div class="draggable-title" style="border-top: none"> <div class="draggable-title" style="border-top: none">自定义配置</div>
自定义配置
</div>
<VueDraggable <VueDraggable
v-model="onList" v-model="onList"
class="draggable-ul" class="draggable-ul"
@ -495,10 +482,15 @@ function 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 type="info" @click="handleSumbit"> 确定 </n-button>
确定 <n-button
</n-button> secondary
<n-button secondary style="margin-left: 15px" @click="getData();closeModal()"> style="margin-left: 15px"
@click="
getData();
closeModal();
"
>
取消 取消
</n-button> </n-button>
</div> </div>

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

@ -1,83 +1,88 @@
<script lang="ts" setup> <script lang="ts" setup>
import { audit } from '@/api/task/task' import { audit } from "@/api/task/task";
import { getPictureSimilarityList, getTaskDetailInfo } from '@/api/work/work' import { getPictureSimilarityList, getTaskDetailInfo } from "@/api/work/work";
import NotPassed from '@/components/Approval/NotPassed.vue' import NotPassed from "@/components/Approval/NotPassed.vue";
import { TASK_STATUS_OBJ } from '@/enums/index' import { TASK_STATUS_OBJ } from "@/enums/index";
import { useWorkOrder } from '@/store/modules/workOrder' import { useWorkOrder } from "@/store/modules/workOrder";
import { isEmpty } from '@/utils' import { isEmpty } from "@/utils";
import { formatToDateHMS } from '@/utils/dateUtil' import { formatToDateHMS } from "@/utils/dateUtil";
import { hideDownload } from '@/utils/image' import { hideDownload } from "@/utils/image";
import emitter from '@/utils/mitt' import emitter from "@/utils/mitt";
import { useInfiniteScroll } from '@vueuse/core' import { useInfiniteScroll } from "@vueuse/core";
import { format } from 'date-fns' import { format } from "date-fns";
import imagesloaded from 'imagesloaded' import imagesloaded from "imagesloaded";
import { clone, cloneDeep, debounce, pickBy } from 'lodash-es' import { clone, cloneDeep, debounce, pickBy } from "lodash-es";
import { useDialog, useMessage } from 'naive-ui' import { useDialog, useMessage } from "naive-ui";
import { computed, onMounted, onUnmounted, onUpdated, reactive, ref, unref, watch } from 'vue' import {
import PictureInfo from '../components/PictureInfo.vue' computed,
import ConfrimModal from '../modal/ConfrimModal.vue' onMounted,
import type { ApprovalParam, SimilarityPictureSortParam } from '/#/api' onUnmounted,
onUpdated,
const batch = ref(false) // 批量审批状态 reactive,
const selectItems = ref<any[]>([]) ref,
const message = useMessage() unref,
const dialog = useDialog() watch,
const totalCount = ref(0) } from "vue";
let _imagesload: any import PictureInfo from "../components/PictureInfo.vue";
import ConfrimModal from "../modal/ConfrimModal.vue";
import type { ApprovalParam, SimilarityPictureSortParam } from "/#/api";
const batch = ref(false); // 批量审批状态
const selectItems = ref<any[]>([]);
const message = useMessage();
const dialog = useDialog();
const totalCount = ref(0);
let _imagesload: any;
function setBatch(value: boolean) { function setBatch(value: boolean) {
if (value && batch.value) if (value && batch.value) batch.value = !value;
batch.value = !value else batch.value = value;
else
batch.value = value
if (value === false) { if (value === false) {
selectItems.value.forEach(item => (item.checked = false)) selectItems.value.forEach((item) => (item.checked = false));
selectItems.value.length = 0 selectItems.value.length = 0;
} }
} }
function onCheckChange(checked: any, item: any) { function onCheckChange(checked: any, item: any) {
const index = selectItems.value.indexOf(item) const index = selectItems.value.indexOf(item);
item.checked = checked item.checked = checked;
if (index === -1 && checked) if (index === -1 && checked) selectItems.value.push(item);
selectItems.value.push(item) else selectItems.value.splice(index, 1);
else selectItems.value.splice(index, 1)
} }
const showActions = computed(() => { const showActions = computed(() => {
return selectItems.value.length > 0 && batch return selectItems.value.length > 0 && batch;
}) });
const taskpagination = reactive({ const taskpagination = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
}) });
const sortBy: SimilarityPictureSortParam = { const sortBy: SimilarityPictureSortParam = {
orderType: 'desc', orderType: "desc",
orderName: 'similarityScore', orderName: "similarityScore",
} };
const workStore = useWorkOrder() const workStore = useWorkOrder();
const selectTask = ref<any>(null) const selectTask = ref<any>(null);
const overTask = ref<any>(null) const overTask = ref<any>(null);
const taskDetailInfo = ref<any>({}) const taskDetailInfo = ref<any>({});
const confrimModalRef = ref(null) const confrimModalRef = ref(null);
const imageRef = ref<ComponentElRef | null>() const imageRef = ref<ComponentElRef | null>();
const listData = ref<any[]>([]) const listData = ref<any[]>([]);
const loading = ref(false) const loading = ref(false);
const el = ref<HTMLDivElement | null>(null) const el = ref<HTMLDivElement | null>(null);
const selectedSortName = ref('') const selectedSortName = ref("");
const isFullScreen = ref(false) const isFullScreen = ref(false);
const notPassModalRef = ref(null) const notPassModalRef = ref(null);
const mainImageModalRef = ref(null) const mainImageModalRef = ref(null);
const wrapperListRef = ref<HTMLElement | undefined>(undefined) const wrapperListRef = ref<HTMLElement | undefined>(undefined);
let canloadMore = true let canloadMore = true;
let processItems: any[] = [] let processItems: any[] = [];
function validate(items: any[]) { function validate(items: any[]) {
if (items.length === 0) if (items.length === 0) return "至少选中一个任务";
return '至少选中一个任务'
// for (const item of items) { // for (const item of items) {
// const { iztrueorfalse, history, states } = item // const { iztrueorfalse, history, states } = item
@ -91,164 +96,160 @@ function validate(items: any[]) {
// return '审批状态不合法' // return '审批状态不合法'
// } // }
return null return null;
} }
function forwardHandler() { function forwardHandler() {
workStore.forward() workStore.forward();
} }
function backHandler() { function backHandler() {
workStore.back() workStore.back();
} }
function reset() { function reset() {
taskpagination.pageNo = 0 taskpagination.pageNo = 0;
taskpagination.pageSize = 20 taskpagination.pageSize = 20;
listData.value.length = 0 listData.value.length = 0;
loading.value = false loading.value = false;
canloadMore = true canloadMore = true;
} }
console.log(listData) console.log(listData);
async function refreshHandler() { async function refreshHandler() {
reset() reset();
useInfiniteScroll( useInfiniteScroll(
el as any, el as any,
() => { () => {
loadMore() loadMore();
}, },
{ distance: 10, canLoadMore: () => canloadMore }, { distance: 10, canLoadMore: () => canloadMore }
) );
} }
async function loadMore() { async function loadMore() {
if (loading.value || el.value == null) if (loading.value || el.value == null) return;
return
const more = await featchList() const more = await featchList();
listData.value.push(...more) listData.value.push(...more);
} }
async function featchList() { async function featchList() {
loading.value = true loading.value = true;
try { try {
taskpagination.pageNo += 1 taskpagination.pageNo += 1;
const { data, total, pageCount } = await getPictureSimilarityList({ const { data, total, pageCount } = await getPictureSimilarityList({
...taskpagination, ...taskpagination,
...sortBy, ...sortBy,
checkDuplicateId: workStore.activeId, checkDuplicateId: workStore.activeId,
pictureId: taskDetailInfo.value.id, pictureId: taskDetailInfo.value.id,
}) });
totalCount.value = total totalCount.value = total;
canloadMore = pageCount >= taskpagination.pageNo && pageCount > 0 canloadMore = pageCount >= taskpagination.pageNo && pageCount > 0;
return data return data;
} } catch (error) {
catch (error) { canloadMore = false;
canloadMore = false return [];
return []
} }
} }
const layout = debounce(() => { const layout = debounce(() => {
if (el.value == null) if (el.value == null) return;
return
_imagesload = imagesloaded('.grid-item') _imagesload = imagesloaded(".grid-item");
_imagesload.on('done', (instance) => { _imagesload.on("done", (instance) => {
if (!el.value) if (!el.value) return;
return loading.value = false;
loading.value = false });
})
_imagesload.on('fail', (instance) => { _imagesload.on("fail", (instance) => {
message.error('图片错误') message.error("图片错误");
loading.value = false loading.value = false;
}) });
}, 300) }, 300);
const fullscreenStyles = computed<any>(() => ({ const fullscreenStyles = computed<any>(() => ({
width: isFullScreen.value ? '100vw' : '', width: isFullScreen.value ? "100vw" : "",
height: isFullScreen.value ? '100vh' : '', height: isFullScreen.value ? "100vh" : "",
position: isFullScreen.value ? 'fixed' : '', position: isFullScreen.value ? "fixed" : "",
top: isFullScreen.value ? '0' : '', top: isFullScreen.value ? "0" : "",
left: isFullScreen.value ? '0' : '', left: isFullScreen.value ? "0" : "",
zIndex: isFullScreen.value ? '100' : '', zIndex: isFullScreen.value ? "100" : "",
})) }));
// 切换全屏状态 // 切换全屏状态
function toggleFullScreen() { function toggleFullScreen() {
isFullScreen.value = !isFullScreen.value isFullScreen.value = !isFullScreen.value;
} }
onUpdated(() => { onUpdated(() => {
layout() layout();
}) });
watch( watch(
() => workStore.activeId, () => workStore.activeId,
async (newValue, oldValue) => { async (newValue, oldValue) => {
const packageid = workStore.getActiveId const packageid = workStore.getActiveId;
if (isEmpty(packageid)) { if (isEmpty(packageid)) {
listData.value.length = 0 listData.value.length = 0;
totalCount.value = 0 totalCount.value = 0;
taskDetailInfo.value = {} taskDetailInfo.value = {};
return return;
} }
queryDetail(packageid) queryDetail(packageid);
// const res = await getPackageTaskList(newValue, packagepagination); // const res = await getPackageTaskList(newValue, packagepagination);
// const { data } = res; // const { data } = res;
// taskList.value = data; // taskList.value = data;
// if (taskList.value.length > 0) handleSelect(taskList.value[0]); // 暂时注释掉 // if (taskList.value.length > 0) handleSelect(taskList.value[0]); // 暂时注释掉
}, }
) );
const packageName = computed(() => { const packageName = computed(() => {
const index = workStore.getCurrentIndex const index = workStore.getCurrentIndex;
return workStore.getOrderList[index]?.name || '' return workStore.getOrderList[index]?.name || "";
}) });
async function queryDetail(checkDuplicateId: any) { async function queryDetail(checkDuplicateId: any) {
taskDetailInfo.value = await getTaskDetailInfo(checkDuplicateId) taskDetailInfo.value = await getTaskDetailInfo(checkDuplicateId);
const packageid = workStore.getActiveId const packageid = workStore.getActiveId;
if (isEmpty(packageid)) { if (isEmpty(packageid)) {
listData.value.length = 0 listData.value.length = 0;
totalCount.value = 0 totalCount.value = 0;
return return;
} }
refreshHandler() refreshHandler();
} }
// 点击任务包图片，查看详情 // 点击任务包图片，查看详情
async function handleSelect(item: any) { async function handleSelect(item: any) {
// taskDetailInfo.value = await getTaskDetailInfo(item.id) // taskDetailInfo.value = await getTaskDetailInfo(item.id)
const packageid = workStore.getActiveId const packageid = workStore.getActiveId;
if (isEmpty(packageid)) { if (isEmpty(packageid)) {
listData.value.length = 0 listData.value.length = 0;
totalCount.value = 0 totalCount.value = 0;
} }
// refreshHandler(); // refreshHandler();
} }
async function sortHandler(orderby: 'similarityScore' | 'createdate') { async function sortHandler(orderby: "similarityScore" | "createdate") {
selectedSortName.value = orderby selectedSortName.value = orderby;
sortBy.orderName = orderby sortBy.orderName = orderby;
sortBy.orderType = sortBy.orderType === 'asc' ? 'desc' : 'asc' sortBy.orderType = sortBy.orderType === "asc" ? "desc" : "asc";
refreshHandler() refreshHandler();
} }
const propertys = computed(() => { const propertys = computed(() => {
const { ocrPicture } = taskDetailInfo.value const { ocrPicture } = taskDetailInfo.value;
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;
}) });
function overTaskHandelr(item: any) { function overTaskHandelr(item: any) {
// console.log(item, 'item') // console.log(item, 'item')
// if (item?.historyStates === 2 || item?.historyStates == 3) { // if (item?.historyStates === 2 || item?.historyStates == 3) {
@ -256,226 +257,232 @@ function overTaskHandelr(item: any) {
// return // return
// } // }
if (validate([item]) == null && batch.value === false) if (validate([item]) == null && batch.value === false) overTask.value = item;
overTask.value = item
} }
function leaveTaskHandler() { function leaveTaskHandler() {
overTask.value = null overTask.value = null;
} }
function onEsc() { function onEsc() {
if (isFullScreen.value && !(document.querySelector('.n-modal-container'))) if (isFullScreen.value && !document.querySelector(".n-modal-container"))
isFullScreen.value = false isFullScreen.value = false;
} }
const resizeImage = () => {
const container = document.querySelector(".image-container")!;
const containerWidth = container.offsetWidth;
const containerHeight = container.offsetHeight;
};
onUnmounted(() => { onUnmounted(() => {
workStore.reset() workStore.reset();
document.removeEventListener('keydown', onEsc) document.removeEventListener("keydown", onEsc);
}) });
onMounted(() => { onMounted(() => {
document.addEventListener('keydown', onEsc) document.addEventListener("keydown", onEsc);
}) window.addEventListener("resize", resizeImage);
});
function immersionHandler() { function immersionHandler() {
// class="wrapper" // class="wrapper"
// workStore.updateImmersion(); // workStore.updateImmersion();
toggleFullScreen() toggleFullScreen();
} }
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() {
overTask.value = null overTask.value = null;
} }
function previewHandler(event: MouseEvent) { function previewHandler(event: MouseEvent) {
event.stopImmediatePropagation() event.stopImmediatePropagation();
event.stopPropagation() event.stopPropagation();
if (imageRef.value && (imageRef.value as any).src) if (imageRef.value && (imageRef.value as any).src)
(imageRef.value as any).mergedOnClick() (imageRef.value as any).mergedOnClick();
} }
function rejectHandler() { function rejectHandler() {
const modal = unref(notPassModalRef)! as any const modal = unref(notPassModalRef)! as any;
modal.showModal(selectItems.value) modal.showModal(selectItems.value);
} }
function singleRejectHandler(item) { function singleRejectHandler(item) {
const modal = unref(notPassModalRef)! as any const modal = unref(notPassModalRef)! as any;
modal.showModal([item]) modal.showModal([item]);
} }
function reject(idOrDesc: string, backId: string, isOther: boolean) { function reject(idOrDesc: string, backId: string, isOther: boolean) {
const formIds: string[] = processItems.map(item => item.id) const formIds: string[] = processItems.map((item) => item.id);
const taskIds: string[] = processItems.map(item => item.taskId) const taskIds: string[] = processItems.map((item) => item.taskId);
const tasknames: string[] = processItems.map(item => item.taskname) const tasknames: string[] = processItems.map((item) => item.taskname);
const param: ApprovalParam = { const param: ApprovalParam = {
formid: formIds, formid: formIds,
taskId: taskIds, taskId: taskIds,
approvd: false, approvd: false,
taskComment: idOrDesc, taskComment: idOrDesc,
taskname: isOther ? tasknames : ['其他'], taskname: isOther ? tasknames : ["其他"],
} };
doAudit(param) doAudit(param);
} }
function handleRejectMainImage() { function handleRejectMainImage() {
const modal = unref(mainImageModalRef)! as any const modal = unref(mainImageModalRef)! as any;
const params = cloneDeep(taskDetailInfo.value) const params = cloneDeep(taskDetailInfo.value);
params.id = params.taskchildpictureid params.id = params.taskchildpictureid;
modal.showModal([params]) modal.showModal([params]);
} }
async function reloadDetailInfo() { async function reloadDetailInfo() {
const packageid = workStore.getActiveId const packageid = workStore.getActiveId;
taskDetailInfo.value = await getTaskDetailInfo(packageid) taskDetailInfo.value = await getTaskDetailInfo(packageid);
} }
function handleApproveMainImage(items?: any) { function handleApproveMainImage(items?: any) {
let cloneItem: any let cloneItem: any;
if (overTask.value) { if (overTask.value) {
cloneItem = clone(overTask.value) cloneItem = clone(overTask.value);
cloneItem.id = cloneItem.taskchildpictureid cloneItem.id = cloneItem.taskchildpictureid;
processItems = [cloneItem] processItems = [cloneItem];
} }
const msg = validate(processItems) const msg = validate(processItems);
if (msg !== null) { if (msg !== null) {
message.error(msg) message.error(msg);
return return;
} }
const list: any = [] const list: any = [];
processItems.forEach((item) => { processItems.forEach((item) => {
list.push({ list.push({
formId: item.id, formId: item.id,
taskId: item.taskId, taskId: item.taskId,
taskName: item.fromTaskName, taskName: item.fromTaskName,
}) });
}) });
const param = { const param = {
result: true, result: true,
comment: '', comment: "",
disposeType: '', disposeType: "",
disposeTypeId: '', disposeTypeId: "",
failCauseId: '', failCauseId: "",
failCauseName: '', failCauseName: "",
flowTaskInfoList: list, flowTaskInfoList: list,
} };
dialog.info({ dialog.info({
title: '确认提示', title: "确认提示",
content: '确认给该任务审批为【通过】吗?', content: "确认给该任务审批为【通过】吗?",
positiveText: '确定', positiveText: "确定",
negativeText: '取消', negativeText: "取消",
onPositiveClick: () => { onPositiveClick: () => {
audit(param).then(async (res) => { audit(param).then(async (res) => {
const { code } = res const { code } = res;
if (code === 'OK') { if (code === "OK") {
message.info(res.message) message.info(res.message);
const packageid = workStore.getActiveId const packageid = workStore.getActiveId;
taskDetailInfo.value = await getTaskDetailInfo(packageid) taskDetailInfo.value = await getTaskDetailInfo(packageid);
} else {
message.error(res.message);
} }
else { message.error(res.message) } });
})
}, },
onNegativeClick: () => {}, onNegativeClick: () => {},
}) });
} }
function approvalHandler(items?: any) { function approvalHandler(items?: any) {
let cloneItem: any let cloneItem: any;
if (batch.value) { if (batch.value) {
processItems = selectItems.value processItems = selectItems.value;
} } else if (overTask.value) {
else if (overTask.value) { cloneItem = clone(overTask.value);
cloneItem = clone(overTask.value) processItems = [cloneItem];
processItems = [cloneItem]
} }
// 任务包图片 => 点击 => 通过/不通过按钮 // 任务包图片 => 点击 => 通过/不通过按钮
if (items !== undefined && !(items instanceof PointerEvent)) if (items !== undefined && !(items instanceof PointerEvent)) processItems = [items];
processItems = [items]
const msg = validate(processItems) const msg = validate(processItems);
if (msg !== null) { if (msg !== null) {
message.error(msg) message.error(msg);
return return;
} }
const list: any = [] const list: any = [];
processItems.forEach((item) => { processItems.forEach((item) => {
list.push({ list.push({
formId: item.id, formId: item.id,
taskId: item.taskId, taskId: item.taskId,
taskName: item.fromTaskName, taskName: item.fromTaskName,
}) });
}) });
const param = { const param = {
result: true, result: true,
comment: '', comment: "",
disposeType: '', disposeType: "",
disposeTypeId: '', disposeTypeId: "",
failCauseId: '', failCauseId: "",
failCauseName: '', failCauseName: "",
flowTaskInfoList: list, flowTaskInfoList: list,
} };
dialog.info({ dialog.info({
title: '确认提示', title: "确认提示",
content: '确认给该任务审批为【通过】吗?', content: "确认给该任务审批为【通过】吗?",
positiveText: '确定', positiveText: "确定",
negativeText: '取消', negativeText: "取消",
onPositiveClick: () => { onPositiveClick: () => {
doAudit(param) doAudit(param);
}, },
onNegativeClick: () => {}, onNegativeClick: () => {},
}) });
} }
function doAudit(param: any) { function doAudit(param: any) {
audit(param).then((res) => { audit(param).then((res) => {
const { code } = res const { code } = res;
setBatch(false) setBatch(false);
if (code === 'OK') { if (code === "OK") {
message.info(res.message) message.info(res.message);
emitter.emit('refresh') emitter.emit("refresh");
refreshHandler() refreshHandler();
} else {
message.error(res.message);
} }
else { message.error(res.message) } });
})
} }
function reloadList() { function reloadList() {
setBatch(false) setBatch(false);
refreshHandler() refreshHandler();
} }
function handleRejectdubiousfileyd() { function handleRejectdubiousfileyd() {
dialog.info({ dialog.info({
title: '确认提示', title: "确认提示",
content: '确认将图片移入可疑文件夹吗?', content: "确认将图片移入可疑文件夹吗?",
positiveText: '确定', positiveText: "确定",
negativeText: '取消', negativeText: "取消",
onPositiveClick: () => { onPositiveClick: () => {
audit(param).then(async (res) => { audit(param).then(async (res) => {
const { code } = res const { code } = res;
if (code === 'OK') { if (code === "OK") {
dubiousfileyd(taskDetailInfo.value.pictureId).then(() => { dubiousfileyd(taskDetailInfo.value.pictureId).then(() => {
refreshHandler() refreshHandler();
}) });
} else {
message.error(res.message);
} }
else { message.error(res.message) } });
})
}, },
onNegativeClick: () => { }, onNegativeClick: () => {},
}) });
} }
defineExpose({ defineExpose({
queryDetail, queryDetail,
}) });
</script> </script>
<template> <template>
@ -545,23 +552,28 @@ defineExpose({
</div> </div>
<div class="time"> <div class="time">
<SvgIcon color="#FFF" size="16" name="save" /> <SvgIcon color="#FFF" size="16" name="save" />
<span class="time-value">{{ <span class="time-value"
taskDetailInfo?.submitDateTimestamp >{{
? format(taskDetailInfo?.submitDateTimestamp, "yyyy-MM-dd HH:mm:ss") taskDetailInfo?.submitDateTimestamp
: "-" ? format(taskDetailInfo?.submitDateTimestamp, "yyyy-MM-dd HH:mm:ss")
}} : "-"
}}
</span> </span>
</div> </div>
</div> </div>
<div class="status"> <div class="status">
<img <img
v-show="taskDetailInfo?.historyStates === 2" class="img-status" src="@/assets/images/task/pass.png" v-show="taskDetailInfo?.historyStates === 2"
class="img-status"
src="@/assets/images/task/pass.png"
alt="" alt=""
> />
<img <img
v-show="taskDetailInfo?.historyStates === 3" class="img-status" src="@/assets/images/task/not_pass.png" v-show="taskDetailInfo?.historyStates === 3"
class="img-status"
src="@/assets/images/task/not_pass.png"
alt="" alt=""
> />
</div> </div>
<!-- 右下信息 --> <!-- 右下信息 -->
<div class="info img-info"> <div class="info img-info">
@ -572,7 +584,7 @@ defineExpose({
class="icon-status" class="icon-status"
src="@/assets/images/task/status.png" src="@/assets/images/task/status.png"
alt="" alt=""
> />
</span> </span>
</n-gi> </n-gi>
<n-gi span="8" class="gi2"> <n-gi span="8" class="gi2">
@ -587,11 +599,12 @@ defineExpose({
class="icon-status" class="icon-status"
src="@/assets/images/task/similarity.png" src="@/assets/images/task/similarity.png"
alt="" alt=""
> />
</span> </span>
</n-gi> </n-gi>
<n-gi span="8" class="gi2"> <n-gi span="8" class="gi2">
<span class="value num">{{ totalCount }}<span class="unit">张</span> <span class="value num"
>{{ totalCount }}<span class="unit">张</span>
</span> </span>
<span class="label">相似匹配</span> <span class="label">相似匹配</span>
</n-gi> </n-gi>
@ -610,10 +623,29 @@ defineExpose({
/> />
</div> </div>
<!-- 操作 --> <!-- 操作 -->
<div v-show="overTask && overTask.id === taskDetailInfo.id" class="action" @click.stop="hideAction"> <div
<SvgIcon v-if="[1].includes(taskDetailInfo.historyStates)" style="cursor: pointer" name="t1" @click.stop="handleApproveMainImage" /> v-show="overTask && overTask.id === taskDetailInfo.id"
<SvgIcon v-if="[1].includes(taskDetailInfo.historyStates)" style="cursor: pointer; margin-left: 30px" name="t2" @click.stop="handleRejectMainImage" /> class="action"
<SvgIcon v-if="[1, 2, 3].includes(taskDetailInfo.historyStates)" style="cursor: pointer; margin-left: 30px" name="t9" @click.stop="handleRejectdubiousfileyd" /> @click.stop="hideAction"
>
<SvgIcon
v-if="[1].includes(taskDetailInfo.historyStates)"
style="cursor: pointer"
name="t1"
@click.stop="handleApproveMainImage"
/>
<SvgIcon
v-if="[1].includes(taskDetailInfo.historyStates)"
style="cursor: pointer; margin-left: 30px"
name="t2"
@click.stop="handleRejectMainImage"
/>
<SvgIcon
v-if="[1, 2, 3].includes(taskDetailInfo.historyStates)"
style="cursor: pointer; margin-left: 30px"
name="t9"
@click.stop="handleRejectdubiousfileyd"
/>
</div> </div>
</div> </div>
<PictureInfo :task-detail-info="taskDetailInfo" /> <PictureInfo :task-detail-info="taskDetailInfo" />
@ -623,8 +655,14 @@ defineExpose({
> >
<div> <div>
<span <span
style="font-size: 18px; font-weight: Medium;color: #333333;font-family: PingFang SC, PingFang SC-Medium;" style="
>任务包图片</span> font-size: 18px;
font-weight: Medium;
color: #333333;
font-family: PingFang SC, PingFang SC-Medium;
"
>任务包图片</span
>
</div> </div>
<div <div
style=" style="
@ -711,7 +749,10 @@ defineExpose({
/> />
</div> </div>
<div class="percent" :class="{ 'percent-red': item?.maxSimilarity >= 100 }"> <div class="percent" :class="{ 'percent-red': item?.maxSimilarity >= 100 }">
<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)
}}<span class="percent-unit">%</span> }}<span class="percent-unit">%</span>
@ -725,25 +766,34 @@ defineExpose({
</div> </div>
<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, 3].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)"
/> />
<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">
<div <div
style=" style="
width: 100px; width: 100px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
" "
> >
回到顶部 回到顶部
</div> </div>
@ -855,11 +905,14 @@ defineExpose({
.left { .left {
flex: 0.6; flex: 0.6;
background-size: cover; background-size: 632px 346px;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: 8px; border-radius: 8px;
position: relative; position: relative;
width: 632px;
height: 346px;
.preview { .preview {
position: absolute; position: absolute;
@ -1189,20 +1242,20 @@ defineExpose({
font-size: 14px; font-size: 14px;
.val { .val {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 12px; font-size: 12px;
font-family: PingFang SC, PingFang SC-Semibold; font-family: PingFang SC, PingFang SC-Semibold;
font-weight: Semibold; font-weight: Semibold;
text-align: left; text-align: left;
color: #ffffff; color: #ffffff;
line-height: 24px; line-height: 24px;
} }
} }

Write Preview
Loading…
Cancel
Save