gitadmin/wms-elevue
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文章、广告位

Browse Source
This commit is contained in:
陈红丽 2024-07-16 10:11:48 +08:00
parent 4e6a15994c
commit 3c6dc24f5e
12 changed files with 877 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/api/content/ad.ts Normal file
View File

@ -0,0 +1,60 @@
import { http } from '@/utils/http/axios';
/**
* @description: 列表
*/
export function getAdList(params?) {
return http.request({
url: '/ad/page',
method: 'GET',
params,
});
}
/**
* @description: 根据ID获取详情
*/
export function getAdDetail(adId) {
return http.request({
url: '/ad/detail/'+adId,
method: 'get',
});
}
/**
* @description: 添加
*/
export function adAdd(data:any) {
return http.request({
url: '/ad/add',
method: 'POST',
data,
});
}
/**
* @description: 更新
*/
export function adUpdate(data:any) {
return http.request({
url: '/ad/update',
method: 'PUT',
data
});
}
/**
* @description: 删除
*/
export function adDelete(adId) {
return http.request({
url: '/ad/delete/'+adId,
method: 'DELETE',
});
}
/**
* @description: 批量删除
*/
export function adBatchDelete(data:any) {
return http.request({
url: '/ad/batchDelete',
method: 'DELETE',
data
});
}

67
src/api/content/adSort.ts Normal file
View File

@ -0,0 +1,67 @@
import { http } from '@/utils/http/axios';
/**
* @description: 列表
*/
export function getAdSortList(params?) {
return http.request({
url: '/ad/sort/page',
method: 'GET',
params,
});
}
export function getAdSortAllList(params?) {
return http.request({
url: '/ad/sort/list',
method: 'GET',
params,
});
}
/**
* @description: 根据ID获取详情
*/
export function getAdSortDetail(adSortId) {
return http.request({
url: '/ad/sort/detail/'+adSortId,
method: 'get',
});
}
/**
* @description: 添加
*/
export function adSortAdd(data:any) {
return http.request({
url: '/ad/sort/add',
method: 'POST',
data,
});
}
/**
* @description: 更新
*/
export function adSortUpdate(data:any) {
return http.request({
url: '/ad/sort/update',
method: 'PUT',
data
});
}
/**
* @description: 删除
*/
export function adSortDelete(adSortId) {
return http.request({
url: '/ad/sort/delete/'+adSortId,
method: 'DELETE',
});
}
/**
* @description: 批量删除
*/
export function adSortBatchDelete(data:any) {
return http.request({
url: '/ad/sort/batchDelete',
method: 'DELETE',
data
});
}

2
src/components/Upload/Image.vue
View File

@ -122,8 +122,6 @@ interface UploadEmits {
(e: 'update:imageUrl', value: string): void,
(e: 'changeFileName', value: string): void;
}
const oImg=ref('')
const fileName=ref('')
const emit = defineEmits<UploadEmits>();
const loading=ref(false)
const progress=ref(0)

2
src/layout/components/Header/index.vue
View File

