Merge branch 'master' of http://222.71.245.114:9086/r/HIA24016N_PipeLineDemo

schangxiang@126.com

2025-04-29 27ba504441037666e787ded85b4af2f65be65c17

 HIAWms/web/src/components/Variable/Variable.tsx

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,183 @@
import { computed, defineComponent, ref } from 'vue'
import sdk from 'sdk'
import styles from './Variable.module.scss'
import Icon from '../Icon/Icon'
import { Base } from '@/libs/Base/Base'
import { useVModels } from '@vueuse/core'
const { openVariableDialog } = sdk.utils

interface CurrentVariableType {
  id?: string
  name?: string
}

export default defineComponent({
  name: '变量',
  props: {
    modelValue: {
      type: [Number, String],
      default: '',
    },
    isClose: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    // ä»¥ä¸‹å±žæ€§ç”¨æ¥å¤šé€‰
    dataSource: {
      type: Array,
      default: () => [],
    },
    isMultiple: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: 0,
    },
    field: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: '',
    },
  },
  emits: ['update:modelValue', 'update:dataSource', 'change'],
  setup(props, { attrs, slots, emit }) {
    const elementType = {
      input: 'input',
      select: 'select',
    }
    const variable = computed({
      get: () => {
        return props.modelValue === null ? '' : String(props.modelValue)
      },
      set: (val) => emit('update:modelValue', val),
    })

    const { dataSource } = useVModels(props, emit)

    /**
     * å¤šé€‰
     */
    const onMultipleSelectVariable = (varData: any[]) => {
      if (props.field) {
        const index = props.index
        varData.forEach((variable, i: number) => {
          const row: any = dataSource.value[index + i]
          if (row) {
            if (
              typeof row[props.field] !== 'object' ||
              row[props.field] === null
            ) {
              row[props.field] = variable.name
            }
          }
        })
      }
    }

    const onSelectVariable = async () => {
      const currentVariable: CurrentVariableType = {}
      if (variable.value) {
        currentVariable.id = Base.getVariableIdByName(variable.value)
        currentVariable.name = variable.value
      }
      try {
        const varData = await openVariableDialog({
          currentVariable,
          isMultiple: props.isMultiple,
          defaultCheckKey: [],
          showConfig: false,
          configData: {},
        })
        if (!props.isMultiple) {
          variable.value = varData.name
          emit('change', varData.name)
        } else {
          onMultipleSelectVariable(varData)
        }
      } catch (error) {
        console.log(error)
      }
    }
    const onClear = () => {
      variable.value = ''
    }
    return () => {
      const type = props.type || attrs.type
      if (type === elementType.select) {
        return (
          <el-input
            v-model={variable.value}
            {...attrs}
            clearable={props.clearable || props.isClose}
            readonly={props.isClose || props.clearable}
            class={styles.selectVariable}
            placeholder="请输入"
            suffix-icon={
              <el-button
                link
                type="primary"
                size="small"
                style="margin-right: 10px;"
                onClick={onSelectVariable}
              >
                é€‰æ‹©
              </el-button>
            }
          ></el-input>
        )
      }
      if (type === elementType.input) {
        return (
          <el-input
            v-model={variable.value}
            onClick={onSelectVariable}
            {...attrs}
            clearable={props.clearable || props.isClose}
            readonly={props.isClose || props.clearable}
            suffix-icon={
              attrs.disabled ? null : (
                <Icon
                  onClick={onClear}
                  style="cursor: pointer"
                  icon="close_x"
                ></Icon>
              )
            }
          ></el-input>
        )
      }
      return (
        <div class={styles.variable}>
          {variable.value ? (
            <div class={styles.content} onClick={onSelectVariable}>
              <span title={variable.value} class={styles.text}>
                {variable.value}
              </span>
              {props.isClose ? (
                <Icon
                  width={16}
                  height={16}
                  icon="close_x"
                  onClick={() => (variable.value = '')}
                />
              ) : null}
            </div>
          ) : (
            <span onClick={onSelectVariable} class={styles.select}>
              è¯·é€‰æ‹©
            </span>
          )}
        </div>
      )
    }
  },
})