TALL-MUI-4/components/Plugin/Plugin.vue

<template>
  <view class="u-font-14" style="height: 100%">
    <view v-if="data.pluginContent" @click="setStorage">
      <view
        :data-did="task.detailId"
        :data-param="param"
        :data-pdu="task.planDuration"
        :data-pid="projectId"
        :data-pstart="task.planStart"
        :data-rdu="task.realDuration"
        :data-rid="roleId"
        :data-tid="task.id"
        :data-tname="task.name"
        :data-token="token"
        :data-rstart="task.realStart"
        :data-uid="userId"
        style="height: 100%"
        v-html="data.pluginContent"
      ></view>
    </view>

    <view v-else @click="setStorage">
      <!-- <plugin-default /> -->
      <!-- <component :task="task" :is="pluginComponent"></component> -->
      <!-- <p-task-title :task="task" v-if="pluginId === '1'" />
      <p-task-description :task="task" v-if="pluginId === '2'" />
      <p-task-duration-delay :task="task" v-if="pluginId === '3'" />
      <p-task-start-time-delay :task="task" v-if="pluginId === '4'" />
      <p-upload-deliverable :task="task" v-if="pluginId === '5' && isMine" />
      <p-delivery-history :task="task" v-if="pluginId === '5' && !isMine" />
      <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'" />
      <p-manage-project :task="task" v-if="pluginId === '9'" />
      <p-manage-role :task="task" v-if="pluginId === '10'" />
      <p-manage-member :task="task" v-if="pluginId === '11'" />
      <p-manage-task :task="task" v-if="pluginId === '12'" />
      <p-wbs-import :task="task" v-if="pluginId === '13' || pluginId === '14'" />
      <p-deliver-check :task="task" v-if="pluginId === '15'" /> -->
    </view>
  </view>
</template>

<script setup>
import { reactive, nextTick, computed } from 'vue';
import { useStore } from 'vuex';

const props = defineProps({
  task: { default: () => {}, type: Object },
  pluginId: { default: '1', type: String },
  styleType: { default: 0, type: Number },
  pluginTaskId: { default: '', type: String },
  param: { type: String, default: '' },
});

const data = reactive({ pluginContent: null });

const store = useStore();
const roleId = computed(() => store.state.role.roleId);
const token = computed(() => store.state.user.token);
const userId = computed(() => store.getters['user/userId']);
const projectId = computed(() => store.getters['project/projectId']);
const isMine = computed(() => store.getters['role/isMine']);

// 插件名称
// pluginComponent() {
//   const target = this.$t.plugin.defaults.find(item => item.id === +this.pluginId);
//   if (!target) return '';
//   return target.component;
// },

// 创建script dom
function handleDom(js) {
  const domList = Array.from(document.getElementsByTagName('script'));
  const index = domList.findIndex(item => item.id === `p${props.pluginTaskId}`);
  if (index >= 0) {
    document.body.removeChild(document.getElementById(`p${props.pluginTaskId}`));
  }
  const scriptDom = document.createElement('script');
  scriptDom.id = `p${props.pluginTaskId}`;
  scriptDom.setAttribute('data-type', 'plugin');
  scriptDom.innerHTML = js;
  nextTick(() => {
    document.body.append(scriptDom);
  });
}

// 获取插件信息
async function getPlugin() {
  const params = { pluginId: props.pluginId, styleType: props.styleType };
  uni.$catchReq.getOtherPlugin(params, (err, data) => {
    if (err) {
      console.error('err: ', err);
    } else {
      if (!data || !data.id) return;
      const reg = /data-root=["|']?(\w+)["|']?/gi;
      let uuid = '';
      // FIXME: 没有兼容  只有js, 没有html的情况
      if (data.html) {
        // 查有没有data-root=“xxx” 有的话 将xxx替换为 pluginTaskId

        if (reg.test(data.html)) {
          uuid = RegExp.$1;
          const str = data.html.replace(new RegExp(uuid, 'g'), `p${props.pluginTaskId}`);
          data.pluginContent = str;
        } else {
          data.pluginContent = data.html;
        }

        const str = data.js.replace(new RegExp(uuid, 'g'), `p${props.pluginTaskId}`);
        handleDom(str);
      }
    }
  });

  // if (data.js) {
  //   if (reg.test(data.js)) {
  //     const uuid = RegExp.$1;
  //     const str = data.js.replace(new RegExp(uuid, 'g'), `p${this.pluginTaskId}`);
  //     this.handleDom(str);
  //   } else {
  //     this.handleDom(data.js);
  //   }
  // }
}

if (props.pluginId === '5') {
  // 根据项目id获取成员列表
  store.dispatch('role/getAllMembers', { projectId: projectId.value });
}
getPlugin();

// 点击时存储 storage
async function setStorage() {
  uni.$storage.setStorageSync('roleId', roleId.value);
}
</script>