@ -384,7 +384,7 @@
const avatarSelect = (command) => {
switch (command) {
case '1':
router.push({ name: 'Setting' });
router.push({ path: '/setting/profile' });
break;
case '2':
doLogout();

49
src/views/content/adSort/columns.ts Normal file
View File

@ -0,0 +1,49 @@
import { h } from 'vue';
import { ElTag } from 'element-plus';
export const columns = [
{
type: 'selection',
},
{
label: '广告位名称',
prop: 'name',
},
{
label: '广告位编号',
prop: 'location',
},
{
label: '广告位类型',
prop: 'type',
render(record) {
let typeText = ''
switch (record.row.type) {
case 1:
typeText='网站'
break;
case 2:
typeText='手机站'
break;
case 3:
typeText='移动端'
break;
default:
break;
}
return h('span', typeText || '-');
},
},
{
label: '排序',
prop: 'sort',
},
{
label: '创建人',
prop: 'createUser',
},
{
label: '创建时间',
prop: 'createTime',
},
];

118
src/views/content/adSort/edit.vue Normal file
View File

@ -0,0 +1,118 @@
<template>
<el-dialog
v-model="props.visible"
:title="props.adSortId?'编辑':'新增'"
width="500"
:close-on-click-modal="false"
:before-close="dialogClose"
>
<el-form
class="ls-form"
ref="formRef"
:model="formData"
label-width="100px"
>
<el-form-item label="广告位名称" prop="name" :rules="{ required: true, message: '请输入广告位名称', trigger: 'blur' }">
<el-input v-model="formData.name" placeholder="请输入广告位名称"/>
</el-form-item>
<el-form-item label="页面位置" prop="location" class="flex-1" :rules="{ required: true, message: '请选择页面位置', trigger: 'change' }">
<el-select v-model="formData.location" class="flex-1" clearable placeholder="请选择页面位置">
<el-option v-for="(item, index) in locationList" :key="index" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="广告位类型" prop="type"
:rules="{ required: true, message: '请选择广告位类型', trigger: 'change' }">
<el-select
v-model="formData.type"
placeholder="请选择广告位类型"
>
<el-option label="网站" :value="1"></el-option>
<el-option label="手机站" :value="2"></el-option>
<el-option label="移动端" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="formData.sort" :max="9999" placeholder="请输入排序"/>
</el-form-item>
<el-form-item label="备注" prop="note" :rules="{ required: true, message: '请输入备注', trigger: 'blur' }">
<el-input v-model="formData.note" type="textarea" placeholder="请输入备注"/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogClose">取消</el-button>
<el-button :loading="subLoading" type="primary" @click="submit">
确定
</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import type {FormInstance} from "element-plus";
import {getAdSortDetail,adSortAdd,adSortUpdate} from "@/api/content/adSort";
import { getLayoutAllList } from '@/api/content/layout';
import {onMounted, reactive, shallowRef,ref} from "vue";
import {message} from "@/utils/auth";
import {useLockFn} from "@/utils/useLockFn";
const emit = defineEmits(["success", "update:visible"]);
const formRef = shallowRef<FormInstance>();
const formData = reactive({
id: "",
name:'',
location: "",
note:'',
type:'',
sort: 0
});
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false
},
adSortId: {
type: Number,
required: true,
default: 0
}
});
const locationList = ref([])
const handleSubmit = async () => {
await formRef.value?.validate();
props.adSortId ? await adSortUpdate(formData) : await adSortAdd(formData);
message("操作成功");
emit("update:visible", false);
emit("success");
};
const dialogClose = () => {
emit("update:visible", false);
};
const { isLock:subLoading,lockFn: submit } = useLockFn(handleSubmit);
const setFormData = async () => {
const data = await getAdSortDetail(props.adSortId);
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key];
}
}
};
const getAllDict = async () => {
let list = await getLayoutAllList();
locationList.value = list ? list : [];
};
onMounted(() => {
getAllDict()
if (props.adSortId) {
setFormData();
}
});
</script>

158
src/views/content/adSort/index.vue Normal file
View File

