父组件列表页面

<!-- 危化品库管理 -->
<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;

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