src/api/dictionary.js

@@ -30,6 +30,15 @@ export const getRegion = (params) => (
   })
 )
 
+// 统一社会信用代码获取人员信息
+export const getCompanyInfoFormSocialCreditCode = (params) => (
+  request({
+    url: '/bocom/register/getBusinessByKeyWord',
+    method: 'get',
+    params
+  })
+)
+
 // 根据关键字模糊查询企业企查查886
 export function getEnterpriseInspectionInfo(params) {
   return request({

src/api/myFinancing/index.js

@@ -0,0 +1,117 @@
+import request from '@/utils/request'
+
+// 获取企业列表
+export function getList(data) {
+  return request({
+    url: '/financing/list',
+    method: 'post',
+    data
+  })
+}
+
+// 获取企业列表
+export function getProjectInfo(params) {
+  return request({
+    url: '/projectInfo/getLocalCreditResolutionCompletedProject',
+    method: 'get'
+  })
+}
+
+// 获取企业列表
+export function getFinishProCon(params) {
+  return request({
+    url: '/purchManagement/getPurchCompleted',
+    method: 'get',
+    params
+  })
+}
+
+// 获取联系人信息
+export function getApplicantInfo(params) {
+  return request({
+    url: '/financing/getApplicantInfo',
+    method: 'get',
+    params
+  })
+}
+
+// 选择验收货物
+export function chooseToAcceptTheGoods(data) {
+  return request({
+    url: '/financing/findGoodsByAcceptance',
+    method: 'post',
+    data
+  })
+}
+
+// 生成底层
+export function generateReceivable(data) {
+  return request({
+    url: '/financing/generateAccountsReceivable',
+    method: 'post',
+    data
+  })
+}
+
+// 申请提交
+export function applySubmit(data) {
+  return request({
+    url: '/financing/apply',
+    method: 'post',
+    data
+  })
+}
+
+// 获取详情
+export function getDetailsInfo(params) {
+  return request({
+    url: '/financing/getDetail',
+    method: 'get',
+    params
+  })
+}
+
+// 合同签署详情
+export function getContractSignDetails(params) {
+  return request({
+    url: '/financing/getSignConfirmDetail',
+    method: 'get',
+    params
+  })
+}
+
+// 刷新认证状态
+export function refreshAuthStatus(params) {
+  return request({
+    url: '/financing/getAuthStatus',
+    method: 'get',
+    params
+  })
+}
+
+// 刷新签署状态
+export function refreshSignStatus(params) {
+  return request({
+    url: '/financing/getSignStatus',
+    method: 'get',
+    params
+  })
+}
+
+// 合同签署提交
+export function contractSignSubmit(data) {
+  return request({
+    url: '/financing/contractSignConfirm/edit',
+    method: 'post',
+    data
+  })
+}
+
+// 还款计划
+export function getRepaymentPlan(params) {
+  return request({
+    url: '/financing/doViewLatestPlan',
+    method: 'get',
+    params
+  })
+}

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import personalCenter from './moudules/personalCenter'
 import MyStoreEnterprise from './moudules/myStoreEnterprise'
+import myFinancing from './moudules/myFinancing'
 import myAccount from './moudules/myAccount'
 
 Vue.use(Router)
@@ -60,6 +61,7 @@ export const constantRoutes = [
     }]
   },
   MyStoreEnterprise,
+  myFinancing,
   myAccount,
   personalCenter
   // 404 page must be placed at the end !!!

src/router/moudules/myFinancing.js

@@ -0,0 +1,54 @@
+/* Layout */
+import Layout from '@/layout'
+
+export default {
+  path: '/myFinancing',
+  component: Layout,
+  redirect: '/myFinancing/index',
+  meta: {
+    title: '我的融资',
+    icon: 'myFinancing'
+  },
+  children: [{
+    path: '/myFinancing/index',
+    name: 'MyFinancing',
+    component: () => import('@/views/myFinancing/index'),
+    hidden: true,
+    meta: {
+      title: '我的融资',
+      icon: 'myFinancing',
+      breadcrumb: false,
+      activeMenu: '/myFinancing'
+    },
+    children: [
+      {
+        path: '/myFinancing/applyFinancing/:id',
+        name: 'ApplyFinancing',
+        component: () => import('@/views/myFinancing/applyFinancing/index'),
+        hidden: true,
+        meta: { title: '申请融资', activeMenu: '/myFinancing' }
+      },
+      {
+        path: '/myFinancing/repaymentPlay/:id',
+        name: 'RepaymentPlay',
+        component: () => import('@/views/myFinancing/repaymentPlay/index'),
+        hidden: true,
+        meta: { title: '还款计划', activeMenu: '/myFinancing' }
+      },
+      {
+        path: '/myFinancing/contractSign/:id',
+        name: 'myFinancingContractSign',
+        component: () => import('@/views/myFinancing/contractSign'),
+        hidden: true,
+        meta: { title: '合同签署', activeMenu: '/myFinancing' }
+      },
+      {
+        path: '/myFinancing/see/:id',
+        name: 'MyFinancingSee',
+        component: () => import('@/views/myFinancing/see'),
+        hidden: true,
+        meta: { title: '查看', activeMenu: '/myFinancing' }
+      }
+    ]
+  }]
+}

src/views/myFinancing/applyFinancing/index.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="apply-financing">
+    <cy-info-title>融资企业</cy-info-title>
+    <el-form
+      ref="ruleForm"
+      :model="ruleForm"
+      :rules="rules"
+      label-position="top"
+      label-width="120px"
+      class="rule-form-orange"
+    >
+      <el-form-item label="企业名称" prop="businessNumber">
+        <el-select
+          v-model="ruleForm.businessNumber"
+          placeholder="请选择企业名称"
+          :disabled="disabled"
+          @change="projectChange"
+        >
+          <el-option
+            v-for="item in projectList"
+            :key="item.businessNumber"
+            :label="item.projectName"
+            :value="item.businessNumber"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="统一社会信用代码" prop="coreEnterpriseName">
+        <el-input v-model="ruleForm.coreEnterpriseName" disabled placeholder="请输入统一社会信用代码" />
+      </el-form-item>
+      <cy-info-title>融资金额</cy-info-title>
+      <el-form-item label="可申请融资金额" prop="mainEnterpriseName">
+        <cy-amount-input v-model="ruleForm.mainEnterpriseName" disabled placeholder="请输入可申请融资金额" unit-name="元" :is-unit="true" />
+      </el-form-item>
+      <el-form-item label="拟申请融资金额" prop="platformName">
+        <cy-amount-input v-model="ruleForm.platformName" placeholder="请输入拟申请融资金额" unit-name="元" :is-unit="true" />
+      </el-form-item>
+      <cy-info-title>联系信息</cy-info-title>
+      <el-form-item label="保理申请人联系人" prop="applicantContact">
+        <el-input v-model="ruleForm.applicantContact" :disabled="disabled" placeholder="请输入保理申请人联系人" />
+      </el-form-item>
+      <el-form-item label="保理申请人联系电话" prop="applicantContactNumber">
+        <el-input v-model="ruleForm.applicantContactNumber" :disabled="disabled" placeholder="请输入保理申请人联系电话" />
+      </el-form-item>
+      <el-form-item label="保理申请人联系人邮箱" prop="applicantContactEmail">
+        <el-input v-model="ruleForm.applicantContactEmail" :disabled="disabled" placeholder="请输入保理申请人联系人邮箱" />
+      </el-form-item>
+      <cy-info-title>保理收款账户信息-公户</cy-info-title>
+
+      <el-form-item label="保理收款账户户名" prop="applicantDesignatedAccountName">
+        <el-input v-model="ruleForm.applicantDesignatedAccountName" :disabled="disabled" placeholder="请输入保理收款账户户名" />
+      </el-form-item>
+      <el-form-item label="保理收款账户" prop="applicantDesignatedAccount">
+        <el-input v-model="ruleForm.applicantDesignatedAccount" :disabled="disabled" placeholder="请输入保理收款账户" />
+      </el-form-item>
+      <el-form-item label="保理收款账户开户行" prop="applicantDesignatedBank">
+        <el-input v-model="ruleForm.applicantDesignatedBank" :disabled="disabled" placeholder="请输入保理收款账户开户行" />
+      </el-form-item>
+    </el-form>
+    <div v-if="!disabled" class="submit-btn">
+      <el-button @click="$router.go(-1)">关闭</el-button>
+      <el-button type="primary" @click="submit('temp')">暂存</el-button>
+      <el-button type="primary" @click="submit('submit')">提交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProjectInfo, getFinishProCon, applySubmit, getDetailsInfo } from '@/api/myFinancing'
+import { validMail } from '@/utils/validate'
+export default {
+  name: 'ApplyFinancing',
+  props: {
+    detailsInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    var validMailData = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入保理申请人联系人邮箱'))
+      } else {
+        if (!validMail(value)) {
+          callback(new Error('请输入正确的保理申请人联系人邮箱'))
+        } else {
+          callback()
+        }
+      }
+    }
+    return {
+      ruleForm: {
+        businessNumber: '',
+        coreEnterpriseId: '',
+        coreEnterpriseName: '',
+        mainEnterpriseId: '',
+        mainEnterpriseName: '',
+        platformId: '',
+        platformName: '',
+        purchContractId: '',
+        purchContractName: '',
+        purchContractNumber: '',
+        applicantContact: '',
+        applicantContactNumber: '',
+        applicantContactEmail: '',
+        applicantDesignatedAccountName: '',
+        applicantDesignatedAccount: '',
+        applicantDesignatedBank: ''
+      },
+      rules: {
+        businessNumber: [
+          { required: true, message: '请选择项目名称', trigger: 'change' }
+        ],
+        applicantContact: [
+          { required: true, message: '请输入保理申请人联系人', trigger: 'blur' }
+        ],
+        applicantContactNumber: [
+          { required: true, message: '请输入保理申请人联系电话', trigger: 'blur' }
+        ],
+        applicantContactEmail: [
+          { required: true, message: '请输入保理申请人联系人邮箱', trigger: 'blur' },
+          { validator: validMailData, trigger: 'blur' }
+
+        ],
+        applicantDesignatedAccountName: [
+          { required: true, message: '请输入保理申请人指定账户户名', trigger: 'blur' }
+        ],
+        applicantDesignatedAccount: [
+          { required: true, message: '请输入保理申请人指定账户', trigger: 'blur' }
+        ],
+        applicantDesignatedBank: [
+          { required: true, message: '请输入保理申请人指定账户开户行', trigger: 'blur' }
+        ]
+      },
+      disabled: false
+    }
+  },
+  watch: {
+    detailsInfo: {
+      handler(val) {
+        if (val) {
+          const { type } = this.$route.query
+          if (type === 'see') {
+            this.initData(val)
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    this.getProject()
+    const { type } = this.$route.query
+    if (type === 'see') {
+      this.disabled = true
+    } else {
+      this.getDetails()
+    }
+  },
+  methods: {
+    initData(data) {
+      const { financingBasicInfo, financingGoodsInfoList, financingApplicantInfo } = data
+      this.oldTableData = financingGoodsInfoList
+      this.tableData = this.handlerGoodsFormat(financingGoodsInfoList)
+      const { applicantContact,
+        applicantContactNumber,
+        applicantContactEmail,
+        applicantDesignatedAccountName,
+        applicantDesignatedAccount,
+        applicantDesignatedBank } = financingApplicantInfo
+      this.ruleForm = {
+        ...financingBasicInfo,
+        applicantContact,
+        applicantContactNumber,
+        applicantContactEmail,
+        applicantDesignatedAccountName,
+        applicantDesignatedAccount,
+        applicantDesignatedBank
+      }
+    },
+    getDetails() {
+      const { id } = this.$route.params
+      if (id === 'add') return
+      getDetailsInfo({ id }).then(({ data }) => {
+        this.initData(data)
+      })
+    },
+    getProject() {
+      getProjectInfo().then(({ data }) => {
+        this.projectList = data
+      })
+    },
+    projectChange(val) {
+      getFinishProCon({ businessNumber: val }).then(({ data }) => {
+        this.ruleForm = {
+          ...this.ruleForm,
+          ...data
+        }
+      })
+      this.getApplican()
+      this.tableData = []
+      this.tableDataInfo = []
+    },
+    submit(type) {
+      const { applicantContact, applicantContactNumber, applicantContactEmail, applicantDesignatedAccountName, applicantDesignatedAccount, applicantDesignatedBank } = this.ruleForm
+      const fileStorageList = this.$refs.fileStorage.getFileLists
+      const params = {
+        financingBasicInfo: {
+          ...this.ruleForm
+        },
+        financingGoodsInfoList: this.oldTableData,
+        financingAccountsReceivableInfoList: this.oldTableDataInfo,
+        financingApplicantInfo: {
+          applicantContact,
+          applicantContactNumber,
+          applicantContactEmail,
+          applicantDesignatedAccountName,
+          applicantDesignatedAccount,
+          applicantDesignatedBank
+        },
+        fileIds: fileStorageList.map(item => item.id),
+        visible: type !== 'temp'
+      }
+      if (type === 'temp') {
+        applySubmit(params).then(() => {
+          this.$message.success('暂存成功')
+          this.$router.go(-1)
+        })
+      } else {
+        this.$refs.ruleForm.validate((valid) => {
+          if (valid) {
+            applySubmit(params).then(() => {
+              this.$message.success('提交成功')
+              this.$router.go(-1)
+            })
+          } else {
+            return false
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.apply-financing {
+  .statistics {
+    color: #FF0000;
+    margin-left: 20px;
+  }
+}
+
+</style>

src/views/myFinancing/contractSign.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="contract-sign">
+    <cy-info-title>电子合同信息</cy-info-title>
+
+    <div class="sign-link-box">
+      <div v-for="(item, index) in deatailList" :key="index" class="sign-item">
+        <div class="name">{{ item.name }}</div>
+        <div class="title">
+          <div>认证链接</div>
+          <div>签署链接</div>
+          <div v-for=" (citem, cindex) in item.contractElectronicCustomerInfos" :key="cindex">
+            <el-tooltip effect="dark" :content="citem.customerName" placement="top">
+              <div class="one-ellipsis">{{ citem.customerName }} </div>
+            </el-tooltip>
+          </div>
+        </div>
+        <div class="link">
+          <div class="two-link">
+            <div>
+              <div>
+                {{ item.authUrl }}
+              </div>
+              <el-button v-clipboard:copy="item.authUrl" v-clipboard:success="copySuccess" type="text" icon="iconfont icon-a-Group779" />
+            </div>
+            <div>
+              <div>
+                认证状态: {{ modifyStatus(item.authStatus, 1) }}
+              </div>
+              <div v-if="!disabled" class="tips">
+                <span><span>*</span>签署后点击「刷新」按钮”</span>
+                <el-button type="text" icon="iconfont icon-a-Group8131" @click="refreshAuth(item)" />
+              </div>
+
+            </div>
+          </div>
+          <div class="one-link">
+            <div>{{ item.contractLink }}</div>
+            <el-button v-clipboard:copy="item.contractLink" v-clipboard:success="copySuccess" type="text" icon="iconfont icon-a-Group779" />
+          </div>
+          <div v-for=" (citem, cindex) in item.contractElectronicCustomerInfos" :key="cindex" class="one-link">
+            <div>签署状态：{{ modifyStatus(citem.signStatus, 2) }}</div>
+            <div v-if="!disabled" class="tips">
+              <span><span>*</span>签署后点击「刷新」按钮”</span>
+              <el-button type="text" icon="iconfont icon-a-Group8131" @click="refreshSign(item, citem)" />
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <el-form
+      ref="ruleForm"
+      :model="ruleForm"
+      :rules="rules"
+      label-position="top"
+      class="rule-form-orange"
+    >
+      <cy-info-title>签署结论</cy-info-title>
+      <el-form-item label="签署结论" prop="conclusion">
+        <el-radio-group v-model="ruleForm.conclusion" :disabled="disabled">
+          <el-radio label="pass">完成</el-radio>
+          <el-radio label="back">退回</el-radio>
+          <el-radio label="veto">否决</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="说明"
+        prop="remark"
+        class="two-form-item"
+        :rules="[
+          { required: ruleForm.conclusion === 'back' || ruleForm.conclusion === 'veto', message: '请输入说明', trigger: 'blur' }
+        ]"
+      >
+        <el-input v-model="ruleForm.remark" :disabled="disabled" placeholder="请输入说明" />
+      </el-form-item>
+    </el-form>
+    <div v-if="!disabled" class="submit-btn">
+      <el-button @click="$router.go(-1)">关闭</el-button>
+      <el-button type="primary" @click="submit">提交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getContractSignDetails, refreshAuthStatus, refreshSignStatus, contractSignSubmit } from '@/api/myFinancing'
+export default {
+  props: {
+    detailsInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      ruleForm: {
+        conclusion: '',
+        remark: ''
+      },
+      rules: {
+        conclusion: [{ required: true, message: '请选择签署结论', trigger: 'change' }]
+      },
+      deatailList: [],
+      contractInfoId: '',
+      disabled: false
+    }
+  },
+  computed: {
+    supplierList() {
+      return this.deatailList.filter(item => item.type === 1)
+    },
+    platformList() {
+      return this.deatailList.filter(item => item.type === 2)
+    },
+    guarantorList() {
+      return this.deatailList.filter(item => item.type === 3)
+    },
+    modifyStatus() {
+      return (value, type) => {
+        if (type === 1) {
+          return value ? '已认证' : '未认证'
+        } else if (type === 2) {
+          return value ? '已签署' : '未签署'
+        } else {
+          return ''
+        }
+      }
+    }
+  },
+  watch: {
+    detailsInfo: {
+      handler(val) {
+        if (val) {
+          const { type } = this.$route.query
+          if (type === 'see') {
+            this.initData(val)
+            this.ruleForm.conclusion = val.conclusion
+            this.ruleForm.remark = val.remark
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    const { type } = this.$route.query
+    if (type === 'see') {
+      this.disabled = true
+    } else {
+      this.getDeatail()
+    }
+  },
+  methods: {
+    initData(val) {
+      this.contractInfoId = val.contractInfoId
+      this.deatailList = val.contractElectronicVos
+    },
+    getDeatail() {
+      const { id } = this.$route.params
+      getContractSignDetails({ id }).then(({ data }) => {
+        this.initData(data)
+      })
+    },
+    copySuccess() {
+      this.$message.success('复制成功')
+    },
+    refreshAuth(row) {
+      const { sysCustomerId } = row
+      refreshAuthStatus({ sysCustomerId }).then(({ data }) => {
+        this.deatailList.map(item => {
+          if (item.sysCustomerId === sysCustomerId) {
+            item.authStatus = data.authStatus
+          }
+          return item
+        })
+        this.$message.success('刷新成功')
+      })
+    },
+    refreshSign(row, crow) {
+      const { id } = crow
+      refreshSignStatus({ electronicCustomerInfoId: id }).then(({ data }) => {
+        this.deatailList.map(item => {
+          if (item.sysCustomerId === row.sysCustomerId) {
+            item.contractElectronicCustomerInfos.map(citem => {
+              if (citem.id === id) {
+                citem.signStatus = data.signStatus
+              }
+              return citem
+            })
+          }
+          return item
+        })
+        this.$message.success('刷新成功')
+      })
+    },
+    submit() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const params = {
+            ...this.ruleForm,
+            visible: true,
+            contractInfoId: this.contractInfoId
+          }
+          contractSignSubmit(params).then(() => {
+            this.$message.success('提交成功')
+            this.$router.go(-1)
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contract-sign {
+
+}
+.sign-link-box {
+  border-top: 1px solid #E4E7ED;
+  box-sizing: border-box;
+  margin: 20px 0px;
+  .sign-item {
+    display: flex;
+    .name {
+      display: flex;
+      align-items: center;
+      background: #f5f6f6;
+      padding: 0 20px;
+      min-width: 200px;
+      width: 200px;
+      box-sizing: border-box;
+      border-bottom: 1px solid #E4E7ED;
+      border-right: 1px solid #E4E7ED;
+      border-left: 1px solid #E4E7ED;
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+    .title {
+      line-height: 39.2px;
+      height: 40px;
+      min-width: 300px;
+      width: 300px;
+      & > div {
+        border-bottom: 1px solid #E4E7ED;
+        border-right: 1px solid #E4E7ED;
+        box-sizing: border-box;
+        padding: 0 20px;
+      }
+
+    }
+    .link {
+      line-height: 40px;
+      flex-grow: 1;
+      & > div {
+        border-bottom: 1px solid #E4E7ED;
+        border-right: 1px solid #E4E7ED;
+        padding: 0 20px;
+      }
+      .two-link {
+        display: flex;
+        & > div {
+          height: 40px;
+          flex: 1;
+          border-right: 1px solid #E4E7ED;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-right: 20px;
+          &:last-child {
+            padding-left: 20px;
+            padding-right: 0px;
+            border-right: none;
+          }
+        }
+      }
+      .one-link {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 40px;
+      }
+      .tips {
+        display: flex;
+        align-items: center;
+        & > span {
+          color: #b9b9b9;
+          & > span {
+            color: #ff1a1a;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.contract-sign {
+  .icon-a-Group779, .icon-a-Group813 {
+    font-size: 26px;
+  }
+}
+
+</style>

src/views/myFinancing/financingMain.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="financing-main">
+    <div class="search">
+      <div class="left" />
+      <div class="right">
+        <div>
+          <el-input v-model="search.fastSearch" placeholder="请输入企业名称" />
+        </div>
+        <div>
+          <el-input v-model="search.searchNumber" placeholder="请输入合同编号" />
+        </div>
+
+        <div>
+          <el-select v-model="search.statusCode" placeholder="请选择状态" clearable>
+            <el-option
+              v-for="item in constant.projectInitiationStatus"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+        </div>
+
+        <div class="right-btn">
+          <el-button type="primary" @click="fetchData('search')">查询</el-button>
+          <el-button type="primary" @click="applyFinancingClick">申请</el-button>
+        </div>
+      </div>
+    </div>
+    <cy-comm-table
+      ref="commTable"
+      v-loading="loading"
+      :columns="columns"
+      :data="tableData"
+      :count="count"
+      parent-component="FinancingMain"
+    />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { getList } from '@/api/myFinancing'
+export default {
+  name: 'FinancingMain',
+  data() {
+    return {
+      count: 0,
+      search: {
+        searchNumber: '',
+        statusCode: '',
+        fastSearch: ''
+      },
+      tableData: [{ id: 111, businessNumber: '2131231' }],
+      columns: [
+        {
+          label: '序号',
+          index: true
+        },
+        {
+          label: '客户名称',
+          prop: 'businessNumber',
+          showTooltip: true,
+          width: 150
+        },
+        {
+          label: '合同编号',
+          showTooltip: true,
+          prop: 'contractNumber',
+          width: 150
+        },
+        {
+          label: '支用批次',
+          prop: 'quotaDisburseBatch',
+          width: 120
+        },
+        {
+          label: '申请融资金额（元）',
+          prop: 'mainEnterpriseName',
+          showTooltip: true
+        },
+        {
+          label: '实际融资金额（元）',
+          prop: 'mainEnterpriseName',
+          showTooltip: true
+        },
+        {
+          label: '当前阶段',
+          prop: 'currentStage'
+        },
+        {
+          label: '说明',
+          prop: 'currentStage',
+          showTooltip: true
+        },
+        {
+          label: '状态',
+          prop: 'financingStatus'
+        },
+        {
+          label: '提交时间',
+          prop: 'currentStage',
+          showTooltip: true
+        },
+        {
+          label: '操作',
+          render: (h, row) => {
+            const btnList = [
+              {
+                msg: '查看',
+                icon: 'iconfont icon-a-Group957',
+                power: '',
+                rowPower: ['额度支用', '支用审核', '合同制作', '合同签署', '合同审核', '付款申请', '付款审核', '已完成'],
+                category: 'see'
+              },
+              // {
+              //   msg: '编辑',
+              //   icon: 'iconfont icon-a-Group8151',
+              //   rowPower: ['合同签署', null],
+              //   power: 'projectNumber:delete',
+              //   category: 'edit'
+              // },
+              {
+                msg: '还款计划',
+                icon: 'iconfont icon-a-Group1087',
+                power: '',
+                // '已完成'
+                rowPower: [],
+                category: 'play'
+              }
+            ]
+            const options = btnList.map(item => {
+              // this.tablePower({ item, row }) &&
+              return (
+                <el-tooltip class='item' effect='dark' content={item.msg} placement='top'>
+                  <span class='table-icon-box'>
+                    <i class={item.icon} onClick={() => { this.handlerOperate(item.category, row) }}></i>
+                  </span>
+                </el-tooltip>
+              )
+            })
+            return <div>{ options }</div>
+          },
+          width: 120
+        }
+      ],
+      loading: false
+    }
+  },
+  computed: {
+    ...mapGetters(['constant']),
+    tablePower() {
+      return ({ item, tab, row }) => {
+        const { tabPower, rowPower } = item
+        if (rowPower) {
+          if (rowPower.includes(row.currentStage) || rowPower.includes(row.financingStatus)) {
+            if (rowPower.includes(null) && row.financingStatus === '已完成') {
+              return false
+            }
+            return true
+          }
+        } else {
+          if (tabPower.includes(tab)) {
+            return true
+          }
+        }
+      }
+    }
+  },
+  created() {
+    this.$store.dispatch('getConstant', ['projectInitiationStatus'])
+  },
+  mounted() {
+    // this.fetchData()
+  },
+  methods: {
+    fetchData(type) {
+      this.loading = true
+      if (type === 'search') {
+        this.page = 1
+        this.size = 10
+      }
+      const params = {
+        ...this.search,
+        page: this.page || 1,
+        rows: this.size || 10
+      }
+      getList(params).then(({ data }) => {
+        this.loading = false
+        this.tableData = data.rows
+        this.count = data.records
+      })
+    },
+    applyFinancingClick() {
+      this.$router.push({
+        name: 'ApplyFinancing',
+        params: {
+          id: 'add'
+        }
+      })
+    },
+    handlerOperate(type, row) {
+      if (type === 'play') {
+        this.$router.push({
+          name: 'RepaymentPlay',
+          params: {
+            id: row.id
+          }
+        })
+      } else if (type === 'edit') {
+        const { currentStage } = row
+        if (currentStage === '合同签署') {
+          this.$router.push({
+            name: 'myFinancingContractSign',
+            params: {
+              id: row.id
+            }
+          })
+        } else if (currentStage === null) {
+          this.$router.push({
+            name: 'ApplyFinancing',
+            params: {
+              id: row.id
+            },
+            query: {
+              type: 'edit'
+            }
+          })
+        }
+      } else if (type === 'see') {
+        this.$router.push({
+          name: 'MyFinancingSee',
+          params: {
+            id: row.id
+          },
+          query: {
+            type: 'see'
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.financing-main {
+
+}
+</style>
+<style lang="scss">
+.financing-main {
+  .icon-a-Group957, .icon-a-Group1087 {
+    font-size: 28px;
+  }
+}
+</style>

src/views/myFinancing/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="financing-box">
+    <router-view />
+    <template v-if="!$route.params.id">
+      <financing-main />
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MyFinancing',
+  components: {
+    financingMain: () => import('./financingMain')
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.financing-box {
+
+}
+</style>

src/views/myFinancing/repaymentPlay/components/AccountsPlan.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="accounts-plan">
+    <cy-info-title>收放款计划（应收账款）</cy-info-title>
+    <div class="table-box" style="margin-top: 20px;">
+      <el-table :data="tableData">
+        <el-table-column type="index" label="序号" width="50" />
+        <el-table-column prop="basicTradeContractName" label="基础交易合同名称" show-overflow-tooltip />
+        <el-table-column prop="basicTradeContractNo" label="基础交易合同编号" show-overflow-tooltip />
+        <el-table-column prop="tripartiteAgreementNo" label="三方协议合同编号" show-overflow-tooltip />
+        <el-table-column prop="expireDate" label="到期日" show-overflow-tooltip />
+        <el-table-column prop="accountReceivableAmount" label="应收账款金额" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.currencyTypeCode }}{{ formatMoney(scope.row.accountReceivableAmount) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="accountReceivableNetAmount" label="应收账款净额" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.currencyTypeCode }}{{ formatMoney(scope.row.accountReceivableNetAmount) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="debtor" label="债务人" show-overflow-tooltip />
+        <el-table-column v-if="type === 'planChange' && !disabled" label="操作" width="145">
+          <template slot-scope="scope">
+            <div class="table-click-color">
+              <span @click="seeClick(scope.row)">查看</span>
+              <!-- <span @click="notNeedClick(scope.$index)">{{scope.row.notNeed ?  '取消豁免' : '豁免' }} </span> -->
+              <div>
+                <span @click="replaceNumber(scope.row, scope.$index)">更换三方协议编号</span>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <cy-dialog ref="replaceNumber" title="更换三方协议合同编号" class="assets-box" top="15vh">
+      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" label-position="left" class="rule-form">
+        <el-form-item label="债务人：" style="width: 100%">
+          <el-input
+            v-model="replaceItem.debtor"
+            placeholder="请输入业务编号"
+            disabled
+          />
+        </el-form-item>
+        <div class="table-box" style="width: 100%">
+          <el-table :data="replaceTableData">
+            <el-table-column prop="contractName" label="基础交易名称" />
+            <el-table-column prop="contractNo" label="基础交易合同编号" />
+            <el-table-column prop="originalContractContent" label="原合同内容" />
+            <el-table-column prop="postChangeContent" label="变更后内容" />
+          </el-table>
+        </div>
+        <el-form-item label="三方协议合同编号：" style="width: 100%" prop="tripartiteAgreementNo">
+          <el-input
+            v-model="ruleForm.tripartiteAgreementNo"
+            class="form-item-border"
+            placeholder="请输入三方协议合同编号"
+          />
+        </el-form-item>
+      </el-form>
+      <div class="submit-btn">
+        <el-button type="primary" style="width: 100px;" @click="onSubmit">确定</el-button>
+        <el-button style="width: 100px;" @click="() => { this.$refs.replaceNumber.show = false }">取消</el-button>
+      </div>
+    </cy-dialog>
+  </div>
+</template>
+
+<script>
+import { formatMoney } from '@/utils'
+export default {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    accountsPlan: {
+      type: Array,
+      default: () => []
+    },
+    // type:  planChange: 计划变更
+    type: {
+      type: String,
+      default: ''
+    },
+    // 合同放款信息ID
+    paymentInfoId: {
+      type: [String, Number],
+      defualt: ''
+    }
+  },
+  data() {
+    return {
+      tableData: [],
+      replaceTableData: [],
+      ruleForm: {
+        tripartiteAgreementNo: ''
+      },
+      rules: {
+        tripartiteAgreementNo: [
+          { required: true, message: '请输入三方协议合同编号', trigger: 'blur' }
+        ]
+      },
+      replaceItem: {}
+    }
+  },
+  computed: {
+    formatMoney() {
+      return (val) => {
+        return formatMoney(val)
+      }
+    }
+  },
+  watch: {
+    accountsPlan: {
+      handler(newV) {
+        if (newV.length) {
+          this.tableData = JSON.parse(JSON.stringify(newV))
+          this.tableData = this.tableData.map(item => {
+            item.currencyTypeCode = item.currencyType?.code
+            return item
+          })
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  methods: {
+    seeClick(row) {
+      if (row.businesstype == 'domestic_factoring') { // 国内
+        window.open('/contractInfo/contractMaking/contractDomesticAccountReceivableView?domesticAccountReceivableId=' + row.contractAccountReceivableId + '&viewDuediligence=1')
+      } else { // 出口
+        window.open('/contractInfo/contractMaking/contractExportAccountReceivableView?exportAccountReceivableId=' + row.contractAccountReceivableId + '&viewDuediligence=1')
+      }
+    },
+    notNeedClick(index) {
+      this.tableData[index].notNeed = !this.tableData[index].notNeed
+    },
+    replaceNumber(row, index) {
+      this.ruleForm.tripartiteAgreementNo = ''
+      this.$refs.replaceNumber.show = true
+      this.agreementOrder = index
+      this.replaceItem = row
+      this.replaceItem.index = index
+      const params = {
+        paymentInfoId: this.paymentInfoId,
+        underlyingAssetsId: row.underlyingAssetsId
+      }
+      this.$api.customManage.collectionLoanManage.getAgreementContent(params).then((data) => {
+        this.replaceTableData = data.data
+      })
+    },
+    onSubmit() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.tableData[this.replaceItem.index].tripartiteAgreementNo = this.ruleForm.tripartiteAgreementNo
+          this.$refs.replaceNumber.show = false
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/myFinancing/repaymentPlay/components/AccountsReceivable.vue

@@ -0,0 +1,640 @@
+<template>
+  <div class="accounts-receivable">
+    <cy-info-title>应收账款</cy-info-title>
+    <div class="table-box header-border-table table-disabled">
+      <div v-for="(item, tIndex) in tableData" :key="tIndex">
+        <cy-info-title type="left">关联第{{ tIndex + 1 }}笔应收账款</cy-info-title>
+        <el-table :data="[item]" row-key="id" :default-expand-all="tIndex === 0" :expand-row-keys="expandsKeys" @row-click="rowClick">
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <div v-for="(tPItem, tPIndex) in props.row.tradePlanFactoringList" :key="tPIndex" class="table-box">
+                <cy-info-title type="left">关联第{{ tIndex + 1 }}笔应收账款 - 第{{ tPIndex + 1 }}笔放款收放款计划</cy-info-title>
+                <el-table ref="tradePlanFactoring" :data="tPItem.planFactoringList" @selection-change="handleSelectionChange">
+                  <el-table-column v-if="oa" type="selection" width="50" :selectable="selectable" />
+                  <el-table-column type="index" label="序号" width="50" />
+                  <el-table-column prop="planDate" label="约定日期" width="160" header-align="center">
+                    <template slot-scope="{ row }">
+                      <el-date-picker
+                        v-model="row.planDate"
+                        style="width: 100%"
+                        type="date"
+                        :disabled="disabled || !row.allowedChange"
+                        placeholder="请选择约定日期"
+                        :picker-options="pickerOptions(row)"
+                      />
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="amountType" label="金额类型">
+                    <template slot-scope="scope">
+                      <el-select
+                        v-model="scope.row.amountType"
+
+                        placeholder="请选择金额类型"
+                        :disabled="disabled || !scope.row.allowedChange"
+                        style="width: 100%"
+                        @change="amountCollectionTypeChange({one: tIndex, two: index, three: scope.$index, amountType: scope.row.amountType, paymentCollectionType: scope.row.paymentCollectionType, rowData: scope.row})"
+                      >
+                        <el-option
+                          v-for="cItem in incormeExpenditureType"
+                          :key="cItem.id"
+                          :label="cItem.name"
+                          :value="cItem.id"
+                        />
+                      </el-select>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="paymentCollectionType" label="收放款类型" width="100">
+                    <template slot-scope="scope">
+                      <el-select
+                        v-model="scope.row.paymentCollectionType"
+
+                        placeholder="请选择收放款类型"
+                        :disabled="disabled || !scope.row.allowedChange"
+                        style="width: 100%"
+                        @change="amountCollectionTypeChange({one: tIndex, two: index, three: scope.$index, amountType: scope.row.amountType, paymentCollectionType: scope.row.paymentCollectionType, rowData: scope.row})"
+                      >
+                        <el-option
+                          v-for="cItem in constant.payCollType"
+                          :key="cItem.id"
+                          :label="cItem.name"
+                          :value="cItem.code"
+                        />
+                      </el-select>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="amount" label="金额" width="150">
+                    <template slot-scope="scope">
+                      <div style="display: flex; align-items: center">
+                        <span>{{ scope.row.currencyTypeCode }} </span>
+                        {{ formatMoney(scope.row.amount) }}
+                        <!-- <cy-amount-input
+                          v-model="scope.row.amount"
+                          placeholder="请输入金额"
+                          :disabled="disabled || !scope.row.allowedChange"
+                          :clearable="false"
+                          @change="amountChange(scope.row, {one: tIndex, two: index, three: scope.$index})"
+                        /> -->
+                      </div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="actualCashFlow" label="实际现金流" width="150">
+                    <template slot-scope="{row}">
+                      <div style="display: flex; align-items: center">
+                        <span>{{ row.currencyTypeCode }} </span>
+                        {{ formatMoney(row.actualCashFlow) }}
+                        <!-- <cy-amount-input
+                          v-model="row.actualCashFlow"
+                          placeholder="请输入实际现金流"
+                          disabled
+                        /> -->
+                      </div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="actualCashFlow" label="实收/付日期" width="120">
+                    <template slot-scope="{row}">
+                      <div v-for="(cItem, index) in row.paymentCollectionType === 'pay_coll_payment'? row.loanRecordList : row.collRecordList" :key="index">
+                        {{ row.paymentCollectionType === 'pay_coll_payment' ? cItem.thisLoanDate : cItem.actualDate }}
+                      </div>
+                      <!-- <cy-amount-input
+                        v-model="row.actualCashFlow"
+                        placeholder="请输入实收/付日期"
+                        :disabled="disabled"
+                        clearable
+                      >
+                      </cy-amount-input> -->
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="actualCashFlow" label="实收/付总金额" width="120">
+                    <template slot-scope="{row}">
+                      <div v-for="(cItem, index) in row.paymentCollectionType === 'pay_coll_payment'? row.loanRecordList : row.collRecordList" :key="index">
+                        {{ row.currencyTypeCode }} {{ row.paymentCollectionType === 'pay_coll_payment' ? formatMoney(cItem.thisLoanAmount) : formatMoney(cItem.actualAmount) }}
+                      </div>
+                      <!-- <cy-amount-input
+                        v-model="row.actualCashFlow"
+                        placeholder="请输入实收/付总金额"
+                        :disabled="disabled"
+                        clearable
+                      >
+                      </cy-amount-input> -->
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="receivingSubject" label="收款主体">
+                    <template slot-scope="{ row }">
+                      <el-select
+                        v-if="row.receivingSubject"
+                        v-model="row.receivingSubject"
+
+                        placeholder="请选择收款主体"
+                        :disabled="disabled || !row.allowedChange"
+                        style="width: 100%"
+                      >
+                        <el-option
+                          v-for="cItem in constant.receivingSubjectList"
+                          :key="cItem.id"
+                          :label="cItem.name"
+                          :value="cItem.code"
+                        />
+                      </el-select>
+                      <span v-else>-</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="overDate" label="宽限到期日" width="100" disabled show-overflow-tooltip />
+                  <el-table-column prop="status" label="状态">
+                    <template slot-scope="{ row }">
+                      {{ row.status }}
+                      <!-- <el-select
+                        v-model="row.status"
+
+                        placeholder="请选择状态"
+                        :disabled="disabled || !row.allowedChange"
+                        style="width: 100%"
+                      >
+                        <el-option
+                          v-for="cItem in paymentCollectionPlanStatus(row)"
+                          :key="cItem.id"
+                          :label="cItem.name"
+                          :value="cItem.code"
+                        />
+                      </el-select> -->
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="graceType" label="宽限期类型" width="100">
+                    <template slot-scope="{ row }">
+                      <!-- {{ row.graceType }} -->
+                      <!-- <el-select
+                        v-model="row.graceType"
+                        placeholder="请选择宽限期类型"
+
+                        :disabled="disabled || !row.allowedChange"
+                        style="width: 100%"
+                      >
+                        <el-option
+                          v-for="cItem in constant.graceTypeList"
+                          :key="cItem.value"
+                          :label="cItem.name"
+                          :value="cItem.value"
+                        />
+                      </el-select> -->
+                    </template>
+                  </el-table-column>
+                  <el-table-column v-if="type === 'executeFinancing' && !btnDisabled " label="操作" width="120">
+                    <template slot-scope="scope">
+                      <template v-if="scope.row.paymentCollectionType === 'pay_coll_collection'">
+                        <el-tooltip v-if="isAllocation(scope.row)" effect="dark" content="金额分配" placement="top">
+                          <i class="iconfont icon-fenpei" @click="executeFinancingModify(scope.row, 'submit', props.row.id)" />
+                        </el-tooltip>
+                        <el-tooltip v-if="isCancelAllocation(scope.row)" effect="dark" content="取消分配" placement="top">
+                          <i class="iconfont icon-quxiaofenpei" @click="executeFinancingModify(scope.row, 'cancel', props.row.id)" />
+                        </el-tooltip>
+                        <el-tooltip effect="dark" content="查看金额分配" placement="top">
+                          <i class="iconfont icon-fangdajing" @click="executeFinancingModify(scope.row, 'see', props.row.id)" />
+                        </el-tooltip>
+                      </template>
+                    </template>
+                  </el-table-column>
+                  <el-table-column v-if="type === 'planChange' && !disabled" label="操作" width="60">
+                    <template slot-scope="scope">
+                      <div style="color: #5AC4FC; cursor: pointer;">
+                        <span @click="modifyClick('add', {one: tIndex, two: index, three: scope.$index})">新增</span>
+                        <span v-if="scope.row.allowedDelete" @click="modifyClick('delete', {one: tIndex, two: index, three: scope.$index})">删除</span>
+                      </div>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="underlyingAssetsNo" label="底层资产编号">
+            <template slot-scope="{ row }">
+              <el-input
+                v-model="row.underlyingAssetsNo"
+                placeholder="请输入业务编号"
+                disabled
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="tradeReceivablesNumber" label="贸理通底层编号">
+            <template slot-scope="{ row }">
+              <el-input
+                v-model="row.tradeReceivablesNumber"
+                placeholder="请输入贸理通底层编号"
+                disabled
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="accountReceivableAmount" label="应收账款金额">
+            <template slot-scope="{ row }">
+              <cy-amount-input
+                v-model="row.accountReceivableAmount"
+                placeholder="请输入应收账款金额"
+                disabled
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="accountReceivableNetAmount" label="应收账款净额">
+            <template slot-scope="{row}">
+              <cy-amount-input
+                v-model="row.accountReceivableNetAmount"
+                placeholder="请输入应收账款净额"
+                disabled
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="startDate" label="应收账款起始日">
+            <template slot-scope="{ row }">
+              <el-date-picker
+                v-model="row.startDate"
+                style="width: 100%"
+                type="date"
+                disabled
+                placeholder="请选择应收账款起始日"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="term" label="应收账款期限">
+            <template slot-scope="{ row }">
+              <el-input
+                v-model="row.term"
+                placeholder="请输入应收账款期限"
+                disabled
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="endDate" label="应收账款到期日">
+            <template slot-scope="{ row }">
+              <el-date-picker
+                v-model="row.endDate"
+                style="width: 100%"
+                type="date"
+                disabled
+                placeholder="请选择应收账款起始日"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="payAmount" label="本次付款金额">
+            <template slot-scope="{row}">
+              <cy-amount-input
+                v-model="row.payAmount"
+                placeholder="请输入本次付款金额"
+                disabled
+              />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <cy-dialog ref="allocationDialog" title="金额分配" width="70%" top="15vh">
+      <money-allocation ref="moneyAllocation" :allocation-dialog-status="allocationDialogStatus" :amount-allocation-row="amountAllocationRow" @close-dialog="closeDialog" />
+    </cy-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { endPickerDate, formatMoney, filterListData, codeChangeName } from '@/utils'
+export default {
+  components: {
+    MoneyAllocation: () => import('./MoneyAllocation')
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 用于发票跳转过来，不显示按钮
+    btnDisabled: {
+      type: Boolean,
+      default: false
+    },
+    oa: {
+      type: Boolean,
+      default: false
+    },
+    selectedList: {
+      type: Array,
+      default: () => []
+    },
+    receivableInfo: {
+      type: Object,
+      default: () => {}
+    },
+    //  type:  planChange: 计划变更  executeFinancing:收放款执行  credit: 征信上报
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      tableData: [],
+      allocationDialogStatus: '',
+      allocationKey: 0,
+      ruleForm: {},
+      rules: {},
+      amountAllocationRow: {},
+      expandsKeys: []
+    }
+  },
+  computed: {
+    ...mapGetters(['constant']),
+    formatMoney() {
+      return (val) => {
+        return formatMoney(val)
+      }
+    },
+    pickerOptions() {
+      return (row) => {
+        // 修改后逻辑
+        const pickerDate = endPickerDate(row.minChangeDate, row.maxChangeDate, true)
+
+        const { reportDataFlag } = this.ruleForm
+        // 上报过征信-手动生成未上报征信
+        if (reportDataFlag === 2) {
+          return {}
+        } else {
+          return {
+            ...pickerDate
+          }
+        }
+      }
+    },
+    // 金额类型
+    incormeExpenditureType() {
+      // 占用公司资金-是-金额类型下拉框没有垫款
+      if (this.ruleForm.occupationFlag === 1) {
+        return filterListData(this.constant.incormeExpenditureType, 'money_advanced')
+      } else {
+        return this.constant.incormeExpenditureType
+      }
+    },
+    // 状态
+    paymentCollectionPlanStatus() {
+      return (row) => {
+        const amountType = codeChangeName(this.constant.incormeExpenditureType, row.amountType, 'id', 'code')
+        // 金额类型-是-逾期利息-修改范围为已豁免、计划中
+        if (amountType === 'overdue_interest') {
+          return filterListData(this.constant.paymentCollectionPlanStatus, ['pay_coll_plan_executing', 'pay_coll_plan_overdue', 'pay_coll_plan_part_allocate', 'pay_coll_plan_part_completed', 'pay_coll_plan_overdue_completed', 'pay_coll_plan_notneed_completed', 'pay_coll_plan_deduction', 'pay_coll_plan_deduction_completed', 'pay_coll_plan_completed'])
+        } else {
+          // 保证金-是-状态下拉框增加抵扣中、抵扣完成
+          if (amountType === 'margin') {
+            return this.constant.paymentCollectionPlanStatus
+          } else {
+            return filterListData(this.constant.paymentCollectionPlanStatus, ['pay_coll_plan_deduction', 'pay_coll_plan_deduction_completed'])
+          }
+        }
+      }
+    },
+    isAllocation() {
+      return (row) => {
+        if (row.paymentCollectionType === 'pay_coll_collection') {
+          if (row.status === 'pay_coll_planning' || row.status === 'pay_coll_plan_part_allocate' || row.status === 'pay_coll_plan_overdue') {
+            return true
+          } else {
+            return false
+          }
+        }
+      }
+    },
+    isCancelAllocation() {
+      return (row) => {
+        if (row.paymentCollectionType === 'pay_coll_collection') {
+          // row.status?.code === 'pay_coll_plan_part_allocate' || row.status?.code === 'pay_coll_plan_completed' || row.status?.code === 'pay_coll_plan_overdue_completed' || row.status?.code === 'pay_coll_plan_overdue'
+          if (row.collRecordList.length) {
+            return true
+          } else {
+            return false
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    receivableInfo: {
+      handler(newV) {
+        if (Object.keys(newV).length) {
+          const { tradePlanReceivableList, occupationFlag, reportDataFlag } = JSON.parse(JSON.stringify(newV))
+          this.tableData = tradePlanReceivableList.map(item => {
+            item.tradePlanFactoringList = item.tradePlanFactoringList.map(tradeItem => {
+              tradeItem.planFactoringList = tradeItem.planFactoringList.map(planItem => {
+                planItem.amountType = planItem.amountType?.id
+                planItem.currencyTypeCode = planItem.currencyType?.code
+                planItem.status = planItem.status?.name
+                return planItem
+              })
+              return tradeItem
+            })
+            return item
+          })
+          // this.getSelectData(this.selectedList)
+          this.ruleForm = {
+            occupationFlag,
+            reportDataFlag
+          }
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    selectedList: {
+      handler(newV) {
+        if (newV === undefined) return
+        if (newV && newV.length) {
+          // console.log(newV, 1111111111111)
+          // console.log(this.tableData, 99999)
+          // console.log(this.$refs.tradePlanFactoring, 2222)
+          // this.getSelectData(newV)
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  created() {
+    this.$store.dispatch('getConstant', ['payCollType', 'incormeExpenditureType'])
+    // this.$store.dispatch('getConstant', ['incormeExpenditureType', 'payCollType', 'receivingSubjectList', 'graceTypeList', 'paymentCollectionPlanStatus'])
+  },
+  methods: {
+    getSelectData(data) {
+      if (data && data.length) {
+        this.$nextTick(() => {
+          this.$refs.tradePlanFactoring.forEach(item => {
+            data.forEach(el => {
+              setTimeout(() => {
+                item.toggleRowSelection(el)
+              }, 1000)
+            })
+          })
+        })
+      }
+    },
+    executeFinancingModify(row, type, key) {
+      this.allocationDialogStatus = type
+      this.$refs.allocationDialog.show = true
+      this.expandsKeys = [key]
+      this.amountAllocationRow = row
+      this.$nextTick(() => {
+        if (type === 'submit') {
+          this.$refs.allocationDialog.oTitle = '金额分配'
+          this.$refs.moneyAllocation.getAmountAllocation(row)
+        } else if (type === 'cancel') {
+          this.$refs.allocationDialog.oTitle = '取消分配'
+          this.$refs.moneyAllocation.getAmountAllocationCancleList(row)
+        } else if (type === 'see') {
+          this.$refs.allocationDialog.oTitle = '查看金额分配'
+          this.$refs.moneyAllocation.amountAllocationCancelSee(row)
+        }
+      })
+    },
+    modifyClick(type, orderIndex) {
+      const { one, two, three } = orderIndex
+      if (type === 'add') {
+        // 新增默认状态为计划种
+        const currencyType = this.tableData[0].tradePlanFactoringList[0].planFactoringList[0].currencyType
+        const obj = {
+          planDate: '',
+          amountType: '',
+          paymentCollectionType: 'pay_coll_collection',
+          amount: '',
+          actualCashFlow: '',
+          receivingSubject: 'debtor',
+          overDate: '',
+          graceType: 0,
+          status: 'pay_coll_planning',
+          allowedChange: true,
+          allowedDelete: true,
+          id: null,
+          currencyType: currencyType,
+          currencyTypeCode: currencyType.code
+        }
+        this.tableData[one].tradePlanFactoringList[two].planFactoringList.splice(three + 1, 0, obj)
+      } else if (type === 'delete') {
+        this.tableData[one].tradePlanFactoringList[two].planFactoringList.splice(three, 1)
+        // this.getIrrCalc()
+      }
+    },
+    amountChange(row, orderIndex) {
+      const { one, two, three } = orderIndex
+      if (row.paymentCollectionType === 'pay_coll_payment') {
+        if (Number(row.amount) < 0) {
+          this.tableData[one].tradePlanFactoringList[two].planFactoringList[three].actualCashFlow = Math.abs(Number(row.amount))
+        } else {
+          this.tableData[one].tradePlanFactoringList[two].planFactoringList[three].actualCashFlow = -Number(row.amount)
+        }
+      } else {
+        this.tableData[one].tradePlanFactoringList[two].planFactoringList[three].actualCashFlow = row.amount
+      }
+      // this.getIrrCalc()
+    },
+    // 金额类型发生变化
+    amountCollectionTypeChange(row) {
+      const { one, two, three, amountType, paymentCollectionType, rowData } = row
+      const amountTypeCode = codeChangeName(this.constant.incormeExpenditureType, amountType, 'id', 'code')
+      if (amountTypeCode === 'margin' && paymentCollectionType === 'pay_coll_payment') {
+        this.tableData[one].tradePlanFactoringList[two].planFactoringList[three].receivingSubject = ''
+      } else {
+        this.tableData[one].tradePlanFactoringList[two].planFactoringList[three].receivingSubject = 'debtor'
+      }
+      this.amountChange(rowData, { one, two, three })
+    },
+    getIrrCalc() {
+      for (let i = 0; i < this.tableData.length; i++) {
+        const { planDate, amount } = this.tableData[i]
+        if (!planDate) {
+          this.$message.warning(`请选择${i + 1}条的约定日期`)
+          return
+        }
+        if (!amount) {
+          this.$message.warning(`请输入${i + 1}条的金额`)
+          return
+        }
+      }
+      const params = this.tableData.map(item => {
+        const obj = {
+          planDate: item.planDate,
+          actualCashFlow: item.actualCashFlow,
+          amountType: {
+            id: item.amountType
+          },
+          paymentCollectionType: item.paymentCollectionType
+        }
+        if (item.paymentCollectionType === 'pay_coll_payment') {
+          obj.loanRecordList = item.loanRecordList.map(item => {
+            return {
+              thisLoanAmount: item.thisLoanAmount,
+              thisLoanDate: item.thisLoanDate
+            }
+          })
+        } else {
+          obj.collRecordList = item.collRecordList.map(item => {
+            return {
+              actualAmount: item.actualAmount,
+              actualDate: item.actualDate
+            }
+          })
+        }
+        return obj
+      })
+      this.$api.customManage.collectionLoanManage.getIrrCalc(params).then((data) => {
+        this.ruleForm.irr = (data.data * 100).toFixed(2)
+      })
+    },
+    closeDialog(type) {
+      this.$refs.allocationDialog.show = false
+      if (type === 'submit') {
+        this.$emit('execute-financing-trade')
+      }
+    },
+    rowClick(row, column, event) {
+      if (this.expandsKeys.includes(row.id)) {
+        this.expandsKeys = this.expandsKeys.filter(val => val !== row.id)
+      } else {
+        this.expandsKeys.push(row.id)
+      }
+    },
+    handleSelectionChange(val) {
+      console.log(val, 4342432432423)
+      this.$emit('accounts-receivable', val)
+    },
+    // echo() {
+    //   console.log(111)
+    //   this.$nextTick(() => {
+    //     this.tableData.forEach(row => {
+    //       row.tradePlanFactoringList.forEach(data => {
+    //         data.planFactoringList.forEach((list) => {
+    //           if (val.some(data => data.id === list.id)) {
+    //             this.$refs.tradePlanFactoring.toggleRowSelection([list])
+    //           }
+    //         })
+    //       })
+    //     })
+    //   })
+    // },
+    selectable(row, index) {
+      if (row.oaSelect === 0) {
+        return false
+      } else {
+        return true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.accounts-receivable .title {
+  font-weight: bold;
+  margin-top: 0px !important;
+}
+
+.allocation-box .el-checkbox__inner {
+  margin-top: 2px;
+  margin-left: 10px;
+}
+
+</style>
+<style>
+
+.accounts-receivable .el-table__expand-icon {
+  font-size: 18px;
+}
+</style>

src/views/myFinancing/repaymentPlay/components/FinancingPlan.vue

@@ -0,0 +1,619 @@
+<template>
+  <div class="financing-plan">
+    <div class="info-title">
+      <cy-info-title>收放款计划（融资款）</cy-info-title>
+      <div>
+        <el-button v-if="isTradeFactoring && !disabled" type="primary" @click="getFinancingCalc">一键计算</el-button>
+      </div>
+    </div>
+    <div class="table-box" style="margin-top: 20px;">
+      <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
+        <el-table-column v-if="oa && !tradeFactoring" type="selection" width="50" :selectable="selectable" />
+        <el-table-column type="index" label="序号" width="50" />
+        <el-table-column prop="planDate" label="约定日期" width="160">
+          <template slot-scope="{row}">
+            <el-date-picker
+              v-model="row.planDate"
+              style="width: 100%"
+              type="date"
+              :disabled="disabled || !row.allowedChange || isTradeFactoring"
+              placeholder="请选择约定日期"
+              :picker-options="pickerOptions(row)"
+              @change="getIrrCalc"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="amountType" label="金额类型" width="120">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.amountType"
+
+              placeholder="请选择金额类型"
+              :disabled="disabled || !scope.row.allowedChange || isTradeFactoring"
+              style="width: 100%"
+              @change="amountCollectionTypeChange({ index: scope.$index, amountType: scope.row.amountType, paymentCollectionType: scope.row.paymentCollectionType, rowData: scope.row })"
+            >
+              <el-option
+                v-for="item in incormeExpenditureType"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="paymentCollectionType" label="收放款类型" width="120">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.paymentCollectionType"
+
+              placeholder="请选择收放款类型"
+              :disabled="disabled || !scope.row.allowedChange || isTradeFactoring"
+              style="width: 100%"
+              @change="amountCollectionTypeChange({ index: scope.$index, amountType: scope.row.amountType, paymentCollectionType: scope.row.paymentCollectionType, rowData: scope.row })"
+            >
+              <el-option
+                v-for="item in constant.payCollType"
+                :key="item.id"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="amount" label="金额" width="150">
+          <template slot-scope="scope">
+            <div style="display: flex; align-items: center">
+              <span>{{ scope.row.currencyTypeCode }}</span>
+              {{ formatMoney(scope.row.amount) }}
+              <!-- <cy-amount-input
+                v-model="scope.row.amount"
+                placeholder="请输入金额"
+                :disabled="disabled || !scope.row.allowedChange || isTradeFactoring"
+                :clearable="false"
+                @change="amountChange(scope.row, scope.$index)"
+              /> -->
+            </div>
+
+          </template>
+        </el-table-column>
+        <el-table-column prop="actualCashFlow" label="实际现金流" width="150">
+          <template slot-scope="{row}">
+            <div style="display: flex; align-items: center">
+              <span>{{ row.currencyTypeCode }}</span>
+              {{ formatMoney(row.actualCashFlow) }}
+              <!-- <cy-amount-input
+                v-model="row.actualCashFlow"
+                placeholder="请输入实际现金流"
+                disabled
+              /> -->
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="receivingSubject" label="收款主体" width="110">
+          <template slot-scope="{row}">
+            <el-select
+              v-if="row.receivingSubject"
+              v-model="row.receivingSubject"
+
+              placeholder="请选择收款主体"
+              style="width: 100%"
+              :disabled="disabled || !row.allowedChange || isTradeFactoring"
+            >
+              <el-option
+                v-for="item in constant.receivingSubjectList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="实收/付日期">
+          <template slot-scope="{row}">
+            <div v-for="(item, index) in row.paymentCollectionType === 'pay_coll_payment'? row.loanRecordList : row.collRecordList" :key="index">
+              {{ row.paymentCollectionType === 'pay_coll_payment' ? item.thisLoanDate : item.actualDate }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="实收/付总金额">
+          <template slot-scope="{row}">
+            <div v-for="(item, index) in row.paymentCollectionType === 'pay_coll_payment'? row.loanRecordList : row.collRecordList" :key="index">
+              {{ row.currencyTypeCode }}  {{ row.paymentCollectionType === 'pay_coll_payment' ? formatMoney(item.thisLoanAmount) : formatMoney(item.actualAmount) }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="type !== 'planChange'" prop="overDate" label="宽限到期日" width="160">
+          <template slot-scope="{row}">
+            <el-date-picker
+              v-model="row.overDate"
+              style="width: 100%"
+              type="date"
+              :disabled="disabled || !row.allowedChange || isTradeFactoring"
+              placeholder="请选择宽限到期日"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="graceType" label="宽限期类型" width="100">
+          <template slot-scope="{row}">
+            <!-- <el-select
+              v-model="row.graceType"
+
+              placeholder="请选择宽限期类型"
+              :disabled="disabled || !row.allowedChange || isTradeFactoring"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in constant.graceTypeList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select> -->
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="100">
+          <template slot-scope="{row}">
+            {{ row.status }}
+            <!-- <el-select
+              v-model="row.status"
+
+              placeholder="请选择状态"
+              :disabled="disabled || !row.allowedChange || isTradeFactoring"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in paymentCollectionPlanStatus(row)"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select> -->
+
+          </template>
+        </el-table-column>
+        <el-table-column v-if="!disabled && type === 'planChange' && !isTradeFactoring" label="操作" width="60">
+          <template slot-scope="scope">
+            <div style="color: #5AC4FC; cursor: pointer;">
+              <span @click="modifyClick('add', scope.$index)">新增</span>
+              <span v-if="scope.row.allowedDelete" @click="modifyClick('delete', scope.$index)">删除</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-form
+      ref="ruleForm"
+      :model="ruleForm"
+      :rules="rules"
+      label-position="top"
+      class="rule-form-orange"
+    >
+      <el-form-item v-if="isMoneyAdvanced" label="原债务种类：">
+        <el-select
+          v-model="ruleForm.origDbtCate"
+
+          placeholder="请选择原债务种类"
+          :disabled="disabled"
+        >
+          <el-option
+            v-for="item in constant.quotaDisburseDebtType"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="isMoneyAdvanced" label="债权转移时的还款状态：">
+        <el-select
+          v-model="ruleForm.initRpySts"
+
+          placeholder="请选择债权转移时的还款状态"
+          class="form-item-border"
+        >
+          <el-option
+            v-for="item in constant.quotaDisburseTransferStatus"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="IRR：">
+        <el-input
+          v-model="ruleForm.irr"
+          placeholder="请输入IRR"
+          disabled
+        >
+          <template slot="append">%</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="授信-预期IRR：">
+        <el-input
+          v-model="ruleForm.contractIrr"
+          placeholder="请输入授信-预期IRR"
+          disabled
+        >
+          <template slot="append">%</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="额度支用-预期IRR：">
+        <el-input
+          v-model="ruleForm.quotaIrr"
+          placeholder="请输入额度支用-预期IRR"
+          disabled
+        >
+          <template slot="append">%</template>
+        </el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { endPickerDate, formatMoney, parseTime, filterListData, codeChangeName } from '@/utils'
+export default {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    financingPlan: {
+      type: Object,
+      default: () => []
+    },
+    // type:  planChange: 计划变更
+    type: {
+      type: String,
+      default: ''
+    },
+    // 是否是贸理通项目
+    isTradeFactoring: {
+      type: Boolean,
+      default: false
+    },
+    tradeFactoring: {
+      type: Boolean,
+      default: false
+    },
+    oa: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      tableData: [],
+      selection: [],
+      ruleForm: {
+        irr: '',
+        contractIrr: '',
+        quotaIrr: '',
+        occupationFlag: '',
+        reportDataFlag: '',
+        basicId: '',
+        origDbtCate: '',
+        initRpySts: ''
+      },
+      rules: {
+
+      },
+      loading: false,
+      isMoneyAdvanced: false
+    }
+  },
+  computed: {
+    ...mapGetters(['constant']),
+    formatMoney() {
+      return (val) => {
+        return formatMoney(val)
+      }
+    },
+
+    pickerOptions() {
+      return (row) => {
+        // 修改后逻辑
+        const pickerDate = endPickerDate(row.minChangeDate, row.maxChangeDate, true)
+
+        const { reportDataFlag } = this.ruleForm
+        // 上报过征信-手动生成未上报征信
+        if (reportDataFlag === 2) {
+          return {}
+        } else {
+          return {
+            ...pickerDate
+          }
+        }
+      }
+    },
+    // 金额类型
+    incormeExpenditureType() {
+      // 占用公司资金-是-金额类型下拉框没有垫款
+      if (this.ruleForm.occupationFlag === 1) {
+        return filterListData(this.constant.incormeExpenditureType, 'money_advanced')
+      } else {
+        return this.constant.incormeExpenditureType
+      }
+    },
+    // 状态
+    paymentCollectionPlanStatus() {
+      return (row) => {
+        const amountType = codeChangeName(this.constant.incormeExpenditureType, row.amountType, 'id', 'code')
+        // 金额类型-是-逾期利息-修改范围为已豁免、计划中
+        if (amountType === 'overdue_interest') {
+          if (row.status === 'pay_coll_plan_overdue') {
+            return filterListData(this.constant.paymentCollectionPlanStatus, ['pay_coll_plan_executing', 'pay_coll_plan_part_allocate', 'pay_coll_plan_part_completed', 'pay_coll_plan_overdue_completed', 'pay_coll_plan_notneed_completed', 'pay_coll_plan_deduction', 'pay_coll_plan_deduction_completed', 'pay_coll_plan_completed'])
+          } else if (row.status === 'pay_coll_planning' || row.status === 'pay_coll_plan_notneed') {
+            return filterListData(this.constant.paymentCollectionPlanStatus, ['pay_coll_plan_executing', 'pay_coll_plan_overdue', 'pay_coll_plan_part_allocate', 'pay_coll_plan_part_completed', 'pay_coll_plan_overdue_completed', 'pay_coll_plan_notneed_completed', 'pay_coll_plan_deduction', 'pay_coll_plan_deduction_completed', 'pay_coll_plan_completed'])
+          } else {
+            return this.constant.paymentCollectionPlanStatus
+          }
+        } else {
+          // 保证金-是-状态下拉框增加抵扣中、抵扣完成
+          if (amountType === 'margin') {
+            return this.constant.paymentCollectionPlanStatus
+          } else {
+            return filterListData(this.constant.paymentCollectionPlanStatus, ['pay_coll_plan_deduction', 'pay_coll_plan_deduction_completed'])
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    financingPlan: {
+      handler(newV) {
+        if (Object.keys(newV).length) {
+          const financingPlan = JSON.parse(JSON.stringify(newV))
+          this.tableData = financingPlan.planFactoringList.map(item => {
+            item.amountType = item.amountType.id
+            item.status = item.status.name
+            item.currencyTypeCode = item.currencyType.code
+            return item
+          })
+          const { irr, contractIrr, quotaIrr, occupationFlag, reportDataFlag, basicId, origDbtCate, initRpySts } = financingPlan
+          this.ruleForm = {
+            irr: ((irr * 10000) / 100).toFixed(2),
+            contractIrr: (contractIrr * 10000) / 100,
+            quotaIrr: (quotaIrr * 10000) / 100,
+            occupationFlag,
+            reportDataFlag,
+            basicId,
+            origDbtCate,
+            initRpySts
+          }
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    tableData: {
+      handler(newV) {
+        this.isMoneyAdvanced = this.tableData.some(item => {
+          const amountType = codeChangeName(this.constant.incormeExpenditureType, item.amountType, 'id', 'code')
+          return amountType === 'money_advanced'
+        })
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  created() {
+    this.$store.dispatch('getConstant', ['incormeExpenditureType', 'payCollType'])
+    // this.$store.dispatch('getConstant', ['incormeExpenditureType', 'payCollType', 'receivingSubjectList', 'paymentCollectionPlanStatus', 'graceTypeList', 'quotaDisburseDebtType', 'quotaDisburseTransferStatus'])
+  },
+  methods: {
+    modifyClick(type, index) {
+      if (type === 'add') {
+        // 新增默认状态为计划种
+        // const statusId = this.$utils.codeChangeName(this.constant.paymentCollectionPlanStatus, 'pay_coll_planning', 'code', 'id')
+        const obj = {
+          planDate: '',
+          amountType: '',
+          paymentCollectionType: 'pay_coll_collection',
+          amount: '',
+          actualCashFlow: '',
+          receivingSubject: 'debtor',
+          overDate: '',
+          graceType: 0,
+          status: 'pay_coll_planning',
+          allowedChange: true,
+          allowedDelete: true,
+          id: null,
+          currencyType: this.tableData[0].currencyType,
+          currencyTypeCode: this.tableData[0].currencyType.code,
+          collRecordList: [],
+          loanRecordList: []
+        }
+        this.tableData.splice(index + 1, 0, obj)
+      } else if (type === 'delete') {
+        this.tableData.splice(index, 1)
+        this.getIrrCalc()
+      }
+    },
+    amountChange(row, index) {
+      if (row.paymentCollectionType === 'pay_coll_payment') {
+        if (Number(row.amount) < 0) {
+          this.tableData[index].actualCashFlow = Math.abs(Number(row.amount))
+        } else {
+          this.tableData[index].actualCashFlow = -Number(row.amount)
+        }
+      } else {
+        this.tableData[index].actualCashFlow = row.amount
+      }
+      this.getIrrCalc()
+      // this.getMoneyAdvanced()
+    },
+    // 是否包含垫付
+    getMoneyAdvanced() {
+      this.isMoneyAdvanced = this.tableData.some(item => {
+        const amountType = codeChangeName(this.constant.incormeExpenditureType, item.amountType, 'id', 'code')
+        return amountType === 'money_advanced'
+      })
+    },
+    // 金额类型发生变化
+    amountCollectionTypeChange(row) {
+      const { index, amountType, paymentCollectionType, rowData } = row
+      const amountTypeCode = codeChangeName(this.constant.incormeExpenditureType, amountType, 'id', 'code')
+      if (amountTypeCode === 'margin' && paymentCollectionType === 'pay_coll_payment') {
+        this.tableData[index].receivingSubject = ''
+      } else {
+        this.tableData[index].receivingSubject = 'debtor'
+      }
+      this.amountChange(rowData, index)
+    },
+    async getIrrCalc() {
+      for (let i = 0; i < this.tableData.length; i++) {
+        const { planDate, amount } = this.tableData[i]
+        if (!planDate) {
+          this.$message.warning(`请选择第${i + 1}条的约定日期`)
+          return
+        }
+        if (!amount) {
+          this.$message.warning(`请输入第${i + 1}条的金额`)
+          return
+        }
+      }
+      const params = this.tableData.map(item => {
+        const obj = {
+          planDate: item.planDate,
+          actualCashFlow: item.actualCashFlow,
+          amountType: {
+            id: item.amountType
+          },
+          paymentCollectionType: item.paymentCollectionType
+        }
+        if (item.paymentCollectionType === 'pay_coll_payment') {
+          obj.loanRecordList = item.loanRecordList.map(item => {
+            return {
+              thisLoanAmount: item.thisLoanAmount,
+              thisLoanDate: item.thisLoanDate
+            }
+          })
+        } else {
+          obj.collRecordList = item.collRecordList.map(item => {
+            return {
+              actualAmount: item.actualAmount,
+              actualDate: item.actualDate
+            }
+          })
+        }
+        return obj
+      })
+      this.$api.customManage.collectionLoanManage.getIrrCalc(params).then((data) => {
+        this.ruleForm.irr = (data.data * 100).toFixed(2)
+        Promise.resolve()
+      })
+    },
+    handleSelectionChange(val) {
+      this.$emit('financing-funds', val)
+      this.$nextTick(() => {
+        this.tableData.forEach(row => {
+          row.tradePlanFactoringList.forEach(data => {
+            data.planFactoringList.forEach(list => {
+              if (val.some(item => item.id === list.id)) {
+                this.$refs.tradePlanFactoring.toggleRowSelection(val)
+              }
+            })
+          })
+        })
+      })
+    },
+    async getFinancingCalc() {
+      const receivableList = []
+      this.$emit('get-accounts-receivable', (data) => {
+        data.forEach(item => {
+          item.tradePlanFactoringList.forEach(tradeItem => {
+            tradeItem.planFactoringList.forEach(planItem => {
+              receivableList.push({
+                ...planItem,
+                underlyingAccountReceivableId: item.underlyingAccountReceivableId,
+                billingFactoringBusinessLoanRecordId: tradeItem.billingFactoringBusinessLoanRecordId
+              })
+            })
+          })
+        })
+      })
+      for (let i = 0; i < receivableList.length; i++) {
+        const { planDate, amountType, amount, status, paymentCollectionType, receivingSubject } = receivableList[i]
+        if (!planDate) {
+          this.$message.warning('请选择约定日期')
+          return
+        }
+        if (!amountType) {
+          this.$message.warning('请选择金额类型')
+          return
+        }
+        if (!amount) {
+          this.$message.warning('请输入金额')
+          return
+        }
+        if (paymentCollectionType === 'pay_coll_collection' && !receivingSubject) {
+          this.$message.warning('请选择收款主体')
+          return
+        }
+        if (!status) {
+          this.$message.warning('请选择状态')
+          return
+        }
+      }
+      const paramsList = receivableList.map(item => {
+        const { planDate, amountType, paymentCollectionType, amount, actualCashFlow, receivingSubject, actualId, status, id, contractIncomeExpenditurePlanId, currencyType, graceType, allowedChange, allowedDelete, underlyingAccountReceivableId, billingFactoringBusinessLoanRecordId } = item
+        const obj = {
+          planDate: parseTime(new Date(planDate), 'y-m-d'),
+          amountType: {
+            id: amountType
+          },
+          paymentCollectionType,
+          amount,
+          actualCashFlow,
+          receivingSubject,
+          status: {
+            code: status
+          },
+          actualId: actualId || id,
+          id,
+          contractIncomeExpenditurePlanId,
+          basic: {
+            id: this.ruleForm.basicId
+          },
+          currencyType: {
+            id: currencyType.id
+          },
+          graceType,
+          allowedChange,
+          allowedDelete,
+          underlyingAccountReceivableId,
+          billingFactoringBusinessLoanRecordId
+        }
+        return obj
+      })
+      this.loading = true
+      const { data } = await this.$api.customManage.collectionLoanManage.changePlanOneCalc(paramsList)
+      this.loading = false
+      this.tableData = data.map(item => {
+        item.amountType = item.amountType.id
+        item.status = item.status.code
+        item.currencyTypeCode = item.currencyType.code
+        return item
+      })
+      await this.getIrrCalc()
+    },
+    selectable(row, index) {
+      if (row.oaSelect === 0) {
+        return false
+      } else {
+        return true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.financing-plan .info-title {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

src/views/myFinancing/repaymentPlay/components/FoundationInfo.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="foundation-info">
+    <cy-info-title>基础信息</cy-info-title>
+    <el-form
+      ref="ruleForm"
+      :key="key"
+      :model="ruleForm"
+      :rules="rules"
+      class="rule-form-orange"
+      label-width="150px"
+      label-position="top"
+    >
+      <el-form-item label="业务编号：" prop="enterpriseCustomerInfoId">
+        <el-input
+          v-model="ruleForm.businessNo"
+          placeholder="请输入业务编号"
+          :disabled="disabled || isDisabled"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="保理合同编号：" prop="enterpriseCustomerInfoId">
+        <el-input
+          v-model="ruleForm.contractNo"
+          placeholder="请输入保理合同编号"
+          :disabled="disabled || isDisabled"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="保理申请人：" prop="enterpriseCustomerInfoId">
+        <el-input
+          v-model="ruleForm.applicantName"
+          placeholder="请输入保理申请人"
+          :disabled="disabled || isDisabled"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="统一社会信用代码：" prop="enterpriseCustomerInfoId">
+        <el-input
+          v-model="ruleForm.applicantSocialCreditCode"
+          placeholder="请输入统一社会信用代码"
+          :disabled="disabled || isDisabled"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="额度支用批次：" prop="enterpriseCustomerInfoId">
+        <el-input
+          v-model="ruleForm.quotaDisburseBatch"
+          placeholder="请输入额度支用批次"
+          :disabled="disabled || isDisabled"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="业务经理 " prop="enterpriseCustomerInfoId">
+        <el-input
+          v-model="ruleForm.projectManager"
+          placeholder="请输入业务经理 "
+          :disabled="disabled || isDisabled"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="还款账号" prop="enterpriseCustomerInfoId">
+        <el-input
+          v-model="ruleForm.productType"
+          placeholder="请输入还款账号"
+          :disabled="disabled || isDisabled"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="还款账户名" prop="enterpriseCustomerInfoId">
+        <el-input
+          v-model="ruleForm.projectManager"
+          placeholder="请输入还款账户名"
+          :disabled="disabled || isDisabled"
+          clearable
+        />
+      </el-form-item>
+
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    foundationInfo: {
+      type: Object,
+      default: () => {}
+    },
+    // type:  planChange: 计划变更
+    type: {
+      type: String,
+      default: ''
+    },
+    // 变更类型数据
+    changeList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      ruleForm: {},
+      rules: {},
+      key: 0
+    }
+  },
+  computed: {
+    ...mapGetters(['constant']),
+    isDisabled() {
+      return this.type === 'planChange'
+    }
+  },
+  watch: {
+    foundationInfo: {
+      handler(newV) {
+        if (Object.keys(newV).length) {
+          this.ruleForm = JSON.parse(JSON.stringify(newV))
+          this.ruleForm = {
+            // changeType: '',
+            // acceleration: false,
+            // changeReason: '',
+            ...this.ruleForm
+          }
+          this.key += 1
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  created() {
+    this.$store.dispatch('getConstant', ['factoringProducts'])
+  },
+  methods: {
+    getParams() {
+      return new Promise((resolve, reject) => {
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {
+            const fileStorage = this.$refs.fileStorage.getFileLists
+            if (this.changeTypeRequired && !fileStorage.length) {
+              this.$message.warning('请上传附件')
+              reject()
+              return
+            }
+            const { id, changeType, changeReason, acceleration } = this.ruleForm
+            const params = {
+              basic: {
+                id
+              },
+              changeType: {
+                id: changeType
+              },
+              changeReason,
+              acceleration,
+              fileStorageIdList: fileStorage.map(item => item.id)
+            }
+            resolve(params)
+          } else {
+            reject()
+            return false
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/myFinancing/repaymentPlay/components/MoneyAllocation.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="money-allocation">
+    <div class="table-box allocation-box">
+      <el-table
+        :key="key"
+        v-loading="loading"
+        :data="amountTableData"
+        :header-cell-class-name="cellClass"
+        height="60vh"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="index" label="序号" width="50" />
+        <el-table-column prop="firstLevelProject" label="项目名称" show-overflow-tooltip />
+        <el-table-column prop="amountMoney" label="入账金额" show-overflow-tooltip />
+        <el-table-column v-if="allocationDialogStatus === 'submit'" prop="billDate" label="日期" show-overflow-tooltip />
+        <el-table-column
+          v-if="allocationDialogStatus === 'submit'"
+          prop="flushSurplusAmount"
+          label="剩余可分配金额"
+          show-overflow-tooltip
+        />
+        <el-table-column v-if="allocationDialogStatus === 'submit'" prop="amountAllocated" class="rule-required" label="本次分配金额">
+          <template slot-scope="{ row }">
+            <cy-amount-input v-model="row.amountAllocated" placeholder="请输入本次分配金额" show-overflow-tooltip />
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="allocationDialogStatus === 'cancel' || allocationDialogStatus === 'see'"
+          prop="dateTime"
+          label="入账日期"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          v-if="allocationDialogStatus === 'cancel' || allocationDialogStatus === 'see'"
+          prop="allocatedAmount"
+          :label="allocationDialogStatus === 'see' ? '本次分配金额' : '已分配金额'"
+          show-overflow-tooltip
+        />
+        <el-table-column v-if="allocationDialogStatus === 'submit'" label="还款形式">
+          <template slot-scope="{ row }">
+            <el-select
+              v-model="row.payBackForm"
+
+              placeholder="请选择金额类型"
+              :disabled="disabled"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in constant.payBackForm"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="businessNumber" label="附件" show-overflow-tooltip>
+          <template slot-scope="{ row }">
+            <span v-if="row.fileText != undefined && row.fileText != ''" style="color: #5AC4FC; cursor: pointer;" @click="viewAssignFile(row)">查看</span>
+            <span v-else>无</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="allocationDialogStatus === 'submit' || allocationDialogStatus === 'cancel'"
+          type="selection"
+          :selectable="selectable"
+          width="90"
+          align="center"
+        />
+      </el-table>
+      <div v-if="allocationDialogStatus !== 'see'" class="submit-btn">
+        <el-button type="primary" style="width: 100px;" @click="allocationSubmit('submit')">确定</el-button>
+        <el-button style="width: 100px;" @click="() => { $emit('close-dialog', 'cancel') }">取消</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  props: {
+    allocationDialogStatus: {
+      type: String,
+      default: ''
+    },
+    amountAllocationRow: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      multipleSelection: [],
+      amountTableData: [],
+      disabled: false,
+      key: 0
+    }
+  },
+  computed: {
+    ...mapGetters(['constant'])
+  },
+  created() {
+    this.multipleSelection = []
+    this.$store.dispatch('getConstant', ['payBackForm'])
+  },
+  methods: {
+    getAmountAllocation(row) {
+      this.multipleSelection = []
+      this.key += 1
+      this.loading = true
+      this.addHeader()
+      this.$api.customManage.collectionLoanManage.getAmountAllocationNotTrade({ currencyId: row.currencyType.id }).then((data) => {
+        this.loading = false
+        const payBackForm = this.$utils.codeChangeName(this.constant.payBackForm, 'payBackForm_ZCHK', 'code', 'id')
+        this.amountTableData = data.data.map(item => {
+          item.amountMoney = item.currency.code + this.$utils.formatMoney(item.amountMoney)
+          item.flushSurplusAmount = item.currency.code + this.$utils.formatMoney(item.flushSurplusAmount)
+          item.amountAllocated = ''
+          item.payBackForm = payBackForm
+          return item
+        })
+      })
+    },
+    getAmountAllocationCancleList(row) {
+      this.multipleSelection = []
+      this.key += 1
+      this.loading = true
+      this.addHeader()
+      this.$api.customManage.collectionLoanManage.getAmountAllocationCancleList({ planFactoringId: row.id }).then((data) => {
+        this.loading = false
+        const payBackForm = this.$utils.codeChangeName(this.constant.payBackForm, 'payBackForm_ZCHK', 'code', 'id')
+        this.amountTableData = data.data.map(item => {
+          item.firstLevelProject = item.projectName
+          item.amountMoney = item.currency.code + this.$utils.formatMoney(item.amountMoney)
+          item.flushSurplusAmount = item.currency.code + this.$utils.formatMoney(item.flushSurplusAmount)
+          item.allocatedAmount = item.currency.code + this.$utils.formatMoney(item.allocatedAmount)
+          item.fileText = item.fileText
+          item.payBackForm = payBackForm
+          item.dateTime = this.$utils.parseTime(item.dateTime, 'y-m-d')
+          return item
+        })
+      })
+    },
+    amountAllocationCancelSee(row) {
+      this.multipleSelection = []
+      this.loading = true
+      this.$api.customManage.collectionLoanManage.amountAllocationCancelSee({ planFactoringId: row.id }).then((data) => {
+        this.loading = false
+        const payBackForm = this.$utils.codeChangeName(this.constant.payBackForm, 'payBackForm_ZCHK', 'code', 'id')
+        this.amountTableData = data.data.map(item => {
+          item.firstLevelProject = item.projectName
+          item.amountMoney = item.currency.code + this.$utils.formatMoney(item.amountMoney)
+          item.flushSurplusAmount = item.currency.code + this.$utils.formatMoney(item.flushSurplusAmount)
+          item.allocatedAmount = item.currency.code + this.$utils.formatMoney(item.allocatedAmount)
+          item.fileText = item.fileText
+          item.payBackForm = payBackForm
+          item.dateTime = this.$utils.parseTime(item.dateTime, 'y-m-d')
+          return item
+        })
+      })
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    cellClass(row) {
+      if (row.columnIndex == row.row.length - 1) {
+        return 'selectionHeader'
+      }
+    },
+    addHeader() {
+      this.$nextTick(() => {
+        const headerDom = document.getElementsByClassName('selectionHeader')
+        const needDom = headerDom[0].firstChild
+        const checkboxDom = document.getElementsByClassName(`el-checkbox`)[0]
+        const spanDom = document.createElement('span')
+        spanDom.innerText = '选择'
+        needDom.insertBefore(spanDom, checkboxDom)
+      })
+    },
+    viewAssignFile(row) {
+      window.localStorage.setItem('assignFileTextartaText', row.fileText)
+      window.open('/paycoll/factoring/viewFileText?viewAssignMoneyFile=1&assignFileTextartaText=' + row.fileText)
+    },
+    allocationSubmit() {
+      if (this.allocationDialogStatus === 'submit') {
+        if (!this.multipleSelection.length) {
+          this.$message.warning('请选择一条数据')
+          return
+        } else {
+          for (let i = 0; i < this.multipleSelection.length; i++) {
+            const { amountAllocated } = this.multipleSelection[i]
+            if (!amountAllocated) {
+              this.$message.warning('请输入所选择的本次分配金额')
+              return
+            }
+          }
+        }
+        const amountAllocationList = this.multipleSelection.map(item => {
+          const obj = {
+            actualAmount: item.amountAllocated,
+            actualDate: item.billDate,
+            currencyType: {
+              id: item.currency.id
+            },
+            payBackForm: {
+              id: item.payBackForm
+            },
+            factoringBusinessAccountId: item.id
+          }
+          return obj
+        })
+        this.$api.customManage.collectionLoanManage.amountAllocationSubmit({ Loading: true, id: this.amountAllocationRow.id, amountAllocationList }).then(() => {
+          this.$emit('close-dialog', 'submit')
+        })
+      } else if (this.allocationDialogStatus === 'cancel') {
+        if (!this.multipleSelection.length) {
+          this.$message.warning('请选择一条数据')
+          return
+        }
+        const amountAllocationList = this.multipleSelection.map(item => {
+          return { id: item.amountAllocationId }
+        })
+        this.$api.customManage.collectionLoanManage.amountAllocationCancelSubmit({ Loading: true, id: this.amountAllocationRow.id, amountAllocationList }).then(() => {
+          this.$emit('close-dialog', 'submit')
+        })
+      }
+    },
+    selectable(row, index) {
+      if (this.allocationDialogStatus === 'cancel') {
+        return row.assignFlag
+      } else {
+        return true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.allocation-box .el-checkbox__inner {
+  margin-top: 2px;
+  margin-left: 10px;
+}
+</style>

src/views/myFinancing/repaymentPlay/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div v-loading="loading" class="repayment-play">
+    <foundation-info :foundation-info="foundationInfo" :disabled="true" />
+    <accounts-receivable v-if="detailsInfo.tradeFactoring" :receivable-info="receivableInfo" :disabled="true" />
+    <financing-plan :financing-plan="financingPlan" :disabled="true" />
+    <accounts-plan :accounts-plan="accountsPlan" :disabled="true" />
+  </div>
+</template>
+
+<script>
+import { getRepaymentPlan } from '@/api/myFinancing'
+export default {
+  name: 'RepaymentPlay',
+  components: {
+    FoundationInfo: () => import('./components/FoundationInfo'),
+    AccountsReceivable: () => import('./components/AccountsReceivable'),
+    FinancingPlan: () => import('./components/FinancingPlan'),
+    AccountsPlan: () => import('./components/AccountsPlan')
+  },
+  data() {
+    return {
+      detailsInfo: {},
+      foundationInfo: {},
+      receivableInfo: {},
+      financingPlan: {},
+      accountsPlan: {},
+      loading: false
+    }
+  },
+  created() {
+    // this.getPlanData()
+  },
+  methods: {
+    getPlanData() {
+      this.loading = true
+      const { id } = this.$route.params
+      getRepaymentPlan({ id }).then(({ data }) => {
+        this.detailsInfo = data
+        this.loading = false
+        const { businessNo, contractNo, applicantName, applicantSocialCreditCode, quotaDisburseBatch, productType, projectManager, tradePlanReceivableList, planFactoringList, irr, contractIrr, quotaIrr, planReceivableList } = data
+        // 基本信息
+        this.foundationInfo = {
+          businessNo,
+          contractNo,
+          applicantName,
+          applicantSocialCreditCode,
+          quotaDisburseBatch,
+          projectManager: projectManager.name,
+          productType: productType.name
+        }
+        // 贸理通关联应收账款
+        this.receivableInfo = {
+          tradePlanReceivableList
+        }
+
+        // 收放款计划（保理融资款）
+        this.financingPlan = {
+          planFactoringList,
+          irr,
+          contractIrr,
+          quotaIrr
+        }
+
+        // 收放款计划（应收账款）
+        this.accountsPlan = planReceivableList
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.repayment-play {
+
+}
+</style>

src/views/myFinancing/see.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="financing-see">
+    <div v-if="stepList.length" class="view-steps-box">
+      <cy-steps :steps-data="stepList" />
+    </div>
+    <div v-loading="loading" class="tempalte-content">
+      <el-collapse v-if="stepList.length" v-model="activeNames" @change="handleChange">
+        <el-collapse-item v-for="(item, index) in stepList" :id="index" :key="index" :name="index">
+          <template slot="title">
+            <cy-view-bar
+              :view-bar-data="{ ...item.businessProcessingLogVo, formBusinessName: item.formBusinessName, index: index + 1 }"
+            />
+          </template>
+          <template v-if="item.formBusinessName == '申请融资'">
+            <apply-financing :details-info="item.obj" />
+          </template>
+          <template v-if="item.formBusinessName == '合同签署'">
+            <contract-sign :details-info="item.obj" />
+          </template>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getHistoricalProcess } from '@/api/common.js'
+import collapseSeeMix from '@/mixins/collapseSeeMix'
+export default {
+  components: {
+    ApplyFinancing: () => import('./applyFinancing/index.vue'),
+    ContractSign: () => import('./contractSign.vue')
+  },
+  mixins: [collapseSeeMix],
+  data() {
+    return {
+      stepList: [],
+      activeNames: [],
+      loading: false
+    }
+  },
+  mounted() {
+    this.getStepList()
+  },
+  methods: {
+    getStepList() {
+      this.loading = true
+      const params = {
+        businessKey: this.$route.params.id,
+        businessType: 'FinancingApply'
+      }
+      getHistoricalProcess(params).then(({ data }) => {
+        this.stepList = data || []
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>