父组件列表页面<!– 危化品库管理 –><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>APIimport 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;以上便是模块的增删改查内容，至于上传模块，没有过多的解释，上传用的是封装过的组件，代码太多，不便复制，不过有下载功能^_^，这也是一点小小的总结。
...