Merge pull request 'feat: 一键查重高级筛选逻辑补全,修复左侧操作栏隐藏后svg展示问题' (#66) from al into test

Reviewed-on: #66
pull/69/head
刘释隆 1 year ago
commit 469f4d378f

@ -31,7 +31,7 @@ Object.keys(asideMap).forEach((key) => {
console.log("asideMap和asideValue", asideValue); console.log("asideMap和asideValue", asideValue);
}) })
const filterModalRef = ref(null) const filterModalRef:any = ref(null)
const newFilterModalRef = ref(null) const newFilterModalRef = ref(null)
const customModalRef = ref(null) const customModalRef = ref(null)
const customObjRef = ref<any>(null) // const customObjRef = ref<any>(null) //
@ -164,6 +164,13 @@ const showSearch = ref(false)
function setShowSearch(value: boolean) { function setShowSearch(value: boolean) {
showSearch.value = value showSearch.value = value
} }
const newFilterOk = () => {
console.log('home', 'newFilterOk',filterModalRef.value);
filterModalRef.value.query(
filterModalRef.value.pagination.page,
filterModalRef.value.pagination.pageSize
);
};
// key // key
function scrollHandler(key: string) { function scrollHandler(key: string) {
@ -211,7 +218,12 @@ watch(asideValue, (newVal) => {
</script> </script>
<template> <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 v-show="showCollapse" class="aside-collapse">
<div class="aside-collapse-btn" @click="collapseHandler"> <div class="aside-collapse-btn" @click="collapseHandler">
<SvgIcon :name="collapseIcon" size="40" /> <SvgIcon :name="collapseIcon" size="40" />
@ -220,23 +232,40 @@ watch(asideValue, (newVal) => {
<n-scrollbar trigger="none"> <n-scrollbar trigger="none">
<div class="aside-header"> <div class="aside-header">
<!-- 搜索跳转模块 --> <!-- 搜索跳转模块 -->
<Search v-show="showSearch" @select="scrollHandler" @close="setShowSearch(false)" /> <Search
v-show="showSearch"
@select="scrollHandler"
@close="setShowSearch(false)"
/>
<!-- 高级筛选 --> <!-- 高级筛选 -->
<AdvanceFilter <AdvanceFilter
v-show="!showSearch" :type="0" @select="filterHandler" @update:search="setShowSearch(true)" v-show="!showSearch"
@show-custom="showModal(customModalRef)" @show-filter="showModal(filterModalRef)" :type="0"
@select="filterHandler"
@update:search="setShowSearch(true)"
@show-custom="showModal(customModalRef)"
@show-filter="showModal(filterModalRef)"
/> />
</div> </div>
<component <component
:is="item.config.component" v-for="(item, index) in showItems" :id="item.key" :key="index" v-model:value="asideValue[item.key]" :is="item.config.component"
:label="item.config.label" @update:value="e=>updateComponent(item.key, e)" 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" /> <CustomFilterModalVue ref="customModalRef" />
</n-scrollbar> </n-scrollbar>
@ -248,7 +277,7 @@ watch(asideValue, (newVal) => {
display: flex; display: flex;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
background: #FFF; background: #fff;
border: 1px solid #efeff5; border: 1px solid #efeff5;
border-radius: 3px; border-radius: 3px;
box-sizing: border-box; box-sizing: border-box;
@ -285,11 +314,17 @@ watch(asideValue, (newVal) => {
right: -20px; 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; 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; font-weight: bold;
justify-content: space-between; justify-content: space-between;
} }
@ -302,11 +337,18 @@ watch(asideValue, (newVal) => {
border-top: 0px; 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; 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; width: 0px;
} }
} }

@ -156,12 +156,16 @@ const inputHandler = debounce((word) => {
getSearchedList(word); getSearchedList(word);
}, 300); }, 300);
function getSearchedList(word) { function getSearchedList(word, isScroll = false) {
if (word) { if (word) {
pagination.pageSize = 300; pagination.pageSize = 300;
} else { }
if (!word) {
pagination.pageSize = 10; pagination.pageSize = 10;
} }
if (isScroll) {
pagination.pageSize = 300;
}
ruleForm.keyword = word; ruleForm.keyword = word;
featchList().then((list) => { featchList().then((list) => {
let dataArr: FilterEntity[] = []; let dataArr: FilterEntity[] = [];
@ -234,8 +238,15 @@ function unFavoriteHandler(event: MouseEvent, item) {
} }
const handleScroll = (event) => { const handleScroll = (event) => {
console.log(event) let timer;
if (timer) {
clearTimeout(timer);
} else {
timer = setTimeout(() => {
getSearchedList("", true);
}, 2000);
} }
};
const moveEnd = () => { const moveEnd = () => {
unData.value.map((v, index) => { unData.value.map((v, index) => {

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

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

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

Loading…
Cancel
Save