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

<template>
  <div class="props">
    <div v-if="props.pen.events && props.pen.events.length">
      <t-collapse
        v-model="openedCollapses"
        :borderless="true"
        :expand-on-row-click="true"
        expand-icon-placement="left"
      >
        <t-collapse-panel v-for="(item, i) in props.pen.events" v-show="!item.hideInPanel" :value="i">
          <template #header>
            <div @click.stop class="head flex">
              <t-select
                v-model="item.name"
                style="width: 40%"
                @change="eventNameChange"
                :options="options"
                autoWidth
              />
              <t-input
                v-if="item.name === 'message'"
                style="width: 93px;margin-left: 20px;"
                v-model="item.message"
                :placeholder="$t('消息名')"
              />
            </div>
          </template>
          <template #headerRightContent>
            <t-space size="small" @click.stop>
              <t-popconfirm placement="left" @confirm="props.pen.events.splice(i, 1)" :content="$t('确认删除该交互事件吗？')">
                <!-- <t-icon name="delete" class="hover" /> -->
                <delete-icon class="hover"/>
              </t-popconfirm>
            </t-space>
          </template>

          <Conditions :data="props.pen.events[i]" />
          <div class="form-item mt-16" v-if="['click','dblclick'].includes(item.name)||item.confirm">
            <label> {{$t('二次确认')}}</label>
            <t-switch size="small" class="mt-8 ml-8" v-model="item.confirm" />
          </div>
          <div v-if="item.confirm" class="form-item mt-8 mb-16">
            <label>{{$t('确认文本')}}</label>
            <t-input  v-model="item.confirmTitle" />
          </div>
          <Actions :data="props.pen.events[i]" />
        </t-collapse-panel>
      </t-collapse>
      <t-divider />
      <div class="p-16">
        <t-dropdown
          :options="options"
          @click="addEvent"
          :minColumnWidth="254"
          :maxHeight="360"
        >
          <t-button class="w-full" style="height: 30px">
            {{$t('添加交互事件')}}
          </t-button>
        </t-dropdown>
      </div>
    </div>
    <div class="flex column center blank" v-else>
      <img src="/img/blank.png">
      <div class="gray center">{{$t('还没有交互事件')}}</div>
      <div class="mt-8">
        <t-dropdown :options="options" @click="addEvent" :minColumnWidth="150" :maxHeight="360">
          <t-button style="height: 30px"> {{$t('添加交互事件')}} </t-button>
        </t-dropdown>
      </div>
    </div>
  </div>
</template>

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

import Actions from './Actions.vue';
import Conditions from './Conditions.vue';
import { DeleteIcon } from 'tdesign-icons-vue-next';
import { initEvent } from '@meta2d/chart-diagram';
const { proxy } = getCurrentInstance();
const $t = proxy.$t

const props = defineProps<{
  pen: any;
}>();

// const options = ref<any>([
//   {
//     value: 'click',
//     content: $t('单击'),
//   },
//   {
//     value: 'dblclick',
//     content: $t('双击'),
//     divider: true,
//   },
//   {
//     value: 'change',
//     content: $t('输入完成'),
//   },
//   {
//     value: 'input',
//     content: $t('输入'),
//     divider: true,
//   },
//   {
//     value: 'contextmenu',
//     content: $t('鼠标右键'),
//   },
//   {
//     value: 'enter',
//     content: $t('鼠标移入'),
//   },
//   {
//     value: 'leave',
//     content: $t('鼠标移出'),
//     divider: true,
//   },
//   {
//     value: 'active',
//     content: $t('获得焦点'),
//   },
//   {
//     value: 'inactive',
//     content: $t('失去焦点'),
//     divider: true,
//   },
//   {
//     value: 'mousedown',
//     content: $t('鼠标按下'),
//   },
//   {
//     value: 'mouseup',
//     content: $t('鼠标抬起'),
//     divider: true,
//   },
//   {
//     value: 'message',
//     content: $t('监听全局消息'),
//   },
// ]);

const options: any = computed(() => {
  const options = [
    {
      value: 'click',
      content: $t('单击'),
    },
    {
      value: 'dblclick',
      content: $t('双击'),
      divider: true,
    },
  ];
  if (props.pen.dropdownList) {
    options.push({
      value: 'change',
      content: $t('选择完成'),
      divider: true,
    });
  } else if (props.pen.name === 'inputDom') {
    options.push({
      value: 'input',
      content: $t('输入'),
      divider: true,
    });
  } else if(['datePickerDom','dateRangePickerDom','treeFilterDom','cascadeFilterDom'].includes(props.pen.name)){
    options.push({
      value: 'change',
      content: '选择完成',
      divider: true,
    });
  }else if (props.pen.input) {
    options.push(
      ...[
        {
          value: 'change',
          content: $t('输入完成'),
        },
        {
          value: 'input',
          content: $t('输入'),
          divider: true,
        },
      ]
    );
  }else if(props.pen.name=='form'){
    //表单组件
    options.push(
      ...[
        {
          value: 'submit',
          content: '表单提交',
        },
        {
          value: 'reset',
          content: '表单重置',
          divider: true,
        },
      ]
    );
  }

  options.push(
    ...[
      {
        value: 'contextmenu',
        content: $t('鼠标右键'),
      },
      {
        value: 'enter',
        content: $t('鼠标移入'),
      },
      {
        value: 'leave',
        content: $t('鼠标移出'),
        divider: true,
      },
      {
        value: 'active',
        content: $t('获得焦点'),
      },
      {
        value: 'inactive',
        content: $t('失去焦点'),
        divider: true,
      },
      {
        value: 'mousedown',
        content: $t('鼠标按下'),
      },
      {
        value: 'mouseup',
        content: $t('鼠标抬起'),
        divider: true,
      },
      {
        value: 'message',
        content: $t('监听全局消息'),
      },
    ]
  );

  return options;
});

const openedCollapses = ref([0]);

onBeforeMount(() => {
  if (!props.pen.events) {
    props.pen.events = [];
  }

  for (const item of options.value) {
    item.label = item.content;
  }
});

const addEvent = (e: any) => {
  if (!props.pen.events) {
    props.pen.events = [];
  }
  props.pen.events.push({ name: e.value });
  if(props.pen.name === 'echarts'){
    initEvent(props.pen);
  }
};

const eventNameChange = ()=>{
  if(props.pen.name === 'echarts'){
    initEvent(props.pen);
  }
}

onUnmounted(() => {});
</script>
<style lang="postcss" scoped>
.props {
  height: 100%;

  .blank {
    height: 70%;
    img {
      padding: 16px;
      opacity: 0.9;
    }
  }

  .head {
    :deep(.t-select) {
      width: fit-content;

      .t-input {
        border-color: transparent;
      }
    }
  }

  .banner {
    background-color: var(--color-background-input);
    padding: 0 12px;
  }

  :deep(.value-input) {
    max-width: 95px;
  }

  :deep(.value-label){
    width: 50px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
}
</style>