Merge branch 'test' of https://git.mcnetmart.com/guoxiangbin/ocr-web into fix/suspiciousSort

pull/168/head
raofuzi 1 year ago
commit 28dde2bfa4

1
components.d.ts vendored

@ -11,6 +11,7 @@ declare module 'vue' {
BasicModal: typeof import('./src/components/Modal/BasicModal.vue')['default'] BasicModal: typeof import('./src/components/Modal/BasicModal.vue')['default']
DataHeader: typeof import('./src/components/DataHeader/index.vue')['default'] DataHeader: typeof import('./src/components/DataHeader/index.vue')['default']
NAvatar: typeof import('naive-ui')['NAvatar'] NAvatar: typeof import('naive-ui')['NAvatar']
NBackTop: typeof import('naive-ui')['NBackTop']
NButton: typeof import('naive-ui')['NButton'] NButton: typeof import('naive-ui')['NButton']
NCard: typeof import('naive-ui')['NCard'] NCard: typeof import('naive-ui')['NCard']
NCheckbox: typeof import('naive-ui')['NCheckbox'] NCheckbox: typeof import('naive-ui')['NCheckbox']

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

@ -22,7 +22,7 @@ export async function getPackageList(params: PageParam, packageName: string) {
} }
/** /**
* - * -
* @returns * @returns
*/ */
export async function getPackagePicture(params: PageParam, packagename: string) { export async function getPackagePicture(params: PageParam, packagename: string) {
@ -62,12 +62,11 @@ export async function getPackageTaskList(packageid: string, params: PageParam) {
} }
/** /**
* - * -
* @param checkDuplicateId id * @param checkDuplicateId id
* @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',
@ -94,7 +103,7 @@ export async function getPictureSimilarityList(params: PageParam & PictureSortPa
const { data: { records, pages, total } } = res const { data: { records, pages, total } } = res
// 精简一下数据 // 精简一下数据
const list = records.map((item,index) => { const list = records.map((item, index) => {
return { return {
id: item.id, id: item.id,
checkDuplicateId: item.checkDuplicateId, checkDuplicateId: item.checkDuplicateId,
@ -108,9 +117,9 @@ export async function getPictureSimilarityList(params: PageParam & PictureSortPa
iztrueorfalse: item.iztrueorfalse, iztrueorfalse: item.iztrueorfalse,
states: item.states, states: item.states,
history: item.ocpictureid && item.picturecompare && hasHistory(item.ocpictureid, item.picturecompare), history: item.ocpictureid && item.picturecompare && hasHistory(item.ocpictureid, item.picturecompare),
historyStates:item.historyStates, historyStates: item.historyStates,
submitDateTimestamp:item.submitDateTimestamp, submitDateTimestamp: item.submitDateTimestamp,
photoDateTimestamp:item.photoDateTimestamp, photoDateTimestamp: item.photoDateTimestamp,
} }
}) })
return { return {

@ -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>
@ -226,7 +227,7 @@ export default defineComponent({
<!-- 个人中心 --> <!-- 个人中心 -->
<div class="layout-header-trigger layout-header-trigger-min"> <div class="layout-header-trigger layout-header-trigger-min">
<!-- <n-avatar :src="getImgUrl(useInfo.usericon)" round /> --> <!-- <n-avatar :src="getImgUrl(useInfo.usericon)" round /> -->
<n-avatar style="width:36px;height:36px;" :src="(useInfo.usericon && getImgUrl(useInfo.usericon)) || defaultAvatarSrc" round/> <n-avatar style="width:36px;height:36px;" :src="(useInfo.usericon && getImgUrl(useInfo.usericon)) || defaultAvatarSrc" round />
</div> </div>
<!-- 设置 --> <!-- 设置 -->
<UserSettings @logout="doLogout" /> <UserSettings @logout="doLogout" />

@ -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)) {
fixLeftList.value.push(item);
} }
if (userFieldUnFixed?.find((v2) => v2 == v.name)) { if (item.fix) {
onList.value.push(item); mustList.push(item)
if (!userFieldFixed?.length && !userFieldUnFixed?.length)
fixLeftList.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]; return [...acc, config]
} else { }
return acc; 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>
@ -543,7 +554,7 @@ const indeterminate = computed(() => {
.textbtnStyle { .textbtnStyle {
cursor: pointer; cursor: pointer;
color: #507AFD; color: #507AFD;
} }
.drag-wrapper { .drag-wrapper {

@ -42,8 +42,8 @@ const emit = defineEmits<{
const show = ref(false); const show = ref(false);
const cardStyle = { const cardStyle = {
width: "800px", width: "808px",
height: "830px", height: "840px",
"--n-padding-bottom": "10px", "--n-padding-bottom": "10px",
"--n-padding-left": "10px", "--n-padding-left": "10px",
}; };
@ -403,7 +403,7 @@ const handleOk = () => {
<div v-if="!showSearch" class="wrapper-form"> <div v-if="!showSearch" class="wrapper-form">
<n-input <n-input
:style="{ width: '360px', border: '1px solid #cad2dd' }" :style="{ width: '360px', border: '1px solid #cad2dd', height: '24px' }"
placeholder="请输入过滤条件名称搜索" placeholder="请输入过滤条件名称搜索"
@input="inputHandler" @input="inputHandler"
> >
@ -479,17 +479,19 @@ const handleOk = () => {
.wrapper { .wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px; padding: 14px;
&-title { &-title {
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
height: 24px;
} }
&-bar { &-bar {
background-color: #f8f8f8; background-color: #f8f8f8;
width: 100%; width: 100%;
margin-top: 20px; margin-top: 20px;
height: 24px;
} }
&-form { &-form {
@ -500,6 +502,10 @@ const handleOk = () => {
.n-input { .n-input {
width: 300px; width: 300px;
border: 1px solid gray; border: 1px solid gray;
height: 24px;
input {
height: 100%;
}
} }
.msg { .msg {
span { span {
@ -515,12 +521,13 @@ const handleOk = () => {
} }
&-table { &-table {
margin-top: 20px; margin-top: 17px;
} }
&-footer { &-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
padding-bottom: 6px;
} }
&-info { &-info {
@ -583,4 +590,9 @@ const handleOk = () => {
position: relative; position: relative;
left: -80px; left: -80px;
} }
.modal_wrapper {
}
::v-deep(.n-input .n-input__input-el) {
height: 24px;
}
</style> </style>

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]; return [...acc, config]
} else { }
return acc; 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)
onShowList.value = cloneDeep(onList.value); }
} else { else {
onList.value = []; onList.value = []
onShowList.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 { }
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)
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) {
fixList.value.push(item);
} else {
offList.value.push(item);
} }
}); if (item.fix)
offList.value.unshift(...fixList.value); fixList.value.push(item)
else
offList.value.push(item)
})
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); offShowList.value = cloneDeep(offList.value)
fixShowList.value = cloneDeep(fixList.value); fixShowList.value = cloneDeep(fixList.value)
onShowList.value = cloneDeep(onList.value); onShowList.value = cloneDeep(onList.value)
}; }
onMounted(() => getData()); onMounted(() => getData())
const indeterminate = computed(() => { const indeterminate = computed(() => {
let baseNum = 0; let baseNum = 0
offList.value.map((v) => { offList.value.map((v) => {
if (v.fix) { if (v.fix)
baseNum += 1; baseNum += 1
} })
});
return ( return (
onShowList.value.length > 0 && onShowList.value.length > 0
offShowList.value.length - baseNum > onShowList.value.length && offShowList.value.length - baseNum > onShowList.value.length
); )
}); })
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() {
emit('dismisClick', props.mouseOverTask.id) dialog.warning({
title: '确认提示',
content: '确认解散该任务包吗?',
positiveText: '取消',
negativeText: '确定',
negativeButtonProps: {
type: 'info',
ghost: false,
},
positiveButtonProps: {
type: 'default',
},
onPositiveClick: () => {
},
onNegativeClick: () => {
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-es";
import { useWorkOrder } from "@/store/modules/workOrder";
import { isEmpty } from "@/utils";
import { useInfiniteScroll } from "@vueuse/core"; import { useInfiniteScroll } from "@vueuse/core";
import { useMessage } from "naive-ui"; import { useMessage } from "naive-ui";
import { onMounted, reactive, ref, watch } from "vue";
import ApprovalModal from "../modal/ApprovalModal.vue"; import ApprovalModal from "../modal/ApprovalModal.vue";
import ListItem from "./ListItem.vue"; import ListItem from "./ListItem.vue";
import { deletePackage } from "@/api/home/main";
import { useWorkOrder } from "@/store/modules/workOrder";
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: {
@ -22,6 +21,9 @@ defineProps({
default: () => [], default: () => [],
}, },
}); });
const emit = defineEmits(["ApprovalOver"]);
const workStore = useWorkOrder(); const workStore = useWorkOrder();
const data = ref<PackageListItem[]>([]); const data = ref<PackageListItem[]>([]);
const activeId = ref(""); const activeId = ref("");
@ -130,13 +132,11 @@ 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();
@ -144,13 +144,50 @@ function dismisClick(packageId: string) {
} }
}); });
} }
const ApprovalOver = (packageId) => { function ApprovalOver(packageId) {
emit("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 +206,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">

File diff suppressed because it is too large Load Diff

@ -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]; return [...acc, config]
} else { }
return acc; 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 { }
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)
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) {
fixList.value.push(item);
} else {
offList.value.push(item);
} }
}); if (item.fix)
offList.value.unshift(...fixList.value); fixList.value.push(item)
useList.userFieldFixed?.split(",").map((v) => { else
let item = allList.find((v2) => v2.name == v); offList.value.push(item)
})
offList.value.unshift(...fixList.value)
useList.userFieldFixed?.split(',').map((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