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 | 510 +++++++++++++++++++++++++++++++++++--------------------
1 files changed, 322 insertions(+), 188 deletions(-)
diff --git a/src/views/examples/data-table/index.vue b/src/views/examples/data-table/index.vue
index 134991f..2d184ad 100644
--- a/src/views/examples/data-table/index.vue
+++ b/src/views/examples/data-table/index.vue
@@ -1,94 +1,21 @@
<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"
+ :height="height"
+ :formObject="formObject"
+ :buttons="buttons"
:columns="columns"
:data="data"
+ :page="page"
+ :limit="limit"
+ :limits="limits"
+ :total="total"
+ :loading="loading"
+ @on-selection-change="onSelectionChange"
+ @on-change="onPageChange"
+ @on-page-size-change="onPageSizeChange"
+ @on-prev="onPrev"
+ @on-next="onNext"
></DataTable>
<DataTableInfo
v-model="infoDialog.visible"
@@ -110,12 +37,51 @@
},
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,
+ limits: [10, 20, 30],
+ total: 0,
+ selection: [],
+ loading: false,
+ // 鏌ヨ琛ㄥ崟瀹氫箟
form: {
- WH_Code: "",
+ code: "",
+ name: "",
+ leader: "",
+ tel: "",
+ topCode: "",
+ address: "",
+ isThisLevel: false,
+ isEscrow: false,
+ isEnable: false,
},
+ // 寮规鍙傛暟瀹氫箟
infoDialog: {
model: "info",
visible: false,
@@ -124,16 +90,164 @@
};
},
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: "index",
+ type: "selection",
+ width: 40,
+ align: "center",
+ },
+ {
+ key: "index",
title: " ",
render: (h, { index }) => {
- return h(index);
+ return h("div", (this.page - 1) * this.limit + index + 1);
},
- width: 50,
- fixed: "left",
+ width: 40,
+ align: "center",
+ },
+
+ {
+ key: "code",
+ title: "浠撳簱缂栫爜",
+ width: 150,
+ sortable: true,
+ resizable: true,
+ },
+ {
+ key: "name",
+ title: "浠撳簱鍚嶇О",
+ width: 200,
+ sortable: true,
+ resizable: true,
+ },
+ {
+ key: "leader",
+ title: "浠撳簱璐熻矗浜�,
+ width: 150,
+ sortable: true,
+ resizable: true,
+ },
+ {
+ key: "tel",
+ title: "浠撳簱鐢佃瘽",
+ width: 150,
+ sortable: true,
+ resizable: true,
+ },
+ {
+ key: "address",
+ title: "鍦板潃",
+ width: 150,
+ sortable: true,
+ resizable: true,
+ },
+ {
+ key: "topCode",
+ title: "涓婄骇浠撳簱缂栫爜",
+ width: 100,
+ sortable: true,
+ resizable: true,
+ },
+ {
+ key: "isThisLevel",
+ title: "鏄惁鏈骇",
+ render: (h, { row }) => {
+ return h(
+ "div",
+ h(resolveComponent("Checkbox"), {
+ modelValue: row.isThisLevel,
+ disabled: true,
+ size: "small",
+ })
+ );
+ },
+ width: 80,
+ align: "center",
+ sortable: true,
+ },
+ {
+ key: "isEscrow",
+ title: "鏄惁浠ｇ",
+ render: (h, { row }) => {
+ return h(
+ "div",
+ h(resolveComponent("Checkbox"), {
+ modelValue: row.isEscrow,
+ disabled: true,
+ size: "small",
+ })
+ );
+ },
+ width: 80,
+ align: "center",
+ sortable: true,
+ },
+ {
+ key: "isEnable",
+ title: "鏄惁鍚敤",
+ render: (h, { row }) => {
+ return h(
+ "div",
+ h(resolveComponent("Checkbox"), {
+ modelValue: row.isEnable,
+ disabled: true,
+ size: "small",
+ })
+ );
+ },
+ width: 80,
+ align: "center",
+ sortable: true,
},
{
key: "row_button",
@@ -146,52 +260,27 @@
default: () => [
h("a", [
h(
- resolveComponent("Tooltip"),
+ "span",
{
- content: "淇敼",
style: {
- marginRight: "3px",
+ marginRight: "12px",
},
+ onClick: () => this.onEditRowClick(index),
},
- {
- default: () =>
- h(resolveComponent("icon"), {
- type: "md-build",
- size: 14,
- color: "#f90",
- onClick: () => {},
- }),
- }
+ "淇敼"
),
+ ,
h(
- resolveComponent("Tooltip"),
+ resolveComponent("Poptip"),
{
- content: "鍒犻櫎",
+ title: "鏄惁纭畾鍒犻櫎姝ら」锛�,
transfer: true,
- style: {
- verticalAlign: "-1px",
- },
+ confirm: true,
+ onOnOk: () => this.onDelClickItem(index),
+ onOnCancel: () => {},
},
{
- 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",
- }),
- }
- ),
+ default: () => h("span", "鍒犻櫎"),
}
),
]),
@@ -199,67 +288,54 @@
}
);
},
- 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,
+ align: "center",
+ fixed: "right",
},
];
},
+ // 鍔犺浇鏁版嵁琛� async loadData() {
- this.data = [{}];
+ let msg = this.$Message.loading("姝ｅ湪鍔犺浇鏁版嵁...");
+ this.loading = true;
+
+ let { data, total } = await this.fakeDataList();
+
+ msg();
+
+ this.data = data;
+ this.total = total;
+ this.loading = false;
+ },
+ // 娴嬭瘯鏁版嵁鍒楄〃
+ fakeDataList(limit) {
+ return new Promise((resolve) => {
+ let total = 99;
+ let fakeList = [];
+ for (let i = 0; i < (limit || this.limit); i++) {
+ let row = {
+ code: `浠撳簱缂栫爜-${(this.page - 1) * this.limit + i + 1}`,
+ name: `浠撳簱鍚嶇О-${(this.page - 1) * this.limit + i + 1}`,
+ leader: `浠撳簱璐熻矗浜�${(this.page - 1) * this.limit + i + 1}`,
+ tel: `浠撳簱鐢佃瘽-${(this.page - 1) * this.limit + i + 1}`,
+ address: `鍦板潃-${(this.page - 1) * this.limit + i + 1}`,
+ topCode: `涓婄骇浠撳簱缂栫爜-${(this.page - 1) * this.limit + i + 1}`,
+ isThisLevel:
+ ((this.page - 1) * this.limit + i + 1) % 2 == 0 ? true : false,
+ isEscrow:
+ ((this.page - 1) * this.limit + i + 1) % 2 == 0 ? true : false,
+ isEnable:
+ ((this.page - 1) * this.limit + i + 1) % 2 == 0 ? true : false,
+ };
+ if ((this.page - 1) * this.limit + i + 1 < 100) fakeList.push(row);
+ }
+ setTimeout(() => {
+ resolve({ data: fakeList, total });
+ }, 1 * 1000);
+ });
},
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";
@@ -267,14 +343,35 @@
this.infoDialog.visible = true;
},
onEditClick() {
+ if (this.selection.length == 0) return this.showWarning("鏈�鎷╂搷浣滈」");
+ else if (this.selection.length > 1)
+ return this.showWarning("鍙兘閫夋嫨涓�」杩涜缂栬緫");
+ let code = this.selection[0].code;
this.infoDialog.model = "edit";
- this.infoDialog.dataId = "";
+ this.infoDialog.dataId = code;
+ this.infoDialog.visible = true;
+ },
+ onEditRowClick(index) {
+ let code = this.data[index].code;
+ this.infoDialog.model = "edit";
+ this.infoDialog.dataId = code;
this.infoDialog.visible = true;
},
onViewClick() {
+ if (this.selection.length == 0) return this.showWarning("鏈�鎷╂搷浣滈」");
+ else if (this.selection.length > 1)
+ return this.showWarning("鍙兘閫夋嫨涓�」鏌ョ湅");
+ let code = this.selection[0].code;
this.infoDialog.model = "info";
- this.infoDialog.dataId = "";
+ this.infoDialog.dataId = code;
this.infoDialog.visible = true;
+ },
+ showWarning(tip) {
+ this.$Message.warning({
+ content: tip,
+ duration: 0,
+ closable: true,
+ });
},
async onDelClick() {
this.$Modal.confirm({
@@ -300,12 +397,32 @@
this.$Message.success("鍒犻櫎鎴愬姛锛�);
}, 2000);
},
+ onSelectionChange(selection) {
+ this.selection = selection;
+ },
+ onPageChange(page) {
+ this.page = page;
+ this.loadData();
+ },
+ onPageSizeChange(limit) {
+ this.limit = limit;
+ this.loadData();
+ },
+ onPrev(page) {
+ this.page = page;
+ this.loadData();
+ },
+ onNext(page) {
+ this.page = page;
+ this.loadData();
+ },
},
async mounted() {
+ await this.loadForm();
await this.loadColumns();
- await this.loadData();
this.$nextTick(() => {
this.resize();
+ this.loadData();
});
},
setup() {
@@ -315,16 +432,33 @@
};
</script>
-<style lang="less" scoped>
+<style lang="less">
.example-data-table {
height: 100%;
- .search-form,
- .buttons {
+ .search-form {
margin-bottom: 9px;
+ }
+ .table {
+ height: calc(100% - 170px);
}
.ivu-form .ivu-form-item-label,
.ivu-checkbox-wrapper {
font-size: 12px;
}
+ .ivu-input-wrapper {
+ .ivu-icon {
+ cursor: pointer;
+ }
+ }
+ .ivu-checkbox-input[disabled] {
+ cursor: default;
+ }
+ .ivu-checkbox-disabled .ivu-checkbox-inner {
+ border-color: #666;
+ background-color: #fff;
+ }
+ .ivu-checkbox-disabled.ivu-checkbox-checked .ivu-checkbox-inner:after {
+ border-color: #666;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.1