feat: 一键查重高级筛选逻辑补全,修复左侧操作栏隐藏后svg展示问题

pull/66/head
刘释隆 1 year ago
parent bb15ba824f
commit 0533b7faa3

@ -31,7 +31,7 @@ Object.keys(asideMap).forEach((key) => {
console.log("asideMap和asideValue", asideValue);
})
const filterModalRef = ref(null)
const filterModalRef:any = ref(null)
const newFilterModalRef = ref(null)
const customModalRef = ref(null)
const customObjRef = ref<any>(null) //
@ -97,7 +97,7 @@ configStore.$subscribe(() => {
const defaultKeys = Object.keys(asideMap).filter(key => asideMap[key].isDefaultFilter)// asideMap isDefaultFilter
showKeys.unshift(...defaultKeys)
*/
const showKeys = [...customConfig];
Object.keys(config).forEach((key) => {
@ -164,6 +164,13 @@ const showSearch = ref(false)
function setShowSearch(value: boolean) {
showSearch.value = value
}
const newFilterOk = () => {
console.log('home', 'newFilterOk',filterModalRef.value);
filterModalRef.value.query(
filterModalRef.value.pagination.page,
filterModalRef.value.pagination.pageSize
);
};
// key
function scrollHandler(key: string) {
@ -211,7 +218,12 @@ watch(asideValue, (newVal) => {
</script>
<template>
<div class="aside" :style="asideStyle" @mouseenter="asideEnter = true" @mouseleave="asideEnter = false">
<div
class="aside"
:style="asideStyle"
@mouseenter="asideEnter = true"
@mouseleave="asideEnter = false"
>
<div v-show="showCollapse" class="aside-collapse">
<div class="aside-collapse-btn" @click="collapseHandler">
<SvgIcon :name="collapseIcon" size="40" />
@ -220,23 +232,40 @@ watch(asideValue, (newVal) => {
<n-scrollbar trigger="none">
<div class="aside-header">
<!-- 搜索跳转模块 -->
<Search v-show="showSearch" @select="scrollHandler" @close="setShowSearch(false)" />
<Search
v-show="showSearch"
@select="scrollHandler"
@close="setShowSearch(false)"
/>
<!-- 高级筛选 -->
<AdvanceFilter
v-show="!showSearch" :type="0" @select="filterHandler" @update:search="setShowSearch(true)"
@show-custom="showModal(customModalRef)" @show-filter="showModal(filterModalRef)"
v-show="!showSearch"
:type="0"
@select="filterHandler"
@update:search="setShowSearch(true)"
@show-custom="showModal(customModalRef)"
@show-filter="showModal(filterModalRef)"
/>
</div>
<component
:is="item.config.component" v-for="(item, index) in showItems" :id="item.key" :key="index" v-model:value="asideValue[item.key]"
:label="item.config.label" @update:value="e=>updateComponent(item.key, e)"
:is="item.config.component"
v-for="(item, index) in showItems"
:id="item.key"
:key="index"
v-model:value="asideValue[item.key]"
:label="item.config.label"
@update:value="(e) => updateComponent(item.key, e)"
/>
<!-- 过滤列表 -->
<FilterModalVue ref="filterModalRef" @edit-filter="editFilter" @show-new-filter="showModal(newFilterModalRef)" />
<FilterModalVue
ref="filterModalRef"
@edit-filter="editFilter"
@show-new-filter="showModal(newFilterModalRef)"
/>
<!-- 新增过滤 -->
<NewFilterModalVue ref="newFilterModalRef" />
<NewFilterModalVue ref="newFilterModalRef" @onOk="newFilterOk" />
<!-- 筛选 -->
<CustomFilterModalVue ref="customModalRef" />
</n-scrollbar>
@ -248,7 +277,7 @@ watch(asideValue, (newVal) => {
display: flex;
position: relative;
flex-direction: column;
background: #FFF;
background: #fff;
border: 1px solid #efeff5;
border-radius: 3px;
box-sizing: border-box;
@ -285,11 +314,17 @@ watch(asideValue, (newVal) => {
right: -20px;
}
::v-deep(.n-collapse .n-collapse-item.n-collapse-item--right-arrow-placement .n-collapse-item__header .n-collapse-item-arrow) {
::v-deep(.n-collapse
.n-collapse-item.n-collapse-item--right-arrow-placement
.n-collapse-item__header
.n-collapse-item-arrow) {
margin-left: 8px;
}
::v-deep(.n-collapse .n-collapse-item .n-collapse-item__header .n-collapse-item__header-main) {
::v-deep(.n-collapse
.n-collapse-item
.n-collapse-item__header
.n-collapse-item__header-main) {
font-weight: bold;
justify-content: space-between;
}
@ -302,11 +337,18 @@ watch(asideValue, (newVal) => {
border-top: 0px;
}
::v-deep(.n-collapse .n-collapse-item .n-collapse-item__content-wrapper .n-collapse-item__content-inner) {
::v-deep(.n-collapse
.n-collapse-item
.n-collapse-item__content-wrapper
.n-collapse-item__content-inner) {
padding-top: 10px;
}
::v-deep(.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar) {
::v-deep(.n-scrollbar
> .n-scrollbar-rail.n-scrollbar-rail--vertical
> .n-scrollbar-rail__scrollbar, .n-scrollbar
+ .n-scrollbar-rail.n-scrollbar-rail--vertical
> .n-scrollbar-rail__scrollbar) {
width: 0px;
}
}

@ -156,12 +156,16 @@ const inputHandler = debounce((word) => {
getSearchedList(word);
}, 300);
function getSearchedList(word) {
function getSearchedList(word, isScroll = false) {
if (word) {
pagination.pageSize = 300;
} else {
}
if (!word) {
pagination.pageSize = 10;
}
if (isScroll) {
pagination.pageSize = 300;
}
ruleForm.keyword = word;
featchList().then((list) => {
let dataArr: FilterEntity[] = [];
@ -233,9 +237,16 @@ function unFavoriteHandler(event: MouseEvent, item) {
}
}
const handleScroll= (event)=>{
console.log(event)
}
const handleScroll = (event) => {
let timer;
if (timer) {
clearTimeout(timer);
} else {
timer = setTimeout(() => {
getSearchedList("", true);
}, 2000);
}
};
const moveEnd = () => {
unData.value.map((v, index) => {
@ -438,7 +449,7 @@ const moveEnd = () => {
align-items: center;
}
}
::v-deep(.wrapper-left-popover .n-form-item){
::v-deep(.wrapper-left-popover .n-form-item) {
display: block !important;
}
</style>

@ -1,105 +1,107 @@
<script lang="ts" setup>
import type { FormInst, FormItemRule, FormRules } from 'naive-ui'
import { computed, defineOptions, onBeforeMount, reactive, ref, unref, watch } from 'vue'
import { asideMap } from '@/config/aside'
import { useDictionary } from '@/store/modules/dictonary'
import { useConfig } from '@/store/modules/asideConfig'
import type { FilterCondition } from '/#/api'
import { addCondition, updateCondition } from '@/api/home/filter'
import { formatToDate2, formatToDate3 } from '@/utils/dateUtil'
type Status = 'edit' | 'new'
const show = ref(false)
const configStore = useConfig()
const dicStore = useDictionary()
const currentStatus = ref<Status>('new')
let currentEditId: string | null = null
import type { FormInst, FormItemRule, FormRules } from "naive-ui";
import { computed, defineOptions, onBeforeMount, reactive, ref, unref, watch } from "vue";
import { asideMap } from "@/config/aside";
import { useDictionary } from "@/store/modules/dictonary";
import { useConfig } from "@/store/modules/asideConfig";
import type { FilterCondition } from "/#/api";
import { addCondition, updateCondition } from "@/api/home/filter";
import { formatToDate2, formatToDate3 } from "@/utils/dateUtil";
type Status = "edit" | "new";
const show = ref(false);
const configStore = useConfig();
const dicStore = useDictionary();
const currentStatus = ref<Status>("new");
let currentEditId: string | null = null;
const emit = defineEmits(["onOk"]);
const modalTitle = computed(() => {
return currentStatus.value === 'new' ? '新建过滤条件' : '编辑过滤条件'
})
return currentStatus.value === "new" ? "新建过滤条件" : "编辑过滤条件";
});
const cardStyle = {
'width': '800px',
'--n-padding-bottom': '10px',
'--n-padding-left': '10px',
}
width: "800px",
"--n-padding-bottom": "10px",
"--n-padding-left": "10px",
};
const noBorderInput = {
'--n-border': '0px',
'--n-border-hover': '0px',
'--n-border-pressed': '0px',
}
"--n-border": "0px",
"--n-border-hover": "0px",
"--n-border-pressed": "0px",
};
const formItemStyle = {
'--n-label-height': '0px',
'--n-feedback-height': '8px',
}
"--n-label-height": "0px",
"--n-feedback-height": "8px",
};
interface FormType {
name: string | null
logic: string | null
conditions: Condition[]
name: string | null;
logic: string | null;
conditions: Condition[];
}
interface Condition {
type: string | null
operator: string | null
result: any
type: string | null;
operator: string | null;
result: any;
}
interface Option {
label: string
value: string
label: string;
value: string;
}
const rules: FormRules = {
name: {
required: true,
message: '请输入过滤条件名称',
trigger: 'blur',
message: "请输入过滤条件名称",
trigger: "blur",
},
logic: {
required: true,
message: '请选择逻辑关系',
trigger: 'blur',
message: "请选择逻辑关系",
trigger: "blur",
},
conditions: {
required: true,
validator(rule: FormItemRule, value: Condition[]) {
for (const item of value) {
const { type, operator, result } = item
const { type, operator, result } = item;
if (type === null || operator === null || result === null)
return new Error('请选择过滤条件')
return new Error("请选择过滤条件");
}
return true
return true;
},
trigger: ['input', 'blur'],
trigger: ["input", "blur"],
},
}
};
const formRef = ref<FormInst | null>(null)
const formRef = ref<FormInst | null>(null);
const formValue = reactive<FormType>({
name: null,
logic: 'where',
conditions: [{
type: null,
operator: 'eq',
result: null,
}],
})
logic: "where",
conditions: [
{
type: null,
operator: "eq",
result: null,
},
],
});
function handleSumbit(e: MouseEvent) {
e.preventDefault()
e.preventDefault();
formRef.value?.validate((errors) => {
if (errors)
return
if (errors) return;
const list = formValue.conditions.map((item, index) => {
const { type, operator, result } = item
const { type, operator, result } = item;
return {
searchfield: type!,
@ -107,191 +109,202 @@ function handleSumbit(e: MouseEvent) {
searchvalue: formatValue(type!, result),
searchRelationType: formValue.logic!,
orderNum: index + 1,
}
})
};
});
const param: FilterCondition = {
searchname: formValue.name!,
type: 0,
ocrUsersearchchildList: list,
}
if (currentStatus.value === 'new')
addCondition(param)
else
updateCondition({ id: currentEditId!, ...param })
closeModal()
})
};
if (currentStatus.value === "new") addCondition(param);
else updateCondition({ id: currentEditId!, ...param });
emit("onOk");
setTimeout(() => {
closeModal();
}, 300);
});
}
//
function formatValue(searchfield: string, searchvalue: any) {
if (searchfield === 'izyear') {
const start = formatToDate2(searchvalue[0])
const end = formatToDate2(searchvalue[1])
return `${start}-${end}`
if (searchfield === "izyear") {
const start = formatToDate2(searchvalue[0]);
const end = formatToDate2(searchvalue[1]);
return `${start}-${end}`;
}
if (searchfield === 'izsimilarity' && Array.isArray(searchvalue))
return searchvalue.join(',')
if (searchfield === "izsimilarity" && Array.isArray(searchvalue))
return searchvalue.join(",");
return searchvalue
return searchvalue;
}
//
function unformatValue(searchfield: string, searchvalue: any) {
// 2022/01/03-2023/02/04
if (searchfield === 'izyear') {
const dataStrs = searchvalue.split('-')
const start = formatToDate3(dataStrs[0])
const end = formatToDate3(dataStrs[1])
return [start, end]
if (searchfield === "izyear") {
const dataStrs = searchvalue.split("-");
const start = formatToDate3(dataStrs[0]);
const end = formatToDate3(dataStrs[1]);
return [start, end];
}
// 80,90
if (searchfield === 'izsimilarity')
return searchvalue.split(',')
if (searchfield === "izsimilarity") return searchvalue.split(",");
return searchvalue
return searchvalue;
}
function createCondition() {
formValue.conditions.push({
type: null,
operator: 'eq',
operator: "eq",
result: null,
})
});
}
function removeCondition(index: number) {
formValue.conditions.splice(index, 1)
formValue.conditions.splice(index, 1);
}
function formLabel(index: number) {
return index === 0 ? '筛选条件' : ''
return index === 0 ? "筛选条件" : "";
}
const typeOptions = ref<Option[]>([])
const typeOptions = ref<Option[]>([]);
const operatorOptions = [
{
label: '等于',
value: 'eq',
label: "等于",
value: "eq",
},
{
label: '不等于',
value: 'notEq',
label: "不等于",
value: "notEq",
},
]
];
const logicOptions = ref([])
const logicOptions = ref([]);
const similarityOptions = [
{
label: '80%-90%',
label: "80%-90%",
value: [80, 90],
},
{
label: '95%-100%',
label: "95%-100%",
value: [95, 100],
},
{
label: '100%-100%',
label: "100%-100%",
value: [100, 100],
},
]
];
onBeforeMount(() => {
dicStore.fetchRelationTypeList()
})
dicStore.fetchRelationTypeList();
});
watch(() => dicStore.relationTypeList, (newval) => {
logicOptions.value = newval
})
watch(
() => dicStore.relationTypeList,
(newval) => {
logicOptions.value = newval;
}
);
function showModal() {
const list = generateAllData(configStore.systemConfig)
typeOptions.value = list
show.value = true
const list = generateAllData(configStore.systemConfig);
typeOptions.value = list;
show.value = true;
}
function closeModal() {
show.value = false
show.value = false;
}
function generateAllData(config): Option[] {
const initVal: Option[] = []
const initVal: Option[] = [];
const list = Object.keys(config).reduce((acc, value) => {
if (value.startsWith('iz') && asideMap[value]?.inFilterList !== false) {
const name = asideMap[value]?.label
name && acc.push({
value,
label: name || '未配置',
})
if (value.startsWith("iz") && asideMap[value]?.inFilterList !== false) {
const name = asideMap[value]?.label;
name &&
acc.push({
value,
label: name || "未配置",
});
}
return acc
}, initVal)
return acc;
}, initVal);
return list
return list;
}
watch(() => configStore.systemConfig, (newVal) => {
if (!newVal)
return
watch(
() => configStore.systemConfig,
(newVal) => {
if (!newVal) return;
const list = generateAllData(newVal)
typeOptions.value = list
})
const list = generateAllData(newVal);
typeOptions.value = list;
}
);
function getOptions(key: string) {
if (key === 'izsimilarity')
return similarityOptions
if (key === "izsimilarity") return similarityOptions;
const getterName = `get${key}`
const options = unref(dicStore[getterName])
return options || []
const getterName = `get${key}`;
const options = unref(dicStore[getterName]);
return options || [];
}
function leaveHandler() {
currentStatus.value = 'new'
currentEditId = null
currentStatus.value = "new";
currentEditId = null;
formValue.name = null
formValue.name = null;
formValue.conditions = [
{
type: null,
operator: 'eq',
operator: "eq",
result: null,
},
]
];
}
function edit(editFilter: any) {
currentStatus.value = 'edit'
currentStatus.value = "edit";
const { searchname, ocrUsersearchchildList, id } = editFilter
currentEditId = id
formValue.name = searchname
const { searchname, ocrUsersearchchildList, id } = editFilter;
currentEditId = id;
formValue.name = searchname;
formValue.conditions = ocrUsersearchchildList.map((item) => {
return {
type: item.searchfield,
operator: item.searchtype,
result: unformatValue(item.searchfield, item.searchvalue),
}
})
};
});
}
defineExpose({
showModal,
edit,
})
});
</script>
<template>
<n-modal v-model:show="show" transform-origin="center" @after-leave="leaveHandler">
<n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
<n-card
:style="cardStyle"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
<div class="wrapper">
<span class="wrapper-title">{{ modalTitle }}</span>
<div class="wrapper-bar">
@ -302,32 +315,61 @@ defineExpose({
<div class="wrapper-form">
<n-form ref="formRef" :model="formValue" :rules="rules">
<n-form-item path="name" label="标题">
<n-input v-model:value="formValue.name" :style="{ width: '780px' }" @keydown.enter.prevent />
<n-input
v-model:value="formValue.name"
:style="{ width: '780px' }"
@keydown.enter.prevent
/>
</n-form-item>
<n-form-item path="logic" label="逻辑关系" v-show="false">
<n-select filterable v-model:value="formValue.logic" placeholder="请选择逻辑关系" :options="logicOptions" />
<n-select
filterable
v-model:value="formValue.logic"
placeholder="请选择逻辑关系"
:options="logicOptions"
/>
</n-form-item>
<n-form-item
v-for="(item, index) in formValue.conditions" :key="index" :style="formItemStyle"
path="conditions" :label="formLabel(index)"
v-for="(item, index) in formValue.conditions"
:key="index"
:style="formItemStyle"
path="conditions"
:label="formLabel(index)"
>
<n-select filterable
v-model:value="item.type" placeholder="请选择筛选项名称" :options="typeOptions"
<n-select
filterable
v-model:value="item.type"
placeholder="请选择筛选项名称"
:options="typeOptions"
/>
<n-select filterable
v-model:value="item.operator" style="margin-left: 8px;" placeholder="请选择"
<n-select
filterable
v-model:value="item.operator"
style="margin-left: 8px"
placeholder="请选择"
:options="operatorOptions"
/>
<n-space v-if="item.type === 'izyear'">
<n-date-picker
v-model:value="item.result" style="margin-left: 8px;width: 240px;" type="daterange"
v-model:value="item.result"
style="margin-left: 8px; width: 240px"
type="daterange"
clearable
/>
</n-space>
<n-select filterable
v-else v-model:value="item.result" style="margin-left: 8px;" placeholder="请选择" :options="getOptions(item.type!)"
<n-select
filterable
v-else
v-model:value="item.result"
style="margin-left: 8px"
placeholder="请选择"
:options="getOptions(item.type!)"
/>
<n-button :style="noBorderInput" icon-placement="right" @click="removeCondition(index)">
<n-button
:style="noBorderInput"
icon-placement="right"
@click="removeCondition(index)"
>
<template #icon>
<SvgIcon size="24" name="close" />
</template>
@ -337,15 +379,13 @@ defineExpose({
</div>
<div class="wrapper-new" @click="createCondition">
<span>+</span>
<span style="margin-left:8px">添加筛选条件</span>
<span style="margin-left: 8px">添加筛选条件</span>
</div>
</div>
<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 type="info" @click="handleSumbit"> </n-button>
<n-button secondary style="margin-left: 15px" @click="closeModal">
取消
</n-button>
</div>
@ -402,7 +442,7 @@ defineExpose({
position: relative;
&:before {
background-color: #1980FF;
background-color: #1980ff;
content: "";
width: 5px;
border-radius: 2px;

@ -186,7 +186,8 @@ defineExpose({
<SvgIcon :name="collapseIcon" size="40" />
</div>
</div>
<div class="aside-header">
<div class="aside-header" :style="`display:${asideWidth == 0?'none':''}`" >
<!-- <div v-show="!showSearch" class="warpper">
<div class="left">
<svg-icon name="all-worksheet" size="32" />

@ -1,106 +1,107 @@
<script lang="ts" setup>
import type { FormInst, FormItemRule, FormRules } from 'naive-ui'
import { computed, onBeforeMount, reactive, ref, unref, watch } from 'vue'
import { asideTaskMap as asideMap } from '@/config/final'
import { useDictionary } from '@/store/modules/dictonary'
import { useConfig } from '@/store/modules/asideConfig'
import type { FilterCondition } from '/#/api'
import { addCondition, updateCondition } from '@/api/home/filter'
import { formatToDate2, formatToDate3 } from '@/utils/dateUtil'
type Status = 'edit' | 'new'
const show = ref(false)
const configStore = useConfig()
const dicStore = useDictionary()
const currentStatus = ref<Status>('new')
let currentEditId: string | null = null
const emit = defineEmits(['onOk'])
import type { FormInst, FormItemRule, FormRules } from "naive-ui";
import { computed, onBeforeMount, reactive, ref, unref, watch } from "vue";
import { asideTaskMap as asideMap } from "@/config/final";
import { useDictionary } from "@/store/modules/dictonary";
import { useConfig } from "@/store/modules/asideConfig";
import type { FilterCondition } from "/#/api";
import { addCondition, updateCondition } from "@/api/home/filter";
import { formatToDate2, formatToDate3 } from "@/utils/dateUtil";
type Status = "edit" | "new";
const show = ref(false);
const configStore = useConfig();
const dicStore = useDictionary();
const currentStatus = ref<Status>("new");
let currentEditId: string | null = null;
const emit = defineEmits(["onOk"]);
const modalTitle = computed(() => {
return currentStatus.value === 'new' ? '新建过滤条件' : '编辑过滤条件'
})
return currentStatus.value === "new" ? "新建过滤条件" : "编辑过滤条件";
});
const cardStyle = {
'width': '800px',
'--n-padding-bottom': '10px',
'--n-padding-left': '10px',
}
width: "800px",
"--n-padding-bottom": "10px",
"--n-padding-left": "10px",
};
const noBorderInput = {
'--n-border': '0px',
'--n-border-hover': '0px',
'--n-border-pressed': '0px',
}
"--n-border": "0px",
"--n-border-hover": "0px",
"--n-border-pressed": "0px",
};
const formItemStyle = {
'--n-label-height': '0px',
'--n-feedback-height': '8px',
}
"--n-label-height": "0px",
"--n-feedback-height": "8px",
};
interface FormType {
name: string | null
logic: string | null
conditions: Condition[]
name: string | null;
logic: string | null;
conditions: Condition[];
}
interface Condition {
type: string | null
operator: string | null
result: any
type: string | null;
operator: string | null;
result: any;
}
interface Option {
label: string
value: string
label: string;
value: string;
}
const rules: FormRules = {
name: {
required: true,
message: '请输入过滤条件名称',
trigger: 'blur',
message: "请输入过滤条件名称",
trigger: "blur",
},
logic: {
required: true,
message: '请选择逻辑关系',
trigger: 'blur',
message: "请选择逻辑关系",
trigger: "blur",
},
conditions: {
required: true,
validator(rule: FormItemRule, value: Condition[]) {
for (const item of value) {
const { type, operator, result } = item
const { type, operator, result } = item;
if (type === null || operator === null || result === null)
return new Error('请选择过滤条件')
return new Error("请选择过滤条件");
}
return true
return true;
},
trigger: ['input', 'blur'],
trigger: ["input", "blur"],
},
}
};
const formRef = ref<FormInst | null>(null)
const formRef = ref<FormInst | null>(null);
const formValue = reactive<FormType>({
name: null,
logic: 'where',
conditions: [{
type: null,
operator: 'eq',
result: null,
}],
})
logic: "where",
conditions: [
{
type: null,
operator: "eq",
result: null,
},
],
});
function handleSumbit(e: MouseEvent) {
e.preventDefault()
e.preventDefault();
formRef.value?.validate((errors) => {
if (errors)
return
if (errors) return;
const list = formValue.conditions.map((item, index) => {
const { type, operator, result } = item
const { type, operator, result } = item;
return {
searchfield: type!,
@ -108,157 +109,167 @@ function handleSumbit(e: MouseEvent) {
searchvalue: formatValue(type!, result),
searchRelationType: formValue.logic!,
orderNum: index + 1,
}
})
};
});
const param: FilterCondition = {
searchname: formValue.name!,
type: 2,
ocrUsersearchchildList: list,
}
if (currentStatus.value === 'new')
addCondition(param)
else
updateCondition({ id: currentEditId!, ...param })
closeModal()
emit('onOk')
})
};
if (currentStatus.value === "new") addCondition(param);
else updateCondition({ id: currentEditId!, ...param });
emit("onOk");
setTimeout(() => {
closeModal();
}, 300);
});
}
function formatValue(searchfield: string, searchvalue: any) {
if (searchfield === 'izuptime') {
const start = formatToDate2(searchvalue[0])
const end = formatToDate2(searchvalue[1])
return `${start}-${end}`
if (searchfield === "izuptime") {
const start = formatToDate2(searchvalue[0]);
const end = formatToDate2(searchvalue[1]);
return `${start}-${end}`;
}
return searchvalue
return searchvalue;
}
//
function unformatValue(searchfield: string, searchvalue: any) {
// 2022/01/03-2023/02/04
if (searchfield === 'izuptime') {
const dataStrs = searchvalue.split('-')
const start = formatToDate3(dataStrs[0])
const end = formatToDate3(dataStrs[1])
return [start, end]
if (searchfield === "izuptime") {
const dataStrs = searchvalue.split("-");
const start = formatToDate3(dataStrs[0]);
const end = formatToDate3(dataStrs[1]);
return [start, end];
}
return searchvalue
return searchvalue;
}
function createCondition() {
formValue.conditions.push({
type: null,
operator: 'eq',
operator: "eq",
result: null,
})
});
}
function removeCondition(index: number) {
formValue.conditions.splice(index, 1)
formValue.conditions.splice(index, 1);
}
function formLabel(index: number) {
return index === 0 ? '筛选条件' : ''
return index === 0 ? "筛选条件" : "";
}
const typeOptions = ref<Option[]>([])
const typeOptions = ref<Option[]>([]);
const operatorOptions = [
{
label: '等于',
value: 'eq',
label: "等于",
value: "eq",
},
{
label: '不等于',
value: 'notEq',
label: "不等于",
value: "notEq",
},
]
];
const logicOptions = ref([])
const logicOptions = ref([]);
onBeforeMount(() => {
dicStore.fetchRelationTypeList()
})
dicStore.fetchRelationTypeList();
});
watch(() => dicStore.relationTypeList, (newval) => {
logicOptions.value = newval
})
watch(
() => dicStore.relationTypeList,
(newval) => {
logicOptions.value = newval;
}
);
function showModal() {
show.value = true
show.value = true;
}
function closeModal() {
show.value = false
show.value = false;
}
function generateAllData(): Option[] {
const initVal: Option[] = []
const initVal: Option[] = [];
const list = Object.keys(asideMap).reduce((acc, value) => {
if (value.startsWith('iz') && asideMap[value]?.inFilterList !== false) {
const name = asideMap[value]?.label
name && acc.push({
value,
label: name || '未配置',
})
if (value.startsWith("iz") && asideMap[value]?.inFilterList !== false) {
const name = asideMap[value]?.label;
name &&
acc.push({
value,
label: name || "未配置",
});
}
return acc
}, initVal)
return acc;
}, initVal);
return list
return list;
}
typeOptions.value = generateAllData()
typeOptions.value = generateAllData();
function getOptions(key: string) {
const getterName = `get${key}`
const options = unref(dicStore[getterName])
return options || []
const getterName = `get${key}`;
const options = unref(dicStore[getterName]);
return options || [];
}
function leaveHandler() {
currentStatus.value = 'new'
currentEditId = null
currentStatus.value = "new";
currentEditId = null;
formValue.name = null
formValue.name = null;
formValue.conditions = [
{
type: null,
operator: 'eq',
operator: "eq",
result: null,
},
]
];
}
function edit(editFilter: any) {
currentStatus.value = 'edit'
currentStatus.value = "edit";
const { searchname, ocrUsersearchchildList, id } = editFilter
currentEditId = id
formValue.name = searchname
const { searchname, ocrUsersearchchildList, id } = editFilter;
currentEditId = id;
formValue.name = searchname;
formValue.conditions = ocrUsersearchchildList.map((item) => {
return {
type: item.searchfield,
operator: item.searchtype,
result: unformatValue(item.searchfield, item.searchvalue),
}
})
};
});
}
defineExpose({
showModal,
edit,
})
});
</script>
<template>
<n-modal v-model:show="show" transform-origin="center" @after-leave="leaveHandler">
<n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
<n-card
:style="cardStyle"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
<div class="wrapper">
<span class="wrapper-title">{{ modalTitle }}</span>
<div class="wrapper-bar">
@ -269,32 +280,61 @@ defineExpose({
<div class="wrapper-form">
<n-form ref="formRef" :model="formValue" :rules="rules">
<n-form-item path="name" label="标题">
<n-input v-model:value="formValue.name" :style="{ width: '780px' }" @keydown.enter.prevent />
<n-input
v-model:value="formValue.name"
:style="{ width: '780px' }"
@keydown.enter.prevent
/>
</n-form-item>
<n-form-item path="logic" label="逻辑关系" v-show="false">
<n-select filterable v-model:value="formValue.logic" placeholder="请选择逻辑关系" :options="logicOptions" />
<n-select
filterable
v-model:value="formValue.logic"
placeholder="请选择逻辑关系"
:options="logicOptions"
/>
</n-form-item>
<n-form-item
v-for="(item, index) in formValue.conditions" :key="index" :style="formItemStyle"
path="conditions" :label="formLabel(index)"
v-for="(item, index) in formValue.conditions"
:key="index"
:style="formItemStyle"
path="conditions"
:label="formLabel(index)"
>
<n-select filterable
v-model:value="item.type" placeholder="请选择筛选项名称" :options="typeOptions"
<n-select
filterable
v-model:value="item.type"
placeholder="请选择筛选项名称"
:options="typeOptions"
/>
<n-select filterable
v-model:value="item.operator" style="margin-left: 8px;" placeholder="请选择"
<n-select
filterable
v-model:value="item.operator"
style="margin-left: 8px"
placeholder="请选择"
:options="operatorOptions"
/>
<n-space v-if="item.type === 'izuptime'">
<n-date-picker
v-model:value="item.result" style="margin-left: 8px;width: 240px;" type="daterange"
v-model:value="item.result"
style="margin-left: 8px; width: 240px"
type="daterange"
clearable
/>
</n-space>
<n-select filterable
v-else v-model:value="item.result" style="margin-left: 8px;" placeholder="请选择" :options="getOptions(item.type!)"
<n-select
filterable
v-else
v-model:value="item.result"
style="margin-left: 8px"
placeholder="请选择"
:options="getOptions(item.type!)"
/>
<n-button :style="noBorderInput" icon-placement="right" @click="removeCondition(index)">
<n-button
:style="noBorderInput"
icon-placement="right"
@click="removeCondition(index)"
>
<template #icon>
<SvgIcon size="24" name="close" />
</template>
@ -304,15 +344,13 @@ defineExpose({
</div>
<div class="wrapper-new" @click="createCondition">
<span>+</span>
<span style="margin-left:8px">添加筛选条件</span>
<span style="margin-left: 8px">添加筛选条件</span>
</div>
</div>
<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 type="info" @click="handleSumbit"> </n-button>
<n-button secondary style="margin-left: 15px" @click="closeModal">
取消
</n-button>
</div>
@ -369,7 +407,7 @@ defineExpose({
position: relative;
&:before {
background-color: #1980FF;
background-color: #1980ff;
content: "";
width: 5px;
border-radius: 2px;

Loading…
Cancel
Save