控制面板菜单

src/views/content/ad/columns.ts

@@ -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',
+  },
+];

src/views/content/ad/edit.vue

@@ -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>

src/views/content/ad/index.vue

@@ -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>

src/views/content/adSort/edit.vue

@@ -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-form-item label="页面位置" prop="location" class="flex-1" :rules="{ required: true, message: '请输入页面位置', trigger: 'blur' }">
-          <el-select v-model="formData.location" class="flex-1" clearable placeholder="请选择页面位置">
+          <number-input v-model="formData.location" 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' }">

src/views/dashboard/console/index.vue

@@ -85,8 +85,8 @@
                       <div class="pt-1">
                         <CountTo
                           :startVal="1"
-                          v-if="visits"
+                          v-if="!visits"
-                          :endVal="visits.dayVisits"
+                          :endVal="14465"
                           class="text-2xl"
                         />
                       </div>
@@ -115,8 +115,8 @@
                         <CountTo
                           prefix="￥"
                           :startVal="1"
-                          v-if="saleroom"
+                          v-if="!saleroom"
-                          :endVal="saleroom.weekSaleroom"
+                          :endVal="32719"
                           class="text-2xl"
                         />
                       </div>
@@ -142,8 +142,8 @@
                       <div class="pt-1">
                         <CountTo
                           :startVal="1"
-                          v-if="orderLarge"
+                          v-if="!orderLarge"
-                          :endVal="orderLarge.weekLarge"
+                          :endVal="46829"
                           class="text-2xl"
                         />
                       </div>
@@ -172,8 +172,8 @@
                         <CountTo
                           prefix="￥"
                           :startVal="1"
-                          v-if="volume"
+                          v-if="!volume"
-                          :endVal="volume.weekLarge"
+                          :endVal="41071"
                           class="text-2xl"
                         />
                       </div>
@@ -374,11 +374,11 @@
   const volume = ref<TypeOrderLarge>();
 
   onMounted(async () => {
-    const res: TypeConsole = await getConsoleInfo();
+    // const res: TypeConsole = await getConsoleInfo();
-    visits.value = res.visits;
+    // visits.value = res.visits;
-    saleroom.value = res.saleroom;
+    // saleroom.value = res.saleroom;
-    orderLarge.value = res.orderLarge;
+    // orderLarge.value = res.orderLarge;
-    volume.value = res.volume;
+    // volume.value = res.volume;
     loading.value = false;
   });
 

src/views/dashboard/monitor/index.vue

@@ -379,11 +379,11 @@
   ];
 
   onMounted(async () => {
-    const res = await getConsoleInfo();
+    // const res = await getConsoleInfo();
-    info.saleroom = res.saleroom;
+    // info.saleroom = res.saleroom;
-    info.orderLarge = res.orderLarge;
+    // info.orderLarge = res.orderLarge;
-    info.visits = res.visits;
+    // info.visits = res.visits;
-    info.volume = res.volume;
+    // info.volume = res.volume;
     loading.value = false;
   });