Vue 单表 CRUD模板 前端
结合后端CRUD模板食用更佳
后端CRUD模板
js文件 指向了后端的方法
页面基本模板
import request from '@/utils/request'
// 查询关键词列表
export function page(param) {
return request({
url: '/systemConfig/page',
method: 'post',
params: param
})
}
// 新增
export function add(param) {
return request({
url: '/systemConfig/add',
method: 'post',
data: param,
headers: {
'Content-Type': 'application/json'
}
})
}
// 编辑
export function update(param) {
return request({
url: '/systemConfig/update',
method: 'post',
data: param,
headers: {
'Content-Type': 'application/json'
}
})
}
// 删除
export function deleteData(id) {
return request({
url: '/systemConfig/delete?id=' + id,
method: 'get'
})
}
// 导出
export function exportData(param) {
return request({
url: '/systemConfig/export',
method: 'post',
data: param,
headers: {
'Content-Type': 'application/json'
},
responseType: 'blob'
})
}
//导入
export function importData(formData) {
return request({
url: '/systemConfig/import',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
<template>
<div class="app-container">
</div>
</template>
<script>
//这些是等会引用的js文件中的方法
import { page, add, update, deleteData,exportData,importData } from '@/api/systemConfig'
export default {
data() {
return {
param: {
pageIndex: 1,
pageSize: 10,
total: 0
},
isQuery: false,
stores: [],
tableData: [],
needShowImg: false,
showImgUrl: '',
pickerOptions: {
disabledDate(time) {
const today = new Date()
today.setHours(0, 0, 0, 0)
return time.getTime() > today.getTime()
}
},
addView: false,
updateView: false,
systemConfigDto: {
id: '',
configName: '',
configCName: '',
configValue: '',
remark: ''
},
uploadFileList:[]
}
},
created() {
this.doQuery()
},
methods: {
doQuery(pageIndex, pageSize) {
},
doPageChange(pageIndex) {
this.doQuery(pageIndex, this.param.pageSize)
},
doPageSizeChange(size) {
this.param.pageSize = size
this.doQuery(1, this.param.pageSize)
},
showImg(url) {
this.needShowImg = true
this.showImgUrl = url
}
}
}
</script>
功能1:分页:
html页面代码:
<div>
<div>
<span>配置属性:</span>
<el-input v-model="param.configName" placeholder="" clearable style="width:15%" />
<span>配置中文名:</span>
<el-input v-model="param.configCName" placeholder="" clearable style="width:15%" />
<span>配置属性值:</span>
<el-input v-model="param.configValue" placeholder="" clearable style="width:15%" />
<el-button type="primary" :loading="isQuery" @click="doQuery(0)">查询</el-button>
</div>
<div style="margin-left: 2rem;margin-top: 6px">
<el-button type="warning" style="margin-left: 2%" @click="openAddView()">新增</el-button>
<el-button type="primary" :loading="downloading" @click="doExport()">导出</el-button>
<el-upload
style="display: inline-block;margin: 0 10px 0 10px"
action="#"
accept="xlsx"
:auto-upload="false"
:show-file-list="false"
:file-list="uploadFileList"
:on-change="importExcel"
>
<el-button :loading="uploading" type="success">导入</el-button>
</el-upload>
</div>
</div>
<div>
<el-table ref="multipleTable" :data="tableData" style="width: 100%;margin-top: 6px" border>
<el-table-column label="操作" width="160px">
<template v-slot="scope">
<el-button type="primary" size="mini" @click="OpenUpdateView(scope.row)">编辑</el-button>
<el-button type="warning" size="mini" @click="beginDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
<el-table-column label="配置属性" prop="configName" width="240px" />
<el-table-column label="配置中文名" prop="configCName" width="240px" />
<el-table-column label="配置属性值" prop="configValue" width="800px" />
<el-table-column label="备注" prop="remark" width="200px" />
</el-table>
</div>
<el-pagination style="margin-top: 12px;text-align: center" :current-page="param.pageIndex" :total="param.total" background :page-size="param.pageSize" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next" @current-change="doPageChange" @size-change="doPageSizeChange" />
method方法:
doQuery(pageIndex, pageSize) {
if (this.isQuery) {
return
}
this.isQuery = true
var _this = this
this.param.pageIndex = pageIndex || 1
this.param.pageSize = pageSize || 10
var param = this.param
//调用引入的page分页方法
page(param).then(response => {
_this.tableData = response.data.list
_this.param.total = response.data.totalCount
_this.isQuery = false
})
},
doPageChange(pageIndex) {
this.doQuery(pageIndex, this.param.pageSize)
},
doPageSizeChange(size) {
this.param.pageSize = size
this.doQuery(1, this.param.pageSize)
},
功能2:打开弹窗,编辑/新增
只有method代码。html代码已经在上面了。
//打开弹窗:
openAddView() {
this.systemConfigDto.id = ''
this.systemConfigDto.configName = ''
this.systemConfigDto.configCName = ''
this.systemConfigDto.configValue = ''
this.systemConfigDto.remark = ''
this.addView = true
},
OpenUpdateView(row) {
this.systemConfigDto.id = row.id
this.systemConfigDto.configName = row.configName
this.systemConfigDto.configCName = row.configCName
this.systemConfigDto.configValue = row.configValue
this.systemConfigDto.remark = row.remark
this.updateView = true
},
//往后端添加数据
beginAdd() {
if (this.saveLoading) {
return
}
this.saveLoading = true
const param = {
configName: this.systemConfigDto.configName,
configCName: this.systemConfigDto.configCName,
configValue: this.systemConfigDto.configValue,
remark: this.systemConfigDto.remark
}
const _this = this
add(param).then(response => {
_this.saveLoading = false
_this.$message.success('新增成功')
_this.addView = false
_this.doQuery()
}).catch(error => {
console.log(error)
_this.saveLoading = false
})
},
beginUpdate() {
if (this.saveLoading) {
return
}
this.saveLoading = true
const param = {
id: this.systemConfigDto.id,
configName: this.systemConfigDto.configName,
configCName: this.systemConfigDto.configCName,
configValue: this.systemConfigDto.configValue,
remark: this.systemConfigDto.remark
}
const _this = this
update(param).then(response => {
_this.saveLoading = false
_this.$message.success('编辑成功')
_this.updateView = false
_this.doQuery()
}).catch(error => {
console.log(error)
_this.saveLoading = false
})
},
功能3:删除
只有method代码。html代码已经在上面了。
beginDelete(row) {
const _this = this
// 弹出确认对话框
this.$confirm('确定删除配置属性:' + row.configName, '删除确认', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 用户点击了确认,执行删除逻辑
deleteData(row.id).then(response => {
_this.saveLoading = false
_this.$message.success('删除成功')
_this.doQuery()
}).catch(error => {
console.log(error)
_this.saveLoading = false
})
}).catch(() => {
// 用户点击了取消,不做任何操作
_this.$message.info('已取消删除操作')
})
}
功能4:导出
doExport() {
const param = {
page: this.searchParam.page,
pageSize: this.searchParam.pageSize,
title: this.searchParam.title,
origin: this.searchParam.origin,
subject: this.searchParam.subject
}
exportData (param).then(data => {
})
},
功能5:导入
importExcel(file, fileList) {
const formData = new FormData()
if (!file) {
this.$message.error('请上传文件')
return
}
formData.append('file', file.raw)
const _this = this
importData(formData).then(response => {
_this.$message.success('导入成功')
_this.search(1)
}).catch(error => {
console.log(error)
})
}