Files
Arbitrate-Frontend/src/views/caseManagement/components/caseentryDialog.vue
T
2024-05-28 09:00:23 +08:00

1620 lines
57 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div>
<el-dialog :title="dialogtitle" :visible="visible" @close="cancel" width="1000px" append-to-body
:destroy-on-close="true" center>
<!-- tab页 -->
<el-tabs v-model="activeName" @tab-click="handleClick" v-show="form.id != undefined && form.id != null">
<el-tab-pane label="案件基本信息" name="first"></el-tab-pane>
<el-tab-pane label="自定义抓取内容" name="second"></el-tab-pane>
<el-tab-pane label="裁决书附件" name="third" v-if="flag == 0"></el-tab-pane>
<el-tab-pane label="案件视频" name="five" v-if="flag == 0"></el-tab-pane>
<el-tab-pane label="庭审笔录" name="six" v-if="flag == 0"></el-tab-pane>
<el-tab-pane label="案件异议信息" name="seven" v-if="flag == 0"></el-tab-pane>
</el-tabs>
<div v-show="activeName == 'first'">
<!-- 案件信息 -->
<el-form ref="form" :model="formData" :rules="rules" label-width="150px" :disabled="flag == '0'">
<div style="display: inline-flex">
<div class="infoIcon"></div>
<div class="caseInfo">案件信息:</div>
</div>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<el-form-item label="案件编号:" prop="caseNum" v-if="flag !== '2'">
<el-input v-model="formData.caseNum" placeholder="请输入案件编号" :disabled="flag == '1'" />
</el-form-item>
</el-col>
<el-col :span="12">
<!-- :disabled="flag == '1'" -->
<el-form-item label="案件名称:" prop="caseName">
<el-input v-model="formData.caseName" placeholder="请输入案件名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="案件标的:" prop="caseSubjectAmount">
<el-input v-model="formData.caseSubjectAmount" placeholder="请输入案件标的"
@input="numberFn('caseSubjectAmount')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="借款开始日期:" prop="loanStartDate">
<el-date-picker v-model="formData.loanStartDate" type="datetime" placeholder="借款开始日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="借款结束日期:" prop="loanEndDate">
<el-date-picker v-model="formData.loanEndDate" type="datetime" placeholder="借款结束日期"
@change="setEndTime">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同编号:" prop="contractNumber">
<el-input v-model="formData.contractNumber" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请人主张欠本金:" prop="claimPrinciOwed">
<el-input v-model="formData.claimPrinciOwed" placeholder="请输入" @input="numberFn('claimPrinciOwed')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请人主张欠利息:" prop="claimInterestOwed">
<el-input v-model="formData.claimInterestOwed" placeholder="请输入"
@input="numberFn('claimInterestOwed')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请人主张违约金:" prop="claimLiquidDamag">
<el-input v-model="formData.claimLiquidDamag" placeholder="请输入" @input="numberFn('claimLiquidDamag')" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="申请人请求仲裁庭裁决:" prop="requestRule">
<el-input v-model="formData.requestRule" placeholder="请输入申请人请求仲裁庭裁决" type="textarea"
:autosize="{ minRows: 4, maxRows: 8 }" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="是否财产保全申请:" prop="properPreser">
<el-radio-group v-model="formData.properPreser">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="是否书面审理" prop="applicantIsWrittenHear">
<el-radio-group v-model="formData.applicantIsWrittenHear">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<!-- 应缴费用 -->
<el-col :span="12" v-if="flag == 0">
<el-form-item label="应缴费用:" prop="feePayable">
<el-input v-model="formData.feePayable" placeholder="请输入" />
</el-form-item>
</el-col>
<!-- 申请人仲裁诉求 -->
<el-col :span="24">
<el-form-item label="申请人仲裁请求" prop="arbitratClaims">
<el-input v-model="formData.arbitratClaims" placeholder="请输入申请人仲裁诉求" type="textarea"
:autosize="{ minRows: 4, maxRows: 8 }" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="事实和理由" prop="facts">
<el-input v-model="formData.facts" placeholder="请输入事实和理由" type="textarea"
:autosize="{ minRows: 4, maxRows: 8 }" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请人案件证据资料上传:" prop="applicantEvidence" v-if="flag !== '0'">
<el-upload class="upload-demo" ref="fileupload" accept=".png,.jpg,.doc,.docx,.txt,.pdf"
:action="UploadUrl()" :on-success="handlSuccess" :on-remove="handleRemove" :on-preview="handlePreview"
:before-remove="beforeRemove" :data="filedata" :headers="headers" multiple :limit="50"
:on-exceed="handleExceed" :file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
文件支持上传.jpg,png,.doc,docx,.txt,.pdf文件
</div>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="24" v-if="flag == '2'">
<el-form-item label="裁决书模板" prop="templateId">
<el-select placeholder="请选择裁决书模板" v-model="formData.templateId">
<el-option v-for="item in templateList" :label="item.temName" :key="item.id"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请人案件证据资料:" v-if="flag == '0' &&
caseAttachList.length > 0 &&
applicateArr.length > 0
">
<div v-for="(item, index) in applicateArr" :key="index">
<a href="#" @click="toFile(item, index)" style="color: blue">
{{ item.annexName }}
</a>
</div>
</el-form-item>
</el-col>
<!-- 仅详情展示 案件质证环节以后显示被申请人证据-->
<el-col :span="12">
<el-form-item label="被申请人案件证据资料:" prop="respondentEvidence" v-if="flag == '0' && caseAttachList.length > 0 && quiltArr.length > 0
">
<div v-for="(item, index) in quiltArr" :key="index">
<a href="#" @click="toFile1(item, index)" style="color: blue">
{{ item.annexName }}
</a>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 申请人主体信息 -->
<el-form ref="form2" :model="form2" label-width="150px" :disabled="flag == '0'">
<div class="applicant" v-for="(item, index) in form2.applicant" :key="item.key">
<el-col :span="24">
<div style="display: inline-flex">
<div class="infoIcon"></div>
<div class="caseInfo">申请人</div>
</div>
<el-divider></el-divider>
</el-col>
<el-col :span="24">
<el-form-item label="选择机构或自然人">
<el-radio-group v-model="item.applicant.organizeFlag" @change="clearValidate($event, index)">
<el-radio :label="0">自然人</el-radio>
<el-radio :label="1">机构</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 1">
<el-form-item label="机构名称" :prop="'applicant.' + index + '.applicant.name'" :rules="[
{
required: true,
message: '申请机构名称不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.applicant.name" placeholder="请输入申请机构名称" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 0">
<el-form-item label="申请人" :prop="'applicant.' + index + '.applicant.name'" :rules="[
{
required: true,
message: '申请人名称不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.applicant.name" placeholder="请输入申请人姓名" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 0">
<el-form-item label="是否为操作人" :prop="'applicant.' + index + '.applicant.operatorFlag'" :rules="[
{
required: true,
message: '请选择是否为操作人',
trigger: 'blur',
},
]">
<el-select v-model="item.applicant.operatorFlag" placeholder="请选择" auto-complete="off"
style="width: 100%;" disabled>
<el-option v-for="item in roleTypeList" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 1">
<el-form-item label-width="140px" label="统一社会信用代码" :prop="'applicant.' + index + '.applicant.code'"
:rules="[
{
required: true,
message: '统一社会信用代码不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.applicant.code" placeholder="请输入统一社会信用代码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :prop="'applicant.' + index + '.applicant.nationality'" label="国籍" :rules="[
{
required: true,
message: '国籍不能为空',
trigger: 'blur',
},
]">
<el-select v-model="item.applicant.nationality" placeholder="请选择国籍" auto-complete="off"
style="width: 100%;">
<el-option v-for="item in nationalityList" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 0">
<el-form-item :prop="'applicant.' + index + '.applicant.idType'" label="证件类型" :rules="[
{
required: true,
message: '证件类型不能为空',
trigger: 'blur',
},
]">
<el-select v-model="item.applicant.idType" placeholder="证件类型" auto-complete="off" style="width: 100%;">
<el-option v-for="(item, index) in idTypeList" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 0">
<el-form-item label="证件号码" :prop="'applicant.' + index + '.applicant.idCard'" :rules="[
{
required: true,
message: '证件号码不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.applicant.idCard" placeholder="请输入申请人的证件号码" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 0">
<el-form-item label-width="140px" label="出生年月:" :prop="'applicant.' + index + '.applicant.birth'">
<el-date-picker v-model="item.applicant.birth" type="date" placeholder="申请人出生年月日">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 0">
<el-form-item label="性别:" :prop="'applicant.' + index + '.applicant.sex'" :rules="[
{
required: true,
message: '请选择性别',
},
]">
<el-radio-group v-model="item.applicant.sex">
<el-radio :label="'0'">男</el-radio>
<el-radio :label="'1'">女</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 0">
<el-form-item label="邮箱" :prop="'applicant.' + index + '.applicant.email'" :rules="[
{
required: true,
message: '申请人邮箱不能为空',
trigger: 'blur',
},
{
pattern:
/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
message: '请输入正确的邮箱地址',
trigger: 'blur',
},
]">
<el-input v-model="item.applicant.email" placeholder="请输入申请人邮箱" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 0">
<el-form-item label="电话" :prop="'applicant.' + index + '.applicant.phone'" :rules="[
{
required: true,
message: '申请人联系电话不能为空',
trigger: 'blur',
},
{
pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
message: '请输入正确的手机号码',
trigger: 'blur',
},
]">
<el-input v-model="item.applicant.phone" placeholder="请输入申请人联系电话" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 1">
<el-form-item label="法定代表人" :prop="'applicant.' + index + '.applicant.compLegalPerson'" :rules="[
{
required: true,
message: '法定代表人不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.applicant.compLegalPerson" placeholder="请输入法定代表人" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="住所" :prop="'applicant.' + index + '.applicant.home'" :rules="[
{
required: true,
message: '申请人住所不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.applicant.home" placeholder="请输入申请人住所" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系地址" :prop="'applicant.' + index + '.applicant.address'" :rules="[
{
required: true,
message: '申请人联系地址不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.applicant.address" placeholder="请输入申请人联系地址" />
</el-form-item>
</el-col>
<el-col :span="24">
<div style="display: inline-flex">
<div class="infoIcon"></div>
<div class="caseInfo">申请人代理人</div>
</div>
<el-divider></el-divider>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 1">
<el-form-item label="联系电话" :prop="'applicant.' + index + '.applicantAgent.phone'" :rules="[
{
required: true,
message: '代理人联系电话不能为空',
trigger: 'blur',
},
{
pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
message: '请输入正确的手机号码',
trigger: 'blur',
},
]">
<el-input v-model="item.applicantAgent.phone" placeholder="请输入代理人联系电话" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 0">
<el-form-item label="联系电话" :prop="'applicant.' + index + '.applicantAgent.phone'">
<el-input v-model="item.applicantAgent.phone" placeholder="请输入代理人联系电话" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 1">
<el-form-item label="姓名" :prop="'applicant.' + index + '.applicantAgent.name'" :rules="[
{
required: true,
message: '代理人姓名不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.applicantAgent.name" placeholder="请输入代理人姓名" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 0">
<el-form-item label="姓名" :prop="'applicant.' + index + '.applicantAgent.name'">
<el-input v-model="item.applicantAgent.name" placeholder="请输入代理人姓名" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否为操作人" :prop="'applicant.' + index + '.applicant.operatorFlag'">
<el-select v-model="item.applicantAgent.operatorFlag" placeholder="请选择" auto-complete="off"
style="width: 100%;">
<el-option v-for="item in roleTypeList" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 1">
<el-form-item label="邮箱" :prop="'applicant.' + index + '.applicantAgent.email'" :rules="[
{
required: true,
message: '代理人邮箱不能为空',
trigger: 'blur',
},
{
pattern:
/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
message: '请输入正确的邮箱地址',
trigger: 'blur',
},
]">
<el-input v-model="item.applicantAgent.email" placeholder="请输入代理人邮箱" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.applicant.organizeFlag == 0">
<el-form-item label="邮箱" :prop="'applicant.' + index + '.applicantAgent.email'" :rules="[
{
pattern:
/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
message: '请输入正确的邮箱地址',
trigger: 'blur',
},
]">
<el-input v-model="item.applicantAgent.email" placeholder="请输入代理人邮箱" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-button type="danger" icon="el-icon-delete" @click="deleteData(index)"
v-if="form2.applicant.length > 1"></el-button>
</el-col>
</div>
</el-form>
<el-button v-if="flag == 2" type="primary" icon="el-icon-circle-plus-outline"
style="margin-top: 20px;margin-bottom: 20px;" @click="generateForm">新增申请人主体信息</el-button>
<!-- 被申请人主体信息 -->
<el-form ref="form3" label-width="150px" :disabled="flag == '0'" :model="form2">
<div class="res" v-for="(item, index) in form2.res" :key="item.key">
<el-col :span="24">
<div style="display: inline-flex">
<div class="infoIcon"></div>
<div class="caseInfo">被申请人</div>
</div>
<el-divider></el-divider>
</el-col>
<el-col :span="24">
<el-form-item label="选择机构或自然人">
<el-radio-group v-model="item.res.organizeFlag" @change="clearValidate($event, index)">
<el-radio :label="0">自然人</el-radio>
<el-radio :label="1">机构</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 1">
<el-form-item label="机构名称" :prop="'res.' + index + '.res.name'" :rules="[
{
required: true,
message: '被申请机构名称不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.res.name" placeholder="请输入申请机构名称" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 0">
<el-form-item label="被申请人" :prop="'res.' + index + '.res.name'" :rules="[
{
required: true,
message: '被申请人名称不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.res.name" placeholder="请输入被申请人姓名" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 0">
<el-form-item label="是否为操作人" :prop="'res.' + index + '.res.operatorFlag'" :rules="[
{
required: true,
message: '请选择是否为操作人',
trigger: 'blur',
},
]">
<el-select v-model="item.res.operatorFlag" placeholder="请选择" auto-complete="off" style="width: 100%;"
disabled>
<el-option v-for="item in roleTypeList" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 1">
<el-form-item label-width="140px" label="统一社会信用代码" :prop="'res.' + index + '.res.code'" :rules="[
{
required: true,
message: '统一社会信用代码不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.res.code" placeholder="请输入统一社会信用代码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :prop="'res.' + index + '.res.nationality'" label="国籍" :rules="[
{
required: true,
message: '国籍不能为空',
trigger: 'blur',
},
]">
<el-select v-model="item.res.nationality" placeholder="请选择国籍" auto-complete="off" style="width: 100%;">
<el-option v-for="item in nationalityList" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 0">
<el-form-item :prop="'res.' + index + '.res.idType'" label="证件类型" :rules="[
{
required: true,
message: '证件类型不能为空',
trigger: 'blur',
},
]">
<el-select v-model="item.res.idType" placeholder="证件类型" auto-complete="off" style="width: 100%;">
<el-option v-for="(item, index) in idTypeList" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 0">
<el-form-item label="证件号码" :prop="'res.' + index + '.res.idCard'" :rules="[
{
required: true,
message: '证件号码不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.res.idCard" placeholder="请输入被申请人的证件号码" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 0">
<el-form-item label-width="140px" label="出生年月:" :prop="'res.' + index + '.res.birth'">
<el-date-picker v-model="item.res.birth" type="date" placeholder="被申请人出生年月日">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 0">
<el-form-item label="性别:" :prop="'res.' + index + '.res.sex'" :rules="[
{
required: true,
message: '请选择性别',
},
]">
<el-radio-group v-model="item.res.sex">
<el-radio :label="'0'">男</el-radio>
<el-radio :label="'1'">女</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 0">
<el-form-item label="邮箱" :prop="'res.' + index + '.res.email'" :rules="[
{
required: true,
message: '被申请人邮箱不能为空',
trigger: 'blur',
},
{
pattern:
/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
message: '请输入正确的邮箱地址',
trigger: 'blur',
},
]">
<el-input v-model="item.res.email" placeholder="请输入被申请人邮箱" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 0">
<el-form-item label="电话" :prop="'res.' + index + '.res.phone'" :rules="[
{
required: true,
message: '被申请人联系电话不能为空',
trigger: 'blur',
},
{
pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
message: '请输入正确的手机号码',
trigger: 'blur',
},
]">
<el-input v-model="item.res.phone" placeholder="请输入被申请人联系电话" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 1">
<el-form-item label="法定代表人" :prop="'res.' + index + '.res.compLegalPerson'" :rules="[
{
required: true,
message: '法定代表人不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.res.compLegalPerson" placeholder="请输入法定代表人" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="住所" :prop="'res.' + index + '.res.home'" :rules="[
{
required: true,
message: '申请人住所不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.res.home" placeholder="请输入被申请人住所" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系地址" :prop="'res.' + index + '.res.address'" :rules="[
{
required: true,
message: '被申请人联系地址不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.res.address" placeholder="请输入申请人联系地址" />
</el-form-item>
</el-col>
<el-col :span="24">
<div style="display: inline-flex">
<div class="infoIcon"></div>
<div class="caseInfo">被申请人代理人</div>
</div>
<el-divider></el-divider>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 1">
<el-form-item label="联系电话" :prop="'res.' + index + '.resAgent.phone'" :rules="[
{
required: true,
message: '代理人联系电话不能为空',
trigger: 'blur',
},
{
pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
message: '请输入正确的手机号码',
trigger: 'blur',
},
]">
<el-input v-model="item.resAgent.phone" placeholder="请输入代理人联系电话" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 0">
<el-form-item label="联系电话" :prop="'res.' + index + '.resAgent.phone'">
<el-input v-model="item.resAgent.phone" placeholder="请输入代理人联系电话" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 1">
<el-form-item label="姓名" :prop="'res.' + index + '.resAgent.name'" :rules="[
{
required: true,
message: '代理人姓名不能为空',
trigger: 'blur',
},
]">
<el-input v-model="item.resAgent.name" placeholder="请输入代理人姓名" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 0">
<el-form-item label="姓名" :prop="'res.' + index + '.resAgent.name'">
<el-input v-model="item.resAgent.name" placeholder="请输入代理人姓名" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否为操作人" :prop="'res.' + index + '.resAgent.operatorFlag'">
<el-select v-model="item.resAgent.operatorFlag" placeholder="请选择" auto-complete="off"
style="width: 100%;">
<el-option v-for="item in roleTypeList" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 1">
<el-form-item label="邮箱" :prop="'res.' + index + '.resAgent.email'" :rules="[
{
required: true,
message: '代理人邮箱不能为空',
trigger: 'blur',
},
{
pattern:
/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
message: '请输入正确的邮箱地址',
trigger: 'blur',
},
]">
<el-input v-model="item.resAgent.email" placeholder="请输入代理人邮箱" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="item.res.organizeFlag == 0">
<el-form-item label="邮箱" :prop="'res.' + index + '.resAgent.email'" :rules="[
{
pattern:
/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
message: '请输入正确的邮箱地址',
trigger: 'blur',
},
]">
<el-input v-model="item.resAgent.email" placeholder="请输入代理人邮箱" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-button type="danger" icon="el-icon-delete" @click="deleteData(index)"
v-if="form2.res.length > 1"></el-button>
</el-col>
</div>
</el-form>
<el-button v-if="flag == 2" type="primary" icon="el-icon-circle-plus-outline"
style="margin-top: 20px;margin-bottom: 20px;" @click="generateForm1()">新增被申请人主体信息</el-button>
<!-- <div v-if="flag == '0' || flag == '1'">
<div style="display: inline-flex">
<div class="infoIcon"></div>
<div class="caseInfo2">仲裁申请书:</div>
</div>
<div v-for="item in caseAttachList" :key="item.annexId" v-if="item.annexType == 1"
style="margin-top:25px;margin-left:100px;">
<el-link target="_blank" type="primary" :href="fileURL + item.annexPath">{{ item.annexName }}</el-link>
</div>
</div> -->
<!-- <div style="margin-top:15px;" v-if="flag == '0'">
<div style="display: inline-flex">
<div class="infoIcon"></div>
<div class="caseInfo2">案件异议信息:</div>
</div>
<div style="margin-left:100px;">
{{ this.form.adjudicaCounterReason }}
</div>
</div> -->
</div>
<div v-show="activeName == 'second'" style="margin-top:20px;">
<el-form :model="formGrab" label-width="120px" :disabled="flag == '0'">
<el-form-item v-for="(item, index) in formGrab.list" :label="item.name" :key="item.id">
<el-input type="textarea" v-model="item.value"></el-input>
</el-form-item>
</el-form>
<!-- <el-col :span="24">
<div style="text-align:center;margin-top:50px;">
<el-button type="primary" @click="submitFormGrab" v-if="flag != 0" class="endbutton"><span>确 定</span></el-button>
<el-button @click="cancel" class="endbutton1"><span>取 消</span></el-button>
</div>
</el-col> -->
</div>
<div v-show="activeName == 'third'">
<div v-for="item in detailsAwardNum.caseAttachList" v-if="item.annexType == 3" style="margin-top:10px;">
<el-link target="_blank" type="primary" :href="fileURL + item.annexPath">{{ item.annexName }}</el-link>
</div>
<el-empty v-if="isNoData(detailsAwardNum.caseAttachList, 3) == 0" description="暂无数据"></el-empty>
</div>
<div v-show="activeName == 'fourth'">
<div v-for="item in detailsAwardNum.caseAttachList" v-if="item.annexType == 1" style="margin-top:10px;">
<el-link target="_blank" type="primary" :href="fileURL + item.annexPath">{{ item.annexName }}</el-link>
</div>
<el-empty v-if="isNoData(detailsAwardNum.caseAttachList, 1) == 0" description="暂无数据"></el-empty>
</div>
<div v-show="activeName == 'five'">
<video v-if="item.annexType == 9" style="background-color: #181717;width: 350px;height: 200px;margin: 10px;"
:src="headPath + item.annexPath" v-for="(item, index) in detailsAwardNum.caseAttachList" :key="index"
controls="controls"></video>
<el-empty v-if="isNoData(detailsAwardNum.caseAttachList, 9) == 0" description="暂无数据"></el-empty>
</div>
<div v-show="activeName == 'six'">
<div v-for="item in detailsAwardNum.caseAttachList" v-if="item.annexType == 7" style="margin-top:10px;">
<el-link target="_blank" type="primary" :href="fileURL + item.annexPath">{{ item.annexName }}</el-link>
</div>
<el-empty v-if="isNoData(detailsAwardNum.caseAttachList, 7) == 0" description="暂无数据"></el-empty>
</div>
<div v-show="activeName == 'seven'">
<div v-if="detailsAwardNum.adjudicaCounterReason">案件异议信息:{{ detailsAwardNum.adjudicaCounterReason }}</div>
<el-empty v-if="!detailsAwardNum.adjudicaCounterReason" description="暂无数据"></el-empty>
</div>
<div slot="footer" class="dialog-footer" style="text-align:center;margin-top:20px;">
<el-button type="primary" @click="submitForm" v-if="flag != 0" class="endbutton"
:loading="loadingSubmit"><span>确 定</span></el-button>
<el-button @click="cancel" class="endbutton1"><span>取 消</span></el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import moment from "moment"; //导入文件
import { getToken } from "@/utils/auth";
import { addCaseApply, editCaseApply, editCaseApplicationDefineval, selectCaseApply } from "@/api/caseAccess/caseEntry";
import {
getTemplate,
} from "@/api/officialSeal/officialSeal.js";
export default {
props: [
"visible",
"dialogtitle",
"form",
"getcaseApply",
"flag",
"initpaymentArr",
"initpaymentArr1",
"queryParams",
// "caseAttachList",
"columnValues",
"detailsAwardForm"
],
data() {
return {
headPath: window.location.origin + "/API",
detailsAwardNum: {},
activeName: 'first',
loadingSubmit: false,
fileURL: window.location.origin + "/API",
formData: {},
templateList: [],
filedata: {
annexType: 2,
},
headers: {
Authorization: "Bearer " + getToken(),
},
form2: {
applicant: [
{
applicant: {
roleType: 1,
name: "",
idCard: "",
code: "",
phone: "",
compLegalPerson: "",
email: "",
home: "",
address: "",
idType: 0,
nationality: 1,
birth: "",
sex: "1",
operatorFlag: 1,
organizeFlag: 0,
},
applicantAgent: {
roleType: 2,
name: "",
idCard: "",
code: "",
phone: "",
compLegalPerson: "",
email: "",
home: "",
address: "",
idType: 0,
nationality: 1,
birth: "",
sex: "1",
operatorFlag: 1,
organizeFlag: 0,
},
},
],
res: [
{
res: {
roleType: 3,
name: "",
idCard: "",
code: "",
phone: "",
compLegalPerson: "",
email: "",
home: "",
address: "",
idType: 0,
nationality: 1,
birth: "",
sex: "0",
operatorFlag: 1,
organizeFlag: 0,
},
resAgent: {
roleType: 4,
name: "",
idCard: "",
code: "",
phone: "",
compLegalPerson: "",
email: "",
home: "",
address: "",
idType: 0,
nationality: 1,
birth: "",
sex: "",
operatorFlag: 1,
organizeFlag: 0,
}
}
]
},
roleTypeList: [
{
value: '否',
id: 0
},
{
value: '是',
id: 1
}
],
nationalityList: [
{
value: '境内',
id: 0
},
{
value: '境外',
id: 1
}
],
idTypeList: [
{
value: '身份证',
id: 0
},
{
value: '护照',
id: 1
}
],
//申请人主体信息
form3: {
paymentArr1: [
{
identityType: 2,
name: "",
identityNum: "",
contactTelphone: "",
email: "",
workAddress: "",
workTelphone: "",
contactAddress: "",
nameAgent: "",
contactTelphoneAgent: "",
contactAddressAgent: "",
responSex: 1,
responBirth: "",
residenAffili: ""
},
],
}, //被申请人主体信息
// 抓取内容
formGrab: {
list: []
},
formGrabList: [],
// 表单校验
rules: {
caseSubjectAmount: [
{
required: true,
message: "案件标的不能为空",
trigger: "blur",
},
],
caseName: [
{
required: true,
message: "案件名称不能为空",
trigger: "blur",
},
],
loanStartDate: [
{
required: true,
message: "借款开始日期不能为空",
trigger: "blur",
},
],
loanEndDate: [
{
required: true,
message: "借款结束日期不能为空",
trigger: "blur",
},
],
name: [
{
required: true,
message: "申请人姓名不能为空",
trigger: "blur",
},
],
contractNumber: [
{
required: true,
message: "合同编号不能为空",
trigger: "blur",
},
],
claimPrinciOwed: [
{
required: true,
message: "申请人主张欠本金不能为空",
trigger: "blur",
},
],
claimInterestOwed: [
{
required: true,
message: "申请人主张欠利息不能为空",
trigger: "blur",
},
],
Overduedays: [
{
required: true,
message: "逾期天数不能为空",
trigger: "blur",
},
],
claimLiquidDamag: [
{
required: true,
message: "申请人主张违约金不能为空",
trigger: "blur",
},
],
arbitratClaims: [
{
required: true,
message: "请输入申请人仲裁诉求",
trigger: "blur",
},
],
facts: [
{
required: true,
message: "请输入事实和理由",
trigger: "blur",
}
],
templateId: [
{
required: true,
message: '请输入裁决书模板',
trigger: 'change'
}
],
feePayable: [
{
required: true,
},
]
},
// annexId: '',
caseAttachListArr: [],
fileList: [],
applicateArr: [],
quiltArr: [],
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6;
}
}
};
},
watch: {
visible(val) {
this.activeName = "first"
this.formGrab.list = this.columnValues
this.caseAttachListArr = []
if (val) {
this.applicateArr = [];
this.quiltArr = [];
this.fileList = [];
if (this.flag == "2") {
this.form2 = {
applicant: [
{
applicant: {
roleType: 1,
name: "",
idCard: "",
code: "",
phone: "",
compLegalPerson: "",
email: "",
home: "",
address: "",
idType: 0,
nationality: 1,
birth: "",
sex: "1",
operatorFlag: 1,
organizeFlag: 0,
},
applicantAgent: {
roleType: 2,
name: "",
idCard: "",
code: "",
phone: "",
compLegalPerson: "",
email: "",
home: "",
address: "",
idType: 0,
nationality: 1,
birth: "",
sex: "1",
operatorFlag: 1,
organizeFlag: 0,
},
},
],
res: [
{
res: {
roleType: 3,
name: "",
idCard: "",
code: "",
phone: "",
compLegalPerson: "",
email: "",
home: "",
address: "",
idType: 0,
nationality: 1,
birth: "",
sex: "0",
operatorFlag: 1,
organizeFlag: 0,
},
resAgent: {
roleType: 4,
name: "",
idCard: "",
code: "",
phone: "",
compLegalPerson: "",
email: "",
home: "",
address: "",
idType: 0,
nationality: 1,
birth: "",
sex: "",
operatorFlag: 1,
organizeFlag: 0,
}
}
]
}
this.form3.paymentArr1 = [
{
identityType: 2,
name: "",
identityNum: "",
contactTelphone: "",
email: "",
workAddress: "",
workTelphone: "",
contactAddress: "",
nameAgent: "",
contactTelphoneAgent: "",
contactAddressAgent: "",
},
];
}
}
if (val && (this.flag == "0" || this.flag == "1")) {
setTimeout(() => {
this.detailsAwardNum = this.detailsAwardForm;
}, 2000)
this.getTemplateFn({
pageNum: 1,
pageSize: 10000000,
})
let params = {
id: this.form.id,
version: this.form.version
}
selectCaseApply(params).then(res => {
let data = res.data;
data.affiliate.applicant.forEach(item => {
if (!item.applicant) {
item.applicant = {}
}
if (!item.applicantAgent) {
item.applicantAgent = {}
}
})
data.affiliate.res.forEach(item => {
if (!item.res) {
item.res = {}
}
if (!item.resAgent) {
item.resAgent = {}
}
})
this.caseAttachList = data.caseAttachList;
this.caseAttachList.forEach((item) => {
if (item.annexType == 2) {
this.applicateArr.push({
annexName: item.annexName,
annexPath: item.annexPath,
});
}
if (item.annexType == 6) {
this.quiltArr.push({
annexName: item.annexName,
annexPath: item.annexPath,
});
}
});
if (this.caseAttachList.length > 0) {
this.caseAttachListArr = this.caseAttachList
}
this.caseAttachList.forEach((item) => {
if (item.annexType == 2) {
this.fileList.push(item)
}
});
this.fileList.forEach((item) => {
item["name"] = item.annexName;
item["certificatePath"] = item.annexPath;
});
this.formData = data;
this.form2 = data.affiliate;
})
// this.detailsAwardNum = this.detailsAwardForm;
// console.log(this.detailsAwardNum.caseAttachList,"PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP");
}
}
},
methods: {
clearValidate(val, index) {
this.$refs["form2"].clearValidate()
},
isNoData(data, type) {
let resNumber = 0
if (data) {
let list = data.filter(item => item.annexType == type)
if (list) {
resNumber = list.length
}
}
return resNumber
},
numberFn(p) {
this.formData[p] =
this.formData[p]
.replace(/[^\d^\.]+/g, "")
.replace(/^0+(\d)/, "$1")
.replace(/^\./, "0.")
.match(/^\d*(\.?\d{0,2})/g)[0] || "";
},
UploadUrl() {
return window.location.origin + "/API/evidence/upload";
},
handlePreview(file) {
if (this.flag == "2") {
window.open(
window.location.origin + "/API" + file.response.data.annexName,
"_blank"
);
} else if (this.flag == "1") {
window.open(
window.location.origin + "/API" + file.certificatePath,
"_blank"
);
}
},
// 文件上传成功
handlSuccess(res, file) {
this.caseAttachListArr.push(
res
);
},
// 文件超出个数限制时的钩子
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length
} 个文件`
);
},
// 获取裁决书模板
getTemplateFn(data) {
getTemplate(data).then(res => {
console.log(res)
this.templateList = res.rows;
})
},
// 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`);
},
handleRemove(file, fileList) {
console.log(this.caseAttachListArr)
this.caseAttachListArr = this.caseAttachListArr.filter(item => item.annexId != file.annexId)
// (this.caseAttachListArr = []),
// fileList.forEach((item) => {
// this.caseAttachListArr.push( item.response.data );
// });
},
// 取消
cancel() {
this.$emit("cancel");
},
// 校验借款开始日期与结束日期
// setStartTime() {
// if (
// this.setTime(this.formData.loanStartDate) >=
// this.setTime(this.formData.loanEndDate)
// ) {
// this.$message.error("借款开始日期应早于借款结束日期");
// this.formData.loanStartDate = "";
// this.formData.loanEndDate = "";
// }
// },
setEndTime() {
if (
this.setTime(this.formData.loanEndDate) <=
this.setTime(this.formData.loanStartDate)
) {
this.$message.error("借款结束日期应晚于借款开始日期");
this.formData.loanStartDate = "";
this.formData.loanEndDate = "";
}
},
setTime(val) {
const date = new Date(val);
const time = date.getTime();
return time;
},
// 新增申请人主体信息
generateForm() {
this.form2.applicant.push({
applicant: {
roleType: 1,
name: "",
idCard: "",
code: "",
phone: "",
compLegalPerson: "",
email: "",
home: "",
address: "",
idType: 0,
nationality: 1,
birth: "",
sex: "1",
operatorFlag: 1,
organizeFlag: 0,
},
applicantAgent: {
roleType: 2,
name: "",
idCard: "",
code: "",
phone: "",
compLegalPerson: "",
email: "",
home: "",
address: "",
idType: 0,
nationality: 1,
birth: "",
sex: "1",
operatorFlag: 1,
organizeFlag: 0,
},
},
);
},
// 新增被申请人主体信息
generateForm1() {
this.form2.res.push({
res: {
roleType: 3,
name: "",
idCard: "",
code: "",
phone: "",
compLegalPerson: "",
email: "",
home: "",
address: "",
idType: 0,
nationality: 1,
birth: "",
sex: "1",
operatorFlag: 1,
organizeFlag: 0,
},
resAgent: {
roleType: 4,
name: "",
idCard: "",
code: "",
phone: "",
compLegalPerson: "",
email: "",
home: "",
address: "",
idType: 0,
nationality: 1,
birth: "",
sex: "1",
operatorFlag: 1,
organizeFlag: 0,
},
},);
},
// 删除申请人主体信息
deleteData(index) {
this.form2.applicant.splice(index, 1);
},
// 删除被申请人主体信息
deleteData1(index) {
this.form3.res.splice(index, 1);
},
// 提交立案申请 addCaseApply
submitForm() {
this.$refs["form"].validate((valid) => {
this.formData.loanStartDate = moment(
this.formData.loanStartDate
).format("YYYY-MM-DD HH:mm:ss");
this.formData.loanEndDate = moment(this.formData.loanEndDate).format(
"YYYY-MM-DD HH:mm:ss"
);
if (valid) {
this.loadingSubmit = true;
this.$refs["form2"].validate((valid) => {
if (valid) {
this.$refs["form3"].validate((vail) => {
if (vail) {
this.$set(this.formData, "affiliate", { applicant: [], res: [] });
this.$set(this.formData.affiliate, "applicant", this.form2.applicant);
this.$set(this.formData.affiliate, "res", this.form2.res);
this.$set(this.formData.affiliate, "applicant", this.form2.applicant);
this.$set(this.formData.affiliate, "res", this.form2.res);
this.formData.caseAttachList = [...this.caseAttachListArr];
// this.formData.affiliate[1].responBirth = moment(this.formData.caseAffiliates[1].responBirth).format(
// "YYYY-MM-DD HH:mm:ss"
// );
if (this.formData.id) {
this.formData['columnValues'] = this.formGrab.list
addCaseApply({
...this.formData,
affiliate: this.formData.affiliate,
}).then((res) => {
if (res.code == 200) {
this.$modal.msgSuccess("修改成功");
this.$emit("cancel");
this.getcaseApply(this.queryParams);
this.loadingSubmit = false;
}
}).catch((err) => {
this.loadingSubmit = false;
});
} else {
addCaseApply({
...this.formData,
affiliate: this.formData.affiliate,
}).then((response) => {
if (response.code == 200) {
this.$modal.msgSuccess("新增成功");
this.$emit("cancel");
this.getcaseApply(this.queryParams);
this.loadingSubmit = false;
}
}).catch((err) => {
this.loadingSubmit = false;
});
}
}
});
}
});
}
});
},
// 提交抓取内容修改
// submitFormGrab(){
// this.$refs['formGrabRef'].validate((valid) => {
// if(valid){
// this.formGrabList['columnValues']= this.formGrab.list
// console.log(this.formGrabList)
// editCaseApplicationDefineval({columnValues:this.formGrab.list}).then(res=>{
// if (res.code == 200) {
// this.$modal.msgSuccess("修改成功");
// this.$emit("cancel");
// this.getcaseApply(this.queryParams);
// }
// })
// }
// });
// },
// 详情显示,展示申请人案件文件
toFile(item, index) {
window.open(
window.location.origin + "/API" + this.applicateArr[index].annexPath,
"_black"
);
},
// 被申请人文件
toFile1(item, index) {
window.open(
window.location.origin + "/API" + this.quiltArr[index].annexPath,
"_black"
);
},
// tabs页
handleClick(tab, event) {
// console.log(tab, event);
}
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
height: 700px !important;
overflow: auto !important;
}
::v-deep .el-dialog {
width: 800px;
background: #ffffff;
border-radius: 20px;
}
.caseInfo {
font-size: 17px;
font-weight: 600;
}
.caseInfo2 {
font-size: 15px;
font-weight: 550;
}
.infoIcon {
width: 4px;
// height: 17px;
background-color: #0072ff;
margin-right: 5px;
}
.el-date-editor {
width: 100%;
}
.endbutton {
width: 154px;
height: 37px;
background: #0072ff;
border-radius: 19px;
span {
width: 96px;
height: 15px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
}
.endbutton1 {
width: 154px;
height: 37px;
background: #ffffff;
border: 1px solid #d0d0d0;
border-radius: 19px;
span {
width: 31px;
height: 13px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #959595;
}
}
::v-deep .el-input--medium .el-input__inner {
height: 40px;
line-height: 40px;
}
</style>