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

<template>
  <div class="props">
    <div v-for="(a, index) in data.actions" class="mb-12">
      <div class="flex middle between">
        <div class="flex middle">动作{{ index + 1 }}</div>
        <t-icon
          name="close"
          class="hover"
          @click="data.actions.splice(index, 1)"
        />
      </div>
      <div class="py-4">
        <div class="form-item mt-4">
          <label>动作类型</label>
          <t-select
            v-model="a.action"
            placeholder="请选择"
            @change="onChangeAction(a)"
          >
            <t-option
              v-for="option in actionOptions"
              :key="option.value"
              :value="option.value"
              :label="option.label"
            />
          </t-select>
        </div>
        <template v-if="a.action == 0">
          <div class="form-item mt-8">
            <label>链接地址</label>
            <t-input v-model="a.value" placeholder="URL" />
          </div>
          <div class="form-item mt-8">
            <label>打开方式</label>
            <t-radio-group v-model="a.params">
              <t-radio value="_blank">新页面</t-radio>
              <t-radio value="_self">当前页面</t-radio>
            </t-radio-group>
          </div>
        </template>
        <template v-else-if="a.action == 13">
          <div class="form-item mt-8">
            <label>视图</label>
            <t-input v-model="a.value" placeholder="ID" />
          </div>
        </template>
        <template v-else-if="a.action == 2 || a.action == 3 || a.action == 4">
          <div class="form-item mt-8">
            <label>对象类型</label>
            <t-radio-group v-model="a.targetType" @change="a.value = ''">
              <t-radio value="id">图元</t-radio>
              <t-radio value="tag">组</t-radio>
            </t-radio-group>
          </div>
          <div class="form-item mt-8">
            <label>播放对象</label>
            <t-tree-select
              v-if="a.targetType === 'id'"
              v-model="a.value"
              :data="penTree"
              filterable
              placeholder="默认自己"
              @change="getAnimations(a.value)"
            />
            <t-select
              v-else
              v-model="a.value"
              :options="groups"
              placeholder="组"
              @change="getAnimations(a.value)"
            />
          </div>
          <div class="form-item mt-8">
            <label>动画名称</label>
            <t-select-input
              v-model:inputValue="a.params"
              :value="a.params"
              v-model:popupVisible="a.popupVisible"
              allow-input
              clearable
              @clear="a.params = undefined"
              @focus="a.popupVisible = true"
              @blur="a.popupVisible = undefined"
              placeholder="缺省第一个动画"
            >
              <template #panel>
                <ul style="padding: 8px 12px">
                  <li
                    v-for="item in animations"
                    :key="item"
                    @click="a.params = item"
                  >
                    {{ item }}
                  </li>
                </ul>
              </template>
            </t-select-input>
          </div>
        </template>
        <template v-else-if="a.action == 1">
          <div class="form-item mt-8">
            <label>对象类型</label>
            <t-radio-group v-model="a.targetType" @change="a.params = ''">
              <t-radio value="id">图元</t-radio>
              <t-radio value="tag">组</t-radio>
            </t-radio-group>
          </div>
          <div class="form-item mt-8">
            <label>更改对象</label>
            <t-tree-select
              v-if="a.targetType === 'id'"
              v-model="a.params"
              :data="penTree"
              filterable
              placeholder="默认自己"
              @change="getProps(a)"
            />
            <t-select
              v-else
              v-model="a.params"
              :options="groups"
              placeholder="组"
            />
          </div>
          <div class="form-item mt-8">
            <label>属性数据</label>
            <div class="w-full">
              <div class="prop-grid head">
                <div>属性名</div>
                <div>属性值</div>
                <div class="right">
                  <t-dropdown
                    :min-column-width="160"
                    @click="onAddValue(a, $event)"
                  >
                    <t-icon name="add-circle" class="hover" />

                    <t-dropdown-menu>
                      <t-dropdown-item
                        key="custom"
                        value="custom"
                        disabled="true"
                        divider="true"
                        class="input"
                      >
                        <t-input
                          v-model="a.input"
                          placeholder="自定义"
                          @enter="
                            onAddValue(a, { key: a.input });
                            a.input = '';
                          "
                        />
                      </t-dropdown-item>
                      <t-dropdown-item
                        v-for="prop in a.props"
                        :key="prop.value"
                        :value="prop.value"
                      >
                        {{ prop.label }}
                      </t-dropdown-item>
                    </t-dropdown-menu>
                  </t-dropdown>
                </div>
              </div>
              <template
                v-if="Object.keys(a.value).length"
                class="center gray mt-8"
              >
                <div class="prop-grid mt-8" v-for="(value, key) in a.value">
                  <div class="ml-8">
                    <t-tooltip :content="key">
                      {{ getPropDesc(a, key) }}
                    </t-tooltip>
                  </div>
                  <div>
                    <t-input v-model="a.value[key]" placeholder="值" />
                  </div>
                  <div class="right px-8" style="line-height: 20px">
                    <t-icon
                      name="delete"
                      class="hover"
                      @click="delete a.value[key]"
                    />
                  </div>
                </div>
              </template>
              <div v-else class="center gray mt-8">暂无数据</div>
            </div>
          </div>
        </template>
        <template v-else-if="a.action == 14">
          <div class="form-item mt-8">
            <label>窗口标题</label>
            <t-input v-model="a.value" placeholder="弹框标题" />
          </div>
          <div class="form-item mt-8">
            <label>画面URL</label>
            <t-input v-model="a.params" placeholder="窗口画面URL" />
          </div>
        </template>
        <template v-else-if="a.action == 7">
          <div class="form-item mt-8">
            <label>消息名称</label>
            <t-input v-model="a.value" placeholder="名称" />
          </div>
          <div class="form-item mt-8">
            <label>消息参数</label>
            <t-input v-model="a.params" placeholder="参数" />
          </div>
        </template>
        <template v-else-if="a.action == 15">
          <Network v-model="a.network" type="publish" mode="1" />

          <div class="form-item mt-8">
            <label>数据对象</label>
            <t-tree-select
              v-model="a.params"
              :data="penTree"
              filterable
              placeholder="默认自己"
              @change="getProps(a)"
            />
          </div>
          <div class="form-item mt-8">
            <label>属性数据</label>
            <div class="w-full">
              <div class="prop-grid head">
                <div>属性名</div>
                <div>属性值</div>
                <div class="right">
                  <t-dropdown
                    :min-column-width="160"
                    @click="onAddValue(a, $event)"
                  >
                    <t-icon name="add-circle" class="hover" />

                    <t-dropdown-menu>
                      <t-dropdown-item
                        key="custom"
                        value="custom"
                        disabled="true"
                        divider="true"
                        class="input"
                      >
                        <t-input
                          v-model="a.input"
                          placeholder="自定义"
                          @enter="
                            onAddValue(a, { key: a.input });
                            a.input = '';
                          "
                        />
                      </t-dropdown-item>
                      <t-dropdown-item
                        v-for="prop in a.props"
                        :key="prop.value"
                        :value="prop.value"
                      >
                        {{ prop.label }}
                      </t-dropdown-item>
                    </t-dropdown-menu>
                  </t-dropdown>
                </div>
              </div>
              <template
                v-if="Object.keys(a.value).length"
                class="center gray mt-8"
              >
                <div class="prop-grid mt-8" v-for="(value, key) in a.value">
                  <div class="ml-8">
                    <t-tooltip :content="key">
                      {{ getPropDesc(a, key) }}
                    </t-tooltip>
                  </div>
                  <div>
                    <t-input v-model="a.value[key]" placeholder="值" />
                  </div>
                  <div class="right px-8" style="line-height: 20px">
                    <t-icon
                      name="delete"
                      class="hover"
                      @click="delete a.value[key]"
                    />
                  </div>
                </div>
              </template>
              <div v-else class="center gray mt-8">暂无数据</div>
            </div>
          </div>
        </template>
        <template v-else-if="a.action == 8 || a.action == 9 || a.action == 10">
          <div class="form-item mt-8">
            <label>对象类型</label>
            <t-radio-group v-model="a.targetType" @change="a.value = ''">
              <t-radio value="id">图元</t-radio>
              <t-radio value="tag">组</t-radio>
            </t-radio-group>
          </div>
          <div class="form-item mt-8">
            <label>播放对象</label>
            <t-tree-select
              v-if="a.targetType === 'id'"
              v-model="a.value"
              :data="penTree"
              filterable
              placeholder="默认自己"
            />
            <t-select
              v-else
              v-model="a.value"
              :options="groups"
              placeholder="组"
            />
          </div>
        </template>
        <template v-else-if="a.action == 5">
          <div class="form-item mt-8">
            <label>函数</label>
            <div class="w-full">
              <div>function javascriptFn(pen) {</div>
              <CodeEditor
                v-model="a.value"
                class="mt-4"
                style="height: 200px"
              />
              <div class="mt-4">}</div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="mt-8">
      <a @click="data.actions.push({})"> + 添加动作 </a>
    </div>
  </div>
