|
|
@@ -0,0 +1,507 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <Breadcrumb :items="['menu.jd', 'menu.jd.bill_dailys']" />
|
|
|
+ <a-card class="general-card" :title="$t('menu.jd.bill_dailys')">
|
|
|
+ <a-row>
|
|
|
+ <a-col :flex="1">
|
|
|
+ <a-form :model="formModel" :label-col-props="{ span: 8 }" :wrapper-col-props="{ span: 16 }"
|
|
|
+ label-align="left">
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-item field="keyword" label="账号名">
|
|
|
+ <selectAccount v-model="formModel.keyword" @change="changeCompany" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-item field="query_date" label="订单完成日期">
|
|
|
+ <a-range-picker v-model="formModel.query_date" style="width: 100%"
|
|
|
+ @change="search" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </a-col>
|
|
|
+ <a-divider style="height: 32px" direction="vertical" />
|
|
|
+ <a-col :flex="'86px'" style="text-align: right">
|
|
|
+ <a-space direction="vertical" :size="18">
|
|
|
+ <a-button type="primary" @click="search">
|
|
|
+ <template #icon>
|
|
|
+ <icon-search />
|
|
|
+ </template>
|
|
|
+ {{ $t('searchTable.form.search') }}
|
|
|
+ </a-button>
|
|
|
+ </a-space>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-divider style="margin-top: 0" />
|
|
|
+ <a-row style="margin-bottom: 16px">
|
|
|
+ <a-col :span="12"> </a-col>
|
|
|
+ <a-col :span="12" style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: end;
|
|
|
+ ">
|
|
|
+ <a-tooltip :content="$t('searchTable.actions.refresh')">
|
|
|
+ <div class="action-icon" @click="search"><icon-refresh size="18" /></div>
|
|
|
+ </a-tooltip>
|
|
|
+ <a-dropdown @select="handleSelectDensity">
|
|
|
+ <a-tooltip :content="$t('searchTable.actions.density')">
|
|
|
+ <div class="action-icon"><icon-line-height size="18" /></div>
|
|
|
+ </a-tooltip>
|
|
|
+ <template #content>
|
|
|
+ <a-doption v-for="item in densityList" :key="item.value" :value="item.value"
|
|
|
+ :class="{ active: item.value === size }">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </a-doption>
|
|
|
+ </template>
|
|
|
+ </a-dropdown>
|
|
|
+ <a-tooltip :content="$t('searchTable.actions.columnSetting')">
|
|
|
+ <a-popover trigger="click" position="bl" @popup-visible-change="popupVisibleChange">
|
|
|
+ <div class="action-icon"><icon-settings size="18" /></div>
|
|
|
+ <template #content>
|
|
|
+ <div id="tableSetting">
|
|
|
+ <div v-for="(item, index) in showColumns" :key="item.dataIndex" class="setting">
|
|
|
+ <div style="
|
|
|
+ margin-right: 4px;
|
|
|
+ cursor: move;
|
|
|
+ ">
|
|
|
+ <icon-drag-arrow />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <a-checkbox v-model="item.checked" @change="
|
|
|
+ handleChange(
|
|
|
+ $event,
|
|
|
+ item as TableColumnData,
|
|
|
+ index
|
|
|
+ )
|
|
|
+ ">
|
|
|
+ </a-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ {{
|
|
|
+ item.title === '#'
|
|
|
+ ? '序列号'
|
|
|
+ : item.title
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-popover>
|
|
|
+ </a-tooltip>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+
|
|
|
+ <a-table row-key="id" :loading="loading" :pagination="pagination" :summary="true" summary-text="汇总"
|
|
|
+ :columns="(cloneColumns as TableColumnData[])" :scroll="scroll" :scrollbar="scrollbar"
|
|
|
+ :data="renderData" :bordered="false" :size="size" :load-more="loadMore" @page-change="onPageChange"
|
|
|
+ @page-size-change="onPageSizeChange">
|
|
|
+
|
|
|
+
|
|
|
+ <template #xAxis="{ record }">
|
|
|
+ {{ dayjs(record.report_date).format('YYYY-MM-DD') }}
|
|
|
+ </template>
|
|
|
+ <template #status="{ record }">
|
|
|
+ <div v-if="record.status == 2">已结算 </div>
|
|
|
+ <div v-else-if="record.status == 0">未结算 </div>
|
|
|
+ <div v-else> -</div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #summary-cell="{ column, record }">
|
|
|
+ <div>{{ toAmount(record[column.dataIndex]) }}</div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </a-table>
|
|
|
+ </a-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import { computed, ref, reactive, watch, nextTick } from 'vue';
|
|
|
+import { useI18n } from 'vue-i18n';
|
|
|
+import useLoading from '@/hooks/loading';
|
|
|
+import {
|
|
|
+ JdEstimateCommRecord,
|
|
|
+ JdEstimateCommParams,
|
|
|
+ queryJdEstimateComm,
|
|
|
+ queryJdEstimateCommTotal
|
|
|
+} from '@/api/jd';
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+import { Pagination } from '@/types/global';
|
|
|
+import type {
|
|
|
+ TableData,
|
|
|
+ TableColumnData,
|
|
|
+} from '@arco-design/web-vue/es/table/interface';
|
|
|
+import cloneDeep from 'lodash/cloneDeep';
|
|
|
+import Sortable from 'sortablejs';
|
|
|
+import selectAccount from './components/selectAccount.vue';
|
|
|
+
|
|
|
+
|
|
|
+type SizeProps = 'mini' | 'small' | 'medium' | 'large';
|
|
|
+type Column = TableColumnData & { checked?: true };
|
|
|
+
|
|
|
+const generateFormModel = () => {
|
|
|
+ let keyword = ''
|
|
|
+ if (router.currentRoute.value.query.name) {
|
|
|
+ keyword = router.currentRoute.value.query.name.toString()
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ keyword,
|
|
|
+ query_date: [],
|
|
|
+ current: 1,
|
|
|
+ pageSize: 30,
|
|
|
+ sort: 'report_date',
|
|
|
+ order: 'descending',
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+const router = useRouter();
|
|
|
+
|
|
|
+const { loading, setLoading } = useLoading(true);
|
|
|
+const { t } = useI18n();
|
|
|
+const renderData = ref<JdEstimateCommRecord[]>([]);
|
|
|
+const formModel = ref(generateFormModel());
|
|
|
+const cloneColumns = ref<Column[]>([]);
|
|
|
+const showColumns = ref<Column[]>([]);
|
|
|
+const size = ref<SizeProps>('medium');
|
|
|
+
|
|
|
+const scrollbar = ref(true);
|
|
|
+const scroll = {
|
|
|
+ x: '100%',
|
|
|
+ y: '100%',
|
|
|
+ maxHeight: 'calc( 100vh - 420px)',
|
|
|
+};
|
|
|
+
|
|
|
+const basePagination: Pagination = {
|
|
|
+ current: 1,
|
|
|
+ pageSize: 30,
|
|
|
+};
|
|
|
+const pagination = reactive({
|
|
|
+ ...basePagination,
|
|
|
+ showTotal: true,
|
|
|
+ showJumper: true,
|
|
|
+ showMore: true,
|
|
|
+ showPageSize: true,
|
|
|
+ pageSizeOptions: [10, 20, 30, 31, 50, 100, 200, 500],
|
|
|
+ sizePageSize: true,
|
|
|
+
|
|
|
+});
|
|
|
+const densityList = computed(() => [
|
|
|
+ {
|
|
|
+ name: t('searchTable.size.mini'),
|
|
|
+ value: 'mini',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: t('searchTable.size.small'),
|
|
|
+ value: 'small',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: t('searchTable.size.medium'),
|
|
|
+ value: 'medium',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: t('searchTable.size.large'),
|
|
|
+ value: 'large',
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const columns = computed<TableColumnData[]>(() => [
|
|
|
+ {
|
|
|
+ title: '订单完成日期',
|
|
|
+ dataIndex: 'xAxis',
|
|
|
+ slotName: 'xAxis',
|
|
|
+ fixed: 'left',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '所属账号',
|
|
|
+ dataIndex: 'accountName',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '业务类型',
|
|
|
+ dataIndex: 'unionTypeStr',
|
|
|
+ slotName: 'unionTypeStr',
|
|
|
+ width: 140,
|
|
|
+ align: "right",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '金额',
|
|
|
+ dataIndex: 'cosFee',
|
|
|
+ slotName: 'cosFee',
|
|
|
+ width: 140,
|
|
|
+ align: "right",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '类型',
|
|
|
+ dataIndex: 'feeTypeStr',
|
|
|
+ slotName: 'feeTypeStr',
|
|
|
+ width: 140,
|
|
|
+ align: "right",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '结算状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ slotName: 'status',
|
|
|
+ width: 140,
|
|
|
+ align: "right",
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // title: '平台',
|
|
|
+ // dataIndex: 'platformStr',
|
|
|
+ // slotName: 'platformStr',
|
|
|
+ // width: 140,
|
|
|
+ // align: "right",
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ title: '最后更新时间',
|
|
|
+ dataIndex: 'last_time',
|
|
|
+ width: 180,
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const toAmount = (val: any): any => {
|
|
|
+ console.log(val);
|
|
|
+ if (typeof val === 'number' && !Number.isNaN(val)) {
|
|
|
+ return parseFloat(val.toFixed(2));
|
|
|
+ }
|
|
|
+ return val;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const fetchData = async (
|
|
|
+ params: JdEstimateCommParams = {
|
|
|
+ current: 1,
|
|
|
+ pageSize: basePagination.pageSize,
|
|
|
+ sort: 'report_date',
|
|
|
+ order: 'descending',
|
|
|
+ }
|
|
|
+) => {
|
|
|
+ console.log(basePagination, params)
|
|
|
+ setLoading(true);
|
|
|
+
|
|
|
+ try {
|
|
|
+ console.log(params)
|
|
|
+ if (params.keyword) {
|
|
|
+ const { data } = await queryJdEstimateComm(params);
|
|
|
+ if (!data) return;
|
|
|
+
|
|
|
+ const list = data.list.map((item: JdEstimateCommRecord) => ({
|
|
|
+ ...item,
|
|
|
+ isLeaf: true,
|
|
|
+ }));
|
|
|
+ renderData.value = list;
|
|
|
+ pagination.current = data.page;
|
|
|
+ pagination.total = data.count;
|
|
|
+ } else {
|
|
|
+ const { data } = await queryJdEstimateCommTotal(params);
|
|
|
+ if (!data) return;
|
|
|
+ renderData.value = data.list;
|
|
|
+ pagination.current = data.page;
|
|
|
+ pagination.total = data.count;
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ console.log(err);
|
|
|
+ // you can report use errorHandler or other
|
|
|
+ } finally {
|
|
|
+ setLoading(false);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+const loadMore = async (
|
|
|
+ row: TableData,
|
|
|
+ done: (data: TableData[]) => void
|
|
|
+) => {
|
|
|
+ setLoading(true);
|
|
|
+ try {
|
|
|
+ let list: TableData[] = [];
|
|
|
+
|
|
|
+ if (row.accountName === '') {
|
|
|
+ console.log(row.report_date)
|
|
|
+ const params: JdEstimateCommParams = {
|
|
|
+ query_date: [row.report_date, row.report_date],
|
|
|
+ current: 1,
|
|
|
+ pageSize: 30,
|
|
|
+ sort: 'report_date',
|
|
|
+ order: 'descending',
|
|
|
+ };
|
|
|
+
|
|
|
+ const { data } = await queryJdEstimateComm(params);
|
|
|
+ console.log(data);
|
|
|
+ if (!data) return;
|
|
|
+ list = data.list.map((item: JdEstimateCommRecord) => ({
|
|
|
+ ...item,
|
|
|
+ isLeaf: true,
|
|
|
+ }));
|
|
|
+
|
|
|
+ console.log(list)
|
|
|
+ }
|
|
|
+ done(list);
|
|
|
+ } catch (err) {
|
|
|
+ console.log(err);
|
|
|
+ // you can report use errorHandler or other
|
|
|
+ } finally {
|
|
|
+ setLoading(false);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const search = () => {
|
|
|
+ fetchData({
|
|
|
+ ...basePagination,
|
|
|
+ ...formModel.value,
|
|
|
+ } as unknown as JdEstimateCommParams);
|
|
|
+};
|
|
|
+const changeCompany = (value: any) => {
|
|
|
+ const reset = () => {
|
|
|
+ formModel.value = generateFormModel();
|
|
|
+ };
|
|
|
+ formModel.value.keyword = value
|
|
|
+
|
|
|
+ fetchData({
|
|
|
+ ...basePagination,
|
|
|
+ ...formModel.value,
|
|
|
+ } as unknown as JdEstimateCommParams);
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const onPageChange = (current: number) => {
|
|
|
+ fetchData({
|
|
|
+ ...basePagination,
|
|
|
+ ...formModel.value,
|
|
|
+ current
|
|
|
+ });
|
|
|
+};
|
|
|
+const onPageSizeChange = (current: number) => {
|
|
|
+ basePagination.pageSize = current;
|
|
|
+ pagination.pageSize = current;
|
|
|
+ fetchData({
|
|
|
+ ...basePagination,
|
|
|
+ ...formModel.value,
|
|
|
+ pageSize: current,
|
|
|
+ current: 1,
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+fetchData({ ...formModel.value } as unknown as JdEstimateCommParams);
|
|
|
+const reset = () => {
|
|
|
+ formModel.value = generateFormModel();
|
|
|
+};
|
|
|
+
|
|
|
+const handleSelectDensity = (
|
|
|
+ val: string | number | Record<string, any> | undefined,
|
|
|
+ e: Event
|
|
|
+) => {
|
|
|
+ size.value = val as SizeProps;
|
|
|
+};
|
|
|
+
|
|
|
+const handleChange = (
|
|
|
+ checked: boolean | (string | boolean | number)[],
|
|
|
+ column: Column,
|
|
|
+ index: number
|
|
|
+) => {
|
|
|
+ if (!checked) {
|
|
|
+ cloneColumns.value = showColumns.value.filter(
|
|
|
+ (item) => item.dataIndex !== column.dataIndex
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ cloneColumns.value.splice(index, 0, column);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const exchangeArray = <T extends Array<any>>(
|
|
|
+ array: T,
|
|
|
+ beforeIdx: number,
|
|
|
+ newIdx: number,
|
|
|
+ isDeep = false
|
|
|
+): T => {
|
|
|
+ const newArray = isDeep ? cloneDeep(array) : array;
|
|
|
+ if (beforeIdx > -1 && newIdx > -1) {
|
|
|
+ // 先替换后面的，然后拿到替换的结果替换前面的
|
|
|
+ newArray.splice(
|
|
|
+ beforeIdx,
|
|
|
+ 1,
|
|
|
+ newArray.splice(newIdx, 1, newArray[beforeIdx]).pop()
|
|
|
+ );
|
|
|
+ }
|
|
|
+ return newArray;
|
|
|
+};
|
|
|
+
|
|
|
+const popupVisibleChange = (val: boolean) => {
|
|
|
+ if (val) {
|
|
|
+ nextTick(() => {
|
|
|
+ const el = document.getElementById(
|
|
|
+ 'tableSetting'
|
|
|
+ ) as HTMLElement;
|
|
|
+ const sortable = new Sortable(el, {
|
|
|
+ onEnd(e: any) {
|
|
|
+ const { oldIndex, newIndex } = e;
|
|
|
+ exchangeArray(cloneColumns.value, oldIndex, newIndex);
|
|
|
+ exchangeArray(showColumns.value, oldIndex, newIndex);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => columns.value,
|
|
|
+ (val) => {
|
|
|
+ cloneColumns.value = cloneDeep(val);
|
|
|
+ cloneColumns.value.forEach((item, index) => {
|
|
|
+ item.checked = true;
|
|
|
+ });
|
|
|
+ showColumns.value = cloneDeep(cloneColumns.value);
|
|
|
+ },
|
|
|
+ { deep: true, immediate: true }
|
|
|
+);
|
|
|
+</script>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+export default {
|
|
|
+ name: 'bill_dailys',
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.container {
|
|
|
+ padding: 0 20px 20px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.arco-table-th) {
|
|
|
+ &:last-child {
|
|
|
+ .arco-table-th-item-title {
|
|
|
+ margin-left: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.action-icon {
|
|
|
+ margin-left: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.active {
|
|
|
+ color: #0960bd;
|
|
|
+ background-color: #e3f4fc;
|
|
|
+}
|
|
|
+
|
|
|
+.setting {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 200px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin-left: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
dodo hold