|
@@ -2,61 +2,67 @@
|
|
|
<div>
|
|
|
<Paragraph title="基础信息">
|
|
|
<template>
|
|
|
- <el-form ref="form" size="mini" >
|
|
|
+ <el-form ref="form" size="mini" :model="form">
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="6">
|
|
|
- <el-form-item label="采购订单号" prop="name" required>
|
|
|
- <el-input v-model="form.name"></el-input>
|
|
|
+ <el-form-item label="采购订单号" prop="orderNo" required>
|
|
|
+ <el-input v-model="form.orderNo" placeholder="输入采购订单号"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <el-form-item label="采购方" prop="name" required>
|
|
|
- <el-input v-model="form.name"></el-input>
|
|
|
+ <el-form-item label="采购方" prop="puchaseSource" required>
|
|
|
+ <el-input v-model="form.puchaseSource" placeholder="输入采购方"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <el-form-item label="联系电话" prop="name" required>
|
|
|
- <el-input v-model="form.name"></el-input>
|
|
|
+ <el-form-item label="联系电话" prop="contactWay" required>
|
|
|
+ <el-input v-model="form.contactWay" placeholder="输入联系电话"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <el-form-item label="负责人" prop="name" required>
|
|
|
- <el-input v-model="form.name"></el-input>
|
|
|
+ <el-form-item label="负责人" prop="responsible" required>
|
|
|
+ <el-input v-model="form.responsible" placeholder="输入负责人"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <el-form-item label="商品采购总数" prop="name" required>
|
|
|
- <el-input v-model="form.name"></el-input>
|
|
|
+ <el-form-item label="商品采购总数" prop="totalQuantity" required>
|
|
|
+ <el-input v-model="form.totalQuantity" placeholder="输入商品采购总数"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <el-form-item label="采购总斤数" prop="name" required>
|
|
|
- <el-input v-model="form.name"></el-input>
|
|
|
+ <el-form-item label="采购总KG数" prop="totalWeight" required>
|
|
|
+ <el-input v-model="form.totalWeight" placeholder="输入采购总KG数"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <el-form-item label="总价" prop="name" required>
|
|
|
- <el-input v-model="form.name"></el-input>
|
|
|
+ <el-form-item label="总价" prop="totalPrice" required>
|
|
|
+ <el-input v-model="form.totalPrice" placeholder="输入总价"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <el-form-item label="支付金额" prop="name" required>
|
|
|
- <el-input v-model="form.name"></el-input>
|
|
|
+ <el-form-item label="支付金额" prop="actualPrice" required>
|
|
|
+ <el-input v-model="form.actualPrice" placeholder="输入支付金额"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <el-form-item label="支付方式" prop="name" required>
|
|
|
- <el-input v-model="form.name"></el-input>
|
|
|
+ <el-form-item label="支付方式" prop="purchaseType" required>
|
|
|
+ <el-input v-model="form.purchaseType" placeholder="输入支付方式"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
- <el-form-item label="采购时间" prop="name" required>
|
|
|
- <el-input v-model="form.name"></el-input>
|
|
|
+ <el-form-item label="采购时间" prop="purchaseTime" required>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.purchaseTime"
|
|
|
+ format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="选择日期时间">
|
|
|
+ </el-date-picker>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
- <el-form-item label="发票截图" prop="name" required>
|
|
|
- <ImageUpload :isShowTip="false" />
|
|
|
+ <el-form-item label="发票截图" prop="fileId">
|
|
|
+ <ImageUpload @input="input" :isShowTip="false" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -65,16 +71,86 @@
|
|
|
</Paragraph>
|
|
|
<Paragraph title="商品信息">
|
|
|
<template>
|
|
|
- <el-button type="primary" @click="handleAddGoods">增加商品</el-button>
|
|
|
- <p></p>
|
|
|
- <el-table>
|
|
|
- <el-table-column label="商品名称" prop="1" min-width="80" />
|
|
|
- <el-table-column label="单价(元)" prop="3" min-width="80" />
|
|
|
- <el-table-column label="总数" prop="2" min-width="80" />
|
|
|
- <el-table-column label="总价(元)" prop="4" min-width="80" />
|
|
|
- <el-table-column label="操作" align="left" width="130" fixed="right">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button type="text" size="mini">删除</el-button>
|
|
|
+ <div style="display: flex;align-items: center">
|
|
|
+ <el-button type="primary" @click="handleAddGoods">增加商品</el-button>
|
|
|
+ <div style="display: flex;margin-left: auto">总价:<span style="font-size: 20px;color: #ff0000">¥{{totalAmount}}</span></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table :data="selectedItems" style="width: 100%">
|
|
|
+ <!-- 商品名称 -->
|
|
|
+ <el-table-column label="商品名称" prop="materialName" min-width="120"></el-table-column>
|
|
|
+ <!-- 单价(数字输入) -->
|
|
|
+ <el-table-column label="单价(元)" min-width="120">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <div>
|
|
|
+ <el-input-number
|
|
|
+ v-if="scope.row.editing.status"
|
|
|
+ v-model="scope.row.editUnitPrice"
|
|
|
+ :precision="2"
|
|
|
+ :min="0"
|
|
|
+ size="mini"
|
|
|
+ controls-position="right"
|
|
|
+ />
|
|
|
+ <span v-else>¥ {{ scope.row.unitPrice.toFixed(2) }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- 总数(数字输入) -->
|
|
|
+ <el-table-column label="总数" min-width="100">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <div>
|
|
|
+ <el-input-number
|
|
|
+ v-if="scope.row.editing.status"
|
|
|
+ v-model="scope.row.editTotalQuantity"
|
|
|
+ :min="1"
|
|
|
+ :max="9999"
|
|
|
+ size="mini"
|
|
|
+ controls-position="right"
|
|
|
+ />
|
|
|
+ <span v-else>{{ scope.row.totalQuantity }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 总价(自动计算) -->
|
|
|
+ <el-table-column label="总价" min-width="120">
|
|
|
+ <template v-slot="scope">
|
|
|
+ ¥ {{ (scope.row.totalQuantity * scope.row.unitPrice).toFixed(2) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 操作列 -->
|
|
|
+ <el-table-column label="操作" width="150" fixed="right">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <el-button
|
|
|
+ v-if="!scope.row.editing.status"
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click="startRowEdit(scope.row)">
|
|
|
+ 编辑
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="!scope.row.editing.status"
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click="deleteSelectedItems(scope.row)">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ <div v-else>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click="saveRowEdit(scope.row)"
|
|
|
+ >
|
|
|
+ 保存
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click="cancelRowEdit(scope.row)"
|
|
|
+ >
|
|
|
+ 取消
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
@@ -85,13 +161,20 @@
|
|
|
title="材料列表"
|
|
|
:visible.sync="materialDialog"
|
|
|
class="common-dialog"
|
|
|
- width="80%"
|
|
|
- >
|
|
|
- <PagingTable>
|
|
|
+ width="80%">
|
|
|
+ <PagingTable :fetch="getList">
|
|
|
<el-table-column label="序号" prop="id" min-width="80" />
|
|
|
- <el-table-column label="原材料名称" prop="1" min-width="80" />
|
|
|
- <el-table-column label="规格" prop="3" min-width="80" />
|
|
|
- <el-table-column label="原材料编号" prop="2" min-width="80" />
|
|
|
+ <el-table-column label="原材料名称" prop="name" min-width="80" />
|
|
|
+ <el-table-column label="规格" prop="specification" min-width="80" />
|
|
|
+ <el-table-column label="原材料编号" prop="materialNo" min-width="80" />
|
|
|
+ <el-table-column
|
|
|
+ fixed="right"
|
|
|
+ label="操作"
|
|
|
+ width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button v-if="!isSelected(scope.row.id)" @click="addMaterial(scope.row)" type="text" size="small"><i class="el-icon-plus"></i>选择材料</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</PagingTable>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button type="primary" @click="close">关闭</el-button>
|
|
@@ -102,6 +185,8 @@
|
|
|
<script>
|
|
|
import Paragraph from "@/components/Paragraph";
|
|
|
import PagingTable from "@/components/PagingTable";
|
|
|
+import {getMaterialList} from "@/api/material";
|
|
|
+
|
|
|
export default {
|
|
|
name: "FormUI",
|
|
|
components: { Paragraph, PagingTable },
|
|
@@ -118,8 +203,16 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
materialDialog: false,
|
|
|
+ // 目标集合(存放被选中的数据)
|
|
|
+ selectedItems: [],
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ totalAmount() {
|
|
|
+ var amount = this.selectedItems.reduce((sum, item) => sum + (item.totalQuantity * item.unitPrice), 0);
|
|
|
+ return amount.toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
handleAddGoods() {
|
|
|
this.materialDialog = true;
|
|
@@ -127,6 +220,97 @@ export default {
|
|
|
close() {
|
|
|
this.materialDialog = false;
|
|
|
},
|
|
|
+ async getList(queryParams) {
|
|
|
+ queryParams.pageNo = queryParams.page
|
|
|
+ var data = await getMaterialList(queryParams)
|
|
|
+ return {list:data.data.data,total:data.data.total}
|
|
|
+ },
|
|
|
+ addMaterial(item){
|
|
|
+ console.log(item)
|
|
|
+ // 检查是否已存在(根据唯一ID判断)
|
|
|
+ const isExist = this.selectedItems.some(
|
|
|
+ selected => selected.id === item.id
|
|
|
+ );
|
|
|
+ if (isExist) {
|
|
|
+ this.$message.warning("该商品已存在,不能重复添加!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var materialItem = {
|
|
|
+ materialId:item.id,
|
|
|
+ materialName:item.name,
|
|
|
+ totalQuantity:0,
|
|
|
+ unitPrice:0,
|
|
|
+ editing: {
|
|
|
+ status: false,
|
|
|
+ field: null,
|
|
|
+ original: null
|
|
|
+ },
|
|
|
+ editMaterialName: '',
|
|
|
+ editUnitPrice: 0,
|
|
|
+ editTotalQuantity: 0
|
|
|
+ }
|
|
|
+ console.log(materialItem)
|
|
|
+ // 深拷贝对象避免引用问题
|
|
|
+ const clonedItem = JSON.parse(JSON.stringify(materialItem));
|
|
|
+ this.selectedItems.push(clonedItem);
|
|
|
+ },
|
|
|
+ deleteSelectedItems(item){
|
|
|
+ this.selectedItems = this.selectedItems.filter(
|
|
|
+ s => s.materialId !== item.materialId
|
|
|
+ );
|
|
|
+ },
|
|
|
+ submit(){
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.form.orderItemList = this.selectedItems
|
|
|
+ resolve(this.form);
|
|
|
+ } else {
|
|
|
+ reject();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ input(urls){
|
|
|
+ this.form.fileId = urls
|
|
|
+ },
|
|
|
+ // 初始化行编辑状态
|
|
|
+ initRowEdit(row) {
|
|
|
+ this.$set(row, 'editing', {
|
|
|
+ status: false,
|
|
|
+ field: null,
|
|
|
+ original: {
|
|
|
+ materialName: row.materialName,
|
|
|
+ unitPrice: row.unitPrice,
|
|
|
+ totalQuantity: row.totalQuantity
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$set(row, 'editMaterialName', row.materialName)
|
|
|
+ this.$set(row, 'editUnitPrice', row.unitPrice)
|
|
|
+ this.$set(row, 'editTotalQuantity', row.totalQuantity)
|
|
|
+ },
|
|
|
+ // 批量编辑模式
|
|
|
+ startRowEdit(row) {
|
|
|
+ this.initRowEdit(row)
|
|
|
+ row.editing.status = true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 保存整行修改
|
|
|
+ saveRowEdit(row) {
|
|
|
+ row.unitPrice = parseFloat(row.editUnitPrice)
|
|
|
+ row.totalQuantity = parseInt(row.editTotalQuantity)
|
|
|
+ row.editing.status = false
|
|
|
+ this.$message.success('修改已保存')
|
|
|
+ },
|
|
|
+ // 取消修改
|
|
|
+ cancelRowEdit(row) {
|
|
|
+ row.unitPrice = row.editing.original.unitPrice
|
|
|
+ row.totalQuantity = row.editing.original.totalQuantity
|
|
|
+ row.editing.status = false
|
|
|
+ },
|
|
|
+ isSelected(id) {
|
|
|
+ return this.selectedItems.some(item => item.materialId === id);
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|