1
This commit is contained in:
41
src/views/cms/clear-cache/index.vue
Normal file
41
src/views/cms/clear-cache/index.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<div style="max-width: 960px; margin: 0 auto">
|
||||
<a-result :status="success ? 'success' : ''" :title="title">
|
||||
<template #extra>
|
||||
<a-space size="middle">
|
||||
<a-button danger @click="reload">清除缓存</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { removeSiteInfoCache } from '@/api/cms/cmsWebsite';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const success = ref<boolean>(false);
|
||||
const title = ref<string>();
|
||||
|
||||
const reload = () => {
|
||||
removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId')).then(
|
||||
(msg) => {
|
||||
if (msg) {
|
||||
success.value = true;
|
||||
title.value = '操作成功';
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
reload();
|
||||
</script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'ClearCache'
|
||||
};
|
||||
</script>
|
||||
219
src/views/cms/cmsAd/components/Import.vue
Normal file
219
src/views/cms/cmsAd/components/Import.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<!-- 广告位导入备份弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="520"
|
||||
:footer="null"
|
||||
title="导入备份"
|
||||
:visible="visible"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-upload-dragger
|
||||
accept=".xls,.xlsx"
|
||||
:show-upload-list="false"
|
||||
:customRequest="doUpload"
|
||||
style="padding: 24px 0; margin-bottom: 16px"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<cloud-upload-outlined />
|
||||
</p>
|
||||
<p class="ant-upload-hint">将文件拖到此处，或点击上传</p>
|
||||
</a-upload-dragger>
|
||||
</a-spin>
|
||||
<div class="ele-text-center">
|
||||
<span>只能上传xls、xlsx文件；恢复时：有广告ID则更新，没有则新增</span>
|
||||
</div>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { CloudUploadOutlined } from '@ant-design/icons-vue';
|
||||
import { read, utils } from 'xlsx';
|
||||
import { addCmsAd, updateCmsAd } from '@/api/cms/cmsAd';
|
||||
import type { CmsAd } from '@/api/cms/cmsAd/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
defineProps<{
|
||||
// 是否打开弹窗
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
// 导入请求状态
|
||||
const loading = ref(false);
|
||||
|
||||
const COL = {
|
||||
adId: '广告ID',
|
||||
type: '类型',
|
||||
code: '唯一标识',
|
||||
categoryId: '栏目ID',
|
||||
categoryName: '栏目名称',
|
||||
name: '广告位名称',
|
||||
width: '宽',
|
||||
height: '高',
|
||||
style: '样式',
|
||||
images: '图片数据',
|
||||
path: '链接',
|
||||
sortNumber: '排序号',
|
||||
comments: '备注',
|
||||
status: '状态',
|
||||
lang: '语言',
|
||||
tenantId: '租户ID',
|
||||
merchantId: '商户ID'
|
||||
} as const;
|
||||
|
||||
const parseNumber = (val: any): number | undefined => {
|
||||
if (val === '' || val === null || val === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
const n = Number(val);
|
||||
return Number.isFinite(n) ? n : undefined;
|
||||
};
|
||||
|
||||
const parseString = (val: any): string | undefined => {
|
||||
if (val === '' || val === null || val === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
return String(val);
|
||||
};
|
||||
|
||||
const normalizeImages = (val: any): string => {
|
||||
const raw = parseString(val);
|
||||
if (!raw) {
|
||||
return '';
|
||||
}
|
||||
// 备份文件中图片数据优先使用 JSON；如果是 url，则补成编辑器保存时的数组格式
|
||||
try {
|
||||
const parsed = JSON.parse(raw);
|
||||
return JSON.stringify(parsed ?? []);
|
||||
} catch (_e) {
|
||||
return JSON.stringify([
|
||||
{ uid: '', url: raw, status: 'done', title: '', path: '' }
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
/* 上传 */
|
||||
const doUpload = async ({ file }: any) => {
|
||||
if (
|
||||
![
|
||||
'application/vnd.ms-excel',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
].includes(file.type)
|
||||
) {
|
||||
message.error('只能选择 excel 文件');
|
||||
return false;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 10) {
|
||||
message.error('大小不能超过 10MB');
|
||||
return false;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const buffer = await file.arrayBuffer();
|
||||
const wb = read(buffer, { type: 'array' });
|
||||
const sheetName = wb.SheetNames?.[0];
|
||||
if (!sheetName) {
|
||||
throw new Error('文件中未找到工作表');
|
||||
}
|
||||
const sheet = wb.Sheets[sheetName];
|
||||
const rows = utils.sheet_to_json<Record<string, any>>(sheet, {
|
||||
defval: ''
|
||||
});
|
||||
if (!rows?.length) {
|
||||
throw new Error('文件内容为空');
|
||||
}
|
||||
if (!(COL.code in rows[0]) && !(COL.name in rows[0])) {
|
||||
throw new Error('文件格式不匹配，请使用“备份”导出的文件进行恢复');
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: `确定要恢复 ${rows.length} 条广告位吗？（有广告ID则更新，没有则新增）`,
|
||||
maskClosable: true,
|
||||
onOk: async () => {
|
||||
const hide = message.loading('恢复中..', 0);
|
||||
let ok = 0;
|
||||
let fail = 0;
|
||||
const errors: string[] = [];
|
||||
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
const row = rows[i] ?? {};
|
||||
const payload: CmsAd = {
|
||||
adId: parseNumber(row[COL.adId]),
|
||||
type: parseNumber(row[COL.type]),
|
||||
code: parseString(row[COL.code]),
|
||||
categoryId: parseNumber(row[COL.categoryId]),
|
||||
categoryName: parseString(row[COL.categoryName]),
|
||||
name: parseString(row[COL.name]),
|
||||
width: parseString(row[COL.width]),
|
||||
height: parseString(row[COL.height]),
|
||||
style: parseString(row[COL.style]),
|
||||
images: normalizeImages(row[COL.images]),
|
||||
path: parseString(row[COL.path]),
|
||||
sortNumber: parseNumber(row[COL.sortNumber]),
|
||||
comments: parseString(row[COL.comments]),
|
||||
status: parseNumber(row[COL.status]),
|
||||
lang: parseString(row[COL.lang]),
|
||||
tenantId: parseNumber(row[COL.tenantId]),
|
||||
merchantId: parseNumber(row[COL.merchantId])
|
||||
};
|
||||
|
||||
try {
|
||||
const saveOrUpdate = payload.adId ? updateCmsAd : addCmsAd;
|
||||
await saveOrUpdate(payload);
|
||||
ok++;
|
||||
} catch (e: any) {
|
||||
fail++;
|
||||
errors.push(
|
||||
`第${i + 1}行${payload.code ? `(${payload.code})` : ''}: ${
|
||||
e?.message || '失败'
|
||||
}`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
hide();
|
||||
loading.value = false;
|
||||
if (fail > 0) {
|
||||
message.warning(`恢复完成：成功${ok}，失败${fail}`);
|
||||
// 避免弹窗过长，只展示前几条
|
||||
Modal.error({
|
||||
title: '部分恢复失败',
|
||||
content: createVNode(
|
||||
'pre',
|
||||
{
|
||||
style:
|
||||
'white-space: pre-wrap; max-height: 320px; overflow: auto; margin: 0;'
|
||||
},
|
||||
errors.slice(0, 8).join('\n')
|
||||
)
|
||||
});
|
||||
} else {
|
||||
message.success(`恢复完成：成功${ok}`);
|
||||
}
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
},
|
||||
onCancel: () => {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
} catch (e: any) {
|
||||
loading.value = false;
|
||||
message.error(e?.message || '解析失败，请重试');
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
/* 更新 visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
</script>
|
||||
410
src/views/cms/cmsAd/components/cmsAdEdit.vue
Normal file
410
src/views/cms/cmsAd/components/cmsAdEdit.vue
Normal file
@@ -0,0 +1,410 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="1000"
|
||||
: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: 3, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="类型" name="type">
|
||||
<a-radio-group
|
||||
v-model:value="form.type"
|
||||
:disabled="isUpdate || !disabled"
|
||||
@change="onTypeChange"
|
||||
>
|
||||
<a-radio :value="1">轮播</a-radio>
|
||||
<a-radio :value="2">图片</a-radio>
|
||||
<a-radio :value="3">视频</a-radio>
|
||||
<a-radio :value="4">文本</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="名称" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="100"
|
||||
style="width: 500px"
|
||||
placeholder="请输入广告名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="编号" name="code">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="100"
|
||||
style="width: 500px"
|
||||
placeholder="请输入广告唯一标识"
|
||||
v-model:value="form.code"
|
||||
/>
|
||||
</a-form-item>
|
||||
<template v-if="form.type == 1">
|
||||
<a-form-item label="多图" name="images">
|
||||
<div :class="`item-style ${form.style}`">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="9"
|
||||
:data="images"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 mt-2">
|
||||
<div
|
||||
class="w-[500px] space-y-2"
|
||||
v-for="(_, index) in images"
|
||||
:key="index"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="images[index].title"
|
||||
:placeholder="`请输入图片标题${index + 1}`"
|
||||
/>
|
||||
<a-input
|
||||
v-model:value="images[index].path"
|
||||
placeholder="https://"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-if="form.type == 2">
|
||||
<a-form-item label="单图" name="images">
|
||||
<div :class="`item-style ${form.style}`">
|
||||
<SelectFile
|
||||
:limit="1"
|
||||
:data="images"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="图片标题" name="title" v-if="images.length > 0">
|
||||
<a-input
|
||||
v-model:value="images[0].title"
|
||||
placeholder="请输入图片标题"
|
||||
style="width: 500px"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="图片链接" name="path" v-if="images.length > 0">
|
||||
<a-input
|
||||
v-model:value="images[0].path"
|
||||
placeholder="https://"
|
||||
style="width: 500px"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-if="form.type == 3">
|
||||
<a-form-item
|
||||
label="视频"
|
||||
name="images"
|
||||
extra="请上传视频文件，仅支持mp4格式，大小200M以内"
|
||||
>
|
||||
<div :class="`item-style ${form.style}`">
|
||||
<SelectFile
|
||||
:placeholder="`请选择视频文件`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="视频标题" name="title" v-if="images.length > 0">
|
||||
<a-input
|
||||
v-model:value="images[0].title"
|
||||
placeholder="请输入视频标题"
|
||||
style="width: 500px"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="视频链接" name="path" v-if="images.length > 0">
|
||||
<a-input
|
||||
v-model:value="images[0].path"
|
||||
placeholder="https://"
|
||||
style="width: 500px"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-if="form.type == 4">
|
||||
<a-form-item label="文本" name="comments">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入广告内容"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<a-form-item label="链接" name="path" v-if="form.type == 4">
|
||||
<a-input v-model:value="form.path" placeholder="https://" />
|
||||
</a-form-item>
|
||||
<a-form-item label="尺寸">
|
||||
<a-space>
|
||||
<a-input-number
|
||||
allow-clear
|
||||
:maxlength="3000"
|
||||
placeholder="宽"
|
||||
v-model:value="form.width"
|
||||
/>
|
||||
<span>X</span>
|
||||
<a-input-number
|
||||
allow-clear
|
||||
:maxlength="2000"
|
||||
placeholder="高"
|
||||
v-model:value="form.height"
|
||||
/>
|
||||
</a-space>
|
||||
<div class="pt-2">
|
||||
<span class="text-gray-400"
|
||||
>广告位尺寸大小(默认值：100% * 500px)</span
|
||||
>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="位置">
|
||||
<a-tree-select
|
||||
allow-clear
|
||||
:tree-data="navigationList"
|
||||
tree-default-expand-all
|
||||
style="width: 500px"
|
||||
placeholder="请选择所属栏目"
|
||||
:value="form.categoryId || undefined"
|
||||
:listHeight="700"
|
||||
:dropdown-style="{ overflow: 'auto' }"
|
||||
@update:value="(value?: number) => (form.categoryId = value)"
|
||||
@change="onCategoryId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="style" name="style">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="font-bold text-red-500"
|
||||
v-model:value="form.style"
|
||||
/>
|
||||
<div class="pt-2 none">
|
||||
<a
|
||||
class="text-sm text-gray-400"
|
||||
href="https://tailwindcss.com/docs/padding"
|
||||
target="_blank"
|
||||
>Tailwind 使用说明</a
|
||||
>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="描述" name="comments" v-if="form.type != 4">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入广告描述"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="9999"
|
||||
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>
|
||||
<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 } from 'ele-admin-pro';
|
||||
import { addCmsAd, updateCmsAd } from '@/api/cms/cmsAd';
|
||||
import { CmsAd } from '@/api/cms/cmsAd/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { FileRecord } from '@/api/system/file/model';
|
||||
import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const disabled = ref(true);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsAd | null;
|
||||
// 栏目导航
|
||||
navigationList?: CmsNavigation[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 已上传数据
|
||||
const images = ref<any[]>([]);
|
||||
const { locale } = useI18n();
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
// 表格选中数据
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<CmsAd>({
|
||||
adId: undefined,
|
||||
type: undefined,
|
||||
code: undefined,
|
||||
categoryId: undefined,
|
||||
name: '',
|
||||
style: '',
|
||||
images: '',
|
||||
imageList: undefined,
|
||||
width: '',
|
||||
height: '',
|
||||
path: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
lang: locale.value || undefined,
|
||||
sortNumber: 100,
|
||||
merchantId: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入标题',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择类型',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
images: [
|
||||
{
|
||||
required: true,
|
||||
message: '请上传图片或视频',
|
||||
trigger: 'blur',
|
||||
validator: (_rule: any, _: string) => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (images.value.length == 0) {
|
||||
return reject('请上传图片或视频文件');
|
||||
}
|
||||
return resolve();
|
||||
});
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
const chooseFile = (data: FileRecord) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url:
|
||||
data.downloadUrl +
|
||||
'?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90',
|
||||
status: 'done',
|
||||
title: '', // 初始化标题为空
|
||||
path: '' // 初始化链接为空
|
||||
});
|
||||
form.images =
|
||||
data.downloadUrl +
|
||||
'?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90';
|
||||
};
|
||||
|
||||
const onDeleteItem = (index: number) => {
|
||||
images.value.splice(index, 1);
|
||||
form.images = '';
|
||||
};
|
||||
|
||||
// 选择栏目
|
||||
const onCategoryId = (id: number) => {
|
||||
form.categoryId = id;
|
||||
};
|
||||
|
||||
const onTypeChange = () => {
|
||||
disabled.value = !disabled.value;
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form,
|
||||
images: JSON.stringify(images.value)
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateCmsAd : addCmsAd;
|
||||
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) {
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
images.value = props.data.imageList;
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
images.value = [];
|
||||
disabled.value = true;
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
98
src/views/cms/cmsAd/components/search.vue
Normal file
98
src/views/cms/cmsAd/components/search.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<!-- 搜索表单 -->
|
||||
<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-button type="dashed" :disabled="exportLoading" @click="backup"
|
||||
>备份</a-button
|
||||
>
|
||||
<a-button type="dashed" @click="restore">恢复</a-button>
|
||||
<a-tree-select
|
||||
allow-clear
|
||||
:tree-data="navigationList"
|
||||
tree-default-expand-all
|
||||
style="width: 240px"
|
||||
:listHeight="700"
|
||||
placeholder="请选择栏目"
|
||||
:value="where.categoryId || undefined"
|
||||
:dropdown-style="{ overflow: 'auto' }"
|
||||
@update:value="(value?: number) => (where.categoryId = value)"
|
||||
@change="onCategoryId"
|
||||
/>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
style="width: 280px"
|
||||
v-model:value="where.keywords"
|
||||
@search="reload"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { watch } from 'vue';
|
||||
import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
||||
import { CmsAdParam } from '@/api/cms/cmsAd/model';
|
||||
import useSearch from '@/utils/use-search';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
navigationList?: CmsNavigation[];
|
||||
exportLoading?: boolean;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: CmsAdParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
(e: 'backup'): void;
|
||||
(e: 'restore'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<CmsAdParam>({
|
||||
adId: undefined,
|
||||
pageId: undefined,
|
||||
keywords: ''
|
||||
});
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 备份
|
||||
const backup = () => {
|
||||
emit('backup');
|
||||
};
|
||||
|
||||
// 恢复
|
||||
const restore = () => {
|
||||
emit('restore');
|
||||
};
|
||||
|
||||
// 按分类查询
|
||||
const onCategoryId = (id: number) => {
|
||||
where.categoryId = id;
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
433
src/views/cms/cmsAd/index.vue
Normal file
433
src/views/cms/cmsAd/index.vue
Normal file
@@ -0,0 +1,433 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="adId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
:navigationList="navigationList"
|
||||
:exportLoading="exportLoading"
|
||||
@backup="handleExport"
|
||||
@restore="openImport"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-tag v-if="record.type == 1" color="pink">轮播</a-tag>
|
||||
<a-tag v-if="record.type == 2" color="blue">图片</a-tag>
|
||||
<a-tag v-if="record.type == 3" color="cyan">视频</a-tag>
|
||||
<a-tag v-if="record.type == 4">文本</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'name'">
|
||||
<div>{{ record.name }}</div>
|
||||
<div class="text-gray-400">{{ record.code }}</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'categoryId'">
|
||||
<span class="text-gray-400">{{ record.categoryName }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'comments'">
|
||||
<span class="text-gray-400">{{ record.comments }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'images'">
|
||||
<div :class="`item ${record.style}`">
|
||||
<template
|
||||
v-if="record.type != 4"
|
||||
v-for="(item, index) in record.imageList"
|
||||
:key="index"
|
||||
>
|
||||
<a-image :src="item.url" :width="80" />
|
||||
</template>
|
||||
<template v-if="record.type == 4">
|
||||
{{ record.comments }}
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsAdEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
:navigationList="navigationList"
|
||||
@done="reload"
|
||||
/>
|
||||
|
||||
<!-- 导入备份弹窗 -->
|
||||
<Import v-model:visible="showImport" @done="reload" />
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toTreeData } from 'ele-admin-pro';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CmsAdEdit from './components/cmsAdEdit.vue';
|
||||
import Import from './components/Import.vue';
|
||||
import {
|
||||
listCmsAd,
|
||||
pageCmsAd,
|
||||
removeBatchCmsAd,
|
||||
removeCmsAd
|
||||
} from '@/api/cms/cmsAd';
|
||||
import type { CmsAd, CmsAdParam } from '@/api/cms/cmsAd/model';
|
||||
import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
||||
import { listCmsNavigation } from '@/api/cms/cmsNavigation';
|
||||
import { getPageTitle } from '@/utils/common';
|
||||
import { getTenantId } from '@/utils/domain';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
// 国际化
|
||||
const { locale } = useI18n();
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsAd[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsAd | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
const showMove = ref(false);
|
||||
// 是否显示导入备份弹窗
|
||||
const showImport = ref(false);
|
||||
// 栏目数据
|
||||
const navigationList = ref<CmsNavigation[]>();
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
// 导出状态
|
||||
const exportLoading = ref(false);
|
||||
// 记录最新搜索条件，供备份导出使用
|
||||
const lastWhere = ref<CmsAdParam>({});
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
if (filters) {
|
||||
where.status = filters.status;
|
||||
}
|
||||
// where.lang = locale.value || undefined;
|
||||
return pageCmsAd({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
width: 90,
|
||||
dataIndex: 'adId'
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
ellipsis: true,
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '广告图片',
|
||||
dataIndex: 'images',
|
||||
key: 'images'
|
||||
},
|
||||
{
|
||||
title: '栏目名称',
|
||||
dataIndex: 'categoryId',
|
||||
key: 'categoryId',
|
||||
align: 'center',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsAdParam) => {
|
||||
if (where) {
|
||||
lastWhere.value = { ...where };
|
||||
}
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsAd) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 打开导入弹窗 */
|
||||
const openImport = () => {
|
||||
showImport.value = true;
|
||||
};
|
||||
|
||||
/* 备份导出 */
|
||||
const handleExport = async () => {
|
||||
if (exportLoading.value) {
|
||||
return;
|
||||
}
|
||||
exportLoading.value = true;
|
||||
message.loading('正在准备导出数据...', 0);
|
||||
|
||||
const array: (string | number)[][] = [
|
||||
[
|
||||
'广告ID',
|
||||
'类型',
|
||||
'唯一标识',
|
||||
'栏目ID',
|
||||
'栏目名称',
|
||||
'广告位名称',
|
||||
'宽',
|
||||
'高',
|
||||
'样式',
|
||||
'图片数据',
|
||||
'链接',
|
||||
'排序号',
|
||||
'备注',
|
||||
'状态',
|
||||
'语言',
|
||||
'租户ID',
|
||||
'商户ID'
|
||||
]
|
||||
];
|
||||
|
||||
try {
|
||||
const where: CmsAdParam = {
|
||||
...(lastWhere.value ?? {}),
|
||||
lang: locale.value || undefined
|
||||
};
|
||||
const list = await listCmsAd(where);
|
||||
if (!list || list.length === 0) {
|
||||
message.destroy();
|
||||
message.warning('没有数据可以导出');
|
||||
exportLoading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
list.forEach((d: CmsAd) => {
|
||||
const images = Array.isArray(d.imageList)
|
||||
? JSON.stringify(d.imageList)
|
||||
: typeof d.images === 'string'
|
||||
? d.images
|
||||
: JSON.stringify(d.images ?? []);
|
||||
array.push([
|
||||
`${d.adId || ''}`,
|
||||
`${d.type ?? ''}`,
|
||||
`${d.code || ''}`,
|
||||
`${d.categoryId ?? ''}`,
|
||||
`${d.categoryName || ''}`,
|
||||
`${d.name || ''}`,
|
||||
`${d.width || ''}`,
|
||||
`${d.height || ''}`,
|
||||
`${d.style || ''}`,
|
||||
`${images || ''}`,
|
||||
`${d.path || ''}`,
|
||||
`${d.sortNumber ?? ''}`,
|
||||
`${d.comments || ''}`,
|
||||
`${d.status ?? ''}`,
|
||||
`${d.lang || ''}`,
|
||||
`${d.tenantId ?? ''}`,
|
||||
`${d.merchantId ?? ''}`
|
||||
]);
|
||||
});
|
||||
|
||||
const sheetName = `bak_cms_ad_${getTenantId()}`;
|
||||
const workbook = {
|
||||
SheetNames: [sheetName],
|
||||
Sheets: {}
|
||||
} as any;
|
||||
const sheet = utils.aoa_to_sheet(array);
|
||||
workbook.Sheets[sheetName] = sheet;
|
||||
sheet['!cols'] = [
|
||||
{ wch: 10 }, // 广告ID
|
||||
{ wch: 8 }, // 类型
|
||||
{ wch: 24 }, // 唯一标识
|
||||
{ wch: 10 }, // 栏目ID
|
||||
{ wch: 18 }, // 栏目名称
|
||||
{ wch: 24 }, // 广告位名称
|
||||
{ wch: 10 }, // 宽
|
||||
{ wch: 10 }, // 高
|
||||
{ wch: 20 }, // 样式
|
||||
{ wch: 60 }, // 图片数据(JSON)
|
||||
{ wch: 30 }, // 链接
|
||||
{ wch: 10 }, // 排序号
|
||||
{ wch: 24 }, // 备注
|
||||
{ wch: 8 }, // 状态
|
||||
{ wch: 10 }, // 语言
|
||||
{ wch: 10 }, // 租户ID
|
||||
{ wch: 10 } // 商户ID
|
||||
];
|
||||
|
||||
message.destroy();
|
||||
message.loading('正在生成Excel文件...', 0);
|
||||
setTimeout(() => {
|
||||
writeFile(workbook, `${sheetName}.xlsx`);
|
||||
exportLoading.value = false;
|
||||
message.destroy();
|
||||
message.success(`成功导出 ${list.length} 条记录`);
|
||||
}, 600);
|
||||
} catch (e: any) {
|
||||
exportLoading.value = false;
|
||||
message.destroy();
|
||||
message.error(e?.message || '导出失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsAd) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsAd(row.adId)
|
||||
.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);
|
||||
removeBatchCmsAd(selection.value.map((d) => d.adId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
// 加载栏目数据
|
||||
if (!navigationList.value) {
|
||||
listCmsNavigation({}).then((res) => {
|
||||
navigationList.value = toTreeData({
|
||||
data: res?.map((d) => {
|
||||
d.value = d.navigationId;
|
||||
d.label = d.title;
|
||||
if (!d.component) {
|
||||
d.disabled = true;
|
||||
}
|
||||
return d;
|
||||
}),
|
||||
idField: 'navigationId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsAd) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsAd'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
217
src/views/cms/cmsAdRecord/components/cmsAdRecordEdit.vue
Normal file
217
src/views/cms/cmsAdRecord/components/cmsAdRecordEdit.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="title">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入广告标题"
|
||||
v-model:value="form.title"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="图片地址" name="path">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入图片地址"
|
||||
v-model:value="form.path"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="链接地址" name="url">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入链接地址"
|
||||
v-model:value="form.url"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="广告位ID" name="adId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入广告位ID"
|
||||
v-model:value="form.adId"
|
||||
/>
|
||||
</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="状态, 0正常, 1冻结" 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 { addCmsAdRecord, updateCmsAdRecord } from '@/api/cms/cmsAdRecord';
|
||||
import { CmsAdRecord } from '@/api/cms/cmsAdRecord/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsAdRecord | null;
|
||||
}>();
|
||||
|
||||
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<CmsAdRecord>({
|
||||
adRecordId: undefined,
|
||||
title: undefined,
|
||||
path: undefined,
|
||||
url: undefined,
|
||||
adId: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsAdRecordName: [
|
||||
{
|
||||
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 { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateCmsAdRecord
|
||||
: addCmsAdRecord;
|
||||
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/cmsAdRecord/components/search.vue
Normal file
42
src/views/cms/cmsAdRecord/components/search.vue
Normal 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 type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
268
src/views/cms/cmsAdRecord/index.vue
Normal file
268
src/views/cms/cmsAdRecord/index.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="cmsAdRecordId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsAdRecordEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CmsAdRecordEdit from './components/cmsAdRecordEdit.vue';
|
||||
import {
|
||||
pageCmsAdRecord,
|
||||
removeCmsAdRecord,
|
||||
removeBatchCmsAdRecord
|
||||
} from '@/api/cms/cmsAdRecord';
|
||||
import type {
|
||||
CmsAdRecord,
|
||||
CmsAdRecordParam
|
||||
} from '@/api/cms/cmsAdRecord/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsAdRecord[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsAdRecord | 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;
|
||||
}
|
||||
return pageCmsAdRecord({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'adRecordId',
|
||||
key: 'adRecordId',
|
||||
align: 'center',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '广告标题',
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '图片地址',
|
||||
dataIndex: 'path',
|
||||
key: 'path',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '链接地址',
|
||||
dataIndex: 'url',
|
||||
key: 'url',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '广告位ID',
|
||||
dataIndex: 'adId',
|
||||
key: 'adId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '排序(数字越小越靠前)',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态, 0正常, 1冻结',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsAdRecordParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsAdRecord) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsAdRecord) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsAdRecord(row.cmsAdRecordId)
|
||||
.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);
|
||||
removeBatchCmsAdRecord(selection.value.map((d) => d.cmsAdRecordId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsAdRecord) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsAdRecord'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
82
src/views/cms/cmsArticle/components/Import.vue
Normal file
82
src/views/cms/cmsArticle/components/Import.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<!-- 用户导入弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="520"
|
||||
:footer="null"
|
||||
title="文章批量导入"
|
||||
:visible="visible"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-upload-dragger
|
||||
accept=".xls,.xlsx"
|
||||
:show-upload-list="false"
|
||||
:customRequest="doUpload"
|
||||
style="padding: 24px 0; margin-bottom: 16px"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<cloud-upload-outlined />
|
||||
</p>
|
||||
<p class="ant-upload-hint">将文件拖到此处，或点击上传</p>
|
||||
</a-upload-dragger>
|
||||
</a-spin>
|
||||
<div class="ele-text-center">
|
||||
<span>只能上传xls、xlsx文件，导入模板和导出模板格式一致</span>
|
||||
</div>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { CloudUploadOutlined } from '@ant-design/icons-vue';
|
||||
import { importArticles } from '@/api/cms/cmsArticle';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
defineProps<{
|
||||
// 是否打开弹窗
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
// 导入请求状态
|
||||
const loading = ref(false);
|
||||
|
||||
/* 上传 */
|
||||
const doUpload = ({ file }) => {
|
||||
if (
|
||||
![
|
||||
'application/vnd.ms-excel',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
].includes(file.type)
|
||||
) {
|
||||
message.error('只能选择 excel 文件');
|
||||
return false;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 10) {
|
||||
message.error('大小不能超过 10MB');
|
||||
return false;
|
||||
}
|
||||
loading.value = true;
|
||||
importArticles(file)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
return false;
|
||||
};
|
||||
|
||||
/* 更新 visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
</script>
|
||||
1838
src/views/cms/cmsArticle/components/articleEdit.vue
Normal file
1838
src/views/cms/cmsArticle/components/articleEdit.vue
Normal file
File diff suppressed because it is too large
Load Diff
208
src/views/cms/cmsArticle/components/articleUpdate.vue
Normal file
208
src/views/cms/cmsArticle/components/articleUpdate.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="600"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="'批量更新'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 3, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 24, sm: 24, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item>
|
||||
<a-alert :message="'提示：每次最多修改 50000 条数据'" banner />
|
||||
</a-form-item>
|
||||
<a-form-item label="选择栏目">
|
||||
<a-tree-select
|
||||
allow-clear
|
||||
:tree-data="navigationList"
|
||||
tree-default-expand-all
|
||||
style="width: 400px"
|
||||
placeholder="请选择栏目"
|
||||
:value="form.categoryId || undefined"
|
||||
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
|
||||
@update:value="(value?: number) => (form.categoryId = value)"
|
||||
@change="onCategoryId"
|
||||
/>
|
||||
</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 { updateBatchCmsArticle } from '@/api/cms/cmsArticle';
|
||||
import { CmsArticle } from '@/api/cms/cmsArticle/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
|
||||
import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
||||
|
||||
// 是否是修改
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 表格选中数据
|
||||
selection?: CmsArticle[];
|
||||
// 栏目数据
|
||||
navigationList?: CmsNavigation[];
|
||||
}>();
|
||||
|
||||
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 content = ref('');
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<CmsArticle>({
|
||||
articleId: undefined,
|
||||
// 文章模型
|
||||
model: 'detail',
|
||||
// 封面图
|
||||
image: '',
|
||||
// 文章标题
|
||||
title: '',
|
||||
type: 0,
|
||||
// 展现方式
|
||||
showType: 10,
|
||||
// 文章来源
|
||||
source: '-',
|
||||
// 文章类型
|
||||
categoryId: undefined,
|
||||
// 栏目名称
|
||||
categoryName: undefined,
|
||||
// 文章内容
|
||||
content: '',
|
||||
// 虚拟阅读量
|
||||
virtualViews: 0,
|
||||
// 实际阅读量
|
||||
actualViews: 0,
|
||||
permission: 0,
|
||||
password: undefined,
|
||||
password2: undefined,
|
||||
// 用户ID
|
||||
userId: undefined,
|
||||
files: '',
|
||||
// 排序
|
||||
sortNumber: 100,
|
||||
// 备注
|
||||
comments: undefined,
|
||||
// 状态
|
||||
status: 1,
|
||||
// 创建时间
|
||||
createTime: '',
|
||||
// 更新时间
|
||||
updateTime: ''
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择文章标题',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
categoryId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择栏目',
|
||||
type: 'number',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入文章内容',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (content.value == '') {
|
||||
return Promise.reject('请输入文字内容');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 选择栏目
|
||||
const onCategoryId = (id: number) => {
|
||||
console.log(id);
|
||||
form.categoryId = id;
|
||||
};
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
props.selection?.map((d) => d.articleId);
|
||||
updateBatchCmsArticle({
|
||||
ids: props.selection?.map((d) => d.articleId),
|
||||
data: {
|
||||
categoryId: form.categoryId
|
||||
}
|
||||
})
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
loading.value = false;
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
329
src/views/cms/cmsArticle/components/search.vue
Normal file
329
src/views/cms/cmsArticle/components/search.vue
Normal file
@@ -0,0 +1,329 @@
|
||||
<!-- 搜索表单 -->
|
||||
<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-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
:disabled="selection?.length === 0"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<DeleteOutlined />
|
||||
</template>
|
||||
<span>批量删除</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="selection?.length === 0"
|
||||
@click="updateBatch"
|
||||
>
|
||||
移动
|
||||
</a-button>
|
||||
<a-radio-group
|
||||
v-model:value="type"
|
||||
@change="handleSearch"
|
||||
v-if="setting.setting?.articleReview"
|
||||
>
|
||||
<a-radio-button type="text" value="已发布"
|
||||
>已发布({{ articleCount?.totalNum }})
|
||||
</a-radio-button>
|
||||
<a-radio-button value="待审核"
|
||||
>待审核({{ articleCount?.totalNum2 }})
|
||||
</a-radio-button>
|
||||
<a-radio-button value="已驳回"
|
||||
>已驳回({{ articleCount?.totalNum3 }})
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-tree-select
|
||||
allow-clear
|
||||
:tree-data="navigationList"
|
||||
tree-default-expand-all
|
||||
style="width: 240px"
|
||||
:listHeight="700"
|
||||
placeholder="请选择栏目"
|
||||
:value="where.categoryId || undefined"
|
||||
:dropdown-style="{ overflow: 'auto' }"
|
||||
@update:value="(value?: number) => (where.categoryId = value)"
|
||||
@change="onCategoryId"
|
||||
/>
|
||||
<ChooseDictionary
|
||||
v-if="showChooseDict"
|
||||
dict-code="NavigationModel"
|
||||
:placeholder="`选择模型`"
|
||||
style="width: 120px"
|
||||
v-model:value="where.model"
|
||||
@done="chooseModel"
|
||||
/>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
style="width: 240px"
|
||||
v-model:value="where.keywords"
|
||||
@search="reload"
|
||||
/>
|
||||
<a-button type="text" @click="reset">重置</a-button>
|
||||
<a-button type="text" @click="handleExport">导出xls</a-button>
|
||||
<a-button type="text" @click="openImport">导入xls</a-button>
|
||||
</a-space>
|
||||
|
||||
<!-- 导入弹窗 -->
|
||||
<import v-model:visible="showImport" @done="reload" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
import { getCount, listCmsArticle } from '@/api/cms/cmsArticle';
|
||||
import type {
|
||||
CmsArticle,
|
||||
CmsArticleCount,
|
||||
CmsArticleParam
|
||||
} from '@/api/cms/cmsArticle/model';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
||||
import dayjs from 'dayjs';
|
||||
import Import from './Import.vue';
|
||||
import { useWebsiteSettingStore } from '@/store/modules/setting';
|
||||
import { openUrl } from '@/utils/common';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: CmsArticle[];
|
||||
merchantId?: number;
|
||||
navigationList?: CmsNavigation[];
|
||||
categoryId?: number;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const type = ref<string>();
|
||||
const setting = useWebsiteSettingStore();
|
||||
// 统计数据
|
||||
const articleCount = ref<CmsArticleCount>();
|
||||
const showChooseDict = ref<boolean>(false);
|
||||
// 请求状态
|
||||
const loading = ref(false);
|
||||
const xlsFileName = ref<string>();
|
||||
const articleList = ref<CmsArticle[]>([]);
|
||||
// 是否显示用户导入弹窗
|
||||
const showImport = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<CmsArticleParam>({
|
||||
articleId: undefined,
|
||||
model: undefined,
|
||||
categoryId: undefined,
|
||||
merchantId: undefined,
|
||||
keywords: '',
|
||||
sceneType: undefined,
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: CmsArticleParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 批量删除
|
||||
const removeBatch = () => {
|
||||
emit('remove');
|
||||
};
|
||||
|
||||
// 批量更新
|
||||
const updateBatch = () => {
|
||||
emit('batchMove');
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openImport = () => {
|
||||
showImport.value = true;
|
||||
};
|
||||
|
||||
const handleSearch = (e) => {
|
||||
const text = e.target.value;
|
||||
if (text === '已发布') {
|
||||
where.status = 0;
|
||||
}
|
||||
if (text === '待审核') {
|
||||
where.status = 1;
|
||||
}
|
||||
if (text === '已驳回') {
|
||||
where.status = 2;
|
||||
}
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
getCount(where).then((data: any) => {
|
||||
articleCount.value = data;
|
||||
});
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 按模型查找
|
||||
const chooseModel = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 按分类查询
|
||||
const onCategoryId = (id: number) => {
|
||||
where.categoryId = id;
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 导出
|
||||
const handleExport = async () => {
|
||||
loading.value = true;
|
||||
const array: (string | number)[][] = [
|
||||
[
|
||||
'文章ID',
|
||||
'文章标题',
|
||||
'封面图片',
|
||||
'所属栏目',
|
||||
'栏目ID',
|
||||
'父级栏目名称',
|
||||
'父级栏目ID',
|
||||
'文章内容',
|
||||
'摘要',
|
||||
'来源',
|
||||
'实际阅读量',
|
||||
'作者',
|
||||
'发布时间',
|
||||
'类型',
|
||||
'模型',
|
||||
'详情页模板',
|
||||
'话题',
|
||||
'关键词',
|
||||
'产品概述',
|
||||
'显示方式',
|
||||
'客户端',
|
||||
'文件列表',
|
||||
'视频地址',
|
||||
'点赞数',
|
||||
'评论数',
|
||||
'推荐',
|
||||
'用户ID',
|
||||
'商户ID',
|
||||
'语言',
|
||||
'排序',
|
||||
`状态`,
|
||||
'租户ID'
|
||||
]
|
||||
];
|
||||
|
||||
// 按搜索结果导出
|
||||
where.sceneType = 'Content';
|
||||
await listCmsArticle(where)
|
||||
.then((list) => {
|
||||
articleList.value = list;
|
||||
list?.forEach((d: CmsArticle) => {
|
||||
array.push([
|
||||
`${d.articleId}`,
|
||||
`${d.title}`,
|
||||
`${d.image}`,
|
||||
`${d.categoryName}`,
|
||||
`${d.categoryId}`,
|
||||
`${d.parentName}`,
|
||||
`${d.parentId}`,
|
||||
`${d.content}`,
|
||||
`${d.comments}`,
|
||||
`${d.source}`,
|
||||
`${d.actualViews}`,
|
||||
`${d.author}`,
|
||||
`${d.createTime}`,
|
||||
`${d.type}`,
|
||||
`${d.model}`,
|
||||
`${d.detail}`,
|
||||
`${d.topic}`,
|
||||
`${d.tags}`,
|
||||
`${d.overview}`,
|
||||
`${d.showType}`,
|
||||
`${d.platform}`,
|
||||
`${d.files}`,
|
||||
`${d.video}`,
|
||||
`${d.likes}`,
|
||||
`${d.commentNumbers}`,
|
||||
`${d.recommend}`,
|
||||
`${d.userId}`,
|
||||
`${d.merchantId}`,
|
||||
`${d.lang}`,
|
||||
`${d.sortNumber}`,
|
||||
`${d.status}`,
|
||||
`${d.tenantId}`
|
||||
]);
|
||||
});
|
||||
const sheetName = `导出文章列表${dayjs(new Date()).format('YYYYMMDD')}`;
|
||||
const workbook = {
|
||||
SheetNames: [sheetName],
|
||||
Sheets: {}
|
||||
};
|
||||
const sheet = utils.aoa_to_sheet(array);
|
||||
workbook.Sheets[sheetName] = sheet;
|
||||
// 设置列宽
|
||||
sheet['!cols'] = [
|
||||
{ wch: 10 },
|
||||
{ wch: 40 },
|
||||
{ wch: 20 },
|
||||
{ wch: 20 },
|
||||
{ wch: 60 },
|
||||
{ wch: 15 },
|
||||
{ wch: 10 },
|
||||
{ wch: 10 },
|
||||
{ wch: 20 },
|
||||
{ wch: 10 },
|
||||
{ wch: 20 }
|
||||
];
|
||||
message.loading('正在导出...');
|
||||
setTimeout(() => {
|
||||
writeFile(
|
||||
workbook,
|
||||
`${
|
||||
where.createTimeEnd ? xlsFileName.value + '_' : ''
|
||||
}${sheetName}.xlsx`
|
||||
);
|
||||
loading.value = false;
|
||||
}, 1000);
|
||||
})
|
||||
.catch((msg) => {
|
||||
message.error(msg);
|
||||
loading.value = false;
|
||||
})
|
||||
.finally(() => {});
|
||||
};
|
||||
|
||||
/* 重置 */
|
||||
const reset = () => {
|
||||
resetFields();
|
||||
type.value = undefined;
|
||||
reload();
|
||||
openUrl(`/website/article`);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.merchantId,
|
||||
() => {
|
||||
if (props.categoryId) {
|
||||
where.categoryId = props.categoryId;
|
||||
}
|
||||
reload();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
51
src/views/cms/cmsArticle/dictionary/source-select.vue
Normal file
51
src/views/cms/cmsArticle/dictionary/source-select.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<!-- 文章来源选择下拉框 -->
|
||||
<template>
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
:options="data"
|
||||
allow-clear
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
@update:value="updateValue"
|
||||
@blur="onBlur"
|
||||
@change="onChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getDictionaryOptions } from '@/utils/common';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:value', value: string): void;
|
||||
(e: 'blur'): void;
|
||||
(e: 'change'): void;
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择文章来源'
|
||||
}
|
||||
);
|
||||
|
||||
// 字典数据
|
||||
const data = getDictionaryOptions('articleSource');
|
||||
|
||||
/* 更新选中数据 */
|
||||
const updateValue = (value: string) => {
|
||||
emit('update:value', value);
|
||||
};
|
||||
|
||||
/* 失去焦点 */
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
|
||||
/* 选择事件 */
|
||||
const onChange = () => {
|
||||
emit('change');
|
||||
};
|
||||
</script>
|
||||
442
src/views/cms/cmsArticle/index.vue
Normal file
442
src/views/cms/cmsArticle/index.vue
Normal file
@@ -0,0 +1,442 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="articleId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
v-model:selection="selection"
|
||||
:scroll="{ x: 1200 }"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
:navigationList="navigationList"
|
||||
:merchantId="merchantId"
|
||||
:categoryId="categoryId"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'title'">
|
||||
<span class="text-black">{{ record.title }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'categoryName'">
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
{{ record.categoryId }}
|
||||
</template>
|
||||
<span class="text-gray-400">{{ record.categoryName }}</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-tag v-if="record.type === 0">虚拟文章</a-tag>
|
||||
<a-tag v-if="record.type === 1">实物文章</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'actualViews'">
|
||||
<span class="text-gray-400">{{ record.actualViews }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image
|
||||
:src="record.image"
|
||||
:width="50"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'salePrice'">
|
||||
￥{{ formatNumber(record.salePrice) }}
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag
|
||||
:color="record.status == 0 ? 'green' : 'red'"
|
||||
class="cursor-pointer"
|
||||
@click="onUpdate(record)"
|
||||
>{{ record.statusText }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'recommend'">
|
||||
<a-space @click="onRecommend(record)">
|
||||
<span v-if="record.recommend === 1" class="ele-text-success"
|
||||
><CheckOutlined
|
||||
/></span>
|
||||
<span v-else class="ele-text-placeholder"><CloseOutlined /></span>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a @click="onShare(record)">预览</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>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<ArticleEdit
|
||||
v-model:visible="showEdit"
|
||||
:navigationList="navigationList"
|
||||
:categoryList="categoryList"
|
||||
:categoryId="categoryId"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
|
||||
<!-- 批量更新 -->
|
||||
<ArticleUpdate
|
||||
v-model:visible="showMove"
|
||||
:navigationList="navigationList"
|
||||
:selection="selection"
|
||||
@done="reload"
|
||||
/>
|
||||
|
||||
<!-- 二维码 -->
|
||||
<Qrcode
|
||||
v-model:visible="showQrcode"
|
||||
:data="current?.url"
|
||||
@done="hideShare"
|
||||
/>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, watch } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import {
|
||||
CheckOutlined,
|
||||
CloseOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { 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 ArticleEdit from './components/articleEdit.vue';
|
||||
import ArticleUpdate from './components/articleUpdate.vue';
|
||||
import {
|
||||
pageCmsArticle,
|
||||
removeCmsArticle,
|
||||
removeBatchCmsArticle,
|
||||
updateCmsArticle,
|
||||
getCmsArticle
|
||||
} from '@/api/cms/cmsArticle';
|
||||
import type { CmsArticle, CmsArticleParam } from '@/api/cms/cmsArticle/model';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import router from '@/router';
|
||||
import { toTreeData } from 'ele-admin-pro';
|
||||
import { detail, getPageTitle } from '@/utils/common';
|
||||
import { listCmsNavigation } from '@/api/cms/cmsNavigation';
|
||||
import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
||||
import { CmsArticleCategory } from '@/api/cms/cmsArticleCategory/model';
|
||||
import { listCmsArticleCategory } from '@/api/cms/cmsArticleCategory';
|
||||
import Qrcode from '@/components/QrCode/index.vue';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
// 国际化
|
||||
const { locale } = useI18n();
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsArticle[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsArticle | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
const showMove = ref(false);
|
||||
// 店铺ID
|
||||
const merchantId = ref<number>();
|
||||
// 栏目ID
|
||||
const categoryId = ref<number>();
|
||||
// 栏目数据
|
||||
const navigationList = ref<CmsNavigation[]>();
|
||||
// 文章分类
|
||||
const categoryList = ref<CmsArticleCategory[]>();
|
||||
// 是否显示二维码
|
||||
const showQrcode = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
if (categoryId.value) {
|
||||
where.categoryId = categoryId.value;
|
||||
}
|
||||
// where.lang = locale.value || undefined;
|
||||
return pageCmsArticle({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'articleId',
|
||||
key: 'articleId',
|
||||
align: 'center',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '封面图',
|
||||
dataIndex: 'image',
|
||||
key: 'image',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '文章标题',
|
||||
dataIndex: 'title',
|
||||
key: 'title'
|
||||
},
|
||||
{
|
||||
title: '栏目名称',
|
||||
dataIndex: 'categoryName',
|
||||
key: 'categoryName',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '所属栏目',
|
||||
dataIndex: 'categoryId',
|
||||
key: 'categoryId',
|
||||
align: 'center',
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '实际阅读量',
|
||||
dataIndex: 'actualViews',
|
||||
key: 'actualViews',
|
||||
sorter: true,
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '虚拟阅读量',
|
||||
dataIndex: 'virtualViews',
|
||||
key: 'virtualViews',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '推荐',
|
||||
dataIndex: 'recommend',
|
||||
key: 'recommend',
|
||||
sorter: true,
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
sorter: true,
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
sorter: true,
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsArticleParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = async (row?: CmsArticle) => {
|
||||
current.value = row ?? null;
|
||||
if (row?.articleId) {
|
||||
current.value = await getCmsArticle(row?.articleId);
|
||||
}
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
// 分享二维码
|
||||
const onShare = (row?: CmsArticle) => {
|
||||
const data = {
|
||||
isMobile: true,
|
||||
...row
|
||||
};
|
||||
data.qrcode = `${detail(data)}`;
|
||||
data.url = `${detail(row)}`;
|
||||
current.value = data ?? null;
|
||||
showQrcode.value = true;
|
||||
};
|
||||
|
||||
const hideShare = () => {
|
||||
showQrcode.value = false;
|
||||
};
|
||||
|
||||
const onUpdate = (row?: CmsArticle) => {
|
||||
const status = row?.status == 0 ? 1 : 0;
|
||||
updateCmsArticle({ ...row, status }).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
const onRecommend = (row: CmsArticle) => {
|
||||
updateCmsArticle({
|
||||
...row,
|
||||
recommend: row.recommend == 1 ? 0 : 1
|
||||
}).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsArticle) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsArticle(row.articleId)
|
||||
.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);
|
||||
removeBatchCmsArticle(selection.value.map((d) => d.articleId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsArticle) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 加载栏目数据
|
||||
if (!navigationList.value) {
|
||||
listCmsNavigation({}).then((res) => {
|
||||
navigationList.value = toTreeData({
|
||||
data: res?.map((d) => {
|
||||
d.value = d.navigationId;
|
||||
d.label = d.title;
|
||||
if (!d.component) {
|
||||
d.disabled = true;
|
||||
}
|
||||
if (d.model == 'index' || d.model == 'page' || d.model == 'order') {
|
||||
d.disabled = true;
|
||||
}
|
||||
return d;
|
||||
}),
|
||||
idField: 'navigationId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 加载文章分类
|
||||
if (!categoryList.value) {
|
||||
listCmsArticleCategory({}).then((res) => {
|
||||
categoryList.value = toTreeData({
|
||||
data: res?.map((d) => {
|
||||
d.value = d.categoryId;
|
||||
d.label = d.title;
|
||||
return d;
|
||||
}),
|
||||
idField: 'categoryId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => router.currentRoute.value.query,
|
||||
(query) => {
|
||||
if (query) {
|
||||
categoryId.value = Number(query.id);
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsArticleV2'
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,312 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="categoryCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入分类标识"
|
||||
v-model:value="form.categoryCode"
|
||||
/>
|
||||
</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="类型 0列表 1单页 2外链" name="type">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入类型 0列表 1单页 2外链"
|
||||
v-model:value="form.type"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="分类图片" name="image">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
@done="chooseImage"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="上级分类ID" name="parentId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入上级分类ID"
|
||||
v-model:value="form.parentId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="路由/链接地址" name="path">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入路由/链接地址"
|
||||
v-model:value="form.path"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="组件路径" name="component">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入组件路径"
|
||||
v-model:value="form.component"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="绑定的页面" name="pageId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入绑定的页面"
|
||||
v-model:value="form.pageId"
|
||||
/>
|
||||
</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="count">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入文章数量"
|
||||
v-model:value="form.count"
|
||||
/>
|
||||
</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="是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)"
|
||||
name="hide"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)"
|
||||
v-model:value="form.hide"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否推荐" name="recommend">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否推荐"
|
||||
v-model:value="form.recommend"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否显示在首页" name="showIndex">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否显示在首页"
|
||||
v-model:value="form.showIndex"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态, 0正常, 1禁用" 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="是否删除, 0否, 1是" name="deleted">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否删除, 0否, 1是"
|
||||
v-model:value="form.deleted"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="修改时间" name="updateTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入修改时间"
|
||||
v-model:value="form.updateTime"
|
||||
/>
|
||||
</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 {
|
||||
addCmsArticleCategory,
|
||||
updateCmsArticleCategory
|
||||
} from '@/api/cms/cmsArticleCategory';
|
||||
import { CmsArticleCategory } from '@/api/cms/cmsArticleCategory/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsArticleCategory | null;
|
||||
}>();
|
||||
|
||||
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<CmsArticleCategory>({
|
||||
categoryId: undefined,
|
||||
categoryCode: undefined,
|
||||
title: undefined,
|
||||
type: undefined,
|
||||
image: undefined,
|
||||
parentId: undefined,
|
||||
path: undefined,
|
||||
component: undefined,
|
||||
pageId: undefined,
|
||||
userId: undefined,
|
||||
count: undefined,
|
||||
hide: undefined,
|
||||
recommend: undefined,
|
||||
showIndex: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsArticleCategoryName: [
|
||||
{
|
||||
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 { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateCmsArticleCategory
|
||||
: addCmsArticleCategory;
|
||||
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/cmsArticleCategory/components/search.vue
Normal file
42
src/views/cms/cmsArticleCategory/components/search.vue
Normal 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 type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
336
src/views/cms/cmsArticleCategory/index.vue
Normal file
336
src/views/cms/cmsArticleCategory/index.vue
Normal file
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="cmsArticleCategoryId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsArticleCategoryEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CmsArticleCategoryEdit from './components/cmsArticleCategoryEdit.vue';
|
||||
import {
|
||||
pageCmsArticleCategory,
|
||||
removeCmsArticleCategory,
|
||||
removeBatchCmsArticleCategory
|
||||
} from '@/api/cms/cmsArticleCategory';
|
||||
import type {
|
||||
CmsArticleCategory,
|
||||
CmsArticleCategoryParam
|
||||
} from '@/api/cms/cmsArticleCategory/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsArticleCategory[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsArticleCategory | 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;
|
||||
}
|
||||
return pageCmsArticleCategory({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '文章分类ID',
|
||||
dataIndex: 'categoryId',
|
||||
key: 'categoryId',
|
||||
align: 'center',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '分类标识',
|
||||
dataIndex: 'categoryCode',
|
||||
key: 'categoryCode',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '分类名称',
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '类型 0列表 1单页 2外链',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '分类图片',
|
||||
dataIndex: 'image',
|
||||
key: 'image',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '上级分类ID',
|
||||
dataIndex: 'parentId',
|
||||
key: 'parentId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '路由/链接地址',
|
||||
dataIndex: 'path',
|
||||
key: 'path',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '组件路径',
|
||||
dataIndex: 'component',
|
||||
key: 'component',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '绑定的页面',
|
||||
dataIndex: 'pageId',
|
||||
key: 'pageId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '用户ID',
|
||||
dataIndex: 'userId',
|
||||
key: 'userId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '文章数量',
|
||||
dataIndex: 'count',
|
||||
key: 'count',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '排序(数字越小越靠前)',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)',
|
||||
dataIndex: 'hide',
|
||||
key: 'hide',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否推荐',
|
||||
dataIndex: 'recommend',
|
||||
key: 'recommend',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否显示在首页',
|
||||
dataIndex: 'showIndex',
|
||||
key: 'showIndex',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态, 0正常, 1禁用',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否删除, 0否, 1是',
|
||||
dataIndex: 'deleted',
|
||||
key: 'deleted',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '修改时间',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsArticleCategoryParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsArticleCategory) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsArticleCategory) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsArticleCategory(row.cmsArticleCategoryId)
|
||||
.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);
|
||||
removeBatchCmsArticleCategory(
|
||||
selection.value.map((d) => d.cmsArticleCategoryId)
|
||||
)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsArticleCategory) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsArticleCategory'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,268 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="文章ID" name="articleId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入文章ID"
|
||||
v-model:value="form.articleId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="评分 (10好评 20中评 30差评)" name="score">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入评分 (10好评 20中评 30差评)"
|
||||
v-model:value="form.score"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="评价内容" name="content">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入评价内容"
|
||||
v-model:value="form.content"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否为图片评价" name="isPicture">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否为图片评价"
|
||||
v-model:value="form.isPicture"
|
||||
/>
|
||||
</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="被评价者ID" name="toUserId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入被评价者ID"
|
||||
v-model:value="form.toUserId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="回复的评论ID" name="replyCommentId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入回复的评论ID"
|
||||
v-model:value="form.replyCommentId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="回复者ID" name="replyUserId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入回复者ID"
|
||||
v-model:value="form.replyUserId"
|
||||
/>
|
||||
</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="状态, 0未读, 1已读" 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="是否删除, 0否, 1是" name="deleted">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否删除, 0否, 1是"
|
||||
v-model:value="form.deleted"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="修改时间" name="updateTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入修改时间"
|
||||
v-model:value="form.updateTime"
|
||||
/>
|
||||
</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 {
|
||||
addCmsArticleComment,
|
||||
updateCmsArticleComment
|
||||
} from '@/api/cms/cmsArticleComment';
|
||||
import { CmsArticleComment } from '@/api/cms/cmsArticleComment/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsArticleComment | null;
|
||||
}>();
|
||||
|
||||
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<CmsArticleComment>({
|
||||
commentId: undefined,
|
||||
articleId: undefined,
|
||||
score: undefined,
|
||||
content: undefined,
|
||||
isPicture: undefined,
|
||||
userId: undefined,
|
||||
toUserId: undefined,
|
||||
replyCommentId: undefined,
|
||||
replyUserId: undefined,
|
||||
deleted: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsArticleCommentName: [
|
||||
{
|
||||
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 { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateCmsArticleComment
|
||||
: addCmsArticleComment;
|
||||
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/cmsArticleComment/components/search.vue
Normal file
42
src/views/cms/cmsArticleComment/components/search.vue
Normal 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 type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
306
src/views/cms/cmsArticleComment/index.vue
Normal file
306
src/views/cms/cmsArticleComment/index.vue
Normal file
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="cmsArticleCommentId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsArticleCommentEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CmsArticleCommentEdit from './components/cmsArticleCommentEdit.vue';
|
||||
import {
|
||||
pageCmsArticleComment,
|
||||
removeCmsArticleComment,
|
||||
removeBatchCmsArticleComment
|
||||
} from '@/api/cms/cmsArticleComment';
|
||||
import type {
|
||||
CmsArticleComment,
|
||||
CmsArticleCommentParam
|
||||
} from '@/api/cms/cmsArticleComment/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsArticleComment[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsArticleComment | 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;
|
||||
}
|
||||
return pageCmsArticleComment({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '评价ID',
|
||||
dataIndex: 'commentId',
|
||||
key: 'commentId',
|
||||
align: 'center',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '文章ID',
|
||||
dataIndex: 'articleId',
|
||||
key: 'articleId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '评分 (10好评 20中评 30差评)',
|
||||
dataIndex: 'score',
|
||||
key: 'score',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '评价内容',
|
||||
dataIndex: 'content',
|
||||
key: 'content',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否为图片评价',
|
||||
dataIndex: 'isPicture',
|
||||
key: 'isPicture',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '评论者ID',
|
||||
dataIndex: 'userId',
|
||||
key: 'userId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '被评价者ID',
|
||||
dataIndex: 'toUserId',
|
||||
key: 'toUserId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '回复的评论ID',
|
||||
dataIndex: 'replyCommentId',
|
||||
key: 'replyCommentId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '回复者ID',
|
||||
dataIndex: 'replyUserId',
|
||||
key: 'replyUserId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '排序(数字越小越靠前)',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态, 0未读, 1已读',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否删除, 0否, 1是',
|
||||
dataIndex: 'deleted',
|
||||
key: 'deleted',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '修改时间',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsArticleCommentParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsArticleComment) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsArticleComment) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsArticleComment(row.cmsArticleCommentId)
|
||||
.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);
|
||||
removeBatchCmsArticleComment(
|
||||
selection.value.map((d) => d.cmsArticleCommentId)
|
||||
)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsArticleComment) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsArticleComment'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,183 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="文章ID" name="articleId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入文章ID"
|
||||
v-model:value="form.articleId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="文章内容" name="content">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入文章内容"
|
||||
v-model:value="form.content"
|
||||
/>
|
||||
</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 {
|
||||
addCmsArticleContent,
|
||||
updateCmsArticleContent
|
||||
} from '@/api/cms/cmsArticleContent';
|
||||
import { CmsArticleContent } from '@/api/cms/cmsArticleContent/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsArticleContent | null;
|
||||
}>();
|
||||
|
||||
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<CmsArticleContent>({
|
||||
id: undefined,
|
||||
articleId: undefined,
|
||||
content: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
cmsArticleContentId: undefined,
|
||||
cmsArticleContentName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsArticleContentName: [
|
||||
{
|
||||
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 { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateCmsArticleContent
|
||||
: addCmsArticleContent;
|
||||
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/cmsArticleContent/components/search.vue
Normal file
42
src/views/cms/cmsArticleContent/components/search.vue
Normal 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 type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
240
src/views/cms/cmsArticleContent/index.vue
Normal file
240
src/views/cms/cmsArticleContent/index.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="cmsArticleContentId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsArticleContentEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CmsArticleContentEdit from './components/cmsArticleContentEdit.vue';
|
||||
import {
|
||||
pageCmsArticleContent,
|
||||
removeCmsArticleContent,
|
||||
removeBatchCmsArticleContent
|
||||
} from '@/api/cms/cmsArticleContent';
|
||||
import type {
|
||||
CmsArticleContent,
|
||||
CmsArticleContentParam
|
||||
} from '@/api/cms/cmsArticleContent/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsArticleContent[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsArticleContent | 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;
|
||||
}
|
||||
return pageCmsArticleContent({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
align: 'center',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '文章ID',
|
||||
dataIndex: 'articleId',
|
||||
key: 'articleId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '文章内容',
|
||||
dataIndex: 'content',
|
||||
key: 'content',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsArticleContentParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsArticleContent) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsArticleContent) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsArticleContent(row.cmsArticleContentId)
|
||||
.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);
|
||||
removeBatchCmsArticleContent(
|
||||
selection.value.map((d) => d.cmsArticleContentId)
|
||||
)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsArticleContent) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsArticleContent'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
183
src/views/cms/cmsArticleCount/components/cmsArticleCountEdit.vue
Normal file
183
src/views/cms/cmsArticleCount/components/cmsArticleCountEdit.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="文章ID" name="articleId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入文章ID"
|
||||
v-model:value="form.articleId"
|
||||
/>
|
||||
</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>
|
||||
</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 {
|
||||
addCmsArticleCount,
|
||||
updateCmsArticleCount
|
||||
} from '@/api/cms/cmsArticleCount';
|
||||
import { CmsArticleCount } from '@/api/cms/cmsArticleCount/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsArticleCount | null;
|
||||
}>();
|
||||
|
||||
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<CmsArticleCount>({
|
||||
id: undefined,
|
||||
articleId: undefined,
|
||||
userId: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
cmsArticleCountId: undefined,
|
||||
cmsArticleCountName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsArticleCountName: [
|
||||
{
|
||||
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 { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateCmsArticleCount
|
||||
: addCmsArticleCount;
|
||||
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/cmsArticleCount/components/search.vue
Normal file
42
src/views/cms/cmsArticleCount/components/search.vue
Normal 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 type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
240
src/views/cms/cmsArticleCount/index.vue
Normal file
240
src/views/cms/cmsArticleCount/index.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="cmsArticleCountId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsArticleCountEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CmsArticleCountEdit from './components/cmsArticleCountEdit.vue';
|
||||
import {
|
||||
pageCmsArticleCount,
|
||||
removeCmsArticleCount,
|
||||
removeBatchCmsArticleCount
|
||||
} from '@/api/cms/cmsArticleCount';
|
||||
import type {
|
||||
CmsArticleCount,
|
||||
CmsArticleCountParam
|
||||
} from '@/api/cms/cmsArticleCount/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsArticleCount[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsArticleCount | 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;
|
||||
}
|
||||
return pageCmsArticleCount({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '主键ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
align: 'center',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '文章ID',
|
||||
dataIndex: 'articleId',
|
||||
key: 'articleId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '用户ID',
|
||||
dataIndex: 'userId',
|
||||
key: 'userId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsArticleCountParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsArticleCount) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsArticleCount) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsArticleCount(row.cmsArticleCountId)
|
||||
.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);
|
||||
removeBatchCmsArticleCount(
|
||||
selection.value.map((d) => d.cmsArticleCountId)
|
||||
)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsArticleCount) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsArticleCount'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
183
src/views/cms/cmsArticleLike/components/cmsArticleLikeEdit.vue
Normal file
183
src/views/cms/cmsArticleLike/components/cmsArticleLikeEdit.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="文章ID" name="articleId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入文章ID"
|
||||
v-model:value="form.articleId"
|
||||
/>
|
||||
</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>
|
||||
</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 {
|
||||
addCmsArticleLike,
|
||||
updateCmsArticleLike
|
||||
} from '@/api/cms/cmsArticleLike';
|
||||
import { CmsArticleLike } from '@/api/cms/cmsArticleLike/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsArticleLike | null;
|
||||
}>();
|
||||
|
||||
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<CmsArticleLike>({
|
||||
id: undefined,
|
||||
articleId: undefined,
|
||||
userId: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
cmsArticleLikeId: undefined,
|
||||
cmsArticleLikeName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsArticleLikeName: [
|
||||
{
|
||||
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 { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateCmsArticleLike
|
||||
: addCmsArticleLike;
|
||||
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/cmsArticleLike/components/search.vue
Normal file
42
src/views/cms/cmsArticleLike/components/search.vue
Normal 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 type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
240
src/views/cms/cmsArticleLike/index.vue
Normal file
240
src/views/cms/cmsArticleLike/index.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="cmsArticleLikeId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsArticleLikeEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CmsArticleLikeEdit from './components/cmsArticleLikeEdit.vue';
|
||||
import {
|
||||
pageCmsArticleLike,
|
||||
removeCmsArticleLike,
|
||||
removeBatchCmsArticleLike
|
||||
} from '@/api/cms/cmsArticleLike';
|
||||
import type {
|
||||
CmsArticleLike,
|
||||
CmsArticleLikeParam
|
||||
} from '@/api/cms/cmsArticleLike/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsArticleLike[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsArticleLike | 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;
|
||||
}
|
||||
return pageCmsArticleLike({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '主键ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
align: 'center',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '文章ID',
|
||||
dataIndex: 'articleId',
|
||||
key: 'articleId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '用户ID',
|
||||
dataIndex: 'userId',
|
||||
key: 'userId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsArticleLikeParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsArticleLike) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsArticleLike) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsArticleLike(row.cmsArticleLikeId)
|
||||
.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);
|
||||
removeBatchCmsArticleLike(
|
||||
selection.value.map((d) => d.cmsArticleLikeId)
|
||||
)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsArticleLike) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsArticleLike'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
275
src/views/cms/cmsDesign/components/cmsDesignEdit.vue
Normal file
275
src/views/cms/cmsDesign/components/cmsDesignEdit.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入页面标题"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="所属栏目" name="categoryId">
|
||||
<a-tree-select
|
||||
allow-clear
|
||||
:tree-data="navigationList"
|
||||
tree-default-expand-all
|
||||
style="width: 320px"
|
||||
placeholder="请选择栏目"
|
||||
:value="form.categoryId || undefined"
|
||||
:listHeight="700"
|
||||
:dropdown-style="{ overflow: 'auto' }"
|
||||
@update:value="(value?: number) => (form.categoryId = value)"
|
||||
@change="onCategoryId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="页面关键词" name="keywords">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入页面关键词"
|
||||
v-model:value="form.keywords"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="页面描述" name="description">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入页面描述"
|
||||
v-model:value="form.description"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="缩列图" name="photo">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入缩列图"
|
||||
v-model:value="form.photo"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="购买链接" name="buyUrl">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入购买链接"
|
||||
v-model:value="form.buyUrl"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="页面样式" name="style">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入页面样式"
|
||||
v-model:value="form.style"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="页面内容" name="content">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入页面内容"
|
||||
v-model:value="form.content"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="页面布局" name="layout">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入页面布局"
|
||||
v-model:value="form.layout"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="设为首页" name="home">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入设为首页"
|
||||
v-model:value="form.home"
|
||||
/>
|
||||
</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 { addCmsDesign, updateCmsDesign } from '@/api/cms/cmsDesign';
|
||||
import { CmsDesign } from '@/api/cms/cmsDesign/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 { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsDesign | null;
|
||||
// 栏目数据
|
||||
navigationList?: CmsNavigation[];
|
||||
}>();
|
||||
|
||||
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<CmsDesign>({
|
||||
pageId: undefined,
|
||||
name: undefined,
|
||||
categoryId: undefined,
|
||||
keywords: undefined,
|
||||
description: undefined,
|
||||
photo: undefined,
|
||||
buyUrl: undefined,
|
||||
style: undefined,
|
||||
content: undefined,
|
||||
showLayout: undefined,
|
||||
layout: undefined,
|
||||
parentId: undefined,
|
||||
userId: undefined,
|
||||
home: undefined,
|
||||
createTime: undefined,
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsDesignName: [
|
||||
{
|
||||
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 { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateCmsDesign : addCmsDesign;
|
||||
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>
|
||||
107
src/views/cms/cmsDesign/components/search.vue
Normal file
107
src/views/cms/cmsDesign/components/search.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<!-- 搜索表单 -->
|
||||
<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-tree-select
|
||||
allow-clear
|
||||
:tree-data="navigationList"
|
||||
tree-default-expand-all
|
||||
style="width: 240px"
|
||||
:listHeight="700"
|
||||
placeholder="请选择栏目"
|
||||
:value="where.categoryId || undefined"
|
||||
:dropdown-style="{ overflow: 'auto' }"
|
||||
@update:value="(value?: number) => (where.categoryId = value)"
|
||||
@change="onCategoryId"
|
||||
/>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
style="width: 240px"
|
||||
v-model:value="where.keywords"
|
||||
@search="reload"
|
||||
/>
|
||||
<a-button @click="resetFields">重置</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import { listCmsNavigation } from '@/api/cms/cmsNavigation';
|
||||
import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
||||
import { toTreeData } from 'ele-admin-pro';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import type { CmsDesignParam } from '@/api/cms/cmsDesign/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的数据
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: CmsDesignParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 栏目数据
|
||||
const navigationList = ref<CmsNavigation[]>([]);
|
||||
|
||||
// 表单数据
|
||||
const { where, resetFields } = useSearch<CmsDesignParam>({
|
||||
keywords: '',
|
||||
categoryId: undefined
|
||||
});
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const reload = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 按分类查询
|
||||
const onCategoryId = (id: number) => {
|
||||
where.categoryId = id;
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 加载栏目数据
|
||||
if (!navigationList.value.length) {
|
||||
listCmsNavigation({}).then((res) => {
|
||||
navigationList.value = toTreeData({
|
||||
data: res?.map((d) => {
|
||||
d.value = d.navigationId;
|
||||
d.label = d.title;
|
||||
if (!d.component) {
|
||||
d.disabled = true;
|
||||
}
|
||||
if (d.model == 'index' || d.model == 'page' || d.model == 'order') {
|
||||
d.disabled = true;
|
||||
}
|
||||
return d;
|
||||
}),
|
||||
idField: 'navigationId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
240
src/views/cms/cmsDesign/index.vue
Normal file
240
src/views/cms/cmsDesign/index.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="cmsDesignId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsDesignEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
// import { useI18n } from 'vue-i18n';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CmsDesignEdit from './components/cmsDesignEdit.vue';
|
||||
import {
|
||||
pageCmsDesign,
|
||||
removeCmsDesign,
|
||||
removeBatchCmsDesign
|
||||
} from '@/api/cms/cmsDesign';
|
||||
import type { CmsDesign, CmsDesignParam } from '@/api/cms/cmsDesign/model';
|
||||
import { getPageTitle } from '@/utils/common';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsDesign[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsDesign | null>(null);
|
||||
// 多语言
|
||||
// const { locale } = useI18n();
|
||||
// 是否显示编辑弹窗
|
||||
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.lang = locale.value || undefined;
|
||||
return pageCmsDesign({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'pageId',
|
||||
key: 'pageId',
|
||||
align: 'center',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '页面',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
width: 180,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsDesignParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsDesign) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsDesign) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsDesign(row.cmsDesignId)
|
||||
.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);
|
||||
removeBatchCmsDesign(selection.value.map((d) => d.cmsDesignId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsDesign) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsDesign'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
186
src/views/cms/cmsDomain/components/cmsDomainEdit.vue
Normal file
186
src/views/cms/cmsDomain/components/cmsDomainEdit.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="domain">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入已备案的域名"
|
||||
v-model:value="form.domain"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="主机记录" name="hostName" v-if="isUpdate">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入主机记录"
|
||||
disabled
|
||||
v-model:value="form.hostName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="记录值" name="hostValue" v-if="isUpdate">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入记录值"
|
||||
disabled
|
||||
v-model:value="form.hostValue"
|
||||
/>
|
||||
</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="排序号" v-if="isUpdate" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="9999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</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 { addCmsDomain, updateCmsDomain } from '@/api/cms/cmsDomain';
|
||||
import { CmsDomain } from '@/api/cms/cmsDomain/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsDomain | null;
|
||||
}>();
|
||||
|
||||
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<CmsDomain>({
|
||||
id: undefined,
|
||||
type: undefined,
|
||||
domain: undefined,
|
||||
hostName: undefined,
|
||||
hostValue: undefined,
|
||||
status: undefined,
|
||||
sortNumber: 100,
|
||||
websiteId: undefined,
|
||||
appId: undefined,
|
||||
userId: undefined,
|
||||
deleted: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsDomainName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写网站域名记录表名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form,
|
||||
websiteId: Number(localStorage.getItem('WebsiteId'))
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateCmsDomain : addCmsDomain;
|
||||
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);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
42
src/views/cms/cmsDomain/components/search.vue
Normal file
42
src/views/cms/cmsDomain/components/search.vue
Normal 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 type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
252
src/views/cms/cmsDomain/index.vue
Normal file
252
src/views/cms/cmsDomain/index.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<template #extra>
|
||||
<CmsWebsiteSearch />
|
||||
</template>
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="cmsDomainId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="red">待绑定</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="green">已绑定</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space v-if="record.status === 0">
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsDomainEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CmsDomainEdit from './components/cmsDomainEdit.vue';
|
||||
import {
|
||||
pageCmsDomain,
|
||||
removeCmsDomain,
|
||||
removeBatchCmsDomain
|
||||
} from '@/api/cms/cmsDomain';
|
||||
import type { CmsDomain, CmsDomainParam } from '@/api/cms/cmsDomain/model';
|
||||
import { getPageTitle } from '@/utils/common';
|
||||
import CmsWebsiteSearch from '@/views/cms/cmsWebsite/components/search.vue';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsDomain[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsDomain | 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;
|
||||
}
|
||||
if (localStorage.getItem('WebsiteId')) {
|
||||
where.websiteId = localStorage.getItem('WebsiteId');
|
||||
} else {
|
||||
where.userId = localStorage.getItem('UserId');
|
||||
}
|
||||
return pageCmsDomain({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '域名',
|
||||
dataIndex: 'domain',
|
||||
key: 'domain',
|
||||
align: 'center'
|
||||
},
|
||||
// {
|
||||
// title: '主机记录',
|
||||
// dataIndex: 'hostName',
|
||||
// key: 'hostName',
|
||||
// align: 'center',
|
||||
// },
|
||||
// {
|
||||
// title: '记录值',
|
||||
// dataIndex: 'hostValue',
|
||||
// key: 'hostValue',
|
||||
// align: 'center',
|
||||
// },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsDomainParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsDomain) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsDomain) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsDomain(row.id)
|
||||
.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);
|
||||
removeBatchCmsDomain(selection.value.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsDomain) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsDomain'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
459
src/views/cms/cmsForm/components/cmsFormEdit.vue
Normal file
459
src/views/cms/cmsForm/components/cmsFormEdit.vue
Normal file
@@ -0,0 +1,459 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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"
|
||||
labelAlign="left"
|
||||
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 18, 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="表单说明">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="1000"
|
||||
show-count
|
||||
placeholder="请输入表单说明"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="提交次数"
|
||||
name="submitNumber"
|
||||
extra="设置每位用户可以提交表单的次数"
|
||||
>
|
||||
<a-radio-group v-model:value="form.submitNumber">
|
||||
<a-radio :value="1">1次</a-radio>
|
||||
<a-radio :value="0">不限</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="顶部图片" name="photo">
|
||||
<a-space direction="vertical" style="padding-top: 5px">
|
||||
<a-radio-group v-model:value="form.hidePhoto">
|
||||
<a-radio :value="1">隐藏</a-radio>
|
||||
<a-radio :value="0">顶部图片</a-radio>
|
||||
</a-radio-group>
|
||||
<template v-if="form.hidePhoto == 0">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="photo"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
<div class="ele-text-placeholder"
|
||||
>请上传jpg、png格式的图片，图片尺寸：750px*460px</div
|
||||
>
|
||||
</template>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="视频文件" name="video">
|
||||
<a-space direction="vertical" style="padding-top: 5px">
|
||||
<a-radio-group v-model:value="form.hideVideo">
|
||||
<a-radio :value="1">隐藏</a-radio>
|
||||
<a-radio :value="0">视频文件</a-radio>
|
||||
</a-radio-group>
|
||||
<template v-if="form.hideVideo == 0">
|
||||
<SelectFile
|
||||
:placeholder="`请选择视频文件`"
|
||||
:limit="1"
|
||||
:data="video"
|
||||
:type="`video`"
|
||||
@done="chooseVideo"
|
||||
@del="onDeleteVideoItem"
|
||||
/>
|
||||
<div class="ele-text-placeholder"
|
||||
>请上传mp4格式的视频文件，大小200M以内</div
|
||||
>
|
||||
</template>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="背景图片" name="background">
|
||||
<a-space direction="vertical" style="padding-top: 5px">
|
||||
<a-radio-group
|
||||
v-model:value="form.hideBackground"
|
||||
name="submitNumber"
|
||||
>
|
||||
<a-radio :value="1">隐藏</a-radio>
|
||||
<a-radio :value="0">自定义</a-radio>
|
||||
</a-radio-group>
|
||||
<template v-if="form.hideBackground == 0">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="background"
|
||||
@done="chooseFile2"
|
||||
@del="onDeleteItem2"
|
||||
/>
|
||||
<div class="ele-text-placeholder"
|
||||
>请上传jpg、png格式的图片，图片尺寸：750px*1624px</div
|
||||
>
|
||||
</template>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="背景透明度"
|
||||
name="opacity"
|
||||
v-if="form.hideBackground == 0"
|
||||
>
|
||||
<a-input-number
|
||||
style="width: 140px"
|
||||
:step="0.1"
|
||||
:max="1"
|
||||
:min="0.1"
|
||||
placeholder="设置背景透明度"
|
||||
v-model:value="form.opacity"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="表单内容" name="content">
|
||||
<div class="demo-drag-list">
|
||||
<vue-draggable
|
||||
v-model="formData"
|
||||
item-key="id"
|
||||
:animation="300"
|
||||
handle=".sort-handle"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<a-form-item>
|
||||
<div class="demo-drag-list-item ele-cell">
|
||||
<drag-outlined class="sort-handle" />
|
||||
<div class="ele-cell-content">
|
||||
<a-space class="ele-cell">
|
||||
<a-input
|
||||
v-model:value="element.name"
|
||||
style="width: 500px"
|
||||
>
|
||||
<template #addonBefore>
|
||||
<a-select
|
||||
v-model:value="element.type"
|
||||
style="width: 120px"
|
||||
@change="onSelect(element, index)"
|
||||
>
|
||||
<a-select-option value="text"
|
||||
>单行文本</a-select-option
|
||||
>
|
||||
<a-select-option value="textarea"
|
||||
>多行文本</a-select-option
|
||||
>
|
||||
<a-select-option value="radio"
|
||||
>单选</a-select-option
|
||||
>
|
||||
<a-select-option value="checkbox"
|
||||
>多选</a-select-option
|
||||
>
|
||||
<a-select-option value="phone"
|
||||
>手机号码</a-select-option
|
||||
>
|
||||
<a-select-option value="email"
|
||||
>邮箱</a-select-option
|
||||
>
|
||||
<a-select-option value="time">时间</a-select-option>
|
||||
<a-select-option value="date">日期</a-select-option>
|
||||
<a-select-option value="image"
|
||||
>图片上传</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input>
|
||||
<a-checkbox v-model:checked="element.checked"
|
||||
>必填</a-checkbox
|
||||
>
|
||||
<a
|
||||
v-if="element.type == 'radio'"
|
||||
@click="openRadioForm(element)"
|
||||
>设置</a
|
||||
>
|
||||
<a
|
||||
v-if="element.type == 'checkbox'"
|
||||
@click="openCheckboxForm(element)"
|
||||
>设置</a
|
||||
>
|
||||
<a-button
|
||||
@click="removeItem(index)"
|
||||
danger
|
||||
style="margin-left: 10px"
|
||||
>删除</a-button
|
||||
>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</vue-draggable>
|
||||
<a @click="addItem"
|
||||
><PlusCircleOutlined style="margin-right: 4px" />新增</a
|
||||
>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="操作">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="save">保存</a-button>
|
||||
</a-space>
|
||||
</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 { addCmsForm, updateCmsForm } from '@/api/cms/cmsForm';
|
||||
import { CmsForm } from '@/api/cms/cmsForm/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { Dayjs } from 'dayjs';
|
||||
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 { Website } from '@/api/system/website/model';
|
||||
|
||||
// 是否是修改
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsForm | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 表格选中数据
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
const formId = ref<number>(0);
|
||||
const isUpdate = ref<boolean>(false);
|
||||
const currentItemIndex = ref<number>(0);
|
||||
const showRadioForm = ref<boolean>(false);
|
||||
const showCheckboxForm = ref<boolean>(false);
|
||||
const current = ref<any>();
|
||||
// 是否显示最大化切换按钮
|
||||
const maxable = ref(true);
|
||||
// 顶部图片
|
||||
const photo = ref<ItemType[]>([]);
|
||||
// 视频文就
|
||||
const video = ref<ItemType[]>([]);
|
||||
// 背景图片
|
||||
const background = ref<ItemType[]>([]);
|
||||
// 表单数据里的图片
|
||||
const imageItem = ref<ItemType[]>([]);
|
||||
// 时间
|
||||
const timeItem = ref<Dayjs>();
|
||||
|
||||
const formData = ref<any[]>([
|
||||
{ id: uuid(4), type: 'text', name: '姓名', checked: true },
|
||||
{ id: uuid(4), type: 'phone', name: '手机号码', checked: true },
|
||||
{ id: uuid(4), type: 'date', name: '日期', checked: false }
|
||||
]);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<CmsForm>({
|
||||
formId: undefined,
|
||||
name: undefined,
|
||||
photo: undefined,
|
||||
background: undefined,
|
||||
video: undefined,
|
||||
submitNumber: undefined,
|
||||
layout: undefined,
|
||||
hidePhoto: undefined,
|
||||
hideBackground: undefined,
|
||||
hideVideo: undefined,
|
||||
opacity: undefined,
|
||||
userId: undefined,
|
||||
merchantId: undefined,
|
||||
comments: undefined,
|
||||
status: undefined,
|
||||
deleted: undefined,
|
||||
tenantId: undefined,
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsFormName: [
|
||||
{
|
||||
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) => {
|
||||
form.image = '';
|
||||
};
|
||||
|
||||
const chooseFile = (data: FileRecord) => {
|
||||
photo.value.push({
|
||||
uid: data.id,
|
||||
url: data.downloadUrl,
|
||||
status: 'done'
|
||||
});
|
||||
form.photo = data.downloadUrl;
|
||||
};
|
||||
|
||||
const chooseVideo = (data: FileRecord) => {
|
||||
video.value.push({
|
||||
uid: data.id,
|
||||
url: data.downloadUrl,
|
||||
status: 'done'
|
||||
});
|
||||
form.video = data.downloadUrl;
|
||||
};
|
||||
|
||||
const onDeleteVideoItem = (index: number) => {
|
||||
video.value.splice(index, 1);
|
||||
form.video = '';
|
||||
};
|
||||
|
||||
const chooseFile2 = (data: FileRecord) => {
|
||||
background.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
form.background = data.path;
|
||||
};
|
||||
|
||||
const onDeleteItem2 = (index: number) => {
|
||||
background.value.splice(index, 1);
|
||||
form.background = '';
|
||||
};
|
||||
|
||||
const openRadioForm = (row: any) => {
|
||||
current.value = row ?? null;
|
||||
showRadioForm.value = true;
|
||||
};
|
||||
|
||||
const openCheckboxForm = (row: any) => {
|
||||
current.value = row ?? null;
|
||||
showCheckboxForm.value = true;
|
||||
};
|
||||
|
||||
const doneRadio = (item: any) => {
|
||||
formData.value.map((d) => {
|
||||
if (d.id == item.id) {
|
||||
d.options = item.options;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const doneCheckbox = (item: any) => {
|
||||
formData.value.map((d) => {
|
||||
if (d.id == item.id) {
|
||||
d.options = item.options;
|
||||
}
|
||||
});
|
||||
};
|
||||
const addItem = () => {
|
||||
formData.value.push({
|
||||
id: uuid(4),
|
||||
type: 'text',
|
||||
placeholder: '请填写',
|
||||
value: undefined
|
||||
});
|
||||
};
|
||||
|
||||
const removeItem = (index: number) => {
|
||||
formData.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const onSelect = (item: any, index: number) => {
|
||||
// console.log(item);
|
||||
// console.log(index)
|
||||
if (item.type == 'checkbox') {
|
||||
formData.value[index].checkedList = ['aaa'];
|
||||
formData.value[index].options = ['aaa', 'bbb'];
|
||||
}
|
||||
if (item.type == 'radio') {
|
||||
formData.value[index].radio = 'A';
|
||||
formData.value[index].options = ['A', 'B', 'C', 'D'];
|
||||
}
|
||||
};
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateCmsForm : addCmsForm;
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
42
src/views/cms/cmsForm/components/search.vue
Normal file
42
src/views/cms/cmsForm/components/search.vue
Normal 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 type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
242
src/views/cms/cmsForm/index.vue
Normal file
242
src/views/cms/cmsForm/index.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<template #extra>
|
||||
<CmsWebsiteSearch />
|
||||
</template>
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="cmsFormId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsFormEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CmsFormEdit from './components/cmsFormEdit.vue';
|
||||
import {
|
||||
pageCmsForm,
|
||||
removeCmsForm,
|
||||
removeBatchCmsForm
|
||||
} from '@/api/cms/cmsForm';
|
||||
import type { CmsForm, CmsFormParam } from '@/api/cms/cmsForm/model';
|
||||
import { getPageTitle } from '@/utils/common';
|
||||
import CmsWebsiteSearch from '@/views/cms/cmsWebsite/components/search.vue';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsForm[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsForm | 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;
|
||||
}
|
||||
return pageCmsForm({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'formId',
|
||||
key: 'formId',
|
||||
align: 'center',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '表单标题',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsFormParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsForm) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsForm) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsForm(row.formId)
|
||||
.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);
|
||||
removeBatchCmsForm(selection.value.map((d) => d.formId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsForm) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsForm'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
244
src/views/cms/cmsFormRecord/components/cmsFormRecordEdit.vue
Normal file
244
src/views/cms/cmsFormRecord/components/cmsFormRecordEdit.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入手机号"
|
||||
v-model:value="form.phone"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="表单数据" name="formData">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入表单数据"
|
||||
v-model:value="form.formData"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="表单ID" name="formId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入表单ID"
|
||||
v-model:value="form.formId"
|
||||
/>
|
||||
</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="商户ID" name="merchantId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入商户ID"
|
||||
v-model:value="form.merchantId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="姓名" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入姓名"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</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="状态, 0正常, 1冻结" 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="是否删除, 0否, 1是" name="deleted">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否删除, 0否, 1是"
|
||||
v-model:value="form.deleted"
|
||||
/>
|
||||
</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 {
|
||||
addCmsFormRecord,
|
||||
updateCmsFormRecord
|
||||
} from '@/api/cms/cmsFormRecord';
|
||||
import { CmsFormRecord } from '@/api/cms/cmsFormRecord/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsFormRecord | null;
|
||||
}>();
|
||||
|
||||
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<CmsFormRecord>({
|
||||
formRecordId: undefined,
|
||||
phone: undefined,
|
||||
formData: undefined,
|
||||
formId: undefined,
|
||||
userId: undefined,
|
||||
merchantId: undefined,
|
||||
name: undefined,
|
||||
comments: undefined,
|
||||
status: undefined,
|
||||
deleted: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsFormRecordName: [
|
||||
{
|
||||
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 { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateCmsFormRecord
|
||||
: addCmsFormRecord;
|
||||
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/cmsFormRecord/components/search.vue
Normal file
42
src/views/cms/cmsFormRecord/components/search.vue
Normal 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 type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
286
src/views/cms/cmsFormRecord/index.vue
Normal file
286
src/views/cms/cmsFormRecord/index.vue
Normal file
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="cmsFormRecordId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsFormRecordEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CmsFormRecordEdit from './components/cmsFormRecordEdit.vue';
|
||||
import {
|
||||
pageCmsFormRecord,
|
||||
removeCmsFormRecord,
|
||||
removeBatchCmsFormRecord
|
||||
} from '@/api/cms/cmsFormRecord';
|
||||
import type {
|
||||
CmsFormRecord,
|
||||
CmsFormRecordParam
|
||||
} from '@/api/cms/cmsFormRecord/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsFormRecord[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsFormRecord | 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;
|
||||
}
|
||||
return pageCmsFormRecord({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'formRecordId',
|
||||
key: 'formRecordId',
|
||||
align: 'center',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '表单数据',
|
||||
dataIndex: 'formData',
|
||||
key: 'formData',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '表单ID',
|
||||
dataIndex: 'formId',
|
||||
key: 'formId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '用户ID',
|
||||
dataIndex: 'userId',
|
||||
key: 'userId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '商户ID',
|
||||
dataIndex: 'merchantId',
|
||||
key: 'merchantId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '排序(数字越小越靠前)',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态, 0正常, 1冻结',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否删除, 0否, 1是',
|
||||
dataIndex: 'deleted',
|
||||
key: 'deleted',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsFormRecordParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsFormRecord) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsFormRecord) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsFormRecord(row.cmsFormRecordId)
|
||||
.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);
|
||||
removeBatchCmsFormRecord(selection.value.map((d) => d.cmsFormRecordId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsFormRecord) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsFormRecord'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
205
src/views/cms/cmsLang/components/cmsLangEdit.vue
Normal file
205
src/views/cms/cmsLang/components/cmsLangEdit.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="编码" name="code">
|
||||
<a-select v-model:value="form.code" style="width: 300px">
|
||||
<a-select-option value="en_US">English</a-select-option>
|
||||
<a-select-option value="zh_CN">简体中文</a-select-option>
|
||||
<a-select-option value="zh_TW">繁体中文</a-select-option>
|
||||
<a-select-option value="ja-JP">日本語</a-select-option>
|
||||
<a-select-option value="ko-KR">한국어</a-select-option>
|
||||
<a-select-option value="vi_VN">越南语</a-select-option>
|
||||
</a-select>
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="示例：zh_CN、en_US、zh-TW、ja-JP、ko-KR"
|
||||
v-model:value="form.code"
|
||||
/>
|
||||
</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="状态, 0已发布, 1待审核 2已驳回 3违规内容"
|
||||
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="是否删除, 0否, 1是" name="deleted">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否删除, 0否, 1是"
|
||||
v-model:value="form.deleted"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="修改时间" name="updateTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入修改时间"
|
||||
v-model:value="form.updateTime"
|
||||
/>
|
||||
</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 { addCmsLang, updateCmsLang } from '@/api/cms/cmsLang';
|
||||
import { CmsLang } from '@/api/cms/cmsLang/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsLang | null;
|
||||
}>();
|
||||
|
||||
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<CmsLang>({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
comments: undefined,
|
||||
status: undefined,
|
||||
deleted: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsLangName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写国际化名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateCmsLang : addCmsLang;
|
||||
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);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
46
src/views/cms/cmsLang/components/search.vue
Normal file
46
src/views/cms/cmsLang/components/search.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-alert
|
||||
type="warning"
|
||||
message="默认为简体中文，请根据需要配置国际化支持。"
|
||||
/>
|
||||
<!-- <a-button type="primary" class="ele-btn-icon" disabled @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 type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
205
src/views/cms/cmsLang/index.vue
Normal file
205
src/views/cms/cmsLang/index.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<template #extra>
|
||||
<CmsWebsiteSearch />
|
||||
</template>
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="cmsLangId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-switch
|
||||
v-model:checked="record.enable"
|
||||
:disabled="record.status"
|
||||
@change="onChange(record)"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsLangEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { 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 CmsLangEdit from './components/cmsLangEdit.vue';
|
||||
import { pageCmsLang, removeBatchCmsLang } from '@/api/cms/cmsLang';
|
||||
import type { CmsLang, CmsLangParam } from '@/api/cms/cmsLang/model';
|
||||
import { addCmsLangLog, removeCmsLangLog } from '@/api/cms/cmsLangLog';
|
||||
import { getPageTitle } from '@/utils/common';
|
||||
import CmsWebsiteSearch from '@/views/cms/cmsWebsite/components/search.vue';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsLang[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsLang | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
const showMove = ref(false);
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
return pageCmsLang({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '编码',
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
align: 'center'
|
||||
},
|
||||
// {
|
||||
// title: '排序',
|
||||
// dataIndex: 'sortNumber',
|
||||
// key: 'sortNumber',
|
||||
// align: 'center',
|
||||
// },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsLangParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsLang) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
// 启用禁用开关
|
||||
const onChange = (item: any) => {
|
||||
if (item.enable == true) {
|
||||
addCmsLangLog({
|
||||
code: item.code,
|
||||
langId: item.id,
|
||||
lang: item.name
|
||||
});
|
||||
} else {
|
||||
removeCmsLangLog(item.id);
|
||||
}
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchCmsLang(selection.value.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsLang) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsLang'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
178
src/views/cms/cmsLangLog/components/cmsLangLogEdit.vue
Normal file
178
src/views/cms/cmsLangLog/components/cmsLangLogEdit.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="关联ID" name="langId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入关联ID"
|
||||
v-model:value="form.langId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="编码" name="code">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入编码"
|
||||
v-model:value="form.code"
|
||||
/>
|
||||
</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 { addCmsLangLog, updateCmsLangLog } from '@/api/cms/cmsLangLog';
|
||||
import { CmsLangLog } from '@/api/cms/cmsLangLog/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsLangLog | null;
|
||||
}>();
|
||||
|
||||
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<CmsLangLog>({
|
||||
id: undefined,
|
||||
langId: undefined,
|
||||
code: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
cmsLangLogId: undefined,
|
||||
cmsLangLogName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsLangLogName: [
|
||||
{
|
||||
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 { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateCmsLangLog : addCmsLangLog;
|
||||
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/cmsLangLog/components/search.vue
Normal file
42
src/views/cms/cmsLangLog/components/search.vue
Normal 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 type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
235
src/views/cms/cmsLangLog/index.vue
Normal file
235
src/views/cms/cmsLangLog/index.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="cmsLangLogId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsLangLogEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CmsLangLogEdit from './components/cmsLangLogEdit.vue';
|
||||
import {
|
||||
pageCmsLangLog,
|
||||
removeCmsLangLog,
|
||||
removeBatchCmsLangLog
|
||||
} from '@/api/cms/cmsLangLog';
|
||||
import type { CmsLangLog, CmsLangLogParam } from '@/api/cms/cmsLangLog/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsLangLog[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsLangLog | 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;
|
||||
}
|
||||
return pageCmsLangLog({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
align: 'center',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '关联ID',
|
||||
dataIndex: 'langId',
|
||||
key: 'langId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '编码',
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsLangLogParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsLangLog) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsLangLog) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsLangLog(row.cmsLangLogId)
|
||||
.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);
|
||||
removeBatchCmsLangLog(selection.value.map((d) => d.cmsLangLogId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsLangLog) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsLangLog'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
270
src/views/cms/cmsLink/components/cmsLinkEdit.vue
Normal file
270
src/views/cms/cmsLink/components/cmsLinkEdit.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<!-- 链接编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="460"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '修改链接' : '添加链接'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="名称" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="50"
|
||||
placeholder="链接名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="网址" name="url">
|
||||
<a-input v-model:value="form.url" placeholder="websoft.top">
|
||||
<template #addonBefore>
|
||||
<a-select v-model:value="before" style="width: 90px">
|
||||
<a-select-option value="https://">https://</a-select-option>
|
||||
<a-select-option value="http://">http://</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="选择栏目" name="categoryId">-->
|
||||
<!-- <a-tree-select-->
|
||||
<!-- allow-clear-->
|
||||
<!-- :tree-data="navigationList"-->
|
||||
<!-- tree-default-expand-all-->
|
||||
<!-- placeholder="请选择栏目"-->
|
||||
<!-- :value="form.categoryId || undefined"-->
|
||||
<!-- :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"-->
|
||||
<!-- @update:value="(value?: number) => (form.categoryId = value)"-->
|
||||
<!-- @change="onCategoryId"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item label="图标" name="icon">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图标`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
:width="50"
|
||||
:height="50"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="99999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入备注"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { addCmsLink, updateCmsLink } from '@/api/cms/cmsLink';
|
||||
import type { CmsLink } from '@/api/cms/cmsLink/model';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { uploadFile } from '@/api/system/file';
|
||||
import { FileRecord } from '@/api/system/file/model';
|
||||
import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
||||
import { getLang } from '@/utils/common';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsLink | null;
|
||||
navigationList?: CmsNavigation[];
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
// 已上传数据
|
||||
const images = ref<ItemType[]>([]);
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
const before = ref<string>('https://');
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<CmsLink>({
|
||||
id: undefined,
|
||||
name: '',
|
||||
url: '',
|
||||
sortNumber: 100,
|
||||
categoryId: undefined,
|
||||
comments: undefined
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
url: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入正确的URL',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 上传文件
|
||||
const onUpload = (item: any) => {
|
||||
const { file } = item;
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
form.icon = data.url;
|
||||
message.success('上传成功');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 上传事件 */
|
||||
const uploadHandler = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
};
|
||||
if (file.size / 1024 / 1024 > 1) {
|
||||
message.error('大小不能超过 1MB');
|
||||
return;
|
||||
}
|
||||
onUpload(item);
|
||||
};
|
||||
|
||||
const chooseFile = (data: FileRecord) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
form.icon = data.path;
|
||||
};
|
||||
|
||||
const onDeleteItem = (index: number) => {
|
||||
images.value.splice(index, 1);
|
||||
form.icon = '';
|
||||
};
|
||||
|
||||
// 选择栏目
|
||||
const onCategoryId = (id: number) => {
|
||||
form.categoryId = id;
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
console.log(form, 'fff>');
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateCmsLink : addCmsLink;
|
||||
form.url = `${before.value}${form.url}`;
|
||||
saveOrUpdate(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields(props.data);
|
||||
images.value = [];
|
||||
if (props.data.icon) {
|
||||
images.value.push({
|
||||
uid: 1,
|
||||
url: props.data.icon,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (props.data.url?.startsWith('https://')) {
|
||||
before.value = 'https://';
|
||||
form.url = props.data.url.replace('https://', '');
|
||||
}
|
||||
if (props.data.url?.startsWith('http://')) {
|
||||
before.value = 'http://';
|
||||
form.url = props.data.url.replace('http://', '');
|
||||
}
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
images.value = [];
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
200
src/views/cms/cmsLink/components/linkUpdate.vue
Normal file
200
src/views/cms/cmsLink/components/linkUpdate.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="600"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="'批量更新'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 3, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 24, sm: 24, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item>
|
||||
<a-alert :message="'提示：每次最多修改 50000 条数据'" banner />
|
||||
</a-form-item>
|
||||
<a-form-item label="选择栏目">
|
||||
<a-tree-select
|
||||
allow-clear
|
||||
:tree-data="navigationList"
|
||||
tree-default-expand-all
|
||||
style="width: 400px"
|
||||
placeholder="请选择栏目"
|
||||
:value="form.categoryId || undefined"
|
||||
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
|
||||
@update:value="(value?: number) => (form.categoryId = value)"
|
||||
@change="onCategoryId"
|
||||
/>
|
||||
</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 { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
|
||||
import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
||||
import { updateBatchCmsLink } from '@/api/cms/cmsLink';
|
||||
import { CmsLink } from '@/api/cms/cmsLink/model';
|
||||
|
||||
// 是否是修改
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 表格选中数据
|
||||
selection?: CmsLink[];
|
||||
// 栏目数据
|
||||
navigationList?: CmsNavigation[];
|
||||
}>();
|
||||
|
||||
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 content = ref('');
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<CmsLink>({
|
||||
// 自增ID
|
||||
id: undefined,
|
||||
// 链接名称
|
||||
name: undefined,
|
||||
// 图标
|
||||
icon: undefined,
|
||||
// 链接地址
|
||||
url: undefined,
|
||||
// 链接分类
|
||||
categoryId: undefined,
|
||||
// 应用ID
|
||||
appId: undefined,
|
||||
// 用户ID
|
||||
userId: undefined,
|
||||
// 语言
|
||||
lang: undefined,
|
||||
// 是否推荐
|
||||
recommend: undefined,
|
||||
// 备注
|
||||
comments: undefined,
|
||||
// 排序(数字越小越靠前)
|
||||
sortNumber: undefined,
|
||||
// 是否删除, 0否, 1是
|
||||
deleted: undefined,
|
||||
// 状态, 0正常, 1待确认
|
||||
status: undefined,
|
||||
// 租户id
|
||||
tenantId: undefined,
|
||||
// 创建时间
|
||||
createTime: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择文章标题',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
categoryId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择栏目',
|
||||
type: 'number',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
content: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入文章内容',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (content.value == '') {
|
||||
return Promise.reject('请输入文字内容');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 选择栏目
|
||||
const onCategoryId = (id: number) => {
|
||||
console.log(id);
|
||||
form.categoryId = id;
|
||||
};
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
props.selection?.map((d) => d.id);
|
||||
updateBatchCmsLink({
|
||||
ids: props.selection?.map((d) => d.id),
|
||||
data: {
|
||||
categoryId: form.categoryId
|
||||
}
|
||||
})
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
loading.value = false;
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
91
src/views/cms/cmsLink/components/search.vue
Normal file
91
src/views/cms/cmsLink/components/search.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<!-- 搜索表单 -->
|
||||
<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-button :disabled="selection?.length === 0" @click="updateBatch">
|
||||
移动
|
||||
</a-button>
|
||||
<!-- <a-tree-select-->
|
||||
<!-- allow-clear-->
|
||||
<!-- :tree-data="navigationList"-->
|
||||
<!-- tree-default-expand-all-->
|
||||
<!-- style="width: 280px"-->
|
||||
<!-- :listHeight="700"-->
|
||||
<!-- placeholder="请选择栏目"-->
|
||||
<!-- :value="where.categoryId || undefined"-->
|
||||
<!-- :dropdown-style="{ overflow: 'auto' }"-->
|
||||
<!-- @update:value="(value?: number) => (where.categoryId = value)"-->
|
||||
<!-- @change="onCategoryId"-->
|
||||
<!-- />-->
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
style="width: 280px"
|
||||
v-model:value="where.keywords"
|
||||
@search="reload"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { CmsLinkParam } from '@/api/cms/cmsLink/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
navigationList?: CmsNavigation[];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<CmsLinkParam>({
|
||||
id: undefined,
|
||||
categoryId: undefined,
|
||||
keywords: '',
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 批量更新
|
||||
const updateBatch = () => {
|
||||
emit('batchMove');
|
||||
};
|
||||
|
||||
// 按分类查询
|
||||
const onCategoryId = (id: number) => {
|
||||
where.categoryId = id;
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
285
src/views/cms/cmsLink/index.vue
Normal file
285
src/views/cms/cmsLink/index.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
v-model:selection="selection"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
:navigationList="navigationList"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'icon'">
|
||||
<a-image
|
||||
:src="record.icon"
|
||||
:width="50"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsLinkEdit
|
||||
v-model:visible="showEdit"
|
||||
:navigationList="navigationList"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
|
||||
<!-- 批量更新 -->
|
||||
<LinkUpdate
|
||||
v-model:visible="showMove"
|
||||
:navigationList="navigationList"
|
||||
:selection="selection"
|
||||
@done="reload"
|
||||
/>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { 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 { toTreeData } from 'ele-admin-pro';
|
||||
import CmsLinkEdit from './components/cmsLinkEdit.vue';
|
||||
import {
|
||||
pageCmsLink,
|
||||
removeCmsLink,
|
||||
removeBatchCmsLink
|
||||
} from '@/api/cms/cmsLink';
|
||||
import type { CmsLink, CmsLinkParam } from '@/api/cms/cmsLink/model';
|
||||
import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
||||
import { listCmsNavigation } from '@/api/cms/cmsNavigation';
|
||||
import { getLang, getPageTitle } from '@/utils/common';
|
||||
import LinkUpdate from './components/linkUpdate.vue';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsLink[]>([]);
|
||||
// // 多语言
|
||||
// const { locale } = useI18n();
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsLink | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
const showMove = ref(false);
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
// 栏目数据
|
||||
const navigationList = ref<CmsNavigation[]>();
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({
|
||||
page,
|
||||
limit,
|
||||
where,
|
||||
orders,
|
||||
filters
|
||||
}) => {
|
||||
if (filters) {
|
||||
where.status = filters.status;
|
||||
}
|
||||
return pageCmsLink({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
// {
|
||||
// key: 'index',
|
||||
// width: 48,
|
||||
// align: 'center',
|
||||
// fixed: 'left',
|
||||
// hideInSetting: true,
|
||||
// customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
// },
|
||||
{
|
||||
title: '图标',
|
||||
dataIndex: 'icon',
|
||||
key: 'icon',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '链接名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '链接地址',
|
||||
dataIndex: 'url',
|
||||
key: 'url'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments'
|
||||
},
|
||||
{
|
||||
title: '所属栏目',
|
||||
dataIndex: 'categoryName',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
showSorterTooltip: false,
|
||||
customRender: ({ text }) => ['显示', '隐藏'][text]
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsLinkParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsLink) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsLink) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsLink(row.id)
|
||||
.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);
|
||||
removeBatchCmsLink(selection.value.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
// 加载栏目数据
|
||||
if (!navigationList.value) {
|
||||
listCmsNavigation({}).then((res) => {
|
||||
navigationList.value = toTreeData({
|
||||
data: res?.map((d) => {
|
||||
d.value = d.navigationId;
|
||||
d.label = d.title;
|
||||
return d;
|
||||
}),
|
||||
idField: 'navigationId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsLink) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsLink'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
315
src/views/cms/cmsModel/components/cmsModelEdit.vue
Normal file
315
src/views/cms/cmsModel/components/cmsModelEdit.vue
Normal file
@@ -0,0 +1,315 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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: 18, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="模型名称" name="name">
|
||||
<a-input allow-clear placeholder="文章" v-model:value="form.name" />
|
||||
</a-form-item>
|
||||
<a-form-item label="模型标识" name="model">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="article"
|
||||
v-model:value="form.model"
|
||||
@input="onInput"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="列表路径" name="component" extra="模版存放路径">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="/pages/article/[id].vue"
|
||||
v-model:value="form.component"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="详情页" name="componentDetail" extra="模版存放路径">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="/pages/detail/[id].vue"
|
||||
v-model:value="form.componentDetail"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="文件后缀" name="suffix">
|
||||
<a-select v-model:value="form.suffix" allow-clear placeholder=".html">
|
||||
<a-select-option value=".html">.html</a-select-option>
|
||||
<a-select-option value=".do">.do</a-select-option>
|
||||
<a-select-option value=".php">.php</a-select-option>
|
||||
<a-select-option value=".java">.java</a-select-option>
|
||||
<a-select-option value=".py">.py</a-select-option>
|
||||
<a-select-option value=".tsx">.tsx</a-select-option>
|
||||
<a-select-option value=".ws">.ws</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="Banner" name="banner">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
:width="416"
|
||||
:heigit="120"
|
||||
@done="chooseImage"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="尺寸" name="imageWidth">
|
||||
<a-space>
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="100vw"
|
||||
v-model:value="form.imageWidth"
|
||||
/>
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="200px"
|
||||
v-model:value="form.imageHeight"
|
||||
/>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="style" name="style">
|
||||
<a-input allow-clear placeholder="style" v-model:value="form.style" />
|
||||
<div class="pt-2">
|
||||
<a
|
||||
class="text-sm text-gray-500"
|
||||
href="https://www.tailwindcss.cn/docs/installation"
|
||||
target="_blank"
|
||||
>Tailwind Css使用教程</a
|
||||
>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="Banner标题" name="title">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入Banner上的标题"-->
|
||||
<!-- v-model:value="form.title"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="Banner描述" name="describe">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入Banner上的描述"-->
|
||||
<!-- v-model:value="form.describe"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="显示方式" name="showType">-->
|
||||
<!-- <a-radio-group v-model:value="form.showType">-->
|
||||
<!-- <a-radio :value="0">文字列表</a-radio>-->
|
||||
<!-- <a-radio :value="10">小图展示</a-radio>-->
|
||||
<!-- <a-radio :value="20">大图展示</a-radio>-->
|
||||
<!-- </a-radio-group>-->
|
||||
<!-- </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>
|
||||
</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 { addCmsModel, updateCmsModel } from '@/api/cms/cmsModel';
|
||||
import { CmsModel } from '@/api/cms/cmsModel/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsModel | null;
|
||||
}>();
|
||||
|
||||
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<CmsModel>({
|
||||
modelId: undefined,
|
||||
name: undefined,
|
||||
model: undefined,
|
||||
component: undefined,
|
||||
componentDetail: undefined,
|
||||
banner: undefined,
|
||||
thumb: undefined,
|
||||
suffix: undefined,
|
||||
imageWidth: undefined,
|
||||
imageHeight: undefined,
|
||||
style: undefined,
|
||||
title: undefined,
|
||||
desc: undefined,
|
||||
showType: undefined,
|
||||
userId: undefined,
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写模型名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
model: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写模型标识',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
path: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写菜单路由地址',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
// component: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'string',
|
||||
// message: '请填写菜单组件地址',
|
||||
// trigger: 'blur'
|
||||
// }
|
||||
// ]
|
||||
});
|
||||
|
||||
const chooseImage = (data: FileRecord) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
form.banner =
|
||||
data.downloadUrl +
|
||||
'?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90';
|
||||
form.thumb = data.path;
|
||||
};
|
||||
|
||||
const onDeleteItem = (index: number) => {
|
||||
images.value.splice(index, 1);
|
||||
form.banner = '';
|
||||
form.thumb = '';
|
||||
};
|
||||
|
||||
const onInput = () => {
|
||||
form.component = `/pages/${form.model}/[id].vue`;
|
||||
form.componentDetail = `/pages/${form.model}/detail/[id].vue`;
|
||||
};
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateCmsModel : addCmsModel;
|
||||
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.banner) {
|
||||
images.value.push({
|
||||
uid: uuid(),
|
||||
url: props.data.banner,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
42
src/views/cms/cmsModel/components/search.vue
Normal file
42
src/views/cms/cmsModel/components/search.vue
Normal 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 { CmsModelParam } from '@/api/cms/cmsModel/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: CmsModelParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
263
src/views/cms/cmsModel/index.vue
Normal file
263
src/views/cms/cmsModel/index.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<template #extra>
|
||||
<CmsWebsiteSearch />
|
||||
</template>
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="modelId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'banner'">
|
||||
<a-image v-if="record.banner" :src="record.banner" :width="100" />
|
||||
</template>
|
||||
<template v-if="column.key === 'component'">
|
||||
<div class="text-gray-300">{{ record.component }}</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'componentDetail'">
|
||||
<div class="text-gray-300">{{ record.componentDetail }}</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsModelEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CmsModelEdit from './components/cmsModelEdit.vue';
|
||||
import {
|
||||
pageCmsModel,
|
||||
removeCmsModel,
|
||||
removeBatchCmsModel
|
||||
} from '@/api/cms/cmsModel';
|
||||
import type { CmsModel, CmsModelParam } from '@/api/cms/cmsModel/model';
|
||||
import { getPageTitle } from '@/utils/common';
|
||||
import CmsWebsiteSearch from '@/views/cms/cmsWebsite/components/search.vue';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsModel[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsModel | 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;
|
||||
}
|
||||
return pageCmsModel({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '模型名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '模型标识',
|
||||
dataIndex: 'model',
|
||||
key: 'model',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '列表页组件',
|
||||
dataIndex: 'component',
|
||||
key: 'component'
|
||||
},
|
||||
{
|
||||
title: '详情页组件',
|
||||
dataIndex: 'componentDetail',
|
||||
key: 'componentDetail'
|
||||
},
|
||||
{
|
||||
title: 'banner',
|
||||
dataIndex: 'banner',
|
||||
key: 'banner'
|
||||
},
|
||||
{
|
||||
title: '尺寸',
|
||||
dataIndex: 'imageWidth',
|
||||
key: 'imageWidth',
|
||||
align: 'center',
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
width: 120,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsModelParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsModel) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsModel) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsModel(row.modelId)
|
||||
.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);
|
||||
removeBatchCmsModel(selection.value.map((d) => d.modelId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsModel) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsModel'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
79
src/views/cms/cmsNavigation/components/Import.vue
Normal file
79
src/views/cms/cmsNavigation/components/Import.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<!-- 导航导入弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="520"
|
||||
:footer="null"
|
||||
title="导入备份"
|
||||
:visible="visible"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-upload-dragger
|
||||
accept=".xls,.xlsx"
|
||||
:show-upload-list="false"
|
||||
:customRequest="doUpload"
|
||||
style="padding: 24px 0; margin-bottom: 16px"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<cloud-upload-outlined />
|
||||
</p>
|
||||
<p class="ant-upload-hint">将文件拖到此处，或点击上传</p>
|
||||
</a-upload-dragger>
|
||||
</a-spin>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { CloudUploadOutlined } from '@ant-design/icons-vue';
|
||||
import { importCmsNavigation } from '@/api/cms/cmsNavigation';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
defineProps<{
|
||||
// 是否打开弹窗
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
// 导入请求状态
|
||||
const loading = ref(false);
|
||||
|
||||
/* 上传 */
|
||||
const doUpload = ({ file }) => {
|
||||
if (
|
||||
![
|
||||
'application/vnd.ms-excel',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
].includes(file.type)
|
||||
) {
|
||||
message.error('只能选择 excel 文件');
|
||||
return false;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 10) {
|
||||
message.error('大小不能超过 10MB');
|
||||
return false;
|
||||
}
|
||||
loading.value = true;
|
||||
importCmsNavigation(file)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
return false;
|
||||
};
|
||||
|
||||
/* 更新 visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,248 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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 {
|
||||
addCmsDesignRecord,
|
||||
updateCmsDesignRecord
|
||||
} from '@/api/cms/cmsDesignRecord';
|
||||
import { CmsDesignRecord } from '@/api/cms/cmsDesignRecord/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?: CmsDesignRecord | 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<CmsDesignRecord>({
|
||||
id: undefined,
|
||||
pageId: undefined,
|
||||
parentId: undefined,
|
||||
title: undefined,
|
||||
styles: '',
|
||||
keywords: undefined,
|
||||
description: undefined,
|
||||
path: undefined,
|
||||
photo: undefined,
|
||||
userId: undefined,
|
||||
comments: undefined,
|
||||
status: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
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
|
||||
? updateCmsDesignRecord
|
||||
: addCmsDesignRecord;
|
||||
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/cmsNavigation/components/components/search.vue
Normal file
42
src/views/cms/cmsNavigation/components/components/search.vue
Normal 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 { CmsDesignParam } from '@/api/cms/cmsDesign/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: CmsDesignParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
482
src/views/cms/cmsNavigation/components/design-edit.vue
Normal file
482
src/views/cms/cmsNavigation/components/design-edit.vue
Normal file
@@ -0,0 +1,482 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<a-drawer
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="true"
|
||||
title="页面内容"
|
||||
placement="right"
|
||||
: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>
|
||||
</template>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 2, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 21, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<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-input
|
||||
allow-clear
|
||||
:maxlength="100"
|
||||
placeholder="Keywords"
|
||||
v-model:value="form.keywords"
|
||||
/>
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="Description"
|
||||
v-model:value="form.description"
|
||||
/>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="Banner">
|
||||
<a-space direction="vertical" class="w-full">
|
||||
<div class="p-1">
|
||||
<a-switch v-model:checked="form.showBanner"/>
|
||||
</div>
|
||||
<template v-if="form.showBanner">
|
||||
<SelectFile
|
||||
:placeholder="`请选择背景图`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
<!-- <div class="text-sm text-gray-400">页面Banner的读取优先级为：栏目 > 父栏目 > 模型</div>-->
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="style"
|
||||
v-model:value="form.style"
|
||||
/>
|
||||
<a class="text-sm text-gray-400" href="https://www.tailwindcss.cn/docs/installation" target="_blank">Tailwind Css使用教程</a>
|
||||
</template>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="Button">
|
||||
<div class="p-1 mb-3">
|
||||
<a-switch v-model:checked="form.showButton"/>
|
||||
</div>
|
||||
<template v-if="form.showButton">
|
||||
<a-space direction="vertical" class="w-full">
|
||||
<template v-if="form.showButton">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="100"
|
||||
:placeholder="`立即购买`"
|
||||
v-model:value="form.buyUrl"
|
||||
/>
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="100"
|
||||
:placeholder="`产品文档`"
|
||||
v-model:value="form.docUrl"
|
||||
/>
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="100"
|
||||
:placeholder="`演示地址`"
|
||||
v-model:value="form.demoUrl"
|
||||
/>
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="100"
|
||||
:placeholder="`账号密码`"
|
||||
v-model:value="form.account"
|
||||
/>
|
||||
</template>
|
||||
</a-space>
|
||||
</template>
|
||||
</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>
|
||||
<div class="py-3 flex text-gray-400" v-if="lang == 'zh_CN'">
|
||||
<a-switch checked-children="AI翻译" v-model:checked="form.translation"/>
|
||||
<div class="pl-3" v-if="form.translation">启用后，将自动翻译其他语言版本</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { uuid} from 'ele-admin-pro';
|
||||
import { addCmsDesign, pageCmsDesign, updateCmsDesign } from "@/api/cms/cmsDesign";
|
||||
import { CmsDesign } from '@/api/cms/cmsDesign/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { FormInstance, Rule } 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 {removeSiteInfoCache} from "@/api/cms/cmsWebsite";
|
||||
import {FileRecord} from "@/api/system/file/model";
|
||||
import {getLang, openSpmUrl} from "@/utils/common";
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
const disabled = ref(false);
|
||||
// 编辑器内容，双向绑定
|
||||
const content = ref<any>('');
|
||||
// 组件列表
|
||||
const components = ref<any[]>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsDesign | null;
|
||||
//
|
||||
categoryId?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 已上传数据
|
||||
const images = ref<ItemType[]>([]);
|
||||
const lang = localStorage.getItem('i18n-lang');
|
||||
// 表格选中数据
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<CmsDesign>({
|
||||
pageId: undefined,
|
||||
name: '',
|
||||
images: '',
|
||||
path: '',
|
||||
component: '/pages/[page]/index',
|
||||
description: '',
|
||||
keywords: '',
|
||||
content: '',
|
||||
type: '',
|
||||
categoryId: undefined,
|
||||
style: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100,
|
||||
navigationId: undefined,
|
||||
showLayout: false,
|
||||
translation: true,
|
||||
layout: '',
|
||||
btn: [],
|
||||
showBanner: true,
|
||||
showButton: false,
|
||||
buyUrl: '',
|
||||
demoUrl: '',
|
||||
account: '',
|
||||
docUrl: ''
|
||||
});
|
||||
|
||||
const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
|
||||
const config = ref({
|
||||
height: 500,
|
||||
images_upload_handler: (blobInfo, success, error) => {
|
||||
const file = blobInfo.blob();
|
||||
const formData = new FormData();
|
||||
formData.append('file', file, file.name);
|
||||
uploadOss(file).then(res => {
|
||||
success(res.url)
|
||||
}).catch((msg) => {
|
||||
error(msg);
|
||||
})
|
||||
return false;
|
||||
},
|
||||
// 自定义文件上传(这里使用把选择的文件转成 blob 演示)
|
||||
file_picker_callback: (callback: any, _value: any, meta: any) => {
|
||||
const input = document.createElement('input');
|
||||
input.setAttribute('type', 'file');
|
||||
// 设定文件可选类型
|
||||
if (meta.filetype === 'image') {
|
||||
input.setAttribute('accept', 'image/*');
|
||||
} else if (meta.filetype === 'media') {
|
||||
input.setAttribute('accept', 'video/*,.pdf');
|
||||
}
|
||||
input.onchange = () => {
|
||||
const file = input.files?.[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
if (meta.filetype === 'media') {
|
||||
if (file.size / 1024 / 1024 > 200) {
|
||||
editorRef.value?.alert({ content: '大小不能超过 200MB' });
|
||||
return;
|
||||
}
|
||||
if (!file.type.startsWith('video/')) {
|
||||
editorRef.value?.alert({ content: '只能选择视频文件' });
|
||||
return;
|
||||
}
|
||||
uploadOss(file).then(res => {
|
||||
callback(res.downloadUrl);
|
||||
})
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
}
|
||||
});
|
||||
|
||||
/* 粘贴图片上传服务器并插入编辑器 */
|
||||
const onPaste = (e) => {
|
||||
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
|
||||
let hasFile = false;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf('image') !== -1) {
|
||||
let file = items[i].getAsFile();
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).lastModified,
|
||||
name: file.name
|
||||
};
|
||||
uploadFile(<File>item.file)
|
||||
.then((result) => {
|
||||
const addPath = `<p><img class="content-img" src="${result.url}"></p>`;
|
||||
content.value = content.value + addPath
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
hasFile = true;
|
||||
}
|
||||
}
|
||||
if (hasFile) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写页面名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
path: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写路由地址',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
component: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写组件路径',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 上传事件 */
|
||||
const uploadHandler = (file: File) => {
|
||||
const item: ItemType = {
|
||||
file,
|
||||
uid: (file as any).uid,
|
||||
name: file.name
|
||||
};
|
||||
if (file.type.startsWith('video')) {
|
||||
if (file.size / 1024 / 1024 > 200) {
|
||||
message.error('大小不能超过 200MB');
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (file.type.startsWith('image')) {
|
||||
if (file.size / 1024 / 1024 > 5) {
|
||||
message.error('大小不能超过 5MB');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
onUpload(item);
|
||||
};
|
||||
|
||||
// 上传文件
|
||||
const onUpload = (item: any) => {
|
||||
const { file } = item;
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
form.photo = data.path;
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url:
|
||||
file.type == 'video/mp4'
|
||||
? 'https://oss.wsdns.cn/20240301/6e4e32cb808245d4be336b9486961145.png'
|
||||
: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const chooseFile = (data: FileRecord) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.downloadUrl,
|
||||
status: 'done'
|
||||
});
|
||||
form.photo = data.downloadUrl;
|
||||
}
|
||||
|
||||
const onDeleteItem = (index: number) => {
|
||||
images.value.splice(index,1)
|
||||
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 = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
console.log(form);
|
||||
const formData = {
|
||||
...form,
|
||||
categoryId: props.categoryId,
|
||||
content: content.value,
|
||||
};
|
||||
console.log(formData,'formDDDD');
|
||||
const saveOrUpdate = isUpdate.value ? updateCmsDesign : addCmsDesign;
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
// 清除缓存
|
||||
removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId'));
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
// 查询页面设计元素
|
||||
if(props.categoryId){
|
||||
content.value = '';
|
||||
images.value = []
|
||||
pageCmsDesign({categoryId: props.categoryId,limit: 1}).then(res => {
|
||||
const design = res?.list[0];
|
||||
if(design){
|
||||
assignFields(design);
|
||||
if(design?.content){
|
||||
content.value = design.content
|
||||
}
|
||||
if(design.photo){
|
||||
form.photo = design.photo;
|
||||
images.value.push({
|
||||
uid: uuid(),
|
||||
url: design.photo,
|
||||
status: 'done'
|
||||
})
|
||||
}
|
||||
isUpdate.value = true;
|
||||
}else {
|
||||
isUpdate.value = false;
|
||||
content.value = '';
|
||||
resetFields();
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
62
src/views/cms/cmsNavigation/components/extra.vue
Normal file
62
src/views/cms/cmsNavigation/components/extra.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space
|
||||
style="flex-wrap: wrap"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin') || hasRole('foundation')"
|
||||
>
|
||||
<!-- <a-button-->
|
||||
<!-- type="text"-->
|
||||
<!-- @click="openUrl('/mp-pages')"-->
|
||||
<!-- >小程序端-->
|
||||
<!-- </a-button>-->
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { watch, nextTick } from 'vue';
|
||||
import { CmsWebsite } from '@/api/cms/cmsWebsite/model';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { removeSiteInfoCache } from '@/api/cms/cmsWebsite';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
website?: CmsWebsite;
|
||||
count?: 0;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'add'): void;
|
||||
}>();
|
||||
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 清除缓存
|
||||
const clearSiteInfoCache = () => {
|
||||
removeSiteInfoCache(
|
||||
'SiteInfo:' + localStorage.getItem('TenantId') + '*'
|
||||
).then((msg) => {
|
||||
if (msg) {
|
||||
message.success(msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
nextTick(() => {
|
||||
if (localStorage.getItem('NotActive')) {
|
||||
// IsActive.value = false
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
593
src/views/cms/cmsNavigation/components/navigation-edit.vue
Normal file
593
src/views/cms/cmsNavigation/components/navigation-edit.vue
Normal file
@@ -0,0 +1,593 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '修改导航' : '新建导航'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 6, sm: 4, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 18, sm: 20, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
|
||||
>
|
||||
<a-form-item label="上级分类" name="parentId">
|
||||
<a-tree-select
|
||||
allow-clear
|
||||
:tree-data="navigationList"
|
||||
tree-default-expand-all
|
||||
placeholder="请选择上级分类"
|
||||
:value="form.parentId || undefined"
|
||||
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
|
||||
@update:value="(value?: number) => (form.parentId = value)"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="菜单名称" name="title">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入菜单名称"
|
||||
v-model:value="form.title"
|
||||
@pressEnter="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="模型" name="model">
|
||||
<a-select v-model:value="form.model">
|
||||
<a-select-option
|
||||
v-for="item in models"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="`详情页ID`"
|
||||
name="itemId"
|
||||
v-if="form.model == 'detail' || form.model == 'item'"
|
||||
>
|
||||
<a-input-number
|
||||
allow-clear
|
||||
:placeholder="`请输入详情页ID`"
|
||||
v-model:value="form.itemId"
|
||||
style="width: 276px"
|
||||
@pressEnter="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="组件路径" name="component" v-if="isUpdate">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- disabled-->
|
||||
<!-- placeholder="/pages/item/index.vue"-->
|
||||
<!-- v-model:value="form.component"-->
|
||||
<!-- @pressEnter="save"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item :label="'path'" name="path">
|
||||
<a-input
|
||||
allow-clear
|
||||
:placeholder="pathPlaceholder"
|
||||
v-model:value="form.path"
|
||||
@pressEnter="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="code" name="code" v-if="isUpdate">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="code"
|
||||
v-model:value="form.code"
|
||||
@pressEnter="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="style" name="style" v-if="isUpdate">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="style"
|
||||
v-model:value="form.style"
|
||||
@pressEnter="save"
|
||||
/>
|
||||
</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-col>
|
||||
<a-col
|
||||
v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
|
||||
>
|
||||
<!-- <a-form-item label="模型" name="model">-->
|
||||
<!-- <SelectModel-->
|
||||
<!-- dict-code="NavigationModel"-->
|
||||
<!-- :placeholder="`选择模型`"-->
|
||||
<!-- v-model:value="form.model"-->
|
||||
<!-- @done="chooseModel"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item label="位置" name="top" v-if="isUpdate">
|
||||
<a-radio-group v-model:value="form.position" @change="onPosition">
|
||||
<a-radio :value="1">顶部</a-radio>
|
||||
<a-radio :value="2">底部</a-radio>
|
||||
<a-radio :value="0">不限</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="栅格" name="span">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="24"
|
||||
v-model:value="form.span"
|
||||
@pressEnter="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="99999"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"
|
||||
@pressEnter="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="图标" name="icon">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
:width="50"
|
||||
:height="50"
|
||||
@done="chooseFile"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-divider style="margin-bottom: 16px" />
|
||||
<a-form-item label="状态" name="hide">
|
||||
<a-space>
|
||||
<a-switch
|
||||
checked-children="显示"
|
||||
un-checked-children="隐藏"
|
||||
:checked="form.hide === 0"
|
||||
@update:checked="updateHideValue"
|
||||
/>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="权限" name="permission" v-if="isUpdate">
|
||||
<a-radio-group v-model:value="form.permission">
|
||||
<a-radio :value="0">所有人</a-radio>
|
||||
<a-radio :value="1">登录可见</a-radio>
|
||||
<a-radio :value="2">密码可见</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="访问密码"
|
||||
name="password"
|
||||
v-if="form.permission == 2"
|
||||
>
|
||||
<a-input-password
|
||||
allow-clear
|
||||
placeholder="请输入查看密码"
|
||||
v-model:value="password"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="关联栏目"
|
||||
name="style"
|
||||
v-if="lang && lang != 'zh_CN'"
|
||||
extra="选择对应中文栏目，用于同步保存翻译内容"
|
||||
>
|
||||
<a-tree-select
|
||||
allow-clear
|
||||
:tree-data="zhCmsNavigationList"
|
||||
tree-default-expand-all
|
||||
placeholder="请选择上级分类"
|
||||
:value="form.langCategoryId || undefined"
|
||||
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
|
||||
@update:value="(value?: number) => (form.langCategoryId = value)"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { toTreeData } from 'ele-admin-pro/es';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
||||
import {
|
||||
addCmsNavigation,
|
||||
listCmsNavigation,
|
||||
updateCmsNavigation
|
||||
} from '@/api/cms/cmsNavigation';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { FileRecord } from '@/api/system/file/model';
|
||||
import { uuid } from 'ele-admin-pro';
|
||||
import { CmsModel } from '@/api/cms/cmsModel/model';
|
||||
import { listCmsModel } from '@/api/cms/cmsModel';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
const { locale } = useI18n();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsNavigation | null;
|
||||
// 上级分类id
|
||||
parentId?: number;
|
||||
// 位置
|
||||
position?: number;
|
||||
// 全部导航数据
|
||||
navigationList: CmsNavigation[];
|
||||
// 模型
|
||||
model?: string;
|
||||
}>();
|
||||
|
||||
const models = ref<CmsModel[]>([]);
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 已上传数据
|
||||
const images = ref<ItemType[]>([]);
|
||||
const password = ref();
|
||||
const pathPlaceholder = ref<string>('/pages/index/index');
|
||||
const lang = ref(localStorage.getItem('i18n-lang'));
|
||||
const zhCmsNavigationList = ref<CmsNavigation[]>([]);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<CmsNavigation>({
|
||||
navigationId: undefined,
|
||||
model: 'page',
|
||||
code: undefined,
|
||||
modelName: undefined,
|
||||
type: 0,
|
||||
title: '',
|
||||
parentId: 0,
|
||||
parentName: undefined,
|
||||
parentPath: undefined,
|
||||
parentPosition: undefined,
|
||||
path: undefined,
|
||||
component: undefined,
|
||||
componentPath: '/pages/[page].vue',
|
||||
sortNumber: 100,
|
||||
comments: '',
|
||||
hide: 0,
|
||||
permission: 0,
|
||||
password: undefined,
|
||||
position: 1,
|
||||
top: 0,
|
||||
bottom: 1,
|
||||
gutter: undefined,
|
||||
span: 0,
|
||||
isMpWeixin: undefined,
|
||||
status: 0,
|
||||
pageId: 0,
|
||||
itemId: 0,
|
||||
lang: locale.value,
|
||||
langCategoryId: undefined,
|
||||
tenantId: undefined
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
title: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入菜单名称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
itemId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择详情页ID',
|
||||
type: 'number',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
path: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入路由地址',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
model: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择模型',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
// component: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'string',
|
||||
// trigger: 'blur',
|
||||
// validator: (_rule: Rule, value: string) => {
|
||||
// return new Promise<void>((resolve, reject) => {
|
||||
// if (!value) {
|
||||
// return reject('请填写组件路径');
|
||||
// }
|
||||
// if (value.charAt(0) != '/') {
|
||||
// return reject('请填写路由地址，必须是以"/"开头的英文字母+数字');
|
||||
// }
|
||||
// if (isChinese(value)) {
|
||||
// return reject('不支持中文');
|
||||
// }
|
||||
// resolve();
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// path: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'string',
|
||||
// trigger: 'blur',
|
||||
// validator: (_rule: Rule, value: string) => {
|
||||
// return new Promise<void>((resolve, reject) => {
|
||||
// if (!value) {
|
||||
// return reject('请填写路由地址');
|
||||
// }
|
||||
// if (form.type == 9) {
|
||||
// if (!isUrl(value)) {
|
||||
// return reject('请输入正确的网址');
|
||||
// }
|
||||
// resolve();
|
||||
// }
|
||||
// if (form.type == 1) {
|
||||
// if (form.pageId == 0) {
|
||||
// return reject('请选择页面');
|
||||
// }
|
||||
// }
|
||||
// if (value.charAt(0) != '/') {
|
||||
// return reject('请填写路由地址，必须是以"/"开头的英文字母+数字');
|
||||
// }
|
||||
// if (isChinese(value)) {
|
||||
// return reject('不支持中文');
|
||||
// }
|
||||
// resolve();
|
||||
// // checkExistence('path', value, form.navigationId)
|
||||
// // .then((msg) => {
|
||||
// // return reject(msg);
|
||||
// // })
|
||||
// // .catch(() => {
|
||||
// // resolve();
|
||||
// // });
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
status: [
|
||||
{
|
||||
required: true,
|
||||
message: '请设置是否展示',
|
||||
type: 'number',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const chooseModel = (item: CmsModel) => {
|
||||
form.model = `${item.model}`;
|
||||
form.path = `${item.path}`;
|
||||
form.component = `${item.component}`;
|
||||
form.itemId = undefined;
|
||||
|
||||
if (item.model == 'links') {
|
||||
pathPlaceholder.value = 'https://';
|
||||
}
|
||||
if (item.model == 'product') {
|
||||
pathPlaceholder.value = '/iphone-15-pro';
|
||||
}
|
||||
};
|
||||
|
||||
const chooseFile = (data: FileRecord) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
form.icon = data.path;
|
||||
};
|
||||
|
||||
const onDeleteItem = (index: number) => {
|
||||
images.value.splice(index, 1);
|
||||
form.icon = '';
|
||||
};
|
||||
|
||||
const onPosition = (index: number) => {
|
||||
if (form.position == 0) {
|
||||
form.top = 0;
|
||||
form.bottom = 0;
|
||||
}
|
||||
if (form.position == 1) {
|
||||
form.top = 0;
|
||||
form.bottom = 1;
|
||||
}
|
||||
if (form.position == 2) {
|
||||
form.top = 1;
|
||||
form.bottom = 0;
|
||||
}
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
if (password.value) {
|
||||
form.password = password.value;
|
||||
}
|
||||
if (form.model == 'detail' && form.itemId == 0) {
|
||||
message.error('请输入文章ID');
|
||||
return false;
|
||||
}
|
||||
if (form.model == 'item' && form.itemId == 0) {
|
||||
message.error('请输入产品ID');
|
||||
return false;
|
||||
}
|
||||
if (form.path == '/') {
|
||||
form.model = 'index';
|
||||
form.sortNumber = 0;
|
||||
}
|
||||
const navigationForm = {
|
||||
...form,
|
||||
parentId: form.parentId || 0
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateCmsNavigation
|
||||
: addCmsNavigation;
|
||||
saveOrUpdate(navigationForm)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const updateHideValue = (value: boolean) => {
|
||||
form.hide = value ? 0 : 1;
|
||||
};
|
||||
|
||||
// 获取模型列表
|
||||
const getModels = () => {
|
||||
listCmsModel({}).then((res) => {
|
||||
models.value = res.map((d) => {
|
||||
d.label = d.name;
|
||||
d.value = d.model;
|
||||
return d;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 简体中文栏目
|
||||
if (lang.value != 'zh_CN') {
|
||||
listCmsNavigation({
|
||||
lang: 'zh_CN'
|
||||
}).then((list) => {
|
||||
zhCmsNavigationList.value = toTreeData({
|
||||
data: list.map((d) => {
|
||||
return { ...d, key: d.navigationId, value: d.navigationId };
|
||||
}),
|
||||
idField: 'navigationId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
getModels();
|
||||
if (visible) {
|
||||
form.position = props.position;
|
||||
images.value = [];
|
||||
if (props.parentId) {
|
||||
form.parentId = props.parentId;
|
||||
}
|
||||
if (props.model) {
|
||||
form.model = props.model;
|
||||
form.path = `/${props.model}`;
|
||||
form.component = `/pages/${props.model}/index.vue`;
|
||||
if (props.model == 'page') {
|
||||
form.component = `/pages/[${props.model}]/index.vue`;
|
||||
}
|
||||
}
|
||||
if (props.data) {
|
||||
assignFields({
|
||||
...props.data,
|
||||
tempPath: props.data.path
|
||||
});
|
||||
if (props.data.icon) {
|
||||
images.value.push({
|
||||
uid: uuid(),
|
||||
url: props.data.icon,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (form.lang == '') {
|
||||
form.lang = locale.value;
|
||||
}
|
||||
if (props.data.parentPosition) {
|
||||
form.position = props.data.parentPosition;
|
||||
}
|
||||
// if (props.data.type == 2) {
|
||||
// form.pageName = props.data.title;
|
||||
// }
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import * as icons from '@/layout/menu-icons';
|
||||
|
||||
export default {
|
||||
components: icons,
|
||||
data() {
|
||||
return {
|
||||
iconData: [
|
||||
{
|
||||
title: '已引入的图标',
|
||||
icons: Object.keys(icons)
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
240
src/views/cms/cmsNavigation/components/search.vue
Normal file
240
src/views/cms/cmsNavigation/components/search.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-button type="primary" class="ele-btn-icon" @click="emit('add')">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<a-button
|
||||
type="dashed"
|
||||
:disabled="!hasRole('superAdmin')"
|
||||
@click="handleExport"
|
||||
>备份</a-button
|
||||
>
|
||||
<a-button
|
||||
type="dashed"
|
||||
:disabled="!hasRole('superAdmin')"
|
||||
@click="openImport"
|
||||
>恢复</a-button
|
||||
>
|
||||
<a-button type="dashed" @click="openUrl('/website/model')"
|
||||
>模型管理
|
||||
</a-button>
|
||||
<a-divider type="vertical" />
|
||||
<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" />
|
||||
<a-select
|
||||
v-model:value="where.model"
|
||||
style="width: 150px"
|
||||
placeholder="选择模型"
|
||||
@change="reload"
|
||||
>
|
||||
<a-select-option value="">全部</a-select-option>
|
||||
<a-select-option :value="1">文章</a-select-option>
|
||||
<a-select-option :value="2">单页</a-select-option>
|
||||
<a-select-option :value="3">链接</a-select-option>
|
||||
<a-select-option :value="4">帮助</a-select-option>
|
||||
<a-select-option :value="5">关于</a-select-option>
|
||||
</a-select>
|
||||
<!-- 搜索表单 -->
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入搜索关键词"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
/>
|
||||
</a-space>
|
||||
<!-- 导入弹窗 -->
|
||||
<import v-model:visible="showImport" @done="reload" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch, ref } from 'vue';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { listCmsNavigation } from '@/api/cms/cmsNavigation';
|
||||
import { getTenantId } from '@/utils/domain';
|
||||
import Import from './Import.vue';
|
||||
|
||||
// 是否显示导入弹窗
|
||||
const showImport = ref(false);
|
||||
const searchText = ref('');
|
||||
// 导出请求状态
|
||||
const loading = ref(false);
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
}>();
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
|
||||
// 表单数据
|
||||
const where = ref({
|
||||
keywords: '',
|
||||
model: '',
|
||||
position: 0
|
||||
});
|
||||
|
||||
const position = ref(0);
|
||||
|
||||
const reload = () => {
|
||||
// 更新搜索关键词
|
||||
where.value.keywords = searchText.value;
|
||||
emit('search', where.value);
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openImport = () => {
|
||||
showImport.value = true;
|
||||
};
|
||||
|
||||
// 导出
|
||||
const handleExport = async () => {
|
||||
if (loading.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
const array: (string | number)[][] = [
|
||||
[
|
||||
'上级id',
|
||||
'菜单名称',
|
||||
'模型',
|
||||
'标识',
|
||||
'菜单路由地址',
|
||||
'菜单组件地址',
|
||||
'打开位置',
|
||||
'菜单图标',
|
||||
'banner图片',
|
||||
'图标颜色',
|
||||
'是否隐藏',
|
||||
'可见类型',
|
||||
'访问密码',
|
||||
'位置',
|
||||
'仅在顶部显示',
|
||||
'仅在底部显示',
|
||||
'菜单侧栏选中的path',
|
||||
'其它路由元信息',
|
||||
'css样式',
|
||||
'是否推荐',
|
||||
'排序',
|
||||
'备注',
|
||||
'状态'
|
||||
]
|
||||
];
|
||||
|
||||
// 按搜索结果导出
|
||||
message.loading('正在准备导出数据...', 0);
|
||||
|
||||
try {
|
||||
const list = await listCmsNavigation(where.value);
|
||||
|
||||
if (!list || list.length === 0) {
|
||||
message.destroy();
|
||||
message.warning('没有数据可以导出');
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
list.forEach((d) => {
|
||||
array.push([
|
||||
`${d.parentId || ''}`,
|
||||
`${d.title || ''}`,
|
||||
`${d.model || ''}`,
|
||||
`${d.code || ''}`,
|
||||
`${d.path || ''}`,
|
||||
`${d.component || ''}`,
|
||||
`${d.target || ''}`,
|
||||
`${d.icon || ''}`,
|
||||
`${d.banner || ''}`,
|
||||
`${d.color || ''}`,
|
||||
`${d.hide || 0}`,
|
||||
`${d.permission || 0}`,
|
||||
`${d.password || ''}`,
|
||||
`${d.position || 0}`,
|
||||
`${d.top || 0}`,
|
||||
`${d.bottom || 0}`,
|
||||
`${d.active || ''}`,
|
||||
`${d.meta || ''}`,
|
||||
`${d.style || ''}`,
|
||||
`${d.recommend ? 1 : 0}`,
|
||||
`${d.sortNumber || 0}`,
|
||||
`${d.comments || ''}`,
|
||||
`${d.status || 0}`
|
||||
]);
|
||||
});
|
||||
|
||||
const sheetName = `bak_navigation_${getTenantId()}`;
|
||||
const workbook = {
|
||||
SheetNames: [sheetName],
|
||||
Sheets: {}
|
||||
};
|
||||
const sheet = utils.aoa_to_sheet(array);
|
||||
workbook.Sheets[sheetName] = sheet;
|
||||
|
||||
// 设置列宽
|
||||
sheet['!cols'] = [
|
||||
{ wch: 10 }, // 上级id
|
||||
{ wch: 20 }, // 菜单名称
|
||||
{ wch: 10 }, // 模型
|
||||
{ wch: 20 }, // 标识
|
||||
{ wch: 30 }, // 菜单路由地址
|
||||
{ wch: 30 }, // 菜单组件地址
|
||||
{ wch: 10 }, // 打开位置
|
||||
{ wch: 18 }, // 菜单图标
|
||||
{ wch: 24 }, // banner图片
|
||||
{ wch: 12 }, // 图标颜色
|
||||
{ wch: 10 }, // 是否隐藏
|
||||
{ wch: 10 }, // 可见类型
|
||||
{ wch: 16 }, // 访问密码
|
||||
{ wch: 10 }, // 位置
|
||||
{ wch: 12 }, // 仅在顶部显示
|
||||
{ wch: 12 }, // 仅在底部显示
|
||||
{ wch: 26 }, // 菜单侧栏选中的path
|
||||
{ wch: 20 }, // 其它路由元信息
|
||||
{ wch: 20 }, // css样式
|
||||
{ wch: 10 }, // 是否推荐
|
||||
{ wch: 10 }, // 排序
|
||||
{ wch: 20 }, // 备注
|
||||
{ wch: 10 } // 状态
|
||||
];
|
||||
|
||||
message.destroy();
|
||||
message.loading('正在生成Excel文件...', 0);
|
||||
|
||||
setTimeout(() => {
|
||||
writeFile(workbook, `${sheetName}.xlsx`);
|
||||
loading.value = false;
|
||||
message.destroy();
|
||||
message.success(`成功导出 ${list.length} 条记录`);
|
||||
}, 1000);
|
||||
} catch (e: any) {
|
||||
loading.value = false;
|
||||
message.destroy();
|
||||
message.error(e.message || '导出失败，请重试');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
787
src/views/cms/cmsNavigation/index.vue
Normal file
787
src/views/cms/cmsNavigation/index.vue
Normal file
@@ -0,0 +1,787 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<template #extra>
|
||||
<Extra />
|
||||
</template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="navigationId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:parse-data="parseData"
|
||||
:need-page="false"
|
||||
:customRow="customRow"
|
||||
:expand-icon-column-index="1"
|
||||
:expanded-row-keys="expandedRowKeys"
|
||||
:scroll="{ x: 1200 }"
|
||||
cache-key="proCmsNavigationTable"
|
||||
@done="onDone"
|
||||
@expand="onExpand"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
<template v-if="expandedRowKeys.length == 0">
|
||||
<a-button type="dashed" class="ele-btn-icon" @click="expandAll">
|
||||
<template #icon>
|
||||
<PlusSquareOutlined />
|
||||
</template>
|
||||
展开
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-button type="dashed" class="ele-btn-icon" @click="foldAll">
|
||||
<template #icon>
|
||||
<MinusSquareOutlined />
|
||||
</template>
|
||||
折叠
|
||||
</a-button>
|
||||
</template>
|
||||
<a-divider type="vertical" />
|
||||
<a-button
|
||||
type="dashed"
|
||||
:disabled="!hasRole('superAdmin')"
|
||||
@click="handleExport"
|
||||
>备份</a-button
|
||||
>
|
||||
<a-button
|
||||
type="dashed"
|
||||
:disabled="!hasRole('superAdmin')"
|
||||
@click="openImport"
|
||||
>恢复</a-button
|
||||
>
|
||||
<a-button type="dashed" @click="push('/website/model')"
|
||||
>模型管理
|
||||
</a-button>
|
||||
<a-button
|
||||
type="dashed"
|
||||
class="ele-btn-icon"
|
||||
@click="clearSiteInfoCache"
|
||||
>
|
||||
清除缓存
|
||||
</a-button>
|
||||
<a-divider type="vertical" />
|
||||
<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-select
|
||||
v-model:value="modelName"
|
||||
style="width: 150px"
|
||||
placeholder="选择模型"
|
||||
@change="reload"
|
||||
>
|
||||
<a-select-option :value="undefined">不限</a-select-option>
|
||||
<template v-for="(item, index) in modelList" :key="index">
|
||||
<a-select-option :value="item.model" :index="index">{{
|
||||
item.name
|
||||
}}</a-select-option>
|
||||
</template>
|
||||
</a-select>
|
||||
<!-- 搜索表单 -->
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入搜索关键词"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.key === 'title'">
|
||||
<a-space>
|
||||
<a-avatar v-if="record.icon" :size="22" :src="record.icon" />
|
||||
<a
|
||||
@click="
|
||||
push({
|
||||
path: `/article`,
|
||||
query: {
|
||||
id: record.navigationId,
|
||||
name: record.title,
|
||||
model: record.model
|
||||
}
|
||||
})
|
||||
"
|
||||
>{{ record.title }}</a
|
||||
>
|
||||
</a-space>
|
||||
<template v-if="record.model == 'page'">
|
||||
<a-divider type="vertical" />
|
||||
<a-tooltip
|
||||
v-if="record.model == 'page'"
|
||||
:title="`编辑页面内容及SEO信息`"
|
||||
>
|
||||
<a @click="openDesign(record)">
|
||||
<FileWordOutlined />
|
||||
</a>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.key === 'path'">
|
||||
<div
|
||||
@mouseover="saveNavigationIcon(record.navigationId)"
|
||||
@mouseleave="removeNavigationIcon"
|
||||
>
|
||||
<span class="text-gray-400">{{ record.path }}</span>
|
||||
<span
|
||||
class="text-gray-400"
|
||||
v-if="currentId == record.navigationId"
|
||||
@click="copyText(record.path)"
|
||||
><CopyOutlined class="px-2"
|
||||
/></span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'component'">
|
||||
<template v-if="!isDirectory(record)">
|
||||
<span class="ele-text-placeholder">{{ record.component }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span></span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.key === 'model'">
|
||||
|
||||
<text class="ele-text-placeholder"><span>{{ record.modelName }}({{ record.model }})</span></text>
|
||||
</template>
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-tag v-if="isExternalLink(record.path)" color="purple"
|
||||
>外部链接
|
||||
</a-tag>
|
||||
<a-tag v-else-if="index === 0" color="orange">首页</a-tag>
|
||||
<a-tag v-else-if="isExternalLink(record.component)" color="orange">
|
||||
内链
|
||||
</a-tag>
|
||||
<span v-else-if="isDirectory(record)"></span>
|
||||
<a-tag v-else>{{ record.modelName }}</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'banner'">
|
||||
<a-image v-if="record.banner" :src="record.banner" :width="100" />
|
||||
</template>
|
||||
<template v-if="column.key === 'showIndex'">
|
||||
<a-tag v-if="record.showIndex === 1" color="green">显示</a-tag>
|
||||
<span v-else></span>
|
||||
</template>
|
||||
<template v-if="column.key === 'position'">
|
||||
<a-space>
|
||||
<span v-if="record.top === 0" class="ele-text-placeholder"
|
||||
>顶部</span
|
||||
>
|
||||
<span v-if="record.bottom === 0" class="ele-text-placeholder"
|
||||
>底部</span
|
||||
>
|
||||
<span v-if="record.top === 0 || record.bottom === 0"></span>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-if="column.key === 'hide'">
|
||||
<span v-if="record.hide === 0" class="ele-text-success">显示</span>
|
||||
<span v-if="record.hide === 1" class="ele-text-placeholder"
|
||||
>隐藏</span
|
||||
>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<template v-if="record.path != '/'">
|
||||
<!-- <a-tooltip v-if="record.model == 'page'" :title="`配置SEO及页面内容`">-->
|
||||
<!-- <a @click="openDesign(record)">单页</a>-->
|
||||
<!-- <a-divider type="vertical"/>-->
|
||||
<!-- </a-tooltip>-->
|
||||
<a-tooltip :title="`添加子分类`">
|
||||
<a @click="openEdit(null, record.navigationId, record.model)"
|
||||
>添加</a
|
||||
>
|
||||
</a-tooltip>
|
||||
<!-- <a-divider type="vertical" />-->
|
||||
<!-- <a-tooltip :title="`自定义组件`">-->
|
||||
<!-- <a @click="openDesign(record)">组件</a>-->
|
||||
<!-- </a-tooltip>-->
|
||||
<a-divider type="vertical" />
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
title="确定要删除此菜单吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- <a-tooltip :title="`布局`">-->
|
||||
<!-- <a @click="openEdit(null, record.navigationId,record.model)" disabled>设置</a>-->
|
||||
<!-- </a-tooltip>-->
|
||||
<!-- <a-tooltip :title="`添加子分类`">-->
|
||||
<!-- <a @click="openEdit(null, record.navigationId,record.model)">添加</a>-->
|
||||
<!-- </a-tooltip>-->
|
||||
<!-- <a-tooltip :title="`自定义组件`">-->
|
||||
<!-- <a @click="openDesign(record)">组件</a>-->
|
||||
<!-- </a-tooltip>-->
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
title="确定要删除此菜单吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsNavigationEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
:parent-id="parentId"
|
||||
:navigation-list="navigationData"
|
||||
:position="position"
|
||||
:model="model"
|
||||
@done="reload"
|
||||
/>
|
||||
<!-- 页面编辑弹窗 -->
|
||||
<DesignEdit
|
||||
v-model:visible="showDesignEdit"
|
||||
:data="design"
|
||||
:category-id="categoryId"
|
||||
@done="reload"
|
||||
/>
|
||||
<!-- 导入备份弹窗 -->
|
||||
<Import v-model:visible="showImport" @done="reload" />
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import {
|
||||
PlusOutlined,
|
||||
CopyOutlined,
|
||||
FileWordOutlined,
|
||||
MinusOutlined,
|
||||
MinusSquareOutlined,
|
||||
PlusSquareOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem,
|
||||
EleProTableDone
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import {
|
||||
messageLoading,
|
||||
toDateString,
|
||||
isExternalLink,
|
||||
toTreeData,
|
||||
eachTreeData
|
||||
} from 'ele-admin-pro/es';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import CmsNavigationEdit from './components/navigation-edit.vue';
|
||||
import DesignEdit from './components/design-edit.vue';
|
||||
import Import from './components/Import.vue';
|
||||
import {
|
||||
listCmsNavigation,
|
||||
removeCmsNavigation
|
||||
} from '@/api/cms/cmsNavigation';
|
||||
import type {
|
||||
CmsNavigation,
|
||||
CmsNavigationParam
|
||||
} from '@/api/cms/cmsNavigation/model';
|
||||
import { copyText, getPageTitle } from '@/utils/common';
|
||||
import { CmsDesign } from '@/api/cms/cmsDesign/model';
|
||||
import { removeSiteInfoCache } from '@/api/cms/cmsWebsite';
|
||||
import Extra from './components/extra.vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { listCmsModel } from '@/api/cms/cmsModel';
|
||||
import { CmsModel } from '@/api/cms/cmsModel/model';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
import { getTenantId } from '@/utils/domain';
|
||||
|
||||
const { push } = useRouter();
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const modelList = ref<CmsModel[]>([]);
|
||||
const currentId = ref<number>();
|
||||
const modelName = ref<string>();
|
||||
// 国际化
|
||||
const { locale } = useI18n();
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
// {
|
||||
// key: 'index',
|
||||
// width: 48,
|
||||
// align: 'center',
|
||||
// fixed: 'left',
|
||||
// hideInSetting: true,
|
||||
// customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
// },
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'navigationId',
|
||||
key: 'navigationId',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '栏目名称',
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '路径',
|
||||
dataIndex: 'path',
|
||||
key: 'path'
|
||||
},
|
||||
{
|
||||
title: '组件路径',
|
||||
dataIndex: 'component',
|
||||
hideInTable: true,
|
||||
key: 'component'
|
||||
},
|
||||
{
|
||||
title: '模型',
|
||||
dataIndex: 'model',
|
||||
key: 'model',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: 'banner',
|
||||
dataIndex: 'banner',
|
||||
align: 'center',
|
||||
key: 'banner',
|
||||
width: 120,
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: '位置',
|
||||
dataIndex: 'position',
|
||||
key: 'position',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'hide',
|
||||
key: 'hide',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
showSorterTooltip: false,
|
||||
customRender: ({ text }) => ['显示', '隐藏'][text]
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true,
|
||||
hideInTable: true,
|
||||
width: 180,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
width: 220,
|
||||
fixed: 'right'
|
||||
}
|
||||
]);
|
||||
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsNavigation | null>(null);
|
||||
// 当前选中页面
|
||||
const design = ref<CmsDesign>();
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 编辑内容
|
||||
const showDesignEdit = ref(false);
|
||||
// 是否显示导入弹窗
|
||||
const showImport = ref(false);
|
||||
// 导出请求状态
|
||||
const exportLoading = ref(false);
|
||||
// 上级分类id
|
||||
const parentId = ref<number>();
|
||||
const categoryId = ref<number>();
|
||||
// 分类数据
|
||||
const navigationData = ref<CmsNavigation[]>([]);
|
||||
// 表格展开的行
|
||||
const expandedRowKeys = ref<number[]>([]);
|
||||
const searchText = ref('');
|
||||
const position = ref(undefined);
|
||||
const model = ref<any>('page');
|
||||
|
||||
/* 打开导入弹窗 */
|
||||
const openImport = () => {
|
||||
showImport.value = true;
|
||||
};
|
||||
|
||||
// 导出备份
|
||||
const handleExport = async () => {
|
||||
if (exportLoading.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
exportLoading.value = true;
|
||||
const array: (string | number)[][] = [
|
||||
[
|
||||
'上级id',
|
||||
'菜单名称',
|
||||
'模型',
|
||||
'标识',
|
||||
'菜单路由地址',
|
||||
'菜单组件地址',
|
||||
'打开位置',
|
||||
'菜单图标',
|
||||
'banner图片',
|
||||
'图标颜色',
|
||||
'是否隐藏',
|
||||
'可见类型',
|
||||
'访问密码',
|
||||
'位置',
|
||||
'仅在顶部显示',
|
||||
'仅在底部显示',
|
||||
'菜单侧栏选中的path',
|
||||
'其它路由元信息',
|
||||
'css样式',
|
||||
'是否推荐',
|
||||
'排序',
|
||||
'备注',
|
||||
'状态'
|
||||
]
|
||||
];
|
||||
|
||||
// 以当前筛选条件导出
|
||||
message.loading('正在准备导出数据...', 0);
|
||||
const where: any = {};
|
||||
where.keywords = searchText.value || undefined;
|
||||
where.top = undefined;
|
||||
where.bottom = undefined;
|
||||
if (position.value == 1) {
|
||||
where.top = 0;
|
||||
where.bottom = undefined;
|
||||
}
|
||||
if (position.value == 2) {
|
||||
where.top = undefined;
|
||||
where.bottom = 0;
|
||||
}
|
||||
if (position.value == 0) {
|
||||
where.top = undefined;
|
||||
where.bottom = undefined;
|
||||
}
|
||||
where.isMpWeixin = false;
|
||||
// if (locale.value) {
|
||||
// where.lang = locale.value || undefined;
|
||||
// }
|
||||
where.model = modelName.value;
|
||||
|
||||
try {
|
||||
const list = await listCmsNavigation(where);
|
||||
if (!list || list.length === 0) {
|
||||
message.destroy();
|
||||
message.warning('没有数据可以导出');
|
||||
exportLoading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
list.forEach((d) => {
|
||||
array.push([
|
||||
`${d.parentId || ''}`,
|
||||
`${d.title || ''}`,
|
||||
`${d.model || ''}`,
|
||||
`${d.code || ''}`,
|
||||
`${d.path || ''}`,
|
||||
`${d.component || ''}`,
|
||||
`${d.target || ''}`,
|
||||
`${d.icon || ''}`,
|
||||
`${d.banner || ''}`,
|
||||
`${d.color || ''}`,
|
||||
`${d.hide || 0}`,
|
||||
`${d.permission || 0}`,
|
||||
`${d.password || ''}`,
|
||||
`${d.position || 0}`,
|
||||
`${d.top || 0}`,
|
||||
`${d.bottom || 0}`,
|
||||
`${d.active || ''}`,
|
||||
`${d.meta || ''}`,
|
||||
`${d.style || ''}`,
|
||||
`${d.recommend ? 1 : 0}`,
|
||||
`${d.sortNumber || 0}`,
|
||||
`${d.comments || ''}`,
|
||||
`${d.status || 0}`
|
||||
]);
|
||||
});
|
||||
|
||||
const sheetName = `bak_navigation_${getTenantId()}`;
|
||||
const workbook = {
|
||||
SheetNames: [sheetName],
|
||||
Sheets: {}
|
||||
} as any;
|
||||
const sheet = utils.aoa_to_sheet(array);
|
||||
workbook.Sheets[sheetName] = sheet;
|
||||
|
||||
// 设置列宽
|
||||
sheet['!cols'] = [
|
||||
{ wch: 10 }, // 上级id
|
||||
{ wch: 20 }, // 菜单名称
|
||||
{ wch: 10 }, // 模型
|
||||
{ wch: 20 }, // 标识
|
||||
{ wch: 30 }, // 菜单路由地址
|
||||
{ wch: 30 }, // 菜单组件地址
|
||||
{ wch: 10 }, // 打开位置
|
||||
{ wch: 18 }, // 菜单图标
|
||||
{ wch: 24 }, // banner图片
|
||||
{ wch: 12 }, // 图标颜色
|
||||
{ wch: 10 }, // 是否隐藏
|
||||
{ wch: 10 }, // 可见类型
|
||||
{ wch: 16 }, // 访问密码
|
||||
{ wch: 10 }, // 位置
|
||||
{ wch: 12 }, // 仅在顶部显示
|
||||
{ wch: 12 }, // 仅在底部显示
|
||||
{ wch: 26 }, // 菜单侧栏选中的path
|
||||
{ wch: 20 }, // 其它路由元信息
|
||||
{ wch: 20 }, // css样式
|
||||
{ wch: 10 }, // 是否推荐
|
||||
{ wch: 10 }, // 排序
|
||||
{ wch: 20 }, // 备注
|
||||
{ wch: 10 } // 状态
|
||||
];
|
||||
|
||||
message.destroy();
|
||||
message.loading('正在生成Excel文件...', 0);
|
||||
setTimeout(() => {
|
||||
writeFile(workbook, `${sheetName}.xlsx`);
|
||||
exportLoading.value = false;
|
||||
message.destroy();
|
||||
message.success(`成功导出 ${list.length} 条记录`);
|
||||
}, 600);
|
||||
} catch (e: any) {
|
||||
exportLoading.value = false;
|
||||
message.destroy();
|
||||
message.error(e?.message || '导出失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
// 清除缓存
|
||||
const clearSiteInfoCache = () => {
|
||||
removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId')).then(
|
||||
(msg) => {
|
||||
if (msg) {
|
||||
message.success(msg);
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ where }) => {
|
||||
where = {};
|
||||
where.keywords = searchText.value;
|
||||
where.top = undefined;
|
||||
where.bottom = undefined;
|
||||
if (position.value == 1) {
|
||||
where.top = 0;
|
||||
where.bottom = undefined;
|
||||
}
|
||||
if (position.value == 2) {
|
||||
where.top = undefined;
|
||||
where.bottom = 0;
|
||||
}
|
||||
if (position.value == 0) {
|
||||
where.top = undefined;
|
||||
where.bottom = undefined;
|
||||
}
|
||||
where.isMpWeixin = false;
|
||||
// if (locale.value) {
|
||||
// where.lang = locale.value || undefined;
|
||||
// }
|
||||
where.model = modelName.value;
|
||||
return listCmsNavigation({ ...where });
|
||||
};
|
||||
|
||||
/* 数据转为树形结构 */
|
||||
const parseData = (data: CmsNavigation[]) => {
|
||||
return toTreeData({
|
||||
data: data.map((d) => {
|
||||
return { ...d, key: d.navigationId, value: d.navigationId };
|
||||
}),
|
||||
idField: 'navigationId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
};
|
||||
|
||||
/* 表格渲染完成回调 */
|
||||
const onDone: EleProTableDone<CmsNavigation> = ({ data }) => {
|
||||
navigationData.value = data;
|
||||
expandAll();
|
||||
};
|
||||
|
||||
/* 刷新表格 */
|
||||
const reload = (where?: CmsNavigationParam) => {
|
||||
console.log(where, 'w');
|
||||
tableRef?.value?.reload({ where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsNavigation | null, id?: number, mod?: string) => {
|
||||
current.value = row ?? null;
|
||||
model.value = mod ?? null;
|
||||
parentId.value = id;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
// 跳转模型内容列表
|
||||
const openDesign = (row?: CmsNavigation) => {
|
||||
categoryId.value = row?.navigationId;
|
||||
showDesignEdit.value = true;
|
||||
return;
|
||||
|
||||
// if (row && isDirectory(row)) {
|
||||
// categoryId.value = row?.navigationId;
|
||||
// showDesignEdit.value = true;
|
||||
// return;
|
||||
// }
|
||||
// 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 onModel = () => {
|
||||
reload();
|
||||
};
|
||||
|
||||
const saveNavigationIcon = (index: number) => {
|
||||
currentId.value = index;
|
||||
};
|
||||
|
||||
const removeNavigationIcon = () => {
|
||||
currentId.value = undefined;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsNavigation) => {
|
||||
console.log(row);
|
||||
if (row.children?.length) {
|
||||
message.error('请先删除子节点');
|
||||
return;
|
||||
}
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeCmsNavigation(row.navigationId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 展开全部 */
|
||||
const expandAll = () => {
|
||||
let keys: number[] = [];
|
||||
eachTreeData(navigationData.value, (d) => {
|
||||
if (d.children && d.children.length && d.navigationId) {
|
||||
keys.push(d.navigationId);
|
||||
}
|
||||
});
|
||||
expandedRowKeys.value = keys;
|
||||
};
|
||||
|
||||
/* 折叠全部 */
|
||||
const foldAll = () => {
|
||||
expandedRowKeys.value = [];
|
||||
};
|
||||
|
||||
/* 点击展开图标时触发 */
|
||||
const onExpand = (expanded: boolean, record: CmsNavigation) => {
|
||||
if (expanded) {
|
||||
expandedRowKeys.value = [
|
||||
...expandedRowKeys.value,
|
||||
record.navigationId as number
|
||||
];
|
||||
} else {
|
||||
expandedRowKeys.value = expandedRowKeys.value.filter(
|
||||
(d) => d !== record.navigationId
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
/* 判断是否是目录 */
|
||||
const isDirectory = (d: CmsNavigation) => {
|
||||
return !!d.children?.length;
|
||||
};
|
||||
|
||||
listCmsModel().then((data) => {
|
||||
modelList.value = data;
|
||||
});
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsNavigation) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
if (record.model !== 'index') {
|
||||
openEdit(record);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsNavigation'
|
||||
};
|
||||
</script>
|
||||
755
src/views/cms/cmsOrder/components/cmsOrderEdit.vue
Normal file
755
src/views/cms/cmsOrder/components/cmsOrderEdit.vue
Normal file
@@ -0,0 +1,755 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="订单类型，0售前咨询 1售后服务 2意见反馈" name="type">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入订单类型，0售前咨询 1售后服务 2意见反馈"
|
||||
v-model:value="form.type"
|
||||
/>
|
||||
</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="company">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入公司/团队名称"
|
||||
v-model:value="form.company"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="订单内容" name="content">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入订单内容"
|
||||
v-model:value="form.content"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="订单编号" name="orderNo">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入订单编号"
|
||||
v-model:value="form.orderNo"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="快递/自提" name="deliveryType">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入快递/自提"
|
||||
v-model:value="form.deliveryType"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="下单渠道，0网站 1微信小程序 2其他" name="channel">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入下单渠道，0网站 1微信小程序 2其他"
|
||||
v-model:value="form.channel"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="微信支付交易号号" name="transactionId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入微信支付交易号号"
|
||||
v-model:value="form.transactionId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="微信退款订单号" name="refundOrder">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入微信退款订单号"
|
||||
v-model:value="form.refundOrder"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="商户ID" name="merchantId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入商户ID"
|
||||
v-model:value="form.merchantId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="商户名称" name="merchantName">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入商户名称"
|
||||
v-model:value="form.merchantName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="商户编号" name="merchantCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入商户编号"
|
||||
v-model:value="form.merchantCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="使用的优惠券id" name="couponId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入使用的优惠券id"
|
||||
v-model:value="form.couponId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="使用的会员卡id" name="cardId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入使用的会员卡id"
|
||||
v-model:value="form.cardId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="关联管理员id" name="adminId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入关联管理员id"
|
||||
v-model:value="form.adminId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="核销管理员id" name="confirmId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入核销管理员id"
|
||||
v-model:value="form.confirmId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="IC卡号" name="icCard">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入IC卡号"
|
||||
v-model:value="form.icCard"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="真实姓名" name="realName">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入真实姓名"
|
||||
v-model:value="form.realName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="关联收货地址" name="addressId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入关联收货地址"
|
||||
v-model:value="form.addressId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="收货地址" name="address">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入收货地址"
|
||||
v-model:value="form.address"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="" name="addressLat">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入"
|
||||
v-model:value="form.addressLat"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="" name="addressLng">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入"
|
||||
v-model:value="form.addressLng"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="自提店铺id" name="selfTakeMerchantId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入自提店铺id"
|
||||
v-model:value="form.selfTakeMerchantId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="自提店铺" name="selfTakeMerchantName">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入自提店铺"
|
||||
v-model:value="form.selfTakeMerchantName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="配送开始时间" name="sendStartTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入配送开始时间"
|
||||
v-model:value="form.sendStartTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="配送结束时间" name="sendEndTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入配送结束时间"
|
||||
v-model:value="form.sendEndTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="发货店铺id" name="expressMerchantId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入发货店铺id"
|
||||
v-model:value="form.expressMerchantId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="发货店铺" name="expressMerchantName">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入发货店铺"
|
||||
v-model:value="form.expressMerchantName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="订单总额" name="totalPrice">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入订单总额"
|
||||
v-model:value="form.totalPrice"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="减少的金额，使用VIP会员折扣、优惠券抵扣、优惠券折扣后减去的价格" name="reducePrice">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入减少的金额，使用VIP会员折扣、优惠券抵扣、优惠券折扣后减去的价格"
|
||||
v-model:value="form.reducePrice"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="实际付款" name="payPrice">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入实际付款"
|
||||
v-model:value="form.payPrice"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="用于统计" name="price">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入用于统计"
|
||||
v-model:value="form.price"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="价钱，用于积分赠送" name="money">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入价钱，用于积分赠送"
|
||||
v-model:value="form.money"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="取消时间" name="cancelTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入取消时间"
|
||||
v-model:value="form.cancelTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="取消原因" name="cancelReason">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入取消原因"
|
||||
v-model:value="form.cancelReason"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="退款金额" name="refundMoney">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入退款金额"
|
||||
v-model:value="form.refundMoney"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="教练价格" name="coachPrice">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入教练价格"
|
||||
v-model:value="form.coachPrice"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="购买数量" name="totalNum">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入购买数量"
|
||||
v-model:value="form.totalNum"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="教练id" name="coachId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入教练id"
|
||||
v-model:value="form.coachId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="商品ID" name="formId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入商品ID"
|
||||
v-model:value="form.formId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="支付的用户id" name="payUserId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入支付的用户id"
|
||||
v-model:value="form.payUserId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="0余额支付，1微信支付，2支付宝支付，3银联支付，4现金支付，5POS机支付，6免费，7积分支付" name="payType">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入0余额支付，1微信支付，2支付宝支付，3银联支付，4现金支付，5POS机支付，6免费，7积分支付"
|
||||
v-model:value="form.payType"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="微信支付子类型：JSAPI小程序支付，NATIVE扫码支付" name="wechatPayType">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入微信支付子类型：JSAPI小程序支付，NATIVE扫码支付"
|
||||
v-model:value="form.wechatPayType"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="0余额支付，1微信支付，2支付宝支付，3银联支付，4现金支付，5POS机支付，6免费，7积分支付" name="friendPayType">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入0余额支付，1微信支付，2支付宝支付，3银联支付，4现金支付，5POS机支付，6免费，7积分支付"
|
||||
v-model:value="form.friendPayType"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="0未付款，1已付款" name="payStatus">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入0未付款，1已付款"
|
||||
v-model:value="form.payStatus"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="0未使用，1已完成，2已取消，3取消中，4退款申请中，5退款被拒绝，6退款成功，7客户端申请退款" name="orderStatus">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入0未使用，1已完成，2已取消，3取消中，4退款申请中，5退款被拒绝，6退款成功，7客户端申请退款"
|
||||
v-model:value="form.orderStatus"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="发货状态(10未发货 20已发货 30部分发货)" name="deliveryStatus">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入发货状态(10未发货 20已发货 30部分发货)"
|
||||
v-model:value="form.deliveryStatus"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="无需发货备注" name="deliveryNote">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入无需发货备注"
|
||||
v-model:value="form.deliveryNote"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="发货时间" name="deliveryTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入发货时间"
|
||||
v-model:value="form.deliveryTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="评价状态(0未评价 1已评价)" name="evaluateStatus">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入评价状态(0未评价 1已评价)"
|
||||
v-model:value="form.evaluateStatus"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="评价时间" name="evaluateTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入评价时间"
|
||||
v-model:value="form.evaluateTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="优惠类型：0无、1抵扣优惠券、2折扣优惠券、3、VIP月卡、4VIP年卡，5VIP次卡、6VIP会员卡、7IC月卡、8IC年卡、9IC次卡、10IC会员卡、11免费订单、12VIP充值卡、13IC充值卡、14VIP季卡、15IC季卡" name="couponType">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入优惠类型：0无、1抵扣优惠券、2折扣优惠券、3、VIP月卡、4VIP年卡，5VIP次卡、6VIP会员卡、7IC月卡、8IC年卡、9IC次卡、10IC会员卡、11免费订单、12VIP充值卡、13IC充值卡、14VIP季卡、15IC季卡"
|
||||
v-model:value="form.couponType"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="优惠说明" name="couponDesc">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入优惠说明"
|
||||
v-model:value="form.couponDesc"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="二维码地址，保存订单号，支付成功后才生成" name="qrcode">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入二维码地址，保存订单号，支付成功后才生成"
|
||||
v-model:value="form.qrcode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="vip月卡年卡、ic月卡年卡回退次数" name="returnNum">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入vip月卡年卡、ic月卡年卡回退次数"
|
||||
v-model:value="form.returnNum"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="vip充值回退金额" name="returnMoney">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入vip充值回退金额"
|
||||
v-model:value="form.returnMoney"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="预约详情开始时间数组" name="startTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入预约详情开始时间数组"
|
||||
v-model:value="form.startTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否已开具发票：0未开发票，1已开发票，2不能开具发票" name="isInvoice">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否已开具发票：0未开发票，1已开发票，2不能开具发票"
|
||||
v-model:value="form.isInvoice"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="发票流水号" name="invoiceNo">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入发票流水号"
|
||||
v-model:value="form.invoiceNo"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="商家留言" name="merchantRemarks">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入商家留言"
|
||||
v-model:value="form.merchantRemarks"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="支付时间" name="payTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入支付时间"
|
||||
v-model:value="form.payTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="退款时间" name="refundTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入退款时间"
|
||||
v-model:value="form.refundTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="申请退款时间" name="refundApplyTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入申请退款时间"
|
||||
v-model:value="form.refundApplyTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="过期时间" name="expirationTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入过期时间"
|
||||
v-model:value="form.expirationTime"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="自提码" name="selfTakeCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入自提码"
|
||||
v-model:value="form.selfTakeCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否已收到赠品" name="hasTakeGift">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否已收到赠品"
|
||||
v-model:value="form.hasTakeGift"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="对账情况：0=未对账；1=已对账；3=已对账，金额对不上；4=未查询到该订单" name="checkBill">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入对账情况：0=未对账；1=已对账；3=已对账，金额对不上；4=未查询到该订单"
|
||||
v-model:value="form.checkBill"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="订单是否已结算(0未结算 1已结算)" name="isSettled">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入订单是否已结算(0未结算 1已结算)"
|
||||
v-model:value="form.isSettled"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="系统版本号 0当前版本 value=其他版本" name="version">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入系统版本号 0当前版本 value=其他版本"
|
||||
v-model:value="form.version"
|
||||
/>
|
||||
</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="comments">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入描述"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</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="是否删除, 0否, 1是" name="deleted">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否删除, 0否, 1是"
|
||||
v-model:value="form.deleted"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="修改时间" name="updateTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入修改时间"
|
||||
v-model:value="form.updateTime"
|
||||
/>
|
||||
</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 { addCmsOrder, updateCmsOrder } from '@/api/cms/cmsOrder';
|
||||
import { CmsOrder } from '@/api/cms/cmsOrder/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsOrder | null;
|
||||
}>();
|
||||
|
||||
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<CmsOrder>({
|
||||
id: undefined,
|
||||
type: undefined,
|
||||
title: undefined,
|
||||
company: undefined,
|
||||
content: undefined,
|
||||
orderNo: undefined,
|
||||
deliveryType: undefined,
|
||||
channel: undefined,
|
||||
transactionId: undefined,
|
||||
refundOrder: undefined,
|
||||
merchantId: undefined,
|
||||
merchantName: undefined,
|
||||
merchantCode: undefined,
|
||||
couponId: undefined,
|
||||
cardId: undefined,
|
||||
adminId: undefined,
|
||||
confirmId: undefined,
|
||||
icCard: undefined,
|
||||
realName: undefined,
|
||||
addressId: undefined,
|
||||
address: undefined,
|
||||
addressLat: undefined,
|
||||
addressLng: undefined,
|
||||
selfTakeMerchantId: undefined,
|
||||
selfTakeMerchantName: undefined,
|
||||
sendStartTime: undefined,
|
||||
sendEndTime: undefined,
|
||||
expressMerchantId: undefined,
|
||||
expressMerchantName: undefined,
|
||||
totalPrice: undefined,
|
||||
reducePrice: undefined,
|
||||
payPrice: undefined,
|
||||
price: undefined,
|
||||
money: undefined,
|
||||
cancelTime: undefined,
|
||||
cancelReason: undefined,
|
||||
refundMoney: undefined,
|
||||
coachPrice: undefined,
|
||||
totalNum: undefined,
|
||||
coachId: undefined,
|
||||
formId: undefined,
|
||||
payUserId: undefined,
|
||||
payType: undefined,
|
||||
wechatPayType: undefined,
|
||||
friendPayType: undefined,
|
||||
payStatus: undefined,
|
||||
orderStatus: undefined,
|
||||
deliveryStatus: undefined,
|
||||
deliveryNote: undefined,
|
||||
deliveryTime: undefined,
|
||||
evaluateStatus: undefined,
|
||||
evaluateTime: undefined,
|
||||
couponType: undefined,
|
||||
couponDesc: undefined,
|
||||
qrcode: undefined,
|
||||
returnNum: undefined,
|
||||
returnMoney: undefined,
|
||||
startTime: undefined,
|
||||
isInvoice: undefined,
|
||||
invoiceNo: undefined,
|
||||
merchantRemarks: undefined,
|
||||
payTime: undefined,
|
||||
refundTime: undefined,
|
||||
refundApplyTime: undefined,
|
||||
expirationTime: undefined,
|
||||
selfTakeCode: undefined,
|
||||
hasTakeGift: undefined,
|
||||
checkBill: undefined,
|
||||
isSettled: undefined,
|
||||
version: undefined,
|
||||
userId: undefined,
|
||||
deleted: undefined,
|
||||
tenantId: undefined,
|
||||
updateTime: undefined,
|
||||
createTime: undefined,
|
||||
cmsOrderId: undefined,
|
||||
cmsOrderName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsOrderName: [
|
||||
{
|
||||
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 { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateCmsOrder : addCmsOrder;
|
||||
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/cmsOrder/components/search.vue
Normal file
42
src/views/cms/cmsOrder/components/search.vue
Normal 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 type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
662
src/views/cms/cmsOrder/index.vue
Normal file
662
src/views/cms/cmsOrder/index.vue
Normal file
@@ -0,0 +1,662 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsOrderEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, computed } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import {getPageTitle} from '@/utils/common';
|
||||
import CmsOrderEdit from './components/cmsOrderEdit.vue';
|
||||
import { pageCmsOrder, removeCmsOrder, removeBatchCmsOrder } from '@/api/cms/cmsOrder';
|
||||
import type { CmsOrder, CmsOrderParam } from '@/api/cms/cmsOrder/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsOrder[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsOrder | 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;
|
||||
}
|
||||
return pageCmsOrder({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 完整的列配置（包含所有字段）
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '订单类型，0售前咨询 1售后服务 2意见反馈',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '订单标题',
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '公司/团队名称',
|
||||
dataIndex: 'company',
|
||||
key: 'company',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '订单内容',
|
||||
dataIndex: 'content',
|
||||
key: 'content',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '订单编号',
|
||||
dataIndex: 'orderNo',
|
||||
key: 'orderNo',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '快递/自提',
|
||||
dataIndex: 'deliveryType',
|
||||
key: 'deliveryType',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '下单渠道，0网站 1微信小程序 2其他',
|
||||
dataIndex: 'channel',
|
||||
key: 'channel',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '微信支付交易号号',
|
||||
dataIndex: 'transactionId',
|
||||
key: 'transactionId',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '微信退款订单号',
|
||||
dataIndex: 'refundOrder',
|
||||
key: 'refundOrder',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '商户ID',
|
||||
dataIndex: 'merchantId',
|
||||
key: 'merchantId',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '商户名称',
|
||||
dataIndex: 'merchantName',
|
||||
key: 'merchantName',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '商户编号',
|
||||
dataIndex: 'merchantCode',
|
||||
key: 'merchantCode',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '使用的优惠券id',
|
||||
dataIndex: 'couponId',
|
||||
key: 'couponId',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '使用的会员卡id',
|
||||
dataIndex: 'cardId',
|
||||
key: 'cardId',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '关联管理员id',
|
||||
dataIndex: 'adminId',
|
||||
key: 'adminId',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '核销管理员id',
|
||||
dataIndex: 'confirmId',
|
||||
key: 'confirmId',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: 'IC卡号',
|
||||
dataIndex: 'icCard',
|
||||
key: 'icCard',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '真实姓名',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '关联收货地址',
|
||||
dataIndex: 'addressId',
|
||||
key: 'addressId',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '收货地址',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
dataIndex: 'addressLat',
|
||||
key: 'addressLat',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
dataIndex: 'addressLng',
|
||||
key: 'addressLng',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '自提店铺id',
|
||||
dataIndex: 'selfTakeMerchantId',
|
||||
key: 'selfTakeMerchantId',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '自提店铺',
|
||||
dataIndex: 'selfTakeMerchantName',
|
||||
key: 'selfTakeMerchantName',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '配送开始时间',
|
||||
dataIndex: 'sendStartTime',
|
||||
key: 'sendStartTime',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '配送结束时间',
|
||||
dataIndex: 'sendEndTime',
|
||||
key: 'sendEndTime',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '发货店铺id',
|
||||
dataIndex: 'expressMerchantId',
|
||||
key: 'expressMerchantId',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '发货店铺',
|
||||
dataIndex: 'expressMerchantName',
|
||||
key: 'expressMerchantName',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '订单总额',
|
||||
dataIndex: 'totalPrice',
|
||||
key: 'totalPrice',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '减少的金额，使用VIP会员折扣、优惠券抵扣、优惠券折扣后减去的价格',
|
||||
dataIndex: 'reducePrice',
|
||||
key: 'reducePrice',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '实际付款',
|
||||
dataIndex: 'payPrice',
|
||||
key: 'payPrice',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '用于统计',
|
||||
dataIndex: 'price',
|
||||
key: 'price',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '价钱，用于积分赠送',
|
||||
dataIndex: 'money',
|
||||
key: 'money',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '取消时间',
|
||||
dataIndex: 'cancelTime',
|
||||
key: 'cancelTime',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '取消原因',
|
||||
dataIndex: 'cancelReason',
|
||||
key: 'cancelReason',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '退款金额',
|
||||
dataIndex: 'refundMoney',
|
||||
key: 'refundMoney',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '教练价格',
|
||||
dataIndex: 'coachPrice',
|
||||
key: 'coachPrice',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '购买数量',
|
||||
dataIndex: 'totalNum',
|
||||
key: 'totalNum',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '教练id',
|
||||
dataIndex: 'coachId',
|
||||
key: 'coachId',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '商品ID',
|
||||
dataIndex: 'formId',
|
||||
key: 'formId',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '支付的用户id',
|
||||
dataIndex: 'payUserId',
|
||||
key: 'payUserId',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '0余额支付，1微信支付，2支付宝支付，3银联支付，4现金支付，5POS机支付，6免费，7积分支付',
|
||||
dataIndex: 'payType',
|
||||
key: 'payType',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '微信支付子类型：JSAPI小程序支付，NATIVE扫码支付',
|
||||
dataIndex: 'wechatPayType',
|
||||
key: 'wechatPayType',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '0余额支付，1微信支付，2支付宝支付，3银联支付，4现金支付，5POS机支付，6免费，7积分支付',
|
||||
dataIndex: 'friendPayType',
|
||||
key: 'friendPayType',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '0未付款，1已付款',
|
||||
dataIndex: 'payStatus',
|
||||
key: 'payStatus',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '0未使用，1已完成，2已取消，3取消中，4退款申请中，5退款被拒绝，6退款成功，7客户端申请退款',
|
||||
dataIndex: 'orderStatus',
|
||||
key: 'orderStatus',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '发货状态(10未发货 20已发货 30部分发货)',
|
||||
dataIndex: 'deliveryStatus',
|
||||
key: 'deliveryStatus',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '无需发货备注',
|
||||
dataIndex: 'deliveryNote',
|
||||
key: 'deliveryNote',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '发货时间',
|
||||
dataIndex: 'deliveryTime',
|
||||
key: 'deliveryTime',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '评价状态(0未评价 1已评价)',
|
||||
dataIndex: 'evaluateStatus',
|
||||
key: 'evaluateStatus',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '评价时间',
|
||||
dataIndex: 'evaluateTime',
|
||||
key: 'evaluateTime',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '优惠类型：0无、1抵扣优惠券、2折扣优惠券、3、VIP月卡、4VIP年卡，5VIP次卡、6VIP会员卡、7IC月卡、8IC年卡、9IC次卡、10IC会员卡、11免费订单、12VIP充值卡、13IC充值卡、14VIP季卡、15IC季卡',
|
||||
dataIndex: 'couponType',
|
||||
key: 'couponType',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '优惠说明',
|
||||
dataIndex: 'couponDesc',
|
||||
key: 'couponDesc',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '二维码地址，保存订单号，支付成功后才生成',
|
||||
dataIndex: 'qrcode',
|
||||
key: 'qrcode',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: 'vip月卡年卡、ic月卡年卡回退次数',
|
||||
dataIndex: 'returnNum',
|
||||
key: 'returnNum',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: 'vip充值回退金额',
|
||||
dataIndex: 'returnMoney',
|
||||
key: 'returnMoney',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '预约详情开始时间数组',
|
||||
dataIndex: 'startTime',
|
||||
key: 'startTime',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '是否已开具发票：0未开发票，1已开发票，2不能开具发票',
|
||||
dataIndex: 'isInvoice',
|
||||
key: 'isInvoice',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '发票流水号',
|
||||
dataIndex: 'invoiceNo',
|
||||
key: 'invoiceNo',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '商家留言',
|
||||
dataIndex: 'merchantRemarks',
|
||||
key: 'merchantRemarks',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '支付时间',
|
||||
dataIndex: 'payTime',
|
||||
key: 'payTime',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '退款时间',
|
||||
dataIndex: 'refundTime',
|
||||
key: 'refundTime',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '申请退款时间',
|
||||
dataIndex: 'refundApplyTime',
|
||||
key: 'refundApplyTime',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '过期时间',
|
||||
dataIndex: 'expirationTime',
|
||||
key: 'expirationTime',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '自提码',
|
||||
dataIndex: 'selfTakeCode',
|
||||
key: 'selfTakeCode',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '是否已收到赠品',
|
||||
dataIndex: 'hasTakeGift',
|
||||
key: 'hasTakeGift',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '对账情况：0=未对账；1=已对账；3=已对账，金额对不上；4=未查询到该订单',
|
||||
dataIndex: 'checkBill',
|
||||
key: 'checkBill',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '订单是否已结算(0未结算 1已结算)',
|
||||
dataIndex: 'isSettled',
|
||||
key: 'isSettled',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '系统版本号 0当前版本 value=其他版本',
|
||||
dataIndex: 'version',
|
||||
key: 'version',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '用户id',
|
||||
dataIndex: 'userId',
|
||||
key: 'userId',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '是否删除, 0否, 1是',
|
||||
dataIndex: 'deleted',
|
||||
key: 'deleted',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '修改时间',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsOrderParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsOrder) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsOrder) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsOrder(row.id)
|
||||
.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);
|
||||
removeBatchCmsOrder(selection.value.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsOrder) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsOrder'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
247
src/views/cms/cmsSetting/index.vue
Normal file
247
src/views/cms/cmsSetting/index.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<template #extra>
|
||||
<CmsWebsiteSearch />
|
||||
</template>
|
||||
<a-card
|
||||
class="ele-body"
|
||||
:bordered="false"
|
||||
:body-style="{ padding: '16px' }"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="
|
||||
styleResponsive ? { md: 2, sm: 5, xs: 24 } : { flex: '120px' }
|
||||
"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 14, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-tabs v-model:activeKey="activeKey" type="card">
|
||||
<a-tab-pane key="setting" tab="网站设置" class="mt-5">
|
||||
<a-form-item
|
||||
label="悬浮工具栏"
|
||||
name="floatTool"
|
||||
extra="显示网站悬浮客服工具栏"
|
||||
>
|
||||
<a-switch
|
||||
v-model:checked="form.floatTool"
|
||||
checked-children="显示"
|
||||
un-checked-children="隐藏"
|
||||
@change="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="显示站内搜索" name="searchBtn">
|
||||
<a-switch
|
||||
v-model:checked="form.searchBtn"
|
||||
checked-children="显示"
|
||||
un-checked-children="隐藏"
|
||||
@change="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="显示版权" name="showCopyright">
|
||||
<a-switch
|
||||
v-model:checked="form.showCopyright"
|
||||
checked-children="显示"
|
||||
un-checked-children="隐藏"
|
||||
@change="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="启用登录注册" name="loginBtn">
|
||||
<a-switch
|
||||
v-model:checked="form.loginBtn"
|
||||
checked-children="启用"
|
||||
un-checked-children="不启用"
|
||||
@change="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="默认编辑器"
|
||||
name="editor"
|
||||
extra="设置默认编辑器"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="form.editor"
|
||||
placeholder="请选择编辑器"
|
||||
class="max-w-xs"
|
||||
@change="save"
|
||||
>
|
||||
<a-select-option :value="1">富文本编辑器</a-select-option>
|
||||
<a-select-option :value="2">Markdown编辑器</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="privacy" tab="隐私与安全" class="mt-5">
|
||||
<a-form-item
|
||||
label="允许被搜索"
|
||||
name="name"
|
||||
extra="关闭后，用户无法通过名称搜索到此网站"
|
||||
>
|
||||
<a-switch
|
||||
v-model:checked="form.market"
|
||||
checked-children="允许"
|
||||
un-checked-children="不允许"
|
||||
@change="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="文章发布审核"
|
||||
name="articleReview"
|
||||
extra="开启需要审核后发布，关闭则直接发布"
|
||||
>
|
||||
<a-switch
|
||||
v-model:checked="form.articleReview"
|
||||
checked-children="需要"
|
||||
un-checked-children="不需要"
|
||||
@change="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="开发者模式"
|
||||
name="plugin"
|
||||
extra="开启开发者模式"
|
||||
>
|
||||
<a-switch
|
||||
v-model:checked="form.plugin"
|
||||
checked-children="启用"
|
||||
un-checked-children="禁用"
|
||||
@change="save"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { getPageTitle } from '@/utils/common';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { assignObject } from 'ele-admin-pro';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import CmsWebsiteSearch from '@/views/cms/cmsWebsite/components/search.vue';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import router from '@/router';
|
||||
import { CmsWebsiteSetting } from '@/api/cms/cmsWebsiteSetting/model';
|
||||
import {
|
||||
getCmsWebsiteSetting,
|
||||
updateCmsWebsiteSetting
|
||||
} from '@/api/cms/cmsWebsiteSetting';
|
||||
import { useWebsiteSettingStore } from '@/store/modules/setting';
|
||||
|
||||
// 网站设置信息
|
||||
const setting = useWebsiteSettingStore();
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
// 表格选中数据
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
const logo = ref<ItemType[]>([]);
|
||||
const activeKey = ref('setting');
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<CmsWebsiteSetting>({
|
||||
id: undefined,
|
||||
websiteId: undefined,
|
||||
official: undefined,
|
||||
market: undefined,
|
||||
search: undefined,
|
||||
share: undefined,
|
||||
articleReview: undefined,
|
||||
plugin: undefined,
|
||||
editor: undefined,
|
||||
searchBtn: undefined,
|
||||
loginBtn: undefined,
|
||||
floatTool: undefined,
|
||||
showCopyright: undefined,
|
||||
copyrightLink: undefined,
|
||||
maxMenuNum: undefined,
|
||||
deleted: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
websiteName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写网站信息名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
getCmsWebsiteSetting(Number(localStorage.getItem('WebsiteId')))
|
||||
.then((data) => {
|
||||
assignObject(form, data);
|
||||
if (data) {
|
||||
assignObject(form, data);
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
})
|
||||
.catch((msg) => {
|
||||
console.log(msg);
|
||||
});
|
||||
};
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
setting.setSetting(formData);
|
||||
updateCmsWebsiteSetting(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => router,
|
||||
() => {
|
||||
query();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsWebsiteSetting'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
395
src/views/cms/cmsStatistics/components/cmsStatisticsEdit.vue
Normal file
395
src/views/cms/cmsStatistics/components/cmsStatisticsEdit.vue
Normal file
@@ -0,0 +1,395 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="站点ID" name="websiteId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入站点ID"
|
||||
v-model:value="form.websiteId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="用户总数" name="userCount">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入用户总数"
|
||||
v-model:value="form.userCount"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="订单总数" name="orderCount">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入订单总数"
|
||||
v-model:value="form.orderCount"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="商品总数" name="productCount">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入商品总数"
|
||||
v-model:value="form.productCount"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="总销售额" name="totalSales">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入总销售额"
|
||||
v-model:value="form.totalSales"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="本月销售额" name="monthSales">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入本月销售额"
|
||||
v-model:value="form.monthSales"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="今日销售额" name="todaySales">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入今日销售额"
|
||||
v-model:value="form.todaySales"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="昨日销售额" name="yesterdaySales">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入昨日销售额"
|
||||
v-model:value="form.yesterdaySales"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="本周销售额" name="weekSales">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入本周销售额"
|
||||
v-model:value="form.weekSales"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="本年销售额" name="yearSales">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入本年销售额"
|
||||
v-model:value="form.yearSales"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="今日订单数" name="todayOrders">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入今日订单数"
|
||||
v-model:value="form.todayOrders"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="本月订单数" name="monthOrders">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入本月订单数"
|
||||
v-model:value="form.monthOrders"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="今日新增用户" name="todayUsers">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入今日新增用户"
|
||||
v-model:value="form.todayUsers"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="本月新增用户" name="monthUsers">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入本月新增用户"
|
||||
v-model:value="form.monthUsers"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="今日访问量" name="todayVisits">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入今日访问量"
|
||||
v-model:value="form.todayVisits"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="总访问量" name="totalVisits">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入总访问量"
|
||||
v-model:value="form.totalVisits"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="商户总数" name="merchantCount">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入商户总数"
|
||||
v-model:value="form.merchantCount"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="活跃用户数" name="activeUsers">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入活跃用户数"
|
||||
v-model:value="form.activeUsers"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="转化率(%)" name="conversionRate">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入转化率(%)"
|
||||
v-model:value="form.conversionRate"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="平均订单金额" name="avgOrderAmount">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入平均订单金额"
|
||||
v-model:value="form.avgOrderAmount"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="统计日期" name="statisticsDate">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入统计日期"
|
||||
v-model:value="form.statisticsDate"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="统计类型: 1日统计, 2月统计, 3年统计"
|
||||
name="statisticsType"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入统计类型: 1日统计, 2月统计, 3年统计"
|
||||
v-model:value="form.statisticsType"
|
||||
/>
|
||||
</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="操作用户ID" name="userId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入操作用户ID"
|
||||
v-model:value="form.userId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="商户ID" name="merchantId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入商户ID"
|
||||
v-model:value="form.merchantId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态: 0禁用, 1启用" 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="是否删除: 0否, 1是" name="deleted">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否删除: 0否, 1是"
|
||||
v-model:value="form.deleted"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="修改时间" name="updateTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入修改时间"
|
||||
v-model:value="form.updateTime"
|
||||
/>
|
||||
</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 {
|
||||
addCmsStatistics,
|
||||
updateCmsStatistics
|
||||
} from '@/api/cms/cmsStatistics';
|
||||
import { CmsStatistics } from '@/api/cms/cmsStatistics/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsStatistics | null;
|
||||
}>();
|
||||
|
||||
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<CmsStatistics>({
|
||||
id: undefined,
|
||||
websiteId: undefined,
|
||||
userCount: undefined,
|
||||
orderCount: undefined,
|
||||
productCount: undefined,
|
||||
totalSales: undefined,
|
||||
monthSales: undefined,
|
||||
todaySales: undefined,
|
||||
yesterdaySales: undefined,
|
||||
weekSales: undefined,
|
||||
yearSales: undefined,
|
||||
todayOrders: undefined,
|
||||
monthOrders: undefined,
|
||||
todayUsers: undefined,
|
||||
monthUsers: undefined,
|
||||
todayVisits: undefined,
|
||||
totalVisits: undefined,
|
||||
merchantCount: undefined,
|
||||
activeUsers: undefined,
|
||||
conversionRate: undefined,
|
||||
avgOrderAmount: undefined,
|
||||
statisticsDate: undefined,
|
||||
statisticsType: undefined,
|
||||
sortNumber: undefined,
|
||||
userId: undefined,
|
||||
merchantId: undefined,
|
||||
status: undefined,
|
||||
deleted: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
cmsStatisticsId: undefined,
|
||||
cmsStatisticsName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsStatisticsName: [
|
||||
{
|
||||
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 { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateCmsStatistics
|
||||
: addCmsStatistics;
|
||||
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/cmsStatistics/components/search.vue
Normal file
42
src/views/cms/cmsStatistics/components/search.vue
Normal 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 type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
167
src/views/cms/cmsStatistics/index.vue
Normal file
167
src/views/cms/cmsStatistics/index.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<a-row :gutter="16">
|
||||
<!-- 统计数据卡片 -->
|
||||
<a-col :span="6">
|
||||
<a-card :bordered="false" class="stat-card">
|
||||
<a-statistic
|
||||
title="用户总数"
|
||||
:value="statistics.userCount"
|
||||
:value-style="{ color: '#3f8600' }"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-card :bordered="false" class="stat-card">
|
||||
<a-statistic
|
||||
title="订单总数"
|
||||
:value="statistics.orderCount"
|
||||
:value-style="{ color: '#1890ff' }"
|
||||
>
|
||||
<template #prefix>
|
||||
<AccountBookOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-card :bordered="false" class="stat-card">
|
||||
<a-statistic
|
||||
title="总营业额"
|
||||
:value="statistics.totalSales"
|
||||
:value-style="{ color: '#cf1322' }"
|
||||
>
|
||||
<template #prefix>
|
||||
<MoneyCollectOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-card :bordered="false" class="stat-card">
|
||||
<a-statistic
|
||||
title="系统运行天数"
|
||||
:value="statistics.runDays"
|
||||
suffix="天"
|
||||
:value-style="{ color: '#722ed1' }"
|
||||
>
|
||||
<template #prefix>
|
||||
<ClockCircleOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import {
|
||||
UserOutlined,
|
||||
CalendarOutlined,
|
||||
QrcodeOutlined,
|
||||
ShopOutlined,
|
||||
ClockCircleOutlined,
|
||||
SettingOutlined,
|
||||
AccountBookOutlined,
|
||||
FileTextOutlined,
|
||||
MoneyCollectOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { getSiteInfo } from '@/api/layout';
|
||||
import { CmsWebsite } from '@/api/cms/cmsWebsite/model';
|
||||
import { pageUsers } from '@/api/system/user';
|
||||
import { pageShopOrder } from '@/api/shop/shopOrder';
|
||||
import { getPageTitle, openNew } from '@/utils/common';
|
||||
import { listCmsStatistics } from '@/api/cms/cmsStatistics';
|
||||
|
||||
// 当前小程序项目
|
||||
const siteInfo = ref<CmsWebsite>({});
|
||||
|
||||
// 系统信息
|
||||
const systemInfo = ref({
|
||||
name: '小程序开发',
|
||||
description:
|
||||
'基于Spring、SpringBoot、SpringMVC等技术栈构建的前后端分离开发平台',
|
||||
version: '2.0.0',
|
||||
status: '运行中',
|
||||
logo: '/logo.png',
|
||||
environment: '生产环境',
|
||||
database: 'MySQL 8.0',
|
||||
server: 'Linux CentOS 7.9',
|
||||
expirationTime: '2024-01-01 09:00:00'
|
||||
});
|
||||
|
||||
// 统计数据
|
||||
const statistics = ref({
|
||||
userCount: 0,
|
||||
orderCount: 0,
|
||||
todayVisit: 0,
|
||||
runDays: 365
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// 加载系统信息和统计数据
|
||||
loadSystemInfo();
|
||||
loadStatistics();
|
||||
});
|
||||
|
||||
const loadSystemInfo = async () => {
|
||||
// TODO: 调用API获取系统信息
|
||||
siteInfo.value = await getSiteInfo();
|
||||
if (siteInfo.value.createTime) {
|
||||
// 根据创建时间计算运行天数
|
||||
statistics.value.runDays = Math.floor(
|
||||
(new Date().getTime() - new Date(siteInfo.value.createTime).getTime()) /
|
||||
(24 * 60 * 60 * 1000)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const loadStatistics = async () => {
|
||||
// TODO: 调用API获取统计数据
|
||||
const users = await pageUsers({});
|
||||
const orders = await pageShopOrder({});
|
||||
if (users) {
|
||||
console.log(users.count);
|
||||
statistics.value.userCount = users.count;
|
||||
}
|
||||
if (orders) {
|
||||
statistics.value.orderCount = orders.count;
|
||||
}
|
||||
// 获取统计表数据
|
||||
const data = await listCmsStatistics({});
|
||||
if (data) {
|
||||
// 统计数据
|
||||
statistics.value.totalSales = data[0].totalSales;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.system-info h2 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-card :deep(.ant-statistic-title) {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.stat-card :deep(.ant-statistic-content) {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
289
src/views/cms/cmsTemplate/components/cmsTemplateEdit.vue
Normal file
289
src/views/cms/cmsTemplate/components/cmsTemplateEdit.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入模版名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="模版标识" name="code">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入模版标识"
|
||||
v-model:value="form.code"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="缩列图" name="image">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
@done="chooseImage"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="类型 1企业官网 2其他" name="type">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入类型 1企业官网 2其他"-->
|
||||
<!-- v-model:value="form.type"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="网站关键词" name="keywords">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入网站关键词"-->
|
||||
<!-- v-model:value="form.keywords"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="域名前缀" name="prefix">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入域名前缀"-->
|
||||
<!-- v-model:value="form.prefix"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item label="预览地址" name="domain">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入预览地址"
|
||||
v-model:value="form.domain"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="模版下载地址" name="downUrl">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入模版下载地址"
|
||||
v-model:value="form.downUrl"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="色系" name="color">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入色系"-->
|
||||
<!-- v-model:value="form.color"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="应用版本 10免费版 20授权版 30永久授权" name="version">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入应用版本 10免费版 20授权版 30永久授权"-->
|
||||
<!-- v-model:value="form.version"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="行业类型(父级)" name="industryParent">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入行业类型(父级)"-->
|
||||
<!-- v-model:value="form.industryParent"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="行业类型(子级)" name="industryChild">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入行业类型(子级)"-->
|
||||
<!-- v-model:value="form.industryChild"-->
|
||||
<!-- />-->
|
||||
<!-- </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="share">-->
|
||||
<!-- <a-radio-group-->
|
||||
<!-- v-model:value="form.share"-->
|
||||
<!-- >-->
|
||||
<!-- <a-radio :value="1">共享</a-radio>-->
|
||||
<!-- <a-radio :value="0">私有</a-radio>-->
|
||||
<!-- </a-radio-group>-->
|
||||
<!-- </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>
|
||||
</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 { addCmsTemplate, updateCmsTemplate } from '@/api/cms/cmsTemplate';
|
||||
import { CmsTemplate } from '@/api/cms/cmsTemplate/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsTemplate | null;
|
||||
}>();
|
||||
|
||||
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<CmsTemplate>({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
image: undefined,
|
||||
type: undefined,
|
||||
keywords: undefined,
|
||||
prefix: undefined,
|
||||
domain: undefined,
|
||||
downUrl: undefined,
|
||||
color: undefined,
|
||||
version: undefined,
|
||||
industryParent: undefined,
|
||||
industryChild: undefined,
|
||||
comments: undefined,
|
||||
recommend: undefined,
|
||||
share: undefined,
|
||||
sortNumber: undefined,
|
||||
userId: undefined,
|
||||
deleted: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsTemplateName: [
|
||||
{
|
||||
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 { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateCmsTemplate
|
||||
: addCmsTemplate;
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
message.info('该功能仅对认证开发者开放');
|
||||
});
|
||||
})
|
||||
.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/cmsTemplate/components/search.vue
Normal file
42
src/views/cms/cmsTemplate/components/search.vue
Normal 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 type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
241
src/views/cms/cmsTemplate/index.vue
Normal file
241
src/views/cms/cmsTemplate/index.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="cmsTemplateId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="120" />
|
||||
</template>
|
||||
<template v-if="column.key === 'domain'">
|
||||
<a :href="record.domain" target="_blank">{{ record.domain }}</a>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a class="text-gray-500">使用</a>
|
||||
<a-divider type="vertical" />
|
||||
<a class="text-gray-500">下载</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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsTemplateEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { 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 CmsTemplateEdit from './components/cmsTemplateEdit.vue';
|
||||
import {
|
||||
pageCmsTemplate,
|
||||
removeCmsTemplate,
|
||||
removeBatchCmsTemplate
|
||||
} from '@/api/cms/cmsTemplate';
|
||||
import type {
|
||||
CmsTemplate,
|
||||
CmsTemplateParam
|
||||
} from '@/api/cms/cmsTemplate/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsTemplate[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsTemplate | 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;
|
||||
}
|
||||
return pageCmsTemplate({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '编号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '模版名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
width: 280
|
||||
},
|
||||
{
|
||||
title: '预览图',
|
||||
dataIndex: 'image',
|
||||
align: 'center',
|
||||
key: 'image'
|
||||
},
|
||||
{
|
||||
title: '预览地址',
|
||||
dataIndex: 'domain',
|
||||
align: 'center',
|
||||
key: 'domain'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 220,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsTemplateParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsTemplate) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsTemplate) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsTemplate(row.id)
|
||||
.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);
|
||||
removeBatchCmsTemplate(selection.value.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsTemplate) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsTemplate'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
71
src/views/cms/cmsWebsite/components/search.vue
Normal file
71
src/views/cms/cmsWebsite/components/search.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space style="flex-wrap: wrap">
|
||||
<a-button type="text" @click="openUrl(`/website/field`)"
|
||||
>字段扩展
|
||||
</a-button>
|
||||
<a-button type="text" @click="openUrl('/website/dict')">字典管理 </a-button>
|
||||
<a-button type="text" @click="openUrl('/website/domain')"
|
||||
>域名管理
|
||||
</a-button>
|
||||
<a-button type="text" @click="openUrl('/website/model')"
|
||||
>模型管理
|
||||
</a-button>
|
||||
<a-button type="text" @click="openUrl('/website/form')">表单管理 </a-button>
|
||||
<a-button type="text" @click="openUrl('/website/lang')">国际化 </a-button>
|
||||
<a-button type="text" @click="openUrl('/website/setting')"
|
||||
>网站设置
|
||||
</a-button>
|
||||
<a-button type="text" class="ele-btn-icon" @click="clearSiteInfoCache">
|
||||
清除缓存
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { watch, nextTick } from 'vue';
|
||||
import { CmsWebsite } from '@/api/cms/cmsWebsite/model';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { removeSiteInfoCache } from '@/api/cms/cmsWebsite';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
website?: CmsWebsite;
|
||||
count?: 0;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'add'): void;
|
||||
}>();
|
||||
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 清除缓存
|
||||
const clearSiteInfoCache = () => {
|
||||
removeSiteInfoCache(
|
||||
'SiteInfo:' + localStorage.getItem('TenantId') + '*'
|
||||
).then((msg) => {
|
||||
if (msg) {
|
||||
message.success(msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
nextTick(() => {
|
||||
if (localStorage.getItem('NotActive')) {
|
||||
// IsActive.value = false
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
414
src/views/cms/cmsWebsite/components/websiteEdit.vue
Normal file
414
src/views/cms/cmsWebsite/components/websiteEdit.vue
Normal file
@@ -0,0 +1,414 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑小程序' : '创建小程序'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
:confirm-loading="loading"
|
||||
@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="LOGO" name="avatar">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
@done="chooseImage"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="小程序名称" name="websiteName">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入小程序名称"
|
||||
v-model:value="form.websiteName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="网站域名" name="domain" v-if="form.type == 10">
|
||||
<a-input v-model:value="form.domain" placeholder="huawei.com">
|
||||
<template #addonBefore>
|
||||
<a-select v-model:value="form.prefix" style="width: 90px">
|
||||
<a-select-option value="http://">http://</a-select-option>
|
||||
<a-select-option value="https://">https://</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="AppSecret" name="websiteSecret" v-if="form.type == 20">-->
|
||||
<!-- <a-input-password-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入AppSecret"-->
|
||||
<!-- v-model:value="form.websiteSecret"-->
|
||||
<!-- />-->
|
||||
<!-- </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="小程序AppID" name="websiteCode" v-if="form.type == 20">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="请输入AppId"-->
|
||||
<!-- v-model:value="form.websiteCode"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item label="小程序码" name="avatar">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="websiteQrcode"
|
||||
@done="chooseQrcode"
|
||||
@del="onDeleteQrcode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="SEO关键词" name="keywords">-->
|
||||
<!-- <a-textarea-->
|
||||
<!-- :rows="4"-->
|
||||
<!-- :maxlength="200"-->
|
||||
<!-- placeholder="请输入SEO关键词"-->
|
||||
<!-- v-model:value="form.keywords"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="全局样式" name="style">-->
|
||||
<!-- <a-textarea-->
|
||||
<!-- :rows="4"-->
|
||||
<!-- :maxlength="200"-->
|
||||
<!-- placeholder="全局样式"-->
|
||||
<!-- v-model:value="form.style"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="小程序类型" name="websiteType">-->
|
||||
<!-- <a-select-->
|
||||
<!-- :options="websiteType"-->
|
||||
<!-- :value="form.websiteType"-->
|
||||
<!-- placeholder="请选择主体类型"-->
|
||||
<!-- @change="onCmsWebsiteType"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="当前版本" name="version">-->
|
||||
<!-- <a-tag color="red" v-if="form.version === 10">标准版</a-tag>-->
|
||||
<!-- <a-tag color="green" v-if="form.version === 20">专业版</a-tag>-->
|
||||
<!-- <a-tag color="cyan" v-if="form.version === 30">永久授权</a-tag>-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item label="状态" name="running">
|
||||
<a-radio-group
|
||||
v-model:value="form.running"
|
||||
:disabled="form.running == 4 || form.running == 5"
|
||||
>
|
||||
<a-radio :value="1">运行中</a-radio>
|
||||
<a-radio :value="2">维护中</a-radio>
|
||||
<a-radio :value="3">已关闭</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="form.running == 2" label="维护说明" name="statusText">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="状态说明"
|
||||
v-model:value="form.statusText"
|
||||
/>
|
||||
</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 { addCmsWebsite, updateCmsWebsite } from '@/api/cms/cmsWebsite';
|
||||
import { CmsWebsite } from '@/api/cms/cmsWebsite/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { FileRecord } from '@/api/system/file/model';
|
||||
import { updateCmsDomain } from '@/api/cms/cmsDomain';
|
||||
import { updateTenant } from '@/api/system/tenant';
|
||||
import { decrypt, encrypt } from '@/utils/common';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsWebsite | null;
|
||||
}>();
|
||||
|
||||
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 websiteQrcode = ref<ItemType[]>([]);
|
||||
const oldDomain = ref();
|
||||
const files = ref<ItemType[]>([]);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<CmsWebsite>({
|
||||
websiteId: undefined,
|
||||
websiteLogo: undefined,
|
||||
websiteName: undefined,
|
||||
websiteCode: undefined,
|
||||
websiteSecret: undefined,
|
||||
type: 20,
|
||||
files: undefined,
|
||||
keywords: '',
|
||||
prefix: '',
|
||||
domain: '',
|
||||
adminUrl: '',
|
||||
style: '',
|
||||
icpNo: undefined,
|
||||
email: undefined,
|
||||
version: undefined,
|
||||
websiteType: '',
|
||||
running: 1,
|
||||
expirationTime: undefined,
|
||||
sortNumber: undefined,
|
||||
comments: undefined,
|
||||
status: undefined,
|
||||
statusText: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
comments: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写小程序描述',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
keywords: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写SEO关键词',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
running: [
|
||||
{
|
||||
required: true,
|
||||
type: 'number',
|
||||
message: '请选择小程序状态',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
domain: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写小程序域名',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
websiteCode: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写小程序码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
websiteSecret: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写小程序密钥',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
adminUrl: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写小程序后台管理地址',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
icpNo: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写ICP备案号',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
appSecret: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写小程序秘钥',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
websiteName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写小程序信息名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const chooseImage = (data: FileRecord) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
form.websiteLogo = data.downloadUrl;
|
||||
};
|
||||
|
||||
const chooseQrcode = (data: FileRecord) => {
|
||||
websiteQrcode.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
form.websiteDarkLogo = data.downloadUrl;
|
||||
};
|
||||
|
||||
const onDeleteItem = (index: number) => {
|
||||
images.value.splice(index, 1);
|
||||
form.websiteLogo = '';
|
||||
};
|
||||
|
||||
const onDeleteQrcode = (index: number) => {
|
||||
websiteQrcode.value.splice(index, 1);
|
||||
form.websiteDarkLogo = '';
|
||||
};
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateCmsWebsite : addCmsWebsite;
|
||||
if (!isUpdate.value) {
|
||||
updateVisible(false);
|
||||
message.loading('创建过程中请勿刷新页面！', 0);
|
||||
}
|
||||
const formData = {
|
||||
...form,
|
||||
type: 20,
|
||||
adminUrl: `mp.websoft.top`,
|
||||
websiteSecret: form.websiteSecret
|
||||
? encrypt(form.websiteSecret)
|
||||
: undefined,
|
||||
files: JSON.stringify(files.value)
|
||||
};
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
updateVisible(false);
|
||||
updateCmsDomain({
|
||||
websiteId: form.websiteId,
|
||||
domain: `${localStorage.getItem('TenantId')}.shoplnk.cn`
|
||||
});
|
||||
updateTenant({
|
||||
tenantName: `${form.websiteName}`
|
||||
}).then(() => {});
|
||||
localStorage.setItem('Domain', `${form.websiteCode}.shoplnk.cn`);
|
||||
localStorage.setItem('WebsiteId', `${form.websiteId}`);
|
||||
localStorage.setItem('WebsiteName', `${form.websiteName}`);
|
||||
message.destroy();
|
||||
message.success(msg);
|
||||
// window.location.reload();
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.destroy();
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
images.value = [];
|
||||
files.value = [];
|
||||
websiteQrcode.value = [];
|
||||
if (props.data?.websiteId) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.websiteLogo) {
|
||||
images.value.push({
|
||||
uid: uuid(),
|
||||
url: props.data.websiteLogo,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (props.data.websiteDarkLogo) {
|
||||
websiteQrcode.value.push({
|
||||
uid: uuid(),
|
||||
url: props.data.websiteDarkLogo,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (props.data.files) {
|
||||
files.value = JSON.parse(props.data.files);
|
||||
}
|
||||
if (props.data.websiteCode) {
|
||||
oldDomain.value = props.data.websiteCode;
|
||||
}
|
||||
if (props.data.websiteSecret) {
|
||||
form.websiteSecret = decrypt(props.data.websiteSecret);
|
||||
}
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
322
src/views/cms/cmsWebsite/index.vue
Normal file
322
src/views/cms/cmsWebsite/index.vue
Normal file
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<template #extra>
|
||||
<CmsWebsiteSearch />
|
||||
</template>
|
||||
<a-spin :spinning="loading" class="page">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="websiteId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:parse-data="parseData"
|
||||
:customRow="customRow"
|
||||
:need-page="false"
|
||||
:toolbar="false"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'websiteLogo'">
|
||||
<a-image
|
||||
:src="record.websiteLogo"
|
||||
:width="50"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'websiteName'">
|
||||
<div class="font-medium">{{ record.websiteName }}</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'websiteCode'">
|
||||
<div class="text-gray-400">{{ record.tenantId }}</div>
|
||||
<div class="text-gray-400">
|
||||
{{ record.websiteCode }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'domain'">
|
||||
<a-space direction="vertical">
|
||||
<a
|
||||
v-if="record.domain"
|
||||
:href="`${record.prefix}${record.domain}`"
|
||||
class="text-gray-500 hover:text-blue-500"
|
||||
target="_blank"
|
||||
>
|
||||
{{ record.domain }}
|
||||
</a>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-tag v-if="record.type === 1" color="green">是</a-tag>
|
||||
<a-tag
|
||||
v-if="record.type === 0"
|
||||
@click="updateType(record)"
|
||||
class="cursor-pointer"
|
||||
>否
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'version'">
|
||||
<span v-if="record.version === 10">基础版</span>
|
||||
<span v-if="record.version === 20">专业版</span>
|
||||
<span v-if="record.version === 30">永久授权</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.running === 0" color="red">未开通</a-tag>
|
||||
<a-tag v-if="record.running === 1" color="green">运行中</a-tag>
|
||||
<a-tag v-if="record.running === 2" color="orange">维护中</a-tag>
|
||||
<a-tag v-if="record.running === 3" color="red">已关闭</a-tag>
|
||||
<a-tag v-if="record.running === 4" color="red">已欠费停机</a-tag>
|
||||
<a-tag v-if="record.running === 5" color="red">违规关停</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'comments'">
|
||||
<div class="text-gray-400 line-clamp-3">{{
|
||||
record.comments
|
||||
}}</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'expirationTime'">
|
||||
<div class="text-gray-400">{{
|
||||
toDateString(record.createTime, 'YYYY-MM-dd')
|
||||
}}</div>
|
||||
<div class="text-gray-400">{{
|
||||
toDateString(record.expirationTime, 'YYYY-MM-dd')
|
||||
}}</div>
|
||||
<a-tag v-if="record.status < 0 && record.soon < 0" color="red"
|
||||
>已过期</a-tag
|
||||
>
|
||||
<a-tag v-if="record.status > 0 && record.soon < 0" color="orange"
|
||||
>即将过期</a-tag
|
||||
>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<!-- <a @click="onShare(record)" class="text-green-600">-->
|
||||
<!-- <QrcodeOutlined />-->
|
||||
<!-- 二维码-->
|
||||
<!-- </a>-->
|
||||
<!-- <a-divider type="vertical"/>-->
|
||||
<a @click="openEdit(record)"> 编辑 </a>
|
||||
</template>
|
||||
</template>
|
||||
<template #emptyText>
|
||||
<a-empty
|
||||
:image-style="{
|
||||
height: '240px'
|
||||
}"
|
||||
>
|
||||
<template #description>
|
||||
<span> 欢迎使用本产品，请先创建站点并完成初始化。 </span>
|
||||
</template>
|
||||
<div class="pb-10">
|
||||
<a-button type="primary" @click="openEdit">立即创建</a-button>
|
||||
</div>
|
||||
</a-empty>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<WebsiteEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
|
||||
<!-- 二维码 -->
|
||||
<!-- <Qrcode v-model:visible="showQrcode" :data="`${qrcode}`" @done="hideShare" title="二维码"/>-->
|
||||
</a-spin>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
// import {QrcodeOutlined} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import WebsiteEdit from './components/websiteEdit.vue';
|
||||
// import Qrcode from '@/components/QrCode/index.vue';
|
||||
import { pageCmsWebsite, updateCmsWebsite } from '@/api/cms/cmsWebsite';
|
||||
import type { CmsWebsite, CmsWebsiteParam } from '@/api/cms/cmsWebsite/model';
|
||||
import { getPageTitle } from '@/utils/common';
|
||||
import { PageResult } from '@/api';
|
||||
import { pageOrderGoods } from '@/api/system/orderGoods';
|
||||
import { OrderGoods } from '@/api/system/orderGoods/model';
|
||||
import CmsWebsiteSearch from '@/views/cms/cmsWebsite/components/search.vue';
|
||||
import { getAuthorizedDomain } from '@/api/cms/cmsDomain';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsWebsite[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsWebsite | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示二维码
|
||||
const showQrcode = ref(false);
|
||||
// 二维码内容
|
||||
const qrcode = ref();
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
// 当前小程序项目
|
||||
const website = ref<CmsWebsite>();
|
||||
// 已购买且未安装的小程序
|
||||
const orderGoods = ref<OrderGoods>();
|
||||
// 默认域名
|
||||
const domain = ref<string>();
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
return pageCmsWebsite({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
// {
|
||||
// title: 'AppID',
|
||||
// dataIndex: 'tenantId',
|
||||
// key: 'tenantId',
|
||||
// width: 90
|
||||
// },
|
||||
{
|
||||
title: '头像',
|
||||
dataIndex: 'websiteLogo',
|
||||
key: 'websiteLogo',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '小程序名称',
|
||||
dataIndex: 'websiteName',
|
||||
key: 'websiteName',
|
||||
align: 'center'
|
||||
},
|
||||
// {
|
||||
// title: '小程序信息',
|
||||
// dataIndex: 'websiteCode',
|
||||
// key: 'websiteCode'
|
||||
// },
|
||||
{
|
||||
title: '小程序描述',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments'
|
||||
},
|
||||
// {
|
||||
// title: '当前版本',
|
||||
// dataIndex: 'version',
|
||||
// key: 'version',
|
||||
// align: 'center'
|
||||
// },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
width: 170
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'expirationTime',
|
||||
key: 'expirationTime',
|
||||
align: 'center',
|
||||
width: 170,
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 170,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
// 整理数据
|
||||
const parseData = (data: PageResult<CmsWebsite>) => {
|
||||
if (data?.count > 0) {
|
||||
website.value = data.list[0];
|
||||
localStorage.setItem('WebsiteId', `${website.value?.websiteId}`);
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsWebsiteParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsWebsite) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const updateType = (row: CmsWebsite) => {
|
||||
updateCmsWebsite(row).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
const onShare = (row?: CmsWebsite) => {
|
||||
qrcode.value = `${row?.prefix}${row?.domain}`;
|
||||
showQrcode.value = true;
|
||||
};
|
||||
|
||||
const hideShare = () => {
|
||||
showQrcode.value = false;
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
// 查询订单
|
||||
pageOrderGoods({ itemId: 10297, payStatus: true, orderStatus: 0 }).then(
|
||||
(res) => {
|
||||
loading.value = false;
|
||||
if (res?.count && res?.count > 0) {
|
||||
orderGoods.value = res?.list[0];
|
||||
}
|
||||
}
|
||||
);
|
||||
// 查询授权域名
|
||||
if (localStorage.getItem('Domain')) {
|
||||
getAuthorizedDomain().then((data) => {
|
||||
if (data) {
|
||||
domain.value = data.domain;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsWebsite) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsWebsite'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
82
src/views/cms/cmsWebsiteField/components/Import.vue
Normal file
82
src/views/cms/cmsWebsiteField/components/Import.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<!-- 用户导入弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="520"
|
||||
:footer="null"
|
||||
title="导入备份"
|
||||
:visible="visible"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-upload-dragger
|
||||
accept=".xls,.xlsx"
|
||||
:show-upload-list="false"
|
||||
:customRequest="doUpload"
|
||||
style="padding: 24px 0; margin-bottom: 16px"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<cloud-upload-outlined />
|
||||
</p>
|
||||
<p class="ant-upload-hint">将文件拖到此处，或点击上传</p>
|
||||
</a-upload-dragger>
|
||||
</a-spin>
|
||||
<!-- <div class="ele-text-center">-->
|
||||
<!-- <span>导入备份文件</span>-->
|
||||
<!-- </div>-->
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { CloudUploadOutlined } from '@ant-design/icons-vue';
|
||||
import { importWebsiteField } from '@/api/cms/cmsWebsiteField';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
defineProps<{
|
||||
// 是否打开弹窗
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
// 导入请求状态
|
||||
const loading = ref(false);
|
||||
|
||||
/* 上传 */
|
||||
const doUpload = ({ file }) => {
|
||||
if (
|
||||
![
|
||||
'application/vnd.ms-excel',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
].includes(file.type)
|
||||
) {
|
||||
message.error('只能选择 excel 文件');
|
||||
return false;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 10) {
|
||||
message.error('大小不能超过 10MB');
|
||||
return false;
|
||||
}
|
||||
loading.value = true;
|
||||
importWebsiteField(file)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
return false;
|
||||
};
|
||||
|
||||
/* 更新 visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
</script>
|
||||
262
src/views/cms/cmsWebsiteField/components/cmsWebsiteFieldEdit.vue
Normal file
262
src/views/cms/cmsWebsiteField/components/cmsWebsiteFieldEdit.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="类型，0文本 1图片 2其他" name="type">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入类型，0文本 1图片 2其他"
|
||||
v-model:value="form.type"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="名称" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="栏目ID" name="categoryId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入栏目ID"
|
||||
v-model:value="form.categoryId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="默认值" name="defaultValue">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入默认值"
|
||||
v-model:value="form.defaultValue"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="可修改的值 [on|off]" name="modifyRange">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入可修改的值 [on|off]"
|
||||
v-model:value="form.modifyRange"
|
||||
/>
|
||||
</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="style" name="style">
|
||||
<a-input allow-clear placeholder="style" v-model:value="form.style" />
|
||||
</a-form-item>
|
||||
<a-form-item label="名称" name="value">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入名称"
|
||||
v-model:value="form.value"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="语言" name="lang">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入语言"
|
||||
v-model:value="form.lang"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="商户ID" name="merchantId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入商户ID"
|
||||
v-model:value="form.merchantId"
|
||||
/>
|
||||
</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="是否删除, 0否, 1是" name="deleted">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否删除, 0否, 1是"
|
||||
v-model:value="form.deleted"
|
||||
/>
|
||||
</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 {
|
||||
addCmsWebsiteField,
|
||||
updateCmsWebsiteField
|
||||
} from '@/api/cms/cmsWebsiteField';
|
||||
import { CmsWebsiteField } from '@/api/cms/cmsWebsiteField/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsWebsiteField | null;
|
||||
}>();
|
||||
|
||||
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<CmsWebsiteField>({
|
||||
id: undefined,
|
||||
type: undefined,
|
||||
name: undefined,
|
||||
categoryId: undefined,
|
||||
defaultValue: undefined,
|
||||
modifyRange: undefined,
|
||||
comments: undefined,
|
||||
style: undefined,
|
||||
value: undefined,
|
||||
lang: undefined,
|
||||
merchantId: undefined,
|
||||
sortNumber: undefined,
|
||||
deleted: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
cmsWebsiteFieldId: undefined,
|
||||
cmsWebsiteFieldName: '',
|
||||
status: 0,
|
||||
comments: '',
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsWebsiteFieldName: [
|
||||
{
|
||||
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 { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateCmsWebsiteField
|
||||
: addCmsWebsiteField;
|
||||
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>
|
||||
315
src/views/cms/cmsWebsiteField/components/edit.vue
Normal file
315
src/views/cms/cmsWebsiteField/components/edit.vue
Normal file
@@ -0,0 +1,315 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="650"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:title="isUpdate ? '编辑字段' : '添加字段'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{ md: { span: 3 }, sm: { span: 4 }, xs: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 19 }, sm: { span: 20 }, xs: { span: 24 } }"
|
||||
>
|
||||
<a-form-item label="名称" name="name">
|
||||
<div class="w-full flex justify-between">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="100"
|
||||
placeholder="name"
|
||||
:disabled="isUpdate"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
<!-- <SelectWebsiteField-->
|
||||
<!-- :placeholder="`从模板选择`"-->
|
||||
<!-- class="input-item"-->
|
||||
<!-- v-model:value="form.name"-->
|
||||
<!-- @done="chooseData"-->
|
||||
<!-- />-->
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="内容" name="type">
|
||||
<a-space direction="vertical" class="w-full">
|
||||
<div class="p-1" v-if="!isUpdate">
|
||||
<a-radio-group v-model:value="form.type">
|
||||
<a-radio :value="0">文本</a-radio>
|
||||
<a-radio :value="1">图片</a-radio>
|
||||
<a-radio :value="2">视频</a-radio>
|
||||
<a-radio :value="3">开关</a-radio>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<template v-if="form.type == 1">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:type="`image`"
|
||||
:data="images"
|
||||
@done="chooseImage"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
<div class="pt-2 text-gray-400"> 请选择或上传图片 </div>
|
||||
</template>
|
||||
<template v-else-if="form.type == 2">
|
||||
<SelectFile
|
||||
:placeholder="`请选择视频`"
|
||||
:limit="1"
|
||||
:type="`video`"
|
||||
:data="images"
|
||||
@done="chooseImage"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
<div class="pt-2 text-gray-400"> 请选择或上传视频 </div>
|
||||
</template>
|
||||
<template v-else-if="form.type === 3">
|
||||
<a-switch v-model:checked="form.value" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-input placeholder="字段内容" v-model:value="form.value" />
|
||||
</template>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注" name="comments">
|
||||
<a-textarea
|
||||
:rows="2"
|
||||
:maxlength="2000"
|
||||
placeholder="备注"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="加密"
|
||||
name="encrypted"
|
||||
extra="私密信息需要加密保存"
|
||||
v-if="form.type === 0"
|
||||
>
|
||||
<a-switch v-model:checked="form.encrypted" />
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="预留" name="style">-->
|
||||
<!-- <a-input-->
|
||||
<!-- allow-clear-->
|
||||
<!-- placeholder="预留字段"-->
|
||||
<!-- style="width: 325px"-->
|
||||
<!-- v-model:value="form.style"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="99999"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import {
|
||||
addCmsWebsiteField,
|
||||
updateCmsWebsiteField
|
||||
} from '@/api/cms/cmsWebsiteField';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { removeSiteInfoCache } from '@/api/cms/cmsWebsite';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { FileRecord } from '@/api/system/file/model';
|
||||
import { uuid } from 'ele-admin-pro';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { CmsWebsiteField } from '@/api/cms/cmsWebsiteField/model';
|
||||
import { decrypt, encrypt } from '@/utils/common';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
websiteId: number | null | undefined;
|
||||
// 修改回显的数据
|
||||
data?: CmsWebsiteField | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
const images = ref<ItemType[]>([]);
|
||||
const formRef = ref<FormInstance | null>(null); // 国际化
|
||||
const { locale } = useI18n();
|
||||
|
||||
const { form, resetFields, assignFields } = useFormData<CmsWebsiteField>({
|
||||
id: undefined,
|
||||
type: 0,
|
||||
template: undefined,
|
||||
name: undefined,
|
||||
value: undefined,
|
||||
modifyRange: undefined,
|
||||
defaultValue: undefined,
|
||||
comments: '',
|
||||
style: '',
|
||||
lang: '',
|
||||
encrypted: false,
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入名称'
|
||||
}
|
||||
],
|
||||
comments: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请输入字段备注'
|
||||
}
|
||||
],
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
type: 'number',
|
||||
message: '请选择字段类型'
|
||||
}
|
||||
],
|
||||
value: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写字段值'
|
||||
}
|
||||
]
|
||||
// comments: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'string',
|
||||
// message: '请输入字段'
|
||||
// }
|
||||
// ],
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const chooseImage = (data: FileRecord) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
form.value = data.downloadUrl;
|
||||
form.type = 1;
|
||||
};
|
||||
|
||||
const onDeleteItem = (index: number) => {
|
||||
images.value.splice(index, 1);
|
||||
form.type = 0;
|
||||
};
|
||||
|
||||
// const chooseData = (data: CmsWebsiteField) => {
|
||||
// form.name = data.name;
|
||||
// form.value = data.defaultValue;
|
||||
// form.comments = data.comments;
|
||||
// if (data.type == 1) {
|
||||
// images.value.push({
|
||||
// uid: `${data.id}`,
|
||||
// url: data.defaultValue,
|
||||
// status: 'done'
|
||||
// });
|
||||
// }
|
||||
// };
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
// 3 开关
|
||||
if (form.type == 3) {
|
||||
form.value = form.value ? '1' : '0';
|
||||
}
|
||||
const data = {
|
||||
...form,
|
||||
// name: form.name?.toUpperCase(),
|
||||
websiteId: props.websiteId,
|
||||
lang: locale.value
|
||||
};
|
||||
// 加密处理
|
||||
if (data.encrypted) {
|
||||
data.value = encrypt(data.value);
|
||||
}
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateCmsWebsiteField
|
||||
: addCmsWebsiteField;
|
||||
saveOrUpdate(data)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
// 清除缓存
|
||||
removeSiteInfoCache('SiteInfo:' + localStorage.getItem('TenantId'));
|
||||
if (form.name == 'i18n') {
|
||||
localStorage.setItem('i18n', '1');
|
||||
window.location.reload();
|
||||
}
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
images.value = [];
|
||||
if (props.data) {
|
||||
assignFields(props.data);
|
||||
form.comments = props.data.comments;
|
||||
if (form.type == 1) {
|
||||
images.value.push({
|
||||
uid: uuid(),
|
||||
url: props.data.value,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (form.type == 3) {
|
||||
form.value = props.data.value == '1';
|
||||
}
|
||||
if (form.encrypted) {
|
||||
form.value = decrypt(props.data.value);
|
||||
}
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
117
src/views/cms/cmsWebsiteField/components/search.vue
Normal file
117
src/views/cms/cmsWebsiteField/components/search.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<a-space>
|
||||
<a-button @click="add" type="primary">添加字段</a-button>
|
||||
<a-button
|
||||
type="dashed"
|
||||
:disabled="!hasRole('superAdmin')"
|
||||
@click="handleExport"
|
||||
>备份</a-button
|
||||
>
|
||||
<a-button
|
||||
type="dashed"
|
||||
:disabled="!hasRole('superAdmin')"
|
||||
@click="openImport"
|
||||
>恢复</a-button
|
||||
>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
style="width: 280px"
|
||||
v-model:value="where.keywords"
|
||||
@search="reload"
|
||||
/>
|
||||
</a-space>
|
||||
<!-- 导入弹窗 -->
|
||||
<import v-model:visible="showImport" @done="reload" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
CmsWebsiteField,
|
||||
CmsWebsiteFieldParam
|
||||
} from '@/api/cms/cmsWebsiteField/model';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
import { message } from 'ant-design-vue';
|
||||
import Import from './Import.vue';
|
||||
import { listCmsWebsiteField } from '@/api/cms/cmsWebsiteField';
|
||||
import { getTenantId } from '@/utils/domain';
|
||||
|
||||
// 是否显示导入弹窗
|
||||
const showImport = ref(false);
|
||||
const loading = ref(false);
|
||||
const xlsFileName = ref<string>();
|
||||
const fields = ref<CmsWebsiteField[]>([]);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: CmsWebsiteFieldParam): void;
|
||||
(e: 'add'): void;
|
||||
}>();
|
||||
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<CmsWebsiteFieldParam>({
|
||||
keywords: ''
|
||||
});
|
||||
|
||||
const reload = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openImport = () => {
|
||||
showImport.value = true;
|
||||
};
|
||||
|
||||
// 导出
|
||||
const handleExport = async () => {
|
||||
loading.value = true;
|
||||
const array: (string | number)[][] = [
|
||||
['类型', '名称', '值', '加密', '备注']
|
||||
];
|
||||
|
||||
// 按搜索结果导出
|
||||
await listCmsWebsiteField(where)
|
||||
.then((list) => {
|
||||
fields.value = list;
|
||||
list?.forEach((d: CmsWebsiteField) => {
|
||||
array.push([
|
||||
`${d.type}`,
|
||||
`${d.name}`,
|
||||
`${d.value}`,
|
||||
`${d.encrypted ? '1' : '0'}`,
|
||||
`${d.comments}`
|
||||
]);
|
||||
});
|
||||
const sheetName = `bak_config_${getTenantId()}`;
|
||||
const workbook = {
|
||||
SheetNames: [sheetName],
|
||||
Sheets: {}
|
||||
};
|
||||
const sheet = utils.aoa_to_sheet(array);
|
||||
workbook.Sheets[sheetName] = sheet;
|
||||
// 设置列宽
|
||||
sheet['!cols'] = [];
|
||||
message.loading('正在导出...');
|
||||
setTimeout(() => {
|
||||
writeFile(
|
||||
workbook,
|
||||
`${
|
||||
where.createTimeEnd ? xlsFileName.value + '_' : ''
|
||||
}${sheetName}.xlsx`
|
||||
);
|
||||
loading.value = false;
|
||||
}, 1000);
|
||||
})
|
||||
.catch((msg) => {
|
||||
message.error(msg);
|
||||
loading.value = false;
|
||||
})
|
||||
.finally(() => {});
|
||||
};
|
||||
</script>
|
||||
311
src/views/cms/cmsWebsiteField/index.vue
Normal file
311
src/views/cms/cmsWebsiteField/index.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<template #extra>
|
||||
<CmsWebsiteSearch />
|
||||
</template>
|
||||
<a-card :bordered="false">
|
||||
<div class="website-field">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
:need-page="false"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<Search @add="openEdit" @search="reload" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'name'">
|
||||
<div
|
||||
class="ele-text-heading"
|
||||
@mouseover="onCopyIcon(record.name)"
|
||||
@mouseleave="hideCopyIcon"
|
||||
>
|
||||
<span>{{ record.name }}</span>
|
||||
<CopyOutlined
|
||||
class="px-2"
|
||||
style="color: #cccccc"
|
||||
@click="
|
||||
copyText(
|
||||
`${record.name} ${
|
||||
record.encrypted ? decrypt(record.value) : record.value
|
||||
}`
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<template v-if="record.value">
|
||||
<a-space>
|
||||
<div class="text-gray-400" v-if="record.encrypted">{{
|
||||
decrypt(record.value)
|
||||
}}</div>
|
||||
<div class="text-gray-400" v-else>{{ record.value }}</div>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.key === 'value'">
|
||||
<a-space>
|
||||
<a-image
|
||||
v-if="record.type === 1"
|
||||
:src="record.value"
|
||||
:width="120"
|
||||
/>
|
||||
<video
|
||||
v-else-if="record.type === 2"
|
||||
:src="record.value"
|
||||
style="background-color: #000000"
|
||||
:width="120"
|
||||
:height="120"
|
||||
></video>
|
||||
<a-switch
|
||||
v-else-if="record.type == 3"
|
||||
:checked="record.value == '1'"
|
||||
@change="updateValue(record)"
|
||||
/>
|
||||
<span v-else-if="record.name === 'AppSecret'">
|
||||
{{ decrypt(record.value) }}
|
||||
</span>
|
||||
<div v-else v-html="getSafeHtml(record.value)"></div>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-if="column.key === 'encrypted'">
|
||||
<a-tag v-if="record.encrypted">加密</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'comments'">
|
||||
<span class="text-gray-400">{{ record.comments }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a @click="openEdit(record)">编辑</a>
|
||||
<template v-if="record.deleted == 0">
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要删除此记录吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
<template v-if="record.deleted == 1">
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要放回原处吗？"
|
||||
@confirm="recovery(record)"
|
||||
>
|
||||
<a class="ele-text-danger">恢复</a>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
<!-- 编辑弹窗 -->
|
||||
<Edit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</div>
|
||||
</a-card>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { CopyOutlined } from '@ant-design/icons-vue';
|
||||
import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import CmsWebsiteSearch from '@/views/cms/cmsWebsite/components/search.vue';
|
||||
import Search from './components/search.vue';
|
||||
import Edit from './components/edit.vue';
|
||||
import {
|
||||
CmsWebsiteField,
|
||||
CmsWebsiteFieldParam
|
||||
} from '@/api/cms/cmsWebsiteField/model';
|
||||
import {
|
||||
listCmsWebsiteField,
|
||||
removeCmsWebsiteField,
|
||||
undeleteWebsiteField,
|
||||
updateCmsWebsiteField
|
||||
} from '@/api/cms/cmsWebsiteField';
|
||||
import { copyText, decrypt, getPageTitle } from '@/utils/common';
|
||||
import DOMPurify from 'dompurify';
|
||||
|
||||
// 安全的内容（XSS 消毒）
|
||||
const getSafeHtml = (html: string) => {
|
||||
return DOMPurify.sanitize(html);
|
||||
};
|
||||
|
||||
const props = defineProps<{
|
||||
websiteId: any;
|
||||
data: CmsWebsiteField;
|
||||
}>();
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const selection = ref<any[]>();
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsWebsiteField | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
const currentName = ref<string>();
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
// 搜索条件
|
||||
return listCmsWebsiteField({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<any[]>([
|
||||
// {
|
||||
// title: 'ID',
|
||||
// dataIndex: 'id',
|
||||
// width: 120
|
||||
// },
|
||||
{
|
||||
title: '字段',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
ellipsis: true
|
||||
},
|
||||
// {
|
||||
// title: '值',
|
||||
// dataIndex: 'value',
|
||||
// key: 'value',
|
||||
// ellipsis: true
|
||||
// },
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '加密',
|
||||
dataIndex: 'encrypted',
|
||||
key: 'encrypted',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortNumber',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
const onCopyIcon = (text: string) => {
|
||||
currentName.value = text;
|
||||
};
|
||||
|
||||
const hideCopyIcon = () => {
|
||||
currentName.value = undefined;
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsWebsiteField) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsWebsiteFieldParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
const updateValue = (row: CmsWebsiteField) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
updateCmsWebsiteField({
|
||||
...row,
|
||||
value: row.value == '1' ? '0' : '1'
|
||||
})
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsWebsiteField) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsWebsiteField(row.id)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
if (row.name == 'i18n') {
|
||||
localStorage.removeItem('i18n');
|
||||
window.location.reload();
|
||||
}
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 从回收站放回原处
|
||||
const recovery = (row: CmsWebsiteField) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
undeleteWebsiteField(row.id)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsWebsiteField) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.websiteId,
|
||||
(websiteId) => {
|
||||
if (websiteId) {
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsWebsiteFieldIndex'
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,265 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<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="关联网站ID" name="websiteId">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入关联网站ID"
|
||||
v-model:value="form.websiteId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否官方插件" name="official">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否官方插件"
|
||||
v-model:value="form.official"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否展示在插件市场" name="market">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否展示在插件市场"
|
||||
v-model:value="form.market"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否允许被搜索" name="search">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否允许被搜索"
|
||||
v-model:value="form.search"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否共享" name="share">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否共享"
|
||||
v-model:value="form.share"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否插件 0应用1 插件 " name="plugin">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否插件 0应用1 插件 "
|
||||
v-model:value="form.plugin"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="编辑器类型 1 md-editor-v3, 2 tinymce-editor"
|
||||
name="editor"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入编辑器类型 1 md-editor-v3, 2 tinymce-editor"
|
||||
v-model:value="form.editor"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="显示站内搜索" name="searchBtn">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入显示站内搜索"
|
||||
v-model:value="form.searchBtn"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="显示登录注册功能" name="loginBtn">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入显示登录注册功能"
|
||||
v-model:value="form.loginBtn"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="显示悬浮客服工具" name="kefuTool">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入显示悬浮客服工具"
|
||||
v-model:value="form.floatTool"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="显示版权链接" name="copyrightLink">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入显示版权链接"
|
||||
v-model:value="form.copyrightLink"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="导航栏最多显示数量" name="maxMenuNum">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入导航栏最多显示数量"
|
||||
v-model:value="form.maxMenuNum"
|
||||
/>
|
||||
</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="是否删除, 0否, 1是" name="deleted">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入是否删除, 0否, 1是"
|
||||
v-model:value="form.deleted"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="修改时间" name="updateTime">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入修改时间"
|
||||
v-model:value="form.updateTime"
|
||||
/>
|
||||
</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 } from 'ele-admin-pro';
|
||||
import {
|
||||
addCmsWebsiteSetting,
|
||||
updateCmsWebsiteSetting
|
||||
} from '@/api/cms/cmsWebsiteSetting';
|
||||
import { CmsWebsiteSetting } from '@/api/cms/cmsWebsiteSetting/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';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsWebsiteSetting | null;
|
||||
}>();
|
||||
|
||||
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<CmsWebsiteSetting>({
|
||||
id: undefined,
|
||||
websiteId: undefined,
|
||||
official: undefined,
|
||||
market: undefined,
|
||||
search: undefined,
|
||||
share: undefined,
|
||||
plugin: undefined,
|
||||
editor: undefined,
|
||||
searchBtn: undefined,
|
||||
loginBtn: undefined,
|
||||
floatTool: undefined,
|
||||
copyrightLink: undefined,
|
||||
maxMenuNum: undefined,
|
||||
deleted: undefined,
|
||||
tenantId: undefined,
|
||||
createTime: undefined,
|
||||
updateTime: undefined,
|
||||
sortNumber: 100
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
cmsWebsiteSettingName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写网站设置名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const formData = {
|
||||
...form
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value
|
||||
? updateCmsWebsiteSetting
|
||||
: addCmsWebsiteSetting;
|
||||
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);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
42
src/views/cms/cmsWebsiteSetting/components/search.vue
Normal file
42
src/views/cms/cmsWebsiteSetting/components/search.vue
Normal 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 type { GradeParam } from '@/api/user/grade/model';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: GradeParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
318
src/views/cms/cmsWebsiteSetting/index.vue
Normal file
318
src/views/cms/cmsWebsiteSetting/index.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="cmsWebsiteSettingId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image :src="record.image" :width="50" />
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
|
||||
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<CmsWebsiteSettingEdit
|
||||
v-model:visible="showEdit"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import Search from './components/search.vue';
|
||||
import CmsWebsiteSettingEdit from './components/cmsWebsiteSettingEdit.vue';
|
||||
import {
|
||||
pageCmsWebsiteSetting,
|
||||
removeCmsWebsiteSetting,
|
||||
removeBatchCmsWebsiteSetting
|
||||
} from '@/api/cms/cmsWebsiteSetting';
|
||||
import type {
|
||||
CmsWebsiteSetting,
|
||||
CmsWebsiteSettingParam
|
||||
} from '@/api/cms/cmsWebsiteSetting/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsWebsiteSetting[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsWebsiteSetting | 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;
|
||||
}
|
||||
return pageCmsWebsiteSetting({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: '自增ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
align: 'center',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
title: '关联网站ID',
|
||||
dataIndex: 'websiteId',
|
||||
key: 'websiteId',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否官方插件',
|
||||
dataIndex: 'official',
|
||||
key: 'official',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否展示在插件市场',
|
||||
dataIndex: 'market',
|
||||
key: 'market',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否允许被搜索',
|
||||
dataIndex: 'search',
|
||||
key: 'search',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否共享',
|
||||
dataIndex: 'share',
|
||||
key: 'share',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否插件 0应用1 插件 ',
|
||||
dataIndex: 'plugin',
|
||||
key: 'plugin',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '编辑器类型 1 md-editor-v3, 2 tinymce-editor',
|
||||
dataIndex: 'editor',
|
||||
key: 'editor',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '显示站内搜索',
|
||||
dataIndex: 'searchBtn',
|
||||
key: 'searchBtn',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '显示登录注册功能',
|
||||
dataIndex: 'loginBtn',
|
||||
key: 'loginBtn',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '显示悬浮客服工具',
|
||||
dataIndex: 'kefuTool',
|
||||
key: 'kefuTool',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '显示版权链接',
|
||||
dataIndex: 'copyrightLink',
|
||||
key: 'copyrightLink',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '导航栏最多显示数量',
|
||||
dataIndex: 'maxMenuNum',
|
||||
key: 'maxMenuNum',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否删除, 0否, 1是',
|
||||
dataIndex: 'deleted',
|
||||
key: 'deleted',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
},
|
||||
{
|
||||
title: '修改时间',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
hideInSetting: true
|
||||
}
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsWebsiteSettingParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsWebsiteSetting) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsWebsiteSetting) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsWebsiteSetting(row.id)
|
||||
.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);
|
||||
removeBatchCmsWebsiteSetting(
|
||||
selection.value.map((d) => d.cmsWebsiteSettingId)
|
||||
)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 查询 */
|
||||
const query = () => {
|
||||
loading.value = true;
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsWebsiteSetting) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// console.log(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsWebsiteSetting'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
71
src/views/cms/dashboard/components/search.vue
Normal file
71
src/views/cms/dashboard/components/search.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space style="flex-wrap: wrap">
|
||||
<a-button type="text" @click="openUrl(`/website/field`)"
|
||||
>字段扩展
|
||||
</a-button>
|
||||
<a-button type="text" @click="openUrl('/website/dict')">字典管理 </a-button>
|
||||
<a-button type="text" @click="openUrl('/website/domain')"
|
||||
>域名管理
|
||||
</a-button>
|
||||
<a-button type="text" @click="openUrl('/website/model')"
|
||||
>模型管理
|
||||
</a-button>
|
||||
<a-button type="text" @click="openUrl('/website/form')">表单管理 </a-button>
|
||||
<a-button type="text" @click="openUrl('/website/lang')">国际化 </a-button>
|
||||
<a-button type="text" @click="openUrl('/website/setting')"
|
||||
>网站设置
|
||||
</a-button>
|
||||
<a-button type="text" class="ele-btn-icon" @click="clearSiteInfoCache">
|
||||
清除缓存
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { watch, nextTick } from 'vue';
|
||||
import { CmsWebsite } from '@/api/cms/cmsWebsite/model';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { removeSiteInfoCache } from '@/api/cms/cmsWebsite';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
website?: CmsWebsite;
|
||||
count?: 0;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'add'): void;
|
||||
}>();
|
||||
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 清除缓存
|
||||
const clearSiteInfoCache = () => {
|
||||
removeSiteInfoCache(
|
||||
'SiteInfo:' + localStorage.getItem('TenantId') + '*'
|
||||
).then((msg) => {
|
||||
if (msg) {
|
||||
message.success(msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
nextTick(() => {
|
||||
if (localStorage.getItem('NotActive')) {
|
||||
// IsActive.value = false
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
408
src/views/cms/dashboard/components/websiteEdit.vue
Normal file
408
src/views/cms/dashboard/components/websiteEdit.vue
Normal file
@@ -0,0 +1,408 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
:title="isUpdate ? '编辑小程序' : '创建小程序'"
|
||||
:body-style="{ paddingBottom: '28px' }"
|
||||
@update:visible="updateVisible"
|
||||
:confirm-loading="loading"
|
||||
@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="Logo" name="avatar">
|
||||
<SelectFile
|
||||
:placeholder="`请选择图片`"
|
||||
:limit="1"
|
||||
:data="images"
|
||||
@done="chooseImage"
|
||||
@del="onDeleteItem"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="账号类型" name="type">
|
||||
{{ form.type }}
|
||||
</a-form-item>
|
||||
<a-form-item label="小程序名称" name="websiteName">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入小程序名称"
|
||||
v-model:value="form.websiteName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="网站域名" name="domain" v-if="form.type == 10">
|
||||
<a-input v-model:value="form.domain" placeholder="huawei.com">
|
||||
<template #addonBefore>
|
||||
<a-select v-model:value="form.prefix" style="width: 90px">
|
||||
<a-select-option value="http://">http://</a-select-option>
|
||||
<a-select-option value="https://">https://</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="AppId" name="websiteCode" v-if="form.type == 20">
|
||||
<a-input
|
||||
allow-clear
|
||||
placeholder="请输入AppId"
|
||||
v-model:value="form.websiteCode"
|
||||
/>
|
||||
</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="SEO关键词" name="keywords">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入SEO关键词"
|
||||
v-model:value="form.keywords"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="全局样式" name="style">-->
|
||||
<!-- <a-textarea-->
|
||||
<!-- :rows="4"-->
|
||||
<!-- :maxlength="200"-->
|
||||
<!-- placeholder="全局样式"-->
|
||||
<!-- v-model:value="form.style"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="小程序类型" name="websiteType">-->
|
||||
<!-- <a-select-->
|
||||
<!-- :options="websiteType"-->
|
||||
<!-- :value="form.websiteType"-->
|
||||
<!-- placeholder="请选择主体类型"-->
|
||||
<!-- @change="onCmsWebsiteType"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="当前版本" name="version">-->
|
||||
<!-- <a-tag color="red" v-if="form.version === 10">标准版</a-tag>-->
|
||||
<!-- <a-tag color="green" v-if="form.version === 20">专业版</a-tag>-->
|
||||
<!-- <a-tag color="cyan" v-if="form.version === 30">永久授权</a-tag>-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item label="状态" name="running">
|
||||
<a-radio-group
|
||||
v-model:value="form.running"
|
||||
:disabled="form.running == 4 || form.running == 5"
|
||||
>
|
||||
<a-radio :value="1">运行中</a-radio>
|
||||
<a-radio :value="2">维护中</a-radio>
|
||||
<a-radio :value="3">已关闭</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="form.running == 2" label="维护说明" name="statusText">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="状态说明"
|
||||
v-model:value="form.statusText"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-divider style="margin-bottom: 24px" />-->
|
||||
</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 { addCmsWebsite, updateCmsWebsite } from '@/api/cms/cmsWebsite';
|
||||
import { CmsWebsite } from '@/api/cms/cmsWebsite/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { FormInstance, type Rule } from 'ant-design-vue/es/form';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { FileRecord } from '@/api/system/file/model';
|
||||
import { checkExistence } from '@/api/cms/cmsDomain';
|
||||
import { updateCmsDomain } from '@/api/cms/cmsDomain';
|
||||
import { updateTenant } from '@/api/system/tenant';
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const useForm = Form.useForm;
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsWebsite | null;
|
||||
}>();
|
||||
|
||||
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 websiteQrcode = ref<ItemType[]>([]);
|
||||
const oldDomain = ref();
|
||||
const files = ref<ItemType[]>([]);
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<CmsWebsite>({
|
||||
websiteId: undefined,
|
||||
websiteLogo: undefined,
|
||||
websiteName: undefined,
|
||||
websiteCode: undefined,
|
||||
type: 20,
|
||||
files: undefined,
|
||||
keywords: '',
|
||||
prefix: '',
|
||||
domain: '',
|
||||
adminUrl: '',
|
||||
style: '',
|
||||
icpNo: undefined,
|
||||
email: undefined,
|
||||
version: undefined,
|
||||
websiteType: '',
|
||||
running: 1,
|
||||
expirationTime: undefined,
|
||||
sortNumber: undefined,
|
||||
comments: undefined,
|
||||
status: undefined,
|
||||
statusText: undefined
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
// comments: [
|
||||
// {
|
||||
// required: true,
|
||||
// type: 'string',
|
||||
// message: '请填写小程序描述',
|
||||
// trigger: 'blur'
|
||||
// }
|
||||
// ],
|
||||
keywords: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写SEO关键词',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
running: [
|
||||
{
|
||||
required: true,
|
||||
type: 'number',
|
||||
message: '请选择小程序状态',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
domain: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写小程序域名',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
websiteCode: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写小程序码',
|
||||
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,
|
||||
type: 'string',
|
||||
message: '请填写小程序后台管理地址',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
icpNo: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写ICP备案号',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
appSecret: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写小程序秘钥',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
websiteName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '请填写小程序信息名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const chooseImage = (data: FileRecord) => {
|
||||
images.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
form.websiteLogo = data.downloadUrl;
|
||||
};
|
||||
|
||||
const onDeleteItem = (index: number) => {
|
||||
images.value.splice(index, 1);
|
||||
form.websiteLogo = '';
|
||||
};
|
||||
|
||||
const chooseFile = (data: FileRecord) => {
|
||||
form.websiteCode = data.url;
|
||||
files.value.push({
|
||||
uid: data.id,
|
||||
url: data.url,
|
||||
status: 'done'
|
||||
});
|
||||
};
|
||||
|
||||
const onDeleteFile = (index: number) => {
|
||||
files.value.splice(index, 1);
|
||||
};
|
||||
|
||||
// const onWebsiteType = (text: string) => {
|
||||
// form.websiteType = text;
|
||||
// };
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateCmsWebsite : addCmsWebsite;
|
||||
if (!isUpdate.value) {
|
||||
updateVisible(false);
|
||||
message.loading('创建过程中请勿刷新页面！', 0);
|
||||
}
|
||||
const formData = {
|
||||
...form,
|
||||
type: 20,
|
||||
adminUrl: `mp.websoft.top`,
|
||||
files: JSON.stringify(files.value)
|
||||
};
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
updateVisible(false);
|
||||
updateCmsDomain({
|
||||
websiteId: form.websiteId,
|
||||
domain: `${localStorage.getItem('TenantId')}.shoplnk.cn`
|
||||
});
|
||||
updateTenant({
|
||||
tenantName: `${form.websiteName}`
|
||||
}).then(() => {});
|
||||
localStorage.setItem('Domain', `${form.websiteCode}.shoplnk.cn`);
|
||||
localStorage.setItem('WebsiteId', `${form.websiteId}`);
|
||||
localStorage.setItem('WebsiteName', `${form.websiteName}`);
|
||||
message.destroy();
|
||||
message.success(msg);
|
||||
// window.location.reload();
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.destroy();
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
images.value = [];
|
||||
files.value = [];
|
||||
websiteQrcode.value = [];
|
||||
if (props.data?.websiteId) {
|
||||
assignObject(form, props.data);
|
||||
if (props.data.websiteLogo) {
|
||||
images.value.push({
|
||||
uid: uuid(),
|
||||
url: props.data.websiteLogo,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (props.data.files) {
|
||||
files.value = JSON.parse(props.data.files);
|
||||
}
|
||||
if (props.data.websiteCode) {
|
||||
oldDomain.value = props.data.websiteCode;
|
||||
}
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
273
src/views/cms/dashboard/index.vue
Normal file
273
src/views/cms/dashboard/index.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<a-page-header :show-back="false">
|
||||
<a-row :gutter="16">
|
||||
<!-- 应用基本信息卡片 -->
|
||||
<a-col :span="24" style="margin-bottom: 16px">
|
||||
<a-card title="概况" :bordered="false">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="6">
|
||||
<a-image
|
||||
:width="80"
|
||||
:height="80"
|
||||
:preview="false"
|
||||
style="border-radius: 8px"
|
||||
:src="siteStore.websiteLogo"
|
||||
fallback="/logo.png"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<div class="system-info">
|
||||
<h2 class="ele-text-heading">{{ siteStore.websiteName }}</h2>
|
||||
<p class="ele-text-secondary">{{
|
||||
siteStore.websiteComments
|
||||
}}</p>
|
||||
<a-space>
|
||||
<a-tag color="blue">版本 {{ systemInfo.version }}</a-tag>
|
||||
<a-tag color="green">{{ systemInfo.status }}</a-tag>
|
||||
<a-popover title="小程序码">
|
||||
<template #content>
|
||||
<p
|
||||
><img
|
||||
:src="siteStore.websiteDarkLogo"
|
||||
alt="小程序码"
|
||||
width="300"
|
||||
height="300"
|
||||
/></p>
|
||||
</template>
|
||||
<a-tag>
|
||||
<QrcodeOutlined />
|
||||
</a-tag>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="3">
|
||||
<div class="flex justify-center items-center h-full w-full">
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<!-- 统计数据卡片 -->
|
||||
<a-col :span="6">
|
||||
<a-card :bordered="false" class="stat-card">
|
||||
<a-statistic
|
||||
title="用户总数"
|
||||
:value="userCount"
|
||||
:value-style="{ color: '#3f8600' }"
|
||||
:loading="loading"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-card :bordered="false" class="stat-card">
|
||||
<a-statistic
|
||||
title="订单总数"
|
||||
:value="orderCount"
|
||||
:value-style="{ color: '#1890ff' }"
|
||||
:loading="loading"
|
||||
>
|
||||
<template #prefix>
|
||||
<AccountBookOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-card :bordered="false" class="stat-card">
|
||||
<a-statistic
|
||||
title="总营业额"
|
||||
:value="totalSales"
|
||||
:value-style="{ color: '#cf1322' }"
|
||||
:loading="loading"
|
||||
>
|
||||
<template #prefix>
|
||||
<MoneyCollectOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="6">
|
||||
<a-card :bordered="false" class="stat-card">
|
||||
<a-statistic
|
||||
title="系统运行天数"
|
||||
:value="runDays"
|
||||
suffix="天"
|
||||
:value-style="{ color: '#722ed1' }"
|
||||
:loading="loading"
|
||||
>
|
||||
<template #prefix>
|
||||
<ClockCircleOutlined />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<!-- 系统基本信息 -->
|
||||
<a-col :span="12">
|
||||
<a-card title="基本信息" :bordered="false">
|
||||
<a-descriptions :column="1" size="small">
|
||||
<a-descriptions-item label="系统名称">
|
||||
{{ systemInfo.name }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="版本号">
|
||||
{{ systemInfo.version }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="部署环境">
|
||||
{{ systemInfo.environment }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="数据库">
|
||||
{{ systemInfo.database }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="服务器">
|
||||
{{ systemInfo.server }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">
|
||||
{{ siteInfo?.createTime }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="到期时间">
|
||||
{{ siteInfo?.expirationTime }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="技术支持">
|
||||
<span
|
||||
class="cursor-pointer"
|
||||
>桂礼序</span
|
||||
>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<a-col :span="12">
|
||||
<a-card title="快捷操作" :bordered="false">
|
||||
<a-space direction="vertical" style="width: 100%">
|
||||
<a-button
|
||||
type="primary"
|
||||
block
|
||||
@click="$router.push('/website/index')"
|
||||
>
|
||||
<ShopOutlined />
|
||||
站点管理
|
||||
</a-button>
|
||||
<a-button block @click="$router.push('/website/order')">
|
||||
<CalendarOutlined />
|
||||
订单管理
|
||||
</a-button>
|
||||
<a-button block @click="$router.push('/system/user')">
|
||||
<UserOutlined />
|
||||
用户管理
|
||||
</a-button>
|
||||
<a-button block @click="$router.push('/system/login-record')">
|
||||
<FileTextOutlined />
|
||||
系统日志
|
||||
</a-button>
|
||||
<a-button block @click="$router.push('/system/setting')">
|
||||
<SettingOutlined />
|
||||
系统设置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||
import {
|
||||
UserOutlined,
|
||||
CalendarOutlined,
|
||||
QrcodeOutlined,
|
||||
ShopOutlined,
|
||||
ClockCircleOutlined,
|
||||
SettingOutlined,
|
||||
AccountBookOutlined,
|
||||
FileTextOutlined,
|
||||
MoneyCollectOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { openNew } from '@/utils/common';
|
||||
import { useSiteStore } from '@/store/modules/site';
|
||||
import { useStatisticsStore } from '@/store/modules/statistics';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
// 使用状态管理
|
||||
const siteStore = useSiteStore();
|
||||
const statisticsStore = useStatisticsStore();
|
||||
|
||||
// 从 store 中获取响应式数据
|
||||
const { siteInfo, loading: siteLoading } = storeToRefs(siteStore);
|
||||
const { loading: statisticsLoading } = storeToRefs(statisticsStore);
|
||||
|
||||
// 系统信息
|
||||
const systemInfo = ref({
|
||||
name: '小程序开发',
|
||||
description:
|
||||
'基于Spring、SpringBoot、SpringMVC等技术栈构建的前后端分离开发平台',
|
||||
version: '2.0.0',
|
||||
status: '运行中',
|
||||
logo: '/logo.png',
|
||||
environment: '生产环境',
|
||||
database: 'MySQL 8.0',
|
||||
server: 'Linux CentOS 7.9',
|
||||
expirationTime: '2024-01-01 09:00:00'
|
||||
});
|
||||
|
||||
// 计算属性
|
||||
const runDays = computed(() => siteStore.runDays);
|
||||
const userCount = computed(() => statisticsStore.userCount);
|
||||
const orderCount = computed(() => statisticsStore.orderCount);
|
||||
const totalSales = computed(() => statisticsStore.totalSales);
|
||||
|
||||
// 加载状态
|
||||
const loading = computed(() => siteLoading.value || statisticsLoading.value);
|
||||
|
||||
onMounted(async () => {
|
||||
// 加载网站信息和统计数据
|
||||
try {
|
||||
await Promise.all([
|
||||
siteStore.fetchSiteInfo(),
|
||||
statisticsStore.fetchStatistics()
|
||||
]);
|
||||
|
||||
// 开始自动刷新统计数据（每5分钟）
|
||||
statisticsStore.startAutoRefresh();
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 组件卸载时停止自动刷新
|
||||
statisticsStore.stopAutoRefresh();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.system-info h2 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-card :deep(.ant-statistic-title) {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.stat-card :deep(.ant-statistic-content) {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
177
src/views/cms/dict/components/dict-edit.vue
Normal file
177
src/views/cms/dict/components/dict-edit.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<!-- 文章来源编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="460"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '修改文章来源' : '添加文章来源'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="字典名称" name="dictCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
disabled
|
||||
placeholder="请输入字典名称"
|
||||
v-model:value="form.dictCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="字典值" name="dictDataName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入字典值"
|
||||
v-model:value="form.dictDataName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="99999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入备注"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { addDictData, updateDictData } from '@/api/system/dict-data';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: DictData | null;
|
||||
// 字典ID
|
||||
dictId?: number | 0;
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<DictData>({
|
||||
dictId: undefined,
|
||||
dictDataId: undefined,
|
||||
dictDataName: '',
|
||||
dictCode: 'articleSource',
|
||||
dictDataCode: '',
|
||||
sortNumber: 100,
|
||||
comments: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
dictDataCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入属性名称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
dictCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入属性值',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateDictData : addDictData;
|
||||
form.dictDataCode = form.dictDataName;
|
||||
form.dictId = props.dictId;
|
||||
saveOrUpdate(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
const key = form.dictCode + ':' + localStorage.getItem('TenantId');
|
||||
localStorage.removeItem(key);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields(props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
213
src/views/cms/dict/index.vue
Normal file
213
src/views/cms/dict/index.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="dictDataId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
:scroll="{ x: 800 }"
|
||||
cache-key="goodsDictTable"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
title="确定要删除此分类吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<dict-edit
|
||||
v-model:visible="showEdit"
|
||||
:dictId="dictId"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import {
|
||||
PlusOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { messageLoading } from 'ele-admin-pro/es';
|
||||
import DictEdit from './components/dict-edit.vue';
|
||||
import {
|
||||
pageDictData,
|
||||
removeDictData,
|
||||
removeDictDataBatch
|
||||
} from '@/api/system/dict-data';
|
||||
import { DictParam } from '@/api/system/dict/model';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
import { addDict, listDictionaries } from '@/api/system/dict';
|
||||
import { Dictionary } from '@/api/system/dictionary/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const dictId = ref(0);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'dictDataName',
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'sortNumber'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<DictData[]>([]);
|
||||
|
||||
// 当前编辑数据
|
||||
const current = ref<Dictionary | null>(null);
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
where.dictCode = 'articleSource';
|
||||
return pageDictData({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: DictParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: DictData) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: DictData) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeDictData(row.dictDataId)
|
||||
.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 = messageLoading('请求中..', 0);
|
||||
removeDictDataBatch(selection.value.map((d) => d.dictDataId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化字典
|
||||
const loadDict = () => {
|
||||
listDictionaries({ dictCode: 'articleSource' }).then(async (data) => {
|
||||
if (data?.length == 0) {
|
||||
await addDict({ dictCode: 'articleSource', dictName: '文章来源' });
|
||||
}
|
||||
await listDictionaries({ dictCode: 'articleSource' }).then((list) => {
|
||||
list?.map((d) => {
|
||||
dictId.value = Number(d.dictId);
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
loadDict();
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: DictData) => {
|
||||
return {
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'TaskDictData'
|
||||
};
|
||||
</script>
|
||||
241
src/views/cms/file/components/video-edit.vue
Normal file
241
src/views/cms/file/components/video-edit.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<!-- 角色编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="600"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '编辑内容' : '上传视频'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@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="fileName" v-if="!isUpdate">
|
||||
<span
|
||||
class="ele-text-success"
|
||||
v-if="fileName"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
{{ fileName }}
|
||||
</span>
|
||||
<a-upload
|
||||
:show-upload-list="false"
|
||||
:accept="'video/*'"
|
||||
v-if="!fileName"
|
||||
:customRequest="onUpload"
|
||||
>
|
||||
<a-button type="primary" class="ele-btn-icon">
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
<span>上传视频</span>
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
<a-form-item label="文件名称" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入文件名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</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="images">-->
|
||||
<!-- <ele-image-upload-->
|
||||
<!-- v-model:value="images"-->
|
||||
<!-- :limit="1"-->
|
||||
<!-- :drag="true"-->
|
||||
<!-- :item-style="{ width: '60px', height: '60px' }"-->
|
||||
<!-- :accept="'image/*'"-->
|
||||
<!-- :upload-handler="uploadHandler"-->
|
||||
<!-- @upload="onUpload"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import type { FileRecord } from '@/api/system/file/model';
|
||||
import { messageLoading } from 'ele-admin-pro';
|
||||
import { addFiles, updateFiles, uploadFile } from '@/api/system/file';
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { RuleObject } from 'ant-design-vue/es/form';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: FileRecord | null;
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
const fileName = ref('');
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<FileRecord>({
|
||||
id: 0,
|
||||
name: '',
|
||||
comments: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
fileName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请上传视频文件',
|
||||
type: 'string',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (!isUpdate.value && fileName.value.length == 0) {
|
||||
return Promise.reject('请上传视频文件' + value);
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入文件名称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 上传事件 */
|
||||
// const uploadHandler = (file: File) => {
|
||||
// const item: ItemType = {
|
||||
// file,
|
||||
// uid: (file as any).uid,
|
||||
// name: file.name
|
||||
// };
|
||||
// if (!file.type.startsWith('video')) {
|
||||
// message.error('只能选择视频文件');
|
||||
// return;
|
||||
// }
|
||||
// if (file.size / 1024 / 1024 > 100) {
|
||||
// message.error('大小不能超过 100MB');
|
||||
// return;
|
||||
// }
|
||||
// onUpload(item);
|
||||
// };
|
||||
|
||||
// 上传文件
|
||||
const onUpload = (item) => {
|
||||
const { file } = item;
|
||||
if (!file.type.startsWith('video')) {
|
||||
message.error('只能选择视频文件');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error('大小不能超过 100MB');
|
||||
return;
|
||||
}
|
||||
const hide = messageLoading({
|
||||
content: '上传中..',
|
||||
duration: 0,
|
||||
mask: true
|
||||
});
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
hide();
|
||||
fileName.value = String(data.name);
|
||||
// images.value.push({
|
||||
// uid: data.id,
|
||||
// url: FILE_THUMBNAIL + data.path,
|
||||
// status: 'done'
|
||||
// });
|
||||
message.success('上传成功');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
hide();
|
||||
});
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateFiles : addFiles;
|
||||
saveOrUpdate(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields(props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
305
src/views/cms/file/index.vue
Normal file
305
src/views/cms/file/index.vue
Normal file
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<template #extra>
|
||||
<Extra />
|
||||
</template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
v-model:selection="selection"
|
||||
:scroll="{ x: 800 }"
|
||||
cache-key="proCmsFileTable"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-upload
|
||||
:show-upload-list="false"
|
||||
:accept="'application/*'"
|
||||
:customRequest="onUpload"
|
||||
>
|
||||
<a-button type="primary" class="ele-btn-icon">
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
<span>上传文件</span>
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
class="ele-btn-icon"
|
||||
v-if="selection.length > 0"
|
||||
@click="removeBatch"
|
||||
>
|
||||
<template #icon>
|
||||
<delete-outlined />
|
||||
</template>
|
||||
<span>删除</span>
|
||||
</a-button>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入关键词"
|
||||
@search="reload"
|
||||
@pressEnter="reload"
|
||||
>
|
||||
<template #addonBefore>
|
||||
<a-select
|
||||
v-model:value="type"
|
||||
style="width: 100px; margin: -5px -12px"
|
||||
>
|
||||
<a-select-option value="name">文件名称</a-select-option>
|
||||
<a-select-option value="createNickname">
|
||||
上传人
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input-search>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'path'">
|
||||
<span class="text-gray-400">[文件]</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'name'">
|
||||
<div
|
||||
>{{ record.name }}
|
||||
<copy-outlined
|
||||
style="padding-left: 4px"
|
||||
@click="copyText(record.downloadUrl)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<div>
|
||||
<a :href="record.downloadUrl" target="_blank">下载</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
title="确定要删除此评价吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<video-edit v-model:visible="showEdit" :data="current" @done="reload" />
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import {
|
||||
UploadOutlined,
|
||||
DeleteOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
CopyOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { messageLoading, toDateString } from 'ele-admin-pro/es';
|
||||
import VideoEdit from './components/video-edit.vue';
|
||||
import {
|
||||
pageFiles,
|
||||
removeFile,
|
||||
removeFiles,
|
||||
uploadOss
|
||||
} from '@/api/system/file';
|
||||
import type { FileRecord, FileRecordParam } from '@/api/system/file/model';
|
||||
import { copyText, getPageTitle } from '@/utils/common';
|
||||
import Extra from '@/views/cms/photo/components/Extra.vue';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
// 表格选中数据
|
||||
const selection = ref<FileRecord[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<FileRecord | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
const type = ref('name');
|
||||
const searchText = ref('');
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
key: 'index',
|
||||
width: 48,
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
hideInSetting: true,
|
||||
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'path',
|
||||
align: 'center',
|
||||
width: 90,
|
||||
key: 'path'
|
||||
},
|
||||
{
|
||||
title: '文件名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'comments',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '文件大小',
|
||||
dataIndex: 'length',
|
||||
sorter: true,
|
||||
align: 'center',
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => {
|
||||
if (text < 1024) {
|
||||
return text + 'B';
|
||||
} else if (text < 1024 * 1024) {
|
||||
return (text / 1024).toFixed(1) + 'KB';
|
||||
} else if (text < 1024 * 1024 * 1024) {
|
||||
return (text / 1024 / 1024).toFixed(1) + 'M';
|
||||
} else {
|
||||
return (text / 1024 / 1024 / 1024).toFixed(1) + 'G';
|
||||
}
|
||||
},
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '发布者',
|
||||
width: 120,
|
||||
dataIndex: 'createNickname'
|
||||
},
|
||||
{
|
||||
title: '发布时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
width: 180,
|
||||
showSorterTooltip: false,
|
||||
ellipsis: true,
|
||||
customRender: ({ text }) => toDateString(text)
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
where = {};
|
||||
if (type.value == 'name') {
|
||||
where.name = searchText.value;
|
||||
}
|
||||
if (type.value == 'createNickname') {
|
||||
where.createNickname = searchText.value;
|
||||
}
|
||||
where.contentType = 'application';
|
||||
return pageFiles({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: FileRecordParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: FileRecord) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: FileRecord) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeFile(row.id)
|
||||
.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 = messageLoading('请求中..', 0);
|
||||
removeFiles(selection.value.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 上传文件
|
||||
const onUpload = (item) => {
|
||||
const { file } = item;
|
||||
if (!file.type.startsWith('application')) {
|
||||
message.error('只能选择视频文件');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error('大小不能超过 100MB');
|
||||
return;
|
||||
}
|
||||
const hide = messageLoading({
|
||||
content: '上传中..',
|
||||
duration: 0,
|
||||
mask: true
|
||||
});
|
||||
uploadOss(file)
|
||||
.then((data) => {
|
||||
hide();
|
||||
message.success('上传成功');
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
hide();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'FileIndex'
|
||||
};
|
||||
</script>
|
||||
125
src/views/cms/file/player/index.vue
Normal file
125
src/views/cms/file/player/index.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<!-- 角色编辑弹窗 -->
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<a-card :bordered="false">
|
||||
<div class="w-[700px]">
|
||||
<ele-xg-player
|
||||
:config="{
|
||||
id: 'demoPlayer1',
|
||||
lang: 'zh-cn',
|
||||
fluid: true,
|
||||
// 视频地址
|
||||
url: form.path,
|
||||
// 封面
|
||||
poster: '',
|
||||
// 开启倍速播放
|
||||
playbackRate: [0.5, 1, 1.5, 2],
|
||||
// 开启画中画
|
||||
pip: true
|
||||
}"
|
||||
@player="onPlayer1"
|
||||
/>
|
||||
</div>
|
||||
<a-space direction="vertical" class="mt-5">
|
||||
<div class="ele-text-secondary"> 文件名称：{{ form.name }} </div>
|
||||
<div class="ele-text-secondary"> 文件路径：{{ form.path }} </div>
|
||||
<div class="ele-text-secondary"> 视频描述：{{ form.comments }} </div>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch, unref } from 'vue';
|
||||
import Player from 'xgplayer';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import { setPageTabTitle } from '@/utils/page-tab-util';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { FileRecord } from '@/api/system/file/model';
|
||||
import { getFile } from '@/api/system/file';
|
||||
|
||||
const { currentRoute } = useRouter();
|
||||
import { getPageTitle } from '@/utils/common';
|
||||
|
||||
const ROUTE_PATH = '/cms/video/player';
|
||||
|
||||
// 视频播放器一实例
|
||||
let player1: Player;
|
||||
// 视频播放器一是否实例化完成
|
||||
const ready1 = ref(false);
|
||||
|
||||
// 视频播放器一配置
|
||||
const config1 = reactive({
|
||||
id: 'demoPlayer1',
|
||||
lang: 'zh-cn',
|
||||
fluid: true,
|
||||
// 视频地址
|
||||
url: 'https://file.wsdns.cn/20221126/cf17ef352db54bf28efeda268107714f.mp4',
|
||||
// 封面
|
||||
poster:
|
||||
'https://file.wsdns.cn/20221125/49f0c461d61e48f28b324366a0a63a2e.jpg',
|
||||
// 开启倍速播放
|
||||
playbackRate: [0.5, 1, 1.5, 2],
|
||||
// 开启画中画
|
||||
pip: true
|
||||
});
|
||||
|
||||
/* 播放器一渲染完成 */
|
||||
const onPlayer1 = (player: Player) => {
|
||||
player1 = player;
|
||||
player1.on('play', () => {
|
||||
ready1.value = true;
|
||||
});
|
||||
};
|
||||
// 视频信息
|
||||
const { form, assignFields } = useFormData<FileRecord>({
|
||||
id: 0,
|
||||
name: '',
|
||||
url: '',
|
||||
path: '',
|
||||
comments: '',
|
||||
createNickname: '',
|
||||
createTime: ''
|
||||
});
|
||||
// 请求状态
|
||||
const loading = ref(true);
|
||||
/* */
|
||||
const query = () => {
|
||||
const { query } = unref(currentRoute);
|
||||
const id = query.id;
|
||||
if (!id || form.id === Number(id)) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
getFile(Number(id))
|
||||
.then((data) => {
|
||||
loading.value = false;
|
||||
assignFields({
|
||||
...data,
|
||||
createTime: toDateString(data.createTime)
|
||||
});
|
||||
// 修改页签标题
|
||||
if (unref(currentRoute).path === ROUTE_PATH) {
|
||||
setPageTabTitle(String(data.comments));
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
(route) => {
|
||||
const { path } = unref(route);
|
||||
if (path !== ROUTE_PATH) {
|
||||
return;
|
||||
}
|
||||
query();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
243
src/views/cms/help/components/articleEdit.vue
Normal file
243
src/views/cms/help/components/articleEdit.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
:maskClosable="false"
|
||||
:maxable="maxable"
|
||||
title="文章详情"
|
||||
:body-style="{ paddingBottom: '18px' }"
|
||||
@update:visible="updateVisible"
|
||||
:confirm-loading="loading"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:label-col="styleResponsive ? { md: 2, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 20, sm: 20, xs: 20 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<div v-html="getSafeHtml(content)"></div>
|
||||
</a-spin>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { assignObject, uuid } from 'ele-admin-pro';
|
||||
import {
|
||||
addCmsArticle,
|
||||
getCmsArticle,
|
||||
updateCmsArticle
|
||||
} from '@/api/cms/cmsArticle';
|
||||
import { CmsArticle } from '@/api/cms/cmsArticle/model';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { FormInstance } from 'ant-design-vue/es/form';
|
||||
import { useWebsiteSettingStore } from '@/store/modules/setting';
|
||||
import DOMPurify from 'dompurify';
|
||||
|
||||
// 安全的内容（XSS 消毒）
|
||||
const getSafeHtml = (html: string) => {
|
||||
return DOMPurify.sanitize(html);
|
||||
};
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
const setting = useWebsiteSettingStore();
|
||||
const { locale } = useI18n();
|
||||
const editor = ref<number>(1);
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: CmsArticle | null;
|
||||
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 content = ref('');
|
||||
const files = ref<ItemType[]>([]);
|
||||
const category = ref<string[]>([]);
|
||||
const password = ref();
|
||||
|
||||
// 用户信息
|
||||
const form = reactive<CmsArticle>({
|
||||
articleId: undefined,
|
||||
// 文章模型
|
||||
model: 'detail',
|
||||
// 封面图
|
||||
image: '',
|
||||
// 文章标题
|
||||
title: '',
|
||||
type: 0,
|
||||
// 展现方式
|
||||
showType: 10,
|
||||
// 文章来源
|
||||
source: undefined,
|
||||
// 产品概述
|
||||
overview: undefined,
|
||||
// 标签集
|
||||
tags: undefined,
|
||||
// 父级栏目ID
|
||||
parentId: undefined,
|
||||
// 栏目ID
|
||||
categoryId: undefined,
|
||||
// 栏目名称
|
||||
categoryName: undefined,
|
||||
// 文章内容
|
||||
content: '',
|
||||
// 虚拟阅读量
|
||||
virtualViews: 0,
|
||||
// 实际阅读量
|
||||
actualViews: 0,
|
||||
recommend: undefined,
|
||||
translation: true,
|
||||
permission: 0,
|
||||
password: undefined,
|
||||
password2: undefined,
|
||||
// 用户ID
|
||||
userId: undefined,
|
||||
files: '',
|
||||
lang: locale.value || undefined,
|
||||
// 排序
|
||||
sortNumber: 100,
|
||||
// 备注
|
||||
comments: undefined,
|
||||
// 状态
|
||||
status: 1,
|
||||
// 创建时间
|
||||
createTime: '',
|
||||
// 更新时间
|
||||
updateTime: ''
|
||||
});
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
if (password.value) {
|
||||
form.password = password.value;
|
||||
}
|
||||
if (form.tags) {
|
||||
form.tags = JSON.stringify(form.tags);
|
||||
}
|
||||
const formData = {
|
||||
...form,
|
||||
editor: editor.value || 1,
|
||||
status: setting.setting?.articleReview ? 1 : 0,
|
||||
content: content.value
|
||||
};
|
||||
const saveOrUpdate = isUpdate.value ? updateCmsArticle : addCmsArticle;
|
||||
saveOrUpdate(formData)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (props.categoryId) {
|
||||
form.categoryId = props.categoryId;
|
||||
}
|
||||
if (localStorage.getItem('Editor')) {
|
||||
editor.value = Number(localStorage.getItem('Editor'));
|
||||
}
|
||||
|
||||
if (visible) {
|
||||
images.value = [];
|
||||
category.value = [];
|
||||
files.value = [];
|
||||
content.value = '';
|
||||
if (props.data) {
|
||||
loading.value = true;
|
||||
// 文章详情
|
||||
getCmsArticle(Number(props.data?.articleId)).then((data) => {
|
||||
assignObject(form, data);
|
||||
if (data.content) {
|
||||
content.value = data.content;
|
||||
}
|
||||
|
||||
if (data.image) {
|
||||
images.value.push({
|
||||
uid: uuid(),
|
||||
url: data.image,
|
||||
status: 'done'
|
||||
});
|
||||
}
|
||||
if (!data.source) {
|
||||
form.source = undefined;
|
||||
}
|
||||
if (data.tags) {
|
||||
form.tags = JSON.parse(form.tags);
|
||||
} else {
|
||||
form.tags = undefined;
|
||||
}
|
||||
if (data.editor) {
|
||||
editor.value = data.editor;
|
||||
}
|
||||
if (data.files) {
|
||||
const arr = JSON.parse(data.files);
|
||||
arr.map((url: string) => {
|
||||
files.value.push({
|
||||
uid: uuid(),
|
||||
url: url,
|
||||
status: 'done'
|
||||
});
|
||||
});
|
||||
}
|
||||
loading.value = false;
|
||||
});
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
69
src/views/cms/help/components/search.vue
Normal file
69
src/views/cms/help/components/search.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space :size="10" style="flex-wrap: wrap">
|
||||
<a-input-search
|
||||
allow-clear
|
||||
placeholder="请输入关键词"
|
||||
style="width: 240px"
|
||||
v-model:value="where.keywords"
|
||||
@search="reload"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { watch } from 'vue';
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import type { CmsArticle, CmsArticleParam } from '@/api/cms/cmsArticle/model';
|
||||
import useSearch from '@/utils/use-search';
|
||||
import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: CmsArticle[];
|
||||
merchantId?: number;
|
||||
navigationList?: CmsNavigation[];
|
||||
categoryId?: number;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
// 表单数据
|
||||
const { where } = useSearch<CmsArticleParam>({
|
||||
articleId: undefined,
|
||||
model: undefined,
|
||||
categoryId: undefined,
|
||||
merchantId: undefined,
|
||||
keywords: '',
|
||||
sceneType: undefined,
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search', where?: CmsArticleParam): void;
|
||||
(e: 'add'): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'batchMove'): void;
|
||||
}>();
|
||||
|
||||
const reload = () => {
|
||||
emit('search', where);
|
||||
};
|
||||
|
||||
// 新增
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.merchantId,
|
||||
() => {
|
||||
if (props.categoryId) {
|
||||
where.categoryId = props.categoryId;
|
||||
}
|
||||
reload();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
384
src/views/cms/help/index.vue
Normal file
384
src/views/cms/help/index.vue
Normal file
@@ -0,0 +1,384 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="articleId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
:scroll="{ x: 1200 }"
|
||||
tool-class="ele-toolbar-form"
|
||||
class="sys-org-table"
|
||||
>
|
||||
<template #toolbar>
|
||||
<search
|
||||
@search="reload"
|
||||
:selection="selection"
|
||||
:navigationList="navigationList"
|
||||
:merchantId="merchantId"
|
||||
:categoryId="categoryId"
|
||||
@add="openEdit"
|
||||
@remove="removeBatch"
|
||||
@batchMove="openMove"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'title'">
|
||||
<span class="text-black">{{ record.title }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'image'">
|
||||
<a-image
|
||||
:src="record.image"
|
||||
:width="50"
|
||||
fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'pdfUrl'">
|
||||
<a-button type="primary" @click="openUrl(record.pdfUrl)">立即下载</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<ArticleEdit
|
||||
v-model:visible="showEdit"
|
||||
:navigationList="navigationList"
|
||||
:categoryList="categoryList"
|
||||
:categoryId="categoryId"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref, watch } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import {
|
||||
CheckOutlined,
|
||||
CloseOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { 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 ArticleEdit from './components/articleEdit.vue';
|
||||
import {
|
||||
pageCmsArticle,
|
||||
removeCmsArticle,
|
||||
removeBatchCmsArticle,
|
||||
updateCmsArticle
|
||||
} from '@/api/cms/cmsArticle';
|
||||
import type { CmsArticle, CmsArticleParam } from '@/api/cms/cmsArticle/model';
|
||||
import { formatNumber } from 'ele-admin-pro/es';
|
||||
import router from '@/router';
|
||||
import { toTreeData } from 'ele-admin-pro';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import {detail, getPageTitle, openUrl} from '@/utils/common';
|
||||
import { listCmsNavigation } from '@/api/cms/cmsNavigation';
|
||||
import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
|
||||
import { CmsArticleCategory } from '@/api/cms/cmsArticleCategory/model';
|
||||
import { listCmsArticleCategory } from '@/api/cms/cmsArticleCategory';
|
||||
import { getCmsWebsiteSetting } from '@/api/cms/cmsWebsiteSetting';
|
||||
import { useWebsiteSettingStore } from '@/store/modules/setting';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
// 表格选中数据
|
||||
const selection = ref<CmsArticle[]>([]);
|
||||
// 当前编辑数据
|
||||
const current = ref<CmsArticle | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
const showMove = ref(false);
|
||||
// 店铺ID
|
||||
const merchantId = ref<number>();
|
||||
// 栏目ID
|
||||
const categoryId = ref<number>();
|
||||
// 栏目数据
|
||||
const navigationList = ref<CmsNavigation[]>();
|
||||
// 文章分类
|
||||
const categoryList = ref<CmsArticleCategory[]>();
|
||||
// 是否显示二维码
|
||||
const showQrcode = ref(false);
|
||||
// 网站设置信息
|
||||
const setting = useWebsiteSettingStore();
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
if (categoryId.value) {
|
||||
where.categoryId = categoryId.value;
|
||||
}
|
||||
where.model = 'help';
|
||||
return pageCmsArticle({
|
||||
...where,
|
||||
...orders,
|
||||
page,
|
||||
limit
|
||||
});
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
// {
|
||||
// title: 'ID',
|
||||
// dataIndex: 'articleId',
|
||||
// key: 'articleId',
|
||||
// align: 'center',
|
||||
// width: 90
|
||||
// },
|
||||
// {
|
||||
// title: '封面图',
|
||||
// dataIndex: 'image',
|
||||
// key: 'image',
|
||||
// width: 120,
|
||||
// align: 'center'
|
||||
// },
|
||||
{
|
||||
title: '标题',
|
||||
dataIndex: 'title',
|
||||
key: 'title'
|
||||
},
|
||||
{
|
||||
title: '立即下载',
|
||||
dataIndex: 'pdfUrl',
|
||||
key: 'pdfUrl'
|
||||
},
|
||||
// {
|
||||
// title: '栏目名称',
|
||||
// dataIndex: 'categoryName',
|
||||
// key: 'categoryName',
|
||||
// width: 120,
|
||||
// align: 'center'
|
||||
// },
|
||||
// {
|
||||
// title: '所属栏目',
|
||||
// dataIndex: 'categoryId',
|
||||
// key: 'categoryId',
|
||||
// align: 'center',
|
||||
// hideInTable: true
|
||||
// },
|
||||
// {
|
||||
// title: '实际阅读量',
|
||||
// dataIndex: 'actualViews',
|
||||
// key: 'actualViews',
|
||||
// sorter: true,
|
||||
// width: 120,
|
||||
// align: 'center'
|
||||
// },
|
||||
// {
|
||||
// title: '虚拟阅读量',
|
||||
// dataIndex: 'virtualViews',
|
||||
// key: 'virtualViews',
|
||||
// width: 120,
|
||||
// align: 'center',
|
||||
// hideInTable: true
|
||||
// },
|
||||
// {
|
||||
// title: '推荐',
|
||||
// dataIndex: 'recommend',
|
||||
// key: 'recommend',
|
||||
// sorter: true,
|
||||
// width: 120,
|
||||
// align: 'center'
|
||||
// },
|
||||
// {
|
||||
// title: '状态',
|
||||
// dataIndex: 'status',
|
||||
// key: 'status',
|
||||
// sorter: true,
|
||||
// width: 120,
|
||||
// align: 'center'
|
||||
// },
|
||||
// {
|
||||
// title: '排序号',
|
||||
// dataIndex: 'sortNumber',
|
||||
// key: 'sortNumber',
|
||||
// sorter: true,
|
||||
// width: 120,
|
||||
// align: 'center'
|
||||
// },
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||||
}
|
||||
// {
|
||||
// title: '操作',
|
||||
// key: 'action',
|
||||
// width: 180,
|
||||
// fixed: 'right',
|
||||
// align: 'center',
|
||||
// hideInSetting: true
|
||||
// }
|
||||
]);
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: CmsArticleParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ where: where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: CmsArticle) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 打开批量移动弹窗 */
|
||||
const openMove = () => {
|
||||
showMove.value = true;
|
||||
};
|
||||
|
||||
// 分享二维码
|
||||
const onShare = (row?: CmsArticle) => {
|
||||
const data = {
|
||||
isMobile: true,
|
||||
...row
|
||||
};
|
||||
data.qrcode = `${detail(data)}`;
|
||||
data.url = `${detail(row)}`;
|
||||
current.value = data ?? null;
|
||||
showQrcode.value = true;
|
||||
};
|
||||
|
||||
const onUpdate = (row?: CmsArticle) => {
|
||||
const status = row?.status == 0 ? 1 : 0;
|
||||
updateCmsArticle({ ...row, status }).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
const onRecommend = (row: CmsArticle) => {
|
||||
updateCmsArticle({
|
||||
...row,
|
||||
recommend: row.recommend == 1 ? 0 : 1
|
||||
}).then((msg) => {
|
||||
message.success(msg);
|
||||
reload();
|
||||
});
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: CmsArticle) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeCmsArticle(row.articleId)
|
||||
.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);
|
||||
removeBatchCmsArticle(selection.value.map((d) => d.articleId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: CmsArticle) => {
|
||||
return {
|
||||
// 行点击事件
|
||||
onClick: () => {
|
||||
// openEdit(record);
|
||||
},
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 加载栏目数据
|
||||
if (!navigationList.value) {
|
||||
listCmsNavigation({}).then((res) => {
|
||||
navigationList.value = toTreeData({
|
||||
data: res?.map((d) => {
|
||||
d.value = d.navigationId;
|
||||
d.label = d.title;
|
||||
if (!d.component) {
|
||||
d.disabled = true;
|
||||
}
|
||||
if (
|
||||
d.model == 'index' ||
|
||||
d.model == 'page' ||
|
||||
d.model == 'order' ||
|
||||
d.model == 'links'
|
||||
) {
|
||||
d.disabled = true;
|
||||
}
|
||||
return d;
|
||||
}),
|
||||
idField: 'navigationId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 加载文章分类
|
||||
if (!categoryList.value) {
|
||||
listCmsArticleCategory({}).then((res) => {
|
||||
categoryList.value = toTreeData({
|
||||
data: res?.map((d) => {
|
||||
d.value = d.categoryId;
|
||||
d.label = d.title;
|
||||
return d;
|
||||
}),
|
||||
idField: 'categoryId',
|
||||
parentIdField: 'parentId'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => router.currentRoute.value.query,
|
||||
(query) => {
|
||||
if (query) {
|
||||
categoryId.value = Number(query.id);
|
||||
reload();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'CmsArticleV2'
|
||||
};
|
||||
</script>
|
||||
60
src/views/cms/photo/components/Extra.vue
Normal file
60
src/views/cms/photo/components/Extra.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<!-- 搜索表单 -->
|
||||
<template>
|
||||
<a-space
|
||||
style="flex-wrap: wrap"
|
||||
v-if="hasRole('superAdmin') || hasRole('admin') || hasRole('foundation')"
|
||||
>
|
||||
<a-button type="text" @click="openUrl('/website/photo')">图片 </a-button>
|
||||
<a-button type="text" @click="openUrl('/website/video')">视频 </a-button>
|
||||
<a-button type="text" @click="openUrl('/website/file')">文件 </a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { watch, nextTick } from 'vue';
|
||||
import { CmsWebsite } from '@/api/cms/cmsWebsite/model';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { removeSiteInfoCache } from '@/api/cms/cmsWebsite';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 选中的角色
|
||||
selection?: [];
|
||||
website?: CmsWebsite;
|
||||
count?: 0;
|
||||
}>(),
|
||||
{}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'add'): void;
|
||||
}>();
|
||||
|
||||
const add = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
// 清除缓存
|
||||
const clearSiteInfoCache = () => {
|
||||
removeSiteInfoCache(
|
||||
'SiteInfo:' + localStorage.getItem('TenantId') + '*'
|
||||
).then((msg) => {
|
||||
if (msg) {
|
||||
message.success(msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
nextTick(() => {
|
||||
if (localStorage.getItem('NotActive')) {
|
||||
// IsActive.value = false
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.selection,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
276
src/views/cms/photo/components/photo-edit.vue
Normal file
276
src/views/cms/photo/components/photo-edit.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<!-- 角色编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="600"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '编辑' : '上传文件'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
okText="保存"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="上传文件" name="fileName" v-if="!isUpdate">
|
||||
<span
|
||||
class="ele-text-success"
|
||||
v-if="fileName"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
{{ fileName }}
|
||||
</span>
|
||||
<a-upload
|
||||
:show-upload-list="false"
|
||||
:accept="'video/*'"
|
||||
v-if="!fileName"
|
||||
:customRequest="onUpload"
|
||||
>
|
||||
<a-button type="primary" class="ele-btn-icon">
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
<span>上传文件</span>
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
<a-form-item label="设置分组" name="name">
|
||||
<DictSelect
|
||||
dict-code="groupId"
|
||||
:width="200"
|
||||
:show-search="true"
|
||||
placeholder="按分组筛选"
|
||||
v-model:value="form.groupId"
|
||||
@done="chooseGroupId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="文件名称" name="name">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入文件名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="描述" name="comments">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="图片描述"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
<div style="margin-bottom: 22px">
|
||||
<a-divider orientation="left">图片分享</a-divider>
|
||||
</div>
|
||||
<a-form-item label="图片URL链接">
|
||||
<a-input v-model:value="share.url" @click="copyText(share.url)" />
|
||||
</a-form-item>
|
||||
<a-form-item label="网页代码(HTML)">
|
||||
<a-input v-model:value="share.html" @click="copyText(share.html)" />
|
||||
</a-form-item>
|
||||
<a-form-item label="Markdown">
|
||||
<a-input
|
||||
v-model:value="share.Markdown"
|
||||
@click="copyText(share.Markdown)"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="论坛BBCode">
|
||||
<a-input v-model:value="share.bbCode" @click="copyText(share.bbCode)" />
|
||||
</a-form-item>
|
||||
|
||||
<!-- <a-form-item label="封面图" name="images">-->
|
||||
<!-- <ele-image-upload-->
|
||||
<!-- v-model:value="images"-->
|
||||
<!-- :limit="1"-->
|
||||
<!-- :drag="true"-->
|
||||
<!-- :item-style="{ width: '60px', height: '60px' }"-->
|
||||
<!-- :accept="'image/*'"-->
|
||||
<!-- :upload-handler="uploadHandler"-->
|
||||
<!-- @upload="onUpload"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import type { FileRecord } from '@/api/system/file/model';
|
||||
import { messageLoading } from 'ele-admin-pro';
|
||||
import { addFiles, updateFiles, uploadFile } from '@/api/system/file';
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { RuleObject } from 'ant-design-vue/es/form';
|
||||
import { copyText } from '@/utils/common';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
import DictSelect from '@/components/DictSelect/index.vue';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: FileRecord | null;
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
const fileName = ref('');
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
// 图片资源分享
|
||||
const share = ref({
|
||||
url: '',
|
||||
Markdown: '',
|
||||
html: '',
|
||||
bbCode: ''
|
||||
});
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<FileRecord>({
|
||||
id: 0,
|
||||
name: '',
|
||||
comments: '',
|
||||
groupId: undefined,
|
||||
groupName: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
fileName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请上传文件',
|
||||
type: 'string',
|
||||
trigger: 'blur',
|
||||
validator: async (_rule: RuleObject) => {
|
||||
if (!isUpdate.value && fileName.value.length == 0) {
|
||||
return Promise.reject('请上传文件');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入文件名称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 上传文件
|
||||
const onUpload = (item) => {
|
||||
const { file } = item;
|
||||
if (!file.type.startsWith('video')) {
|
||||
message.error('文件格式不正确！');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 100) {
|
||||
message.error('大小不能超过 100MB');
|
||||
return;
|
||||
}
|
||||
const hide = messageLoading({
|
||||
content: '上传中..',
|
||||
duration: 0,
|
||||
mask: true
|
||||
});
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
hide();
|
||||
fileName.value = String(data.name);
|
||||
// images.value.push({
|
||||
// uid: data.id,
|
||||
// url: FILE_THUMBNAIL + data.path,
|
||||
// status: 'done'
|
||||
// });
|
||||
message.success('上传成功');
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
hide();
|
||||
});
|
||||
};
|
||||
|
||||
const chooseGroupId = (item: DictData) => {
|
||||
form.groupId = item.dictDataId;
|
||||
form.groupName = item.dictDataName;
|
||||
console.log(form, '>>>>>>>last');
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateFiles : addFiles;
|
||||
saveOrUpdate(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields(props.data);
|
||||
// 图片分享代码
|
||||
share.value.url = `${props.data.path}`;
|
||||
share.value.html = `<a href="${props.data.path}"><img src="${props.data.path}" alt="${props.data.name}" border="0" /></a>`;
|
||||
share.value.Markdown = `[](${props.data.path})`;
|
||||
share.value.bbCode = `[url=${props.data.path}][img]${props.data.path}[/img][/url]`;
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
178
src/views/cms/photo/dict/components/dict-edit.vue
Normal file
178
src/views/cms/photo/dict/components/dict-edit.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<!-- 分类编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
:width="460"
|
||||
:visible="visible"
|
||||
:confirm-loading="loading"
|
||||
:title="isUpdate ? '修改分类' : '添加分类'"
|
||||
:body-style="{ paddingBottom: '8px' }"
|
||||
@update:visible="updateVisible"
|
||||
@ok="save"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
|
||||
:wrapper-col="
|
||||
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
||||
"
|
||||
>
|
||||
<a-form-item label="分类标识" name="dictCode">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
disabled
|
||||
placeholder="请输入分类标识"
|
||||
v-model:value="form.dictCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="分类名称" name="dictDataName">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
placeholder="请输入分类名称"
|
||||
v-model:value="form.dictDataName"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sortNumber">
|
||||
<a-input-number
|
||||
:min="0"
|
||||
:max="99999"
|
||||
class="ele-fluid"
|
||||
placeholder="请输入排序号"
|
||||
v-model:value="form.sortNumber"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注">
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
placeholder="请输入备注"
|
||||
v-model:value="form.comments"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { addDictData, updateDictData } from '@/api/system/dict-data';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
import { removeSiteInfoCache } from '@/api/cms/cmsWebsite';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
// 修改回显的数据
|
||||
data?: DictData | null;
|
||||
// 字典ID
|
||||
dictId?: number | 0;
|
||||
}>();
|
||||
|
||||
//
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 是否是修改
|
||||
const isUpdate = ref(false);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const { form, resetFields, assignFields } = useFormData<DictData>({
|
||||
dictId: undefined,
|
||||
dictDataId: undefined,
|
||||
dictDataName: '',
|
||||
dictCode: 'groupId',
|
||||
dictDataCode: '',
|
||||
sortNumber: 100,
|
||||
comments: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
dictDataCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分类名称',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
dictCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分类标识',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 保存编辑 */
|
||||
const save = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
const saveOrUpdate = isUpdate.value ? updateDictData : addDictData;
|
||||
form.dictDataCode = form.dictDataName;
|
||||
form.dictId = props.dictId;
|
||||
saveOrUpdate(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
// 清除字典缓存
|
||||
removeSiteInfoCache(form.dictCode + ':' + form.tenantId);
|
||||
updateVisible(false);
|
||||
emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 更新visible */
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
if (props.data) {
|
||||
assignFields(props.data);
|
||||
isUpdate.value = true;
|
||||
} else {
|
||||
isUpdate.value = false;
|
||||
}
|
||||
} else {
|
||||
resetFields();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
210
src/views/cms/photo/dict/index.vue
Normal file
210
src/views/cms/photo/dict/index.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false">
|
||||
<!-- 表格 -->
|
||||
<ele-pro-table
|
||||
ref="tableRef"
|
||||
row-key="dictDataId"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:customRow="customRow"
|
||||
:scroll="{ x: 800 }"
|
||||
cache-key="proSystemRoleTable"
|
||||
>
|
||||
<template #toolbar>
|
||||
<a-space>
|
||||
<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
<span>新建</span>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="openEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
title="确定要删除此分类吗？"
|
||||
@confirm="remove(record)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</a-card>
|
||||
<!-- 编辑弹窗 -->
|
||||
<dict-edit
|
||||
v-model:visible="showEdit"
|
||||
:dictId="dictId"
|
||||
:data="current"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import {
|
||||
PlusOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
DatasourceFunction,
|
||||
ColumnItem
|
||||
} from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { messageLoading } from 'ele-admin-pro/es';
|
||||
import DictEdit from './components/dict-edit.vue';
|
||||
import {
|
||||
pageDictData,
|
||||
removeDictData,
|
||||
removeDictDataBatch
|
||||
} from '@/api/system/dict-data';
|
||||
import { DictParam } from '@/api/system/dict/model';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
import { addDict, listDictionaries } from '@/api/system/dict';
|
||||
import { Dictionary } from '@/api/system/dictionary/model';
|
||||
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const dictId = ref(0);
|
||||
|
||||
// 表格列配置
|
||||
const columns = ref<ColumnItem[]>([
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'dictDataId',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '分类名称',
|
||||
dataIndex: 'dictDataName',
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'comments',
|
||||
sorter: true,
|
||||
showSorterTooltip: false
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'sortNumber'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
align: 'center'
|
||||
}
|
||||
]);
|
||||
|
||||
// 表格选中数据
|
||||
const selection = ref<DictData[]>([]);
|
||||
|
||||
// 当前编辑数据
|
||||
const current = ref<Dictionary | null>(null);
|
||||
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
// 表格数据源
|
||||
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
|
||||
where.dictCode = 'groupId';
|
||||
return pageDictData({ ...where, ...orders, page, limit });
|
||||
};
|
||||
|
||||
/* 搜索 */
|
||||
const reload = (where?: DictParam) => {
|
||||
selection.value = [];
|
||||
tableRef?.value?.reload({ page: 1, where });
|
||||
};
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: DictData) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: DictData) => {
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
removeDictData(row.dictDataId)
|
||||
.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 = messageLoading('请求中..', 0);
|
||||
removeDictDataBatch(selection.value.map((d) => d.dictDataId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化字典
|
||||
const loadDict = () => {
|
||||
listDictionaries({ dictCode: 'groupId' }).then(async (data) => {
|
||||
if (data?.length == 0) {
|
||||
await addDict({ dictCode: 'groupId', dictName: '工单分类' });
|
||||
}
|
||||
await listDictionaries({ dictCode: 'groupId' }).then((list) => {
|
||||
list?.map((d) => {
|
||||
dictId.value = Number(d.dictId);
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
loadDict();
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: DictData) => {
|
||||
return {
|
||||
onDblclick: () => {
|
||||
openEdit(record);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'GroupIdDict'
|
||||
};
|
||||
</script>
|
||||
141
src/views/cms/photo/image.vue
Normal file
141
src/views/cms/photo/image.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<a-row :gutter="20">
|
||||
<a-col
|
||||
v-for="(item, index) in data"
|
||||
:key="index"
|
||||
v-bind="
|
||||
styleResponsive
|
||||
? { xl: 4, lg: 8, md: 12, sm: 12, xs: 24 }
|
||||
: { span: 6 }
|
||||
"
|
||||
>
|
||||
<a-card
|
||||
:bordered="false"
|
||||
hoverable
|
||||
style="margin-top: 16px"
|
||||
v-if="item"
|
||||
>
|
||||
<template #cover>
|
||||
<!-- 文件类型 -->
|
||||
<template v-if="!isImage(item.path)">
|
||||
<span
|
||||
class="ele-text-secondary ele-text-center"
|
||||
style="padding: 20px 0"
|
||||
>[文件]</span
|
||||
>
|
||||
</template>
|
||||
<template v-else-if="item.path.indexOf('https://oss') == 0">
|
||||
<a-image
|
||||
:src="`${item.path}`"
|
||||
:preview="{
|
||||
src: `${item.downloadUrl}`
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-image :src="`https://file.jimeigroup.cn${item.path}`" alt="" />
|
||||
</template>
|
||||
</template>
|
||||
<a-card-meta :title="item.name" @click="openEdit(item)">
|
||||
<template #description>
|
||||
<div
|
||||
class="project-list-desc"
|
||||
v-if="item.comments"
|
||||
:title="item.comments"
|
||||
>
|
||||
{{ item.comments }}
|
||||
</div>
|
||||
</template>
|
||||
</a-card-meta>
|
||||
<div class="ele-cell">
|
||||
<div
|
||||
class="ele-cell-content ele-text-secondary"
|
||||
@click="openEdit(item)"
|
||||
>
|
||||
{{ timeAgo(item.createTime) }}
|
||||
</div>
|
||||
<a-tooltip :title="item.createNickname" placement="top">
|
||||
<a-avatar
|
||||
:src="item.avatar"
|
||||
size="smal/down/webshop_v2.2.5.tar.gzl"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 编辑弹窗 -->
|
||||
<PhotoEdit v-model:visible="showEdit" :data="current" @done="query" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { FileRecord, FileRecordParam } from '@/api/system/file/model';
|
||||
import PhotoEdit from './components/photo-edit.vue';
|
||||
import { timeAgo } from 'ele-admin-pro';
|
||||
import { isImage } from '@/utils/common';
|
||||
|
||||
const props = defineProps<{
|
||||
// 搜索关键字
|
||||
searchText: string;
|
||||
// 搜索条件
|
||||
where?: FileRecordParam | null;
|
||||
// 修改回显的数据
|
||||
data?: FileRecord[] | [];
|
||||
}>();
|
||||
|
||||
// 当前编辑数据
|
||||
const current = ref<FileRecord | null>(null);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done'): void;
|
||||
}>();
|
||||
|
||||
/* 打开编辑弹窗 */
|
||||
const openEdit = (row?: FileRecord) => {
|
||||
current.value = row ?? null;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const query = () => {
|
||||
emit('done');
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
console.log(visible);
|
||||
} else {
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'PhotoImage'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.project-list-desc {
|
||||
height: 44px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
174
src/views/cms/photo/index.vue
Normal file
174
src/views/cms/photo/index.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
|
||||
<template #extra>
|
||||
<Extra />
|
||||
</template>
|
||||
<a-space style="margin-bottom: 10px" v-if="activeKey == '2'">
|
||||
<a-upload
|
||||
:show-upload-list="false"
|
||||
:accept="'image/*,application/*'"
|
||||
:customRequest="onUpload"
|
||||
>
|
||||
<a-button key="1" type="primary" class="ele-btn-icon">
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
<span>上传图片</span>
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<a-input-search
|
||||
allow-clear
|
||||
style="width: 360px"
|
||||
v-model:value="searchText"
|
||||
placeholder="请输入关键词"
|
||||
key="2"
|
||||
@search="query"
|
||||
@pressEnter="query"
|
||||
>
|
||||
<template #addonBefore>
|
||||
<a-select
|
||||
v-model:value="type"
|
||||
style="width: 100px; margin: -5px -12px"
|
||||
>
|
||||
<a-select-option value="name">文件名称</a-select-option>
|
||||
<a-select-option value="createNickname"> 上传人 </a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-input-search>
|
||||
<SelectDict
|
||||
dict-code="groupId"
|
||||
:placeholder="`按分组筛选`"
|
||||
style="width: 200px"
|
||||
v-model:value="where.groupName"
|
||||
@done="chooseGroupId"
|
||||
/>
|
||||
</a-space>
|
||||
<template v-if="activeKey === '2'">
|
||||
<Image :data="data" :where="where" @done="query" />
|
||||
<div class="ele-text-center" style="margin-top: 38px">
|
||||
<a-pagination
|
||||
:total="count"
|
||||
v-model:current="page"
|
||||
v-model:page-size="limit"
|
||||
show-quick-jumper
|
||||
:show-total="(total) => `共 ${total} 条`"
|
||||
@change="query"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="activeKey === '1'">
|
||||
<List :data="data" :where="where" />
|
||||
</template>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { FileRecord, FileRecordParam } from '@/api/system/file/model';
|
||||
import Image from './image.vue';
|
||||
import List from './list.vue';
|
||||
import { messageLoading } from 'ele-admin-pro';
|
||||
import { pageFiles, uploadFile } from '@/api/system/file';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { DictData } from '@/api/system/dict-data/model';
|
||||
import { getMerchantId } from '@/utils/merchant';
|
||||
import { getPageTitle } from '@/utils/common';
|
||||
import Extra from './components/Extra.vue';
|
||||
|
||||
const type = ref('name');
|
||||
const searchText = ref('');
|
||||
const data = ref<FileRecord[] | any>([]);
|
||||
// 当前选项卡
|
||||
const activeKey = ref('1');
|
||||
// 第几页
|
||||
const page = ref(1);
|
||||
// 每页多少条
|
||||
const limit = ref(12);
|
||||
// 总数量
|
||||
const count = ref(0);
|
||||
// 搜索表单
|
||||
const where = reactive<FileRecordParam>({
|
||||
name: '',
|
||||
createNickname: '',
|
||||
groupId: undefined,
|
||||
groupName: undefined
|
||||
});
|
||||
|
||||
/* 搜索 */
|
||||
const chooseGroupId = (item: DictData) => {
|
||||
console.log(item);
|
||||
where.groupId = item.dictDataId;
|
||||
where.groupName = item.dictDataName;
|
||||
query();
|
||||
};
|
||||
|
||||
/* 查询数据 */
|
||||
const query = () => {
|
||||
console.log('query()');
|
||||
if (type.value == 'name') {
|
||||
where.name = searchText.value;
|
||||
}
|
||||
if (type.value == 'createNickname') {
|
||||
where.createNickname = searchText.value;
|
||||
}
|
||||
where.page = page.value;
|
||||
where.limit = limit.value;
|
||||
where.merchantId = getMerchantId();
|
||||
// where.contentType = 'image';
|
||||
const hide = messageLoading('请求中..', 0);
|
||||
pageFiles(where).then((res) => {
|
||||
count.value = Number(res?.count);
|
||||
data.value = res?.list;
|
||||
hide();
|
||||
});
|
||||
};
|
||||
|
||||
query();
|
||||
|
||||
// 上传文件
|
||||
const onUpload = (item) => {
|
||||
const { file } = item;
|
||||
if (!file.type.startsWith('image')) {
|
||||
message.error('只能选择图片');
|
||||
return;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 10) {
|
||||
message.error('大小不能超过 10MB');
|
||||
return;
|
||||
}
|
||||
const hide = messageLoading({
|
||||
content: '上传中..',
|
||||
duration: 0,
|
||||
mask: true
|
||||
});
|
||||
uploadFile(file)
|
||||
.then((data) => {
|
||||
hide();
|
||||
message.success('上传成功');
|
||||
query();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
hide();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'PhotoIndex'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.project-list-desc {
|
||||
height: 44px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user