setup()

in seatunnel-ui/src/components/column-selector/index.tsx [43:127]


  setup(props, ctx) {
    const selector = ref([]) as any
    const ff = ref(null)
    const { t } = useI18n()
    const showDropdown = ref(false)
    const columns = ref<(string | number)[] | null>(null)
    const localColumn = getColumns(props.tableKey)
    const storeColumn = ref<(string | number)[] | null>(null)
    watch(props, () => {
      selector.value = getColumnsBytable(props.tableColumns, t)
      if (localColumn && localColumn.length > 0) {
        columns.value = getCheckboxList(selector.value, localColumn, false)
      } else {
        columns.value = getCheckboxList(selector.value, [], true)
      }
      storeColumn.value = [...columns.value]
      const resColumn = filterColumns(columns.value, props.tableColumns)
      ctx.emit('changeOptions', resColumn)
    })

    const handleClick = (show: boolean) => {
      if (!show) {
        const resColumn = filterColumns(columns.value, props.tableColumns)
        ctx.emit('changeOptions', resColumn)
        setColumns(props.tableKey, resColumn)
      }
    }

    const handleUpdateValue = (value: Array<string | number>) => {
      const length = getCheckboxList(selector.value, [], true).length - 1
      if (value.indexOf('ALL') == -1 && value.length == length) {
        if (storeColumn.value && storeColumn.value.indexOf('ALL') > -1) {
          columns.value = []
          storeColumn.value = []
        } else {
          columns.value = getCheckboxList(selector.value, [], true)
          storeColumn.value = getCheckboxList(selector.value, [], true)
        }
      } else if (value.indexOf('ALL') == -1 && value.length < length) {
        columns.value = value.filter((item) => {
          return item !== 'ALL'
        })
      } else if (value.indexOf('ALL') > -1 && value.length == length + 1) {
        columns.value = []
        storeColumn.value = []
      } else if (value.indexOf('ALL') > -1 && value.length == 1) {
        columns.value = getCheckboxList(selector.value, [], true)
        storeColumn.value = getCheckboxList(selector.value, [], true)
      } else if (value.indexOf('ALL') > -1 && value.length == length) {
        if (storeColumn.value && storeColumn.value.indexOf('ALL') > -1) {
          columns.value = value.filter((item) => {
            return item !== 'ALL'
          })
          storeColumn.value = [
            ...value.filter((item) => {
              return item !== 'ALL'
            })
          ]
        }
      } else if (value.indexOf('ALL') > -1 && value.length < length) {
        columns.value = value.filter((item) => {
          return item !== 'ALL'
        })
        storeColumn.value = [
          ...value.filter((item) => {
            return item !== 'ALL'
          })
        ]
        if (storeColumn.value && storeColumn.value.indexOf('ALL') == -1) {
          columns.value = getCheckboxList(selector.value, [], true)
          storeColumn.value = getCheckboxList(selector.value, [], true)
        }
      }
    }

    return {
      selector,
      ff,
      showDropdown,
      handleClick,
      columns,
      handleUpdateValue,
      t
    }
  },