</template>

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

import CodeEditor from '@/views/components/common/CodeEditor.vue';
import Network from './Network.vue';

import { getPenAnimations, getPenTree } from '@/services/common';

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

const actionOptions = [
  {
    label: '打开链接',
    value: 0,
  },
  {
    label: '打开视图',
    value: 13,
  },
  {
    label: '播放动画',
    value: 2,
  },
  {
    label: '暂停动画',
    value: 3,
  },
  {
    label: '停止动画',
    value: 4,
  },
  {
    label: '更改属性',
    value: 1,
  },
  {
    label: '打开弹框',
    value: 14,
  },
  {
    label: '发送消息',
    value: 7,
  },
  {
    label: '发送数据',
    value: 15,
  },
  {
    label: '播放视频',
    value: 8,
  },
  {
    label: '暂停视频',
    value: 9,
  },
  {
    label: '停止视频',
    value: 10,
  },
  {
    label: '自定义函数',
    value: 5,
  },
];

const penTree: any = ref([]);
const groups: any = ref([]);
const animations: any = ref([]);

onBeforeMount(() => {
  if (!data.actions) {
    data.actions = [];
  }

  penTree.value = getPenTree();
  groups.value = [];
  const d = meta2d.store.data as any;
  if (d.groups) {
    for (const item of d.groups) {
      groups.value.push({ label: item, value: item });
    }
  }

  animations.value = getPenAnimations();
});

