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