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="12">
                        <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">
                        <el-form-item label="统一社会信用代码" prop="affiliate.creditCode" :rules="[
                            {
                                required: true,
                                message: '统一社会信用代码不能为空',
                                trigger: 'blur',
                            },
                        ]">
                            <el-input v-model="formData.affiliate.creditCode" 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">
                        <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">
                        <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">
                        <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">
                        <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" 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">
                                <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" :rules="[
                            {
                                required: true,
                                message: '被申请人出生年月日不能为空',
                                trigger: 'blur',
                            },
                        ]">
                            <el-date-picker 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
} 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: "新增案件",
            formData: {
                affiliate: {
                    respondentSex: 0
                },
                columnValueList: [],
                caseAttachList: []
            },
            templateList: [],
            modelFlag: false,
            fileURL: window.location.origin + "/API",
            fileList: [],
            filedata: {
                annexType: 2,
            },
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            applicantEvidence: [],//申请人证据
            respondentEvidence: [],//被申请人证据
        };
    },
    watch: {
        caseData: {
            deep: true,
            handler(val) {
                this.getTemplateFn();
                if (val.id && !val.flag) {
                    this.modelFlag = true;
                    this.title = '修改案件';
                    this.caseApplicationSelectByIdFn(val.id)
                } else if (!val.id && !val.flag) {
                    this.modelFlag = false;
                    this.title = '新增案件';
                    this.formData = {
                        affiliate: {
                            respondentSex: 0
                        },
                        columnValueList: [],
                        caseAttachList: []
                    };
                } else if (val.id && val.flag == 1) {
                    this.modelFlag = true;
                    this.title = '案件详情';
                    this.caseApplicationSelectByIdFn(val.id);
                }
            },
        },
        addVisable(val){
            if(val){
                this.activeName = 'first';
            }
        }
    },
    created() {

    },
    methods: {
        /** 根据案件id获取对应信息 */
        caseApplicationSelectByIdFn(data) {
            this.applicantEvidence = [];
            this.respondentEvidence = [];
            caseApplicationSelectById({ id: data }).then((res => {
                this.formData = res.data;
                console.log(this.formData)
                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 => {
                console.log(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 == 1){
                        this.modifyData(this.formData)
                    }else if(this.addModifyData == 2){
                        this.insertFn(this.formData)
                    }
                    
                }
            });
        },
        cancel() {
            this.$emit("cancelCaseAdd");
        },
    },
};
</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>