|
|
@@ -21,10 +21,12 @@ import { useResponse } from '/@/utils/useResponse';
|
|
|
import { CostDetailColumns, SupplyCheckColumns_Regular } from '/@/views/price-approval/Columns';
|
|
|
|
|
|
|
|
|
+const router = useRouter();
|
|
|
+
|
|
|
interface Parameter {
|
|
|
- description: string;
|
|
|
- platform: string;
|
|
|
- station: string;
|
|
|
+ description: string;
|
|
|
+ platform: string;
|
|
|
+ station: string;
|
|
|
}
|
|
|
|
|
|
const queryParameter: Parameter | undefined = inject('query-parameter');
|
|
|
@@ -32,37 +34,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());
|
|
|
@@ -76,220 +78,220 @@ 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;
|
|
|
- }
|
|
|
-
|
|
|
- gridOptions.data = [];
|
|
|
- gridOptions.columns = [];
|
|
|
-
|
|
|
- const query = {
|
|
|
- description: queryParameter?.description,
|
|
|
- platform: queryParameter?.platform,
|
|
|
- station: queryParameter?.station,
|
|
|
- };
|
|
|
-
|
|
|
- await useTableData(api.getTableData, query, gridOptions);
|
|
|
- await gridRef.value.loadColumn(SupplyCheckColumns_Regular);
|
|
|
- gridOptions.showHeader = Boolean(gridOptions.data?.length);
|
|
|
+ if (isQuery) {
|
|
|
+ gridOptions.pagerConfig.page = 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ gridOptions.data = [];
|
|
|
+ gridOptions.columns = [];
|
|
|
+
|
|
|
+ const query = {
|
|
|
+ description: queryParameter?.description,
|
|
|
+ platform: queryParameter?.platform,
|
|
|
+ station: queryParameter?.station
|
|
|
+ };
|
|
|
+
|
|
|
+ await useTableData(api.getTableData, query, gridOptions);
|
|
|
+ await gridRef.value.loadColumn(SupplyCheckColumns_Regular);
|
|
|
+ gridOptions.showHeader = Boolean(gridOptions.data?.length);
|
|
|
}
|
|
|
|
|
|
function handleRefresh() {
|
|
|
- fetchList();
|
|
|
+ fetchList();
|
|
|
}
|
|
|
|
|
|
async function handleDownload() {
|
|
|
- gridOptions.loading = true;
|
|
|
- try {
|
|
|
- const query = {
|
|
|
- description: queryParameter?.description,
|
|
|
- platform: queryParameter?.platform,
|
|
|
- station: queryParameter?.station,
|
|
|
- };
|
|
|
- const response = await api.exportData(query);
|
|
|
- const url = window.URL.createObjectURL(new Blob([response.data]));
|
|
|
- const link = document.createElement('a');
|
|
|
- link.href = url;
|
|
|
- link.setAttribute('download', '商品列表数据.xlsx');
|
|
|
- document.body.appendChild(link);
|
|
|
- link.click();
|
|
|
- ElMessage.success('数据导出成功！');
|
|
|
- } catch (error) {
|
|
|
- ElMessage.error('数据导出失败，请重试！');
|
|
|
- console.error(error);
|
|
|
- } finally {
|
|
|
- gridOptions.loading = false; // 结束加载状态
|
|
|
- }
|
|
|
+ gridOptions.loading = true;
|
|
|
+ try {
|
|
|
+ const query = {
|
|
|
+ description: queryParameter?.description,
|
|
|
+ platform: queryParameter?.platform,
|
|
|
+ station: queryParameter?.station
|
|
|
+ };
|
|
|
+ const response = await api.exportData(query);
|
|
|
+ const url = window.URL.createObjectURL(new Blob([ response.data ]));
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = url;
|
|
|
+ link.setAttribute('download', '商品列表数据.xlsx');
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ ElMessage.success('数据导出成功！');
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error('数据导出失败，请重试！');
|
|
|
+ console.error(error);
|
|
|
+ } finally {
|
|
|
+ gridOptions.loading = false; // 结束加载状态
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
function selectChangeEvent({ checked, row }: any) {
|
|
|
- if (checked) {
|
|
|
- checkedList.value.add(row.id); // 获取单个数据
|
|
|
- } else {
|
|
|
- checkedList.value.delete(row.id);
|
|
|
- }
|
|
|
+ if (checked) {
|
|
|
+ checkedList.value.add(row.id); // 获取单个数据
|
|
|
+ } else {
|
|
|
+ checkedList.value.delete(row.id);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
function selectAllChangeEvent({ checked }: any) {
|
|
|
- const $grid = gridRef.value;
|
|
|
- if ($grid) {
|
|
|
- const records = $grid.getData(); // 获取所有数据
|
|
|
- if (checked) {
|
|
|
- records.forEach((item: any) => {
|
|
|
- checkedList.value.add(item.id);
|
|
|
- });
|
|
|
- } else {
|
|
|
- checkedList.value.clear();
|
|
|
- }
|
|
|
- }
|
|
|
+ const $grid = gridRef.value;
|
|
|
+ if ($grid) {
|
|
|
+ const records = $grid.getData(); // 获取所有数据
|
|
|
+ if (checked) {
|
|
|
+ records.forEach((item: any) => {
|
|
|
+ checkedList.value.add(item.id);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ checkedList.value.clear();
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
function handleCreate() {
|
|
|
-
|
|
|
+ router.push({ name: 'SupplyAddPage', query: { type: 'supply' } });
|
|
|
}
|
|
|
|
|
|
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:500,
|
|
|
- }
|
|
|
+function cellStyle() {
|
|
|
+ return {
|
|
|
+ fontWeight: 500
|
|
|
+ };
|
|
|
}
|
|
|
|
|
|
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: 190px">
|
|
|
- <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 CostDetailColumns" #[`${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" />
|
|
|
- <NoticeDialog v-if="dialogVisible" v-model="dialogVisible" :row-data="rowData" />
|
|
|
+ <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: 190px">
|
|
|
+ <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 CostDetailColumns" #[`${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" />
|
|
|
+ <NoticeDialog v-if="dialogVisible" v-model="dialogVisible" :row-data="rowData" />
|
|
|
</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>
|
