<template>
<eh-layout card full-content>
<el-form
:inline="true"
:model="searchForm" label-width="80px" class="search-form" >
<div class="search-container" style="display
: flex; align-items
: center; gap
: 10px; margin-left
: 10px;margin-bottom
: 10px;">
<el-button class="custom-btn" @click="generateReport"
:loading="loadingGenerate">核算</el-button>
<el-select
v-model="searchForm.type"
placeholder="请选择查询类型"
style="width
: 140px;"
clearable
>
<!-- 可扩展其他查询条件 -->
<el-option label="加工单号" value="jgdh"></el-option>
<el-option label="单据日期" value="documentDate"></el-option>
<el-option label="产品名称" value="cpmc"></el-option>
<el-option label="规格型号" value="ggxh"></el-option>
<el-option label="高级查询" value="cpmcAndGgxh"></el-option>
</el-select>
<template v-if="searchForm.type === 'jgdh'">
<el-input
v-model="searchForm.keyword"
placeholder="请输入加工单号"
style="width
: 230px;"
@keyup.enter.native="onSearch"
/>
</template>
<template v-else-if="searchForm.type === 'documentDate'">
<el-date-picker
v-model="searchForm.documentDate"
type="date"
placeholder="选择单据日期"
value-format="yyyy-MM-dd"
style="width
: 230px;"
@change="onSearch"
/>
</template>
<template v-else-if="searchForm.type === 'cpmc'">
<el-input
v-model="searchForm.cpmc"
placeholder="请输入产品名称"
style="width
: 230px;"
@keyup.enter.native="onSearch"
clearable
/>
</template>
<template v-else-if="searchForm.type === 'ggxh'">
<el-input
v-model="searchForm.ggxh"
placeholder="请输入规格型号"
style="width
: 230px;"
@keyup.enter.native="onSearch"
clearable
/>
</template>
<template v-else-if="searchForm.type === 'cpmcAndGgxh'">
<el-input
v-model="searchForm.keyword"
placeholder="请输入加工单号"
style="width
: 230px;"
@keyup.enter.native="onSearch"
/>
<el-input
v-model="searchForm.cpmc"
placeholder="请输入产品名称"
style="width
: 230px;"
@keyup.enter.native="onSearch"
clearable
/>
<el-input
v-model="searchForm.ggxh"
placeholder="请输入规格型号"
style="width
: 230px;"
@keyup.enter.native="onSearch"
clearable
/>
<el-date-picker
v-model="searchForm.documentDate"
type="date"
placeholder="选择单据日期"
value-format="yyyy-MM-dd"
style="width
: 230px;"
@change="onSearch"
/>
</template>
<el-button icon="el-icon-search" @click="onSearch" />
<el-button icon="el-icon-refresh-right" @click="resetSearch" />
</div>
</el-form>
<el-table
v-loading="loading"
:data="tableData"
style="width
: 100%"
row-key="header.id"
:expand-row-keys="expandedRowKeys"
@expand-change="handleExpandChange"
border
stripe
>
<!-- 展开行显示明细数据 -->
<el-table-column type="expand">
<template #default="props">
<el-table
:data="props.row.
mxList"
border
size="mini"
style="width
: 95%; margin
: 0 auto"
>
<el-table-column prop="cbxm" label="成本项目" width="380" />
<el-table-column prop="zxwlmc" label="子项物料名称" width="389" />
<el-table-column prop="zxwlxhl" label="子项物料耗用量" width="400" align="right" />
<el-table-column prop="zxwlje" label="子项物料金额" width="400" align="right" />
</el-table>
</template>
</el-table-column>
<!-- 主记录字段 -->
<el-table-column prop="header.jgdh" label="加工单号" width="250" sortable />
<el-table-column prop="header.cpmc" label="产品名称" width="250" />
<el-table-column prop="header.ggxh" label="规格型号" width="250" />
<el-table-column prop="header.dw" label="主单位" width="250" />
<el-table-column prop="header.rksl" label="入库数量（主单位）" width="200" align="right" />
<el-table-column prop="header.fdw" label="辅单位" width="250" />
<el-table-column prop="header.rkslfdw" label="入库数量（辅单位）" width="200" align="right" />
<el-table-column prop="header.zcb" label="总成本" width="207" align="right" />
<el-table-column prop="header.dwcb" label="单位成本（主单位）" width="150" align="right" />
<el-table-column prop="header.dwcbfdw" label="单位成本（辅单位）" width="150" align="right" />
<el-table-column prop="header.documentDate" label="单据日期" width="150" align="right">
<template #default="scope">
{{ formatDate(scope.row.header.documentDate) }}
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<div style="display
: flex; justify-content
: flex-end; margin-top
: 20px;">
<el-pagination
background
layout="prev, pager, next, sizes, total"
:total="totalRecords"
:page-size="pageSize"
:current-page="currentPage"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</div>
</eh-layout>
</template>
<script>
export default {
name
: 'WorkOrderPagination',
data() {
return {
tableData
: [], // 表格数据
totalRecords
: 0, // 总记录数
currentPage
: 1, // 当前页码
pageSize
: 10, // 每页显示数量
expandedRowKeys
: [], // 当前展开的行keys
searchForm
: {
type
: null, // 默认查询类型为空
keyword
: '', // 查询关键词
documentDate
: '',
cpmc
: '',
ggxh
: ''
},
loading
: false,//列表加载状态
loadingGenerate
: false//核算按钮状态
};
},
mounted() {
this.fetchData();
},
methods
: {
// 获取数据
async fetchData() {
this.loading = true
try {
const params = {
page
: this.currentPage,
pageSize
: this.pageSize,
cpmc
: this.searchForm.cpmc?.trim() || '', // 始终传递，空则为空字符串
ggxh
: this.searchForm.ggxh?.trim() || ''
};
if (this.searchForm.jgdh) params.jgdh = this.searchForm.jgdh?.trim() || '';
if (this.searchForm.documentDate) params.documentDate = this.searchForm.documentDate;
if (this.searchForm.cpmc) params.cpmc = this.searchForm.cpmc?.trim() || '';
if (this.searchForm.ggxh) params.ggxh = this.searchForm.ggxh?.trim() || '';
const response = await this.$http.post(
'uempCostRcbjsdController!findCostByCodeAndDateRange.m',
params
);
this.tableData = response.rows;
this.totalRecords = parseInt(response.records);
// 每次加载新数据时，清空展开的行
this.expandedRowKeys = [];
} catch (error) {
console.error('获取数据失败
:', error);
this.$message.error('数据加载失败');
}
this.loading = false
},
// 分页改变
handlePageChange(page) {
this.currentPage = page;
this.fetchData();
},
// 每页数量改变
handleSizeChange(size) {
this.pageSize = size;
this.currentPage = 1;
this.fetchData();
},
// 格式化货币显示
formatCurrency(value) {
if (!value) return '0.00';
const num = parseFloat(value);
return num.toLocaleString('zh-CN', {
minimumFractionDigits
: 2,
maximumFractionDigits
: 2
});
},
formatDate(timestamp) {
if (!timestamp) return '--';
const date = new Date(timestamp); // 注意：JS 时间戳是毫秒，直接可用
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
},
// 处理展开行变化
handleExpandChange(row, expandedRows) {
// 只保留当前展开的行
this.expandedRowKeys = expandedRows.length > 0 ? [row.header.id]
: [];
},
onSearch() {
this.currentPage = 1
this.fetchData()
},
// 重置方法
resetSearch() {
this.searchForm = {
type
: null, // 重置为不选中任何选项
keyword
: '',
documentDate
: ''
};
this.currentPage = 1;
this.fetchData(); // 重置后自动查询所有数据
},
// 核算
generateReport() {
this.loadingGenerate = true
this.$http
.post('uempCostRcbjsdController!generateDailyCostReport.m')
.then(response => {
if (response.type === 'error') {
this.$message.error(response.data || '操作失败');
} else if (response.type === 'warn' || response.type === 'warning') {
this.$message.warning(response.data || '操作完成');
} else {
this.$message.success(response.data || '核算成功，数据已刷新');
}
})
.catch(error => {
console.error('请求失败：', error);
this.$message.error('网络错误，请检查连接或联系管理员');
})
.finally(() => {
this.loadingGenerate = false;
});
}
}
};
</script>
<style scoped>
/* 筛选*/
.search-form {
display
: flex;
justify-content
: flex-end;
align-items
: center;
}
.search-controls {
display
: flex;
align-items
: center;
}
.search-container {
display
: flex;
align-items
: center;
gap
: 10px;
margin-left
: 10px;
}
.custom-btn {
background-color
: #4068E0;
border-color
: #4068E0;
color
: #fff;
border-radius
: 18px; /* 圆角 */
}
::v-deep .el-table th,
::v-deep .el-table td {
text-align
: center !important; /* 水平居中 */
vertical-align
: middle; /* 垂直居中（可选） */
height: 40px;
padding
: 6px 0;
}
/* 可选：让表头背景色更清晰 */
::v-deep .el-table th.is-leaf,
::v-deep .el-table th > .cell {
text-align
: center !important;
font-weight
: 600;
}
</style>
能把这个组件改成
使用 <eh-
grid吗
扫一扫
49
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