@ -0,0 +1,158 @@
<template>
<PageWrapper>
<el-card :bordered="false" class="pt-3 mb-3 proCard">
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset"></BasicForm>
</el-card>
<el-card :bordered="false" class="proCard">
<BasicTable
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="tableRef"
:actionColumn="actionColumn"
@selection-change="onSelectionChange"
>
<template #tableTitle>
<el-button type="primary" @click="handleAdd">
<template #icon>
<el-icon class="el-input__icon">
<PlusOutlined />
</el-icon>
</template>
添加广告位
</el-button>
<el-button type="danger" @click="handleDelete()" :disabled="!selectionData.length">
<template #icon>
<el-icon class="el-input__icon">
<Delete />
</el-icon>
</template>
删除
</el-button>
</template>
</BasicTable>
</el-card>
<editDialog
v-if="editVisible"
:adSortId="adSortId"
v-model:visible="editVisible"
@success="reloadTable"
>
</editDialog>
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, ref, h,nextTick,defineAsyncComponent } from 'vue';
import { ColProps } from 'element-plus';
import { schemas } from './querySchemas';
import { useForm } from '@/components/Form/index';
import { TableAction } from '@/components/Table';
import { getAdSortList,adSortDelete,adSortBatchDelete } from '@/api/content/adSort';
import { getLayoutAllList } from '@/api/content/layout';
import { columns } from './columns';
import { PlusOutlined } from '@vicons/antd';
import {message,confirm} from "@/utils/auth";
const editDialog = defineAsyncComponent(() =>
import('./edit.vue')
)
const adSortId =ref(0)
const editVisible=ref(false)
const selectionData = ref([])
const tableRef = ref();
const formParams = reactive({
name:'',
type:''
});
const actionColumn = reactive({
width: 250,
label: '操作',
prop: 'action',
fixed: 'right',
render(record) {
return h(TableAction, {
style: 'button',
actions: [
{
label: '编辑',
type: 'warning',
onClick: handleEdit.bind(null, record),
ifShow: () => {
return true;
},
// auth: ['sys:user:list'],
},
{
label: '删除',
type: 'danger',
onClick: handleDelete.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
// auth: ['basic_list'],
},
],
});
},
});
const loadDataTable = async (res: any) => {
const result = await getAdSortList({ ...formParams, ...res });
return result;
};
function reloadTable() {
tableRef.value.reload({pageNo:1});
}
const [register, {}] = useForm({
labelWidth: 80,
layout: 'horizontal',
colProps: { span: 6 } as ColProps,
submitOnReset:true,
schemas
});
function handleSubmit(values: Recordable) {
for (const key in formParams) {
if (values[key] != null && values[key] != undefined) {
formParams[key] = values[key];
}
}
reloadTable();
}
function handleReset() {
for (const key in formParams) {
formParams[key] ='';
}
}
const handleAdd = async () => {
adSortId.value=0
await nextTick();
editVisible.value=true
};
const handleEdit = async (record: Recordable) => {
adSortId.value=record.row.id
await nextTick();
editVisible.value=true
};
async function handleDelete(record: Recordable) {
let ids = []
if(!record){
ids = selectionData.value.map(({id}) => id);
}
await confirm('确定要删除？');
record? await adSortDelete(record.row.id):await adSortBatchDelete(ids);
message("删除成功");
reloadTable()
}
function onSelectionChange(value){
selectionData.value = value
}
</script>
<style lang="scss" scoped></style>

33
src/views/content/adSort/querySchemas.ts Normal file
View File

@ -0,0 +1,33 @@
import { FormSchema } from '@/components/Form/index';
export const schemas: FormSchema[] = [
{
field: 'name',
component: 'Input',
label: '名称',
componentProps: {
placeholder: '请输入广告位名称',
},
},
{
field: 'type',
component: 'Select',
label: '类型',
componentProps: {
placeholder: '请选择广告位类型',
options: [
{
label: '网站',
value: '1',
},
{
label: '手机站',
value: '2',
},
{
label: '移动端',
value: '3',
}
],
},
},
];

42
src/views/content/article/columns.ts Normal file
View File

@ -0,0 +1,42 @@
import { h } from 'vue';
import { ElTag } from 'element-plus';
export const columns = [
{
type: 'selection',
},
{
label: '文章标题',
prop: 'title',
render(record) {
return h('a', {
href: 'http://www.baidu.com',
target:"_blank"
},record.row.title);
},
},
{
label: '文章分类',
prop: 'categoryName',
},
// {
// label: '文章链接',
// value:'articelLink',
// isSlot:true,
// },
{
label: '文章状态',
prop: 'status',
render(record) {
return h('span', record.row.status === 1 ? '下架' : '正常')
},
},
{
label: '创建人',
prop: 'createUser',
},
{
label: '创建时间',
prop: 'createTime',
},
];

160
src/views/content/article/edit.vue Normal file
View File

