zrlibs
2025-03-17 6e7fcc0ebecb4d9d1485937905b31a9864913950
fixed
5个文件已添加
9个文件已修改
478 ■■■■■ 已修改文件
public/skin/blue.css 14 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
public/skin/dark.css 14 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
public/skin/green.css 13 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
public/skin/light.css 14 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
public/skin/purple.css 14 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
public/skin/red.css 14 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/examples/data-table.vue 134 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/index.less 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/layout/menu.json 26 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/less/examples.less 79 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/router/routes.js 18 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/examples/data-table.vue 15 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/examples/master-slave.vue 15 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/examples/report.vue 106 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
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)
}
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)
}
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)
}
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)
}
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)
}
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)
}
src/components/examples/data-table.vue
New file
@@ -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>
src/index.less
@@ -1,3 +1,5 @@
@import url(./less/examples.less);
html,
body,
#app {
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": "测试文件夹1",
        "isFolder": true,
src/less/examples.less
New file
@@ -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;
        }
    }
}
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'),
src/views/examples/data-table.vue
New file
@@ -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>
src/views/examples/master-slave.vue
New file
@@ -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>
src/views/examples/report.vue
New file
@@ -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>