Files
Mediation-Frontend/src/views/caseManagement/components/addCase.vue
T
2024-02-21 11:33:53 +08:00

709 lines
28 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="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 == 3">
<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" :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="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" disabled 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" disabled 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" disabled placeholder="请输入申请人邮箱" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="formData.affiliate.organizeFlag == 0">
<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" disabled placeholder="请输入申请人联系电话" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="formData.affiliate.organizeFlag == 1">
<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" v-if="formData.affiliate.organizeFlag == 1">
<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" disabled 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" disabled 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" disabled 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">
<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" 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
} 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: [], //被申请人证据
buttonFlag: true,
getUserInfoList: {},
applicationFlag: null
};
},
watch: {
addModifyData(val) {
if (val == 1) {
this.title = "新增案件";
this.getUserInfoFn();
this.modelFlag = false;
this.buttonFlag = true;
this.formData = {
affiliate: {
organizeFlag: 0,
respondentSex: 0,
},
columnValueList: [],
caseAttachList: [],
};
} else if (val == 3) {
this.title = "修改案件";
this.modelFlag = true;
this.buttonFlag = true;
} else if (val == 2) {
this.title = "案件详情";
this.modelFlag = true;
this.buttonFlag = false;
}
},
addVisable(val) {
if (val) {
this.activeName = "first";
this.getTemplateFn();
if (this.addModifyData != 1) {
this.caseApplicationSelectByIdFn(this.caseData.id);
}
}
},
},
created() {
console.log(this.formData, "000000000000000000")
// this.getUserInfoFn();
},
methods: {
/** 切换申请类型 */
changeApplyType(val) {
console.log(val, "变化");
// this.$refs["ruleForm"].resetFields();
},
/**获取申请人信息 */
getUserInfoFn() {
getUserInfo().then(res => {
this.getUserInfoList = res.data;
this.$set(this.formData.affiliate, "applicationName", this.getUserInfoList.nickName);
this.$set(this.formData.affiliate, "code", this.getUserInfoList.idCard);
this.$set(this.formData.affiliate, "applicationEmail", this.getUserInfoList.email);
this.$set(this.formData.affiliate, "applicationPhone", this.getUserInfoList.phonenumber);
})
},
/** 根据案件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(val) {
if (val == 0) {
this.$set(this.formData.affiliate, "applicationName", this.getUserInfoList.nickName);
this.$set(this.formData.affiliate, "code", this.getUserInfoList.idCard);
this.$set(this.formData.affiliate, "applicationEmail", this.getUserInfoList.email);
this.$set(this.formData.affiliate, "applicationPhone", this.getUserInfoList.phonenumber);
this.formData.affiliate.nameAgent = null;
this.formData.affiliate.agentEmail = null;
this.formData.affiliate.contactTelphoneAgent = null;
} else if (val == 1) {
this.$set(this.formData.affiliate, "nameAgent", this.getUserInfoList.nickName);
this.$set(this.formData.affiliate, "agentEmail", this.getUserInfoList.email);
this.$set(this.formData.affiliate, "contactTelphoneAgent", this.getUserInfoList.phonenumber);
this.formData.affiliate.applicationName = null;
this.formData.affiliate.code = null;
this.formData.affiliate.applicationEmail = null;
this.formData.affiliate.applicationPhone = null;
}
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>