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/master-slave.vue | 348 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 342 insertions(+), 6 deletions(-)
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
--
Gitblit v1.9.1