|
|
@@ -18,17 +18,17 @@ import VerticalDivider from '/src/components/VerticalDivider/index.vue';
|
|
|
import * as api from '../api';
|
|
|
import { useResponse } from '/@/utils/useResponse';
|
|
|
import {
|
|
|
- DirectSalesCheckColumns_Regular, DirectSalesCheckColumns_Special,
|
|
|
+ DirectSalesCheckColumns_Regular, DirectSalesCheckColumns_Special
|
|
|
} from '/@/views/price-approval/Columns';
|
|
|
import EditDrawer from '/@/views/price-approval/direct-sales/component/EditDrawer.vue';
|
|
|
import router from '/@/router';
|
|
|
|
|
|
|
|
|
interface Parameter {
|
|
|
- sku: string;
|
|
|
- platform: string;
|
|
|
- country_code: string;
|
|
|
- sales_mode: string;
|
|
|
+ sku: string;
|
|
|
+ platform: string;
|
|
|
+ country_code: string;
|
|
|
+ sales_mode: string;
|
|
|
}
|
|
|
|
|
|
const queryParameter: Parameter | undefined = inject('query-parameter');
|
|
|
@@ -36,37 +36,37 @@ const { tableOptions, handlePageChange } = usePagination(fetchList);
|
|
|
|
|
|
const gridRef = ref();
|
|
|
const gridOptions: any = reactive({
|
|
|
- size: 'mini',
|
|
|
- border: false,
|
|
|
- round: true,
|
|
|
- stripe: true,
|
|
|
- currentRowHighLight: true,
|
|
|
- height: '100%',
|
|
|
- toolbarConfig: {
|
|
|
- size: 'large',
|
|
|
- slots: {
|
|
|
- buttons: 'toolbar_buttons',
|
|
|
- tools: 'toolbar_tools',
|
|
|
- },
|
|
|
- },
|
|
|
- rowConfig: {
|
|
|
- isHover: true,
|
|
|
- },
|
|
|
- columnConfig: {
|
|
|
- resizable: true,
|
|
|
- },
|
|
|
- pagerConfig: {
|
|
|
- total: tableOptions.value.total,
|
|
|
- page: tableOptions.value.page,
|
|
|
- limit: tableOptions.value.limit,
|
|
|
- },
|
|
|
- loading: false,
|
|
|
- loadingConfig: {
|
|
|
- icon: 'vxe-icon-indicator roll',
|
|
|
- text: '正在拼命加载中...',
|
|
|
- },
|
|
|
- columns: '',
|
|
|
- data: '',
|
|
|
+ size: 'mini',
|
|
|
+ border: false,
|
|
|
+ round: true,
|
|
|
+ stripe: true,
|
|
|
+ currentRowHighLight: true,
|
|
|
+ height: '100%',
|
|
|
+ toolbarConfig: {
|
|
|
+ size: 'large',
|
|
|
+ slots: {
|
|
|
+ buttons: 'toolbar_buttons',
|
|
|
+ tools: 'toolbar_tools'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rowConfig: {
|
|
|
+ isHover: true
|
|
|
+ },
|
|
|
+ columnConfig: {
|
|
|
+ resizable: true
|
|
|
+ },
|
|
|
+ pagerConfig: {
|
|
|
+ total: tableOptions.value.total,
|
|
|
+ page: tableOptions.value.page,
|
|
|
+ limit: tableOptions.value.limit
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ loadingConfig: {
|
|
|
+ icon: 'vxe-icon-indicator roll',
|
|
|
+ text: '正在拼命加载中...'
|
|
|
+ },
|
|
|
+ columns: '',
|
|
|
+ data: ''
|
|
|
});
|
|
|
|
|
|
const checkedList = ref<Set<number>>(new Set());
|
|
|
@@ -80,194 +80,194 @@ const dialogVisible = ref(false);
|
|
|
const templateType = ref('cost');
|
|
|
|
|
|
onBeforeMount(() => {
|
|
|
- gridOptions.pagerConfig.limit = 10;
|
|
|
+ gridOptions.pagerConfig.limit = 10;
|
|
|
});
|
|
|
|
|
|
onMounted(() => {
|
|
|
- fetchList();
|
|
|
+ fetchList();
|
|
|
});
|
|
|
|
|
|
async function fetchList(isQuery = false) {
|
|
|
- if (isQuery) {
|
|
|
- gridOptions.pagerConfig.page = 1;
|
|
|
- }
|
|
|
+ if (isQuery) {
|
|
|
+ gridOptions.pagerConfig.page = 1;
|
|
|
+ }
|
|
|
|
|
|
- gridOptions.data = [];
|
|
|
- gridOptions.columns = [];
|
|
|
+ gridOptions.data = [];
|
|
|
+ gridOptions.columns = [];
|
|
|
|
|
|
- const query = {
|
|
|
- sku: queryParameter?.sku,
|
|
|
- platform: queryParameter?.platform,
|
|
|
- country_code:queryParameter?.country_code,
|
|
|
- sales_mode: queryParameter?.sales_mode,
|
|
|
- };
|
|
|
+ const query = {
|
|
|
+ sku: queryParameter?.sku,
|
|
|
+ platform: queryParameter?.platform,
|
|
|
+ country_code: queryParameter?.country_code,
|
|
|
+ sales_mode: queryParameter?.sales_mode
|
|
|
+ };
|
|
|
|
|
|
- await useTableData(api.getTableData, query, gridOptions);
|
|
|
- await gridRef.value.loadColumn(DirectSalesCheckColumns_Special);
|
|
|
- gridOptions.showHeader = Boolean(gridOptions.data?.length);
|
|
|
+ await useTableData(api.getTableData, query, gridOptions);
|
|
|
+ if (gridOptions && gridOptions.data?.length) await gridRef.value.loadColumn(DirectSalesCheckColumns_Special);
|
|
|
+ gridOptions.showHeader = Boolean(gridOptions.data?.length);
|
|
|
}
|
|
|
|
|
|
function handleRefresh() {
|
|
|
- fetchList();
|
|
|
+ fetchList();
|
|
|
}
|
|
|
|
|
|
async function handleDownload() {
|
|
|
- // gridOptions.loading = true;
|
|
|
- // try {
|
|
|
- // await uesDownloadFile({
|
|
|
- // apiMethod: api.exportData, // 调用的 API 方法
|
|
|
- // queryParams: {
|
|
|
- // sku: queryParameter?.sku,
|
|
|
- // platform: queryParameter?.platform,
|
|
|
- // country_code:queryParameter?.country_code,
|
|
|
- // sales_mode: queryParameter?.sales_mode,
|
|
|
- // },
|
|
|
- // fileName: '审批查看（直销）数据.xlsx', // 自定义文件名
|
|
|
- // successMessage: () => ElMessage.success('数据导出成功！'),
|
|
|
- // errorMessage: () => ElMessage.error('数据导出失败，请重试！'),
|
|
|
- // });
|
|
|
- // } finally {
|
|
|
- // gridOptions.loading = false; // 结束加载状态
|
|
|
- // }
|
|
|
+ // gridOptions.loading = true;
|
|
|
+ // try {
|
|
|
+ // await uesDownloadFile({
|
|
|
+ // apiMethod: api.exportData, // 调用的 API 方法
|
|
|
+ // queryParams: {
|
|
|
+ // sku: queryParameter?.sku,
|
|
|
+ // platform: queryParameter?.platform,
|
|
|
+ // country_code:queryParameter?.country_code,
|
|
|
+ // sales_mode: queryParameter?.sales_mode,
|
|
|
+ // },
|
|
|
+ // fileName: '审批查看（直销）数据.xlsx', // 自定义文件名
|
|
|
+ // successMessage: () => ElMessage.success('数据导出成功！'),
|
|
|
+ // errorMessage: () => ElMessage.error('数据导出失败，请重试！'),
|
|
|
+ // });
|
|
|
+ // } finally {
|
|
|
+ // gridOptions.loading = false; // 结束加载状态
|
|
|
+ // }
|
|
|
}
|
|
|
|
|
|
function handleCreate() {
|
|
|
- router.push({ name: 'AddPage', query: { type: 'direct' } });
|
|
|
+ router.push({ path: '/addPage', query: { type: 'direct' } });
|
|
|
}
|
|
|
|
|
|
function handleEdit(row: any) {
|
|
|
- editOpen.value = true;
|
|
|
- rowData.value = row;
|
|
|
+ editOpen.value = true;
|
|
|
+ rowData.value = row;
|
|
|
}
|
|
|
|
|
|
async function singleDelete(row: any) {
|
|
|
- const res = await useResponse(api.deleteRow, row);
|
|
|
- if (res.code === 2000) {
|
|
|
- ElMessage.error({ message: '已删除!', plain: true, icon: 'Delete' });
|
|
|
- handleRefresh();
|
|
|
- }
|
|
|
+ const res = await useResponse(api.deleteRow, row);
|
|
|
+ if (res.code === 2000) {
|
|
|
+ ElMessage.error({ message: '已删除!', plain: true, icon: 'Delete' });
|
|
|
+ handleRefresh();
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-
|
|
|
function downloadTemplate() {
|
|
|
- // const url = '/api/choice/reviews_monitor/import_data/';
|
|
|
- // const fileName = '审批查看（直销）模板.xlsx';
|
|
|
- //
|
|
|
- // if (url) {
|
|
|
- // downloadFile({
|
|
|
- // url,
|
|
|
- // method: 'GET',
|
|
|
- // filename: fileName,
|
|
|
- // });
|
|
|
- // } else {
|
|
|
- // console.error('未知的模板类型:', templateType.value);
|
|
|
- // }
|
|
|
+ // const url = '/api/choice/reviews_monitor/import_data/';
|
|
|
+ // const fileName = '审批查看（直销）模板.xlsx';
|
|
|
+ //
|
|
|
+ // if (url) {
|
|
|
+ // downloadFile({
|
|
|
+ // url,
|
|
|
+ // method: 'GET',
|
|
|
+ // filename: fileName,
|
|
|
+ // });
|
|
|
+ // } else {
|
|
|
+ // console.error('未知的模板类型:', templateType.value);
|
|
|
+ // }
|
|
|
}
|
|
|
|
|
|
const gridEvents = {
|
|
|
- custom({ type }: any) {
|
|
|
- if (type == 'confirm') {
|
|
|
- fetchList();
|
|
|
- }
|
|
|
- },
|
|
|
+ custom({ type }: any) {
|
|
|
+ if (type == 'confirm') {
|
|
|
+ fetchList();
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
-function cellStyle(){
|
|
|
- return{
|
|
|
- fontWeight:600,
|
|
|
- }
|
|
|
+function cellStyle() {
|
|
|
+ return {
|
|
|
+ fontWeight: 600
|
|
|
+ };
|
|
|
}
|
|
|
|
|
|
defineExpose({ fetchList });
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents" @checkbox-change="selectChangeEvent" @checkbox-all="selectAllChangeEvent" :cell-style="cellStyle">
|
|
|
- <!-- 工具栏左侧 -->
|
|
|
- <template #toolbar_buttons>
|
|
|
- <div class="flex gap-2">
|
|
|
- <!--<div>-->
|
|
|
- <!-- <el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="你确定要删除此项吗?" width="220" @confirm="batchDelete">-->
|
|
|
- <!-- <template #reference>-->
|
|
|
- <!-- <PermissionButton :disabled="!checkedList.size" :icon="Delete" plain round type="danger"> 批量删除 </PermissionButton>-->
|
|
|
- <!-- </template>-->
|
|
|
- <!-- <template #actions="{ confirm, cancel }">-->
|
|
|
- <!-- <el-button size="small" @click="cancel">No!</el-button>-->
|
|
|
- <!-- <el-button size="small" type="danger" @click="confirm">Yes?</el-button>-->
|
|
|
- <!-- </template>-->
|
|
|
- <!-- </el-popconfirm>-->
|
|
|
- <!--</div>-->
|
|
|
- <div>
|
|
|
- <PermissionButton :icon="Plus" plain round type="primary" @click="handleCreate">新 增</PermissionButton>
|
|
|
- </div>
|
|
|
- <div class="custom-el-input">
|
|
|
- <el-select v-model="templateType" style="width: 200px">
|
|
|
- <template #prefix>
|
|
|
- <div class="flex items-center">
|
|
|
- <el-button
|
|
|
- size="small"
|
|
|
- style="margin-left: -7px; font-size: 14px; border-radius: 29px"
|
|
|
- text
|
|
|
- type="success"
|
|
|
- @click.stop="downloadTemplate"
|
|
|
- >
|
|
|
- 下载
|
|
|
- </el-button>
|
|
|
- <VerticalDivider style="margin-left: 7px" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <el-option label="审批查看(直销)" value="cost" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <VerticalDivider class="px-1" style="margin-left: 7px" />
|
|
|
- <ImportButton :icon="Upload" :uploadFunction="api.upload" bg text>导 入</ImportButton>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 工具栏右侧 -->
|
|
|
- <template #toolbar_tools>
|
|
|
- <el-button circle class="toolbar-btn" @click="handleRefresh">
|
|
|
- <el-icon>
|
|
|
- <Refresh />
|
|
|
- </el-icon>
|
|
|
- </el-button>
|
|
|
- <el-button circle class="toolbar-btn" @click="handleDownload">
|
|
|
- <el-icon>
|
|
|
- <Download />
|
|
|
- </el-icon>
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- <template #top>
|
|
|
- <div class="mb-2"></div>
|
|
|
- </template>
|
|
|
- <!-- 分页 -->
|
|
|
- <template #pager>
|
|
|
- <vxe-pager
|
|
|
- v-model:currentPage="gridOptions.pagerConfig.page"
|
|
|
- v-model:pageSize="gridOptions.pagerConfig.limit"
|
|
|
- :total="gridOptions.pagerConfig.total"
|
|
|
- class="mt-1.5"
|
|
|
- @page-change="handlePageChange"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <template #empty>
|
|
|
- <el-empty description="暂无数据" />
|
|
|
- </template>
|
|
|
- <!-- 自定义列插槽 -->
|
|
|
- <template v-for="col in DirectSalesCheckColumns_Special" #[`${col.field}`]="{ row }">
|
|
|
- <DataTableSlot :field="col.field" :row="row" @edit-row="handleEdit" @handle-delete="singleDelete" />
|
|
|
- </template>
|
|
|
- </vxe-grid>
|
|
|
- <EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
|
|
|
+ <vxe-grid ref="gridRef" :cell-style="cellStyle" v-bind="gridOptions" v-on="gridEvents"
|
|
|
+ @checkbox-change="selectChangeEvent" @checkbox-all="selectAllChangeEvent">
|
|
|
+ <!-- 工具栏左侧 -->
|
|
|
+ <template #toolbar_buttons>
|
|
|
+ <div class="flex gap-2">
|
|
|
+ <!--<div>-->
|
|
|
+ <!-- <el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="你确定要删除此项吗?" width="220" @confirm="batchDelete">-->
|
|
|
+ <!-- <template #reference>-->
|
|
|
+ <!-- <PermissionButton :disabled="!checkedList.size" :icon="Delete" plain round type="danger"> 批量删除 </PermissionButton>-->
|
|
|
+ <!-- </template>-->
|
|
|
+ <!-- <template #actions="{ confirm, cancel }">-->
|
|
|
+ <!-- <el-button size="small" @click="cancel">No!</el-button>-->
|
|
|
+ <!-- <el-button size="small" type="danger" @click="confirm">Yes?</el-button>-->
|
|
|
+ <!-- </template>-->
|
|
|
+ <!-- </el-popconfirm>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <div>
|
|
|
+ <PermissionButton :icon="Plus" plain round type="primary" @click="handleCreate">新 增</PermissionButton>
|
|
|
+ </div>
|
|
|
+ <div class="custom-el-input">
|
|
|
+ <el-select v-model="templateType" style="width: 200px">
|
|
|
+ <template #prefix>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ style="margin-left: -7px; font-size: 14px; border-radius: 29px"
|
|
|
+ text
|
|
|
+ type="success"
|
|
|
+ @click.stop="downloadTemplate"
|
|
|
+ >
|
|
|
+ 下载
|
|
|
+ </el-button>
|
|
|
+ <VerticalDivider style="margin-left: 7px" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-option label="审批查看(直销)" value="cost" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <VerticalDivider class="px-1" style="margin-left: 7px" />
|
|
|
+ <ImportButton :icon="Upload" :uploadFunction="api.upload" bg text>导 入</ImportButton>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 工具栏右侧 -->
|
|
|
+ <template #toolbar_tools>
|
|
|
+ <el-button circle class="toolbar-btn" @click="handleRefresh">
|
|
|
+ <el-icon>
|
|
|
+ <Refresh />
|
|
|
+ </el-icon>
|
|
|
+ </el-button>
|
|
|
+ <el-button circle class="toolbar-btn" @click="handleDownload">
|
|
|
+ <el-icon>
|
|
|
+ <Download />
|
|
|
+ </el-icon>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <template #top>
|
|
|
+ <div class="mb-2"></div>
|
|
|
+ </template>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <template #pager>
|
|
|
+ <vxe-pager
|
|
|
+ v-model:currentPage="gridOptions.pagerConfig.page"
|
|
|
+ v-model:pageSize="gridOptions.pagerConfig.limit"
|
|
|
+ :total="gridOptions.pagerConfig.total"
|
|
|
+ class="mt-1.5"
|
|
|
+ @page-change="handlePageChange"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template #empty>
|
|
|
+ <el-empty description="暂无数据" />
|
|
|
+ </template>
|
|
|
+ <!-- 自定义列插槽 -->
|
|
|
+ <template v-for="col in DirectSalesCheckColumns_Special" #[`${col.field}`]="{ row }">
|
|
|
+ <DataTableSlot :field="col.field" :row="row" @edit-row="handleEdit" @handle-delete="singleDelete" />
|
|
|
+ </template>
|
|
|
+ </vxe-grid>
|
|
|
+ <EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
.toolbar-btn {
|
|
|
- width: 34px;
|
|
|
- height: 34px;
|
|
|
- font-size: 18px;
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ font-size: 18px;
|
|
|
}
|
|
|
|
|
|
:deep(.custom-el-input .el-select__wrapper) {
|
|
|
- border-radius: 20px;
|
|
|
+ border-radius: 20px;
|
|
|
}
|
|
|
</style>
|
