From 6e7fcc0ebecb4d9d1485937905b31a9864913950 Mon Sep 17 00:00:00 2001
From: zrlibs <jesting_rr@163.com>
Date: 星期一, 17 三月 2025 11:29:07 +0800
Subject: [PATCH] fixed
---
src/views/examples/report.vue | 106 +++++++++++++
public/skin/purple.css | 14 +
src/views/examples/data-table.vue | 15 +
public/skin/light.css | 14 +
src/router/routes.js | 18 ++
src/components/examples/data-table.vue | 134 ++++++++++++++++
public/skin/green.css | 13 +
src/views/examples/master-slave.vue | 15 +
public/skin/blue.css | 14 +
public/skin/red.css | 14 +
src/layout/menu.json | 26 +++
src/index.less | 2
src/less/examples.less | 79 +++++++++
public/skin/dark.css | 14 +
14 files changed, 478 insertions(+), 0 deletions(-)
diff --git a/public/skin/blue.css b/public/skin/blue.css
index a552ccd..3522483 100644
--- a/public/skin/blue.css
+++ b/public/skin/blue.css
@@ -2,6 +2,11 @@
--first-background-color: #138ec7;
--second-background-color: #189edd;
--third-background-color: #dff3f9;
+
+ --table-header-background-color: #e4e4e4;
+ --table-header-border-color: #cdcdcd;
+
+ --table-header-th-border-color: #dcdee2;
}
.layout-header,
@@ -35,4 +40,13 @@
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
width: 5px;
background-color: var(--first-background-color)
+}
+
+.ivu-table th {
+ background-color: var(--table-header-background-color);
+ border-right: 1px solid var(--table-header-border-color);
+}
+
+.ivu-table th {
+ border-bottom-color: var(--table-header-th-border-color)
}
\ No newline at end of file
diff --git a/public/skin/dark.css b/public/skin/dark.css
index b2b6569..12d8cb9 100644
--- a/public/skin/dark.css
+++ b/public/skin/dark.css
@@ -2,6 +2,11 @@
--first-background-color: #404040;
--second-background-color: #7f7f7f;
--third-background-color: #e3e3e3;
+
+ --table-header-background-color: #e4e4e4;
+ --table-header-border-color: #cdcdcd;
+
+ --table-header-th-border-color: #dcdee2;
}
.layout-header,
@@ -35,4 +40,13 @@
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
width: 5px;
background-color: var(--first-background-color)
+}
+
+.ivu-table th {
+ background-color: var(--table-header-background-color);
+ border-right: 1px solid var(--table-header-border-color);
+}
+
+.ivu-table th {
+ border-bottom-color: var(--table-header-th-border-color)
}
\ No newline at end of file
diff --git a/public/skin/green.css b/public/skin/green.css
index 7eedefd..c8d46cb 100644
--- a/public/skin/green.css
+++ b/public/skin/green.css
@@ -2,6 +2,10 @@
--first-background-color: #3fa329;
--second-background-color: #61d149;
--third-background-color: #d5fce1;
+
+ --table-header-background-color: #e4e4e4;
+ --table-header-border-color: #cdcdcd;
+ --table-header-th-border-color: #dcdee2;
}
.layout-header,
@@ -35,4 +39,13 @@
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
width: 5px;
background-color: var(--first-background-color)
+}
+
+.ivu-table th {
+ background-color: var(--table-header-background-color);
+ border-right: 1px solid var(--table-header-border-color);
+}
+
+.ivu-table th {
+ border-bottom-color: var(--table-header-th-border-color)
}
\ No newline at end of file
diff --git a/public/skin/light.css b/public/skin/light.css
index 8a609a0..1aa2ed4 100644
--- a/public/skin/light.css
+++ b/public/skin/light.css
@@ -2,6 +2,11 @@
--first-background-color: #2db7f5;
--second-background-color: #40c3ff;
--third-background-color: #cceeff;
+
+ --table-header-background-color: #e4e4e4;
+ --table-header-border-color: #cdcdcd;
+
+ --table-header-th-border-color: #dcdee2;
}
.layout-header,
@@ -35,4 +40,13 @@
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
width: 5px;
background-color: var(--first-background-color)
+}
+
+.ivu-table th {
+ background-color: var(--table-header-background-color);
+ border-right: 1px solid var(--table-header-border-color);
+}
+
+.ivu-table th {
+ border-bottom-color: var(--table-header-th-border-color)
}
\ No newline at end of file
diff --git a/public/skin/purple.css b/public/skin/purple.css
index 1d862d3..014c680 100644
--- a/public/skin/purple.css
+++ b/public/skin/purple.css
@@ -2,6 +2,11 @@
--first-background-color: #415aca;
--second-background-color: #7a85f8;
--third-background-color: #b8c0fd;
+
+ --table-header-background-color: #e4e4e4;
+ --table-header-border-color: #cdcdcd;
+
+ --table-header-th-border-color: #dcdee2;
}
.layout-header,
@@ -35,4 +40,13 @@
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
width: 5px;
background-color: var(--first-background-color)
+}
+
+.ivu-table th {
+ background-color: var(--table-header-background-color);
+ border-right: 1px solid var(--table-header-border-color);
+}
+
+.ivu-table th {
+ border-bottom-color: var(--table-header-th-border-color)
}
\ No newline at end of file
diff --git a/public/skin/red.css b/public/skin/red.css
index eea57c0..80fa8cb 100644
--- a/public/skin/red.css
+++ b/public/skin/red.css
@@ -2,6 +2,11 @@
--first-background-color: #cb1b59;
--second-background-color: #ec719c;
--third-background-color: #ffe6ee;
+
+ --table-header-background-color: #e4e4e4;
+ --table-header-border-color: #cdcdcd;
+
+ --table-header-th-border-color: #dcdee2;
}
.layout-header,
@@ -35,4 +40,13 @@
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
width: 5px;
background-color: var(--first-background-color);
+}
+
+.ivu-table th {
+ background-color: var(--table-header-background-color);
+ border-right: 1px solid var(--table-header-border-color);
+}
+
+.ivu-table th {
+ border-bottom-color: var(--table-header-th-border-color)
}
\ No newline at end of file
diff --git a/src/components/examples/data-table.vue b/src/components/examples/data-table.vue
new file mode 100644
index 0000000..e72e957
--- /dev/null
+++ b/src/components/examples/data-table.vue
@@ -0,0 +1,134 @@
+<template>
+ <div class="data-table">
+ <Table
+ class="ivu-table-mini"
+ :row-class-name="() => ['no-wrap', 'col-gap-none']"
+ :columns="columns"
+ :data="data"
+ :height="tableHeight - 70"
+ border
+ ref="refTable"
+ ></Table>
+ <Page
+ class="text-center"
+ :model-value="page"
+ :total="total"
+ :page-size="limit"
+ :page-size-opts="limits"
+ show-sizer
+ show-total
+ show-elevator
+ transfer
+ @on-change="onPageChange"
+ @on-page-size-change="onPageSizeChange"
+ @on-prev="onPrev"
+ @on-next="onNext"
+ ref="refPage"
+ />
+ </div>
+</template>
+
+<script>
+import { ref } from "vue";
+export default {
+ name: "DataTable",
+ props: {
+ tableHeight: Number | String,
+ columns: {
+ type: Array,
+ default: () => [],
+ },
+ data: {
+ type: Array,
+ default: () => [],
+ },
+ total: {
+ type: Number,
+ default: () => 0,
+ },
+ page: {
+ type: Number,
+ default: () => 1,
+ },
+ limit: {
+ type: Number,
+ default: () => 10,
+ },
+ limits: {
+ type: Array,
+ default: () => [10, 20, 30, 40],
+ },
+ },
+ data() {
+ return {};
+ },
+ methods: {
+ onPageChange(page) {
+ this.$emit("on-change", page);
+ },
+ onPageSizeChange(limit) {
+ this.$emit("on-page-size-change", limit);
+ },
+ onPrev(page) {
+ this.$emit("on-prev", page);
+ },
+ onNext(page) {
+ this.$emit("on-next", page);
+ },
+ onSortChange(param) {
+ if (param.order == "normal") param.order = "asc";
+ this.columns
+ .filter((c) => c.sortType)
+ .forEach((c) => (c.sortType = undefined));
+ this.columns.find((c) => c.key == param.key).sortType = param.order;
+ this.$emit("on-sort-change", param);
+ },
+ onSelectionChange(selection) {
+ this.$emit("on-selection-change", selection);
+ },
+ onCurrentChange(currentRow) {
+ this.$emit("on-current-change", currentRow);
+ },
+ onRowClick(row, index, emit = true) {
+ this.clickedRowIndex = index;
+ this.onCurrentChange(row);
+ if (emit) this.$emit("on-row-click", row, index);
+ },
+ onCellClick(row, column, data, event) {
+ event.stopPropagation();
+ let index = row._index;
+ if (index === undefined) index = this.rows.find((r) => r.id == row.id);
+ if (column.key == "row_button") this.onRowClick(row, index, false);
+ else this.onRowClick(row, index, true);
+ },
+ onSelect(selection, row) {
+ this.$emit("on-select", selection, row);
+ },
+ onSelectCancel(selection, row) {
+ this.$emit("on-select-cancel", selection, row);
+ },
+ onSelectAll(selection) {
+ this.$emit("on-select-all", selection);
+ },
+ onSelectAllCancel(selection) {
+ this.$emit("on-select-all-cancel", selection);
+ },
+ onColumnWidthResize(newWidth, oldWidth, column, event) {
+ this.$emit("on-column-width-resize", newWidth, oldWidth, column, event);
+ },
+ },
+ setup() {
+ const refTable = ref(null);
+ const refPage = ref(null);
+ return { refTable, refPage };
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.data-table {
+ .text-center {
+ text-align: center;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/index.less b/src/index.less
index 88864ea..13b5a37 100644
--- a/src/index.less
+++ b/src/index.less
@@ -1,3 +1,5 @@
+@import url(./less/examples.less);
+
html,
body,
#app {
diff --git a/src/layout/menu.json b/src/layout/menu.json
index c1baede..94ea0f6 100644
--- a/src/layout/menu.json
+++ b/src/layout/menu.json
@@ -1,5 +1,31 @@
[
{
+ "id": "examples",
+ "title": "UI婕旂ず",
+ "isFolder": true,
+ "icon": "ios-apps",
+ "children": [
+ {
+ "id": "example-report",
+ "name": "example-report",
+ "title": "鏁版嵁鎶ヨ〃",
+ "icon": "ios-browsers"
+ },
+ {
+ "id": "example-data-table",
+ "name": "example-data-table",
+ "title": "澧炲垹鏀规煡",
+ "icon": "logo-chrome"
+ },
+ {
+ "id": "example-master-slave",
+ "name": "example-master-slave",
+ "title": "涓讳粠鏁版嵁",
+ "icon": "md-cloud"
+ }
+ ]
+ },
+ {
"id": "fake-id-1",
"title": "娴嬭瘯鏂囦欢澶�",
"isFolder": true,
diff --git a/src/less/examples.less b/src/less/examples.less
new file mode 100644
index 0000000..5d48afd
--- /dev/null
+++ b/src/less/examples.less
@@ -0,0 +1,79 @@
+.ivu-table th {
+ border-bottom-color: #cdcdcd !important;
+}
+
+.no-wrap td .ivu-table-cell {
+ white-space: nowrap;
+}
+
+.ivu-table-mini {
+ font-size: 12px;
+
+ td {
+ height: 28px;
+
+ &.ivu-table-expanded-cell {
+ padding: 10px 40px;
+ }
+
+ .ivu-table-cell-with-expand {
+ height: 28px;
+ line-height: 28px;
+ }
+ }
+
+ thead .ivu-table-cell {
+ padding-left: 6px;
+ padding-right: 4px;
+ }
+
+ margin-bottom:12px;
+}
+
+.col-gap-none .ivu-table-cell {
+ padding-left: 0;
+ padding-right: 0;
+ width: 100%;
+ height: 100%;
+
+ >div,
+ >a,
+ >span {
+ width: 100%;
+ height: 100%;
+ padding-left: 6px;
+ padding-right: 6px;
+ padding-top: 4px;
+ padding-bottom: 4px;
+ }
+
+ >a,
+ >span {
+ display: block;
+ }
+
+ &.ivu-table-cell-with-selection {
+ padding-top: 3px;
+ }
+}
+
+.ivu-table {
+ .ivu-table-tbody {
+ background-color: #fff;
+ }
+}
+
+.ivu-table-header thead tr th,
+.ivu-table-fixed-header thead tr th {
+ // padding: 0 !important;
+ text-align: center !important;
+ font-size: 12px;
+}
+
+.ivu-table {
+ .column-hidden {
+ div {
+ white-space: nowrap;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/router/routes.js b/src/router/routes.js
index 762612f..fdc6853 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -17,6 +17,24 @@
meta: { authorize: true, title: 'vue-project' },
children: [
{
+ path: 'example-report',
+ name: 'example-report',
+ component: () => import('@/views/examples/report.vue'),
+ meta: { title: '鏁版嵁鎶ヨ〃' }
+ },
+ {
+ path: 'example-data-table',
+ name: 'example-data-table',
+ component: () => import('@/views/examples/data-table.vue'),
+ meta: { title: '鏁版嵁鎶ヨ〃' }
+ },
+ {
+ path: 'example-master-slave',
+ name: 'example-master-slave',
+ component: () => import('@/views/examples/master-slave.vue'),
+ meta: { title: '鏁版嵁鎶ヨ〃' }
+ },
+ {
path: 'test-view-1-1',
name: 'test-view-1-1',
component: () => import('@/views/test-view-1-1/index.vue'),
diff --git a/src/views/examples/data-table.vue b/src/views/examples/data-table.vue
new file mode 100644
index 0000000..7f5d260
--- /dev/null
+++ b/src/views/examples/data-table.vue
@@ -0,0 +1,15 @@
+<template>
+ <div class="example-data-table"></div>
+</template>
+
+<script>
+export default {
+ name:'ExampleDataTable'
+}
+</script>
+
+<style lang="less" scoped>
+.example-data-table{
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/examples/master-slave.vue b/src/views/examples/master-slave.vue
new file mode 100644
index 0000000..dc87588
--- /dev/null
+++ b/src/views/examples/master-slave.vue
@@ -0,0 +1,15 @@
+<template>
+ <div class="example-master-slave"></div>
+</template>
+
+<script>
+export default {
+ name:'ExampleMasterSlave'
+}
+</script>
+
+<style lang="less" scoped>
+.example-master-slave{
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/examples/report.vue b/src/views/examples/report.vue
new file mode 100644
index 0000000..ced8fda
--- /dev/null
+++ b/src/views/examples/report.vue
@@ -0,0 +1,106 @@
+<template>
+ <div class="example-report-view" ref="refView">
+ <DataTable
+ :tableHeight="tableHeight"
+ :columns="columns"
+ :data="data"
+ ></DataTable>
+ </div>
+</template>
+
+<script>
+import { ref } from "vue";
+import DataTable from "@/components/examples/data-table.vue";
+export default {
+ name: "ExampleReportView",
+ components: {
+ DataTable,
+ },
+ data() {
+ return {
+ columns: [],
+ data: [],
+ tableHeight: 0,
+ };
+ },
+ methods: {
+ async loadColumns() {
+ this.columns = [
+ {
+ type: "index",
+ title: " ",
+ render: (h, { index }) => {
+ return h(index);
+ },
+ width: 50,
+ },
+ {
+ key: "WH_Code",
+ title: "浠撳簱缂栫爜",
+ width: 150,
+ },
+ {
+ key: "WH_Name",
+ title: "浠撳簱鍚嶇О",
+ },
+ {
+ key: "WH_Leader",
+ title: "浠撳簱璐熻矗浜�,
+ width: 100,
+ },
+ {
+ key: "WH_Tel",
+ title: "浠撳簱鐢佃瘽",
+ width: 100,
+ },
+ {
+ key: "Address",
+ title: "鍦板潃",
+ width: 100,
+ },
+ {
+ key: "TopLevelWH_Code",
+ title: "涓婄骇浠撳簱缂栫爜",
+ width: 100,
+ },
+ {
+ key: "IsThisLevel",
+ title: "鏄惁鏈骇",
+ width: 70,
+ },
+ {
+ key: "IsEscrow",
+ title: "鏄惁浠ｇ",
+ width: 70,
+ },
+ {
+ key: "IsEnable",
+ title: "鏄惁鍚敤",
+ width: 70,
+ },
+ ];
+ },
+ async loadData() {},
+ resize() {
+ this.tableHeight = this.refView.clientHeight;
+ },
+ },
+ async mounted() {
+ await this.loadColumns();
+ await this.loadData();
+ this.$nextTick(() => {
+ this.resize();
+ });
+ },
+ setup() {
+ const refView = ref(null);
+ return { refView };
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.example-report-view {
+ height: 100%;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.1