18 changed files with 829 additions and 170 deletions
@ -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,121 @@ |
|||
<template> |
|||
<div class="shop-content flex py-5" v-for="list in lists" :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"> |
|||
<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"> |
|||
<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-button type="primary">下载源代码</el-button> |
|||
<el-button type="primary">下载示例代码</el-button> |
|||
<el-button type="primary">添加到业务</el-button> |
|||
<el-button type="primary" v-if="showConfig">配置</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<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, 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({ |
|||
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(['handleSizeChange', 'handleCurrentChange']); |
|||
|
|||
function handleSizeChange(val) { |
|||
emit('handleSizeChange', val); |
|||
} |
|||
|
|||
function handleCurrentChange(val) { |
|||
emit('handleCurrentChange', val); |
|||
} |
|||
</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; |
|||
} |
|||
|
|||
.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,54 @@ |
|||
<template> |
|||
<div class="flex flex-row justify-space-between items-center"> |
|||
<div class="flex flex-row items-center"> |
|||
<div>业务名称：</div> |
|||
<el-input v-model="data.keywords" placeholder="请输入业务名称或标签搜索" class="search-input mr-10" /> |
|||
<div>状态：</div> |
|||
<el-select 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">查询</el-button> |
|||
<el-button size="small" class="w-60px h-40px reset">重置</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,106 @@ |
|||
<template> |
|||
<el-table :data="data.tableData" 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="point bg-green-500"></div> |
|||
<span style="margin-left: 10px">启用</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="point bg-red-500"></div> |
|||
<span style="margin-left: 10px">公开</span> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" label="创建日期" sortable> </el-table-column> |
|||
<el-table-column label="操作" key="slot"> |
|||
<template #default="scope"> |
|||
<el-button type="text" size="small">删除</el-button> |
|||
<el-button type="text" size="small">配置</el-button> |
|||
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { useRouter } from 'vue-router'; |
|||
import { reactive } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
|
|||
const router = useRouter(); |
|||
const store = useStore(); |
|||
|
|||
const data = reactive({ |
|||
tableData: [ |
|||
{ |
|||
appId: '描述01', |
|||
createTime: '2016-05-02', |
|||
id: '1', |
|||
name: '王小虎', |
|||
pub: 0, |
|||
startUsing: 0, |
|||
}, |
|||
{ |
|||
appId: '描述02', |
|||
createTime: '2016-05-04', |
|||
id: '2', |
|||
name: '王小虎', |
|||
pub: 1, |
|||
startUsing: 1, |
|||
}, |
|||
{ |
|||
appId: '描述03', |
|||
createTime: '2016-05-01', |
|||
id: '3', |
|||
name: '王小虎', |
|||
pub: 0, |
|||
startUsing: 1, |
|||
}, |
|||
{ |
|||
appId: '描述04', |
|||
createTime: '2016-05-03', |
|||
id: '4', |
|||
name: '王小虎', |
|||
pub: 1, |
|||
startUsing: 0, |
|||
}, |
|||
], |
|||
}); |
|||
|
|||
function change(row) { |
|||
console.log('row: ', row); |
|||
} |
|||
|
|||
function handleClick(row) { |
|||
console.log(row); |
|||
router.push({ name: 'business-detail', query: { id: row.id } }); |
|||
store.commit('plugin/setBusinessInfo', row); |
|||
} |
|||
</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,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: {}, |
|||
}; |
|||
@ -1,3 +1,116 @@ |
|||
<template>创建业务</template> |
|||
<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="Zone one"></el-option> |
|||
<el-option value="Zone two"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="分类：" prop="sort"> |
|||
<el-select v-model="form.sort" multiple placeholder="请选择，可多选"> |
|||
<el-option value="Zone one"></el-option> |
|||
<el-option value="Zone two"></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> |
|||
|
|||
<style></style> |
|||
<script setup> |
|||
import { ref, reactive } from 'vue'; |
|||
|
|||
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 = () => { |
|||
formRef.value.validate(true); |
|||
}; |
|||
const 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,117 @@ |
|||
<template> |
|||
<breadcrumb :path="data.path" /> |
|||
|
|||
<div class="pt-12"> |
|||
<h1 class="text-lg font-semibold">业务名称</h1> |
|||
|
|||
<div class="flex flex-col"> |
|||
<div class="mt-3"> |
|||
APPID: {{ businessInfo.appId }} |
|||
<i class="el-icon-document-copy cursor-pointer ml-2" @click="copy(businessInfo.appId)"></i> |
|||
</div> |
|||
<div class="mt-3">APPSecret: {{ businessInfo.secret }}</div> |
|||
<div class="mt-3">简介: {{ businessInfo.description }}</div> |
|||
<div class="flex flex-row mt-3"> |
|||
<div class="text-sm mr-20" v-if="businessInfo.tags && businessInfo.tags.length"> |
|||
<el-tag v-for="item in businessInfo.tags" :type="item.btnType" class="mr-3" :key="item.name">{{ item.name }}</el-tag> |
|||
</div> |
|||
<div>行业: {{ businessInfo.appId }}</div> |
|||
</div> |
|||
<div class="flex flex-row mt-3"> |
|||
<div class="mr-20">创建时间: {{ businessInfo.createTime }}</div> |
|||
<div>最新更新时间: {{ businessInfo.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-button type="primary" @click="openPage">添加插件</el-button> |
|||
</div> |
|||
<listPlugin |
|||
:lists="data.lists" |
|||
:currentPage="data.currentPage" |
|||
:pageSize="data.pageSize" |
|||
:total="data.total" |
|||
:showConfig="true" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handleCurrentChange="handleCurrentChange" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import useClipboard from 'vue-clipboard3'; |
|||
import { reactive, computed } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import { useRouter } from 'vue-router'; |
|||
import { ElMessage } from 'element-plus'; |
|||
|
|||
const store = useStore(); |
|||
const router = useRouter(); |
|||
const businessInfo = computed(() => store.state.plugin.businessInfo); |
|||
const { toClipboard } = useClipboard(); |
|||
|
|||
const data = reactive({ |
|||
path: [ |
|||
{ title: '控制台', name: 'plugin-shop' }, |
|||
{ title: '我的业务', name: 'desk-business-list' }, |
|||
{ title: '业务详情', name: 'desk-add-business' }, |
|||
], |
|||
lists: [ |
|||
{ |
|||
id: '1', |
|||
name: '插件名称', |
|||
versions: 'V1.0.0', |
|||
intro: 'In my dual profession as an educator and health care', |
|||
updateTime: '2021年12月20日', |
|||
authorName: '张三', |
|||
preview: 'https://s4.ax1x.com/2022/01/17/7abX3d.png', |
|||
mine: true, |
|||
tags: [ |
|||
{ btnType: 'primary', name: '医疗' }, |
|||
{ btnType: 'success', name: '打卡' }, |
|||
{ btnType: 'warning', name: '签到' }, |
|||
], |
|||
industryName: '数字医疗', |
|||
sortName: '医疗', |
|||
}, |
|||
], |
|||
currentPage: 1, |
|||
pageSize: 10, |
|||
total: 55, |
|||
}); |
|||
|
|||
// 添加插件 |
|||
function openPage() { |
|||
router.push({ name: 'desk-add-plugin' }); |
|||
store.commit('plugin/setLeftIndex', 2); |
|||
} |
|||
|
|||
function handleSizeChange(val) { |
|||
console.log(val); |
|||
data.pageSize = val; |
|||
} |
|||
|
|||
function handleCurrentChange(val) { |
|||
console.log(val); |
|||
data.currentPage = val; |
|||
} |
|||
|
|||
async function copy(Msg) { |
|||
try { |
|||
// 复制 |
|||
await toClipboard(Msg); |
|||
ElMessage.success('复制成功'); |
|||
// 下面可以设置复制成功的提示框等操作 |
|||
// ... |
|||
} catch (e) { |
|||
// 复制失败 |
|||
console.error(e); |
|||
ElMessage.error('复制失败'); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style></style> |
|||
@ -1,9 +1,24 @@ |
|||
<template> |
|||
<div class="box"> |
|||
<h1 class="text-xl mt-10 font-semibold">业务列表</h1> |
|||
<div class="flex flex-col"> |
|||
<listSearchBar /> |
|||
<div class="py-6"> |
|||
<el-button type="primary" icon="el-icon-plus" @click="openPage">创建业务</el-button> |
|||
</div> |
|||
<listTable /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup></script> |
|||
<script setup> |
|||
import { useRouter } from 'vue-router'; |
|||
import { useStore } from 'vuex'; |
|||
|
|||
const router = useRouter(); |
|||
const store = useStore(); |
|||
|
|||
function openPage() { |
|||
router.push({ name: 'desk-add-business' }); |
|||
store.commit('plugin/setLeftIndex', 1); |
|||
} |
|||
</script> |
|||
|
|||
<style></style> |
|||
|
|||
@ -0,0 +1,24 @@ |
|||
<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 /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { useRouter } from 'vue-router'; |
|||
import { useStore } from 'vuex'; |
|||
|
|||
const router = useRouter(); |
|||
const store = useStore(); |
|||
|
|||
function openPage() { |
|||
router.push({ name: 'desk-add-plugin' }); |
|||
store.commit('plugin/setLeftIndex', 2); |
|||
} |
|||
</script> |
|||
|
|||
<style></style> |
|||
Loading…
Reference in new issue