先看结果
代码如下:
<template>
<div>
<el-dialog
title="设备材料"
:visible.sync="dialogTableVisible"
width="60%"
class="dilogStyle"
>
<div>
<div class="listTit">
<div>设备</div>
<div
class="el-icon-circle-plus-outline"
@click="addEqmentRow(1)"
></div>
</div>
<el-table
border
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
:data="equipmentTableData"
style="width: 100%"
>
<el-table-column prop="name" label="设备名称">
<template slot-scope="scope">
<el-input
v-model="scope.row.name"
autocomplete="off"
size="small"
placeholder="请输入设备名称"
></el-input>
</template>
</el-table-column>
<el-table-column prop="model" label="设备型号">
<template slot-scope="scope">
<el-input
v-model="scope.row.model"
autocomplete="off"
size="small"
placeholder="请输入设备型号"
></el-input>
</template>
</el-table-column>
<el-table-column prop="brand" label="设备品牌">
<template slot-scope="scope">
<el-input
v-model="scope.row.brand"
autocomplete="off"
size="small"
placeholder="请输入设备品牌"
></el-input>
</template>
</el-table-column>
<el-table-column prop="count" label="设备数量">
<template slot-scope="scope">
<el-input
v-model="scope.row.count"
autocomplete="off"
size="small"
placeholder="请输入设备数量"
></el-input>
</template>
</el-table-column>
<el-table-column prop="unit" label="设备单位">
<template slot-scope="scope">
<el-input
v-model="scope.row.unit"
autocomplete="off"
size="small"
placeholder="请输入设备单位"
></el-input>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button
@click="handleDeleteRow(scope.row, 1)"
type="text"
size="small"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<div style="margin-top: 12px">
<div class="listTit">
<div>材料</div>
<div
class="el-icon-circle-plus-outline"
@click="addEqmentRow(2)"
></div>
</div>
<el-table
border
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
:data="materialTableData"
style="width: 100%"
>
<el-table-column prop="name" label="材料名称">
<template slot-scope="scope">
<el-input
v-model="scope.row.name"
autocomplete="off"
size="small"
placeholder="请输入材料名称"
></el-input>
</template>
</el-table-column>
<el-table-column prop="model" label="材料型号">
<template slot-scope="scope">
<el-input
v-model="scope.row.model"
autocomplete="off"
size="small"
placeholder="请输入材料型号"
></el-input>
</template>
</el-table-column>
<el-table-column prop="brand" label="材料品牌">
<template slot-scope="scope">
<el-input
v-model="scope.row.brand"
autocomplete="off"
size="small"
placeholder="请输入材料品牌"
></el-input>
</template>
</el-table-column>
<el-table-column prop="count" label="材料数量">
<template slot-scope="scope">
<el-input
v-model="scope.row.count"
autocomplete="off"
size="small"
placeholder="请输入材料数量"
></el-input>
</template>
</el-table-column>
<el-table-column prop="unit" label="材料单位">
<template slot-scope="scope">
<el-input
v-model="scope.row.unit"
autocomplete="off"
size="small"
placeholder="请输入材料单位"
></el-input>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button
@click="handleDeleteRow(scope.row, 2)"
type="text"
size="small"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogTableVisible = false"
>取 消</el-button
>
<el-button size="mini" type="primary" @click="submitEqMent"
>确 定</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogTableVisible: false,
equipmentTableData: [], //设备
materialTableData: [], //材料
};
},
methods: {
openEqumentDialog(equipment, material) {
console.log('接受设备',equipment)
console.log('接受材料',material)
this.dialogTableVisible = true;
this.equipmentTableData = equipment;
this.materialTableData = material;
},
addEqmentRow(who) {
if (who == 1) {
//设备
let member = this.equipmentTableData.length + 1;
this.equipmentTableData.push({
key: member,
brand: "", //品牌
count: "", //数量
model: "", //型号
name: "", //名称
unit: "", //单位
type: '', //类型
id: '', //id
shop_id: '', //店铺id
spec_id: '', //规格id
goods_id: '', //商品id
});
} else {
let member = this.materialTableData.length + 1;
this.materialTableData.push({
key: member,
brand: "", //品牌
count: "", //数量
model: "", //型号
name: "", //名称
unit: "", //单位
type: '', //类型
id: '', //id
shop_id: '', //店铺id
spec_id: '', //规格id
goods_id: '', //商品id
});
}
},
handleDeleteRow(row, type) {
console.log(row, "删除");
let tableDatas =
type == 1 ? this.equipmentTableData : this.materialTableData;
for (var i = 0; i < tableDatas.length; i++) {
if (tableDatas[i].key == row.key) {
tableDatas.splice(i, 1);
}
}
},
submitEqMent() {
console.log(this.equipmentTableData, "设备");
console.log(this.materialTableData, "材料");
this.$emit("acceptEqMent", {
equipmentTableData: this.equipmentTableData,
materialTableData: this.materialTableData,
});
this.dialogTableVisible = false;
},
},
};
</script>
<style scoped>
.listTit {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.listTit div {
font-size: 16px;
color: #333;
}
.dilogStyle >>> .el-dialog__header {
border-bottom: 1px solid #ebeef5;
}
.dilogStyle >>> .el-dialog__body {
padding-top: 10px;
height: 500px;
overflow-y: auto;
}
.dilogStyle >>> .el-dialog__footer {
border-top: 1px solid #ebeef5;
}
</style>