添加广告组合

src/components/DateRange/index.vue → src/components/DateRangePicker/index.vue

@@ -20,6 +20,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import dayjs, { Dayjs } from 'dayjs'
+import { start } from 'nprogress';
 
 const props = defineProps<{timezone: string}>()
 
@@ -27,9 +28,9 @@ const dateRangeValue = ref([])
 
 
 function disabledDate(datetime: Date) {
-  const now = dayjs(new Date()).startOf('day')
-  const now_tz = now.tz(props.timezone)
-  return now_tz.isSameOrBefore(dayjs(datetime).tz(props.timezone))
+  const now = dayjs(new Date()).tz(props.timezone)
+  const now_tz = now.startOf("day")
+  return now_tz.isBefore(dayjs(datetime).tz(props.timezone))
 }
 
 function tzFormat(dt_tz: Dayjs) {

src/views/adManage/portfolios/api.ts

@@ -0,0 +1,42 @@
+import { request } from '/@/utils/service';
+import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import XEUtils from 'xe-utils';
+
+export const apiPrefix = '/api/ad_manage/portfolios/';
+export function GetList(query: PageQuery) {
+    return request({
+        url: apiPrefix,
+        method: 'get',
+        params: query,
+    })
+}
+export function GetObj(id: InfoReq) {
+    return request({
+        url: apiPrefix + id,
+        method: 'get',
+    });
+}
+
+export function AddObj(obj: AddReq) {
+    return request({
+        url: apiPrefix,
+        method: 'post',
+        data: obj,
+    });
+}
+
+export function UpdateObj(obj: EditReq) {
+    return request({
+        url: apiPrefix + obj.id + '/',
+        method: 'put',
+        data: obj,
+    });
+}
+
+export function DelObj(id: DelReq) {
+    return request({
+        url: apiPrefix + id + '/',
+        method: 'delete',
+        data: { id },
+    });
+}

src/views/adManage/portfolios/crud.tsx

@@ -0,0 +1,125 @@
+import * as api from './api';
+import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
+import { inject, nextTick, ref } from 'vue';
+import { successMessage } from '/@/utils/message';
+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js';
+
+export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
+		return await api.GetList(query);
+	};
+	const editRequest = async ({ form, row }: EditReq) => {
+		form.id = row.id;
+		return await api.UpdateObj(form);
+	};
+	const delRequest = async ({ row }: DelReq) => {
+		return await api.DelObj(row.id);
+	};
+	const addRequest = async ({ form }: AddReq) => {
+		return await api.AddObj(form);
+	};
+
+	//权限判定
+	const hasPermissions = inject('$hasPermissions');
+
+	return {
+		crudOptions: {
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			rowHandle: {
+				fixed: 'right',
+				width: 80,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+            text: null
+						// show: hasPermissions('dictionary:Update'),
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+            text: null
+						// show: hasPermissions('dictionary:Delete'),
+					},
+					// custom: {
+					// 	text: '字典配置',
+					// 	type: 'text',
+					// 	// show: hasPermissions('dictionary:Update'),
+					// 	tooltip: {
+					// 		placement: 'top',
+					// 		content: '字典配置',
+					// 	},
+					// 	//@ts-ignore
+					// 	click: (ctx: any) => {
+					// 		const { row } = ctx;
+					// 		context!.subDictRef.value.drawer = true;
+					// 		nextTick(() => {
+					// 			context!.subDictRef.value.setSearchFormData({ form: { parent: row.id } });
+					// 			context!.subDictRef.value.doRefresh();
+					// 		});
+					// 	},
+					// },
+				},
+			},
+			columns: {
+				_index: {
+					title: '序号',
+					form: { show: false },
+					column: {
+						//type: 'index',
+						align: 'center',
+						width: '70px',
+						columnSetDisabled: true, //禁止在列设置中选择
+						formatter: (context) => {
+							//计算序号,你可以自定义计算规则，此处为翻页累加
+							let index = context.index ?? 1;
+							let pagination = crudExpose!.crudBinding.value.pagination;
+							// @ts-ignore
+							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+						},
+					},
+				},
+        name: {
+          title: '广告组合',
+          column: {
+            width: '150px'
+          }
+        },
+        state: {
+          title: '状态',
+          type: 'dict-select',
+          dict: dict({
+            data:[
+              {value:'enabled', label:'投放中'},
+              {value:'disable', label:'禁用'},
+            ] 
+          })
+        },
+        // servingStatus: {
+        //   title: ''
+        // },
+        budget_startDate: {
+          title: '开始日期'
+        },
+        budget_endDate: {
+          title: '结束日期'
+        },
+        budget_amount: {
+          title: '预算'
+        },
+        inBudget: {
+          title: '是否预算内'
+        },
+        ...BaseColumn
+			},
+		},
+	};
+};

src/views/adManage/portfolios/index.vue

@@ -0,0 +1,19 @@
+<template>
+	<fs-page>
+		<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+	</fs-page>
+</template>
+
+<script lang="ts" setup name="Portfolios">
+import { ref, onMounted, defineAsyncComponent } from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud';
+
+
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} });
+
+// 页面打开后获取列表数据
+onMounted(() => {
+	crudExpose.doRefresh();
+});
+</script>

src/views/adManage/sp/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <el-menu
+      :default-active="activeIndex"
+      :class="className"
+      mode="horizontal"
+      background-color="#FFFFFF"
+      @select="handleSelect"
+    >
+      <el-menu-item index="1">广告活动</el-menu-item>
+      <el-menu-item index="2">关键词投放</el-menu-item>
+      <el-menu-item index="3">商品投放</el-menu-item>
+      <el-menu-item index="4">搜索词</el-menu-item>
+      <el-menu-item index="5">广告位</el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, onMounted, onUnmounted} from 'vue'
+
+
+const className = ref('box-fixed')
+const activeIndex = ref('1')
+
+const handleSelect = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+</script>
+
+<style scoped>
+.box-fixed {
+  position: fixed;
+  top: 30;
+}
+</style>

src/views/adManage/utils/commonTabColumn.js

@@ -0,0 +1,36 @@
+export const BaseColumn = {
+  impressions: {
+    title: '曝光量'
+  },
+  clicks: {
+    title: '点击量'
+  },
+  ctr: {
+    title: '点击率'
+  },
+  spend: {
+    title: '花费'
+  },
+  cpc: {
+    title: '点击成本'
+  },
+  purchases: {
+    title: '订单量'
+  },
+  unitsOrdered: {
+    title: '销量'
+  },
+  sales: {
+    title: '销售额'
+  },
+  acos: {
+    title: 'ACOS'
+  },
+  roas: {
+    title: 'ROAS'
+  },
+  cpa: {
+    title: '订单成本'
+  }
+}
+

src/views/demo/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <DateRangePicker
+      timezone="America/Los_Angeles"
+      @change="changedValue">
+    </DateRangePicker>
+     {{ startDate }} To {{ endDate }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import DateRangePicker from '/@/components/DateRangePicker/index.vue'
+
+
+// let dateRangeVal = reactive([])
+const startDate = ref('')
+const endDate = ref('')
+
+function changedValue(value: string[]) {
+  // dateRangeVal = value
+  console.log(value[0], value[1])
+  startDate.value = value[0]
+  endDate.value = value[1]
+
+}
+
+</script>