From 7ae689ef9495232756023f0177683e80615e13aa Mon Sep 17 00:00:00 2001
From: zrlibs <jesting_rr@163.com>
Date: 星期一, 17 三月 2025 15:45:37 +0800
Subject: [PATCH] 增加示例页、组件、样式
---
src/views/examples/report.vue | 222 ++++++++++-
src/router/routes.js | 2
src/layout/index.vue | 19
src/components/examples/data-table.vue | 8
src/views/examples/data-table/dialogs/info.vue | 129 ++++++
/dev/null | 15
src/views/examples/master-slave.vue | 348 ++++++++++++++++++
src/views/examples/data-table/index.vue | 330 +++++++++++++++++
src/less/examples.less | 49 ++
9 files changed, 1,069 insertions(+), 53 deletions(-)
diff --git a/src/components/examples/data-table.vue b/src/components/examples/data-table.vue
index e72e957..b3238bf 100644
--- a/src/components/examples/data-table.vue
+++ b/src/components/examples/data-table.vue
@@ -5,11 +5,12 @@
:row-class-name="() => ['no-wrap', 'col-gap-none']"
:columns="columns"
:data="data"
- :height="tableHeight - 70"
+ :height="paged ? tableHeight - 70 : tableHeight"
border
ref="refTable"
></Table>
<Page
+ v-if="paged"
class="text-center"
:model-value="page"
:total="total"
@@ -34,6 +35,10 @@
name: "DataTable",
props: {
tableHeight: Number | String,
+ paged: {
+ type: Boolean,
+ default: () => true,
+ },
columns: {
type: Array,
default: () => [],
@@ -127,6 +132,7 @@
<style lang="less" scoped>
.data-table {
+ height: 100%;
.text-center {
text-align: center;
}
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 3079db6..75fae0c 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -135,8 +135,19 @@
},
},
mounted() {
- let firstRoute = this.viewList[0];
- this.onMenuClick(firstRoute.id);
+ // 鎸囧畾浜嗘纭殑url鍙傛暟鏃讹紝璺宠浆鑷虫寚瀹氶〉(鍒锋柊)
+ // 鍚﹀垯璺宠浆鑷抽椤�+ let id = this.$route.query.menuId;
+ if (
+ this.viewList.map((v) => v.name).includes(this.$route.name) &&
+ this.viewList.map((v) => v.id).includes(id)
+ ) {
+ let route = this.viewList.find((v) => v.id == id);
+ this.onMenuClick(route.id);
+ } else {
+ let firstRoute = this.viewList[0];
+ this.onMenuClick(firstRoute.id);
+ }
},
setup() {
let refMenu = ref(null);
@@ -215,6 +226,10 @@
display: none;
}
}
+ .view {
+ width: calc(100% - 240px);
+ height: 100%;
+ }
}
}
}
diff --git a/src/less/examples.less b/src/less/examples.less
index 5d48afd..21eb951 100644
--- a/src/less/examples.less
+++ b/src/less/examples.less
@@ -76,4 +76,53 @@
white-space: nowrap;
}
}
+}
+
+.ivu-form {
+ &.ivu-form-label-right {
+ .ivu-form-item-label {
+ padding-right: 5px;
+ }
+
+ .ivu-form-item {
+ margin-bottom: 0px;
+ }
+ }
+}
+
+.ivu-split-trigger-horizontal {
+ height: 10px;
+ width: 100px;
+ border: 1px solid #dcdee2;
+ margin-left: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 5px;
+ box-shadow: 0px 1px 1px 1px #0001;
+
+ .ivu-split-trigger-bar-con.horizontal {
+ width: 16px;
+
+ .ivu-split-trigger-bar {
+ height: 3px;
+ }
+ }
+}
+
+.ivu-split-trigger-vertical {
+ width: 10px;
+ height: 100px;
+ border: 1px solid #dcdee2;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 5px;
+ box-shadow: 0px 1px 1px 1px #0001;
+
+ .ivu-split-trigger-bar-con.vertical {
+ height: 31px;
+
+ .ivu-split-trigger-bar {
+ width: 5px;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/router/routes.js b/src/router/routes.js
index fdc6853..0b40b94 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -25,7 +25,7 @@
{
path: 'example-data-table',
name: 'example-data-table',
- component: () => import('@/views/examples/data-table.vue'),
+ component: () => import('@/views/examples/data-table/index.vue'),
meta: { title: '鏁版嵁鎶ヨ〃' }
},
{
diff --git a/src/views/examples/data-table.vue b/src/views/examples/data-table.vue
deleted file mode 100644
index 7f5d260..0000000
--- a/src/views/examples/data-table.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<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/data-table/dialogs/info.vue b/src/views/examples/data-table/dialogs/info.vue
new file mode 100644
index 0000000..79e9c06
--- /dev/null
+++ b/src/views/examples/data-table/dialogs/info.vue
@@ -0,0 +1,129 @@
+<template>
+ <Modal
+ :model-value="modelValue"
+ title="Common Modal dialog box title"
+ class-name="data-table-add"
+ @update:model-value="(v) => this.$emit('update:modelValue', v)"
+ >
+ <Form :model="form" :label-width="110">
+ <template v-if="model != 'info'">
+ <FormItem label="浠撳簱缂栫爜锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ <FormItem label="浠撳簱鍚嶇О锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ <FormItem label="浠撳簱璐熻矗浜猴細">
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ <FormItem label="浠撳簱鐢佃瘽锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ <FormItem label="涓婄骇浠撳簱缂栫爜锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ <FormItem label="鍦板潃锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ <FormItem>
+ <Checkbox v-model="form.WH_Code" size="small">鏄惁鏈骇</Checkbox>
+ </FormItem>
+ <FormItem>
+ <Checkbox v-model="form.WH_Code" size="small">鏄惁浠ｇ</Checkbox>
+ </FormItem>
+ <FormItem>
+ <Checkbox v-model="form.WH_Code" size="small">鏄惁鍚敤</Checkbox>
+ </FormItem>
+ </template>
+ <template v-else>
+ <FormItem label="浠撳簱缂栫爜锛�> 浠撳簱缂栫爜 </FormItem>
+ <FormItem label="浠撳簱鍚嶇О锛�> 浠撳簱鍚嶇О </FormItem>
+ <FormItem label="浠撳簱璐熻矗浜猴細"> 浠撳簱璐熻矗浜�</FormItem>
+ <FormItem label="浠撳簱鐢佃瘽锛�> 浠撳簱鐢佃瘽 </FormItem>
+ <FormItem label="涓婄骇浠撳簱缂栫爜锛�> 涓婄骇浠撳簱缂栫爜 </FormItem>
+ <FormItem label="鍦板潃锛�> 鍦板潃 </FormItem>
+ <FormItem>
+ <Checkbox v-model="form.WH_Code" size="small" disabled
+ >鏄惁鏈骇</Checkbox
+ >
+ </FormItem>
+ <FormItem>
+ <Checkbox v-model="form.WH_Code" size="small" disabled
+ >鏄惁浠ｇ</Checkbox
+ >
+ </FormItem>
+ <FormItem>
+ <Checkbox v-model="form.WH_Code" size="small" disabled
+ >鏄惁鍚敤</Checkbox
+ >
+ </FormItem>
+ </template>
+ </Form>
+ <template #footer>
+ <template v-if="model != 'info'">
+ <Space>
+ <Button type="text" @click="onCancel">鍙栨秷</Button>
+ <Button type="primary" @click="onOk">纭畾</Button>
+ </Space>
+ </template>
+ <template v-else>
+ <Button type="primary" @click="onClose">鍏抽棴</Button>
+ </template>
+ </template>
+ </Modal>
+</template>
+
+<script>
+export default {
+ name: "ExampleDataTableAdd",
+ props: {
+ modelValue: Boolean,
+ model: {
+ type: String,
+ default: () => "info",
+ },
+ },
+ data() {
+ return {
+ form: {},
+ };
+ },
+ methods: {
+ onOk() {},
+ onCancel() {},
+ onClose() {},
+ },
+};
+</script>
+
+<style lang="less">
+.data-table-add {
+ .ivu-modal {
+ top: 40px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/examples/data-table/index.vue b/src/views/examples/data-table/index.vue
new file mode 100644
index 0000000..134991f
--- /dev/null
+++ b/src/views/examples/data-table/index.vue
@@ -0,0 +1,330 @@
+<template>
+ <div class="example-data-table" ref="refView">
+ <div class="search-form">
+ <Form :model="form" :label-width="110">
+ <Row>
+ <Col span="6">
+ <FormItem label="浠撳簱缂栫爜锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="浠撳簱鍚嶇О锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="浠撳簱璐熻矗浜猴細">
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="浠撳簱鐢佃瘽锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ </Row>
+ <Row>
+ <Col span="6">
+ <FormItem label="涓婄骇浠撳簱缂栫爜锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="鍦板潃锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="4">
+ <FormItem :label-width="34">
+ <Checkbox v-model="form.WH_Code" size="small">鏄惁鏈骇</Checkbox>
+ </FormItem>
+ </Col>
+ <Col span="4">
+ <FormItem :label-width="34">
+ <Checkbox v-model="form.WH_Code" size="small">鏄惁浠ｇ</Checkbox>
+ </FormItem>
+ </Col>
+ <Col span="4">
+ <FormItem :label-width="34">
+ <Checkbox v-model="form.WH_Code" size="small">鏄惁鍚敤</Checkbox>
+ </FormItem>
+ </Col>
+ </Row>
+ </Form>
+ </div>
+ <div class="buttons">
+ <Space>
+ <Button type="success" size="small" @click="onAddClick">鏂板</Button>
+ <Button type="warning" size="small" @click="onEditClick">淇敼</Button>
+ <Button type="error" size="small" @click="onDelClick">鍒犻櫎</Button>
+ <Button type="primary" size="small" @click="onViewClick">鏌ョ湅</Button>
+ </Space>
+ </div>
+ <DataTable
+ :tableHeight="tableHeight"
+ :columns="columns"
+ :data="data"
+ ></DataTable>
+ <DataTableInfo
+ v-model="infoDialog.visible"
+ :model="infoDialog.model"
+ :dataId="infoDialog.dataId"
+ ></DataTableInfo>
+ </div>
+</template>
+
+<script>
+import { ref, resolveComponent } from "vue";
+import DataTable from "@/components/examples/data-table.vue";
+import DataTableInfo from "./dialogs/info.vue";
+export default {
+ name: "ExampleDataTable",
+ components: {
+ DataTable,
+ DataTableInfo,
+ },
+ data() {
+ return {
+ columns: [],
+ data: [],
+ tableHeight: 0,
+ form: {
+ WH_Code: "",
+ },
+ infoDialog: {
+ model: "info",
+ visible: false,
+ dataId: "",
+ },
+ };
+ },
+ methods: {
+ async loadColumns() {
+ this.columns = [
+ {
+ type: "index",
+ title: " ",
+ render: (h, { index }) => {
+ return h(index);
+ },
+ width: 50,
+ fixed: "left",
+ },
+ {
+ key: "row_button",
+ title: " ",
+ render: (h, { row, index }) => {
+ return h(
+ resolveComponent("Space"),
+ {},
+ {
+ default: () => [
+ h("a", [
+ h(
+ resolveComponent("Tooltip"),
+ {
+ content: "淇敼",
+ style: {
+ marginRight: "3px",
+ },
+ },
+ {
+ default: () =>
+ h(resolveComponent("icon"), {
+ type: "md-build",
+ size: 14,
+ color: "#f90",
+ onClick: () => {},
+ }),
+ }
+ ),
+ h(
+ resolveComponent("Tooltip"),
+ {
+ content: "鍒犻櫎",
+ transfer: true,
+ style: {
+ verticalAlign: "-1px",
+ },
+ },
+ {
+ default: () =>
+ h(
+ resolveComponent("Poptip"),
+ {
+ title: "鏄惁纭畾鍒犻櫎姝ら」锛�,
+ transfer: true,
+ confirm: true,
+ onOnOk: () => this.onDelClickItem(index),
+ onOnCancel: () => {},
+ },
+ {
+ default: () =>
+ h(resolveComponent("icon"), {
+ type: "ios-trash-outline",
+ size: 18,
+ color: "#ed4014",
+ }),
+ }
+ ),
+ }
+ ),
+ ]),
+ ],
+ }
+ );
+ },
+ width: 50,
+ fixed: "left",
+ },
+ {
+ key: "WH_Code",
+ title: "浠撳簱缂栫爜",
+ width: 150,
+ fixed: "left",
+ },
+ {
+ 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() {
+ this.data = [{}];
+ },
+ resize() {
+ let height =
+ this.refView.clientHeight -
+ this.$el.querySelector(".search-form").clientHeight -
+ this.$el.querySelector(".buttons").clientHeight -
+ 9 -
+ 9;
+ this.tableHeight = height;
+ },
+ onAddClick() {
+ this.infoDialog.model = "add";
+ this.infoDialog.dataId = "";
+ this.infoDialog.visible = true;
+ },
+ onEditClick() {
+ this.infoDialog.model = "edit";
+ this.infoDialog.dataId = "";
+ this.infoDialog.visible = true;
+ },
+ onViewClick() {
+ this.infoDialog.model = "info";
+ this.infoDialog.dataId = "";
+ this.infoDialog.visible = true;
+ },
+ async onDelClick() {
+ this.$Modal.confirm({
+ title: "鎻愮ず",
+ content: "鏄惁纭鍒犻櫎杩欎簺鏉＄洰",
+ loading: true,
+ onOk: () => {
+ setTimeout(() => {
+ this.$Modal.remove();
+ this.$Message.success("鍒犻櫎鎴愬姛锛�);
+ }, 2000);
+ },
+ });
+ },
+ async onDelClickItem(index) {
+ const msg = this.$Message.loading({
+ content: "鍒犻櫎涓�..",
+ duration: 0,
+ });
+ setTimeout(() => {
+ this.data.splice(index, 1);
+ msg();
+ this.$Message.success("鍒犻櫎鎴愬姛锛�);
+ }, 2000);
+ },
+ },
+ 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-data-table {
+ height: 100%;
+ .search-form,
+ .buttons {
+ margin-bottom: 9px;
+ }
+ .ivu-form .ivu-form-item-label,
+ .ivu-checkbox-wrapper {
+ font-size: 12px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/examples/master-slave.vue b/src/views/examples/master-slave.vue
index dc87588..0c3fa1a 100644
--- a/src/views/examples/master-slave.vue
+++ b/src/views/examples/master-slave.vue
@@ -1,15 +1,351 @@
<template>
- <div class="example-master-slave"></div>
+ <div class="example-master-slave">
+ <Split
+ v-model="split"
+ mode="vertical"
+ @on-moving="resize"
+ @on-move-end="resize"
+ >
+ <template #top>
+ <div class="top-view" ref="refTopView">
+ <div class="search-form">
+ <Form :model="topForm" :label-width="110">
+ <Row>
+ <Col span="6">
+ <FormItem label="浠撳簱缂栫爜锛�>
+ <Input
+ v-model="topForm.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="浠撳簱鍚嶇О锛�>
+ <Input
+ v-model="topForm.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="浠撳簱璐熻矗浜猴細">
+ <Input
+ v-model="topForm.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="浠撳簱鐢佃瘽锛�>
+ <Input
+ v-model="topForm.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ </Row>
+ <Row>
+ <Col span="6">
+ <FormItem label="涓婄骇浠撳簱缂栫爜锛�>
+ <Input
+ v-model="topForm.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="鍦板潃锛�>
+ <Input
+ v-model="topForm.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="4">
+ <FormItem :label-width="34">
+ <Checkbox v-model="topForm.WH_Code" size="small"
+ >鏄惁鏈骇</Checkbox
+ >
+ </FormItem>
+ </Col>
+ <Col span="4">
+ <FormItem :label-width="34">
+ <Checkbox v-model="topForm.WH_Code" size="small"
+ >鏄惁浠ｇ</Checkbox
+ >
+ </FormItem>
+ </Col>
+ <Col span="4">
+ <FormItem :label-width="34">
+ <Checkbox v-model="topForm.WH_Code" size="small"
+ >鏄惁鍚敤</Checkbox
+ >
+ </FormItem>
+ </Col>
+ </Row>
+ </Form>
+ </div>
+ <div class="buttons">
+ <Button type="warning" size="small">娓呯┖鏌ヨ</Button>
+ </div>
+ <DataTable
+ :tableHeight="tableTopHeight"
+ :columns="topColumns"
+ :data="topData"
+ ></DataTable>
+ </div>
+ </template>
+ <template #bottom>
+ <div class="bottom-view" ref="refBottomView">
+ <DataTable
+ :tableHeight="tableBottomHeight"
+ :columns="bottomColumns"
+ :data="bottomData"
+ :paged="false"
+ ></DataTable>
+ </div>
+ </template>
+ </Split>
+ </div>
</template>
<script>
+import { ref } from "vue";
+import DataTable from "@/components/examples/data-table.vue";
export default {
- name:'ExampleMasterSlave'
-}
+ name: "ExampleMasterSlave",
+ components: {
+ DataTable,
+ },
+ data() {
+ return {
+ topColumns: [],
+ topData: [],
+ tableTopHeight: 0,
+ tableBottomHeight: 0,
+ topForm: {
+ WH_Code: "",
+ },
+ bottomColumns: [],
+ bottomData: [],
+ split: 0.6,
+ };
+ },
+ methods: {
+ async loadTopColumns() {
+ this.topColumns = [
+ {
+ type: "index",
+ title: " ",
+ render: (h, { index }) => {
+ return h(index);
+ },
+ width: 50,
+ },
+ {
+ key: "",
+ title: "鍒拌揣鍗曞彿",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "妫�煡鍗曞彿",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "瀛樿揣缂栫爜",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "瀛樿揣鍚嶇О",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "瑙勬牸鍨嬪彿",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "鍝佺墝",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "鍙傛暟鎻忚堪",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "鏉愭枡",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "鍗曚綅",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "鍏ュ簱鏁伴噺",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "鍒拌揣鏃ユ湡",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "妫�煡鏃ユ湡",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "涓氬姟绫诲瀷",
+ width: 100,
+ },
+ ];
+ },
+ async loadTopData() {},
+ loadBottomColumns() {
+ this.bottomColumns = [
+ {
+ type: "index",
+ title: " ",
+ render: (h, { index }) => {
+ return h(index);
+ },
+ width: 50,
+ },
+ {
+ key: "",
+ title: "妫�獙鍗�,
+ width: 100,
+ },
+ {
+ key: "",
+ title: "鍒拌揣鍗�,
+ width: 100,
+ },
+ {
+ key: "",
+ title: "寰呮璐т綅",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "渚涘簲鍟嗗悕绉�,
+ width: 100,
+ },
+ {
+ key: "",
+ title: "ASN鍗曞彿",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "渚涘簲鍟嗙紪鐮�,
+ width: 100,
+ },
+ {
+ key: "",
+ title: "浠撳簱鍚嶇О",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "鏁伴噺",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "鍙敤缁戝畾鏁伴噺",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "瀛樿揣缂栫爜",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "瀛樿揣鍚嶇О",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "瑙勬牸鍨嬪彿",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "鍝佺墝",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "WPN",
+ width: 100,
+ },
+ ];
+ },
+ async loadBottomData() {},
+ resize() {
+ this.$nextTick(() => {
+ let topHeight =
+ this.refTopView.clientHeight -
+ this.$el.querySelector(".search-form").clientHeight -
+ this.$el.querySelector(".buttons").clientHeight -
+ 9;
+ this.tableTopHeight = topHeight;
+ let bottomHeight = this.refBottomView.clientHeight - 9;
+ this.tableBottomHeight = bottomHeight;
+ });
+ },
+ },
+ async mounted() {
+ await this.loadTopColumns();
+ await this.loadTopData();
+ await this.loadBottomColumns();
+ await this.loadBottomData();
+ this.$nextTick(() => {
+ this.resize();
+ });
+ },
+ setup() {
+ const refTopView = ref(null);
+ const refBottomView = ref(null);
+ return { refTopView, refBottomView };
+ },
+};
</script>
-<style lang="less" scoped>
-.example-master-slave{
-
+<style lang="less">
+.example-master-slave {
+ height: 100%;
+ .top-view {
+ height: 100%;
+ .search-form,
+ .buttons {
+ margin-bottom: 9px;
+ }
+ }
+ .bottom-view {
+ margin-top: 9px;
+ height: 100%;
+ }
+ .ivu-form .ivu-form-item-label,
+ .ivu-checkbox-wrapper {
+ font-size: 12px;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/views/examples/report.vue b/src/views/examples/report.vue
index ced8fda..311fa7e 100644
--- a/src/views/examples/report.vue
+++ b/src/views/examples/report.vue
@@ -1,5 +1,137 @@
<template>
<div class="example-report-view" ref="refView">
+ <div class="search-form">
+ <Form :model="form" :label-width="110">
+ <Row>
+ <Col span="6">
+ <FormItem label="渚涘簲鍟嗙紪鐮侊細">
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="渚涘簲鍟嗗悕绉帮細">
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="ASN鍗曞彿锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="瀛樿揣锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ </Row>
+ <Row>
+ <Col span="6">
+ <FormItem label="浠ｈ喘璁㈠崟鍙凤細">
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="12">
+ <FormItem label="璁㈠崟浜ゆ湡锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="鐘舵�锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ </Row>
+ <Row>
+ <Col span="6">
+ <FormItem label="閲囪喘鍛橈細">
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="閲囪喘绫诲瀷锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="鍗曟嵁绫诲瀷锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="鍏抽棴鐘舵�锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ </Row>
+ <Row>
+ <Col span="6">
+ <FormItem label="鏄惁鍒拌揣瀹屾垚锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ <Col span="6">
+ <FormItem label="ASN鍒涘缓鏃ユ湡锛�>
+ <Input
+ v-model="form.WH_Code"
+ placeholder="Enter something..."
+ size="small"
+ ></Input>
+ </FormItem>
+ </Col>
+ </Row>
+ </Form>
+ </div>
+ <div class="buttons">
+ <Button type="success" size="small" @click="onExportClick">瀵煎嚭</Button>
+ </div>
<DataTable
:tableHeight="tableHeight"
:columns="columns"
@@ -21,6 +153,9 @@
columns: [],
data: [],
tableHeight: 0,
+ form: {
+ WH_Code: "",
+ },
};
},
methods: {
@@ -35,55 +170,78 @@
width: 50,
},
{
- key: "WH_Code",
- title: "浠撳簱缂栫爜",
- width: 150,
- },
- {
- key: "WH_Name",
- title: "浠撳簱鍚嶇О",
- },
- {
- key: "WH_Leader",
- title: "浠撳簱璐熻矗浜�,
+ key: "",
+ title: "ASN鍗曞彿",
width: 100,
},
{
- key: "WH_Tel",
- title: "浠撳簱鐢佃瘽",
+ key: "",
+ title: "鍏抽棴鐘舵�",
width: 100,
},
{
- key: "Address",
- title: "鍦板潃",
+ key: "",
+ title: "瀛樿揣鐘舵�",
width: 100,
},
{
- key: "TopLevelWH_Code",
- title: "涓婄骇浠撳簱缂栫爜",
+ key: "",
+ title: "瀛樿揣鍚嶇О",
width: 100,
},
{
- key: "IsThisLevel",
- title: "鏄惁鏈骇",
- width: 70,
+ key: "",
+ title: "瑙勬牸鍨嬪彿",
+ width: 100,
},
{
- key: "IsEscrow",
- title: "鏄惁浠ｇ",
- width: 70,
+ key: "",
+ title: "瀹℃牳鐘舵�",
+ width: 100,
},
{
- key: "IsEnable",
- title: "鏄惁鍚敤",
- width: 70,
+ key: "",
+ title: "鍙戣揣鏃ユ湡",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "渚涘簲鍟嗙紪鐮�,
+ width: 100,
+ },
+ {
+ key: "",
+ title: "渚涘簲鍟嗗悕绉�,
+ width: 100,
+ },
+ {
+ key: "",
+ title: "鍒涘缓浜�,
+ width: 100,
+ },
+ {
+ key: "",
+ title: "鍒涘缓鏃堕棿",
+ width: 100,
+ },
+ {
+ key: "",
+ title: "閲囪喘鐐�,
+ width: 100,
},
];
},
async loadData() {},
resize() {
- this.tableHeight = this.refView.clientHeight;
+ let height =
+ this.refView.clientHeight -
+ this.$el.querySelector(".search-form").clientHeight -
+ this.$el.querySelector(".buttons").clientHeight -
+ 9 -
+ 9;
+ this.tableHeight = height;
},
+ onExportClick() {},
},
async mounted() {
await this.loadColumns();
@@ -99,8 +257,16 @@
};
</script>
-<style lang="less" scoped>
+<style lang="less">
.example-report-view {
height: 100%;
+ .search-form,
+ .buttons {
+ margin-bottom: 9px;
+ }
+ .ivu-form .ivu-form-item-label,
+ .ivu-checkbox-wrapper {
+ font-size: 12px;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.1