b2894lxlx/guofu-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增：导航栏目设计拆分简单和高级展示方式

Browse Source
This commit is contained in:
赵忠林
2024-09-03 01:13:18 +08:00
parent bf43bdbab4
commit aa85c133e3
24 changed files with 1121 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@@ -1,11 +1,11 @@
VITE_APP_NAME=后台管理系统
VITE_SOCKET_URL=wss://server.gxwebsoft.com
#VITE_SERVER_URL=https://server.gxwebsoft.com/api
VITE_SERVER_URL=https://server.gxwebsoft.com/api
VITE_THINK_URL=https://gxtyzx-api.websoft.top/api
#VITE_API_URL=https://modules.gxwebsoft.com/api
VITE_SERVER_URL=http://127.0.0.1:9090/api
#VITE_SERVER_URL=http://127.0.0.1:9090/api
VITE_API_URL=http://127.0.0.1:9001/api
#VITE_THINK_URL=http://127.0.0.1:9099/api
#/booking/bookingItem

6
src/api/cms/design/model/index.ts
View File

@@ -42,7 +42,13 @@ export interface Design {
backgroundColor?: string;
// 关联网站导航ID
navigationId?: number;
showLayout?: boolean;
btn?: any[];
showBanner?: boolean;
buyUrl?: string;
demoUrl?: string;
account?: string;
docUrl?: string;
}
/**

8
src/layout/index.vue
View File

@@ -50,10 +50,11 @@
<!-- logo 图标 -->
<template #logo>
<AImage
v-if="!company?.shortName"
v-if="logoPath"
:preview="false"
:style="{ width: '100px', height: '30px' }"
:src="logoPath"
@click="openUrl(`/system/profile`)"
alt="logo"
/>
</template>
@@ -117,6 +118,7 @@
setHomeComponents
} from '@/utils/page-tab-util';
import type { TabCtxMenuOption } from 'ele-admin-pro/es/ele-pro-layout/types';
import { openUrl } from '@/utils/common';
const { push } = useRouter();
const { t, locale } = useI18n();
@@ -126,7 +128,9 @@
// 租户信息
const { company } = storeToRefs(tenantStore);
// 网站名称
const projectName = company.value?.shortName;
const projectName = !company.value?.companyLogo
? company.value?.shortName
: '';
// 网站LOGO
const logoPath =
company.value?.companyLogo || 'https://www.gxwebsoft.com/ws-logo.svg';

4
src/utils/domain.ts
View File

@@ -118,6 +118,10 @@ export function getSiteDomain(): string {
}
});
}
// 开发环境调试域名
if (localStorage.getItem('DevDomain')) {
return `${localStorage.getItem('DevDomain')}`;
}
return `${localStorage.getItem('Domain')}`;
}

109
src/views/cms/article/components/articleEdit.vue
View File

@@ -21,7 +21,7 @@
>
<a-tabs type="card" v-model:active-key="active" @change="onChange">
<a-tab-pane tab="基本信息" key="base">
<a-form-item label="文章标题" name="categoryId">
<a-form-item label="选择栏目" name="categoryId">
<a-tree-select
allow-clear
:tree-data="navigationList"
@@ -42,31 +42,6 @@
v-model:value="form.title"
/>
</a-form-item>
<!-- <a-form-item label="单位名称" name="unitName">-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- style="width: 558px"-->
<!-- placeholder="单位名称，如(个)"-->
<!-- v-model:value="form.unitName"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item label="文章价格" name="price">-->
<!-- <a-input-number-->
<!-- :placeholder="`文章价格`"-->
<!-- style="width: 240px"-->
<!-- v-model:value="form.price"-->
<!-- />-->
<!-- <div class="ele-text-placeholder">文章的实际购买金额，最低0.01</div>-->
<!-- </a-form-item>-->
<!-- <a-form-item label="市场价" name="salePrice">-->
<!-- <a-input-number-->
<!-- :placeholder="`市场价`"-->
<!-- style="width: 240px"-->
<!-- v-model:value="form.salePrice"-->
<!-- />-->
<!-- <div class="ele-text-placeholder">划线价仅用于文章页展示</div>-->
<!-- </a-form-item>-->
<a-form-item label="文章图片" name="image">
<SelectFile
:placeholder="`请选择图片`"
@@ -75,9 +50,6 @@
@done="chooseImage"
@del="onDeleteItem"
/>
<!-- <div class="ele-text-placeholder"-->
<!-- >支持上传视频（mp4格式），视频时长不超过60秒，视频大小不超过200M。</div-->
<!-- >-->
</a-form-item>
<a-form-item label="上传附件" name="files">
<SelectFile
@@ -161,7 +133,6 @@
import TinymceEditor from '@/components/TinymceEditor/index.vue';
import { uploadFile, uploadOss } from "@/api/system/file";
import { SpecValue } from "@/api/shop/specValue/model";
import { Spec } from "@/api/shop/spec/model";
import { ArticleCategory } from "@/api/cms/category/model";
import { listArticleCategory } from "@/api/cms/category";
import { Navigation } from "@/api/cms/navigation/model";
@@ -181,6 +152,7 @@
data?: Article | null;
// 商户ID
merchantId?: number;
categoryId?: number;
// 栏目数据
navigationList?: Navigation[];
}>();
@@ -204,8 +176,6 @@
const spec = ref<SpecValue[]>([]);
const showSpecForm = ref(false);
const name = ref();
const value = ref();
const files = ref<ItemType[]>([]);
const category = ref<string[]>([]);
const takeaway = ref<ArticleCategory[]>([]);
@@ -264,14 +234,14 @@
trigger: 'blur'
}
],
image: [
{
required: true,
message: '请上传图片',
type: 'string',
trigger: 'blur'
}
],
// image: [
// {
// required: true,
// message: '请上传图片',
// type: 'string',
// trigger: 'blur'
// }
// ],
// files: [
// {
// required: true,
@@ -316,27 +286,6 @@
],
});
const onType = (index: number) => {
form.type = index;
};
// /* 搜索 */
// const chooseMerchantId = (item: Merchant) => {
// form.merchantName = item.merchantName;
// form.merchantId = item.merchantId;
// };
//
// const chooseArticleCategory = (item: ArticleCategory,value: any) => {
// form.categoryId = value[1].value;
// form.categoryParent = value[0].label;
// form.categoryChildren = value[1].label;
// }
// const chooseTakeawayCategory = (item: ArticleCategory, value: any) => {
// form.categoryParent = '店铺分类';
// form.categoryChildren = value[0].label;
// form.categoryId = item[0];
// }
const chooseImage = (data: FileRecord) => {
images.value.push({
uid: data.id,
@@ -360,14 +309,6 @@
form.image = '';
};
const onClose = (index) => {
spec.value.splice(index, 1);
};
const openSpecForm = () => {
showSpecForm.value = !showSpecForm.value;
};
const onComments = () => {
if (form.comments == undefined) {
form.comments = htmlToText(content.value)
@@ -375,33 +316,6 @@
}
}
const onSpec = (row: Spec) => {
// form.specName = row.specName;
if(row.specValue){
spec.value = JSON.parse(row?.specValue);
}
}
// 新增规格
const addSpecValue = () => {
if (!name.value || !value.value) {
message.error(`请输入规格和规格值`);
return false;
}
const findIndex = spec.value.findIndex((d) => d.value == name.value);
if (findIndex == 0) {
message.error(`${name.value}已存在)`);
return false;
}
spec.value.push({
value: name.value,
detail: [value.value]
});
name.value = '';
value.value = '';
openSpecForm();
};
const chooseFile = (data: FileRecord) => {
files.value.push({
uid: data.id,
@@ -531,6 +445,9 @@
watch(
() => props.visible,
(visible) => {
if(props.categoryId){
form.categoryId = props.categoryId;
}
if (visible) {
images.value = [];
category.value = [];

21
src/views/cms/article/components/search.vue
View File

@@ -63,6 +63,7 @@
selection?: [];
merchantId?: number;
navigationList?: Navigation[];
categoryId?: number;
model?: string;
}>(),
{}
@@ -99,7 +100,6 @@
const handleSearch = (e) => {
const text = e.target.value;
resetFields();
if (text === '已发布') {
where.status = 0;
}
@@ -113,6 +113,7 @@
};
const reload = () => {
console.log(where);
getCount(where).then((data: any) => {
articleCount.value = data;
});
@@ -141,14 +142,18 @@
watch(
() => props.merchantId,
(id) => {
if (Number(id) > 0) {
where.merchantId = id;
reload();
} else {
where.merchantId = undefined;
reload();
() => {
if (props.categoryId) {
where.categoryId = props.categoryId;
}
reload();
// if (Number(id) > 0) {
// where.merchantId = id;
// reload();
// } else {
// where.merchantId = undefined;
// reload();
// }
},
{ immediate: true }
);

48
src/views/cms/article/index.vue
View File

@@ -18,6 +18,7 @@
:selection="selection"
:navigationList="navigationList"
:merchantId="merchantId"
:categoryId="categoryId"
:model="model"
@add="openEdit"
@remove="removeBatch"
@@ -26,7 +27,8 @@
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'title'">
<a
<span
class="cursor-pointer"
@click="
openSpmUrl(
`/article/detail/${record.articleId}.html`,
@@ -34,7 +36,20 @@
record.articleId
)
"
>{{ record.title }}</a
>{{ record.title }}</span
>
</template>
<template v-if="column.key === 'categoryName'">
<span
class="cursor-pointer"
@click="
openSpmUrl(
`/article/${record.categoryId}`,
record,
record.categoryId
)
"
>{{ record.categoryName }}</span
>
</template>
<template v-if="column.key === 'type'">
@@ -75,6 +90,7 @@
<ArticleEdit
v-model:visible="showEdit"
:navigationList="navigationList"
:categoryId="categoryId"
:data="current"
@done="reload"
/>
@@ -103,7 +119,6 @@
import router from '@/router';
import { toTreeData } from 'ele-admin-pro';
import { openSpmUrl } from '@/utils/common';
import { getSiteDomain } from '@/utils/domain';
import { listNavigation } from '@/api/cms/navigation';
import { Navigation } from '@/api/cms/navigation/model';
@@ -124,10 +139,6 @@
const categoryId = ref<number>();
// 当前模型
const model = ref<number>();
// 网站域名
const domain = getSiteDomain();
// 随机数
const token = ref<any>('');
// 栏目数据
const navigationList = ref<Navigation[]>();
@@ -153,15 +164,22 @@
align: 'center',
width: 90
},
{
title: '封面图',
dataIndex: 'image',
key: 'image',
width: 120,
align: 'center'
},
{
title: '文章标题',
dataIndex: 'title',
key: 'title'
},
{
title: '封面图',
dataIndex: 'image',
key: 'image',
title: '栏目名称',
dataIndex: 'categoryName',
key: 'categoryName',
width: 120,
align: 'center'
},
@@ -231,6 +249,9 @@
/* 搜索 */
const reload = (where?: ArticleParam) => {
if (where?.categoryId) {
categoryId.value = where.categoryId;
}
selection.value = [];
tableRef?.value?.reload({ where: where });
};
@@ -317,7 +338,7 @@
data: res?.map((d) => {
d.value = d.navigationId;
d.label = d.title;
if (d.model == 'links' || d.model == 'product' || d.path == '/') {
if (d.model != 'article') {
d.disabled = true;
}
return d;
@@ -331,8 +352,9 @@
watch(
() => router.currentRoute.value.query,
(query) => {
console.log(query);
if (query) {
categoryId.value = Number(query.categoryId);
categoryId.value = Number(query.id);
model.value = Number(query.type);
reload();
}
@@ -346,5 +368,3 @@
name: 'ArticleV2'
};
</script>
<style lang="less" scoped></style>

136
src/views/cms/design/components/design-edit.vue
View File

@@ -5,7 +5,7 @@
:visible="visible"
:maskClosable="false"
:maxable="true"
:title="isUpdate ? '编辑页面' : '添加页面'"
:title="isUpdate ? '编辑内容' : '添加内容'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
@@ -19,30 +19,6 @@
styleResponsive ? { md: 21, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="页面名称" name="name">
<a-input
allow-clear
:maxlength="100"
placeholder="关于我们"
v-model:value="form.name"
/>
</a-form-item>
<a-form-item label="路由地址" name="path" :extra="form.path ? `${form.path}` : ''">
<a-input
allow-clear
:maxlength="100"
placeholder="/about"
v-model:value="form.path"
/>
</a-form-item>
<a-form-item label="组件路径" name="component" :extra="form.component ? `@/views${form.component}` : ''">
<a-input
allow-clear
:maxlength="100"
placeholder="请输入组件路径"
v-model:value="form.component"
/>
</a-form-item>
<a-form-item label="Banner" name="photo">
<SelectFile
:placeholder="`请选择图片`"
@@ -51,13 +27,81 @@
@done="chooseFile"
@del="onDeleteItem"
/>
<!-- <ele-image-upload-->
<!-- v-model:value="images"-->
<!-- :limit="1"-->
<!-- :drag="true"-->
<!-- :upload-handler="uploadHandler"-->
<!-- @upload="onUpload"-->
<!-- />-->
</a-form-item>
<a-form-item label="网站SEO">
<a-space direction="vertical"
class="w-full">
<a-input
allow-clear
:maxlength="100"
placeholder="Title"
v-model:value="form.name"
/>
<a-textarea
:rows="4"
:maxlength="200"
placeholder="Description"
v-model:value="form.description"
/>
<a-input
allow-clear
:maxlength="100"
placeholder="Keywords"
v-model:value="form.keywords"
/>
</a-space>
</a-form-item>
<a-form-item label="按钮">
<a-space direction="vertical"
class="w-full">
<a-input
allow-clear
:maxlength="100"
placeholder="演示地址"
v-model:value="form.demoText"
/>
<a-input
allow-clear
:maxlength="100"
placeholder="demoUrl"
v-model:value="form.demoUrl"
/>
<a-input
allow-clear
:maxlength="100"
placeholder="立即购买"
v-model:value="form.buyText"
/>
<a-input
allow-clear
:maxlength="100"
placeholder="buyUrl"
v-model:value="form.buyUrl"
/>
<a-input
allow-clear
:maxlength="100"
placeholder="产品文档"
v-model:value="form.docText"
/>
<a-input
allow-clear
:maxlength="100"
placeholder="docUrl"
v-model:value="form.docUrl"
/>
</a-space>
</a-form-item>
<a-form-item label="页面样式">
<a-space direction="vertical"
class="w-full">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="Tailwind CSS风格"
v-model:value="form.style"
/>
</a-space>
</a-form-item>
<a-form-item label="页面内容" name="content">
<!-- 编辑器 -->
@@ -71,15 +115,6 @@
/>
</div>
</a-form-item>
<a-form-item label="排序号" name="sortNumber">
<a-input-number
:min="0"
:max="9999"
class="ele-fluid"
placeholder="请输入排序号"
v-model:value="form.sortNumber"
/>
</a-form-item>
<a-form-item label="状态" name="status">
<a-radio-group v-model:value="form.status">
<a-radio :value="0">开启</a-radio>
@@ -89,24 +124,20 @@
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import {assignObject, uuid} from 'ele-admin-pro';
import { uuid } from 'ele-admin-pro';
import { addDesign, updateDesign } from '@/api/cms/design';
import { Design } from '@/api/cms/design/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
import { FormInstance } from 'ant-design-vue/es/form';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import {uploadFile, uploadOss} from '@/api/system/file';
import TinymceEditor from "@/components/TinymceEditor/index.vue";
import useFormData from "@/utils/use-form-data";
import type {Article} from "@/api/cms/article/model";
import {ArticleCategory} from "@/api/cms/category/model";
import {removeSiteInfoCache} from "@/api/cms/website";
import success from "@/views/result/success/index.vue";
import {FileRecord} from "@/api/system/file/model";
// 是否是修改
@@ -137,6 +168,8 @@
const images = ref<ItemType[]>([]);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
// 布局
const layout = ref<any>();
// 表单数据
const { form, resetFields, assignFields } = useFormData<Design>({
@@ -146,6 +179,8 @@
path: '',
component: '/about/index',
content: '',
description: '',
keywords: '',
type: '',
status: 0,
comments: '',
@@ -303,6 +338,7 @@
});
};
const chooseFile = (data: FileRecord) => {
images.value.push({
uid: data.id,
@@ -329,7 +365,8 @@
loading.value = true;
const formData = {
...form,
content: content.value
content: content.value,
layout: JSON.stringify(form)
};
const saveOrUpdate = isUpdate.value ? updateDesign : addDesign;
saveOrUpdate(formData)
@@ -367,6 +404,9 @@
status: 'done'
})
}
if(props.data.layout){
layout.value = JSON.parse(props.data.layout);
}
isUpdate.value = true;
} else {
isUpdate.value = false;

21
src/views/cms/design/components/search.vue
View File

@@ -24,22 +24,23 @@
<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import type { GradeParam } from '@/api/user/grade/model';
import { watch } from 'vue';
import useSearch from "@/utils/use-search";
import type { ArticleParam } from "@/api/cms/article/model";
import useSearch from '@/utils/use-search';
import type { ArticleParam } from '@/api/cms/article/model';
import { DesignParam } from '@/api/cms/design/model';
const props = withDefaults(
defineProps<{
// 选中的角色
selection?: [];
categoryId?: number;
navigationList?: Navigator[];
}>(),
{}
);
const emit = defineEmits<{
(e: 'search', where?: GradeParam): void;
(e: 'search', where?: DesignParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'batchMove'): void;
@@ -69,12 +70,16 @@
/* 重置 */
const reset = () => {
resetFields();
type.value = '';
reload();
emit('search', where);
};
watch(
() => props.selection,
() => {}
() => props.categoryId,
(categoryId) => {
if (categoryId) {
where.categoryId = categoryId;
}
},
{ immediate: true }
);
</script>

80
src/views/cms/design/index.vue
View File

@@ -9,12 +9,12 @@
:datasource="datasource"
:customRow="customRow"
tool-class="ele-toolbar-form"
class="sys-org-table"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
:categoryId="categoryId"
:navigationList="navigationList"
@add="openEdit"
@remove="removeBatch"
@@ -42,7 +42,13 @@
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openDesign(record)">设计</a>
<a-tooltip :title="`添加自定义组件及样式`">
<a class="text-fuchsia-300" @click="openRecord(record)"
>布局</a
>
</a-tooltip>
<!-- <a-divider type="vertical" />-->
<!-- <a @click="openDesign(record)">设计</a>-->
<a-divider type="vertical" />
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
@@ -61,12 +67,19 @@
<!-- 编辑弹窗 -->
<DesignEdit v-model:visible="showEdit" :data="current" @done="reload" />
<!-- 编辑弹窗 -->
<RecordEdit
v-model:visible="showRecordEdit"
:data="current"
@done="reload"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { createVNode, ref, watch } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
@@ -76,6 +89,7 @@
} from 'ele-admin-pro/es/ele-pro-table/types';
import Search from './components/search.vue';
import DesignEdit from './components/design-edit.vue';
import RecordEdit from './record/index.vue';
import {
pageDesign,
removeDesign,
@@ -88,6 +102,7 @@
import { getSiteDomain } from '@/utils/domain';
import { Navigation } from '@/api/cms/navigation/model';
import { listNavigation } from '@/api/cms/navigation';
import router from '@/router';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -100,10 +115,13 @@
const showEdit = ref(false);
// 是否显示批量移动弹窗
const showMove = ref(false);
// 是否显示组件库
const showRecordEdit = ref(false);
// 网站域名
const domain = getSiteDomain();
// 栏目数据
const navigationList = ref<Navigation[]>();
const categoryId = ref();
// 加载状态
const loading = ref(true);
@@ -120,6 +138,9 @@
if (filters) {
where.status = filters.status;
}
if (!where.categoryId && categoryId.value) {
where.categoryId = categoryId.value;
}
return pageDesign({
...where,
...orders,
@@ -181,7 +202,7 @@
]);
/* 搜索 */
const reload = (where?: DesignParam) => {
const reload = (where?: any) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
@@ -192,11 +213,14 @@
showEdit.value = true;
};
const openDesign = (row?: Design) => {
push({
path: '/cms/design/detail',
query: { id: row?.pageId }
});
/* 打开组件管理 */
const openRecord = (row?: Design) => {
current.value = row ?? null;
showRecordEdit.value = true;
// push({
// path: '/cms/design/detail',
// query: { id: row?.pageId }
// });
};
/* 打开批量移动弹窗 */
@@ -283,6 +307,17 @@
};
query();
watch(
() => router.currentRoute.value.query,
(query) => {
if (query) {
categoryId.value = Number(query.id);
reload();
}
},
{ immediate: true }
);
</script>
<script lang="ts">
@@ -290,30 +325,3 @@
name: 'Design'
};
</script>
<style lang="less" scoped>
.sys-org-table :deep(.ant-table-body) {
overflow: auto !important;
overflow: overlay !important;
}
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
padding: 0 4px;
margin-bottom: 0;
}
.design-item {
margin: auto;
display: flex;
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
width: 70px;
height: 70px;
border-radius: 70px;
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
}
:deep(.ant-image-img) {
max-height: 80px;
}
</style>

250
src/views/cms/design/record/components/designRecordEdit.vue Normal file
View File

@@ -0,0 +1,250 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
:width="800"
:visible="visible"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑组件' : '添加组件'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
:wrapper-col="
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<!-- <a-form-item label="上级" name="parentId">-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- placeholder="请输入上级id, 0是顶级"-->
<!-- v-model:value="form.parentId"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item label="选择组件" name="dictCode">
<SelectDictDictionary
dict-code="componentsType"
:placeholder="`选择组件`"
v-model:value="form.dictCode"
@done="chooseComponents"
/>
</a-form-item>
<!-- 公共字段 -->
<a-form-item label="标题" name="title">
<a-input allow-clear placeholder="标题" v-model:value="form.title" />
</a-form-item>
<a-form-item label="样式" name="styles">
<a-input allow-clear placeholder="样式" v-model:value="form.styles" />
</a-form-item>
<!-- 卡片 -->
<!-- <template v-if="form.dictCode == 'Card'">-->
<!-- <a-form-item label="标题" name="title">-->
<!-- <a-input allow-clear placeholder="标题" v-model:value="form.title" />-->
<!-- </a-form-item>-->
<!-- </template>-->
<!-- <a-form-item label="缩列图" name="photo">-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- placeholder="请输入缩列图"-->
<!-- v-model:value="form.photo"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item label="用户ID" name="userId">-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- placeholder="请输入用户ID"-->
<!-- v-model:value="form.userId"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item label="排序(数字越小越靠前)" name="sortNumber">-->
<!-- <a-input-number-->
<!-- :min="0"-->
<!-- :max="9999"-->
<!-- class="ele-fluid"-->
<!-- placeholder="请输入排序号"-->
<!-- v-model:value="form.sortNumber"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item label="备注" name="comments">-->
<!-- <a-textarea-->
<!-- :rows="4"-->
<!-- :maxlength="200"-->
<!-- placeholder="请输入描述"-->
<!-- v-model:value="form.comments"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item label="状态" name="status">
<a-radio-group v-model:value="form.status">
<a-radio :value="0">显示</a-radio>
<a-radio :value="1">隐藏</a-radio>
</a-radio-group>
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject, uuid } from 'ele-admin-pro';
import { addDesignRecord, updateDesignRecord } from '@/api/cms/designRecord';
import { DesignRecord } from '@/api/cms/designRecord/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FormInstance } from 'ant-design-vue/es/form';
import { FileRecord } from '@/api/system/file/model';
import { DictionaryData } from '@/api/system/dictionary-data/model';
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: DesignRecord | null;
// 导航ID
categoryId?: number;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
const images = ref<ItemType[]>([]);
// 用户信息
const form = reactive<DesignRecord>({
id: undefined,
pageId: undefined,
parentId: undefined,
title: undefined,
styles: '',
keywords: undefined,
description: undefined,
path: undefined,
photo: undefined,
userId: undefined,
sortNumber: undefined,
comments: undefined,
status: undefined,
tenantId: undefined,
createTime: undefined,
designRecordId: undefined,
designRecordName: '',
status: 0,
comments: '',
sortNumber: 100
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
dictCode: [
{
required: true,
type: 'string',
message: '请选择组件',
trigger: 'blur'
}
]
});
const chooseImage = (data: FileRecord) => {
images.value.push({
uid: data.id,
url: data.path,
status: 'done'
});
form.image = data.path;
};
const onDeleteItem = (index: number) => {
images.value.splice(index, 1);
form.image = '';
};
const chooseComponents = (data: DictionaryData) => {
form.title = data.dictDataName;
form.dictCode = data.dictDataCode;
};
const { resetFields } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const formData = {
...form,
navigationId: props.categoryId
};
const saveOrUpdate = isUpdate.value
? updateDesignRecord
: addDesignRecord;
saveOrUpdate(formData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
images.value = [];
if (props.data) {
assignObject(form, props.data);
if (props.data.image) {
images.value.push({
uid: uuid(),
url: props.data.image,
status: 'done'
});
}
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
},
{ immediate: true }
);
</script>

42
src/views/cms/design/record/components/search.vue Normal file
View File

@@ -0,0 +1,42 @@
<!-- 搜索表单 -->
<template>
<a-space :size="10" style="flex-wrap: wrap">
<a-button type="primary" class="ele-btn-icon" @click="add">
<template #icon>
<PlusOutlined />
</template>
<span>添加组件</span>
</a-button>
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import { watch } from 'vue';
import { DesignParam } from '@/api/cms/design/model';
const props = withDefaults(
defineProps<{
// 选中的角色
selection?: [];
}>(),
{}
);
const emit = defineEmits<{
(e: 'search', where?: DesignParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'batchMove'): void;
}>();
// 新增
const add = () => {
emit('add');
};
watch(
() => props.selection,
() => {}
);
</script>

276
src/views/cms/design/record/index.vue Normal file
View File

@@ -0,0 +1,276 @@
<template>
<a-drawer
width="70%"
:visible="visible"
:title="`${data?.title}`"
placement="left"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
:confirm-loading="loading"
:footer="null"
>
<ele-pro-table
ref="tableRef"
row-key="navigationId"
:columns="columns"
:datasource="datasource"
:customRow="customRow"
tool-class="ele-toolbar-form"
class="sys-org-table"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
:categoryId="categoryId"
@add="openEdit"
@remove="removeBatch"
@batchMove="openMove"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'isStatus'">
<a-tag v-if="record.isStatus === 1" color="green">开启</a-tag>
<a-tag v-if="record.isStatus === 2" color="red">关闭</a-tag>
</template>
<template v-if="column.key === 'isFree'">
<a-tag v-if="record.isFree === 1" color="green">免费</a-tag>
<a-tag v-if="record.isFree === 2" color="orange">收费</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="moveUp(record)">上移<ArrowUpOutlined /></a>
<a-divider type="vertical" />
<a @click="openEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗？"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
<!-- 编辑弹窗 -->
<DesignRecordEdit
v-model:visible="showEdit"
:merchant="data"
:categoryId="categoryId"
:data="current"
@done="reload"
/>
</a-drawer>
</template>
<script lang="ts" setup>
import { createVNode, ref, watch } from 'vue';
import { message, Modal } from 'ant-design-vue';
import {
ArrowUpOutlined,
ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import Search from './components/search.vue';
import DesignRecordEdit from './components/designRecordEdit.vue';
import {
removeDesignRecord,
removeBatchDesignRecord,
updateDesignRecord
} from '@/api/cms/designRecord';
import type { DesignRecord } from '@/api/cms/designRecord/model';
import { Navigation } from '@/api/cms/navigation/model';
import { pageDesignRecord } from '@/api/cms/designRecord';
import { DesignRecordParam } from '@/api/cms/designRecord/model';
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
categoryId?: number | null;
// 导航信息
data?: Navigation;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格选中数据
const selection = ref<DesignRecord[]>([]);
// 当前编辑数据
const current = ref<DesignRecord | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 是否显示批量移动弹窗
const showMove = ref(false);
// 加载状态
const loading = ref(true);
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
if (filters) {
where.status = filters.status;
}
where.navigationId = props.categoryId;
return pageDesignRecord({
...where,
...orders,
page,
limit
});
};
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'navigationId',
width: 48,
align: 'center',
fixed: 'left',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '组件',
dataIndex: 'title',
key: 'title'
},
{
title: '排序',
dataIndex: 'sortNumber',
key: 'sortNumber',
width: 120,
align: 'center'
},
{
title: '操作',
key: 'action',
width: 180,
fixed: 'right',
align: 'center',
hideInSetting: true
}
]);
/* 搜索 */
const reload = (where?: DesignRecordParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
/* 打开编辑弹窗 */
const openEdit = (row?: DesignRecord) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开批量移动弹窗 */
const openMove = () => {
showMove.value = true;
};
/* 删除单个 */
const remove = (row: DesignRecord) => {
const hide = message.loading('请求中..', 0);
removeDesignRecord(row.periodId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchDesignRecord(selection.value.map((d) => d.periodId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
// 上移
const moveUp = (row?: DesignRecord) => {
updateDesignRecord({
periodId: row?.periodId,
sortNumber: Number(row?.sortNumber) - 1
}).then((msg) => {
message.success(msg);
reload();
});
};
/* 自定义行属性 */
const customRow = (record: DesignRecord) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
openEdit(record);
}
};
};
watch(
() => props.categoryId,
(categoryId) => {
if (categoryId) {
reload();
}
}
);
</script>
<script lang="ts">
export default {
name: 'DesignRecord'
};
</script>
<style lang="less" scoped></style>

4
src/views/cms/domain/components/domain-edit.vue
View File

@@ -96,6 +96,7 @@
visible: boolean;
// 修改回显的数据
data?: Domain | null;
websiteId?: number;
}>();
const emit = defineEmits<{
@@ -173,7 +174,8 @@
}
}
const formData = {
...form
...form,
websiteId: props.websiteId
};
if (isUpdate.value) {
setTimeout(() => {

24
src/views/cms/domain/index.vue
View File

@@ -14,6 +14,7 @@
<search
@search="reload"
:selection="selection"
:websiteId="websiteId"
@add="openEdit"
@remove="removeBatch"
@batchMove="openMove"
@@ -76,7 +77,12 @@
</a-card>
<!-- 编辑弹窗 -->
<DomainEdit v-model:visible="showEdit" :data="current" @done="reload" />
<DomainEdit
v-model:visible="showEdit"
:websiteId="websiteId"
:data="current"
@done="reload"
/>
</div>
</div>
</template>
@@ -86,6 +92,8 @@
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import type {
DatasourceFunction,
ColumnItem
@@ -95,11 +103,13 @@
import {
pageDomain,
removeDomain,
removeBatchDomain,
updateDomain
removeBatchDomain
} from '@/api/cms/domain';
import type { Domain, DomainParam } from '@/api/cms/domain/model';
import { openPreview, openUrl } from "@/utils/common";
import { openUrl } from '@/utils/common';
const route = useRoute();
const { push } = useRouter();
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -112,6 +122,11 @@
const showEdit = ref(false);
// 是否显示批量移动弹窗
const showMove = ref(false);
const websiteId = ref<number>();
if (route.params.id) {
websiteId.value = route.params.id;
}
// 表格数据源
const datasource: DatasourceFunction = ({
@@ -124,6 +139,7 @@
if (filters) {
where.status = filters.status;
}
where.websiteId = route.params.id;
return pageDomain({
...where,
...orders,

19
src/views/cms/field/components/website-field-edit.vue
View File

@@ -16,7 +16,16 @@
:label-col="{ md: { span: 3 }, sm: { span: 4 }, xs: { span: 24 } }"
:wrapper-col="{ md: { span: 21 }, sm: { span: 22 }, xs: { span: 24 } }"
>
<a-form-item label="参数名" name="name">
<a-form-item label="参数" name="comments">
<a-input
allow-clear
:maxlength="100"
placeholder="网站名称"
v-model:value="form.comments"
@pressEnter="save"
/>
</a-form-item>
<a-form-item label="调用" name="name">
<SelectWebsiteField
:placeholder="`可配置参数`"
class="input-item"
@@ -32,14 +41,6 @@
v-model:value="form.value"
/>
</a-form-item>
<a-form-item label="描述" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="描述"
v-model:value="form.comments"
/>
</a-form-item>
<a-form-item label="css样式" name="style">
<a-textarea
:rows="4"

22
src/views/cms/field/index.vue
View File

@@ -38,7 +38,8 @@
<template #content>
{{ record.comments }}
</template>
<ExclamationCircleOutlined />
{{ record.comments }}
<!-- <ExclamationCircleOutlined />-->
</a-popover>
</template>
<template v-if="column.key === 'action'">
@@ -127,32 +128,17 @@
const columns = ref<any[]>([
{
title: '参数名',
dataIndex: 'name',
width: 180,
key: 'name'
},
{
title: '描述',
dataIndex: 'comments',
key: 'comments',
width: 120,
align: 'center'
width: 250,
ellipsis: true
},
{
title: '配置值',
dataIndex: 'value',
key: 'value',
width: 400,
ellipsis: true
},
{
title: '默认值',
dataIndex: 'defaultValue'
},
{
title: '可设置范围',
dataIndex: 'modifyRange'
},
{
title: '排序',
dataIndex: 'sortNumber',

220
src/views/cms/navigation/components/design-edit.vue
View File

@@ -1,15 +1,21 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
<a-drawer
:width="1000"
:visible="visible"
:maskClosable="false"
:maxable="true"
:title="isUpdate ? '编辑内容' : '添加内容'"
:title="isUpdate ? '页面设计' : '添加页面设计'"
placement="left"
:confirm-loading="loading"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
>
<template #extra>
<a-button type="primary" style="margin-right: 8px" @click="save">保存</a-button>
<a-button @click="onPreview">预览</a-button>
</template>
<a-form
ref="formRef"
:model="form"
@@ -19,15 +25,6 @@
styleResponsive ? { md: 21, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="Banner" name="photo">
<SelectFile
:placeholder="`请选择图片`"
:limit="1"
:data="images"
@done="chooseFile"
@del="onDeleteItem"
/>
</a-form-item>
<a-form-item label="网站SEO">
<a-space direction="vertical"
class="w-full">
@@ -51,48 +48,107 @@
/>
</a-space>
</a-form-item>
<a-form-item label="购买链接">
<a-space direction="vertical"
class="w-full">
<a-input
allow-clear
:maxlength="100"
placeholder="购买链接 buyUrl"
v-model:value="form.buyUrl"
/>
<a-form-item label="banner">
<a-space direction="vertical" class="w-full">
<div class="p-2">
<a-radio-group v-model:value="form.showBanner">
<a-radio :value="true">开启</a-radio>
<a-radio :value="false">关闭</a-radio>
</a-radio-group>
</div>
<template v-if="form.showBanner">
<SelectFile
:placeholder="`请选择背景图`"
:limit="1"
:data="images"
@done="chooseFile"
@del="onDeleteItem"
/>
<a-textarea
:rows="4"
:maxlength="200"
placeholder="Tailwind CSS风格"
v-model:value="form.style"
/>
<a-input
allow-clear
:maxlength="100"
:placeholder="`演示地址 demoUrl`"
v-model:value="form.demoUrl"
/>
<a-input
allow-clear
:maxlength="100"
:placeholder="`账号密码 admin,123456`"
v-model:value="form.account"
/>
<a-input
allow-clear
:maxlength="100"
:placeholder="`立即购买 buyUrl`"
v-model:value="form.buyUrl"
/>
<a-input
allow-clear
:maxlength="100"
:placeholder="`产品文档 docUrl`"
v-model:value="form.docUrl"
/>
</template>
</a-space>
<a-divider style="margin: 30px 0" />
</a-form-item>
<a-form-item label="展示方式" name="content">
<a-space direction="vertical" class="w-full">
<div class="p-1.5">
<a-radio-group v-model:value="form.showLayout">
<a-radio :value="false">简单</a-radio>
<a-radio :value="true">高级</a-radio>
</a-radio-group>
</div>
<template v-if="!form.showLayout">
<!-- 编辑器 -->
<div class="content">
<tinymce-editor
v-model:value="content"
:disabled="disabled"
:init="config"
placeholder="图片直接粘贴自动上传"
@paste="onPaste"
/>
</div>
</template>
<template v-if="form.showLayout">
<!-- 组件名称 -->
<a-space direction="vertical" class="w-full">
<template v-for="(item,index) in components" :key="index">
<a-card :title="`${item.name}`" class="layout-item w-full bg-gray-50 my-2">
<template #title>
<a-select
ref="select"
v-model:value="form.adType"
style="width: 120px"
>
<a-select-option value="图片广告">图片广告</a-select-option>
<a-select-option value="幻灯片">幻灯片</a-select-option>
<a-select-option value="视频广告">视频广告</a-select-option>
</a-select>
</template>
</a-card>
</template>
</a-space>
<a-button @click="addComponents">添加组件</a-button>
</template>
</a-space>
</a-form-item>
<a-form-item label="页面样式">
<a-space direction="vertical"
class="w-full">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="Tailwind CSS风格"
v-model:value="form.style"
/>
</a-space>
</a-form-item>
<a-form-item label="页面内容" name="content">
<!-- 编辑器 -->
<div class="content">
<tinymce-editor
v-model:value="content"
:disabled="disabled"
:init="config"
placeholder="图片直接粘贴自动上传"
@paste="onPaste"
/>
</div>
</a-form-item>
<a-form-item label="状态" name="status">
<a-radio-group v-model:value="form.status">
<a-radio :value="0">开启</a-radio>
<a-radio :value="1">关闭</a-radio>
</a-radio-group>
</a-form-item>
<!-- <a-form-item label="状态" name="status">-->
<!-- <a-radio-group v-model:value="form.status">-->
<!-- <a-radio :value="0">开启</a-radio>-->
<!-- <a-radio :value="1">关闭</a-radio>-->
<!-- </a-radio-group>-->
<!-- </a-form-item>-->
</a-form>
</ele-modal>
</a-drawer>
</template>
<script lang="ts" setup>
@@ -119,6 +175,8 @@ const { styleResponsive } = storeToRefs(themeStore);
const disabled = ref(false);
// 编辑器内容，双向绑定
const content = ref<any>('');
// 组件列表
const components = ref<any[]>();
const props = defineProps<{
// 弹窗是否打开
@@ -151,14 +209,22 @@ const { form, resetFields, assignFields } = useFormData<Design>({
description: '',
keywords: '',
content: '',
buyUrl: '',
type: '',
categoryId: undefined,
style: '',
status: 0,
comments: '',
sortNumber: 100,
navigationId: undefined
navigationId: undefined,
showLayout: false,
layout: '',
btn: [],
showBanner: true,
buyUrl: '',
demoUrl: '',
account: '',
docUrl: ''
});
const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
@@ -326,6 +392,41 @@ const onDeleteItem = (index: number) => {
form.photo = '';
}
const addComponents = () => {
if(!components.value){
components.value = [];
}
components.value?.push({
type: 'card',
name: '组件名称',
css: '',
data: []
})
}
const options = [{
value: 'primary',
label: 'primary',
},{
value: 'success',
label: 'success',
},{
value: 'warning',
label: 'warning',
},{
value: 'danger',
label: 'danger',
},{
value: 'info',
label: 'info',
},{
value: 'text',
label: 'text',
}];
const delBtn = (index: number) => {
form.btn?.splice(index,1)
}
/* 保存编辑 */
const save = () => {
@@ -336,11 +437,14 @@ const save = () => {
.validate()
.then(() => {
loading.value = true;
console.log(form);
const formData = {
...form,
layout: JSON.stringify(form),
categoryId: props.categoryId,
content: content.value
content: content.value,
};
console.log(formData);
const saveOrUpdate = isUpdate.value ? updateDesign : addDesign;
saveOrUpdate(formData)
.then((msg) => {
@@ -367,15 +471,18 @@ watch(
if(props.categoryId){
content.value = '';
images.value = []
console.log(props.categoryId);
pageDesign({categoryId: props.categoryId,limit: 1}).then(res => {
const design = res?.list[0];
if(design){
assignFields(design);
if(design.layout){
assignFields(JSON.parse(design.layout));
}
if(design?.content){
content.value = design.content
}
if(design.photo){
form.photo = design.photo;
images.value.push({
uid: uuid(),
url: design.photo,
@@ -399,8 +506,3 @@ watch(
{ immediate: true }
);
</script>
<style lang="less">
.sdf{
display: none;
}
</style>

38
src/views/cms/navigation/components/navigation-edit.vue
View File

@@ -55,18 +55,15 @@
@pressEnter="save"
/>
</a-form-item>
<!-- <a-form-item-->
<!-- label="组件路径"-->
<!-- name="component"-->
<!-- v-if="isUpdate"-->
<!-- >-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- placeholder="/pages/product/detail.vue"-->
<!-- v-model:value="form.component"-->
<!-- @pressEnter="save"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item label="组件路径" name="component" v-if="isUpdate">
<a-input
allow-clear
disabled
placeholder="/pages/product/detail.vue"
v-model:value="form.component"
@pressEnter="save"
/>
</a-form-item>
<a-form-item label="css样式" name="style" v-if="isUpdate">
<a-input
allow-clear
@@ -202,7 +199,7 @@
navigationId: undefined,
model: 'custom',
code: undefined,
modelName: '通用模型',
modelName: '单页模型',
type: 0,
title: '',
parentId: 0,
@@ -314,11 +311,22 @@
]
});
const chooseModel = (item: Navigation) => {
const chooseModel = (item: any) => {
console.log(item);
form.model = `${item.value}`;
form.modelName = `${item.label}`;
form.componentPath = `${item.component}`;
if (item.value == 'custom') {
form.path = `/custom-${form.navigationId}`;
form.component = `/pages/[${item.value}]/index.vue`;
return;
}
if (item.value == 'links') {
form.path = `https://`;
form.component = `/pages/${item.value}/index.vue`;
return;
}
form.path = `/${item.value}/${form.navigationId}`;
form.component = `/pages/${item.value}/index.vue`;
};
const chooseFile = (data: FileRecord) => {

74
src/views/cms/navigation/index.vue
View File

@@ -35,6 +35,7 @@
<a-radio-group v-model:value="position" @change="reload">
<a-radio-button :value="1">顶部</a-radio-button>
<a-radio-button :value="2">底部</a-radio-button>
<a-radio-button :value="0">不限</a-radio-button>
</a-radio-group>
<a-divider type="vertical" />
<!-- 搜索表单 -->
@@ -49,7 +50,18 @@
</template>
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'path'">
<span class="ele-text-placeholder">{{ record.path }}</span>
<span class="cursor-pointer" v-if="isDirectory(record)"></span>
<span
v-else
@click="openSpmUrl(record.path, record, record.navigationId)"
class="ele-text-placeholder cursor-pointer"
>{{ record.path }}</span
>
<!-- <span-->
<!-- class="ele-text-placeholder cursor-pointer"-->
<!-- @click="openSpmUrl(record.path, record, record.navigationId)"-->
<!-- >{{ record.path }}</span-->
<!-- >-->
</template>
<template v-if="column.key === 'component'">
<template v-if="!isDirectory(record)">
@@ -114,12 +126,8 @@
</template>
<template v-else-if="column.key === 'action'">
<a-space>
<a-tooltip :title="`添加自定义组件及样式`">
<a class="text-fuchsia-300" @click="openLayout(record)">布局</a>
</a-tooltip>
<a-divider type="vertical" />
<a-tooltip :title="`配置SEO及页面元素`">
<a class="text-gray-400" @click="openDesign(record)">内容</a>
<a-tooltip :title="`配置SEO及页面内容`">
<a class="text-fuchsia-300" @click="openDesign(record)">设计</a>
</a-tooltip>
<a-divider type="vertical" />
<a-tooltip :title="`添加子分类`">
@@ -193,6 +201,7 @@
import { openSpmUrl } from '@/utils/common';
import { getSiteInfo } from '@/api/layout';
import { Design } from '@/api/cms/design/model';
import router from '@/router';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -312,6 +321,10 @@
where.top = undefined;
where.bottom = 0;
}
if (position.value == 0) {
where.top = undefined;
where.bottom = undefined;
}
where.isMpWeixin = false;
return listNavigation({ ...where });
};
@@ -344,22 +357,49 @@
showEdit.value = true;
};
// 跳转模型内容列表
const openDesign = (row?: Navigation) => {
categoryId.value = row?.navigationId;
showDesignEdit.value = true;
// // TODO 通用模型
// if (row?.model == 'custom') {
return;
// if (row && isDirectory(row)) {
// categoryId.value = row?.navigationId;
// showDesignEdit.value = true;
// return;
// }
//
// // TODO 文章列表
// if (row?.model === 'article') {
// router.push({
// path: '/cms/article',
// query: { categoryId: row.navigationId, type: row.type }
// });
// }
// TODO 单页模型
if (row?.model == 'custom') {
router.push({
path: `/cms/design`,
query: {
id: row.navigationId,
type: row.model
}
});
return;
}
// TODO 文章列表
if (row?.model === 'article') {
router.push({
path: `/cms/article`,
query: {
id: row.navigationId,
type: row.model
}
});
return;
}
// TODO 产品列表
if (row?.model === 'product') {
router.push({
path: '/goods/index',
query: { categoryId: row.navigationId, type: row.type }
});
return;
}
};
const openLayout = (row?: Navigation) => {

5
src/views/cms/website/components/search.vue
View File

@@ -19,8 +19,8 @@
<!-- <a-button class="ele-btn-icon" @click="openUrl(`/mp-group`)">-->
<!-- <span>卡片管理</span>-->
<!-- </a-button>-->
<!-- <a-button class="ele-btn-icon" @click="openUrl(`/mp-package`)">-->
<!-- <span>分包管理</span>-->
<!-- <a-button class="ele-btn-icon" @click="navigator(`/website/domain`)">-->
<!-- <span>域名管理</span>-->
<!-- </a-button>-->
</a-space>
</template>
@@ -28,7 +28,6 @@
<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import { watch } from 'vue';
import { openUrl } from '@/utils/common';
const props = withDefaults(
defineProps<{

31
src/views/cms/website/components/websiteEdit.vue
View File

@@ -146,7 +146,7 @@
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FormInstance } from 'ant-design-vue/es/form';
import { FileRecord } from '@/api/system/file/model';
import { addDomain } from '@/api/cms/domain';
import { checkExistence } from '@/api/cms/domain';
// 是否是修改
const isUpdate = ref(false);
@@ -175,6 +175,7 @@
const formRef = ref<FormInstance | null>(null);
const images = ref<ItemType[]>([]);
const websiteQrcode = ref<ItemType[]>([]);
const oldDomain = ref();
// 用户信息
const form = reactive<Website>({
@@ -244,6 +245,31 @@
// trigger: 'blur'
// }
// ],
websiteCode: [
{
required: true,
type: 'string',
message: '该域名已存在',
validator: (_rule: Rule, value: string) => {
return new Promise<void>((resolve, reject) => {
if (!value) {
return reject('请输入二级域名');
}
checkExistence('domain', `${value}.wsdns.cn`)
.then(() => {
if (value === oldDomain.value) {
return resolve();
}
reject('已存在');
})
.catch(() => {
resolve();
});
});
},
trigger: 'blur'
}
],
adminUrl: [
{
required: true,
@@ -342,6 +368,9 @@
status: 'done'
});
}
if (props.data.websiteCode) {
oldDomain.value = props.data.websiteCode;
}
isUpdate.value = true;
} else {
isUpdate.value = false;

12
src/views/cms/website/index.vue
View File

@@ -76,6 +76,10 @@
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openUrl(`/website/domain/${record.websiteId}`)"
>域名管理</a
>
<a-divider type="vertical" />
<a @click="openEdit(record)">编辑</a>
</a-space>
</template>
@@ -147,6 +151,12 @@
// 表格列配置
const columns = ref<ColumnItem[]>([
{
title: 'ID',
dataIndex: 'tenantId',
key: 'tenantId',
width: 80
},
{
title: '网站名称',
dataIndex: 'websiteName',
@@ -195,7 +205,7 @@
{
title: '操作',
key: 'action',
width: 120,
width: 180,
fixed: 'right',
align: 'center',
hideInSetting: true

20
src/views/system/profile/index.vue
View File

@@ -23,13 +23,13 @@
@done="chooseFile"
@del="onDeleteItem"
/>
<!-- <ele-image-upload-->
<!-- v-model:value="logo"-->
<!-- :accept="'image/*'"-->
<!-- :item-style="{ width: '80px', height: '80px' }"-->
<!-- :limit="1"-->
<!-- @upload="onUpload"-->
<!-- />-->
<!-- <ele-image-upload-->
<!-- v-model:value="logo"-->
<!-- :accept="'image/*'"-->
<!-- :item-style="{ width: '80px', height: '80px' }"-->
<!-- :limit="1"-->
<!-- @upload="onUpload"-->
<!-- />-->
</a-form-item>
<a-form-item label="应用名称">
<a-space class="justify ele-text-secondary">
@@ -240,8 +240,6 @@ import { useThemeStore } from "@/store/modules/theme";
import { getCompany, updateCompany, destructionTenant } from "@/api/system/company";
import Field from "./components/field.vue";
import Version from "./components/version.vue";
import { FILE_SERVER } from "@/config/setting";
import { assignObject } from "ele-admin-pro";
import { getFileSize, openUrl } from "@/utils/common";
import { Company } from "@/api/system/company/model";
@@ -250,6 +248,7 @@ import { uploadFile } from "@/api/system/file";
import { logout } from "@/utils/page-tab-util";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { FileRecord } from "@/api/system/file/model";
import { uuid } from 'ele-admin-pro';
const useForm = Form.useForm;
@@ -450,10 +449,9 @@ const destruction = (tenantId) => {
const query = () => {
logo.value = [];
getCompany().then((response) => {
console.log(response.companyLogo);
if (response.companyLogo) {
logo.value.push({
uid: 1,
uid: `${uuid()}`,
url: response.companyLogo,
status: "done"
});