dg_erp/jy-ui/src/components/flow/PropertySetting/index.vue

<template>
  <div>
    <a-dialog :title="title" v-model="drawer" @close="handleClose" :footer="false">
      <component
        :is="componentType"
        v-model="form"
        :disabled="disabled"
        :skipConditionShow="skipConditionShow"
      >
        <template v-slot:[key]="data" v-for="(item, key) in $slots">
          <slot :name="key" v-bind="data || {}"></slot>
        </template>
      </component>
    </a-dialog>
  </div>
</template>

<script setup lang="ts">
import start from './start.vue'
import between from './between.vue'
import serial from './serial.vue'
import parallel from './parallel.vue'
import end from './end.vue'
import skip from './skip.vue'

const COMPONENT_LIST = {
  start,
  between,
  serial,
  parallel,
  end,
  skip
}

const props = defineProps({
  value: {
    type: Object,
    default() {
      return {}
    }
  },
  node: {
    type: Object,
    default() {
      return {}
    }
  },
  lf: {
    type: Object,
    default() {
      return null
    }
  },
  disabled: {
    // 是否禁止
    type: Boolean,
    default: false
  },
  skipConditionShow: {
    // 是否显示跳转条件
    type: Boolean,
    default: true
  }
})

const drawer = ref(false)
const form = ref({})
const objId = ref(undefined)
const nodeCode = ref(null)
const title = computed(() => {
  if (props.node && props.node.type === 'skip') {
    return '设置边属性'
  } else if (props.node && props.node.type === 'serial') {
    return '设置串行网关属性'
  } else if (props.node && props.node.type === 'parallel') {
    return '设置并行网关属性'
  } else if (props.node && props.node.type === 'start') {
    return '设置开始属性'
  } else if (props.node && props.node.type === 'end') {
    return '设置结束属性'
  }
  return '设置中间属性'
})
// 组件类型
const componentType = computed(() => {
  if (!props.node || !props.node.type) return
  return COMPONENT_LIST[props.node.type]
})

watch(
  () => props.node,
  (n) => {
    if (n) {
      objId.value = n.id
      if (n.type === 'skip') {
        let skipCondition = n.properties.skipCondition
        let conditionSpl = skipCondition ? skipCondition.split('@@|') : []
        let conditionSplTwo = conditionSpl && conditionSpl.length > 0 ? conditionSpl[1] : []
        let condition,
          conditionType,
          conditionValue = ''
        if (conditionSpl && conditionSpl.length > 0 && conditionSpl[0] === '@@spel') {
          conditionType = 'spel'
          conditionValue = conditionSplTwo
        } else if (conditionSpl && conditionSpl.length > 0 && conditionSpl[0] !== '@@spel') {
          condition =
            conditionSplTwo && conditionSplTwo.length > 0 ? conditionSplTwo.split('@@')[0] : ''
          conditionType =
            conditionSplTwo && conditionSplTwo.length > 0 ? conditionSplTwo.split('@@')[1] : ''
          conditionValue =
            conditionSplTwo && conditionSplTwo.length > 0 ? conditionSplTwo.split('@@')[2] : ''
        }
        form.value = {
          nodeType: n.type,
          skipType: n.properties.skipType,
          skipName: n.text instanceof Object ? n.text.value : n.text,
          skipCondition: skipCondition,
          condition: condition,
          conditionType: conditionType,
          conditionValue: conditionValue
        }
      } else {
        const propertiesStr = JSON.stringify(n.properties)
        const permissionFlag = n.properties?.permissionFlag
        const listenerType = n.properties?.listenerType
        const nodeRatioNumber = Number(n.properties.nodeRatio)

        n.properties.formCustom = propertiesStr === '{}' ? '1' : n.properties.formCustom || ''
        form.value = {
          nodeType: n.type,
          nodeCode: n.id,
          ...n.properties,
          nodeName: n.text instanceof Object ? n.text.value : n.text,
          collaborativeWay: nodeRatioNumber == 0 ? '1' : nodeRatioNumber == 100 ? '3' : '2',
          permissionFlagArr: permissionFlag === '' ? [] : (permissionFlag?.split('@@') ?? []),
          listenerTypeArr: listenerType === '' ? [] : (listenerType?.split(',') ?? []),
          nodeRatioNumber
        }
      }
    }
  }
)

watch(
  () => form.value.nodeCode,
  (n) => {
    nodeCode.value = n
  }
)

watch(
  () => form.value.skipType,
  (n) => {
    // 监听跳转属性变化并更新
    props.lf.setProperties(objId.value, {
      skipType: n
    })
  }
)

watch(
  () => form.value.nodeName,
  (n) => {
    // 监听节点名称变化并更新
    props.lf.updateText(objId.value, n)
    // 监听节点名称变化并更新
    props.lf.setProperties(objId.value, {
      nodeName: n
    })
  }
)

watch(
  () => form.value.nodeRatioNumber,
  (n) => {
    // 监听节点属性变化并更新
    props.lf.setProperties(objId.value, {
      nodeRatio: n ? n.toString() : undefined
    })
  }
)

watch(
  () => form.value.permissionFlagArr,
  (n) => {
    if (n === undefined) {
      n = []
    }

    // 监听节点属性变化并更新
    props.lf.setProperties(objId.value, {
      permissionFlagArr: n,
      permissionFlag: n.join('@@')
    })
  }
)

watch(
  () => form.value.skipAnyNode,
  (n) => {
    // 监听跳转属性变化并更新
    props.lf.setProperties(objId.value, {
      skipAnyNode: n
    })
  }
)

watch(
  () => form.value.listenerTypeArr,
  (n) => {
    if (n === undefined) {
      n = []
    }

    // 监听监听器类型变化并更新
    props.lf.setProperties(objId.value, {
      listenerTypeArr: n,
      listenerType: n.join(',')
    })
  }
)

watch(
  () => form.value.listenerPath,
  (n) => {
    // 监听监听器路径变化并更新
    props.lf.setProperties(objId.value, {
      listenerPath: n
    })
  }
)

watch(
  () => form.value.formCustom,
  (n) => {
    props.lf.setProperties(objId.value, {
      formCustom: n || ''
    })
  }
)

watch(
  () => form.value.formPath,
  (n) => {
    props.lf.setProperties(objId.value, {
      formPath: n
    })
  }
)

watch(
  () => form.value.skipName,
  (n) => {
    if (['skip'].includes(props.node.type)) {
      // 监听跳转名称变化并更新
      props.lf.updateText(objId.value, n)
      // 监听跳转属性变化并更新
      props.lf.setProperties(objId.value, {
        skipName: n
      })
    }
  }
)

watch(
  () => form.value.skipCondition,
  (n) => {
    // 监听跳转属性变化并更新
    props.lf.setProperties(objId.value, {
      skipCondition: n
    })
  }
)

function show() {
  drawer.value = true
}

function handleClose() {
  // 监听节点编码变量并更新
  if (nodeCode.value && objId.value) {
    if (['skip'].includes(props.node?.type)) {
      if (!props.lf.getEdgeModelById(nodeCode.value)) {
        props.lf.changeEdgeId(objId.value, nodeCode.value)
      }
    } else {
      if (!props.lf.getNodeModelById(nodeCode.value)) {
        props.lf.changeNodeId(objId.value, nodeCode.value)
      }
    }
  }
  drawer.value = false
}

defineExpose({
  show,
  handleClose
})
</script>

<style scoped>
.el-drawer__container ::-webkit-scrollbar {
  display: none;
}
</style>