<!-- 列表 -->
<template>
<div>
<elDialog ref="elDialog" v-on:loadData="loadData"></elDialog>
<edit ref="edit" v-on:loadData="loadData"></edit>
<list ref="list" :column="column" :search="search" :button="button" :add="add"></list>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
label="日期"
width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
label="姓名"
width="180">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import fetch from "@/utils/fetch.js";
import { Message } from "element-ui";
import elDialog from "./elDialog";
import list from "list";
import edit from "./edit";
export default {
components: {
list,
elDialog,
edit
},
mounted() {
this.loadData();
},
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
picState: "1",
conf: {
parameters: {},
dir: "asc",
sort: "id"
},
// whetherLink:"",
search: [
{
name: "查询内容",
searchType: "input",
type: "keyWord"
},
{
name: "创建时间起",
searchType: "date",
type: "dateq"
},
{
name: "创建时间止",
searchType: "date",
type: "datez"
}
],
column: [
{ name: "轮播分类", type: "sliderType" },
{ name: "图片名称", type: "picName" },
{ name: "图片地址", type: "picAddress" },
{ name: "图片简述", type: "picAbstract" },
{ name: "图片顺序", type: "picOrder" },
{ name: "是否链接", type: "whetherLink" },
{ name: "链接地址", type: "linkAddress" },
{ name: "创建ID", type: "createUserId" },
{ name: "创建人", type: "createUserName" },
{ name: "创建时间", type: "createTime" },
{
name: "文章状态",
type: "picState",
width: "100",
sortable: false,
render: function(r) {
return r.picState == "1" ? "有效" : "已作废";
}
}
],
button: [
{
name: "编辑",
type: "warning",
click: this.edit,
disabled: this.btnDisabled
},
{
name: "作废",
type: "danger", //设置按钮颜色
click: this.cancel,
disabled: this.btnDisabled
},
{
name: "删除",
type: "danger", //设置按钮颜色
click: this.delete
},
{
name: "查看",
type: "primary",
click: this.view,
disabled: this.btnDisabled
},
{
name: "恢复",
type: "primary",
click: this.recover,
disabled: this.btnAbled
}
],
add: {
name: "添加",
type: "primary",
click: this.addMethod
},
sliderInfo: {}
};
},
mounted() {
this.loadData();
},
methods: {
loadData() {
this.$refs.list.loadData("/api/assliderinfo/page", this.conf);
},
addMethod() {
this.$refs.elDialog.init();
},
search(content) {
loadData();
},
edit(r) {
this.$refs.edit.init(r);
},
cancel(e) {
this.$confirm("此操作将该文章作废, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.sliderInfo.id = e.id;
this.sliderInfo.picState = 0;
fetch.post("/api/assliderinfo/save", this.sliderInfo).then(res => {
if (res.code == "0") {
this.loadData();
this.$message({
type: "warning",
message: "此文章已作废!"
});
}
});
});
},
delete(r) {
this.$confirm("是否删除", "提示", {
type: "warning",
confirmButtonText: "确定",
cancelButtonText: "取消"
})
.then(() => {
// 删除API
fetch.delete("/api/assliderinfo/" + r.id).then(res => {
if (res.code == "0") {
Message({
message: res.msg,
type: "success",
duration: 3 * 1000
});
//成功后刷新数据
this.loadData();
} else {
Message({
message: res.msg,
type: "error",
duration: 3 * 1000
});
}
});
})
.catch(error => {
console.log(error);
});
},
view(e) {
this.$refs.views.init(e.id);
},
dateFormat(r) {
return this.$moment(r.publishDate).format("YYYY-MM-DD");
},
btnDisabled(e) {
if (e.picState == 1) {
return false;
} else {
return true;
}
},
btnAbled(e) {
if (e.picState == 0) {
return false;
} else {
return true;
}
},
recover(e) {
this.$confirm("此操作将该文章恢复, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.sliderInfo.id = e.id;
this.sliderInfo.picState = 1;
fetch
.post("/api/assliderinfo/save", this.sliderInfo)
.then(res => {
if (res.code == "0") {
this.loadData();
this.$message({
type: "success",
message: "此文章已恢复"
});
}
});
});
}
}
};
</script>
<style scoped>
</style>
