父組件列表頁面

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

以上便是模塊的增刪改查內容，至于上傳模塊，沒有過多的解釋，上傳用的是封裝過的組件，代碼太多，不便復制，不過有下載功能^_^，這也是一點小小的總結。

總結

以上是生活随笔為你收集整理的一个完整的增删改查模块（以我们的项目‘危化品库管理’模块为例）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。