diff --git a/src/assets/images/Alipay.png b/src/assets/images/Alipay.png new file mode 100644 index 0000000..a0d5fe6 Binary files /dev/null and b/src/assets/images/Alipay.png differ diff --git a/src/assets/images/wechat.png b/src/assets/images/wechat.png new file mode 100644 index 0000000..6a759fb Binary files /dev/null and b/src/assets/images/wechat.png differ diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue index c71c594..8d87ef8 100644 --- a/src/components/DataTable.vue +++ b/src/components/DataTable.vue @@ -2,49 +2,104 @@
-
{{ title }}
-

DataTables has most features enabled by default, so all you need to do to use it with your own tables is to - call the construction function: $().DataTable();.

+
{{ title }}
-
-
-
+ + 条数据 + +
+
+ +
-
-
+
+ +
- +
- + - + - +
{{ item.text }} + {{ item.text }} +
{{ item[header.value] }}
- {{ item[header.value] ? '禁用' : '正常'}} + {{ item[header.value] ? "禁用" : "正常" }}
- + {{ objItem[header.child] }}
@@ -56,15 +111,31 @@ 		- - - + +
{{ header.value }} + {{ header.value }} +
@@ -72,22 +143,79 @@
-
正在展示 {{ (currentPageIndex * pageSize) - (pageSize - 1) }} 到 {{ currentPageIndex * pageSize }} 条数据 总计 {{dataCount}} 条
+
+ 正在展示 {{ currentPageIndex * pageSize - (pageSize - 1) }} 到 + {{ currentPageIndex * pageSize }} 条数据 总计 {{ dataCount }} 条 +
-
+
@@ -118,8 +246,8 @@ export default { }, dataCount: { type: Number, - required: true - } + required: true, + }, }, data() { return { @@ -130,12 +258,10 @@ export default { //总页数 pageCount: 0, //分页按钮数据，[{text:'1',index:1},.....] - pageBtn: [] - } - }, - mounted() { - + pageBtn: [], + }; }, + mounted() {}, methods: { //下一页 nextPage() { @@ -144,11 +270,11 @@ export default { //上一页 previousPage() { if (this.currentPageIndex > 1) { - this.currentPageIndex-- + this.currentPageIndex--; } }, changePage(pageIndex) { - this.currentPageIndex == pageIndex + this.currentPageIndex == pageIndex; }, //更新总页数 updatePageCount(newPageSize) { @@ -156,82 +282,88 @@ export default { this.pageCount += this.dataCount % newPageSize == 0 ? 0 : 1; }, //更新分页按钮数据 - updatePageBtn(newPageIndex){ - this.pageBtn = [] + updatePageBtn(newPageIndex) { + this.pageBtn = []; //初始化首页 - this.pageBtn.push({text: '1', index: 1}) + this.pageBtn.push({ text: "1", index: 1 }); //总页数小于8时显示全部页码 - if(this.pageCount <= 8){ - for(let i = 2; i < this.pageCount; i++){ - this.pageBtn.push({text: `${i}`, index: i}) + if (this.pageCount <= 8) { + for (let i = 2; i < this.pageCount; i++) { + this.pageBtn.push({ text: `${i}`, index: i }); } - }else{ + } else { //当前页左侧显示2格页码，当显示最小页码距离首页中间间隔大于1时隐藏间隔页面 - if(newPageIndex - 2 > 3){ - this.pageBtn.push({text: '...', index: newPageIndex}) + if (newPageIndex - 2 > 3) { + this.pageBtn.push({ text: "...", index: newPageIndex }); } //渲染当前页码左右各两格页码 - const numleft = (newPageIndex - 2) < 2 ? newPageIndex - 2 : 2; - const numright = (newPageIndex + 2) < this.pageCount ? 2 : (this.pageCount - newPageIndex - 1); - for(let i = newPageIndex - numleft; i <= newPageIndex + numright; i++){ - this.pageBtn.push({text: `${i}`, index: i}) + const numleft = newPageIndex - 2 < 2 ? newPageIndex - 2 : 2; + const numright = + newPageIndex + 2 < this.pageCount ? 2 : this.pageCount - newPageIndex - 1; + for (let i = newPageIndex - numleft; i <= newPageIndex + numright; i++) { + this.pageBtn.push({ text: `${i}`, index: i }); } //当前页右侧显示2格页码，当显示最大页码距离尾页中间间隔大于1时隐藏间隔页面 - if(newPageIndex + 2 < this.pageCount - 2){ - this.pageBtn.push({text: '...', index: newPageIndex}) + if (newPageIndex + 2 < this.pageCount - 2) { + this.pageBtn.push({ text: "...", index: newPageIndex }); } } //渲染尾页 - this.pageBtn.push({text: `${this.pageCount}`, index: this.pageCount}) - }, - formatDateTime(str){ - if (!str) return '-'; + this.pageBtn.push({ text: `${this.pageCount}`, index: this.pageCount }); + }, + formatDateTime(str) { + if (!str) return "-"; - const date = new Date(str); - if (isNaN(date)) return '-'; // 防止 Safari 报 Invalid Date + const date = new Date(str); + if (isNaN(date)) return "-"; // 防止 Safari 报 Invalid Date - const pad = n => n.toString().padStart(2, '0'); + const pad = (n) => n.toString().padStart(2, "0"); - const Y = date.getFullYear(); - const M = pad(date.getMonth() + 1); - const D = pad(date.getDate()); - const h = pad(date.getHours()); - const m = pad(date.getMinutes()); - const s = pad(date.getSeconds()); + const Y = date.getFullYear(); + const M = pad(date.getMonth() + 1); + const D = pad(date.getDate()); + const h = pad(date.getHours()); + const m = pad(date.getMinutes()); + const s = pad(date.getSeconds()); - return `${Y}-${M}-${D} ${h}:${m}:${s}`; - }, - modify(id){ - this.$emit('dataModify',id) - }, - deleteData(id){ - this.$emit('dataDelete',id) - } + return `${Y}-${M}-${D} ${h}:${m}:${s}`; + }, + modify(id) { + this.$emit("dataModify", id); + }, + deleteData(id) { + this.$emit("dataDelete", id); + }, }, watch: { //监听分页大小变化 - 'pageSize': { + pageSize: { handler(newVal) { - this.updatePageCount(newVal) + this.updatePageCount(newVal); //单页显示数据量改变时重置当前索引，防止数据以及控件异常 - this.currentPageIndex = 1 - this.$emit('pageChanged',{pageIndex:this.currentPageIndex,pageSize:newVal}) - this.updatePageBtn(this.currentPageIndex) + this.currentPageIndex = 1; + this.$emit("pageChanged", { pageIndex: this.currentPageIndex, pageSize: newVal }); + this.updatePageBtn(this.currentPageIndex); }, - immediate: true + immediate: true, }, //监听页索引，用于切换数据 - 'currentPageIndex': { + currentPageIndex: { handler(newVal) { - this.$emit('pageChanged',{pageIndex:newVal,pageSize:this.pageSize}) - this.updatePageBtn(newVal) + this.$emit("pageChanged", { pageIndex: newVal, pageSize: this.pageSize }); + this.updatePageBtn(newVal); }, - immediate: true - } - } -} + immediate: true, + }, + }, +}; diff --git a/src/views/Notfound.vue b/src/views/Notfound.vue index 38c76ce..b94f511 100644 --- a/src/views/Notfound.vue +++ b/src/views/Notfound.vue @@ -1,20 +1,23 @@ diff --git a/src/views/layout/Balance.vue b/src/views/layout/Balance.vue index e69de29..9d6b1cf 100644 --- a/src/views/layout/Balance.vue +++ b/src/views/layout/Balance.vue @@ -0,0 +1,256 @@ + + + + +