feat: 必填标识调整

pull/207/head
刘释隆 1 year ago
parent e1ff1bef0e
commit bf836818d3

@ -1,17 +1,18 @@
<script lang="ts" setup> <script lang="ts" setup>
import { dateZhCN, zhCN, NModalProvider } from "naive-ui"; import { NModalProvider, dateZhCN, zhCN } from 'naive-ui'
import { computed, onMounted, nextTick, inject } from "vue"; import { computed, inject, nextTick, onMounted } from 'vue'
import { AppProvider } from "@/components/Application"; import { AppProvider } from '@/components/Application'
import { lighten } from "@/utils/index"; import { lighten } from '@/utils/index'
import mouseTrapBind from "@/hooks/event/mouseTrapBind"; import mouseTrapBind from '@/hooks/event/mouseTrapBind'
const mousetrap = inject("mousetrap") as any;
const mousetrap = inject('mousetrap') as any
onMounted(() => { onMounted(() => {
mouseTrapBind(mousetrap); mouseTrapBind(mousetrap)
}); })
const getThemeOverrides = computed(() => { const getThemeOverrides = computed(() => {
const theme = "#1980FF"; const theme = '#1980FF'
const lightenStr = lighten(theme, 6); const lightenStr = lighten(theme, 6)
return { return {
common: { common: {
@ -21,34 +22,34 @@ const getThemeOverrides = computed(() => {
primaryColorSuppl: theme, primaryColorSuppl: theme,
}, },
Switch: { Switch: {
railColorActive: "#07C984", railColorActive: '#07C984',
}, },
Input: { Input: {
borderHover: "0px", borderHover: '0px',
borderFocus: "0px", borderFocus: '0px',
boxShadowFocus: "#ff0000", boxShadowFocus: '#ff0000',
}, },
Tag: { Tag: {
colorCheckedHover: "#507afd", colorCheckedHover: '#507afd',
colorCheckedPressed: "#507afd", colorCheckedPressed: '#507afd',
}, },
Slider: { Slider: {
fillColor: "#1980FF", fillColor: '#1980FF',
dotBorderActive: "#1980FF", dotBorderActive: '#1980FF',
fillColorHover: "#1980FF", fillColorHover: '#1980FF',
}, },
Card: { Card: {
padding: "0px", padding: '0px',
}, },
Dropdown: { Dropdown: {
optionColorHover: "#e8f2ff", optionColorHover: '#e8f2ff',
}, },
Upload: { Upload: {
draggerBorder: "1px dashed #1980FF", draggerBorder: '1px dashed #1980FF',
draggerBorderHover: "1px dashed #1980FF", draggerBorderHover: '1px dashed #1980FF',
}, },
}; }
}); })
</script> </script>
<template> <template>
@ -81,13 +82,13 @@ const getThemeOverrides = computed(() => {
::v-deep(.n-base-clear > .n-base-clear__clear) { ::v-deep(.n-base-clear > .n-base-clear__clear) {
color: #c9c9c9 !important; color: #c9c9c9 !important;
} }
.n-form-item.n-form-item--top-labelled .n-form-item-label { // .n-form-item.n-form-item--top-labelled .n-form-item-label {
flex-direction: row-reverse !important; // flex-direction: row-reverse !important;
justify-content: flex-end !important; // justify-content: flex-end !important;
} // }
.n-form-item .n-form-item-label .n-form-item-label__asterisk { // .n-form-item .n-form-item-label .n-form-item-label__asterisk {
transform: rotate(-90deg) !important; // transform: rotate(-90deg) !important;
} // }
.n-scrollbar-content { .n-scrollbar-content {
padding: 0 7.97px 0 4px; padding: 0 7.97px 0 4px;
} }

@ -1,108 +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, defineEmits } from "vue"; import { computed, defineEmits, onBeforeMount, reactive, ref, unref, watch } 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 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) return; if (errors)
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!,
@ -110,164 +110,165 @@ 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") addCondition(param); if (currentStatus.value === 'new')
else updateCondition({ id: currentEditId!, ...param }); addCondition(param)
closeModal(); else updateCondition({ id: currentEditId!, ...param })
}); closeModal()
})
} }
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}`
} }
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]
} }
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( watch(
() => dicStore.relationTypeList, () => dicStore.relationTypeList,
(newval) => { (newval) => {
logicOptions.value = newval; logicOptions.value = newval
} },
); )
function showModal() { function showModal() {
show.value = true; show.value = true
} }
function closeModal() { function closeModal() {
emit("onOk"); emit('onOk')
setTimeout(() => { setTimeout(() => {
show.value = false; show.value = false
}, 300); }, 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 && name
acc.push({ && 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 <n-modal
v-model:show="show" v-model:show="show"
transform-origin="center" transform-origin="center"
@after-leave="leaveHandler"
:mask-closable="false" :mask-closable="false"
@after-leave="leaveHandler"
> >
<n-card <n-card
:style="cardStyle" :style="cardStyle"
@ -286,24 +287,28 @@ defineExpose({
'font-size': '16px', 'font-size': '16px',
'font-weight': '600', 'font-weight': '600',
}" }"
>基本信息</span >基本信息</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"
require-mark-placement="left"
>
<n-form-item path="name" label="标题"> <n-form-item path="name" label="标题">
<n-input <n-input
v-model:value="formValue.name" v-model:value="formValue.name"
:style="{ width: '780px' }" :style="{ width: '780px' }"
@keydown.enter.prevent
placeholder="请输入过滤名称" placeholder="请输入过滤名称"
@keydown.enter.prevent
/> />
</n-form-item> </n-form-item>
<n-form-item path="logic" label="逻辑关系" v-show="false"> <n-form-item v-show="false" path="logic" label="逻辑关系">
<n-select <n-select
filterable
v-model:value="formValue.logic" v-model:value="formValue.logic"
filterable
placeholder="请选择逻辑关系" placeholder="请选择逻辑关系"
:options="logicOptions" :options="logicOptions"
/> />
@ -316,15 +321,15 @@ defineExpose({
:label="formLabel(index)" :label="formLabel(index)"
> >
<n-select <n-select
filterable
v-model:value="item.type" v-model:value="item.type"
filterable
placeholder="请选择筛选项名称" placeholder="请选择筛选项名称"
:options="typeOptions" :options="typeOptions"
@change="item.result = ''" @change="item.result = ''"
/> />
<n-select <n-select
filterable
v-model:value="item.operator" v-model:value="item.operator"
filterable
style="margin-left: 8px" style="margin-left: 8px"
placeholder="请选择" placeholder="请选择"
:options="operatorOptions" :options="operatorOptions"
@ -338,9 +343,9 @@ defineExpose({
/> />
</n-space> </n-space>
<n-select <n-select
filterable
v-else v-else
v-model:value="item.result" v-model:value="item.result"
filterable
style="margin-left: 8px" style="margin-left: 8px"
placeholder="请选择" placeholder="请选择"
:options="getOptions(item.type!)" :options="getOptions(item.type!)"
@ -358,13 +363,15 @@ defineExpose({
</n-form> </n-form>
</div> </div>
<div class="wrapper-new" @click="createCondition"> <div class="wrapper-new" @click="createCondition">
<span style="font-size:16px;">+</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>
@ -405,7 +412,7 @@ defineExpose({
color: #507afd; color: #507afd;
line-height: 22px; line-height: 22px;
cursor: pointer; cursor: pointer;
span{ span {
font-size: 11px; font-size: 11px;
} }
@ -421,7 +428,7 @@ defineExpose({
&-footer { &-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-bottom:6px; margin-bottom: 6px;
} }
&-info { &-info {
@ -439,8 +446,8 @@ defineExpose({
} }
} }
} }
::v-deep(.n-form-item .n-form-item-label){ ::v-deep(.n-form-item .n-form-item-label) {
font-size:14px; font-size: 14px;
color: #666666; color: #666666;
font-weight: 500; font-weight: 500;
} }

@ -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, 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) return; if (errors)
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,199 +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") addCondition(param); if (currentStatus.value === 'new')
else updateCondition({ id: currentEditId!, ...param }); addCondition(param)
closeModal(); else updateCondition({ id: currentEditId!, ...param })
}); closeModal()
})
} }
// //
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() {
emit("onOk"); emit('onOk')
setTimeout(() => { setTimeout(() => {
show.value = false; show.value = false
}, 300); }, 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) return; 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") return similarityOptions; if (key === 'izsimilarity')
const getterName = `get${key}`; return similarityOptions
const options = unref(dicStore[getterName]); const getterName = `get${key}`
return options || []; const options = unref(dicStore[getterName])
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'
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
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 <n-modal
v-model:show="show" v-model:show="show"
transform-origin="center" transform-origin="center"
@after-leave="leaveHandler"
:mask-closable="false" :mask-closable="false"
class="modal_wrapper" class="modal_wrapper"
@after-leave="leaveHandler"
> >
<n-card <n-card
:style="cardStyle" :style="cardStyle"
@ -319,20 +323,24 @@ defineExpose({
'font-size': '16px', 'font-size': '16px',
'font-weight': '600', 'font-weight': '600',
}" }"
>基本信息</span >基本信息</span>
>
</div> </div>
</div> </div>
<div class="wrapper-form"> <div class="wrapper-form">
<n-form ref="formRef" :model="formValue" :rules="rules" > <n-form
<n-form-item path="name" label="标题" mergedRequireMarkPlacement="left"> ref="formRef"
:model="formValue"
:rules="rules"
require-mark-placement="left"
>
<n-form-item path="name" label="标题" merged-require-mark-placement="left">
<!-- j --> <!-- j -->
<n-input <n-input
v-model:value="formValue.name" v-model:value="formValue.name"
:style="{ width: '780px' }" :style="{ width: '780px' }"
maxlength="15" maxlength="15"
@keydown.enter.prevent
placeholder="请输入过滤名称" placeholder="请输入过滤名称"
@keydown.enter.prevent
/> />
</n-form-item> </n-form-item>
<n-form-item v-show="false" path="logic" label="逻辑关系"> <n-form-item v-show="false" path="logic" label="逻辑关系">
@ -418,12 +426,12 @@ defineExpose({
y="0" y="0"
width="64" width="64"
height="64" height="64"
></rect> />
<path <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="形状" id="形状"
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"
fill="#DDDDDD" fill="#DDDDDD"
></path> />
</g> </g>
</g> </g>
</g> </g>
@ -434,7 +442,7 @@ defineExpose({
</n-form> </n-form>
</div> </div>
<div class="wrapper-new" @click="createCondition"> <div class="wrapper-new" @click="createCondition">
<span style="font-size:16px;">+</span> <span style="font-size: 16px">+</span>
<span style="margin-left: 8px">添加筛选条件</span> <span style="margin-left: 8px">添加筛选条件</span>
</div> </div>
</div> </div>
@ -492,7 +500,7 @@ defineExpose({
color: #507afd; color: #507afd;
line-height: 22px; line-height: 22px;
cursor: pointer; cursor: pointer;
span{ span {
font-size: 11px; font-size: 11px;
} }
&:hover { &:hover {
@ -507,7 +515,7 @@ defineExpose({
&-footer { &-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-bottom:6px; margin-bottom: 6px;
} }
&-info { &-info {
@ -542,8 +550,8 @@ defineExpose({
.modal_wrapper { .modal_wrapper {
padding: 14px 14px 0 14px !important; padding: 14px 14px 0 14px !important;
} }
::v-deep(.n-form-item .n-form-item-label){ ::v-deep(.n-form-item .n-form-item-label) {
font-size:14px; font-size: 14px;
color: #666666; color: #666666;
font-weight: 500; font-weight: 500;
} }

@ -1,107 +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 } from "@/config/final"; import { asideTaskMap } 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 show = ref(false)
const dicStore = useDictionary(); const configStore = useConfig()
const currentStatus = ref<Status>("new"); const dicStore = useDictionary()
let currentEditId: string | null = null; const currentStatus = ref<Status>('new')
const emit = defineEmits(["onOk"]); 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) return; if (errors)
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,168 +109,169 @@ 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") addCondition(param); if (currentStatus.value === 'new')
else updateCondition({ id: currentEditId!, ...param }); addCondition(param)
closeModal(); else 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();
dicStore.initData(); dicStore.initData()
}); })
watch( watch(
() => dicStore.relationTypeList, () => dicStore.relationTypeList,
(newval) => { (newval) => {
logicOptions.value = newval; logicOptions.value = newval
} },
); )
function showModal() { function showModal() {
show.value = true; show.value = true
} }
function closeModal() { function closeModal() {
emit("onOk"); emit('onOk')
setTimeout(() => { setTimeout(() => {
show.value = false; show.value = false
}, 300); }, 300)
} }
function generateAllData(): Option[] { function generateAllData(): Option[] {
const initVal: Option[] = []; const initVal: Option[] = []
console.log(asideTaskMap,'asideTaskMap') console.log(asideTaskMap, 'asideTaskMap')
const list = Object.keys(asideTaskMap).reduce((acc, value) => { const list = Object.keys(asideTaskMap).reduce((acc, value) => {
if (value.startsWith("iz") && asideTaskMap[value]?.inFilterList !== false) { if (value.startsWith('iz') && asideTaskMap[value]?.inFilterList !== false) {
const name = asideTaskMap[value]?.label; const name = asideTaskMap[value]?.label
name && name
acc.push({ && 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) {
console.log('key',key,'getOptions'); console.log('key', key, 'getOptions')
console.log(formValue.conditions,'formValue.conditions') console.log(formValue.conditions, 'formValue.conditions')
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 <n-modal
v-model:show="show" v-model:show="show"
transform-origin="center" transform-origin="center"
@after-leave="leaveHandler"
class="modal_wrapper" class="modal_wrapper"
@after-leave="leaveHandler"
> >
<n-card <n-card
:style="cardStyle" :style="cardStyle"
@ -289,24 +290,28 @@ defineExpose({
'font-size': '16px', 'font-size': '16px',
'font-weight': '600', 'font-weight': '600',
}" }"
>基本信息</span >基本信息</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"
require-mark-placement="left"
>
<n-form-item path="name" label="标题"> <n-form-item path="name" label="标题">
<n-input <n-input
v-model:value="formValue.name" v-model:value="formValue.name"
:style="{ width: '780px' }" :style="{ width: '780px' }"
@keydown.enter.prevent
placeholder="请输入过滤名称" placeholder="请输入过滤名称"
@keydown.enter.prevent
/> />
</n-form-item> </n-form-item>
<n-form-item path="logic" label="逻辑关系" v-show="false"> <n-form-item v-show="false" path="logic" label="逻辑关系">
<n-select <n-select
filterable
v-model:value="formValue.logic" v-model:value="formValue.logic"
filterable
placeholder="请选择逻辑关系" placeholder="请选择逻辑关系"
:options="logicOptions" :options="logicOptions"
/> />
@ -319,15 +324,15 @@ defineExpose({
:label="formLabel(index)" :label="formLabel(index)"
> >
<n-select <n-select
filterable
v-model:value="item.type" v-model:value="item.type"
filterable
placeholder="请选择筛选项名称" placeholder="请选择筛选项名称"
:options="typeOptions" :options="typeOptions"
@update="item.result = ''" @update="item.result = ''"
/> />
<n-select <n-select
filterable
v-model:value="item.operator" v-model:value="item.operator"
filterable
style="margin-left: 8px" style="margin-left: 8px"
placeholder="请选择" placeholder="请选择"
:options="operatorOptions" :options="operatorOptions"
@ -341,9 +346,9 @@ defineExpose({
/> />
</n-space> </n-space>
<n-select <n-select
filterable
v-else v-else
v-model:value="item.result" v-model:value="item.result"
filterable
style="margin-left: 8px" style="margin-left: 8px"
placeholder="请选择" placeholder="请选择"
:options="getOptions(item.type!)" :options="getOptions(item.type!)"
@ -361,13 +366,15 @@ defineExpose({
</n-form> </n-form>
</div> </div>
<div class="wrapper-new" @click="createCondition"> <div class="wrapper-new" @click="createCondition">
<span style="font-size:16px;">+</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>
@ -408,7 +415,7 @@ defineExpose({
color: #507afd; color: #507afd;
line-height: 22px; line-height: 22px;
cursor: pointer; cursor: pointer;
span{ span {
font-size: 11px; font-size: 11px;
} }
&:hover { &:hover {
@ -423,7 +430,7 @@ defineExpose({
&-footer { &-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-bottom:6px; margin-bottom: 6px;
} }
&-info { &-info {
@ -449,8 +456,8 @@ defineExpose({
.modal_wrapper { .modal_wrapper {
padding: 14px 14px 0 14px !important; padding: 14px 14px 0 14px !important;
} }
::v-deep(.n-form-item .n-form-item-label){ ::v-deep(.n-form-item .n-form-item-label) {
font-size:14px; font-size: 14px;
color: #666666; color: #666666;
font-weight: 500; font-weight: 500;
} }

Loading…
Cancel
Save