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