diff --git a/src/views/SettlementManagement/index.vue b/src/views/SettlementManagement/index.vue
index a445e7e..885c94b 100644
--- a/src/views/SettlementManagement/index.vue
+++ b/src/views/SettlementManagement/index.vue
@@ -1,4 +1,329 @@
+<!-- 结算管理 -->
 <template>
-  <div>结算管理</div>
+  <div class="departmentStructure">
+    <TablePro
+      ref="tableRef"
+      :request-api="reqApi"
+      :search-form-options="searchFormOptions"
+      :columns="columns"
+      :single-line="false"
+      :isPageTable="true"
+    >
+      <template #headerExtra>
+        <n-button
+          type="primary"
+          @click="() => {}"
+        >
+          导出所有供应商汇总
+        </n-button>
+      </template>
+    </TablePro>
+    <n-modal v-model:show="showModal">
+      <n-card
+        style="width: 1400px"
+        :title="title"
+        :bordered="false"
+        size="huge"
+        role="dialog"
+        aria-modal="true"
+      >
+        <template #header-extra></template>
+        <template #footer>
+          <n-button
+            @click="() => (showModal = false)"
+            type="primary"
+          >
+            Ok
+          </n-button>
+        </template>
+        <TablePro
+          ref="tableRef"
+          :request-api="reqApi__"
+          :columns="columns__"
+          :isPageTable="true"
+        >
+          <template #headerExtra>
+            <n-button
+              type="primary"
+              @click="() => {}"
+            >
+              导出供货食材明细表
+            </n-button>
+          </template>
+        </TablePro>
+      </n-card>
+    </n-modal>
+
+    <n-modal v-model:show="showModal____">
+      <n-card
+        style="width: 1400px"
+        :title="title____"
+        :bordered="false"
+        size="huge"
+        role="dialog"
+        aria-modal="true"
+      >
+        <template #header-extra></template>
+        <template #footer>
+          <n-button
+            @click="() => (showModal____ = false)"
+            type="primary"
+          >
+            Ok
+          </n-button>
+        </template>
+        <TablePro
+          ref="tableRef"
+          :request-api="reqApi____"
+          :columns="columns____"
+          :isPageTable="true"
+        >
+          <template #headerExtra>
+            <n-button
+              type="primary"
+              @click="() => {}"
+            >
+              导出结算汇总表
+            </n-button>
+          </template>
+        </TablePro>
+      </n-card>
+    </n-modal>
+  </div>
 </template>
-<script setup></script>
+<script setup lang="tsx">
+  import { NButton, useModal, type FormInst } from "naive-ui";
+  import { reactive, ref } from "vue";
+  import type { modelDefaultValue } from "@/views/personnelManagement/departmentStructure/index.ts";
+  import {
+    TablePro,
+    type TableProProps,
+    FormPro,
+    type FormItemOptions,
+    type TableProInst,
+  } from "@/components";
+  const showModal = ref(false);
+  const showModal____ = ref(false);
+  const title____ = ref("");
+
+  const title = ref("");
+
+  type TableType = TableProProps<any, any>;
+
+  const reqApi: TableType["requestApi"] = (params) => {
+    return new Promise((resolve: any) => {
+      resolve({
+        code: 200,
+        data: {
+          pages: "2",
+          current: "1",
+          records: [
+            {
+              companyName: "供应商A",
+              goodsDetails: {
+                isTrue: true,
+              },
+              priceDetails: {
+                isTrue: true,
+              },
+            },
+            {
+              companyName: "供应商B",
+              goodsDetails: {
+                isTrue: true,
+              },
+              priceDetails: {
+                isTrue: true,
+              },
+            },
+          ],
+          size: "5",
+          total: "10",
+        },
+        success: "成功",
+      });
+    });
+  };
+
+  const reqApi__: TableType["requestApi"] = (params) => {
+    return new Promise((resolve: any) => {
+      resolve({
+        code: 200,
+        data: {
+          pages: "2",
+          current: "1",
+          records: [
+            {
+              commodity: "金煌芒果",
+              price: "19元",
+              specifications: "无",
+              brand: "品牌A",
+              units: "斤",
+              commodityType: "蔬菜豆制品",
+              inventory: 99,
+              total: 99,
+              warningValue: 10,
+              replenishment: "否",
+            },
+            {
+              commodity: "大红薯",
+              specifications: "无",
+              price: "19元",
+              brand: "无",
+              units: "斤",
+              commodityType: "蔬菜豆制品",
+              inventory: 99,
+              total: 99,
+              warningValue: 10,
+              replenishment: "是",
+            },
+          ],
+          size: "5",
+          total: "10",
+        },
+        success: "成功",
+      });
+    });
+  };
+
+  const reqApi____: TableType["requestApi"] = (params) => {
+    return new Promise((resolve: any) => {
+      resolve({
+        code: 200,
+        data: {
+          pages: "2",
+          current: "1",
+          records: [
+            {
+              type: "月结",
+              phoneNumber: "173xxxx3652",
+              price: "10658",
+            },
+            {
+              type: "日结",
+              phoneNumber: "173xxxx3652",
+              price: "368",
+            },
+          ],
+          size: "5",
+          total: "10",
+        },
+        success: "成功",
+      });
+    });
+  };
+
+  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
+    companyName: {
+      type: "input",
+      label: "供应商名称",
+    },
+  });
+
+  const columns = ref<TableType["columns"]>([
+    {
+      key: "companyName",
+      title: "供应商名称",
+    },
+    {
+      key: "companyName",
+      title: "供货食材明细表",
+      render: (value) => {
+        return (
+          value.goodsDetails.isTrue && (
+            <NButton
+              onClick={() => {
+                showModal.value = true;
+                title.value = `${value.companyName}__供货食材明细表`;
+              }}
+              type="success"
+            >
+              查看详情
+            </NButton>
+          )
+        );
+      },
+    },
+    {
+      key: "companyName",
+      title: "结算汇总表",
+      render: (value) => {
+        return (
+          value.priceDetails.isTrue && (
+            <NButton
+              onClick={() => {
+                showModal____.value = true;
+                title____.value = `${value.companyName}__结算汇总表`;
+              }}
+              type="success"
+            >
+              查看详情
+            </NButton>
+          )
+        );
+      },
+    },
+    {
+      key: "",
+      title: "操作",
+      render: (value: modelDefaultValue) => {
+        return (
+          <div style={{ display: "flex" }}>
+            <n-button
+              style={{ marginLeft: "10px" }}
+              onClick={() => {}}
+            >
+              汇总
+            </n-button>
+          </div>
+        );
+      },
+    },
+  ]);
+  const columns__ = ref<TableType["columns"]>([
+    {
+      key: "commodity",
+      title: "商品名称",
+    },
+    {
+      key: "price",
+      title: "采购价格",
+      render: (value) => {
+        return <span>{`${value.price}/${value.units}`}</span>;
+      },
+    },
+
+    {
+      key: "brand",
+      title: "品牌",
+    },
+
+    {
+      key: "commodityType",
+      title: "商品类型",
+    },
+    {
+      key: "total",
+      title: "供货数量",
+    },
+  ]);
+
+  const columns____ = ref<TableType["columns"]>([
+    {
+      key: "type",
+      title: "结算方式",
+    },
+    {
+      key: "phoneNumber",
+      title: "联系电话",
+    },
+
+    {
+      key: "price",
+      title: "总价格",
+      render: (value) => {
+        return <span>{`${value.price}/元`}</span>;
+      },
+    },
+  ]);
+</script>