一个完整的增删改查模块（以我们的项目‘危化品库管理’模块为例）

共计 15038 个字符，预计需要花费 38 分钟才能阅读完成。

父组件列表页面
<!– 危化品库管理 –>
<template>
<div>
<!– 添加 –>
<div class=”right add” @click=”add”>
</div>
<!– 搜索 –>
<div class=”searchPart”>
<div class=”search_row”>
<el-form :inline=”true” :model=”form” :rules=”rules” ref=”elform”>
<el-form-item label=” 危化品名称：” prop=”dangerousname”>
<div><input type=”text” @keyup.enter=”handleFilter” v-model.trim=”listQuery.dangerousname” class=”search_input”></div>
</el-form-item>
<el-form-item label=”CAS 号：” prop=”cascode”>
<div><input type=”text” @keyup.enter=”handleFilter” v-model.trim=”listQuery.cascode” class=”search_input”></div>
</el-form-item>
<el-form-item label=” 危化品类型：” prop=”dicDangeroustype”>
<el-select placeholder=” 请选择危化品类型 ” size=”mini” v-model=”listQuery.dicDangeroustype” @change=”handleFilter”>
<el-option v-for=”item in localWord.category” :key=”item.code” :label=”item.codename” :value=”item.code”>
</el-option>
</el-select>
</el-form-item>
<el-form-item label=” 别名：” prop=”othername”>
<div><input type=”text” @keyup.enter=”handleFilter” v-model.trim=”listQuery.othername” class=”search_input”></div>
</el-form-item>
<el-form-item>
<el-button size=”mini” type=”primary” icon=”el-icon-search” @click=”handleFilter”> 查询 </el-button>
<el-button size=”mini” type=”primary” icon=”el-icon-download” @click=”exportData”> 导出 </el-button>
</el-form-item>
</el-form>
</div>
</div>
<!– table 列表展示 –>
<el-row>
<el-table :data=”girdData” highlight-current-row :max-height=”gridTableMaxHeight” :header-cell-style=”{background:’rgb(212, 232, 255)’,color:’rgba(0, 0, 0, 0.85)’}” border style=”width: 100%” @selection-change=”handleSelectionChange”>
<el-table-column type=”selection” width=”55″>
</el-table-column>
<el-table-column property=”serialNumber” label=” 序号 ” min-width=”35″ align=”center”>
<template slot-scope=”scope”>
<span>{{scope.$index+(listQuery.page – 1) * listQuery.rows + 1}}</span>
</template>
</el-table-column>
<el-table-column property=”dangerousname” label=” 危化品名称 ” min-width=”140″></el-table-column>
<el-table-column sortable label=”CAS 号 ” property=”cascode” min-width=”120″></el-table-column>
<el-table-column label=” 别名 ” property=”othername” min-width=”120″></el-table-column>
<el-table-column label=” 危化品类型 ” property=”dicDangeroustypeStr” min-width=”140″></el-table-column>
<el-table-column label=” 英文名称 ” property=”englishname” min-width=”120″></el-table-column>
<el-table-column label=” 分子式 ” property=”molecularFormula” min-width=”120″></el-table-column>
<el-table-column label=” 熔点 ” property=”meltingPoint” min-width=”120″></el-table-column>
<el-table-column label=” 密度 ” property=”theDensityOf” min-width=”120″></el-table-column>
<el-table-column label=” 溶解性 ” property=”solubility” min-width=”120″></el-table-column>
<el-table-column label=” 操作 ” width=”140″ align=”center” fixed=”right”>
<template slot-scope=”scope”>
<el-button type=”text” size=”small” @click=”editCheckBtn(scope.$index, scope.row, ‘edit’)”><span class=”icons edit_icon”></span></el-button>
<el-button type=”text” size=”small” @click=”editCheckBtn(scope.$index, scope.row, ‘check’)”><span class=”icons check_icon”></span></el-button>
<el-button type=”text” size=”small” @click=”del(scope.$index, scope.row)”><span class=”icons delete_icon”></span></el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<!– 分页 –>
<el-row type=”flex” justify=”end” style=”padding:20px” class=”page”>
<el-pagination v-show=”total>0″ background @size-change=”handleSizeChange” @current-change=”handleCurrentChange” :current-page=”listQuery.page” :page-sizes=”[10, 20, 30]” :page-size=”listQuery.rows” layout=”total, sizes, prev, pager, next, jumper” :total=”total”>
</el-pagination>
</el-row>
<router-view></router-view>
</div>
</template>
<script>
import download from ‘js-file-download’
import moment from ‘moment’
import DChemStoreManagementAPI from “@/api/DChemStoreManagementAPI”;

