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

<template>
  <div>
    <el-dialog title="归档详情" :visible="showarchiveDetails" @close="cancel" :destroy-on-close="true" center>
      <div class="loading" v-if="flagLoadingS">
        <i class="el-icon-loading"></i>
      </div>
      <div v-else>
          <el-tabs v-model="activeName"  @tab-click="handleClick">
            <el-tab-pane label="案件信息" name="five"></el-tab-pane>
            <el-tab-pane label="申请人案件证据资料" name="first"></el-tab-pane>
            <!-- <el-tab-pane label="被申请人案件证据资料" name="second"></el-tab-pane> -->
            <el-tab-pane label="调解书" name="third"></el-tab-pane>
            <el-tab-pane label="案件视频" name="fourth" v-if="caseFilingData.mediationMethod == '1'"></el-tab-pane>
            <el-tab-pane label="庭审笔录" name="six" v-if="caseFilingData.mediationMethod == '1'"></el-tab-pane>
         </el-tabs>
         <div v-show="activeName=='first'">
             
             <div v-for="(item,index) in detailsAwardNum.caseAttachList" :key="index" v-if="item.annexType==2" 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,2) == 0" description="暂无数据"></el-empty>
         </div>
         <!-- <div v-show="activeName=='second'">
            <div v-for="item in detailsAwardNum.caseAttachList" v-if="item.annexType==6" 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,6) == 0" description="暂无数据"></el-empty>
         </div> -->
         <div  v-show="activeName=='third'">
             <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=='fourth'">
             <div style="margin-top:10px;" v-for="(item,index) in detailsAwardNum.caseAttachList" v-if="item.annexType==5">
                 <video  style="background-color: #181717;width: 350px;height: 200px;margin: 10px;" :key="index"  :src="fileURL+item.annexPath" controls="controls"></video>
             </div>
             <el-empty v-if="isNoData(detailsAwardNum.caseAttachList,5) == 0" description="暂无数据"></el-empty>
         </div>
         <div  v-show="activeName=='six'">
             <div v-for="item in detailsAwardNum.caseAttachList" v-if="item.annexType==6" 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,6) == 0" description="暂无数据"></el-empty>
         </div>
         <div v-show="activeName=='five'">
              <el-form  :disabled="true" :model="detailsAwardNum"  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-input v-model="detailsAwardNum.arbitratClaims" placeholder="请输入申请人调解诉求" type="textarea"
                  :autosize="{ minRows: 4, maxRows: 8 }" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="事实和理由">
                <el-input v-model="detailsAwardNum.facts" placeholder="请输入事实和理由" type="textarea"
                  :autosize="{ minRows: 4, maxRows: 8 }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <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">
              <el-form-item label="证据:">
                <div v-for="(item, index) in detailsAwardNum.caseAttachList" :key="index" v-if="item.annexType == 2">
                  <div style="color: blue; cursor: pointer" @click="fileDetil(item.annexPath)">
                    {{ item.annexName }}
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="调解申请书:">
                <div v-for="(item, index) in detailsAwardNum.caseAttachList" :key="index" v-if="item.annexType == 3">
                  <div style="color: blue; cursor: pointer" @click="fileDetil(item.annexPath)">
                    {{ item.annexName }}
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="调解书:">
                <div v-for="(item, index) in detailsAwardNum.caseAttachList" :key="index" v-if="item.annexType == 7">
                  <div style="color: blue; cursor: pointer" @click="fileDetil(item.annexPath)">
                    {{ item.annexName }}
                  </div>
                </div>
              </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="24">
              <el-form-item label="选择机构或自然人" prop="affiliate.organizeFlag">
                <el-radio-group v-model="detailsAwardNum.affiliate.organizeFlag">
                  <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="detailsAwardNum.affiliate.organizeFlag == 1">
              <el-form-item label="申请机构名称">
                <el-input v-model="detailsAwardNum.affiliate.applicationName" placeholder="请输入申请机构名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="detailsAwardNum.affiliate.organizeFlag == 0">
              <el-form-item label="申请人">
                <el-input v-model="detailsAwardNum.affiliate.applicationName"  placeholder="请输入申请人姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="detailsAwardNum.affiliate.organizeFlag == 1">
              <el-form-item label="统一社会信用代码">
                <el-input v-model="detailsAwardNum.affiliate.code" placeholder="请输入统一社会信用代码" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="detailsAwardNum.affiliate.organizeFlag == 0">
              <el-form-item label="申请人身份证号码">
                <el-input v-model="detailsAwardNum.affiliate.code"  placeholder="请输入申请人的身份证号" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="detailsAwardNum.affiliate.organizeFlag == 0">
              <el-form-item label="申请人邮箱">
                <el-input v-model="detailsAwardNum.affiliate.applicationEmail"  placeholder="请输入申请人邮箱" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="detailsAwardNum.affiliate.organizeFlag == 0">
              <el-form-item label="申请人电话">
                <el-input v-model="detailsAwardNum.affiliate.applicationPhone"  placeholder="请输入申请人联系电话" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="detailsAwardNum.affiliate.organizeFlag == 1">
              <el-form-item label="法定代表人">
                <el-input v-model="detailsAwardNum.affiliate.compLegalPerson" placeholder="请输入法定代表人" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请人住所">
                <el-input v-model="detailsAwardNum.affiliate.applicantHome" placeholder="请输入申请人住所" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请人联系地址">
                <el-input v-model="detailsAwardNum.affiliate.applicantAddress" placeholder="请输入申请人联系地址" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="detailsAwardNum.affiliate.organizeFlag == 1">
              <el-form-item label="代理人联系电话">
                <el-input v-model="detailsAwardNum.affiliate.contactTelphoneAgent"  placeholder="请输入代理人联系电话" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="detailsAwardNum.affiliate.organizeFlag == 0">
              <el-form-item label="代理人联系电话" prop="affiliate.contactTelphoneAgent">
                <el-input v-model="detailsAwardNum.affiliate.contactTelphoneAgent" placeholder="请输入代理人联系电话" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="detailsAwardNum.affiliate.organizeFlag == 1">
              <el-form-item label="代理人姓名" prop="affiliate.nameAgent">
                <el-input v-model="detailsAwardNum.affiliate.nameAgent"  placeholder="请输入代理人姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="detailsAwardNum.affiliate.organizeFlag == 0">
              <el-form-item label="代理人姓名" prop="affiliate.nameAgent">
                <el-input v-model="detailsAwardNum.affiliate.nameAgent" placeholder="请输入代理人姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="detailsAwardNum.affiliate.organizeFlag == 1">
              <el-form-item label="代理人邮箱">
                <el-input v-model="detailsAwardNum.affiliate.agentEmail"  placeholder="请输入代理人邮箱" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="detailsAwardNum.affiliate.organizeFlag == 0">
              <el-form-item label="代理人邮箱">
                <el-input v-model="detailsAwardNum.affiliate.agentEmail" placeholder="请输入代理人邮箱" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="被申请人姓名">
                <el-input v-model="detailsAwardNum.affiliate.respondentName" placeholder="请输入被申请人姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="被申请人联系电话" >
                <el-input v-model="detailsAwardNum.affiliate.respondentPhone" placeholder="请输入被申请人联系电话" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="被申请人身份证号">
                <el-input v-model="detailsAwardNum.affiliate.respondentIdentityNum"  placeholder="请输入被申请人身份证号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="被申请人性别：">
                <el-radio-group v-model="detailsAwardNum.affiliate.respondentSex">
                  <el-radio :label="0">男</el-radio>
                  <el-radio :label="1">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="被申请人出生年月日：" prop="affiliate.respondentBirth">
                <el-date-picker  v-model="detailsAwardNum.affiliate.respondentBirth" type="date" placeholder="被申请人出生年月日">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="被申请人申请人住所">
                <el-input v-model="detailsAwardNum.affiliate.respondentHome" placeholder="请输入被申请人申请人住所" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="被申请人邮箱">
                <el-input v-model="detailsAwardNum.affiliate.respondentEmail" placeholder="请输入被申请人邮箱" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="24">
            <el-form-item v-for="item in detailsAwardNum.columnValueList" :label="item.name" :key="item.id">
              <el-input type="textarea" v-model="item.value"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
         </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
    props: ["showarchiveDetails","detailsAwardNum","videoList","flagLoadingS","trialTranscripts","caseFilingData"],
  components: {
    
  },
  data() {
    return {
     activeName: 'five',
      fileURL: window.location.origin + "/API",
      noData: false,
      filedata: {
        annexType: 2,
      },
      fileList: [],
      headers: {
        Authorization: "Bearer " + getToken(),
      },
    };
  },
