Merge pull request 'fix:20240410bug修复' (#154) from fix/modifyStyle into test

Reviewed-on: #154
pull/163/head
zhouxiaoan 1 year ago
commit daf79405c1

@ -23,7 +23,7 @@ const adminInfo = {
value: 'task-main', value: 'task-main',
}, },
{ {
label: '图审审批管理', label: '图审审批',
value: 'worksheet-main', value: 'worksheet-main',
}, },
], ],

@ -67,7 +67,6 @@ export async function getPackageTaskList(packageid: string, params: PageParam) {
* @returns * @returns
*/ */
export async function getTaskDetailInfo(checkDuplicateId: string) { export async function getTaskDetailInfo(checkDuplicateId: string) {
const res = await http.request({ const res = await http.request({
url: `/ocr/ocrPicture/getPackagePicture?checkDuplicateId=${checkDuplicateId}`, url: `/ocr/ocrPicture/getPackagePicture?checkDuplicateId=${checkDuplicateId}`,
method: 'get', method: 'get',
@ -75,7 +74,18 @@ export async function getTaskDetailInfo(checkDuplicateId: string) {
return res.data return res.data
} }
/**
*
* @param pictureid id xx,xx,xx,xx
* @returns
*/
export async function dubiousfileyd(pictureid: string) {
const res = await http.request({
url: `/ocr/dubiousfile/dubiousfileyd?pictureid=${pictureid}`,
method: 'get',
})
return res.data
}
/** /**
* () * ()
* @param packageid id * @param packageid id
@ -84,7 +94,6 @@ export async function getTaskDetailInfo(checkDuplicateId: string) {
* @returns * @returns
*/ */
export async function getPictureSimilarityList(params: PageParam & PictureSortParam & SimilarityPictureSortParam) { export async function getPictureSimilarityList(params: PageParam & PictureSortParam & SimilarityPictureSortParam) {
const res = await http.request({ const res = await http.request({
url: `/backstage/jifen/ocrtaskchildpicture/getPictureSimilarityList`, url: `/backstage/jifen/ocrtaskchildpicture/getPictureSimilarityList`,
method: 'get', method: 'get',

@ -1,76 +1,80 @@
<template>
<div class="header_wrap">
<div v-for="(item, index) in data" :key="index" class="header_item">
<SvgIcon :name="item.link"/>
<div class="data_wrap">
<div class="data_title" :style="hasColor?`color:${item.color || ''}`:''">{{ item.count }}</div>
<div class="data_content">{{ item.title }}</div>
</div>
</div>
<SvgIcon size="14px" style="cursor: pointer" name="setting" class="settingSvg"></SvgIcon>
</div>
</template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineProps, onMounted } from "vue"; import { defineProps, onMounted } from 'vue'
defineProps({ defineProps({
hasColor: { hasColor: {
type: Boolean, type: Boolean,
default: () => false, default: () => false,
}, },
}); })
const initRem = () => { function initRem() {
const designWidth = 1440; const designWidth = 1440
const rempPx = 16; const rempPx = 16
const scale = window.innerWidth / designWidth; const scale = window.innerWidth / designWidth
document.documentElement.style.fontSize = scale * rempPx + "px"; document.documentElement.style.fontSize = `${scale * rempPx}px`
}; }
onMounted(() => { onMounted(() => {
initRem(); initRem()
}) })
const data = [ const data = [
{ {
link: "count", link: 'count',
title: "任务总数", title: '任务总数',
count: 6399, count: 6399,
}, },
{ {
link: "wait", link: 'wait',
title: "待审批", title: '待审批',
count: 6290, count: 6290,
}, },
{ {
link: "done", link: 'done',
title: "已审批", title: '已审批',
count: 109, count: 109,
}, },
{ {
link: "resolve", link: 'resolve',
title: "通过", title: '通过',
count: 3290, count: 3290,
color: "#03c984", color: '#03c984',
}, },
{ {
link: "reject", link: 'reject',
title: "不通过", title: '不通过',
count: 3000, count: 3000,
color: "#ff8b8b", color: '#ff8b8b',
}, },
{ {
link: "reimg", link: 'reimg',
title: "图片重复数", title: '图片重复数',
count: 230, count: 230,
}, },
{ {
link: "breakcount", link: 'breakcount',
title: "小结重复数", title: '小结重复数',
count: 365, count: 365,
}, },
]; ]
</script> </script>
<template>
<div class="header_wrap">
<div v-for="(item, index) in data" :key="index" class="header_item">
<SvgIcon :name="item.link" />
<div class="data_wrap">
<div class="data_title" :style="hasColor ? `color:${item.color || ''}` : ''">
{{ item.count }}
</div>
<div class="data_content">
{{ item.title }}
</div>
</div>
</div>
<SvgIcon size="14px" style="cursor: pointer" name="setting" class="settingSvg" />
</div>
</template>
<style scoped lang="less"> <style scoped lang="less">
.header_wrap { .header_wrap {
display: flex; display: flex;

@ -11,11 +11,11 @@ import { msgPolling } from '@/api/message/message'
import { getImgUrl } from '@/utils/urlUtils' import { getImgUrl } from '@/utils/urlUtils'
import { useUser } from '@/store/modules/user' import { useUser } from '@/store/modules/user'
import { useTaskStore } from '@/store/modules/task' import { useTaskStore } from '@/store/modules/task'
import defaultAvatar from '@/assets/icons/avatar.svg'; import defaultAvatar from '@/assets/icons/avatar.svg'
const taskStore = useTaskStore(); const taskStore = useTaskStore()
export default defineComponent({ export default defineComponent({
name: "PageHeader", name: 'PageHeader',
components: { components: {
UserSettings, UserSettings,
QuillModal, QuillModal,
@ -31,139 +31,140 @@ export default defineComponent({
type: Boolean, type: Boolean,
}, },
}, },
emits: ["update:collapsed"], emits: ['update:collapsed'],
setup() { setup() {
const message = useMessage(); const message = useMessage()
const dialog = useDialog(); const dialog = useDialog()
const userStore = useUser(); const userStore = useUser()
const useInfo = userStore.getUserInfo; const useInfo = userStore.getUserInfo
const name = ""; const name = ''
const state = reactive({ const state = reactive({
username: name ?? "", username: name ?? '',
fullscreenIcon: "FullscreenOutlined", fullscreenIcon: 'FullscreenOutlined',
}); })
const router = useRouter(); const router = useRouter()
const route = useRoute(); const route = useRoute()
const routename = ref(route.meta.title); const routename = ref(route.meta.title)
// mm // mm
const iconList = ref([ const iconList = ref([
{ {
icon: "magnifying-1", icon: 'magnifying-1',
handle: searchHandler, handle: searchHandler,
}, },
{ {
icon: "shortcut-keys", icon: 'shortcut-keys',
handle: shortcutHandler, handle: shortcutHandler,
}, },
{ {
icon: "suspicious-folder", icon: 'suspicious-folder',
handle: recycleHandler, handle: recycleHandler,
}, },
{ {
icon: "memo", icon: 'memo',
handle: quillHandler, handle: quillHandler,
}, },
{ {
icon: "nomessage", icon: 'nomessage',
handle: goMessage, handle: goMessage,
}, },
]); ])
watch( watch(
() => route.fullPath, () => route.fullPath,
() => { () => {
routename.value = route.meta.title; routename.value = route.meta.title
} },
); )
const handleDragOver = (event, item) => { const handleDragOver = (event, item) => {
taskStore.setInFile(true); taskStore.setInFile(true)
}; }
const handleDragLeave = (event, item) => { const handleDragLeave = (event, item) => {
taskStore.setInFile(false); taskStore.setInFile(false)
}; }
const dropdownSelect = (key) => { const dropdownSelect = (key) => {
router.push({ name: key }); router.push({ name: key })
}; }
// 退 // 退
const doLogout = () => { const doLogout = () => {
dialog.info({ dialog.info({
title: "提示", title: '提示',
content: "您确定要退出登录吗", content: '您确定要退出登录吗',
positiveText: "确定", positiveText: '确定',
negativeText: "取消", negativeText: '取消',
onPositiveClick: () => { onPositiveClick: () => {
userStore.logout().then(() => { userStore.logout().then(() => {
message.success("成功退出登录"); message.success('成功退出登录')
router router
.replace({ .replace({
name: "Login", name: 'Login',
query: { query: {
// redirect: route.fullPath, // redirect: route.fullPath,
}, },
}) })
.finally(() => location.reload()); .finally(() => location.reload())
}); })
}, },
onNegativeClick: () => {}, onNegativeClick: () => {},
}); })
}; }
const quillModalRef = ref(null); const quillModalRef = ref(null)
const shortcutModal = ref(null); const shortcutModal = ref(null)
const recycleModalRef = ref(null); const recycleModalRef = ref(null)
const SearchModalRef = ref(null); const SearchModalRef = ref(null)
function quillHandler() { function quillHandler() {
const modal = unref(quillModalRef)! as any; const modal = unref(quillModalRef)! as any
modal.showModal(); modal.showModal()
} }
function shortcutHandler() { function shortcutHandler() {
const modal = unref(shortcutModal)! as any; const modal = unref(shortcutModal)! as any
modal.showModal(); modal.showModal()
} }
function recycleHandler() { function recycleHandler() {
const modal = unref(recycleModalRef)! as any; const modal = unref(recycleModalRef)! as any
modal.showModal(); modal.showModal()
} }
function searchHandler() { function searchHandler() {
const modal = unref(SearchModalRef)! as any; const modal = unref(SearchModalRef)! as any
modal.showModal(); modal.showModal()
} }
function goMessage() { function goMessage() {
router.push({ name: "message-main" }); router.push({ name: 'message-main' })
} }
async function getMessage() { async function getMessage() {
const res = await msgPolling(); const res = await msgPolling()
if (res.data) iconList.value[4].icon = "hasmessage"; if (res.data)
else iconList.value[4].icon = "nomessage"; iconList.value[4].icon = 'hasmessage'
else iconList.value[4].icon = 'nomessage'
} }
setInterval(() => { setInterval(() => {
getMessage(); getMessage()
}, 5000); }, 5000)
const mousetrap = inject("mousetrap") as any; const mousetrap = inject('mousetrap') as any
onMounted(() => { onMounted(() => {
getMessage(); getMessage()
mousetrap.bind("n r", quillHandler); mousetrap.bind('n r', quillHandler)
mousetrap.bind("n t", quillHandler); mousetrap.bind('n t', quillHandler)
mousetrap.bind("n n", recycleHandler); mousetrap.bind('n n', recycleHandler)
mousetrap.bind("m m", searchHandler); mousetrap.bind('m m', searchHandler)
}); })
const defaultAvatarSrc = ref(defaultAvatar); const defaultAvatarSrc = ref(defaultAvatar)
return { return {
...toRefs(state), ...toRefs(state),
@ -187,7 +188,7 @@ export default defineComponent({
defaultAvatarSrc, defaultAvatarSrc,
} }
}, },
}); })
</script> </script>
<template> <template>

@ -1,5 +1,5 @@
import { Layout } from '@/router/constant'
import type { RouteRecordRaw } from 'vue-router' import type { RouteRecordRaw } from 'vue-router'
import { Layout } from '@/router/constant'
/** /**
* @param name , , * @param name , ,
@ -19,7 +19,7 @@ const routes: Array<RouteRecordRaw> = [
redirect: '/worksheet', redirect: '/worksheet',
component: Layout, component: Layout,
meta: { meta: {
title: '图审审批管理', title: '图审审批',
permissions: ['worksheet-main'], permissions: ['worksheet-main'],
svgname: 'worksheet', svgname: 'worksheet',
svgsize: 22, svgsize: 22,
@ -30,7 +30,7 @@ const routes: Array<RouteRecordRaw> = [
path: 'worksheet', path: 'worksheet',
name: 'worksheet-main', name: 'worksheet-main',
meta: { meta: {
title: '图审审批管理', title: '图审审批',
}, },
component: () => import('@/views/worksheet/index.vue'), component: () => import('@/views/worksheet/index.vue'),
}, },

@ -124,10 +124,9 @@ export const useUserStore = defineStore({
// 默认设置为第一个租户 // 默认设置为第一个租户
const firstTenant = data.tenantList.length > 0 ? data.tenantList[0] : null const firstTenant = data.tenantList.length > 0 ? data.tenantList[0] : null
const tenantId = firstTenant ? firstTenant.id : '' const tenantId = firstTenant ? firstTenant.id : ''
data.frontmenuTList.forEach(ele=>{ data.frontmenuTList.forEach((ele) => {
if(ele.description === 'AI工单'){ if (ele.description === 'AI工单')
ele.description = '图审审批管理' ele.description = '图审审批'
}
}) })
storage.set(CURRENT_USER, data, ex) storage.set(CURRENT_USER, data, ex)
storage.set(TENANT_ID, tenantId) storage.set(TENANT_ID, tenantId)

@ -1,97 +1,98 @@
<script lang="ts" setup> <script lang="ts" setup>
import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter"; import { difference } from 'lodash-es'
import { ColumnsMap } from "@/config/final"; import { computed, onMounted, ref, watch } from 'vue'
import { useUser } from "@/store/modules/user"; import { VueDraggable } from 'vue-draggable-plus'
import { difference } from "lodash-es"; import { getAllfieldList, getfieldList, savefield } from '@/api/home/filter'
import { computed, onMounted, ref, watch } from "vue"; import { ColumnsMap } from '@/config/final'
import { VueDraggable } from "vue-draggable-plus"; import { useUser } from '@/store/modules/user'
const emit = defineEmits<{
(e: "commit", columns: any[]);
}>();
//
const offList = ref<any[]>([]);
//
const fixLeftList = ref<any[]>([]);
const onList = ref<any[]>([]);
const props = defineProps({ const props = defineProps({
reviewType: { reviewType: {
type: Number, type: Number,
default: () => 0, default: () => 0,
require: true, require: true,
}, },
}); })
const emit = defineEmits<{
(e: 'commit', columns: any[])
}>()
//
const offList = ref<any[]>([])
//
const fixLeftList = ref<any[]>([])
const onList = ref<any[]>([])
onMounted(async () => { onMounted(async () => {
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(',')
let mustList = []; const mustList = []
allList?.map((v) => { allList?.map((v) => {
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: 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) {
mustList.push(item);
if (!userFieldFixed?.length && !userFieldUnFixed?.length) {
fixLeftList.value.push(item);
}
} }
if (userFieldFixed?.find((v2) => v2 == v.name)) { if (item.fix) {
fixLeftList.value.push(item); mustList.push(item)
} if (!userFieldFixed?.length && !userFieldUnFixed?.length)
if (userFieldUnFixed?.find((v2) => v2 == v.name)) { fixLeftList.value.push(item)
onList.value.push(item);
} }
offList.value.push(item); if (userFieldFixed?.find(v2 => v2 == v.name))
}); fixLeftList.value.push(item)
});
if (userFieldUnFixed?.find(v2 => v2 == v.name))
onList.value.push(item)
offList.value.push(item)
})
})
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(ColumnsMap); const keys = Object.keys(ColumnsMap)
// const showStr = 'name' // const showStr = 'name'
// 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 { title, fixed, fixLeft, width } = ColumnsMap[key]; const { title, fixed, fixLeft, width } = ColumnsMap[key]
const item = { const item = {
id: key, id: key,
title, title,
fix: fixed, fix: fixed,
checked: ColumnsMap[key].fixed, checked: ColumnsMap[key].fixed,
width, width,
}; }
if (!fixed) offList.value.push(item); if (!fixed)
offList.value.push(item)
if (fixLeft) fixLeftList.value.push(item); if (fixLeft)
fixLeftList.value.push(item)
} }
// showList = showKeys.reduce((acc, key) => { // showList = showKeys.reduce((acc, key) => {
@ -103,18 +104,18 @@ function generatList() {
// return [...acc, config] // return [...acc, config]
// }, []) // }, [])
const fixedList = generateDefaultList(); const fixedList = generateDefaultList()
const filterList = fixedList.filter((item) => { const filterList = fixedList.filter((item) => {
return !item.fixLeft; return !item.fixLeft
}); })
onList.value.unshift(...filterList); onList.value.unshift(...filterList)
offList.value.unshift(...fixedList); offList.value.unshift(...fixedList)
} }
function generateDefaultList() { function generateDefaultList() {
return Object.keys(ColumnsMap).reduce((acc, key) => { return Object.keys(ColumnsMap).reduce((acc, key) => {
const { title, fixed, fixLeft, width } = ColumnsMap[key]; const { title, fixed, fixLeft, width } = ColumnsMap[key]
if (fixed) { if (fixed) {
const config = { const config = {
@ -124,115 +125,117 @@ function generateDefaultList() {
checked: true, checked: true,
fixLeft, fixLeft,
width, width,
};
return [...acc, config];
} else {
return acc;
} }
}, []); return [...acc, config]
}
else {
return acc
}
}, [])
} }
const show = ref(false); const show = ref(false)
const checkAll = ref(false); const checkAll = ref(false)
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) {
e.preventDefault(); e.preventDefault()
closeModal(); closeModal()
const userStore = useUser(); const userStore = useUser()
const userInfo = userStore.getUserInfo; const userInfo = userStore.getUserInfo
let userFieldFixed = ""; let userFieldFixed = ''
let userFieldUnFixed = ""; let userFieldUnFixed = ''
fixLeftList.value.map((v) => { fixLeftList.value.map((v) => {
userFieldFixed += `${v.id},`; userFieldFixed += `${v.id},`
}); })
onList.value.map((v) => { onList.value.map((v) => {
userFieldUnFixed += `${v.id},`; userFieldUnFixed += `${v.id},`
}); })
userFieldFixed = userFieldFixed.slice(0, userFieldFixed.length - 1); userFieldFixed = userFieldFixed.slice(0, userFieldFixed.length - 1)
userFieldUnFixed = userFieldUnFixed.slice(0, userFieldUnFixed.length - 1); userFieldUnFixed = userFieldUnFixed.slice(0, userFieldUnFixed.length - 1)
savefield(props.reviewType, userInfo.id, userFieldFixed, userFieldUnFixed); savefield(props.reviewType, userInfo.id, userFieldFixed, userFieldUnFixed)
const columns: any[] = [ const columns: any[] = [
{ {
type: "selection", type: 'selection',
fixed: "left", fixed: 'left',
width: 50, width: 50,
}, },
]; ]
const leftList = fixLeftList.value.map((item) => { const leftList = fixLeftList.value.map((item) => {
return { return {
title: item.name, title: item.name,
key: item.id, key: item.id,
fixed: "left", fixed: 'left',
width: 120, width: 120,
}; }
}); })
const unfixList = onList.value.map((item) => { const unfixList = onList.value.map((item) => {
return { return {
title: item.name, title: item.name,
key: item.id, key: item.id,
width: 120, width: 120,
}; }
}); })
columns.push(...leftList, ...unfixList); columns.push(...leftList, ...unfixList)
emit("commit", columns); emit('commit', columns)
} }
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)
} }
} }
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)
})
} }
}); else {
} else { onList.value = []
onList.value = []; fixLeftList.value = []
fixLeftList.value = [];
offList.value.map((v) => { offList.value.map((v) => {
if (v.fix) { if (v.fix)
fixLeftList.value.push(v); fixLeftList.value.push(v)
} })
});
} }
selectIds.value = value ? ids : []; selectIds.value = value ? ids : []
} }
function onCheckChange(checked: any, item: any) { function onCheckChange(checked: any, item: any) {
item.checked = checked; item.checked = checked
if (checked) { if (checked) {
onList.value.push(item); onList.value.push(item)
} else { }
let index = onList.value.findIndex((v) => v.id == item.id); else {
let index = onList.value.findIndex(v => v.id == item.id)
if (index > -1) { if (index > -1) {
onList.value.splice(index, 1); onList.value.splice(index, 1)
} else { }
index = fixLeftList.value.findIndex((v) => v.id == item.id); else {
fixLeftList.value.splice(index, 1); index = fixLeftList.value.findIndex(v => v.id == item.id)
fixLeftList.value.splice(index, 1)
} }
} }
// TODO // TODO
@ -242,24 +245,26 @@ function onCheckChange(checked: any, item: any) {
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) return; if (newVal === oldVal)
return
const action = newVal > oldVal ? "add" : "remove"; const action = newVal > oldVal ? 'add' : 'remove'
const diff: string[] = const diff: string[]
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) return; if (diff.length === 0)
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({
@ -267,77 +272,81 @@ watch(
name: item.name, name: item.name,
fix: item.fix || false, fix: item.fix || false,
width: 120, width: 120,
}); })
} }
} }
} else { }
const list = onList.value; else {
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)
return; return
}
} }
} }
} }
); },
)
watch( watch(
() => showIds.value.length, () => showIds.value.length,
(newVal, oldVal) => { (newVal, oldVal) => {
if (newVal === oldVal) return; if (newVal === oldVal)
return
const diff = difference(selectIds.value, showIds.value); const diff = difference(selectIds.value, showIds.value)
if (diff.length === 0) return; if (diff.length === 0)
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
}); })
} }
function removeHandler(id: string, type: "fix" | "unfix") { function removeHandler(id: string, type: 'fix' | 'unfix') {
const list = type === "fix" ? fixLeftList.value : onList.value; const list = type === 'fix' ? fixLeftList.value : onList.value
let index = list.findIndex((item) => { let index = list.findIndex((item) => {
return item.id === id; return item.id === id
}); })
if (index !== -1) list.splice(index, 1); if (index !== -1)
index = offList.value.findIndex((v) => v.id == id); list.splice(index, 1)
index = offList.value.findIndex(v => v.id == id)
if (index !== -1) { if (index !== -1) {
offList.value[index].checked = false; offList.value[index].checked = false
} else { }
index == fixLeftList.value.findIndex((v) => v.id == id); else {
fixLeftList.value[index].checked = false; index == fixLeftList.value.findIndex(v => v.id == id)
fixLeftList.value[index].checked = false
} }
} }
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 (
onList.value.length + fixLeftList.value.length - baseNum > 0 && onList.value.length + fixLeftList.value.length - baseNum > 0
offList.value.length - baseNum > && offList.value.length - baseNum
onList.value.length + fixLeftList.value.length - baseNum > onList.value.length + fixLeftList.value.length - baseNum
); )
}); })
</script> </script>
<template> <template>
@ -376,8 +385,8 @@ const indeterminate = computed(() => {
<n-checkbox <n-checkbox
v-model:checked="checkAll" v-model:checked="checkAll"
label="全部" label="全部"
@update:checked="onCheckAllChange"
:indeterminate="indeterminate" :indeterminate="indeterminate"
@update:checked="onCheckAllChange"
/> />
</div> </div>
<div class="content"> <div class="content">
@ -475,7 +484,9 @@ const indeterminate = computed(() => {
<template #footer> <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button type="info" @click="handleSumbit"> </n-button> <n-button type="info" @click="handleSumbit">
确定
</n-button>
<n-button secondary style="margin-left: 15px" @click="closeModal"> <n-button secondary style="margin-left: 15px" @click="closeModal">
取消 取消
</n-button> </n-button>

File diff suppressed because it is too large Load Diff

@ -1,365 +1,369 @@
<script lang="ts" setup> <script lang="ts" setup>
import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter"; import { cloneDeep, difference } from 'lodash-es'
import { workPackageMap } from "@/config/workorder"; import { computed, defineEmits, defineProps, onMounted, ref, watch } from 'vue'
import { useUser } from "@/store/modules/user"; import { VueDraggable } from 'vue-draggable-plus'
import { difference, cloneDeep } from "lodash-es"; import { getAllfieldList, getfieldList, savefield } from '@/api/home/filter'
import { computed, defineEmits, defineProps, onMounted, ref, watch } from "vue"; import { workPackageMap } from '@/config/workorder'
import { VueDraggable } from "vue-draggable-plus"; import { useUser } from '@/store/modules/user'
const props = defineProps({ const props = defineProps({
reviewType: { reviewType: {
type: Number, type: Number,
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];
} else {
return acc;
} }
}, []); return [...acc, config]
}
else {
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)
} }
}); else {
onShowList.value = cloneDeep(onList.value); 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; item.checked = checked
let currentIndex = offList.value.findIndex((v) => v.id == item.id); const currentIndex = offList.value.findIndex(v => v.id == item.id)
offList.value[currentIndex].checked = checked; offList.value[currentIndex].checked = checked
if (index === -1 && checked) { if (index === -1 && checked)
selectIds.value.push(item.id); selectIds.value.push(item.id)
} else { else
selectIds.value.splice(index, 1); 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) return; if (newVal === oldVal)
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) return; if (diff.length === 0)
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) return; if (newVal === oldVal)
return
const diff = difference(selectIds.value, showIds.value); const diff = difference(selectIds.value, showIds.value)
if (diff.length === 0) return; if (diff.length === 0)
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)
} }
const 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 = []
} }
const getData = async (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) => {
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: 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 { else
offList.value.push(item); 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);
if (!item.fix) {
onList.value.push(item);
} }
selectIds.value.push(item.id)
if (!item.fix)
onList.value.push(item)
}
})
} }
}); offShowList.value = cloneDeep(offList.value)
fixShowList.value = cloneDeep(fixList.value)
onShowList.value = cloneDeep(onList.value)
} }
offShowList.value = cloneDeep(offList.value);
fixShowList.value = cloneDeep(fixList.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
); )
}); })
const 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.indexOf(value) > -1); offShowList.value = offList.value.filter(item => item.name.includes(value))
} else {
onShowList.value = onList.value.filter((item) => item.name.indexOf(value) > -1);
fixShowList.value = fixList.value.filter((item) => item.name.indexOf(value) > -1);
} }
} 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 { }
onShowList.value = cloneDeep(onList.value); else {
fixShowList.value = cloneDeep(fixList.value); onShowList.value = cloneDeep(onList.value)
fixShowList.value = cloneDeep(fixList.value)
}
} }
} }
};
</script> </script>
<template> <template>
@ -401,8 +405,8 @@ const queryData = (value, type) => {
<n-checkbox <n-checkbox
v-model:checked="checkAll" v-model:checked="checkAll"
label="全选" label="全选"
@update:checked="onCheckAllChange"
:indeterminate="indeterminate" :indeterminate="indeterminate"
@update:checked="onCheckAllChange"
/> />
</div> </div>
<div class="content"> <div class="content">
@ -445,7 +449,9 @@ const 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> <div class="draggable-title">
系统默认
</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"
@ -456,7 +462,9 @@ const 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> <div class="draggable-title" style="border-top: none">
自定义配置
</div>
<VueDraggable <VueDraggable
v-model="onList" v-model="onList"
class="draggable-ul" class="draggable-ul"
@ -487,7 +495,9 @@ const 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> <n-button type="info" @click="handleSumbit">
确定
</n-button>
<n-button secondary style="margin-left: 15px" @click="getData();closeModal()"> <n-button secondary style="margin-left: 15px" @click="getData();closeModal()">
取消 取消
</n-button> </n-button>

@ -1,10 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { getAllfieldList, getfieldList } from "@/api/home/filter"; import { debounce } from 'lodash-es'
import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
import { useUser } from "@/store/modules/user";
import { useWorkOrder } from "@/store/modules/workOrder";
import { getViewportOffset } from "@/utils/domUtils";
import { debounce } from "lodash-es";
import { import {
computed, computed,
defineEmits, defineEmits,
@ -15,70 +10,75 @@ import {
ref, ref,
unref, unref,
watch, watch,
} from "vue"; } from 'vue'
import CustomFieldModalVue from "../modal/CustomFieldModal.vue"; import CustomFieldModalVue from '../modal/CustomFieldModal.vue'
import WorkSheetList from "./WorkSheetList.vue"; import WorkSheetList from './WorkSheetList.vue'
import { getAllfieldList, getfieldList } from '@/api/home/filter'
import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
import { useUser } from '@/store/modules/user'
import { useWorkOrder } from '@/store/modules/workOrder'
import { getViewportOffset } from '@/utils/domUtils'
defineOptions({ name: "AsideContent" }); defineOptions({ name: 'AsideContent' })
const emit = defineEmits(["ApprovalOver"]); const emit = defineEmits(['ApprovalOver'])
const collapse = ref(false); const collapse = ref(false)
const workStore = useWorkOrder(); const workStore = useWorkOrder()
const filterModalRef = ref(null); const filterModalRef = ref(null)
const packageListRef = ref<HTMLDivElement | null>(null); const packageListRef = ref<HTMLDivElement | null>(null)
// //
const showFieldList = ref<any[]>([]); const showFieldList = ref<any[]>([])
const reviewType = 1; const reviewType = 1
const dicts = ref<any>([]); const dicts = ref<any>([])
function collapseHandler() { function collapseHandler() {
collapse.value = !collapse.value; collapse.value = !collapse.value
} }
const mousetrap = inject("mousetrap") as any; const mousetrap = inject('mousetrap') as any
mousetrap.bind("[", collapseHandler); mousetrap.bind('[', collapseHandler)
const searchKeyword = ref(""); const searchKeyword = ref('')
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 listHeight = ref(700); const listHeight = ref(700)
function computeListHeight() { function computeListHeight() {
const listEl = document.querySelector(".work-sheet-list")!; const listEl = document.querySelector('.work-sheet-list')!
const { bottomIncludeBody } = getViewportOffset(listEl); const { bottomIncludeBody } = getViewportOffset(listEl)
const height = bottomIncludeBody; const height = bottomIncludeBody
listHeight.value = height - 25; listHeight.value = height - 25
} }
const listStyle = computed(() => { const listStyle = computed(() => {
return { return {
height: `${listHeight.value}px`, height: `${listHeight.value}px`,
}; }
}); })
useWindowSizeFn(computeListHeight, 280); useWindowSizeFn(computeListHeight, 280)
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
dicts.value = res.data; dicts.value = 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 键值
@ -86,19 +86,20 @@ 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) {
@ -107,55 +108,55 @@ async function getshowFieldList() {
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(() => {
nextTick(() => { nextTick(() => {
computeListHeight(); computeListHeight()
getshowFieldList(); getshowFieldList()
}); })
}); })
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
}); })
function showFilter() { function showFilter() {
const modal = unref(filterModalRef)! as any; const modal = unref(filterModalRef)! as any
modal.showModal(); modal.showModal()
} }
watch( watch(
() => workStore.immersion, () => workStore.immersion,
() => { () => {
collapse.value = true; collapse.value = true
} },
); )
const showSearch = ref(false); const showSearch = ref(false)
function setShowSearch(value: boolean) { function setShowSearch(value: boolean) {
showSearch.value = value; showSearch.value = value
if (value === false) { if (value === false) {
(packageListRef.value as any).search(""); (packageListRef.value as any).search('')
searchKeyword.value = ""; searchKeyword.value = ''
} }
} }
const inputHandler = debounce((word) => { const inputHandler = debounce((word) => {
searchKeyword.value = word; searchKeyword.value = word;
(packageListRef.value as any).search(word); (packageListRef.value as any).search(word)
}, 500); }, 500)
const ApprovalOver = (packageId) => { function ApprovalOver(packageId) {
emit("ApprovalOver", packageId); emit('ApprovalOver', packageId)
}; }
</script> </script>
<template> <template>
@ -216,9 +217,9 @@ const ApprovalOver = (packageId) => {
class="work-sheet-list" class="work-sheet-list"
:show-field-list="showFieldList" :show-field-list="showFieldList"
:dicts="dicts" :dicts="dicts"
@ApprovalOver="ApprovalOver" @approval-over="ApprovalOver"
/> />
<CustomFieldModalVue ref="filterModalRef" :review-type="1" @onOk="getshowFieldList" /> <CustomFieldModalVue ref="filterModalRef" :review-type="1" @on-ok="getshowFieldList" />
</div> </div>
</template> </template>

@ -1,7 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { format } from 'date-fns' import { format } from 'date-fns'
import { computed, onMounted, ref } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import type { PackageListItem } from '/#/workorder' import type { PackageListItem } from '/#/workorder'
import { useDialog } from 'naive-ui'
defineOptions({ name: 'ListItem' }) defineOptions({ name: 'ListItem' })
const props = defineProps({ const props = defineProps({
@ -22,31 +23,50 @@ const props = defineProps({
default: () => [], default: () => [],
}, },
mouseOverTask: { mouseOverTask: {
type: Array, type: Object,
default: () => [], default: () => [],
}, },
}) })
const emit = defineEmits(['dismisClick']) const emit = defineEmits(['dismisClick'])
const dialog = useDialog()
const svgName = computed(() => { const svgName = computed(() => {
return props.selected ? 'taskpack-select' : 'taskpack' return props.selected ? 'taskpack-select' : 'taskpack'
}) })
const showFull = ref(false)
const popconfirmTarget: any = ref(null) const popconfirmTarget: any = ref(null)
const popconfirmRef: any = ref(null) const popconfirmRef: any = ref(null)
function handleDismissTask() { function handleDismissTask() {
dialog.warning({
title: '确认提示',
content: '确认解散该任务包吗?',
positiveText: '取消',
negativeText: '确定',
negativeButtonProps: {
type: 'info',
ghost: false,
},
positiveButtonProps: {
type: 'default',
},
onPositiveClick: () => {
},
onNegativeClick: () => {
emit('dismisClick', props.mouseOverTask.id) emit('dismisClick', props.mouseOverTask.id)
},
})
popconfirmRef.value[0]?.setShow(false) // popconfirm popconfirmRef.value[0]?.setShow(false) // popconfirm
} }
watch(() => props.mouseOverTask, (value) => {
console.log(props)
})
onMounted(async () => { onMounted(async () => {
}) })
</script> </script>
<template> <template>
<div ref="popconfirmTarget" class="list-item" :class="{ 'list-item-selected': selected }"> <div ref="popconfirmTarget" class="list-item relative" :class="{ 'list-item-selected': selected, 'h200': showFieldList?.length > 5 && !showFull }">
<div v-for="(item, index) in showFieldList" :key="index"> <div v-for="(item, index) in showFieldList" :key="index">
<div v-if="item.id === 'name'" class="list-item-header"> <div v-if="item.id === 'name'" class="list-item-header">
<div class="id-wrap"> <div class="id-wrap">
@ -61,7 +81,8 @@ onMounted(async () => {
placement="bottom" trigger="click" placement="bottom" trigger="click"
> >
<template #trigger> <template #trigger>
<span v-show="mouseOverTask?.id" class="dismiss-task-pack" style="cursor: pointer;">...</span>
<span v-show="mouseOverTask?.id === listItem.id" class="dismiss-task-pack" style="cursor: pointer;">...</span>
</template> </template>
<template #action> <template #action>
<span style="cursor: pointer;" @click="handleDismissTask"></span> <span style="cursor: pointer;" @click="handleDismissTask"></span>
@ -85,21 +106,40 @@ onMounted(async () => {
</li> </li>
<li v-else-if="item.id === 'createdate'"> <li v-else-if="item.id === 'createdate'">
提交时间<n-ellipsis style="max-width: 170px"> 提交时间<n-ellipsis style="max-width: 170px">
{{ listItem.createdate && format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") }} {{ listItem.createdate && format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") || '全部' }}
</n-ellipsis> </n-ellipsis>
</li> </li>
<li v-else-if="item.id === 'createTime'"> <li v-else-if="item.id === 'createTime'">
生成时间<n-ellipsis style="max-width: 170px"> 生成时间<n-ellipsis style="max-width: 170px">
{{ listItem.createTime && format(listItem.createTime, "yyyy-MM-dd HH:mm:ss") }} {{ listItem.createTime && format(listItem.createTime, "yyyy-MM-dd HH:mm:ss") || '全部' }}
</n-ellipsis>
</li>
<li v-else-if="item.id === 'submit_date_timestamp'">
筛选日期<n-ellipsis style="max-width: 170px">
<!-- {{ listItem.submit_date_timestamp && format(listItem.submit_date_timestamp.split('-')[0], "yyyy年MM月dd日") || '全部' }} -->
{{ listItem.submit_date_timestamp && format(new Date(listItem.submit_date_timestamp?.split('-')[0]), "yyyy年MM月dd日") }}
{{ listItem.submit_date_timestamp && format(new Date(listItem.submit_date_timestamp?.split('-')[1]), "yyyy年MM月dd日") }}
</n-ellipsis> </n-ellipsis>
</li> </li>
<li v-else class="ellipsis"> <li v-else class="ellipsis">
<span class="label">{{ item.name }}</span><n-ellipsis style="max-width: 170px"> <span class="label">{{ item.name }}</span><n-ellipsis style="max-width: 170px">
{{ listItem[item.id] }} {{ listItem[item.id] || '全部' }}
</n-ellipsis> </n-ellipsis>
</li> </li>
</ul> </ul>
</div> </div>
<template
v-if="showFieldList?.length > 5"
>
<div class="absolute bottom-0 py-[8px] pl-[36px] item-action">
<span class="cursor-pointer" @click.stop="showFull = !showFull">
<SvgIcon style="margin-left: 6px" name="expand" size="16" />
<SvgIcon style="margin-left: 6px" name="collapse" size="16" />
{{ showFull ? '收起' : '展开' }}
</span>
</div>
</template>
<!-- <div class="list-item-header"> <!-- <div class="list-item-header">
<div style="display: flex;"> <div style="display: flex;">
<SvgIcon :name="svgName" size="28" /> <SvgIcon :name="svgName" size="28" />
@ -122,7 +162,12 @@ onMounted(async () => {
padding: 10px 0px 10px 8px; padding: 10px 0px 10px 8px;
position: relative; position: relative;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
// · transition: height: 0.2s ease-out;
// transform: ;
&.h200 {
height: 206px;
overflow: hidden;
}
&-header { &-header {
display: flex; display: flex;
align-items: center; align-items: center;
@ -170,9 +215,16 @@ onMounted(async () => {
color: #507afd !important; color: #507afd !important;
} }
} }
.item-action {
background-color: #fff;
width: calc(100% - 8px);
}
&-selected { &-selected {
background-color: #f2f5fe; background-color: #f2f5fe;
.item-action {
background-color: #f2f5fe;
}
} }
&-detail { &-detail {

@ -1,16 +1,15 @@
<script lang="ts" setup> <script lang="ts" setup>
import { deletePackage } from "@/api/home/main"; import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import NotPassed from "@/components/NotPassed.vue"; import { throttle } from 'lodash'
import { useWorkOrder } from "@/store/modules/workOrder"; import { useInfiniteScroll } from '@vueuse/core'
import { isEmpty } from "@/utils"; import { useMessage } from 'naive-ui'
import { useInfiniteScroll } from "@vueuse/core"; import ApprovalModal from '../modal/ApprovalModal.vue'
import { useMessage } from "naive-ui"; import ListItem from './ListItem.vue'
import { onMounted, reactive, ref, watch } from "vue"; import { deletePackage } from '@/api/home/main'
import ApprovalModal from "../modal/ApprovalModal.vue"; import { useWorkOrder } from '@/store/modules/workOrder'
import ListItem from "./ListItem.vue"; import { isEmpty } from '@/utils'
import type { PackageListItem } from "/#/workorder"; import type { PackageListItem } from '/#/workorder'
import NotPassed from '@/components/NotPassed.vue'
const emit = defineEmits(["ApprovalOver"]);
defineProps({ defineProps({
showFieldList: { showFieldList: {
@ -21,54 +20,61 @@ defineProps({
type: Array, type: Array,
default: () => [], default: () => [],
}, },
}); })
const workStore = useWorkOrder();
const data = ref<PackageListItem[]>([]); const emit = defineEmits(["ApprovalOver"]);
const activeId = ref("");
const el = ref<HTMLDivElement | null>(null); const emit = defineEmits(['ApprovalOver'])
const keyword = ref("");
const canloadMore = ref(true); const workStore = useWorkOrder()
const isLoading = ref(false); const data = ref<PackageListItem[]>([])
const activeId = ref('')
const el = ref<HTMLDivElement | null>(null)
const keyword = ref('')
const canloadMore = ref(true)
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
} }
} }
@ -80,77 +86,123 @@ 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 || []; return data || []
} catch (error) { }
canloadMore.value = false; catch (error) {
return []; 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") { if (event?.relatedTarget?.id !== 'taskPopconfirmRef')
overTask.value = null; overTask.value = null
}
} }
const message = useMessage(); const message = useMessage()
function dismisClick(packageId: string) { function dismisClick(packageId: string) {
deletePackage({ packageId: 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) {
emit('ApprovalOver', packageId)
} }
const ApprovalOver = (packageId) => {
emit("ApprovalOver", packageId);
};
defineExpose({ defineExpose({
search, search,
}); })
const onKeydown = throttle((event) => {
const eles = ['INPUT', 'TEXTAREA']
if (eles.includes(event.target.tagName))
return
if (event.defaultPrevented)
return //
const handled = false
if (event.key !== undefined) {
// 使 KeyboardEvent.key handled true
}
else if (event.keyCode !== undefined) {
// 使 KeyboardEvent.keyCode handled true
}
if (handled) {
//
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') {
const next = data.value[workStore.currentIndex + 1]?.id
if (next)
selectHandler(next, workStore.currentIndex + 1)
}
if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
if (activeId.value)
activeId.value = ''
else
activeId.value = data.value[workStore.currentIndex]?.checkDuplicateId
}
}, 500)
onMounted(() => {
document.addEventListener('keydown', onKeydown, true)
})
onUnmounted(() => {
document.removeEventListener('keydown', onKeydown)
})
</script> </script>
<template> <template>
@ -169,7 +221,7 @@ defineExpose({
@click="selectHandler(item.id, index)" @click="selectHandler(item.id, index)"
@mouseover="overTaskHandelr(item)" @mouseover="overTaskHandelr(item)"
@mouseleave="leaveTaskHandler" @mouseleave="leaveTaskHandler"
@dismisClick="dismisClick" @dismis-click="dismisClick"
/> />
</div> </div>
</n-spin> </n-spin>

@ -28,10 +28,18 @@ const propertys = computed(() => {
任务ID{{ taskDetailInfo.taskname }} 任务ID{{ taskDetailInfo.taskname }}
</n-ellipsis> </n-ellipsis>
<div class="tags"> <div class="tags">
<div class="tag tag-submiting" v-if="taskDetailInfo.historyStates == 1"></div> <div v-if="taskDetailInfo.historyStates == 1" class="tag tag-submiting">
<div class="tag tag-submited" v-else-if="taskDetailInfo.historyStates == 2 || taskDetailInfo.workStatus == 3">已审批</div> 待审批
<div class="tag tag-passed" v-if="taskDetailInfo.historyStates == 2">{{ TASK_STATUS_OBJ[taskDetailInfo.historyStates] }}</div> </div>
<div class="tag tag-not-passed" v-else-if="taskDetailInfo.historyStates == 3">{{ TASK_STATUS_OBJ[taskDetailInfo.historyStates] }}</div> <div v-else-if="taskDetailInfo.historyStates == 2 || taskDetailInfo.workStatus == 3 || taskDetailInfo.historyStates == 3" class="tag tag-submited">
已审批
</div>
<div v-if="taskDetailInfo.historyStates == 2" class="tag tag-passed">
{{ TASK_STATUS_OBJ[taskDetailInfo.historyStates] }}
</div>
<div v-else-if="taskDetailInfo.historyStates == 3" class="tag tag-not-passed">
{{ TASK_STATUS_OBJ[taskDetailInfo.historyStates] }}
</div>
</div> </div>
<n-divider class="divider-line" /> <n-divider class="divider-line" />
<div class="property"> <div class="property">

@ -1,82 +1,83 @@
<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, onUnmounted, onUpdated, reactive, ref, unref, watch } from "vue"; import { computed, onUnmounted, onUpdated, reactive, ref, unref, watch } from 'vue'
import PictureInfo from "../components/PictureInfo.vue"; import PictureInfo from '../components/PictureInfo.vue'
import ConfrimModal from "../modal/ConfrimModal.vue"; import ConfrimModal from '../modal/ConfrimModal.vue'
import type { ApprovalParam, SimilarityPictureSortParam } from "/#/api"; import type { ApprovalParam, SimilarityPictureSortParam } from '/#/api'
const batch = ref(false); // const batch = ref(false) //
const selectItems = ref<any[]>([]); const selectItems = ref<any[]>([])
const message = useMessage(); const message = useMessage()
const dialog = useDialog(); const dialog = useDialog()
const totalCount = ref(0); const totalCount = ref(0)
let _imagesload: any; 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 { else
batch.value = value; 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) selectItems.value.push(item); if (index === -1 && checked)
else selectItems.value.splice(index, 1); selectItems.value.push(item)
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)
let canloadMore = true;
let processItems: any[] = []
let processItems: any[] = [];
function validate(items: any[]) { function validate(items: any[]) {
if (items.length === 0) return "至少选中一个任务"; if (items.length === 0)
return '至少选中一个任务'
// for (const item of items) { // for (const item of items) {
// const { iztrueorfalse, history, states } = item // const { iztrueorfalse, history, states } = item
@ -90,355 +91,390 @@ 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
} }
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) return; if (loading.value || el.value == null)
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) { }
canloadMore = false; catch (error) {
return []; canloadMore = false
return []
} }
} }
const layout = debounce(() => { const layout = debounce(() => {
if (el.value == null) return; if (el.value == null)
return
_imagesload = imagesloaded(".grid-item"); _imagesload = imagesloaded('.grid-item')
_imagesload.on("done", (instance) => { _imagesload.on('done', (instance) => {
if (!el.value) return; if (!el.value)
loading.value = false; return
}); 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' : '',
})); }))
// //
const 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
return;
} }
// 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) {
if (item?.historyStates === 2 || item?.historyStates == 3) { if (item?.historyStates === 2 || item?.historyStates == 3) {
overTask.value = null; overTask.value = null
return; return
} }
if (validate([item]) == null && batch.value === false) overTask.value = item; if (validate([item]) == null && batch.value === false)
overTask.value = item
} }
function leaveTaskHandler() { function leaveTaskHandler() {
overTask.value = null; overTask.value = null
}
function onEsc() {
if (isFullScreen.value && !(document.querySelector('.n-modal-container')))
isFullScreen.value = false
} }
onUnmounted(() => { onUnmounted(() => {
workStore.reset(); workStore.reset()
}); document.removeEventListener('keydown', onEsc)
})
onMounted(() => {
document.addEventListener('keydown', onEsc)
})
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) overTask.value = item; if (batch.value === false)
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) { }
cloneItem = clone(overTask.value); else if (overTask.value) {
processItems = [cloneItem]; cloneItem = clone(overTask.value)
processItems = [cloneItem]
} }
// => => / // => => /
if (items !== undefined && !(items instanceof PointerEvent)) processItems = [items]; if (items !== undefined && !(items instanceof PointerEvent))
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() {
dialog.info({
title: '确认提示',
content: '确认将图片移入可疑文件夹吗?',
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
audit(param).then(async (res) => {
const { code } = res
if (code === 'OK') {
dubiousfileyd(taskDetailInfo.value.pictureId).then(() => {
refreshHandler()
})
}
else { message.error(res.message) }
})
},
onNegativeClick: () => { },
})
} }
defineExpose({ defineExpose({
queryDetail, queryDetail,
}); })
</script> </script>
<template> <template>
@ -457,18 +493,18 @@ defineExpose({
</div> </div>
<div class="icon-wrap"> <div class="icon-wrap">
<SvgIcon <SvgIcon
size="20"
v-if="isFullScreen" v-if="isFullScreen"
size="20"
name="power-off" name="power-off"
@click="immersionHandler"
style="cursor: pointer" style="cursor: pointer"
@click="immersionHandler"
/> />
<SvgIcon <SvgIcon
size="20"
v-else v-else
size="20"
name="immersion-model" name="immersion-model"
@click="immersionHandler"
style="cursor: pointer" style="cursor: pointer"
@click="immersionHandler"
/> />
</div> </div>
</div> </div>
@ -508,8 +544,7 @@ 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 taskDetailInfo?.submitDateTimestamp
? format(taskDetailInfo?.submitDateTimestamp, "yyyy-MM-dd HH:mm:ss") ? format(taskDetailInfo?.submitDateTimestamp, "yyyy-MM-dd HH:mm:ss")
: "-" : "-"
@ -519,17 +554,13 @@ defineExpose({
</div> </div>
<div class="status"> <div class="status">
<img <img
v-show="taskDetailInfo?.historyStates === 2" v-show="taskDetailInfo?.historyStates === 2" class="img-status" src="@/assets/images/task/pass.png"
class="img-status"
src="@/assets/images/task/pass.png"
alt="" alt=""
/> >
<img <img
v-show="taskDetailInfo?.historyStates === 3" v-show="taskDetailInfo?.historyStates === 3" class="img-status" src="@/assets/images/task/not_pass.png"
class="img-status"
src="@/assets/images/task/not_pass.png"
alt="" alt=""
/> >
</div> </div>
<!-- 右下信息 --> <!-- 右下信息 -->
<div class="info img-info"> <div class="info img-info">
@ -540,7 +571,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">
@ -555,12 +586,11 @@ 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" <span class="value num">{{ totalCount }}<span class="unit"></span>
>{{ totalCount }}<span class="unit"></span>
</span> </span>
<span class="label">相似匹配</span> <span class="label">相似匹配</span>
</n-gi> </n-gi>
@ -579,38 +609,20 @@ defineExpose({
/> />
</div> </div>
<!-- 操作 --> <!-- 操作 -->
<div <div v-show="overTask && overTask.id === taskDetailInfo.id" class="action" @click.stop="hideAction">
v-show="overTask && overTask.id === taskDetailInfo.id" <SvgIcon v-if="[1].includes(taskDetailInfo.historyStates)" style="cursor: pointer" name="t1" @click.stop="handleApproveMainImage" />
class="action" <SvgIcon v-if="[1].includes(taskDetailInfo.historyStates)" style="cursor: pointer; margin-left: 30px" name="t2" @click.stop="handleRejectMainImage" />
@click.stop="hideAction" <SvgIcon v-if="[1, 2, 3].includes(taskDetailInfo.historyStates)" style="cursor: pointer; margin-left: 30px" name="t9" @click.stop="handleRejectdubiousfileyd" />
>
<SvgIcon
style="cursor: pointer"
name="t1"
@click.stop="handleApproveMainImage"
/>
<SvgIcon
style="cursor: pointer; margin-left: 30px"
name="t2"
@click.stop="handleRejectMainImage"
/>
</div>
</div> </div>
<PictureInfo :taskDetailInfo="taskDetailInfo"></PictureInfo> <PictureInfo :task-detail-info="taskDetailInfo" />
</div> </div>
<div <div
style="display: flex; justify-content: space-between; padding: 12px 0px 3px 0" style="display: flex; justify-content: space-between; padding: 12px 0px 3px 0"
> >
<div> <div>
<span <span
style=" style="font-size: 18px; font-weight: Medium;color: #333333;font-family: PingFang SC, PingFang SC-Medium;"
font-size: 18px; >任务包图片</span>
font-weight: Medium;
color: #333333;
font-family: PingFang SC, PingFang SC-Medium;
"
>任务包图片</span
>
</div> </div>
<div <div
style=" style="
@ -624,16 +636,16 @@ defineExpose({
<div style="cursor: pointer" @click="sortHandler('createdate')"> <div style="cursor: pointer" @click="sortHandler('createdate')">
<span>时间排序</span> <span>时间排序</span>
<SvgIcon <SvgIcon
v-show="selectedSortName !== 'createdate'"
style="margin-left: 5px" style="margin-left: 5px"
name="sort" name="sort"
size="12" size="12"
v-show="selectedSortName !== 'createdate'"
/> />
<SvgIcon <SvgIcon
v-show="selectedSortName === 'createdate'"
style="margin-left: 5px" style="margin-left: 5px"
name="active-sort" name="active-sort"
size="12" size="12"
v-show="selectedSortName === 'createdate'"
/> />
</div> </div>
<div <div
@ -642,16 +654,16 @@ defineExpose({
> >
<span>相似度排序</span> <span>相似度排序</span>
<SvgIcon <SvgIcon
v-show="selectedSortName !== 'similarityScore'"
style="margin-left: 5px" style="margin-left: 5px"
name="sort" name="sort"
size="12" size="12"
v-show="selectedSortName !== 'similarityScore'"
/> />
<SvgIcon <SvgIcon
v-show="selectedSortName === 'similarityScore'"
style="margin-left: 5px" style="margin-left: 5px"
name="active-sort" name="active-sort"
size="12" size="12"
v-show="selectedSortName === 'similarityScore'"
/> />
</div> </div>
</div> </div>
@ -697,18 +709,21 @@ 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'" />
<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>
</div> </div>
</div> </div>
<div class="pass-status" v-if="item.historyStates === 2"> <div v-if="item.historyStates === 2" class="pass-status">
<SvgIcon name="pass-icon" style="width: 52; height: 24px" /> <SvgIcon name="pass-icon" style="width: 52; height: 24px" />
</div> </div>
<div class="pass-status" v-else-if="item.historyStates === 3"> <div v-else-if="item.historyStates === 3" class="pass-status">
<SvgIcon name="no-pass-icon" style="width: 52; height: 24px" /> <SvgIcon name="no-pass-icon" style="width: 52; height: 24px" />
</div> </div>
<SvgIcon v-if="[1, 2, 3].includes(taskDetailInfo.historyStates)" style="cursor: pointer; margin-left: 30px" name="t9" @click.stop="handleRejectdubiousfileyd" />
<div v-show="overTask && overTask.id === item.id" class="action"> <div v-show="overTask && overTask.id === item.id" class="action">
<SvgIcon style="cursor: pointer" name="t1" @click.stop="approvalHandler" /> <SvgIcon style="cursor: pointer" name="t1" @click.stop="approvalHandler" />
<SvgIcon <SvgIcon
@ -716,8 +731,23 @@ defineExpose({
name="t2" name="t2"
@click.stop="singleRejectHandler(item)" @click.stop="singleRejectHandler(item)"
/> />
<SvgIcon v-if="[1, 2, 3].includes(taskDetailInfo.historyStates)" 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">
<div
style="
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
"
>
回到顶部
</div>
</n-back-top>
</div>
</div> </div>
</div> </div>
</n-spin> </n-spin>
@ -1147,16 +1177,33 @@ defineExpose({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 35px; // width: 35px;
height: 18px; // height: 18px;
opacity: 0.9; opacity: 0.9;
background: #6f92fd; // background: #6f92fd;
border-radius: 6px 0px 6px 0px; border-radius: 6px 0px 6px 0px;
z-index: 5; z-index: 5;
right: 12px; right: 12px;
top: 15px; top: 0;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
.val {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-family: PingFang SC, PingFang SC-Semibold;
font-weight: Semibold;
text-align: left;
color: #ffffff;
line-height: 24px;
}
} }
.percent-unit { .percent-unit {
@ -1203,6 +1250,10 @@ defineExpose({
justify-content: center; justify-content: center;
background-color: rgba(0, 0, 0, 0.48); background-color: rgba(0, 0, 0, 0.48);
} }
<<<<<<< HEAD
=======
>>>>>>> test
} }
} }
} }

@ -1,10 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter"; import { difference } from 'lodash-es'
import { workPackageMap } from "@/config/workorder"; import { computed, defineEmits, defineProps, onMounted, ref, watch } from 'vue'
import { useUser } from "@/store/modules/user"; import { VueDraggable } from 'vue-draggable-plus'
import { difference } from "lodash-es"; import { getAllfieldList, getfieldList, savefield } from '@/api/home/filter'
import { computed, defineEmits, defineProps, onMounted, ref, watch } from "vue"; import { workPackageMap } from '@/config/workorder'
import { VueDraggable } from "vue-draggable-plus"; import { useUser } from '@/store/modules/user'
const props = defineProps({ const props = defineProps({
reviewType: { reviewType: {
@ -12,304 +12,319 @@ 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 searchKey = ref('')
const searchFixVal = ref('')
const allCount = computed(() => { const allCount = computed(() => {
return `全部字段(共${offList.value.length - 1}个)`; return `全部字段(共${offList.value.length - 1}个)`
}); })
const showOffList = computed(() => {
return offList.value.filter((i) => {
console.log(i.name, searchKey.value, 'i.name.includes(searchKey.value)')
return i.name.includes(searchKey.value)
})
})
const showFixList = computed(() => {
return fixList.value.filter(i => i.name.includes(searchFixVal.value))
})
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 }; console.log(offList.value, 'console.log(offList.value)')
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];
} else {
return acc;
} }
}, []); return [...acc, config]
}
else {
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 userField = ""; let userField = ''
fixList.value.map((v) => { fixList.value.map((v) => {
userField += `${v.id},`; userField += `${v.id},`
}); })
onList.value.map((v) => { onList.value.map((v) => {
userField += `${v.id},`; userField += `${v.id},`
}); })
userField = userField.slice(0, userField.length - 1); userField = userField.slice(0, userField.length - 1)
savefield(props.reviewType, userInfo.id, userField); savefield(props.reviewType, userInfo.id, userField)
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)
} }
} }
selectIds.value = value ? ids : []; selectIds.value = value ? ids : []
} }
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; item.checked = checked
if (index === -1 && checked) selectIds.value.push(item.id); if (index === -1 && checked)
else selectIds.value.splice(index, 1); 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) return; if (newVal === oldVal)
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) return; if (diff.length === 0)
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,
}); })
}
} }
} }
} 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)
index--; index--
} }
} }
} }
} },
); )
watch( watch(
() => showIds.value.length, () => showIds.value.length,
(newVal, oldVal) => { (newVal, oldVal) => {
if (newVal === oldVal) return; if (newVal === oldVal)
return
const diff = difference(selectIds.value, showIds.value); const diff = difference(selectIds.value, showIds.value)
if (diff.length === 0) return; if (diff.length === 0)
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
}); })
} }
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) onList.value.splice(index, 1); if (index !== -1)
onList.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
} }
const 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 = []
}; }
const getData = async () => { async function getData() {
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(',')
allList.map((v) => { allList.map((v) => {
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: 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 { else
offList.value.push(item); offList.value.push(item)
} })
}); offList.value.unshift(...fixList.value)
offList.value.unshift(...fixList.value); 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);
if (!item.fix) {
onList.value.push(item);
} }
selectIds.value.push(item.id)
if (!item.fix)
onList.value.push(item)
}
})
} }
});
};
onMounted(async () => { onMounted(async () => {
getData(); 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 (
onList.value.length > 0 && onList.value.length > 0
offList.value.length - baseNum > onList.value.length && offList.value.length - baseNum > onList.value.length
); )
}); })
</script> </script>
<template> <template>
@ -338,7 +353,7 @@ const indeterminate = computed(() => {
:bordered="false" :bordered="false"
> >
<div> <div>
<n-input placeholder="搜索关键词"> <n-input v-model:value="searchKey" placeholder="搜索关键词">
<template #suffix> <template #suffix>
<SvgIcon size="14px" name="magnifying-1" /> <SvgIcon size="14px" name="magnifying-1" />
</template> </template>
@ -348,13 +363,13 @@ const indeterminate = computed(() => {
<n-checkbox <n-checkbox
v-model:checked="checkAll" v-model:checked="checkAll"
label="全选" label="全选"
@update:checked="onCheckAllChange"
:indeterminate="indeterminate" :indeterminate="indeterminate"
@update:checked="onCheckAllChange"
/> />
</div> </div>
<div class="content"> <div class="content">
<div <div
v-for="item in offList" v-for="item in showOffList"
:key="item.id" :key="item.id"
style="width: 170px" style="width: 170px"
:class="{ 'disable-check': item.fix }" :class="{ 'disable-check': item.fix }"
@ -384,14 +399,14 @@ const indeterminate = computed(() => {
<span class="textbtnStyle" @click="clearDragSource"></span> <span class="textbtnStyle" @click="clearDragSource"></span>
</template> </template>
<div> <div>
<n-input placeholder="搜索关键词"> <n-input v-model:value="searchFixVal" placeholder="搜索关键词">
<template #suffix> <template #suffix>
<SvgIcon size="14px" name="magnifying-1" /> <SvgIcon size="14px" name="magnifying-1" />
</template> </template>
</n-input> </n-input>
<div class="draggable-ul"> <div class="draggable-ul">
<div <div
v-for="item in fixList" v-for="item in showFixList"
:key="item.id" :key="item.id"
:class="{ fix: item.fix }" :class="{ fix: item.fix }"
class="cursor-move draggable-item" class="cursor-move draggable-item"
@ -429,7 +444,9 @@ const indeterminate = computed(() => {
</div> </div>
<template #footer> <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button type="info" @click="handleSumbit" style="background-color: #507AFD;"> 确定 </n-button> <n-button type="info" style="background-color: #507AFD;" @click="handleSumbit">
确定
</n-button>
<n-button secondary style="margin-left: 15px" @click="getData();closeModal();"> <n-button secondary style="margin-left: 15px" @click="getData();closeModal();">
取消 取消
</n-button> </n-button>

Loading…
Cancel
Save