forked from ccsens_fe/tall-mui-3
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.7 KiB
120 lines
3.7 KiB
<template>
|
|
<view class="u-font-14" style="height: 100%">
|
|
<view v-if="pluginContent">
|
|
<view
|
|
style="height: 100%"
|
|
:data-uid="userId"
|
|
:data-pid="projectId"
|
|
:data-did="task.detailId"
|
|
:data-rid="roleId"
|
|
:data-tid="task.id"
|
|
:data-tname="task.name"
|
|
:data-pstart="task.planStart"
|
|
:data-rstart="task.realStart"
|
|
:data-pdu="task.planDuration"
|
|
:data-rdu="task.realDuration"
|
|
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>
|
|
import { mapGetters, mapState } from 'vuex';
|
|
|
|
export default {
|
|
name: 'Plugin',
|
|
props: {
|
|
task: { default: () => {}, type: Object },
|
|
pluginId: { default: '1', type: String },
|
|
styleType: { default: 0, type: Number },
|
|
pluginTaskId: { default: '', type: String },
|
|
},
|
|
|
|
data() {
|
|
return { pluginContent: null };
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters('user', ['userId']),
|
|
...mapGetters('project', ['projectId']),
|
|
...mapState('role', ['roleId']),
|
|
},
|
|
|
|
created() {
|
|
this.getPlugin();
|
|
},
|
|
|
|
methods: {
|
|
// 获取插件信息
|
|
async getPlugin() {
|
|
const { pluginId, styleType } = this;
|
|
const data = await this.$u.api.getOtherPlugin({
|
|
pluginId,
|
|
styleType,
|
|
});
|
|
if (!data || !data.id) return;
|
|
const reg = /data-root=["|']?(\w+)["|']?/gi;
|
|
// console.log(data.html);
|
|
let uuid = '';
|
|
// FIXME: 没有兼容只有js 没有html的情况
|
|
if (data.html) {
|
|
// 查有没有data-root=“xxx” 有的话 将xxx替换为 pluginTaskId
|
|
|
|
if (reg.test(data.html)) {
|
|
uuid = RegExp.$1;
|
|
// console.log('uuid: ', uuid, `p${this.pluginTaskId}`);
|
|
|
|
const str = data.html.replaceAll(uuid, `p${this.pluginTaskId}`);
|
|
this.pluginContent = str;
|
|
} else {
|
|
this.pluginContent = data.html;
|
|
}
|
|
|
|
const str = data.js.replaceAll(uuid, `p${this.pluginTaskId}`);
|
|
this.handleDom(str);
|
|
}
|
|
// console.log(this.pluginContent);
|
|
|
|
// if (data.js) {
|
|
// if (reg.test(data.js)) {
|
|
// const uuid = RegExp.$1;
|
|
// const str = data.js.replaceAll(uuid, `p${this.pluginTaskId}`);
|
|
// this.handleDom(str);
|
|
// } else {
|
|
// this.handleDom(data.js);
|
|
// }
|
|
// }
|
|
},
|
|
|
|
// 创建script dom
|
|
handleDom(js) {
|
|
const { pluginTaskId } = this;
|
|
let domList = Array.from(document.getElementsByTagName('script'));
|
|
const index = domList.findIndex(item => item.id === `p${pluginTaskId}`);
|
|
if (index >= 0) {
|
|
document.body.removeChild(document.getElementById(`p${pluginTaskId}`));
|
|
}
|
|
const scriptDom = document.createElement('script');
|
|
scriptDom.id = `p${pluginTaskId}`;
|
|
scriptDom.setAttribute('data-type', 'plugin');
|
|
scriptDom.innerHTML = js;
|
|
this.$nextTick(() => {
|
|
document.body.append(scriptDom);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|