From dad44b84ab21f9d1f860760a045015f1cab0aaec Mon Sep 17 00:00:00 2001
From: zrlibs <jesting_rr@163.com>
Date: 星期三, 19 三月 2025 10:57:14 +0800
Subject: [PATCH] fixed
---
src/views/examples/report.vue | 304 ++++++++++++++++++++++++++++++++++++--------------
1 files changed, 218 insertions(+), 86 deletions(-)
diff --git a/src/views/examples/report.vue b/src/views/examples/report.vue
index 311fa7e..5f41da9 100644
--- a/src/views/examples/report.vue
+++ b/src/views/examples/report.vue
@@ -5,37 +5,29 @@
<Row>
<Col span="6">
<FormItem label="渚涘簲鍟嗙紪鐮侊細">
- <Input
- v-model="form.WH_Code"
- placeholder="Enter something..."
- size="small"
- ></Input>
+ <Input v-model="form.SupplierCode" size="small">
+ <template #suffix>
+ <Icon type="ios-more" />
+ </template>
+ </Input>
</FormItem>
</Col>
<Col span="6">
<FormItem label="渚涘簲鍟嗗悕绉帮細">
- <Input
- v-model="form.WH_Code"
- placeholder="Enter something..."
- size="small"
- ></Input>
+ <Input v-model="form.SupplierName" size="small"></Input>
</FormItem>
</Col>
<Col span="6">
<FormItem label="ASN鍗曞彿锛�>
- <Input
- v-model="form.WH_Code"
- placeholder="Enter something..."
- size="small"
+ <Input v-model="form.ASNCode" size="small">
+ <template #suffix> <Icon type="ios-more" /> </template
></Input>
</FormItem>
</Col>
<Col span="6">
<FormItem label="瀛樿揣锛�>
- <Input
- v-model="form.WH_Code"
- placeholder="Enter something..."
- size="small"
+ <Input v-model="form.Invertory" size="small">
+ <template #suffix> <Icon type="ios-more" /> </template
></Input>
</FormItem>
</Col>
@@ -43,106 +35,114 @@
<Row>
<Col span="6">
<FormItem label="浠ｈ喘璁㈠崟鍙凤細">
- <Input
- v-model="form.WH_Code"
- placeholder="Enter something..."
- size="small"
+ <Input v-model="form.PurchaseOrderNo" size="small">
+ <template #suffix> <Icon type="ios-more" /> </template
></Input>
</FormItem>
</Col>
<Col span="12">
<FormItem label="璁㈠崟浜ゆ湡锛�>
- <Input
- v-model="form.WH_Code"
- placeholder="Enter something..."
+ <DatePicker
+ type="daterange"
+ v-model="form.OrderDate"
+ separator=" 鑷�"
size="small"
- ></Input>
+ style="width: 100%"
+ ></DatePicker>
</FormItem>
</Col>
<Col span="6">
<FormItem label="鐘舵�锛�>
- <Input
- v-model="form.WH_Code"
- placeholder="Enter something..."
- size="small"
- ></Input>
+ <Select v-model="form.State" size="small">
+ <Option :value="0">涓�/Option>
+ <Option :value="1">浜�/Option>
+ <Option :value="2">涓�/Option>
+ </Select>
</FormItem>
</Col>
</Row>
<Row>
<Col span="6">
<FormItem label="閲囪喘鍛橈細">
- <Input
- v-model="form.WH_Code"
- placeholder="Enter something..."
- size="small"
- ></Input>
+ <Input v-model="form.Purchase" size="small"></Input>
</FormItem>
</Col>
<Col span="6">
<FormItem label="閲囪喘绫诲瀷锛�>
- <Input
- v-model="form.WH_Code"
- placeholder="Enter something..."
- size="small"
- ></Input>
+ <Select v-model="form.PurchaseType" size="small">
+ <Option :value="0">涓�/Option>
+ <Option :value="1">浜�/Option>
+ <Option :value="2">涓�/Option>
+ </Select>
</FormItem>
</Col>
<Col span="6">
<FormItem label="鍗曟嵁绫诲瀷锛�>
- <Input
- v-model="form.WH_Code"
- placeholder="Enter something..."
- size="small"
- ></Input>
+ <Select v-model="form.DocumentType" size="small">
+ <Option :value="0">涓�/Option>
+ <Option :value="1">浜�/Option>
+ <Option :value="2">涓�/Option>
+ </Select>
</FormItem>
</Col>
<Col span="6">
<FormItem label="鍏抽棴鐘舵�锛�>
- <Input
- v-model="form.WH_Code"
- placeholder="Enter something..."
- size="small"
- ></Input>
+ <Select v-model="form.CloseState" size="small">
+ <Option :value="0">涓�/Option>
+ <Option :value="1">浜�/Option>
+ <Option :value="2">涓�/Option>
+ </Select>
</FormItem>
</Col>
</Row>
<Row>
<Col span="6">
<FormItem label="鏄惁鍒拌揣瀹屾垚锛�>
- <Input
- v-model="form.WH_Code"
- placeholder="Enter something..."
- size="small"
- ></Input>
+ <Select v-model="form.IsArrived" size="small">
+ <Option :value="0">涓�/Option>
+ <Option :value="1">浜�/Option>
+ <Option :value="2">涓�/Option>
+ </Select>
</FormItem>
</Col>
<Col span="6">
<FormItem label="ASN鍒涘缓鏃ユ湡锛�>
- <Input
- v-model="form.WH_Code"
- placeholder="Enter something..."
- size="small"
- ></Input>
+ <DatePicker type="date" v-model="form.CreateTime" size="small" />
</FormItem>
</Col>
</Row>
</Form>
</div>
<div class="buttons">
- <Button type="success" size="small" @click="onExportClick">瀵煎嚭</Button>
+ <Space>
+ <Button type="primary" size="small" @click="onSearchClick">鏌ヨ</Button>
+ <Button type="primary" size="small" @click="onClearClick">娓呯┖</Button>
+ <Button type="success" size="small" @click="onExportClick">瀵煎嚭</Button>
+ </Space>
</div>
- <DataTable
- :tableHeight="tableHeight"
- :columns="columns"
- :data="data"
- ></DataTable>
+ <div class="table">
+ <DataTable
+ :tableHeight="tableHeight"
+ :columns="columns"
+ :data="data"
+ :page="page"
+ :limit="limit"
+ :limits="limits"
+ :total="total"
+ :loading="loading"
+ @on-change="onPageChange"
+ @on-page-size-change="onPageSizeChange"
+ @on-prev="onPrev"
+ @on-next="onNext"
+ ></DataTable>
+ </div>
</div>
</template>
<script>
import { ref } from "vue";
import DataTable from "@/components/examples/data-table.vue";
+import { exportExcel } from "./excel.js";
export default {
name: "ExampleReportView",
components: {
@@ -153,85 +153,172 @@
columns: [],
data: [],
tableHeight: 0,
+ // 鏌ヨ琛ㄥ崟鐨勫畾涔� form: {
- WH_Code: "",
+ SupplierCode: "",
+ ASNName: "",
+ ASNCode: "",
+ Invertory: "",
+ PurchaseOrderNo: "",
+ OrderDate: [],
+ State: "",
+ Purchase: "",
+ PurchaseType: "",
+ DocumentType: "",
+ CloseState: "",
+ IsArrived: "",
+ ASNCreateDate: "",
},
+ // 鍒嗛〉鍙傛暟
+ page: 1,
+ limit: 30,
+ limits: [10, 20, 30],
+ total: 0,
+ loading: false,
};
},
methods: {
async loadColumns() {
this.columns = [
{
- type: "index",
+ key: "index",
title: " ",
render: (h, { index }) => {
- return h(index);
+ return h("div", (this.page - 1) * this.limit + index + 1);
},
- width: 50,
+ width: 40,
+ align: "center",
},
{
- key: "",
+ key: "ASNCode",
title: "ASN鍗曞彿",
width: 100,
+ sortable: true,
+ resizable: true,
},
{
- key: "",
+ key: "CloseState",
title: "鍏抽棴鐘舵�",
width: 100,
+ sortable: true,
+ resizable: true,
},
{
- key: "",
+ key: "InventoryState",
title: "瀛樿揣鐘舵�",
width: 100,
+ sortable: true,
+ resizable: true,
},
{
- key: "",
+ key: "InvertoryName",
title: "瀛樿揣鍚嶇О",
width: 100,
+ resizable: true,
},
{
- key: "",
+ key: "SpecModel",
title: "瑙勬牸鍨嬪彿",
width: 100,
+ sortable: true,
+ resizable: true,
},
{
- key: "",
+ key: "AuditState",
title: "瀹℃牳鐘舵�",
width: 100,
+ resizable: true,
},
{
- key: "",
+ key: "SendDate",
title: "鍙戣揣鏃ユ湡",
width: 100,
+ sortable: true,
+ resizable: true,
},
{
- key: "",
+ key: "SupplierCode",
title: "渚涘簲鍟嗙紪鐮�,
width: 100,
+ resizable: true,
},
{
- key: "",
+ key: "SupplierName",
title: "渚涘簲鍟嗗悕绉�,
width: 100,
+ resizable: true,
},
{
- key: "",
+ key: "Creator",
title: "鍒涘缓浜�,
width: 100,
},
{
- key: "",
+ key: "CreateTime",
title: "鍒涘缓鏃堕棿",
width: 100,
+ sortable: true,
},
{
- key: "",
+ key: "PurchasePoint",
title: "閲囪喘鐐�,
width: 100,
},
];
},
- async loadData() {},
+ // 鍔犺浇鏁版嵁琛�+ async loadData() {
+ let msg = this.$Message.loading("姝ｅ湪鍔犺浇鏁版嵁...");
+ this.loading = true;
+
+ let { data, total } = await this.fakeDataList();
+
+ msg();
+
+ this.data = data;
+ this.total = total;
+ this.loading = false;
+ },
+ // 鍔犺浇鍏ㄩ儴鏁版嵁(瀵煎嚭)
+ async loadAllData() {
+ let msg = this.$Message.loading("姝ｅ湪鍔犺浇鏁版嵁...");
+ this.loading = true;
+
+ let { data } = await this.fakeDataList(this.total);
+
+ msg();
+
+ this.loading = false;
+
+ return data;
+ },
+ // 娴嬭瘯鏁版嵁鍒楄〃
+ fakeDataList(limit) {
+ return new Promise((resolve) => {
+ let total = 99;
+ let fakeList = [];
+ for (let i = 0; i < (limit || this.limit); i++) {
+ let row = {
+ ASNCode: `ASN鍗曞彿-${(this.page - 1) * this.limit + i + 1}`,
+ CloseState: `鍏抽棴鐘舵�-${(this.page - 1) * this.limit + i + 1}`,
+ InventoryState: `瀛樿揣鐘舵�-${(this.page - 1) * this.limit + i + 1}`,
+ InvertoryName: `瀛樿揣鍚嶇О-${(this.page - 1) * this.limit + i + 1}`,
+ SpecModel: `瑙勬牸鍨嬪彿-${(this.page - 1) * this.limit + i + 1}`,
+ AuditState: `瀹℃牳鐘舵�-${(this.page - 1) * this.limit + i + 1}`,
+ SendDate: `鍙戣揣鏃ユ湡-${(this.page - 1) * this.limit + i + 1}`,
+ SupplierCode: `渚涘簲鍟嗙紪鐮�${(this.page - 1) * this.limit + i + 1}`,
+ SupplierName: `渚涘簲鍟嗗悕绉�${(this.page - 1) * this.limit + i + 1}`,
+ Creator: `鍒涘缓浜�${(this.page - 1) * this.limit + i + 1}`,
+ CreateTime: `鍒涘缓鏃堕棿-${(this.page - 1) * this.limit + i + 1}`,
+ PurchasePoint: `閲囪喘鐐�${(this.page - 1) * this.limit + i + 1}`,
+ };
+ 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 -
@@ -241,11 +328,48 @@
9;
this.tableHeight = height;
},
- onExportClick() {},
+ onSearchClick() {
+ alert(JSON.stringify(this.form, "", " "));
+ },
+ onClearClick() {
+ this.form.SupplierCode = "";
+ this.form.ASNName = "";
+ this.form.ASNCode = "";
+ this.form.Invertory = "";
+ this.form.PurchaseOrderNo = "";
+ this.form.OrderDate = [];
+ this.form.State = "";
+ this.form.Purchase = "";
+ this.form.PurchaseType = "";
+ this.form.DocumentType = "";
+ this.form.CloseState = "";
+ this.form.IsArrived = "";
+ this.form.ASNCreateDate = "";
+ },
+ async onExportClick() {
+ let datas = await this.loadAllData();
+ await exportExcel(this, datas);
+ },
+ 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.loadColumns();
- await this.loadData();
+ this.loadData();
this.$nextTick(() => {
this.resize();
});
@@ -264,9 +388,17 @@
.buttons {
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;
+ }
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.1