|
|
|
@ -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>
|
|
|
|
@ -337,15 +379,13 @@ defineExpose({
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="wrapper-new" @click="createCondition">
|
|
|
|
<div class="wrapper-new" @click="createCondition">
|
|
|
|
<span>+</span>
|
|
|
|
<span>+</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>
|
|
|
|
@ -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;
|
|
|
|
|
