222

schangxiang@126.com

2025-04-30 9bec4dcae002f36aa23231da11cb03a156b40110

 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>
      )