父组件列表页面
<!-- 危化品库管理 -->
<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;
以上便是模块的增删改查内容，至于上传模块，没有过多的解释，上传用的是封装过的组件，代码太多，不便复制，不过有下载功能^_^，这也是一点小小的总结。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。