|
|
|
@ -1,10 +1,7 @@ |
|
|
|
<template> |
|
|
|
<view class="render-box shadow-lg" v-if="show"> |
|
|
|
<!-- #ifdef H5 --> |
|
|
|
<view class="render-box shadow-lg" v-if="pluginInfo"> |
|
|
|
<view |
|
|
|
class="content" |
|
|
|
style="border-radius: 8px" |
|
|
|
:id="`project-${task.id}`" |
|
|
|
:id="`render-${pluginTaskId}`" |
|
|
|
:data-did="task.detailId" |
|
|
|
:data-param="param" |
|
|
|
:data-pdu="task.planDuration" |
|
|
|
@ -17,34 +14,17 @@ |
|
|
|
:data-token="token" |
|
|
|
:data-rstart="task.realStart" |
|
|
|
:data-uid="userId" |
|
|
|
:pluginInfo="pluginInfo" |
|
|
|
:change:pluginInfo="project.renderDom" |
|
|
|
></view> |
|
|
|
<!-- #endif --> |
|
|
|
<!-- #ifdef APP-PLUS --> |
|
|
|
<view |
|
|
|
class="content" |
|
|
|
:id="`project-${task.id}`" |
|
|
|
: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" |
|
|
|
></view> |
|
|
|
<!-- #endif --> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { computed, reactive, watch, ref } from 'vue'; |
|
|
|
import { computed, ref, onMounted } from 'vue'; |
|
|
|
import { useStore } from 'vuex'; |
|
|
|
|
|
|
|
defineProps({ |
|
|
|
const props = defineProps({ |
|
|
|
task: { default: () => {}, type: Object }, |
|
|
|
pluginId: { default: '1', type: String }, |
|
|
|
styleType: { default: 0, type: Number }, |
|
|
|
@ -53,82 +33,69 @@ defineProps({ |
|
|
|
param: { type: String, default: '' }, |
|
|
|
}); |
|
|
|
|
|
|
|
const data = reactive({ show: true }); |
|
|
|
|
|
|
|
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 allPlugin = uni.$storage.getStorageSync('allPlugin'); |
|
|
|
const pluginInfo = ref(null); // 插件的具体数据 |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
getPlugin(); |
|
|
|
}); |
|
|
|
// 获取插件信息 |
|
|
|
async function getPlugin() { |
|
|
|
const 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 === props.pluginId); |
|
|
|
pluginInfo.value = pluginTarget || null; |
|
|
|
} catch (error) { |
|
|
|
console.error('error: ', error); |
|
|
|
pluginInfo.value = null; |
|
|
|
} |
|
|
|
} else { |
|
|
|
// 没有本地数据 API 查询 |
|
|
|
const params = { businessPluginId: props.businessPluginId }; |
|
|
|
uni.$catchReq.getOtherPlugin(params, (err, res) => { |
|
|
|
if (err) { |
|
|
|
console.error('err: ', err); |
|
|
|
pluginInfo.value = null; |
|
|
|
} else { |
|
|
|
pluginInfo.value = res || null; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<script module="project" lang="renderjs"> |
|
|
|
// TODO: 未处理配置 多次使用插件的复用 |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
pluginContent: null, |
|
|
|
pluginJs: null, |
|
|
|
show: false, |
|
|
|
pluginLists: [], |
|
|
|
flag: false, |
|
|
|
pluginInfo: {} |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.getPlugin(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
// 获取插件信息 |
|
|
|
async getPlugin() { |
|
|
|
if (this.allPlugin) { |
|
|
|
this.pluginLists = JSON.parse(this.allPlugin); |
|
|
|
|
|
|
|
this.pluginLists.forEach(item => { |
|
|
|
if (this.pluginId === item.id) { |
|
|
|
this.flag = true; |
|
|
|
this.pluginInfo = item; |
|
|
|
this.show = true; |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
console.log(this.pluginLists); |
|
|
|
/** |
|
|
|
* 渲染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 (this.flag) { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.init(this.pluginInfo); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
const params = { businessPluginId: this.businessPluginId }; |
|
|
|
this.$catchReq.getOtherPlugin(params, (err, res) => { |
|
|
|
if (err) { |
|
|
|
console.error('err: ', err); |
|
|
|
} else { |
|
|
|
if (!res) return; |
|
|
|
if (res.html && res.js) { |
|
|
|
this.show = true; |
|
|
|
this.$nextTick(() => { |
|
|
|
this.init(res); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
if (res.js) { |
|
|
|
const script = window.document.createElement('script'); |
|
|
|
script.innerHTML = res.js; |
|
|
|
window.document.body.appendChild(script); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
init(res) { |
|
|
|
const content = document.getElementById(`project-${this.task.id}`); |
|
|
|
content.innerHTML = res.html; |
|
|
|
|
|
|
|
const script = document.createElement('script'); |
|
|
|
script.innerHTML = res.js; |
|
|
|
document.body.appendChild(script); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
