You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
223 lines
5.2 KiB
223 lines
5.2 KiB
<!-- 文章详情 -->
|
|
<template>
|
|
<PageBanner :form="form" />
|
|
|
|
<div class="page-main md:w-screen-xl m-auto">
|
|
<el-row :gutter="24">
|
|
<el-col :span="18">
|
|
<div class="leading-7 bg-white rounded-lg text-lg line-height-loose text-gray-600 content">
|
|
<el-tabs
|
|
v-model="activeName"
|
|
type="card"
|
|
class="demo-tabs"
|
|
@tab-click="reload"
|
|
>
|
|
<el-tab-pane label="基本信息" name="base">基本信息</el-tab-pane>
|
|
<el-tab-pane label="成员管理" name="users">成员管理</el-tab-pane>
|
|
<el-tab-pane label="项目参数" name="param">项目参数</el-tab-pane>
|
|
<el-tab-pane label="账号密码" name="domain">账号密码</el-tab-pane>
|
|
<el-tab-pane label="开发文档" name="profile">协同文档</el-tab-pane>
|
|
<el-tab-pane label="项目附件" name="annex">项目附件</el-tab-pane>
|
|
<el-tab-pane label="项目工单" name="task">项目工单</el-tab-pane>
|
|
<el-tab-pane label="应用截图" name="photo">应用截图</el-tab-pane>
|
|
<el-tab-pane label="项目介绍" name="about">
|
|
<div class="p-6 content" v-html="form?.content"></div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="p-4 leading-7 bg-white rounded-lg">
|
|
点击排行
|
|
</div>
|
|
<div class="p-4 leading-7 bg-white rounded-lg mt-4">
|
|
推荐文章
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
</template>
|
|
<script setup lang="ts">
|
|
import type {ApiResult} from "~/api";
|
|
import {useServerRequest} from "~/composables/useServerRequest";
|
|
import {useWebsite} from "~/composables/configState";
|
|
import type {BreadcrumbItem} from "~/types/global";
|
|
import {getIdBySpm} from "~/utils/common";
|
|
import type {Article} from "~/api/cms/article/model";
|
|
import useFormData from "~/utils/use-form-data";
|
|
import PageBanner from './components/PageBanner.vue';
|
|
import type {App} from "~/api/oa/app/model";
|
|
|
|
// 引入状态管理
|
|
const route = useRoute();
|
|
const website = useWebsite();
|
|
const breadcrumb = ref<BreadcrumbItem>();
|
|
const previousArticle = ref<Article>();
|
|
const nextArticle = ref<Article>();
|
|
const activeName = ref();
|
|
|
|
|
|
// 配置信息
|
|
const { form, assignFields } = useFormData<App>({
|
|
// 应用id
|
|
appId: undefined,
|
|
// 应用秘钥
|
|
appSecret: '',
|
|
enName: '',
|
|
// 应用名称
|
|
appName: '',
|
|
// 上级id, 0是顶级
|
|
parentId: undefined,
|
|
// 应用编号
|
|
appCode: '',
|
|
// 应用图标
|
|
appIcon: '',
|
|
appQrcode: '',
|
|
// 应用截图
|
|
images: '',
|
|
// 应用类型
|
|
appType: '',
|
|
appTypeMultiple: undefined,
|
|
// 菜单类型
|
|
menuType: undefined,
|
|
// 应用地址
|
|
appUrl: '',
|
|
// 后台管理地址
|
|
adminUrl: undefined,
|
|
// 下载地址
|
|
downUrl: undefined,
|
|
serverUrl: undefined,
|
|
callbackUrl: undefined,
|
|
gitUrl: undefined,
|
|
docsUrl: undefined,
|
|
prototypeUrl: undefined,
|
|
ipAddress: undefined,
|
|
fileUrl: undefined,
|
|
// 应用包名
|
|
packageName: '',
|
|
// 点击次数
|
|
clicks: '',
|
|
// 安装次数
|
|
installs: '',
|
|
// 项目介绍
|
|
content: '',
|
|
// 开发者(个人)
|
|
developer: '',
|
|
director: '',
|
|
projectDirector: '',
|
|
salesman: '',
|
|
// 软件定价
|
|
price: '',
|
|
// 评分
|
|
score: '',
|
|
// 星级
|
|
star: '',
|
|
// 菜单组件地址
|
|
component: '',
|
|
// 菜单路由地址
|
|
path: '',
|
|
// 权限标识
|
|
authority: '',
|
|
// 打开位置
|
|
target: '',
|
|
// 是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)
|
|
hide: undefined,
|
|
// 菜单侧栏选中的path
|
|
active: '',
|
|
// 其它路由元信息
|
|
meta: '',
|
|
// 版本
|
|
edition: '',
|
|
// 版本号
|
|
version: '',
|
|
// 是否已安装
|
|
isUse: undefined,
|
|
// 排序
|
|
sortNumber: undefined,
|
|
// 备注
|
|
comments: '',
|
|
tenantName: '',
|
|
companyName: '',
|
|
// 租户编号
|
|
tenantCode: '',
|
|
// 租户id
|
|
tenantId: undefined,
|
|
// 创建时间
|
|
createTime: '',
|
|
appStatus: '开发中',
|
|
// 状态
|
|
status: undefined,
|
|
// 发布者
|
|
userId: '',
|
|
// 发布者昵称
|
|
nickname: '',
|
|
// 子菜单
|
|
children: [],
|
|
// 权限树回显选中状态, 0未选中, 1选中
|
|
checked: false,
|
|
//
|
|
key: undefined,
|
|
//
|
|
value: undefined,
|
|
//
|
|
parentIds: [],
|
|
//
|
|
openType: undefined,
|
|
//
|
|
search: undefined,
|
|
// 成员管理
|
|
users: [],
|
|
// 项目需求
|
|
requirement: '',
|
|
file1: '[]',
|
|
file2: '[]',
|
|
file3: '[]',
|
|
showCase: undefined,
|
|
showIndex: undefined,
|
|
recommend: undefined,
|
|
categoryName: '',
|
|
title: ''
|
|
});
|
|
|
|
// 请求数据
|
|
const reload = async () => {
|
|
|
|
// 存在spm(优先级高)
|
|
const { data: nav } = await useServerRequest<ApiResult<App>>('/oa/oa-app/' + getIdBySpm(5))
|
|
if (nav.value?.data) {
|
|
assignFields(nav.value.data)
|
|
form.nickname = nav.value.data?.companyName;
|
|
form.title = nav.value.data?.appName;
|
|
form.categoryName = '应用详情';
|
|
}
|
|
|
|
// seo
|
|
useHead({
|
|
title: `${form.title} - ${website.value.websiteName}`,
|
|
bodyAttrs: {
|
|
class: "page-container",
|
|
}
|
|
});
|
|
// 面包屑
|
|
breadcrumb.value = form
|
|
}
|
|
|
|
watch(
|
|
() => route.path,
|
|
(path) => {
|
|
console.log(path,'=>Path')
|
|
|
|
reload();
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.content {
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
</style>
|