一個完整的增刪改查模塊（以咱們的項目‘危化品庫管理’模塊爲例）

父組件列表頁面

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

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