Compare commits
19 Commits
| Author | SHA1 | Date |
|---|---|---|
 song
|
2c3e5fe10f | 3 years ago |
|
song
|
d0a2de9d07 | 3 years ago |
|
song
|
e7e360db60 | 4 years ago |
|
song
|
244bca2c2c | 4 years ago |
|
song
|
7619fc3a9d | 4 years ago |
|
lucky
|
eba23d6024 | 4 years ago |
|
song
|
8bd74f7c75 | 4 years ago |
|
song
|
f7fbdfc19a | 4 years ago |
|
song
|
d5d98515a0 | 4 years ago |
|
song
|
05a19463dd | 4 years ago |
|
lucky
|
fed5c223c3 | 4 years ago |
|
lucky
|
8fe7c7ba4b | 4 years ago |
|
song
|
2ee5dc2ac4 | 4 years ago |
|
song
|
871975049f | 4 years ago |
|
song
|
a73f14c3e9 | 4 years ago |
|
song
|
81b073aa2a | 4 years ago |
Min5203
|
215192d1d5 | 4 years ago |
|
Min5203
|
a063e9b1c9 | 4 years ago |
|
Min5203
|
14f543c58e | 4 years ago |
41 changed files with 2462 additions and 699 deletions
@ -1 +1,2 @@ |
|||||
VITE_API_URL=http://localhost:4001 |
VITE_API_URL=https://test.tall.wiki |
||||
|
VITE_API_URL_NEW=http://101.201.226.163 |
||||
|
|||||
@ -1 +1,2 @@ |
|||||
VITE_API_URL=http://139.196.27.233:29001 |
VITE_API_URL=http://www.tall.wiki |
||||
|
VITE_API_URL_NEW=http://101.201.226.163 |
||||
|
|||||
@ -1 +1,2 @@ |
|||||
VITE_API_URL=https://test.tall.wiki |
VITE_API_URL=https://test.tall.wiki |
||||
|
VITE_API_URL_NEW=http://101.201.226.163 |
||||
|
|||||
File diff suppressed because it is too large
@ -0,0 +1,30 @@ |
|||||
|
// noinspection SpellCheckingInspection
|
||||
|
|
||||
|
import http from 'utils/axios'; |
||||
|
|
||||
|
const apiUrl = import.meta.env.VITE_API_URL_NEW; |
||||
|
const business = `${apiUrl}/gateway/opt/business`; |
||||
|
|
||||
|
// 查询业务列表
|
||||
|
export const queryBusiness = params => http.post(`${business}/query`, params); |
||||
|
|
||||
|
// 查询业务下关联的插件
|
||||
|
export const queryPluginByBusiness = params => http.post(`${business}/queryPlugin`, params); |
||||
|
|
||||
|
// 关联业务和插件
|
||||
|
export const relevance = params => http.post(`${business}/relevance`, params); |
||||
|
|
||||
|
// 添加业务信息
|
||||
|
export const saveBusiness = params => http.post(`${business}/save`, params); |
||||
|
|
||||
|
// 修改业务下的插件配置信息
|
||||
|
export const updateConfig = params => http.post(`${business}/updateConfig`, params); |
||||
|
|
||||
|
// 通过id查询业务信息
|
||||
|
export const queryIdBusiness = params => http.post(`${business}/queryIdBusiness`, params); |
||||
|
|
||||
|
// 移除业务下关联的插件
|
||||
|
export const delRelevance = params => http.post(`${business}/delRelevance`, params); |
||||
|
|
||||
|
// 删除业务
|
||||
|
export const delBusiness = params => http.post(`${business}/del`, params); |
||||
@ -0,0 +1,21 @@ |
|||||
|
// noinspection SpellCheckingInspection
|
||||
|
|
||||
|
import http from 'utils/axios'; |
||||
|
|
||||
|
const apiUrl = import.meta.env.VITE_API_URL_NEW; |
||||
|
const plugin = `${apiUrl}/gateway/opt/plugin`; |
||||
|
|
||||
|
// 查询插件列表
|
||||
|
export const queryPlugins = params => http.post(`${plugin}/query`, params); |
||||
|
|
||||
|
// 获取一个随机id
|
||||
|
export const randomId = params => http.post(`${plugin}/randomId`, params); |
||||
|
|
||||
|
// 创建插件
|
||||
|
export const savePlugin = params => http.post(`${plugin}/save`, params); |
||||
|
|
||||
|
// 修改插件信息
|
||||
|
export const updatePlugin = params => http.post(`${plugin}/update`, params); |
||||
|
|
||||
|
// 删除插件
|
||||
|
export const delPlugin = params => http.post(`${plugin}/del`, params); |
||||
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,19 @@ |
|||||
|
<template> |
||||
|
<el-breadcrumb separator="/"> |
||||
|
<el-breadcrumb-item v-for="(item, index) in path" :key="index"> |
||||
|
<span @click="router.push({ name: item.name })" v-if="index !== path.length - 1" class="font-bold cursor-pointer">{{ |
||||
|
item.title |
||||
|
}}</span> |
||||
|
<span v-else>{{ item.title }}</span> |
||||
|
</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
import { defineProps } from 'vue'; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
|
||||
|
defineProps({ path: { default: () => [], type: Array } }); |
||||
|
</script> |
||||
@ -0,0 +1,81 @@ |
|||||
|
<template> |
||||
|
<el-button type="primary" @click="data.dialogVisible = true">配置</el-button> |
||||
|
<el-dialog v-model="data.dialogVisible" title="配置" width="40%"> |
||||
|
<!-- main --> |
||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="150px" class="forms"> |
||||
|
<el-form-item label="配置文件：" prop="config"> |
||||
|
<el-input v-model="form.config" type="textarea" placeholder="请输入配置文件"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item> <el-switch v-model="form.debug" class="mr-3"></el-switch> 是否开启debug模式 </el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="onSubmit()">发布</el-button> |
||||
|
<el-button @click="resetForm()">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { defineProps, reactive, ref } from 'vue'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
import { updateConfig } from '@/apis/business'; |
||||
|
|
||||
|
const formRef = ref(null); |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
businessPluginId: { default: '', type: String }, |
||||
|
oldConfig: { default: '', type: String }, |
||||
|
oldDebug: { default: 0, type: Number }, |
||||
|
}); |
||||
|
|
||||
|
const form = reactive({ |
||||
|
config: '', |
||||
|
debug: false, |
||||
|
}); |
||||
|
|
||||
|
const rules = { config: [{ required: true, message: '请输入配置文件', trigger: 'blur' }] }; |
||||
|
|
||||
|
const data = reactive({ dialogVisible: false }); |
||||
|
|
||||
|
if (props.oldConfig) { |
||||
|
form.config = props.oldConfig; |
||||
|
} |
||||
|
if (props.oldDebug) { |
||||
|
form.debug = props.oldDebug === 1; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 配置修改 |
||||
|
* @param {object} params |
||||
|
*/ |
||||
|
function onSubmit() { |
||||
|
try { |
||||
|
formRef.value.validate(async valid => { |
||||
|
if (valid) { |
||||
|
const params = { |
||||
|
param: { |
||||
|
businessPluginId: props.businessPluginId, |
||||
|
config: form.config, |
||||
|
debug: form.debug ? 1 : 0, |
||||
|
}, |
||||
|
}; |
||||
|
await updateConfig(params); |
||||
|
ElMessage.success('配置修改成功'); |
||||
|
resetForm(); |
||||
|
data.dialogVisible = true; |
||||
|
} else { |
||||
|
console.log('error submit!!'); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} catch (error) { |
||||
|
ElMessage.error(error || '配置修改失败'); |
||||
|
console.error('error: ', error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 重置 |
||||
|
function resetForm() { |
||||
|
formRef.value.resetFields(); |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,45 @@ |
|||||
|
<template> |
||||
|
<el-menu :default-active="data.menuIndex" class="el-menu-demo" mode="vertical" @select="handleSelect"> |
||||
|
<el-menu-item :disabled="list.disabled" :index="index" @click="openPage(list.name)" v-for="(list, index) in data.menus" :key="index"> |
||||
|
{{ list.title }} |
||||
|
</el-menu-item> |
||||
|
</el-menu> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { reactive, computed, watchEffect } from 'vue'; |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
|
||||
|
const store = useStore(); |
||||
|
const leftIndex = computed(() => store.state.plugin.leftIndex); |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
const data = reactive({ |
||||
|
menus: [ |
||||
|
{ title: '概览', name: '', disabled: true }, |
||||
|
{ title: '创建业务', name: 'desk-add-business', disabled: false }, |
||||
|
{ title: '创建插件', name: 'desk-add-plugin', disabled: false }, |
||||
|
{ title: '我的业务', name: 'desk-business-list', disabled: false }, |
||||
|
{ title: '我的插件', name: 'desk-plugin-list', disabled: false }, |
||||
|
], |
||||
|
menuIndex: '', |
||||
|
}); |
||||
|
|
||||
|
console.log('menuIndex: ', data.menuIndex); |
||||
|
watchEffect(() => { |
||||
|
if (leftIndex && leftIndex.value) { |
||||
|
data.menuIndex = leftIndex.value; |
||||
|
console.log('data.menuIndex: ', data.menuIndex); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
function handleSelect(e) { |
||||
|
store.commit('plugin/setLeftIndex', e); |
||||
|
} |
||||
|
|
||||
|
// 点击跳转路由 |
||||
|
function openPage(name) { |
||||
|
router.push({ name }); |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,215 @@ |
|||||
|
<template> |
||||
|
<div v-if="data.listArray && data.listArray.length"> |
||||
|
<div class="shop-content flex py-5" v-for="(list, index) in data.listArray" :key="list.id"> |
||||
|
<img :src="list.preview" alt="" class="shop-left" /> |
||||
|
<div class="shop-right ml-8"> |
||||
|
<div> |
||||
|
<span class="text-xl font-semibold">{{ list.name }}</span> <span class="ml-5 text-sm">{{ list.versions }}</span> |
||||
|
</div> |
||||
|
<div class="mt-4 desc text-sm"> |
||||
|
<span> 描述：</span> <span>{{ list.intro }}</span> |
||||
|
</div> |
||||
|
<div class="mt-5 text-sm" v-if="list.tags && list.tags.length"> |
||||
|
<el-tag v-for="item in list.tags" :type="item.btnType" class="mr-3" :key="item.name">{{ item.name }}</el-tag> |
||||
|
</div> |
||||
|
<div class="mt-5 text-sm flex flex-row"> |
||||
|
<span>行业:</span> <span>{{ list.industryName || '无' }}</span> <span class="ml-8">分类:</span> |
||||
|
<span>{{ list.sortName || '无' }}</span> |
||||
|
</div> |
||||
|
<div class="mt-4 text-sm"> |
||||
|
<span>更新日期:</span> <span>{{ list.updateTime || '无' }}</span> <span class="ml-8">作者:</span> |
||||
|
<span>{{ list.authorName || '无' }}</span> |
||||
|
</div> |
||||
|
<div class="mt-6"> |
||||
|
<el-popconfirm |
||||
|
title="确定要移除该插件吗?" |
||||
|
confirm-button-text="确定" |
||||
|
cancel-button-text="再想想" |
||||
|
v-if="showConfig" |
||||
|
@confirm="deleteRelevance(list)" |
||||
|
> |
||||
|
<template #reference> |
||||
|
<el-button type="primary">移除</el-button> |
||||
|
</template> |
||||
|
</el-popconfirm> |
||||
|
<el-button type="primary" disabled>下载源代码</el-button> |
||||
|
<el-button type="primary" disabled>下载示例代码</el-button> |
||||
|
<!-- 添加到业务弹框 --> |
||||
|
<el-popover placement="right" title="请选择业务" :width="240" trigger="click" v-if="!showConfig"> |
||||
|
<div class="radio-box"> |
||||
|
<Relevance |
||||
|
:businessLists="data.businessLists" |
||||
|
:pluginId="list.id" |
||||
|
:isLastPage="data.isLastPage" |
||||
|
@changePageNum="changePageNum" |
||||
|
/> |
||||
|
</div> |
||||
|
<template #reference> |
||||
|
<el-button type="primary" @click="handleQueryBusiness">添加到业务</el-button> |
||||
|
</template> |
||||
|
</el-popover> |
||||
|
<!-- 配置 --> |
||||
|
<!-- <el-button type="primary" v-if="showConfig" @click="data.dialogVisible = true">配置</el-button> --> |
||||
|
<Configure v-if="showConfig" :businessPluginId="list.businessPluginId" :oldConfig="list.config" :oldDebug="list.debug" /> |
||||
|
<!-- 预览 --> |
||||
|
<el-button type="primary" @click="collapseVisible(index)" style="margin-left: 10px">{{ |
||||
|
!list.visible ? '预览' : '关闭预览' |
||||
|
}}</el-button> |
||||
|
<div class="plugin-box" v-if="list.visible"> |
||||
|
<div class="plugin w-full h-full overflow-y-scroll"> |
||||
|
<Plugin :plugin="list" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-empty v-else description="暂无插件信息"></el-empty> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup="true"> |
||||
|
import { defineProps, reactive, watchEffect, defineEmits } from 'vue'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
import { queryBusiness, delRelevance } from '@/apis/business.js'; |
||||
|
|
||||
|
const data = reactive({ |
||||
|
currentPage: 1, |
||||
|
businessLists: [], |
||||
|
isLastPage: false, |
||||
|
listArray: [], |
||||
|
}); |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
lists: { default: () => [], type: Array }, |
||||
|
showConfig: { default: false, type: Boolean }, |
||||
|
businessId: { default: '', type: String }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits(['queryPluginOfBusiness']); |
||||
|
|
||||
|
watchEffect(() => { |
||||
|
if (props.lists && props.lists.length) { |
||||
|
data.listArray = []; |
||||
|
props.lists.forEach(item => { |
||||
|
item.visible = false; |
||||
|
data.listArray.push(item); |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 换页 |
||||
|
function changePageNum() { |
||||
|
data.currentPage++; |
||||
|
handleQueryBusiness(); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 查询业务列表 |
||||
|
* @param {number} depth 查询深度 0则只查名称，1则查询全部 |
||||
|
* @param {number} name 插件名称，为空则不实用该条件 |
||||
|
* @param {number} pageNum 第几页 |
||||
|
* @param {number} pageSize 每页几条信息 |
||||
|
*/ |
||||
|
async function handleQueryBusiness() { |
||||
|
try { |
||||
|
const { currentPage } = data; |
||||
|
if (currentPage === 1) { |
||||
|
data.businessLists = []; |
||||
|
} |
||||
|
const params = { |
||||
|
param: { |
||||
|
depth: 0, |
||||
|
name: '', |
||||
|
pageNum: currentPage, |
||||
|
pageSize: 10, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await queryBusiness(params); |
||||
|
if (res.list.length) { |
||||
|
res.list.forEach(item => { |
||||
|
data.businessLists.push(item); |
||||
|
}); |
||||
|
} |
||||
|
data.currentPage = res.pageNum - 0; |
||||
|
data.isLastPage = res.isLastPage; |
||||
|
} catch (error) { |
||||
|
console.error('error: ', error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 预览 |
||||
|
function collapseVisible(index) { |
||||
|
data.listArray.forEach((item, i) => { |
||||
|
if (i === index) { |
||||
|
item.visible = !item.visible; |
||||
|
} else { |
||||
|
item.visible = false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 移除业务下的插件 |
||||
|
*/ |
||||
|
async function deleteRelevance(list) { |
||||
|
try { |
||||
|
const params = { param: { businessPluginId: list.businessPluginId } }; |
||||
|
await delRelevance(params); |
||||
|
ElMessage.success('删除成功'); |
||||
|
emit('queryPluginOfBusiness', props.businessId); |
||||
|
} catch (error) { |
||||
|
ElMessage.success(error || '删除失败'); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.el-input { |
||||
|
width: 20%; |
||||
|
margin-right: 2rem; |
||||
|
} |
||||
|
.el-select { |
||||
|
margin-right: 2rem; |
||||
|
width: 20%; |
||||
|
} |
||||
|
.desc { |
||||
|
height: 30px; |
||||
|
line-height: 15px; |
||||
|
text-overflow: -o-ellipsis-lastline; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
.shop-left { |
||||
|
width: 288px; |
||||
|
height: 263px; |
||||
|
} |
||||
|
|
||||
|
.radio-box { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.radio-box >>> .el-radio { |
||||
|
min-width: 100%; |
||||
|
margin: 0 !important; |
||||
|
} |
||||
|
|
||||
|
.plugin-box { |
||||
|
position: fixed; |
||||
|
right: 14rem; |
||||
|
background: url(../assets/iPhone13.png) no-repeat; |
||||
|
background-size: contain; |
||||
|
width: 19.375rem; |
||||
|
height: 39.2419rem; |
||||
|
top: calc(50vh - 289.93512px + 1.8rem); |
||||
|
padding: 2.8rem 1.2rem 2rem; |
||||
|
z-index: 99; |
||||
|
} |
||||
|
|
||||
|
.plugin::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,54 @@ |
|||||
|
<template> |
||||
|
<div class="flex flex-row justify-space-between items-center"> |
||||
|
<div class="flex flex-row items-center"> |
||||
|
<div>业务名称：</div> |
||||
|
<el-input disabled v-model="data.keywords" placeholder="请输入业务名称或标签搜索" class="search-input mr-10" /> |
||||
|
<div>状态：</div> |
||||
|
<el-select disabled v-model="data.status" placeholder="请选择" class="search-input" @change="changeState"> |
||||
|
<el-option v-for="item in data.statusList" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="flex-1 ml-10"> |
||||
|
<el-button type="primary" size="small" class="w-60px h-40px" disabled>查询</el-button> |
||||
|
<el-button size="small" class="w-60px h-40px reset" disabled>重置</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup="true"> |
||||
|
import { reactive } from 'vue'; |
||||
|
|
||||
|
const data = reactive({ |
||||
|
keywords: '', |
||||
|
status: '', |
||||
|
statusList: [ |
||||
|
{ |
||||
|
value: '状态一', |
||||
|
label: '状态一', |
||||
|
}, |
||||
|
{ |
||||
|
value: '状态二', |
||||
|
label: '状态二', |
||||
|
}, |
||||
|
{ |
||||
|
value: '状态三', |
||||
|
label: '状态三', |
||||
|
}, |
||||
|
], |
||||
|
}); |
||||
|
|
||||
|
function changeState(e) { |
||||
|
console.log('e: ', e); |
||||
|
data.status = e; |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.search-input { |
||||
|
width: 18rem; |
||||
|
} |
||||
|
|
||||
|
.reset { |
||||
|
margin-left: 0.75rem; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,117 @@ |
|||||
|
<template> |
||||
|
<div v-if="lists && lists.length"> |
||||
|
<el-table :data="lists" class="bg-title" style="width: 100%"> |
||||
|
<el-table-column prop="name" label="业务名称"> </el-table-column> |
||||
|
<el-table-column prop="appId" label="APPID" width="300"> </el-table-column> |
||||
|
<el-table-column prop="startUsing" label="状态" key="slot" sortable> |
||||
|
<template #default="scope"> |
||||
|
<div class="flex flex-row items-center" @click="change(scope.row)"> |
||||
|
<div :class="scope.row.startUsing ? 'point bg-green-500' : 'point bg-red-500'"></div> |
||||
|
<span style="margin-left: 10px">{{ scope.row.startUsing ? '启动' : '禁用' }}</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="公开" sortable key="slot" width="180"> |
||||
|
<template #default="scope"> |
||||
|
<div class="flex flex-row items-center" @click="change(scope.row)"> |
||||
|
<div :class="scope.row.pub ? 'point bg-green-500' : 'point bg-red-500'"></div> |
||||
|
<span style="margin-left: 10px">{{ scope.row.pub ? '公开' : '非公开' }}</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createTime" :formatter="changeDate" label="创建日期" sortable></el-table-column> |
||||
|
<el-table-column label="操作" key="slot"> |
||||
|
<template #default="scope"> |
||||
|
<el-popconfirm |
||||
|
title="确定删除这条业务吗?" |
||||
|
confirm-button-text="确定" |
||||
|
cancel-button-text="再想想" |
||||
|
@confirm="deleteBusiness(scope.row)" |
||||
|
> |
||||
|
<template #reference> |
||||
|
<el-button type="text" size="small">删除</el-button> |
||||
|
</template> |
||||
|
</el-popconfirm> |
||||
|
<el-button type="text" size="small" disabled>配置</el-button>.. |
||||
|
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<template slot="empty"> |
||||
|
<p>没有记录哦~</p> |
||||
|
</template> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<el-empty v-else description="暂无业务信息"></el-empty> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
import { defineProps, defineEmits } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import time from 'utils/time'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
import { delBusiness } from '@/apis/business.js'; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
const store = useStore(); |
||||
|
defineProps({ |
||||
|
lists: { default: () => [], type: Array }, |
||||
|
currentPage: { default: 1, type: Number }, |
||||
|
pageSize: { default: 10, type: Number }, |
||||
|
total: { default: 0, type: Number }, |
||||
|
showConfig: { default: false, type: Boolean }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits(['handleQueryBusiness']); |
||||
|
|
||||
|
function change(row) { |
||||
|
console.log('row: ', row); |
||||
|
} |
||||
|
|
||||
|
function handleClick(row) { |
||||
|
router.push({ name: 'business-detail', query: { id: row.id } }); |
||||
|
store.commit('plugin/setBusinessInfo', row); |
||||
|
} |
||||
|
|
||||
|
function changeDate(row) { |
||||
|
const value = row.createTime; |
||||
|
return time.dateFormat(value); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 删除业务 |
||||
|
* @param {String} businessId |
||||
|
*/ |
||||
|
async function deleteBusiness(row) { |
||||
|
try { |
||||
|
// 这里写接口 记得加 async await |
||||
|
const params = { param: { businessId: row.id } }; |
||||
|
await delBusiness(params); |
||||
|
emit('handleQueryBusiness'); |
||||
|
ElMessage.success('删除成功'); |
||||
|
} catch (error) { |
||||
|
ElMessage.error(error || '删除失败'); |
||||
|
console.error('error: ', error); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.bg-title >>> thead tr th { |
||||
|
color: #333; |
||||
|
background: #fafafa; |
||||
|
border-top: 1px solid #e8e8e8; |
||||
|
} |
||||
|
.bg-title >>> thead tr th:first-child { |
||||
|
border-left: 1px solid #e8e8e8; |
||||
|
} |
||||
|
.bg-title >>> thead tr th:last-child { |
||||
|
border-right: 1px solid #e8e8e8; |
||||
|
} |
||||
|
|
||||
|
.point { |
||||
|
width: 6px; |
||||
|
height: 6px; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,69 @@ |
|||||
|
<template> |
||||
|
<div class="pagination mt-15 flex flex-row-reverse"> |
||||
|
<el-config-provider :locale="zhCn"> |
||||
|
<el-pagination |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:current-page.sync="currentPage" |
||||
|
:page-size="pageSize" |
||||
|
layout="prev, pager, next, sizes, jumper" |
||||
|
:total="total" |
||||
|
:page-sizes="[10, 15, 20, 30, 40, 50]" |
||||
|
> |
||||
|
</el-pagination> |
||||
|
</el-config-provider> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup="true"> |
||||
|
import { defineProps, defineEmits } from 'vue'; |
||||
|
import { ElConfigProvider } from 'element-plus'; |
||||
|
import zhCn from 'element-plus/lib/locale/lang/zh-cn'; |
||||
|
|
||||
|
defineProps({ |
||||
|
currentPage: { default: 1, type: Number }, |
||||
|
pageSize: { default: 10, type: Number }, |
||||
|
total: { default: 0, type: Number }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits(['handleSizeChange', 'handleCurrentChange']); |
||||
|
|
||||
|
function handleSizeChange(val) { |
||||
|
emit('handleSizeChange', val); |
||||
|
} |
||||
|
|
||||
|
function handleCurrentChange(val) { |
||||
|
emit('handleCurrentChange', val); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.pagination >>> .el-pager li, |
||||
|
.pagination >>> .btn-prev, |
||||
|
.pagination >>> .btn-next { |
||||
|
border: 1px solid #ccc; |
||||
|
width: 2rem; |
||||
|
height: 2rem; |
||||
|
line-height: 2rem; |
||||
|
text-align: center; |
||||
|
padding: 0; |
||||
|
margin: 0 8px; |
||||
|
border-radius: 6px; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
.pagination >>> .el-pager li.active { |
||||
|
border: 1px solid #409eff; |
||||
|
color: #fff; |
||||
|
background: #409eff; |
||||
|
} |
||||
|
.pagination >>> .el-input__inner { |
||||
|
height: 2rem; |
||||
|
line-height: 2rem; |
||||
|
border: 1px solid #ccc; |
||||
|
border-radius: 6px !important; |
||||
|
} |
||||
|
|
||||
|
.pagination >>> .el-pagination__jump { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,85 @@ |
|||||
|
<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() { |
||||
|
let id = ''; |
||||
|
if (props.plugin) { |
||||
|
if (props.plugin.id) { |
||||
|
id = props.plugin.id; |
||||
|
} |
||||
|
if (props.plugin.pluginId) { |
||||
|
id = props.plugin.pluginId; |
||||
|
} |
||||
|
} |
||||
|
if (!props.plugin || !id) { |
||||
|
previewAddPlugin(); |
||||
|
return; |
||||
|
} |
||||
|
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${id}`); |
||||
|
data.pluginContent = str; |
||||
|
} else { |
||||
|
data.pluginContent = props.plugin.html; |
||||
|
} |
||||
|
const str = props.plugin.js.replace(new RegExp(uuid, 'g'), `p${id}`); |
||||
|
handleDom(str, id); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 创建script dom |
||||
|
function handleDom(js, id) { |
||||
|
const domList = Array.from(document.getElementsByTagName('script')); |
||||
|
const index = domList.findIndex(item => item.id === `p${id}`); |
||||
|
if (index >= 0) { |
||||
|
document.body.removeChild(document.getElementById(`p${id}`)); |
||||
|
} |
||||
|
const scriptDom = document.createElement('script'); |
||||
|
scriptDom.id = `p${id}`; |
||||
|
scriptDom.setAttribute('data-type', 'plugin'); |
||||
|
scriptDom.innerHTML = js; |
||||
|
nextTick(() => { |
||||
|
document.body.append(scriptDom); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 没有id |
||||
|
function previewAddPlugin() { |
||||
|
console.log('props.plugin: ', props.plugin); |
||||
|
// FIXME: 没有兼容 只有js, 没有html的情况 |
||||
|
if (props.plugin.html) { |
||||
|
// 查有没有data-root=“xxx” 有的话 将xxx替换为 pluginTaskId |
||||
|
data.pluginContent = props.plugin.html; |
||||
|
const scriptDom = document.createElement('script'); |
||||
|
scriptDom.setAttribute('data-type', 'plugin'); |
||||
|
scriptDom.innerHTML = props.plugin.js; |
||||
|
console.log('scriptDom: ', scriptDom); |
||||
|
nextTick(() => { |
||||
|
document.body.append(scriptDom); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,113 @@ |
|||||
|
<template> |
||||
|
<div v-if="lists && lists.length"> |
||||
|
<el-table :data="lists" class="bg-title" style="width: 100%"> |
||||
|
<el-table-column prop="name" label="插件名称"> </el-table-column> |
||||
|
<el-table-column prop="appId" label="APPID"> </el-table-column> |
||||
|
<el-table-column prop="startUsing" label="状态" key="slot" sortable> |
||||
|
<template #default="scope"> |
||||
|
<div class="flex flex-row items-center" @click="change(scope.row)"> |
||||
|
<div :class="!scope.row.startUsing ? 'point bg-green-500' : 'point bg-red-500'"></div> |
||||
|
<span style="margin-left: 10px">{{ !scope.row.startUsing ? '启动' : '禁用' }}</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="pub" label="公开" sortable key="slot"> |
||||
|
<template #default="scope"> |
||||
|
<div class="flex flex-row items-center" @click="change(scope.row)"> |
||||
|
<div :class="!scope.row.pub ? 'point bg-green-500' : 'point bg-red-500'"></div> |
||||
|
<span style="margin-left: 10px">{{ !scope.row.pub ? '公开' : '非公开' }}</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createTime" :formatter="changeCreateDate" label="创建日期" sortable></el-table-column> |
||||
|
<el-table-column prop="updateTime" :formatter="changeUpdateDate" label="更新日期" sortable></el-table-column> |
||||
|
<el-table-column label="操作" key="slot"> |
||||
|
<template #default="scope"> |
||||
|
<el-popconfirm |
||||
|
title="确定删除这条业务吗?" |
||||
|
confirm-button-text="确定" |
||||
|
cancel-button-text="再想想" |
||||
|
@confirm="deletePlugin(scope.row)" |
||||
|
> |
||||
|
<template #reference> |
||||
|
<el-button type="text" size="small">删除</el-button> |
||||
|
</template> |
||||
|
</el-popconfirm> |
||||
|
<el-button type="text" size="small" disabled>配置</el-button>.. |
||||
|
<el-button type="text" size="small" disabled>查看</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<template slot="empty"> |
||||
|
<p>没有记录哦~</p> |
||||
|
</template> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<el-empty v-else description="暂无业务信息"></el-empty> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { defineProps, defineEmits } from 'vue'; |
||||
|
import time from 'utils/time'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
import { delPlugin } from '@/apis/plugin.js'; |
||||
|
|
||||
|
defineProps({ |
||||
|
lists: { default: () => [], type: Array }, |
||||
|
currentPage: { default: 1, type: Number }, |
||||
|
pageSize: { default: 10, type: Number }, |
||||
|
total: { default: 0, type: Number }, |
||||
|
showConfig: { default: false, type: Boolean }, |
||||
|
}); |
||||
|
|
||||
|
const emit = defineEmits(['handleQueryPlugins']); |
||||
|
|
||||
|
function change(row) { |
||||
|
console.log('row: ', row); |
||||
|
} |
||||
|
|
||||
|
function changeCreateDate(row) { |
||||
|
const value = row && row.createTime ? row.createTime : ''; |
||||
|
return time.dateFormat(value); |
||||
|
} |
||||
|
|
||||
|
function changeUpdateDate(row) { |
||||
|
const value = row && row.updateTime ? row.updateTime : ''; |
||||
|
return time.dateFormat(value); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 删除插件 |
||||
|
* @param {String} businessId |
||||
|
*/ |
||||
|
async function deletePlugin(row) { |
||||
|
try { |
||||
|
const params = { param: { id: row.id } }; |
||||
|
await delPlugin(params); |
||||
|
ElMessage.success('删除成功'); |
||||
|
emit('handleQueryPlugins'); |
||||
|
} catch (error) { |
||||
|
console.error('error: ', error); |
||||
|
ElMessage.error(error || '删除失败'); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.bg-title >>> thead tr th { |
||||
|
color: #333; |
||||
|
background: #fafafa; |
||||
|
border-top: 1px solid #e8e8e8; |
||||
|
} |
||||
|
.bg-title >>> thead tr th:first-child { |
||||
|
border-left: 1px solid #e8e8e8; |
||||
|
} |
||||
|
.bg-title >>> thead tr th:last-child { |
||||
|
border-right: 1px solid #e8e8e8; |
||||
|
} |
||||
|
|
||||
|
.point { |
||||
|
width: 6px; |
||||
|
height: 6px; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,71 @@ |
|||||
|
<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 my-2" v-if="!businessLists.length">暂无数据</div> |
||||
|
<div class="loading my-2" v-else>{{ 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(error || '关联失败'); |
||||
|
console.error('error: ', error); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.loading { |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
color: #aaa; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,136 @@ |
|||||
|
<template> |
||||
|
<!-- 热门插件 --> |
||||
|
<div class="flex flex-row justify-space-between items-center"> |
||||
|
<div class="font-bold"> |
||||
|
热门插件： |
||||
|
<el-button plain size="mini" v-for="(tag, tagIndex) in data.tags" :key="tagIndex" class="cursor-pointer">{{ tag }}</el-button> |
||||
|
</div> |
||||
|
<div class="flex-1"></div> |
||||
|
<div class="flex flex-row"> |
||||
|
<el-input disabled v-model="data.keywords" placeholder="请输入插件名或标签名搜索" class="search-input" /> |
||||
|
<el-button type="primary" size="small" class="w-60px h-40px" disabled>搜索</el-button> |
||||
|
<el-button type="primary" icon="el-icon-plus" size="small" class="h-40px" @click="openPage">创建插件</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 所属行业 --> |
||||
|
<div class="types"> |
||||
|
所属行业: |
||||
|
<div |
||||
|
class="type" |
||||
|
:class="industry.checked ? 'check' : ''" |
||||
|
v-for="(industry, industryIndex) in data.industryList" |
||||
|
:key="industryIndex" |
||||
|
@click="changeIndustryCheck(industryIndex)" |
||||
|
> |
||||
|
{{ industry.value }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="line"></div> |
||||
|
<div class="types"> |
||||
|
所属分类: |
||||
|
<div |
||||
|
class="type" |
||||
|
:class="sort.checked ? 'check' : ''" |
||||
|
v-for="(sort, sortIndex) in data.sortList" |
||||
|
:key="sortIndex" |
||||
|
@click="changeSortCheck(sortIndex)" |
||||
|
> |
||||
|
{{ sort.value }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="line"></div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup="true"> |
||||
|
import { reactive } from 'vue'; |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
const store = useStore(); |
||||
|
|
||||
|
const data = reactive({ |
||||
|
tags: [], |
||||
|
// tags: ['交付物', '财务条', '签到打卡', '即时奖惩'], |
||||
|
keywords: '', |
||||
|
industryList: [ |
||||
|
// { |
||||
|
// value: '行业一', |
||||
|
// label: '行业一', |
||||
|
// checked: true, |
||||
|
// }, |
||||
|
// { |
||||
|
// value: '行业二', |
||||
|
// label: '行业二', |
||||
|
// checked: false, |
||||
|
// }, |
||||
|
// { |
||||
|
// value: '行业三', |
||||
|
// label: '行业三', |
||||
|
// checked: false, |
||||
|
// } |
||||
|
], |
||||
|
sortList: [ |
||||
|
// { |
||||
|
// value: '分类一', |
||||
|
// label: '分类一', |
||||
|
// checked: false, |
||||
|
// }, |
||||
|
// { |
||||
|
// value: '分类二', |
||||
|
// label: '分类二', |
||||
|
// checked: true, |
||||
|
// }, |
||||
|
// { |
||||
|
// value: '分类三', |
||||
|
// label: '分类三', |
||||
|
// checked: false, |
||||
|
// }, |
||||
|
], |
||||
|
}); |
||||
|
|
||||
|
function changeIndustryCheck(index) { |
||||
|
data.industryList[index].checked = !data.industryList[index].checked; |
||||
|
} |
||||
|
|
||||
|
function changeSortCheck(index) { |
||||
|
data.sortList[index].checked = !data.sortList[index].checked; |
||||
|
} |
||||
|
|
||||
|
function openPage() { |
||||
|
router.push({ name: 'desk-add-plugin' }); |
||||
|
store.commit('plugin/setLeftIndex', 2); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.search-input { |
||||
|
width: 27.3125rem; |
||||
|
} |
||||
|
|
||||
|
.types { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
align-items: center; |
||||
|
margin: 8px 0; |
||||
|
} |
||||
|
|
||||
|
.types .type { |
||||
|
height: 2rem; |
||||
|
line-height: 2rem; |
||||
|
cursor: pointer; |
||||
|
padding: 0 12px; |
||||
|
margin: 6px 20px; |
||||
|
} |
||||
|
|
||||
|
.types .check { |
||||
|
color: #fff; |
||||
|
background: #409eff; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
.line { |
||||
|
width: 100%; |
||||
|
border-bottom: 1px dashed #ebebeb; |
||||
|
} |
||||
|
</style> |
||||
@ -1,14 +1,27 @@ |
|||||
import { createStore } from 'vuex'; |
import { createStore } from 'vuex'; |
||||
import user from './user'; |
import user from './user'; |
||||
|
import plugin from './plugin'; |
||||
|
|
||||
export default createStore({ |
export default createStore({ |
||||
modules: { user }, |
modules: { user, plugin }, |
||||
state: { menu: { show: true, collapse: false } }, |
state: { |
||||
|
menu: { show: true, collapse: false }, |
||||
|
systemInfo: null, // 系统设备信息
|
||||
|
}, |
||||
getters: {}, |
getters: {}, |
||||
mutations: { |
mutations: { |
||||
toggleCollapse(state) { |
toggleCollapse(state) { |
||||
state.menu.collapse = !state.menu.collapse; |
state.menu.collapse = !state.menu.collapse; |
||||
}, |
}, |
||||
|
|
||||
|
/** |
||||
|
* 设置系统信息的数据 |
||||
|
* @param {object} state |
||||
|
* @param {object | null} data 获取到的数据 |
||||
|
*/ |
||||
|
setSystemInfo(state, data) { |
||||
|
state.systemInfo = data; |
||||
|
}, |
||||
}, |
}, |
||||
actions: {}, |
actions: {}, |
||||
}); |
}); |
||||
|
|||||
@ -0,0 +1,26 @@ |
|||||
|
export default { |
||||
|
namespaced: true, |
||||
|
state: { leftIndex: 3, businessInfo: {} }, |
||||
|
getters: {}, |
||||
|
mutations: { |
||||
|
/** |
||||
|
* 设置控制台左侧菜单栏 |
||||
|
* @param {*} state |
||||
|
* @param {number} data |
||||
|
*/ |
||||
|
setLeftIndex(state, data) { |
||||
|
state.leftIndex = data; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 设置当前查看的业务信息 |
||||
|
* @param {*} state |
||||
|
* @param {object|null} data |
||||
|
*/ |
||||
|
setBusinessInfo(state, data) { |
||||
|
state.businessInfo = data; |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
actions: {}, |
||||
|
}; |
||||
@ -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; |
||||
@ -1,3 +1,34 @@ |
|||||
<template> |
<template> |
||||
index.vue |
<el-container> |
||||
|
<el-header> |
||||
|
<div class="top"> |
||||
|
<Navbar /> |
||||
|
</div> |
||||
|
</el-header> |
||||
|
<el-main> |
||||
|
<div class="bg-white p-6"> |
||||
|
<router-view></router-view> |
||||
|
</div> |
||||
|
</el-main> |
||||
|
</el-container> |
||||
</template> |
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default {}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.el-header { |
||||
|
background: #00182e; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.el-main { |
||||
|
padding: 1.6rem 12rem; |
||||
|
background: #f5f5f5; |
||||
|
} |
||||
|
|
||||
|
.top { |
||||
|
/* padding: 2rem 10rem; */ |
||||
|
width: 100%; |
||||
|
} |
||||
|
</style> |
||||
|
|||||
@ -0,0 +1,140 @@ |
|||||
|
<template> |
||||
|
<div class="box"> |
||||
|
<h1 class="text-lg font-semibold">配置业务</h1> |
||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="150px" class="forms"> |
||||
|
<el-form-item prop="name"> |
||||
|
<template v-slot:label> |
||||
|
<el-tooltip class="box-item" effect="dark" content="输入帮助" placement="top-end"> |
||||
|
<div>业务名称：</div> |
||||
|
</el-tooltip> |
||||
|
</template> |
||||
|
<el-input v-model="form.name" placeholder="输入业务名称"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="行业：" prop="region"> |
||||
|
<el-select v-model="form.region" placeholder="请选择"> |
||||
|
<el-option value="教育"></el-option> |
||||
|
<el-option value="医疗"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="分类：" prop="sort"> |
||||
|
<el-select v-model="form.sort" multiple placeholder="请选择，可多选"> |
||||
|
<el-option value="康复"></el-option> |
||||
|
<el-option value="管理"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="标签：" prop="tags"> |
||||
|
<el-select v-model="form.tags" multiple filterable allow-create default-first-option placeholder="请选择标签"> |
||||
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="详情：" prop="description"> |
||||
|
<el-input v-model="form.description" type="textarea" placeholder="请输入备注"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="是否公开：" prop="pub"> |
||||
|
<el-switch v-model="form.pub" class="mr-3"></el-switch> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="是否启用：" prop="startUsing"> |
||||
|
<el-switch v-model="form.startUsing" class="mr-3"></el-switch> |
||||
|
</el-form-item> |
||||
|
<!-- <el-form-item label="是否开启debug模式：" prop="debug"> |
||||
|
<el-switch v-model="form.debug" class="mr-3"></el-switch> |
||||
|
</el-form-item> --> |
||||
|
<el-form-item> <el-switch v-model="form.debug" class="mr-3"></el-switch> 是否开启debug模式 </el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="onSubmit()">发布</el-button> |
||||
|
<el-button @click="resetForm()">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, reactive } from 'vue'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
import { saveBusiness } from '@/apis/business.js'; |
||||
|
|
||||
|
const formRef = ref(null); |
||||
|
const form = reactive({ |
||||
|
name: '', |
||||
|
region: '', |
||||
|
sort: '', |
||||
|
tags: '', |
||||
|
description: '', |
||||
|
pub: false, |
||||
|
startUsing: false, |
||||
|
debug: false, |
||||
|
}); |
||||
|
|
||||
|
const rules = { |
||||
|
name: [{ required: true, message: '输入业务名称', trigger: 'blur' }], |
||||
|
region: [{ required: true, message: '请选择行业', trigger: 'blur' }], |
||||
|
sort: [{ required: true, message: '请选择分类', trigger: 'blur' }], |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 创建业务 |
||||
|
*/ |
||||
|
const onSubmit = () => { |
||||
|
try { |
||||
|
formRef.value.validate(async valid => { |
||||
|
if (valid) { |
||||
|
const params = {}; |
||||
|
params.param = form; |
||||
|
params.param.pub = form.pub ? 1 : 0; |
||||
|
params.param.startUsing = form.startUsing ? 1 : 0; |
||||
|
params.param.debug = form.debug ? 1 : 0; |
||||
|
await saveBusiness(params); |
||||
|
ElMessage.success('创建成功'); |
||||
|
resetForm(); |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} catch (error) { |
||||
|
ElMessage.error(error || '创建失败'); |
||||
|
console.log('error: ', error); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
function resetForm() { |
||||
|
formRef.value.resetFields(); |
||||
|
} |
||||
|
const options = [ |
||||
|
{ |
||||
|
value: 'HTML', |
||||
|
label: 'HTML', |
||||
|
}, |
||||
|
{ |
||||
|
value: 'CSS', |
||||
|
label: 'CSS', |
||||
|
}, |
||||
|
{ |
||||
|
value: 'JavaScript', |
||||
|
label: 'JavaScript', |
||||
|
}, |
||||
|
]; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.el-form-item { |
||||
|
margin-top: 1rem; |
||||
|
} |
||||
|
.tags { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.el-select { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.box >>> .el-form-item__label { |
||||
|
display: flex; |
||||
|
flex-direction: row-reverse; |
||||
|
justify-content: end; |
||||
|
flex: 0 0 auto; |
||||
|
text-align: right; |
||||
|
font-size: var(--el-form-label-font-size); |
||||
|
color: var(--el-text-color-regular); |
||||
|
line-height: 40px; |
||||
|
padding: 0 12px 0 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,350 @@ |
|||||
|
<template> |
||||
|
<div class="box"> |
||||
|
<h1 class="text-lg font-semibold">上传插件</h1> |
||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="150px" class="forms"> |
||||
|
<el-form-item label="插件id：" prop="id"> |
||||
|
<div v-if="form.id"> |
||||
|
{{ form.id }} |
||||
|
<i class="el-icon-document-copy cursor-pointer ml-2" @click="copy(form.id)"></i> |
||||
|
</div> |
||||
|
<el-button type="success" plain size="mini" @click="handelPluginId" v-else>点击生成插件id</el-button> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="name"> |
||||
|
<template v-slot:label> |
||||
|
<el-tooltip class="box-item" effect="dark" content="输入帮助" placement="top-end"> |
||||
|
<div>插件名称 ①：</div> |
||||
|
</el-tooltip> |
||||
|
</template> |
||||
|
<el-input v-model="form.name" placeholder="输入插件名称"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="版本：" prop="versions"> |
||||
|
<el-input v-model="form.versions" placeholder="请输入"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="简介：" prop="intro"> |
||||
|
<el-input v-model="form.intro" type="textarea" placeholder="请输入备注"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="行业：" prop="region"> |
||||
|
<el-select v-model="form.region" placeholder="请选择"> |
||||
|
<el-option value="教育"></el-option> |
||||
|
<el-option value="医疗"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="分类：" prop="sort"> |
||||
|
<el-select v-model="form.sort" multiple placeholder="请选择，可多选"> |
||||
|
<el-option value="康复"></el-option> |
||||
|
<el-option value="管理"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="标签：" prop="tags"> |
||||
|
<el-select v-model="form.tags" multiple filterable allow-create default-first-option placeholder="请选择标签"> |
||||
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="HTML：" prop="html"> |
||||
|
<el-input v-model="form.html" type="textarea" placeholder="请输入HTML代码片段"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="JS：" prop="js"> |
||||
|
<el-input v-model="form.js" type="textarea" placeholder="请输入JS代码片段"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="CSS：" prop="css"> |
||||
|
<el-input v-model="form.css" type="textarea" placeholder="请输入CSS代码片段"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="配置文件：" prop="config"> |
||||
|
<el-input v-model="form.config" type="textarea" placeholder="请输入配置文件"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="上传预览图：" prop="preview"> |
||||
|
<el-upload |
||||
|
class="avatar-uploader" |
||||
|
:action="`${apiUrl}/filedeal/file/upload/single`" |
||||
|
:show-file-list="false" |
||||
|
:on-success="handleAvatarSuccess" |
||||
|
:before-upload="beforeAvatarUpload" |
||||
|
> |
||||
|
<img v-if="form.preview" :src="form.preview" class="avatar" /> |
||||
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
||||
|
</el-upload> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="carousel"> |
||||
|
<template v-slot:label> |
||||
|
<el-tooltip class="box-item" effect="dark" content="输入帮助" placement="top-end"> |
||||
|
<div>上传轮播图 ①：</div> |
||||
|
</el-tooltip> |
||||
|
</template> |
||||
|
<el-upload |
||||
|
class="upload-dialog" |
||||
|
name="files" |
||||
|
:action="`${apiUrl}/filedeal/file/upload/multiple`" |
||||
|
list-type="picture-card" |
||||
|
:on-success="handleBannerSuccess" |
||||
|
:on-remove="handleRemove" |
||||
|
ref="bannerUpload" |
||||
|
> |
||||
|
<i class="el-icon-plus"></i> |
||||
|
</el-upload> |
||||
|
<el-dialog :visible.sync="form.dialogVisible"> |
||||
|
<img width="100%" :src="form.banner" alt="" v-if="form.dialogVisible" /> |
||||
|
</el-dialog> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="README：" prop="description"> |
||||
|
<el-input v-model="form.description" type="textarea" placeholder="请输入markdown详细介绍信息"></el-input> |
||||
|
</el-form-item> |
||||
|
<!-- <el-form-item> <el-switch v-model="form.delivery" class="mr-3"></el-switch> 是否压缩代码 </el-form-item> --> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="onSubmit()">发布</el-button> |
||||
|
<el-button @click="resetForm()">重置</el-button> |
||||
|
|
||||
|
<el-button type="success" @click="visible = !visible">{{ !visible ? '预览' : '关闭预览' }}</el-button> |
||||
|
<div class="plugin-box" v-if="visible"> |
||||
|
<div class="plugin w-full h-full overflow-y-scroll"> |
||||
|
<Plugin :plugin="form" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import useClipboard from 'vue-clipboard3'; |
||||
|
import { ref, reactive } from 'vue'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
import { randomId, savePlugin } from '@/apis/plugin'; |
||||
|
|
||||
|
const { toClipboard } = useClipboard(); |
||||
|
|
||||
|
const apiUrl = import.meta.env.VITE_API_URL_NEW; |
||||
|
|
||||
|
const formRef = ref(null); |
||||
|
const bannerUpload = ref(null); |
||||
|
const visible = ref(false); |
||||
|
const form = reactive({ |
||||
|
id: '', |
||||
|
name: '', |
||||
|
versions: 'V1.0.0', |
||||
|
intro: '', |
||||
|
region: '', |
||||
|
sort: '', |
||||
|
tags: '', |
||||
|
html: '', |
||||
|
js: '', |
||||
|
css: '', |
||||
|
config: '', |
||||
|
delivery: '', |
||||
|
preview: '', |
||||
|
carousel: [], |
||||
|
dialogVisible: false, |
||||
|
description: '', |
||||
|
banner: '', |
||||
|
}); |
||||
|
|
||||
|
const rules = { |
||||
|
id: [{ required: true, message: '请先生成插件id', trigger: 'blur' }], |
||||
|
name: [{ required: true, message: '请输入插件名称', trigger: 'blur' }], |
||||
|
versions: [{ required: true, message: '请输入版本号', trigger: 'blur' }], |
||||
|
// region: [{ required: true, message: '请选择行业', trigger: 'blur' }], |
||||
|
// sort: [{ required: true, message: '请选择分类', trigger: 'blur' }], |
||||
|
// tags: [{ required: true, message: '请选择标签', trigger: 'blur' }], |
||||
|
preview: [{ required: true, message: '请上传预览图', trigger: 'blur' }], |
||||
|
carousel: [{ required: true, message: '请上传轮播图', trigger: 'blur' }], |
||||
|
}; |
||||
|
|
||||
|
const options = [ |
||||
|
{ |
||||
|
value: 'HTML', |
||||
|
label: 'HTML', |
||||
|
}, |
||||
|
{ |
||||
|
value: 'CSS', |
||||
|
label: 'CSS', |
||||
|
}, |
||||
|
{ |
||||
|
value: 'JavaScript', |
||||
|
label: 'JavaScript', |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
/** |
||||
|
* 获取插件id |
||||
|
*/ |
||||
|
async function handelPluginId() { |
||||
|
try { |
||||
|
const res = await randomId(); |
||||
|
form.id = res; |
||||
|
} catch (error) { |
||||
|
console.error('error: ', error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
handelPluginId(); |
||||
|
|
||||
|
// 复制 |
||||
|
async function copy(Msg) { |
||||
|
try { |
||||
|
// 复制 |
||||
|
await toClipboard(Msg); |
||||
|
ElMessage.success('插件id复制成功'); |
||||
|
} catch (e) { |
||||
|
// 复制失败 |
||||
|
console.error(e); |
||||
|
ElMessage.error('插件id复制失败'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 创建插件 |
||||
|
* @param {object} params |
||||
|
*/ |
||||
|
function onSubmit() { |
||||
|
try { |
||||
|
formRef.value.validate(async valid => { |
||||
|
if (valid) { |
||||
|
console.log('submit!'); |
||||
|
const params = {}; |
||||
|
params.param = form; |
||||
|
await savePlugin(params); |
||||
|
ElMessage.success('插件创建成功'); |
||||
|
resetForm(); |
||||
|
bannerUpload.value.clearFiles(); |
||||
|
} else { |
||||
|
console.log('error submit!!'); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
} catch (error) { |
||||
|
ElMessage.error(error || '插件创建失败'); |
||||
|
console.error('error: ', error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 上传预览图 |
||||
|
* @param {*} res |
||||
|
* @param {*} file |
||||
|
*/ |
||||
|
function handleAvatarSuccess(res) { |
||||
|
if (res.data && res.data.visitUrl) { |
||||
|
form.preview = res.data.visitUrl; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function beforeAvatarUpload(file) { |
||||
|
// const isJPG = file.type === 'image/jpeg'; |
||||
|
const isLt2M = file.size / 1024 / 1024 < 2; |
||||
|
|
||||
|
// if (!isJPG) { |
||||
|
// ElMessage.error('上传头像图片只能是 JPG 格式!'); |
||||
|
// } |
||||
|
if (!isLt2M) { |
||||
|
ElMessage.error('上传头像图片大小不能超过 2MB!'); |
||||
|
} |
||||
|
return isLt2M; |
||||
|
} |
||||
|
|
||||
|
// 删除轮播图 |
||||
|
function handleRemove(res) { |
||||
|
if (res.response.data && res.response.data.length) { |
||||
|
const url = res.response.data[0].visitUrl; |
||||
|
const index = form.carousel.findIndex(item => item === url); |
||||
|
form.carousel.splice(index, 1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 上传轮播图 |
||||
|
function handleBannerSuccess(res) { |
||||
|
if (res.data && res.data.length) { |
||||
|
form.dialogVisible = true; |
||||
|
form.banner = res.data[0].visitUrl; |
||||
|
res.data.forEach(item => { |
||||
|
if (item && item.id) { |
||||
|
form.carousel.push(item.visitUrl); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 重置 |
||||
|
function resetForm() { |
||||
|
formRef.value.resetFields(); |
||||
|
handelPluginId(); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.box { |
||||
|
/* padding-left: 5%; */ |
||||
|
} |
||||
|
.el-form-item { |
||||
|
margin-top: 1rem; |
||||
|
} |
||||
|
.tags { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.el-select { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.box >>> .el-form-item__label { |
||||
|
display: flex; |
||||
|
flex-direction: row-reverse; |
||||
|
justify-content: end; |
||||
|
flex: 0 0 auto; |
||||
|
text-align: right; |
||||
|
font-size: var(--el-form-label-font-size); |
||||
|
color: var(--el-text-color-regular); |
||||
|
line-height: 40px; |
||||
|
padding: 0 12px 0 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.avatar-uploader >>> .el-upload { |
||||
|
border: 1px dashed #d9d9d9; |
||||
|
border-radius: 6px; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.avatar-uploader >>> .el-upload:hover { |
||||
|
border-color: #409eff; |
||||
|
} |
||||
|
.avatar-uploader-icon { |
||||
|
font-size: 28px; |
||||
|
color: #8c939d; |
||||
|
width: 104px; |
||||
|
height: 104px; |
||||
|
line-height: 104px; |
||||
|
text-align: center; |
||||
|
background: #fafafa; |
||||
|
} |
||||
|
.avatar { |
||||
|
width: 104px; |
||||
|
height: 104px; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.upload-dialog >>> .el-upload--picture-card { |
||||
|
width: 104px; |
||||
|
height: 104px; |
||||
|
line-height: 104px; |
||||
|
background: #fafafa; |
||||
|
} |
||||
|
|
||||
|
.upload-dialog >>> .el-upload-list--picture-card .el-upload-list__item { |
||||
|
width: 104px; |
||||
|
height: 104px; |
||||
|
} |
||||
|
|
||||
|
.plugin-box { |
||||
|
position: fixed; |
||||
|
right: 14rem; |
||||
|
background: url(../../assets/iPhone13.png) no-repeat; |
||||
|
background-size: contain; |
||||
|
width: 19.375rem; |
||||
|
height: 39.2419rem; |
||||
|
top: calc(50vh - 289.93512px + 1.8rem); |
||||
|
padding: 2.8rem 1.2rem 2rem; |
||||
|
z-index: 99; |
||||
|
} |
||||
|
|
||||
|
.plugin::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,194 @@ |
|||||
|
<template> |
||||
|
<breadcrumb :path="data.path" /> |
||||
|
|
||||
|
<div class="pt-12"> |
||||
|
<h1 class="text-lg font-semibold">业务名称</h1> |
||||
|
<div class="flex flex-col" v-if="data.info && data.info.id"> |
||||
|
<div class="mt-3"> |
||||
|
APPID: {{ data.info.appId }} |
||||
|
<i class="el-icon-document-copy cursor-pointer ml-2" @click="copy(data.info.appId)"></i> |
||||
|
</div> |
||||
|
<div class="mt-3">APPSecret: {{ data.info.secret }}</div> |
||||
|
<div class="mt-3">简介: {{ data.info.description }}</div> |
||||
|
<div class="flex flex-row mt-3"> |
||||
|
<div class="text-sm mr-20" v-if="data.info.tags && data.info.tags.length"> |
||||
|
<el-tag v-for="item in data.info.tags" :type="item.btnType" class="mr-3" :key="item.name">{{ item.name }}</el-tag> |
||||
|
</div> |
||||
|
<div>行业: {{ data.info.appId }}</div> |
||||
|
</div> |
||||
|
<div class="flex flex-row mt-3"> |
||||
|
<div class="mr-20">创建时间: {{ time.dateFormat(data.info.createTime) }}</div> |
||||
|
<div>最新更新时间: {{ time.dateFormat(data.info.createTime) }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex flex-col py-12"> |
||||
|
<div class="flex flex-nowrap justify-between"> |
||||
|
<h1 class="text-lg font-semibold">已绑定插件</h1> |
||||
|
<el-popover placement="bottom" title="请选择插件" :width="240" trigger="click"> |
||||
|
<div class="radio-box"> |
||||
|
<Relevance |
||||
|
:businessLists="data.pluginLists" |
||||
|
:businessId="data.info.id" |
||||
|
:isLastPage="data.isLastPage" |
||||
|
@changePageNum="changePageNum" |
||||
|
@query="queryPluginOfBusiness" |
||||
|
/> |
||||
|
</div> |
||||
|
<template #reference> |
||||
|
<el-button type="primary" @click="handleQueryPlugin">添加插件</el-button> |
||||
|
</template> |
||||
|
</el-popover> |
||||
|
</div> |
||||
|
<listPlugin :lists="data.lists" :showConfig="true" :businessId="data.businessId" @queryPluginOfBusiness="queryPluginOfBusiness" /> |
||||
|
<Pagination |
||||
|
:currentPage="data.currentPage" |
||||
|
:pageSize="data.pageSize" |
||||
|
:total="data.total" |
||||
|
@handleSizeChange="handleSizeChange" |
||||
|
@handleCurrentChange="handleCurrentChange" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import useClipboard from 'vue-clipboard3'; |
||||
|
import { reactive } from 'vue'; |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
import time from 'utils/time'; |
||||
|
import { queryPluginByBusiness, queryIdBusiness } from '@/apis/business.js'; |
||||
|
import { queryPlugins } from '@/apis/plugin.js'; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
const { toClipboard } = useClipboard(); |
||||
|
|
||||
|
const data = reactive({ |
||||
|
path: [ |
||||
|
{ title: '控制台', name: 'plugin-shop' }, |
||||
|
{ title: '我的业务', name: 'desk-business-list' }, |
||||
|
{ title: '业务详情', name: 'desk-add-business' }, |
||||
|
], |
||||
|
lists: [], |
||||
|
currentPage: 1, |
||||
|
pageSize: 10, |
||||
|
total: 0, |
||||
|
info: {}, |
||||
|
pluginLists: [], |
||||
|
isLastPage: false, |
||||
|
pageNum: 1, |
||||
|
businessId: '', |
||||
|
}); |
||||
|
|
||||
|
function handleSizeChange(val) { |
||||
|
data.pageSize = val; |
||||
|
queryPluginOfBusiness(); |
||||
|
} |
||||
|
|
||||
|
function handleCurrentChange(val) { |
||||
|
data.currentPage = val; |
||||
|
queryPluginOfBusiness(); |
||||
|
} |
||||
|
|
||||
|
// 复制 |
||||
|
async function copy(Msg) { |
||||
|
try { |
||||
|
// 复制 |
||||
|
await toClipboard(Msg); |
||||
|
ElMessage.success('复制成功'); |
||||
|
} catch (e) { |
||||
|
// 复制失败 |
||||
|
console.error(e); |
||||
|
ElMessage.error('复制失败'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 通过id查询业务信息 |
||||
|
* @param {string} businessId 业务信息对应的id |
||||
|
*/ |
||||
|
async function handleQueryIdBusiness(businessId) { |
||||
|
try { |
||||
|
const params = { param: { businessId } }; |
||||
|
const res = await queryIdBusiness(params); |
||||
|
data.info = res; |
||||
|
} catch (error) { |
||||
|
console.error('error: ', error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 查询业务下关联的插件 |
||||
|
* @param {string} businessId 业务信息对应的id |
||||
|
* @param {number} name 插件名称，为空则不实用该条件 |
||||
|
* @param {number} pageNum 第几页 |
||||
|
* @param {number} pageSize 每页几条信息 |
||||
|
*/ |
||||
|
async function queryPluginOfBusiness() { |
||||
|
try { |
||||
|
const { currentPage, pageSize, businessId } = data; |
||||
|
const params = { |
||||
|
param: { |
||||
|
businessId, |
||||
|
pageNum: currentPage, |
||||
|
pageSize, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await queryPluginByBusiness(params); |
||||
|
data.lists = res.list; |
||||
|
data.currentPage = res.pageNum - 0; |
||||
|
data.pageSize = res.pageSize - 0; |
||||
|
data.total = res.total - 0; |
||||
|
} catch (error) { |
||||
|
console.error('error: ', error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const routeValue = router.currentRoute.value; |
||||
|
const id = routeValue && routeValue.query && routeValue.query.id ? routeValue.query.id : ''; |
||||
|
data.businessId = id; |
||||
|
queryPluginOfBusiness(id); |
||||
|
handleQueryIdBusiness(id); |
||||
|
|
||||
|
function changePageNum() { |
||||
|
data.pageNum++; |
||||
|
handleQueryPlugin(); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 查询插件列表 |
||||
|
* @param {number} depth 查询深度 0则只查名称，1则查询全部 |
||||
|
* @param {number} name 插件名称，为空则不实用该条件 |
||||
|
* @param {number} pageNum 第几页 |
||||
|
* @param {number} pageSize 每页几条信息 |
||||
|
*/ |
||||
|
async function handleQueryPlugin() { |
||||
|
try { |
||||
|
const { pageNum } = data; |
||||
|
if (pageNum === 1) { |
||||
|
data.pluginLists = []; |
||||
|
} |
||||
|
const params = { |
||||
|
param: { |
||||
|
depth: 0, |
||||
|
name: '', |
||||
|
pageNum, |
||||
|
pageSize: 10, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await queryPlugins(params); |
||||
|
if (res.list.length) { |
||||
|
res.list.forEach(item => { |
||||
|
data.pluginLists.push(item); |
||||
|
}); |
||||
|
} |
||||
|
data.pageNum = res.pageNum - 0; |
||||
|
data.isLastPage = res.isLastPage; |
||||
|
} catch (error) { |
||||
|
console.error('error: ', error); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style></style> |
||||
@ -0,0 +1,79 @@ |
|||||
|
<template> |
||||
|
<div class="flex flex-col"> |
||||
|
<listSearchBar /> |
||||
|
<div class="py-6"> |
||||
|
<el-button type="primary" icon="el-icon-plus" @click="openPage">创建业务</el-button> |
||||
|
</div> |
||||
|
<listTable :lists="data.lists" @handleQueryBusiness="handleQueryBusiness" /> |
||||
|
<Pagination |
||||
|
:currentPage="data.currentPage" |
||||
|
:pageSize="data.pageSize" |
||||
|
:total="data.total" |
||||
|
@handleSizeChange="handleSizeChange" |
||||
|
@handleCurrentChange="handleCurrentChange" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { reactive } from 'vue'; |
||||
|
import { queryBusiness } from '@/apis/business.js'; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
const store = useStore(); |
||||
|
|
||||
|
const data = reactive({ |
||||
|
lists: [], |
||||
|
currentPage: 1, |
||||
|
pageSize: 10, |
||||
|
total: 0, |
||||
|
}); |
||||
|
|
||||
|
function openPage() { |
||||
|
router.push({ name: 'desk-add-business' }); |
||||
|
store.commit('plugin/setLeftIndex', 1); |
||||
|
} |
||||
|
|
||||
|
function handleSizeChange(val) { |
||||
|
data.pageSize = val; |
||||
|
handleQueryBusiness(); |
||||
|
} |
||||
|
|
||||
|
function handleCurrentChange(val) { |
||||
|
data.currentPage = val; |
||||
|
handleQueryBusiness(); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 查询插件列表 |
||||
|
* @param {number} depth 查询深度 0则只查名称，1则查询全部 |
||||
|
* @param {number} name 插件名称，为空则不实用该条件 |
||||
|
* @param {number} pageNum 第几页 |
||||
|
* @param {number} pageSize 每页几条信息 |
||||
|
*/ |
||||
|
async function handleQueryBusiness() { |
||||
|
try { |
||||
|
const { currentPage, pageSize } = data; |
||||
|
const params = { |
||||
|
param: { |
||||
|
depth: 1, |
||||
|
name: '', |
||||
|
pageNum: currentPage, |
||||
|
pageSize, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await queryBusiness(params); |
||||
|
data.lists = res.list; |
||||
|
data.currentPage = res.pageNum - 0; |
||||
|
data.pageSize = res.pageSize - 0; |
||||
|
data.total = res.total - 0; |
||||
|
} catch (error) { |
||||
|
console.error('error: ', error); |
||||
|
} |
||||
|
} |
||||
|
handleQueryBusiness(); |
||||
|
</script> |
||||
|
|
||||
|
<style></style> |
||||
@ -0,0 +1,14 @@ |
|||||
|
<template> |
||||
|
<!-- <div class="flex flex-row"> --> |
||||
|
<el-container> |
||||
|
<el-aside width="208px"> |
||||
|
<leftMenu /> |
||||
|
</el-aside> |
||||
|
<el-main> |
||||
|
<router-view></router-view> |
||||
|
</el-main> |
||||
|
</el-container> |
||||
|
<!-- </div> --> |
||||
|
</template> |
||||
|
|
||||
|
<script setup></script> |
||||
@ -0,0 +1,82 @@ |
|||||
|
<template> |
||||
|
<div class="flex flex-col"> |
||||
|
<listSearchBar /> |
||||
|
<div class="py-6"> |
||||
|
<el-button type="primary" icon="el-icon-plus" @click="openPage">创建插件</el-button> |
||||
|
</div> |
||||
|
<PluginListTable :lists="data.lists" @handleQueryPlugins="handleQueryPlugins" /> |
||||
|
<Pagination |
||||
|
:currentPage="data.currentPage" |
||||
|
:pageSize="data.pageSize" |
||||
|
:total="data.total" |
||||
|
@handleSizeChange="handleSizeChange" |
||||
|
@handleCurrentChange="handleCurrentChange" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { reactive } from 'vue'; |
||||
|
import { queryPlugins } from '@/apis/plugin.js'; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
const store = useStore(); |
||||
|
|
||||
|
const data = reactive({ |
||||
|
lists: [], |
||||
|
currentPage: 1, |
||||
|
pageSize: 10, |
||||
|
total: 0, |
||||
|
}); |
||||
|
|
||||
|
function openPage() { |
||||
|
router.push({ name: 'desk-add-plugin' }); |
||||
|
store.commit('plugin/setLeftIndex', 2); |
||||
|
} |
||||
|
|
||||
|
function handleSizeChange(val) { |
||||
|
data.pageSize = val; |
||||
|
handleQueryPlugins(); |
||||
|
} |
||||
|
|
||||
|
function handleCurrentChange(val) { |
||||
|
data.currentPage = val; |
||||
|
handleQueryPlugins(); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 查询插件列表 |
||||
|
* @param {number} depth 查询深度 0则只查名称，1则查询全部 |
||||
|
* @param {number} mine 查询全部插件还是自己的插件 0全部 1自己 |
||||
|
* @param {number} name 插件名称，为空则不实用该条件 |
||||
|
* @param {number} pageNum 第几页 |
||||
|
* @param {number} pageSize 每页几条信息 |
||||
|
*/ |
||||
|
async function handleQueryPlugins() { |
||||
|
try { |
||||
|
const { currentPage, pageSize } = data; |
||||
|
const params = { |
||||
|
param: { |
||||
|
depth: 1, |
||||
|
mine: 1, |
||||
|
name: '', |
||||
|
pageNum: currentPage, |
||||
|
pageSize, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await queryPlugins(params); |
||||
|
data.lists = res.list; |
||||
|
data.currentPage = res.pageNum - 0; |
||||
|
data.pageSize = res.pageSize - 0; |
||||
|
data.total = res.total - 0; |
||||
|
} catch (error) { |
||||
|
console.error('error: ', error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
handleQueryPlugins(); |
||||
|
</script> |
||||
|
|
||||
|
<style></style> |
||||
@ -0,0 +1,67 @@ |
|||||
|
<template> |
||||
|
<searchBar /> |
||||
|
<listPlugin :lists="data.lists" /> |
||||
|
<Pagination |
||||
|
:currentPage="data.currentPage" |
||||
|
:pageSize="data.pageSize" |
||||
|
:total="data.total" |
||||
|
@handleSizeChange="handleSizeChange" |
||||
|
@handleCurrentChange="handleCurrentChange" |
||||
|
/> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup="true"> |
||||
|
import { reactive } from 'vue'; |
||||
|
import { queryPlugins } from '@/apis/plugin.js'; |
||||
|
|
||||
|
const data = reactive({ |
||||
|
lists: [], |
||||
|
currentPage: 1, |
||||
|
pageSize: 10, |
||||
|
total: 0, |
||||
|
}); |
||||
|
|
||||
|
function handleSizeChange(val) { |
||||
|
data.pageSize = val; |
||||
|
handleQueryPlugins(); |
||||
|
} |
||||
|
|
||||
|
function handleCurrentChange(val) { |
||||
|
data.currentPage = val; |
||||
|
handleQueryPlugins(); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 查询插件列表 |
||||
|
* @param {number} depth 查询深度 0则只查名称，1则查询全部 |
||||
|
* @param {number} mine 查询全部插件还是自己的插件 0全部 1自己 |
||||
|
* @param {number} name 插件名称，为空则不实用该条件 |
||||
|
* @param {number} pageNum 第几页 |
||||
|
* @param {number} pageSize 每页几条信息 |
||||
|
*/ |
||||
|
async function handleQueryPlugins() { |
||||
|
try { |
||||
|
const { currentPage, pageSize } = data; |
||||
|
const params = { |
||||
|
param: { |
||||
|
depth: 1, |
||||
|
mine: 0, |
||||
|
name: '', |
||||
|
pageNum: currentPage, |
||||
|
pageSize, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await queryPlugins(params); |
||||
|
data.lists = res.list; |
||||
|
data.currentPage = res.pageNum - 0; |
||||
|
data.pageSize = res.pageSize - 0; |
||||
|
data.total = res.total - 0; |
||||
|
} catch (error) { |
||||
|
console.error('error: ', error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
handleQueryPlugins(); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped></style> |
||||
Loading…
Reference in new issue