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

fix:

Browse Source 
优化图鉴管理页面样式
fix/modifyStyle
zhouxiaoan 1 year ago
parent dae1ebcffd
commit 6c734d297c
4 changed files with 602 additions and 541 deletions
Show Stats Download Patch File Download Diff File

345
src/views/final/comp/CustomTabelModal.vue
Unescape View File

@ -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 {

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

@ -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>

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

@ -528,8 +528,9 @@ defineExpose({
<div class="footer-times"> <div class="footer-times">
<div class="time" style="margin-bottom: 4px;"> <div class="time" style="margin-bottom: 4px;">
<SvgIcon color="#FFF" size="16" name="camera" /> <SvgIcon color="#FFF" size="16" name="camera" />
<span class="time-value">{{ taskDetailInfo?.photoDateTimestamp ? format( <span>{{ taskDetailInfo?.photoDateTimestamp }}</span>
taskDetailInfo.photoDateTimestamp, 'yyyy-MM-dd HH:mm:ss') : '-' }} </span> <!-- <span class="time-value">{{ taskDetailInfo?.photoDateTimestamp ? format(
taskDetailInfo.photoDateTimestamp, 'yyyy-MM-dd HH:mm:ss') : '-' }} </span> -->
</div> </div>
<div class="time"> <div class="time">
<SvgIcon color="#FFF" size="16" name="save" /> <SvgIcon color="#FFF" size="16" name="save" />
@ -586,7 +587,7 @@ defineExpose({
<div v-show="overTask && overTask.id === taskDetailInfo.id" class="action" @click.stop="hideAction"> <div v-show="overTask && overTask.id === taskDetailInfo.id" class="action" @click.stop="hideAction">
<SvgIcon v-if="[1].includes(taskDetailInfo.historyStates)" style="cursor: pointer" name="t1" @click.stop="handleApproveMainImage" /> <SvgIcon v-if="[1].includes(taskDetailInfo.historyStates)" style="cursor: pointer" name="t1" @click.stop="handleApproveMainImage" />
<SvgIcon v-if="[1].includes(taskDetailInfo.historyStates)" style="cursor: pointer; margin-left: 30px" name="t2" @click.stop="handleRejectMainImage" /> <SvgIcon v-if="[1].includes(taskDetailInfo.historyStates)" style="cursor: pointer; margin-left: 30px" name="t2" @click.stop="handleRejectMainImage" />
<SvgIcon v-if="[1, 2, 3].includes(taskDetailInfo.historyStates)" style="cursor: pointer; margin-left: 30px" name="t2" @click.stop="handleRejectdubiousfileyd" /> <SvgIcon v-if="[1, 2, 3].includes(taskDetailInfo.historyStates)" style="cursor: pointer; margin-left: 30px" name="t9" @click.stop="handleRejectdubiousfileyd" />
</div> </div>
</div> </div>
<PictureInfo :task-detail-info="taskDetailInfo" /> <PictureInfo :task-detail-info="taskDetailInfo" />
@ -641,8 +642,10 @@ defineExpose({
/> />
</div> </div>
<div class="percent" :class="{ 'percent-red': item?.maxSimilarity >= 100 }"> <div class="percent" :class="{ 'percent-red': item?.maxSimilarity >= 100 }">
<SvgIcon size="42" :name="item.maxSimilarity == 100 ? 'error_tag' : 'tag'" />
<div class="val"> <div class="val">
{{ item?.maxSimilarity && Number(item?.maxSimilarity).toFixed(0) }}<span class="percent-unit">%</span> {{ `${item?.maxSimilarity && Number(item?.maxSimilarity).toFixed(0)}%` }}
<!-- {{ item?.maxSimilarity && Number(item?.maxSimilarity).toFixed(0) }}<span class="percent-unit">%</span> -->
</div> </div>
</div> </div>
@ -652,9 +655,12 @@ defineExpose({
<div v-else-if="item.historyStates === 3" class="pass-status"> <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 style="cursor: pointer;margin-left: 40px;" name="t2" @click.stop="singleRejectHandler(item)" /> <SvgIcon style="cursor: pointer;margin-left: 40px;" name="t2" @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"> <n-back-top :listen-to="wrapperListRef" :bottom="220" :visibility-height="10">
@ -1091,16 +1097,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 {

343
src/views/worksheet/modal/CustomFieldModal.vue
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save