@ -0,0 +1,160 @@
<template>
<el-dialog
v-model="props.visible"
:title="dialogTitle"
:width="'1350px'"
:close-on-click-modal="false"
:before-close="dialogClose"
style="margin-top:15px;"
>
<el-form style="display: flex" ref="formRef" :model="formData" label-width="80px">
<div style="width: 880px;flex: none" :style="{height:fwbHeight+'px'}">
<el-form-item label-width="0px" prop="content">
<Editor ref="editorRef" :height="fwbHeight"/>
</el-form-item>
</div>
<div style="flex:1;margin-left: 10px">
<el-form-item
label="文章标题"
prop="title"
:rules="{ required: true,message: '请输入文章标题', trigger: 'blur' }"
>
<el-input placeholder="请输入文章标题" :maxlength="50" v-model="formData.title"></el-input>
</el-form-item>
<el-form-item label="文章分类" prop="categoryId" :rules="{ required: true, message: '请选择文章分类', trigger: 'change' }">
<el-tree-select
v-model="formData.categoryId"
:data="categoryList"
:render-after-expand="false"
:check-strictly="true"
:props="{ value: 'id',label: 'name'}"
/>
</el-form-item>
<el-form-item
label="文章封面"
prop="cover"
:rules="{ required: true,message: '请上传文章封面', trigger: 'change' }"
>
<UploadImg @changeFileName="(name)=>formData.coverImgName=name"
:fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
name="article"
:fileSize="200"
v-model:image-url="formData.cover">
<template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
</UploadImg>
</el-form-item>
<el-form-item label="导读" prop="intro" :rules="{ required: true, message: '请输入导读', trigger: 'blur' }">
<el-input placeholder="请输入" v-model="formData.intro" type="textarea"></el-input>
</el-form-item>
<el-form-item label="点击率" prop="click" :rules="{ required: true, message: '请输入点击率', trigger: 'blur' }">
<number-input v-model="formData.click" placeholder="请输入点击率" clearable />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="formData.sort" :max="9999" placeholder="请输入排序"/>
</el-form-item>
<el-form-item label="状态">
<el-radio v-model="formData.status" :label="0">正常</el-radio>
<el-radio v-model="formData.status" :label="1">下架</el-radio>
</el-form-item>
</div>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogClose">取消</el-button>
<el-button :loading="subLoading" type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { getCategoryList } from '@/api/content/category';
import { articleAdd,articleUpdate,getArticleDetail } from '@/api/content/article';
import {computed, onMounted,ref,shallowRef,reactive } from "vue";
import {FormInstance} from "element-plus";
const formRef = shallowRef<FormInstance>();
import UploadImg from "@/components/Upload/Image.vue";
import {useLockFn} from "@/utils/useLockFn";
import Editor from '@/components/Editor/tinymce.vue'
import {message,buildTree} from "@/utils/auth";
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false
},
articleId: {
type: Number,
required: true,
default: 0
},
searchParamData: {
type: Object,
default: {}
}
});
const categoryList = ref([])
const emit = defineEmits(["success", "update:visible"]);
const dialogTitle = computed(() => {
return props.articleId ? "编辑内容" : "新增内容";
});
const fwbHeight=document.body.clientHeight -180
const formData = reactive({
id:"",
categoryId: "",
title: "",
cover:'',
intro:'',
content:'',
status:0,
click:'',
sort:0
});
const dialogClose = () => {
emit("update:visible", false);
};
const setFormData = async (row: any) => {
const data = await getArticleDetail(props.articleId);
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
formData[key] = data[key];
}
}
editorRef.value.myValue=formData.content
};
const editorRef=ref()
const handleSubmit = async () => {
await formRef.value?.validate();
let ruleForm = JSON.parse(JSON.stringify(formData));
ruleForm.content=editorRef.value.myValue
if (!ruleForm.content) {
message("请添加文章内容","error");
return;
}
props.articleId ? await articleUpdate(ruleForm) : await articleAdd(ruleForm);
message("操作成功");
emit("update:visible", false);
emit("success");
};
const {isLock: subLoading, lockFn: submit} = useLockFn(handleSubmit);
const getAllDict = async () => {
let list = await getCategoryList();
categoryList.value = list ? buildTree(list) : [];
};
onMounted(() => {
getAllDict()
if(props.articleId){
setFormData();
}
});
</script>

160
src/views/content/article/index.vue Normal file
View File

