<template>
|
<!--
|
作者：系统自动生成
|
时间：当前日期
|
描述：插件中心-名片模板-管理列表
|
-->
|
<div class="user" v-loading="listLoading">
|
<div class="common-form">名片模板管理</div>
|
<div class="common-main">
|
<div class="common-toolbar">
|
<el-button type="primary" @click="addTemplate">添加模板</el-button>
|
<el-button type="danger" @click="batchDelete" :disabled="multipleSelection.length === 0">批量删除</el-button>
|
</div>
|
|
<el-table :data="listData" border class="common-table" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55" align="center"></el-table-column>
|
<el-table-column prop="template_id" label="ID" width="80" align="center"></el-table-column>
|
<el-table-column prop="image" label="模板图片" align="center">
|
<template slot-scope="scope">
|
<a :href="scope.row.image" target="_blank">
|
<img :src="scope.row.image" class="logo-img" alt="模板图片">
|
</a>
|
</template>
|
</el-table-column>
|
<el-table-column prop="create_time" label="创建时间" width="180" align="center"></el-table-column>
|
<el-table-column label="操作" align="center" fixed="right">
|
<template slot-scope="scope">
|
<el-button type="primary" size="small" @click="editTemplate(scope.row)" class="m-r-5">编辑</el-button>
|
<el-button type="danger" size="small" @click="deleteTemplate(scope.row)" class="m-r-5">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="common-pagination">
|
<div class="page-text">共 {{ total }} 条记录</div>
|
<el-pagination
|
layout="prev, pager, next, jumper"
|
:total="total"
|
:page-size="listQuery.pagesize"
|
:current-page="listQuery.page"
|
@current-change="pageChange"
|
@size-change="pageSizeChange"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import BusinessApi from '@/api/business';
|
|
export default {
|
data() {
|
return {
|
total: 0,
|
listLoading: false,
|
multipleSelection: [],
|
listQuery: {
|
page: 1,
|
pagesize: 10,
|
title: ''
|
},
|
listData: []
|
};
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
// 获取列表数据
|
getList() {
|
const that = this;
|
that.listLoading = true;
|
BusinessApi.templateList(that.listQuery)
|
.then(res => {
|
that.listLoading = false;
|
that.listData = res.data.list.data;
|
that.total = res.data.list.total;
|
})
|
.catch(error => {
|
that.listLoading = false;
|
console.error('获取列表失败', error);
|
that.$message.error('获取数据失败，请重试');
|
});
|
},
|
// 查询
|
handleQuery() {
|
this.listQuery.page = 1;
|
this.getList();
|
},
|
// 重置
|
resetQuery() {
|
this.listQuery = {
|
page: 1,
|
pagesize: 10,
|
title: ''
|
};
|
this.getList();
|
},
|
// 分页改变
|
pageChange(page) {
|
this.listQuery.page = page;
|
this.getList();
|
},
|
// 每页条数改变
|
pageSizeChange(pagesize) {
|
this.listQuery.pagesize = pagesize;
|
this.getList();
|
},
|
// 选择项变化
|
handleSelectionChange(selection) {
|
this.multipleSelection = selection;
|
},
|
// 批量删除
|
batchDelete() {
|
if (this.multipleSelection.length === 0) {
|
this.$message.warning('请选择要删除的模板');
|
return;
|
}
|
|
const template_ids = this.multipleSelection.map(item => item.template_id).join(',');
|
|
this.$confirm('确定要删除选中的 ' + this.multipleSelection.length + ' 个模板吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.listLoading = true;
|
BusinessApi.templateDelete({template_id: template_ids})
|
.then(res => {
|
this.listLoading = false;
|
this.$message({
|
message: '删除成功',
|
type: 'success'
|
});
|
this.getList();
|
this.multipleSelection = [];
|
})
|
.catch(error => {
|
this.listLoading = false;
|
this.$message.error('删除失败，请重试');
|
});
|
});
|
},
|
// 添加模板
|
addTemplate() {
|
this.$router.push('/plus/business/template/add');
|
},
|
// 编辑模板
|
editTemplate(row) {
|
this.$router.push(`/plus/business/template/edit?template_id=${row.template_id}`);
|
},
|
// 删除模板
|
deleteTemplate(row) {
|
this.$confirm('确定要删除该模板吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.listLoading = true;
|
BusinessApi.templateDelete({template_id: row.template_id})
|
.then(res => {
|
this.listLoading = false;
|
this.$message({
|
message: '删除成功',
|
type: 'success'
|
});
|
this.getList();
|
})
|
.catch(error => {
|
this.listLoading = false;
|
this.$message.error('删除失败，请重试');
|
});
|
});
|
},
|
// 更改默认状态
|
changeStatus(row) {
|
BusinessApi.templateDefault({template_id: row.template_id, is_default: row.is_default})
|
.then(res => {
|
this.$message({
|
message: '设置成功',
|
type: 'success'
|
});
|
})
|
.catch(error => {
|
this.$message.error('设置失败，请重试');
|
this.getList(); // 刷新列表以恢复正确状态
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.logo-img {
|
height: 170px;
|
border-radius: 4px;
|
}
|
|
.common-search {
|
margin-bottom: 15px;
|
padding: 10px 15px;
|
background-color: #f5f7fa;
|
border-radius: 4px;
|
}
|
|
.common-toolbar {
|
margin-bottom: 15px;
|
padding: 10px 0;
|
}
|
|
.common-table {
|
margin-bottom: 15px;
|
}
|
|
.common-pagination {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 10px 0;
|
}
|
|
.page-text {
|
color: #606266;
|
}
|
|
.inline-input {
|
margin-right: 10px;
|
}
|
|
.m-r-5 {
|
margin-right: 5px;
|
}
|
</style>
|
