467 lines
14 KiB
Vue
467 lines
14 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 mr-3"> 插件编辑 </span>
|
|
</template>
|
|
|
|
<div 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-input v-model="form.deliveryMethod" placeholder="交付方式"/>
|
|
</el-form-item>
|
|
<el-form-item label="计费方式" class="px-4" label-width="100" label-position="left">
|
|
<el-input v-model="form.chargingMethod" placeholder="计费方式"/>
|
|
</el-form-item>
|
|
<el-form-item label="插件价格" class="px-4" label-width="100" label-position="left">
|
|
<el-input v-model="form.price" placeholder="插件价格"/>
|
|
</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://common-api.websoft.top/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://common-api.websoft.top/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-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="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="setting">
|
|
<el-form-item label="允许展示到插件市场" class="px-4" label-width="200" label-position="left">
|
|
<el-switch v-model="form.market" 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";
|
|
|
|
|
|
// 配置信息
|
|
const runtimeConfig = useRuntimeConfig();
|
|
const tenantId = localStorage.getItem('ServerTenantId')
|
|
const token = useToken();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const website = useWebsite()
|
|
const user = useUser();
|
|
const navId = ref();
|
|
const activeIndex = ref('');
|
|
const avatar = ref<UploadUserFile[]>([])
|
|
const files = ref<UploadUserFile[]>([])
|
|
const srcList = ref<string[]>([])
|
|
const dialogImageUrl = ref('')
|
|
const content = ref('');
|
|
const dialogVisible = ref(false)
|
|
const activeName = ref('info')
|
|
const comments = ref<CompanyComment[]>([]);
|
|
|
|
|
|
// 配置信息
|
|
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,
|
|
// 全局样式
|
|
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,
|
|
// 所在国家
|
|
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 = [
|
|
{
|
|
value: '网站',
|
|
label: '网站',
|
|
},
|
|
{
|
|
value: '小程序',
|
|
label: '小程序',
|
|
},
|
|
{
|
|
value: 'MacOS',
|
|
label: 'MacOS',
|
|
},
|
|
{
|
|
value: 'Windows',
|
|
label: 'Windows',
|
|
},
|
|
{
|
|
value: 'App',
|
|
label: 'App',
|
|
},
|
|
]
|
|
|
|
useHead({
|
|
title: `用户中心`,
|
|
meta: [{name: website.value.keywords, content: website.value.comments}]
|
|
});
|
|
|
|
const onDone = (index: string) => {
|
|
activeIndex.value = index;
|
|
}
|
|
|
|
const reload = async () => {
|
|
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)
|
|
}
|
|
|
|
// 设置页面标题
|
|
useSeoMeta({
|
|
description: data.comments || data.websiteName,
|
|
keywords: data.websiteName,
|
|
titleTemplate: `${data?.websiteName}` + ' - %s',
|
|
})
|
|
|
|
|
|
// 加载评论
|
|
|
|
}).catch(err => {
|
|
console.log(err, '加载失败...')
|
|
})
|
|
}
|
|
|
|
const goBack = () => {
|
|
router.back(); // 返回上一页
|
|
}
|
|
|
|
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.websiteType){
|
|
form.websiteType = JSON.stringify(form.websiteType)
|
|
}
|
|
updateCmsWebsiteAll(form).then(() => {
|
|
ElMessage.success('修改成功');
|
|
});
|
|
}
|
|
|
|
watch(
|
|
() => route.params.id,
|
|
(id) => {
|
|
navId.value = getNavIdByParamsId(id);
|
|
reload();
|
|
},
|
|
{immediate: true}
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.demo-tabs > .el-tabs__content {
|
|
padding: 32px;
|
|
color: #6b778c;
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|