From f1ec837080ea954d6390f72ccf460269a03a7c06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=90=8C=E6=B5=B7?=
 <14166000+zhangtonghai@user.noreply.gitee.com>
Date: Mon, 30 Sep 2024 16:03:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=88=B7=E5=AF=B9=E8=B4=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/detailColumns.tsx                  | 146 +++++-
 .../CustomerReconciliation/detail/index.vue   | 445 ++++++++++++------
 .../detail/info/index.vue                     |   6 +-
 .../CustomerReconciliation/index.vue          | 128 +++--
 4 files changed, 541 insertions(+), 184 deletions(-)

diff --git a/src/views/operation/CustomerReconciliation/detail/detailColumns.tsx b/src/views/operation/CustomerReconciliation/detail/detailColumns.tsx
index c74157f3..da2083f0 100644
--- a/src/views/operation/CustomerReconciliation/detail/detailColumns.tsx
+++ b/src/views/operation/CustomerReconciliation/detail/detailColumns.tsx
@@ -19,8 +19,24 @@ export const schemas: FormSchema[] = [
     component: 'Input',
     label: '对账编号',
     dynamicDisabled: true,
+    show: false,
     colProps: { span: 4 },
   },
+  {
+    field: 'isLocking',
+    component: 'Select',
+    label: '业务锁定',
+    colProps: { span: 4 },
+    dynamicDisabled: true,
+    defaultValue: false,
+    show: false,
+    componentProps: {
+      options: [
+        { label: '否', value: false },
+        { label: '是', value: true },
+      ],
+    },
+  },
   { field: 'billName', component: 'Input', label: '对账单名称', colProps: { span: 4 } },
   {
     field: 'billType',
@@ -74,6 +90,42 @@ export const schemas: FormSchema[] = [
   //   defaultValue: false,
   //   colProps: { span: 2 },
   // },
+
+  {
+    field: 'isNoTax',
+    component: 'Switch',
+    label: '是否不含税',
+    defaultValue: false,
+    colProps: { span: 2 },
+  },
+  // isLocking
+  // { field: 'billName', component: 'Input', label: '对账单名称', colProps: { span: 4 } },
+  // { field: 'field2', component: 'Input', label: '账单说明', colProps: { span: 4 } },
+  // { field: 'field3', component: 'Input', label: '对账日期', colProps: { span: 4 } },
+  // { field: 'field4', component: 'Input', label: '状态', colProps: { span: 4 } },
+  // { field: 'field5', component: 'Input', label: '是否含税', colProps: { span: 4 } },
+  // { field: 'field6', component: 'Input', label: '打印模板', colProps: { span: 4 } },
+  // { field: 'field7', component: 'Input', label: '账单类别', colProps: { span: 4 } },
+  // { field: 'field8', component: 'Input', label: '费用范围', colProps: { span: 4 } },
+  // { field: 'field9', component: 'Input', label: '备注', colProps: { span: 12 } },
+]
+// 表单
+export const Editschemas: FormSchema[] = [
+  {
+    field: 'id',
+    component: 'Input',
+    label: '主键Id',
+    show: false,
+    colProps: { span: 4 },
+  },
+  {
+    field: 'billNo',
+    component: 'Input',
+    label: '对账编号',
+    dynamicDisabled: true,
+    show: false,
+    colProps: { span: 4 },
+  },
   {
     field: 'isLocking',
     component: 'Select',
@@ -81,6 +133,7 @@ export const schemas: FormSchema[] = [
     colProps: { span: 4 },
     dynamicDisabled: true,
     defaultValue: false,
+    show: false,
     componentProps: {
       options: [
         { label: '否', value: false },
@@ -88,24 +141,95 @@ export const schemas: FormSchema[] = [
       ],
     },
   },
+  {
+    field: 'billName',
+    component: 'DEdit',
+    label: '对账单名称',
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'billType',
+    component: 'DEdit',
+    label: '收付类型',
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        options: billTypeData,
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'customerName',
+    component: 'DEdit',
+    label: '对账客户Name',
+    colProps: { span: 4 },
+    show: false,
+    componentProps: (e) => {
+      return {
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'customerId',
+    component: 'DEdit',
+    label: '对账客户',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        allowClear: true,
+        showSearch: true,
+        api: GetAllClientList,
+        labelField: 'shortName',
+        valueField: 'id',
+        resultField: 'data',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.customerName = obj.label
+          }
+        },
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
   {
     field: 'isNoTax',
-    component: 'Switch',
+    component: 'DEdit',
     label: '是否不含税',
     defaultValue: false,
     colProps: { span: 2 },
+    componentProps: (e) => {
+      return {
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
   },
-  // isLocking
-  // { field: 'billName', component: 'Input', label: '对账单名称', colProps: { span: 4 } },
-  // { field: 'field2', component: 'Input', label: '账单说明', colProps: { span: 4 } },
-  // { field: 'field3', component: 'Input', label: '对账日期', colProps: { span: 4 } },
-  // { field: 'field4', component: 'Input', label: '状态', colProps: { span: 4 } },
-  // { field: 'field5', component: 'Input', label: '是否含税', colProps: { span: 4 } },
-  // { field: 'field6', component: 'Input', label: '打印模板', colProps: { span: 4 } },
-  // { field: 'field7', component: 'Input', label: '账单类别', colProps: { span: 4 } },
-  // { field: 'field8', component: 'Input', label: '费用范围', colProps: { span: 4 } },
-  // { field: 'field9', component: 'Input', label: '备注', colProps: { span: 12 } },
 ]
+
 //左侧列表
 export const columnsL: BasicColumn[] = [
   // { title: '对账Id', dataIndex: 'checkId', align: 'left' },
diff --git a/src/views/operation/CustomerReconciliation/detail/index.vue b/src/views/operation/CustomerReconciliation/detail/index.vue
index d26e9733..f2ae74a7 100644
--- a/src/views/operation/CustomerReconciliation/detail/index.vue
+++ b/src/views/operation/CustomerReconciliation/detail/index.vue
@@ -1,147 +1,223 @@
 <template>
-  <div class="CsMain p-4" id="detail">
-    <div class="buttonBox">
-      <!-- <div  @click="Save"> <i class="iconfont icon-icon_baocun"></i>保存</div> -->
-      <!-- <div  @click="waitFor"> <i class="iconfont icon-printing"></i>标准打印</div> -->
-      <!-- <div  @click="waitFor"> <i class="iconfont icon-icon_baocun"></i>保存并关闭</div> -->
+  <div style="height: 100%">
+    <div class="infoclientBox">
+      <div class="buttonBox">
+        <a-tooltip placement="top" :mouseEnterDelay="0.5">
+          <template #title>
+            <span>新建</span>
+          </template>
+          <span class="ds-action-svg-btn" @click="GoDetailed">
+            <img src="../../../../assets/svg/infoclient/xinjian.svg" class="SvgImg" />
+          </span>
+        </a-tooltip>
+        <a-tooltip placement="top" :mouseEnterDelay="0.5">
+          <template #title>
+            <span>保存</span>
+          </template>
+          <span class="ds-action-svg-btn" @click="Save">
+            <img src="../../../../assets/svg/infoclient/baocun.svg" class="SvgImg" />
+          </span>
+        </a-tooltip>
+        <a-tooltip placement="top" :mouseEnterDelay="0.5">
+          <template #title>
+            <span>提交锁定</span>
+          </template>
+          <span @click="Lock" class="ds-action-svg-btn">
+            <img src="../../../../assets/icons/lock.svg" class="SvgImg" />
+          </span>
+        </a-tooltip>
+        <a-tooltip placement="top" :mouseEnterDelay="0.5">
+          <template #title>
+            <span>解除锁定</span>
+          </template>
+          <span @click="UnLock" class="ds-action-svg-btn">
+            <img src="../../../../assets/icons/openLock.svg" class="SvgImg" />
+          </span>
+        </a-tooltip>
+        <a-tooltip placement="top" :mouseEnterDelay="0.5">
+          <template #title>
+            <span>上一条</span>
+          </template>
+          <span class="ds-action-svg-btn" @click="ClickLast('next')">
+            <img src="../../../../assets/svg/infoclient/shangxia.svg" class="SvgImg rotate" />
+          </span>
+        </a-tooltip>
+        <a-tooltip placement="top" :mouseEnterDelay="0.5">
+          <template #title>
+            <span>下一条</span>
+          </template>
+          <span class="ds-action-svg-btn" @click="ClickLast('last')">
+            <img src="../../../../assets/svg/infoclient/shangxia.svg" class="SvgImg" />
+          </span>
+        </a-tooltip>
 
-      <!-- <div > <i class="iconfont icon-jiahao2fill"></i>费用提交审核</div> -->
-      <div class="left">
-        <a-button v-repeat type="link" @click="Lock">
-          <span class="iconfont icon-locksuo IconColor"></span>
-          锁定
-        </a-button>
-        <a-button v-repeat type="link" @click="UnLock">
-          <span class="iconfont icon-lock-openkaisuo IconColor"></span>
-          撤销锁定
-        </a-button>
+        <Divider type="vertical" />
+        <span class="CsisLocking" :class="RauditClass()">
+          <span class="iconfont icon-locksuo" v-if="isLocking">
+            <span class="text">锁定</span>
+          </span>
+          <span class="iconfont icon-a-jiesuo1_jiesuo" v-else>
+            <span class="text">未锁定</span>
+          </span>
+        </span>
+        <!-- <Divider type="vertical" />
+      <span class="gradeClass">
+        <span>客户等级：</span>
+        <a-select class="gradeSelect" :bordered="false" v-model:value="grade">
+          <a-select-option value="A">A</a-select-option>
+          <a-select-option value="B">B</a-select-option>
+          <a-select-option value="C">C</a-select-option>
+          <a-select-option value="D">D</a-select-option>
+        </a-select>
+      </span> -->
+        <!-- <Divider type="vertical" />
+      <span>
+        <a-select
+          class="CustomerOrSupplierSelect"
+          :class="CustomerOrSupplier"
+          :bordered="false"
+          v-model:value="CustomerOrSupplier"
+        >
+          <a-select-option value="isCustomer">
+            <span class="iconfont icon-yonghu1"></span>
+            客户
+          </a-select-option>
+          <a-select-option value="isSupplier">
+            <span class="iconfont icon-a-dianpushangchengxianxing"></span>
+            供应商
+          </a-select-option>
+          <a-select-option value="isCustomerAndisSupplier">
+            <span class="iconfont icon-quxiaopeidui"></span>
+            客户&供应商
+          </a-select-option>
+        </a-select>
+      </span> -->
       </div>
-      <a-button v-repeat type="link" @click="GoDetailed">
-        <span class="iconfont icon-new_document"></span>
-        新建
-      </a-button>
+      <div class="CsbillNo"> 对账编号：{{ billNo }} </div>
     </div>
-
-    <!-- <a-tabs v-model:activeKey="activeKey" type="card" class="CsTabs">
-      <a-tab-pane key="1" tab="账单明细"> -->
-    <ActionBar
-      :id="route.query.id"
-      temId="1777229219986804736"
-      name="khdz"
-      :save="Save"
-    ></ActionBar>
-    <a-row class="CsHeader" :gutter="5">
-      <a-col :span="24" class="headerForm">
-        <a-spin :spinning="spinningT">
-          <BasicForm @register="registerForm" />
-        </a-spin>
-      </a-col>
-    </a-row>
-    <!-- <a-row class="CsBottom" :gutter="5">
-      <a-col :span="24" class="bottomTableL"> -->
-    <div class="CsBottom">
-      <div class="bottomTableL">
-        <a-spin :spinning="spinningL">
-          <BasicTable
-            class="ds-table"
-            @register="registerTableL"
-            @selection-change="selectionChange"
-          >
-            <template #tableTitle>
-              <p class="tableTitle">账单明细</p>
-              <a-button v-repeat type="link" @click="addDetail">
-                <span class="iconfont icon-new_document"></span>
-                新增账单明细
-              </a-button>
-              <a-popconfirm
-                title="确定删除选中数据？"
-                ok-text="是"
-                cancel-text="否"
-                @confirm="DelDetailL"
-              >
-                <a-button v-repeat type="link">
-                  <span class="iconfont icon-shanchu21"></span>
-                  删除账单明细
+    <div class="CsMain p-4" id="detail">
+      <ActionBar
+        ref="RefActionBar"
+        v-show="false"
+        :id="route.query.id"
+        temId="1777229219986804736"
+        name="khdz"
+        :save="Save"
+        lasttext="下一条"
+        nexttext="上一条"
+      ></ActionBar>
+      <a-row class="CsHeader" :gutter="5">
+        <a-col :span="24" class="headerForm">
+          <a-spin :spinning="spinningT">
+            <BasicForm @register="registerForm" @linkageForm="linkageForm" class="ds-form-detail" />
+          </a-spin>
+        </a-col>
+      </a-row>
+      <a-row class="CsBottom">
+        <a-col :span="16" class="bottomTableL">
+          <a-spin :spinning="spinningL">
+            <BasicTable
+              class="ds-table"
+              @register="registerTableL"
+              @selection-change="selectionChange"
+            >
+              <template #tableTitle>
+                <p class="tableTitle">账单明细</p>
+                <a-button v-repeat type="link" @click="addDetail">
+                  <span class="iconfont icon-new_document"></span>
+                  添加
+                </a-button>
+                <a-popconfirm
+                  title="确定删除选中数据？"
+                  ok-text="是"
+                  cancel-text="否"
+                  @confirm="DelDetailL"
+                >
+                  <a-button v-repeat type="link">
+                    <span class="iconfont icon-shanchu21"></span>
+                    删除
+                  </a-button>
+                </a-popconfirm>
+                <a-button v-repeat type="link" @click="OpenFileModel">
+                  <span class="iconfont icon-fujian"></span>
+                  附件
                 </a-button>
-              </a-popconfirm>
-              <a-button v-repeat type="link" @click="OpenFileModel">
-                <span class="iconfont icon-fujian"></span>
-                附件管理
-              </a-button>
-            </template>
-          </BasicTable>
-          <div class="totalBox">
-            <span class="Ttitle">合计：</span>
-            <div class="unitBox">
-              <div v-for="item in calcColumns" :key="item.dataIndex" class="unit">
-                <span class="title">{{ item.title }}:</span>
-                <span class="num">{{ Ldata[item.dataIndex] }}</span>
+              </template>
+            </BasicTable>
+            <div class="totalBox">
+              <span class="Ttitle">合计：</span>
+              <div class="unitBox">
+                <div v-for="item in calcColumns" :key="item.dataIndex" class="unit">
+                  <span class="title">{{ item.title }}:</span>
+                  <span class="num">{{ Ldata[item.dataIndex] }}</span>
+                </div>
               </div>
             </div>
-          </div>
-        </a-spin>
-      </div>
-      <div class="bottomTableR">
-        <a-spin :spinning="spinningR">
-          <BasicTable class="ds-table" @register="registerTableR">
-            <template #tableTitle>
-              <p class="tableTitle">费用账单明细</p>
-              <a-popconfirm
-                title="是否要删除选中数据?"
-                ok-text="是"
-                cancel-text="否"
-                @confirm="DelDetailR"
-              >
-                <a-button v-repeat type="link">
-                  <span class="iconfont icon-shanchu21"></span>
-                  删除账单费用明细
-                </a-button>
-              </a-popconfirm>
-            </template>
-          </BasicTable>
-        </a-spin>
-      </div>
-    </div>
-    <BasicModal v-bind="$attrs" width="80%" @register="registerFileModel" title="附件管理">
-      <BasicTable class="ds-table" @register="registerTableFile">
-        <template #tableTitle>
-          <a-button v-repeat type="link" @click="Lock">
-            <span class="iconfont icon-shanchu2"></span>
-            删除
-          </a-button>
-          <a-button v-repeat type="link" @click="OpenFileModal">
-            <span class="iconfont icon-shiyongwendang"></span>
-            上传附件
-          </a-button>
-        </template>
-      </BasicTable>
-    </BasicModal>
-    <!-- </a-col>
+          </a-spin>
+        </a-col>
+        <a-col :span="8" class="bottomTableR">
+          <a-spin :spinning="spinningR">
+            <BasicTable class="ds-table" @register="registerTableR">
+              <template #tableTitle>
+                <!-- <p class="tableTitle">费用账单明细</p> -->
+                <a-popconfirm
+                  title="是否要删除选中数据?"
+                  ok-text="是"
+                  cancel-text="否"
+                  @confirm="DelDetailR"
+                >
+                  <a-button v-repeat type="link">
+                    <span class="iconfont icon-shanchu21"></span>
+                    删除
+                  </a-button>
+                </a-popconfirm>
+              </template>
+            </BasicTable>
+          </a-spin>
+        </a-col>
+      </a-row>
+      <BasicModal v-bind="$attrs" width="80%" @register="registerFileModel" title="附件管理">
+        <BasicTable class="ds-table" @register="registerTableFile">
+          <template #tableTitle>
+            <a-button v-repeat type="link" @click="Lock">
+              <span class="iconfont icon-shanchu2"></span>
+              删除
+            </a-button>
+            <a-button v-repeat type="link" @click="OpenFileModal">
+              <span class="iconfont icon-shiyongwendang"></span>
+              上传附件
+            </a-button>
+          </template>
+        </BasicTable>
+      </BasicModal>
+      <!-- </a-col>
       <a-col :span="24" class="bottomTableR"> -->
 
-    <!-- </a-col>
+      <!-- </a-col>
     </a-row> -->
-    <!-- </a-tab-pane>
+      <!-- </a-tab-pane>
       <a-tab-pane key="2" tab="附件">
 
       </a-tab-pane>
     </a-tabs> -->
-    <Info
-      ref="RefInfo"
-      @register="registerAdd"
-      @add-detail-l="AddDetailL"
-      @add-detail-r="AddDetailR"
-    />
-    <BasicModal width="80%" v-bind="$attrs" @register="registerEdit" title="账单详情">
-      <ShowData />
-    </BasicModal>
-    <BasicModal width="30%" v-bind="$attrs" @register="registerFile" title="上传附件">
-      <BasicForm @register="registerFormFile" />
-    </BasicModal>
+      <Info
+        ref="RefInfo"
+        @register="registerAdd"
+        @add-detail-l="AddDetailL"
+        @add-detail-r="AddDetailR"
+      />
+      <BasicModal width="80%" v-bind="$attrs" @register="registerEdit" title="账单详情">
+        <ShowData />
+      </BasicModal>
+      <BasicModal width="30%" v-bind="$attrs" @register="registerFile" title="上传附件">
+        <BasicForm @register="registerFormFile" />
+      </BasicModal>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue'
+  import { Divider } from 'ant-design-vue'
   import { useRoute } from 'vue-router'
   const route = useRoute()
   import { useMessage } from '/@/hooks/web/useMessage'
@@ -153,7 +229,14 @@
   const go = useGo()
   import Info from './info/index.vue'
   import ShowData from './showData/index.vue'
-  import { columnsL, columnsR, columnsFile, schemas, schemasFile } from './detailColumns'
+  import {
+    columnsL,
+    columnsR,
+    columnsFile,
+    schemas,
+    schemasFile,
+    Editschemas,
+  } from './detailColumns'
   import {
     EditCheckBill,
     GetCheckBillInfo,
@@ -169,7 +252,16 @@
   const id = ref(route.query.id)
   const spinningL = ref(false)
   const spinningT = ref(false)
+  const billNo = ref()
+  const isLocking = ref(false)
   init()
+  // -------------------------------------
+  const RefActionBar = ref()
+  // 上一票/下一票
+  function ClickLast(type) {
+    RefActionBar.value.toPage(type)
+  }
+  // -------------------------------------
   const Ldata = ref({})
   function init() {
     if (id.value) {
@@ -186,6 +278,8 @@
       GetCheckBillInfo({ id: id.value }).then((res) => {
         setFieldsValue(res.data)
         spinningT.value = false
+        billNo.value = res.data.billNo
+        isLocking.value = res.data.isLocking
       })
       GetCheckBillBusinessList(ApiData).then((res) => {
         setTableDataL(res.data.list)
@@ -199,10 +293,23 @@
       // })
     }
   }
+  function RauditClass() {
+    let RData = ''
+    switch (isLocking.value) {
+      case true:
+        RData = 'active'
+        break
+      default:
+        RData = 'rejected'
+        break
+    }
+    return RData
+  }
+
   // 头部表格
-  const [registerForm, { getFieldsValue, setFieldsValue }] = useForm({
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema }] = useForm({
     labelWidth: 120,
-    schemas,
+    schemas: id.value ? schemas : Editschemas,
     showActionButtonGroup: false,
     actionColOptions: {
       span: 5,
@@ -210,6 +317,13 @@
     // 是否禁用表单所有控件
     disabled: false,
   })
+  const linkageForm = (e) => {
+    schemas.forEach((item) => {
+      if (item.field == e.schema.field) {
+        updateSchema(item)
+      }
+    })
+  }
   // 左侧表格
   const [registerTableL, { getSelectRows: getSelectRowsL, setTableData: setTableDataL }] = useTable(
     {
@@ -222,6 +336,7 @@
       bordered: true,
       showIndexColumn: true,
       immediate: false,
+      canResize: true,
     },
   )
   const spinningR = ref(false)
@@ -527,8 +642,56 @@
   }
 </style> -->
 <style lang="less" scoped>
+  // ----------------------
+  .infoclientBox {
+    display: flex;
+    background: rgba(245, 249, 252, 1);
+    padding: 8px 20px;
+    .buttonBox {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      height: 32px;
+    }
+    .CsbillNo {
+      height: 32px;
+      line-height: 32px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #7a8897;
+    }
+    .ConfigFormBox {
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+    }
+    .ds-action-svg-btn {
+      margin-right: 20px;
+
+      .SvgImg {
+        width: 16px;
+        cursor: pointer;
+        &.rotate {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+  .CsisLocking {
+    .text {
+      padding-left: 8px;
+    }
+    &.active {
+      color: #17a6a3;
+    }
+    &.rejected {
+      color: red;
+    }
+  }
+
+  // ----------------------
   .CsMain {
-    height: 100%;
+    height: calc(100% - 48px);
     display: flex;
     flex-direction: column;
     .buttonBox {
@@ -564,14 +727,20 @@
       }
     }
     .CsBottom {
+      width: 100%;
       height: calc(100vh - 300px);
       display: flex;
-      flex-direction: column;
+      // flex-direction: column;
       // flex: 1;
       // padding-top: 0 !important;
       .bottomTableL {
-        height: calc(100vh - 535px);
-        border: 1px solid #e8ebed;
+        flex: 2;
+        :deep(.ant-table-container) {
+          padding: 0 20px 0 0;
+        }
+        // height: calc(100vh - 535px);
+        border-top: 1px solid #e8ebed;
+        border-right: 1px solid #e8ebed;
         margin-bottom: 10px;
         position: relative;
         .totalBox {
@@ -612,8 +781,12 @@
         }
       }
       .bottomTableR {
-        height: calc(100vh - 600px);
-        border: 1px solid #e8ebed;
+        flex: 1;
+        // height: calc(100vh - 600px);
+        border-top: 1px solid #e8ebed;
+        :deep(.ant-table-container) {
+          padding: 0 0 0 20px;
+        }
       }
       :deep(.ant-spin-nested-loading) {
         height: 100%;
@@ -630,7 +803,9 @@
                   .ant-table {
                     height: calc(100% - 30px);
                     .ant-table-container {
+                      border: none;
                       height: calc(100% - 54px);
+                      // padding: 0;
                       .ant-table-body {
                         max-height: auto !important;
                         height: auto !important;
diff --git a/src/views/operation/CustomerReconciliation/detail/info/index.vue b/src/views/operation/CustomerReconciliation/detail/info/index.vue
index eac62544..91beae32 100644
--- a/src/views/operation/CustomerReconciliation/detail/info/index.vue
+++ b/src/views/operation/CustomerReconciliation/detail/info/index.vue
@@ -11,11 +11,7 @@
     :showFooter="false"
   >
     <div class="CsMain">
-      <a-row class="p-4 CsHeader" :gutter="5">
-        <a-col :span="24" class="headerForm">
-          <BasicForm @register="registerForm" @submit="handleSubmit" />
-        </a-col>
-      </a-row>
+      <BasicForm @register="registerForm" @submit="handleSubmit" />
       <div class="CsBottom">
         <div class="bottomTableL">
           <a-spin :spinning="spinningL">
diff --git a/src/views/operation/CustomerReconciliation/index.vue b/src/views/operation/CustomerReconciliation/index.vue
index bc6dda45..cc80955e 100644
--- a/src/views/operation/CustomerReconciliation/index.vue
+++ b/src/views/operation/CustomerReconciliation/index.vue
@@ -11,42 +11,78 @@
         "
       >
         <template #tableTitle>
+          <div class="ds-h-aciton-btns-fee">
+            <a-tooltip placement="top" :mouseEnterDelay="0.5">
+              <template #title>
+                <span>新增</span>
+              </template>
+              <span @click="GoDetailed(false, null)" class="ds-action-svg-btn">
+                <img src="../../../assets/svg/infoclient/xinjian.svg" class="SvgImg" />
+              </span>
+            </a-tooltip>
+            <a-tooltip placement="top" :mouseEnterDelay="0.5">
+              <template #title>
+                <span>删除</span>
+              </template>
+              <a-popconfirm
+                title="确定删除当前选中数据？"
+                @confirm="FnDel"
+                ok-text="是"
+                cancel-text="否"
+              >
+                <span class="ds-action-svg-btn">
+                  <img src="../../../assets/svg/infoclient/shanchu.svg" class="SvgImg" />
+                </span>
+              </a-popconfirm>
+            </a-tooltip>
+            <a-tooltip placement="top" :mouseEnterDelay="0.5">
+              <template #title>
+                <span>打印</span>
+              </template>
+              <span @click="printFee" class="ds-action-svg-btn">
+                <img src="../../../assets/svg/infoclient/dayin.svg" class="SvgImg" />
+              </span>
+            </a-tooltip>
+            <!-- <a-tooltip placement="top" :mouseEnterDelay="0.5">
+              <template #title>
+                <span>分享</span>
+              </template>
+              <span class="ds-action-svg-btn">
+                <img src="../../../assets/svg/infoclient/tijiao.svg" class="SvgImg" />
+              </span>
+            </a-tooltip> -->
+            <a-tooltip placement="top" :mouseEnterDelay="0.5">
+              <template #title>
+                <span>导出excel</span>
+              </template>
+              <span @click="ExportExcel" class="ds-action-svg-btn" style="padding-top: 4px">
+                <SvgIcon size="16" name="export" />
+              </span>
+            </a-tooltip>
+            <a-tooltip placement="top" :mouseEnterDelay="0.5">
+              <template #title>
+                <span>提交锁定</span>
+              </template>
+              <span @click="Lock" class="ds-action-svg-btn">
+                <img src="../../../assets/icons/lock.svg" class="SvgImg" />
+              </span>
+            </a-tooltip>
+            <a-tooltip placement="top" :mouseEnterDelay="0.5">
+              <template #title>
+                <span>解除锁定</span>
+              </template>
+              <span @click="UnLock" class="ds-action-svg-btn">
+                <img src="../../../assets/icons/openLock.svg" class="SvgImg" />
+              </span>
+            </a-tooltip>
+          </div>
           <div class="buttonGroup">
-            <a-button v-repeat type="link" @click="Lock">
-              <span class="iconfont icon-locksuo IconColor"></span>
-              锁定
-            </a-button>
-            <a-button v-repeat type="link" @click="UnLock">
-              <span class="iconfont icon-lock-openkaisuo IconColor"></span>
-              撤销锁定
-            </a-button>
-            <a-button v-repeat type="link" @click="ExportExcel">
-              <span class="iconfont icon-weibiaoti--"></span>
-              EXCEL导出
-            </a-button>
+            <!-- <a-button v-repeat type="link" @click="Lock">
+              <span class="iconfont icon-renwu_ IconColor"></span>
+              生成发票申请
+            </a-button> -->
           </div>
         </template>
-        <template #toolbar>
-          <a-button v-repeat type="link" @click="GoDetailed(false, null)">
-            <span class="iconfont icon-new_document"></span>
-            添加
-          </a-button>
-          <a-popconfirm
-            title="确定删除当前选中数据？"
-            ok-text="是"
-            cancel-text="否"
-            @confirm="FnDel"
-          >
-            <a-button type="link">
-              <span class="iconfont icon-shanchu21"></span>
-              删除
-            </a-button>
-          </a-popconfirm>
-          <a-button v-repeat type="link" @click="printFee">
-            <span class="iconfont icon-xiaopiaodayin"></span>
-            打印
-          </a-button>
-        </template>
         <template v-slot:bodyCell="{ column, record }">
           <template v-if="column.key === 'action'">
             <TableAction
@@ -86,6 +122,7 @@
   import DsPrint from '/@/components/Print/index.vue'
   import { useMessage } from '/@/hooks/web/useMessage'
   const { notification } = useMessage()
+  import { SvgIcon } from '/@/components/Icon'
   import { useGo } from '/@/hooks/web/usePage'
   const go = useGo()
   // 引入处理入参方法
@@ -388,4 +425,29 @@
   .topTable {
     height: calc(100vh - 145px);
   }
+  .ds-h-aciton-btns-fee {
+    display: flex;
+    align-items: center;
+    height: 38px;
+    padding-right: 10px;
+    border-right: 1px solid rgb(194, 188, 188);
+
+    .ds-action-svg-btn {
+      display: inline-block;
+      width: 32px;
+      height: 32px;
+      padding: 7px 8px;
+      border-radius: 2px;
+      margin-right: 8px;
+      cursor: pointer;
+
+      .next {
+        transform: rotate(180deg);
+      }
+    }
+
+    .ds-action-svg-btn:hover {
+      box-shadow: 0px 2px 4px #cad1db;
+    }
+  }
 </style>