feat(project): add new feature for approve

1. 添加扣款单状态 2. 添加对账单

feat(project): add new feature for approve
1. 添加扣款单状态 2. 添加对账单
chenhang4442024
1 parent cf269d58
Showing 7 changed files with 431 additions and 96 deletions
src/views/project/approve/PayPanel.vue
src/views/project/approve/ReceivePanel.vue
src/views/project/approve/index.vue
src/views/project/finance/financeList/finance.data.tsx
src/views/project/finance/financeList/index.vue
src/views/project/order/Statement.vue
src/views/project/order/index.vue
@@ -262,6 +262,8 @@
               return extractedValues.value.join(',');
             } else if (record?.type == 50) {
               return record?.fieldInfos?.checkBillVO?.innerNo;
+            }else if (record?.type == 70) {
+              return record?.fieldInfos?.deductionUrlFieldVO?.innerNo;
             }
           },
         },
@@ -275,6 +277,8 @@
               return '应付账单申请';
             } else if (record?.type == 50) {
               return '生产科发票申请';
+            }else if (record?.type == 70) {
+              return `生产科扣款单申请${record?.fieldInfos?.deductionUrlFieldVO?.deductAmount ? `(￥${record?.fieldInfos?.deductionUrlFieldVO?.deductAmount?.toFixed(2)})` : ''}`;
             }
           },
         },
@@ -289,6 +293,8 @@
               data.value = record?.fieldInfos?.producePaymentCheckBillFieldVO;
             } else if (record?.type == 50) {
               data.value = record?.fieldInfos?.checkBillVO;
+            } else if (record?.type == 70) {
+              data.value = record?.fieldInfos?.deductionUrlFieldVO;
             }
             return data.value?.productionName;
           },
@@ -353,7 +359,7 @@
       function handleProfitModal() {}
  
       async function handleDetail(data) {
-        if (data.type == 50) {
+        if (data.type == 50 ) {
           showInvoice.value = true;
           mockData.value = data.fieldInfos.checkBillVO;
         } else if (data.type == 40) {
@@ -361,6 +367,10 @@
           mockData.value = data.fieldInfos.producePaymentCheckBillFieldVO;
           financePerson.value = mockData.value?.financePerson;
           trackerUser.value = mockData.value?.trackerUser;
+        }else if(data.type == 70){
+          showInvoice.value = true;
+          mockData.value = data.fieldInfos.deductionUrlFieldVO;
+          mockData.value.invoiceUrl = mockData.value.deductUrl;  
         }
         openModal(true, { data });
         id.value = data.id;
@@ -35,15 +35,15 @@
     </template>
   </BasicTable>
   <BasicModal
-    :formFooter="!isApproved && role === ROLE.ADMIN"
+    :formFooter="(!isApproved && role === ROLE.ADMIN) || showInvoice"
     @register="registerModal"
     title="申请信息"
     okText="通过"
     width="1000px"
     @ok="handleTrue"
     @visible-change="handleShow"
-    :showCancelBtn="!isApproved && role === ROLE.ADMIN"
-    :showOkBtn="!isApproved && role === ROLE.ADMIN"
+    :showCancelBtn="(!isApproved && role === ROLE.ADMIN) || (showInvoice && role === ROLE.FINANCE)"
+    :showOkBtn="(!isApproved && role === ROLE.ADMIN) || (showInvoice && role === ROLE.FINANCE)"
   >
     <!-- <Description
       class="mt-4"
@@ -104,6 +104,9 @@
         </tr>
       </tbody>
     </table>
+    <a v-if="showInvoice" @click="openPic(mockData.invoiceUrl)" rel="noopener noreferrer">{{
+      mockData.invoiceName
+    }}</a>
     <template #appendFooter>
       <a-button
         v-if="!isApproved && (role === ROLE.ADMIN || role === ROLE.FINANCE)"
@@ -111,7 +114,7 @@
       >
         不通过</a-button
       >
-      <a-button v-if="isApproved && role === ROLE.ADMIN" @click="handleFalse"> 驳回重填</a-button>
+      <a-button v-if="(isApproved && role === ROLE.ADMIN) || (isApproved && showInvoice && role === ROLE.FINANCE)" @click="handleFalse"> 驳回重填</a-button>
       <a-button @click="handleExport"> 导出</a-button>
     </template>
   </BasicModal>
@@ -167,7 +170,7 @@
       const projectNo = ref();
       const financePerson = ref('');
       const trackerUser = ref('');
-
+      const showInvoice = ref(false);
       const mockData = ref();
       const schema: DescItem[] = [
         {
@@ -217,7 +220,12 @@
           width: 150,
           customRender: (column) => {
             const { record } = column || {};
-            return record?.fieldInfos?.invoiceFieldVO?.invoiceNo;
+            if(record?.type === 30){
+              return record?.fieldInfos?.invoiceFieldVO?.invoiceNo;
+            }else if(record?.type === 60){
+              return record?.fieldInfos?.deductionUrlFieldVO?.invoiceNo;
+            }
+            
           },
         },
         {
@@ -226,11 +234,28 @@
           width: 150,
           customRender: (column) => {
             const { record } = column || {};
+            if(record?.type === 30){
             const extractedValues = ref<string[]>(
               record?.fieldInfos?.invoiceFieldVO?.innerNo?.map((item) => item),
             );
             // return record?.invoiceFieldVo?.innerNo;
             return extractedValues?.value?.join(',');
+          }else if(record?.type === 60){
+           return record?.fieldInfos?.deductionUrlFieldVO?.innerNo;
+          }
+          },
+        },
+        {
+          title: '审核类型',
+          dataIndex: 'productionDepartment',
+          width: 150,
+          customRender: (column) => {
+            const { record } = column || {};
+            if (record?.type === 30) {
+              return '应收账单申请';
+            } else if (record?.type == 60) {
+              return `Invoice扣款单申请${record?.fieldInfos?.deductionUrlFieldVO?.deductAmount ? `(￥${record?.fieldInfos?.deductionUrlFieldVO?.deductAmount?.toFixed(2)})` : ''}`;
+            }
           },
         },
       ];
@@ -251,12 +276,21 @@
         ]);
       }
  
