<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>