feat: 修改样式问题及交互逻辑 #121

Merged
liushilong merged 1 commits from feat/ui_error into test 1 year ago

@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { dateZhCN, zhCN } from "naive-ui"; import { dateZhCN, zhCN,NModalProvider } from "naive-ui";
import { computed, onMounted, nextTick,inject } from "vue"; import { computed, onMounted, nextTick,inject } from "vue";
import { AppProvider } from "@/components/Application"; import { AppProvider } from "@/components/Application";
import { lighten } from "@/utils/index"; import { lighten } from "@/utils/index";
@ -59,9 +59,11 @@ const getThemeOverrides = computed(() => {
:date-locale="dateZhCN" :date-locale="dateZhCN"
:theme-overrides="getThemeOverrides" :theme-overrides="getThemeOverrides"
> >
<NModalProvider>
<AppProvider> <AppProvider>
<RouterView /> <RouterView />
</AppProvider> </AppProvider>
</NModalProvider>
</NConfigProvider> </NConfigProvider>
</template> </template>

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>新建</title>
<defs>
<rect id="path-1" x="0" y="0" width="64" height="64"></rect>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="PrevailCloud-Design-图标集" transform="translate(-664.000000, -3118.000000)">
<g id="新建" transform="translate(664.000000, 3118.000000)">
<g transform="translate(0.000000, 0.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="蒙版" fill="#FFFFFF" fill-rule="nonzero" opacity="0" xlink:href="#path-1"></use>
<g id="编组" mask="url(#mask-2)" fill="#FFFFFF">
<g transform="translate(7.000000, 7.000000)" id="形状结合">
<path d="M48,0 C49.1045695,-2.02906125e-16 50,0.8954305 50,2 L50,22 C50,22.5522847 49.5522847,23 49,23 L46,23 C45.4477153,23 45,22.5522847 45,22 L45,5 L5,5 L5,45 L22,45 C22.5522847,45 23,45.4477153 23,46 L23,49 C23,49.5522847 22.5522847,50 22,50 L2,50 C0.8954305,50 1.3527075e-16,49.1045695 0,48 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L48,0 Z M40.8724299,28.8483283 C41.4247147,28.8483283 41.8724299,29.2960436 41.8724299,29.8483283 L41.8724299,36.8483283 L48.8724299,36.8483283 C49.4247147,36.8483283 49.8724299,37.2960436 49.8724299,37.8483283 L49.8724299,40.8483283 C49.8724299,41.4006131 49.4247147,41.8483283 48.8724299,41.8483283 L41.8724299,41.8483283 L41.8724299,48.8483283 C41.8724299,49.4006131 41.4247147,49.8483283 40.8724299,49.8483283 L37.8724299,49.8483283 C37.3201452,49.8483283 36.8724299,49.4006131 36.8724299,48.8483283 L36.8724299,41.8483283 L29.8724299,41.8483283 C29.3201452,41.8483283 28.8724299,41.4006131 28.8724299,40.8483283 L28.8724299,37.8483283 C28.8724299,37.2960436 29.3201452,36.8483283 29.8724299,36.8483283 L36.8724299,36.8483283 L36.8724299,29.8483283 C36.8724299,29.2960436 37.3201452,28.8483283 37.8724299,28.8483283 L40.8724299,28.8483283 Z"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>删除</title>
<defs>
<rect id="path-1" x="0" y="0" width="64" height="64"></rect>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="PrevailCloud-Design-图标集" transform="translate(-1984.000000, -3431.000000)">
<g id="删除" transform="translate(1984.000000, 3431.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="蒙版" fill="#000000" fill-rule="nonzero" opacity="0" xlink:href="#path-1"></use>
<path d="M52.9231991,16 C53.4754839,16 53.9231991,16.4477153 53.9231991,17 L53.9231991,20 C53.9231991,20.5522847 53.4754839,21 52.9231991,21 L49.862,21 L46.8906837,54.9640327 C46.8414748,55.5264927 46.5639593,56.0141255 46.1574353,56.3436103 C45.7935798,56.7212522 45.2824394,56.9564221 44.7163722,56.9564221 L19.2763722,56.9564221 C18.8012585,56.9564221 18.3648389,56.7907533 18.0217296,56.5140319 C17.5531495,56.1861769 17.2269494,55.6610416 17.1731938,55.0466129 L14.194,21 L11,21 C10.4477153,21 10,20.5522847 10,20 L10,17 C10,16.4477153 10.4477153,16 11,16 L52.9231991,16 Z M42.134,51.956 L44.843,21 L19.213,21 L21.922,51.956 L42.134,51.956 Z M39,7 C39.5522847,7 40,7.44771525 40,8 L40,11 C40,11.5522847 39.5522847,12 39,12 L25,12 C24.4477153,12 24,11.5522847 24,11 L24,8 C24,7.44771525 24.4477153,7 25,7 L39,7 Z" id="形状结合" fill="#FFFFFF" mask="url(#mask-2)"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@ -50,7 +50,7 @@ export const asideMap: Recordable<AsideEntity> = {
component: SimilarityVue, component: SimilarityVue,
}, },
izyear: { izyear: {
label: '年份', label: '*年份',
defaultValue: null, defaultValue: null,
isDefaultFilter: true, isDefaultFilter: true,
key: 'izyear', key: 'izyear',

@ -37,7 +37,7 @@ Object.keys(asideMap).forEach((key) => {
if (inFilterList !== false) asideValue[key] = defaultValue; if (inFilterList !== false) asideValue[key] = defaultValue;
}); });
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 AdvanceFilterRef: any = ref(null); const AdvanceFilterRef: any = ref(null);
@ -46,6 +46,15 @@ function showModal(modalRef: any) {
const modal = unref(modalRef)! as any; const modal = unref(modalRef)! as any;
modal.showModal(); modal.showModal();
} }
const newFilterOk = () => {
filterModalRef.value.query(
filterModalRef.value.pagination.page,
filterModalRef.value.pagination.pageSize
);
filterModalRef.value.showModal();
};
const mousetrap = inject("mousetrap") as any; const mousetrap = inject("mousetrap") as any;
mousetrap.bind("[", collapseHandler); mousetrap.bind("[", collapseHandler);
@ -231,7 +240,7 @@ const handleOk = (item: any) => {
@handleOk="handleOk" @handleOk="handleOk"
/> />
<!-- 新增过滤 --> <!-- 新增过滤 -->
<NewFilterModal ref="newFilterModalRef" /> <NewFilterModal ref="newFilterModalRef" @onOk="newFilterOk" />
</n-scrollbar> </n-scrollbar>
</div> </div>
</template> </template>

@ -19,6 +19,11 @@ import Action from "@/views/home/aside/comp/Action.vue";
import { deleteCondition, getConditionList, sort } from "@/api/home/filter"; import { deleteCondition, getConditionList, sort } from "@/api/home/filter";
import type { FilterSearchParam } from "/#/api"; import type { FilterSearchParam } from "/#/api";
import SvgIcon from "@/components/Icon/SvgIcon.vue";
import { useModal, NButton } from "naive-ui";
const modal = useModal();
defineOptions({ name: "FilterModal" }); defineOptions({ name: "FilterModal" });
const emit = defineEmits<{ const emit = defineEmits<{
@ -74,7 +79,13 @@ const columns: DataTableColumns<RowData> = [
{ {
title: "创建时间", title: "创建时间",
key: "createtime", key: "createtime",
sorter: (row1, row2) => new Date(row1?.createtime).getTime() - new Date(row2?.createtime).getTime() renderSorterIcon: ({ order }) => {
if (order === false) return h(SvgIcon, { name: "sort-2" });
if (order === "ascend") return h(SvgIcon, { name: "sort-1" });
if (order === "descend") return h(SvgIcon, { name: "sort-3" });
},
sorter: (row1, row2) =>
new Date(row1?.createtime).getTime() - new Date(row2?.createtime).getTime(),
}, },
{ {
title: "更新者", title: "更新者",
@ -156,7 +167,16 @@ function select(key: number, id: string) {
editSelection(id); editSelection(id);
break; break;
case 2: case 2:
deleteSelection(id); const modalInst = modal.create({
title: "确认提示",
content: "确认删除该条过滤条件吗?",
positiveText: "确定",
negativeText: "取消",
preset: "dialog",
onPositiveClick: () => deleteSelection(id),
onNegativeClick: () => modalInst.destroy(),
});
break; break;
default: default:
break; break;
@ -188,10 +208,18 @@ function deleteSelection(id = "") {
}); });
return; return;
} }
const modalInst = modal.create({
deleteCondition({ ids: selectionIds.value.join(",") }).then(() => { title: "确认提示",
selectionIds.value = []; content: "确认删除所选过滤条件吗?",
query(pagination.page, pagination.pageSize); positiveText: "确定",
negativeText: "取消",
preset: "dialog",
onPositiveClick: () =>
deleteCondition({ ids: selectionIds.value.join(",") }).then(() => {
selectionIds.value = [];
query(pagination.page, pagination.pageSize);
}),
onNegativeClick: () => modalInst.destroy(),
}); });
} }
@ -213,6 +241,7 @@ async function handlePageSizeChange(currentPageSize) {
function handleClick() { function handleClick() {
emit("showNewFilter"); emit("showNewFilter");
// show.value = false; // show.value = false;
closeModal();
} }
let sortTable: Sortable | null = null; let sortTable: Sortable | null = null;
@ -280,8 +309,9 @@ function closeModal() {
defineExpose({ defineExpose({
showModal, showModal,
query,
pagination,
}); });
const inputHandler = debounce((word) => { const inputHandler = debounce((word) => {
keyword.value = word; keyword.value = word;
query(1, 5); query(1, 5);
@ -294,12 +324,16 @@ const showSearch = computed(() => {
<template> <template>
<div> <div>
<!-- <n-modal v-model:show="delShow" >
</n-modal> -->
<n-modal <n-modal
v-model:show="show" v-model:show="show"
transform-origin="center" transform-origin="center"
display-directive="if" display-directive="if"
@after-leave="afterLeave" @after-leave="afterLeave"
:mask-closable="false" :mask-closable="false"
class="modal_wrapper"
> >
<n-card <n-card
:style="cardStyle" :style="cardStyle"
@ -312,7 +346,14 @@ const showSearch = computed(() => {
<span class="wrapper-title">全部筛选值</span> <span class="wrapper-title">全部筛选值</span>
<div class="wrapper-bar"> <div class="wrapper-bar">
<div class="wrapper-info"> <div class="wrapper-info">
<span :style="{ 'margin-left': '18px', 'font-size': '16px','font-weight':'600' }">基本信息</span> <span
:style="{
'margin-left': '18px',
'font-size': '16px',
'font-weight': '600',
}"
>基本信息</span
>
</div> </div>
</div> </div>
<div class="wrapper-form" v-if="!showSearch"> <div class="wrapper-form" v-if="!showSearch">
@ -328,14 +369,14 @@ const showSearch = computed(() => {
<n-button type="info" @click="handleClick"> <n-button type="info" @click="handleClick">
创建 创建
<template #icon> <template #icon>
<SvgIcon size="14px" name="magnifying-1" /> <SvgIcon size="14px" name="creatFilter" />
</template> </template>
</n-button> </n-button>
</div> </div>
<div class="wrapper-form" v-else> <div class="wrapper-form" v-else>
<div class="del_btn"> <div class="del_btn">
<n-button icon-placement="left" size="medium"> <n-button icon-placement="left" size="medium" @click="deleteSelection">
<template #icon> <template #icon>
<SvgIcon name="delete-history" size="16" /> <SvgIcon name="delete-history" size="16" />
</template> </template>
@ -409,13 +450,15 @@ const showSearch = computed(() => {
width: 300px; width: 300px;
border: 1px solid gray; border: 1px solid gray;
} }
.del_btn {
}
.msg { .msg {
span {
padding-right: 16px;
}
a { a {
margin-left: 30px; padding-left: 17px;
cursor: pointer; cursor: pointer;
color: #507afd; color: #507afd;
border-left: 1px solid #d8d8d8;
} }
} }
} }
@ -444,4 +487,29 @@ const showSearch = computed(() => {
} }
} }
} }
.del_btn {
margin-left: 12px;
color: #333333;
font-weight: 500;
}
::v-deep(.n-button--info-type) {
background: #507afd !important;
}
::v-deep(.n-data-table
.n-data-table-th
.n-data-table-th__title-wrapper
.n-data-table-th__title) {
font-size: 14px !important;
color: #000000 !important;
}
::v-deep(.n-data-table
.n-data-table-tr:not(.n-data-table-tr--summary):hover
> .n-data-table-td) {
color: #666666 !important;
font-size: 14px !important;
}
::v-deep(.n-data-table .n-data-table-th .n-data-table-sorter) {
position: relative;
left: -80px;
}
</style> </style>

@ -1,105 +1,108 @@
<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, defineEmits } from "vue";
import { asideMap } from '@/config/final' import { 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 emit = defineEmits(["onOk"]);
const configStore = useConfig()
const dicStore = useDictionary() const show = ref(false);
const currentStatus = ref<Status>('new') const configStore = useConfig();
let currentEditId: string | null = null const dicStore = useDictionary();
const currentStatus = ref<Status>("new");
let currentEditId: string | null = null;
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: 'and', logic: "and",
conditions: [{ conditions: [
type: null, {
operator: 'eq', type: null,
result: null, operator: "eq",
}], 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,193 +110,246 @@ 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: 1, type: 1,
ocrUsersearchchildList: list, ocrUsersearchchildList: list,
} };
if (currentStatus.value === 'new') if (currentStatus.value === "new") addCondition(param);
addCondition(param) else updateCondition({ id: currentEditId!, ...param });
else closeModal();
updateCondition({ id: currentEditId!, ...param }) });
closeModal()
})
} }
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 emit("onOk");
setTimeout(() => {
show.value = false;
}, 300);
} }
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 &&
value, acc.push({
label: name || '未配置', value,
}) 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" :mask-closable="false"> <n-modal
<n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true"> v-model:show="show"
transform-origin="center"
@after-leave="leaveHandler"
:mask-closable="false"
>
<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">
<div class="wrapper-info"> <div class="wrapper-info">
<span :style="{ 'margin-left': '18px', 'font-size': '16px','font-weight':'600' }">基本信息</span> <span
:style="{
'margin-left': '18px',
'font-size': '16px',
'font-weight': '600',
}"
>基本信息</span
>
</div> </div>
</div> </div>
<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
placeholder="请输入过滤名称"
/>
</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"
@change="item.result = ''" @change="item.result = ''"
/> />
<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>
@ -302,16 +358,14 @@ defineExpose({
</n-form> </n-form>
</div> </div>
<div class="wrapper-new" @click="createCondition"> <div class="wrapper-new" @click="createCondition">
<span>+</span> <span style="font-size:16px;">+</span>
<span style="margin-left:8px">添加筛选条件</span> <span style="margin-left: 8px">添加筛选条件</span>
</div> </div>
</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 secondary style="margin-left: 15px" @click="closeModal">
</n-button>
<n-button secondary style="margin-left:15px" @click="closeModal">
取消 取消
</n-button> </n-button>
</div> </div>
@ -327,19 +381,22 @@ defineExpose({
&-title { &-title {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 18px;
color: #333333;
} }
&-bar { &-bar {
background-color: #e8e8e8; background-color: #e8e8e8;
width: 100%; width: 100%;
margin-top: 20px; margin-top: 27px;
font-size: 16px;
color: #333333;
} }
&-form { &-form {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 20px; margin-top: 24px;
} }
&-new { &-new {
@ -348,6 +405,9 @@ defineExpose({
color: #507afd; color: #507afd;
line-height: 22px; line-height: 22px;
cursor: pointer; cursor: pointer;
span{
font-size: 11px;
}
&:hover { &:hover {
color: #507aac; color: #507aac;
@ -361,6 +421,7 @@ defineExpose({
&-footer { &-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-bottom:6px;
} }
&-info { &-info {
@ -368,7 +429,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;
@ -378,4 +439,9 @@ defineExpose({
} }
} }
} }
::v-deep(.n-form-item .n-form-item-label){
font-size:14px;
color: #666666;
font-weight: 500;
}
</style> </style>

@ -489,7 +489,7 @@ async function query(page: number, pageSize: number, filterId?: any, taskName?:
const asideParmas = unref(finalStore.getAsideValue) const asideParmas = unref(finalStore.getAsideValue)
// 使使 // 使使
let params = filterId ? { userSearchId: filterId } : asideParmas let params = filterId ? { userSearchId: filterId } : asideParmas
params = params.izshowall ? {} : params params = params?.izshowall ? {} : params
const result = await getFinalList({ const result = await getFinalList({
sortorder: sortorder.value, sortorder: sortorder.value,
pageSize, pageSize,

@ -207,6 +207,7 @@ const newFilterOk = () => {
filterModalRef.value.pagination.page, filterModalRef.value.pagination.page,
filterModalRef.value.pagination.pageSize filterModalRef.value.pagination.pageSize
); );
filterModalRef.value.showModal();
}; };
// key // key

@ -277,7 +277,7 @@ defineExpose({
> >
<template #trigger> <template #trigger>
<div class="wrapper-left-dropdown" @click="showClick"> <div class="wrapper-left-dropdown" @click="showClick">
<span style="font-size: 20px; color: #333333; font-weight: Medium">{{ <span style="font-size: 20px; color: #333333; font-weight: Medium;font-size:17px;font-weight:600">{{
currentlySelectedAdvanced currentlySelectedAdvanced
}}</span> }}</span>
<SvgIcon <SvgIcon
@ -455,6 +455,8 @@ defineExpose({
line-height: 22px; line-height: 22px;
padding: 8px 12px; padding: 8px 12px;
&:hover { &:hover {
background-color: #f3f8ff; background-color: #f3f8ff;
} }

@ -106,7 +106,7 @@ const handleDrop = async (e) => {
<div v-show="figureHovered" class="wrapper-figure-tools"> <div v-show="figureHovered" class="wrapper-figure-tools">
<SvgIcon size="28" name="view" @click="previewHandler" /> <SvgIcon size="28" name="view" @click="previewHandler" />
<div class="wrapper-figure-line" /> <div class="wrapper-figure-line" />
<SvgIcon size="28" name="delete" @click="clearHandler" /> <SvgIcon size="28" name="white_delete" @click="clearHandler" />
</div> </div>
</div> </div>
</n-upload-dragger> </n-upload-dragger>

@ -18,6 +18,10 @@ import Action from "../Action.vue";
import { deleteCondition, getConditionList, sort } from "@/api/home/filter"; import { deleteCondition, getConditionList, sort } from "@/api/home/filter";
import type { FilterSearchParam } from "/#/api"; import type { FilterSearchParam } from "/#/api";
import selection from "naive-ui/es/_internal/selection"; import selection from "naive-ui/es/_internal/selection";
import SvgIcon from "@/components/Icon/SvgIcon.vue";
import { useModal } from "naive-ui";
const modal = useModal();
defineOptions({ name: "FilterModal" }); defineOptions({ name: "FilterModal" });
const $message = window["$message"]; const $message = window["$message"];
@ -106,6 +110,11 @@ const columns: DataTableColumns<RowData> = [
title: "创建时间", title: "创建时间",
key: "createtime", key: "createtime",
width: 180, width: 180,
renderSorterIcon: ({ order }) => {
if (order === false) return h(SvgIcon, { name: "sort-2" });
if (order === "ascend") return h(SvgIcon, { name: "sort-1" });
if (order === "descend") return h(SvgIcon, { name: "sort-3" });
},
sorter: (row1, row2) => { sorter: (row1, row2) => {
// tableData.value.sort( // tableData.value.sort(
// (a, b) => new Date(a?.createtime).getTime() - new Date(b?.createtime).getTime() // (a, b) => new Date(a?.createtime).getTime() - new Date(b?.createtime).getTime()
@ -197,7 +206,15 @@ function select(key: number, id: string) {
editSelection(id); editSelection(id);
break; break;
case 2: case 2:
deleteSelection(id); const modalInst = modal.create({
title: "确认提示",
content: "确认删除该条过滤条件吗?",
positiveText: "确定",
negativeText: "取消",
preset: "dialog",
onPositiveClick: () => deleteSelection(id),
onNegativeClick: () => modalInst.destroy(),
});
break; break;
default: default:
break; break;
@ -216,7 +233,7 @@ function editSelection(id) {
}); });
emit("editFilter", selectedFilter); emit("editFilter", selectedFilter);
// closeModal(); closeModal();
} }
function deleteSelection(id = "") { function deleteSelection(id = "") {
@ -226,10 +243,18 @@ function deleteSelection(id = "") {
}); });
return; return;
} }
const modalInst = modal.create({
deleteCondition({ ids: selectionIds.value.join(",") }).then(() => { title: "确认提示",
selectionIds.value = []; content: "确认删除所选过滤条件吗?",
query(pagination.page, pagination.pageSize); positiveText: "确定",
negativeText: "取消",
preset: "dialog",
onPositiveClick: () =>
deleteCondition({ ids: selectionIds.value.join(",") }).then(() => {
selectionIds.value = [];
query(pagination.page, pagination.pageSize);
}),
onNegativeClick: () => modalInst.destroy(),
}); });
} }
@ -250,7 +275,7 @@ async function handlePageSizeChange(currentPageSize) {
function handleClick() { function handleClick() {
emit("showNewFilter"); emit("showNewFilter");
// show.value = false; closeModal();
} }
let sortTable: Sortable | null = null; let sortTable: Sortable | null = null;
@ -333,7 +358,7 @@ const handleOk = () => {
} }
if (selectionIds.value.length == 1) { if (selectionIds.value.length == 1) {
const selectedId = selectionIds.value[0]; const selectedId = selectionIds.value[0];
let item = tableData.value.find(v=>v.id == selectedId); let item = tableData.value.find((v) => v.id == selectedId);
emit("handleOk", item); emit("handleOk", item);
} }
if (selectionIds.value.length == 0) { if (selectionIds.value.length == 0) {
@ -351,6 +376,7 @@ const handleOk = () => {
display-directive="if" display-directive="if"
@after-leave="afterLeave" @after-leave="afterLeave"
:mask-closable="false" :mask-closable="false"
class="modal_wrapper"
> >
<n-card <n-card
:style="cardStyle" :style="cardStyle"
@ -364,7 +390,11 @@ const handleOk = () => {
<div class="wrapper-bar"> <div class="wrapper-bar">
<div class="wrapper-info"> <div class="wrapper-info">
<span <span
:style="{ 'margin-left': '18px', 'font-size': '16px','font-weight':'600' }" :style="{
'margin-left': '18px',
'font-size': '16px',
'font-weight': '600',
}"
class="wrapper-info-title" class="wrapper-info-title"
>基本信息</span >基本信息</span
> >
@ -384,7 +414,7 @@ const handleOk = () => {
<n-button type="info" @click="handleClick"> <n-button type="info" @click="handleClick">
创建 创建
<template #icon> <template #icon>
<SvgIcon size="14px" name="magnifying-1" /> <SvgIcon size="14px" name="creatFilter" />
</template> </template>
</n-button> </n-button>
</div> </div>
@ -471,6 +501,17 @@ const handleOk = () => {
width: 300px; width: 300px;
border: 1px solid gray; border: 1px solid gray;
} }
.msg {
span {
padding-right: 16px;
}
a {
padding-left: 17px;
cursor: pointer;
color: #507afd;
border-left: 1px solid #d8d8d8;
}
}
} }
&-table { &-table {
@ -506,6 +547,12 @@ const handleOk = () => {
} }
} }
} }
.del_btn {
margin-left: 12px;
color: #333333;
font-weight: 500;
}
::v-deep(.n-data-table .n-data-table-th) { ::v-deep(.n-data-table .n-data-table-th) {
font-weight: bold !important; font-weight: bold !important;
} }
@ -516,4 +563,24 @@ const handleOk = () => {
background-color: #fff; background-color: #fff;
border: 1px solid #cad2dd !important; border: 1px solid #cad2dd !important;
} }
::v-deep(.n-button--info-type) {
background: #507afd !important;
}
::v-deep(.n-data-table
.n-data-table-th
.n-data-table-th__title-wrapper
.n-data-table-th__title) {
font-size: 14px !important;
color: #000000 !important;
}
::v-deep(.n-data-table
.n-data-table-tr:not(.n-data-table-tr--summary):hover
> .n-data-table-td) {
color: #666666 !important;
font-size: 14px !important;
}
::v-deep(.n-data-table .n-data-table-th .n-data-table-sorter) {
position: relative;
left: -80px;
}
</style> </style>

@ -1,107 +1,106 @@
<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 emit = defineEmits(['onOk']) const emit = defineEmits(["onOk"]);
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 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: 'and', logic: "and",
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!,
@ -109,151 +108,149 @@ 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 updateCondition({ id: currentEditId!, ...param }) closeModal();
emit('onOk') });
setTimeout(() => {
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") return searchvalue.split(","); // if (searchfield === "izsimilarity") 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( watch(
() => dicStore.relationTypeList, () => dicStore.relationTypeList,
(newval) => { (newval) => {
logicOptions.value = 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 emit("onOk");
setTimeout(() => {
show.value = false;
}, 300);
} }
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 name &&
&& acc.push({ acc.push({
value, value,
label: name || '未配置', label: name || "未配置",
}) });
} }
return acc return acc;
}, initVal) }, initVal);
return list return list;
} }
watch( watch(
() => configStore.systemConfig, () => configStore.systemConfig,
(newVal) => { (newVal) => {
if (!newVal) if (!newVal) return;
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") return similarityOptions; if (key === "izsimilarity") return similarityOptions;
@ -263,22 +260,22 @@ function getOptions(key: string) {
} }
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";
console.log(editFilter,'editFilter') console.log(editFilter, "editFilter");
const { searchname, ocrUsersearchchildList, id } = editFilter; const { searchname, ocrUsersearchchildList, id } = editFilter;
currentEditId = id; currentEditId = id;
formValue.name = searchname; formValue.name = searchname;
@ -287,18 +284,24 @@ function edit(editFilter: any) {
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" :mask-closable="false"> <n-modal
v-model:show="show"
transform-origin="center"
@after-leave="leaveHandler"
:mask-closable="false"
class="modal_wrapper"
>
<n-card <n-card
:style="cardStyle" :style="cardStyle"
:bordered="false" :bordered="false"
@ -310,7 +313,14 @@ defineExpose({
<span class="wrapper-title">{{ modalTitle }}</span> <span class="wrapper-title">{{ modalTitle }}</span>
<div class="wrapper-bar"> <div class="wrapper-bar">
<div class="wrapper-info"> <div class="wrapper-info">
<span :style="{ 'margin-left': '18px', 'font-size': '16px','font-weight':'600' }">基本信息</span> <span
:style="{
'margin-left': '18px',
'font-size': '16px',
'font-weight': '600',
}"
>基本信息</span
>
</div> </div>
</div> </div>
<div class="wrapper-form"> <div class="wrapper-form">
@ -322,6 +332,7 @@ defineExpose({
:style="{ width: '780px' }" :style="{ width: '780px' }"
maxlength="15" maxlength="15"
@keydown.enter.prevent @keydown.enter.prevent
placeholder="请输入过滤名称"
/> />
</n-form-item> </n-form-item>
<n-form-item v-show="false" path="logic" label="逻辑关系"> <n-form-item v-show="false" path="logic" label="逻辑关系">
@ -377,33 +388,71 @@ defineExpose({
<template #icon> <template #icon>
<!-- <SvgIcon size="24" name="close" color="#F00"/> <!-- <SvgIcon size="24" name="close" color="#F00"/>
--> -->
<svg width="24px" height="24px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg
<title>清除</title> width="24px"
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> height="24px"
<g id="PrevailCloud-Design-图标集" transform="translate(-3040.000000, -3118.000000)" fill-rule="nonzero"> viewBox="0 0 64 64"
<g id="清除" transform="translate(3040.000000, 3118.000000)"> version="1.1"
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="64" height="64"></rect> xmlns="http://www.w3.org/2000/svg"
<path d="M32,4 C16.5619675,4 4,16.5600322 4,32 C4,47.4399678 16.5600322,60 32,60 C47.4380325,60 60,47.4399678 60,32 C60,16.5600322 47.4399678,4 32,4 Z M43.4220132,40.6240021 C44.2020159,41.4079827 44.1999731,42.6720064 43.4180353,43.4520091 C43.0280877,43.8400215 42.5180487,44.0360166 42.0060745,44.0360166 C41.4920576,44.0360166 40.9800834,43.8400214 40.5900283,43.4480311 L31.9900014,34.8219862 L23.3620213,43.3580432 C22.9720737,43.7420776 22.4639699,43.9360301 21.9559737,43.9360301 C21.4400215,43.9360301 20.9260046,43.7379922 20.5340143,43.3420239 C19.7579895,42.5560005 19.7640102,41.2919768 20.5500336,40.5140169 L29.1680151,31.9900013 L20.5819648,23.3759978 C19.8019621,22.5939524 19.8040049,21.3279935 20.5859428,20.5479908 C21.3679882,19.7659454 22.6319043,19.7700309 23.4139498,20.5519687 L32.0119339,29.1759709 L40.639914,20.6400214 C41.4238946,19.8620614 42.6918962,19.8700173 43.467921,20.6560407 C44.2458809,21.4420641 44.2379251,22.708023 43.4519016,23.4840477 L34.8340277,32.0079559 L43.4220132,40.6240021 Z" id="形状" fill="#DDDDDD"></path> xmlns:xlink="http://www.w3.org/1999/xlink"
</g> >
</g> <title>清除</title>
</g> <g
</svg> id="页面-1"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd"
>
<g
id="PrevailCloud-Design-图标集"
transform="translate(-3040.000000, -3118.000000)"
fill-rule="nonzero"
>
<g id="清除" transform="translate(3040.000000, 3118.000000)">
<rect
id="矩形"
fill="#000000"
opacity="0"
x="0"
y="0"
width="64"
height="64"
></rect>
<path
d="M32,4 C16.5619675,4 4,16.5600322 4,32 C4,47.4399678 16.5600322,60 32,60 C47.4380325,60 60,47.4399678 60,32 C60,16.5600322 47.4399678,4 32,4 Z M43.4220132,40.6240021 C44.2020159,41.4079827 44.1999731,42.6720064 43.4180353,43.4520091 C43.0280877,43.8400215 42.5180487,44.0360166 42.0060745,44.0360166 C41.4920576,44.0360166 40.9800834,43.8400214 40.5900283,43.4480311 L31.9900014,34.8219862 L23.3620213,43.3580432 C22.9720737,43.7420776 22.4639699,43.9360301 21.9559737,43.9360301 C21.4400215,43.9360301 20.9260046,43.7379922 20.5340143,43.3420239 C19.7579895,42.5560005 19.7640102,41.2919768 20.5500336,40.5140169 L29.1680151,31.9900013 L20.5819648,23.3759978 C19.8019621,22.5939524 19.8040049,21.3279935 20.5859428,20.5479908 C21.3679882,19.7659454 22.6319043,19.7700309 23.4139498,20.5519687 L32.0119339,29.1759709 L40.639914,20.6400214 C41.4238946,19.8620614 42.6918962,19.8700173 43.467921,20.6560407 C44.2458809,21.4420641 44.2379251,22.708023 43.4519016,23.4840477 L34.8340277,32.0079559 L43.4220132,40.6240021 Z"
id="形状"
fill="#DDDDDD"
></path>
</g>
</g>
</g>
</svg>
</template> </template>
</n-button> </n-button>
</n-form-item> </n-form-item>
</n-form> </n-form>
</div> </div>
<div class="wrapper-new" @click="createCondition"> <div class="wrapper-new" @click="createCondition">
<span>+</span> <span style="font-size:16px;">+</span>
<span style="margin-left: 8px">添加筛选条件</span> <span style="margin-left: 8px">添加筛选条件</span>
</div> </div>
</div> </div>
<template #footer> <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button style="background-color: #507AFD;" type="info" @click="handleSumbit"> <n-button style="background-color: #507afd" type="info" @click="handleSumbit">
确定 确定
</n-button> </n-button>
<n-button secondary style="margin-left: 15px;background-color: #ffffff;border: 1px solid #cad2dd;color: #333333;" @click="closeModal"> <n-button
secondary
style="
margin-left: 15px;
background-color: #ffffff;
border: 1px solid #cad2dd;
color: #333333;
"
@click="closeModal"
>
取消 取消
</n-button> </n-button>
</div> </div>
@ -419,19 +468,22 @@ defineExpose({
&-title { &-title {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 18px;
color: #333333;
} }
&-bar { &-bar {
background-color: #e8e8e8; background-color: #e8e8e8;
width: 100%; width: 100%;
margin-top: 20px; margin-top: 27px;
font-size: 16px;
color: #333333;
} }
&-form { &-form {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 20px; margin-top: 24px;
} }
&-new { &-new {
@ -440,7 +492,9 @@ defineExpose({
color: #507afd; color: #507afd;
line-height: 22px; line-height: 22px;
cursor: pointer; cursor: pointer;
span{
font-size: 11px;
}
&:hover { &:hover {
color: #507aac; color: #507aac;
} }
@ -453,6 +507,7 @@ defineExpose({
&-footer { &-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-bottom:6px;
} }
&-info { &-info {
@ -474,7 +529,21 @@ defineExpose({
// ::v-deep(.n-input .n-input-wrapper) { // ::v-deep(.n-input .n-input-wrapper) {
// padding-left: 0; // padding-left: 0;
// } // }
::v-deep(.n-input__suffix){ ::v-deep(.n-input__suffix) {
margin-right: -8px; margin-right: -8px;
} }
.modal_wrapper {
width: 808px !important;
height: 432px !important;
}
::v-deep(.n-card__content) {
}
.modal_wrapper {
padding: 14px 14px 0 14px !important;
}
::v-deep(.n-form-item .n-form-item-label){
font-size:14px;
color: #666666;
font-weight: 500;
}
</style> </style>

@ -99,6 +99,7 @@ defineExpose({
left: calc(50% - 350px); left: calc(50% - 350px);
.wrapper-hearder { .wrapper-hearder {
margin-top: 80px; margin-top: 80px;
margin-left:18px;
.wrapper-title { .wrapper-title {
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;

@ -159,7 +159,8 @@ function newFilterOk() {
filterModalRef.value.query( filterModalRef.value.query(
filterModalRef.value.pagination.page, filterModalRef.value.pagination.page,
filterModalRef.value.pagination.pageSize, filterModalRef.value.pagination.pageSize,
) );
filterModalRef.value.showModal();
} }
onBeforeMount(async () => { onBeforeMount(async () => {
configStore.fetchConfig() configStore.fetchConfig()

@ -120,10 +120,7 @@ function handleSumbit(e: MouseEvent) {
if (currentStatus.value === "new") addCondition(param); if (currentStatus.value === "new") addCondition(param);
else updateCondition({ id: currentEditId!, ...param }); else updateCondition({ id: currentEditId!, ...param });
emit("onOk"); closeModal();
setTimeout(() => {
closeModal();
}, 300);
}); });
} }
@ -198,7 +195,10 @@ function showModal() {
} }
function closeModal() { function closeModal() {
show.value = false; emit("onOk");
setTimeout(() => {
show.value = false;
}, 300);
} }
function generateAllData(): Option[] { function generateAllData(): Option[] {
@ -263,7 +263,12 @@ defineExpose({
</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"
class="modal_wrapper"
>
<n-card <n-card
:style="cardStyle" :style="cardStyle"
:bordered="false" :bordered="false"
@ -275,7 +280,14 @@ defineExpose({
<span class="wrapper-title">{{ modalTitle }}</span> <span class="wrapper-title">{{ modalTitle }}</span>
<div class="wrapper-bar"> <div class="wrapper-bar">
<div class="wrapper-info"> <div class="wrapper-info">
<span :style="{ 'margin-left': '18px', 'font-size': '16px','font-weight':'600' }">基本信息</span> <span
:style="{
'margin-left': '18px',
'font-size': '16px',
'font-weight': '600',
}"
>基本信息</span
>
</div> </div>
</div> </div>
<div class="wrapper-form"> <div class="wrapper-form">
@ -285,6 +297,7 @@ defineExpose({
v-model:value="formValue.name" v-model:value="formValue.name"
:style="{ width: '780px' }" :style="{ width: '780px' }"
@keydown.enter.prevent @keydown.enter.prevent
placeholder="请输入过滤名称"
/> />
</n-form-item> </n-form-item>
<n-form-item path="logic" label="逻辑关系" v-show="false"> <n-form-item path="logic" label="逻辑关系" v-show="false">
@ -345,13 +358,13 @@ defineExpose({
</n-form> </n-form>
</div> </div>
<div class="wrapper-new" @click="createCondition"> <div class="wrapper-new" @click="createCondition">
<span>+</span> <span style="font-size:16px;">+</span>
<span style="margin-left: 8px">添加筛选条件</span> <span style="margin-left: 8px">添加筛选条件</span>
</div> </div>
</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="closeModal"> <n-button secondary style="margin-left: 15px" @click="closeModal">
取消 取消
</n-button> </n-button>
@ -368,19 +381,22 @@ defineExpose({
&-title { &-title {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 18px;
color: #333333;
} }
&-bar { &-bar {
background-color: #e8e8e8; background-color: #e8e8e8;
width: 100%; width: 100%;
margin-top: 20px; margin-top: 27px;
font-size: 16px;
color: #333333;
} }
&-form { &-form {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 20px; margin-top: 24px;
} }
&-new { &-new {
@ -389,7 +405,9 @@ defineExpose({
color: #507afd; color: #507afd;
line-height: 22px; line-height: 22px;
cursor: pointer; cursor: pointer;
span{
font-size: 11px;
}
&:hover { &:hover {
color: #507aac; color: #507aac;
} }
@ -402,6 +420,7 @@ defineExpose({
&-footer { &-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-bottom:6px;
} }
&-info { &-info {
@ -419,4 +438,17 @@ defineExpose({
} }
} }
} }
.modal_wrapper {
width: 808px !important;
height: 432px !important;
}
.modal_wrapper {
padding: 14px 14px 0 14px !important;
}
::v-deep(.n-form-item .n-form-item-label){
font-size:14px;
color: #666666;
font-weight: 500;
}
</style> </style>

Loading…
Cancel
Save