From cd24c776d772c7ad797891afd779b3b072293ec2 Mon Sep 17 00:00:00 2001
From: zrlibs <jesting_rr@163.com>
Date: 星期五, 21 三月 2025 17:35:07 +0800
Subject: [PATCH] fixed
---
src/views/examples/master-slave.vue | 199 ++++++++++++++++++++++++++++++-------------------
1 files changed, 122 insertions(+), 77 deletions(-)
diff --git a/src/views/examples/master-slave.vue b/src/views/examples/master-slave.vue
index 1724a5e..eb8dfd1 100644
--- a/src/views/examples/master-slave.vue
+++ b/src/views/examples/master-slave.vue
@@ -8,72 +8,10 @@
>
<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.code" size="small"></Input>
- </FormItem>
- </Col>
- <Col span="6">
- <FormItem label="浠撳簱鍚嶇О锛�>
- <Input v-model="topForm.name" size="small"></Input>
- </FormItem>
- </Col>
- <Col span="6">
- <FormItem label="浠撳簱璐熻矗浜猴細">
- <Input v-model="topForm.leader" size="small"></Input>
- </FormItem>
- </Col>
- <Col span="6">
- <FormItem label="浠撳簱鐢佃瘽锛�>
- <Input v-model="topForm.tel" size="small"></Input>
- </FormItem>
- </Col>
- </Row>
- <Row>
- <Col span="6">
- <FormItem label="涓婄骇浠撳簱缂栫爜锛�>
- <Input v-model="topForm.topCode" size="small"></Input>
- </FormItem>
- </Col>
- <Col span="6">
- <FormItem label="鍦板潃锛�>
- <Input v-model="topForm.address" size="small"></Input>
- </FormItem>
- </Col>
- <Col span="4">
- <FormItem :label-width="34">
- <Checkbox v-model="topForm.isThisLevel" size="small"
- >鏄惁鏈骇</Checkbox
- >
- </FormItem>
- </Col>
- <Col span="4">
- <FormItem :label-width="34">
- <Checkbox v-model="topForm.isEscorw" size="small"
- >鏄惁浠ｇ</Checkbox
- >
- </FormItem>
- </Col>
- <Col span="4">
- <FormItem :label-width="34">
- <Checkbox v-model="topForm.isEnable" size="small"
- >鏄惁鍚敤</Checkbox
- >
- </FormItem>
- </Col>
- </Row>
- </Form>
- </div>
- <div class="buttons">
- <Button type="warning" size="small" @click="onClearClick"
- >娓呯┖鏌ヨ</Button
- >
- </div>
<DataTable
- :tableHeight="tableTopHeight"
+ :buttons="topButtons"
+ :formObject="topFormObject"
+ :height="topHeight"
:columns="topColumns"
:data="topData"
:page="topPage"
@@ -81,6 +19,7 @@
:limits="topLimits"
:total="topTotal"
:loading="topLoading"
+ pagePlacement="top"
highlight-row
@on-current-change="onCurrentChange"
@on-change="onPageChange"
@@ -94,14 +33,31 @@
<template #bottom>
<div class="bottom-view" ref="refBottomView">
<DataTable
- :tableHeight="tableBottomHeight"
+ :showForm="false"
+ :showTopButtons="false"
+ :height="bottomHeight"
:columns="bottomColumns"
:data="bottomData"
:paged="false"
+ size="small"
+ @on-row-click="onBottomRowClick"
></DataTable>
</div>
</template>
</Split>
+ <Drawer
+ title="婕旂ず"
+ closable
+ v-model="thirdDataDialog.visible"
+ :width="thirdDataDialog.width"
+ :mask-closable="false"
+ :mask="false"
+ draggable
+ >
+ <p>Some contents...</p>
+ <p>Some contents...</p>
+ <p>Some contents...</p>
+ </Drawer>
<Spin fix :show="loading" />
</div>
</template>
@@ -118,11 +74,21 @@
return {
// 鍒嗛殧姣斾緥
split: 0.8,
+ topFormObject: {
+ options: {},
+ items: [],
+ },
// 涓昏〃鍙傛暟瀹氫箟
+ topButtons: [
+ {
+ showName: "娓呯┖鏌ヨ",
+ onClick: () => this.onClearClick(),
+ },
+ ],
topColumns: [],
topData: [],
- tableTopHeight: 0,
- tableBottomHeight: 0,
+ topHeight: 0,
+ bottomHeight: 0,
topForm: {
code: "",
name: "",
@@ -143,11 +109,89 @@
// 浠庤〃鍙傛暟瀹氫箟
bottomColumns: [],
bottomData: [],
+ // 涓夌骇鏁版嵁婕旂ず
+ thirdDataDialog: {
+ visible: false,
+ width: 500,
+ },
loading: false,
};
},
methods: {
+ async loadTopForm() {
+ this.topFormObject.options = {
+ labelWidth: 110,
+ };
+ this.topFormObject.items = [
+ {
+ label: "浠撳簱缂栫爜锛�,
+ field: "SupplierCode",
+ value: "",
+ type: "input",
+ span: 6,
+ },
+ {
+ label: "浠撳簱鍚嶇О锛�,
+ field: "SupplierName",
+ value: "",
+ type: "input",
+ span: 6,
+ },
+ {
+ label: "浠撳簱璐熻矗浜猴細",
+ field: "ASNCode",
+ value: "",
+ type: "input",
+ span: 6,
+ },
+ {
+ label: "浠撳簱鐢佃瘽锛�,
+ field: "Invertory",
+ value: "",
+ type: "input",
+ span: 6,
+ },
+ {
+ label: "涓婄骇浠撳簱缂栫爜锛�,
+ field: "PurchaseOrderNo",
+ value: "",
+ type: "input",
+ span: 6,
+ },
+ {
+ label: "鍦板潃锛�,
+ field: "OrderDate",
+ value: "",
+ type: "input",
+ span: 18,
+ },
+ {
+ label: "鏄惁鏈骇",
+ field: "isThisLevel",
+ value: false,
+ type: "checkbox",
+ span: 6,
+ onChange: () => {},
+ },
+ {
+ label: "鏄惁浠ｇ",
+ field: "isEscorw",
+ value: false,
+ type: "checkbox",
+ span: 6,
+ onChange: () => {},
+ },
+ {
+ label: "鏄惁鍚敤",
+ field: "isEnable",
+ value: false,
+ type: "checkbox",
+ span: 6,
+ onChange: () => {},
+ },
+ ];
+ },
async loadTopColumns() {
this.topColumns = [
{
@@ -405,14 +449,9 @@
},
resize() {
this.$nextTick(() => {
- let topHeight =
- this.refTopView.clientHeight -
- this.$el.querySelector(".search-form").clientHeight -
- this.$el.querySelector(".buttons").clientHeight -
- 9;
- this.tableTopHeight = topHeight;
+ this.topHeight = this.refTopView.clientHeight - 10;
let bottomHeight = this.refBottomView.clientHeight - 9;
- this.tableBottomHeight = bottomHeight;
+ this.bottomHeight = bottomHeight;
});
},
// 涓昏〃鍒囨崲閫夋嫨琛屾椂瑙﹀彂
@@ -441,6 +480,12 @@
onClearClick() {
this.reset();
},
+ onBottomRowClick(row, index) {
+ this.showThirdData(row);
+ },
+ showThirdData() {
+ this.thirdDataDialog.visible = true;
+ },
reset() {
this.topForm.code = "";
this.topForm.name = "";
@@ -454,6 +499,7 @@
},
},
async mounted() {
+ await this.loadTopForm();
await this.loadTopColumns();
await this.loadBottomColumns();
this.$nextTick(async () => {
@@ -475,8 +521,7 @@
height: 100%;
.top-view {
height: 100%;
- .search-form,
- .buttons {
+ .search-form {
margin-bottom: 9px;
}
}
--
Gitblit v1.9.1