@ -0,0 +1,160 @@
<template>
<PageWrapper>
<el-card :bordered="false" class="pt-3 mb-3 proCard">
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset"></BasicForm>
</el-card>
<el-card :bordered="false" class="proCard">
<BasicTable
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="tableRef"
:actionColumn="actionColumn"
@selection-change="onSelectionChange"
>
<template #articelLink="{scope}">
<a class="down-a" target="_blank" :href="scope.row.cover">{{scope.row.title}}</a>
</template>
<template #tableTitle>
<el-button type="primary" @click="handleAdd">
<template #icon>
<el-icon class="el-input__icon">
<PlusOutlined />
</el-icon>
</template>
添加文章
</el-button>
<el-button type="danger" @click="handleDelete()" :disabled="!selectionData.length">
<template #icon>
<el-icon class="el-input__icon">
<Delete />
</el-icon>
</template>
删除
</el-button>
</template>
</BasicTable>
</el-card>
<editDialog
v-if="editVisible"
:articleId="articleId"
v-model:visible="editVisible"
@success="reloadTable"
>
</editDialog>
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, ref, h,nextTick,defineAsyncComponent } from 'vue';
import { ColProps } from 'element-plus';
import { schemas } from './querySchemas';
import { useForm } from '@/components/Form/index';
import { TableAction } from '@/components/Table';
import { getArticleList,articleDelete,articleBatchDelete } from '@/api/content/article';
import { columns } from './columns';
import { PlusOutlined } from '@vicons/antd';
import {message,confirm} from "@/utils/auth";
const editDialog = defineAsyncComponent(() =>
import('./edit.vue')
)
const articleId =ref(0)
const editVisible=ref(false)
const selectionData = ref([])
const tableRef = ref();
const formParams = reactive({
title:'',
status:''
});
const actionColumn = reactive({
width: 250,
label: '操作',
prop: 'action',
fixed: 'right',
render(record) {
return h(TableAction, {
style: 'button',
actions: [
{
label: '编辑',
type: 'warning',
onClick: handleEdit.bind(null, record),
ifShow: () => {
return true;
},
// auth: ['basic_list'],
},
{
label: '删除',
type: 'danger',
onClick: handleDelete.bind(null, record),
// 根据业务控制是否显示 isShow 和 auth 是并且关系
ifShow: () => {
return true;
},
// 根据权限控制是否显示: 有权限，会显示，支持多个
// auth: ['basic_list'],
},
],
});
},
});
const loadDataTable = async (res: any) => {
const result = await getArticleList({ ...formParams, ...res });
return result;
};
function reloadTable() {
tableRef.value.reload({pageNo:1});
}
const [register, {}] = useForm({
labelWidth: 80,
layout: 'horizontal',
colProps: { span: 6 } as ColProps,
submitOnReset:true,
schemas
});
function handleSubmit(values: Recordable) {
for (const key in formParams) {
if (values[key] != null && values[key] != undefined) {
formParams[key] = values[key];
}
}
reloadTable();
}
function handleReset() {
for (const key in formParams) {
formParams[key] ='';
}
}
const handleAdd = async () => {
articleId.value=0
await nextTick();
editVisible.value=true
};
const handleEdit = async (record: Recordable) => {
articleId.value=record.row.id
await nextTick();
editVisible.value=true
};
async function handleDelete(record: Recordable) {
let ids = []
if(!record){
ids = selectionData.value.map(({id}) => id);
}
await confirm('确定要删除？');
record? await articleDelete(record.row.id):await articleBatchDelete(ids);
message("删除成功");
reloadTable()
}
function onSelectionChange(value){
selectionData.value = value
}
</script>
<style lang="scss" scoped></style>

29
src/views/content/article/querySchemas.ts Normal file
View File

@ -0,0 +1,29 @@
import { FormSchema } from '@/components/Form/index';
export const schemas: FormSchema[] = [
{
field: 'title',
component: 'Input',
label: '文章标题',
componentProps: {
placeholder: '请输入文章标题',
},
},
{
field: 'status',
component: 'Select',
label: '文章状态',
componentProps: {
placeholder: '请选择文章状态',
options: [
{
label: '下架',
value: '1',
},
{
label: '正常',
value: '0',
}
],
},
},
];