|
@@ -1,4 +1,4 @@
|
|
|
-<script setup lang="ts">
|
|
|
+<script lang="ts" setup>
|
|
|
import { reactive, ref, computed, inject, watch, onMounted, nextTick } from 'vue';
|
|
|
import { VXETable, VxeGridInstance, VxeGridProps, VxeGridEvents } from 'vxe-table';
|
|
|
import dayjs from 'dayjs';
|
|
@@ -11,8 +11,9 @@ import {
|
|
|
postCreateMonthData, getMonthTaskData, getWeekTaskData, postUpdateDayData, postUpdateWeekData, postUpdateMonthData
|
|
|
} from '/src/views/reportManage/dataCenter/api';
|
|
|
import { dayColumns, weekColumns, monthColumns } from '../../utils/columns';
|
|
|
-import { ComponentSize, FormInstance, FormRules } from 'element-plus';
|
|
|
+import { ComponentSize, ElMessage, FormInstance, FormRules } from 'element-plus';
|
|
|
import enLocale from 'element-plus/es/locale/lang/en';
|
|
|
+import Selector from '/@/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
|
|
|
|
|
|
dayjs.extend(isoWeek);
|
|
|
|
|
@@ -138,21 +139,21 @@ const formSize = ref<ComponentSize>('default');
|
|
|
const dayFormVisible = ref(false);
|
|
|
const taskDataFormRef = ref<FormInstance>();
|
|
|
const taskDataForm = reactive({
|
|
|
- sales: 0,
|
|
|
- ad_sales: 0,
|
|
|
- ad_cost: 0,
|
|
|
- total_sales_current_monthly: 0,
|
|
|
- impression: 0,
|
|
|
- ad_click: 0,
|
|
|
- ad_order: 0,
|
|
|
- money_by_amazon: 0,
|
|
|
- money_by_other: 0,
|
|
|
+ sales: null,
|
|
|
+ ad_sales: null,
|
|
|
+ ad_cost: null,
|
|
|
+ total_sales_current_monthly: null,
|
|
|
+ impression: null,
|
|
|
+ ad_click: null,
|
|
|
+ ad_order: null,
|
|
|
+ money_by_amazon: null,
|
|
|
+ money_by_other: null,
|
|
|
session: '',
|
|
|
order: '',
|
|
|
- availableSalesDay: 0,
|
|
|
- intransitInventory: 0,
|
|
|
- overseasStorage: 0,
|
|
|
- refundRate: 0,
|
|
|
+ availableSalesDay: null,
|
|
|
+ intransitInventory: null,
|
|
|
+ overseasStorage: null,
|
|
|
+ refundRate: null,
|
|
|
});
|
|
|
|
|
|
const resetForm = (formEl: FormInstance | undefined) => {
|
|
@@ -170,7 +171,7 @@ const rules = reactive<FormRules>({
|
|
|
money_by_amazon: [{required: true, message: '请输入亚马逊佣金', trigger: 'blur'}],
|
|
|
money_by_other: [{required: true, message: '请输入其他佣金', trigger: 'blur'}],
|
|
|
session: [{required: true, message: '请输入会话数', trigger: 'blur'}],
|
|
|
- order: [{required: true, message: '请输入订单数', trigger: 'blur'}],
|
|
|
+ order: [{required: true, message: '请输入转化', trigger: 'blur'}],
|
|
|
availableSalesDay: [{required: true, message: '请输入可用销量天数', trigger: 'blur'}],
|
|
|
intransitInventory: [{required: true, message: '请输入在途库存', trigger: 'blur'}],
|
|
|
overseasStorage: [{required: true, message: '请输入海外仓库存', trigger: 'blur'}],
|
|
@@ -209,7 +210,7 @@ interface RowVO {
|
|
|
const xGrid = ref<VxeGridInstance<RowVO>>();
|
|
|
const gridOptions = reactive({
|
|
|
border: false,
|
|
|
- height: 600,
|
|
|
+ height: 900,
|
|
|
align: null,
|
|
|
round: true,
|
|
|
loading: false,
|
|
@@ -226,7 +227,7 @@ const gridOptions = reactive({
|
|
|
enabled: true,
|
|
|
total: 20,
|
|
|
currentPage: 1,
|
|
|
- pageSize: 10,
|
|
|
+ pageSize: 20,
|
|
|
pageSizes: [10, 20, 30],
|
|
|
},
|
|
|
editConfig: {
|
|
@@ -350,6 +351,7 @@ function fetchCurrentTaskData() {
|
|
|
|
|
|
const editEvent = async (row: RowVO) => {
|
|
|
taskId = row.task;
|
|
|
+ // console.log('row', taskId);
|
|
|
currentId = row.id;
|
|
|
Object.assign(taskDataForm, row);
|
|
|
dayFormVisible.value = true;
|
|
@@ -357,6 +359,14 @@ const editEvent = async (row: RowVO) => {
|
|
|
|
|
|
//创建日数据
|
|
|
async function createDayData() {
|
|
|
+ if (
|
|
|
+ isNaN(parseFloat(taskDataForm.sales)) ||
|
|
|
+ isNaN(parseFloat(taskDataForm.ad_sales)) ||
|
|
|
+ isNaN(parseFloat(taskDataForm.ad_cost))
|
|
|
+ ) {
|
|
|
+ ElMessage.warning('销售额、广告销售额、广告花费必须为数字');
|
|
|
+ return; // 停止执行后续操作
|
|
|
+ }
|
|
|
const body = {
|
|
|
sales: taskDataForm.sales,
|
|
|
ad_sales: taskDataForm.ad_sales,
|
|
@@ -372,6 +382,7 @@ async function createDayData() {
|
|
|
dayFormVisible.value = false;
|
|
|
await fetchDayTaskData();
|
|
|
await VXETable.modal.message({content: '创建成功', status: 'success'});
|
|
|
+ taskDataFormRef.value.resetFields();
|
|
|
}
|
|
|
} catch (e) {
|
|
|
await VXETable.modal.message({content: '创建失败', status: 'error'});
|
|
@@ -384,6 +395,7 @@ async function createDayData() {
|
|
|
|
|
|
//创建周数据
|
|
|
async function createWeekData() {
|
|
|
+
|
|
|
const body = {
|
|
|
sales: taskDataForm.sales,
|
|
|
total_sales_current_monthly: taskDataForm.total_sales_current_monthly,
|
|
@@ -415,6 +427,7 @@ async function createWeekData() {
|
|
|
dayFormVisible.value = false;
|
|
|
await fetchWeekTaskData();
|
|
|
await VXETable.modal.message({content: '创建成功', status: 'success'});
|
|
|
+ taskDataFormRef.value.resetFields();
|
|
|
}
|
|
|
} catch (e) {
|
|
|
await VXETable.modal.message({content: '创建失败', status: 'error'});
|
|
@@ -447,6 +460,7 @@ async function createMonthData() {
|
|
|
dayFormVisible.value = false;
|
|
|
await fetchMonthTaskData();
|
|
|
await VXETable.modal.message({content: '创建成功', status: 'success'});
|
|
|
+ taskDataFormRef.value.resetFields();
|
|
|
}
|
|
|
} catch (e) {
|
|
|
await VXETable.modal.message({content: '创建失败', status: 'error'});
|
|
@@ -471,7 +485,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
|
|
|
if (dateType === 'month') {
|
|
|
await createMonthData();
|
|
|
}
|
|
|
- taskDataFormRef.value.resetFields();
|
|
|
+ // taskDataFormRef.value.resetFields();
|
|
|
}
|
|
|
});
|
|
|
};
|
|
@@ -610,15 +624,15 @@ const currentGridOptions = computed(() => {
|
|
|
});
|
|
|
|
|
|
const filteredDayColumns = computed(() => {
|
|
|
- return dayColumns.value.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作'].includes(item.title));
|
|
|
+ return dayColumns.value.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营'].includes(item.title));
|
|
|
});
|
|
|
|
|
|
const filteredWeekColumns = computed(() => {
|
|
|
- return weekColumns.value.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作'].includes(item.title));
|
|
|
+ return weekColumns.value.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营'].includes(item.title));
|
|
|
});
|
|
|
|
|
|
const filteredMonthColumns = computed(() => {
|
|
|
- return monthColumns.value.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作'].includes(item.title));
|
|
|
+ return monthColumns.value.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营'].includes(item.title));
|
|
|
});
|
|
|
|
|
|
onMounted(() => {
|
|
@@ -628,90 +642,93 @@ onMounted(() => {
|
|
|
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-card class="custom-card-style flex gap-1.5 justify-between my-1.5 mx-2">
|
|
|
- <div class="demo-date-picker" v-if="dateType === 'day'">
|
|
|
- <div class="block">
|
|
|
- <span class="demonstration">日录入数据时间:</span>
|
|
|
- <el-date-picker
|
|
|
- v-model="dailyEntryTime"
|
|
|
- type="Date"
|
|
|
- :disabled-date="disabledDate"
|
|
|
- :shortcuts="shortcuts"
|
|
|
- @change="handleDayChange"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="block">
|
|
|
- <span class="demonstration">日数据时间:</span>
|
|
|
- <el-date-picker
|
|
|
- v-model="dailyTime"
|
|
|
- type="Date"
|
|
|
- :shortcuts="shortcuts"
|
|
|
- disabled
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="demo-date-picker" v-if="dateType === 'week'">
|
|
|
- <el-config-provider :locale="enLocale">
|
|
|
- <div class="block">
|
|
|
- <span class="demonstration">周录入数据时间:</span>
|
|
|
- <el-date-picker
|
|
|
- v-model="weeklyEntryTime"
|
|
|
- type="week"
|
|
|
- :format="entryFormat"
|
|
|
- placeholder="选择一周"
|
|
|
- :disabled-date="disabledDate"
|
|
|
- @change="handleWeekChange"
|
|
|
- />
|
|
|
+ <el-card class="custom-card-style justify-between my-1.5 mx-2" >
|
|
|
+ <div class="custom-card-style flex gap-1.5 justify-between my-1.5 mx-2" >
|
|
|
+ <!--<Selector ref="selectorRef" @update:updateData="updateDataChange" />-->
|
|
|
+ <div v-if="dateType === 'day'" class="demo-date-picker">
|
|
|
+ <div class="block">
|
|
|
+ <span class="demonstration">日数据时间:</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dailyTime"
|
|
|
+ :shortcuts="shortcuts"
|
|
|
+ disabled
|
|
|
+ type="Date"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="block">
|
|
|
+ <span class="demonstration">日录入数据时间:</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dailyEntryTime"
|
|
|
+ :disabled-date="disabledDate"
|
|
|
+ :shortcuts="shortcuts"
|
|
|
+ type="Date"
|
|
|
+ @change="handleDayChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="block">
|
|
|
- <span class="demonstration">周销售数据时间:</span>
|
|
|
- <el-date-picker
|
|
|
- v-model="weeklySalesTime"
|
|
|
- type="week"
|
|
|
- :format="salesFormat"
|
|
|
- placeholder="选择一周"
|
|
|
- disabled
|
|
|
- />
|
|
|
+ <div v-if="dateType === 'week'" class="demo-date-picker">
|
|
|
+ <el-config-provider :locale="enLocale">
|
|
|
+ <div class="block">
|
|
|
+ <span class="demonstration">周广告数据时间:</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="weeklyAdTime"
|
|
|
+ :format="adFormat"
|
|
|
+ disabled
|
|
|
+ placeholder="选择一周"
|
|
|
+ type="week"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="block">
|
|
|
+ <span class="demonstration">周销售数据时间:</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="weeklySalesTime"
|
|
|
+ :format="salesFormat"
|
|
|
+ disabled
|
|
|
+ placeholder="选择一周"
|
|
|
+ type="week"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="block">
|
|
|
+ <span class="demonstration">周录入数据时间:</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="weeklyEntryTime"
|
|
|
+ :disabled-date="disabledDate"
|
|
|
+ :format="entryFormat"
|
|
|
+ placeholder="选择一周"
|
|
|
+ type="week"
|
|
|
+ @change="handleWeekChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-config-provider>
|
|
|
</div>
|
|
|
- <div class="block">
|
|
|
- <span class="demonstration">周广告数据时间:</span>
|
|
|
- <el-date-picker
|
|
|
- v-model="weeklyAdTime"
|
|
|
- type="week"
|
|
|
- :format="adFormat"
|
|
|
- placeholder="选择一周"
|
|
|
- disabled
|
|
|
- />
|
|
|
- </div>
|
|
|
- </el-config-provider>
|
|
|
- </div>
|
|
|
- <div class="demo-date-picker" v-if="dateType === 'month'">
|
|
|
- <div class="block">
|
|
|
- <span class="demonstration">月录入数据时间:</span>
|
|
|
- <el-date-picker
|
|
|
- v-model="monthlyEntryTime"
|
|
|
- type="month"
|
|
|
- :format="monthlyEntryFormat"
|
|
|
- placeholder="选择月份"
|
|
|
- @change="handleMonthChange"
|
|
|
- :disabled-date="disabledDate"
|
|
|
- />
|
|
|
+ <div v-if="dateType === 'month'" class="demo-date-picker">
|
|
|
+ <div class="block">
|
|
|
+ <span class="demonstration">月录入数据时间:</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="monthlyEntryTime"
|
|
|
+ :disabled-date="disabledDate"
|
|
|
+ :format="monthlyEntryFormat"
|
|
|
+ placeholder="选择月份"
|
|
|
+ type="month"
|
|
|
+ @change="handleMonthChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
<el-card class="mx-2">
|
|
|
<div style="position: relative">
|
|
|
- <vxe-grid ref="xGrid" v-bind="currentGridOptions" v-on="gridEvents" stripe>
|
|
|
+ <vxe-grid ref="xGrid" stripe v-bind="currentGridOptions" v-on="gridEvents">
|
|
|
<template #operate="{ row }">
|
|
|
<template v-if="hasActiveEditRow(row)">
|
|
|
- <el-button @click="clearRowEvent" size="small" link>取消</el-button>
|
|
|
- <el-button @click="editRowEvent(row)" size="small" link type="warning">保存</el-button>
|
|
|
+ <el-button link size="small" @click="clearRowEvent">取消</el-button>
|
|
|
+ <el-button link size="small" type="warning" @click="editRowEvent(row)">保存</el-button>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <el-button @click="handelEditRow(row)" size="small" type="success" link :disabled="!row.id">更新</el-button>
|
|
|
+ <el-button :disabled="!row.id" link size="small" type="success" @click="handelEditRow(row)">修改</el-button>
|
|
|
</template>
|
|
|
- <el-button @click="editEvent(row)" size="small" type="primary" link :disabled="row.id">创建</el-button>
|
|
|
+ <el-button :disabled="row.id" link size="small" type="primary" @click="editEvent(row)">创建</el-button>
|
|
|
</template>
|
|
|
<template #sales_edit="{ row }">
|
|
|
<vxe-input v-model="row.sales"></vxe-input>
|
|
@@ -764,13 +781,13 @@ onMounted(() => {
|
|
|
<el-dialog v-model="dayFormVisible" title="创建任务" width="600">
|
|
|
<el-form
|
|
|
ref="taskDataFormRef"
|
|
|
- style="max-width: 600px"
|
|
|
:model="taskDataForm"
|
|
|
:rules="rules"
|
|
|
- label-width="auto"
|
|
|
:size="formSize"
|
|
|
label-position="top"
|
|
|
- status-icon>
|
|
|
+ label-width="auto"
|
|
|
+ status-icon
|
|
|
+ style="max-width: 600px">
|
|
|
<div v-if="dateType === 'day'">
|
|
|
<el-form-item v-for="item in filteredDayColumns" :key="item.field" :label="item.title" :prop="item.field">
|
|
|
<el-input v-model="taskDataForm[item.field]" :placeholder="`请输入${item.title}`" />
|
|
@@ -778,7 +795,7 @@ onMounted(() => {
|
|
|
</div>
|
|
|
<div v-if="dateType === 'week'" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px">
|
|
|
<el-form-item v-for="item in filteredWeekColumns" :key="item.field" :label="item.title" :prop="item.field">
|
|
|
- <el-input style="width: 100%" v-model="taskDataForm[item.field]" />
|
|
|
+ <el-input v-model="taskDataForm[item.field]" style="width: 100%" />
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
<div v-if="dateType === 'month'">
|
|
@@ -802,6 +819,7 @@ onMounted(() => {
|
|
|
width: 100%;
|
|
|
padding: 0;
|
|
|
flex-wrap: wrap;
|
|
|
+ flex-direction: row-reverse;
|
|
|
}
|
|
|
|
|
|
.demo-date-picker .block:last-child {
|