+      const role = computed(() => {
+        return userStore.getUserInfo?.roleSmallVO?.code;
+      });
+
+      // 根据角色动态设置 searchInfo
+      const searchInfo = computed(() => {
+        if (role.value === ROLE.BUSINESS || role.value === ROLE.TRACKER) {
+          return { type: 60 }; // 只显示 invoice 扣款单类型
+        }
+        return { type: 30 }; // 显示所有类型
+      });
+
       const [registerTable, { reload }] = useTable({
         api: props.isApproved ? getApprovedListApi : getWaitListApi,
-        searchInfo: { type: 30 },
-        // scroll: {
-        //   scrollToFirstRowOnChange: true,
-        // },
+        searchInfo: searchInfo.value,
         columns,
         useSearchForm: true,
         formConfig: getFormConfig('invoiceNo'),
@@ -265,7 +299,6 @@
           width: 160,
           title: 'Action',
           dataIndex: 'action',
-          // slots: { customRender: 'action' },
         },
       });
  
@@ -292,10 +325,32 @@
       }
  
       function handleProfitModal() {}
+       // 打开图片或 PDF
+       function openPic(url: string) {
+        const baseUrl = url.split('?')[0]; // 获取问号前的部分
+        if (isImageUrl(baseUrl)) {
+          window.open('', '', '').document.write(`<!DOCTYPE html>
+      <html>
+        <body style="display: flex; justify-content: center; align-items: center;">
+          <img src='${url}' width="300px" height="auto"/>
+        </body>
+      </html>`);
+        } else if (isPdfUrl(baseUrl)) {
+          view(url); // 新标签页打开 PDF
+        } else {
+          console.log('不支持的文件类型');
+        }
+      }
  
       async function handleDetail(data) {
+        if(data.type == 60){
+         showInvoice.value = true;
+         mockData.value = data.fieldInfos.deductionUrlFieldVO;
+        }else if(data.type == 30){
+          showInvoice.value=false;
+          mockData.value=data.fieldInfos.invoiceFieldVO;
+        }
         openModal(true, { data });
-        mockData.value = data.fieldInfos.invoiceFieldVO;
         id.value = data.id;
         financePerson.value = mockData.value?.financePerson;
         trackerUser.value = mockData.value?.trackerUser;
@@ -309,6 +364,13 @@
         otherAmount.value = mockData.value.otherAmount?.toFixed(2);
         invoiceNo.value = mockData.value.invoiceNo;
         payee.value = mockData.value.payee;
+          const match = mockData.value?.deductUrl?.match(/aliyuncs\.com\/(.*?)\?/);
+             if (match && match[1]) {
+          // 对提取的部分进行解码
+              mockData.value.invoiceName = decodeURIComponent(match[1]);
+             } else {
+             mockData.value.invoiceName = mockData.value?.deductUrl;
+            }
       }
  
       async function handleTrue() {
@@ -329,10 +391,6 @@
         }
       }
  
