父元件列表頁面
<!-- 危化品庫管理 -->
<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;
以上便是模組的增刪改查內容，至於上傳模組，沒有過多的解釋，上傳用的是封裝過的元件，程式碼太多，不便複製，不過有下載功能^_^，這也是一點小小的總結。