update:将“新增参数”和“编辑参数”以组件的形式分离出父组件

This commit is contained in:
CGD
2025-04-09 17:14:19 +08:00
parent 9d1871dc80
commit f16d0406ea
3 changed files with 102 additions and 51 deletions
@@ -57,6 +57,7 @@ export default {
})
}).send()
},
// 获取参数列表
getParamsList(params, callback) {
const queryParams = new URLSearchParams({
page: params.page,
@@ -77,6 +78,7 @@ export default {
})
}).send()
},
// 保存
addParam(data, callback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/admin/params`)
@@ -93,6 +95,7 @@ export default {
})
}).send()
},
// 修改
updateParam(data, callback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/admin/params`)
@@ -109,6 +112,7 @@ export default {
})
}).send()
},
// 删除
deleteParam(id, callback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/admin/params`)
@@ -125,6 +129,7 @@ export default {
})
}).send()
},
// 批量删除
batchDeleteParams(ids, callback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/admin/params`)
@@ -0,0 +1,73 @@
<template>
<el-dialog :title="title" :visible.sync="visible" width="500px">
<el-form :model="form" :rules="rules" ref="form" label-width="100px">
<el-form-item label="参数编码" prop="paramCode">
<el-input v-model="form.paramCode" placeholder="请输入参数编码"></el-input>
</el-form-item>
<el-form-item label="参数值" prop="paramValue">
<el-input v-model="form.paramValue" placeholder="请输入参数值"></el-input>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="form.remark" placeholder="请输入备注"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel"> </el-button>
<el-button type="primary" @click="submit"> </el-button>
</div>
</el-dialog>
</template>
<script>
export default {
props: {
title: {
type: String,
default: '新增参数'
},
visible: {
type: Boolean,
default: false
},
form: {
type: Object,
default: () => ({
id: null,
paramCode: '',
paramValue: '',
remark: ''
})
}
},
data() {
return {
rules: {
paramCode: [
{ required: true, message: "请输入参数编码", trigger: "blur" }
],
paramValue: [
{ required: true, message: "请输入参数值", trigger: "blur" }
]
}
};
},
methods: {
submit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.$emit('submit', this.form);
}
});
},
cancel() {
this.$emit('cancel');
}
}
};
</script>
<style scoped>
.dialog-footer {
text-align: right;
}
</style>
+24 -51
View File
@@ -8,7 +8,6 @@
<el-input placeholder="请输入参数编码查询" v-model="searchCode" class="search-input"
@keyup.enter.native="handleSearch" />
<el-button class="btn-search" @click="handleSearch">搜索</el-button>
<el-button type="primary" @click="showAddDialog">新增参数</el-button>
</div>
</div>
@@ -36,6 +35,7 @@
@click="handleSelectAll">全选</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete"
@click="batchDelete">删除</el-button>
<el-button size="mini" type="primary" @click="showAddDialog">新增参数</el-button>
</div>
<div class="custom-pagination">
<button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">
@@ -60,23 +60,7 @@
</div>
<!-- 新增/编辑参数对话框 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
<el-form :model="paramForm" :rules="rules" ref="paramForm" label-width="100px">
<el-form-item label="参数编码" prop="paramCode">
<el-input v-model="paramForm.paramCode" placeholder="请输入参数编码"></el-input>
</el-form-item>
<el-form-item label="参数值" prop="paramValue">
<el-input v-model="paramForm.paramValue" placeholder="请输入参数值"></el-input>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="paramForm.remark" placeholder="请输入备注"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="submitForm"> </el-button>
</div>
</el-dialog>
<param-dialog :title="dialogTitle" :visible.sync="dialogVisible" :form="paramForm" @submit="handleSubmit" @cancel="dialogVisible = false"/>
<div class="copyright">©2025 xiaozhi-esp32-server</div>
</div>
@@ -85,9 +69,10 @@
<script>
import Api from "@/apis/api";
import HeaderBar from "@/components/HeaderBar.vue";
import ParamDialog from "@/components/ParamDialog.vue";
export default {
components: { HeaderBar },
components: { HeaderBar, ParamDialog },
data() {
return {
searchCode: "",
@@ -102,14 +87,6 @@ export default {
paramCode: "",
paramValue: "",
remark: ""
},
rules: {
paramCode: [
{ required: true, message: "请输入参数编码", trigger: "blur" }
],
paramValue: [
{ required: true, message: "请输入参数值", trigger: "blur" }
]
}
};
},
@@ -174,30 +151,26 @@ export default {
this.paramForm = { ...row };
this.dialogVisible = true;
},
submitForm() {
this.$refs.paramForm.validate((valid) => {
if (valid) {
if (this.paramForm.id) {
// 编辑
Api.admin.updateParam(this.paramForm, ({ data }) => {
if (data.code === 0) {
this.$message.success("修改成功");
this.dialogVisible = false;
this.fetchParams();
}
});
} else {
// 新增
Api.admin.addParam(this.paramForm, ({ data }) => {
if (data.code === 0) {
this.$message.success("新增成功");
this.dialogVisible = false;
this.fetchParams();
}
});
handleSubmit(form) {
if (form.id) {
// 编辑
Api.admin.updateParam(form, ({ data }) => {
if (data.code === 0) {
this.$message.success("修改成功");
this.dialogVisible = false;
this.fetchParams();
}
}
});
});
} else {
// 新增
Api.admin.addParam(form, ({ data }) => {
if (data.code === 0) {
this.$message.success("新增成功");
this.dialogVisible = false;
this.fetchParams();
}
});
}
},
deleteParam(row) {
this.$confirm("确定要删除该参数吗?", "警告", {
@@ -533,4 +506,4 @@ export default {
}
}
}
</style>
</style>