项目初始化
This commit is contained in:
23
web-vue/packages/cms/README.md
Normal file
23
web-vue/packages/cms/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
|
||||
- 官方网站：<https://jeesite.com>
|
||||
- 使用文档：<https://jeesite.com/docs>
|
||||
- 后端代码：<https://gitee.com/thinkgem/jeesite5>
|
||||
- 前端代码：<https://gitee.com/thinkgem/jeesite-vue>
|
||||
|
||||
------
|
||||
|
||||
<div align="center">
|
||||
如果你喜欢 JeeSite，请给她一个 ⭐️ Star，您的支持将是我们前行的动力。
|
||||
</div>
|
||||
|
||||
------
|
||||
|
||||
- 问题反馈：<https://gitee.com/thinkgem/jeesite-vue/issues> [【新手必读】](https://gitee.com/thinkgem/jeesite5/issues/I18ARR)
|
||||
- 需求收集：<https://gitee.com/thinkgem/jeesite-vue/issues/new>
|
||||
- QQ 群：`127515876`、`209330483`、`223507718`、`709534275`、`730390092`、`1373527`、`183903863(外包)`
|
||||
- 微信群：添加客服微信 <http://s.jeesite.com> 邀请您进群
|
||||
- 关注微信公众号，了解最新动态：
|
||||
|
||||
<p style="padding-left:40px">
|
||||
<img alt="JeeSite微信公众号" src="https://jeesite.com/assets/images/mp.png" width="220" height="220">
|
||||
</p>
|
||||
53
web-vue/packages/cms/api/cms/article.ts
Normal file
53
web-vue/packages/cms/api/cms/article.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
*/
|
||||
import { defHttp } from '@jeesite/core/utils/http/axios';
|
||||
import { useGlobSetting } from '@jeesite/core/hooks/setting';
|
||||
import { BasicModel, Page, TreeDataModel } from '@jeesite/core/api/model/baseModel';
|
||||
import { Category } from '@jeesite/cms/api/cms/category';
|
||||
|
||||
const { adminPath } = useGlobSetting();
|
||||
|
||||
export interface Article extends BasicModel<Article> {
|
||||
title: string; // 内容标题
|
||||
category: Category; // 归属栏目
|
||||
source?: string; // 文章来源
|
||||
moduleType?: string; // 模块类型
|
||||
color?: string; // 标题颜色
|
||||
href?: string; // 外部链接
|
||||
weight?: number; // 权重/排序
|
||||
weightDate?: string; // 权重期限
|
||||
description?: string; // 摘要
|
||||
image?: string; // 内容图片
|
||||
keywords?: string; // 关键字
|
||||
copyfrom?: string; // 文章来源出处
|
||||
hits?: number; // 点击数
|
||||
hitsPlus?: number; // 支持数
|
||||
hitsMinus?: number; // 反对数
|
||||
wordCount?: number; // 字数
|
||||
customContentView?: string; // 自定义内容视图
|
||||
viewConfig?: string; // 视图配置
|
||||
}
|
||||
|
||||
export const articleList = (params?: Article | any) =>
|
||||
defHttp.get<Article>({ url: adminPath + '/cms/article/list', params });
|
||||
|
||||
export const articleListData = (params?: Article | any) =>
|
||||
defHttp.post<Page<Article>>({ url: adminPath + '/cms/article/listData', params });
|
||||
|
||||
export const articleForm = (params?: Article | any) =>
|
||||
defHttp.get<Article>({ url: adminPath + '/cms/article/form', params });
|
||||
|
||||
export const articleSave = (params?: any, data?: Article | any) =>
|
||||
defHttp.postJson<Article>({ url: adminPath + '/cms/article/save', params, data });
|
||||
|
||||
export const articleDisable = (params?: Article | any) =>
|
||||
defHttp.get<Article>({ url: adminPath + '/cms/article/disable', params });
|
||||
|
||||
export const articleEnable = (params?: Article | any) =>
|
||||
defHttp.get<Article>({ url: adminPath + '/cms/article/enable', params });
|
||||
|
||||
export const articleDelete = (params?: Article | any) =>
|
||||
defHttp.get<Article>({ url: adminPath + '/cms/article/delete', params });
|
||||
67
web-vue/packages/cms/api/cms/category.ts
Normal file
67
web-vue/packages/cms/api/cms/category.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
*/
|
||||
import { defHttp } from '@jeesite/core/utils/http/axios';
|
||||
import { useGlobSetting } from '@jeesite/core/hooks/setting';
|
||||
import { TreeDataModel, TreeModel } from '@jeesite/core/api/model/baseModel';
|
||||
|
||||
const { adminPath } = useGlobSetting();
|
||||
|
||||
export interface Category extends TreeModel<Category> {
|
||||
categoryCode: string; // 栏目编码
|
||||
categoryName: string; // 栏目名称
|
||||
siteCode: string; // 站点编码
|
||||
moduleType?: string; // 内容模型
|
||||
image?: string; // 栏目图片
|
||||
href?: string; // 链接
|
||||
target?: string; // 目标
|
||||
keywords?: string; // 关键字
|
||||
description?: string; // 描述
|
||||
inMenu?: string; // 导航栏目
|
||||
inList?: string; // 栏目列表
|
||||
showModes?: string; // 展现模式
|
||||
isNeedAudit?: string; // 是否需要审核
|
||||
isCanComment?: string; // 是否允许评论
|
||||
customListView?: string; // 自定义列表视图
|
||||
customContentView?: string; // 自定义内容视图
|
||||
viewConfig?: string; // 视图配置
|
||||
extend?: any; // 扩展字段
|
||||
}
|
||||
|
||||
export const categoryIndex = (params?: Category | any) =>
|
||||
defHttp.get<Category>({ url: adminPath + '/cms/category/index', params });
|
||||
|
||||
export const categoryList = (params?: Category | any) =>
|
||||
defHttp.get<Category>({ url: adminPath + '/cms/category/list', params });
|
||||
|
||||
export const categoryListData = (params?: Category | any) =>
|
||||
defHttp.post<Category[]>({ url: adminPath + '/cms/category/listData', params });
|
||||
|
||||
export const categoryForm = (params?: Category | any) =>
|
||||
defHttp.get<Category>({ url: adminPath + '/cms/category/form', params });
|
||||
|
||||
export const categoryCreateNextNode = (params?: Category | any) =>
|
||||
defHttp.get<Category>({ url: adminPath + '/cms/category/createNextNode', params });
|
||||
|
||||
export const categorySave = (params?: any, data?: Category | any) =>
|
||||
defHttp.postJson<Category>({ url: adminPath + '/cms/category/save', params, data });
|
||||
|
||||
export const categoryDisable = (params?: Category | any) =>
|
||||
defHttp.get<Category>({ url: adminPath + '/cms/category/disable', params });
|
||||
|
||||
export const categoryEnable = (params?: Category | any) =>
|
||||
defHttp.get<Category>({ url: adminPath + '/cms/category/enable', params });
|
||||
|
||||
export const categoryDelete = (params?: Category | any) =>
|
||||
defHttp.get<Category>({ url: adminPath + '/cms/category/delete', params });
|
||||
|
||||
export const categoryTreeData = (params?: any) =>
|
||||
defHttp.get<TreeDataModel[]>({ url: adminPath + '/cms/category/treeData', params });
|
||||
|
||||
export const categoryRebuildIndex = (params?: Category | any) =>
|
||||
defHttp.get<Category>({ url: adminPath + '/cms/category/rebuildIndex', params });
|
||||
|
||||
export const categoryRebuildVectorStore = (params?: Category | any) =>
|
||||
defHttp.get<Category>({ url: adminPath + '/cms/category/rebuildVectorStore', params });
|
||||
38
web-vue/packages/cms/api/cms/chat.ts
Normal file
38
web-vue/packages/cms/api/cms/chat.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
*/
|
||||
import { defHttp } from '@jeesite/core/utils/http/axios';
|
||||
import { useGlobSetting } from '@jeesite/core/hooks/setting';
|
||||
import { AxiosProgressEvent, GenericAbortSignal } from 'axios';
|
||||
|
||||
const { adminPath } = useGlobSetting();
|
||||
|
||||
export const cmsChatMessage = (params?: Recordable | any) =>
|
||||
defHttp.get<Recordable[]>({ url: adminPath + '/cms/chat/message', params });
|
||||
|
||||
export const cmsChatList = (params?: Recordable | any) =>
|
||||
defHttp.get<Recordable[]>({ url: adminPath + '/cms/chat/list', params });
|
||||
|
||||
export const cmsChatSave = (params?: Recordable | any) =>
|
||||
defHttp.post<Recordable>({ url: adminPath + '/cms/chat/save', params });
|
||||
|
||||
export const cmsChatDelete = (params?: Recordable | any) =>
|
||||
defHttp.get<Recordable>({ url: adminPath + '/cms/chat/delete', params });
|
||||
|
||||
export const cmsChatStream = (
|
||||
params?: Recordable | any,
|
||||
signal?: GenericAbortSignal,
|
||||
onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void,
|
||||
) =>
|
||||
defHttp.post<Recordable>({
|
||||
url: adminPath + '/cms/chat/stream',
|
||||
params,
|
||||
signal,
|
||||
onDownloadProgress,
|
||||
responseType: 'stream',
|
||||
headers: {
|
||||
'x-ajax': 'event-stream',
|
||||
},
|
||||
});
|
||||
48
web-vue/packages/cms/api/cms/site.ts
Normal file
48
web-vue/packages/cms/api/cms/site.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
*/
|
||||
import { defHttp } from '@jeesite/core/utils/http/axios';
|
||||
import { useGlobSetting } from '@jeesite/core/hooks/setting';
|
||||
import { BasicModel, Page } from '@jeesite/core/api/model/baseModel';
|
||||
|
||||
const { adminPath } = useGlobSetting();
|
||||
|
||||
export interface Site extends BasicModel<Site> {
|
||||
siteName: string; // 站点名称
|
||||
siteCode: string; // 站点编码
|
||||
title: string; // 站点标题
|
||||
domainName?: string; // 站点域名
|
||||
siteSort?: number; // 站点排序
|
||||
logo?: string; // 站点Logo
|
||||
description?: string; // 描述
|
||||
keywords?: string; // 关键字
|
||||
theme?: string; // 主题风格
|
||||
customIndexView?: string; // 首页视图
|
||||
copyright?: string; // 版权信息
|
||||
}
|
||||
|
||||
export const siteList = (params?: Site | any) => defHttp.get<Site>({ url: adminPath + '/cms/site/list', params });
|
||||
|
||||
export const siteListData = (params?: Site | any) =>
|
||||
defHttp.post<Page<Site>>({ url: adminPath + '/cms/site/listData', params });
|
||||
|
||||
export const siteForm = (params?: Site | any) => defHttp.get<Site>({ url: adminPath + '/cms/site/form', params });
|
||||
|
||||
export const siteSave = (params?: any, data?: Site | any) =>
|
||||
defHttp.postJson<Site>({ url: adminPath + '/cms/site/save', params, data });
|
||||
|
||||
export const siteDisable = (params?: Site | any) => defHttp.get<Site>({ url: adminPath + '/cms/site/disable', params });
|
||||
|
||||
export const siteEnable = (params?: Site | any) => defHttp.get<Site>({ url: adminPath + '/cms/site/enable', params });
|
||||
|
||||
export const siteDelete = (params?: Site | any) => defHttp.get<Site>({ url: adminPath + '/cms/site/delete', params });
|
||||
|
||||
export const siteSelect = (params?: Site | any) => defHttp.get<Site>({ url: adminPath + '/cms/site/select', params });
|
||||
|
||||
export const siteRebuildIndex = (params?: Site | any) =>
|
||||
defHttp.get<Site>({ url: adminPath + '/cms/site/rebuildIndex', params });
|
||||
|
||||
export const siteRebuildVectorStore = (params?: Site | any) =>
|
||||
defHttp.get<Site>({ url: adminPath + '/cms/site/rebuildVectorStore', params });
|
||||
BIN
web-vue/packages/cms/assets/images/ruler.png
Normal file
BIN
web-vue/packages/cms/assets/images/ruler.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 152 B |
2
web-vue/packages/cms/index.ts
Normal file
2
web-vue/packages/cms/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
import './node_modules/@jeesite/cms-lib/dist/style.css';
|
||||
export { ChatMessage } from './node_modules/@jeesite/cms-lib/dist';
|
||||
31
web-vue/packages/cms/package.json
Normal file
31
web-vue/packages/cms/package.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "@jeesite/cms",
|
||||
"version": "5.15.1",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"type:check": "vue-tsc --noEmit --skipLibCheck",
|
||||
"uninstall": "rimraf node_modules",
|
||||
"update": "ncu -u"
|
||||
},
|
||||
"dependencies": {
|
||||
"@jeesite/cms-lib": "5.15.1-rc.1",
|
||||
"qs": "6.14.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/qs": "6.14.0"
|
||||
},
|
||||
"homepage": "https://jeesite.com",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitee.com/thinkgem/jeesite-vue.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://gitee.com/thinkgem/jeesite-vue/issues"
|
||||
},
|
||||
"author": {
|
||||
"name": "ThinkGem",
|
||||
"email": "thinkgem@163.com",
|
||||
"url": "https://gitee.com/thinkgem"
|
||||
}
|
||||
}
|
||||
19
web-vue/packages/cms/tsconfig.json
Normal file
19
web-vue/packages/cms/tsconfig.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@jeesite/cms/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"./**/*.ts",
|
||||
"./**/*.tsx",
|
||||
"./**/*.vue"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"vite.config.ts",
|
||||
"dist"
|
||||
]
|
||||
}
|
||||
211
web-vue/packages/cms/views/cms/article/form.vue
Normal file
211
web-vue/packages/cms/views/cms/article/form.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<CollapseForm
|
||||
:config="formConfig"
|
||||
:loading="loadingRef"
|
||||
:okLoading="okLoadingRef"
|
||||
:okAuth="'cms:article:edit'"
|
||||
@close="handleClose"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<template #title>
|
||||
<Icon :icon="getTitle.icon" class="m-1 pr-1" />
|
||||
<span> {{ getTitle.value }} </span>
|
||||
</template>
|
||||
<template #main>
|
||||
<FormBasic ref="formBasicRef" />
|
||||
</template>
|
||||
<template #detail>
|
||||
<FormDetail ref="formDetailRef" />
|
||||
</template>
|
||||
<template #other>
|
||||
<FormOther ref="formOtherRef" />
|
||||
</template>
|
||||
<template #view>
|
||||
<FormView ref="formViewRef" />
|
||||
</template>
|
||||
<template #extend>
|
||||
<FormExtend ref="formExtendRef" :title="false" :collapsed="false" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<div>
|
||||
<a-button type="default" @click="handleClose" v-auth="'cms:article:edit'">
|
||||
<Icon icon="i-ant-design:close-outlined" /> {{ t('common.closeText') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
v-if="record.isNewRecord || record.status == '9'"
|
||||
color="success"
|
||||
@click="handleDraft"
|
||||
:loading="okLoadingRef"
|
||||
>
|
||||
<Icon icon="i-ant-design:save-outlined" /> {{ t('草稿') }}
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handlePublish" :loading="okLoadingRef">
|
||||
<Icon icon="i-ant-design:check-outlined" /> {{ record.status == '0' ? t('更新') : t('发布') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</CollapseForm>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsCmsArticleForm">
|
||||
import { ref, unref, computed, onMounted } from 'vue';
|
||||
import { useEmitter } from '@jeesite/core/store/modules/user';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { router } from '@jeesite/core/router';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { CollapseForm } from '@jeesite/core/components/CollapseForm';
|
||||
import { Article, articleSave, articleForm } from '@jeesite/cms/api/cms/article';
|
||||
import { useQuery } from '@jeesite/core/hooks/web/usePage';
|
||||
import { useTabs } from '@jeesite/core/hooks/web/useTabs';
|
||||
|
||||
import FormBasic from './formBasic.vue';
|
||||
import FormDetail from './formDetail.vue';
|
||||
import FormView from './formView.vue';
|
||||
import FormOther from './formOther.vue';
|
||||
import { FormExtend } from '@jeesite/core/components/Form';
|
||||
|
||||
const emitter = useEmitter();
|
||||
|
||||
const { t } = useI18n('cms.article');
|
||||
const { showMessage } = useMessage();
|
||||
//const { meta } = unref(router.currentRoute);
|
||||
const { setTitle, close } = useTabs(router);
|
||||
const record = ref<Article>({} as Article);
|
||||
const isCanUseAuth = ref(false);
|
||||
const isNeedAudit = ref(false);
|
||||
|
||||
const loadingRef = ref<boolean>(false);
|
||||
const okLoadingRef = ref<boolean>(false);
|
||||
const query = useQuery();
|
||||
|
||||
const getTitle = computed(() => ({
|
||||
icon: /*meta.icon || */ 'i-ant-design:book-outlined',
|
||||
value: record.value.isNewRecord ? t('新增文章') : t('编辑文章'),
|
||||
}));
|
||||
|
||||
const formConfig = ref<any[]>([
|
||||
{
|
||||
label: t('基本信息'),
|
||||
value: 'main',
|
||||
open: true,
|
||||
},
|
||||
{
|
||||
label: t('内容正文'),
|
||||
value: 'detail',
|
||||
open: true,
|
||||
},
|
||||
{
|
||||
label: t('其他信息'),
|
||||
value: 'other',
|
||||
open: true,
|
||||
},
|
||||
{
|
||||
label: t('视图配置'),
|
||||
value: 'view',
|
||||
open: true,
|
||||
},
|
||||
{
|
||||
label: t('扩展字段'),
|
||||
value: 'extend',
|
||||
open: false,
|
||||
},
|
||||
]);
|
||||
|
||||
const formBasicRef = ref<InstanceType<typeof FormBasic>>();
|
||||
const formDetailRef = ref<InstanceType<typeof FormDetail>>();
|
||||
const formOtherRef = ref<InstanceType<typeof FormOther>>();
|
||||
const formViewRef = ref<InstanceType<typeof FormView>>();
|
||||
const formExtendRef = ref<InstanceType<typeof FormExtend>>();
|
||||
|
||||
async function resetFields() {
|
||||
await formBasicRef.value?.resetFields();
|
||||
await formDetailRef.value?.resetFields();
|
||||
await formOtherRef.value?.resetFields();
|
||||
await formViewRef.value?.resetFields();
|
||||
await formExtendRef.value?.resetFields();
|
||||
}
|
||||
|
||||
async function setFieldsValue(values: Recordable, res: any) {
|
||||
await formBasicRef.value?.setFieldsValue(values, isNeedAudit);
|
||||
await formDetailRef.value?.setFieldsValue(values);
|
||||
await formOtherRef.value?.setFieldsValue(values);
|
||||
await formViewRef.value?.setFieldsValue(values, res);
|
||||
if (record.value.articleData) {
|
||||
await formExtendRef.value?.setFieldsValue(record.value.articleData.extend);
|
||||
}
|
||||
}
|
||||
|
||||
async function validate(): Promise<Recordable<Article>> {
|
||||
return Object.assign(
|
||||
await formBasicRef.value?.validate(),
|
||||
await formDetailRef.value?.validate(),
|
||||
await formOtherRef.value?.validate(),
|
||||
await formViewRef.value?.validate(),
|
||||
);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
loadingRef.value = true;
|
||||
await resetFields();
|
||||
const res = await articleForm(unref(query));
|
||||
record.value = (res.article || {}) as Article;
|
||||
record.value.__t = new Date().getTime();
|
||||
isCanUseAuth.value = res.isCanUseAuth as boolean;
|
||||
isNeedAudit.value = record.value.category.isNeedAudit == '1';
|
||||
await setFieldsValue(record.value, res);
|
||||
await setTitle(unref(getTitle).value);
|
||||
loadingRef.value = false;
|
||||
});
|
||||
|
||||
async function handleClose() {
|
||||
setTimeout(close);
|
||||
}
|
||||
|
||||
async function handleDraft() {
|
||||
record.value.status = '9';
|
||||
await handleSubmit();
|
||||
}
|
||||
|
||||
async function handlePublish() {
|
||||
record.value.status = '0';
|
||||
await handleSubmit();
|
||||
}
|
||||
|
||||
async function handleSubmit(event?: any) {
|
||||
try {
|
||||
okLoadingRef.value = true;
|
||||
const data = event?.formData || (await validate()); // 文章审核，提交到 BPM 流程引擎（专业版）
|
||||
if (isCanUseAuth.value) {
|
||||
data.bpm = Object.assign(data.bpm || {}, record.value.bpm); // 流程信息
|
||||
}
|
||||
data.status = record.value.status; // 提交状态
|
||||
const params: any = {
|
||||
isNewRecord: record.value.isNewRecord,
|
||||
id: record.value.id,
|
||||
};
|
||||
if (!data.articleData) data.articleData = {};
|
||||
data.articleData.extend = await formExtendRef.value?.validate();
|
||||
// console.log('submit', params, data, record);
|
||||
const res = await articleSave(params, data);
|
||||
showMessage(res.message);
|
||||
handleSuccess();
|
||||
setTimeout(close);
|
||||
} catch (error: any) {
|
||||
if (error && error.errorFields) {
|
||||
showMessage(error.message || t('common.validateError'));
|
||||
}
|
||||
console.log('error', error);
|
||||
} finally {
|
||||
okLoadingRef.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleSuccess() {
|
||||
emitter.emit('cms-article-reload');
|
||||
}
|
||||
</script>
|
||||
178
web-vue/packages/cms/views/cms/article/formBasic.vue
Normal file
178
web-vue/packages/cms/views/cms/article/formBasic.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<BasicForm @register="registerForm" />
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsCmsArticleFormBasic">
|
||||
import { h, ref, Ref } from 'vue';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { BasicForm, FormSchema, useForm } from '@jeesite/core/components/Form';
|
||||
import { Article } from '@jeesite/cms/api/cms/article';
|
||||
import { categoryTreeData } from '@jeesite/cms/api/cms/category';
|
||||
import type { NamePath } from 'ant-design-vue/lib/form/interface';
|
||||
import { Checkbox } from 'ant-design-vue';
|
||||
|
||||
const { t } = useI18n('cms.article');
|
||||
const record = ref<Article>({} as Article);
|
||||
let isNeedAudit = ref(false);
|
||||
|
||||
const inputFormSchemas: FormSchema<Article>[] = [
|
||||
{
|
||||
label: t('归属栏目'),
|
||||
field: 'category.categoryCode',
|
||||
component: 'TreeSelect',
|
||||
componentProps: {
|
||||
api: categoryTreeData,
|
||||
canSelectParent: false,
|
||||
allowClear: true,
|
||||
onSelect: (value, node) => {
|
||||
isNeedAudit.value = node.isNeedAudit == '1';
|
||||
},
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('内容来源'),
|
||||
field: 'source',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
dictType: 'cms_source',
|
||||
onChange: (val: any) => {
|
||||
record.value.source = val;
|
||||
},
|
||||
},
|
||||
defaultValue: '2',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('内容出处'),
|
||||
field: 'copyfrom',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 255,
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
show: () => record.value.source === '1',
|
||||
},
|
||||
{
|
||||
label: t('内容标题'),
|
||||
field: 'title',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 255,
|
||||
class: 'text-ruler',
|
||||
},
|
||||
renderComponentContent: ({ model }) => {
|
||||
return {
|
||||
addonAfter: () =>
|
||||
h('div', { style: 'position:relative;' }, [
|
||||
h('input', {
|
||||
style: 'border:0;width:28px;padding:0 2px',
|
||||
type: 'color',
|
||||
title: t('标题颜色'),
|
||||
value: record.value.color || '#555555',
|
||||
onChange: (e: any) => {
|
||||
record.value.color = e.target?.value || '';
|
||||
},
|
||||
}),
|
||||
record.value.color &&
|
||||
h('a', {
|
||||
style: 'position:absolute;cursor:pointer;top:6px;right:-8px;font-size:12px;opacity:0.5',
|
||||
title: t('清除颜色'),
|
||||
innerHTML: '×',
|
||||
onClick: () => {
|
||||
record.value.color = '';
|
||||
},
|
||||
}),
|
||||
]),
|
||||
};
|
||||
},
|
||||
required: true,
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('外部链接'),
|
||||
helpMessage: '如果填写外部链接，点击该文章会直接跳转到该地址，不想不跳转请留空。',
|
||||
field: 'href',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 1000,
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('权重/排序'),
|
||||
helpMessage: '数值越大排序越靠前，可设置权重过期时间。',
|
||||
field: 'weight',
|
||||
component: 'InputNumber',
|
||||
componentProps: {
|
||||
style: 'max-width: 180px',
|
||||
maxlength: 8,
|
||||
},
|
||||
renderComponentContent: ({ model }) => {
|
||||
return {
|
||||
addonAfter: () =>
|
||||
h(
|
||||
Checkbox,
|
||||
{
|
||||
onChange: (e: any) => {
|
||||
model.weight = e.target?.checked ? 9999 : 0;
|
||||
},
|
||||
},
|
||||
() => t('置顶'),
|
||||
),
|
||||
};
|
||||
},
|
||||
rules: [{ pattern: /^\d+$/, message: t('请输入一个正整数') }],
|
||||
},
|
||||
{
|
||||
label: t('权重过期时间'),
|
||||
helpMessage: '时间到期后，权重自动恢复为0，如果为空，则权重永不过期。',
|
||||
field: 'weightDate',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('内容摘要'),
|
||||
field: 'description',
|
||||
component: 'InputTextArea',
|
||||
componentProps: {
|
||||
maxlength: 500,
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
];
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm<Article>({
|
||||
labelWidth: 130,
|
||||
schemas: inputFormSchemas,
|
||||
baseColProps: { md: 24, lg: 12 },
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
resetFields: async () => {
|
||||
await resetFields();
|
||||
},
|
||||
setFieldsValue: async (values: Recordable, _isNeedAudit: Ref) => {
|
||||
record.value = values as Article;
|
||||
isNeedAudit = _isNeedAudit;
|
||||
await setFieldsValue(values);
|
||||
},
|
||||
validate: async (nameList?: NamePath[]) => {
|
||||
let data = await validate(nameList);
|
||||
data.color = record.value.color;
|
||||
return data;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.text-ruler .ant-input {
|
||||
background: url('../../../assets/images/ruler.png') repeat-x scroll 0 bottom transparent;
|
||||
}
|
||||
</style>
|
||||
53
web-vue/packages/cms/views/cms/article/formDetail.vue
Normal file
53
web-vue/packages/cms/views/cms/article/formDetail.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<BasicForm @register="registerForm">
|
||||
<template #content="{ model, field }">
|
||||
<WangEditor v-model:value="model[field]" :bizKey="record.id" :bizType="'article_content'" :height="500" />
|
||||
</template>
|
||||
</BasicForm>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsCmsArticleFormDetail">
|
||||
import { ref } from 'vue';
|
||||
import { BasicForm, FormSchema, useForm } from '@jeesite/core/components/Form';
|
||||
import { Article } from '@jeesite/cms/api/cms/article';
|
||||
import type { NamePath } from 'ant-design-vue/lib/form/interface';
|
||||
import { WangEditor } from '@jeesite/core/components/WangEditor';
|
||||
|
||||
const record = ref<Article>({} as Article);
|
||||
|
||||
const inputFormSchemas: FormSchema<Article>[] = [
|
||||
{
|
||||
field: 'articleData.content',
|
||||
component: 'InputTextArea',
|
||||
componentProps: {
|
||||
maxlength: 1000,
|
||||
},
|
||||
required: true,
|
||||
slot: 'content',
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
];
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm<Article>({
|
||||
labelWidth: 70,
|
||||
schemas: inputFormSchemas,
|
||||
baseColProps: { md: 24, lg: 12 },
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
resetFields: async () => {
|
||||
await resetFields();
|
||||
},
|
||||
setFieldsValue: async (values: Recordable) => {
|
||||
record.value = values as Article;
|
||||
await setFieldsValue(values);
|
||||
},
|
||||
validate: async (nameList?: NamePath[]) => {
|
||||
return await validate(nameList);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
76
web-vue/packages/cms/views/cms/article/formOther.vue
Normal file
76
web-vue/packages/cms/views/cms/article/formOther.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<BasicForm @register="registerForm" />
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsCmsArticleFormOther">
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { BasicForm, FormSchema, useForm } from '@jeesite/core/components/Form';
|
||||
import { Article } from '@jeesite/cms/api/cms/article';
|
||||
import { officeTreeData } from '@jeesite/core/api/sys/office';
|
||||
import type { NamePath } from 'ant-design-vue/lib/form/interface';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const { t } = useI18n('cms.article');
|
||||
const record = ref<Article>({} as Article);
|
||||
|
||||
const inputFormSchemas: FormSchema<Article>[] = [
|
||||
{
|
||||
label: t('内容图片'),
|
||||
field: 'dataMap',
|
||||
component: 'Upload',
|
||||
componentProps: {
|
||||
loadTime: computed(() => record.value.__t),
|
||||
bizKey: computed(() => record.value.id),
|
||||
bizType: 'article_image',
|
||||
uploadType: 'image',
|
||||
maxNumber: 1,
|
||||
// imageMaxWidth: 1024,
|
||||
// imageMaxHeight: 768,
|
||||
// imageThumbName: '150x150.jpg',
|
||||
showPreviewNumber: false,
|
||||
showPreviewList: true,
|
||||
emptyHidePreview: true,
|
||||
onChange: (dataMap, fileList) => {
|
||||
fileList.forEach((e) => {
|
||||
record.value.image = e.fileUrl;
|
||||
});
|
||||
},
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('关键字'),
|
||||
field: 'keywords',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 500,
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
];
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm<Article>({
|
||||
labelWidth: 130,
|
||||
schemas: inputFormSchemas,
|
||||
baseColProps: { md: 24, lg: 12 },
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
resetFields: async () => {
|
||||
await resetFields();
|
||||
},
|
||||
setFieldsValue: async (values: Recordable) => {
|
||||
record.value = values as Article;
|
||||
await setFieldsValue(values);
|
||||
},
|
||||
validate: async (nameList?: NamePath[]) => {
|
||||
let data = await validate(nameList);
|
||||
data.image = record.value.image;
|
||||
return data;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
76
web-vue/packages/cms/views/cms/article/formView.vue
Normal file
76
web-vue/packages/cms/views/cms/article/formView.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<BasicForm @register="registerForm" />
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsCmsArticleFormView">
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { BasicForm, FormSchema, useForm } from '@jeesite/core/components/Form';
|
||||
import { Article } from '@jeesite/cms/api/cms/article';
|
||||
import type { NamePath } from 'ant-design-vue/lib/form/interface';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const { t } = useI18n('cms.article');
|
||||
|
||||
const article_DEFAULT_TEMPLATE = ref('');
|
||||
const contentViewList = ref([]);
|
||||
|
||||
const inputFormSchemas: FormSchema<Article>[] = [
|
||||
{
|
||||
label: t('自定义内容视图'),
|
||||
helpMessage: () => `自定义内容视图名称必须以 ${article_DEFAULT_TEMPLATE.value} 开始`,
|
||||
field: 'customContentView',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: contentViewList,
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('视图参数配置'),
|
||||
helpMessage:
|
||||
"视图参数例如: {count:2, title_show:'yes'} 则在视图文件中的获取方法是：${viewConfig_count}、${viewConfig_titleShow}",
|
||||
field: 'viewConfig',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder:
|
||||
"视图参数例如: {count:2, title_show:'yes'} 则在视图文件中的获取方法是：${viewConfig_count}、${viewConfig_titleShow}",
|
||||
maxlength: 1000,
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('备注信息'),
|
||||
field: 'remarks',
|
||||
component: 'InputTextArea',
|
||||
componentProps: {
|
||||
maxlength: 500,
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
];
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm<Article>({
|
||||
labelWidth: 130,
|
||||
schemas: inputFormSchemas,
|
||||
baseColProps: { md: 24, lg: 12 },
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
resetFields: async () => {
|
||||
await resetFields();
|
||||
},
|
||||
setFieldsValue: async (values: Recordable, res: any) => {
|
||||
contentViewList.value = (res.contentViewList || []).map((item) => {
|
||||
return { label: item.dictLabel, value: item.dictValue };
|
||||
});
|
||||
await setFieldsValue(values);
|
||||
},
|
||||
validate: async (nameList?: NamePath[]) => {
|
||||
return await validate(nameList);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
283
web-vue/packages/cms/views/cms/article/list.vue
Normal file
283
web-vue/packages/cms/views/cms/article/list.vue
Normal file
@@ -0,0 +1,283 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #tableTitle>
|
||||
<Icon :icon="getTitle.icon" class="m-1 pr-1" />
|
||||
<span> {{ getTitle.value }} </span>
|
||||
</template>
|
||||
<template #toolbar>
|
||||
<a-button type="default" @click="handleOpenSite"> <Icon icon="i-mdi:globe" /> {{ t('访问站点') }} </a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleForm({ 'category.categoryCode': !isEmpty(props.treeCodes) ? props.treeCodes[0] : '' })"
|
||||
v-auth="'cms:article:edit'"
|
||||
>
|
||||
<Icon icon="i-fluent:add-12-filled" /> {{ t('新增') }}
|
||||
</a-button>
|
||||
</template>
|
||||
<template #firstColumn="{ record }">
|
||||
<a @click="handleForm({ id: record.id })" :title="record.title">
|
||||
{{ record.title }}
|
||||
</a>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsCmsArticleList">
|
||||
import { computed, onMounted, ref, unref, watch } from 'vue';
|
||||
import { useEmitter } from '@jeesite/core/store/modules/user';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { useGlobSetting } from '@jeesite/core/hooks/setting';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { useGo } from '@jeesite/core/hooks/web/usePage';
|
||||
import { router } from '@jeesite/core/router';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { BasicTable, BasicColumn, useTable } from '@jeesite/core/components/Table';
|
||||
import { Article, articleList } from '@jeesite/cms/api/cms/article';
|
||||
import { articleDelete, articleListData } from '@jeesite/cms/api/cms/article';
|
||||
import { articleDisable, articleEnable } from '@jeesite/cms/api/cms/article';
|
||||
import { FormProps } from '@jeesite/core/components/Form';
|
||||
import { isEmpty } from '@jeesite/core/utils/is';
|
||||
|
||||
const props = defineProps({
|
||||
treeCodes: Array as PropType<String[]>,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:treeCodes']);
|
||||
|
||||
const emitter = useEmitter();
|
||||
|
||||
const { t } = useI18n('cms.article');
|
||||
const { showMessage } = useMessage();
|
||||
const { ctxPath } = useGlobSetting();
|
||||
const { meta } = unref(router.currentRoute);
|
||||
const record = ref<Article>({} as Article);
|
||||
const isCanUseAuth = ref(false);
|
||||
|
||||
const getTitle = {
|
||||
icon: meta.icon || 'i-ant-design:book-outlined',
|
||||
value: meta.title || t('文章管理'),
|
||||
};
|
||||
const go = useGo();
|
||||
|
||||
const searchForm: FormProps<Article> = {
|
||||
baseColProps: { md: 8, lg: 6 },
|
||||
labelWidth: 90,
|
||||
schemas: [
|
||||
{
|
||||
label: t('栏目编码'),
|
||||
field: 'category.categoryCode',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('内容标题'),
|
||||
field: 'title',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('状态'),
|
||||
field: 'status',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: computed(() => {
|
||||
return isCanUseAuth.value ? 'bpm_biz_status' : 'sys_search_status';
|
||||
}),
|
||||
allowClear: true,
|
||||
onChange: handleSuccess,
|
||||
},
|
||||
},
|
||||
],
|
||||
resetFunc: async () => {
|
||||
emit('update:treeCodes', []);
|
||||
},
|
||||
};
|
||||
|
||||
const tableColumns: BasicColumn<Article>[] = [
|
||||
{
|
||||
title: t('标题'),
|
||||
dataIndex: 'title',
|
||||
key: 'a.title',
|
||||
sorter: true,
|
||||
width: 230,
|
||||
align: 'left',
|
||||
slot: 'firstColumn',
|
||||
},
|
||||
{
|
||||
title: t('栏目'),
|
||||
dataIndex: 'category.categoryName',
|
||||
key: 'a.category_code',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('权重'),
|
||||
dataIndex: 'weight',
|
||||
key: 'a.weight',
|
||||
sorter: true,
|
||||
width: 90,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('点击数'),
|
||||
dataIndex: 'hits',
|
||||
key: 'a.hits',
|
||||
sorter: true,
|
||||
width: 90,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('字数'),
|
||||
dataIndex: 'wordCount',
|
||||
key: 'a.word_count',
|
||||
sorter: true,
|
||||
width: 90,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('状态'),
|
||||
dataIndex: 'status',
|
||||
key: 'a.status',
|
||||
sorter: true,
|
||||
width: 90,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('更新时间'),
|
||||
dataIndex: 'updateDate',
|
||||
key: 'a.update_date',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumn: BasicColumn<Article> = {
|
||||
width: 140,
|
||||
actions: (record: Article) => [
|
||||
{
|
||||
icon: 'i-clarity:note-edit-line',
|
||||
title: t('编辑文章'),
|
||||
onClick: handleForm.bind(this, { id: record.id }),
|
||||
auth: 'cms:article:edit',
|
||||
},
|
||||
{
|
||||
icon: 'i-ant-design:stop-outlined',
|
||||
color: 'error',
|
||||
title: t('停用文章'),
|
||||
popConfirm: {
|
||||
title: t('是否确认停用文章'),
|
||||
confirm: handleDisable.bind(this, record),
|
||||
},
|
||||
auth: 'cms:article:edit',
|
||||
ifShow: () => record.status === '0',
|
||||
},
|
||||
{
|
||||
icon: 'i-ant-design:check-circle-outlined',
|
||||
color: 'success',
|
||||
title: t('启用文章'),
|
||||
popConfirm: {
|
||||
title: t('是否确认启用文章'),
|
||||
confirm: handleEnable.bind(this, record),
|
||||
},
|
||||
auth: 'cms:article:edit',
|
||||
ifShow: () => record.status === '2',
|
||||
},
|
||||
{
|
||||
icon: 'i-ant-design:delete-outlined',
|
||||
color: 'error',
|
||||
title: t('删除文章'),
|
||||
popConfirm: {
|
||||
title: t('是否确认删除文章'),
|
||||
confirm: handleDelete.bind(this, record),
|
||||
},
|
||||
auth: 'cms:article:edit',
|
||||
},
|
||||
{
|
||||
icon: 'i-mdi:globe',
|
||||
title: t('查看文章'),
|
||||
onClick: () => window.open(ctxPath + '/f/view-' + record.category.categoryCode + '-' + record.id, '_blank'),
|
||||
auth: 'cms:category:edit',
|
||||
ifShow: () => record.status === '0',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const [registerTable, { reload, getForm, updateColumn }] = useTable<Article>({
|
||||
api: articleListData,
|
||||
beforeFetch: (params) => {
|
||||
return params;
|
||||
},
|
||||
columns: tableColumns,
|
||||
actionColumn: actionColumn,
|
||||
formConfig: searchForm,
|
||||
showTableSetting: true,
|
||||
useSearchForm: true,
|
||||
canResize: true,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await articleList();
|
||||
record.value = (res.article || {}) as Article;
|
||||
isCanUseAuth.value = res.isCanUseAuth as boolean;
|
||||
updateColumn({ dataIndex: 'status', dictType: isCanUseAuth.value ? 'bpm_biz_status' : 'sys_status' });
|
||||
await getForm().setFieldsValue(record.value);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.treeCodes,
|
||||
async () => {
|
||||
await getForm().setFieldsValue({
|
||||
'category.categoryCode': !isEmpty(props.treeCodes) ? props.treeCodes[0] : '',
|
||||
});
|
||||
await reload();
|
||||
},
|
||||
);
|
||||
|
||||
function handleOpenSite() {
|
||||
window.open(ctxPath + '/f/index', '_blank');
|
||||
}
|
||||
|
||||
function handleForm(record: Recordable) {
|
||||
// if (!record.id && !record['category.categoryCode']) {
|
||||
// showMessage(t('请先选择栏目'));
|
||||
// return;
|
||||
// }
|
||||
go({
|
||||
path: '/cms/article/form',
|
||||
query: record,
|
||||
});
|
||||
}
|
||||
|
||||
async function handleDisable(record: Recordable) {
|
||||
const params = { id: record.id };
|
||||
const res = await articleDisable(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleEnable(record: Recordable) {
|
||||
const params = { id: record.id };
|
||||
const res = await articleEnable(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleDelete(record: Recordable) {
|
||||
const params = { id: record.id };
|
||||
const res = await articleDelete(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleSuccess(record: Recordable) {
|
||||
await reload({ record });
|
||||
}
|
||||
|
||||
emitter.on('cms-article-reload', reload, true);
|
||||
</script>
|
||||
366
web-vue/packages/cms/views/cms/category/form.vue
Normal file
366
web-vue/packages/cms/views/cms/category/form.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<BasicDrawer
|
||||
v-bind="$attrs"
|
||||
:showFooter="true"
|
||||
:okAuth="'cms:category:edit'"
|
||||
@register="registerDrawer"
|
||||
@ok="handleSubmit"
|
||||
width="70%"
|
||||
>
|
||||
<template #title>
|
||||
<Icon :icon="getTitle.icon" class="m-1 pr-1" />
|
||||
<span> {{ getTitle.value }} </span>
|
||||
</template>
|
||||
<BasicForm @register="registerForm">
|
||||
<template #viewConfigHelp>
|
||||
<div class="mx-2 mb-3">
|
||||
<Alert
|
||||
:message="`例如视图参数设置为：{count:2,titleShow:'yes'} 则在视图文件中的获取方法是：\${viewConfig_count}、\${viewConfig_titleShow}。
|
||||
设置栏目的管理地址：若设置【adminUrl:false】表示无管理地址，在内容发布栏目列表中不显示该栏目；
|
||||
设置【adminUrl:'/cms/guestbook'】表示有管理地址，在内容发布栏目列表中点击该栏目链接到该地址。`"
|
||||
type="info"
|
||||
banner
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</BasicForm>
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsCmsCategoryForm">
|
||||
import { ref, unref, computed } from 'vue';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { router } from '@jeesite/core/router';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { BasicForm, FormSchema, useForm } from '@jeesite/core/components/Form';
|
||||
import { BasicDrawer, useDrawerInner } from '@jeesite/core/components/Drawer';
|
||||
import { Category, categorySave, categoryForm, categoryTreeData } from '@jeesite/cms/api/cms/category';
|
||||
import { Alert } from 'ant-design-vue';
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const { t } = useI18n('cms.category');
|
||||
const { showMessage } = useMessage();
|
||||
const { meta } = unref(router.currentRoute);
|
||||
const record = ref<Category>({} as Category);
|
||||
|
||||
const getTitle = computed(() => ({
|
||||
icon: meta.icon || 'i-ant-design:book-outlined',
|
||||
value: record.value.isNewRecord ? t('新增栏目') : t('编辑栏目'),
|
||||
}));
|
||||
|
||||
const category_DEFAULT_TEMPLATE = ref('');
|
||||
const article_DEFAULT_TEMPLATE = ref('');
|
||||
const listViewList = ref([]);
|
||||
const contentViewList = ref([]);
|
||||
const siteList = ref([]);
|
||||
|
||||
const inputFormSchemas: FormSchema<Category>[] = [
|
||||
{
|
||||
label: t('基本信息'),
|
||||
field: 'basicInfo',
|
||||
component: 'FormGroup',
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('上级栏目'),
|
||||
field: 'parentCode',
|
||||
fieldLabel: 'parentName',
|
||||
component: 'TreeSelect',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('归属站点'),
|
||||
field: 'site.siteCode',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: siteList,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('栏目编码'),
|
||||
field: 'categoryCode',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 64,
|
||||
},
|
||||
rules: [{ required: true }, { pattern: /^[a-zA-Z0-9_]*$/, message: t('请输入字母数字下划线') }],
|
||||
},
|
||||
{
|
||||
label: t('内容模型'),
|
||||
field: 'moduleType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'cms_module_type',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('栏目名称'),
|
||||
field: 'categoryName',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 100,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('排序号'),
|
||||
field: 'treeSort',
|
||||
helpMessage: '升序',
|
||||
component: 'InputNumber',
|
||||
defaultValue: '30',
|
||||
componentProps: {
|
||||
maxlength: 8,
|
||||
},
|
||||
rules: [{ required: true }, { pattern: /^\d+$/, message: t('请输入一个正整数') }],
|
||||
},
|
||||
{
|
||||
label: t('栏目图片'),
|
||||
field: 'dataMap',
|
||||
component: 'Upload',
|
||||
componentProps: {
|
||||
loadTime: computed(() => record.value.__t),
|
||||
bizKey: computed(() => record.value.id),
|
||||
bizType: 'category_image',
|
||||
uploadType: 'image',
|
||||
maxNumber: 1,
|
||||
// imageMaxWidth: 1024,
|
||||
// imageMaxHeight: 768,
|
||||
// imageThumbName: '150x150.jpg',
|
||||
showPreviewNumber: false,
|
||||
showPreviewList: true,
|
||||
emptyHidePreview: true,
|
||||
onChange: (dataMap, fileList) => {
|
||||
fileList.forEach((e) => {
|
||||
record.value.image = e.fileUrl;
|
||||
});
|
||||
},
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('外部链接'),
|
||||
field: 'href',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '栏目超链接地址，优先级“高”',
|
||||
maxlength: 255,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('链接目标'),
|
||||
field: 'target',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '栏目超链接打开的目标窗口，新窗口打开，请填写：“_blank”',
|
||||
maxlength: 20,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('栏目描述'),
|
||||
field: 'description',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '填写描述，有助于搜搜引擎优化',
|
||||
maxlength: 500,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('关键字'),
|
||||
field: 'keywords',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '填写描述，有助于搜搜引擎优化',
|
||||
maxlength: 500,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('栏目配置'),
|
||||
field: 'detailInfo',
|
||||
component: 'FormGroup',
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('在导航中显示'),
|
||||
helpMessage: '是否在导航中显示该栏目',
|
||||
field: 'inMenu',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
dictType: 'sys_show_hide',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('是否允许评论'),
|
||||
field: 'isCanComment',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
dictType: 'sys_yes_no',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('在分类页显示'),
|
||||
helpMessage: '是否在分类页中显示该栏目的文章列表',
|
||||
field: 'inList',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
dictType: 'sys_show_hide',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('是否需要审核'),
|
||||
helpMessage: '如果需要审核，则启动 BPM 申请流程（专业版）',
|
||||
field: 'isNeedAudit',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
dictType: 'sys_yes_no',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('内容展现模式'),
|
||||
helpMessage: '默认展现方式,首栏目内容列表,栏目第一条内容',
|
||||
field: 'showModes',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
dictType: 'cms_show_modes',
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('自定义列表视图'),
|
||||
helpMessage: () => `自定义列表视图名称必须以 ${category_DEFAULT_TEMPLATE.value} 开始`,
|
||||
field: 'customListView',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: listViewList,
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('自定义内容视图'),
|
||||
helpMessage: () => `自定义内容视图名称必须以 ${article_DEFAULT_TEMPLATE.value} 开始`,
|
||||
field: 'customContentView',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: contentViewList,
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('视图参数配置'),
|
||||
helpMessage:
|
||||
"视图参数例如: {count:2, title_show:'yes'} 则在视图文件中的获取方法是：${viewConfig_count}、${viewConfig_titleShow}",
|
||||
field: 'viewConfig',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder:
|
||||
"视图参数例如: {count:2, title_show:'yes'} 则在视图文件中的获取方法是：${viewConfig_count}、${viewConfig_titleShow}",
|
||||
maxlength: 1000,
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
field: 'viewConfigHelp',
|
||||
component: 'Text',
|
||||
colProps: { md: 24, lg: 24 },
|
||||
slot: 'viewConfigHelp',
|
||||
},
|
||||
{
|
||||
label: t('其它信息'),
|
||||
field: 'otherInfo',
|
||||
component: 'FormGroup',
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('备注信息'),
|
||||
field: 'remarks',
|
||||
component: 'InputTextArea',
|
||||
componentProps: {
|
||||
maxlength: 500,
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
];
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm<Category>({
|
||||
labelWidth: 140,
|
||||
schemas: inputFormSchemas,
|
||||
baseColProps: { md: 24, lg: 12 },
|
||||
});
|
||||
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
setDrawerProps({ loading: true });
|
||||
await resetFields();
|
||||
const res = await categoryForm(data);
|
||||
record.value = (res.category || {}) as Category;
|
||||
record.value.__t = new Date().getTime();
|
||||
if (data.parentCode && data.parentName) {
|
||||
record.value.parentCode = data.parentCode;
|
||||
record.value.parentName = data.parentName;
|
||||
}
|
||||
category_DEFAULT_TEMPLATE.value = res.category_DEFAULT_TEMPLATE;
|
||||
article_DEFAULT_TEMPLATE.value = res.article_DEFAULT_TEMPLATE;
|
||||
listViewList.value = (res.listViewList || []).map((item) => {
|
||||
return { label: item.dictLabel, value: item.dictValue };
|
||||
});
|
||||
contentViewList.value = (res.contentViewList || []).map((item) => {
|
||||
return { label: item.dictLabel, value: item.dictValue };
|
||||
});
|
||||
siteList.value = (res.siteList || []).map((item) => {
|
||||
return { label: item.siteName, value: item.siteCode };
|
||||
});
|
||||
await setFieldsValue(record.value);
|
||||
await updateSchema([
|
||||
{
|
||||
field: 'parentCode',
|
||||
componentProps: {
|
||||
api: categoryTreeData,
|
||||
params: {
|
||||
excludeCode: record.value.id,
|
||||
isShowRawName: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'categoryCode',
|
||||
componentProps: {
|
||||
disabled: !record.value.isNewRecord,
|
||||
},
|
||||
},
|
||||
]);
|
||||
setDrawerProps({ loading: false });
|
||||
});
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const data = await validate();
|
||||
setDrawerProps({ confirmLoading: true });
|
||||
const params: any = {
|
||||
isNewRecord: record.value.isNewRecord,
|
||||
categoryCode: record.value.categoryCode || data.categoryCode,
|
||||
};
|
||||
data.oldParentCode = record.value.parentCode;
|
||||
data.image = record.value.image;
|
||||
// console.log('submit', params, data, record);
|
||||
const res = await categorySave(params, data);
|
||||
showMessage(res.message);
|
||||
setTimeout(closeDrawer);
|
||||
emit('success', data);
|
||||
} catch (error: any) {
|
||||
if (error && error.errorFields) {
|
||||
showMessage(error.message || t('common.validateError'));
|
||||
}
|
||||
console.log('error', error);
|
||||
} finally {
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
79
web-vue/packages/cms/views/cms/category/index.vue
Normal file
79
web-vue/packages/cms/views/cms/category/index.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<PageWrapper :sidebarWidth="200">
|
||||
<template #sidebar>
|
||||
<BasicTree
|
||||
:title="t('栏目')"
|
||||
:search="true"
|
||||
:toolbar="true"
|
||||
:showIcon="true"
|
||||
:api="categoryTreeData"
|
||||
:params="apiParams"
|
||||
:immediate="immediate"
|
||||
:defaultExpandLevel="2"
|
||||
v-model:selectedKeys="treeCodes"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<Dropdown class="cursor-pointer" :trigger="['hover']" :dropMenuList="dropMenuList">
|
||||
{{ siteName }} <DownOutlined />
|
||||
</Dropdown>
|
||||
</template>
|
||||
</BasicTree>
|
||||
</template>
|
||||
<ListView v-model:treeCodes="treeCodes" :siteCode="siteCode" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsCmsCategoryIndex">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { PageWrapper } from '@jeesite/core/components/Page';
|
||||
import { BasicTree } from '@jeesite/core/components/Tree';
|
||||
import { Site, siteSelect } from '@jeesite/cms/api/cms/site';
|
||||
import { categoryIndex, categoryTreeData } from '@jeesite/cms/api/cms/category';
|
||||
import ListView from './list.vue';
|
||||
import { Dropdown, DropMenu } from '@jeesite/core/components/Dropdown';
|
||||
import { DownOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const { t } = useI18n('cms.category');
|
||||
const treeCodes = ref<string[]>([]);
|
||||
const apiParams = ref<Recordable>({ siteCode: 'main' });
|
||||
const immediate = ref(false);
|
||||
|
||||
const dropMenuList = ref<Array<DropMenu>>([]);
|
||||
const siteCode = ref<string>('main');
|
||||
const siteName = ref<string>(t('JeeSite'));
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await categoryIndex();
|
||||
const currentSite = (res.currentSite || {}) as Site;
|
||||
siteCode.value = currentSite.siteCode || 'main';
|
||||
siteName.value = currentSite.siteName || 'main';
|
||||
apiParams.value.siteCode = currentSite.siteCode;
|
||||
immediate.value = true;
|
||||
await loadSiteCode(res);
|
||||
});
|
||||
|
||||
async function loadSiteCode(res: Recordable) {
|
||||
dropMenuList.value = (res.siteList || []).map((item) => {
|
||||
if (item.value == siteCode.value) {
|
||||
siteName.value = item.name;
|
||||
}
|
||||
return {
|
||||
text: item.siteName,
|
||||
event: item.siteCode,
|
||||
icon: 'i-radix-icons:dot',
|
||||
onClick: () => {
|
||||
siteCode.value = item.siteCode;
|
||||
siteName.value = item.siteName;
|
||||
apiParams.value.siteCode = item.siteCode;
|
||||
siteSelect({ siteCode: siteCode.value });
|
||||
treeCodes.value = [];
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
</script>
|
||||
331
web-vue/packages/cms/views/cms/category/list.vue
Normal file
331
web-vue/packages/cms/views/cms/category/list.vue
Normal file
@@ -0,0 +1,331 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable" @fetch-success="fetchSuccess">
|
||||
<template #tableTitle>
|
||||
<Icon :icon="getTitle.icon" class="m-1 pr-1" />
|
||||
<span> {{ getTitle.value }} </span>
|
||||
</template>
|
||||
<template #toolbar>
|
||||
<a-button @click="expandAll" :title="t('展开一级')">
|
||||
<Icon icon="i-bi:chevron-double-down" /> {{ t('展开') }}
|
||||
</a-button>
|
||||
<a-button @click="collapseAll" :title="t('折叠全部')">
|
||||
<Icon icon="i-bi:chevron-double-up" /> {{ t('折叠') }}
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handleForm({})" v-auth="'cms:category:edit'">
|
||||
<Icon icon="i-fluent:add-12-filled" /> {{ t('新增') }}
|
||||
</a-button>
|
||||
</template>
|
||||
<template #firstColumn="{ record }">
|
||||
<span class="cursor-pointer" @click="expandCollapse(record)"> ( {{ record.categoryCode }} ) </span>
|
||||
<a @click="handleForm({ categoryCode: record.categoryCode })" :title="record.categoryName">
|
||||
{{ record.categoryName }}
|
||||
</a>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<InputForm @register="registerDrawer" @success="handleSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsCmsCategoryList">
|
||||
import { onMounted, ref, unref, watch, nextTick } from 'vue';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { useGlobSetting } from '@jeesite/core/hooks/setting';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { router } from '@jeesite/core/router';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { BasicTable, BasicColumn, useTable } from '@jeesite/core/components/Table';
|
||||
import {
|
||||
Category,
|
||||
categoryList,
|
||||
categoryRebuildIndex,
|
||||
categoryRebuildVectorStore,
|
||||
} from '@jeesite/cms/api/cms/category';
|
||||
import { categoryDelete, categoryListData } from '@jeesite/cms/api/cms/category';
|
||||
import { categoryDisable, categoryEnable } from '@jeesite/cms/api/cms/category';
|
||||
import { useDrawer } from '@jeesite/core/components/Drawer';
|
||||
import { FormProps } from '@jeesite/core/components/Form';
|
||||
import { isEmpty } from '@jeesite/core/utils/is';
|
||||
import InputForm from './form.vue';
|
||||
|
||||
const props = defineProps({
|
||||
treeCodes: Array as PropType<String[]>,
|
||||
siteCode: String,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:treeCodes']);
|
||||
|
||||
const { t } = useI18n('cms.category');
|
||||
const { showMessage } = useMessage();
|
||||
const { ctxPath } = useGlobSetting();
|
||||
const { meta } = unref(router.currentRoute);
|
||||
const record = ref<Category>({} as Category);
|
||||
|
||||
const getTitle = {
|
||||
icon: meta.icon || 'i-ant-design:book-outlined',
|
||||
value: meta.title || t('栏目管理'),
|
||||
};
|
||||
|
||||
const searchForm: FormProps<Category> = {
|
||||
baseColProps: { md: 8, lg: 6 },
|
||||
labelWidth: 90,
|
||||
schemas: [
|
||||
{
|
||||
label: t('栏目编码'),
|
||||
field: 'categoryCode_like',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('栏目名称'),
|
||||
field: 'categoryName',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('状态'),
|
||||
field: 'status',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'sys_search_status',
|
||||
allowClear: true,
|
||||
onChange: handleSuccess,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('内容模型'),
|
||||
field: 'moduleType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'cms_module_type',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('备注信息'),
|
||||
field: 'remarks',
|
||||
component: 'Input',
|
||||
},
|
||||
],
|
||||
resetFunc: async () => {
|
||||
emit('update:treeCodes', []);
|
||||
},
|
||||
};
|
||||
|
||||
const tableColumns: BasicColumn<Category>[] = [
|
||||
{
|
||||
title: t('名称'),
|
||||
dataIndex: 'categoryName',
|
||||
width: 230,
|
||||
align: 'left',
|
||||
slot: 'firstColumn',
|
||||
},
|
||||
{
|
||||
title: t('模型'),
|
||||
dataIndex: 'moduleType',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
dictType: 'cms_module_type',
|
||||
},
|
||||
{
|
||||
title: t('排序'),
|
||||
dataIndex: 'treeSort',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('导航栏目'),
|
||||
dataIndex: 'inMenu',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
dictType: 'sys_show_hide',
|
||||
},
|
||||
{
|
||||
title: t('栏目列表'),
|
||||
dataIndex: 'inList',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
dictType: 'sys_show_hide',
|
||||
},
|
||||
{
|
||||
title: t('展现模式'),
|
||||
dataIndex: 'showModes',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
dictType: 'cms_show_modes',
|
||||
},
|
||||
{
|
||||
title: t('状态'),
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
dictType: 'sys_search_status',
|
||||
},
|
||||
{
|
||||
title: t('备注信息'),
|
||||
dataIndex: 'remarks',
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumn: BasicColumn<Category> = {
|
||||
width: 240,
|
||||
actions: (record: Category) => [
|
||||
{
|
||||
icon: 'i-clarity:note-edit-line',
|
||||
title: t('编辑栏目'),
|
||||
onClick: handleForm.bind(this, { categoryCode: record.categoryCode }),
|
||||
auth: 'cms:category:edit',
|
||||
},
|
||||
{
|
||||
icon: 'i-ant-design:stop-outlined',
|
||||
color: 'error',
|
||||
title: t('停用栏目'),
|
||||
popConfirm: {
|
||||
title: t('是否确认停用栏目'),
|
||||
confirm: handleDisable.bind(this, record),
|
||||
},
|
||||
auth: 'cms:category:edit',
|
||||
ifShow: () => record.status === '0',
|
||||
},
|
||||
{
|
||||
icon: 'i-ant-design:check-circle-outlined',
|
||||
color: 'success',
|
||||
title: t('启用栏目'),
|
||||
popConfirm: {
|
||||
title: t('是否确认启用栏目'),
|
||||
confirm: handleEnable.bind(this, record),
|
||||
},
|
||||
auth: 'cms:category:edit',
|
||||
ifShow: () => record.status === '2',
|
||||
},
|
||||
{
|
||||
icon: 'i-ant-design:delete-outlined',
|
||||
color: 'error',
|
||||
title: t('删除栏目'),
|
||||
popConfirm: {
|
||||
title: t('是否确认删除栏目'),
|
||||
confirm: handleDelete.bind(this, record),
|
||||
},
|
||||
auth: 'cms:category:edit',
|
||||
},
|
||||
{
|
||||
icon: 'i-fluent:add-circle-24-regular',
|
||||
title: t('新增下级栏目'),
|
||||
onClick: handleForm.bind(this, {
|
||||
parentCode: record.id,
|
||||
parentName: record.categoryName,
|
||||
}),
|
||||
auth: 'cms:category:edit',
|
||||
},
|
||||
{
|
||||
icon: 'i-ant-design:aim-outlined',
|
||||
title: t('重建该站点索引'),
|
||||
popConfirm: {
|
||||
title: t('确认重建该站点文章索引吗'),
|
||||
confirm: handleRebuildIndex.bind(this, record),
|
||||
},
|
||||
auth: 'cms:category:rebuildIndex',
|
||||
},
|
||||
{
|
||||
icon: 'i-bx:data',
|
||||
title: t('重建该站点向量数据库'),
|
||||
popConfirm: {
|
||||
title: t('确认重建该站点文章向量数据库吗'),
|
||||
confirm: handleRebuildVectorStore.bind(this, record),
|
||||
},
|
||||
auth: 'cms:category:rebuildVectorStore',
|
||||
},
|
||||
{
|
||||
icon: 'i-mdi:globe',
|
||||
title: t('访问栏目'),
|
||||
onClick: () => window.open(ctxPath + '/f/list-' + record.categoryCode, '_blank'),
|
||||
auth: 'cms:category:edit',
|
||||
ifShow: () => record.status === '0',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const [registerTable, { reload, expandAll, collapseAll, expandCollapse, getForm }] = useTable<Category>({
|
||||
api: categoryListData,
|
||||
beforeFetch: (params) => {
|
||||
params['site.siteCode'] = props.siteCode || 'main';
|
||||
params.categoryCode = !isEmpty(props.treeCodes) ? props.treeCodes[0] : '';
|
||||
return params;
|
||||
},
|
||||
columns: tableColumns,
|
||||
actionColumn: actionColumn,
|
||||
formConfig: searchForm,
|
||||
showTableSetting: true,
|
||||
useSearchForm: true,
|
||||
isTreeTable: true,
|
||||
pagination: false,
|
||||
canResize: true,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await categoryList();
|
||||
record.value = (res.category || {}) as Category;
|
||||
await getForm().setFieldsValue(record.value);
|
||||
});
|
||||
|
||||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||||
|
||||
watch([() => props.treeCodes, () => props.siteCode], async (value, oldValue) => {
|
||||
if (!isEmpty(props.treeCodes) || value[1] != oldValue[1]) {
|
||||
await reload();
|
||||
}
|
||||
});
|
||||
|
||||
function fetchSuccess() {
|
||||
if (!isEmpty(props.treeCodes)) {
|
||||
nextTick(expandAll);
|
||||
}
|
||||
}
|
||||
|
||||
function handleForm(record: Recordable) {
|
||||
openDrawer(true, record);
|
||||
}
|
||||
|
||||
async function handleDisable(record: Recordable) {
|
||||
const params = { categoryCode: record.categoryCode };
|
||||
const res = await categoryDisable(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleEnable(record: Recordable) {
|
||||
const params = { categoryCode: record.categoryCode };
|
||||
const res = await categoryEnable(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleDelete(record: Recordable) {
|
||||
const params = { categoryCode: record.categoryCode };
|
||||
const res = await categoryDelete(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleRebuildIndex(record: Recordable) {
|
||||
const params = { categoryCode: record.categoryCode };
|
||||
const res = await categoryRebuildIndex(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleRebuildVectorStore(record: Recordable) {
|
||||
const params = { categoryCode: record.categoryCode };
|
||||
const res = await categoryRebuildVectorStore(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleSuccess(record: Recordable) {
|
||||
await reload({ record });
|
||||
}
|
||||
</script>
|
||||
290
web-vue/packages/cms/views/cms/chat/index.vue
Normal file
290
web-vue/packages/cms/views/cms/chat/index.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<PageWrapper :sidebarWidth="200" :contentFullHeight="true" :contentMinHeight="400">
|
||||
<template #sidebar>
|
||||
<div class="p-2 pt-1">
|
||||
<a-button type="primary" class="w-full" @click="handleAdd" :disabled="loading">
|
||||
<Icon icon="i-ant-design:plus-outlined" /> {{ t('新建对话') }}
|
||||
</a-button>
|
||||
</div>
|
||||
<ScrollContainer ref="chatListRef" class="jeesite-cms-ai p-2 bg-white rounded-2 h-full">
|
||||
<Menu class="jeesite-cms-ai-menu" v-model:selectedKeys="conversationIds" :disabled="loading">
|
||||
<template v-for="(item, index) in chatList" :key="item.id">
|
||||
<Menu.Item @click="handleSelect(item)">
|
||||
<div class="flex justify-end">
|
||||
<span v-if="item.edit" class="flex-1 mr-2">
|
||||
<a-input
|
||||
v-model:value="item.title"
|
||||
size="small"
|
||||
class="mr-2"
|
||||
@blur="handleEdit(item, false, $event)"
|
||||
:ref="(el) => setEditInputRef(el, item)"
|
||||
/>
|
||||
</span>
|
||||
<span v-else class="flex-1 truncate">{{ item.title }}</span>
|
||||
<span class="actions c-gray">
|
||||
<Icon icon="i-ant-design:edit" class="pt-3" @click="handleEdit(item, true)" />
|
||||
<Popconfirm
|
||||
:title="t('是否确认删除该对话吗？')"
|
||||
@confirm="handleDelete(item, index)"
|
||||
:disabled="loading"
|
||||
>
|
||||
<Icon icon="i-ant-design:delete" class="pt-3" />
|
||||
</Popconfirm>
|
||||
</span>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
</template>
|
||||
</Menu>
|
||||
<div class="h-10"></div>
|
||||
</ScrollContainer>
|
||||
</template>
|
||||
<div class="h-full rounded-2 flex flex-col overflow-hidden">
|
||||
<div v-if="messages.length == 0" class="h-full flex justify-center items-center text-center">
|
||||
<div class="overflow-hidden">
|
||||
<div class="text-xl c-gray-5">
|
||||
{{ t('我是你的 AI 助手，我可以帮你解答一些问题') }}
|
||||
</div>
|
||||
<div class="mt-5 line-height-loose" v-if="userStore.getPageCacheByKey('demoMode')">
|
||||
<div class="font-size-3.7 c-gray-4 p-3">
|
||||
提示：当前对接的是 DeepSeek-R1-8B 小模型，仅作为当前演示使用，AI 回答结果可能不够理想，<br />
|
||||
由于硬件资源有限，当前 AI 模型未接入 Tool、MPC 等工具服务调用，如想体验与业务联动功能，<br />
|
||||
推荐本地部署，对接 AI 模型 [<a href="https://jeesite.com/docs/ai-cms/" target="_blank">部署指南</a>]。
|
||||
此外当前向量库中只含了几篇关于 jeesite 的文章，<br />
|
||||
知识库数据来源，自 JeeSite 内容管理模块，进入菜单：扩展功能 -> 内容管理 -> 内容发布<br />
|
||||
</div>
|
||||
<div class="mt-5 bg-white rounded-2xl text-left px-5 py-3 op-70">
|
||||
<div class="font-size-4 font-bold pb-1 op-90">猜测您想问：</div>
|
||||
<a-button class="mr-3" shape="round" @click="handleQuick">jeesite 简介</a-button>
|
||||
<a-button class="mr-3" shape="round" @click="handleQuick">jeesite 优势</a-button>
|
||||
<a-button class="mr-3" shape="round" @click="handleQuick">jeesite 技术栈</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChatMessage
|
||||
ref="messageRef"
|
||||
v-model:value="messages"
|
||||
:chatStreamApi="cmsChatStream"
|
||||
:conversationId="conversationIds[0]"
|
||||
:inputMessage="inputMessageRef?.value"
|
||||
v-model:loading="loading"
|
||||
/>
|
||||
<div class="pl-14 pr-16 w-full flex justify-end mt-3">
|
||||
<div class="flex-1 rounded-2 p-3 pb-1 bg-white text-[15px] leading-7">
|
||||
<textarea
|
||||
ref="inputMessageRef"
|
||||
class="outline-none no-scrollbar resize-none w-full h-full border-none bg-transparent"
|
||||
rows="1"
|
||||
:placeholder="t('你有什么想知道的，快来问问我，Shift+Enter 换行，Enter 发送。')"
|
||||
@input="handleInput"
|
||||
@keypress="handleEnter"
|
||||
></textarea>
|
||||
</div>
|
||||
<a-button
|
||||
style="width: 110px; height: 100%; margin-left: 10px"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleSend"
|
||||
>
|
||||
<Icon icon="i-fa:send" /> {{ t('发送') }}
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="pt-2 pr-8 c-gray-4 text-xs text-center">
|
||||
{{ t('服务生成的所有内容均由人工智能模型生成，准确和完整性无法保证，不代表我们的态度或观点。') }}
|
||||
</div>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsCmsChatIndex">
|
||||
import { nextTick, onMounted, ref } from 'vue';
|
||||
import { Menu, Popconfirm } from 'ant-design-vue';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { useUserStore } from '@jeesite/core/store/modules/user';
|
||||
import { PageWrapper } from '@jeesite/core/components/Page';
|
||||
import { ScrollContainer } from '@jeesite/core/components/Container';
|
||||
import { cmsChatDelete, cmsChatList, cmsChatMessage, cmsChatSave, cmsChatStream } from '@jeesite/cms/api/cms/chat';
|
||||
import { ChatMessage } from '@jeesite/cms';
|
||||
|
||||
const { t } = useI18n('cms.chat');
|
||||
const { showMessage } = useMessage();
|
||||
const conversationIds = ref<string[]>([]);
|
||||
const conversationTitle = ref<string>('');
|
||||
const userStore = useUserStore();
|
||||
|
||||
const loading = ref(false);
|
||||
const chatListRef = ref<ComponentRef>();
|
||||
const chatList = ref<Recordable[]>([]);
|
||||
const messageRef = ref<InstanceType<typeof ChatMessage>>();
|
||||
const inputMessageRef = ref<HTMLTextAreaElement>();
|
||||
const messages = ref<Recordable[]>([]);
|
||||
const editInputRefs = ref<Recordable>({});
|
||||
|
||||
onMounted(async () => {
|
||||
chatList.value = await cmsChatList();
|
||||
});
|
||||
|
||||
async function handleAdd() {
|
||||
chatListRef.value?.scrollTo(0);
|
||||
if (chatList.value.length > 0) {
|
||||
await handleSelect(chatList.value[0]);
|
||||
if (messages.value.length == 0) {
|
||||
showMessage(t('当前已是新对话'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
const res = await cmsChatSave();
|
||||
chatList.value.unshift(res);
|
||||
await handleSelect(chatList.value[0]);
|
||||
}
|
||||
|
||||
async function handleSelect(item: Recordable) {
|
||||
conversationIds.value = [item.id];
|
||||
conversationTitle.value = item.title;
|
||||
messages.value = await cmsChatMessage({ id: item.id });
|
||||
messageRef.value?.scrollBottom();
|
||||
}
|
||||
|
||||
function setEditInputRef(el: any, item: Recordable) {
|
||||
if (el) {
|
||||
editInputRefs.value[item.id] = el;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleEdit(item: Recordable, edit: boolean, event?: Event) {
|
||||
if (loading.value) return;
|
||||
item.edit = edit;
|
||||
if (edit) {
|
||||
await nextTick(() => {
|
||||
const inputRef = editInputRefs.value[item.id];
|
||||
if (inputRef && inputRef.focus) {
|
||||
inputRef.focus();
|
||||
}
|
||||
});
|
||||
} else if (item.title !== item.oldTitle) {
|
||||
delete item.oldTitle;
|
||||
const res = await cmsChatSave(item);
|
||||
showMessage(res.message);
|
||||
}
|
||||
item.oldTitle = item.title;
|
||||
}
|
||||
|
||||
async function handleDelete(item: Recordable, idx: number) {
|
||||
const res = await cmsChatDelete({ id: item.id });
|
||||
chatList.value.splice(idx, 1);
|
||||
showMessage(res.message);
|
||||
// if (idx == 0 && chatList.value[idx]) {
|
||||
// await handleSelect(chatList.value[idx]);
|
||||
// } else if (chatList.value[idx - 1]) {
|
||||
// await handleSelect(chatList.value[idx - 1]);
|
||||
// }
|
||||
conversationIds.value = [''];
|
||||
conversationTitle.value = '';
|
||||
messages.value = [];
|
||||
}
|
||||
|
||||
function handleInput() {
|
||||
if (inputMessageRef.value) {
|
||||
inputMessageRef.value.style.height = 'auto';
|
||||
const height = inputMessageRef.value.scrollHeight;
|
||||
inputMessageRef.value.style.height = (height > 300 ? 300 : height) + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
function handleEnter(event: KeyboardEvent) {
|
||||
if (event.key === 'Enter' && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
if (!loading.value) {
|
||||
handleSend();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSend() {
|
||||
if (inputMessageRef.value && inputMessageRef.value.value) {
|
||||
if (!conversationIds.value[0]) {
|
||||
await handleAdd();
|
||||
}
|
||||
loading.value = true;
|
||||
const params = {
|
||||
id: conversationIds.value[0],
|
||||
message: inputMessageRef.value.value,
|
||||
};
|
||||
inputMessageRef.value.value = '';
|
||||
inputMessageRef.value.style.height = 'auto';
|
||||
try {
|
||||
chatList.value
|
||||
.filter((item) => item.id == params.id)
|
||||
.forEach((item) => {
|
||||
if (item.title.startsWith('新对话')) {
|
||||
item.title = params.message.substring(0, 30);
|
||||
cmsChatSave(item);
|
||||
}
|
||||
});
|
||||
await messageRef.value?.sendMessage(params);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
showMessage(t('请填写你的问题'));
|
||||
}
|
||||
}
|
||||
|
||||
function handleQuick(e: MouseEvent) {
|
||||
const target = e.target as HTMLElement;
|
||||
if (inputMessageRef.value) {
|
||||
inputMessageRef.value.value = target.textContent;
|
||||
if (!loading.value) {
|
||||
handleSend();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.jeesite-cms-ai {
|
||||
&-menu.ant-menu.ant-menu-light {
|
||||
border-right: 0 !important;
|
||||
padding: 2px !important;
|
||||
|
||||
.ant-menu-item {
|
||||
padding-right: 8px;
|
||||
color: #333 !important;
|
||||
|
||||
&-selected {
|
||||
background-color: #f0f5ff !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-selected,
|
||||
&-active {
|
||||
.actions {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.jeesite-cms-ai {
|
||||
.ant-menu-light .ant-menu-item {
|
||||
color: #ddd !important;
|
||||
|
||||
&-selected {
|
||||
background-color: #333 !important;
|
||||
color: #ddd !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
99
web-vue/packages/cms/views/cms/index.vue
Normal file
99
web-vue/packages/cms/views/cms/index.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<PageWrapper :sidebarWidth="200">
|
||||
<template #sidebar>
|
||||
<BasicTree
|
||||
:title="t('栏目')"
|
||||
:search="true"
|
||||
:toolbar="true"
|
||||
:showIcon="true"
|
||||
:api="categoryTreeData"
|
||||
:params="apiParams"
|
||||
:immediate="immediate"
|
||||
:defaultExpandLevel="2"
|
||||
:selectedKeys="treeCodes"
|
||||
@click="handleSelectedKeys"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<Dropdown class="cursor-pointer" :trigger="['hover']" :dropMenuList="dropMenuList">
|
||||
{{ siteName }} <DownOutlined />
|
||||
</Dropdown>
|
||||
</template>
|
||||
</BasicTree>
|
||||
</template>
|
||||
<ArticleList
|
||||
v-if="!treeData.module || treeData.module === 'article'"
|
||||
v-model:treeCodes="treeCodes"
|
||||
:siteCode="siteCode"
|
||||
/>
|
||||
<div class="p-4" v-else>{{ t('内容') }} {{ treeData.module }} {{ t('模型暂未实现') }}</div>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsCmsIndex">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { PageWrapper } from '@jeesite/core/components/Page';
|
||||
import { BasicTree } from '@jeesite/core/components/Tree';
|
||||
import { Site, siteSelect } from '@jeesite/cms/api/cms/site';
|
||||
import { Category, categoryIndex, categoryTreeData } from '@jeesite/cms/api/cms/category';
|
||||
import { Dropdown, DropMenu } from '@jeesite/core/components/Dropdown';
|
||||
import { DownOutlined } from '@ant-design/icons-vue';
|
||||
import { useGo } from '@jeesite/core/hooks/web/usePage';
|
||||
|
||||
import ArticleList from './article/list.vue';
|
||||
|
||||
const { t } = useI18n('cms.category');
|
||||
const treeData = ref<Category>({} as Category);
|
||||
const treeCodes = ref<string[]>([]);
|
||||
const apiParams = ref<Recordable>({ siteCode: 'main' });
|
||||
const immediate = ref(false);
|
||||
|
||||
const dropMenuList = ref<Array<DropMenu>>([]);
|
||||
const siteCode = ref<string>('main');
|
||||
const siteName = ref<string>(t('JeeSite'));
|
||||
|
||||
const go = useGo();
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await categoryIndex();
|
||||
const currentSite = (res.currentSite || {}) as Site;
|
||||
siteCode.value = currentSite.siteCode || 'main';
|
||||
siteName.value = currentSite.siteName || 'main';
|
||||
apiParams.value.siteCode = currentSite.siteCode;
|
||||
immediate.value = true;
|
||||
await loadSiteCode(res);
|
||||
});
|
||||
|
||||
async function loadSiteCode(res: Recordable) {
|
||||
dropMenuList.value = (res.siteList || []).map((item) => {
|
||||
if (item.value == siteCode.value) {
|
||||
siteName.value = item.name;
|
||||
}
|
||||
return {
|
||||
text: item.siteName,
|
||||
event: item.siteCode,
|
||||
icon: 'i-radix-icons:dot',
|
||||
onClick: () => {
|
||||
siteCode.value = item.siteCode;
|
||||
siteName.value = item.siteName;
|
||||
apiParams.value.siteCode = item.siteCode;
|
||||
siteSelect({ siteCode: siteCode.value });
|
||||
treeCodes.value = [];
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function handleSelectedKeys(_e: any, tree: any) {
|
||||
// 展现方式：1 自动识别；2 栏目内容列表；3 栏目第一条内容
|
||||
// if (tree.module === 'article' && tree.showModes == '3') {
|
||||
// go('/cms/article/form?id=' + tree.id);
|
||||
// }
|
||||
treeData.value = tree.dataRef;
|
||||
treeCodes.value = [tree.id];
|
||||
}
|
||||
</script>
|
||||
249
web-vue/packages/cms/views/cms/site/form.vue
Normal file
249
web-vue/packages/cms/views/cms/site/form.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<BasicDrawer
|
||||
v-bind="$attrs"
|
||||
:showFooter="true"
|
||||
:okAuth="'cms:site:edit'"
|
||||
@register="registerDrawer"
|
||||
@ok="handleSubmit"
|
||||
width="70%"
|
||||
>
|
||||
<template #title>
|
||||
<Icon :icon="getTitle.icon" class="m-1 pr-1" />
|
||||
<span> {{ getTitle.value }} </span>
|
||||
</template>
|
||||
<BasicForm @register="registerForm">
|
||||
<template #copyright="{ model, field }">
|
||||
<WangEditor v-model:value="model[field]" :bizKey="record.id" :bizType="'site_' + field" :height="300" />
|
||||
</template>
|
||||
</BasicForm>
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsCmsSiteForm">
|
||||
import { ref, unref, computed, h } from 'vue';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { router } from '@jeesite/core/router';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { BasicForm, FormSchema, useForm } from '@jeesite/core/components/Form';
|
||||
import { BasicDrawer, useDrawerInner } from '@jeesite/core/components/Drawer';
|
||||
import { Site, siteSave, siteForm } from '@jeesite/cms/api/cms/site';
|
||||
import { WangEditor } from '@jeesite/core/components/WangEditor';
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const { t } = useI18n('cms.site');
|
||||
const { showMessage } = useMessage();
|
||||
const { meta } = unref(router.currentRoute);
|
||||
const record = ref<Site>({} as Site);
|
||||
const indexViewList = ref([]);
|
||||
|
||||
const getTitle = computed(() => ({
|
||||
icon: meta.icon || 'i-ant-design:book-outlined',
|
||||
value: record.value.isNewRecord ? t('新增站点') : t('编辑站点'),
|
||||
}));
|
||||
|
||||
const inputFormSchemas: FormSchema<Site>[] = [
|
||||
{
|
||||
label: t('基本信息'),
|
||||
field: 'basicInfo',
|
||||
component: 'FormGroup',
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('站点名称'),
|
||||
field: 'siteName',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 100,
|
||||
placeholder: '默认站点',
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: t('站点编码'),
|
||||
field: 'siteCode',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 64,
|
||||
},
|
||||
rules: [{ required: true }, { pattern: /^[a-zA-Z0-9_]*$/, message: t('请输入字母数字下划线') }],
|
||||
},
|
||||
{
|
||||
label: t('站点标题'),
|
||||
field: 'title',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 100,
|
||||
placeholder: '演示站点',
|
||||
},
|
||||
required: true,
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('站点域名'),
|
||||
field: 'domainName',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 500,
|
||||
placeholder: 'https://jeesite.com',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('站点排序'),
|
||||
field: 'siteSort',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 8,
|
||||
},
|
||||
defaultValue: 10,
|
||||
rules: [{ required: true }, { pattern: /^\d+$/, message: t('请输入一个正整数') }],
|
||||
},
|
||||
{
|
||||
label: t('站点Logo'),
|
||||
field: 'dataMap',
|
||||
component: 'Upload',
|
||||
componentProps: {
|
||||
loadTime: computed(() => record.value.__t),
|
||||
bizKey: computed(() => record.value.id),
|
||||
bizType: 'site_logo',
|
||||
uploadType: 'image',
|
||||
maxNumber: 1,
|
||||
// imageMaxWidth: 1024,
|
||||
// imageMaxHeight: 768,
|
||||
// imageThumbName: '150x150.jpg',
|
||||
showPreviewNumber: false,
|
||||
showPreviewList: true,
|
||||
emptyHidePreview: true,
|
||||
onChange: (dataMap, fileList) => {
|
||||
fileList.forEach((e) => {
|
||||
record.value.logo = e.fileUrl;
|
||||
});
|
||||
},
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('详细信息'),
|
||||
field: 'detailInfo',
|
||||
component: 'FormGroup',
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('描述'),
|
||||
field: 'description',
|
||||
component: 'InputTextArea',
|
||||
componentProps: {
|
||||
maxlength: 500,
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('关键字'),
|
||||
field: 'keywords',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxlength: 500,
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('主题风格'),
|
||||
field: 'theme',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'cms_theme',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('首页视图'),
|
||||
field: 'customIndexView',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: indexViewList,
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('版权信息'),
|
||||
field: 'copyright',
|
||||
component: 'InputTextArea',
|
||||
componentProps: {
|
||||
maxlength: 1000,
|
||||
},
|
||||
slot: 'copyright',
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('其它信息'),
|
||||
field: 'otherInfo',
|
||||
component: 'FormGroup',
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
{
|
||||
label: t('备注信息'),
|
||||
field: 'remarks',
|
||||
component: 'InputTextArea',
|
||||
componentProps: {
|
||||
maxlength: 500,
|
||||
},
|
||||
colProps: { md: 24, lg: 24 },
|
||||
},
|
||||
];
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm<Site>({
|
||||
labelWidth: 120,
|
||||
schemas: inputFormSchemas,
|
||||
baseColProps: { md: 24, lg: 12 },
|
||||
});
|
||||
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
setDrawerProps({ loading: true });
|
||||
await resetFields();
|
||||
const res = await siteForm(data);
|
||||
record.value = (res.site || {}) as Site;
|
||||
record.value.__t = new Date().getTime();
|
||||
indexViewList.value = (res.indexViewList || []).map((item) => {
|
||||
return { label: item.dictLabel, value: item.dictValue };
|
||||
});
|
||||
await setFieldsValue(record.value);
|
||||
await updateSchema([
|
||||
{
|
||||
field: 'siteCode',
|
||||
componentProps: {
|
||||
disabled: !record.value.isNewRecord,
|
||||
},
|
||||
},
|
||||
]);
|
||||
setDrawerProps({ loading: false });
|
||||
});
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const data = await validate();
|
||||
setDrawerProps({ confirmLoading: true });
|
||||
const params: any = {
|
||||
isNewRecord: record.value.isNewRecord,
|
||||
siteCode: record.value.siteCode || data.siteCode,
|
||||
};
|
||||
data.logo = record.value.logo;
|
||||
// console.log('submit', params, data, record);
|
||||
const res = await siteSave(params, data);
|
||||
showMessage(res.message);
|
||||
setTimeout(closeDrawer);
|
||||
emit('success', data);
|
||||
} catch (error: any) {
|
||||
if (error && error.errorFields) {
|
||||
showMessage(error.message || t('common.validateError'));
|
||||
}
|
||||
console.log('error', error);
|
||||
} finally {
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
292
web-vue/packages/cms/views/cms/site/list.vue
Normal file
292
web-vue/packages/cms/views/cms/site/list.vue
Normal file
@@ -0,0 +1,292 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now https://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author ThinkGem
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #tableTitle>
|
||||
<Icon :icon="getTitle.icon" class="m-1 pr-1" />
|
||||
<span> {{ getTitle.value }} </span>
|
||||
</template>
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleForm({})" v-auth="'cms:site:edit'">
|
||||
<Icon icon="i-fluent:add-12-filled" /> {{ t('新增') }}
|
||||
</a-button>
|
||||
</template>
|
||||
<template #firstColumn="{ record }">
|
||||
<a @click="handleForm({ siteCode: record.siteCode })" :title="record.siteName">
|
||||
{{ record.siteName }}
|
||||
</a>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<InputForm @register="registerDrawer" @success="handleSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsCmsSiteList">
|
||||
import { onMounted, ref, unref } from 'vue';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { useGlobSetting } from '@jeesite/core/hooks/setting';
|
||||
import { router } from '@jeesite/core/router';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { BasicTable, BasicColumn, useTable } from '@jeesite/core/components/Table';
|
||||
import { Site, siteList, siteRebuildIndex, siteRebuildVectorStore } from '@jeesite/cms/api/cms/site';
|
||||
import { siteDelete, siteListData } from '@jeesite/cms/api/cms/site';
|
||||
import { siteDisable, siteEnable } from '@jeesite/cms/api/cms/site';
|
||||
import { useDrawer } from '@jeesite/core/components/Drawer';
|
||||
import { FormProps } from '@jeesite/core/components/Form';
|
||||
import InputForm from './form.vue';
|
||||
|
||||
const { t } = useI18n('cms.site');
|
||||
const { showMessage } = useMessage();
|
||||
const { ctxPath } = useGlobSetting();
|
||||
const { meta } = unref(router.currentRoute);
|
||||
const record = ref<Site>({} as Site);
|
||||
|
||||
const getTitle = {
|
||||
icon: meta.icon || 'i-ant-design:book-outlined',
|
||||
value: meta.title || t('站点管理'),
|
||||
};
|
||||
|
||||
const searchForm: FormProps<Site> = {
|
||||
baseColProps: { md: 8, lg: 6 },
|
||||
labelWidth: 90,
|
||||
schemas: [
|
||||
{
|
||||
label: t('站点名称'),
|
||||
field: 'siteName',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('站点标题'),
|
||||
field: 'title',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('状态'),
|
||||
field: 'status',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'sys_search_status',
|
||||
allowClear: true,
|
||||
onChange: handleSuccess,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('站点域名'),
|
||||
field: 'domainName',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('备注信息'),
|
||||
field: 'remarks',
|
||||
component: 'Input',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const tableColumns: BasicColumn<Site>[] = [
|
||||
{
|
||||
title: t('站点名称'),
|
||||
dataIndex: 'siteName',
|
||||
key: 'a.site_name',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
slot: 'firstColumn',
|
||||
},
|
||||
{
|
||||
title: t('站点标题'),
|
||||
dataIndex: 'title',
|
||||
key: 'a.title',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('站点域名'),
|
||||
dataIndex: 'domainName',
|
||||
key: 'a.domain_name',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('站点排序'),
|
||||
dataIndex: 'siteSort',
|
||||
key: 'a.site_sort',
|
||||
sorter: true,
|
||||
width: 80,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('描述'),
|
||||
dataIndex: 'description',
|
||||
key: 'a.description',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('主题风格'),
|
||||
dataIndex: 'theme',
|
||||
key: 'a.theme',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'center',
|
||||
dictType: 'cms_theme',
|
||||
},
|
||||
{
|
||||
title: t('状态'),
|
||||
dataIndex: 'status',
|
||||
key: 'a.status',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'center',
|
||||
dictType: 'sys_search_status',
|
||||
},
|
||||
{
|
||||
title: t('创建时间'),
|
||||
dataIndex: 'createDate',
|
||||
key: 'a.create_date',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumn: BasicColumn<Site> = {
|
||||
width: 205,
|
||||
actions: (record: Site) => [
|
||||
{
|
||||
icon: 'i-clarity:note-edit-line',
|
||||
title: t('编辑站点'),
|
||||
onClick: handleForm.bind(this, { siteCode: record.siteCode }),
|
||||
auth: 'cms:site:edit',
|
||||
},
|
||||
{
|
||||
icon: 'i-ant-design:stop-outlined',
|
||||
color: 'error',
|
||||
title: t('停用站点'),
|
||||
popConfirm: {
|
||||
title: t('是否确认停用站点'),
|
||||
confirm: handleDisable.bind(this, record),
|
||||
},
|
||||
auth: 'cms:site:edit',
|
||||
ifShow: () => record.status === '0',
|
||||
},
|
||||
{
|
||||
icon: 'i-ant-design:check-circle-outlined',
|
||||
color: 'success',
|
||||
title: t('启用站点'),
|
||||
popConfirm: {
|
||||
title: t('是否确认启用站点'),
|
||||
confirm: handleEnable.bind(this, record),
|
||||
},
|
||||
auth: 'cms:site:edit',
|
||||
ifShow: () => record.status === '2',
|
||||
},
|
||||
{
|
||||
icon: 'i-ant-design:delete-outlined',
|
||||
color: 'error',
|
||||
title: t('删除站点'),
|
||||
popConfirm: {
|
||||
title: t('是否确认删除站点'),
|
||||
confirm: handleDelete.bind(this, record),
|
||||
},
|
||||
auth: 'cms:site:edit',
|
||||
},
|
||||
{
|
||||
icon: 'i-ant-design:aim-outlined',
|
||||
title: t('重建该站点索引'),
|
||||
popConfirm: {
|
||||
title: t('确认重建该站点文章索引吗'),
|
||||
confirm: handleRebuildIndex.bind(this, record),
|
||||
},
|
||||
auth: 'cms:site:rebuildIndex',
|
||||
},
|
||||
{
|
||||
icon: 'i-bx:data',
|
||||
title: t('重建该站点向量数据库'),
|
||||
popConfirm: {
|
||||
title: t('确认重建该站点文章向量数据库吗'),
|
||||
confirm: handleRebuildVectorStore.bind(this, record),
|
||||
},
|
||||
auth: 'cms:site:rebuildVectorStore',
|
||||
},
|
||||
{
|
||||
icon: 'i-mdi:globe',
|
||||
title: t('访问站点'),
|
||||
onClick: () => window.open(ctxPath + '/f/index-' + record.siteCode, '_blank'),
|
||||
auth: 'cms:site:edit',
|
||||
ifShow: () => record.status === '0',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const [registerTable, { reload, getForm }] = useTable<Site>({
|
||||
api: siteListData,
|
||||
beforeFetch: (params) => {
|
||||
return params;
|
||||
},
|
||||
columns: tableColumns,
|
||||
actionColumn: actionColumn,
|
||||
formConfig: searchForm,
|
||||
showTableSetting: true,
|
||||
useSearchForm: true,
|
||||
canResize: true,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await siteList();
|
||||
record.value = (res.site || {}) as Site;
|
||||
await getForm().setFieldsValue(record.value);
|
||||
});
|
||||
|
||||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||||
|
||||
function handleForm(record: Recordable) {
|
||||
openDrawer(true, record);
|
||||
}
|
||||
|
||||
async function handleDisable(record: Recordable) {
|
||||
const params = { siteCode: record.siteCode };
|
||||
const res = await siteDisable(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleEnable(record: Recordable) {
|
||||
const params = { siteCode: record.siteCode };
|
||||
const res = await siteEnable(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleDelete(record: Recordable) {
|
||||
const params = { siteCode: record.siteCode };
|
||||
const res = await siteDelete(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleRebuildIndex(record: Recordable) {
|
||||
const params = { siteCode: record.siteCode };
|
||||
const res = await siteRebuildIndex(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleRebuildVectorStore(record: Recordable) {
|
||||
const params = { siteCode: record.siteCode };
|
||||
const res = await siteRebuildVectorStore(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleSuccess(record: Recordable) {
|
||||
await reload({ record });
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user