const getAnimations = (idOrTag: string) => {
  animations.value = getPenAnimations(idOrTag);
};

const onChangeAction = (action: any) => {
  switch (action.action) {
    case 0:
      action.value = '';
      action.params = '_blank';
      break;
    case 1:
      action.params = '';
      action.value = {};
      action.targetType = 'id';
      getProps(action);
      break;
    case 2:
    case 3:
    case 4:
      action.value = '';
      action.targetType = 'id';
      break;
    case 15:
      action.network = { options: {} };
      action.params = '';
      action.value = {};
      action.targetType = 'id';
      getProps(action);
      break;
    default:
      action.value = '';
      action.params = '';
      break;
  }
};

const getProps = (c: any) => {
  c.props = [
    {
      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: '旋转',
    },
  ];

  let target: any;
  if (c.params) {
    target = meta2d.findOne(c.params);
  } else if (meta2d.store.active) {
    target = meta2d.store.active[0];
  }
  if (target) {
    for (const item of target.realTimes) {
      const found = c.props.findIndex((elem: any) => elem.value === item.key);
      if (found < 0) {
        c.props.push({
          value: item.key,
          label: item.label,
        });
      }
    }
  }
};

const getPropDesc = (a: any, key: any) => {
  const found = a.props.find((elem: any) => elem.value === key);
  if (found) {
    return found.label;
  }

  return key;
};

const onAddValue = (action: any, data: any) => {
  if (!action.value[data.key]) {
    action.value[data.key] = undefined;
  }
};
</script>
<style lang="postcss" scoped>
.props {
  .prop-grid {
    display: grid;
    grid-template-columns: 2fr 3fr 32px;
    line-height: 30px;

    &.head {
      background: var(--color-background-input);
      padding: 0 8px;
    }
  }
}
</style>