Skip to content

W
wangxiaolu-sfa-ui
提交 e44d957a authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

feat(bi/finance): 完成搜索条件和重置，以及表格工具隐藏列

同上
上级 0ec288fd
隐藏空白字符变更
内嵌 并排
正在显示 包含 246 行增加 和 70 行删除
src/api/bi/finance.js
浏览文件 @ e44d957a
import request from '@/utils/request'
import { parseTime } from '@/utils'
/**
* 直播间列表
* @returns
*/
export const getBrandListAPI = () => {
return request({
url: '/bi/finance/zbjType/list'
})
}
/**
* 口味列表
* @returns
*/
export const getTasteListAPI = () => {
return request({
url: '/bi/finance/flavor/list'
})
}
/**
* 规格列表
* @returns
*/
export const getSpecListAPI = () => {
return request({
url: '/bi/finance/spec/list'
})
}
/**
* 获取财务列表
......@@ -13,8 +45,10 @@ export const getFinanceListAPI = (data) => {
zbjQdType: data.brand,
flavor: data.taste,
specName: data.spec,
series: data.series,
goodsName: data.goods
series: data.seriesPrdMap.map(o => o[0]),
goodsName: data.seriesPrdMap.map(o => o[1]),
startDate: parseTime(data.date[0], `{y}-{m}-{d}`),
endDate: parseTime(data.date[1], `{y}-{m}-{d}`)
}
})
}
\ No newline at end of file
src/api/promotion/task.js
浏览文件 @ e44d957a
......@@ -32,7 +32,7 @@ export const getTaskListAPI = (queryParams) => {
url: promotionBaseURL + '/activity/employee/query/page',
headers: {
isToken: false,
'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IjAwMDUxNiIsInBhc3N3b3JkIjoid3hsMDAwNTE2IiwidGltZSI6MTczNjk5OTI0NzgwNH0.ftF5TFyKR4OxCXudYe3-7kUE2qlAYP6Ff51Uj2blhHo',
'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IjAwMDUxNiIsInBhc3N3b3JkIjoid3hsMDAwNTE2IiwidGltZSI6MTczNzA4MjM3ODQ0MX0.z8pOrprMgfOk5MGEKCL-KNokLgCPqDRt8suEYEnnQ-U',
},
method: 'POST',
data: {
......
src/hooks/date.js
浏览文件 @ e44d957a
......@@ -3,10 +3,10 @@
* @param {*} type 0：从今天开始往前，-1 则是 T - 1 开始日期往前
* @returns {}
*/
export const useDatePickerOptions = (type = -1) => {
export const useDatePickerOptions = (type = -1,) => {
const last30Date = [new Date().setDate((new Date().getDate() - (30 - 1))), new Date().setDate((new Date().getDate() + type))]
const last7Date = [new Date().setDate((new Date().getDate() - (7 - 1))), new Date().setDate((new Date().getDate() + type))]
const pickerOptions = ref([// 日期选项配置
const recentPickerOptions = ref([// 日期选项配置
{
text: '最近一周',
value() {
......@@ -25,9 +25,31 @@ export const useDatePickerOptions = (type = -1) => {
}
}
])
// 上个月/上一周的 pickerOptions
const lastPickerOptions = ref([
{
text: '上一月',
value() {
const end = new Date();
end.setDate(0); // 设置为上个月的最后一天
const start = new Date(end.getFullYear(), end.getMonth(), 1); // 设置为上个月的第一天
return [start, end];
}
},
{
text: '上一周',
value() {
const end = new Date();
end.setDate(end.getDate() - end.getDay()); // 设置为上一周的周日
const start = new Date(end.getFullYear(), end.getMonth(), end.getDate() - 6); // 设置为上一周的周一
return [start, end];
}
}
])
return {
last30Date,
last7Date,
pickerOptions
last30Date, // 前 30 天
last7Date, // 前 7 天
recentPickerOptions, // 最近一周/一月
lastPickerOptions
}
}
\ No newline at end of file
src/views/bi/competitor/cmm/index.vue
浏览文件 @ e44d957a
......@@ -66,7 +66,7 @@ import { useDatePickerOptions } from '@/hooks'
const loading = ref(true)
const brandList = ref([]) // 直播间列表
const typeList = ref(['销售额', '观看人次']) // 数据类型列表
const { pickerOptions, last30Date } = useDatePickerOptions() // 日期快捷方式
const { recentPickerOptions: pickerOptions, last30Date } = useDatePickerOptions() // 日期快捷方式
const queryParams = reactive({ // 查询表单
brandList: [],
......
src/views/bi/competitor/sycm_prd/index.vue
浏览文件 @ e44d957a
......@@ -80,7 +80,7 @@ import { useDatePickerOptions } from '@/hooks'
const loading = ref(true)
const prdList = ref([]) // 商品列表
const typeList = ref(['支付买家数', '交易增速', '独立访客范围', '流量增速']) // 数据类型
const { pickerOptions, last30Date } = useDatePickerOptions()
const { recentPickerOptions:pickerOptions, last30Date } = useDatePickerOptions()
const showType = ref('charts') // 展示类型（'charts' / 'table')
const dateMerge = ref(false) // 表格中日期是否合并
......@@ -120,7 +120,6 @@ const initChartsData = (data) => {
// 图表数据
data.forEach((list, index) => {
index = index * 4
console.log(list)
// list: 每个商品数据集合
// 公共的配置
let commonObj = {
......
src/views/bi/competitor/sycm_store/index.vue
浏览文件 @ e44d957a
......@@ -77,7 +77,7 @@ import { useDatePickerOptions } from '@/hooks'
const loading = ref(true)
const brandList = ref([]) // 店铺列表
const typeList = ref(['支付买家数', '交易增速', '独立访客范围', '流量增速']) // 数据类型
const { pickerOptions, last30Date } = useDatePickerOptions()
const { recentPickerOptions:pickerOptions, last30Date } = useDatePickerOptions()
const showType = ref('charts') // 展示类型（'charts' / 'table')
const dateMerge = ref(false) // 表格中日期是否合并
......
src/views/bi/finance/index.vue
浏览文件 @ e44d957a
......@@ -5,17 +5,19 @@
<el-form :model="queryParams"
label-position="right"
label-width="68px"
inline>
inline
v-show="showSearch">
<el-form-item label="直播间">
<el-select v-model="queryParams.brand"
multiple
clearable
filterable
collapse-tags
collapse-tags-tooltip
@change="getList">
<el-option v-for="str in brandList"
:label="str"
:value="str">
<el-option v-for="item in brandList"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
......@@ -23,12 +25,13 @@
<el-select v-model="queryParams.taste"
multiple
clearable
filterable
collapse-tags
collapse-tags-tooltip
@change="getList">
<el-option v-for="str in tasteList"
:label="str"
:value="str">
<el-option v-for="item in tasteList"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
......@@ -36,17 +39,29 @@
<el-select v-model="queryParams.spec"
multiple
clearable
filterable
collapse-tags
collapse-tags-tooltip
@change="getList">
<el-option v-for="str in specList"
:label="str"
:value="str">
<el-option v-for="item in specList"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="系列">
<el-select v-model="queryParams.series"
<el-form-item label="系列商品"
class="series">
<el-cascader v-model="queryParams.seriesPrdMap"
v-if="seriesList.length"
:options="seriesList"
:props="props"
:show-all-levels="false"
collapse-tags
collapse-tags-tooltip
clearable
filterable
@change="getList"></el-cascader>
<!-- <el-select v-model="queryParams.series"
multiple
clearable
collapse-tags
......@@ -56,9 +71,9 @@
:label="str"
:value="str">
</el-option>
</el-select>
</el-select> -->
</el-form-item>
<el-form-item label="商品">
<!-- <el-form-item label="商品">
<el-select v-model="queryParams.goods"
multiple
clearable
......@@ -70,8 +85,9 @@
:value="str">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="日期选择">
</el-form-item> -->
<el-form-item label="日期选择"
class="date_picker">
<el-date-picker v-model="queryParams.date"
type="daterange"
:clearable="false"
......@@ -79,22 +95,36 @@
start-placeholder="开始日期"
end-placeholder="结束日期"
:shortcuts="pickerOptions"
@change="queryChangeFn()">
@change="getList()">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button icon="Refresh"
@click="reset">
重置
</el-button>
</el-form-item>
</el-form>
<!-- 操作工具 -->
<el-row :gutter="10"
class="mb8">
<right-toolbar v-model:showSearch="showSearch"
@queryTable="getList"
:columns="columns">
</right-toolbar>
</el-row>
<!-- 数据 -->
<div>
<el-table :data="tableData"
border>
<el-table-column v-for="item in columns"
<el-table :data="tableData"
border>
<template v-for="item in columns">
<el-table-column v-if="item.visible"
:key="item.prop"
:label="item.label"
:prop="item.prop"
:formatter="formatter">
</el-table-column>
</el-table>
</div>
</template>
</el-table>
<!-- 订单详情 -->
<el-dialog v-model="detailVisible"
title="Shipping address"
......@@ -115,76 +145,161 @@
</template>
<script setup>
import { getFinanceListAPI } from '@/api'
import { getBrandListAPI, getTasteListAPI, getSpecListAPI, getSeriesListAPI, getProductListAPI, getFinanceListAPI } from '@/api'
import { useDatePickerOptions } from '@/hooks'
import { formatNumberWithUnit } from '@/utils'
const { pickerOptions } = useDatePickerOptions()
const { lastPickerOptions: pickerOptions } = useDatePickerOptions()
const showSearch = ref(true) // 搜索
const detailVisible = ref(false) // 详情
const brandList = ref(["虎皮01", "IP礼盒直播间", "礼盒直播间", "去骨直播间"]) // 直播间
const tasteList = ref(["香辣", "原味", "椒麻", "混合"]) // 口味
const specList = ref([]) // 规则
const seriesList = ref([]) // 系列
const goodsList = ref([]) // 商品
const data = reactive({
queryParams: {
brand: ["虎皮01", "IP礼盒直播间", "礼盒直播间", "去骨直播间"], // 直播间
taste: ["香辣", "原味", "椒麻", "混合"], // 口味
brand: [], // 直播间
taste: [], // 口味
spec: [], // 规格
series: [], // 系列
goods: [], // 商品
date: [] // 日期
// series: [], // 系列
// goods: [], // 商品
date: [], // 日期
seriesPrdMap: [] // 系列商品
}
})
const { queryParams } = toRefs(data)
const reset = () => {
queryParams.value = {
brand: [], // 直播间
taste: [], // 口味
spec: [], // 规格
date: [], // 日期
seriesPrdMap: [] // 系列商品
}
getList()
}
const queryChange = () => {
// 直播间列表
const brandList = ref([])
const getBrandList = async () => {
const response = await getBrandListAPI();
brandList.value = response.data.map(obj => {
return {
value: obj.zbjQdType,
label: obj.zbjQdType
};
});
};
getBrandList();
// 口味列表
const tasteList = ref([])
const getTasteList = async () => {
const response = await getTasteListAPI();
tasteList.value = response.data.map(obj => {
return {
value: obj.flavor,
label: obj.flavor
};
});
};
getTasteList();
// 规格列表
const specList = ref([])
const getSpecList = async () => {
const response = await getSpecListAPI();
specList.value = response.data.map(obj => {
return {
value: obj.spec,
label: obj.spec
};
});
};
getSpecList();
// 系列+商品列表
const seriesList = ref([])
const getSeriesList = async () => {
const response = await getSeriesListAPI();
seriesList.value = response.data.map(obj => {
return {
value: obj.seriesId,
label: obj.seriesName
};
});
};
getSeriesList();
const props = reactive({ // 级联选择器配置
multiple: true,
lazy: true,
async lazyLoad(node, resolve) {
const { value: seriesId } = node;
try {
const { data: { total } } = await getProductListAPI({ seriesId });
const { data: { rows } } = await getProductListAPI({ seriesId, pageNum: 1, pageSize: total });
const nodes = rows.map(item => ({
value: item.prdCode,
label: item.prdName,
leaf: true // 指定叶子节点
}));
resolve(nodes);
} catch (error) {
resolve([]);
}
}
})
}
// 表格数据
const columns = ref([
{
label: '直播间',
prop: 'zbjQdType'
prop: 'zbjQdType',
visible: true
},
{
label: '口味',
prop: 'flavorErp'
prop: 'flavorErp',
visible: true
},
{
label: '规格',
prop: 'specNameErp'
prop: 'specNameErp',
visible: true
},
{
label: '系列',
prop: ''
prop: 'a',
visible: true
},
{
label: '商品',
prop: 'goodsName'
prop: 'goodsName',
visible: true
},
{
label: '分摊后总价',
prop: 'shareAmountSum'
prop: 'shareAmountSum',
visible: true
},
{
label: '实际成本',
prop: 'actualCostSum'
prop: 'actualCostSum',
visible: true
},
{
label: '实际成本毛利',
prop: 'actualCostGrossProfitSum'
prop: 'actualCostGrossProfitSum',
visible: true
},
{
label: '标准成本',
prop: 'standardCostSum'
prop: 'standardCostSum',
visible: true
},
{
label: '标准成本毛利',
prop: 'standardCostGrossProfitSum'
prop: 'standardCostGrossProfitSum',
visible: true
}
])
const tableData = ref([
......@@ -197,7 +312,6 @@ getList()
const formatter = (row, column, value) => {
if (['shareAmountSum', 'actualCostSum', 'actualCostGrossProfitSum', 'standardCostSum', 'standardCostGrossProfitSum'].includes(column.property)) {
console.log(value)
return formatNumberWithUnit({ value, carry: false, fixed: 4, round: false, post: false, comma: true, des: '' })
} else {
return value
......@@ -292,8 +406,18 @@ const detailColumns = ref([
::v-deep(.el-form-item) {
width: 250px;
&:last-of-type {
&.date_picker {
width: 350px;
}
}
.series {
width: 460px !important;
::v-deep(.el-cascader) {
width: 460px !important;
}
}
</style>
\ No newline at end of file
src/views/bi/prd_tag/index.vue
浏览文件 @ e44d957a
......@@ -66,8 +66,7 @@
collapse-tags
collapse-tags-tooltip
clearable
filterable
popper-class="my_popper"></el-cascader>
filterable></el-cascader>
</el-form-item>
</el-form>
<template #footer>
......
src/views/bi/sale/index.vue
浏览文件 @ e44d957a
......@@ -349,7 +349,7 @@ const platformSalesObj = reactive({ // 平台销售数据对象（一套表图
xData: [], // 日期（用于 x 轴）
}
})
const { pickerOptions } = useDatePickerOptions()
const { recentPickerOptions: pickerOptions } = useDatePickerOptions()
const uploadDemandImportVisible = ref(false)
const uploadDemand = reactive({ // 上传货需数据对象
// 默认设置当前年份
......@@ -580,7 +580,6 @@ const uploadDemandImportFn = (obj) => {
// 确认上传货需
const submitUploadDemandFn = async () => {
const fd = new FormData()
console.log(uploadDemand.year)
fd.append('file', uploadDemand.file)
fd.append('year', uploadDemand.year.getFullYear())
const res = await uploadDemandImportAPI(fd)
......
src/views/promotion/task/index.vue
浏览文件 @ e44d957a
......@@ -114,7 +114,7 @@ import { getWarZoneListAPI, getChargeListAPI, getTaskListAPI, getProCityAPI } fr
import { parseTime } from '@/utils'
const { pickerOptions, last7Date } = useDatePickerOptions(0)
const { recentPickerOptions: pickerOptions, last7Date } = useDatePickerOptions(0)
const queryParams = reactive({
date: last7Date,
taskStatus: 'SUBMITTED',
......
src/views/system/post/index.vue
浏览文件 @ e44d957a
......@@ -269,10 +269,6 @@
attStruData.value = data
}
getAttOpenDialog()
// 考勤规则改变
const ruleChange = (val) => {
console.log(val)
}
/** 取消按钮 */
function cancel() {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论