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="申请人调解请求" 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="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="caseDescribe">
                            <el-input v-model="formData.caseDescribe" placeholder="请输入案件描述" type="textarea"
                                :autosize="{ minRows: 4, maxRows: 8 }" />
                        </el-form-item>
                    </el-col> -->
          <el-col :span="12">
            <el-form-item label="案件标的" prop="caseSubjectAmount" :rules="[
              {
                required: true,
                message: '案件标的不能为空',
                trigger: 'blur',
              },
            ]">
              <el-input v-model="formData.caseSubjectAmount" placeholder="请输入案件标的" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="调解模板" prop="templateId" :rules="[
              {
                required: true,
                message: '调解模板',
                trigger: 'blur',
              },
            ]">
              <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="申请人案件证据资料上传：" 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">
            <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)">
                  {{ item.annexName }}
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="modelFlag">
            <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.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="formData.affiliate.organizeFlag" @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="12" v-if="formData.affiliate.organizeFlag == 1">
            <el-form-item label="申请机构名称" prop="affiliate.applicationName" :rules="[
              {
                required: true,
                message: '申请机构名称不能为空',
                trigger: 'blur',
              },
            ]">
              <el-input v-model="formData.affiliate.applicationName" placeholder="请输入申请机构名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.affiliate.organizeFlag == 0">
            <el-form-item label="申请人" prop="affiliate.applicationName" :rules="[
              {
                required: true,
                message: '申请人名称不能为空',
                trigger: 'blur',
              },
            ]">
              <el-input v-model="formData.affiliate.applicationName" placeholder="请输入申请机构名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.affiliate.organizeFlag == 1">
            <el-form-item label="统一社会信用代码" prop="affiliate.code" :rules="[
              {
                required: true,
                message: '统一社会信用代码不能为空',
                trigger: 'blur',
              },
            ]">
              <el-input v-model="formData.affiliate.code" placeholder="请输入统一社会信用代码" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.affiliate.organizeFlag == 0">
            <el-form-item label="申请人身份证号码" prop="affiliate.code" :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="formData.affiliate.code" placeholder="请输入申请人的身份证号" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.affiliate.organizeFlag == 0">
            <el-form-item label="申请人邮箱" prop="affiliate.applicationEmail" :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="formData.affiliate.applicationEmail" placeholder="请输入申请人邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请人电话" prop="affiliate.applicationPhone" :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="formData.affiliate.applicationPhone" placeholder="请输入申请人联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法定代表人" prop="affiliate.compLegalPerson" :rules="[
              {
                required: true,
                message: '法定代表人不能为空',
                trigger: 'blur',
              },
            ]">
              <el-input v-model="formData.affiliate.compLegalPerson" placeholder="请输入法定代表人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请人住所" prop="affiliate.applicantHome" :rules="[
              {
                required: true,
                message: '申请人住所不能为空',
                trigger: 'blur',
              },
            ]">
              <el-input v-model="formData.affiliate.applicantHome" placeholder="请输入申请人住所" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请人联系地址" prop="affiliate.applicantAddress" :rules="[
              {
                required: true,
                message: '申请人联系地址不能为空',
                trigger: 'blur',
              },
            ]">
              <el-input v-model="formData.affiliate.applicantAddress" placeholder="请输入申请人联系地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.affiliate.organizeFlag == 1">
            <el-form-item label="代理人联系电话" prop="affiliate.contactTelphoneAgent" :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="formData.affiliate.contactTelphoneAgent" placeholder="请输入代理人联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.affiliate.organizeFlag == 0">
            <el-form-item label="代理人联系电话" prop="affiliate.contactTelphoneAgent">
              <el-input v-model="formData.affiliate.contactTelphoneAgent" placeholder="请输入代理人联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.affiliate.organizeFlag == 1">
            <el-form-item label="委托代理人姓名" prop="affiliate.nameAgent" :rules="[
              {
                required: true,
                message: '委托代理人姓名不能为空',
                trigger: 'blur',
              },
            ]">
              <el-input v-model="formData.affiliate.nameAgent" placeholder="请输入委托代理人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.affiliate.organizeFlag == 0">
            <el-form-item label="委托代理人姓名" prop="affiliate.nameAgent">
              <el-input v-model="formData.affiliate.nameAgent" placeholder="请输入委托代理人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.affiliate.organizeFlag == 1">
            <el-form-item label="代理人邮箱" prop="affiliate.agentEmail" :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="formData.affiliate.agentEmail" placeholder="请输入代理人邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.affiliate.organizeFlag == 0">
            <el-form-item label="代理人邮箱" prop="affiliate.agentEmail" :rules="[
              {
                pattern:
                  /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
                message: '请输入正确的邮箱地址',
                trigger: 'blur',
              },
            ]">
              <el-input v-model="formData.affiliate.agentEmail" placeholder="请输入代理人邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被申请人姓名" prop="affiliate.respondentName" :rules="[
              {
                required: true,
                message: '被申请人姓名不能为空',
                trigger: 'blur',
              },
            ]">
              <el-input v-model="formData.affiliate.respondentName" placeholder="请输入被申请人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被申请人联系电话" prop="affiliate.respondentPhone" :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="formData.affiliate.respondentPhone" placeholder="请输入被申请人联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被申请人身份证号" prop="affiliate.respondentIdentityNum" :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="formData.affiliate.respondentIdentityNum" @blur="handleBlur" placeholder="请输入被申请人身份证号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被申请人性别：" prop="affiliate.respondentSex" :rules="[
              {
                required: true,
                message: '请选择性别',
              },
            ]">
              <el-radio-group v-model="formData.affiliate.respondentSex" disabled>
                <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 disabled v-model="formData.affiliate.respondentBirth" type="date" placeholder="被申请人出生年月日">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被申请人申请人住所" prop="affiliate.respondentHome" :rules="[
              {
                required: true,
                message: '被申请人申请人住所不能为空',
                trigger: 'blur',
              },
            ]">
              <el-input v-model="formData.affiliate.respondentHome" placeholder="请输入被申请人申请人住所" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被申请人邮箱" prop="affiliate.respondentEmail" :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="formData.affiliate.respondentEmail" placeholder="请输入被申请人邮箱" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24" v-if="modelFlag">
          <div style="display: inline-flex">
            <div class="infoIcon"></div>
            <div class="caseInfo">自定义规则内容</div>
          </div>
          <el-divider></el-divider>
        </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-form>
      <div v-if="activeName == 'second'">
        <el-card class="box-card" style="margin-bottom: 30px">
          <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">
          <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">
        <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,
} 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: ["case_built_type"],
  data() {
    return {
      activeName: "first",
      title: "新增案件",
      // organizeFlag:0,//选择机构和自然人
      formData: {
        affiliate: {
          organizeFlag: 0,
          respondentSex: 0,
        },
        columnValueList: [],
        caseAttachList: [],
      },
      templateList: [],
      modelFlag: false,
      fileURL: window.location.origin + "/API",
      fileList: [],
      filedata: {
        annexType: 2,
      },
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      applicantEvidence: [], //申请人证据
      respondentEvidence: [], //被申请人证据
    };
  },
  watch: {
    addModifyData(val) {
      if (val == 1) {
        this.title = "新增案件";
        this.modelFlag = false;
        this.formData = {
          affiliate: {
            organizeFlag: 0,
            respondentSex: 0,
          },
          columnValueList: [],
          caseAttachList: [],
        };
      } else if (val == 3) {
        this.title = "修改案件";
        this.modelFlag = true;
      } else if (val == 2) {
        this.title = "案件详情";
        this.modelFlag = true;
      }
    },
    addVisable(val) {
      if (val) {
        this.activeName = "first";
        this.getTemplateFn();
        if (this.addModifyData != 1) {
          this.caseApplicationSelectByIdFn(this.caseData.id);
        }
      }
    },
  },
  created() {
    console.log(this.formData, "000000000000000000")
  },
  methods: {
    /** 切换申请类型 */
    changeApplyType(val) {
      console.log(val, "变化");
      // this.$refs["ruleForm"].resetFields();
    },
    /** 根据案件id获取对应信息 */
    caseApplicationSelectByIdFn(data) {
      this.applicantEvidence = [];
      this.respondentEvidence = [];
      caseApplicationSelectById({ id: data }).then((res) => {
        res.data.affiliate.respondentSex = Number(res.data.affiliate.respondentSex)
        this.formData = res.data;
        this.formData.caseAttachList.forEach((item) => {
          if (item.annexType == 2) {
            this.applicantEvidence.push(item);
          } else if (item.annexType == 6) {
            this.respondentEvidence.push(item);
          }
        });
      });
    },
    // 新增案件
    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) {
      window.open(this.fileURL + val);
    },
    /** 查看证据 */
    toPreview(val) {
      window.open(this.fileURL + val);
    },
    /** 文件上传地址 */
    UploadUrl() {
      return window.location.origin + "/API/common/upload";
    },
    /**文件上传成功*/
    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) {
      this.caseAttachListArr = this.caseAttachListArr.filter(
        (item) => item.annexId != file.annexId
      );
    },
    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() {
      this.$refs["ruleForm"].clearValidate()
    },
    cancel() {
      this.$emit("cancelCaseAdd");
    },
    institutionalNatural() {
      console.log(this.formData.affiliate.organizeFlag);
    },
    handleBlur() {
      console.log(this.formData.affiliate.respondentIdentityNum);
      let idCards = {
        idCard: this.formData.affiliate.respondentIdentityNum,
      };
      getInfoByIdCard(idCards).then((res) => {
        this.formData.affiliate.respondentSex = Number(res.respondentSex);
        console.log(res.respondentBirth);
        this.formData.affiliate.respondentBirth = res.respondentBirth;
      });
    },
  },
};
</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;
}
</style>