王健
3 years ago
9 changed files with 1117 additions and 3 deletions
|
After Width: | Height: | Size: 22 KiB |
@ -0,0 +1,84 @@
|
||||
import request from '@/router/axios' |
||||
//查询字典
|
||||
export function getDict(data) { |
||||
return request({ |
||||
url: "/api/dict/type/" + data, |
||||
method: "get", |
||||
}) |
||||
} |
||||
|
||||
// 查询列表
|
||||
export function queryList(param) { |
||||
return request({ |
||||
url: '/api/rotateImage/page', |
||||
method: 'get', |
||||
params: param |
||||
}) |
||||
} |
||||
|
||||
//新增数据
|
||||
export function addData(param) { |
||||
return request({ |
||||
url: '/api/rotateImage', |
||||
method: 'post', |
||||
data: param |
||||
}) |
||||
} |
||||
|
||||
// 修改数据
|
||||
export function updateData(param) { |
||||
return request({ |
||||
url: '/api/rotateImage', |
||||
method: 'put', |
||||
headers: { 'Content-Type': 'application/json' }, |
||||
data: param |
||||
}) |
||||
} |
||||
|
||||
// 删除数据
|
||||
export function delData(dataId) { |
||||
return request({ |
||||
url: `/api/rotateImage/deleteByIds?ids=${dataId}`, |
||||
method: 'delete', |
||||
}) |
||||
} |
||||
|
||||
|
||||
// 查询列表
|
||||
export function queryGroupList(param) { |
||||
return request({ |
||||
url: '/api/rotateGroup/page', |
||||
method: 'get', |
||||
params: param |
||||
}) |
||||
} |
||||
|
||||
//新增数据
|
||||
export function addGroupData(param) { |
||||
return request({ |
||||
url: '/api/rotateGroup', |
||||
method: 'post', |
||||
data: param |
||||
}) |
||||
} |
||||
|
||||
// 修改数据
|
||||
export function updateGroupData(param) { |
||||
return request({ |
||||
url: '/api/rotateGroup', |
||||
method: 'put', |
||||
headers: { 'Content-Type': 'application/json' }, |
||||
data: param |
||||
}) |
||||
} |
||||
|
||||
// 删除数据
|
||||
export function delGroupData(dataId) { |
||||
return request({ |
||||
url: `/api/rotateGroup/${dataId}`, |
||||
method: 'delete', |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
@ -0,0 +1,597 @@
|
||||
<template> |
||||
<div class="normal_page"> |
||||
<div class="page_search"> |
||||
<div> |
||||
<el-form :inline="true" :model="searchForm" class="demo-form-inline"> |
||||
<el-form-item label="图片名称："> |
||||
<el-input |
||||
v-model="searchForm.imageName" |
||||
placeholder="请输入图片名称" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="状态："> |
||||
<el-select v-model="searchForm.statusCd" placeholder="请选择状态"> |
||||
<el-option |
||||
v-for="item in statusCdList" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="分组："> |
||||
<el-select v-model="searchForm.groupId" placeholder="请选择分组"> |
||||
<el-option |
||||
v-for="item in groupList" |
||||
:key="item.groupId" |
||||
:label="item.groupName" |
||||
:value="item.groupId" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="onSubmit">查询</el-button> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button @click="onReset">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</div> |
||||
<div class="page_content"> |
||||
<div class="page_content_head"> |
||||
<div style="display: flex; justify-content: space-between"> |
||||
<div class="page_content_head_left"> |
||||
<div>轮播图列表</div> |
||||
<div style="margin-left: 10px"> |
||||
<img src="@public/img/land/u1343.png" /> |
||||
</div> |
||||
<div style="margin-left: 10px"> |
||||
<span>已选择{{ selectedData.length }}项</span> |
||||
</div> |
||||
<div style="margin-left: 10px"> |
||||
<el-button type="text" @click="clearSelection">清空</el-button> |
||||
</div> |
||||
</div> |
||||
<div class="page_content_head_right"> |
||||
<div> |
||||
<el-button @click="multiDelete" v-show="hasSelectData" |
||||
><img |
||||
style="margin-right: 5px" |
||||
src="@public/img/land/u1340.png" |
||||
/>批量删除 |
||||
</el-button> |
||||
</div> |
||||
<div style="margin-right: 30px"> |
||||
<el-button @click="showGroup" type="primary">轮播分组</el-button> |
||||
</div> |
||||
<div style="margin-right: 30px"> |
||||
<el-button @click="newItem" type="primary" |
||||
><i class="el-icon-plus"></i>新建 |
||||
</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="page_content_table"> |
||||
<el-table |
||||
:data="tableData" |
||||
border |
||||
@selection-change="handleSelectionChange" |
||||
style="width: 100%" |
||||
ref="multipleTable" |
||||
v-loading="loading" |
||||
> |
||||
<el-table-column fixed type="selection" width="55"></el-table-column> |
||||
<el-table-column |
||||
v-for="(item, index) in cols" |
||||
:key="index" |
||||
:prop="item.prop" |
||||
:label="item.label" |
||||
:width="item.width" |
||||
show-overflow-tooltip |
||||
> |
||||
</el-table-column> |
||||
<el-table-column fixed="right" label="操作" width="200"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" size="small" @click="editItem(scope.row)" |
||||
>编辑 |
||||
</el-button> |
||||
<el-button |
||||
type="text" |
||||
size="small" |
||||
v-if="scope.row.statusCd == 1000" |
||||
@click="updateStatus(scope.row, 1100)" |
||||
>禁用 |
||||
</el-button> |
||||
<el-button |
||||
type="text" |
||||
v-else |
||||
size="small" |
||||
@click="updateStatus(scope.row, 1000)" |
||||
>发布 |
||||
</el-button> |
||||
<el-button type="text" size="small" @click="delItem(scope.row)" |
||||
>删除 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="page_page"> |
||||
<el-pagination |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
:current-page="page.currentPage" |
||||
:page-sizes="[10, 20, 30, 40]" |
||||
:page-size="page.pageSize" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="page.total" |
||||
> |
||||
</el-pagination> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="30%"> |
||||
<el-form :model="editForm" :disabled="dialogReadOnly" label-width="150px"> |
||||
<el-form-item label="图片名称："> |
||||
<el-input |
||||
v-model="editForm.imageName" |
||||
placeholder="请输入图片名称" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="分组："> |
||||
<el-select v-model="editForm.groupId" placeholder="请选择分组"> |
||||
<el-option |
||||
v-for="item in groupList" |
||||
:key="item.groupId" |
||||
:label="item.groupName" |
||||
:value="item.groupId" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="排序："> |
||||
<el-input-number |
||||
controls-position="right" |
||||
v-model="editForm.sort" |
||||
placeholder="请输入排序" |
||||
></el-input-number> |
||||
</el-form-item> |
||||
<el-form-item label="上传图片："> |
||||
<el-upload |
||||
action="" |
||||
list-type="picture-card" |
||||
:limit="limit" |
||||
:file-list="editForm.previewUrl" |
||||
:http-request="uploadFile" |
||||
> |
||||
<i class="el-icon-plus avatar-uploader-icon"></i> |
||||
<div slot="tip" class="el-upload__tip"> |
||||
只能上传图片文件，且不超过5Mb |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="save">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
<el-dialog title="轮播分组" :visible.sync="groupVisible"> |
||||
<div style="width: 130px; float: right; margin-bottom: 10px"> |
||||
<el-button @click="newGroupItem" type="primary">新增轮播分组</el-button> |
||||
</div> |
||||
<el-table |
||||
:data="groupTableList" |
||||
border |
||||
@selection-change="handleSelectionChange" |
||||
style="width: 100%" |
||||
ref="multipleTable" |
||||
v-loading="loading" |
||||
> |
||||
<el-table-column |
||||
v-for="(item, index) in groupCols" |
||||
:key="index" |
||||
:prop="item.prop" |
||||
:label="item.label" |
||||
:width="item.width" |
||||
show-overflow-tooltip |
||||
> |
||||
</el-table-column> |
||||
<el-table-column fixed="right" label="操作" width="200"> |
||||
<template slot-scope="scope"> |
||||
<el-button |
||||
type="text" |
||||
size="small" |
||||
@click="editGroupItem(scope.row)" |
||||
>编辑 |
||||
</el-button> |
||||
<el-button type="text" size="small" @click="delGroupItem(scope.row)" |
||||
>删除 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="page_page"> |
||||
<el-pagination |
||||
@size-change="handleGroupSizeChange" |
||||
@current-change="handleGroupCurrentChange" |
||||
:current-page="groupPage.currentPage" |
||||
:page-sizes="[10, 20, 30, 40]" |
||||
:page-size="groupPage.pageSize" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="groupPage.total" |
||||
> |
||||
</el-pagination> |
||||
</div> |
||||
</el-dialog> |
||||
<el-dialog |
||||
:title="groupTitle" |
||||
:visible.sync="groupDialogVisible" |
||||
width="30%" |
||||
> |
||||
<el-form :model="editGroupForm" label-width="120px"> |
||||
<el-form-item label="分组名称："> |
||||
<el-input |
||||
v-model="editGroupForm.groupName" |
||||
placeholder="请输入分组名称" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="切换时间(ms)："> |
||||
<el-input-number |
||||
controls-position="right" |
||||
v-model="editGroupForm.time" |
||||
placeholder="请输入切换时间" |
||||
></el-input-number> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="groupDialogVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="saveGroup">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
queryList, |
||||
delData, |
||||
addData, |
||||
updateData, |
||||
getDict, |
||||
queryGroupList, |
||||
addGroupData, |
||||
updateGroupData, |
||||
delGroupData, |
||||
} from "@/views/banner/api/api"; |
||||
import { uploadFile } from "@/views/api/api"; |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
limit: 1, |
||||
searchForm: { |
||||
// 公告序号 |
||||
imageName: "", |
||||
statusCd: "", |
||||
groupId: "", |
||||
}, |
||||
tableData: [], |
||||
// 列 |
||||
cols: [ |
||||
{ |
||||
label: "序号", |
||||
prop: "id", |
||||
}, |
||||
{ |
||||
label: "图片名称", |
||||
prop: "imageName", |
||||
}, |
||||
{ |
||||
label: "图片地址", |
||||
prop: "imagePath", |
||||
}, |
||||
{ |
||||
label: "分组", |
||||
prop: "groupId", |
||||
}, |
||||
{ |
||||
label: "排序", |
||||
prop: "sort", |
||||
}, |
||||
{ |
||||
label: "状态", |
||||
prop: "statusName", |
||||
}, |
||||
], |
||||
groupCols: [ |
||||
{ |
||||
label: "序号", |
||||
prop: "groupId", |
||||
}, |
||||
{ |
||||
label: "名称", |
||||
prop: "groupName", |
||||
}, |
||||
{ |
||||
label: "切换时间", |
||||
prop: "time", |
||||
}, |
||||
], |
||||
// 表格加载 |
||||
loading: false, |
||||
// 选中的数据 |
||||
selectedData: [], |
||||
page: { |
||||
total: 0, // 总页数 |
||||
currentPage: 1, // 当前页数 |
||||
pageSize: 10, // 每页显示多少条 |
||||
}, |
||||
groupPage: { |
||||
total: 0, // 总页数 |
||||
currentPage: 1, // 当前页数 |
||||
pageSize: 10, // 每页显示多少条 |
||||
}, |
||||
// 有选中数据 |
||||
hasSelectData: false, |
||||
title: "新增轮播图", |
||||
dialogReadOnly: false, |
||||
editForm: {}, |
||||
dialogVisible: false, |
||||
statusCdList: [], |
||||
groupList: [], |
||||
groupTableList: [], |
||||
groupVisible: false, |
||||
groupTitle: "新增轮播分组", |
||||
groupDialogVisible: false, |
||||
editGroupForm: {}, |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.onSubmit(); |
||||
getDict("banner_status").then((res) => { |
||||
this.statusCdList = res.data.data; |
||||
}); |
||||
queryGroupList({ size: 99999 }).then((res) => { |
||||
this.groupList = res.data.data.records; |
||||
}); |
||||
}, |
||||
watch: { |
||||
selectedData: { |
||||
handler(newVal, oldVal) { |
||||
this.hasSelectData = newVal.length > 0 ? true : false; |
||||
}, |
||||
}, |
||||
}, |
||||
methods: { |
||||
//展示分组 |
||||
showGroup() { |
||||
this.groupVisible = true; |
||||
this.queryGroupList(); |
||||
}, |
||||
queryGroupList() { |
||||
let param = { |
||||
current: this.groupPage.currentPage, |
||||
size: this.groupPage.pageSize, |
||||
}; |
||||
this.loading = true; |
||||
queryGroupList(param).then((res) => { |
||||
this.groupTableList = res.data.data.records; |
||||
this.groupPage.total = res.data.data.total; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
// 清空选中 |
||||
clearSelection() { |
||||
this.$refs.multipleTable.clearSelection(); |
||||
}, |
||||
// 查询 |
||||
onSubmit() { |
||||
this.loading = true; |
||||
let param = Object.assign( |
||||
{ |
||||
current: this.page.currentPage, |
||||
size: this.page.pageSize, |
||||
}, |
||||
this.searchForm |
||||
); |
||||
queryList(param).then((response) => { |
||||
this.tableData = response.data.data.records; |
||||
this.page.total = response.data.data.total; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
// 重置 |
||||
onReset() { |
||||
for (let item in this.searchForm) { |
||||
this.searchForm[item] = ""; |
||||
} |
||||
this.onSubmit(); |
||||
}, |
||||
handleSizeChange(val) { |
||||
this.page.pageSize = val; |
||||
this.onSubmit(); |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page.currentPage = val; |
||||
this.onSubmit(); |
||||
}, |
||||
handleGroupSizeChange(val) { |
||||
this.groupPage.pageSize = val; |
||||
this.queryGroupList(); |
||||
}, |
||||
handleGroupCurrentChange(val) { |
||||
this.groupPage.currentPage = val; |
||||
this.queryGroupList(); |
||||
}, |
||||
// 选中更改 |
||||
handleSelectionChange(val) { |
||||
this.selectedData = val; |
||||
}, |
||||
// 新建 |
||||
newItem() { |
||||
this.title = "新增轮播图"; |
||||
this.editForm = {}; |
||||
this.dialogReadOnly = false; |
||||
this.dialogVisible = true; |
||||
}, |
||||
// 编辑 |
||||
editItem(row) { |
||||
this.title = "编辑轮播图"; |
||||
row.previewUrl = [{ name: row.imageName, url: row.imagePath }]; |
||||
this.editForm = row; |
||||
this.dialogReadOnly = false; |
||||
this.dialogVisible = true; |
||||
}, |
||||
updateStatus(row, status) { |
||||
row.statusCd = status; |
||||
updateData(row).then((res) => { |
||||
this.onSubmit(); |
||||
}); |
||||
}, |
||||
//保存数据 |
||||
save() { |
||||
if (this.editForm.id) { |
||||
updateData(this.editForm).then((res) => { |
||||
this.dialogVisible = false; |
||||
this.onSubmit(); |
||||
}); |
||||
} else { |
||||
addData(this.editForm).then((res) => { |
||||
this.dialogVisible = false; |
||||
this.onSubmit(); |
||||
}); |
||||
} |
||||
}, |
||||
// 查看 |
||||
viewItem(row) { |
||||
this.title = "查看轮播图"; |
||||
row.previewUrl = row.imagePath; |
||||
this.editForm = row; |
||||
this.dialogReadOnly = true; |
||||
this.dialogVisible = true; |
||||
}, |
||||
// 删除单个 |
||||
delItem(row) { |
||||
let _this = this; |
||||
this.$confirm("确认删除？", "系统提示", { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
cancelButtonClass: "btn-custom-cancel", |
||||
type: "warning", |
||||
}) |
||||
.then(function () { |
||||
delData(row.id).then((res) => { |
||||
if (res.data.success) { |
||||
_this.$message({ |
||||
type: "success", |
||||
message: "删除成功", |
||||
}); |
||||
_this.onSubmit(); |
||||
} else { |
||||
_this.$message("删除失败"); |
||||
} |
||||
}); |
||||
}) |
||||
.catch(function () {}); |
||||
}, |
||||
//批量删除 |
||||
multiDelete() { |
||||
if (this.selectedData.length < 1) { |
||||
this.$message({ |
||||
message: "未选中数据", |
||||
type: "warning", |
||||
}); |
||||
return; |
||||
} |
||||
let ids = []; |
||||
for (let item of this.selectedData) { |
||||
ids.push(item["id"]); |
||||
} |
||||
delData(ids).then((res) => { |
||||
if (res.data.success) { |
||||
this.$message({ |
||||
type: "success", |
||||
message: "删除成功", |
||||
}); |
||||
this.onSubmit(); |
||||
} else { |
||||
this.$message("删除失败"); |
||||
} |
||||
}); |
||||
}, |
||||
// 新建 |
||||
newGroupItem() { |
||||
this.groupTitle = "新增轮播图"; |
||||
this.editGroupForm = {}; |
||||
this.groupDialogVisible = true; |
||||
}, |
||||
// 编辑 |
||||
editGroupItem(row) { |
||||
this.groupTitle = "编辑轮播图"; |
||||
this.editGroupForm = row; |
||||
this.groupDialogVisible = true; |
||||
}, |
||||
//保存数据 |
||||
saveGroup() { |
||||
if (this.editGroupForm.groupId) { |
||||
updateGroupData(this.editGroupForm).then((res) => { |
||||
this.groupDialogVisible = false; |
||||
this.queryGroupList(); |
||||
}); |
||||
} else { |
||||
addGroupData(this.editGroupForm).then((res) => { |
||||
this.groupDialogVisible = false; |
||||
this.queryGroupList(); |
||||
}); |
||||
} |
||||
}, |
||||
// 删除单个 |
||||
delGroupItem(row) { |
||||
let _this = this; |
||||
this.$confirm("确认删除？", "系统提示", { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
cancelButtonClass: "btn-custom-cancel", |
||||
type: "warning", |
||||
}) |
||||
.then(function () { |
||||
delGroupData(row.groupId).then((res) => { |
||||
if (res.data.success) { |
||||
_this.$message({ |
||||
type: "success", |
||||
message: "删除成功", |
||||
}); |
||||
_this.queryGroupList(); |
||||
} else { |
||||
_this.$message("删除失败"); |
||||
} |
||||
}); |
||||
}) |
||||
.catch(function () {}); |
||||
}, |
||||
//上传文件 |
||||
uploadFile(file) { |
||||
uploadFile(file).then((res) => { |
||||
if (res.data.success) { |
||||
this.editForm.imagePath = res.data.data.path; |
||||
this.editForm.previewUrl = res.data.data.previewUrl; |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
// 公共样式 |
||||
@import "@/styles/public.scss"; |
||||
/deep/.el-dialog .el-form-item__content > .el-input { |
||||
width: 62%; |
||||
} |
||||
/deep/.el-dialog .el-form-item__content > .el-input-number { |
||||
width: 62%; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,44 @@
|
||||
import request from '@/router/axios' |
||||
//查询字典
|
||||
export function getDict(data) { |
||||
return request({ |
||||
url: "/api/dict/type/" + data, |
||||
method: "get", |
||||
}) |
||||
} |
||||
|
||||
// 查询列表
|
||||
export function queryList(param) { |
||||
return request({ |
||||
url: '/api/report/page', |
||||
method: 'get', |
||||
params: param |
||||
}) |
||||
} |
||||
|
||||
//新增数据
|
||||
export function addData(param) { |
||||
return request({ |
||||
url: '/api/report', |
||||
method: 'post', |
||||
data: param |
||||
}) |
||||
} |
||||
|
||||
// 修改数据
|
||||
export function updateData(param) { |
||||
return request({ |
||||
url: '/api/report', |
||||
method: 'put', |
||||
headers: { 'Content-Type': 'application/json' }, |
||||
data: param |
||||
}) |
||||
} |
||||
|
||||
// 删除数据
|
||||
export function delData(dataId) { |
||||
return request({ |
||||
url: `/api/report/deleteByIds?ids=${dataId}`, |
||||
method: 'delete', |
||||
}) |
||||
} |
||||
@ -0,0 +1,388 @@
|
||||
<template> |
||||
<div class="normal_page"> |
||||
<div class="page_search"> |
||||
<div> |
||||
<el-form :inline="true" :model="searchForm" class="demo-form-inline"> |
||||
<el-form-item label="报告名称："> |
||||
<el-input |
||||
v-model="searchForm.reportName" |
||||
placeholder="请输入报告名称" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="报告类型："> |
||||
<el-select |
||||
v-model="searchForm.reportType" |
||||
placeholder="请选择报告类型" |
||||
> |
||||
<el-option |
||||
v-for="item in reportList" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="onSubmit">查询</el-button> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button @click="onReset">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</div> |
||||
<div class="page_content"> |
||||
<div class="page_content_head"> |
||||
<div style="display: flex; justify-content: space-between"> |
||||
<div class="page_content_head_left"> |
||||
<div>报告列表</div> |
||||
<div style="margin-left: 10px"> |
||||
<img src="@public/img/land/u1343.png" /> |
||||
</div> |
||||
<div style="margin-left: 10px"> |
||||
<span>已选择{{ selectedData.length }}项</span> |
||||
</div> |
||||
<div style="margin-left: 10px"> |
||||
<el-button type="text" @click="clearSelection">清空</el-button> |
||||
</div> |
||||
</div> |
||||
<div class="page_content_head_right"> |
||||
<div> |
||||
<el-button @click="multiDelete" v-show="hasSelectData" |
||||
><img |
||||
style="margin-right: 5px" |
||||
src="@public/img/land/u1340.png" |
||||
/>批量删除 |
||||
</el-button> |
||||
</div> |
||||
<div style="margin-right: 30px"> |
||||
<el-button @click="newItem" type="primary" |
||||
><i class="el-icon-plus"></i>新建 |
||||
</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="page_content_table"> |
||||
<el-table |
||||
:data="tableData" |
||||
border |
||||
@selection-change="handleSelectionChange" |
||||
style="width: 100%" |
||||
ref="multipleTable" |
||||
v-loading="loading" |
||||
> |
||||
<el-table-column fixed type="selection" width="55"></el-table-column> |
||||
<el-table-column |
||||
v-for="(item, index) in cols" |
||||
:key="index" |
||||
:prop="item.prop" |
||||
:label="item.label" |
||||
:width="item.width" |
||||
show-overflow-tooltip |
||||
> |
||||
</el-table-column> |
||||
<el-table-column fixed="right" label="操作" width="200"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" size="small" @click="editItem(scope.row)" |
||||
>编辑 |
||||
</el-button> |
||||
<el-button |
||||
type="text" |
||||
size="small" |
||||
v-if="scope.row.statusCd == 1000" |
||||
@click="updateStatus(scope.row, 1100)" |
||||
>禁用 |
||||
</el-button> |
||||
<el-button |
||||
type="text" |
||||
v-else |
||||
size="small" |
||||
@click="updateStatus(scope.row, 1000)" |
||||
>发布 |
||||
</el-button> |
||||
<el-button type="text" size="small" @click="delItem(scope.row)" |
||||
>删除 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="page_page"> |
||||
<el-pagination |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
:current-page="page.currentPage" |
||||
:page-sizes="[10, 20, 30, 40]" |
||||
:page-size="page.pageSize" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="page.total" |
||||
> |
||||
</el-pagination> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="30%"> |
||||
<el-form :model="editForm" :disabled="dialogReadOnly" label-width="150px"> |
||||
<el-form-item label="报告名称："> |
||||
<el-input |
||||
v-model="editForm.reportName" |
||||
placeholder="请输入报告名称" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="报告类型："> |
||||
<el-select v-model="editForm.reportType" placeholder="请选择报告类型"> |
||||
<el-option |
||||
v-for="item in reportList" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="报告："> |
||||
<el-upload action="#" :limit="limit" :http-request="uploadFile"> |
||||
<el-button size="small" type="primary">点击上传</el-button> |
||||
<div slot="tip" class="el-upload__tip"> |
||||
只能上传PDF文件，且不超过5Mb |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="save">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
queryList, |
||||
delData, |
||||
addData, |
||||
updateData, |
||||
getDict, |
||||
} from "@/views/report/api/api"; |
||||
import { uploadFile } from "@/views/api/api"; |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
limit: 1, |
||||
searchForm: { |
||||
// 公告序号 |
||||
reportName: "", |
||||
reportType: "", |
||||
}, |
||||
tableData: [], |
||||
// 列 |
||||
cols: [ |
||||
{ |
||||
label: "序号", |
||||
prop: "id", |
||||
}, |
||||
{ |
||||
label: "报告名称", |
||||
prop: "reportName", |
||||
}, |
||||
{ |
||||
label: "报告类型", |
||||
prop: "reportType", |
||||
}, |
||||
{ |
||||
label: "文件类型", |
||||
prop: "fileType", |
||||
}, |
||||
{ |
||||
label: "状态", |
||||
prop: "statusCd", |
||||
}, |
||||
{ |
||||
label: "创建时间", |
||||
prop: "createDate", |
||||
}, |
||||
], |
||||
// 表格加载 |
||||
loading: false, |
||||
// 选中的数据 |
||||
selectedData: [], |
||||
page: { |
||||
total: 0, // 总页数 |
||||
currentPage: 1, // 当前页数 |
||||
pageSize: 10, // 每页显示多少条 |
||||
}, |
||||
// 有选中数据 |
||||
hasSelectData: false, |
||||
title: "新增报告", |
||||
dialogReadOnly: false, |
||||
editForm: {}, |
||||
dialogVisible: false, |
||||
reportList: [], |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.onSubmit(); |
||||
getDict("report_type").then((res) => { |
||||
this.reportList = res.data.data; |
||||
}); |
||||
}, |
||||
watch: { |
||||
selectedData: { |
||||
handler(newVal, oldVal) { |
||||
this.hasSelectData = newVal.length > 0 ? true : false; |
||||
}, |
||||
}, |
||||
}, |
||||
methods: { |
||||
// 清空选中 |
||||
clearSelection() { |
||||
this.$refs.multipleTable.clearSelection(); |
||||
}, |
||||
// 查询 |
||||
onSubmit() { |
||||
this.loading = true; |
||||
let param = Object.assign( |
||||
{ |
||||
current: this.page.currentPage, |
||||
size: this.page.pageSize, |
||||
}, |
||||
this.searchForm |
||||
); |
||||
queryList(param).then((response) => { |
||||
this.tableData = response.data.data.records; |
||||
this.page.total = response.data.data.total; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
// 重置 |
||||
onReset() { |
||||
for (let item in this.searchForm) { |
||||
this.searchForm[item] = ""; |
||||
} |
||||
}, |
||||
handleSizeChange(val) { |
||||
this.page.pageSize = val; |
||||
this.onSubmit(); |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page.currentPage = val; |
||||
this.onSubmit(); |
||||
}, |
||||
// 选中更改 |
||||
handleSelectionChange(val) { |
||||
this.selectedData = val; |
||||
}, |
||||
// 新建 |
||||
newItem() { |
||||
this.title = "新增报告"; |
||||
this.editForm = {}; |
||||
this.dialogReadOnly = false; |
||||
this.dialogVisible = true; |
||||
}, |
||||
// 编辑 |
||||
editItem(row) { |
||||
this.title = "编辑报告"; |
||||
this.editForm = row; |
||||
this.dialogReadOnly = false; |
||||
this.dialogVisible = true; |
||||
}, |
||||
updateStatus(row, status) { |
||||
row.statusCd = status; |
||||
updateData(row).then((res) => { |
||||
this.onSubmit(); |
||||
}); |
||||
}, |
||||
//保存数据 |
||||
save() { |
||||
if (this.editForm.id) { |
||||
updateData(this.editForm).then((res) => { |
||||
this.dialogVisible = false; |
||||
this.onSubmit(); |
||||
}); |
||||
} else { |
||||
addData(this.editForm).then((res) => { |
||||
this.dialogVisible = false; |
||||
this.onSubmit(); |
||||
}); |
||||
} |
||||
}, |
||||
// 查看 |
||||
viewItem(row) { |
||||
this.title = "查看报告"; |
||||
this.editForm = row; |
||||
this.dialogReadOnly = true; |
||||
this.dialogVisible = true; |
||||
}, |
||||
// 删除单个 |
||||
delItem(row) { |
||||
let _this = this; |
||||
this.$confirm("确认删除？", "系统提示", { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
cancelButtonClass: "btn-custom-cancel", |
||||
type: "warning", |
||||
}) |
||||
.then(function () { |
||||
delData(row.id).then((res) => { |
||||
if (res.data.success) { |
||||
_this.$message({ |
||||
type: "success", |
||||
message: "删除成功", |
||||
}); |
||||
_this.onSubmit(); |
||||
} else { |
||||
_this.$message("删除失败"); |
||||
} |
||||
}); |
||||
}) |
||||
.catch(function () {}); |
||||
}, |
||||
//批量删除 |
||||
multiDelete() { |
||||
if (this.selectedData.length < 1) { |
||||
this.$message({ |
||||
message: "未选中数据", |
||||
type: "warning", |
||||
}); |
||||
return; |
||||
} |
||||
let ids = []; |
||||
for (let item of this.selectedData) { |
||||
ids.push(item["id"]); |
||||
} |
||||
delData(ids).then((res) => { |
||||
if (res.data.success) { |
||||
this.$message({ |
||||
type: "success", |
||||
message: "删除成功", |
||||
}); |
||||
this.onSubmit(); |
||||
} else { |
||||
this.$message("删除失败"); |
||||
} |
||||
}); |
||||
}, |
||||
//上传文件 |
||||
uploadFile(file) { |
||||
uploadFile(file).then((res) => { |
||||
if (res.data.success) { |
||||
this.editForm.filePath = res.data.data.path; |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
// 公共样式 |
||||
@import "@/styles/public.scss"; |
||||
/deep/ .el-upload-list { |
||||
display: block; |
||||
} |
||||
/deep/.el-dialog .el-form-item__content > .el-input { |
||||
width: 61%; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue