@ -1,53 +1,59 @@ | |||
<template> | |||
<div class="pagination-container"> | |||
<el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30, 50]" | |||
:current-page="pagination.pageNumber" :page-size="pagination.pageSize" :total="pagination.total" | |||
@size-change="handleSizeChange" @current-change="handleCurrentChange" /> | |||
<el-pagination | |||
background | |||
layout="total, sizes, prev, pager, next, jumper" | |||
:page-sizes="[10, 20, 30, 50]" | |||
:current-page="pagination.pageNumber" | |||
:page-size="pagination.pageSize" | |||
:total="pagination.total" | |||
@size-change="handleSizeChange" | |||
@current-change="handleCurrentChange" | |||
/> | |||
</div> | |||
</template> | |||
<script> | |||
// 传递分页参数时,必须使用此格式 v-model:pagination="{ pageNumber: 1, pageSize: 10, total: 0}" | |||
export default { | |||
name: 'Pagination', | |||
props: { | |||
pagination: { | |||
type: Object, | |||
default: { | |||
pageNumber: 1, | |||
pageSize: 10, | |||
total: 0 | |||
} | |||
} | |||
}, | |||
methods: { | |||
handleSizeChange(val) { | |||
this.$emit('update:pagination', { | |||
...this.pagination, | |||
pageSize:val | |||
}); | |||
this.$emit('change') | |||
export default { | |||
name: "Pagination", | |||
props: { | |||
pagination: { | |||
type: Object, | |||
// eslint-disable-next-line vue/require-valid-default-prop | |||
default: { | |||
pageNumber: 1, | |||
pageSize: 10, | |||
total: 0, | |||
}, | |||
handleCurrentChange(val) { | |||
this.$emit('update:pagination', { | |||
...this.pagination, | |||
pageNumber:val | |||
}); | |||
this.$emit('change') | |||
} | |||
} | |||
} | |||
}, | |||
}, | |||
methods: { | |||
handleSizeChange(val) { | |||
this.$emit("update:pagination", { | |||
...this.pagination, | |||
pageSize: val, | |||
}); | |||
this.$emit("change"); | |||
}, | |||
handleCurrentChange(val) { | |||
this.$emit("update:pagination", { | |||
...this.pagination, | |||
pageNumber: val, | |||
}); | |||
this.$emit("change"); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
.pagination-container { | |||
/* background: #fff; */ | |||
padding: 32px 16px; | |||
} | |||
.pagination-container { | |||
/* background: #fff; */ | |||
padding: 32px 16px; | |||
} | |||
.pagination-container.hidden { | |||
display: none; | |||
} | |||
</style> | |||
.pagination-container.hidden { | |||
display: none; | |||
} | |||
</style> |
@ -1,74 +1,85 @@ | |||
import { get, deleteData } from "@/server/api.js"; | |||
export const ListMixin = { | |||
data() { | |||
return { | |||
isShowDialog: '', | |||
item: null, | |||
pagination: { // 分页参数 | |||
pageNumber: 1, | |||
pageSize: 10, | |||
total: 0, | |||
}, | |||
queryParams:{}, | |||
tableData: [], // 表格数据 | |||
loading: true, // 表格loading加载 | |||
} | |||
}, | |||
created() { | |||
this.getList() | |||
}, | |||
methods: { | |||
// 查询分页列表 | |||
getList() { | |||
this.loading = true | |||
get(this.queryTableDataUrl, {...this.pagination, ...this.queryParams}) | |||
.then(({code, data=[], count=0}) => { | |||
if (code === 200) { | |||
this.tableData = data || [] | |||
this.pagination.total = count | |||
this.loading = false | |||
} else { | |||
this.loading = false | |||
} | |||
}).catch(() => { | |||
this.loading = false | |||
}) | |||
}, | |||
// 监听回调 | |||
completeCallBack(data) { | |||
this.isShowDialog = '' | |||
this.item = null | |||
this.getList() | |||
}, | |||
// 新增按钮操作 | |||
handleAdd() { | |||
this.isShowDialog = 'edit' | |||
this.item = null | |||
}, | |||
// 修改按钮操作 | |||
handleUpdate(row) { | |||
this.isShowDialog = 'edit' | |||
this.item = row | |||
}, | |||
// 改变isShowDialog的值 | |||
changeDialogStatus(data) { | |||
this.isShowDialog = data | |||
}, | |||
// 删除数据 | |||
delHanle(keyName, url) { | |||
this.$confirm('是否确认删除"' + keyName + '"的数据项?', '警告', { | |||
confirmButtonText: '确定', | |||
cancelButtonText: '取消', | |||
type: 'warning' | |||
}).then(() => { | |||
return deleteData(url) | |||
}).then(() => { | |||
this.msgSuccess('删除成功') | |||
const totalPage = Math.ceil((this.total - 1) / this.pagination.pageSize) | |||
this.pagination.pageNumber = this.pagination.pageNumber > totalPage ? totalPage : this.pagination.pageNumber | |||
this.pagination.pageNumber = this.pagination.pageNumber < 1 ? 1 : this.pagination.pageNumber | |||
this.getList() | |||
}).catch(() => { }) | |||
}, | |||
} | |||
} | |||
data() { | |||
return { | |||
isShowDialog: "", | |||
item: null, | |||
pagination: { | |||
// 分页参数 | |||
pageNumber: 1, | |||
pageSize: 10, | |||
total: 0, | |||
}, | |||
queryParams: {}, | |||
tableData: [], // 表格数据 | |||
loading: true, // 表格loading加载 | |||
}; | |||
}, | |||
created() { | |||
this.getList(); | |||
}, | |||
methods: { | |||
// 查询分页列表 | |||
getList() { | |||
this.loading = true; | |||
get(this.queryTableDataUrl, { ...this.pagination, ...this.queryParams }) | |||
.then(({ code, data = [], count = 0 }) => { | |||
if (code === 200) { | |||
this.tableData = data || []; | |||
this.pagination.total = count; | |||
this.loading = false; | |||
} else { | |||
this.loading = false; | |||
} | |||
}) | |||
.catch(() => { | |||
this.loading = false; | |||
}); | |||
}, | |||
// 监听回调 | |||
completeCallBack() { | |||
this.isShowDialog = ""; | |||
this.item = null; | |||
this.getList(); | |||
}, | |||
// 新增按钮操作 | |||
handleAdd() { | |||
this.isShowDialog = "edit"; | |||
this.item = null; | |||
}, | |||
// 修改按钮操作 | |||
handleUpdate(row) { | |||
this.isShowDialog = "edit"; | |||
this.item = row; | |||
}, | |||
// 改变isShowDialog的值 | |||
changeDialogStatus(data) { | |||
this.isShowDialog = data; | |||
}, | |||
// 删除数据 | |||
delHanle(keyName, url) { | |||
this.$confirm('是否确认删除"' + keyName + '"的数据项?', "警告", { | |||
confirmButtonText: "确定", | |||
cancelButtonText: "取消", | |||
type: "warning", | |||
}) | |||
.then(() => { | |||
return deleteData(url); | |||
}) | |||
.then(() => { | |||
this.msgSuccess("删除成功"); | |||
const totalPage = Math.ceil( | |||
(this.total - 1) / this.pagination.pageSize | |||
); | |||
this.pagination.pageNumber = | |||
this.pagination.pageNumber > totalPage | |||
? totalPage | |||
: this.pagination.pageNumber; | |||
this.pagination.pageNumber = | |||
this.pagination.pageNumber < 1 ? 1 : this.pagination.pageNumber; | |||
this.getList(); | |||
}) | |||
.catch(() => {}); | |||
}, | |||
}, | |||
}; |
@ -1,29 +1,29 @@ | |||
import { get } from "../server/api.js"; | |||
// 获取列名翻译 | |||
export function getColumnName (colName) { | |||
let fieldObj = JSON.parse(localStorage.getItem('allField')) || [] | |||
if (Object.keys(fieldObj).length < 1) { | |||
get("/admin/etl/tabcolname/query", {}).then(({ code, data }) => { | |||
if (code === 200) { | |||
localStorage.removeItem('allField') | |||
localStorage.setItem('allField', JSON.stringify(data)) | |||
} | |||
}); | |||
} | |||
let col = colName | |||
if (colName.indexOf('-') > -1) col = colName.split('-')[1] | |||
fieldObj.forEach(el => { | |||
if (col === el['TabColName-ColName'] || col === el['TabColName-ColName']) { | |||
col = el['TabColName-TextLabel'] | |||
return col | |||
} | |||
}); | |||
// for (const key in fieldObj) { | |||
// if (col === key.split('.')[1]) { | |||
// col = fieldObj[key] | |||
// return col | |||
// } | |||
// } | |||
return col | |||
export function getColumnName(colName) { | |||
let fieldObj = JSON.parse(localStorage.getItem("allField")) || []; | |||
if (Object.keys(fieldObj).length < 1) { | |||
get("/admin/etl/tabcolname/query", {}).then(({ code, data }) => { | |||
if (code === 200) { | |||
localStorage.removeItem("allField"); | |||
localStorage.setItem("allField", JSON.stringify(data)); | |||
} | |||
}); | |||
} | |||
let col = colName; | |||
if (colName.indexOf("-") > -1) col = colName.split("-")[1]; | |||
fieldObj.forEach((el) => { | |||
if (col === el["TabColName-ColName"] || col === el["TabColName-ColName"]) { | |||
col = el["TabColName-TextLabel"]; | |||
return col; | |||
} | |||
}); | |||
// for (const key in fieldObj) { | |||
// if (col === key.split('.')[1]) { | |||
// col = fieldObj[key] | |||
// return col | |||
// } | |||
// } | |||
return col; | |||
} |
@ -1,62 +1,66 @@ | |||
// 日期格式化 | |||
export function parseTime (time, pattern) { | |||
if (arguments.length === 0 || !time) { | |||
return null | |||
} | |||
if (time == '00010101000000') return '' | |||
return time.replace(/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/g, '$1-$2-$3 $4:$5:$6') | |||
export function parseTime(time) { | |||
if (arguments.length === 0 || !time) { | |||
return null; | |||
} | |||
if (time == "00010101000000") return ""; | |||
return time.replace( | |||
/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/g, | |||
"$1-$2-$3 $4:$5:$6" | |||
); | |||
} | |||
// 表单重置 | |||
export function resetForm (refName) { | |||
if (this.$refs[refName]) { | |||
this.$refs[refName].resetFields() | |||
} | |||
export function resetForm(refName) { | |||
if (this.$refs[refName]) { | |||
this.$refs[refName].resetFields(); | |||
} | |||
} | |||
// 添加日期范围 | |||
export function addDateRange (params, dateRange) { | |||
var search = params | |||
search.beginTime = '' | |||
search.endTime = '' | |||
if (dateRange != null && dateRange !== '') { | |||
search.beginTime = this.dateRange[0] | |||
search.endTime = this.dateRange[1] | |||
} | |||
return search | |||
export function addDateRange(params, dateRange) { | |||
var search = params; | |||
search.beginTime = ""; | |||
search.endTime = ""; | |||
if (dateRange != null && dateRange !== "") { | |||
search.beginTime = this.dateRange[0]; | |||
search.endTime = this.dateRange[1]; | |||
} | |||
return search; | |||
} | |||
// 回显数据字典 | |||
export function selectDictLabel (datas, value) { | |||
var actions = [] | |||
Object.keys(datas).map((key) => { | |||
if (datas[key].dictValue === ('' + value)) { | |||
actions.push(datas[key].dictLabel) | |||
return false | |||
} | |||
}) | |||
return actions.join('') | |||
export function selectDictLabel(datas, value) { | |||
var actions = []; | |||
Object.keys(datas).map((key) => { | |||
if (datas[key].dictValue === "" + value) { | |||
actions.push(datas[key].dictLabel); | |||
return false; | |||
} | |||
}); | |||
return actions.join(""); | |||
} | |||
// 字符串格式化(%s ) | |||
export function sprintf (str) { | |||
var args = arguments; var flag = true; var i = 1 | |||
str = str.replace(/%s/g, function () { | |||
var arg = args[i++] | |||
if (typeof arg === 'undefined') { | |||
flag = false | |||
return '' | |||
} | |||
return arg | |||
}) | |||
return flag ? str : '' | |||
export function sprintf(str) { | |||
var args = arguments; | |||
var flag = true; | |||
var i = 1; | |||
str = str.replace(/%s/g, function () { | |||
var arg = args[i++]; | |||
if (typeof arg === "undefined") { | |||
flag = false; | |||
return ""; | |||
} | |||
return arg; | |||
}); | |||
return flag ? str : ""; | |||
} | |||
// 转换字符串,undefined,null等转化为"" | |||
export function praseStrEmpty (str) { | |||
if (!str || str === 'undefined' || str === 'null') { | |||
return '' | |||
} | |||
return str | |||
export function praseStrEmpty(str) { | |||
if (!str || str === "undefined" || str === "null") { | |||
return ""; | |||
} | |||
return str; | |||
} |
@ -1,3 +1,3 @@ | |||
<template> | |||
<router-view /> | |||
</template> | |||
</template> |
@ -1,25 +1,19 @@ | |||
<template> | |||
<div> | |||
<SearchTemplate> | |||
搜索 | |||
</SearchTemplate> | |||
<ContentContainer> | |||
角色管理界面 | |||
</ContentContainer> | |||
<SearchTemplate> 搜索 </SearchTemplate> | |||
<ContentContainer> 角色管理界面 </ContentContainer> | |||
</div> | |||
</template> | |||
<script> | |||
import SearchTemplate from "@/components/SearchTemplate.vue" | |||
import ContentContainer from "@/components/ContentContainer.vue" | |||
import SearchTemplate from "@/components/SearchTemplate.vue"; | |||
import ContentContainer from "@/components/ContentContainer.vue"; | |||
export default { | |||
components:{ | |||
components: { | |||
SearchTemplate, | |||
ContentContainer | |||
ContentContainer, | |||
}, | |||
data(){ | |||
return{ | |||
} | |||
} | |||
} | |||
</script> | |||
data() { | |||
return {}; | |||
}, | |||
}; | |||
</script> |
@ -1,25 +1,19 @@ | |||
<template> | |||
<div> | |||
<SearchTemplate> | |||
搜索 | |||
</SearchTemplate> | |||
<ContentContainer> | |||
用户管理界面 | |||
</ContentContainer> | |||
<SearchTemplate> 搜索 </SearchTemplate> | |||
<ContentContainer> 用户管理界面 </ContentContainer> | |||
</div> | |||
</template> | |||
<script> | |||
import SearchTemplate from "@/components/SearchTemplate.vue" | |||
import ContentContainer from "@/components/ContentContainer.vue" | |||
import SearchTemplate from "@/components/SearchTemplate.vue"; | |||
import ContentContainer from "@/components/ContentContainer.vue"; | |||
export default { | |||
components:{ | |||
components: { | |||
SearchTemplate, | |||
ContentContainer | |||
ContentContainer, | |||
}, | |||
data(){ | |||
return{ | |||
} | |||
} | |||
} | |||
</script> | |||
data() { | |||
return {}; | |||
}, | |||
}; | |||
</script> |