Compare commits
No commits in common. "f83c8bfb765af0a6e07a1f54d6662459f99d6e5b" and "dd220a34170ba1b202cfb73586a289f881d40933" have entirely different histories.
f83c8bfb76
...
dd220a3417
@ -31,7 +31,6 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
|
|||||||
monitor_logininfor: () => import("@/views/monitor/logininfor/index.vue"),
|
monitor_logininfor: () => import("@/views/monitor/logininfor/index.vue"),
|
||||||
monitor_online: () => import("@/views/monitor/online/index.vue"),
|
monitor_online: () => import("@/views/monitor/online/index.vue"),
|
||||||
monitor_operlog: () => import("@/views/monitor/operlog/index.vue"),
|
monitor_operlog: () => import("@/views/monitor/operlog/index.vue"),
|
||||||
"mps_import-heat": () => import("@/views/mps/import-heat/index.vue"),
|
|
||||||
"mps_manual-pricing": () => import("@/views/mps/manual-pricing/index.vue"),
|
"mps_manual-pricing": () => import("@/views/mps/manual-pricing/index.vue"),
|
||||||
"mps_market-yxzetgrb": () => import("@/views/mps/market-yxzetgrb/index.vue"),
|
"mps_market-yxzetgrb": () => import("@/views/mps/market-yxzetgrb/index.vue"),
|
||||||
mps_market: () => import("@/views/mps/market/index.vue"),
|
mps_market: () => import("@/views/mps/market/index.vue"),
|
||||||
|
|||||||
@ -189,15 +189,6 @@ export const generatedRoutes: GeneratedRoute[] = [
|
|||||||
i18nKey: 'route.mps'
|
i18nKey: 'route.mps'
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
|
||||||
name: 'mps_import-heat',
|
|
||||||
path: '/mps/import-heat',
|
|
||||||
component: 'view.mps_import-heat',
|
|
||||||
meta: {
|
|
||||||
title: 'mps_import-heat',
|
|
||||||
i18nKey: 'route.mps_import-heat'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: 'mps_manual-pricing',
|
name: 'mps_manual-pricing',
|
||||||
path: '/mps/manual-pricing',
|
path: '/mps/manual-pricing',
|
||||||
|
|||||||
@ -185,7 +185,6 @@ const routeMap: RouteMap = {
|
|||||||
"monitor_online": "/monitor/online",
|
"monitor_online": "/monitor/online",
|
||||||
"monitor_operlog": "/monitor/operlog",
|
"monitor_operlog": "/monitor/operlog",
|
||||||
"mps": "/mps",
|
"mps": "/mps",
|
||||||
"mps_import-heat": "/mps/import-heat",
|
|
||||||
"mps_manual-pricing": "/mps/manual-pricing",
|
"mps_manual-pricing": "/mps/manual-pricing",
|
||||||
"mps_market": "/mps/market",
|
"mps_market": "/mps/market",
|
||||||
"mps_market-yxzetgrb": "/mps/market-yxzetgrb",
|
"mps_market-yxzetgrb": "/mps/market-yxzetgrb",
|
||||||
|
|||||||
@ -1,36 +0,0 @@
|
|||||||
import { request } from '@/service/request';
|
|
||||||
|
|
||||||
/** 获取导入取暖费信息列表 */
|
|
||||||
export function fetchGetImportHeatList (params?: Api.Mps.ImportHeatSearchParams) {
|
|
||||||
return request<Api.Mps.ImportHeatList>({
|
|
||||||
url: '/mps/importHeat/list',
|
|
||||||
method: 'get',
|
|
||||||
params
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 新增导入取暖费信息 */
|
|
||||||
export function fetchCreateImportHeat (data: Api.Mps.ImportHeatOperateParams) {
|
|
||||||
return request<boolean>({
|
|
||||||
url: '/mps/importHeat',
|
|
||||||
method: 'post',
|
|
||||||
data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 修改导入取暖费信息 */
|
|
||||||
export function fetchUpdateImportHeat (data: Api.Mps.ImportHeatOperateParams) {
|
|
||||||
return request<boolean>({
|
|
||||||
url: '/mps/importHeat',
|
|
||||||
method: 'put',
|
|
||||||
data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 批量删除导入取暖费信息 */
|
|
||||||
export function fetchBatchDeleteImportHeat (ids: CommonType.IdType[]) {
|
|
||||||
return request<boolean>({
|
|
||||||
url: `/mps/importHeat/${ids.join(',')}`,
|
|
||||||
method: 'delete'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,77 +0,0 @@
|
|||||||
|
|
||||||
/**
|
|
||||||
* Namespace Api
|
|
||||||
*
|
|
||||||
* All backend api type
|
|
||||||
*/
|
|
||||||
declare namespace Api {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* namespace Mps
|
|
||||||
*
|
|
||||||
* backend api module: "Mps"
|
|
||||||
*/
|
|
||||||
namespace Mps {
|
|
||||||
/** import heat */
|
|
||||||
type ImportHeat = Common.CommonRecord<{
|
|
||||||
/** 主键 */
|
|
||||||
id: CommonType.IdType;
|
|
||||||
/** 用户编码 */
|
|
||||||
userCode: string;
|
|
||||||
/** 用户地址 */
|
|
||||||
userAddress: string;
|
|
||||||
/** 费用类别 */
|
|
||||||
feeType: string;
|
|
||||||
/** 缴费金额 */
|
|
||||||
paymentAmount: number;
|
|
||||||
/** 加热器金额 */
|
|
||||||
heaterAmount: number;
|
|
||||||
/** 缴费日期 */
|
|
||||||
paymentDate: string;
|
|
||||||
/** 流水号 */
|
|
||||||
transactionId: CommonType.IdType;
|
|
||||||
/** 订单状态 */
|
|
||||||
orderStatus: string;
|
|
||||||
/** 计价月份 */
|
|
||||||
importTime: string;
|
|
||||||
/** 租户编号 */
|
|
||||||
tenantId: CommonType.IdType;
|
|
||||||
}>;
|
|
||||||
|
|
||||||
/** import heat search params */
|
|
||||||
type ImportHeatSearchParams = CommonType.RecordNullable<
|
|
||||||
Pick<
|
|
||||||
Api.Mps.ImportHeat,
|
|
||||||
| 'userCode'
|
|
||||||
| 'userAddress'
|
|
||||||
| 'feeType'
|
|
||||||
| 'paymentAmount'
|
|
||||||
| 'heaterAmount'
|
|
||||||
| 'paymentDate'
|
|
||||||
| 'transactionId'
|
|
||||||
| 'orderStatus'
|
|
||||||
| 'importTime'
|
|
||||||
> &
|
|
||||||
Api.Common.CommonSearchParams
|
|
||||||
>;
|
|
||||||
|
|
||||||
/** import heat operate params */
|
|
||||||
type ImportHeatOperateParams = CommonType.RecordNullable<
|
|
||||||
Pick<
|
|
||||||
Api.Mps.ImportHeat,
|
|
||||||
| 'userCode'
|
|
||||||
| 'userAddress'
|
|
||||||
| 'feeType'
|
|
||||||
| 'paymentAmount'
|
|
||||||
| 'heaterAmount'
|
|
||||||
| 'paymentDate'
|
|
||||||
| 'transactionId'
|
|
||||||
| 'orderStatus'
|
|
||||||
| 'importTime'
|
|
||||||
>
|
|
||||||
>;
|
|
||||||
|
|
||||||
/** import heat list */
|
|
||||||
type ImportHeatList = Api.Common.PaginatingQueryRecord<ImportHeat>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -39,7 +39,6 @@ declare module "@elegant-router/types" {
|
|||||||
"monitor_online": "/monitor/online";
|
"monitor_online": "/monitor/online";
|
||||||
"monitor_operlog": "/monitor/operlog";
|
"monitor_operlog": "/monitor/operlog";
|
||||||
"mps": "/mps";
|
"mps": "/mps";
|
||||||
"mps_import-heat": "/mps/import-heat";
|
|
||||||
"mps_manual-pricing": "/mps/manual-pricing";
|
"mps_manual-pricing": "/mps/manual-pricing";
|
||||||
"mps_market": "/mps/market";
|
"mps_market": "/mps/market";
|
||||||
"mps_market-yxzetgrb": "/mps/market-yxzetgrb";
|
"mps_market-yxzetgrb": "/mps/market-yxzetgrb";
|
||||||
@ -152,7 +151,6 @@ declare module "@elegant-router/types" {
|
|||||||
| "monitor_logininfor"
|
| "monitor_logininfor"
|
||||||
| "monitor_online"
|
| "monitor_online"
|
||||||
| "monitor_operlog"
|
| "monitor_operlog"
|
||||||
| "mps_import-heat"
|
|
||||||
| "mps_manual-pricing"
|
| "mps_manual-pricing"
|
||||||
| "mps_market-yxzetgrb"
|
| "mps_market-yxzetgrb"
|
||||||
| "mps_market"
|
| "mps_market"
|
||||||
|
|||||||
@ -1,321 +0,0 @@
|
|||||||
<script setup lang="tsx">
|
|
||||||
import { NDivider } from 'naive-ui';
|
|
||||||
import { fetchBatchDeleteImportHeat, fetchGetImportHeatList } from '@/service/api/mps/import-heat';
|
|
||||||
import { useAppStore } from '@/store/modules/app';
|
|
||||||
import { useAuth } from '@/hooks/business/auth';
|
|
||||||
import { useDownload } from '@/hooks/business/download';
|
|
||||||
import { useTable, useTableOperate } from '@/hooks/common/table';
|
|
||||||
import { $t } from '@/locales';
|
|
||||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
|
||||||
import ImportHeatOperateDrawer from './modules/import-heat-operate-drawer.vue';
|
|
||||||
import ImportHeatSearch from './modules/import-heat-search.vue';
|
|
||||||
import {computed, ref, watch} from "vue";
|
|
||||||
import {useBoolean} from "~/packages/hooks";
|
|
||||||
import ImportHeatImportModal from './modules/import-heat-import-modal.vue';
|
|
||||||
import dayjs from "dayjs";
|
|
||||||
defineOptions({
|
|
||||||
name: 'ImportHeatList'
|
|
||||||
});
|
|
||||||
|
|
||||||
const appStore = useAppStore();
|
|
||||||
const { download } = useDownload();
|
|
||||||
const { hasAuth } = useAuth();
|
|
||||||
const { bool: importVisible, setTrue: openImportModal } = useBoolean();
|
|
||||||
|
|
||||||
const {
|
|
||||||
columns,
|
|
||||||
columnChecks,
|
|
||||||
data,
|
|
||||||
getData,
|
|
||||||
getDataByPage,
|
|
||||||
loading,
|
|
||||||
mobilePagination,
|
|
||||||
searchParams,
|
|
||||||
resetSearchParams
|
|
||||||
} = useTable({
|
|
||||||
apiFn: fetchGetImportHeatList,
|
|
||||||
apiParams: {
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
// if you want to use the searchParams in Form, you need to define the following properties, and the value is null
|
|
||||||
// the value can not be undefined, otherwise the property in Form will not be reactive
|
|
||||||
userCode: null,
|
|
||||||
userAddress: null,
|
|
||||||
feeType: null,
|
|
||||||
paymentAmount: null,
|
|
||||||
heaterAmount: null,
|
|
||||||
paymentDate: null,
|
|
||||||
transactionId: null,
|
|
||||||
orderStatus: null,
|
|
||||||
importTime: null,
|
|
||||||
params: {}
|
|
||||||
},
|
|
||||||
columns: () => [
|
|
||||||
{
|
|
||||||
type: 'selection',
|
|
||||||
align: 'center',
|
|
||||||
width: 48
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'index',
|
|
||||||
title: $t('common.index'),
|
|
||||||
align: 'center',
|
|
||||||
width: 64,
|
|
||||||
resizable: true
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// key: 'id',
|
|
||||||
// title: '主键',
|
|
||||||
// align: 'center',
|
|
||||||
// minWidth: 120,
|
|
||||||
// ellipsis: true,
|
|
||||||
// resizable: true,
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
key: 'userCode',
|
|
||||||
title: '用户编码',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 120,
|
|
||||||
ellipsis: true,
|
|
||||||
resizable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'userAddress',
|
|
||||||
title: '用户地址',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 120,
|
|
||||||
ellipsis: true,
|
|
||||||
resizable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'feeType',
|
|
||||||
title: '费用类别',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 120,
|
|
||||||
ellipsis: true,
|
|
||||||
resizable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'paymentAmount',
|
|
||||||
title: '缴费金额',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 120,
|
|
||||||
ellipsis: true,
|
|
||||||
resizable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'heaterAmount',
|
|
||||||
title: '加热器金额',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 120,
|
|
||||||
ellipsis: true,
|
|
||||||
resizable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'paymentDate',
|
|
||||||
title: '缴费日期',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 120,
|
|
||||||
ellipsis: true,
|
|
||||||
resizable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'transactionId',
|
|
||||||
title: '流水号',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 120,
|
|
||||||
ellipsis: true,
|
|
||||||
resizable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'orderStatus',
|
|
||||||
title: '订单状态',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 120,
|
|
||||||
ellipsis: true,
|
|
||||||
resizable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'importTime',
|
|
||||||
title: '计价月份',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 120,
|
|
||||||
ellipsis: true,
|
|
||||||
resizable: true,
|
|
||||||
slots: {
|
|
||||||
default: ({ row }) => {
|
|
||||||
return dayjs(row.importTime).format('YYYY-MM');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'operate',
|
|
||||||
title: $t('common.operate'),
|
|
||||||
fixed: 'right',
|
|
||||||
width: 130,
|
|
||||||
render: row => {
|
|
||||||
const divider = () => {
|
|
||||||
if (!hasAuth('mps:importHeat:edit') || !hasAuth('mps:importHeat:remove')) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return <NDivider vertical />;
|
|
||||||
};
|
|
||||||
|
|
||||||
const editBtn = () => {
|
|
||||||
if (!hasAuth('mps:importHeat:edit')) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<ButtonIcon
|
|
||||||
text
|
|
||||||
type="primary"
|
|
||||||
icon="material-symbols:drive-file-rename-outline-outline"
|
|
||||||
tooltipContent={$t('common.edit')}
|
|
||||||
onClick={() => edit(row.id!)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const deleteBtn = () => {
|
|
||||||
if (!hasAuth('mps:importHeat:remove')) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<ButtonIcon
|
|
||||||
text
|
|
||||||
type="error"
|
|
||||||
icon="material-symbols:delete-outline"
|
|
||||||
tooltipContent={$t('common.delete')}
|
|
||||||
popconfirmContent={$t('common.confirmDelete')}
|
|
||||||
onPositiveClick={() => handleDelete(row.id!)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class="flex-center gap-8px">
|
|
||||||
|
|
||||||
{deleteBtn()}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
const scrollX = ref(0);
|
|
||||||
// 计算总宽度函数
|
|
||||||
const calculateTotalWidth = () => {
|
|
||||||
let totalWidth = 0;
|
|
||||||
const visibleColumns = columns.value;
|
|
||||||
for (let i = 0; i < visibleColumns.length; i++) {
|
|
||||||
const column = visibleColumns[i];
|
|
||||||
// 获取列的实际渲染宽度
|
|
||||||
// 注意：调整大小时会更新 column.width
|
|
||||||
let width = column.width;
|
|
||||||
// 如果没有显式宽度，则使用minWidth或默认值
|
|
||||||
if (!width) {
|
|
||||||
width = column.minWidth || 120;
|
|
||||||
}
|
|
||||||
// 转换为数字类型
|
|
||||||
width = typeof width === 'string' ? parseInt(width) : width;
|
|
||||||
totalWidth += width;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加额外的50px余量防止边缘裁剪
|
|
||||||
return totalWidth + 50;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 监听列变化并计算宽度
|
|
||||||
watch(columns, (newColumns) => {
|
|
||||||
scrollX.value = calculateTotalWidth();
|
|
||||||
}, { deep: true });
|
|
||||||
|
|
||||||
|
|
||||||
const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
|
|
||||||
useTableOperate(data, getData);
|
|
||||||
|
|
||||||
async function handleBatchDelete() {
|
|
||||||
// request
|
|
||||||
const { error } = await fetchBatchDeleteImportHeat(checkedRowKeys.value);
|
|
||||||
if (error) return;
|
|
||||||
onBatchDeleted();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleDelete(id: CommonType.IdType) {
|
|
||||||
// request
|
|
||||||
const { error } = await fetchBatchDeleteImportHeat([id]);
|
|
||||||
if (error) return;
|
|
||||||
onDeleted();
|
|
||||||
}
|
|
||||||
|
|
||||||
function edit(id: CommonType.IdType) {
|
|
||||||
handleEdit('id', id);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleImport() {
|
|
||||||
openImportModal();
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleExport() {
|
|
||||||
download('/mps/importHeat/export', searchParams, `导入取暖费信息_${new Date().getTime()}.xlsx`);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
|
|
||||||
<ImportHeatSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
|
|
||||||
<NCard title="取暖费信息列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
|
|
||||||
<template #header-extra>
|
|
||||||
<TableHeaderOperation
|
|
||||||
v-model:columns="columnChecks"
|
|
||||||
:disabled-delete="checkedRowKeys.length === 0"
|
|
||||||
:loading="loading"
|
|
||||||
:show-add="hasAuth('mps:importHeat:add')"
|
|
||||||
:show-delete="hasAuth('mps:importHeat:remove')"
|
|
||||||
:show-export="hasAuth('mps:importHeat:export')"
|
|
||||||
@add="handleAdd"
|
|
||||||
@delete="handleBatchDelete"
|
|
||||||
@export="handleExport"
|
|
||||||
@refresh="getData"
|
|
||||||
>
|
|
||||||
<template #after>
|
|
||||||
<NButton v-if="hasAuth('mps:privateEbankNew:export')" size="small" ghost @click="handleImport">
|
|
||||||
<template #icon>
|
|
||||||
<icon-material-symbols:upload-rounded class="text-icon"/>
|
|
||||||
</template>
|
|
||||||
{{ $t('common.import') }}
|
|
||||||
</NButton>
|
|
||||||
</template>
|
|
||||||
</TableHeaderOperation>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!--scroll-x : 所有表格列宽度之和(包含操作列)+操作列宽度-->
|
|
||||||
<NDataTable
|
|
||||||
v-model:checked-row-keys="checkedRowKeys"
|
|
||||||
:columns="columns"
|
|
||||||
:data="data"
|
|
||||||
size="small"
|
|
||||||
:flex-height="!appStore.isMobile"
|
|
||||||
:scroll-x="scrollX"
|
|
||||||
:loading="loading"
|
|
||||||
remote
|
|
||||||
:row-key="row => row.id"
|
|
||||||
:pagination="mobilePagination"
|
|
||||||
class="sm:h-full"
|
|
||||||
@update-resize-widths="scrollX = calculateTotalWidth()"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ImportHeatImportModal v-model:visible="importVisible" @submitted="getDataByPage"/>
|
|
||||||
|
|
||||||
<ImportHeatOperateDrawer
|
|
||||||
v-model:visible="drawerVisible"
|
|
||||||
:operate-type="operateType"
|
|
||||||
:row-data="editingData"
|
|
||||||
@submitted="getDataByPage"
|
|
||||||
/>
|
|
||||||
</NCard>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
@ -1,176 +0,0 @@
|
|||||||
[[[
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { h, ref, watch } from 'vue';
|
|
||||||
import type { UploadFileInfo } from 'naive-ui';
|
|
||||||
import { getToken } from '@/store/modules/auth/shared';
|
|
||||||
import { useDownload } from '@/hooks/business/download';
|
|
||||||
import { getServiceBaseURL } from '@/utils/service';
|
|
||||||
import type FileUpload from '@/components/custom/file-upload.vue';
|
|
||||||
import { $t } from '@/locales';
|
|
||||||
import dayjs from "dayjs";
|
|
||||||
|
|
||||||
defineOptions({
|
|
||||||
name: 'ImportHeatImportModal'
|
|
||||||
});
|
|
||||||
|
|
||||||
interface Emits {
|
|
||||||
(e: 'submitted'): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { download } = useDownload();
|
|
||||||
|
|
||||||
const { baseURL } = getServiceBaseURL(import.meta.env);
|
|
||||||
|
|
||||||
const headers: Record<string, string> = {
|
|
||||||
Authorization: `Bearer ${ getToken() }`,
|
|
||||||
clientid: import.meta.env.VITE_APP_CLIENT_ID!
|
|
||||||
};
|
|
||||||
|
|
||||||
const emit = defineEmits<Emits>();
|
|
||||||
|
|
||||||
const uploadRef = ref<typeof FileUpload>();
|
|
||||||
const message = ref<string>('');
|
|
||||||
const success = ref<boolean>(false);
|
|
||||||
|
|
||||||
const visible = defineModel<boolean>('visible', {
|
|
||||||
default: false
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = ref<Record<string, any>>({
|
|
||||||
updateSupport: false,
|
|
||||||
// importMonth: dayjs().subtract(1, 'month').startOf('month').utc().toISOString()
|
|
||||||
importMonth:new Date(dayjs().subtract(1, 'month').format('YYYY-MM')).toISOString()
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const fileList = ref<UploadFileInfo[]>([]);
|
|
||||||
|
|
||||||
function closeDrawer() {
|
|
||||||
visible.value = false;
|
|
||||||
if (success.value) {
|
|
||||||
emit('submitted');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleSubmit() {
|
|
||||||
fileList.value.forEach(item => {
|
|
||||||
item.status = 'pending';
|
|
||||||
});
|
|
||||||
uploadRef.value?.submit();
|
|
||||||
}
|
|
||||||
|
|
||||||
function isErrorState(xhr: XMLHttpRequest) {
|
|
||||||
const responseText = xhr?.responseText;
|
|
||||||
const response = JSON.parse(responseText);
|
|
||||||
return response.code !== 200;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) {
|
|
||||||
const { file, event } = options;
|
|
||||||
// @ts-expect-error Ignore type errors
|
|
||||||
const responseText = event?.target?.responseText;
|
|
||||||
const response = JSON.parse(responseText);
|
|
||||||
message.value = response.msg;
|
|
||||||
window.$message?.success($t('common.importSuccess'));
|
|
||||||
success.value = true;
|
|
||||||
return file;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleError(options: { file: UploadFileInfo; event?: ProgressEvent }) {
|
|
||||||
const { event } = options;
|
|
||||||
// @ts-expect-error Ignore type errors
|
|
||||||
const responseText = event?.target?.responseText;
|
|
||||||
const msg = JSON.parse(responseText).msg;
|
|
||||||
message.value = msg;
|
|
||||||
window.$message?.error(() => h('div', { innerHTML: msg || $t('common.importFail') }));
|
|
||||||
success.value = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDownloadTemplate() {
|
|
||||||
download(
|
|
||||||
'/mps/importHeat/importTemplate',
|
|
||||||
{},
|
|
||||||
`${ $t('mps.common') }_${ $t('common.importTemplate') }_${ new Date().getTime() }.xlsx`
|
|
||||||
);
|
|
||||||
closeDrawer();
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(visible, () => {
|
|
||||||
if (visible.value) {
|
|
||||||
fileList.value = [];
|
|
||||||
success.value = false;
|
|
||||||
message.value = '';
|
|
||||||
}
|
|
||||||
} );
|
|
||||||
</script>
|
|
||||||
]]]
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<NModal
|
|
||||||
v-model:show="visible"
|
|
||||||
:title="$t('common.import')"
|
|
||||||
preset="card"
|
|
||||||
:bordered="false"
|
|
||||||
display-directive="show"
|
|
||||||
class="max-w-90% w-600px"
|
|
||||||
@close="closeDrawer"
|
|
||||||
>
|
|
||||||
<NUpload
|
|
||||||
ref="uploadRef"
|
|
||||||
v-model:file-list="fileList"
|
|
||||||
:action="`${baseURL}/mps/importHeat/importData`"
|
|
||||||
:headers="headers"
|
|
||||||
:data="data"
|
|
||||||
:max="1"
|
|
||||||
:file-size="50"
|
|
||||||
accept=".xls,.xlsx"
|
|
||||||
:multiple="false"
|
|
||||||
directory-dnd
|
|
||||||
:default-upload="false"
|
|
||||||
list-type="text"
|
|
||||||
:is-error-state="isErrorState"
|
|
||||||
@finish="handleFinish"
|
|
||||||
@error="handleError"
|
|
||||||
>
|
|
||||||
<NUploadDragger>
|
|
||||||
<div class="mb-12px flex-left">
|
|
||||||
<SvgIcon icon="material-symbols:unarchive-outline" class="text-58px color-#d8d8db dark:color-#a1a1a2" />
|
|
||||||
</div>
|
|
||||||
<NText class="text-16px">{{ $t('common.importTip') }}</NText>
|
|
||||||
<NP depth="3" class="mt-8px text-center">
|
|
||||||
{{ $t('common.importSize') }}
|
|
||||||
<b class="text-red-500">50MB</b>
|
|
||||||
{{ $t('common.importFormat') }}
|
|
||||||
<b class="text-red-500">xls/xlsx</b>
|
|
||||||
{{ $t('common.importEnd') }}
|
|
||||||
</NP>
|
|
||||||
</NUploadDragger>
|
|
||||||
</NUpload>
|
|
||||||
<div class="flex-center">
|
|
||||||
<NCheckbox v-model="data.updateSupport">{{ $t('common.updateExisting') }}</NCheckbox>
|
|
||||||
<n-divider vertical />
|
|
||||||
<NDatePicker
|
|
||||||
v-model:value="data.importMonth"
|
|
||||||
type="month"
|
|
||||||
:format="'YYYY-MM'"
|
|
||||||
default-time="08:00:00"
|
|
||||||
:value-format="'YYYY-MM'"
|
|
||||||
:placeholder="$t('common.selectImportMonth')"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<NAlert v-if="message" :title="$t('common.importResult')" :type="success ? 'success' : 'error'" :bordered="false">
|
|
||||||
<template #default>
|
|
||||||
<div v-html="message"></div>
|
|
||||||
</template>
|
|
||||||
</NAlert>
|
|
||||||
<template #footer>
|
|
||||||
<NSpace justify="end" :size="16">
|
|
||||||
<NButton @click="handleDownloadTemplate">{{ $t('common.downloadTemplate') }}</NButton>
|
|
||||||
<NButton type="primary" @click="handleSubmit">{{ $t('common.import') }}</NButton>
|
|
||||||
</NSpace>
|
|
||||||
</template>
|
|
||||||
</NModal>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
@ -1,179 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { computed, reactive, watch } from 'vue';
|
|
||||||
import { fetchCreateImportHeat, fetchUpdateImportHeat } from '@/service/api/mps/import-heat';
|
|
||||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
|
||||||
import { $t } from '@/locales';
|
|
||||||
|
|
||||||
defineOptions({
|
|
||||||
name: 'ImportHeatOperateDrawer'
|
|
||||||
});
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
/** the type of operation */
|
|
||||||
operateType: NaiveUI.TableOperateType;
|
|
||||||
/** the edit row data */
|
|
||||||
rowData?: Api.Mps.ImportHeat | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<Props>();
|
|
||||||
|
|
||||||
interface Emits {
|
|
||||||
(e: 'submitted'): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const emit = defineEmits<Emits>();
|
|
||||||
|
|
||||||
const visible = defineModel<boolean>('visible', {
|
|
||||||
default: false
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const { formRef, validate, restoreValidation } = useNaiveForm();
|
|
||||||
const { createRequiredRule } = useFormRules();
|
|
||||||
|
|
||||||
const title = computed(() => {
|
|
||||||
const titles: Record<NaiveUI.TableOperateType, string> = {
|
|
||||||
add: '新增取暖费信息',
|
|
||||||
edit: '编辑取暖费信息'
|
|
||||||
};
|
|
||||||
return titles[props.operateType];
|
|
||||||
});
|
|
||||||
|
|
||||||
type Model = Api.Mps.ImportHeatOperateParams;
|
|
||||||
|
|
||||||
const model: Model = reactive(createDefaultModel());
|
|
||||||
|
|
||||||
function createDefaultModel(): Model {
|
|
||||||
return {
|
|
||||||
userCode: '',
|
|
||||||
userAddress: '',
|
|
||||||
feeType: '',
|
|
||||||
paymentAmount: undefined,
|
|
||||||
heaterAmount: undefined,
|
|
||||||
paymentDate: undefined,
|
|
||||||
transactionId: '',
|
|
||||||
orderStatus: '',
|
|
||||||
importTime: undefined,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
type RuleKey = Extract<
|
|
||||||
keyof Model,
|
|
||||||
| 'userCode'
|
|
||||||
| 'importTime'
|
|
||||||
| 'tenantId'
|
|
||||||
| 'createDept'
|
|
||||||
| 'createBy'
|
|
||||||
| 'createTime'
|
|
||||||
| 'updateBy'
|
|
||||||
| 'updateTime'
|
|
||||||
>;
|
|
||||||
|
|
||||||
const rules: Record<RuleKey, App.Global.FormRule> = {
|
|
||||||
userCode: createRequiredRule('用户编码不能为空'),
|
|
||||||
importTime: createRequiredRule('计价月份不能为空'),
|
|
||||||
tenantId: createRequiredRule('租户编号不能为空'),
|
|
||||||
createDept: createRequiredRule('创建部门不能为空'),
|
|
||||||
createBy: createRequiredRule('创建者不能为空'),
|
|
||||||
createTime: createRequiredRule('创建时间不能为空'),
|
|
||||||
updateBy: createRequiredRule('更新者不能为空'),
|
|
||||||
updateTime: createRequiredRule('更新时间不能为空')
|
|
||||||
};
|
|
||||||
|
|
||||||
function handleUpdateModelWhenEdit() {
|
|
||||||
if (props.operateType === 'add') {
|
|
||||||
Object.assign(model, createDefaultModel());
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.operateType === 'edit' && props.rowData) {
|
|
||||||
Object.assign(model, props.rowData);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeDrawer() {
|
|
||||||
visible.value = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleSubmit() {
|
|
||||||
await validate();
|
|
||||||
|
|
||||||
const { userCode, userAddress, feeType, paymentAmount, heaterAmount, paymentDate, transactionId, orderStatus, importTime } = model;
|
|
||||||
|
|
||||||
// request
|
|
||||||
if (props.operateType === 'add') {
|
|
||||||
const { error } = await fetchCreateImportHeat({ userCode, userAddress, feeType, paymentAmount, heaterAmount, paymentDate, transactionId, orderStatus, importTime });
|
|
||||||
if (error) return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.operateType === 'edit') {
|
|
||||||
const { error } = await fetchUpdateImportHeat({ });
|
|
||||||
if (error) return;
|
|
||||||
}
|
|
||||||
|
|
||||||
window.$message?.success($t('common.updateSuccess'));
|
|
||||||
closeDrawer();
|
|
||||||
emit('submitted');
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(visible, () => {
|
|
||||||
if (visible.value) {
|
|
||||||
handleUpdateModelWhenEdit();
|
|
||||||
restoreValidation();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
|
|
||||||
<NDrawerContent :title="title" :native-scrollbar="false" closable>
|
|
||||||
<NForm ref="formRef" :model="model" :rules="rules">
|
|
||||||
<NFormItem label="用户编码" path="userCode">
|
|
||||||
<NInput v-model:value="model.userCode" placeholder="请输入用户编码" />
|
|
||||||
</NFormItem>
|
|
||||||
<NFormItem label="用户地址" path="userAddress">
|
|
||||||
<NInput v-model:value="model.userAddress" placeholder="请输入用户地址" />
|
|
||||||
</NFormItem>
|
|
||||||
<NFormItem label="费用类别" path="feeType">
|
|
||||||
<NInput v-model:value="model.feeType" placeholder="请输入费用类别" />
|
|
||||||
</NFormItem>
|
|
||||||
<NFormItem label="缴费金额" path="paymentAmount">
|
|
||||||
<NInput v-model:value="model.paymentAmount" placeholder="请输入缴费金额" />
|
|
||||||
</NFormItem>
|
|
||||||
<NFormItem label="加热器金额" path="heaterAmount">
|
|
||||||
<NInput v-model:value="model.heaterAmount" placeholder="请输入加热器金额" />
|
|
||||||
</NFormItem>
|
|
||||||
<NFormItem label="缴费日期" path="paymentDate">
|
|
||||||
<NDatePicker
|
|
||||||
v-model:formatted-value="model.paymentDate"
|
|
||||||
type="datetime"
|
|
||||||
value-format="yyyy-MM-dd HH:mm:ss"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</NFormItem>
|
|
||||||
<NFormItem label="流水号" path="transactionId">
|
|
||||||
<NInput v-model:value="model.transactionId" placeholder="请输入流水号" />
|
|
||||||
</NFormItem>
|
|
||||||
<NFormItem label="订单状态" path="orderStatus">
|
|
||||||
<NInput v-model:value="model.orderStatus" placeholder="请输入订单状态" />
|
|
||||||
</NFormItem>
|
|
||||||
<NFormItem label="计价月份" path="importTime">
|
|
||||||
<NDatePicker
|
|
||||||
v-model:formatted-value="model.importTime"
|
|
||||||
type="month"
|
|
||||||
value-format="yyyy-MM-dd HH:mm:ss"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</NFormItem>
|
|
||||||
</NForm>
|
|
||||||
<template #footer>
|
|
||||||
<NSpace :size="16">
|
|
||||||
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
|
|
||||||
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
|
|
||||||
</NSpace>
|
|
||||||
</template>
|
|
||||||
</NDrawerContent>
|
|
||||||
</NDrawer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
@ -1,106 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { useNaiveForm } from '@/hooks/common/form';
|
|
||||||
import { $t } from '@/locales';
|
|
||||||
|
|
||||||
defineOptions({
|
|
||||||
name: 'ImportHeatSearch'
|
|
||||||
});
|
|
||||||
|
|
||||||
interface Emits {
|
|
||||||
(e: 'reset'): void;
|
|
||||||
(e: 'search'): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const emit = defineEmits<Emits>();
|
|
||||||
|
|
||||||
const { formRef, validate, restoreValidation } = useNaiveForm();
|
|
||||||
|
|
||||||
|
|
||||||
const model = defineModel<Api.Mps.ImportHeatSearchParams>('model', { required: true });
|
|
||||||
|
|
||||||
|
|
||||||
async function reset() {
|
|
||||||
Object.assign(model.value.params!, {});
|
|
||||||
await restoreValidation();
|
|
||||||
emit('reset');
|
|
||||||
}
|
|
||||||
|
|
||||||
async function search() {
|
|
||||||
await validate();
|
|
||||||
emit('search');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<NCard :bordered="false" size="small" class="card-wrapper">
|
|
||||||
<NCollapse>
|
|
||||||
<NCollapseItem :title="$t('common.search')" name="user-search">
|
|
||||||
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
|
|
||||||
<NGrid responsive="screen" item-responsive>
|
|
||||||
<NFormItemGi span="24 s:12 m:6" label="用户编码" path="userCode" class="pr-24px">
|
|
||||||
<NInput v-model:value="model.userCode" placeholder="请输入用户编码" />
|
|
||||||
</NFormItemGi>
|
|
||||||
<!-- <NFormItemGi span="24 s:12 m:6" label="用户地址" path="userAddress" class="pr-24px">-->
|
|
||||||
<!-- <NInput v-model:value="model.userAddress" placeholder="请输入用户地址" />-->
|
|
||||||
<!-- </NFormItemGi>-->
|
|
||||||
<!-- <NFormItemGi span="24 s:12 m:6" label="费用类别" path="feeType" class="pr-24px">-->
|
|
||||||
<!-- <NSelect-->
|
|
||||||
<!-- v-model:value="model.feeType"-->
|
|
||||||
<!-- placeholder="请选择费用类别"-->
|
|
||||||
<!-- :options="[]"-->
|
|
||||||
<!-- clearable-->
|
|
||||||
<!-- />-->
|
|
||||||
<!-- </NFormItemGi>-->
|
|
||||||
<!-- <NFormItemGi span="24 s:12 m:6" label="缴费金额" path="paymentAmount" class="pr-24px">-->
|
|
||||||
<!-- <NInput v-model:value="model.paymentAmount" placeholder="请输入缴费金额" />-->
|
|
||||||
<!-- </NFormItemGi>-->
|
|
||||||
<!-- <NFormItemGi span="24 s:12 m:6" label="加热器金额" path="heaterAmount" class="pr-24px">-->
|
|
||||||
<!-- <NInput v-model:value="model.heaterAmount" placeholder="请输入加热器金额" />-->
|
|
||||||
<!-- </NFormItemGi>-->
|
|
||||||
<!-- <NFormItemGi span="24 s:12 m:6" label="缴费日期" path="paymentDate" class="pr-24px">-->
|
|
||||||
<!-- <NDatePicker-->
|
|
||||||
<!-- v-model:formatted-value="model.paymentDate"-->
|
|
||||||
<!-- type="datetime"-->
|
|
||||||
<!-- value-format="yyyy-MM-dd HH:mm:ss"-->
|
|
||||||
<!-- clearable-->
|
|
||||||
<!-- />-->
|
|
||||||
<!-- </NFormItemGi>-->
|
|
||||||
<!-- <NFormItemGi span="24 s:12 m:6" label="流水号" path="transactionId" class="pr-24px">-->
|
|
||||||
<!-- <NInput v-model:value="model.transactionId" placeholder="请输入流水号" />-->
|
|
||||||
<!-- </NFormItemGi>-->
|
|
||||||
<!-- <NFormItemGi span="24 s:12 m:6" label="订单状态" path="orderStatus" class="pr-24px">-->
|
|
||||||
<!-- <NInput v-model:value="model.orderStatus" placeholder="请输入订单状态" />-->
|
|
||||||
<!-- </NFormItemGi>-->
|
|
||||||
<NFormItemGi span="24 s:12 m:6" label="计价月份" path="importTime" class="pr-24px">
|
|
||||||
<NDatePicker
|
|
||||||
v-model:formatted-value="model.importTime"
|
|
||||||
type="month"
|
|
||||||
value-format="yyyy-MM-dd HH:mm:ss"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</NFormItemGi>
|
|
||||||
<NFormItemGi span="24" class="pr-24px">
|
|
||||||
<NSpace class="w-full" justify="end">
|
|
||||||
<NButton @click="reset">
|
|
||||||
<template #icon>
|
|
||||||
<icon-ic-round-refresh class="text-icon" />
|
|
||||||
</template>
|
|
||||||
{{ $t('common.reset') }}
|
|
||||||
</NButton>
|
|
||||||
<NButton type="primary" ghost @click="search">
|
|
||||||
<template #icon>
|
|
||||||
<icon-ic-round-search class="text-icon" />
|
|
||||||
</template>
|
|
||||||
{{ $t('common.search') }}
|
|
||||||
</NButton>
|
|
||||||
</NSpace>
|
|
||||||
</NFormItemGi>
|
|
||||||
</NGrid>
|
|
||||||
</NForm>
|
|
||||||
</NCollapseItem>
|
|
||||||
</NCollapse>
|
|
||||||
</NCard>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
Loading…
Reference in New Issue
Block a user