visualization-design/src/views/components/Conditions.vue

<template>
  <div class="props">
    <div v-if="data.conditions && data.conditions.length > 0" class="form-item banner">
      <label>{{$t('触发条件')}}</label>
      <div class="w-full flex middle between">
        <div></div>
        <t-radio-group class="ml-8" v-model="data.conditionType">
          <t-radio value="and"> {{$t('满足全部条件')}} </t-radio>
          <t-radio value="or"> {{$t('满足任意条件')}} </t-radio>
        </t-radio-group>
      </div>
    </div>
    <div v-for="(c, index) in data.conditions" class="mb-12">
      <div class="flex middle between head">
        <div class="flex middle">
          <arrow-right-icon class="mr-4" />
          <!-- <t-icon name="arrow-right" class="mr-4" /> -->
{{$t('          条件')}}{{ index + 1 }}
        </div>
          <close-icon class="hover"
            @click="data.conditions.splice(index, 1)"/>
        <!-- <t-icon
          name="close"
          class="hover"
          @click="data.conditions.splice(index, 1)"
        /> -->
      </div>
      <div class="">
        <div class="form-item mt-4">
          <label>{{$t('条件类型')}}</label>
          <t-radio-group class="ml-8" v-model="c.type">
            <t-radio value> {{$t('关系条件')}} </t-radio>
            <t-radio value="fn"> {{$t('高级条件')}} </t-radio>
          </t-radio-group>
        </div>
        <template v-if="!c.type">
          <div class="form-item mt-8">
            <label>{{$t( '属性名' )}}</label>
            <t-select-input
              v-model:inputValue="c.key"
              :value="c.keyLabel"
              v-model:popupVisible="c.keyPopupVisible"
              allow-input
              clearable
              @clear="c.keyLabel = undefined"
              @focus="c.keyPopupVisible = true"
              @blur="c.keyPopupVisible = false"
              @input-change="onKeyInput(c)"
              class="shrink-0"
              style="width: 152px"
            >
              <template #panel>
                <ul style="padding: 8px 12px">
                  <li
                    v-for="item in cprops"
                    :key="item.value"
                    @click="
                      c.key = item.value;
                      c.keyLabel = item.label;
                      c.keyPopupVisible = false;
                    "
                  >
                    {{ item.label }}
                  </li>
                </ul>
              </template>
            </t-select-input>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('关系运算')}}</label>
            <t-select v-model="c.operator" :options="operatorOptions" clearable class="shrink-0" :placeholder="$t('关系运算')"></t-select>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('运算对象')}}</label>
            <t-select v-model="c.valueType" class="shrink-0" :placeholder="$t('固定值')">
              <t-option key value :label="$t('固定值')"> {{$t('固定值')}} </t-option>
              <t-option key="prop" value="prop" :label="$t('对象属性值')">
                {{$t('对象属性值')}}
              </t-option>
            </t-select>
          </div>
          <div v-if="!c.valueType" class="form-item mt-8 form-item-valueType">
            <label>{{$t( '值' )}}</label>
            <t-input v-model="c.value" @change="valueChange($event,c)" class="shrink-0" style="width: 320px" />
          </div>
          <template v-else>
            <div class="form-item mt-8">
              <label>{{$t('对象')}}</label>
              <t-tree-select v-model="c.target" :data="penTree" filterable class="shrink-0" @change="onChangeTriggerTarget(c)" :placeholder="$t('对象')"></t-tree-select>
            </div>
            <div class="form-item mt-8">
              <label>{{$t( '属性' )}}</label>
              <t-select-input
                v-model:inputValue="c.value"
                :value="c.label"
                v-model:popupVisible="c.popupVisible"
                allow-input
                clearable
                @clear="c.label = undefined"
                @focus="c.popupVisible = true"
                @blur="c.popupVisible = false"
                @input-change="onInput(c)"
                class="shrink-0"
              >
                <template #panel>
                  <ul style="padding: 8px 12px">
                    <li
                      v-for="item in cprops"
                      :key="item.value"
                      @click="
                        c.value = item.value;
                        c.label = item.label;
                        c.popupVisible = false;
                      "
                    >
                      {{ item.label }}
                    </li>
                  </ul>
                </template>
              </t-select-input>
            </div>
          </template>
        </template>
        <template v-else>
          <div>function condition(pen) {</div>
          <CodeEditor class="mt-4" @change="codeChange($event,c)" v-model="c.fnJs" />
          <div class="mt-4">}</div>
        </template>
      </div>
    </div>
    <div class="mt-8 mb-8">
      <a @click="addTriggerCondition(data)"> + {{$t('添加触发条件')}} </a>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref, getCurrentInstance } from 'vue';

