diff --git a/klp-ui/src/views/finance/document/components/create.vue b/klp-ui/src/views/finance/document/components/create.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/klp-ui/src/views/finance/order/index.vue b/klp-ui/src/views/finance/order/index.vue
index e69de29b..cf927495 100644
--- a/klp-ui/src/views/finance/order/index.vue
+++ b/klp-ui/src/views/finance/order/index.vue
@@ -0,0 +1,169 @@
+<template>
+  <div style="padding: 20px;">
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <div>
+          <el-row>
+            <el-input v-model="queryParams.orderCode" placeholder="请输入单据编号" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-row>
+          <el-tree v-loading="orderListLoading" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
+          <el-pagination :current-page="queryParams.pageNum" :page-size="10" :total="total"
+            layout="prev, pager, next" />
+        </div>
+      </el-col>
+
+      <el-col :span="18">
+        <el-tabs v-if="currentOrder" v-model="activeTab">
+          <el-tab-pane label="订单信息" name="orderDetail">
+            <el-form>
+              <el-form-item label="订单ID">
+                <el-input v-model="currentOrder.orderId" disabled />
+              </el-form-item>
+              <el-form-item label="订单编号">
+                <el-input v-model="currentOrder.orderCode" disabled />
+              </el-form-item>
+              <el-form-item label="销售经理">
+                <el-input v-model="currentOrder.salesManager" disabled />
+              </el-form-item>
+              <el-form-item label="客户">
+                <el-input v-model="currentOrder.customerName" disabled />
+              </el-form-item>
+              <el-form-item label="含税金额">
+                <el-input v-model="currentOrder.taxAmount" disabled />
+              </el-form-item>
+              <el-form-item label="无税金额">
+                <el-input v-model="currentOrder.noTaxAmount" disabled />
+              </el-form-item>
+            </el-form>
+          </el-tab-pane>
+          <el-tab-pane label="订单明细" name="orderList">
+            <order-detail-list :orderId="currentOrder.orderId" />
+          </el-tab-pane>
+          <el-tab-pane label="应收明细" name="receivable">
+            <el-table v-loading="rightLoading" :data="currentOrder.receivables">
+              <el-table-column label="应收ID" align="center" prop="receivableId" v-if="false" />
+              <el-table-column label="客户" align="center" prop="customerName" />
+              <el-table-column label="订单ID" align="center" prop="orderId" />
+              <el-table-column label="到期日" align="center" prop="dueDate" width="180">
+                <template slot-scope="scope">
+                  <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="应收金额" align="center" prop="amount" />
+              <el-table-column label="已收金额" align="center" prop="paidAmount" />
+              <el-table-column label="未收金额" align="center" prop="balanceAmount" />
+              <el-table-column label="状态" align="center" prop="status" />
+              <el-table-column label="备注" align="center" prop="remark" />
+            </el-table>
+          </el-tab-pane>
+          <el-tab-pane label="应付明细" name="payable">
+            <el-table v-loading="rightLoading" :data="currentOrder.payables">
+              <el-table-column label="应付ID" align="center" prop="payableId" v-if="false" />
+              <el-table-column label="供应商" align="center" prop="supplierName" />
+              <el-table-column label="订单ID" align="center" prop="orderId" />
+              <el-table-column label="到期日" align="center" prop="dueDate" width="180">
+                <template slot-scope="scope">
+                  <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="应付金额" align="center" prop="amount" />
+              <el-table-column label="已付金额" align="center" prop="paidAmount" />
+              <el-table-column label="未付金额" align="center" prop="balanceAmount" />
+              <el-table-column label="状态" align="center" prop="status" />
+              <el-table-column label="备注" align="center" prop="remark" />
+            </el-table>
+          </el-tab-pane>
+          <el-tab-pane label="凭证管理" name="document">
+            <el-table :data="currentOrder.documents" style="width: 100%">
+              <el-table-column prop="documentCode" label="凭证编号" />
+              <el-table-column prop="documentDate" label="凭证日期" />
+              <el-table-column prop="documentAmount" label="凭证金额" />
+              <el-table-column prop="documentStatus" label="凭证状态" />
+            </el-table>
+          </el-tab-pane>
+        </el-tabs>
+
+        <el-empty v-else description="请选择订单" />
+      </el-col>
+    </el-row>
+  </div>
+
+</template>
+
+<script>
+import { listOrder } from "@/api/wms/order";
+import { listOrderDetail } from "@/api/wms/orderDetail";
+import { listReceivable } from "@/api/finance/receivable";
+import { listPayable } from "@/api/finance/payable";
+import { listFinancialDocument } from "@/api/finance/financialDocument";
+
+import OrderDetailList from '@/views/wms/order/panels/detail.vue'
+
+export default {
+  name: "Order",
+  components: {
+    OrderDetailList
+  },
+  data() {
+    return {
+      activeTab: "orderDetail",
+      currentOrder: null,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        orderCode: undefined
+      },
+      orderListLoading: false,
+      treeData: [],
+      total: 0,
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      rightLoading: false,
+    }
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    getList() {
+      this.orderListLoading = true;
+      listOrder(this.queryParams).then(response => {
+        this.treeData = response.rows.map(item => ({
+          label: item.orderCode,
+          value: item
+        }));
+        this.total = response.total;
+      }).finally(() => {
+        this.orderListLoading = false;
+      });
+    },
+    handleNodeClick(data) {
+      this.currentOrder = data.value;
+      this.fetchData(data.value.orderId);
+    },
+    async fetchData(orderId) {
+      this.rightLoading = true;
+      // 需要逐个获取订单明细、应收明细、应付明细、凭证管理
+      const orderDetail = (await listOrderDetail({ orderId, pageSize: 1000 })).rows;
+      const receivableDetail = (await listReceivable({ orderId, pageSize: 1000 })).rows;
+      const payableDetail = (await listPayable({ orderId, pageSize: 1000 })).rows;
+      const documentDetail = (await listFinancialDocument({ orderId, pageSize: 1000 })).rows;
+      this.rightLoading = false;
+      this.currentOrder = {
+        ...this.currentOrder,
+        details: orderDetail,
+        receivables: receivableDetail,
+        payables: payableDetail,
+        documents: documentDetail
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file