修改采购ui

This commit is contained in:
2025-11-19 12:54:44 +08:00
parent ecea954d52
commit 7d0492a545
9 changed files with 1169 additions and 566 deletions

View File

@@ -1,38 +1,40 @@
<template>
<div class="erp-receipt-page">
<el-card shadow="never" class="panel-card">
<div slot="header" class="panel-header">
<section class="surface-panel">
<header class="surface-header">
<span>收货记录</span>
<el-button type="primary" size="mini" @click="openDialog()">新增收货</el-button>
</div>
<div class="toolbar">
<el-input v-model="query.orderId" placeholder="订单ID" size="small" clearable class="toolbar-input" />
<el-input v-model="query.itemId" placeholder="订单明细ID" size="small" clearable class="toolbar-input" />
<el-select v-model="query.quality" placeholder="质检结果" size="small" clearable class="toolbar-input">
<el-button type="primary" size="small" @click="openDialog()">新增收货</el-button>
</header>
<div class="inline-filter">
<el-input v-model="query.orderId" placeholder="订单ID" size="small" clearable />
<el-input v-model="query.itemId" placeholder="订单明细ID" size="small" clearable />
<el-select v-model="query.quality" placeholder="质检结果" size="small" clearable>
<el-option label="合格" value="OK" />
<el-option label="不合格" value="NG" />
</el-select>
<el-button size="small" type="primary" @click="loadData">查询</el-button>
<el-button size="small" @click="resetQuery">重置</el-button>
<div class="filter-actions">
<el-button size="small" type="primary" @click="loadData">查询</el-button>
<el-button size="small" @click="resetQuery">重置</el-button>
</div>
</div>
<el-table :data="list" border size="small" v-loading="loading">
<el-table-column prop="receiptId" label="ID" width="80" />
<el-table-column prop="orderId" label="订单ID" width="120" />
<el-table-column prop="itemId" label="明细ID" width="120" />
<el-table-column prop="receivedQty" label="收货数量" width="120" />
<el-table-column prop="qualityResult" label="质检结果" width="120">
<el-table-column prop="orderId" label="订单ID" />
<el-table-column prop="itemId" label="明细ID" />
<el-table-column prop="receivedQty" label="收货数量" />
<el-table-column prop="qualityResult" label="质检结果">
<template slot-scope="scope">
<el-tag :type="scope.row.qualityResult === 'NG' ? 'danger' : 'success'" size="mini">
{{ scope.row.qualityResult || 'OK' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="receiptTime" label="收货时间" width="160" />
<el-table-column label="备注" min-width="160" prop="remark" />
<el-table-column prop="receiptTime" label="收货时间" />
<el-table-column label="备注" prop="remark" />
<el-table-column label="操作" width="140">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="openDialog(scope.row)">编辑</el-button>
<el-button type="text" size="mini" style="color:#c0392b" @click="handleDelete(scope.row)">删除</el-button>
<el-button type="text" size="mini" class="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -43,19 +45,19 @@
:limit.sync="query.pageSize"
@pagination="loadData"
/>
</el-card>
</section>
<el-card shadow="never" class="panel-card">
<div slot="header" class="panel-header">
<section class="surface-panel">
<header class="surface-header">
<span>到货趋势</span>
</div>
</header>
<el-table :data="chartData" border size="small" height="300">
<el-table-column prop="date" label="日期" width="140" />
<el-table-column prop="date" label="日期" />
<el-table-column prop="totalQty" label="累计收货(吨)" />
<el-table-column prop="qualifiedQty" label="合格数量(吨)" />
<el-table-column prop="ngQty" label="不合格(吨)" />
</el-table>
</el-card>
</section>
<el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="480px">
<el-form :model="dialog.form" :rules="rules" ref="form" label-width="100px" size="small">
@@ -187,28 +189,40 @@ export default {
<style lang="scss" scoped>
.erp-receipt-page {
padding: 16px;
background: #eef1f3;
min-height: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
.panel-card {
margin-bottom: 18px;
border: 1px solid #d0d5d8;
.surface-panel {
background: #fff;
border: 1px solid #d6dce1;
border-radius: 4px;
padding: 16px;
}
.panel-header {
.surface-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
color: #1f2d3d;
}
.toolbar {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.toolbar-input {
width: 140px;
margin-right: 8px;
.inline-filter {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
> *:not(.filter-actions) {
flex: 1 1 150px;
}
.filter-actions {
display: flex;
gap: 8px;
}
}
.danger {
color: #c0392b;
}
</style>