import CodeEditor from '@/views/components/common/CodeEditor.vue';
import { getPenTree, typeOptions, changeType} from '@/services/common';
import {ArrowRightIcon,CloseIcon} from 'tdesign-icons-vue-next';
const { proxy } = getCurrentInstance();
const $t = proxy.$t
const penTree: any = ref([]);
const { data } = defineProps<{
  data: any;
}>();

onBeforeMount(() => {
  if (!data.conditions) {
    data.conditions = [];
  }
  penTree.value = getPenTree();
});

const onChangeTriggerTarget = (c: any) => {
  // c.targetProps = [
  //   {
  //     value: 'x',
  //     label: 'X',
  //   },
  //   {
  //     value: 'y',
  //     label: 'Y',
  //   },
  //   {
  //     value: 'width',
  //     label: $t('宽'),
  //   },
  //   {
  //     value: 'height',
  //     label: $t('高'),
  //   },
  //   {
  //     value: 'visible',
  //     label: $t('显示'),
  //   },
  //   {
  //     value: 'text',
  //     label: $t('文字'),
  //   },
  //   {
  //     value: 'progress',
  //     label: $t('进度'),
  //   },
  //   {
  //     value: 'showChild',
  //     label: $t('状态'),
  //   },
  //   {
  //     value: 'rotate',
  //     label: $t('旋转'),
  //   },
  // ];
  const target: any = meta2d.findOne(c.target);
  if (target && target.realTimes) {
    for (const item of target.realTimes) {
      const found = cprops.value.findIndex((elem: any) => elem.value === item.key);
      if (found < 0) {
        cprops.value.push({
          value: item.key,
          label: item.label,
        });
      }
    }
  }
};

const addTriggerCondition = (data: any) => {
  if (!data.conditionType) {
    data.conditionType = 'and';
  }
  data.conditions.push({
    type: '',
    operator: '=',
    valueType: '',
  });
};

const onKeyInput = (item: any) => {
  item.keyLabel = item.key;
};

const onInput = (item: any) => {
  item.label = item.value;
};

const cprops = ref<any>([
  {
    value: 'x',
    label: 'X',
  },
  {
    value: 'y',
    label: 'Y',
  },
  {
    value: 'width',
    label: $t('宽'),
  },
  {
    value: 'height',
    label: $t('高'),
  },
  {
    value: 'visible',
    label: $t('显示'),
  },
  {
    value: 'text',
    label: $t('文字'),
  },
  {
    value: 'color',
    label: $t('颜色'),
  },
  {
    value: 'background',
    label: $t('背景颜色'),
  },
  {
    value: 'progress',
    label: $t('进度'),
  },
  {
    value: 'progressColor',
    label: $t('进度颜色'),
  },
  {
    value: 'showChild',
    label: $t('状态'),
  },
  {
    value: 'rotate',
    label: $t('旋转'),
  },
  {
    value: 'disabled',
    label: $t('禁用'),
  },
  {
    value: 'selectedKey',
    label: $t('单选选中值'),
  },
  {
    value: 'animateReverse',
    label: $t('连线动画反向'),
  }
]);

const operatorOptions = [
  { label: '=', value: '=' },
  { label: '!=', value: '!=' },
  { label: '>', value: '>' },
  { label: '<', value: '<' },
  { label: '>=', value: '>=' },
  { label: '<=', value: '<=' },
  { label: $t('包含'), value: '[)' },
  { label: $t('不包含'), value: '![)' },
];

const valueChange = (e,c:any)=>{
  c.value= changeType(e);
}

const codeChange = (e:any,a:any)=>{
  a.fn = null;
}

</script>
<style lang="postcss" scoped>
.props {
  .form-item {
    :deep(.t-radio-group .t-radio) {
      margin-right: 10px;
      .t-radio__label {
        margin-left: 4px;
      }
    }
  }

  .form-item-valueType {
    /* :deep(.t-input) {
      padding: 0px;
    } */
  }
  .banner {
    /* background-color: var(--color-background-input); */
    /* padding: 0 12px; */
  }
}
</style>