211 lines
12 KiB
Vue
211 lines
12 KiB
Vue
|
<template>
|
||
|
|
<div class="app-container">
|
||
|
|
<el-form :model="queryParams" size="small" :inline="true" ref="queryForm">
|
||
|
|
<el-form-item label="状态" prop="status">
|
||
|
|
<el-select v-model="queryParams.status" placeholder="全部" clearable style="width:120px">
|
||
|
|
<el-option label="草稿" value="draft"/>
|
||
|
|
<el-option label="已提交" value="submitted"/>
|
||
|
|
<el-option label="已采纳" value="accepted"/>
|
||
|
|
<el-option label="已拒绝" value="rejected"/>
|
||
|
|
</el-select>
|
||
|
|
</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="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增报价</el-button>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-table v-loading="loading" :data="list">
|
||
|
|
<el-table-column label="报价单号" prop="quoteNo" width="140" />
|
||
|
|
<el-table-column label="RFQ编号" prop="rfqNo" width="140" />
|
||
|
|
<el-table-column label="RFQ标题" prop="rfqTitle" :show-overflow-tooltip="true" />
|
||
|
|
<el-table-column label="供应商" prop="supplierName" width="150" />
|
||
|
|
<el-table-column label="总金额" prop="totalAmount" width="120" align="right">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span style="color:#409EFF;font-weight:bold">¥{{ scope.row.totalAmount | numFormat }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="交期(天)" prop="deliveryDays" width="90" align="center" />
|
||
|
|
<el-table-column label="状态" width="100">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-tag :type="statusType(scope.row.status)">{{ statusLabel(scope.row.status) }}</el-tag>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="提交时间" prop="submitTime" width="160" />
|
||
|
|
<el-table-column label="操作" align="center" width="200">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-if="scope.row.status==='draft'">编辑</el-button>
|
||
|
|
<el-button size="mini" type="text" @click="handleSubmit(scope.row)" v-if="scope.row.status==='draft'" style="color:#67C23A">提交</el-button>
|
||
|
|
<el-button size="mini" type="text" style="color:#67C23A" @click="handleAccept(scope.row)" v-if="scope.row.status==='submitted'">采纳</el-button>
|
||
|
|
<el-button size="mini" type="text" style="color:#F56C6C" @click="handleReject(scope.row)" v-if="scope.row.status==='submitted'">拒绝</el-button>
|
||
|
|
<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||
|
|
|
||
|
|
<el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
|
||
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||
|
|
<el-row>
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="关联RFQ" prop="rfqId">
|
||
|
|
<el-select v-model="form.rfqId" placeholder="选择RFQ" filterable style="width:100%">
|
||
|
|
<el-option v-for="r in rfqOptions" :key="r.rfqId" :label="r.rfqNo+' - '+r.rfqTitle" :value="r.rfqId" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="供应商" prop="supplierId">
|
||
|
|
<el-select v-model="form.supplierId" placeholder="选择供应商" filterable style="width:100%">
|
||
|
|
<el-option v-for="s in supplierOptions" :key="s.supplierId" :label="s.supplierName" :value="s.supplierId" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row>
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="有效期(天)" prop="validDays">
|
||
|
|
<el-input-number v-model="form.validDays" :min="1" style="width:100%" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="交货期(天)" prop="deliveryDays">
|
||
|
|
<el-input-number v-model="form.deliveryDays" :min="0" style="width:100%" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<el-form-item label="币种" prop="currency">
|
||
|
|
<el-select v-model="form.currency" style="width:100%">
|
||
|
|
<el-option label="人民币 CNY" value="CNY"/>
|
||
|
|
<el-option label="美元 USD" value="USD"/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-divider content-position="left">报价明细</el-divider>
|
||
|
|
<el-table :data="form.items || []" border size="small">
|
||
|
|
<el-table-column label="物料名称" min-width="150">
|
||
|
|
<template slot-scope="scope"><el-input v-model="scope.row.materialName" size="small" /></template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="规格" min-width="120">
|
||
|
|
<template slot-scope="scope"><el-input v-model="scope.row.spec" size="small" /></template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="单位" width="80">
|
||
|
|
<template slot-scope="scope"><el-input v-model="scope.row.unit" size="small" /></template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="数量" width="100">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-input-number v-model="scope.row.quantity" :min="0" :precision="2" size="small" style="width:90px" />
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="单价" width="130">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-input-number v-model="scope.row.unitPrice" :min="0" :precision="4" size="small" style="width:120px" @change="calcTotal(scope.row)" />
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="金额" width="120" align="right">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span style="color:#409EFF">{{ ((scope.row.quantity||0)*(scope.row.unitPrice||0)).toFixed(2) }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" width="60" align="center">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button type="text" icon="el-icon-delete" @click="form.items.splice(scope.$index,1)" style="color:#f56c6c" />
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<el-button size="small" style="margin-top:8px" @click="form.items.push({ materialName:'',spec:'',unit:'',quantity:1,unitPrice:0,deliveryDays:0 })" icon="el-icon-plus">添加行</el-button>
|
||
|
|
|
||
|
|
<el-form-item label="备注" style="margin-top:16px"><el-input v-model="form.note" type="textarea" rows="2" /></el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<div slot="footer">
|
||
|
|
<el-button @click="open=false">取消</el-button>
|
||
|
|
<el-button type="primary" @click="submitForm">保存</el-button>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
|
||
|
|
<!-- Detail drawer -->
|
||
|
|
<el-drawer :title="'报价单详情'" :visible.sync="detailOpen" size="700px">
|
||
|
|
<div v-if="detailData" style="padding:20px">
|
||
|
|
<el-descriptions :column="2" border>
|
||
|
|
<el-descriptions-item label="报价单号">{{ detailData.quoteNo }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="供应商">{{ detailData.supplierName }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="RFQ">{{ detailData.rfqNo }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="状态"><el-tag :type="statusType(detailData.status)">{{ statusLabel(detailData.status) }}</el-tag></el-descriptions-item>
|
||
|
|
<el-descriptions-item label="总金额"><span style="color:#409EFF;font-size:18px;font-weight:bold">¥{{ detailData.totalAmount }}</span></el-descriptions-item>
|
||
|
|
<el-descriptions-item label="交货期">{{ detailData.deliveryDays }} 天</el-descriptions-item>
|
||
|
|
</el-descriptions>
|
||
|
|
<el-divider>明细</el-divider>
|
||
|
|
<el-table :data="detailData.items || []" border size="small">
|
||
|
|
<el-table-column label="物料" prop="materialName" />
|
||
|
|
<el-table-column label="规格" prop="spec" />
|
||
|
|
<el-table-column label="数量" prop="quantity" align="right" />
|
||
|
|
<el-table-column label="单价" prop="unitPrice" align="right" />
|
||
|
|
<el-table-column label="金额" prop="totalPrice" align="right" />
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
</el-drawer>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { listQuotation, getQuotation, addQuotation, updateQuotation, submitQuotation, acceptQuotation, rejectQuotation } from "@/api/bid/quotation";
|
||
|
|
import { listRfq } from "@/api/bid/rfq";
|
||
|
|
import { listSupplier } from "@/api/bid/supplier";
|
||
|
|
export default {
|
||
|
|
name: "Quotation",
|
||
|
|
filters: { numFormat: v => v ? Number(v).toFixed(2) : "0.00" },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
loading: false, total: 0, list: [],
|
||
|
|
open: false, title: "", detailOpen: false, detailData: null,
|
||
|
|
rfqOptions: [], supplierOptions: [],
|
||
|
|
queryParams: { pageNum: 1, pageSize: 10, status: null },
|
||
|
|
form: { items: [], currency: "CNY", validDays: 30 },
|
||
|
|
rules: {
|
||
|
|
rfqId: [{ required: true, message: "请选择RFQ", trigger: "change" }],
|
||
|
|
supplierId: [{ required: true, message: "请选择供应商", trigger: "change" }],
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() { this.getList(); this.loadOptions(); },
|
||
|
|
methods: {
|
||
|
|
getList() {
|
||
|
|
this.loading = true;
|
||
|
|
listQuotation(this.queryParams).then(r => { this.list = r.rows; this.total = r.total; this.loading = false; });
|
||
|
|
},
|
||
|
|
loadOptions() {
|
||
|
|
listRfq({ pageSize: 200, status: "published" }).then(r => { this.rfqOptions = r.rows || []; });
|
||
|
|
listSupplier({ pageSize: 200 }).then(r => { this.supplierOptions = r.rows || []; });
|
||
|
|
},
|
||
|
|
handleQuery() { this.queryParams.pageNum = 1; this.getList(); },
|
||
|
|
resetQuery() { this.resetForm("queryForm"); this.handleQuery(); },
|
||
|
|
handleAdd() { this.form = { items: [], currency: "CNY", validDays: 30, status: "draft" }; this.open = true; this.title = "新增报价"; },
|
||
|
|
handleUpdate(row) { getQuotation(row.quotationId).then(r => { this.form = r.data; this.open = true; this.title = "编辑报价"; }); },
|
||
|
|
handleView(row) { getQuotation(row.quotationId).then(r => { this.detailData = r.data; this.detailOpen = true; }); },
|
||
|
|
handleSubmit(row) {
|
||
|
|
this.$modal.confirm("确认提交报价？提交后不可修改").then(() => submitQuotation(row.quotationId))
|
||
|
|
.then(() => { this.$modal.msgSuccess("提交成功"); this.getList(); });
|
||
|
|
},
|
||
|
|
handleAccept(row) { acceptQuotation(row.quotationId).then(() => { this.$modal.msgSuccess("已采纳"); this.getList(); }); },
|
||
|
|
handleReject(row) { rejectQuotation(row.quotationId).then(() => { this.$modal.msgSuccess("已拒绝"); this.getList(); }); },
|
||
|
|
submitForm() {
|
||
|
|
this.$refs["form"].validate(valid => {
|
||
|
|
if (!valid) return;
|
||
|
|
const action = this.form.quotationId ? updateQuotation : addQuotation;
|
||
|
|
action(this.form).then(() => { this.$modal.msgSuccess("保存成功"); this.open = false; this.getList(); });
|
||
|
|
});
|
||
|
|
},
|
||
|
|
statusType(s) { return { draft:"info", submitted:"warning", accepted:"success", rejected:"danger" }[s] || ""; },
|
||
|
|
statusLabel(s) { return { draft:"草稿", submitted:"已提交", accepted:"已采纳", rejected:"已拒绝" }[s] || s; },
|
||
|
|
calcTotal(row) {}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|