From 63e3b19af96613e6f70e16bc2c06f4fe9993c48e Mon Sep 17 00:00:00 2001
From: 123456 <13063093621@163.com>
Date: Tue, 19 Mar 2024 23:31:54 +0800
Subject: [PATCH] 1

---
 .../CorporateReceiptsCard/index.vue           |  25 +-
 src/router/modules/contract.js                |   2 +
 src/utils/dict.js                             |   8 +
 .../corporatePayment/components/UserList.vue  |   2 +-
 .../corporateReceipts/components/UserList.vue |  10 +-
 src/views/contract/payment/index.vue          | 628 ++++++++++++++++++
 src/views/contract/receipts/index.vue         | 628 ++++++++++++++++++
 7 files changed, 1288 insertions(+), 15 deletions(-)
 create mode 100644 src/views/contract/payment/index.vue
 create mode 100644 src/views/contract/receipts/index.vue

diff --git a/src/components/CorporateReceiptsCard/index.vue b/src/components/CorporateReceiptsCard/index.vue
index 6e76f0b..3be16a8 100644
--- a/src/components/CorporateReceiptsCard/index.vue
+++ b/src/components/CorporateReceiptsCard/index.vue
@@ -12,25 +12,32 @@
           </div>
           <div class="ct-md">
             <div class="mt5" style="color:#333">
-              合同编号： {{itemData.contractNumber}}
+              收款编号： {{itemData.vendorReceiptNo}}
             </div>
             <div style="margin-top: 0.3rem;color:#333 ">
-              合同名称：{{itemData.contractName}}
+              申请人：{{itemData.createName}}
             </div>
             <div style="margin-top: 0.3rem;color:#333 ">
-              供应商名称：{{itemData.supplierName}}
+              申请部门：{{itemData.deptName}}
             </div>
             <div style="margin-top: 0.3rem;color:#333 ">
-              签约人员：{{itemData.signatoryName}}
+              项目名称：{{itemData.projectName}}
             </div>
             <div style="margin-top: 0.3rem;color:#333 ">
-              合同金额：{{itemData.amount}}
+              项目负责人：{{itemData.projectManager}}
             </div>
             <div style="margin-top: 0.3rem;color:#333 ">
-              合同起止时间： {{itemData.startTime && dayjs(itemData.startTime).format('YY/MM/DD')}} ~ {{itemData.endTime && dayjs(itemData.endTime).format('YY/MM/DD')}}
+              账户类型：{{getDictDataLabel(DICT_TYPE.BS_BANK_TYPE,itemData.accountType) || ''}}
             </div>
             <div style="margin-top: 0.3rem;color:#333 ">
-              <div class="tags" :style="`border: 1px solid ;color:#05A9FF;width: 6rem;`">{{getDictDataLabel(DICT_TYPE.SR_CT_TYPE,itemData.contractType) || '未知'}} </div>
+              收款金额：{{itemData.amount}}
+            </div>
+            <div style="margin-top: 0.3rem;color:#333 ">
+              审批节点：
+              <span v-for="(items,index) in itemData.taskNames" :key="index">{{ items }} </span>
+            </div>
+            <div style="margin-top: 0.3rem;color:#333 ">
+              创建时间：{{ dayjs(itemData.createTime).format('YYYY/MM/DD')}}
             </div>
           </div>
         </div>
