Mediation-Frontend/src/views/caseManagement/components/addCase.vue

<template>
  <div>
    <el-dialog :title="title" :visible="addVisable" v-if="addVisable" @close="cancel" width="1000px" center
      :distroy-on-close="true">
      <el-tabs v-model="activeName">
        <el-tab-pane label="案件信息" name="first"> </el-tab-pane>
        <el-tab-pane label="证据清单" name="second" v-if="tabFlag">
        </el-tab-pane>
      </el-tabs>
      <el-form v-if="activeName == 'first'" :disabled="caseDisabled" :model="formData" ref="ruleForm"
        label-width="130px" class="demo-ruleForm">
        <el-row>
          <div style="display: inline-flex">
            <div class="infoIcon"></div>
            <div class="caseInfo">案件信息：</div>
          </div>
          <el-divider></el-divider>
          <el-col :span="24">
            <el-form-item label="压缩包导入">
              <el-upload class="upload-demo" :action="zipUrl()" :before-remove="beforeRemoveZip" multiple accept='.zip'
                :limit="1" :on-exceed="handleExceedZip" :on-success='successZip' :file-list="fileListZip">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传zip压缩包</div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="申请人调解请求" prop="arbitratClaims" :rules="[
      {
        required: true,
        message: '申请人调解请求不能为空',
        trigger: 'blur',
      },
    ]">
              <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" :rules="[
      {
        required: true,
        message: '事实和理由不能为空',
        trigger: 'blur',
      },
    ]">
              <el-input v-model="formData.facts" placeholder="请输入事实和理由" type="textarea"
                :autosize="{ minRows: 4, maxRows: 8 }" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="buttonFlag">
            <el-form-item label="申请人案件证据资料上传：" prop="applicantEvidence">
              <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="modelFlag && showEvidence">
            <el-form-item label="证据:">
              <div v-for="(item, index) in formData.caseAttachList" :key="index" v-if="item.annexType == 2">
                <div style="color: blue; cursor: pointer" @click="fileDetil(item.annexPath,1)">
                  {{ item.annexName }}
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="modelFlag && mediationApplication">
            <el-form-item label="调解申请书:">
              <div v-for="(item, index) in formData.caseAttachList" :key="index" v-if="item.annexType == 3">
                <div style="color: blue; cursor: pointer" @click="fileDetil(item.annexPath, 1)">
                  {{ item.annexName }}
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="modelFlag && showmediate">
            <el-form-item label="调解书:">
              <div v-for="(item, index) in formData.caseAttachList" :key="index" v-if="item.annexType == 7">
                <div style="color: blue; cursor: pointer" @click="fileDetil(item.onlyOfficeFileId, 2)">
                  {{ item.annexName }}
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="调解结果:" v-if="modelFlag && formData.mediaResult">
              <el-link v-if="formData.mediaResult == 1">达成调解</el-link>
              <el-link v-if="formData.mediaResult == 2">未达成调解</el-link>
              <el-link v-if="formData.mediaResult == 3">未达成调解但不在争议</el-link>
              <el-link v-if="formData.mediaResult == 4">未达成调解但同意引入仲裁</el-link>
              <el-link v-if="formData.mediaResult == 5">达成和解</el-link>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div style="display: inline-flex">
              <div class="infoIcon"></div>
              <div class="caseInfo" style="margin-right: 20px;">双方信息：</div>
            </div>
            <el-divider></el-divider>
          </el-col>
          <el-col :span="24">
            <el-form-item label="选择机构或自然人" prop="organizeFlag">
              <el-radio-group v-model="formData.organizeFlag" :disabled="modelFlag" @change="clearValidate">
                <el-radio :label="0">自然人</el-radio>
                <el-radio :label="1">机构</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click='addApplicant' style="margin-bottom: 40px;">新增申请人信息</el-button>
            </el-col>
          <div class="applicant" v-for="(item, index) in formData.affiliate.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="12" v-if="formData.organizeFlag == 1">
              <el-form-item label="申请机构名称" :prop="'affiliate.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="formData.organizeFlag == 0">
              <el-form-item label="申请人" :prop="'affiliate.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="formData.organizeFlag == 0">
              <el-form-item label="是否为操作人" :prop="'affiliate.applicant.' + index + '.applicant.operatorFlag'" :rules="[
      {
        required: true,
        message: '请选择是否为操作人',
        trigger: 'blur',
      },
    ]">
                <el-select v-model="item.applicant.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="formData.organizeFlag == 1">
              <el-form-item label-width="140px" label="统一社会信用代码" :prop="'affiliate.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="'affiliate.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="formData.organizeFlag == 0">
              <el-form-item :prop="'affiliate.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 in idTypeList" :key="Number(item.dictValue)" :label="item.dictLabel"
                    :value="Number(item.dictValue)">

                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="formData.organizeFlag == 0">
              <el-form-item label="证件号码" :prop="'affiliate.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="formData.organizeFlag == 0">
              <el-form-item label="申请人邮箱" :prop="'affiliate.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="formData.organizeFlag == 0">
              <el-form-item label="申请人电话" :prop="'affiliate.applicant.' + index + '.applicant.phone'" :rules="formData.affiliate.nationality == 0 ? [
      {
        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="formData.organizeFlag == 1">
              <el-form-item label="法定代表人" :prop="'affiliate.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="'affiliate.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="'affiliate.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="formData.organizeFlag == 1">
              <el-form-item label="代理人联系电话" :prop="'affiliate.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="formData.organizeFlag == 0">
              <el-form-item label="代理人联系电话" :prop="'affiliate.applicant.' + index + '.applicantAgent.phone'">
                <el-input v-model="item.applicantAgent.phone" placeholder="请输入代理人联系电话" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="formData.organizeFlag == 1">
              <el-form-item label="代理人姓名" :prop="'affiliate.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="formData.organizeFlag == 0">
              <el-form-item label="代理人姓名" :prop="'affiliate.applicant.' + index + '.applicantAgent.name'">
                <el-input v-model="item.applicantAgent.name" placeholder="请输入代理人姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="formData.organizeFlag == 0">
              <el-form-item label="是否为操作人" :prop="'affiliate.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="formData.organizeFlag == 1">
              <el-form-item label="代理人邮箱" :prop="'affiliate.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="formData.organizeFlag == 0">
              <el-form-item label="代理人邮箱" :prop="'affiliate.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="primary" icon="el-icon-delete" style='margin-bottom: 40px;' @click='deleteApplicant(item)'>删除</el-button>
            </el-col>
          </div>
          <el-col :span="24">
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click='addRes' style="margin-bottom: 40px;">新增被申请人信息</el-button>
            </el-col>
          <div class="res" v-for="(item, index) in formData.affiliate.res" :key="index">
            <el-col :span="24">
              <div style="display: inline-flex">
                <div class="infoIcon"></div>
                <div class="caseInfo" style="margin-right: 40px;">被申请人</div>
              </div>
              <el-divider></el-divider>
            </el-col>
            <el-col :span="12">
              <el-form-item label="被申请人姓名" :prop="'affiliate.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="formData.organizeFlag == 0">
              <el-form-item label="是否为操作人" :prop="'affiliate.res.' + index + '.res.operatorFlag'">
                <el-select v-model="item.res.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">
              <el-form-item label-width="140px" label="被申请人联系电话" :prop="'affiliate.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">
              <el-form-item label-width="150px" label="被申请人申请人住所" :prop="'affiliate.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="'affiliate.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">
              <el-form-item label-width="140px" label="被申请人身份证号" :prop="'affiliate.res.' + index + '.res.idCard'" :rules="[
      {
        required: true,
        message: '被申请人身份证号不能为空',
        trigger: 'blur',
      },
      {
        pattern:
          /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
        message: '请输入正确的身份证号码',
        trigger: 'blur',
      },
    ]">
                <el-input v-model="item.res.idCard" @blur="handleBlur(index)" placeholder="请输入被申请人身份证号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="140px" label="被申请人出生年月：" :prop="'affiliate.res.' + index + '.res.birth'">
                <el-date-picker disabled v-model="item.res.birth" type="date" placeholder="被申请人出生年月日">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="被申请人性别：" :prop="'affiliate.res.' + index + '.res.sex'" :rules="[
      {
        required: true,
        message: '请选择性别',
      },
    ]">
                <el-radio-group v-model="item.res.sex" disabled>
                  <el-radio :label="'0'">男</el-radio>
                  <el-radio :label="'1'">女</el-radio>
                </el-radio-group>
              </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="formData.organizeFlag == 1">
              <el-form-item label="代理人联系电话" :prop="'affiliate.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="formData.organizeFlag == 0">
              <el-form-item label="代理人联系电话" :prop="'affiliate.res.' + index + '.resAgent.phone'">
                <el-input v-model="item.resAgent.phone" placeholder="请输入代理人联系电话" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="formData.organizeFlag == 1">
              <el-form-item label="代理人姓名" :prop="'affiliate.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="formData.organizeFlag == 0">
              <el-form-item label="是否为操作人" :prop="'affiliate.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="formData.organizeFlag == 0">
              <el-form-item label="代理人姓名" :prop="'affiliate.res.' + index + '.resAgent.name'">
                <el-input v-model="item.resAgent.name" placeholder="请输入代理人姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="formData.organizeFlag == 1">
              <el-form-item label="代理人邮箱" :prop="'affiliate.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="formData.organizeFlag == 0">
              <el-form-item label="代理人邮箱" :prop="'affiliate.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="24" v-if="modelFlag">
              <el-form-item v-for="item in formData.columnValueList" :label="item.name" :key="item.id">
                <el-input type="textarea" v-model="item.value"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" icon="el-icon-delete" style='margin-bottom: 40px;' @click='deleteRes(item)'>删除</el-button>
            </el-col>
          </div>

        </el-row>

      </el-form>
      <div v-if="activeName == 'second'">
        <el-card class="box-card" style="margin-bottom: 30px" v-if="applicantEvidence.length">
          <div slot="header" class="clearfix">
            <span>申请人证据清单</span>
          </div>
          <div v-for="(item, index) in applicantEvidence" :key="index" class="text item"
            style="color: blue; cursor: pointer" @click="toPreview(item.annexPath)">
            {{ item.annexName }}
          </div>
        </el-card>
        <el-card class="box-card" v-if="respondentEvidence.length">
          <div slot="header" class="clearfix">
            <span>被申请人证据清单</span>
          </div>
          <div v-for="(item, index) in respondentEvidence" :key="index" class="text item"
            style="color: blue; cursor: pointer" @click="toPreview(item.annexPath)">
            {{ item.annexName }}
          </div>
        </el-card>
      </div>
      <div slot="footer" class="dialog-footer" v-if="buttonFlag">
        <el-button @click="cancel" class="endbutton"><span>取 消</span></el-button>
        <el-button type="primary" @click="submitForm" class="endbutton"><span>确认</span></el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  caseApplicationInsert,
  caseApplicationSelectById,
  updateComfire,
  getInfoByIdCard,
  getUserInfo,
  getIdType
} from "@/api/caseManagement/caseManagement.js";
import { getTemplate } from "@/api/officialSeal/officialSeal.js";
import { getToken } from "@/utils/auth";
export default {
  props: [
    "addVisable",
    "queryParams",
    "caseData",
    "caseDisabled",
    "tabFlag",
    "addModifyData",
  ],
  // dicts: ["id_type"],
  data() {
    return {
      activeName: "first",
      title: "新增案件",
      // organizeFlag:0,//选择机构和自然人
      formData: {
        caseSource:"YC",
        arbitratClaims: "",
        facts: "",
        organizeFlag: 0,
        affiliate:
        {
          applicant: [
            {
              applicant: {
                roleType: 1,
                name: "",
                idCard: "",
                code: "",
                phone: "",
                compLegalPerson: "",
                email: "",
                home: "",
                address: "",
                idType: 0,
                nationality: 1,
                birth: "",
                sex: "1",
                operatorFlag:0
              },
              applicantAgent: {
                roleType: 2,
                name: "",
                idCard: "",
                code: "",
                phone: "",
                compLegalPerson: "",
                email: "",
                home: "",
                address: "",
                idType: 0,
                nationality: 1,
                birth: "",
                sex: "1",
                operatorFlag:0
              },
            },
          ],
          res: [
            {
              res: {
                roleType: 3,
                name: "",
                idCard: "",
                code: "",
                phone: "",
                compLegalPerson: "",
                email: "",
                home: "",
                address: "",
                idType: 0,
                nationality: 1,
                birth: "",
                sex: "0",
                operatorFlag:0
              },
              resAgent: {
                roleType: 4,
                name: "",
                idCard: "",
                code: "",
                phone: "",
                compLegalPerson: "",
                email: "",
                home: "",
                address: "",
                idType: 0,
                nationality: 1,
                birth: "",
                sex: "",
                operatorFlag:0
              }
            }
          ]
        },
        columnValueList: [],
        caseAttachList: [],
      },
      templateList: [],
      modelFlag: false,
      fileURL: window.location.origin + "/API",
      fileList: [],
      fileListZip: [],
      filedata: {
        annexType: 2,
      },
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      applicantEvidence: [], //申请人证据
      respondentEvidence: [], //被申请人证据
      buttonFlag: true,
      getUserInfoList: {},
      applicationFlag: null,
      showmediate: false,
      showEvidence: false,//是否显示证据
      mediationApplication: false,
      formZipData: {},
      nationalityList: [
        {
          value: '境内',
          id: 0
        },
        {
          value: '境外',
          id: 1
        }
      ],
      roleTypeList: [
        {
          value: '否',
          id: 0
        },
        {
          value: '是',
          id: 1
        }
      ],
      idTypeList: [
        // {
        //   value: '身份证',
        //   id: 0
        // },
        // {
        //   value: '护照',
        //   id: 1
        // }
      ]
    };
  },
  watch: {
    addModifyData(val) {
      if (val == 1) {
        this.title = "新增案件";
        this.getUserInfoFn();
        this.modelFlag = false;
        this.buttonFlag = true;
      } else if (val == 3) {
        this.title = "修改案件";
        this.modelFlag = true;
        this.buttonFlag = true;
      } else if (val == 2) {
        this.title = "案件详情";
        this.modelFlag = true;
        this.buttonFlag = false;
      }
    },
    async addVisable(val) {
      if (val) {
        if (this.addModifyData == 1) {
          this.formData = {
            caseSource:"YC",
            organizeFlag: 0,
            affiliate:
        {
          applicant: [
            {
              applicant: {
                roleType: 1,
                name: "",
                idCard: "",
                code: "",
                phone: "",
                compLegalPerson: "",
                email: "",
                home: "",
                address: "",
                idType: 0,
                nationality: 1,
                birth: "",
                sex: "1",
                operatorFlag:0
              },
              applicantAgent: {
                roleType: 2,
                name: "",
                idCard: "",
                code: "",
                phone: "",
                compLegalPerson: "",
                email: "",
                home: "",
                address: "",
                idType: 0,
                nationality: 1,
                birth: "",
                sex: "1",
                operatorFlag:0
              }
            },
          ],
          res: [
            {
              res: {
                roleType: 3,
                name: "",
                idCard: "",
                code: "",
                phone: "",
                compLegalPerson: "",
                email: "",
                home: "",
                address: "",
                idType: 0,
                nationality: 1,
                birth: "",
                sex: "0",
                operatorFlag:0
              },
              resAgent: {
                roleType: 4,
                name: "",
                idCard: "",
                code: "",
                phone: "",
                compLegalPerson: "",
                email: "",
                home: "",
                address: "",
                idType: 0,
                nationality: 1,
                birth: "",
                sex: "",
                operatorFlag:0
              }
            }
          ]
        },
            columnValueList: [],
            caseAttachList: [],
          };
          this.$set(this.formData.affiliate.applicant[0].applicant, "name", this.getUserInfoList.nickName);
          this.$set(this.formData.affiliate.applicant[0].applicant, "idCard", this.getUserInfoList.idCard);
          this.$set(this.formData.affiliate.applicant[0].applicant, "email", this.getUserInfoList.email);
          this.$set(this.formData.affiliate.applicant[0].applicant, "phone", this.getUserInfoList.phonenumber);
          this.$set(this.formData.affiliate.applicant[0].applicant, "idType", this.getUserInfoList.idType);
          this.$set(this.formData.affiliate.applicant[0].applicant, "nationality", this.getUserInfoList.nationality);
        }
        this.activeName = "first";
        this.showmediate = false;
        this.showEvidence = false;
        this.mediationApplication = false;
        this.getTemplateFn();
        if (this.addModifyData != 1) {
          await this.getIdTypeFn();
          await this.caseApplicationSelectByIdFn(this.caseData.id);
        }
      }
    },
  },
  created() {
    // this.getUserInfoFn();
    this.getIdTypeFn();
  },
  methods: {
    /** 获取证件类型 */
    getIdTypeFn() {
      getIdType().then(res => {
        this.idTypeList = res.data;
      })
    },
    /** 切换申请类型 */
    changeApplyType(val) {
      // console.log(val, "变化");
      // this.$refs["ruleForm"].resetFields();
    },
    /**获取申请人信息 */
    getUserInfoFn() {
      getUserInfo().then(res => {
        this.getUserInfoList = res.data;
        this.$set(this.formData.affiliate.applicant[0].applicant, "name", this.getUserInfoList.nickName);
        this.$set(this.formData.affiliate.applicant[0].applicant, "idCard", this.getUserInfoList.idCard);
        this.$set(this.formData.affiliate.applicant[0].applicant, "email", this.getUserInfoList.email);
        this.$set(this.formData.affiliate.applicant[0].applicant, "phone", this.getUserInfoList.phonenumber);
        this.$set(this.formData.affiliate.applicant[0].applicant, "idType", this.getUserInfoList.idType);
        this.$set(this.formData.affiliate.applicant[0].applicant, "nationality", this.getUserInfoList.nationality);
      })
    },
    /** 根据案件id获取对应信息 */
    async caseApplicationSelectByIdFn(data) {
      this.applicantEvidence = [];
      this.respondentEvidence = [];
      await caseApplicationSelectById({ id: data }).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.formData = data;
        data.caseAttachList.forEach((item) => {
          if (item.annexType == 2) {
            this.applicantEvidence.push(item);
            this.showEvidence = true
          } else if (item.annexType == 6) {
            // this.respondentEvidence.push(item);
          } else if (item.annexType == 7) {
            this.showmediate = true
          } else if (item.annexType == 3) {
            this.mediationApplication = true
          }
        });

      });
    },
    // 新增案件
    insertFn(data) {
      caseApplicationInsert(data).then((res) => {
        this.$modal.msgSuccess("新增成功！");
        this.$emit("cancelCaseAdd");
        this.$emit("getList", this.queryParams);
      });
    },
    // 修改确定
    modifyData(data) {
      updateComfire(data).then((res) => {
        this.$modal.msgSuccess("修改成功！");
        this.$emit("cancelCaseAdd");
        this.$emit("getList", this.queryParams);
      });
    },
    /** 获取裁决书模板 */
    getTemplateFn(data) {
      getTemplate(data).then((res) => {
        this.templateList = res.rows;
      });
    },
    /** 查看证据 */
    fileDetil(val, flag) {
      if (flag == 1) {
        window.open(this.fileURL + val);
      } else if (flag == 2) {
        this.$router.push({ path: '/onlyoffice', query: { id: val, flag: 0 } })
      }
    },
    /** 查看证据 */
    toPreview(val) {
      window.open(this.fileURL + val);
    },
    /** 文件上传地址 */
    UploadUrl() {
      return window.location.origin + "/API/common/upload";
    },
    zipUrl() {
      return window.location.origin + "/API/caseApplication/userIdentify";
    },
    /**文件上传成功*/
    handlSuccess(res, file) {
      this.formData.caseAttachList.push({
        annexId: res.annexId,
      });
    },
    /**文件超出个数限制时的钩子*/
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file, fileList) {
      let newcaseAttachList = this.formData.caseAttachList.filter(item =>
        item.annexId !== file.response.annexId
      )
      this.formData.caseAttachList = newcaseAttachList
    },
    handleExceedZip(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    beforeRemoveZip(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    successZip(res) {
      this.formZipData = res.data;
      this.$set(this.formData, 'organizeFlag', 0);
      this.$set(this.formData, 'arbitratClaims', this.formZipData.arbitratClaims);
      this.$set(this.formData, 'facts', this.formZipData.facts);
      this.$set(this.formData.affiliate.applicant[0].applicant, 'home', this.formZipData.affiliate.applicant[0].applicant.home);
      this.$set(this.formData.affiliate.applicant[0].applicant, 'address', this.formZipData.affiliate.applicant[0].applicant.address);
      this.$set(this.formData.affiliate.applicant[0].applicantAgent, 'phone', this.formZipData.affiliate.applicant[0].applicantAgent.phone);
      this.$set(this.formData.affiliate.applicant[0].applicantAgent, 'name', this.formZipData.affiliate.applicant[0].applicantAgent.name);
      this.$set(this.formData.affiliate.applicant[0].applicantAgent, 'email', this.formZipData.affiliate.applicant[0].applicantAgent.email);
      this.$set(this.formData.affiliate.res[0].res, 'name', this.formZipData.affiliate.res[0].res.name);
      this.$set(this.formData.affiliate.res[0].res, 'phone', this.formZipData.affiliate.res[0].res.phone);
      this.$set(this.formData.affiliate.res[0].res, 'idCard', this.formZipData.affiliate.res[0].res.idCard);
      this.$set(this.formData.affiliate.res[0].res, 'sex', this.formZipData.affiliate.res[0].res.sex);
      this.$set(this.formData.affiliate.res[0].res, 'birth', this.formZipData.affiliate.res[0].res.birth);
      this.$set(this.formData.affiliate.res[0].res, 'home', this.formZipData.affiliate.res[0].res.home);
      this.$set(this.formData.affiliate.res[0].res, 'email', this.formZipData.affiliate.res[0].res.email);
      this.$set(this.formData.affiliate.applicant[0].applicant, 'compLegalPerson', this.formZipData.affiliate.applicant[0].applicant.compLegalPerson);
      // this.$set(this.formData.affiliate,'respondentSex',Number(res.data.affiliate.respondentSex));
    },
    handlePreview(file) {
      window.open(
        window.location.origin + "/API" + file.certificatePath,
        "_blank"
      );
    },
    // 提交form表单
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.addModifyData == 3) {
            this.modifyData(this.formData);
          } else if (this.addModifyData == 1) {
            this.insertFn(this.formData);
          }
        }
      });
    },
    clearValidate(val) {
      if (val == 0) {
        this.$set(this.formData.affiliate.applicant[0].applicant, "name", this.getUserInfoList.nickName);
        this.$set(this.formData.affiliate.applicant[0].applicant, "idCard", this.getUserInfoList.idCard);
        this.$set(this.formData.affiliate.applicant[0].applicant, "email", this.getUserInfoList.email);
        this.$set(this.formData.affiliate.applicant[0].applicant, "phone", this.getUserInfoList.phonenumber);
        if (this.formZipData.affiliate) {
          this.$set(this.formData, 'organizeFlag', 0);
          this.$set(this.formData, 'arbitratClaims', this.formZipData.arbitratClaims);
          this.$set(this.formData, 'facts', this.formZipData.facts);
          this.$set(this.formData.affiliate.applicant[0].applicant, 'name', this.formZipData.affiliate.applicant[0].applicant.name);
          this.$set(this.formData.affiliate.applicant[0].applicant, 'address', this.formZipData.affiliate.applicant[0].applicant.address);
          this.$set(this.formData.affiliate.applicant[0].applicantAgent, 'phone', this.formZipData.affiliate.applicant[0].applicantAgent.phone);
          this.$set(this.formData.affiliate.applicant[0].applicantAgent, 'name', this.formZipData.affiliate.applicant[0].applicantAgent.name);
          this.$set(this.formData.affiliate.applicant[0].applicantAgent, 'email', this.formZipData.affiliate.applicant[0].applicantAgent.email);
          this.$set(this.formData.affiliate.res[0].res, 'name', this.formZipData.affiliate.res[0].res.name);
          this.$set(this.formData.affiliate.res[0].res, 'phone', this.formZipData.affiliate.res[0].res.phone);
          this.$set(this.formData.affiliate.res[0].res, 'idCard', this.formZipData.affiliate.res[0].res.idCard);
          this.$set(this.formData.affiliate.res[0].res, 'sex', Number(this.formZipData.affiliate.res[0].res.sex));
          this.$set(this.formData.affiliate.res[0].res, 'birth', this.formZipData.affiliate.res[0].res.birth);
          this.$set(this.formData.affiliate.res[0].res, 'home', this.formZipData.affiliate.res[0].res.home);
          this.$set(this.formData.affiliate.res[0].res, 'email', this.formZipData.affiliate.res[0].res.email);
        } else {
          this.formData.affiliate.applicant[0].applicantAgent.name = null;
          this.formData.affiliate.applicant[0].applicantAgent.email = null;
          this.formData.affiliate.applicant[0].applicantAgent.phone = null;
        }
      } else if (val == 1) {
        this.$set(this.formData.affiliate.applicant[0].applicantAgent, "name", this.getUserInfoList.nickName);
        this.$set(this.formData.affiliate.applicant[0].applicantAgent, "email", this.getUserInfoList.email);
        this.$set(this.formData.affiliate.applicant[0].applicantAgent, "phone", this.getUserInfoList.phonenumber);
        if (this.formZipData.affiliate) {
          this.$set(this.formData, 'organizeFlag', 1);
          this.$set(this.formData, 'arbitratClaims', this.formZipData.arbitratClaims);
          this.$set(this.formData, 'facts', this.formZipData.facts);
          this.$set(this.formData.affiliate.applicant[0].applicant, 'name', this.formZipData.affiliate.applicant[0].applicant.name);
          this.$set(this.formData.affiliate.applicant[0].applicant, 'code', this.formZipData.affiliate.applicant[0].applicant.code);
          this.$set(this.formData.affiliate.applicant[0].applicant, 'email', this.formZipData.affiliate.applicant[0].applicant.email);
          this.$set(this.formData.affiliate.applicant[0].applicant, 'phone', this.formZipData.affiliate.applicant[0].applicant.phone);
          this.$set(this.formData.affiliate.res[0].res, 'name', this.formZipData.affiliate.res[0].res.name);
          this.$set(this.formData.affiliate.res[0].res, 'phone', this.formZipData.affiliate.res[0].res.phone);
          this.$set(this.formData.affiliate.res[0].res, 'idCard', this.formZipData.affiliate.res[0].res.idCard);
          this.$set(this.formData.affiliate.res[0].res, 'sex', this.formZipData.affiliate.res[0].res.sex);
          this.$set(this.formData.affiliate.res[0].res, 'birth', this.formZipData.affiliate.res[0].res.birth);
          this.$set(this.formData.affiliate.res[0].res, 'home', this.formZipData.affiliate.res[0].res.home);
          this.$set(this.formData.affiliate.res[0].res, 'email', this.formZipData.affiliate.res[0].res.email);
        } else {
          this.$set(this.formData.affiliate.applicant[0].applicant, 'name', null);
          this.$set(this.formData.affiliate.applicant[0].applicant, 'idCard', null);
          this.$set(this.formData.affiliate.applicant[0].applicant, 'email', null);
          this.$set(this.formData.affiliate.applicant[0].applicant, 'phone', null);
        }
      }
      this.$refs["ruleForm"].clearValidate()
    },
    cancel() {
      this.$emit("cancelCaseAdd");
    },
    institutionalNatural() {
      // console.log(this.formData.organizeFlag);
    },
    handleBlur(index) {
      // console.log(this.formData.affiliate.respondentIdentityNum);
      let idCards = {
        idCard: this.formData.affiliate.res[index].res.idCard,
      };
      getInfoByIdCard(idCards).then((res) => {
        this.formData.affiliate.res[index].res.sex = res.respondentSex;
        // console.log(res.respondentBirth);
        this.formData.affiliate.res[index].res.birth = res.respondentBirth;
      });
    },
    /**删除新增信息某一项 */
    deleteDetali(item) {
      var index = this.formData.affiliate.indexOf(item)
      if (index !== -1) {
        this.formData.affiliate.splice(index, 1)
      }
    },
    /**新增申请人信息 */
    addApplicant() {
      this.formData.affiliate.applicant.push({
              applicant: {
                roleType: 1,
                name: "",
                idCard: "",
                code: "",
                phone: "",
                compLegalPerson: "",
                email: "",
                home: "",
                address: "",
                idType: 0,
                nationality: 1,
                birth: "",
                sex: "1",
                operatorFlag:0
              },
              applicantAgent: {
                roleType: 2,
                name: "",
                idCard: "",
                code: "",
                phone: "",
                compLegalPerson: "",
                email: "",
                home: "",
                address: "",
                idType: 0,
                nationality: 1,
                birth: "",
                sex: "1",
                operatorFlag:0
              },
            },);
    },
    /** 新增被申请人信息*/
    addRes(){
      this.formData.affiliate.res.push({
              res: {
                roleType: 3,
                name: "",
                idCard: "",
                code: "",
                phone: "",
                compLegalPerson: "",
                email: "",
                home: "",
                address: "",
                idType: 0,
                nationality: 1,
                birth: "",
                sex: "1",
                operatorFlag:0
              },
              resAgent: {
                roleType: 4,
                name: "",
                idCard: "",
                code: "",
                phone: "",
                compLegalPerson: "",
                email: "",
                home: "",
                address: "",
                idType: 0,
                nationality: 1,
                birth: "",
                sex: "1",
                operatorFlag:0
              },
            },);
    },
    /**申请人删除信息 */
    deleteApplicant(item){
      var index = this.formData.affiliate.applicant.indexOf(item)
        if (index !== -1) {
          this.formData.affiliate.applicant.splice(index, 1)
        }
    },
    /**被申请人删除信息 */
    deleteRes(item){
      var index = this.formData.affiliate.res.indexOf(item)
        if (index !== -1) {
          this.formData.affiliate.res.splice(index, 1)
        }
    },
  },
};
</script>

<style lang="scss" scoped>
.infoIcon {
  width: 4px;
  // height: 17px;
  background-color: #0072ff;
  margin-right: 5px;
}

.caseInfo {
  font-size: 17px;
  font-weight: 600;
}

::v-deep .el-dialog__body {
  height: 700px !important;
  overflow: auto !important;
}

::v-deep .el-input--medium .el-input__inner {
  height: 40px;
  line-height: 40px;
}
</style>