watch: {
    showarchiveDetails: {
      handler(val) {
        if (val) {
          this.activeName = 'five'
          // this.detailsAwardNum.affiliate.respondentSex = Number(this.detailsAwardNum.affiliate.respondentSex)
          console.log(this.detailsAwardNum)
        }
      },
    },
  },
  created(){
    
    
  },
  methods: {
    isNoData(data,type){
        let resNumber = 0
        if(data){
            let list = data.filter(item => item.annexType == type)
            if(list){
                resNumber = list.length
            }
        }
        return resNumber
    },
      /** 查看证据 */
    fileDetil(val) {
      window.open(this.fileURL + val);
    },
       /** 文件上传地址 */
    UploadUrl() {
      return window.location.origin + "/API/common/upload";
    },
        /**文件上传成功*/
    handlSuccess(res, file) {
      this.detailsAwardNum.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) {
      this.caseAttachListArr = this.caseAttachListArr.filter(
        (item) => item.annexId != file.annexId
      );
    },
    handlePreview(file) {
      window.open(
        window.location.origin + "/API" + file.certificatePath,
        "_blank"
      );
    },
    handleClick(tab, event) {

    },
    
    cancel() {
      this.$emit("cancelDetail");
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 500px !important;
  overflow: auto !important;
}
::v-deep .el-dialog {
  width: 850px;
  background: #ffffff;
  border-radius: 20px;
}
.loading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-icon-loading {
    font-size: 50px;
  }
}
</style>