实战练习
dictionary.vu<template>
<div class="main printTemplate printTemplateD"> <div class="titleBox"> <el-row :gutter="20"> <el-col :span="21"><div class="grid-content bg-purple">数据字典</div></el-col> <el-col :span='3'>
<el-button class="el-icon-plus" @click="modify({type:'add'})">添加字典分组</el-button>
</el-col> </el-row> </div> <wordbook v-show='$store.state.dictionaryList'></wordbook> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column type="index" label="序号" align="center" :index="indexMethod"></el-table-column> <el-table-column prop="typegroupname" label="字典分组名称" align="center"></el-table-column> <el-table-column prop="typegroupcode" label="字典分组Code" align="center"></el-table-column> <el-table-column prop="typegroupstatus" label="字典分组状态" align="center"> <template slot-scope="scope"> <span v-if="scope.row.typegroupstatus == 'normal'">启用</span> <span v-else>停用</span> </template> </el-table-column> <el-table-column prop="typegroupdesc" label="字典分组描述" align="center"></el-table-column> <el-table-column prop="" label="操作" width="400" align="center"> <template slot-scope="scope"> <el-button type="primary" size="mini" @click ="modify({type:'edit',id:scope.row.id})">
<i class="el-icon-view"></i>修改
</el-button> <el-button type="warning" size="mini" @click="del(scope.row.id)">
<i class="el-icon-delete"></i>删除
</el-button> <el-button type="primary" size="mini" @click="manage(scope.row.id)">
<i class="el-icon-setting"></i>字典管理
</el-button> <el-button v-if="scope.row.typegroupstatus == 'stop'" size="mini"
@click='updateStatus({id:scope.row.id,typegroupstatus:scope.row.typegroupstatus})'
style="background:#F5834C;color:#fff;"> <span class="el-icon-video-play">启用</span> </el-button> <el-button v-else type="primary" size="mini"
@click='updateStatus({id:scope.row.id,typegroupstatus:scope.row.typegroupstatus})'> <span class="el-icon-video-pause">停用</span> </el-button> </template> </el-table-column> </el-table> <!-- 添加、修改数据字典 --> <el-dialog width="30%" :visible.sync="importVisible" class="importVisible" :title='DialogTitle' @closed='handleClose' > <el-form label-width="110px" :model="addData" :rules="rules" ref="addData" status-icon > <el-form-item v-show="this.addData.id !== ''" label="字典分组ID" prop='id'> <el-input v-model="addData.id" disabled></el-input> </el-form-item> <el-form-item label="字典分组名称" prop='typegroupname'> <el-input v-model="addData.typegroupname"></el-input> </el-form-item> <el-form-item label="字典分组编码" prop='typegroupcode'> <el-input v-model="addData.typegroupcode"></el-input> </el-form-item> <el-form-item label="字典分组状态" prop='typeGroupStatus'> <el-input v-model="addData.typeGroupStatus" disabled></el-input> </el-form-item> <el-form-item label="字典分组描述" prop='typeGroupDesc'> <el-input v-model="addData.typeGroupDesc"></el-input> </el-form-item> <span style='color:#f56c6c'>{{errMsg}}</span> </el-form> <span slot="footer" class="dialog-footer"> <el-button type="primary" size="medium" round @click="submitForm('addData')">确认</el-button> <el-button type="primary" size="medium" plain round @click="importVisible =false">取消</el-button> </span> </el-dialog> <!-- 删除字典分组 --> <el-dialog width="30%" :visible.sync="deleteGroups" class="delete" :close-on-click-modal = 'false' > <h3 slot="title" class='dialogTitle'>删除该字典分组</h3> <div class='confirm-dialog'> <img src='../assets/image/tools/icons8-delete.png'> <span>确定删除该字典分组吗?</span> </div> <span slot="footer" class="dialog-footer"> <el-button type="primary" size="medium" round @click='sureDel'>确定</el-button> <el-button type="primary" size="medium" plain round @click="deleteGroups = false">取消</el-button> </span> </el-dialog> <!-- 停用使用数据字典 --> <el-dialog width="30%" :visible.sync="isSuspend" :close-on-click-modal = 'false' :title='title' class="isSuspend" > <div class='confirm-dialog'> <img :src= url> <span>{{activeMessage}}</span> </div> <span slot="footer" class="dialog-footer"> <el-button type="primary" size="medium" round @click = 'SureSuspend'>确定</el-button> <el-button type="primary" size="medium" plain round @click="isSuspend = false">取消</el-button> </span> </el-dialog> <div class="bottom"> <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :current-page.sync="currentPage" :total="logTotal "> </el-pagination> <div v-show="logTotal>0"> <span>{{start}}</span>-<span>{{end}}</span>共<span>{{logTotal}}</span>条 </div> </div> </div> </template> <script> import axios from 'axios' import wordbook from '../components/v-dictionary' export default { data () { return { currentPage:1, srcs:require('../assets/image/tools/开始.png'), nosrc:require('../assets/image/tools/stop.png'), url:"", isSuspend:false, importVisible:false, deleteGroups:false, logTotal: 0, errMsg:'', activeMessage:'', start:'', end:'', title:'', DialogTitle:'', addData:{ typegroupname:'', typegroupcode:'', typeGroupStatus:'', typeGroupDesc:'', typeGroupdSort:'', id:'' }, tableData:[], selectId:'', listData:{ pageId:1, pageNum:10, }, delData:{ id:'', }, suspendData:{ id:'', key:'' }, dicData:{ pageId:1, pageNum:1000, pid:'', }, rules: { typegroupname:[ {required:true,message:'请输入字典分组名称！', trigger:'blur'} ], typegroupcode:[ {required:true,message:'请输入字典分组编码！', trigger:'blur'} ] }, } }, components: { wordbook }, created(){ this.getList(); }, methods:{ indexMethod(index) { this.start = (10* (this.listData.pageId-1))+1; this.end = this.start + 9; return (10* (this.listData.pageId-1))+1+index; }, handleCurrentChange:function(val){ this.listData.pageId = val; this.getList(); }, //获取列表
getList: function(){
let _this = this;
axios.post(this.$geng+'dd/getTypeGroup.do',_this.listData, {
transformRequest: [
function (data) {
let params = '';
for (let index in data) {
params += index + '=' + data[index] + '&'
}
return params;
}
]
}).then(rs=>{
if(rs.data.code == 1){
_this.tableData = rs.data.data.typegroup;
_this.logTotal = Number(rs.data.data.count);
}
});
},
modify:function(item){ if(item.type == "add"){ this.DialogTitle = "添加字典分组" this.addData.typegroupname = '', this.addData.typegroupcode = '', this.addData.typeGroupStatus = '', this.addData.typeGroupDesc = '', this.addData.id = ''; this.addData.typeGroupStatus = '启用'; }else{ this.DialogTitle = "修改字典分组" this.addData.id = item.id; this.selectId = item.id; console.log(this.tableData); for(var i = 0;i < this.tableData.length;i++){ if(this.selectId == this.tableData[i].id){ this.addData.typegroupname = this.tableData[i].typegroupname; this.addData.typegroupcode = this.tableData[i].typegroupcode; this.addData.typeGroupStatus = this.tableData[i].typegroupstatus; if(this.tableData[i].typegroupstatus == 'normal'){ this.addData.typeGroupStatus = '启用' }else{ this.addData.typeGroupStatus = '停用' } this.addData.typeGroupDesc = this.tableData[i].typegroupdesc; } } } this.importVisible = true; }, // 确定 submitForm:function(addData){ this.$refs[addData].validate((valid)=>{ if(valid){ let url = (this.addData.id == '') ? 'dd/addTypeGroup.do' : 'dd/updateTypeGroup.do'; this.addData.typeGroupStatus = 'normal'; axios.post(this.$li + url,this.addData,{ transformRequest: [ function (data) { let params = ''; for (let index in data) { params += index + '=' + data[index] + '&' } return params; } ] }).then(rs=>{ if(rs.data.code == 1){ this.importVisible = false; this.getList(); } }) }else{ return false; } }) }, //删除 del:function(id){ this.deleteGroups = true; this.delData.id = id; }, sureDel:function(){ axios.post(this.$li+'dd/deleteGroup.do',this.delData,{ transformRequest: [ function (data) { let params = ''; for (let index in data) { params += index + '=' + data[index] + '&' } return params; } ] }).then(rs=>{ if(rs.data.code == 1){ this.deleteGroups = false; this.getList(); } }) }, //字典管理列表 manage:function(id){ this.selectId = id; this.$store.state.dictionaryId = id; this.dicData.pid = id; for(var i = 0;i < this.tableData.length;i++){ if(this.selectId == this.tableData[i].id){ this.$store.state.dictionaryName = this.tableData[i].typegroupname; } } axios.post(this.$li+'dd/getType.do',this.dicData,{ transformRequest: [ function (data) { let params = ''; for (let index in data) { params += index + '=' + data[index] + '&' } return params; } ] }).then(rs=>{ if(rs.data.code == 1){ this.$store.state.dictionaryList = rs.data.data.type; this.$store.state.dicLogTotal = Number(rs.data.data.count); } }) this.$store.state.dictionaryList = true; }, // 启用、停用数据字典 updateStatus:function(item){ console.log(item); this.suspendData.id = item.id; if(item.typegroupstatus=="normal"){ this.suspendData.key = "stop" }else{ this.suspendData.key = "normal" } this.title=item.typegroupstatus=="stop"?'启用':'停用' this.url=item.typegroupstatus=="stop"? this.srcs : this.nosrc this.activeMessage=item.typegroupstatus=="stop"?'确定设为启用状态吗?':'确定设为停用状态吗?' this.isSuspend = true; }, SureSuspend: function(){ axios.post(this.$li+'dd/setStatusGroup.do',this.suspendData,{ transformRequest: [ function (data) { let params = ''; for (let index in data) { params += index + '=' + data[index] + '&' } return params; } ] }).then(rs=>{ if(rs.data.code == 1){ this.activeMessage='该操作成功' setTimeout(()=>{ this.isSuspend = false; },1000) this.getList(); } }) }, //关闭表单时清除错误提示 handleClose:function(){ this.$refs.addData.resetFields(); } } } </script>
v-dictionary.vue
<template> <div class="cartonmanage"> <div class="titleBox"> <p class="title">字典管理</p> <div class='close' @click='$store.state.dictionaryList = false'>X</div> </div> <div class='critical'> <el-row :gutter='20'> <el-col :span='2.5' style="float:right;"> <div class="grid-content bg-purple"> <el-button type="primary" @click="del({type: 'allDel'})">
<i class="el-icon-delete"></i>删除选中
</el-button> </div> </el-col> <el-col :span='2.5' style="float:right;"> <div class="grid-content bg-purple"> <el-button type="primary" @click='addDic({type: "add"})'>
<i class="el-icon-plus"></i>添加字典
</el-button> </div> </el-col> </el-row> </div> <el-table :data="this.$store.state.dictionaryList" stripe height="410" @selection-change="handleSelectionChange" style="width: 100%"> <el-table-column type="selection" width="50"></el-table-column> <el-table-column type="index" label="序号" align="center"></el-table-column> <el-table-column prop="typename" label="字典名称" align="center"></el-table-column> <el-table-column prop="typecode" label="字典编码" align="center"></el-table-column> <el-table-column prop="status" label="字典状态" align="center"> <template slot-scope="scope"> <span v-if="scope.row.status !== 'normal'">停用</span> <span v-else>启用</span> </template> </el-table-column> <el-table-column prop="" label="操作" width="300"> <template slot-scope="scope"> <el-button type="primary" size="mini" @click="addDic({type: 'edit',id: scope.row.id})">
<i class="el-icon-edit"></i>修改
</el-button> <el-button type="warning" size="mini" @click="del({type: 'oneDel',id: scope.row.id})">
<i class="el-icon-delete"></i>删除
</el-button> <el-button type="primary" v-if="scope.row.status == 'normal'"
size="mini" @click="setState({id:scope.row.id})"> <span class="el-icon-video-pause">停用</span> </el-button> <el-button v-else size="mini" @click="setState({id:scope.row.id})"
style="background:#F5834C;color:#fff;"> <span class="el-icon-video-play">启用</span> </el-button> </template> </el-table-column> <el-table-column label="" width='100' align='center'> <template slot-scope="scope" class='img'> <span class="el-icon-upload2" @click="firstOrLast({order:'first',id:scope.row.id})"></span> <span class="el-icon-download" @click="firstOrLast({order:'last',id:scope.row.id})"></span> <span class="el-icon-top" @click="changePlace({order:'up',id:scope.row.id})"></span> <span class="el-icon-bottom" @click="changePlace({order:'down',id:scope.row.id})"></span> </template> </el-table-column> </el-table> <!-- 添加/修改字典--> <el-dialog width="30%" :visible.sync="importVisible" class="importVisible" :title='title' @closed='handleClose' > <el-form label-width="100px" :model="addData" :rules="rules" ref="addData" status-icon > <el-form-item label="字典名称" prop='typename'> <el-input v-model="addData.typename"></el-input> </el-form-item> <el-form-item label="字典编码" prop='typecode'> <el-input v-model="addData.typecode"></el-input> </el-form-item> <el-form-item label="字典状态" prop='status'> <el-input v-model="addData.status" disabled></el-input> </el-form-item> <el-form-item label="字典附加参数" prop='typeParam'> <el-input v-model="addData.typeParam"></el-input> </el-form-item> <el-form-item label="字典描述" prop='typeDesc'> <el-input v-model="addData.typeDesc"></el-input> </el-form-item> <el-form-item label="字典分组名称" prop='TSTypegroupid'> <el-input v-model="addData.TSTypegroupid" disabled></el-input> </el-form-item> <span style='color:#f56c6c'>{{errMsg}}</span> </el-form> <span slot="footer" class="dialog-footer"> <el-button type="primary" size="medium" round @click="sureAdd('addData')">确认</el-button> <el-button type="primary" size="medium" plain round @click="importVisible =false">取消</el-button> </span> </el-dialog> <div class="bottom"> <div v-show="this.$store.state.dicLogTotal>0"> 共<span>{{this.$store.state.dicLogTotal}}</span>条 </div> </div> <!-- 删除字典 --> <el-dialog width="30%" :visible.sync="deleteDic" class="delete" :close-on-click-modal = 'false' > <h3 slot="title" class='dialogTitle'>删除该字典</h3> <div class='confirm-dialog'> <img src='../assets/image/tools/icons8-delete.png'> <span>确定删除该字典吗?</span> </div> <span slot="footer" class="dialog-footer"> <el-button type="primary" size="medium" round @click='sureDel'>确定</el-button> <el-button type="primary" size="medium" plain round @click="deleteDic = false">取消</el-button> </span> </el-dialog> <!-- 停用/启用弹框 --> <el-dialog width="30%" :visible.sync="setDialog" :title="setTitle" class="setDialog" > <div class='confirm-dialog'> <img v-show="startImg" src="../assets/image/tools/开始.png" alt=""> <img v-show='stopImg' src="../assets/image/tools/stop.png" alt=""> <span>{{setMsg}}</span> </div> <span slot="footer" class="dialog-footer"> <el-button type="primary" size="medium" round @click='sureSet'>确定</el-button> <el-button type="primary" size="medium" plain round @click="setDialog = false">取消</el-button> </span> </el-dialog> <!-- 提示框 --> <el-dialog width="30%" :visible.sync="delDialog" class="delDialog" > <div class='confirm-dialog'> <div><span>请选择需要删除的选项!</span></div> </div> </el-dialog> </div> </template> <script> import axios from 'axios' export default { data () { return { currentPage:1, deleteDic: false,//删除字典 delDialog:false, setDialog:false, importVisible:false, stopImg:false, startImg:false, start:'', end:'', dialogTitle:'', title:'', setTitle:'', setMsg:'', errMsg:'', addData:{ typename:'', typecode:'', status:'', typeParam:'', typeDesc:'', TSTypegroupid:'', TSTypesid:'', id:'', }, listData:{ pageId:1, pageNum:1000, pid:'' }, ids: '', selected:'', setData:{ key:'', id:'', }, deleteType: { id:'', }, moveData:{ flag:'', id:'', }, reMovalData:{ formId:'', toId:'', flag:'' }, tableData: [], rules:{ typename:[ {required:true,message:'请输入字典名称',trigger:'blur'} ], typecode:[ {required:true,message:'请输入字典编码',trigger:'change'} ], } } }, created(){ }, methods:{ addList:function(){ this.listData.pid = this.$store.state.dictionaryId; axios.post(this.$li+'dd/getType.do',this.listData,{ transformRequest: [ function (data) { let params = ''; for (let index in data) { params += index + '=' + data[index] + '&' } return params; } ] }).then(rs=>{ if(rs.data.code == 1){ this.$store.state.dictionaryList = rs.data.data.type; this.$store.state.dicLogTotal = Number(rs.data.data.count); } }) }, handleSelectionChange: function(val){ if(val.length == 0){ this.selected = false; }else{ this.selected = true; } let selAdd = []; for(let i = 0;i <val.length; i++){ selAdd.push(val[i].id); } this.ids = selAdd.toString(); }, //置顶置低 firstOrLast:function(item){ this.moveData.id = item.id; this.moveData.flag = (item.order == 'first')?'up':'down'; axios.post(this.$li+'dd/setUpOrDown.do',this.moveData,{ transformRequest: [ function (data) { let params = ''; for (let index in data) { params += index + '=' + data[index] + '&' } return params; } ] }).then(rs=>{ if(rs.data.code == 1){ this.addList(); } }) }, //上移下移 changePlace:function(item){ for(var i = 0;i<this.$store.state.dictionaryList.length;i++){ if(item.id == this.$store.state.dictionaryList[i].id){ this.reMovalData.formId = this.$store.state.dictionaryList[i].id; if(item.order == 'up'){ this.reMovalData.toId = this.$store.state.dictionaryList[i-1].id; this.reMovalData.flag = 'up'; }else{ this.reMovalData.toId = this.$store.state.dictionaryList[i+1].id; this.reMovalData.flag = 'down'; } } } axios.post(this.$li+'dd/changeOrder.do',this.reMovalData,{ transformRequest: [ function (data) { let params = ''; for (let index in data) { params += index + '=' + data[index] + '&' } return params; } ] }).then(rs=>{ if(rs.data.code == 1){ this.addList(); } }) }, //添加/修改字典 addDic: function(item){ this.errMsg = ''; if(item.type=='edit'){ this.title = '修改字典' this.addData.id = item.id; for(var i = 0;i<this.$store.state.dictionaryList.length;i++){ if(item.id == this.$store.state.dictionaryList[i].id){ this.addData.typename = this.$store.state.dictionaryList[i].typename; alert(this.addData.typename); this.addData.typecode = this.$store.state.dictionaryList[i].typecode; if(this.$store.state.dictionaryList[i].status == 'normal'){ this.addData.status = '启用'; }else{ this.addData.status = '停用'; } this.addData.typeParam = this.$store.state.dictionaryList[i].typeparam; this.addData.typeDesc = this.$store.state.dictionaryList[i].typedesc; } } }else{ this.title = '添加字典'; this.addData.status = '启用'; this.addData.id = ''; this.addData.typename = ''; this.addData.typecode = ''; this.addData.typeParam = ''; this.addData.typeDesc = ''; } this.importVisible = true; this.addData.TSTypegroupid = this.$store.state.dictionaryName; }, sureAdd:function(addData){ this.addData.status = 'normal'; this.addData.TSTypegroupid = this.$store.state.dictionaryId; let url = (this.addData.id !== '')?'dd/updateType.do':'dd/addType.do'; this.$refs[addData].validate((valid) => { if(valid){ axios.post(this.$li+url,this.addData,{ transformRequest: [ function (data) { let params = ''; for (let index in data) { params += index + '=' + data[index] + '&' } return params; } ] }).then(rs=>{ if(rs.data.code == 1){ this.importVisible = false; this.addList(); }else if(rs.data.code == 0){ this.errMsg = "该字典编码已经存在，不能重复添加！" } }) }else{ return false; } }) }, //删除 del:function(item){ if(item.type == 'oneDel'){ this.deleteDic = true; this.deleteType.id = item.id; }else{ if(this.selected == false){ this.delDialog = true; }else{ this.deleteDic = true; this.deleteType.id=this.ids; } } }, sureDel:function(){ axios.post(this.$li+'dd/deleteType.do',this.deleteType, { transformRequest: [ function (data) { let params = ''; for (let index in data) { params += index + '=' + data[index] + '&' } return params; } ] }).then(rs=>{ if(rs.data.code == 1){ this.deleteDic = false; this.addList(); }else if(rs.data.code == 0){ this.$message({ showClose: true, message: rs.data.message, type: 'error' }); } }); }, //启停 setState:function(item){ this.setData.id = item.id; for(var i = 0;i<this.$store.state.dictionaryList.length;i++){ if(item.id == this.$store.state.dictionaryList[i].id){ this.setData.key = (this.$store.state.dictionaryList[i].status == 'normal')?'stop':'normal'; this.setTitle = (this.$store.state.dictionaryList[i].status == 'normal')?'停用':'启用'; this.setMsg =
(this.$store.state.dictionaryList[i].status == 'normal')?'确定设为停用状态吗？':'确定设为启用状态吗？'; if(this.$store.state.dictionaryList[i].status == 'normal'){ this.stopImg = true; this.startImg = false; }else{ this.startImg = true; this.stopImg = false; } } } this.setDialog = true; }, sureSet:function(){ axios.post(this.$li+'dd/setStatusType.do',this.setData,{ transformRequest: [ function (data) { let params = ''; for (let index in data) { params += index + '=' + data[index] + '&' } return params; } ] }).then(rs=>{ if(rs.data.code == 1){ this.setDialog = false; this.addList(); } }) }, //关闭表单时清除错误提示 handleClose:function(){ this.$refs.addData.resetFields(); } } } </script>
store/index.js
import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' import actions from './actions' import getters from './getters' import dialogstore from './modules/dialog' Vue.use(Vuex) const state = { dictionaryList:false,//数据字典 dictionaryId:'',//数据字典Id dicLogTotal:'',//数据字典分页总条数 dicPageId:'',//数据字典当前页页码 dictionaryName:'',//数据字典字典分组名称 } export default new Vuex.Store({ modules: { dialog: dialogstore }, state, actions, mutations, getters })