export default {
data() {
return {
// 查询条件
listQuery: {
page: 1, // 当前第几页
rows: 10, // 每页显示多少条
pkEntid: “1”,
dangerousname: “”,
cascode: “”,
dicDangeroustype: “”,
othername: “”
},
total: null, // 共多少条数据
girdData: [],
// 字典查询
localWord: {},
multipleSelection: [],
multipleSelectionIdArr: [],
gridTableMaxHeight: document.body.clientHeight – 310,
rules: {},
form: {
dangerousname: “”,
cascode: “”,
othername: “”,
dicDangeroustype: “”,
dicDangeroustypeStr: “”,
toxicity: “”,
environmentalparameter: “”,
englishname: “”,
molecularFormula: “”,
molecularWeight: “”,
meltingPoint: “”,
theDensityOf: “”,
solubility: “”,
purpose: “”,
dangerousinfo: “”,
testmethod: “”,
eliminationmethod: “”
}
};
},
watch: {
“listQuery.dicDangeroustypeStr”(v) {

}
},

methods: {
handleSizeChange(val) {
this.listQuery.rows = val;
this.initTable();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.initTable();
},
handleFilter() {
this.listQuery.page = 1;
this.initTable();
},
initTable() {
DChemStoreManagementAPI.getList(this.listQuery).then(data => {

this.total = data.data.total;
this.girdData = data.data.rows;
this.multipleSelectionIdArr = data.data.rows.map(item=>{
return item.pkDangerid
})
});
},
exportData () {

DChemStoreManagementAPI.exportData(this.listQuery).then((data)=>{

if(this.listQuery) {
download(data, ` 危化品名称 ${moment(new Date().getTime()).format(‘YYYYMMDDHHmmss’)}.xls`)
this.$message({
type: “success”,
message: “ 导出成功!”
});
}

})
},
handleSelectionChange(row) {
this.multipleSelection = row.map(item=>{
return item.pkDangerid
})
},
add() {
this.$router.push({
name: “dchemstoremanagementform”,
query: {status: “add”}
});
},
del(index, row) {
this.$confirm(“ 此操作将永久删除该选项, 是否继续?”, “ 提示 ”, {
confirmButtonText: “ 确定 ”,
cancelButtonText: “ 取消 ”,
type: “warning”
})
.then(() => {

DChemStoreManagementAPI.del(row.pkDangerid).then(()=>{
this.initTable();
});
this.$message({
type: “success”,
message: “ 删除成功!”
});

})
.catch(function(response) {});
},
editCheckBtn(index, row, typeBtn) {
this.$router.push({
name: “dchemstoremanagementform”,
query: {
status: typeBtn,
pkDangerid: row.pkDangerid
}
});
}
},
created(){
DChemStoreManagementAPI.getSelect().then(data => {

this.localWord = data;
this.localWord.category.unshift({
code: “”,
codeenname: “all”,
codename: “ 全部 ”
});

});
},
mounted() {
this.initTable();

let that = this;
window.onresize = () => {
return (() => {
that.gridTableMaxHeight = document.body.clientHeight – 310;
})();
};
}
};
</script>

