From f7171e1564c08b96e6dd1c30fe4a8e12a90df923 Mon Sep 17 00:00:00 2001
From: ycy <2861518472@qq.com>
Date: Thu, 11 Apr 2024 16:38:38 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=84=20refactor:=20=E6=9B=B4=E6=94=B9?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E6=A1=86=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scarchBox.vue                  |  44 ++++++
 .../finance-bill-manage/billBreakage.vue      | 131 +++++++++++-------
 src/pages/finance-bill-manage/billCancel.vue  | 114 ++++++++-------
 src/pages/finance-bill-manage/billDestroy.vue |  77 +++++-----
 src/pages/finance-bill-manage/billDraw.vue    |  75 +++++-----
 .../finance-bill-manage/billQuitneck.vue      |  82 ++++++-----
 src/pages/finance-bill-manage/billReceipt.vue |  84 ++++++-----
 src/pages/finance-bill-manage/billStock.vue   |  78 ++++++-----
 .../finance-bill-manage/detailReport.vue      |  53 +++----
 src/pages/home/components/homeFooter.vue      |  25 +++-
 src/style/index.css                           |   3 +
 src/style/index.less                          |   5 +
 12 files changed, 466 insertions(+), 305 deletions(-)
 create mode 100644 src/components/scarchBox.vue

