1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
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>
|
|