-      const role = computed(() => {
-        return userStore.getUserInfo?.roleSmallVO?.code;
-      });
-
       // 定义MsgModalClose的事件，方便子组件调用
       const handleMsgModalClose = async (data) => {
         if (data) {
@@ -418,6 +476,8 @@
         msgVisible,
         handleMsgModalClose,
         handlePreview,
+        showInvoice,
+        openPic,
         mockData,
         schema,
         totalPayAmount,
@@ -16,9 +16,9 @@
         v-if="
           role == ROLE.FINANCE ||
           role == ROLE.ADMIN 
-          // ||
-          // role == ROLE.BUSINESS ||
-          // role == ROLE.TRACKER
+          ||
+          role == ROLE.BUSINESS ||
+          role == ROLE.TRACKER
         "
       >
         <ReceivePanel />
@@ -60,9 +60,9 @@
         v-if="
           role == ROLE.FINANCE ||
           role == ROLE.ADMIN 
-          // ||
-          // role == ROLE.BUSINESS ||
-          // role == ROLE.TRACKER
+          ||
+          role == ROLE.BUSINESS ||
+          role == ROLE.TRACKER
         "
       >
         <ReceivePanel isApproved />
@@ -38,8 +38,9 @@ export const searchFormSchema: FormSchema[] = [
     componentProps: {
       options: [
         { label: '未创建', value: -1 },
-        { label: '未收款', value: 0 },
-        { label: '已收款', value: 10 },
+        { label: '未收款（已创建未提交审核）', value: 0 },
+        { label: '待收款（审核通过,未手动确认）', value: 10 },
+        { label: '已收款（手动确认）', value: 40 },
       ],
     },
   },
@@ -51,35 +52,13 @@ export const searchFormSchema: FormSchema[] = [
     componentProps: {
       options: [
         { label: '未创建', value: -1 },
-        { label: '未付款', value: 0 },
-        { label: '已付款', value: 10 },
-      ],
-    },
-  },
-  {
-    field: 'invoiceFinishStatus',
-    label: 'invoice最终状态',
-    component: 'Select',
-    colProps: { span: 8 },
-    componentProps: {
-      options: [
-        { label: '未完成', value: 0 },
-        { label: '已完成', value: 10 },
-      ],
-    },
-  },
-  {
-    field: 'checkFinishStatus',
-    label: 'checkNo最终状态',
-    component: 'Select',
-    colProps: { span: 8 },
-    componentProps: {
-      options: [
-        { label: '未完成', value: 0 },
-        { label: '已完成', value: 10 },
+        { label: '未付款（已创建未提交审核）', value: 0 },
+        { label: '待付款（审核通过,未手动确认）', value: 10 },
+        { label: '已付款（手动确认）', value: 40 },
       ],
     },
   },
+ 
   {
     field: 'customerCode',
     label: '客户编码',
@@ -324,7 +303,7 @@ export const columns: BasicColumn[] = [
     width: 80,
     customRender: (column) => {
       const deductUrl = column.record.invoiceDeductUrl;
-      if (deductUrl == undefined) {
+      if (deductUrl == undefined || !deductUrl) {
         return;
       }
       // return <FilePptOutlined style="font-size:25px" onClick={() => window.open(deductUrl[0])} />;
@@ -332,6 +311,20 @@ export const columns: BasicColumn[] = [
     },
   },
   {
+    title: '扣款单状态',
+    dataIndex: 'invoiceDeductUrlStatus',
+    width: 120,
+    customRender: (column) => {
+      if(column.record.invoiceDeductUrlStatus == 0){
+           return '待审核'
+      }else if(column.record.invoiceDeductUrlStatus == 10){
+           return '已通过'
+      }else if(column.record.invoiceDeductUrlStatus == 20){
+           return '已驳回'
+      }
+    },
+  },
+  {
     title: '实际应收金额$',
     dataIndex: 'invoiceActualReceivableAmount',
     width: 120,
@@ -381,32 +374,23 @@ export const columns: BasicColumn[] = [
     dataIndex: 'invoiceStatus',
     width: 120,
     customRender: (column) => {
+      let statusText='';
+      let statusColor='blank';
       if (column.record.invoiceStatus == null || column.record.invoiceStatus == undefined) {
-        return '未创建';
+        statusText='未创建';
       } else if (column.record.invoiceStatus == 0) {
-        return '未收款';
+        statusText= '未收款';
       } else if (column.record.invoiceStatus == 10) {
-        return '已收款';
+        statusText= '待收款';
+        statusColor='red';
+      }else if (column.record.invoiceStatus == 40) {
+        statusText= '已收款';
+        statusColor='green';
       }
+      return <span style={{color:statusColor}}>{statusText}</span>
     },
   },
-  {
-    title: '最终状态',
-    dataIndex: 'invoiceFinishStatus',
-    width: 120,
-    customRender: (column) => {
-      let statusText = '';
-    let statusColor = '';
-    if (column.record.invoiceFinishStatus == null || column.record.invoiceFinishStatus == undefined || column.record.invoiceFinishStatus == 0) {
-      statusText = '未完成';
-      statusColor = 'red';  // 设置红色
-    } else if (column.record.checkFinishStatus == 10) {
-      statusText = '已完成';
-      statusColor = 'green';  // 设置绿色
-    }
-    return <span style={{ color: statusColor }}>{statusText}</span>; 
-    },
-  },
+
   {
     title: 'Action',
     key: 'action', // 对应 #bodyCell 中的 column.key
@@ -460,13 +444,27 @@ export const columns: BasicColumn[] = [
     width: 120,
     customRender: (column) => {
       const deductUrl = column.record.checkDeductUrl;
-      if (deductUrl == undefined) {
+      if (deductUrl == undefined || !deductUrl) {
         return;
       }
       return <FilePptOutlined style="font-size:25px" />;
     },
   },
   {
+    title: '扣款单状态',
+    dataIndex: 'checkDeductUrlStatus',
+    width: 120,
+    customRender: (column) => {
+      if(column.record.checkDeductUrlStatus == 0){
+           return '待审核'
+      }else if(column.record.checkDeductUrlStatus == 10){
+           return '已通过'
+      }else if(column.record.checkDeductUrlStatus == 20){
+           return '已驳回'
+      }
+    },
+  },
+  {
     title: '生产科实际应付金额￥',
     dataIndex: 'checkActualPayedAmount',
     width: 180,
@@ -534,32 +532,23 @@ export const columns: BasicColumn[] = [
     dataIndex: 'checkPayStatus',
     width: 120,
     customRender: (column) => {
+      let statusText='';
+      let statusColor='blank';
       if (column.record.checkPayStatus == null || column.record.checkPayStatus == undefined) {
-        return '未创建';
+       statusText='未创建';
       } else if (column.record.checkPayStatus == 0) {
-        return '未付款';
+        statusText='未付款';
       } else if (column.record.checkPayStatus == 10) {
-        return '已付款';
+        statusText='待付款';
+        statusColor='red';
+      }else if (column.record.checkPayStatus == 40) {
+        statusText='已付款';
+        statusColor='green';
       }
+      return <span style={{color:statusColor}}>{statusText}</span>
     },
   },
-  {
-    title: '最终状态',
-    dataIndex: 'checkFinishStatus',
-    width: 120,
-    customRender: (column) => {
-      let statusText = '';
-    let statusColor = '';
-    if (column.record.checkFinishStatus == null || column.record.checkFinishStatus == undefined || column.record.checkFinishStatus == 0) {
-      statusText = '未完成';
-      statusColor = 'red';  // 设置红色
-    } else if (column.record.checkFinishStatus == 10) {
-      statusText = '已完成';
-      statusColor = 'green';  // 设置绿色
-    }
-    return <span style={{ color: statusColor }}>{statusText}</span>; 
-    },
-  },
+
   {
     title: 'Action',
     key: 'action2', // 对应 #bodyCell 中的 column.key
@@ -171,8 +171,9 @@
                 ...(role == ROLE.ADMIN
                 ? [
                     {
-                      label: '设置invoice最终完成',
+                      label: '设置为已收款',
                       onClick: handleInvoiceSetFinishStatus.bind(null, record),
+                      //需要设置按钮为红色。
                     },
                   ]
                 : []),
@@ -261,7 +262,7 @@
                 ...(role == ROLE.ADMIN
                 ? [
                     {
-                      label: '设置对账单最终完成',
+                      label: '设置为已付款',
                       onClick: handleCheckSetFinishStatus.bind(null, record),
                     },
                   ]
+<template>
+  
+    <BasicModal
+      v-bind="$attrs"
+      destroyOnClose
+      @register="register"
+      title="LOACL对账单"
+      width="1100px"
+      @visible-change="handleShow"
+      :footer="null"
+      :bodyStyle="{ height: '650px', overflow: 'hidden' }"
+    >
+      <div class="container">
+        <div v-if="isShow1 == true" style="margin-top: 30px">
+          <RadioGroup v-model:value="selectedCompany" :options="companyOptions"  style="display: flex; gap: 200px;"/>
+        </div>
+         <!-- 代垫费用区域 -->
+      <div class="table-container" style="display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 30px" >
+        <div class="table-box" style="flex: 0.5; margin-right: -20px;">
+          <h3>代垫费用</h3>
+          <div class="input-row" style="display: flex; align-items: center;">
+            <a-button type="primary" style="margin-left: 10px;" @click="addAdvanceCost">添加费用</a-button>
+          </div>
+          <div v-for="(item, index) in advanceCosts" :key="'advance-' + index" class="input-row" style="margin-top: 10px; display: flex;">
+            <a-input v-model:value="item.name" placeholder="请输入费用名称" style="width: 200px;" />
+            <a-input-number v-model:value="item.value" placeholder="请输入费用金额" style="width: 150px !important; margin-left: 10px;" />
+            <a-button type="danger" style="margin-left: 10px;" @click="removeAdvanceCost(index)">删除</a-button>
+          </div>
+        </div>
+        <div class="table-box" style="flex: 1;">
+          <h3>费用支出</h3>
+          <div class="input-row" style="display: flex; align-items: center;">
+            <a-button type="primary" style="margin-left: 10px;" @click="addExpenseCost">添加费用</a-button>
+          </div>
+          <div v-for="(item, index) in expenseCosts" :key="'expense-' + index" class="input-row" style="margin-top: 10px; display: flex;">
+            <a-input v-model:value="item.name" placeholder="请输入费用名称" style="width: 200px;" />
+            <a-input-number v-model:value="item.value" placeholder="请输入费用金额" style="width: 150px !important; margin-left: 10px;" />
+            <a-button type="danger" style="margin-left: 10px;" @click="removeExpenseCost(index)">删除</a-button>
+          </div>
+        </div>
+        </div>
+
+        <div class="bottom">
+          <a-button type="primary" @click="handleAccountStatement" className="ml-4" v-if="isShow1 == true"
+            >生成</a-button
+          >
+          <a-button type="primary" @click="handleCancel" className="ml-4" style="margin-left: 6px"
+            >取消</a-button
+          >
+        </div>
+      </div>
+    </BasicModal>
+  </template>
+  <script lang="ts">
+    import { defineComponent, ref, computed } from 'vue';
+    import { BasicModal, useModalInner } from '/@/components/Modal';
+    import { RadioGroup } from 'ant-design-vue';
+    import { useMessage } from '@/hooks/web/useMessage';
+    import axios from 'axios';
+  
+    export default defineComponent({
+      props: {
+        role: {
+          type: String,
+        },
+        customerCodes: {
+          type: Array<string | number>,
+        },
+      },
+      components: { BasicModal, RadioGroup },
+      setup(props) {
+        const loading = ref(true);
+        const choose = ref();
+        const checkedKeys=ref();
+        const isShow1 = ref(true);
+        const advanceCostValue = ref(0);
+        const expenseCostValue = ref(0);
+        const advanceCosts = ref<{ name: string; value: number }[]>([]);
+        const expenseCosts = ref<{ name: string; value: number }[]>([]);
+        const [register, { setModalProps, closeModal }] = useModalInner(async (data)=>{
+          checkedKeys.value=data.checkedKeys;
+        });
+        const { createMessage } = useMessage();
+        const { error } = createMessage;
+        const selectedCompany = ref();
+        const companyOptions = ref([
+          { label: '翱特逸格饰品有限公司', value: '翱特逸格饰品有限公司' },
+          { label: '吉庆天成饰品有限公司', value: '吉庆天成饰品有限公司' }
+        ]);
+  
+        function addAdvanceCost() {
+          advanceCosts.value.push({ name: '', value: advanceCostValue.value });
+        }
+  
+        function addExpenseCost() {
+          expenseCosts.value.push({ name: '', value: expenseCostValue.value });
+        }
+  
+        function removeAdvanceCost(index: number) {
+          advanceCosts.value.splice(index, 1);
+        }
+  
+        function removeExpenseCost(index: number) {
+          expenseCosts.value.splice(index, 1);
+        }
+  
+        function handleCancel() {
+          loading.value = true;
+          choose.value = '';
+          setModalProps({ loading: false, confirmLoading: false });
+          isShow1.value = true;
+          advanceCosts.value = [];
+          expenseCosts.value = [];
+          closeModal();
+        }
+  
+        function handleShow(visible: boolean) {
+          if (visible) {
+            loading.value = true;
+            choose.value = '';
+            setModalProps({ loading: false, confirmLoading: false });
+            isShow1.value = true;
+          } else {
+            advanceCosts.value = [];
+            expenseCosts.value = [];
+          }
+        }
+        async function handleAccountStatement() {
+          if (!selectedCompany.value) {
+            error('请选择公司'); // 提示用户选择公司
+            return; // 结束函数执行
+          }
+
+          axios
+            .post(
+              '/basic-api/order/erp/order/accountStatement',
+              {
+                ids: checkedKeys.value,
+                disbursement: advanceCosts.value.map(item => ({ [item.name]: item.value })),
+                deduction: expenseCosts.value.map(item => ({ [item.name]: item.value })),
+                titleCompany: selectedCompany.value
+              },
+              {
+                responseType: 'blob', // 设置响应类型为 'blob'
+              },
+            )
+            .then((response) => {
+              // 创建一个 Blob 对象来保存二进制数据
+              const blob = new Blob([response.data], { type: 'application/octet-stream' });
+              const getFormattedDate = (): string => {
+                const date = new Date();
+
+                const year = date.getFullYear();
+                const month = String(date.getMonth() + 1).padStart(2, '0');
+                const day = String(date.getDate()).padStart(2, '0');
+
+                const hours = String(date.getHours()).padStart(2, '0');
+                const minutes = String(date.getMinutes()).padStart(2, '0');
+                const seconds = String(date.getSeconds()).padStart(2, '0');
+
+                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+              };
+              const date = getFormattedDate();
+              // 创建一个链接元素用于下载
+              const link = document.createElement('a');
+              link.href = window.URL.createObjectURL(blob);
+              link.download = `${selectedCompany.value}对账单${date}.xlsx`; // 你可以为文件命名
+              document.body.appendChild(link);
+              link.click(); // 自动点击链接，触发下载
+              document.body.removeChild(link); // 下载完成后移除链接
+            })
+            .catch((error) => {
+              console.error(error);
+            });
+          closeModal();
+        }
+        return {
+          register,
+          loading,
+          choose,
+          handleShow,
+          handleCancel,
+          advanceCostValue,
+          expenseCostValue,
+          advanceCosts,
+          expenseCosts,
+          addAdvanceCost,
+          addExpenseCost,
+          isShow1,
+          selectedCompany,
+          companyOptions,
+          removeAdvanceCost,
+          removeExpenseCost,
+          handleAccountStatement,
+        };
+      },
+    });
+  </script>
+  <style scoped>
+    /* .container {
+      position: relative;
+    }
+    .bottom {
+      position: absolute;
+      bottom: 0;
+    } */
+    .container {
+      display: flex;
+      flex-direction: column;
+      /* min-height: 20vh; */
+    }
+  
+    .bottom {
+      margin-top: 40px;
+      /* margin-right: auto; */
+      margin-left: 150px;
+    }
+  
+    .showPdf {
+      display: flex;
+      position: relative;
+      height: 30px;
+      width: 470px;
+      border: 2px solid;
+      border-radius: 5px;
+      border-color: #d8d8d8;
+    }
+  
+    .FilePptOutlined {
+      margin-top: 3px;
+      margin-left: 30px;
+    }
+  
+    .EyeOutlined {
+      margin-top: 3px;
+      margin-left: 290px;
+    }
+  </style>  
@@ -118,6 +118,18 @@
             <!-- <a-space wrap :size="[8, 16]" :style="{ marginBottom: '2px', marginLeft: '10px' }"> -->
             <a-space wrap :style="{ marginBottom: '2px', marginTop: '2px' }">
               <a-button
+                :style="{backgroundColor: '#ff69b4',  borderColor: '#ff69b4',  color: 'white',borderRadius: '5px 5px 5px 5px' }"
+                shape="default"
+                type="primary"
+                @click=" handleStatementModal"
+                v-if="
+                  role === ROLE.ADMIN ||
+                  role === ROLE.BUSINESS ||
+                  role === ROLE.TRACKER 
+                "
+                >LOACL对账单</a-button
+              >
+              <a-button
                 :style="{ borderRadius: '5px 5px 5px 5px' }"
                 type="primary"
                 @click="handleProductInvoiceModal"
@@ -231,6 +243,11 @@
       :role="role"
       :customerCodes="selectedCustomCodes"
     />
+    <Statement
+      @register="statementModalRegister"
+      :role="role"
+      :customerCodes="selectedCustomCodes"
+    />
     <InvoiceCreate @register="invoiceCreateModalRegister" @success="handleFormSuccess" />
     <ServiceProfit @register="serviceProfitModalRegister" />
     <ProductProfit @register="productProfitModalRegister" />
@@ -250,11 +267,12 @@
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { FormOutlined } from '@ant-design/icons-vue';
   import HeaderCell from '/@/components/Table/src/components/HeaderCell.vue';
-  import { Alert } from 'ant-design-vue';
+  import { Alert } from 'ant-design-vue'
  
   import { useDrawer } from '/@/components/Drawer';
   import ProfitAnalysis from './ProfitAnalysis.vue';
   import ProductText from './ProductText.vue';
+  import Statement from './Statement.vue';
   import RateModal from './RateModal.vue';
   import ExportModal from './ExportModal.vue';
   import PassCalculate from './PassCalculate.vue';
@@ -291,6 +309,7 @@
       FormDetail,
       ProfitAnalysis,
       ProductText,
+      Statement,
       PassCalculate,
       FormOutlined,
       CheckDetail,
@@ -316,6 +335,7 @@
       const [exportModalRegister, { openModal: openExportModal }] = useModal();
       const [productModalRegister, { openModal: openProductModal }] = useModal();
       const [passModalRegister, { openModal: openPassModal }] = useModal();
+      const [statementModalRegister, { openModal: openStatementModal }] = useModal();
  
       const tooltipVisible = ref(false);
       const [formDetailRegister, { openDrawer: openFormDetailDrawer }] = useDrawer();
@@ -761,6 +781,20 @@
           data: values,
         });
       }
+      //对账单
+      function  handleStatementModal(record) {
+        const form = getForm();
+        const values = form.getFieldsValue();
+        if (checkedKeys.value.length == 0) {
+          error('请选择订单');
+          return;
+        }
+        openStatementModal(true, {
+          checkedKeys: checkedKeys.value,
+          customers: selectedCustomCodes.value,
+          data: values,
+        });
+      }
  
       function handleRateModal() {
         const form = getForm();
@@ -871,6 +905,7 @@
         rateModalRegister,
         exportModalRegister,
         productModalRegister,
+        statementModalRegister,
         passModalRegister,
         historyDetailRegister,
         trackHistoryRegister,
@@ -878,6 +913,7 @@
         handleProfitModal,
         handleInvoiceCreateModal,
         handleProductInvoiceModal,
+        handleStatementModal,
         registerTable,
         getFormValues,
         checkedKeys,
@@ -905,6 +941,7 @@
         handleRateModal,
         openExportModal,
         openProductModal,
+        openStatementModal,
         openPassModal,
         handleDelete,
         handleServiceProfitModal,