@@ -86,7 +93,7 @@ export default {
       }
     },
     handleEdit(id, status) {
-      if (status != 0 && status != 3 ) {
+      if (status != 0 && status != 3) {
         return
       }
       this.jumoStudentId = id
@@ -96,7 +103,7 @@ export default {
       })
     },
     handleDel(id, status) {
-      if (status != 0 && status != 3 ) {
+      if (status != 0 && status != 3) {
         return
       }
       Dialog.confirm({
diff --git a/src/router/modules/contract.js b/src/router/modules/contract.js
index bf678d7..8049932 100644
--- a/src/router/modules/contract.js
+++ b/src/router/modules/contract.js
@@ -18,6 +18,8 @@ export default {
     { path: '/custom', name: `${pre}custom`, component: () => import('@/views/contract/custom'), meta: { cache: true, title: '客户合同审批' } },
     { path: '/pay', name: `${pre}pay`, component: () => import('@/views/contract/pay'), meta: { cache: true, title: '付款审批' } },
     { path: '/corporateReceipts', name: `${pre}corporateReceipts`, component: () => import('@/views/contract/corporateReceipts'), meta: { cache: true, title: '对公收款' } },
+    { path: '/receipts', name: `${pre}receipts`, component: () => import('@/views/contract/receipts'), meta: { cache: true, title: '收款审批' } },
     { path: '/corporatePayment', name: `${pre}corporatePayment`, component: () => import('@/views/contract/corporatePayment'), meta: { cache: true, title: '对公付款' } },
+    { path: '/payment', name: `${pre}payment`, component: () => import('@/views/contract/payment'), meta: { cache: true, title: '付款审批' } },
   ])('contract-')
 }
diff --git a/src/utils/dict.js b/src/utils/dict.js
index e9c48b9..4b5929b 100644
--- a/src/utils/dict.js
+++ b/src/utils/dict.js
@@ -109,6 +109,14 @@ export const DICT_TYPE = {
   BS_PROCUREMENT_TYPE: 'supplier_procurement_state',
   //  合同类型（采购状态）
   SR_CT_TYPE: 'supplier_ct_type',
+  // 银行账户类型
+  BS_BANK_TYPE: "bs_bank_account_info_account_type",
+  // 申请类型
+  BS_INDUSTRY: "bs_industry",
+  // 行业类型
+  PROJECT_TYPE: "project_type",
+  //  供应商等级
+  GYS_LEVEL: "gys_level",
 }
 
 /**
diff --git a/src/views/contract/corporatePayment/components/UserList.vue b/src/views/contract/corporatePayment/components/UserList.vue
index 68dd7e2..2b7c7b0 100644
--- a/src/views/contract/corporatePayment/components/UserList.vue
+++ b/src/views/contract/corporatePayment/components/UserList.vue
@@ -16,7 +16,7 @@
     <div class="common-bottom-btns" v-hasPermi="['bs:supplier-contract:create']" style="bottom:10rem">
       <div class="common-bottom-btn" @click="handleToAdd">
         <img src="@/assets/images/icons/add.png" alt="">
-        <span>添加申请</span>
+        <span>添加付款</span>
       </div>
     </div>
     <div class="common-bottom-btns" style="bottom:6rem">
diff --git a/src/views/contract/corporateReceipts/components/UserList.vue b/src/views/contract/corporateReceipts/components/UserList.vue
index 016fedd..d6202cd 100644
--- a/src/views/contract/corporateReceipts/components/UserList.vue
+++ b/src/views/contract/corporateReceipts/components/UserList.vue
@@ -16,7 +16,7 @@
     <div class="common-bottom-btns" v-hasPermi="['bs:supplier-contract:create']" style="bottom:10rem">
       <div class="common-bottom-btn" @click="handleToAdd">
         <img src="@/assets/images/icons/add.png" alt="">
-        <span>添加申请</span>
+        <span>添加收款</span>
       </div>
     </div>
     <div class="common-bottom-btns" style="bottom:6rem">
@@ -31,7 +31,7 @@
 <script>
 import { getScrollTop } from '@/utils'
 import { getSupplierCompanyPage } from "@/api/bs/quotationSheet";
-import { getSupplierContractPage } from "@/api/bs/supplierContract";
+import { getVendorReceiptPage } from "@/api/bs/vendorReceipt";
 import { mapState } from 'vuex'
 import dayjs from 'dayjs'
 export default {
@@ -113,7 +113,7 @@ export default {
           pageNo: 1,
           pageSize: this.singlePageSize,
         }
-        getSupplierContractPage(listQuery).then((res) => {
+        getVendorReceiptPage(listQuery).then((res) => {
           let arr = (res.data && res.data.list || []).filter(item => item.id == id)
           resolve(arr)
         }).catch((err) => {
@@ -157,7 +157,7 @@ export default {
     },
     handleToAdd() {
       this.$router.push({
-        path: '/supplier',
+        path: '/receipts',
         query: {
           type: 'add'
         }
@@ -195,7 +195,7 @@ export default {
       }
       this.moreLoading = true
       this.$loading(true, 'tableLoading')
-      getSupplierContractPage(query).then(res => {
+      getVendorReceiptPage(query).then(res => {
         let resList = res.data && res.data.list || []
         if (['init', 'refresh'].includes(val)) {
           this.tableList = resList
diff --git a/src/views/contract/payment/index.vue b/src/views/contract/payment/index.vue
new file mode 100644
index 0000000..d766d90
--- /dev/null
+++ b/src/views/contract/payment/index.vue
@@ -0,0 +1,628 @@
+<template>
+  <div class="common-list-contain">
+    <div class="common-form">
+      <van-form ref="form" :show-error-message="false" validate-trigger="" :submit-on-enter="false">
+        <div class="section"> <span class="line"> </span> 审批内容</div>
+        <div class="trips-box">
+          <div class="item-box">
+            <van-field v-model="form.contractNumber" @blur="handleCtBlur" placeholder="请输入" :disabled="['edit','show'].includes(this.$route.query.type)" :rules="[{ required: true, message: '请输入' }]" required label="合同编号" clear-trigger="always" input-align="right" />
+            <van-field v-model="form.contractName" required placeholder="请输入" :disabled="disabled" :rules="[{ required: true, message: '请输入' }]" label="合同名称" clear-trigger="always" input-align="right" />
+<!--            <van-field :value="form.time" label="合同起止时间" :disabled="disabled ||oaListIsDisabled " :class="disabled ? 'actived-disabled':''" placeholder="请选择" required :rules="[{ required: true, message: '请选择' }]" @click="handleDateShow(1)" :right-icon="form.time ?  '' :'arrow' " input-align="right" readonly autosize rows="1" type="textarea">-->
+<!--            </van-field>-->
+            <van-field right-icon="arrow" :rules="[{ required: true, message: '请选择' }]" :disabled="disabled ||oaListIsDisabled" :class="form.startTime ? 'actived-disabled':''" :name="`time`" placeholder="请选择" v-model="form.startTime1" @click="handleDateShow('startTime')" label="合同开始时间" clear-trigger="always" input-align="right" />
+            <van-field right-icon="arrow" :rules="[{ required: true, message: '请选择' }]" :disabled="disabled ||oaListIsDisabled" :class="form.endTime ? 'actived-disabled':''" :name="`time`" placeholder="请选择" v-model="form.endTime1" @click="handleDateShow('endTime')" label="合同结束时间" clear-trigger="always" input-align="right" />
+            <RePick v-model="form.supplierId" :disabled="disabled ||oaListIsDisabled " titleKey="companyAme" idKey="id" label="供应商名称" name="supplierId" :list="supplierList" isRequrie isCell clearable />
+            <RePick v-model="form.departmentId" :disabled="disabled" label="签约部门" @change="handleChange" :name="`departmentId`" :list="userDeptTree" isRequrie isCascader isShowSearch title="签约部门" titleKey="name" isCell clearable />
+            <RePick v-model="form.signatoryId" :disabled="disabled" titleKey="nickname" idKey="id" label="签约人员" name="signatoryId" :list="signatoryList" isRequrie isCell clearable />
+            <RePick v-model="form.contractType" :disabled="disabled" titleKey="contractName" idKey="id" label="合同类型" name="contractType" :list="typeList" isRequrie isCell clearable />
+            <RePick v-model="form.projectId" :disabled="disabled" titleKey="projectName" idKey="id" label="所属项目" name="contractType" :list="projectList" isRequrie isCell clearable />
+            <van-field v-model="form.amount" :disabled="disabled" type=" number" name="amount" placeholder="请输入" input-align="right" required :rules="[{ required: true, message: '格式错误',validator: VerifyFunc.validatorMoney }]" label="合同总金额" />
+            <van-field label="是否收票" required name="isCollect" :disabled="disabled" input-align="right" :rules="[{ required:true, message: '请选择'  }]" label-width="9em">
+              <template #input>
+                <van-radio-group :disabled="disabled" v-model="form.isCollect" direction="horizontal">
+                  <van-radio :name="1">是</van-radio>
+                  <van-radio :name="0">否</van-radio>
+                </van-radio-group>
+              </template>
+            </van-field>
+            <van-field v-model="form.managerPhone" :disabled="disabled" name="managerPhone" type="number" placeholder="请输入" input-align="right" required :rules="[{ required: true, message: '格式错误',validator: VerifyFunc.rePhone }]" label="经办人电话" />
+            <van-field v-model="form.dealContent" :disabled="disabled" name="reason" autosize rows="2" label="交易内容" required :rules="[{ required: true, message: '请输入' }]" clear-trigger="always" input-align="right" placeholder="请输入" type="textarea" />
+            <RePick v-model="form.capitalSource" :disabled="disabled" titleKey="label" idKey="value" label="资金来源" name="capitalSource" :list="capitalSource" isCell clearable />
+            <van-field v-model="form.proposerPerson" :disabled="disabled" name="proposerPerson" type="number" placeholder="请输入" input-align="right"  label="申请人" />
+            <van-field v-model="form.taxAmount" :disabled="disabled" name="taxAmount" type="number" placeholder="请输入" input-align="right" label="合同金额(含税)" />
+            <van-field right-icon="arrow" :rules="[{ required: true, message: '请选择' }]" :disabled="disabled" :class="form.proposerTime ? 'actived-disabled':''" :name="`time`" placeholder="请选择" v-model="form.proposerTime1" @click="handleDateShow('proposerTime')" label="申请时间" clear-trigger="always" input-align="right" />
+            <van-field v-model="form.taxForeheads" :disabled="disabled" name="taxForeheads" type="number" placeholder="请输入" input-align="right"  label="税额" />
+            <van-field v-model="form.taxRate" :disabled="disabled" name="taxRate" type="number" placeholder="请输入" input-align="right"  label="税率" />
+            <van-field right-icon="arrow" :rules="[{ required: true, message: '请选择' }]" :disabled="disabled" :class="form.dateSigning ? 'actived-disabled':''" :name="`time`" placeholder="请选择" v-model="form.dateSigning1" @click="handleDateShow('dateSigning')" label="签订时间" clear-trigger="always" input-align="right" />
+            <van-field v-model="form.other" :disabled="disabled" name="reason" autosize rows="2" label="合同简述" required :rules="[{ required: true, message: '请输入' }]" clear-trigger="always" input-align="right" placeholder="请输入" type="textarea" />
+          </div>
+        </div>
+        <div class="section mt5"> <span class="line"> </span>附件</div>
+        <div class="trips-box">
+          <div class="item-box">
+            <UploadFile :typeStr="typeStr" @onConfirm="handleUpload" :fileList="fileList" />
+          </div>
+        </div>
+        <div class="section mt5"> <span class="line"> </span>
+          <van-button type="info" size="small" :disabled="disabled || oaListIsDisabled" native-type="button" @click="handleAddPay" round>增加付款计划</van-button>
+        </div>
+        <div class="section mt5"> <span class="line"> </span>付款计划</div>
+        <div class="trips-box">
+          <div class="item-box" v-for="(item,index) in oaReimburseFeeitemList" :key="index">
+            <div class="oaList">
+              <div>
+                序号 {{index + 1}}
+              </div>
+              <div @click="handleDelOa(index)">
+                <van-icon name="delete-o" size="20" :color="`${disabled || oaListIsDisabled ? '#c8c9cc' : ''}`" />
+              </div>
+            </div>
+            <van-field v-model="item.planTime" label="计划付款时间" :disabled="disabled || oaListIsDisabled" :class="disabled ? 'actived-disabled':''" placeholder="请选择" @click="handlePDateShow(item.planTime,index)" :right-icon="item.planTime ?  '' :'arrow' " input-align="right" readonly autosize rows="1" type="textarea">
+            </van-field>
+            <van-field v-model="item.planName" label="计划名称" :disabled="disabled || oaListIsDisabled" name="planName" placeholder="请输入" input-align="right">
+            </van-field>
+            <van-field v-model="item.percentage" label="比例(数字)" :disabled="disabled || oaListIsDisabled" @blur="handleBulrPe($event,index)" name="percentage" type="number" placeholder="请输入" input-align="right">
+            </van-field>
+            <van-field v-model="item.actualAmount" name="actualAmount" :disabled="disabled || oaListIsDisabled" type="number" placeholder="请输入" input-align="right" label="实付金额" />
+            <van-field v-model="item.planMemo" label="备注" :disabled="disabled || oaListIsDisabled" name="planMemo" placeholder="请输入" input-align="right">
+            </van-field>
+          </div>
+        </div>
+        <div class="section mt5" v-if="['show'].includes(typeStr)"> <span class="line"> </span>审批流程</div>
+        <ApprovalProcess v-if="['show'].includes(typeStr)" :processInstanceId="form.processInstanceId" @onSetId="handleSetAccessId" />
+      </van-form>
+    </div>
+    <BottomBtn ref="BottomBtn" :isAuthorised="isAuthorised" @onBtConfirm="handleBtConfirm" :accessId="accessId" />
+
+    <!--行程时间范围选择 -->
+    <van-calendar ref="vanCalendar" allow-same-day :maxDate="maxDate" v-model="dateShow" :min-date="minDate" :default-date="defaultDate" color="#0088FE" @confirm="handleDateSelect" />
+    <!--预计付款时间选择 -->
+    <van-calendar ref="pVanCalendar" allow-same-day :maxDate="maxDate" v-model="palnTimeShow" :min-date="minDate" :default-date="pDefaultDate" color="#0088FE" @confirm="handlePlanDateSelect" />
+
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs';
+import { createSupplierContract, getSupplierContract } from '@/api/bs/supplierContract'
+import { getSupplierCompanyPage } from "@/api/bs/quotationSheet";
+import { listData } from "@/api/system/dict/data";
+import VerifyFunc from '@/utils/verify'
+import { getPaymentPlanPage } from "@/api/bs/paymentPlan";
+import { Dialog } from 'vant'
+import {
+  listUser,
+} from "@/api/system/user";
+import { getCustomerContractTypeListAll } from '@/api/bs/contractType'
+import {getProjectPage} from "@/api/bs/project";
+export default {
+  //import引入组件才能使用
+  name: 'contract-supplier',
+  props: {},
+  components: {
+    UploadFile: () => import('@/components/UploadFile'),
+    RePick: () => import('@/components/ReComponents/RePick'),
+    ApprovalProcess: () => import('@/components/ApprovalProcess'),
+    BottomBtn: () => import('@/components/BottomBtn'),
+  },
+  // 计算属性
+  computed: {
+    areaTree() {
+      return this.$store.getters.areaTree
+    },
+    userDeptTree() {
+      return this.$store.getters.userDeptTree
+    },
+    cn() {
+      return window.localStorage.getItem('cn')
+    },
+    userInfo() {
+      return JSON.parse(window.localStorage.getItem('userInfo') || { dept: {} })
+    },
+    disabled() {
+      return ['show'].includes(this.$route.query.type)
+    },
+  },
+  // 生命周期，创建完成时（可以访问当前this实例）
+  created() {
+    this.$loading(true)
+    this.handleInitList().then(() => {
+      this.$loading(false)
+      this.handleInitForm()
+    })
+  },
+  // 生命周期：挂载完成时（可以访问DOM元素）
+  mounted() {
+
+  },
+  data() {
+    return {
+      pIndex: 0,
+      pDefaultDate: new Date(),
+      palnTimeShow: false,
+      oaListIsDisabled: false,
+      isSave: false,
+      isRereset: false,
+      VerifyFunc,
+      typeList: [],
+      capitalSource:[],
+      projectList:[],
+      signatoryList: [],
+      departmentList: [],
+      dayjs,
+      supplierList: [],
+      accessId: null,
+      isAuthorised: false,
+      typeStr: null, // show: 查看 edit: 编辑: 其他新增
+      fileList: [],
+      btnList: [],
+      index: 0,
+      minDate: new Date('2000/01/01'),
+      maxDate: new Date('2030/01/01'),
+      defaultDate: new Date(),
+      dateShow: false,
+      form: {
+        time: null,
+        supplierId: null,
+        contractNumber: null,
+        contractName: null,
+        contractType: null,
+        amount: null,
+        isCollect: null,
+        managerPhone: null,
+        receivedAmount: null,
+        dealContent: null,
+        other: null,
+      },
+      oaReimburseFeeitemList: [],
+      dateType:''
+    };
+  },
+
+  // 监听data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    handleDelOa(index) {
+      if (this.disabled || this.oaListIsDisabled) {
+        return
+      }
+      Dialog.confirm({
+        title: '提示',
+        message: '你确定要删除吗?',
+      }).then(() => {
+        this.oaReimburseFeeitemList.splice(index, 1)
+      })
+    },
+    handleBulrPe(e, index) {
+      let list = this.oaReimburseFeeitemList
+      if (this.form.amount) {
+        this.$set(list[index], 'actualAmount', (this.form.amount * (Number(e.target.value) / 100)).toFixed(2))
+      } else {
+        this.$fm('输入合同金额,自动计算实付金额!')
+      }
+    },
+    handleAddPay() {
+      this.oaReimburseFeeitemList.push({
+        planTime: null,
+        percentage: undefined,
+        actualAmount: undefined
+      })
+    },
+    handleResetForm() {
+      // this.form = {
+      //   time: null,
+      //   supplierId: null,
+      //   contractNumber: this.form.contractNumber,
+      //   contractName: null,
+      //   contractType: null,
+      //   amount: null,
+      //   isCollect: null,
+      //   managerPhone: null,
+      //   receivedAmount: null,
+      //   dealContent: null,
+      //   other: null,
+      // }
+      this.oaReimburseFeeitemList = []
+    },
+    handleInitOaReimburseFeeitemList(e) {
+      getPaymentPlanPage({
+        pageNo: 1,
+        pageSize: 10,
+        contractNumber: e
+      }).then((res) => {
+        if (res.data && res.data.list.length) {
+          const { paymentPlanDetailDOList } = res.data.list[0]
+          this.oaReimburseFeeitemList = (paymentPlanDetailDOList || []).map(item => {
+            return {
+              ...item,
+              actualAmount: Math.floor(Number(item.actualAmount) * 100) / 100,
+              planTime: dayjs(item.planTime).format('YYYY-MM-DD')
+            }
+          })
+        } else {
+          this.oaReimburseFeeitemList = []
+        }
+      })
+    },
+    handleCtBlur(e) {
+      return new Promise(resolve => {
+        if (e.target.value) {
+          this.$loading(false)
+          getPaymentPlanPage({
+            pageNo: 1,
+            pageSize: 10,
+            contractNumber: e.target.value,
+            type: 1
+          }).then((res) => {
+            if (res.data && res.data.list.length) {
+              const { paymentPlanDetailDOList } = res.data.list[0]
+              this.oaReimburseFeeitemList = (paymentPlanDetailDOList || []).map(item => {
+                return {
+                  ...item,
+                  actualAmount: Math.floor(Number(item.actualAmount) * 100) / 100,
+                  planTime: dayjs(item.planTime).format('YYYY/MM/DD')
+                }
+              })
+              if (this.oaReimburseFeeitemList.length) {
+                this.oaListIsDisabled = true
+              }
+              let obj = res.data && res.data.list.length ? res.data.list[0] : null
+              if (obj) {
+                const { startTime, endTime, supplierId, actualAmount, managerPhone } = obj
+                this.form = {
+                  contractNumber: this.form.contractNumber,
+                  contractName: null,
+                  contractType: null,
+                  isCollect: null,
+                  receivedAmount: null,
+                  dealContent: null,
+                  other: null,
+                  time: `${dayjs(startTime).format('YYYY-MM-DD')} ~ ${dayjs(endTime).format('YYYY-MM-DD')}`,
+                  date: [startTime, endTime],
+                  supplierId: Number(supplierId),
+                  amount: actualAmount,
+                  startTime,
+                  endTime,
+                  managerPhone
+                }
+              }
+              this.$loading(false)
+            } else {
+              // this.handleResetForm()
+              this.$loading(false)
+              this.oaListIsDisabled = false
+            }
+            resolve()
+          }).catch(() => {
+            this.$loading(false)
+            this.oaListIsDisabled = false
+            // this.handleResetForm()
+            resolve()
+          })
+        } else {
+          this.oaReimburseFeeitemList = []
+          this.oaListIsDisabled = false
+          // this.handleResetForm()
+          resolve()
+        }
+      })
+    },
+    handleChange(val, type) {
+      if (val) {
+        listUser({
+          pageNo: 1,
+          pageSize: 100,
+          deptId: val,
+        }).then((ns) => {
+          this.signatoryList = ns.data && ns.data.list || []
+          this.signatoryList = this.signatoryList.map((item) => {
+            return {
+              ...item,
+              nickname: `${item.nickname} ${item.userNumber ? `(${item.userNumber})` : ''}`
+            }
+          })
+          if (!type) {
+            this.$set(this.form, 'signatoryId', null)
+          }
+        })
+      } else {
+        this.signatoryList = []
+        this.$set(this.form, 'signatoryId', null)
+      }
+    },
+    handleClear() {
+      this.$set(this.form, 'time', null)
+    },
+    handleSetAccessId(id) {
+      this.accessId = id
+    },
+    handleBtConfirm(key) {
+      if (key == 2 || key == 3) {
+        return
+      }
+      this.$nextTick(() => {
+        this.$refs.form.validate().then(() => {
+          if (this.oaReimburseFeeitemList.length) {
+            let list = this.oaReimburseFeeitemList
+            for (let i = 0; i < list.length; i++) {
+              if (!(list[i].planTime && list[i].percentage && list[i].actualAmount)) {
+                // this.$modal.msgWarning(`该合同暂无付款输入有误！`)
+                if (!list[i].planTime) {
+                  return this.$fm('请选择预计付款时间!')
+                }
+                let numreg = /^[1-9]\d*$/
+                if (!list[i].percentage || (!(list[i].percentage && (numreg.test(list[i].percentage))))) {
+                  return this.$fm('比例仅支持整数!')
+                }
+                if (!list[i].actualAmount || (!(Number(list[i].actualAmount) > 0))) {
+                  return this.$fm('实付金额输入有误!')
+                }
+              }
+            }
+          }
+          // 添加/修改的提交
+          let newForm = {
+            // approvalBiddingIdList: this.form.supplierList.filter(item => item.isWin == 1).map(n => n.id),
+            ...this.form,
+            id: this.form.id,
+            status: key,
+            files: this.fileList,
+            oaReimburseFeeitemList: (this.oaReimburseFeeitemList).map(item => {
+              return {
+                ...item,
+                planTime: dayjs(item.planTime).valueOf()
+              }
+            })
+          }
+          this.$loading(true, 'form')
+          createSupplierContract(newForm).then((res) => {
+            this.$loading(false, 'form')
+            this.$sm(`${this.form.id ? '修改成功!' : '新增成功!'}`)
+            if (['add'].includes(this.$route.query.type)) {
+              this.$EventBus.$emit('handleResetLive', 'contract-mySupplier')
+            }
+            history.back()
+          }).catch(() => {
+            this.$loading(false, 'form')
+          })
+          // })
+          if (!this.oaReimburseFeeitemList.length) {
+            this.$loading(false, 'form')
+            return this.$fm('暂无付款计划,无法提交!')
+          }
+        }).catch((err) => {
+          this.$loading(false, 'form')
+          if (err && err.length > 0 && err[0].name) {
+            const fieldElement = this.$refs.form.$el.querySelector(`[name="${err[0].name}"]`);
+            const fieldHeight = fieldElement && fieldElement.offsetHeight;
+            const scrollHeight = fieldHeight + 50; // 假设添加了 50px 的额外高度
+            this.$refs.form.scrollToField(err[0].name, scrollHeight);
+          }
+          if (err && err.length) {
+            if (err[0].name === "managerPhone") {
+              return this.$fm('经办人手机号码错误!')
+            }
+          }
+        })
+      })
+    },
+    handleInitForm() {
+      const { id, type } = this.$route.query || {}
+      this.typeStr = type
+      if (id) {
+        this.$loading(true, 'loadingSb')
+        getSupplierContract(id).then((res) => {
+          this.form = res.data || {};
+          this.form = {
+            ...this.form,
+            time: `${dayjs(this.form.startTime).format('YYYY-MM-DD')} ~ ${dayjs(this.form.endTime).format('YYYY-MM-DD')}`,
+            departmentId: Number(this.form.departmentId),
+            signatoryId: Number(this.form.signatoryId),
+            isCollect: Number(this.form.isCollect),
+          }
+          this.handleChange(this.form.departmentId, 1)
+          // this.handleCtBlur({
+          //   target: {
+          //     value: res.data.contractNumber
+          //   }
+          // })
+          // this.handleInitOaReimburseFeeitemList(res.data.contractNumber)
+          this.oaReimburseFeeitemList = this.form.oaReimburseFeeitemList || []
+          this.oaReimburseFeeitemList = this.oaReimburseFeeitemList.map((item) => {
+            return {
+              ...item,
+              planTime: dayjs(item.planTime).format('YYYY/MM/DD')
+            }
+          })
+          this.fileList = res.data.files || []
+          this.isAuthorised = res.data.isAuthorised
+          this.$nextTick(() => {
+            this.$refs.BottomBtn.handleFilterBtnList()
+          })
+          console.log('this.form..', this.form);
+        }).finally(() => {
+          this.$loading(false, 'loadingSb')
+        })
+      }
+    },
+    handleUpload(list) {
+      this.fileList = list
+    },
+    handleNewConfirmPo(arr, index) {
+      let nameArr = []
+      this.userList.forEach(element => {
+        if (arr.includes(element.id)) {
+          nameArr.push(element.nickname)
+        }
+      });
+      this.$set(this.form.expenseApplyTrips[index], 'tripPartners', arr)
+      this.$set(this.form.expenseApplyTrips[index], 'tripPartnersName', nameArr.join('、'))
+      this.$set(this.form.expenseApplyTrips[index], 'isOpen', false)
+    },
+    handleConfirmPo(arr, index) {
+      let nameArr = this.form.expenseApplyTrips[index].tripPartnersName && this.form.expenseApplyTrips[index].tripPartnersName.split('、') || []
+      let newArr = this.form.expenseApplyTrips[index].tripPartners || []
+      this.userList.forEach(element => {
+        if (arr.includes(element.id)) {
+          nameArr.push(element.nickname)
+          newArr.push(element.id)
+        }
+      });
+      this.$set(this.form.expenseApplyTrips[index], 'tripPartners', newArr)
+      this.$set(this.form.expenseApplyTrips[index], 'tripPartnersName', nameArr.join('、'))
+      this.$set(this.form.expenseApplyTrips[index], 'isOpen', false)
+    },
+    handlePoShow(index) {
+      if (this.disabled) return
+      if (this.form.expenseApplyTrips[index].tripPartners.length) {
+        this.$set(this.form.expenseApplyTrips[index], 'type', 0)
+        this.$set(this.form.expenseApplyTrips[index], 'isOpen', true)
+      } else {
+        this.$fm('请先添加同行人！')
+      }
+
+    },
+    handlePoCancel(index) {
+      this.$set(this.form.expenseApplyTrips[index], 'isOpen', false)
+    },
+    handleAddPeo(index) {
+      this.$set(this.form.expenseApplyTrips[index], 'isOpen', true)
+      this.$set(this.form.expenseApplyTrips[index], 'type', 1)
+    },
+    handleDel(index) {
+      this.form.expenseApplyTrips.splice(index, 1)
+    },
+    handleAdd() {
+      this.form.expenseApplyTrips.push({
+        time: null,
+        startTime: null,
+        endTime: null,
+        departureLocation: null,
+        departureLocationName: '',
+        destinationLocation: null,
+        destinationLocationName: '',
+        tripDay: undefined,
+        tripType: null,
+        tripPartners: [], // 出差同行人
+        tripPartnersName: "",
+        amount: undefined,
+        isOpen: false,
+        type: 0,
+      })
+    },
+    handleInitList() {
+      return new Promise((resolve) => {
+        getSupplierCompanyPage({
+          pageNo: 1,
+          pageSize: 1000,
+        }).then((res) => {
+          this.supplierList = res.data.list || []
+          resolve()
+        })
+        getCustomerContractTypeListAll({
+          type: 2
+        }).then((res) => {
+          this.typeList = res.data || []
+        })
+        getProjectPage({type:2,pageNo: 1,
+          pageSize: 500}).then(res=>{
+          this.projectList = res.data.list || []
+        })
+        listData({
+          pageNo: 1,
+          pageSize: 50,
+          dictType: "capital_source",
+        }).then((res) => {
+          this.capitalSource = res.data.list || [];
+        });
+      })
+    },
+    handleDateShow(dateType) {
+      if (this.disabled) return
+      this.dateType = dateType
+      this.$nextTick(() => {
+        let date = dateType == 'dateSigning'?this.form.dateSigning:dateType=='proposerTime'?this.form.proposerTime:dateType=='startTime'?this.form.startTime:dateType=='endTime'?this.form.endTime:''
+        this.$refs.vanCalendar && this.$refs.vanCalendar.reset()
+        this.dateShow = true
+        if (date) {
+          let time = dayjs(Number(date)).format('YYYY/MM/DD');
+          this.defaultDate = new Date(time)
+        }
+      })
+    },
+    handlePDateShow(time, index) {
+      if (this.disabled) return
+      this.$nextTick(() => {
+        this.$refs.pVanCalendar && this.$refs.pVanCalendar.reset()
+        this.palnTimeShow = true
+        this.pIndex = index
+        if (time) {
+          this.pDefaultDate = dayjs(time).toDate()
+        }
+      })
+    },
+    handleDateSelect(val) {
+      if(this.dateType == 'dateSigning'){
+        this.$set(this.form, 'dateSigning1', `${dayjs(val).format('YYYY/MM/DD')}`)
+        this.$set(this.form, 'dateSigning', `${dayjs(val).valueOf()}`)
+      }
+      if(this.dateType == 'proposerTime'){
+        this.$set(this.form, 'proposerTime1', `${dayjs(val).format('YYYY/MM/DD')}`)
+        this.$set(this.form, 'proposerTime', `${dayjs(val).valueOf()}`)
+      }
+      if(this.dateType == 'startTime'){
+        this.$set(this.form, 'startTime1', `${dayjs(val).format('YYYY/MM/DD')}`)
+        this.$set(this.form, 'startTime', `${dayjs(val).valueOf()}`)
+      }
+      if(this.dateType == 'endTime'){
+        this.$set(this.form, 'endTime1', `${dayjs(val).format('YYYY/MM/DD')}`)
+        this.$set(this.form, 'endTime', `${dayjs(val).valueOf()}`)
+      }
+
+      // if (list && list.length) {
+      //   this.$set(this.form, 'time', `${dayjs(list[0]).format('YY/MM/DD')}~${dayjs(list[1]).format('YY/MM/DD')}`)
+      //   this.$set(this.form, 'startTime', dayjs(list[0]).valueOf())
+      //   this.$set(this.form, 'endTime', dayjs(list[1]).valueOf())
+      // } else {
+      //   this.$set(this.form, 'time', null)
+      //   this.$set(this.form, 'startTime', null)
+      //   this.$set(this.form, 'endTime', null)
+      // }
+      this.dateShow = false
+    },
+    handlePlanDateSelect(date) {
+      if (date) {
+        let num = this.oaReimburseFeeitemList.length - 1
+        let nextTime = (this.oaReimburseFeeitemList[this.pIndex + 1] || {}).planTime
+        let beforeTime = (this.oaReimburseFeeitemList[this.pIndex - 1] || {}).planTime
+        if (this.pIndex == 0 && nextTime) {
+          if (!(dayjs(nextTime).isAfter(date))) {
+            this.$set(this.oaReimburseFeeitemList[this.pIndex], 'planTime', null)
+            return this.$fm('当前预计付款时间必须在下一笔付款时间之前！')
+          }
+        } else if (num == this.pIndex && beforeTime || beforeTime) {
+          if (!(dayjs(date).isAfter(beforeTime))) {
+            this.$set(this.oaReimburseFeeitemList[this.pIndex], 'planTime', null)
+            return this.$fm('当前预计付款时间必须在上一笔付款时间之后！')
+          }
+        } else {
+          if (beforeTime && nextTime) {
+            if (!((dayjs(date).isAfter(beforeTime)) && (dayjs(nextTime).isAfter(date)))) {
+              this.$set(this.oaReimburseFeeitemList[this.pIndex], 'planTime', null)
+              return this.$fm('当前预计付款时间必须在上一笔和下一笔付款时间之间！')
+            }
+          }
+        }
+        this.$set(this.oaReimburseFeeitemList[this.pIndex], 'planTime', dayjs(date).format('YYYY/MM/DD'))
+      } else {
+        this.$set(this.oaReimburseFeeitemList[this.pIndex], 'planTime', null)
+      }
+      this.palnTimeShow = false
+    },
+  },
+}
+</script>
+<style scoped lang="scss">
+@import '~@/assets/style/common/form.scss';
+</style>
\ No newline at end of file
diff --git a/src/views/contract/receipts/index.vue b/src/views/contract/receipts/index.vue
new file mode 100644
index 0000000..542f3d3
--- /dev/null
+++ b/src/views/contract/receipts/index.vue
@@ -0,0 +1,628 @@
+<template>
+  <div class="common-list-contain">
+    <div class="common-form">
+      <van-form ref="form" :show-error-message="false" validate-trigger="" :submit-on-enter="false">
+        <div class="section"> <span class="line"> </span> 审批内容</div>
+        <div class="trips-box">
+          <div class="item-box">
+            <van-field v-model="form.contractNumber" @blur="handleCtBlur" placeholder="请输入" :disabled="['edit','show'].includes(this.$route.query.type)" :rules="[{ required: true, message: '请输入' }]" required label="合同编号" clear-trigger="always" input-align="right" />
+            <van-field v-model="form.contractName" required placeholder="请输入" :disabled="disabled" :rules="[{ required: true, message: '请输入' }]" label="合同名称" clear-trigger="always" input-align="right" />
+            <van-field right-icon="arrow" :rules="[{ required: true, message: '请选择' }]" :disabled="disabled ||oaListIsDisabled" :class="form.startTime ? 'actived-disabled':''" :name="`time`" placeholder="请选择" v-model="form.startTime1" @click="handleDateShow('startTime')" label="合同开始时间" clear-trigger="always" input-align="right" />
+            <van-field right-icon="arrow" :rules="[{ required: true, message: '请选择' }]" :disabled="disabled ||oaListIsDisabled" :class="form.endTime ? 'actived-disabled':''" :name="`time`" placeholder="请选择" v-model="form.endTime1" @click="handleDateShow('endTime')" label="合同结束时间" clear-trigger="always" input-align="right" />
+            <RePick v-model="form.supplierId" :disabled="disabled ||oaListIsDisabled " titleKey="companyAme" idKey="id" label="供应商名称" name="supplierId" :list="supplierList" isRequrie isCell clearable />
+            <RePick v-model="form.departmentId" :disabled="disabled" label="签约部门" @change="handleChange" :name="`departmentId`" :list="userDeptTree" isRequrie isCascader isShowSearch title="签约部门" titleKey="name" isCell clearable />
+            <RePick v-model="form.signatoryId" :disabled="disabled" titleKey="nickname" idKey="id" label="签约人员" name="signatoryId" :list="signatoryList" isRequrie isCell clearable />
+            <RePick v-model="form.contractType" :disabled="disabled" titleKey="contractName" idKey="id" label="合同类型" name="contractType" :list="typeList" isRequrie isCell clearable />
+            <RePick v-model="form.projectId" :disabled="disabled" titleKey="projectName" idKey="id" label="所属项目" name="contractType" :list="projectList" isRequrie isCell clearable />
+            <van-field v-model="form.amount" :disabled="disabled" type=" number" name="amount" placeholder="请输入" input-align="right" required :rules="[{ required: true, message: '格式错误',validator: VerifyFunc.validatorMoney }]" label="合同总金额" />
+            <van-field label="是否收票" required name="isCollect" :disabled="disabled" input-align="right" :rules="[{ required:true, message: '请选择'  }]" label-width="9em">
+              <template #input>
+                <van-radio-group :disabled="disabled" v-model="form.isCollect" direction="horizontal">
+                  <van-radio :name="1">是</van-radio>
+                  <van-radio :name="0">否</van-radio>
+                </van-radio-group>
+              </template>
+            </van-field>
+            <van-field v-model="form.managerPhone" :disabled="disabled" name="managerPhone" type="number" placeholder="请输入" input-align="right" required :rules="[{ required: true, message: '格式错误',validator: VerifyFunc.rePhone }]" label="经办人电话" />
+            <van-field v-model="form.dealContent" :disabled="disabled" name="reason" autosize rows="2" label="交易内容" required :rules="[{ required: true, message: '请输入' }]" clear-trigger="always" input-align="right" placeholder="请输入" type="textarea" />
+            <RePick v-model="form.capitalSource" :disabled="disabled" titleKey="label" idKey="value" label="资金来源" name="capitalSource" :list="capitalSource" isCell clearable />
+            <van-field v-model="form.proposerPerson" :disabled="disabled" name="proposerPerson" type="number" placeholder="请输入" input-align="right" label="申请人" />
+            <van-field v-model="form.taxAmount" :disabled="disabled" name="taxAmount" type="number" placeholder="请输入" input-align="right" label="合同金额(含税)" />
+            <van-field right-icon="arrow" :rules="[{ required: true, message: '请选择' }]" :disabled="disabled" :class="form.proposerTime ? 'actived-disabled':''" :name="`time`" placeholder="请选择" v-model="form.proposerTime1" @click="handleDateShow('proposerTime')" label="申请时间" clear-trigger="always" input-align="right" />
+            <van-field v-model="form.taxForeheads" :disabled="disabled" name="taxForeheads" type="number" placeholder="请输入" input-align="right" label="税额" />
+            <van-field v-model="form.taxRate" :disabled="disabled" name="taxRate" type="number" placeholder="请输入" input-align="right" label="税率" />
+            <van-field right-icon="arrow" :rules="[{ required: true, message: '请选择' }]" :disabled="disabled" :class="form.dateSigning ? 'actived-disabled':''" :name="`time`" placeholder="请选择" v-model="form.dateSigning1" @click="handleDateShow('dateSigning')" label="签订时间" clear-trigger="always" input-align="right" />
+            <van-field v-model="form.other" :disabled="disabled" name="reason" autosize rows="2" label="合同简述" required :rules="[{ required: true, message: '请输入' }]" clear-trigger="always" input-align="right" placeholder="请输入" type="textarea" />
+          </div>
+        </div>
+        <div class="section mt5"> <span class="line"> </span>附件</div>
+        <div class="trips-box">
+          <div class="item-box">
+            <UploadFile :typeStr="typeStr" @onConfirm="handleUpload" :fileList="fileList" />
+          </div>
+        </div>
+        <div class="section mt5"> <span class="line"> </span>
+          <van-button type="info" size="small" :disabled="disabled || oaListIsDisabled" native-type="button" @click="handleAddPay" round>增加付款计划</van-button>
+        </div>
+        <div class="section mt5"> <span class="line"> </span>付款计划</div>
+        <div class="trips-box">
+          <div class="item-box" v-for="(item,index) in oaReimburseFeeitemList" :key="index">
+            <div class="oaList">
+              <div>
+                序号 {{index + 1}}
+              </div>
+              <div @click="handleDelOa(index)">
+                <van-icon name="delete-o" size="20" :color="`${disabled || oaListIsDisabled ? '#c8c9cc' : ''}`" />
+              </div>
+            </div>
+            <van-field v-model="item.planTime" label="计划付款时间" :disabled="disabled || oaListIsDisabled" :class="disabled ? 'actived-disabled':''" placeholder="请选择" @click="handlePDateShow(item.planTime,index)" :right-icon="item.planTime ?  '' :'arrow' " input-align="right" readonly autosize rows="1" type="textarea">
+            </van-field>
+            <van-field v-model="item.planName" label="计划名称" :disabled="disabled || oaListIsDisabled" name="planName" placeholder="请输入" input-align="right">
+            </van-field>
+            <van-field v-model="item.percentage" label="比例(数字)" :disabled="disabled || oaListIsDisabled" @blur="handleBulrPe($event,index)" name="percentage" type="number" placeholder="请输入" input-align="right">
+            </van-field>
+            <van-field v-model="item.actualAmount" name="actualAmount" :disabled="disabled || oaListIsDisabled" type="number" placeholder="请输入" input-align="right" label="实付金额" />
+            <van-field v-model="item.planMemo" label="备注" :disabled="disabled || oaListIsDisabled" name="planMemo" placeholder="请输入" input-align="right">
+            </van-field>
+          </div>
+        </div>
+        <div class="section mt5" v-if="['show'].includes(typeStr)"> <span class="line"> </span>审批流程</div>
+        <ApprovalProcess v-if="['show'].includes(typeStr)" :processInstanceId="form.processInstanceId" @onSetId="handleSetAccessId" />
+      </van-form>
+    </div>
+    <BottomBtn ref="BottomBtn" :isAuthorised="isAuthorised" @onBtConfirm="handleBtConfirm" :accessId="accessId" />
+
+    <!--行程时间范围选择 -->
+    <van-calendar ref="vanCalendar" allow-same-day :maxDate="maxDate" v-model="dateShow" :min-date="minDate" :default-date="defaultDate" color="#0088FE" @confirm="handleDateSelect" />
+    <!--预计付款时间选择 -->
+    <van-calendar ref="pVanCalendar" allow-same-day :maxDate="maxDate" v-model="palnTimeShow" :min-date="minDate" :default-date="pDefaultDate" color="#0088FE" @confirm="handlePlanDateSelect" />
+
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs';
+import { createSupplierContract, getSupplierContract } from '@/api/bs/supplierContract'
+import { getSupplierCompanyPage } from "@/api/bs/quotationSheet";
+import { listData } from "@/api/system/dict/data";
+import VerifyFunc from '@/utils/verify'
+import { getPaymentPlanPage } from "@/api/bs/paymentPlan";
+import { Dialog } from 'vant'
+import {
+  listUser,
+} from "@/api/system/user";
+import { getCustomerContractTypeListAll } from '@/api/bs/contractType'
+import { getProjectPage } from "@/api/bs/project";
+export default {
+  //import引入组件才能使用
+  name: 'contract-supplier',
+  props: {},
+  components: {
+    UploadFile: () => import('@/components/UploadFile'),
+    RePick: () => import('@/components/ReComponents/RePick'),
+    ApprovalProcess: () => import('@/components/ApprovalProcess'),
+    BottomBtn: () => import('@/components/BottomBtn'),
+  },
+  // 计算属性
+  computed: {
+    areaTree() {
+      return this.$store.getters.areaTree
+    },
+    userDeptTree() {
+      return this.$store.getters.userDeptTree
+    },
+    cn() {
+      return window.localStorage.getItem('cn')
+    },
+    userInfo() {
+      return JSON.parse(window.localStorage.getItem('userInfo') || { dept: {} })
+    },
+    disabled() {
+      return ['show'].includes(this.$route.query.type)
+    },
+  },
+  // 生命周期，创建完成时（可以访问当前this实例）
+  created() {
+    this.$loading(true)
+    this.handleInitList().then(() => {
+      this.$loading(false)
+      this.handleInitForm()
+    })
+  },
+  // 生命周期：挂载完成时（可以访问DOM元素）
+  mounted() {
+
+  },
+  data() {
+    return {
+      pIndex: 0,
+      pDefaultDate: new Date(),
+      palnTimeShow: false,
+      oaListIsDisabled: false,
+      isSave: false,
+      isRereset: false,
+      VerifyFunc,
+      typeList: [],
+      capitalSource: [],
+      projectList: [],
+      signatoryList: [],
+      departmentList: [],
+      dayjs,
+      supplierList: [],
+      accessId: null,
+      isAuthorised: false,
+      typeStr: null, // show: 查看 edit: 编辑: 其他新增
+      fileList: [],
+      btnList: [],
+      index: 0,
+      minDate: new Date('2000/01/01'),
+      maxDate: new Date('2030/01/01'),
+      defaultDate: new Date(),
+      dateShow: false,
+      form: {
+        time: null,
+        supplierId: null,
+        contractNumber: null,
+        contractName: null,
+        contractType: null,
+        amount: null,
+        isCollect: null,
+        managerPhone: null,
+        receivedAmount: null,
+        dealContent: null,
+        other: null,
+      },
+      oaReimburseFeeitemList: [],
+      dateType: ''
+    };
+  },
+
+  // 监听data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    handleDelOa(index) {
+      if (this.disabled || this.oaListIsDisabled) {
+        return
+      }
+      Dialog.confirm({
+        title: '提示',
+        message: '你确定要删除吗?',
+      }).then(() => {
+        this.oaReimburseFeeitemList.splice(index, 1)
+      })
+    },
+    handleBulrPe(e, index) {
+      let list = this.oaReimburseFeeitemList
+      if (this.form.amount) {
+        this.$set(list[index], 'actualAmount', (this.form.amount * (Number(e.target.value) / 100)).toFixed(2))
+      } else {
+        this.$fm('输入合同金额,自动计算实付金额!')
+      }
+    },
+    handleAddPay() {
+      this.oaReimburseFeeitemList.push({
+        planTime: null,
+        percentage: undefined,
+        actualAmount: undefined
+      })
+    },
+    handleResetForm() {
+      // this.form = {
+      //   time: null,
+      //   supplierId: null,
+      //   contractNumber: this.form.contractNumber,
+      //   contractName: null,
+      //   contractType: null,
+      //   amount: null,
+      //   isCollect: null,
+      //   managerPhone: null,
+      //   receivedAmount: null,
+      //   dealContent: null,
+      //   other: null,
+      // }
+      this.oaReimburseFeeitemList = []
+    },
+    handleInitOaReimburseFeeitemList(e) {
+      getPaymentPlanPage({
+        pageNo: 1,
+        pageSize: 10,
+        contractNumber: e
+      }).then((res) => {
+        if (res.data && res.data.list.length) {
+          const { paymentPlanDetailDOList } = res.data.list[0]
+          this.oaReimburseFeeitemList = (paymentPlanDetailDOList || []).map(item => {
+            return {
+              ...item,
+              actualAmount: Math.floor(Number(item.actualAmount) * 100) / 100,
+              planTime: dayjs(item.planTime).format('YYYY-MM-DD')
+            }
+          })
+        } else {
+          this.oaReimburseFeeitemList = []
+        }
+      })
+    },
+    handleCtBlur(e) {
+      return new Promise(resolve => {
+        if (e.target.value) {
+          this.$loading(false)
+          getPaymentPlanPage({
+            pageNo: 1,
+            pageSize: 10,
+            contractNumber: e.target.value,
+            type: 1
+          }).then((res) => {
+            if (res.data && res.data.list.length) {
+              const { paymentPlanDetailDOList } = res.data.list[0]
+              this.oaReimburseFeeitemList = (paymentPlanDetailDOList || []).map(item => {
+                return {
+                  ...item,
+                  actualAmount: Math.floor(Number(item.actualAmount) * 100) / 100,
+                  planTime: dayjs(item.planTime).format('YYYY/MM/DD')
+                }
+              })
+              if (this.oaReimburseFeeitemList.length) {
+                this.oaListIsDisabled = true
+              }
+              let obj = res.data && res.data.list.length ? res.data.list[0] : null
+              if (obj) {
+                const { startTime, endTime, supplierId, actualAmount, managerPhone } = obj
+                this.form = {
+                  contractNumber: this.form.contractNumber,
+                  contractName: null,
+                  contractType: null,
+                  isCollect: null,
+                  receivedAmount: null,
+                  dealContent: null,
+                  other: null,
+                  time: `${dayjs(startTime).format('YYYY-MM-DD')} ~ ${dayjs(endTime).format('YYYY-MM-DD')}`,
+                  date: [startTime, endTime],
+                  supplierId: Number(supplierId),
+                  amount: actualAmount,
+                  startTime,
+                  endTime,
+                  managerPhone
+                }
+              }
+              this.$loading(false)
+            } else {
+              // this.handleResetForm()
+              this.$loading(false)
+              this.oaListIsDisabled = false
+            }
+            resolve()
+          }).catch(() => {
+            this.$loading(false)
+            this.oaListIsDisabled = false
+            // this.handleResetForm()
+            resolve()
+          })
+        } else {
+          this.oaReimburseFeeitemList = []
+          this.oaListIsDisabled = false
+          // this.handleResetForm()
+          resolve()
+        }
+      })
+    },
+    handleChange(val, type) {
+      if (val) {
+        listUser({
+          pageNo: 1,
+          pageSize: 100,
+          deptId: val,
+        }).then((ns) => {
+          this.signatoryList = ns.data && ns.data.list || []
+          this.signatoryList = this.signatoryList.map((item) => {
+            return {
+              ...item,
+              nickname: `${item.nickname} ${item.userNumber ? `(${item.userNumber})` : ''}`
+            }
+          })
+          if (!type) {
+            this.$set(this.form, 'signatoryId', null)
+          }
+        })
+      } else {
+        this.signatoryList = []
+        this.$set(this.form, 'signatoryId', null)
+      }
+    },
+    handleClear() {
+      this.$set(this.form, 'time', null)
+    },
+    handleSetAccessId(id) {
+      this.accessId = id
+    },
+    handleBtConfirm(key) {
+      if (key == 2 || key == 3) {
+        return
+      }
+      this.$nextTick(() => {
+        this.$refs.form.validate().then(() => {
+          if (this.oaReimburseFeeitemList.length) {
+            let list = this.oaReimburseFeeitemList
+            for (let i = 0; i < list.length; i++) {
+              if (!(list[i].planTime && list[i].percentage && list[i].actualAmount)) {
+                // this.$modal.msgWarning(`该合同暂无付款输入有误！`)
+                if (!list[i].planTime) {
+                  return this.$fm('请选择预计付款时间!')
+                }
+                let numreg = /^[1-9]\d*$/
+                if (!list[i].percentage || (!(list[i].percentage && (numreg.test(list[i].percentage))))) {
+                  return this.$fm('比例仅支持整数!')
+                }
+                if (!list[i].actualAmount || (!(Number(list[i].actualAmount) > 0))) {
+                  return this.$fm('实付金额输入有误!')
+                }
+              }
+            }
+          }
+          // 添加/修改的提交
+          let newForm = {
+            // approvalBiddingIdList: this.form.supplierList.filter(item => item.isWin == 1).map(n => n.id),
+            ...this.form,
+            id: this.form.id,
+            status: key,
+            files: this.fileList,
+            oaReimburseFeeitemList: (this.oaReimburseFeeitemList).map(item => {
+              return {
+                ...item,
+                planTime: dayjs(item.planTime).valueOf()
+              }
+            })
+          }
+          this.$loading(true, 'form')
+          createSupplierContract(newForm).then((res) => {
+            this.$loading(false, 'form')
+            this.$sm(`${this.form.id ? '修改成功!' : '新增成功!'}`)
+            if (['add'].includes(this.$route.query.type)) {
+              this.$EventBus.$emit('handleResetLive', 'contract-mySupplier')
+            }
+            history.back()
+          }).catch(() => {
+            this.$loading(false, 'form')
+          })
+          // })
+          if (!this.oaReimburseFeeitemList.length) {
+            this.$loading(false, 'form')
+            return this.$fm('暂无付款计划,无法提交!')
+          }
+        }).catch((err) => {
+          this.$loading(false, 'form')
+          if (err && err.length > 0 && err[0].name) {
+            const fieldElement = this.$refs.form.$el.querySelector(`[name="${err[0].name}"]`);
+            const fieldHeight = fieldElement && fieldElement.offsetHeight;
+            const scrollHeight = fieldHeight + 50; // 假设添加了 50px 的额外高度
+            this.$refs.form.scrollToField(err[0].name, scrollHeight);
+          }
+          if (err && err.length) {
+            if (err[0].name === "managerPhone") {
+              return this.$fm('经办人手机号码错误!')
+            }
+          }
+        })
+      })
+    },
+    handleInitForm() {
+      const { id, type } = this.$route.query || {}
+      this.typeStr = type
+      if (id) {
+        this.$loading(true, 'loadingSb')
+        getSupplierContract(id).then((res) => {
+          this.form = res.data || {};
+          this.form = {
+            ...this.form,
+            time: `${dayjs(this.form.startTime).format('YYYY-MM-DD')} ~ ${dayjs(this.form.endTime).format('YYYY-MM-DD')}`,
+            departmentId: Number(this.form.departmentId),
+            signatoryId: Number(this.form.signatoryId),
+            isCollect: Number(this.form.isCollect),
+          }
+          this.handleChange(this.form.departmentId, 1)
+          // this.handleCtBlur({
+          //   target: {
+          //     value: res.data.contractNumber
+          //   }
+          // })
+          // this.handleInitOaReimburseFeeitemList(res.data.contractNumber)
+          this.oaReimburseFeeitemList = this.form.oaReimburseFeeitemList || []
+          this.oaReimburseFeeitemList = this.oaReimburseFeeitemList.map((item) => {
+            return {
+              ...item,
+              planTime: dayjs(item.planTime).format('YYYY/MM/DD')
+            }
+          })
+          this.fileList = res.data.files || []
+          this.isAuthorised = res.data.isAuthorised
+          this.$nextTick(() => {
+            this.$refs.BottomBtn.handleFilterBtnList()
+          })
+          console.log('this.form..', this.form);
+        }).finally(() => {
+          this.$loading(false, 'loadingSb')
+        })
+      }
+    },
+    handleUpload(list) {
+      this.fileList = list
+    },
+    handleNewConfirmPo(arr, index) {
+      let nameArr = []
+      this.userList.forEach(element => {
+        if (arr.includes(element.id)) {
+          nameArr.push(element.nickname)
+        }
+      });
+      this.$set(this.form.expenseApplyTrips[index], 'tripPartners', arr)
+      this.$set(this.form.expenseApplyTrips[index], 'tripPartnersName', nameArr.join('、'))
+      this.$set(this.form.expenseApplyTrips[index], 'isOpen', false)
+    },
+    handleConfirmPo(arr, index) {
+      let nameArr = this.form.expenseApplyTrips[index].tripPartnersName && this.form.expenseApplyTrips[index].tripPartnersName.split('、') || []
+      let newArr = this.form.expenseApplyTrips[index].tripPartners || []
+      this.userList.forEach(element => {
+        if (arr.includes(element.id)) {
+          nameArr.push(element.nickname)
+          newArr.push(element.id)
+        }
+      });
+      this.$set(this.form.expenseApplyTrips[index], 'tripPartners', newArr)
+      this.$set(this.form.expenseApplyTrips[index], 'tripPartnersName', nameArr.join('、'))
+      this.$set(this.form.expenseApplyTrips[index], 'isOpen', false)
+    },
+    handlePoShow(index) {
+      if (this.disabled) return
+      if (this.form.expenseApplyTrips[index].tripPartners.length) {
+        this.$set(this.form.expenseApplyTrips[index], 'type', 0)
+        this.$set(this.form.expenseApplyTrips[index], 'isOpen', true)
+      } else {
+        this.$fm('请先添加同行人！')
+      }
+
+    },
+    handlePoCancel(index) {
+      this.$set(this.form.expenseApplyTrips[index], 'isOpen', false)
+    },
+    handleAddPeo(index) {
+      this.$set(this.form.expenseApplyTrips[index], 'isOpen', true)
+      this.$set(this.form.expenseApplyTrips[index], 'type', 1)
+    },
+    handleDel(index) {
+      this.form.expenseApplyTrips.splice(index, 1)
+    },
+    handleAdd() {
+      this.form.expenseApplyTrips.push({
+        time: null,
+        startTime: null,
+        endTime: null,
+        departureLocation: null,
+        departureLocationName: '',
+        destinationLocation: null,
+        destinationLocationName: '',
+        tripDay: undefined,
+        tripType: null,
+        tripPartners: [], // 出差同行人
+        tripPartnersName: "",
+        amount: undefined,
+        isOpen: false,
+        type: 0,
+      })
+    },
+    handleInitList() {
+      return new Promise((resolve) => {
+        getSupplierCompanyPage({
+          pageNo: 1,
+          pageSize: 1000,
+        }).then((res) => {
+          this.supplierList = res.data.list || []
+          resolve()
+        })
+        getCustomerContractTypeListAll({
+          type: 2
+        }).then((res) => {
+          this.typeList = res.data || []
+        })
+        getProjectPage({
+          type: 2, pageNo: 1,
+          pageSize: 500
+        }).then(res => {
+          this.projectList = res.data.list || []
+        })
+        listData({
+          pageNo: 1,
+          pageSize: 50,
+          dictType: "capital_source",
+        }).then((res) => {
+          this.capitalSource = res.data.list || [];
+        });
+      })
+    },
+    handleDateShow(dateType) {
+      if (this.disabled) return
+      this.dateType = dateType
+      this.$nextTick(() => {
+        let date = dateType == 'dateSigning' ? this.form.dateSigning : dateType == 'proposerTime' ? this.form.proposerTime : dateType == 'startTime' ? this.form.startTime : dateType == 'endTime' ? this.form.endTime : ''
+        this.$refs.vanCalendar && this.$refs.vanCalendar.reset()
+        this.dateShow = true
+        if (date) {
+          let time = dayjs(Number(date)).format('YYYY/MM/DD');
+          this.defaultDate = new Date(time)
+        }
+      })
+    },
+    handlePDateShow(time, index) {
+      if (this.disabled) return
+      this.$nextTick(() => {
+        this.$refs.pVanCalendar && this.$refs.pVanCalendar.reset()
+        this.palnTimeShow = true
+        this.pIndex = index
+        if (time) {
+          this.pDefaultDate = dayjs(time).toDate()
+        }
+      })
+    },
+    handleDateSelect(val) {
+      if (this.dateType == 'dateSigning') {
+        this.$set(this.form, 'dateSigning1', `${dayjs(val).format('YYYY/MM/DD')}`)
+        this.$set(this.form, 'dateSigning', `${dayjs(val).valueOf()}`)
+      }
+      if (this.dateType == 'proposerTime') {
+        this.$set(this.form, 'proposerTime1', `${dayjs(val).format('YYYY/MM/DD')}`)
+        this.$set(this.form, 'proposerTime', `${dayjs(val).valueOf()}`)
+      }
+      if (this.dateType == 'startTime') {
+        this.$set(this.form, 'startTime1', `${dayjs(val).format('YYYY/MM/DD')}`)
+        this.$set(this.form, 'startTime', `${dayjs(val).valueOf()}`)
+      }
+      if (this.dateType == 'endTime') {
+        this.$set(this.form, 'endTime1', `${dayjs(val).format('YYYY/MM/DD')}`)
+        this.$set(this.form, 'endTime', `${dayjs(val).valueOf()}`)
+      }
+
+      // if (list && list.length) {
+      //   this.$set(this.form, 'time', `${dayjs(list[0]).format('YY/MM/DD')}~${dayjs(list[1]).format('YY/MM/DD')}`)
+      //   this.$set(this.form, 'startTime', dayjs(list[0]).valueOf())
+      //   this.$set(this.form, 'endTime', dayjs(list[1]).valueOf())
+      // } else {
+      //   this.$set(this.form, 'time', null)
+      //   this.$set(this.form, 'startTime', null)
+      //   this.$set(this.form, 'endTime', null)
+      // }
+      this.dateShow = false
+    },
+    handlePlanDateSelect(date) {
+      if (date) {
+        let num = this.oaReimburseFeeitemList.length - 1
+        let nextTime = (this.oaReimburseFeeitemList[this.pIndex + 1] || {}).planTime
+        let beforeTime = (this.oaReimburseFeeitemList[this.pIndex - 1] || {}).planTime
+        if (this.pIndex == 0 && nextTime) {
+          if (!(dayjs(nextTime).isAfter(date))) {
+            this.$set(this.oaReimburseFeeitemList[this.pIndex], 'planTime', null)
+            return this.$fm('当前预计付款时间必须在下一笔付款时间之前！')
+          }
+        } else if (num == this.pIndex && beforeTime || beforeTime) {
+          if (!(dayjs(date).isAfter(beforeTime))) {
+            this.$set(this.oaReimburseFeeitemList[this.pIndex], 'planTime', null)
+            return this.$fm('当前预计付款时间必须在上一笔付款时间之后！')
+          }
+        } else {
+          if (beforeTime && nextTime) {
+            if (!((dayjs(date).isAfter(beforeTime)) && (dayjs(nextTime).isAfter(date)))) {
+              this.$set(this.oaReimburseFeeitemList[this.pIndex], 'planTime', null)
+              return this.$fm('当前预计付款时间必须在上一笔和下一笔付款时间之间！')
+            }
+          }
+        }
+        this.$set(this.oaReimburseFeeitemList[this.pIndex], 'planTime', dayjs(date).format('YYYY/MM/DD'))
+      } else {
+        this.$set(this.oaReimburseFeeitemList[this.pIndex], 'planTime', null)
+      }
+      this.palnTimeShow = false
+    },
+  },
+}
+</script>
+<style scoped lang="scss">
+@import '~@/assets/style/common/form.scss';
+</style>
\ No newline at end of file