<template lang='pug'>
el-container(style="padding:0px;height:77.6vh;")
el-header(style='height:42px;line-height:42px;border: 1px solid rgba(195, 195, 195, 1);background: #f4f4f4;')
span.title-bold.title-left-color() 目标数据源管理
el-main.box_main
el-card()
div.tableCard()
el-form(:inline="true" :model="dataForm" size="mini" )
el-form-item( label="数据源url:" )
el-input( v-model="dataForm.url" placeholder="数据源url" clearable)
el-form-item( label="用户名:" )
el-input.input_width( v-model="dataForm.username" placeholder="数据源用户名" clearable)
el-form-item(label="数据源ip:")
el-input.input_width( v-model="dataForm.ip" placeholder="数据源ip" clearable)
el-form-item( label="说明信息:")
el-input.input_width( v-model="dataForm.detail" placeholder="说明信息" clearable)
el-button(@click="getDataList" icon="el-icon-search" type="primary" size="mini") 查询
el-button(@click="reSet()" type="primary" size="mini" icon="el-icon-refresh-right") 重置
el-button( v-if="isAuth('sys:user:save')" style="float:right;" size="mini" icon="el-icon-plus" type="primary" @click="addOrUpdateHandle()") 新增
el-table(:data="dataList" @sort-change='sortChange' style="width:100%;" v-loading="dataListLoading" :stripe="true" :header-cell-style="{background:'#EEF8FF',color:'#333333'}")
el-table-column( type='index', header-align='center', align='center', label='序号')
template(scope="scope")
span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
el-table-column( prop="url" header-align="center" align="center" label="数据源url" sortable='custom' width='300' show-overflow-tooltip)
//template(slot-scope='scope')
el-table-column( prop="username" header-align="center" align="center" label="用户名" sortable='custom')
el-table-column( prop="password" header-align="center" align="center" label="密码" sortable='custom')
el-table-column( prop="ip" header-align="center" align="center" label="数据源服务器ip" sortable='custom' width='200')
el-table-column( prop="port" header-align="center" align="center" label="数据源端口" sortable='custom')
el-table-column( prop="detail" header-align="center" align="center" label="说明信息" sortable='custom' show-overflow-tooltip width='200')
//template(slot-scope='scope')
font(:title="scope.row.url") {{scope.row.detail | ellipsis}}
el-table-column( prop header-align="center" align="center" label="操作" width='200')
template( slot-scope="scope")
//el-button(type="success" plain size="mini" @click="queryHandle(scope.row)") 详情
el-button(type="text" size="mini" v-if="isAuth('sys:datasource:update')" @click="addOrUpdateHandle(scope.row)") 修改
el-button(type="text" size="mini" v-if="isAuth('sys:datasource:delete')" @click="deleteHandle(scope.row.id)") 删除
el-footer.box_footer
el-pagination(@size-change="sizeChangeHandle" background @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper")
//- 弹窗, 新增 / 修改
add-or-update(v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshdatalist="getDataList")
</template>
<script>
import AddOrUpdate from './datasource-add-or-update'
export default {
name: 'sys-datasource',
filters: {
ellipsis(value) {
if (!value) return ''
if (value.length > 55) {
return value.slice(0, 55) + '...'
}
return value
}
},
data() {
return {
dataForm: {},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
resetPasswordVisible: false,
addOrUpdateVisible: false,
queryDetailVisible: false,
configRoleVisible: false,
allJob: []
}
},
components: {
AddOrUpdate
// queryDetail,
// configRole,
// resetPassword
},
watch: {
totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数
//总页数小于当前页数则重新加载列表数据
if (pages < this.pageIndex) {
this.pageIndex = pages || 1
this.getDataList()//获取表格数据的方法
}
}
},
created() {
// this.getList()
this.getDataList()
// this.getAllJob()
},
methods: {
//重置
reSet() {
this.pageIndex = 1
this.dataForm = {}
this.getDataList()
},
//排序
sortChange(column) {
if (column.order === 'descending') {
this.order = 'desc'
} else {
this.order = 'asc'
}
if (column.column.columnKey) {
this.sort = column.column.columnKey
} else {
this.sort = column.prop
}
this.getDataList()
},
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.rtAdornUrl('/sysDatasource/list'),
method: 'post',
data: {
...this.dataForm,
page: this.pageIndex,
size: this.pageSize,
sort: this.sort,
order: this.order
}
}).then(data => {
// console.log('data', data)
if (data && data.code === 0) {
this.dataList = data.page.records
this.totalPage = data.page.total
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val
this.getDataList()
},
// 新增 / 修改
addOrUpdateHandle(id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
})
},
// 删除
deleteHandle(id) {
let ids = [id]
this.$confirm(`确认删除用户?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
}).then(() => {
this.$http({
url: this.$http.rtAdornUrl('/sysDatasource/delete'),
method: 'post',
data: { id: ids }
}).then(data => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
}).catch(() => {
})
}
}
}
</script>
<style lang='scss'>
</style>