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/data-table/index.vue | 266 ++++++++++++++++++++++++----------------------------
1 files changed, 122 insertions(+), 144 deletions(-)
diff --git a/src/views/examples/data-table/index.vue b/src/views/examples/data-table/index.vue
index 7bb8601..2d184ad 100644
--- a/src/views/examples/data-table/index.vue
+++ b/src/views/examples/data-table/index.vue
@@ -1,70 +1,9 @@
<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.code" size="small"></Input>
- </FormItem>
- </Col>
- <Col span="6">
- <FormItem label="浠撳簱鍚嶇О锛�>
- <Input v-model="form.name" size="small"></Input>
- </FormItem>
- </Col>
- <Col span="6">
- <FormItem label="浠撳簱璐熻矗浜猴細">
- <Input v-model="form.leader" size="small"></Input>
- </FormItem>
- </Col>
- <Col span="6">
- <FormItem label="浠撳簱鐢佃瘽锛�>
- <Input v-model="form.tel" size="small"></Input>
- </FormItem>
- </Col>
- </Row>
- <Row>
- <Col span="6">
- <FormItem label="涓婄骇浠撳簱缂栫爜锛�>
- <Input v-model="form.topCode" size="small"></Input>
- </FormItem>
- </Col>
- <Col span="6">
- <FormItem label="鍦板潃锛�>
- <Input v-model="form.address" size="small"></Input>
- </FormItem>
- </Col>
- <Col span="4">
- <FormItem :label-width="34">
- <Checkbox v-model="form.isThisLevel" size="small"
- >鏄惁鏈骇</Checkbox
- >
- </FormItem>
- </Col>
- <Col span="4">
- <FormItem :label-width="34">
- <Checkbox v-model="form.isEscrow" size="small">鏄惁浠ｇ</Checkbox>
- </FormItem>
- </Col>
- <Col span="4">
- <FormItem :label-width="34">
- <Checkbox v-model="form.isEnable" 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"
+ :height="height"
+ :formObject="formObject"
+ :buttons="buttons"
:columns="columns"
:data="data"
:page="page"
@@ -98,9 +37,31 @@
},
data() {
return {
+ formObject: {
+ options: {},
+ items: [],
+ },
+ buttons: [
+ {
+ showName: "鏂板",
+ onClick: () => this.onAddClick(),
+ },
+ {
+ showName: "淇敼",
+ onClick: () => this.onEditClick(),
+ },
+ {
+ showName: "鍒犻櫎",
+ onClick: () => this.onDelClick(),
+ },
+ {
+ showName: "鏌ョ湅",
+ onClick: () => this.onViewClick(),
+ },
+ ],
columns: [],
data: [],
- tableHeight: 0,
+ height: 0,
// 鍒嗛〉淇℃伅
page: 1,
limit: 30,
@@ -129,12 +90,60 @@
};
},
methods: {
+ async loadForm() {
+ this.formObject.options = {
+ labelWidth: 110,
+ };
+ this.formObject.items = [
+ {
+ label: "浠撳簱缂栫爜锛�,
+ field: "SupplierCode",
+ value: "",
+ type: "input",
+ span: 6,
+ },
+ {
+ label: "浠撳簱鍚嶇О锛�,
+ field: "SupplierName",
+ value: "",
+ type: "input",
+ span: 6,
+ },
+ {
+ label: "浠撳簱鐢佃瘽锛�,
+ field: "ASNCode",
+ value: "",
+ type: "input",
+ span: 12,
+ },
+ {
+ label: "鍦板潃锛�,
+ field: "Invertory",
+ value: "",
+ type: "checkbox",
+ span: 6,
+ },
+ {
+ label: "鏄惁鏈骇",
+ field: "PurchaseOrderNo",
+ value: "",
+ type: "checkbox",
+ span: 6,
+ },
+ {
+ label: "鏄惁浠ｇ",
+ field: "OrderDate",
+ value: "",
+ type: "checkbox",
+ span: 12,
+ },
+ ];
+ },
async loadColumns() {
this.columns = [
{
type: "selection",
width: 40,
- fixed: "left",
align: "center",
},
{
@@ -144,81 +153,13 @@
return h("div", (this.page - 1) * this.limit + index + 1);
},
width: 40,
- fixed: "left",
align: "center",
},
- {
- 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: () => this.onEditRowClick(index),
- }),
- }
- ),
- 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: "code",
title: "浠撳簱缂栫爜",
width: 150,
- fixed: "left",
sortable: true,
resizable: true,
},
@@ -308,6 +249,49 @@
align: "center",
sortable: true,
},
+ {
+ key: "row_button",
+ title: " ",
+ render: (h, { row, index }) => {
+ return h(
+ resolveComponent("Space"),
+ {},
+ {
+ default: () => [
+ h("a", [
+ h(
+ "span",
+ {
+ style: {
+ marginRight: "12px",
+ },
+ onClick: () => this.onEditRowClick(index),
+ },
+ "淇敼"
+ ),
+ ,
+ h(
+ resolveComponent("Poptip"),
+ {
+ title: "鏄惁纭畾鍒犻櫎姝ら」锛�,
+ transfer: true,
+ confirm: true,
+ onOnOk: () => this.onDelClickItem(index),
+ onOnCancel: () => {},
+ },
+ {
+ default: () => h("span", "鍒犻櫎"),
+ }
+ ),
+ ]),
+ ],
+ }
+ );
+ },
+ width: 100,
+ align: "center",
+ fixed: "right",
+ },
];
},
// 鍔犺浇鏁版嵁琛�@@ -351,13 +335,7 @@
});
},
resize() {
- let height =
- this.refView.clientHeight -
- this.$el.querySelector(".search-form").clientHeight -
- this.$el.querySelector(".buttons").clientHeight -
- 9 -
- 9;
- this.tableHeight = height;
+ this.height = this.refView.clientHeight - 20;
},
onAddClick() {
this.infoDialog.model = "add";
@@ -440,6 +418,7 @@
},
},
async mounted() {
+ await this.loadForm();
await this.loadColumns();
this.$nextTick(() => {
this.resize();
@@ -456,8 +435,7 @@
<style lang="less">
.example-data-table {
height: 100%;
- .search-form,
- .buttons {
+ .search-form {
margin-bottom: 9px;
}
.table {
--
Gitblit v1.9.1