big-model-web/src/views/workflow/instance/component/condition/condition-item.vue

<template>
  <div class="condition-item">
    <div class="condition-item-body">
      <div class="top">
        <div class="left">
          <slot name="source" :value="item" :index="index"/>
        </div>
        <div class="_p_split"/>
        <selectPopover class="w-[60px]" v-model:value="item.method" :options="item.source.type === 'Number' ? OptionsConditionNumber : OptionsConditionString"/>
      </div>
      <div class="bottom" :style="{
        padding: item.type === ConditionType.Constant ? '2px 6px' : '6px'
      }" v-if="![
        ConditionString.Empty,
        ConditionString.NotEmpty,
        ConditionNumber.Empty,
        ConditionNumber.NotEmpty,
      ].includes(item.method)">
        <selectPopover class="w-[50px]" v-model:value="item.type" :options="OptionsConditionType"/>
        <div class="_p_split"/>
        <div class="target">
          <template v-if="item.type === ConditionType.Constant">
            <CzrFormColumn
              :span="24"
              label-width="0px"
              :link="item.source.type === 'Number' ? 'number' : 'input'"
              v-model:param="item.target"
              :transparent="true"
            />
          </template>
          <template v-else-if="item.type === ConditionType.Variable">
            <slot name="target" :value="item" :index="index"/>
          </template>
        </div>
      </div>
    </div>
<!--     @click="$emit('update:conditions', conditions.filter((_, i) => i !== index))"-->
    <div class="condition-item-del __hover" @click="$emit('onDel')">
      <SvgIcon name="czr_del" size="14" color="#666666"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, reactive, watch} from "vue";
import {
  ConditionMode, ConditionNumber, ConditionString, ConditionType,
  OptionsConditionNumber,
  OptionsConditionString,
  OptionsConditionType
} from "@/views/workflow/types";
import selectPopover from '@/views/workflow/instance/component/select-popover/index.vue'

const emits = defineEmits(['onDel'])
const props = defineProps({
  item: <any>{},
  index: {},
})
const {proxy}: any = getCurrentInstance()
const state: any = reactive({})
watch(() => props.item.source, (n) => {
  if (n.type === 'Number') {
    props.item.method = ConditionNumber.Equals
  } else {
    props.item.method = ConditionString.Includes
  }
  props.item.type = ConditionType.Constant
  props.item.target = ''
}, {deep: true})
watch(() => props.item.method, (n) => {
  props.item.type = ConditionType.Constant
  props.item.target = ''
}, {deep: true})
watch(() => props.item.type, (n) => {
  props.item.target = ''
}, {deep: true})
</script>

<style lang="scss" scoped>
@use "@/views/workflow/instance/component/style";

.condition-main {
  flex: 1;
  display: flex;
  .condition-mode {
    height: calc(100% - 28px);
    margin: 14px 6px 14px 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    >div:nth-child(1) {
      border: style.$borderStyle;
      width: 10px;
      height: 100%;
      border-radius: 8px 0 0 8px;
      border-right: none;
      position: absolute;
      right: 4px;
    }
    >div:nth-child(2) {
      z-index: 2;
      position: absolute;
      right: 0;
      width: 20px;
      height: 30px;
      background-color: #ffffff;
    }
    >div:nth-child(3) {
      z-index: 3;
      color: var(--czr-main-color);
      border: style.$borderStyle;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 22px;
      background-color: #ffffff;
      font-size: 12px;
    }
  }
  .condition-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    .condition-item {
      display: flex;
      .condition-item-body {
        border-radius: 8px;
        background-color: style.$inputBg;
        flex: 1;
        overflow: hidden;
        .top {
          padding: 6px;
          display: flex;
          align-items: center;
          overflow: hidden;
          .left {
            flex: 1;
            overflow: hidden;
          }
          .right {
            width: 40px;
          }
        }
        .bottom {
          border-top: style.$borderStyle;
          display: flex;
          align-items: center;
          .target {
            flex: 1;
          }
        }
      }
      .condition-item-del {
        margin: 10px 0 0 6px;
      }
    }
  }
}
</style>