From 9bec4dcae002f36aa23231da11cb03a156b40110 Mon Sep 17 00:00:00 2001
From: schangxiang@126.com <schangxiang@126.com>
Date: 周三, 30 4月 2025 16:24:16 +0800
Subject: [PATCH] 222
---
PipeLineLems/web/src/components/TableFilter/TableFilter.tsx | 102 ++++++++++++++++++++++++++++++--------------------
1 files changed, 61 insertions(+), 41 deletions(-)
diff --git a/PipeLineLems/web/src/components/TableFilter/TableFilter.tsx b/PipeLineLems/web/src/components/TableFilter/TableFilter.tsx
index 588edec..d168169 100644
--- a/PipeLineLems/web/src/components/TableFilter/TableFilter.tsx
+++ b/PipeLineLems/web/src/components/TableFilter/TableFilter.tsx
@@ -6,23 +6,25 @@
watch,
onUnmounted,
Component,
+ inject,
} from 'vue'
import styles from './TableFilter.module.scss'
import { CaretBottom } from '@element-plus/icons-vue'
import IconButton from '@/components/IconButton/IconButton'
-
-import ElInput from 'element-plus/es/components/input/index'
-import ElSelect from 'element-plus/es/components/select/index'
+import ElInput from '../Input/Input'
import Select from '@/components/Select/Select'
import Option from '@/components/Select/Option'
+import SearchSelect from '@/components/SearchSelect/SearchSelect'
import Icon from '../Icon/Icon'
import { FormPropsType, FormItemPropType, PropsType } from '../DyForm/DyForm.d'
import isNil from 'lodash/isNil'
import { useVModel } from '@vueuse/core'
+import { Language, scope, _t as t } from '@/libs/Language/Language'
const formItemElementMap: Record<string, any> = {
input: ElInput,
select: Select,
+ filterSelect: SearchSelect,
}
const Type: Record<string, string> = {
@@ -70,6 +72,13 @@
type: Array,
default: () => [],
},
+ LanguageScopeKey: {
+ type: String,
+ },
+ customWidgetMap: {
+ type: Object,
+ default: () => ({}),
+ },
},
emits: ['update:modelValue', 'data', 'change'],
setup(props, { attrs, slots, emit }) {
@@ -79,6 +88,12 @@
const defaultData = ref({})
const data = ref({})
const optionMap = ref<Record<string, any>>({})
+ const LanguageScopeKey = inject('LanguageScopeKey', '')
+ const _t = computed(() => {
+ return props.LanguageScopeKey
+ ? scope(props.LanguageScopeKey || LanguageScopeKey)
+ : t
+ })
const form = computed({
get() {
return props.modelValue
@@ -87,27 +102,28 @@
emit('update:modelValue', v)
},
})
-
+ Object.assign(formItemElementMap, props.customWidgetMap)
const formData = props.modelValue ? form : data
let flag = false
/**
* 娣诲姞绛涢�夋潯浠�
*/
- const onAddFilter = (evt?: Event) => {
- if (!flag) {
- evt?.stopPropagation()
+ const onAddFilter = (isInit?: boolean) => {
+ if (isInit) {
+ columnsFilter.value = []
+ }
+ // let length = columnsFilter.value.length
+ // for (let index = 0; index < props.columns.length; index++) {
+ // const element: any = props.columns[index]
+ // if (element.el && !columnsFilter.value.includes(element)) {
+ // columnsFilter.value.push(element)
+ // break
+ // }
+ // }
+ columnsFilter.value = props.columns
- let length = columnsFilter.value.length
- for (let index = 0; index < props.columns.length; index++) {
- const element: any = props.columns[index]
- if (element.el && !columnsFilter.value.includes(element)) {
- columnsFilter.value.push(element)
- break
- }
- }
- if (length === columnsFilter.value.length - 1) {
- isDisabled.value = true
- }
+ if (props.columns.length === columnsFilter.value.length) {
+ isDisabled.value = true
}
}
@@ -180,11 +196,11 @@
watch(
() => props.columns,
(val) => {
- if (props.columns.length) {
- onAddFilter()
- initDisabled()
- flag = true
- }
+ // if (props.columns.length) {
+ onAddFilter(true)
+ initDisabled()
+ flag = true
+ // }
},
{
immediate: true,
@@ -193,11 +209,11 @@
)
onMounted(() => {
- if (props.columns.length) {
- onAddFilter()
- initDisabled()
- flag = true
- }
+ // if (props.columns.length) {
+ onAddFilter(true)
+ initDisabled()
+ flag = true
+ // }
defaultData.value = { ...props.modelValue }
document.addEventListener('click', onListener)
})
@@ -241,9 +257,9 @@
}
const onClickBtn = (evt: Event) => {
- evt.stopPropagation()
- flag = false
- onAddFilter()
+ // evt.stopPropagation()
+ // flag = false
+ // onAddFilter()
}
/**
@@ -260,9 +276,10 @@
label: string
description: string
value: string | number
+ name: string
}) => (
<Option
- label={el.description || el.label}
+ label={el.description || el.label || el.name}
value={el.value}
></Option>
)
@@ -273,21 +290,23 @@
return () => {
const icon = isDisabled.value ? 'icon_add2' : 'add-p'
+
return (
<div onClick={onChildClick}>
<el-popover
visible={visible.value}
placement="bottom-start"
- width={212}
+ width={330}
show-arrow={false}
popper-class={styles.popover}
persistent={false}
popper-style={{
marginTop: '-7px',
- padding: '8px',
+ padding: '10px',
+ paddingBottom: '8px',
}}
trigger="click"
- vSlots={{
+ v-slots={{
reference: () => (
<span class={{ [styles.textColor]: hasFormData.value }}>
{slots.default?.()}
@@ -306,15 +325,16 @@
const Widget = formItemElementMap[column.el] || null
return Widget ? (
<div class={styles.filter}>
- <span>{column.title}: </span>
+ <span class={styles.span}>{_t.value(column.title)}: </span>
<Widget
v-model={formData.value[column.prop]}
- style="width: 119px"
- size="small"
- placeholder={`${column.placeholder}`}
+ style="width: 160px;margin-left: 16px"
+ // size="small"
+ placeholder={_t.value(`${column.placeholder}`)}
onChange={onSearchTable}
clearable
teleported={false}
+ {...column}
>
<Column item={column} />
</Widget>
@@ -322,13 +342,13 @@
) : null
})}
</div>
- <IconButton
+ {/* <IconButton
onClick={onClickBtn}
icon={icon}
disabled={isDisabled.value}
>
{props.text}
- </IconButton>
+ </IconButton> */}
</el-popover>
</div>
)
--
Gitblit v1.9.3