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.
122 lines
3.1 KiB
122 lines
3.1 KiB
<template>
|
|
<view class="render-box shadow-lg" v-if="pluginInfo">
|
|
<view
|
|
:id="`render-${pluginTaskId}`"
|
|
: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"
|
|
:pluginInfo="pluginInfo"
|
|
:change:pluginInfo="project.renderDom"
|
|
></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapGetters } from 'vuex';
|
|
|
|
export default {
|
|
name: 'RenderHtmlFragment',
|
|
props: {
|
|
task: { default: () => {}, type: Object },
|
|
pluginId: { default: '1', type: String },
|
|
styleType: { default: 0, type: Number },
|
|
pluginTaskId: { default: '', type: String },
|
|
businessPluginId: { default: '', type: String },
|
|
param: { type: String, default: '' },
|
|
},
|
|
data() {
|
|
return {
|
|
pluginInfo: null,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(['allPlugin']),
|
|
...mapState('role', ['roleId']),
|
|
...mapState('user', ['token']),
|
|
...mapGetters('project', ['projectId']),
|
|
...mapGetters('user', ['userId']),
|
|
},
|
|
|
|
mounted() {
|
|
this.getPlugin();
|
|
},
|
|
methods: {
|
|
getPlugin() {
|
|
const allPlugin = this.allPlugin || uni.$storage.getStorageSync('allPlugin');
|
|
if (allPlugin && JSON.parse(allPlugin)) {
|
|
// 有本地数据
|
|
try {
|
|
const pluginLists = JSON.parse(allPlugin);
|
|
// pluginLists 肯能没有find方法,交给catch处理
|
|
const pluginTarget = pluginLists.find(item => item.id === this.pluginId);
|
|
this.pluginInfo = pluginTarget || null;
|
|
} catch (error) {
|
|
console.error('error: ', error);
|
|
this.pluginInfo = null;
|
|
}
|
|
} else {
|
|
// 没有本地数据 API 查询
|
|
const params = { businessPluginId: this.businessPluginId };
|
|
uni.$catchReq.getOtherPlugin(params, (err, res) => {
|
|
if (err) {
|
|
console.error('err: ', err);
|
|
this.pluginInfo = null;
|
|
} else {
|
|
this.pluginInfo = res || null;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<script module="project" lang="renderjs">
|
|
// TODO: 未处理配置 多次使用插件的复用
|
|
export default {
|
|
methods: {
|
|
/**
|
|
* 渲染dom
|
|
* @param {object|null} res 插件详情 监听的pluginInfo
|
|
* @param {*} b
|
|
* @param {object} instance 实例对象
|
|
*/
|
|
renderDom(res, b, instance) {
|
|
console.log('res,b,instance: ', res,b,instance);
|
|
if (!res) return;
|
|
if (res.html) {
|
|
const content = window.document.getElementById(`render-${this.pluginTaskId}`);
|
|
content.innerHTML = res.html;
|
|
}
|
|
|
|
if (res.js) {
|
|
const script = window.document.createElement('script');
|
|
script.innerHTML = res.js;
|
|
window.document.body.appendChild(script);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.render-box {
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
padding: 16px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
button {
|
|
border: none !important;
|
|
}
|
|
</style>
|
|
|