vue列表-新增/编辑功能共用一个保存接口

新增功能

实现方式

在资源列表的顶部，点击"新增资源"按钮，弹出一个模态框，用于填写新增资源的信息。

组件

• ProductModal：新增资源的模态框组件。

数据与方法

• doNewProduct：新增按钮点击事件，弹出新增模态框显示。
• visible：控制新增资源模态框的显示与隐藏
• confirmLoading：控制确认按钮的加载状态。
• form：表单对象，用于表单验证和数据提交。
• handleInput()：处理IP地址输入框的输入事件，验证输入的IP地址格式是否正确。
• doOK()：触发表单验证，提交新增资源的表单数据，并关闭模态框。
• save()：保存接口。
• close()：关闭模态框。
• show()：展示新增资源模态框，并将表单数据重置为空。

示例代码

父组件按钮及点击事件：

<a-button type="primary" @click="doNewProduct" style="margin-bottom: 10px;margin-right:8px;"> 
<a-icon type="plus-circle" /> 
新增资源
</a-button>

<product-modal ref="productModal" @success="handleSuccess"></product-modal>

import ProductModal from "./modal/ProductModal.vue";

doNewProduct() { 
this.$refs.productModal.show({}); 
},

子组件：

<template> 
<a-modal 
:visible="visible" 
title="新增资源" 
okText="确定" 
cancelText="取消" 
:width="width"
@ok="doOK" 
@cancel="visible = false" 
:maskClosable="false" 
:confirmLoading="confirmLoading"
> 
<a-form :form="form"> 
<a-row :md="12" :sm="24"> 
<a-col :span="12"> 
<a-form-item label="IP地址" :labelCol="labelCol" :wrapperCol="wrapperCol"> 
<a-input v-decorator="['resource_ip', { rules: [{ required: true, }] }]" placeholder="请输入IP地址" v-model="inputValue" /> 
</a-form-item> 
</a-col> 
<!-- ...省略其他表单项... --> 
</a-row> 
</a-form> 
</a-modal> 
</template> 
<script> 
import { save } from '@/api/***' // 保存接口调用 
export default { 
name: 'ProductModal', 
data() { 
return { 
visible: false, 
confirmLoading: false, 
form: this.$form.createForm(this), // ...省略其他代码... 
} 
}, 
methods: { 
// ...省略其他方法... 
doOK() { 
const that = this; 
// 触发表单验证 
this.form.validateFields((err, values) => { 
if (!err) { 
that.confirmLoading = true; 
save(requestData).then(res => {   //调用接口进行保存 
if (res.doOK) { 
that.visible = false; 
} else { 
that.$message.success("新增成功！"); 
this.$emit('success'); 
} 
}).finally(() => { 
that.confirmLoading = false; 
that.close(); 
}); 
} 
}); 
}, 
show() { 
this.visible = true; 
this.form.resetFields(); 
this.model = Object.assign({}, {}); 
this.$nextTick(() => { 
this.form.setFieldsValue(
pick(
this.model, 
'resource_ip', 
'字段名...'
)); 
}); 
}, 
}, 
}; 
</script>

在Vue组件中，将ProductModal组件引入并添加相应的页面代码，根据实际需求可自行完善新增资源功能的业务逻辑及表单验证规则。

使用方法

将以上示例代码添加到您的Vue组件的相应位置，点击“新增资源”按钮即可弹出新增资源的模态框，填写表单并保存后，会触发handleSuccess()方法进行刷新资源列表。

编辑功能

实现方式

编辑功能通过点击列表中的编辑按钮，弹出一个模态框，供用户编辑选中的资源。

数据与方法

• showEditModal(record)：打开编辑模态框的方法，在方法中传入选中的资源数据。
• handleSuccess()：处理编辑成功后的回调方法。

示例代码

父组件：

<a type="primary" @click="showEditModal(record)"> 
<a-icon type="edit" /> 
编辑 
</a>

<script> 
import EditModal from "./modal/EditModal.vue"; 
export default { 
components: { EditModal }, 
data() { 
return { 
model: {}, 
selectItem: {}, 
editData: {}, 
dropDown: { 
dataSource: [], 
},

在列表的操作列中添加一个编辑按钮，当用户点击编辑按钮时，调用showEditModal()方法，并传入选中的资源数据。

<EditModal ref="EditModal" :rowData="editData" @success="handleSuccess"></EditModal> 

子组件：

<template> 
<a-modal 
:visible="visible" 
title="修改资源" 
okText="确定" 
cancelText="取消" 
:width="width" 
@ok="doOK" 
@cancel="visible = false" 
:maskClosable="false" 
:confirmLoading="confirmLoading"
> 
<a-form :form="form"> 
<a-row :md="12" :sm="24"> 
<a-col :span="12"> 
<a-form-item label="IP地址" :labelCol="labelCol" :wrapperCol="wrapperCol"> 
<a-input v-decorator="['resource_ip', { rules: [{ required: true, }] }]" placeholder="请输入IP地址" v-model="rowData.resource_ip" /> 
</a-form-item> 
</a-col> 
<!-- ...省略其他表单项... --> 
</a-row> 
</a-form> 
</template> 
<script> 
import { save } from '@/api/***' 
export default { 
name: 'EditModal', 
props: ['rowData'], 
data() { 
return { 
id: '',
model: {}, 
editedData: {}, 
dropDown: { 
dataSource: [], 
}, 
confirmLoading: false, 
form: this.$form.createForm(this),

methods: { 
doOK() { 
const that = this;
this.form.validateFields((err, values) => { 
if (!err) { 
values.id = that.rowData.id; // 将编辑后的数据与被编辑的id数据进行替换 
values.resource_expire_date = values.resource_expire_date.format('YYYY-MM-DD'); 
save(values) // 调用接口进行保存 
.then(res => { 
if (res.success) { 
that.visible = false; 
this.$message.success("修改成功！"); 
this.$emit('success'); 
} else { 
} 
}) .catch(err => { 
}); 
} 
}); 
}, 
show(r) { 
this.selectItem = r;
this.visible = true; 
this.form.setFieldsValue(r); 
r.id = r.id; 
this.model = Object.assign({}, r); 
this.$nextTick(() => { 
this.form.setFieldsValue( 
pick(
this.model, 
'id'，
'resource_name', 
<!--省略其它字段名--> 
) 
); 
}) 
},

在Vue组件中引入一个名为EditModal的编辑模态框组件，并通过ref属性给组件取一个引用，在rowData属性中传入需要编辑的资源数据，监听success事件以处理编辑成功后的回调。

使用方法

将以上示例代码添加到您的Vue组件中，根据实际需求适配编辑按钮的样式和位置。当用户点击编辑按钮时，会弹出一个编辑模态框，用户可在模态框中编辑选中的资源。编辑成功后，触发success事件，您可以在handleSuccess()方法中更新列表数据或进行其他操作。