| | |
| | | --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, |
| | |
| | | .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) |
| | | } |
| | |
| | | --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, |
| | |
| | | .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) |
| | | } |
| | |
| | | --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, |
| | |
| | | .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) |
| | | } |
| | |
| | | --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, |
| | |
| | | .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) |
| | | } |
| | |
| | | --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, |
| | |
| | | .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) |
| | | } |
| | |
| | | --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, |
| | |
| | | .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) |
| | | } |
New file |
| | |
| | | <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> |
| | |
| | | @import url(./less/examples.less); |
| | | |
| | | html, |
| | | body, |
| | | #app { |
| | |
| | | [ |
| | | { |
| | | "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": "测试文件夹1", |
| | | "isFolder": true, |
New file |
| | |
| | | .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; |
| | | } |
| | | } |
| | | } |
| | |
| | | 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'), |
New file |
| | |
| | | <template> |
| | | <div class="example-data-table"></div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name:'ExampleDataTable' |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .example-data-table{ |
| | | |
| | | } |
| | | </style> |
New file |
| | |
| | | <template> |
| | | <div class="example-master-slave"></div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name:'ExampleMasterSlave' |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .example-master-slave{ |
| | | |
| | | } |
| | | </style> |
New file |
| | |
| | | <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> |