控制面板菜单
This commit is contained in:
parent
a1e9ef0ab4
commit
a237c730ed
66
src/views/content/ad/columns.ts
Normal file
66
src/views/content/ad/columns.ts
Normal file
@ -0,0 +1,66 @@
|
||||
import { h } from 'vue';
|
||||
import { ElAvatar } 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: 'cover',
|
||||
render(record) {
|
||||
return h(ElAvatar, {
|
||||
size: 48,
|
||||
src: record.row.cover,
|
||||
shape: 'square',
|
||||
fit: 'fill',
|
||||
});
|
||||
},
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
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: 'status',
|
||||
render(record) {
|
||||
return h('span', record.row.status === 1 ? '在用' : '停用')
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '创建人',
|
||||
prop: 'createUser',
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
},
|
||||
];
|
||||
175
src/views/content/ad/edit.vue
Normal file
175
src/views/content/ad/edit.vue
Normal file
@ -0,0 +1,175 @@
|
||||
<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" name="content" />
|
||||
</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="adSortId" class="flex-1"
|
||||
:rules="{ required: true, message: '请选择广告位', trigger: 'change' }">
|
||||
<el-select v-model="formData.adSortId" class="flex-1" clearable placeholder="请选择广告位">
|
||||
<el-option v-for="(item, index) in adSortList" :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-option label="推荐" :value="4"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="广告封面" prop="cover" :rules="{ required: true, message: '请上传广告封面', trigger: 'change' }">
|
||||
<UploadImg
|
||||
:fileType="['image/jpeg', 'image/png', 'image/jpg', 'image/gif']" name="ad" :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="url" :rules="{ required: true, message: '请输入广告链接', trigger: 'blur' }">
|
||||
<el-input v-model="formData.url" type="textarea" placeholder="请输入广告链接" />
|
||||
</el-form-item>
|
||||
<el-form-item label="广告宽度" prop="width"
|
||||
:rules="{ required: true, message: '请输入广告宽度', trigger: 'change' }">
|
||||
<number-input v-model="formData.width" placeholder="请输入广告宽度" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="广告高度" prop="height"
|
||||
:rules="{ required: true, message: '请输入广告高度', trigger: 'blur' }">
|
||||
<number-input v-model="formData.height" placeholder="请输入广告高度" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="广告时间" prop="adTime" class="flex-1" :rules="{ required: true, message: '请选择广告时间', trigger: 'change' }">
|
||||
<el-date-picker v-model="formData.adTime" value-format="YYYY-MM-DD HH:mm:ss" @change="timeChange" style="width:100%" type="datetimerange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</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="note" :rules="{ required: true, message: '请输入备注', trigger: 'blur' }">
|
||||
<el-input v-model="formData.note" type="textarea" placeholder="请输入广告描述" />
|
||||
</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="1">在用</el-radio>
|
||||
<el-radio v-model="formData.status" :label="2">停用</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 { adAdd, adUpdate, getAdDetail } from '@/api/content/ad';
|
||||
import { getAdSortAllList } from '@/api/content/adSort';
|
||||
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 } from "@/utils/auth";
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false
|
||||
},
|
||||
adId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
},
|
||||
searchParamData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
const adSortList = ref([])
|
||||
const adTime = ref([])
|
||||
const emit = defineEmits(["success", "update:visible"]);
|
||||
|
||||
const dialogTitle = computed(() => {
|
||||
return props.adId ? "编辑内容" : "新增内容";
|
||||
});
|
||||
|
||||
const fwbHeight = document.body.clientHeight - 180
|
||||
|
||||
const formData = reactive({
|
||||
id: "",
|
||||
title: "",
|
||||
adSortId: '',
|
||||
cover: '',
|
||||
type: '',
|
||||
note: '',
|
||||
content: '',
|
||||
url: '',
|
||||
width: "",
|
||||
height: "",
|
||||
adTime:[],
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
click: '',
|
||||
status: 1,
|
||||
sort: 0,
|
||||
});
|
||||
|
||||
const dialogClose = () => {
|
||||
emit("update:visible", false);
|
||||
};
|
||||
|
||||
const setFormData = async () => {
|
||||
const data = await getAdDetail(props.adId);
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
formData[key] = data[key];
|
||||
}
|
||||
}
|
||||
formData.adTime = [formData.startTime,formData.endTime]
|
||||
editorRef.value.myValue = formData.content
|
||||
};
|
||||
|
||||
const editorRef = ref()
|
||||
const handleSubmit = async () => {
|
||||
formData.startTime = formData.adTime.length>0?formData.adTime[0]:''
|
||||
formData.endTime = formData.adTime.length>0?formData.adTime[1]:''
|
||||
await formRef.value?.validate();
|
||||
let ruleForm = JSON.parse(JSON.stringify(formData));
|
||||
ruleForm.content = editorRef.value.myValue
|
||||
if (!ruleForm.content) {
|
||||
message("请添加文章内容", "error");
|
||||
return;
|
||||
}
|
||||
props.adId ? await adUpdate(ruleForm) : await adAdd(ruleForm);
|
||||
message("操作成功");
|
||||
emit("update:visible", false);
|
||||
emit("success");
|
||||
};
|
||||
|
||||
const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
|
||||
const getAllDict = async () => {
|
||||
let list = await getAdSortAllList();
|
||||
adSortList.value = list ? list : [];
|
||||
};
|
||||
onMounted(() => {
|
||||
getAllDict()
|
||||
if (props.adId) {
|
||||
setFormData();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
152
src/views/content/ad/index.vue
Normal file
152
src/views/content/ad/index.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<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" v-perm="['sys:ad:add']">
|
||||
<template #icon>
|
||||
<el-icon class="el-input__icon">
|
||||
<PlusOutlined />
|
||||
</el-icon>
|
||||
</template>
|
||||
添加广告
|
||||
</el-button>
|
||||
<el-button type="danger" @click="handleDelete()" :disabled="!selectionData.length" v-perm="['sys:ad:batchDelete']">
|
||||
<template #icon>
|
||||
<el-icon class="el-input__icon">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</template>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</el-card>
|
||||
|
||||
<editDialog
|
||||
v-if="editVisible"
|
||||
:adId="adId"
|
||||
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 { getAdList,adDelete,adBatchDelete } from '@/api/content/ad';
|
||||
import { columns } from './columns';
|
||||
import { PlusOutlined } from '@vicons/antd';
|
||||
import {message,confirm} from "@/utils/auth";
|
||||
const editDialog = defineAsyncComponent(() =>
|
||||
import('./edit.vue')
|
||||
)
|
||||
const adId =ref(0)
|
||||
const editVisible=ref(false)
|
||||
const selectionData = ref([])
|
||||
const tableRef = ref();
|
||||
const formParams = reactive({
|
||||
title:'',
|
||||
status:'',
|
||||
adSortId:''
|
||||
});
|
||||
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),
|
||||
auth: ['sys:ad:update'],
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
type: 'danger',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
auth: ['sys:ad:delete'],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const loadDataTable = async (res: any) => {
|
||||
const result = await getAdList({ ...formParams, ...res });
|
||||
return result;
|
||||
};
|
||||
|
||||
function reloadTable(noRefresh='') {
|
||||
tableRef.value.reload(noRefresh?{}:{pageNo:1});
|
||||
}
|
||||
const [register, {}] = useForm({
|
||||
labelWidth: 80,
|
||||
layout: 'horizontal',
|
||||
colProps: { span: 6 } as ColProps,
|
||||
submitOnReset:true,
|
||||
schemas
|
||||
});
|
||||
function handleSubmit(values: Recordable) {
|
||||
handleReset()
|
||||
for (const key in values) {
|
||||
formParams[key] = values[key]
|
||||
}
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
for (const key in formParams) {
|
||||
formParams[key] ='';
|
||||
}
|
||||
}
|
||||
const handleAdd = async () => {
|
||||
adId.value=0
|
||||
await nextTick();
|
||||
editVisible.value=true
|
||||
};
|
||||
|
||||
const handleEdit = async (record: Recordable) => {
|
||||
adId.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 adDelete(record.row.id):await adBatchDelete(ids);
|
||||
message("删除成功");
|
||||
reloadTable()
|
||||
}
|
||||
function onSelectionChange(value){
|
||||
selectionData.value = value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -15,10 +15,8 @@
|
||||
<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 label="页面位置" prop="location" class="flex-1" :rules="{ required: true, message: '请输入页面位置', trigger: 'blur' }">
|
||||
<number-input v-model="formData.location" placeholder="请输入页面位置" />
|
||||
</el-form-item>
|
||||
<el-form-item label="广告位类型" prop="type"
|
||||
:rules="{ required: true, message: '请选择广告位类型', trigger: 'change' }">
|
||||
|
||||
@ -85,8 +85,8 @@
|
||||
<div class="pt-1">
|
||||
<CountTo
|
||||
:startVal="1"
|
||||
v-if="visits"
|
||||
:endVal="visits.dayVisits"
|
||||
v-if="!visits"
|
||||
:endVal="14465"
|
||||
class="text-2xl"
|
||||
/>
|
||||
</div>
|
||||
@ -115,8 +115,8 @@
|
||||
<CountTo
|
||||
prefix="￥"
|
||||
:startVal="1"
|
||||
v-if="saleroom"
|
||||
:endVal="saleroom.weekSaleroom"
|
||||
v-if="!saleroom"
|
||||
:endVal="32719"
|
||||
class="text-2xl"
|
||||
/>
|
||||
</div>
|
||||
@ -142,8 +142,8 @@
|
||||
<div class="pt-1">
|
||||
<CountTo
|
||||
:startVal="1"
|
||||
v-if="orderLarge"
|
||||
:endVal="orderLarge.weekLarge"
|
||||
v-if="!orderLarge"
|
||||
:endVal="46829"
|
||||
class="text-2xl"
|
||||
/>
|
||||
</div>
|
||||
@ -172,8 +172,8 @@
|
||||
<CountTo
|
||||
prefix="￥"
|
||||
:startVal="1"
|
||||
v-if="volume"
|
||||
:endVal="volume.weekLarge"
|
||||
v-if="!volume"
|
||||
:endVal="41071"
|
||||
class="text-2xl"
|
||||
/>
|
||||
</div>
|
||||
@ -374,11 +374,11 @@
|
||||
const volume = ref<TypeOrderLarge>();
|
||||
|
||||
onMounted(async () => {
|
||||
const res: TypeConsole = await getConsoleInfo();
|
||||
visits.value = res.visits;
|
||||
saleroom.value = res.saleroom;
|
||||
orderLarge.value = res.orderLarge;
|
||||
volume.value = res.volume;
|
||||
// const res: TypeConsole = await getConsoleInfo();
|
||||
// visits.value = res.visits;
|
||||
// saleroom.value = res.saleroom;
|
||||
// orderLarge.value = res.orderLarge;
|
||||
// volume.value = res.volume;
|
||||
loading.value = false;
|
||||
});
|
||||
|
||||
@ -379,11 +379,11 @@
|
||||
];
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await getConsoleInfo();
|
||||
info.saleroom = res.saleroom;
|
||||
info.orderLarge = res.orderLarge;
|
||||
info.visits = res.visits;
|
||||
info.volume = res.volume;
|
||||
// const res = await getConsoleInfo();
|
||||
// info.saleroom = res.saleroom;
|
||||
// info.orderLarge = res.orderLarge;
|
||||
// info.visits = res.visits;
|
||||
// info.volume = res.volume;
|
||||
loading.value = false;
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user