diff --git a/src/components/scarchBox.vue b/src/components/scarchBox.vue
new file mode 100644
index 0000000..96f54c4
--- /dev/null
+++ b/src/components/scarchBox.vue
@@ -0,0 +1,44 @@
+<template>
+  <t-row style="width: 100%">
+    <t-col :span="colNum">
+      <t-row :gutter="[24, 24]" style="margin-left: 0.3rem">
+        <slot name="scarchName"> </slot>
+      </t-row>
+    </t-col>
+    <t-col :span="btnNum" class="operation-container">
+      <t-form-item style="margin-right: 1rem">
+        <slot name="scarchBtn"> </slot>
+      </t-form-item>
+    </t-col>
+  </t-row>
+</template>
+
+<script setup>
+import { number } from "echarts";
+
+const { colNum, btnNum } = defineProps({
+  colNum: {
+    type: number,
+    default: 10,
+  },
+  btnNum: {
+    type: number,
+    default: 2,
+  },
+});
+</script>
+
+<style scoped lang="less">
+.operation-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  .expand {
+    .t-button__text {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+</style>
diff --git a/src/pages/finance-bill-manage/billBreakage.vue b/src/pages/finance-bill-manage/billBreakage.vue
index 8fa54cb..9600e1e 100644
--- a/src/pages/finance-bill-manage/billBreakage.vue
+++ b/src/pages/finance-bill-manage/billBreakage.vue
@@ -12,55 +12,70 @@
           @reset="resetting"
           @submit="headerQuery"
         >
-          <div style="margin-left: 1rem">
-            <t-form-item label="票据编号:" name="billserial">
-              <t-input v-model="formData.billserial" maxlength="10"></t-input>
-            </t-form-item>
-
-            <t-form-item label="报损日期:" name="breakDate">
-              <t-date-picker v-model="formData.breakDate" clearable />
-            </t-form-item>
-            <t-form-item
-              label="票据类型:"
-              name="billType"
-              style="margin-bottom: 0.3rem"
-            >
-              <t-select
-                v-model="formData.billType"
-                placeholder="请选择票据类型"
-                clearable
-              >
-                <t-option
-                  v-for="item in billType"
-                  :key="item.value"
-                  :value="item.value"
-                  :label="item.label"
-                ></t-option>
-              </t-select>
-            </t-form-item>
-            <t-form-item
-              label="报损状态:"
-              name="breakStatus"
-              style="margin-bottom: 0.3rem"
-            >
-              <t-select
-                v-model="formData.breakStatus"
-                placeholder="请选择报损状态"
-                clearable
-              >
-                <t-option
-                  v-for="item in breakStatus"
-                  :key="item.value"
-                  :value="item.value"
-                  :label="item.label"
-                ></t-option>
-              </t-select>
-            </t-form-item>
-          </div>
-          <t-form-item style="margin-right: 1rem">
-            <t-button theme="primary" type="submit">查询</t-button>
-            <t-button theme="default" type="reset">重置</t-button>
-          </t-form-item>
+          <scarch-box :btnNum="4" :colNum="8">
+            <template #scarchName>
+              <t-col :span="3">
+                <t-form-item label="票据编号:" name="billserial">
+                  <t-input
+                    class="form-item-content"
+                    v-model="formData.billserial"
+                    maxlength="10"
+                  ></t-input>
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="报损日期:" name="breakDate">
+                  <t-date-picker
+                    class="form-item-content"
+                    v-model="formData.breakDate"
+                    clearable
+                  />
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="票据类型:" name="billType">
+                  <t-select
+                    class="form-item-content"
+                    v-model="formData.billType"
+                    placeholder="请选择票据类型"
+                    clearable
+                  >
+                    <t-option
+                      v-for="item in billType"
+                      :key="item.value"
+                      :value="item.value"
+                      :label="item.label"
+                    ></t-option>
+                  </t-select>
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item
+                  label="报损状态:"
+                  name="breakStatus"
+                  style="margin-bottom: 0.3rem"
+                >
+                  <t-select
+                    class="form-item-content"
+                    v-model="formData.breakStatus"
+                    placeholder="请选择报损状态"
+                    clearable
+                  >
+                    <t-option
+                      v-for="item in approvalStatus"
+                      :key="item.value"
+                      :value="item.value"
+                      :label="item.label"
+                    ></t-option>
+                  </t-select>
+                </t-form-item>
+              </t-col>
+            </template>
+            <template #scarchBtn>
+              <t-button theme="primary" type="submit">查询</t-button>
+              <t-button theme="default" type="reset">重置</t-button>
+            </template>
+          </scarch-box>
         </t-form>
       </t-header>
       <t-content class="table-box">
@@ -83,6 +98,7 @@
             </t-button>
           </div>
         </div>
+
         <t-base-table
           hover
           row-key="index"
@@ -96,11 +112,11 @@
           <template #breakNum="{ row }">
             {{ `${row.breakNum}张` }}
           </template>
-          <template #billType="{ row }">
+          <!-- <template #billType="{ row }">
             <div v-for="item in billType" :key="item">
               <span v-if="row.billType === item.value">{{ item.label }}</span>
             </div>
-          </template>
+          </template> -->
           <template #breakStatus="{ row }">
             <div v-for="item in breakStatus" :key="item">
               <t-tag
@@ -260,6 +276,7 @@
 </template>
 
 <script setup>
+import scarchBox from "@/components/scarchBox.vue";
 import { ref, onMounted } from "vue";
 import { MessagePlugin } from "tdesign-vue-next";
 import { AddIcon, LoadIcon } from "tdesign-icons-vue-next";
@@ -290,12 +307,19 @@ const columns = ref([
     title: "票据类型",
     align: "center",
     width: "100",
+    cell: (h, { row }) => {
+      const type = billType.value.find((type) => type.value === row.billType);
+      return type ? type.label : "未知";
+    },
   },
   {
     colKey: "breakNum",
     title: "报损数量",
     align: "center",
     width: "100",
+    cell: (h, { row }) => {
+      return row.breakNum + "张１２３";
+    },
   },
   {
     colKey: "breakDate",
@@ -350,8 +374,9 @@ const breakStatus = ref([
 // 获取票据列表
 const tableList = async () => {
   loading.value = true;
-  tableData.value = await breakageList.getBreakageList();
-  data.value = await breakageList.getBreakageList();
+  data.value = tableData.value = await breakageList.getBreakageList();
+
+  // data.value = await breakageList.getBreakageList();
   pagination.value.total = tableData.value.length;
   const timerId = setTimeout(() => {
     loading.value = false;
diff --git a/src/pages/finance-bill-manage/billCancel.vue b/src/pages/finance-bill-manage/billCancel.vue
index 48c6284..cd4fea9 100644
--- a/src/pages/finance-bill-manage/billCancel.vue
+++ b/src/pages/finance-bill-manage/billCancel.vue
@@ -12,55 +12,70 @@
           @reset="resetting"
           @submit="headerQuery"
         >
-          <div style="margin-left: 1rem">
-            <t-form-item label="票据编号:" name="billserial">
-              <t-input v-model="scarchData.billserial" maxlength="10"></t-input>
-            </t-form-item>
-
-            <t-form-item label="退库日期:" name="appleDate">
-              <t-date-picker v-model="scarchData.appleDate" clearable />
-            </t-form-item>
-            <t-form-item
-              label="票据类型:"
-              name="billType"
-              style="margin-bottom: 0.3rem"
-            >
-              <t-select
-                v-model="scarchData.billType"
-                placeholder="请选择票据类型"
-                clearable
-              >
-                <t-option
-                  v-for="item in billType"
-                  :key="item.value"
-                  :value="item.value"
-                  :label="item.label"
-                ></t-option>
-              </t-select>
-            </t-form-item>
-            <t-form-item
-              label="审批状态:"
-              name="approvalStatus"
-              style="margin-bottom: 0.3rem"
-            >
-              <t-select
-                v-model="scarchData.approvalStatus"
-                placeholder="请选择审批状态"
-                clearable
-              >
-                <t-option
-                  v-for="item in approvalStatus"
-                  :key="item.value"
-                  :value="item.value"
-                  :label="item.label"
-                ></t-option>
-              </t-select>
-            </t-form-item>
-          </div>
-          <t-form-item style="margin-right: 1rem">
-            <t-button theme="primary" type="submit">查询</t-button>
-            <t-button theme="default" type="reset">重置</t-button>
-          </t-form-item>
+          <scarch-box :btnNum="4" :colNum="8">
+            <template #scarchName>
+              <t-col :span="3">
+                <t-form-item label="票据编号:" name="billserial">
+                  <t-input
+                    class="form-item-content"
+                    v-model="scarchData.billserial"
+                    maxlength="10"
+                  ></t-input>
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="退库日期:" name="appleDate">
+                  <t-date-picker
+                    class="form-item-content"
+                    v-model="scarchData.appleDate"
+                    clearable
+                  />
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="票据类型:" name="billType">
+                  <t-select
+                    class="form-item-content"
+                    v-model="scarchData.billType"
+                    placeholder="请选择票据类型"
+                    clearable
+                  >
+                    <t-option
+                      v-for="item in billType"
+                      :key="item.value"
+                      :value="item.value"
+                      :label="item.label"
+                    ></t-option>
+                  </t-select>
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item
+                  label="审批状态:"
+                  name="approvalStatus"
+                  style="margin-bottom: 0.3rem"
+                >
+                  <t-select
+                    class="form-item-content"
+                    v-model="scarchData.approvalStatus"
+                    placeholder="请选择审批状态"
+                    clearable
+                  >
+                    <t-option
+                      v-for="item in approvalStatus"
+                      :key="item.value"
+                      :value="item.value"
+                      :label="item.label"
+                    ></t-option>
+                  </t-select>
+                </t-form-item>
+              </t-col>
+            </template>
+            <template #scarchBtn>
+              <t-button theme="primary" type="submit">查询</t-button>
+              <t-button theme="default" type="reset">重置</t-button>
+            </template>
+          </scarch-box>
         </t-form>
       </t-header>
       <t-content class="table-box">
@@ -193,6 +208,7 @@
 </template>
 
 <script setup>
+import scarchBox from "@/components/scarchBox.vue";
 import { ref, onMounted } from "vue";
 import { MessagePlugin } from "tdesign-vue-next";
 import { LoadIcon } from "tdesign-icons-vue-next";
diff --git a/src/pages/finance-bill-manage/billDestroy.vue b/src/pages/finance-bill-manage/billDestroy.vue
index 097beb9..280cd4d 100644
--- a/src/pages/finance-bill-manage/billDestroy.vue
+++ b/src/pages/finance-bill-manage/billDestroy.vue
@@ -8,41 +8,53 @@
           label-width="calc(2em + 40px)"
           layout="inline"
           scroll-to-first-error="smooth"
-          class="scarch-from"
+          class="scarch-from form-responsive"
           @reset="resetting"
           @submit="headerQuery"
         >
-          <div style="margin-left: 1rem">
-            <t-form-item label="票据编号:" name="billserial">
-              <t-input v-model="formData.billserial" maxlength="10"></t-input>
-            </t-form-item>
-
-            <t-form-item label="报损日期:" name="breakDate">
-              <t-date-picker v-model="formData.breakDate" clearable />
-            </t-form-item>
-            <t-form-item
-              label="票据类型:"
-              name="billType"
-              style="margin-bottom: 0.3rem"
-            >
-              <t-select
-                v-model="formData.billType"
-                placeholder="请选择票据类型"
-                clearable
-              >
-                <t-option
-                  v-for="item in billType"
-                  :key="item.value"
-                  :value="item.value"
-                  :label="item.label"
-                ></t-option>
-              </t-select>
-            </t-form-item>
-          </div>
-          <t-form-item style="margin-right: 1rem">
-            <t-button theme="primary" type="submit">查询</t-button>
-            <t-button theme="default" type="reset">重置</t-button>
-          </t-form-item>
+          <scarch-box :btnNum="4" :colNum="8">
+            <template #scarchName>
+              <t-col :span="3">
+                <t-form-item label="票据编号:" name="billserial">
+                  <t-input
+                    v-model="formData.billserial"
+                    class="form-item-content"
+                    maxlength="10"
+                  ></t-input>
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="报损日期:" name="breakDate">
+                  <t-date-picker
+                    v-model="formData.breakDate"
+                    class="form-item-content"
+                    clearable
+                  />
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="票据类型:" name="billType">
+                  <t-select
+                    v-model="formData.billType"
+                    placeholder="请选择票据类型"
+                    class="form-item-content"
+                    clearable
+                  >
+                    <t-option
+                      v-for="item in billType"
+                      :key="item.value"
+                      :value="item.value"
+                      :label="item.label"
+                    ></t-option>
+                  </t-select>
+                </t-form-item>
+              </t-col>
+            </template>
+            <template #scarchBtn>
+              <t-button theme="primary" type="submit">查询</t-button>
+              <t-button theme="default" type="reset">重置</t-button>
+            </template>
+          </scarch-box>
         </t-form>
       </t-header>
       <t-content class="table-box">
@@ -155,6 +167,7 @@
 </template>
 
 <script setup>
+import scarchBox from "@/components/scarchBox.vue";
 import { ref, onMounted } from "vue";
 import { MessagePlugin } from "tdesign-vue-next";
 import { AddIcon, LoadIcon } from "tdesign-icons-vue-next";
diff --git a/src/pages/finance-bill-manage/billDraw.vue b/src/pages/finance-bill-manage/billDraw.vue
index 0c4da3e..54f9bea 100644
--- a/src/pages/finance-bill-manage/billDraw.vue
+++ b/src/pages/finance-bill-manage/billDraw.vue
@@ -12,37 +12,49 @@
           @reset="resetting"
           @submit="headerQuery"
         >
-          <div style="margin-left: 1rem">
-            <t-form-item label="票据编号:" name="billserial">
-              <t-input v-model="formData.billserial" maxlength="10"></t-input>
-            </t-form-item>
-
-            <t-form-item label="入库日期:" name="stockDate">
-              <t-date-picker v-model="formData.stockDate" clearable />
-            </t-form-item>
-            <t-form-item
-              label="票据类型:"
-              name="billType"
-              style="margin-bottom: 0.3rem"
-            >
-              <t-select
-                v-model="formData.billType"
-                placeholder="请选择票据类型"
-                clearable
-              >
-                <t-option
-                  v-for="item in billType"
-                  :key="item.value"
-                  :value="item.value"
-                  :label="item.label"
-                ></t-option>
-              </t-select>
-            </t-form-item>
-          </div>
-          <t-form-item style="margin-right: 1rem">
-            <t-button theme="primary" type="submit">查询</t-button>
-            <t-button theme="primary" type="reset">重置</t-button>
-          </t-form-item>
+          <scarch-box :btnNum="4" :colNum="8">
+            <template #scarchName>
+              <t-col :span="3">
+                <t-form-item label="票据编号:" name="billserial">
+                  <t-input
+                    v-model="formData.billserial"
+                    class="form-item-content"
+                    maxlength="10"
+                  ></t-input>
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="入库日期:" name="stockDate">
+                  <t-date-picker
+                    v-model="formData.stockDate"
+                    class="form-item-content"
+                    clearable
+                  />
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="票据类型:" name="billType">
+                  <t-select
+                    v-model="formData.billType"
+                    placeholder="请选择票据类型"
+                    class="form-item-content"
+                    clearable
+                  >
+                    <t-option
+                      v-for="item in billType"
+                      :key="item.value"
+                      :value="item.value"
+                      :label="item.label"
+                    ></t-option>
+                  </t-select>
+                </t-form-item>
+              </t-col>
+            </template>
+            <template #scarchBtn>
+              <t-button theme="primary" type="submit">查询</t-button>
+              <t-button theme="default" type="reset">重置</t-button>
+            </template>
+          </scarch-box>
         </t-form>
       </t-header>
       <t-content class="table-box">
@@ -95,6 +107,7 @@
 </template>
 
 <script setup>
+import scarchBox from "@/components/scarchBox.vue";
 import { ref, onMounted } from "vue";
 import { MessagePlugin } from "tdesign-vue-next";
 import { LoadIcon } from "tdesign-icons-vue-next";
diff --git a/src/pages/finance-bill-manage/billQuitneck.vue b/src/pages/finance-bill-manage/billQuitneck.vue
index c37b493..eec02fb 100644
--- a/src/pages/finance-bill-manage/billQuitneck.vue
+++ b/src/pages/finance-bill-manage/billQuitneck.vue
@@ -31,40 +31,53 @@
               @reset="resetting"
               @submit="headerQuery"
             >
-              <div style="margin-left: 1rem; margin-top: 1px">
-                <t-form-item label="票据编号:" name="billserial">
-                  <t-input
-                    v-model="scarchData.billserial"
-                    maxlength="10"
-                  ></t-input>
-                </t-form-item>
-
-                <t-form-item label="退领时间:" name="quitneckDate">
-                  <t-date-picker v-model="scarchData.quitneckDate" clearable />
-                </t-form-item>
-                <t-form-item
-                  label="票据类型:"
-                  name="billType"
-                  style="margin-bottom: 0.3rem"
-                >
-                  <t-select
-                    v-model="scarchData.billType"
-                    placeholder="请选择票据类型"
-                    clearable
-                  >
-                    <t-option
-                      v-for="item in billType"
-                      :key="item.value"
-                      :value="item.value"
-                      :label="item.label"
-                    ></t-option>
-                  </t-select>
-                </t-form-item>
-              </div>
-              <t-form-item style="margin-right: 1rem">
-                <t-button theme="primary" type="submit">查询</t-button>
-                <t-button theme="default" type="reset">重置</t-button>
-              </t-form-item>
+              <scarch-box :btnNum="2" :colNum="10">
+                <template #scarchName>
+                  <t-col :span="3">
+                    <t-form-item label="票据编号:" name="billserial">
+                      <t-input
+                        class="form-item-content"
+                        v-model="scarchData.billserial"
+                        maxlength="10"
+                      ></t-input>
+                    </t-form-item>
+                  </t-col>
+                  <t-col :span="3">
+                    <t-form-item label="领用时间:" name="quitneckDate">
+                      <t-date-picker
+                        class="form-item-content"
+                        v-model="scarchData.quitneckDate"
+                        clearable
+                      />
+                    </t-form-item>
+                  </t-col>
+                  <t-col :span="3">
+                    <t-form-item
+                      label="票据类型:"
+                      name="billType"
+                      style="margin-bottom: 0.3rem"
+                    >
+                      <t-select
+                        class="form-item-content"
+                        v-model="scarchData.billType"
+                        placeholder="请选择票据类型"
+                        clearable
+                      >
+                        <t-option
+                          v-for="item in billType"
+                          :key="item.value"
+                          :value="item.value"
+                          :label="item.label"
+                        ></t-option>
+                      </t-select>
+                    </t-form-item>
+                  </t-col>
+                </template>
+                <template #scarchBtn>
+                  <t-button theme="primary" type="submit">查询</t-button>
+                  <t-button theme="default" type="reset">重置</t-button>
+                </template>
+              </scarch-box>
             </t-form>
           </t-header>
           <t-content class="table-box">
@@ -115,6 +128,7 @@
 </template>
 
 <script setup>
+import scarchBox from "@/components/scarchBox.vue";
 import { ref, onMounted, nextTick } from "vue";
 import { MessagePlugin } from "tdesign-vue-next";
 import { LoadIcon } from "tdesign-icons-vue-next";
diff --git a/src/pages/finance-bill-manage/billReceipt.vue b/src/pages/finance-bill-manage/billReceipt.vue
index 02ccf3c..45c1cfa 100644
--- a/src/pages/finance-bill-manage/billReceipt.vue
+++ b/src/pages/finance-bill-manage/billReceipt.vue
@@ -28,40 +28,53 @@
               @reset="resetting"
               @submit="headerQuery"
             >
-              <div style="margin-left: 1rem; margin-top: 1px">
-                <t-form-item label="票据编号:" name="billserial">
-                  <t-input
-                    v-model="scarchData.billserial"
-                    maxlength="10"
-                  ></t-input>
-                </t-form-item>
-
-                <t-form-item label="领用时间:" name="receiptDate">
-                  <t-date-picker v-model="scarchData.receiptDate" clearable />
-                </t-form-item>
-                <t-form-item
-                  label="票据类型:"
-                  name="billType"
-                  style="margin-bottom: 0.3rem"
-                >
-                  <t-select
-                    v-model="scarchData.billType"
-                    placeholder="请选择票据类型"
-                    clearable
-                  >
-                    <t-option
-                      v-for="item in billType"
-                      :key="item.value"
-                      :value="item.value"
-                      :label="item.label"
-                    ></t-option>
-                  </t-select>
-                </t-form-item>
-              </div>
-              <t-form-item style="margin-right: 1rem">
-                <t-button theme="primary" type="submit">查询</t-button>
-                <t-button theme="default" type="reset">重置</t-button>
-              </t-form-item>
+              <scarch-box :btnNum="2" :colNum="10">
+                <template #scarchName>
+                  <t-col :span="3">
+                    <t-form-item label="票据编号:" name="billserial">
+                      <t-input
+                        class="form-item-content"
+                        v-model="scarchData.billserial"
+                        maxlength="10"
+                      ></t-input>
+                    </t-form-item>
+                  </t-col>
+                  <t-col :span="3">
+                    <t-form-item label="领用时间:" name="receiptDate">
+                      <t-date-picker
+                        class="form-item-content"
+                        v-model="scarchData.receiptDate"
+                        clearable
+                      />
+                    </t-form-item>
+                  </t-col>
+                  <t-col :span="3">
+                    <t-form-item
+                      label="票据类型:"
+                      name="billType"
+                      style="margin-bottom: 0.3rem"
+                    >
+                      <t-select
+                        class="form-item-content"
+                        v-model="scarchData.billType"
+                        placeholder="请选择票据类型"
+                        clearable
+                      >
+                        <t-option
+                          v-for="item in billType"
+                          :key="item.value"
+                          :value="item.value"
+                          :label="item.label"
+                        ></t-option>
+                      </t-select>
+                    </t-form-item>
+                  </t-col>
+                </template>
+                <template #scarchBtn>
+                  <t-button theme="primary" type="submit">查询</t-button>
+                  <t-button theme="default" type="reset">重置</t-button>
+                </template>
+              </scarch-box>
             </t-form>
           </t-header>
           <t-content class="table-box">
@@ -185,6 +198,7 @@
 </template>
 
 <script setup>
+import scarchBox from "@/components/scarchBox.vue";
 import { ref, onMounted, nextTick } from "vue";
 import { MessagePlugin } from "tdesign-vue-next";
 import { LoadIcon } from "tdesign-icons-vue-next";
@@ -447,9 +461,9 @@ onMounted(async () => {
   background-color: @base-white-color;
   margin-bottom: 2rem;
   .scarch-from {
+    width: 100%;
     height: 60px;
     display: flex;
-    justify-content: space-between;
     align-items: center;
   }
 }
diff --git a/src/pages/finance-bill-manage/billStock.vue b/src/pages/finance-bill-manage/billStock.vue
index 3c8fe02..dbe48d9 100644
--- a/src/pages/finance-bill-manage/billStock.vue
+++ b/src/pages/finance-bill-manage/billStock.vue
@@ -12,37 +12,49 @@
           @reset="resetting"
           @submit="headerQuery"
         >
-          <div style="margin-left: 1rem">
-            <t-form-item label="票据编号:" name="billserial">
-              <t-input v-model="formData.billserial" maxlength="10"></t-input>
-            </t-form-item>
-
-            <t-form-item label="入库日期:" name="stockDate">
-              <t-date-picker v-model="formData.stockDate" clearable />
-            </t-form-item>
-            <t-form-item
-              label="票据类型:"
-              name="billType"
-              style="margin-bottom: 0.3rem"
-            >
-              <t-select
-                v-model="formData.billType"
-                placeholder="请选择票据类型"
-                clearable
-              >
-                <t-option
-                  v-for="item in billType"
-                  :key="item.value"
-                  :value="item.value"
-                  :label="item.label"
-                ></t-option>
-              </t-select>
-            </t-form-item>
-          </div>
-          <t-form-item style="margin-right: 1rem">
-            <t-button theme="primary" type="submit">查询</t-button>
-            <t-button theme="default" type="reset">重置</t-button>
-          </t-form-item>
+          <scarch-box :btnNum="4" :colNum="8">
+            <template #scarchName>
+              <t-col :span="3">
+                <t-form-item label="票据编号:" name="billserial">
+                  <t-input
+                    v-model="formData.billserial"
+                    class="form-item-content"
+                    maxlength="10"
+                  ></t-input>
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="入库日期:" name="stockDate">
+                  <t-date-picker
+                    v-model="formData.stockDate"
+                    class="form-item-content"
+                    clearable
+                  />
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="票据类型:" name="billType">
+                  <t-select
+                    v-model="formData.billType"
+                    placeholder="请选择票据类型"
+                    class="form-item-content"
+                    clearable
+                  >
+                    <t-option
+                      v-for="item in billType"
+                      :key="item.value"
+                      :value="item.value"
+                      :label="item.label"
+                    ></t-option>
+                  </t-select>
+                </t-form-item>
+              </t-col>
+            </template>
+            <template #scarchBtn>
+              <t-button theme="primary" type="submit">查询</t-button>
+              <t-button theme="default" type="reset">重置</t-button>
+            </template>
+          </scarch-box>
         </t-form>
       </t-header>
       <t-content class="table-box">
@@ -217,6 +229,7 @@
 </template>
 
 <script setup>
+import scarchBox from "@/components/scarchBox.vue";
 import { ref, onMounted } from "vue";
 import { MessagePlugin } from "tdesign-vue-next";
 import { AddIcon, LoadIcon } from "tdesign-icons-vue-next";
@@ -456,9 +469,9 @@ onMounted(() => {
   background-color: @base-white-color;
   margin-bottom: 2rem;
   .scarch-from {
+    width: 100%;
     height: 60px;
     display: flex;
-    justify-content: space-between;
     align-items: center;
   }
 }
@@ -474,6 +487,7 @@ onMounted(() => {
     align-items: center;
   }
 }
+
 :deep(.t-form__controls-content) {
   justify-content: space-between;
 }
diff --git a/src/pages/finance-bill-manage/detailReport.vue b/src/pages/finance-bill-manage/detailReport.vue
index adbfc13..c02ac3b 100644
--- a/src/pages/finance-bill-manage/detailReport.vue
+++ b/src/pages/finance-bill-manage/detailReport.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="back-color" style="overflow-y: hidden">
-    <t-layout style="height: 100%; background-color: #f5f7fb">
+  <div class="back-color">
+    <t-layout style="height: 90%; background-color: #f5f7fb">
       <t-header class="scarch-box">
         <t-form
           ref="form"
@@ -12,15 +12,22 @@
           @reset="resetting"
           @submit="headerQuery"
         >
-          <div style="margin-left: 1rem">
-            <t-form-item label="部门:" name="branch">
-              <t-input v-model="scarchData.branch"></t-input>
-            </t-form-item>
-          </div>
-          <t-form-item style="margin-right: 1rem">
-            <t-button theme="primary" type="submit">查询</t-button>
-            <t-button theme="default" type="reset">重置</t-button>
-          </t-form-item>
+          <scarch-box :btnNum="4" :colNum="8">
+            <template #scarchName>
+              <t-col :span="3" style="padding-left: 0">
+                <t-form-item label="部门:" name="branch">
+                  <t-input
+                    v-model="scarchData.branch"
+                    class="form-item-content"
+                  ></t-input>
+                </t-form-item>
+              </t-col>
+            </template>
+            <template #scarchBtn>
+              <t-button theme="primary" type="submit">查询</t-button>
+              <t-button theme="default" type="reset">重置</t-button>
+            </template>
+          </scarch-box>
         </t-form>
       </t-header>
       <t-content class="table-box">
@@ -62,6 +69,7 @@
 </template>
 
 <script setup>
+import scarchBox from "@/components/scarchBox.vue";
 import { ref, onMounted } from "vue";
 import { MessagePlugin } from "tdesign-vue-next";
 import { LoadIcon } from "tdesign-icons-vue-next";
@@ -209,20 +217,14 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
-.asideTree {
-  margin-right: 2rem;
-  display: flex;
-  justify-content: center;
-  padding: 1rem;
-}
 .scarch-box {
   width: 100%;
   background-color: @base-white-color;
   margin-bottom: 2rem;
   .scarch-from {
+    width: 100%;
     height: 60px;
     display: flex;
-    justify-content: space-between;
     align-items: center;
   }
 }
@@ -238,21 +240,6 @@ onMounted(() => {
     align-items: center;
   }
 }
-.layoutPage {
-  height: 100%;
-  background-color: #fff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  span {
-    font-size: 20px;
-    font-weight: 800;
-    color: #191919;
-  }
-}
-:deep(.t-tree--transition .t-tree__label) {
-  width: 10rem;
-}
 :deep(.t-form__controls-content) {
   justify-content: space-between;
 }
diff --git a/src/pages/home/components/homeFooter.vue b/src/pages/home/components/homeFooter.vue
index 7c05996..2ade831 100644
--- a/src/pages/home/components/homeFooter.vue
+++ b/src/pages/home/components/homeFooter.vue
@@ -16,17 +16,30 @@ import lineChart from "@/components/echarts/line.vue";
 import { ref } from "vue";
 
 const title = ref("折线图");
-const categories = ref(["Jan", "Feb", "Mar", "Apr", "May", "Jun"]);
-const legendList = ref(["series1", "series2"]);
+const categories = ref([
+  "一月",
+  "二月",
+  "三月",
+  "四月",
+  "五月",
+  "六月",
+  "七月",
+  "八月",
+  "九月",
+  "十月",
+  "十一月",
+  "十二月",
+]);
+const legendList = ref(["服务一", "服务二"]);
 const seriesData = ref([
   {
-    name: "series1",
-    data: [10, 20, 15, 20, 25, 30],
+    name: "服务一",
+    data: [10, 20, 15, 20, 25, 30, 15, 22, 18, 28, 25, 32],
     type: "line",
   }, // 第一个系列的数据
   {
-    name: "series2",
-    data: [15, 22, 18, 28, 25, 32],
+    name: "服务二",
+    data: [15, 22, 18, 28, 25, 32, 10, 20, 15, 20, 25, 30],
     type: "line",
   }, // 第二个系列的数据
 ]);
diff --git a/src/style/index.css b/src/style/index.css
index bf37869..5137eee 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -206,3 +206,6 @@ a:active {
 .t-is-disabled .t-button__text {
   color: #d3d3d3 !important;
 }
+.form-item-width {
+  width: 100%;
+}
diff --git a/src/style/index.less b/src/style/index.less
index 421f460..0879991 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -52,4 +52,9 @@ a:active {
 // 禁用的颜色
  .t-is-disabled .t-button__text{
     color: #d3d3d3 !important;
+}
+
+// 查询框宽度
+.form-item-width {
+    width: 100%;
 }
\ No newline at end of file