|
|
|
@ -2,10 +2,9 @@
|
|
|
|
|
import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter";
|
|
|
|
|
import { workPackageMap } from "@/config/workorder";
|
|
|
|
|
import { useUser } from "@/store/modules/user";
|
|
|
|
|
import { difference } from "lodash-es";
|
|
|
|
|
import { difference, cloneDeep } from "lodash-es";
|
|
|
|
|
import { computed, defineEmits, defineProps, onMounted, ref, watch } from "vue";
|
|
|
|
|
import { VueDraggable } from "vue-draggable-plus";
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
reviewType: {
|
|
|
|
|
type: Number,
|
|
|
|
@ -23,6 +22,10 @@ const onList = ref<any[]>([]);
|
|
|
|
|
// 固定默认列表
|
|
|
|
|
const fixList = ref<any[]>([]);
|
|
|
|
|
|
|
|
|
|
const offShowList = ref<any[]>([]);
|
|
|
|
|
const onShowList = ref<any[]>([]);
|
|
|
|
|
const fixShowList = ref<any[]>([]);
|
|
|
|
|
|
|
|
|
|
const allCount = computed(() => {
|
|
|
|
|
return `全部筛选(共${offList.value.length - 1}个)`;
|
|
|
|
|
});
|
|
|
|
@ -134,16 +137,23 @@ function onCheckAllChange(value) {
|
|
|
|
|
ids.push(item.id);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
for (const item of offShowList.value) {
|
|
|
|
|
if (!item.fix) {
|
|
|
|
|
item.checked = value;
|
|
|
|
|
ids.push(item.id);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
selectIds.value = value ? ids : [];
|
|
|
|
|
console.log(offList.value,'offList')
|
|
|
|
|
if (value) {
|
|
|
|
|
offList.value.map((v) => {
|
|
|
|
|
if (!v.checked) {
|
|
|
|
|
onList.value.push(v);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
onShowList.value = cloneDeep(onList.value)
|
|
|
|
|
} else {
|
|
|
|
|
onList.value = [];
|
|
|
|
|
onShowList.value = [];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -151,7 +161,8 @@ function onCheckChange(checked: any, item: any) {
|
|
|
|
|
const index = selectIds.value.indexOf(item.id);
|
|
|
|
|
|
|
|
|
|
item.checked = checked;
|
|
|
|
|
|
|
|
|
|
let currentIndex = offList.value.findIndex(v=>v.id == item.id)
|
|
|
|
|
offList.value[currentIndex].checked = item.checked;
|
|
|
|
|
if (index === -1 && checked) selectIds.value.push(item.id);
|
|
|
|
|
else selectIds.value.splice(index, 1);
|
|
|
|
|
}
|
|
|
|
@ -185,12 +196,14 @@ watch(
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
onShowList.value = cloneDeep(onList.value);
|
|
|
|
|
} else {
|
|
|
|
|
const list = onList.value;
|
|
|
|
|
for (let index = 0; index < list.length; index++) {
|
|
|
|
|
const item = list[index];
|
|
|
|
|
if (!item.fix && diff.includes(item.id)) {
|
|
|
|
|
list.splice(index, 1);
|
|
|
|
|
onShowList.value.splice(index, 1);
|
|
|
|
|
index--;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -221,6 +234,7 @@ function clearDragSource() {
|
|
|
|
|
onList.value = onList.value.filter((item) => {
|
|
|
|
|
return item.fix === true;
|
|
|
|
|
});
|
|
|
|
|
onShowList.value = cloneDeep(onList.value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function removeHandler(id: string) {
|
|
|
|
@ -231,9 +245,9 @@ function removeHandler(id: string) {
|
|
|
|
|
|
|
|
|
|
index = offList.value.findIndex((v) => v.id == id);
|
|
|
|
|
offList.value[index].checked = false;
|
|
|
|
|
offShowList.value = cloneDeep(offList.value)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
const getData = async (type = "") => {
|
|
|
|
|
const userStore = useUser();
|
|
|
|
|
const userInfo = userStore.getUserInfo;
|
|
|
|
|
let res;
|
|
|
|
@ -249,42 +263,49 @@ onMounted(async () => {
|
|
|
|
|
*/
|
|
|
|
|
const userFieldFixed = useList.userFieldFixed?.split(",");
|
|
|
|
|
const userFieldUnFixed = useList.userFieldUnFixed?.split(",");
|
|
|
|
|
|
|
|
|
|
allList.map((v) => {
|
|
|
|
|
let item = {
|
|
|
|
|
name: v.fieldDesc,
|
|
|
|
|
id: v.name,
|
|
|
|
|
fix: v.isrequired == 2,
|
|
|
|
|
checked:
|
|
|
|
|
v.isrequired == 2 ||
|
|
|
|
|
Boolean(userFieldFixed?.find((v2) => v2 == v.name)) ||
|
|
|
|
|
Boolean(userFieldUnFixed?.find((v2) => v2 == v.name)),
|
|
|
|
|
};
|
|
|
|
|
if (item.fix) {
|
|
|
|
|
fixList.value.push(item);
|
|
|
|
|
} else {
|
|
|
|
|
offList.value.push(item);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
offList.value.unshift(...fixList.value);
|
|
|
|
|
useList.userFieldFixed?.split(",").map((v) => {
|
|
|
|
|
let item = allList.find((v2) => v2.name == v);
|
|
|
|
|
if (item) {
|
|
|
|
|
item = {
|
|
|
|
|
name: item.fieldDesc,
|
|
|
|
|
id: item.name,
|
|
|
|
|
fix: item.isrequired == 2,
|
|
|
|
|
checked: true,
|
|
|
|
|
if (!type || type == "off") {
|
|
|
|
|
offList.value = [];
|
|
|
|
|
allList.map((v) => {
|
|
|
|
|
let item = {
|
|
|
|
|
name: v.fieldDesc,
|
|
|
|
|
id: v.name,
|
|
|
|
|
fix: v.isrequired == 2,
|
|
|
|
|
checked:
|
|
|
|
|
v.isrequired == 2 ||
|
|
|
|
|
Boolean(userFieldFixed?.find((v2) => v2 == v.name)) ||
|
|
|
|
|
Boolean(userFieldUnFixed?.find((v2) => v2 == v.name)),
|
|
|
|
|
};
|
|
|
|
|
selectIds.value.push(item.id);
|
|
|
|
|
if (!item.fix) {
|
|
|
|
|
onList.value.push(item);
|
|
|
|
|
if (item.fix) {
|
|
|
|
|
fixList.value.push(item);
|
|
|
|
|
} else {
|
|
|
|
|
offList.value.push(item);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
console.log(offList.value, "offList.value");
|
|
|
|
|
console.log(useList, "useList");
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
offList.value.unshift(...fixList.value);
|
|
|
|
|
}
|
|
|
|
|
if (!type || type == "on") {
|
|
|
|
|
useList.userFieldFixed?.split(",").map((v) => {
|
|
|
|
|
let item = allList.find((v2) => v2.name == v);
|
|
|
|
|
if (item) {
|
|
|
|
|
item = {
|
|
|
|
|
name: item.fieldDesc,
|
|
|
|
|
id: item.name,
|
|
|
|
|
fix: item.isrequired == 2,
|
|
|
|
|
checked: true,
|
|
|
|
|
};
|
|
|
|
|
selectIds.value.push(item.id);
|
|
|
|
|
if (!item.fix) {
|
|
|
|
|
onList.value.push(item);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
offShowList.value = cloneDeep(offList.value);
|
|
|
|
|
fixShowList.value = cloneDeep(fixList.value);
|
|
|
|
|
onShowList.value = cloneDeep(onList.value);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
onMounted(() => getData());
|
|
|
|
|
|
|
|
|
|
const indeterminate = computed(() => {
|
|
|
|
|
let baseNum = 0;
|
|
|
|
@ -295,10 +316,28 @@ const indeterminate = computed(() => {
|
|
|
|
|
});
|
|
|
|
|
return onList.value.length > 0 && offList.value.length - baseNum > onList.value.length;
|
|
|
|
|
});
|
|
|
|
|
const queryData = (value, type) => {
|
|
|
|
|
if (value) {
|
|
|
|
|
if (type == "off") {
|
|
|
|
|
offShowList.value = offList.value.filter((item) => item.name.indexOf(value) > -1);
|
|
|
|
|
} else {
|
|
|
|
|
onShowList.value = onList.value.filter((item) => item.name.indexOf(value) > -1);
|
|
|
|
|
fixShowList.value = fixList.value.filter((item) => item.name.indexOf(value) > -1);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
// getData(type);
|
|
|
|
|
if(type == "off") {
|
|
|
|
|
offShowList.value = cloneDeep(offList.value);
|
|
|
|
|
}else{
|
|
|
|
|
onShowList.value = cloneDeep(onList.value);
|
|
|
|
|
fixShowList.value = cloneDeep(fixList.value)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<n-modal v-model:show="show" transform-origin="center">
|
|
|
|
|
<n-modal v-model:show="show" transform-origin="center" :mask-closable="false">
|
|
|
|
|
<n-card
|
|
|
|
|
class="cardstyle"
|
|
|
|
|
:bordered="false"
|
|
|
|
@ -323,7 +362,10 @@ const indeterminate = computed(() => {
|
|
|
|
|
:bordered="false"
|
|
|
|
|
>
|
|
|
|
|
<div>
|
|
|
|
|
<n-input placeholder="搜索关键字">
|
|
|
|
|
<n-input
|
|
|
|
|
placeholder="搜索关键字"
|
|
|
|
|
@input="(value) => queryData(value, 'off')"
|
|
|
|
|
>
|
|
|
|
|
<template #suffix>
|
|
|
|
|
<SvgIcon size="14px" name="magnifying-1" />
|
|
|
|
|
</template>
|
|
|
|
@ -339,7 +381,7 @@ const indeterminate = computed(() => {
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div
|
|
|
|
|
v-for="item in offList"
|
|
|
|
|
v-for="item in offShowList"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
style="width: 170px"
|
|
|
|
|
:class="{ 'disable-check': item.fix }"
|
|
|
|
@ -369,14 +411,18 @@ const indeterminate = computed(() => {
|
|
|
|
|
<span class="textbtnStyle" @click="clearDragSource">恢复默认</span>
|
|
|
|
|
</template>
|
|
|
|
|
<div>
|
|
|
|
|
<n-input placeholder="搜索关键字">
|
|
|
|
|
<n-input
|
|
|
|
|
placeholder="搜索关键字"
|
|
|
|
|
@input="(value) => queryData(value, 'on')"
|
|
|
|
|
>
|
|
|
|
|
<template #suffix>
|
|
|
|
|
<SvgIcon size="14px" name="magnifying-1" />
|
|
|
|
|
</template>
|
|
|
|
|
</n-input>
|
|
|
|
|
<div class="draggable-title">系统默认</div>
|
|
|
|
|
<div class="draggable-ul">
|
|
|
|
|
<div
|
|
|
|
|
v-for="item in fixList"
|
|
|
|
|
v-for="item in fixShowList"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:class="{ fix: item.fix }"
|
|
|
|
|
class="cursor-move draggable-item"
|
|
|
|
@ -384,6 +430,7 @@ const indeterminate = computed(() => {
|
|
|
|
|
<span class="ml-2">{{ item.name }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="draggable-title" style="border-top: none">自定义配置</div>
|
|
|
|
|
<VueDraggable
|
|
|
|
|
v-model="onList"
|
|
|
|
|
class="draggable-ul"
|
|
|
|
@ -391,7 +438,7 @@ const indeterminate = computed(() => {
|
|
|
|
|
group="shared"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
v-for="item in onList"
|
|
|
|
|
v-for="item in onShowList"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:class="{ fix: item.fix }"
|
|
|
|
|
class="cursor-move draggable-item"
|
|
|
|
@ -415,7 +462,7 @@ const indeterminate = computed(() => {
|
|
|
|
|
<template #footer>
|
|
|
|
|
<div class="wrapper-footer">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
@ -480,7 +527,12 @@ const indeterminate = computed(() => {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #1980ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.draggable-title {
|
|
|
|
|
border: 1px solid #cad2dd;
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
color: gray;
|
|
|
|
|
padding: 12px;
|
|
|
|
|
}
|
|
|
|
|
.draggable-ul {
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
@ -548,8 +600,7 @@ const indeterminate = computed(() => {
|
|
|
|
|
::v-deep(.n-button--info-type) {
|
|
|
|
|
background: #507afd !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep(.n-button--default-type){
|
|
|
|
|
::v-deep(.n-button--default-type) {
|
|
|
|
|
border: 1px solid #cad2dd !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|