7 changed files with 548 additions and 7 deletions
@ -0,0 +1,34 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
|
|||
export function getList(data) { |
|||
return request({ |
|||
url: '/api/book/list', |
|||
method: 'get', |
|||
params:data |
|||
}) |
|||
} |
|||
|
|||
export function saveBook(data) { |
|||
return request({ |
|||
url: '/api/book/save', |
|||
method: 'post', |
|||
data:data |
|||
}) |
|||
} |
|||
|
|||
export function updateById(data) { |
|||
return request({ |
|||
url: '/api/book/updateById', |
|||
method: 'post', |
|||
data:data |
|||
}) |
|||
} |
|||
|
|||
export function deleteById(data) { |
|||
return request({ |
|||
url: '/api/book/delete', |
|||
method: 'get', |
|||
params:data |
|||
}) |
|||
} |
|||
@ -0,0 +1,101 @@ |
|||
<template> |
|||
<div :class="{ hidden: hidden }" class="pagination-container"> |
|||
<el-pagination |
|||
:background="background" |
|||
:current-page.sync="currentPage" |
|||
:page-size.sync="pageSize" |
|||
:layout="layout" |
|||
:page-sizes="pageSizes" |
|||
:total="total" |
|||
v-bind="$attrs" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { scrollTo } from '@/utils/scroll-to'; |
|||
|
|||
export default { |
|||
name: 'PaginationComponent', |
|||
props: { |
|||
total: { |
|||
required: true, |
|||
type: Number |
|||
}, |
|||
page: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
limit: { |
|||
type: Number, |
|||
default: 20 |
|||
}, |
|||
pageSizes: { |
|||
type: Array, |
|||
default() { |
|||
return [10, 20, 30, 50, 100]; |
|||
} |
|||
}, |
|||
layout: { |
|||
type: String, |
|||
default: 'total, sizes, prev, pager, next, jumper' |
|||
}, |
|||
background: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
autoScroll: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
hidden: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
computed: { |
|||
currentPage: { |
|||
get() { |
|||
return this.page; |
|||
}, |
|||
set(val) { |
|||
this.$emit('update:page', val); |
|||
} |
|||
}, |
|||
pageSize: { |
|||
get() { |
|||
return this.limit; |
|||
}, |
|||
set(val) { |
|||
this.$emit('update:limit', val); |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
handleSizeChange(val) { |
|||
this.$emit('pagination', { page: this.currentPage, limit: val }); |
|||
if (this.autoScroll) { |
|||
scrollTo(0, 800); |
|||
} |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.$emit('pagination', { page: val, limit: this.pageSize }); |
|||
if (this.autoScroll) { |
|||
scrollTo(0, 800); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.pagination-container { |
|||
background: #fff; |
|||
padding: 32px 16px; |
|||
} |
|||
.pagination-container.hidden { |
|||
display: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,69 @@ |
|||
Math.easeInOutQuad = function (t, b, c, d) { |
|||
t /= d / 2; |
|||
if (t < 1) { |
|||
return (c / 2) * t * t + b; |
|||
} |
|||
t--; |
|||
return (-c / 2) * (t * (t - 2) - 1) + b; |
|||
}; |
|||
|
|||
// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
|
|||
var requestAnimFrame = (function () { |
|||
return ( |
|||
window.requestAnimationFrame || |
|||
window.webkitRequestAnimationFrame || |
|||
window.mozRequestAnimationFrame || |
|||
function (callback) { |
|||
window.setTimeout(callback, 1000 / 60); |
|||
} |
|||
); |
|||
})(); |
|||
|
|||
/** |
|||
* Because it's so fucking difficult to detect the scrolling element, just move them all |
|||
* @param {number} amount |
|||
*/ |
|||
function move(amount) { |
|||
document.documentElement.scrollTop = amount; |
|||
document.body.parentNode.scrollTop = amount; |
|||
document.body.scrollTop = amount; |
|||
} |
|||
|
|||
function position() { |
|||
return ( |
|||
document.documentElement.scrollTop || |
|||
document.body.parentNode.scrollTop || |
|||
document.body.scrollTop |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* @param {number} to |
|||
* @param {number} duration |
|||
* @param {Function} callback |
|||
*/ |
|||
export function scrollTo(to, duration, callback) { |
|||
const start = position(); |
|||
const change = to - start; |
|||
const increment = 20; |
|||
let currentTime = 0; |
|||
duration = typeof duration === 'undefined' ? 500 : duration; |
|||
var animateScroll = function () { |
|||
// increment the time
|
|||
currentTime += increment; |
|||
// find the value with the quadratic in-out easing function
|
|||
var val = Math.easeInOutQuad(currentTime, start, change, duration); |
|||
// move the document.body
|
|||
move(val); |
|||
// do the animation unless its over
|
|||
if (currentTime < duration) { |
|||
requestAnimFrame(animateScroll); |
|||
} else { |
|||
if (callback && typeof callback === 'function') { |
|||
// the animation is done so lets callback
|
|||
callback(); |
|||
} |
|||
} |
|||
}; |
|||
animateScroll(); |
|||
} |
|||
@ -0,0 +1,267 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-row> |
|||
<el-form :inline="true" class="demo-form-inline"> |
|||
<!-- <el-form-item label="请求命令"> |
|||
<el-input v-model="reqApiType" placeholder="请求命令"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="状态"> |
|||
<el-select v-model="respStatus" placeholder="请选择"> |
|||
<el-option label="成功" value="成功"></el-option> |
|||
<el-option label="失败" value="失败"></el-option> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="newData">新增</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-row> |
|||
<el-table v-loading="listLoading" :data="list" element-loading-text="Loading" style="width: 100%" border fit highlight-current-row> |
|||
<!-- <el-table-column align="center" label="ID" width="95"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.$index }} |
|||
</template> |
|||
</el-table-column> --> |
|||
<el-table-column label="帐套" width="150" fixed="left"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.tenant }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="名称" width="200"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.name }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="请求命令" width="300"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.cmd }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="请求地址" > |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.u8Host }} |
|||
</template> |
|||
</el-table-column> |
|||
<!-- <el-table-column label="ERP用户" align="center"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.erpUser }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="状态" align="center"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.respStatus }} |
|||
</template> |
|||
</el-table-column> --> |
|||
<el-table-column align="center" label="是否默认"> |
|||
<template slot-scope="scope"> |
|||
<!-- <i class="el-icon-time" /> --> |
|||
<span>{{ scope.row.defaultFlag }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="是否启用" > |
|||
<template slot-scope="scope"> |
|||
<!-- <i class="el-icon-time" /> --> |
|||
<span>{{ scope.row.enable }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="操作" > |
|||
<template slot-scope="scope"> |
|||
<el-button type="primary" @click="show(scope.row)">修改</el-button> |
|||
<el-button type="danger" @click="deleteButton(scope.row.id)">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!-- <div class="pagination-box relation-center"> |
|||
<Pagination |
|||
:total="total" |
|||
:limit="pageSize" |
|||
:page="pageNum" |
|||
@pagination="handleChangePagination" |
|||
/> |
|||
</div> --> |
|||
|
|||
<el-dialog title="修改" :visible.sync="dialogFormVisible"> |
|||
<el-form :model="form" label-width="100px"> |
|||
<el-form-item label="名称"> |
|||
<el-input v-model="form.name" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="帐套"> |
|||
<el-input v-model="form.tenant" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="请求地址"> |
|||
<el-input v-model="form.u8Host" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="ERP用户"> |
|||
<el-input v-model="form.erpUser" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="ERP密码"> |
|||
<el-input v-model="form.erpPwd" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="数据库名称"> |
|||
<el-input v-model="form.dbName" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="数据库用户"> |
|||
<el-input v-model="form.dbUser" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="数据库密码"> |
|||
<el-input v-model="form.dbPwd" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="数据库IP"> |
|||
<el-input v-model="form.dbHost" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="数据库端口"> |
|||
<el-input v-model="form.dbPort" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="请求命令"> |
|||
<el-input v-model="form.cmd" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="是否默认"> |
|||
<el-select v-model="form.defaultFlag" placeholder="是否默认"> |
|||
<el-option label="是" value="1"></el-option> |
|||
<el-option label="否" value="0"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="是否启用"> |
|||
<el-select v-model="form.enable" placeholder="是否启用"> |
|||
<el-option label="是" value="1"></el-option> |
|||
<el-option label="否" value="0"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="dialogFormVisible = false">取 消</el-button> |
|||
<el-button type="primary" @click="submit">确 定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getList,updateById,saveBook,deleteById } from '@/api/apibook' |
|||
import Pagination from '@/components/Pagination/index.vue'; |
|||
|
|||
export default { |
|||
components: { |
|||
Pagination |
|||
}, |
|||
filters: { |
|||
statusFilter(status) { |
|||
const statusMap = { |
|||
published: 'success', |
|||
draft: 'gray', |
|||
deleted: 'danger' |
|||
} |
|||
return statusMap[status] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
dialogFormVisible:false, |
|||
form:{}, |
|||
pageNum:1, |
|||
pageSize:10, |
|||
total:0, |
|||
list: null, |
|||
listLoading: true |
|||
} |
|||
}, |
|||
created() { |
|||
this.fetchData() |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 翻页、每页数据量变化 |
|||
* @param {object} params {page,limit} |
|||
* @return {void} |
|||
*/ |
|||
handleChangePagination(params) { |
|||
this.pageNum = params.page; |
|||
this.pageSize = params.limit; |
|||
// 使用防抖函数 防止多次请求 |
|||
this.fetchData(); |
|||
}, |
|||
fetchData() { |
|||
this.listLoading = true |
|||
getList({ |
|||
// pageNum:this.pageNum, |
|||
// pageSize:this.pageSize |
|||
}).then(response => { |
|||
// this.total = response.data.total |
|||
this.list = response.data |
|||
this.list.forEach(function(value){ |
|||
console.log(value) |
|||
if(value.cmd){ |
|||
value.cmd = value.cmd.join(",") |
|||
} |
|||
}) |
|||
this.listLoading = false |
|||
}) |
|||
}, |
|||
submit(){ |
|||
if(this.form.id){ |
|||
this.update() |
|||
}else{ |
|||
this.save() |
|||
} |
|||
}, |
|||
show(row){ |
|||
console.log(row) |
|||
this.form = row |
|||
this.dialogFormVisible = true |
|||
}, |
|||
update(){ |
|||
let info = this.form |
|||
if(info.cmd){ |
|||
console.log(info.cmd) |
|||
console.log(info.cmd.split(",")) |
|||
info.cmd = info.cmd.split(",") |
|||
console.log(info.cmd) |
|||
} |
|||
this.listLoading = true |
|||
updateById(info).then(response => { |
|||
if(response.status==200){ |
|||
this.dialogFormVisible = false |
|||
this.listLoading = false |
|||
this.fetchData(); |
|||
} |
|||
}) |
|||
}, |
|||
newData(){ |
|||
this.form = {} |
|||
this.dialogFormVisible = true |
|||
}, |
|||
save(){ |
|||
let info = this.form |
|||
if(info.cmd){ |
|||
console.log(info.cmd) |
|||
console.log(info.cmd.split(",")) |
|||
info.cmd = info.cmd.split(",") |
|||
console.log(info.cmd) |
|||
} |
|||
this.listLoading = true |
|||
saveBook(info).then(response => { |
|||
if(response.status==200){ |
|||
this.dialogFormVisible = false |
|||
this.listLoading = false |
|||
this.fetchData(); |
|||
} |
|||
}) |
|||
}, |
|||
deleteButton(id){ |
|||
this.$confirm('删除帐套, 是否继续?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.listLoading = true |
|||
deleteById({id:id}).then(response => { |
|||
this.listLoading = false |
|||
this.fetchData(); |
|||
}) |
|||
}).catch(() => { |
|||
}); |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue