823 lines
25 KiB
Vue
823 lines
25 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 查询表单部分保持不变 -->
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
|
||
<!-- 库存日期 -->
|
||
<el-form-item label="库存日期">
|
||
<el-date-picker
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
align="right"
|
||
unlink-panels
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
format="yyyy-MM-dd"
|
||
value-format="yyyy-MM-dd"
|
||
style="width: 240px"
|
||
:picker-options="pickerOptions">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
|
||
<!-- 货品类别 - 级联多选 -->
|
||
<el-form-item label="货品类别">
|
||
<el-cascader
|
||
v-model="selectedCategories"
|
||
:options="goodsCategoryOptions"
|
||
:show-all-levels="false"
|
||
:props="categoryProps"
|
||
clearable
|
||
filterable
|
||
multiple
|
||
collapse-tags
|
||
placeholder="请选择货品类别"
|
||
style="width: 200px;"
|
||
@change="handleCategoryChange">
|
||
</el-cascader>
|
||
|
||
</el-form-item>
|
||
|
||
<!-- 所属区域 -->
|
||
<el-form-item label="所属区域">
|
||
<el-cascader
|
||
v-model="selectedOrg"
|
||
:options="orgOptions"
|
||
:show-all-levels="false"
|
||
clearable
|
||
filterable
|
||
placeholder="请选择所属区域"
|
||
:props="{
|
||
checkStrictly: true,
|
||
expandTrigger: 'hover',
|
||
value: 'orgId',
|
||
label: 'orgName',
|
||
children: 'children'
|
||
}"
|
||
style="width: 200px;"
|
||
@change="handleAreaChange">
|
||
</el-cascader>
|
||
</el-form-item>
|
||
|
||
<!-- 货品仓库 -->
|
||
<el-form-item label="货品仓库" prop="warehouseId">
|
||
<el-select
|
||
v-model="queryParams.warehouseIdList"
|
||
multiple
|
||
placeholder="请选择货品仓库"
|
||
clearable
|
||
style="width: 200px"
|
||
@change="handleWarehouseChange">
|
||
<el-option
|
||
v-for="item in wareHouseOptions"
|
||
:key="item.warehouseId"
|
||
:label="item.warehouseName"
|
||
:value="item.warehouseId">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<!-- 货品名称 -->
|
||
<el-form-item label="货品名称" prop="goodsName">
|
||
<el-input
|
||
v-model="queryParams.materialName"
|
||
placeholder="请输入货品名称"
|
||
maxlength="100"
|
||
clearable
|
||
style="width: 200px"/>
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 操作按钮栏 -->
|
||
<el-row :gutter="10" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="warning"
|
||
plain
|
||
icon="el-icon-download"
|
||
size="mini"
|
||
@click="handleExport"
|
||
>导出</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="info"
|
||
plain
|
||
icon="el-icon-printer"
|
||
size="mini"
|
||
@click="handlePrint"
|
||
>打印</el-button>
|
||
</el-col>
|
||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||
</el-row>
|
||
|
||
<!-- 数据表格 - 只修改字段名称以匹配后端实体 -->
|
||
<el-table
|
||
v-loading="loading"
|
||
:data="tableListData"
|
||
border
|
||
show-summary
|
||
:summary-method="getSummaries">
|
||
<el-table-column label="序号" align="center" width="60" type="index">
|
||
<template slot-scope="scope">
|
||
<span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 货品编码 -->
|
||
<el-table-column label="货品编码" align="center" prop="materialCode" width="120" :show-overflow-tooltip="true"/>
|
||
<!-- 货品名称 -->
|
||
<el-table-column label="货品名称" align="center" prop="materialName" width="150" :show-overflow-tooltip="true"/>
|
||
<!-- 货品类别 -->
|
||
<el-table-column label="货品类别" align="center" prop="categoryName" width="120" :show-overflow-tooltip="true"/>
|
||
<!-- 计量单位 -->
|
||
<el-table-column label="计量单位" align="center" prop="unitName" width="100"/>
|
||
<!-- 货品规格 -->
|
||
<el-table-column label="货品规格" align="center" prop="size" width="120" :show-overflow-tooltip="true"/>
|
||
<!-- 所属区域 -->
|
||
<el-table-column label="所属区域" align="center" prop="areaName" width="120" :show-overflow-tooltip="true"/>
|
||
<!-- 所属仓库 -->
|
||
<el-table-column label="所属仓库" align="center" prop="warehouseName" width="120" :show-overflow-tooltip="true"/>
|
||
<!-- 入库数量 -->
|
||
<el-table-column label="入库数量" align="center" prop="intoTotalNum" width="100">
|
||
<template slot-scope="scope">
|
||
<span>{{ formatNumber(scope.row.intoTotalNum) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 入库金额(元) -->
|
||
<el-table-column label="入库金额(元)" align="center" prop="intoTotalAmount" width="120">
|
||
<template slot-scope="scope">
|
||
<span>{{ formatMoney((scope.row.intoTotalAmount || 0) / 100) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 入库总数量 -->
|
||
<el-table-column label="入库总数量" align="center" prop="intoTotalNum" width="120">
|
||
<template slot-scope="scope">
|
||
<span>{{ formatNumber(scope.row.intoTotalNum) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 入库总金额(元) -->
|
||
<el-table-column label="入库总金额(元)" align="center" prop="intoTotalAmount" width="130">
|
||
<template slot-scope="scope">
|
||
<span>{{ formatMoney((scope.row.intoTotalAmount || 0) / 100) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 出库数量 -->
|
||
<el-table-column label="出库数量" align="center" prop="outTotalNum" width="100">
|
||
<template slot-scope="scope">
|
||
<span>{{ formatNumber(scope.row.outTotalNum) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 出库金额(元) -->
|
||
<el-table-column label="出库金额(元)" align="center" prop="outTotalAmount" width="120">
|
||
<template slot-scope="scope">
|
||
<span>{{ formatMoney((scope.row.outTotalAmount || 0) / 100) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 出库总数量 -->
|
||
<el-table-column label="出库总数量" align="center" prop="outTotalNum" width="120">
|
||
<template slot-scope="scope">
|
||
<span>{{ formatNumber(scope.row.outTotalNum) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 出库总金额(元) -->
|
||
<el-table-column label="出库总金额(元)" align="center" prop="outTotalAmount" width="130">
|
||
<template slot-scope="scope">
|
||
<span>{{ formatMoney((scope.row.outTotalAmount || 0) / 100) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页组件 -->
|
||
<pagination
|
||
v-show="total>0"
|
||
:total="total"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 导入区域树API
|
||
import {getTreeArea} from "@/api/canteen/canteenRecord";
|
||
// 导入库存入库相关API
|
||
import {
|
||
listInventoryIntoDetail,
|
||
exportInventoryIntoDetail,
|
||
getWarehouseList,
|
||
getGoodsCategoryDict
|
||
} from "@/api/report/inventoryhz";
|
||
|
||
export default {
|
||
name: "InventoryIntoDetail",
|
||
dicts: [],
|
||
data() {
|
||
return {
|
||
// 合计数据
|
||
summaryData: null,
|
||
|
||
// 区域树选项
|
||
orgOptions: [],
|
||
selectedOrg: [], // 选中的区域
|
||
|
||
// 货品类别相关数据
|
||
goodsCategoryOptions: [], // 货品类别树形数据
|
||
selectedCategories: [], // 选中的货品类别路径数组
|
||
categoryProps: {
|
||
expandTrigger: 'hover',
|
||
value: 'id',
|
||
label: 'dictLabel',
|
||
children: 'children',
|
||
emitPath: true,
|
||
multiple: true
|
||
},
|
||
|
||
// 仓库下拉选项
|
||
wareHouseOptions: [],
|
||
|
||
// 遮罩层
|
||
loading: true,
|
||
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
|
||
// 总条数
|
||
total: 0,
|
||
|
||
// 表格数据
|
||
tableListData: [],
|
||
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
recordId: null, // 单据编号
|
||
categoryIdList: [], // 货品类别ID列表（包含所有子节点）
|
||
warehouseIdList: [], // 仓库ID列表
|
||
goodsName: null, // 货品名称
|
||
areaIdList: [], // 区域ID列表
|
||
startDate: null, // 开始日期
|
||
endDate: null // 结束日期
|
||
},
|
||
|
||
// 日期范围
|
||
dateRange: this.defaultDateRange(),
|
||
|
||
// 日期选择器快捷选项
|
||
pickerOptions: {
|
||
shortcuts: [{
|
||
text: '最近一周',
|
||
onClick: (picker) => {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
|
||
picker.$emit('pick', [this.formatDate(start), this.formatDate(end)]);
|
||
}
|
||
}, {
|
||
text: '最近一个月',
|
||
onClick: (picker) => {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||
picker.$emit('pick', [this.formatDate(start), this.formatDate(end)]);
|
||
}
|
||
}, {
|
||
text: '最近三个月',
|
||
onClick: (picker) => {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
|
||
picker.$emit('pick', [this.formatDate(start), this.formatDate(end)]);
|
||
}
|
||
}]
|
||
}
|
||
};
|
||
},
|
||
created() {
|
||
// 初始化数据
|
||
this.getTree(); // 获取区域树
|
||
this.getWareHouseData(); // 获取仓库列表
|
||
this.getGoodsCategoryData(); // 获取货品类别树
|
||
this.getList(); // 获取列表数据
|
||
},
|
||
methods: {
|
||
/**
|
||
* 自定义合计计算方法
|
||
*/
|
||
getSummaries(param) {
|
||
const { columns, data } = param;
|
||
const sums = [];
|
||
|
||
columns.forEach((column, index) => {
|
||
if (index === 0) {
|
||
// 第一列显示"合计"
|
||
sums[index] = '合计';
|
||
return;
|
||
}
|
||
|
||
// 根据列名判断需要合计的字段
|
||
const columnProp = column.property;
|
||
if (this.summaryData) {
|
||
switch(columnProp) {
|
||
case 'intoTotalNum':
|
||
sums[index] = this.formatNumber(this.summaryData.intoTotalNum || 0);
|
||
break;
|
||
case 'intoTotalAmount':
|
||
sums[index] = this.formatMoney((this.summaryData.intoTotalAmount || 0) / 100);
|
||
break;
|
||
case 'outTotalNum':
|
||
sums[index] = this.formatNumber(this.summaryData.outTotalNum || 0);
|
||
break;
|
||
case 'outTotalAmount':
|
||
sums[index] = this.formatMoney((this.summaryData.outTotalAmount || 0) / 100);
|
||
break;
|
||
default:
|
||
// 其他列显示空
|
||
sums[index] = '';
|
||
break;
|
||
}
|
||
} else {
|
||
sums[index] = '';
|
||
}
|
||
});
|
||
|
||
return sums;
|
||
},
|
||
|
||
// 保持其他方法不变
|
||
getGoodsCategoryData() {
|
||
getGoodsCategoryDict().then((response) => {
|
||
const data = response.data || response || [];
|
||
console.log('获取到的货品类别数据:', data);
|
||
|
||
// 如果后端返回的是平铺数据，需要转换为树形结构
|
||
if (data.length > 0 && !data[0].children) {
|
||
// 使用我们自己的构建树方法
|
||
this.goodsCategoryOptions = this.buildCategoryTree(data);
|
||
} else {
|
||
// 如果已经是树形结构，直接使用
|
||
this.goodsCategoryOptions = data;
|
||
}
|
||
|
||
console.log('转换后的货品类别树:', this.goodsCategoryOptions);
|
||
}).catch(error => {
|
||
console.error('获取货品类别失败:', error);
|
||
this.goodsCategoryOptions = [];
|
||
});
|
||
},
|
||
|
||
buildCategoryTree(list) {
|
||
// 创建根节点（原料和商品）
|
||
const tree = [];
|
||
|
||
// 1. 原料根节点
|
||
const materialRoot = {
|
||
id: 25595457052610560,
|
||
dictLabel: "原料",
|
||
parentId: -1,
|
||
children: []
|
||
};
|
||
|
||
// 2. 商品根节点
|
||
const goodsRoot = {
|
||
id: 65595542415085568,
|
||
dictLabel: "商品",
|
||
parentId: -1,
|
||
children: []
|
||
};
|
||
|
||
// 将数据按 parent_id 分组
|
||
const map = {};
|
||
list.forEach(item => {
|
||
if (!map[item.id]) {
|
||
map[item.id] = { ...item, children: [] };
|
||
}
|
||
});
|
||
|
||
// 构建树结构
|
||
list.forEach(item => {
|
||
if (item.parentId === 25595457052610560) {
|
||
const child = { ...item, children: [] };
|
||
materialRoot.children.push(child);
|
||
map[item.id] = child;
|
||
} else if (item.parentId === 65595542415085568) {
|
||
const child = { ...item, children: [] };
|
||
goodsRoot.children.push(child);
|
||
map[item.id] = child;
|
||
} else if (item.parentId !== -1 && map[item.parentId]) {
|
||
const child = { ...item, children: [] };
|
||
if (!map[item.parentId].children) {
|
||
map[item.parentId].children = [];
|
||
}
|
||
map[item.parentId].children.push(child);
|
||
map[item.id] = child;
|
||
}
|
||
});
|
||
|
||
tree.push(materialRoot, goodsRoot);
|
||
return tree;
|
||
},
|
||
|
||
handleCategoryChange(values) {
|
||
if (!values || values.length === 0) {
|
||
this.queryParams.categoryIdList = [];
|
||
return;
|
||
}
|
||
let allCategoryIds = [];
|
||
values.forEach(path => {
|
||
const selectedId = path[path.length - 1];
|
||
const node = this.findCategoryNodeById(selectedId, this.goodsCategoryOptions);
|
||
if (node) {
|
||
allCategoryIds.push(...this.getAllChildCategoryIds(node));
|
||
}
|
||
});
|
||
|
||
this.queryParams.categoryIdList = Array.from(new Set(allCategoryIds));
|
||
|
||
console.log("最终传给后台的 categoryIdList =", this.queryParams.categoryIdList);
|
||
},
|
||
|
||
findCategoryNodeById(id, options) {
|
||
for (const node of options) {
|
||
if (node.id === id) {
|
||
return node;
|
||
}
|
||
if (node.children && node.children.length > 0) {
|
||
const found = this.findCategoryNodeById(id, node.children);
|
||
if (found) return found;
|
||
}
|
||
}
|
||
return null;
|
||
},
|
||
|
||
getAllChildCategoryIds(node) {
|
||
if (!node) return [];
|
||
|
||
let ids = [node.id];
|
||
|
||
if (node.children && node.children.length > 0) {
|
||
node.children.forEach(child => {
|
||
ids = ids.concat(this.getAllChildCategoryIds(child));
|
||
});
|
||
}
|
||
|
||
return ids;
|
||
},
|
||
|
||
getSelectedOrgIds() {
|
||
if (!this.selectedOrg || this.selectedOrg.length === 0) return [];
|
||
const lastValue = this.selectedOrg[this.selectedOrg.length - 1];
|
||
// 找到对应节点
|
||
let stack = [...this.orgOptions];
|
||
let node = null;
|
||
for (let val of this.selectedOrg) {
|
||
node = stack.find(item => item.orgId === val);
|
||
if (!node) break;
|
||
stack = node.children || [];
|
||
}
|
||
|
||
if (node) {
|
||
return this.getAllChildIds(node, this.orgOptions);
|
||
}
|
||
return [lastValue];
|
||
},
|
||
|
||
getAllChildIds(node, options) {
|
||
let ids = [node.orgId]; // 当前节点
|
||
if (node.children && node.children.length > 0) {
|
||
node.children.forEach(child => {
|
||
ids = ids.concat(this.getAllChildIds(child, options)); // 递归获取子节点
|
||
});
|
||
}
|
||
return ids;
|
||
},
|
||
|
||
getTree() {
|
||
getTreeArea().then(res => {
|
||
this.orgOptions = res || [];
|
||
});
|
||
},
|
||
|
||
handleAreaChange() {
|
||
// 区域变化时，重新加载仓库列表
|
||
this.queryParams.warehouseIdList = [];
|
||
this.getWareHouseData();
|
||
},
|
||
|
||
handleWarehouseChange() {
|
||
// 可以在这里添加其他逻辑
|
||
},
|
||
|
||
getWareHouseData() {
|
||
const areaIdList = this.getSelectedOrgIds();
|
||
|
||
console.log("选中的 orgId 列表：", areaIdList, Array.isArray(areaIdList));
|
||
|
||
if (!areaIdList || !areaIdList.length) {
|
||
this.wareHouseOptions = [];
|
||
return;
|
||
}
|
||
getWarehouseList({
|
||
areaIdList: areaIdList.join(',')
|
||
}).then(res => {
|
||
this.wareHouseOptions = res.data || [];
|
||
});
|
||
},
|
||
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1;
|
||
this.getList();
|
||
},
|
||
|
||
resetQuery() {
|
||
this.dateRange = this.defaultDateRange();
|
||
this.selectedOrg = [];
|
||
this.selectedCategories = [];
|
||
this.summaryData = null;
|
||
this.queryParams = {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
recordId: null,
|
||
categoryIdList: [],
|
||
warehouseIdList: [],
|
||
goodsName: null,
|
||
areaIdList: [],
|
||
startDate: null,
|
||
endDate: null
|
||
};
|
||
this.resetForm("queryForm");
|
||
this.getWareHouseData();
|
||
this.handleQuery();
|
||
},
|
||
|
||
getList() {
|
||
this.loading = true;
|
||
|
||
// 获取选中的区域ID列表
|
||
this.queryParams.areaIdList = this.getSelectedOrgIds();
|
||
|
||
// 处理日期范围
|
||
if (this.dateRange && this.dateRange.length === 2) {
|
||
this.queryParams.startDate = this.dateRange[0];
|
||
this.queryParams.endDate = this.dateRange[1];
|
||
} else {
|
||
this.queryParams.startDate = null;
|
||
this.queryParams.endDate = null;
|
||
}
|
||
// 调用API查询
|
||
listInventoryIntoDetail(this.queryParams).then(response => {
|
||
const data = response.data || response;
|
||
this.tableListData = data.rows || [];
|
||
this.total = Number(data.total) || 0;
|
||
this.summaryData = data.summary || null;
|
||
console.log('合计数据:', this.summaryData);
|
||
this.loading = false;
|
||
}).catch(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
|
||
handleExport() {
|
||
// 处理日期范围
|
||
let startDate = '';
|
||
let endDate = '';
|
||
|
||
if (this.dateRange && this.dateRange.length === 2) {
|
||
const start = this.dateRange[0];
|
||
const end = this.dateRange[1];
|
||
|
||
startDate = start + ' 00:00:00';
|
||
endDate = end + ' 23:59:59';
|
||
}
|
||
|
||
// 构建参数
|
||
let param = {
|
||
pageNum: this.queryParams.pageNum,
|
||
pageSize: this.queryParams.pageSize,
|
||
recordId: this.queryParams.recordId,
|
||
categoryIdList: this.queryParams.categoryIdList,
|
||
warehouseIdList: this.queryParams.warehouseIdList,
|
||
materialName: this.queryParams.materialName,
|
||
areaIdList: this.getSelectedOrgIds(),
|
||
startDate: startDate,
|
||
endDate: endDate
|
||
};
|
||
|
||
// 使用download方法（参考另一个模块）
|
||
this.$modal.confirm('是否确认导出货品汇总明细数据项？').then(() => {
|
||
this.loading = true;
|
||
|
||
// 使用download方法
|
||
this.download(
|
||
'/smart-canteen/drp/inventoryIntohz/goods/summary/export',
|
||
param,
|
||
`货品库存明细_${new Date().getTime()}.xlsx`
|
||
).then(() => {
|
||
this.loading = false;
|
||
this.$modal.msgSuccess("导出成功");
|
||
}).catch(error => {
|
||
this.loading = false;
|
||
console.error('导出失败:', error);
|
||
this.$modal.msgError("导出失败");
|
||
});
|
||
}).catch(() => {
|
||
// 用户取消
|
||
});
|
||
},
|
||
|
||
handlePrint() {
|
||
const printData = {
|
||
title: '库存入库明细表',
|
||
columns: [
|
||
{ prop: 'materialCode', label: '货品编码', width: 120 },
|
||
{ prop: 'materialName', label: '货品名称', width: 150 },
|
||
{ prop: 'categoryName', label: '货品类别', width: 120 },
|
||
{ prop: 'unitName', label: '计量单位', width: 100 },
|
||
{ prop: 'size', label: '货品规格', width: 120 },
|
||
{ prop: 'areaName', label: '所属区域', width: 120 },
|
||
{ prop: 'warehouseName', label: '所属仓库', width: 120 },
|
||
{ prop: 'intoTotalNum', label: '入库数量', width: 100 },
|
||
{ prop: 'intoTotalAmount', label: '入库金额(元)', width: 120 },
|
||
{ prop: 'intoTotalNum', label: '入库总数量', width: 120 },
|
||
{ prop: 'intoTotalAmount', label: '入库总金额(元)', width: 130 },
|
||
{ prop: 'outTotalNum', label: '出库数量', width: 100 },
|
||
{ prop: 'outTotalAmount', label: '出库金额(元)', width: 120 },
|
||
{ prop: 'outTotalNum', label: '出库总数量', width: 120 },
|
||
{ prop: 'outTotalAmount', label: '出库总金额(元)', width: 130 }
|
||
],
|
||
data: this.tableListData,
|
||
queryParams: this.queryParams
|
||
};
|
||
|
||
const printWindow = window.open('', '_blank');
|
||
const printContent = this.generatePrintHTML(printData);
|
||
printWindow.document.write(printContent);
|
||
printWindow.document.close();
|
||
printWindow.focus();
|
||
setTimeout(() => {
|
||
printWindow.print();
|
||
printWindow.close();
|
||
}, 500);
|
||
},
|
||
|
||
generatePrintHTML(printData) {
|
||
let html = `
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>${printData.title}</title>
|
||
<style>
|
||
body { font-family: "Microsoft YaHei", Arial, sans-serif; margin: 20px; }
|
||
h2 { text-align: center; margin-bottom: 20px; }
|
||
table { width: 100%; border-collapse: collapse; font-size: 12px; }
|
||
th, td { border: 1px solid #000; padding: 8px; text-align: center; }
|
||
th { background-color: #f0f0f0; font-weight: bold; }
|
||
.print-info { margin-bottom: 20px; font-size: 12px; }
|
||
@media print {
|
||
@page { size: landscape; margin: 10mm; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h2>${printData.title}</h2>
|
||
<div class="print-info">
|
||
<p>打印时间：${new Date().toLocaleString()}</p>
|
||
<p>共 ${printData.data.length} 条记录</p>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
`;
|
||
|
||
printData.columns.forEach(col => {
|
||
html += `<th>${col.label}</th>`;
|
||
});
|
||
|
||
html += `
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
`;
|
||
|
||
printData.data.forEach(row => {
|
||
html += '<tr>';
|
||
printData.columns.forEach(col => {
|
||
let value = row[col.prop] || '-';
|
||
if (col.prop === 'intoTotalAmount' || col.prop === 'outTotalAmount') {
|
||
value = this.formatMoney((value || 0) / 100);
|
||
} else if (col.prop === 'intoTotalNum' || col.prop === 'outTotalNum') {
|
||
value = this.formatNumber(value);
|
||
}
|
||
html += `<td>${value}</td>`;
|
||
});
|
||
html += '</tr>';
|
||
});
|
||
|
||
html += `
|
||
</tbody>
|
||
</table>
|
||
</body>
|
||
</html>
|
||
`;
|
||
|
||
return html;
|
||
},
|
||
|
||
defaultDateRange() {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000);
|
||
return [this.formatDate(start), this.formatDate(end)];
|
||
},
|
||
|
||
formatDate(date) {
|
||
if (!date) return '';
|
||
const d = new Date(date);
|
||
const year = d.getFullYear();
|
||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||
const day = String(d.getDate()).padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
},
|
||
|
||
formatDateTime(date) {
|
||
if (!date) return '';
|
||
const d = new Date(date);
|
||
const year = d.getFullYear();
|
||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||
const day = String(d.getDate()).padStart(2, '0');
|
||
const hours = String(d.getHours()).padStart(2, '0');
|
||
const minutes = String(d.getMinutes()).padStart(2, '0');
|
||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||
},
|
||
|
||
formatMoney(value) {
|
||
if (value === null || value === undefined || value === '') return '0.00';
|
||
return Number(value).toFixed(2);
|
||
},
|
||
|
||
formatNumber(value) {
|
||
if (value === null || value === undefined || value === '') return '0';
|
||
return Number(value);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.app-container {
|
||
padding: 20px;
|
||
}
|
||
|
||
/* 合计行样式增强 */
|
||
::v-deep .el-table__footer-wrapper tbody td {
|
||
background-color: #f5f7fa;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
}
|
||
|
||
::v-deep .el-table__footer-wrapper tbody td:first-child {
|
||
font-weight: bold;
|
||
color: #409EFF;
|
||
}
|
||
|
||
/* 表格样式 */
|
||
::v-deep .el-table__fixed-right td.blue-record-col .cell {
|
||
color: #1677ff !important;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 调整表单样式 */
|
||
::v-deep .el-form-item {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
/* 调整按钮样式 */
|
||
::v-deep .el-button {
|
||
margin-left: 0;
|
||
}
|
||
|
||
::v-deep .el-form-item__content {
|
||
line-height: 32px;
|
||
}
|
||
|
||
/* 调整表格样式 */
|
||
::v-deep .el-table {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
::v-deep .el-table th {
|
||
background-color: #f5f7fa;
|
||
color: #303133;
|
||
}
|
||
|
||
::v-deep .el-pagination {
|
||
margin-top: 15px;
|
||
}
|
||
</style>
|