子组件 增改查页面
<template>
<div>
<el-dialog :title=”` 危化品库管理 – ${formTitle}`” :visible=”true” :lock-scrol=”true” width=”780px” @close=”closeDlg” center>
<el-row :gutter=”24″>
<el-col :span=”24″>
<el-form status-icon :model=”form” :inline=”true” :rules=”rules” ref=”elform” label-width=”140px”>
<el-row :gutter=”0″>
<el-col :span=”12″>
<el-form-item label=” 危化品名称：” prop=”dangerousname”>
<el-input size=”small” v-model=”form.dangerousname” placeholder=” 请输入危化品名称 ” v-if=”status==’add’|| status==’edit'”></el-input>
<span v-else>{{form.dangerousname}}</span>
</el-form-item>
</el-col>
<el-col :span=”12″>
<el-form-item label=”CAS 号：” prop=”cascode”>
<el-input size=”small” v-model=”form.cascode” placeholder=” 请输入 CAS 号 ” v-if=”status==’add’|| status==’edit'”></el-input>
<span v-else>{{form.cascode}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter=”0″>
<el-col :span=”12″>
<el-form-item label=” 别名：” prop=”othername”>
<el-input size=”small” v-model=”form.othername” placeholder=” 请输入别名 ” v-if=”status==’add’|| status==’edit'”></el-input>
<span v-else>{{form.othername}}</span>
</el-form-item>
</el-col>
<el-col :span=”12″>
<el-form-item label=” 危化品类型：” prop=”dicDangeroustype”>
<el-select placeholder=” 请选择危化品类型 ” size=”small” v-model=”form.dicDangeroustype” v-if=”status==’add’|| status==’edit'”>
<el-option v-for=”item in localWord.category” :key=”item.code” :label=”item.codename” :value=”item.pkCodenum”>
</el-option>
</el-select>
<span v-else>{{form.dicDangeroustypeStr}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter=”0″>
<el-col :span=”12″>
<el-form-item label=” 毒性：” prop=”toxicity”>
<el-input size=”small” v-model=”form.toxicity” placeholder=” 请输入毒性 ” v-if=”status==’add’|| status==’edit'”></el-input>
<span v-else>{{form.toxicity}}</span>
</el-form-item>
</el-col>
<el-col :span=”12″>
<el-form-item label=” 环境参数：” prop=”environmentalparameter”>
<el-input size=”small” v-model=”form.environmentalparameter” placeholder=” 请输入环境参数 ” v-if=”status==’add’|| status==’edit'”></el-input>
<span v-else>{{form.environmentalparameter}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter=”0″>
<el-col :span=”12″>
<el-form-item label=” 英文名称：” prop=”englishname”>
<el-input size=”small” v-model=”form.englishname” placeholder=” 请输入英文名称 ” v-if=”status==’add’|| status==’edit'”></el-input>
<span v-else>{{form.englishname}}</span>
</el-form-item>
</el-col>
<el-col :span=”12″>
<el-form-item label=” 分子式：” prop=”molecularFormula”>
<el-input size=”small” v-model=”form.molecularFormula” placeholder=” 请输入分子式 ” v-if=”status==’add’|| status==’edit'”></el-input>
<span v-else>{{form.molecularFormula}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter=”0″>
<el-col :span=”12″>
<el-form-item label=” 分子量：” prop=”molecularWeight”>
<el-input size=”small” v-model=”form.molecularWeight” placeholder=” 请输入分子量 ” v-if=”status==’add’|| status==’edit'”></el-input>
<span v-else>{{form.molecularWeight}}</span>
</el-form-item>
</el-col>
<el-col :span=”12″>
<el-form-item label=” 熔点：” prop=”meltingPoint”>
<el-input size=”small” v-model=”form.meltingPoint” placeholder=” 请输入熔点 ” v-if=”status==’add’|| status==’edit'”></el-input>
<span v-else>{{form.meltingPoint}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter=”0″>
<el-col :span=”12″>
<el-form-item label=” 密度：” prop=”theDensityOf”>
<el-input size=”small” v-model=”form.theDensityOf” placeholder=” 请输入密度 ” v-if=”status==’add’|| status==’edit'”></el-input>
<span v-else>{{form.theDensityOf}}</span>
</el-form-item>
</el-col>
<el-col :span=”12″>
<el-form-item label=” 溶解性：” prop=”solubility”>
<el-input size=”small” v-model=”form.solubility” placeholder=” 请输入溶解性 ” v-if=”status==’add’|| status==’edit'”></el-input>
<span v-else>{{form.solubility}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter=”24″>
<el-col :span=”24″>
<el-form-item label=” 用途：” prop=”purpose”>
<el-input size=”small” type=”textarea” class=”special-530″ :autosize=”{minRows: 3}” v-model=”form.purpose” placeholder=” 请输入用途信息 ” v-if=”status==’add’|| status==’edit'”></el-input>
<el-input size=”small” type=”textarea” resize=”none” class=”readonly special-530″ :autosize=”{minRows: 1}” v-model=”form.purpose” placeholder=” 请输入用途信息 ” v-else readonly></el-input>
<!– <span v-else>{{form.purpose}}</span> –>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter=”24″>
<el-col :span=”24″>
<el-form-item label=” 环境危害：” prop=”dangerousinfo”>
<el-input size=”small” type=”textarea” class=”special-530″ :autosize=”{minRows: 3}” v-model=”form.dangerousinfo” placeholder=” 请输入环境危害信息 ” v-if=”status==’add’|| status==’edit'”></el-input>
<span v-else>{{form.dangerousinfo}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter=”24″>
<el-col :span=”24″>
<el-form-item label=” 检测方法：” prop=”testmethod”>
<el-input size=”small” type=”textarea” class=”special-530″ :autosize=”{minRows: 3}” v-model=”form.testmethod” placeholder=” 请输入检测方法信息 ” v-if=”status==’add’|| status==’edit'”></el-input>
<span v-else>{{form.testmethod}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter=”24″>
<el-col :span=”24″>
<el-form-item label=” 控制消除方法：” prop=”eliminationmethod”>
<el-input size=”small” type=”textarea” class=”special-530″ :autosize=”{minRows: 3}” v-model=”form.eliminationmethod” placeholder=” 请输入控制消除方法信息 ” v-if=”status==’add’|| status==’edit'”></el-input>
<span v-else>{{form.eliminationmethod}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter=”24″>
<el-col :span=”24″>
<el-form-item label=” 危险特性：” prop=”characteristic”>
<el-input size=”small” type=”textarea” class=”special-530″ :autosize=”{minRows: 3}” v-model=”form.characteristic” placeholder=” 请输入危险特性信息 ” v-if=”status==’add’|| status==’edit'”></el-input>
<span v-else>{{form.characteristic}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter=”24″ class=”text-center”>
<el-col :span=”24″>
<el-form-item v-if=”status==’add’|| status==’edit'”>
<el-button type=”primary” size=”small” @click=”onSubmit”> 保存 </el-button>
<el-button @click=”closeDlg” size=”small”> 取消 </el-button>
</el-form-item>
<el-form-item v-else>
<el-button type=”primary” size=”small” @click=”closeDlg”> 关闭 </el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
import {mapGetters} from “vuex”;
import {validatorRules} from “@/comman/validator”;
import DChemStoreManagementAPI from “@/api/DChemStoreManagementAPI”;
export default {

data() {
return {
formTitle: ‘ 添加 ’,
status: this.$route.query.status,
localWord: {},
form: {
pkEntid: “”,
dangerousname: “”,
cascode: “”,
othername: “”,
dicDangeroustype: “”,
dicDangeroustypeStr: “”,
toxicity: “”,
environmentalparameter: “”,
englishname: “”,
molecularFormula: “”,
molecularWeight: “”,
meltingPoint: “”,
theDensityOf: “”,
solubility: “”,
purpose: “”,
dangerousinfo: “”,
testmethod: “”,
eliminationmethod: “”
},
rules: {
dangerousname: [
{
required: true,
message: “ 请输入危化品名称 ”,
trigger: “blur”
},
validatorRules.shortRules
],

cascode: [
{
required: true,
message: “ 请输入 CAS 号 ”,
trigger: “blur”
},
validatorRules.shortRules
],

othername: [
{
required: true,
message: “ 请输入别名 ”,
trigger: “blur”
},
validatorRules.shortRules
],

dicDangeroustype: [
{
required: true,
message: “ 请输入危化品类型 ”,
trigger: “blur”
}

],

toxicity: [
{
required: true,
message: “ 请输入毒性 ”,
trigger: “blur”
},
validatorRules.shortRules
],

environmentalparameter: [
{
required: true,
message: “ 请输入环境参数 ”,
trigger: “blur”
},
validatorRules.shortRules
],

englishname: [
{
required: true,
message: “ 请输入英文名称 ”,
trigger: “blur”
},
validatorRules.shortRules
],

molecularFormula: [
{
required: true,
message: “ 请输入分子式 ”,
trigger: “blur”
},
validatorRules.shortRules
],

molecularWeight: [
{
required: true,
message: “ 请输入分子量 ”,
trigger: “blur”
},
validatorRules.shortRules
],

meltingPoint: [
{
required: true,
message: “ 请输入熔点 ”,
trigger: “blur”
},
validatorRules.shortRules
],

theDensityOf: [
{
required: true,
message: “ 请输入密度 ”,
trigger: “blur”
},
validatorRules.shortRules
],

solubility: [
{
required: true,
message: “ 请输入溶解性 ”,
trigger: “blur”
},
{min: 0, max: 30, message: ‘ 长度在 0 到 30 个字符 ’, trigger: ‘blur’}
// validatorRules.shortRules
],

purpose: [
{
required: true,
message: “ 请输入用途 ”,
trigger: “blur”
},
{min: 0, max: 200, message: ‘ 长度在 0 到 200 个字符 ’, trigger: ‘blur’}
],

dangerousinfo: [
{
required: true,
message: “ 请输入环境危害 ”,
trigger: “blur”
},
{min: 0, max: 200, message: ‘ 长度在 0 到 200 个字符 ’, trigger: ‘blur’}
],

testmethod: [
{
required: true,
message: “ 请输入检测方法 ”,
trigger: “blur”
},
{min: 0, max: 200, message: ‘ 长度在 0 到 200 个字符 ’, trigger: ‘blur’}
],

eliminationmethod: [
{
required: true,
message: “ 请输入控制消除方法 ”,
trigger: “blur”
},
{min: 0, max: 200, message: ‘ 长度在 0 到 200 个字符 ’, trigger: ‘blur’}
],

characteristic: [
{
required: true,
message: “ 请输入危险特性 ”,
trigger: “blur”
},
{min: 0, max: 200, message: ‘ 长度在 0 到 200 个字符 ’, trigger: ‘blur’}
]
}
};
},
beforeRouteEnter(to, from, next) {
DChemStoreManagementAPI.getSelect().then(data => {
next(vm => {
console.log(data);
vm.localWord = data;
});
});
},
methods: {

onSubmit() {
this.$refs[“elform”].validate(valid => {
if (valid) {
DChemStoreManagementAPI.add(this.form).then(data => {
this.$parent.initTable();
this.$router.back();
});
} else {
return false;
}
});
},
closeDlg() {
this.$router.back();
}
},
mounted() {
var that = this;
if(this.status == ‘edit’) {
this.formTitle = ‘ 修改 ’
} else if(this.status == ‘check’) {
this.formTitle = ‘ 详情 ’
}
if (this.$route.query.pkDangerid) {
DChemStoreManagementAPI.getById(this.$route.query.pkDangerid).then(
obj => {
that.form = obj.data;
// that.form.dicDangeroustype = obj.data.dicDangeroustype.toString();
}
);

}
}
};
</script>

API
import axios from “axios”;
import qs from “qs”;

let DChemStoreManagementAPI = {
getList(params) {
return axios.get(“…”, {
params
});
},
add(params){
return axios({
method: “post”,
url: “…/save”,
data: qs.stringify(params)
})
},
getSelect(params) {
return axios(“…”, {
params
})
},
getById(id) {
return axios.get(“…?id=”+ id, {

});
},
del(id) {
return axios.delete(“…?id=” + id, {

});
},
exportData(params) {
return axios.get(“…”, {
responseType: ‘arraybuffer’,
params
});
},
deleteFile(params) {
return axios.delete(“…”, {
params: {
filePath: params.filepath
}
});
}
};

export default DChemStoreManagementAPI;

以上便是模块的增删改查内容，至于上传模块，没有过多的解释，上传用的是封装过的组件，代码太多，不便复制，不过有下载功能 ^_^，这也是一点小小的总结。