499 lines
15 KiB
Vue
499 lines
15 KiB
Vue
<template>
|
|
<div class="xl:w-screen-xl m-auto py-4 my-20">
|
|
<el-page-header :icon="ArrowLeft" @back="goBack">
|
|
<template #content>
|
|
<span class="text-large font-600"> 插件编辑 </span>
|
|
</template>
|
|
|
|
<div v-if="navId" class="login-layout mt-10 sm:w-screen-xl w-full">
|
|
<el-form :model="form" label-width="auto" size="large">
|
|
<el-tabs
|
|
v-model="activeName"
|
|
type="border-card"
|
|
class="demo-tabs bg-white"
|
|
>
|
|
<el-tab-pane label="基本信息" name="info">
|
|
<el-form-item label="插件ID" class="px-4" label-width="100" label-position="left">
|
|
<el-input disabled v-model="form.websiteId"/>
|
|
</el-form-item>
|
|
<el-form-item label="插件标识" class="px-4" label-width="100" label-position="left">
|
|
<el-input v-model="form.websiteCode" :disabled="form.websiteCode != ''"/>
|
|
</el-form-item>
|
|
<el-form-item label="插件名称" class="px-4" label-width="100" label-position="left">
|
|
<el-input v-model="form.websiteName"/>
|
|
</el-form-item>
|
|
<el-form-item label="域名" class="px-4" label-width="100" label-position="left">
|
|
<el-input v-model="form.domain" placeholder="访问域名"/>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="后台管理" class="px-4" label-width="100" label-position="left">-->
|
|
<!-- <el-input v-model="form.adminUrl" placeholder="site.websoft.top"/>-->
|
|
<!-- </el-form-item>-->
|
|
<el-form-item label="插件描述" class="px-4" label-width="100" label-position="left">
|
|
<el-input v-model="form.comments" type="textarea" placeholder="插件描述" :rows="4"/>
|
|
</el-form-item>
|
|
<el-form-item label="类型" class="px-4" label-width="100" label-position="left">
|
|
<el-select
|
|
v-model="form.websiteType"
|
|
multiple
|
|
placeholder="选择类型(多选)"
|
|
>
|
|
<el-option
|
|
v-for="item in types"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="色系" class="px-4" label-width="100" label-position="left">
|
|
<el-space>
|
|
<template v-for="(item,index) in colors" :key="index">
|
|
<div @click="handleColor(item.label)">
|
|
<el-avatar v-if="selectColor == item.label" :size="28" :style="item.comments" class="border-solid border-1 border-gray-800 rounded-full"></el-avatar>
|
|
<el-avatar v-else :size="24" :style="item.comments"></el-avatar>
|
|
</div>
|
|
</template>
|
|
</el-space>
|
|
</el-form-item>
|
|
<el-form-item label="插件图标" class="px-4" label-width="100" label-position="left">
|
|
<el-upload
|
|
v-model:file-list="avatar"
|
|
action="https://server.gxbsnx.com/api/oss/upload"
|
|
:headers="{
|
|
Authorization: token,
|
|
TenantId: '5'
|
|
}"
|
|
:limit="1"
|
|
list-type="picture-card"
|
|
:on-preview="handlePictureCardPreview"
|
|
:on-remove="avatarRemove"
|
|
:on-success="avatarSuccess"
|
|
>
|
|
<el-icon>
|
|
<Plus/>
|
|
</el-icon>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item class="px-4" label-width="100" label-position="left">
|
|
<el-button type="primary" class="sm:w-auto w-full" size="large" @click="onSubmit">保存</el-button>
|
|
</el-form-item>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="插件截屏" name="files">
|
|
<el-upload
|
|
v-model:file-list="files"
|
|
action="https://server.gxbsnx.com/api/oss/upload"
|
|
:headers="{
|
|
Authorization: token,
|
|
TenantId: '5'
|
|
}"
|
|
:limit="8"
|
|
list-type="picture-card"
|
|
:on-preview="handlePictureCardPreview"
|
|
:on-remove="filesRemove"
|
|
:on-success="filesSuccess"
|
|
>
|
|
<el-icon>
|
|
<Plus/>
|
|
</el-icon>
|
|
</el-upload>
|
|
<el-button type="primary" class="sm:w-auto px-5" size="large" @click="onSubmit">保存</el-button>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="详细介绍" name="content">
|
|
<!-- 编辑器 -->
|
|
<MdEditor v-model="form.content" @onUploadImg="onUploadImg"/>
|
|
|
|
<div class="flex flex-col">
|
|
|
|
<el-form-item class="my-4" label-position="left">
|
|
<el-button type="primary" class="sm:w-auto w-full" size="large" @click="onSubmit">保存</el-button>
|
|
</el-form-item>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="评论管理" name="comments">
|
|
<Comments :productId="form.companyId" :comments="comments" :count="commentsTotal" @done="doComments"/>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="价格设置" name="price">
|
|
<el-form-item label="插件价格" class="px-4" label-width="100" label-position="left">
|
|
<el-input-number v-model="form.price" placeholder="插件价格"/>
|
|
</el-form-item>
|
|
<el-form-item label="交付方式" class="px-4" label-width="100" label-position="left">
|
|
<el-radio-group v-model="form.deliveryMethod" @change="onSubmit">
|
|
<el-radio-button label="SaaS交付" :value="0" />
|
|
<el-radio-button label="源码交付" :value="1" />
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="计费方式" class="px-4" label-width="100" label-position="left">
|
|
<el-radio-group v-model="form.chargingMethod">
|
|
<el-radio-button label="一次性" :value="1" />
|
|
<el-radio-button label="按年" :value="2" />
|
|
<el-radio-button label="按月" :value="3" />
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="插件设置" name="setting">
|
|
<el-form-item label="是否允许展示及被搜索" class="px-4" label-width="200" label-position="left">
|
|
<el-switch v-model="form.search" title="是否允许展示及被搜索" @change="onSubmit"/>
|
|
</el-form-item>
|
|
<el-form-item label="是否推荐" class="px-4" label-width="200" label-position="left">
|
|
<el-switch disabled v-model="form.official" @change="onSubmit"/>
|
|
</el-form-item>
|
|
<el-form-item label="官方插件" class="px-4" label-width="200" label-position="left">
|
|
<el-switch disabled v-model="form.official" @change="onSubmit"/>
|
|
</el-form-item>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="统计信息" name="statistic">
|
|
<Statistic :form="form"/>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="操作日志" name="log">
|
|
<el-timeline style="max-width: 600px">
|
|
<el-timeline-item
|
|
v-for="(activity, index) in logs"
|
|
:key="index"
|
|
:timestamp="activity.timestamp"
|
|
>
|
|
{{ activity.content }}
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-form>
|
|
</div>
|
|
</el-page-header>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {ArrowLeft, View, Search, Plus} from '@element-plus/icons-vue'
|
|
import type {UploadProps, UploadUserFile} from 'element-plus'
|
|
import {useWebsite} from "~/composables/configState";
|
|
import useFormData from '@/utils/use-form-data';
|
|
import {ref} from 'vue'
|
|
import {getNavIdByParamsId} from "~/utils/common";
|
|
import type {CmsWebsite} from "~/api/cms/cmsWebsite/model";
|
|
import {getCmsWebsiteAll, updateCmsWebsite, updateCmsWebsiteAll} from "~/api/cms/cmsWebsite";
|
|
import Comments from "./components/Comments.vue";
|
|
import type {CompanyComment} from "~/api/system/companyComment/model";
|
|
import {MdEditor} from 'md-editor-v3';
|
|
import 'md-editor-v3/lib/style.css';
|
|
import {uploadOss} from "~/api/system/file";
|
|
import Statistic from "./components/Statistic.vue";
|
|
import {listDictData} from "~/api/system/dict-data";
|
|
|
|
|
|
// 配置信息
|
|
const token = useToken();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const navId = ref();
|
|
const activeIndex = ref('');
|
|
const avatar = ref<UploadUserFile[]>([])
|
|
const files = ref<UploadUserFile[]>([])
|
|
const srcList = ref<string[]>([])
|
|
const dialogImageUrl = ref('')
|
|
const dialogVisible = ref(false)
|
|
const activeName = ref('info')
|
|
const comments = ref<CompanyComment[]>([]);
|
|
const developer = ref<string>();// 色系
|
|
const colors = ref<any[]>()
|
|
const selectColor = ref<string>();
|
|
|
|
|
|
// 配置信息
|
|
const {form, assignFields} = useFormData<CmsWebsite>({
|
|
// 站点ID
|
|
websiteId: undefined,
|
|
// 网站名称
|
|
websiteName: undefined,
|
|
// 网站标识
|
|
websiteCode: undefined,
|
|
// 网站LOGO
|
|
websiteIcon: undefined,
|
|
// 网站LOGO
|
|
websiteLogo: undefined,
|
|
// 网站LOGO(深色模式)
|
|
websiteDarkLogo: undefined,
|
|
// 网站类型
|
|
websiteType: undefined,
|
|
// 评分
|
|
rate: undefined,
|
|
// 点赞数
|
|
likes: undefined,
|
|
// 访问量
|
|
clicks: undefined,
|
|
// 下载量
|
|
downloads: undefined,
|
|
// 网站截图
|
|
files: undefined,
|
|
// 网站关键词
|
|
keywords: undefined,
|
|
// 域名前缀
|
|
prefix: undefined,
|
|
// 绑定域名
|
|
domain: undefined,
|
|
// 是否官方
|
|
official: undefined,
|
|
// 是否显示在插件市场
|
|
market: undefined,
|
|
// 是否允许展示及被搜索
|
|
search: undefined,
|
|
// 主题色
|
|
color: undefined,
|
|
// 全局样式
|
|
style: undefined,
|
|
// 后台管理地址
|
|
adminUrl: undefined,
|
|
// 插件版本 10免费版 20专业版 30永久授权
|
|
version: undefined,
|
|
// 应用价格
|
|
price: undefined,
|
|
// 交付方式
|
|
deliveryMethod: undefined,
|
|
// 计费方式
|
|
chargingMethod: undefined,
|
|
// 服务到期时间
|
|
expirationTime: undefined,
|
|
// 模版ID
|
|
templateId: undefined,
|
|
// 行业类型(父级)
|
|
industryParent: undefined,
|
|
// 行业类型(子级)
|
|
industryChild: undefined,
|
|
// 企业ID
|
|
companyId: undefined,
|
|
// 开发者名称
|
|
developer: undefined,
|
|
// 所在国家
|
|
country: undefined,
|
|
// 所在省份
|
|
province: undefined,
|
|
// 所在城市
|
|
city: undefined,
|
|
// 所在辖区
|
|
region: undefined,
|
|
// 经度
|
|
longitude: undefined,
|
|
// 纬度
|
|
latitude: undefined,
|
|
// 街道地址
|
|
address: undefined,
|
|
// 联系电话
|
|
phone: undefined,
|
|
// 电子邮箱
|
|
email: undefined,
|
|
// ICP备案号
|
|
icpNo: undefined,
|
|
// 公安备案
|
|
policeNo: undefined,
|
|
// 插件介绍
|
|
content: undefined,
|
|
// 备注
|
|
comments: undefined,
|
|
// 是否推荐
|
|
recommend: undefined,
|
|
// 运行状态
|
|
running: undefined,
|
|
// 状态 0未开通 1运行中 2维护中 3已关闭 4已欠费停机 5违规关停
|
|
status: undefined,
|
|
// 维护说明
|
|
statusText: undefined,
|
|
// 关闭说明
|
|
statusClose: undefined,
|
|
// 状态图标
|
|
statusIcon: undefined,
|
|
// 全局样式
|
|
styles: undefined,
|
|
// 排序号
|
|
sortNumber: undefined,
|
|
// 用户ID
|
|
userId: undefined,
|
|
// 是否删除, 0否, 1是
|
|
deleted: undefined,
|
|
// 租户id
|
|
tenantId: undefined,
|
|
// 创建时间
|
|
createTime: undefined,
|
|
// 修改时间
|
|
updateTime: undefined,
|
|
// 网站配置
|
|
config: undefined,
|
|
topNavs: undefined,
|
|
bottomNavs: undefined,
|
|
loginUser: undefined
|
|
});
|
|
|
|
const logs = [
|
|
{
|
|
content: '发布插件',
|
|
timestamp: '2018-04-15',
|
|
},
|
|
{
|
|
content: '更新',
|
|
timestamp: '2018-04-13',
|
|
},
|
|
{
|
|
content: '更新',
|
|
timestamp: '2018-04-11',
|
|
},
|
|
]
|
|
|
|
const types = ref<any[]>()
|
|
|
|
useHead({
|
|
title: `开发者中心`
|
|
});
|
|
|
|
const onDone = (index: string) => {
|
|
activeIndex.value = index;
|
|
}
|
|
|
|
const reload = async () => {
|
|
// 查询字典
|
|
listDictData({dictCode: 'WebsiteType'}).then(data => {
|
|
types.value = data
|
|
})
|
|
listDictData({
|
|
dictCode: 'Color'
|
|
}).then(data => {
|
|
colors.value = data.map((item: any) => {
|
|
return {
|
|
label: item.dictDataName,
|
|
value: item.dictDataCode,
|
|
comments: item.comments
|
|
}
|
|
})
|
|
})
|
|
getSiteData();
|
|
}
|
|
|
|
const getSiteData = () => {
|
|
getCmsWebsiteAll(navId.value).then(data => {
|
|
// 获取栏目信息
|
|
assignFields(data)
|
|
// 插件头像
|
|
avatar.value = []
|
|
if (data.websiteLogo) {
|
|
avatar.value.push({
|
|
uid: form.websiteId,
|
|
url: data.websiteLogo,
|
|
name: '插件头像',
|
|
})
|
|
}
|
|
|
|
// 插件截图
|
|
files.value = []
|
|
if (data.files) {
|
|
const imgArr = JSON.parse(data.files);
|
|
imgArr.map((item: any) => {
|
|
files.value.push({
|
|
uid: form.websiteId,
|
|
url: item,
|
|
name: '插件截图',
|
|
})
|
|
srcList.value.push(item)
|
|
})
|
|
}
|
|
|
|
if(data.websiteType){
|
|
form.websiteType = JSON.parse(data.websiteType) || []
|
|
}
|
|
if(data.color){
|
|
selectColor.value = data.color;
|
|
}
|
|
|
|
// 设置页面标题
|
|
useSeoMeta({
|
|
description: data.comments || data.websiteName,
|
|
keywords: data.websiteName,
|
|
titleTemplate: `${data?.websiteName}` + ' - %s',
|
|
})
|
|
|
|
// 加载评论
|
|
}).catch(err => {
|
|
console.log(err, '加载失败...')
|
|
})
|
|
}
|
|
|
|
const goBack = () => {
|
|
router.back(); // 返回上一页
|
|
}
|
|
|
|
// 选择色系
|
|
const handleColor = (text: string) => {
|
|
selectColor.value = text;
|
|
form.color = text;
|
|
}
|
|
|
|
const avatarRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
|
form.websiteLogo = '';
|
|
}
|
|
|
|
const avatarSuccess = (e: any) => {
|
|
form.websiteLogo = e.data.downloadUrl
|
|
}
|
|
|
|
const filesRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
|
form.files = JSON.stringify('');
|
|
}
|
|
|
|
const filesSuccess = (e: any) => {
|
|
srcList.value.push(e.data.downloadUrl)
|
|
}
|
|
|
|
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
|
|
dialogImageUrl.value = uploadFile.url!
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
// 图片上传
|
|
const onUploadImg = async (files: any, callback: any) => {
|
|
const res = await Promise.all(
|
|
files.map((file: any) => {
|
|
return new Promise((rev, rej) => {
|
|
const form = new FormData();
|
|
form.append('file', file);
|
|
uploadOss(file).then((res: any) => rev(res))
|
|
.catch((error: any) => rej(error));
|
|
});
|
|
})
|
|
);
|
|
console.log(res, '上次')
|
|
callback(res.map((item) => item.url));
|
|
};
|
|
|
|
const onSubmit = () => {
|
|
form.files = undefined;
|
|
if (srcList.value.length > 0) {
|
|
form.files = JSON.stringify(srcList.value)
|
|
}
|
|
if(!form.developer){
|
|
form.developer = developer.value;
|
|
}
|
|
updateCmsWebsiteAll({
|
|
...form,
|
|
websiteType: JSON.stringify(form.websiteType)
|
|
}).then(() => {
|
|
ElMessage.success('修改成功');
|
|
});
|
|
}
|
|
|
|
watch(
|
|
() => route.params.id,
|
|
(id) => {
|
|
navId.value = getNavIdByParamsId(id);
|
|
if(route.query.developer){
|
|
developer.value = `${route.query.developer}`;
|
|
}
|
|
reload();
|
|
},
|
|
{immediate: true}
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.demo-tabs > .el-tabs__content {
|
|
padding: 32px;
|
|
color: #6b778c;
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|