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>触发条件</label>
      <div class="w-full flex middle between">
        <div></div>
        <t-radio-group v-model="data.conditionType">
          <t-radio value="and"> 满足全部条件 </t-radio>
          <t-radio value="or"> 满足任意条件 </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">
          <t-icon name="arrow-right" class="mr-4" />
          条件{{ index + 1 }}
        </div>
        <t-icon
          name="close"
          class="hover"
          @click="data.conditions.splice(index, 1)"
        />
      </div>
      <div class="">
        <div class="form-item mt-4">
          <label>条件类型</label>
          <t-radio-group v-model="c.type">
            <t-radio value=""> 关系条件 </t-radio>
            <t-radio value="fn"> 高级条件 </t-radio>
          </t-radio-group>
        </div>
        <template v-if="!c.type">
          <div class="form-item mt-8">
            <label>属性名</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 = undefined"
              @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;
                    "
                  >
                    {{ item.label }}
                  </li>
                </ul>
              </template>
            </t-select-input>
          </div>
          <div class="form-item mt-8">
            <label>关系运算</label>
            <t-select
              v-model="c.operator"
              placeholder="关系运算"
              :options="operatorOptions"
              clearable
              class="shrink-0"
            />
          </div>
          <div class="form-item mt-8">
            <label>运算对象</label>
            <t-select
              v-model="c.valueType"
              class="shrink-0"
              placeholder="固定值"
            >
              <t-option key="" value="" label="固定值"> 固定值 </t-option>
              <t-option key="prop" value="prop" label="对象属性值">
                对象属性值
              </t-option>
            </t-select>
          </div>
          <div v-if="!c.valueType" class="form-item mt-8 form-item-valueType">
            <label>值</label>
            <t-input v-model="c.value" class="shrink-0" style="width: 320px" />
          </div>
          <template v-else>
            <div class="form-item mt-8">
              <label>对象</label>
              <t-tree-select
                v-model="c.target"
                :data="penTree"
                filterable
                placeholder="对象"
                class="shrink-0"
                @change="onChangeTriggerTarget(c)"
              />
            </div>
            <div class="form-item mt-8">
              <label>属性</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 = undefined"
                @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;
                      "
                    >
                      {{ item.label }}
                    </li>
                  </ul>
                </template>
              </t-select-input>
            </div>
          </template>
        </template>
        <template v-else>
          <div>function condition(pen) {</div>
          <CodeEditor class="mt-4" v-model="c.fnJs" />
          <div class="mt-4">}</div>
        </template>
      </div>
    </div>
    <div class="mt-8">
      <a @click="addTriggerCondition(data)"> + 添加触发条件 </a>
    </div>
  </div>
</template>

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

import CodeEditor from '@/views/components/common/CodeEditor.vue';
import { getPenTree, typeOptions } from '@/services/common';

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: '宽',
  //   },
  //   {
  //     value: 'height',
  //     label: '高',
  //   },
  //   {
  //     value: 'visible',
  //     label: '显示',
  //   },
  //   {
  //     value: 'text',
  //     label: '文字',
  //   },
  //   {
  //     value: 'progress',
  //     label: '进度',
  //   },
  //   {
  //     value: 'showChild',
  //     label: '状态',
  //   },
  //   {
  //     value: 'rotate',
  //     label: '旋转',
  //   },
  // ];
  const target: any = meta2d.findOne(c.target);
  if (target && target.realTimes) {
    for (const item of target.realTimes) {
      const found = cprops.findIndex((elem: any) => elem.value === item.key);
      if (found < 0) {
        cprops.push({
          value: item.key,
          label: item.label,
        });
      }
    }
  }
};

const addTriggerCondition = (data: any) => {
  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: '宽',
  },
  {
    value: 'height',
    label: '高',
  },
  {
    value: 'visible',
    label: '显示',
  },
  {
    value: 'text',
    label: '文字',
  },
  {
    value: 'progress',
    label: '进度',
  },
  {
    value: 'showChild',
    label: '状态',
  },
  {
    value: 'rotate',
    label: '旋转',
  },
]);

const operatorOptions = [
  { label: '=', value: '=' },
  { label: '!=', value: '!=' },
  { label: '>', value: '>' },
  { label: '<', value: '<' },
  { label: '>=', value: '>=' },
  { label: '<=', value: '<=' },
  { label: '包含', value: '[)' },
  { label: '不包含', value: '![)' },
];
</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>