combination-tall/src/components/Plugin/Plugin.vue

<template>
  <view class="u-font-14" style="height: 100%">
    <view v-if="pluginContent">
      <view style="height: 100%" v-html="pluginContent"></view>
    </view>

    <view v-else>
      <p-task-title :name="task.name" v-if="pluginId === '1'" />
      <p-task-description :text="task.description" v-if="pluginId === '2'" />
      <p-task-duration-delay :realDuration="task.realDuration" :planDuration="task.planDuration" v-if="pluginId === '3'" />
      <p-task-start-time-delay :realStart="task.realStart" :planStart="task.planStart" v-if="pluginId === '4'" />
      <!-- <p-task-start-time-delay :task="task" v-if="pluginId === '4'" /> -->
      <!-- <p-deliverable :task="task" v-if="pluginId === '5'" /> -->
      <!-- <p-subtasks :task="task" v-if="pluginId === '6'" /> -->
      <!-- <p-subproject :task="task" v-if="pluginId === '7'" /> -->
      <!-- <p-task-countdown :task="task" v-if="pluginId === '8'" /> -->
    </view>
  </view>
</template>

<script>
export default {
  name: 'Plugin',
  props: {
    task: { default: () => {}, type: Object },
    pluginId: { default: '1', type: String },
    styleType: { default: 0, type: Number },
    pluginTaskId: { default: '0', type: String },
  },

  data() {
    return { pluginContent: null };
  },

  created() {
    this.getPlugin();
  },

  methods: {
    // 获取插件信息
    async getPlugin() {
      const { pluginId, styleType } = this;
      const data = await this.$u.api.getOtherPlugin({
        pluginId,
        styleType,
      });
      if (!data || !data.id) return;
      if (data.html) {
        // 查有没有data-root=“xxx” 有的话 将xxx替换为 pluginTaskId
        const reg = /data-root="(\w+)"/gi;
        if (reg.test(data.html)) {
          const str = data.html.replace(RegExp.$1, this.pluginTaskId);
          this.pluginContent = str;
        } else {
          this.pluginContent = data.html;
        }
      }
      if (data.js) {
        if (reg.test(data.js)) {
          const str = data.js.replace(RegExp.$1, this.pluginTaskId);
          this.handleDom(str);
        } else {
          this.handleDom(data.js);
        }
      }
    },

    // 创建script dom
    handleDom(js) {
      const { pluginId } = this;
      let domList = Array.from(document.getElementsByTagName('script'));
      const index = domList.findIndex(item => item.id === `p${pluginId}`);
      if (js && index === -1) {
        const scriptDom = document.createElement('script');
        scriptDom.id = `p${pluginId}`;
        scriptDom.innerHTML = js;
        document.body.append(scriptDom);
      }
    },
  },
};
</script>