kr列表
emer 发布于 2018-12-4 17:45 2443 次阅读
<template> <section> <!--工具条--> <el-col :span="24" class="toolbar" style="padding-bottom: 0px;"> <el-form :inline="true"> <el-form-item> <el-input v-model="titleTxt1" placeholder="请输入标题!"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="search1">查询</el-button> </el-form-item> </el-form> </el-col> <!--列表--> <el-table :data="list" highlight-current-row v-loading="listLoading" @selection-change="checkboxChange" style="width: 100%;"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column type="index" width="60"> </el-table-column> <el-table-column prop="titleTxt" label="标题" width="120"> </el-table-column> <el-table-column prop="imgName" label="图片" width="100" > </el-table-column> <el-table-column prop="describ" label="描述" width="100" > </el-table-column> <el-table-column prop="public" label="公开" width="120" :formatter="transPublic"> </el-table-column> <el-table-column prop="createTime" label="创建时间" min-width="180" sortable :formatter="createtime"> </el-table-column> <el-table-column label="操作" width="220"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" @click="handleInfo(scope.$index, scope.row)">详情</el-button> <el-button type="danger" size="mini" @click="handleDel(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <!--工具条--> <el-col :span="24" class="toolbar"> <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button> <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;"> </el-pagination> </el-col> <!--编辑界面--> <el-dialog title="编辑" :visible.syn="editFormVisible" :close-on-click-modal="false"> <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm"> <el-form-item label="标题" prop="titleTxt"> <el-input v-model="editForm.titleTxt" auto-complete="off"></el-input> </el-form-item> <el-form-item label="公开"> <el-radio-group v-model="editForm.public"> <el-radio class="radio" :label="1">是</el-radio> <el-radio class="radio" :label="0">否</el-radio> </el-radio-group> </el-form-item> <el-form-item label="描述" prop="describ"> <el-input type="textarea" v-model="editForm.describ" auto-complete="off"></el-input> </el-form-item> <el-form-item label="创建时间"> <el-input v-model="editForm.createTime" auto-complete="off" disabled></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click.native="editFormVisible = false">取消</el-button> <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button> </div> </el-dialog> </section> </template> <script> //import NProgress from 'nprogress' import { getImageList,updateImgList,delateimglist} from '../../api/api'; import libs from "../../libs/formart" export default { data() { return { infoUrl:'http://localhost:3010', dialogVisible:true, filters: { titleTxt: '' }, titleTxt1:"", serach:false, list: [], total: 0, page: 1, pageSize:10, listLoading: false, sels: [],//列表选中列 editFormVisible: false,//编辑界面是否显示 editLoading: false, editFormRules: { titleTxt: [ { required: true, message: '请输入标题!', trigger: 'blur' } ], describ: [ { required: true, message: '请输入描述!', trigger: 'blur' } ] }, //编辑界面数据 editForm: { createTime: 0, name: '', describ: -1, imgPath: 0, public: '' }, addFormVisible: false,//新增界面是否显示 addLoading: false, addFormRules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ] }, //新增界面数据 addForm: { name: '', sex: -1, age: 0, birth: '', addr: '' } } }, methods: { //时间转换 createtime: function (row, column) { return libs.formartTime(row.createTime); }, transPublic(row,column){ //console.log(row); return row.public==1?"是":"否" }, //删除 handleDel: function (index, row) { var arr=[]; //console.log(row); arr.push(row.Id); const loading=this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); var _this=this; this.$confirm('确认删除该记录吗?', '提示', { type: 'warning' }).then(() => { loading.close(); delateimglist({"ids":arr}).then(data=>{ if(data.status=="200"){ var data=data.data; if(data.code=="300"){ _this.$message({ showClose: true, message: da.msg, type: 'error', onClose:()=>{ _this.$router.push({path:"/login"}) } }) }else if(data.code=="200"){ _this.getList(); _this.$message({ showClose: true, message: data.msg, type: 'success', onClose:()=>{ } }) } }else{ this.$message("服务器错误..."); } }).catch((err) => { }); }).catch(() => { loading.close(); }); }, //显示编辑界面 handleEdit: function (index, row) { //console.log(index); this.editFormVisible = true; this.editForm = Object.assign({}, row); this.editForm.createTime=libs.formartTime(this.editForm.createTime); }, //显示新增界面 handleAdd: function () { this.addFormVisible = true; this.addForm = { name: '', sex: -1, age: 0, birth: '', addr: '' }; }, //获取详情 handleInfo(index,row){ console.log(row); window.open(this.infoUrl+'/view?ids='+row.Id); }, //全选 checkboxChange(sels){ this.sels=sels; }, //编辑提交 editSubmit:function(){ var _this=this; this.$refs.editForm.validate((valid) => { if (valid) { this.editLoading = true; let editForm=Object.assign({},this.editForm); updateImgList(editForm).then((data)=>{ this.editLoading=false; //console.log(data); if(data.status=="200"){ var data=data.data; if(data.code=="300"){ _this.$message({ showClose: true, message: da.msg, type: 'error', onClose:()=>{ _this.$router.push({path:"/login"}) } }) }else if(data.code=="200"){ _this.getList(); _this.$message({ showClose: true, message: data.msg, type: 'success', onClose:()=>{ _this.editFormVisible=false; } }) } }else{ this.$message("服务器错误..."); } }).catch(err=>{ //console.log("err"+err); }) } }) }, //批量删除 batchRemove: function () { var arr=[]; for(var i=0;i<this.sels.length;i++){ arr.push(this.sels[i].Id); } var _this=this; delateimglist({"ids":arr}).then(res=>{ console.log(res); if(res.status=="200"){ var data=res.data; console.log(data); if(data.code=="300"){ _this.$message({ showClose: true, message: da.msg, type: 'error', onClose:()=>{ _this.$router.push({path:"/login"}) } }) }else if(data.code=="200"){ console.log(1111) _this.getList(); console.log(22222) _this.$message({ showClose: true, message: data.msg, type: 'success', onClose:()=>{ } }) } }else{ this.$message("服务器错误..."); } }).catch((err) => { }); }, //配置 handleCurrentChange:function(val){ var nowTime=new Date().getTime(); this.page=val; var _this=this; const loading=this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); getImageList({"rand":nowTime,"page":this.page,"pageSize":this.pageSize}).then(res=>{ //console.log(res); loading.close(); var data=res.data; if(data.status=="200"){ if(data.data.length>0){ _this.list=data.data; _this.total=data.data[0].sum; } }else if(res.data.code=="300"){ _this.$message({ showClose: true, message: res.data.msg, type: 'error', onClose:()=>{ _this.$router.push({path:"/login"}) } }) } }).catch(err=>{ // console.log(err); }); }, search1(){ this.serach=true; this.filters.titleTxt=this.titleTxt1; // console.log(this.titleTxt1); this.getList(); }, getList:function(){ this.listLoading=true; var nowTime=new Date().getTime(); var _this=this; var jsonData={"rand":nowTime,"page":this.page,"pageSize":this.pageSize}; if(this.serach){ jsonData=Object.assign({},jsonData,{"titleTxt":_this.filters.titleTxt}); } getImageList(jsonData).then(res=>{ //console.log(res); _this.listLoading=false; var data=res.data; if(data.status=="200"){ if(data.data.length>=0){ _this.list=data.data; _this.total=data.data[0].sum; } }else if(res.data.code=="300"){ _this.$message({ showClose: true, message: res.data.msg, type: 'error', onClose:()=>{ _this.$router.push({path:"/login"}) } }) } }).catch(err=>{ // console.log(err); }); } }, mounted() { this.getList(); } } </script> <style scoped> </style>