11 changed files with 422 additions and 142 deletions
@ -0,0 +1,59 @@ |
|||
<template> |
|||
<div class="u-font-14" style="height: 100%"> |
|||
<div v-if="data.pluginContent"> |
|||
<div :data-token="token" :data-uid="userId" style="height: 100%" v-html="data.pluginContent"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { computed, reactive, nextTick, defineProps } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
|
|||
const props = defineProps({ plugin: { default: () => {}, type: Object } }); |
|||
|
|||
const store = useStore(); |
|||
const token = computed(() => store.state.user.token); |
|||
const userId = computed(() => store.state.user.userId); |
|||
const data = reactive({ pluginContent: null }); |
|||
|
|||
setPlugin(); |
|||
|
|||
// 获取插件信息 |
|||
function setPlugin() { |
|||
if (!props.plugin || !props.plugin.id) return; |
|||
console.log('props.plugin: ', props.plugin); |
|||
const reg = /data-root=["|']?(\w+)["|']?/gi; |
|||
let uuid = ''; |
|||
// FIXME: 没有兼容 只有js, 没有html的情况 |
|||
if (props.plugin.html) { |
|||
// 查有没有data-root=“xxx” 有的话 将xxx替换为 pluginTaskId |
|||
if (reg.test(props.plugin.html)) { |
|||
uuid = RegExp.$1; |
|||
const str = props.plugin.html.replace(new RegExp(uuid, 'g'), `p${props.plugin.id}`); |
|||
data.pluginContent = str; |
|||
} else { |
|||
data.pluginContent = props.plugin.html; |
|||
} |
|||
const str = props.plugin.js.replace(new RegExp(uuid, 'g'), `p${props.plugin.id}`); |
|||
handleDom(str); |
|||
} |
|||
} |
|||
|
|||
// 创建script dom |
|||
function handleDom(js) { |
|||
const domList = Array.from(document.getElementsByTagName('script')); |
|||
const index = domList.findIndex(item => item.id === `p${props.plugin.id}`); |
|||
if (index >= 0) { |
|||
document.body.removeChild(document.getElementById(`p${props.plugin.id}`)); |
|||
} |
|||
const scriptDom = document.createElement('script'); |
|||
scriptDom.id = `p${props.plugin.id}`; |
|||
scriptDom.setAttribute('data-type', 'plugin'); |
|||
scriptDom.innerHTML = js; |
|||
console.log('scriptDom: ', scriptDom); |
|||
nextTick(() => { |
|||
document.body.append(scriptDom); |
|||
}); |
|||
} |
|||
</script> |
|||
@ -0,0 +1,70 @@ |
|||
<template> |
|||
<el-scrollbar height="200px" @scroll="scroll"> |
|||
<el-radio @change="chooseBusiness" v-model="data.isCollapse" :label="business.id" v-for="business in businessLists" :key="business.id"> |
|||
{{ business.name }} |
|||
</el-radio> |
|||
<div class="loading">{{ isLastPage ? '到底啦~' : '加载中...' }}</div> |
|||
</el-scrollbar> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { reactive, defineProps, defineEmits } from 'vue'; |
|||
import { ElMessage } from 'element-plus'; |
|||
import { relevance } from '@/apis/business.js'; |
|||
|
|||
const props = defineProps({ |
|||
businessLists: { default: () => [], type: Array }, |
|||
pluginId: { default: '', type: String }, |
|||
businessId: { default: '', type: String }, |
|||
isLastPage: { default: false, type: Boolean }, |
|||
}); |
|||
|
|||
const emit = defineEmits(['changePageNum', 'query']); |
|||
|
|||
const data = reactive({ |
|||
isCollapse: '', |
|||
showLoading: false, |
|||
scrollTop: 0, |
|||
}); |
|||
|
|||
function scroll(e) { |
|||
if (props.isLastPage) return; |
|||
data.scrollTop = e.scrollTop; |
|||
if (e.scrollTop === 220) { |
|||
emit('changePageNum'); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 关联业务和插件 |
|||
* @param {string} businessId 业务id |
|||
* @param {string} pluginId 插件id |
|||
*/ |
|||
async function chooseBusiness(e) { |
|||
try { |
|||
data.isCollapse = e; |
|||
const params = { |
|||
param: { |
|||
businessId: props.businessId ? props.businessId : e, |
|||
pluginId: props.pluginId ? props.pluginId : e, |
|||
}, |
|||
}; |
|||
await relevance(params); |
|||
ElMessage.success('关联成功'); |
|||
if (props.businessId) { |
|||
emit('query', props.businessId); |
|||
} |
|||
} catch (error) { |
|||
ElMessage.error('关联失败'); |
|||
console.error('error: ', error); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.loading { |
|||
width: 100%; |
|||
text-align: center; |
|||
color: #aaa; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,18 @@ |
|||
const time = { |
|||
dateFormat(value) { |
|||
if (value) { |
|||
const date = new Date(Number(value)); // 时间戳为秒：13位数
|
|||
// let date = new Date(value * 1000) // 时间戳为毫秒：10位数
|
|||
const year = date.getFullYear(); |
|||
const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1; |
|||
const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate(); |
|||
const hour = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours(); |
|||
const minute = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes(); |
|||
const second = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds(); |
|||
return `${year}-${month}-${day} ${hour}:${minute}:${second}`; |
|||
} |
|||
return ''; |
|||
}, |
|||
}; |
|||
|
|||
export default time; |
|||
Loading…
Reference in new issue