提交

MrShi

2025-05-26 daf76fb0807550f6e49545e10603a29e414f3b84

 company/src/components/enterprise/onlineReporting.vue

@@ -2,139 +2,407 @@
    <GlobalWindow
        :title="title"
        width="100%"
        :withFooter="false"
        :visible.sync="visible"
        :confirm-working="isWorking"
        @confirm="confirm"
    >
        <el-form :model="form" ref="form" :rules="rules">
            <el-form-item label="出险人姓名" prop="memberId" v-if="!form.id">
                <el-select v-model="form.memberId" filterable @change="getSolutions" placeholder="请选择">
                    <el-option
                        v-for="item in user"
                        :key="item.id"
                        :label="item.name + ' - ' + item.idcardNo"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="保险方案" prop="solutionId" v-if="!form.id">
                <div style="display: flex; align-items: center;">
                    <span>{{form.solutionName}}</span>
                    <el-button type="primary" @click="openS" style="margin-left: 10px;">选择方案</el-button>
        <div class="box">
            <div class="box_status">
                <div class="box_status_row" v-for="(item, index) in statusList" :key="index">
                    <div :class="index <= i ? 'box_status_row_icon statusColor2 statusColor3' : 'box_status_row_icon'">
                        <span>{{index + 1}}</span>
                    </div>
                    <div class="box_status_row_info">
                        <div class="title">{{item.name}}</div>
                        <div class="info">{{item.info}}</div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="派遣单位" prop="duId" v-if="form.duName && !form.id">
                <span>{{form.duName}}</span>
            </el-form-item>
            <el-form-item label="所属工种" prop="worktypeId" v-if="form.worktypeName && !form.id">
                <span>{{form.worktypeName}}</span>
            </el-form-item>
            <el-form-item label="事故发生时间" prop="happenTime" v-if="!form.id">
                <el-date-picker
                    v-model="form.happenTime"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="就诊医疗机构" prop="hospital" v-if="!form.id">
                <el-input v-model="form.hospital" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="出险地区" prop="areaId">
                <el-cascader
                v-model="form.areaId"
                :options="area"
                :props="{ value: 'id', label: 'name', children: 'childAreasList' }"
                @change="handleChange" />
            </el-form-item>
            <el-form-item label="事故类型" prop="type">
                <el-radio-group v-model="form.type">
                    <el-radio :label="0">工作期间受伤</el-radio>
                    <el-radio :label="1">上下班途中受伤</el-radio>
                    <el-radio :label="2">非工作时间受伤</el-radio>
                    <el-radio :label="3">意外受伤</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否住院" prop="inHospital">
                <el-radio-group v-model="form.inHospital">
                    <el-radio :label="0">是</el-radio>
                    <el-radio :label="1">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否有医疗保险" prop="medicalInsurance">
                <el-radio-group v-model="form.medicalInsurance">
                    <el-radio :label="0">是</el-radio>
                    <el-radio :label="1">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="事故描述" prop="content" v-if="!form.id">
                <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.content"></el-input>
            </el-form-item>
            <el-form-item label="上传事故视频/照片" prop="list" v-if="!form.id">
                <upload :list="form.list" :accept="'.mp4,.jpg,.png,.jpeg'" folder="settle" @dele="deleFile" @success="getData" />
            </el-form-item>
            <el-form-item label="报案人姓名" prop="informantName">
                <el-input v-model="form.informantName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="报案人联系方式" prop="informantPhone">
                <el-input maxlength="11" v-model="form.informantPhone" placeholder="请输入"></el-input>
            </el-form-item>
        </el-form>
        <!--    弹窗提醒    -->
        <el-dialog
            title="温馨提示"
            :modal="false"
            :close-on-click-modal="false"
            :show-close="false"
            :visible.sync="centerDialogVisible"
            width="50%"
            center>
            <div class="fuwenben" style="font-size: 12px">
                    尊敬的客户：

                首先感谢您对于我们的信任与支持，我们很荣幸成为贵司的保险咨询服务商！

                鉴于近期出现个别客户存在：当天投保当天出险（即先出工伤或意外、再进行投保操作）的个别诈骗保险金的案例，错误使用“即时生效”条款。针对此种情况本公司郑重告知各位客户:

                1.诈骗保险金的行为属于违法行为,一旦发现,本公司将提交公安机关处理并保留追究法律责任；

                2.为了顺利理赔结案,按照保险公司的理赔审查要求,当天投保当天出险需要提供出险监控视频或者能佐证具体时间点的任何证据；

                3.请您深刻理解保险中“如实告知”的投保人义务，我们致力于为您转移用工风险和法律风险。但这一切的前提是：合规合法合理。

                附件一：

                《中华人民共和国刑法》第一百九十八条 【保险诈骗罪】有下列情形之一，进行保险诈骗活动，数额较大的，处五年以下有期徒刑或者拘役， 并处一万元以上十万元以下罚金；数额巨大或者有其他严重情节的，处五年以上十年以下有期徒刑，并处二万元以上二十万元以下罚金；数额特别巨大或者有其他特别严重情节的，处十年以上有期徒 刑，并处二万元以上二十万元以下罚金或者没收财产：

                （一）投保人故意虚构保险标的，骗取保险金的；

                （二）投保人、被保险人或者受益人对发生的保险事故编造虚假的原因或者夸大损失的程度，骗取保险金的；

                （三）投保人、被保险人或者受益人编造未曾发生的保险事故，骗取保险金的；

                （四）投保人、被保险人故意造成财产损失的保险事故，骗取保险金的；

                （五）投保人、受益人故意造成被保险人死亡、伤残或者疾病，骗取保险金的。

                有前款第四项、第五项所列行为，同时构成其他犯罪的，依照数罪并罚的规定处罚。 单位犯第一款罪的，对单位判处罚金，并对其直接负责的主管人员和 其他直接责任人员，处五年以下有期徒刑或者拘役；数额巨大或者有 其他严重情节的，处五年以上十年以下有期徒刑；数额特别巨大或者 有其他特别严重情节的，处十年以上有期徒刑。 保险事故的鉴定人、证明人、财产评估人故意提供虚假的证明文件，为他人诈骗提供条件的，以保险诈骗的共犯论处。

                附件二：

                《中华人民共和国保险法》第二十七条 未发生保险事故，被保险人或者受益人谎称发生了保险事故，向保险人提出赔偿或者给付保险金请求的，保险人有权解除合同，并不退还保险费。

                投保人、被保险人故意制造保险事故的，保险人有权解除合同，不承担赔偿或者给付保险金的责任；除本法第四十三条规定外，不退还保险费。

                保险事故发生后，投保人、被保险人或者受益人以伪造、变造的有关证明、资料或者其他证据，编造虚假的事故原因或者夸大损失程度的，保险人对其虚报的部分不承担赔偿或者给付保险金的责任。

                投保人、被保险人或者受益人有前三款规定行为之一，致使保险 人支付保险金或者支出费用的，应当撤销或者赔偿。
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="centerDialogVisible = false">我已知晓</el-button>
            </span>
        </el-dialog>
        <!--    选择保险方案    -->
        <selectSolutions ref="selectSolutions" @success="getVal" />
            <el-form :model="form" :rules="rules" ref="form" label-width="130px" class="demo-ruleForm">
                <template v-if="i === 0">
                    <div class="box_desc">
                        <div class="box_desc_head">
                            <div class="box_desc_title">
                                <span class="box_desc_title_val">出险人信息</span>
                            </div>
                        </div>
                        <div class="box_desc_list">
                            <div class="box_desc_list_row" style="margin: 0;">
                                <el-form-item label="出险人" prop="memberId">
                                    <el-select v-model="form.memberId" filterable @change="getSolutions" placeholder="请选择">
                                        <el-option
                                            v-for="item in user"
                                            :key="item.id"
                                            :label="item.name + ' - ' + item.idcardNo"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="box_desc_list_row" style="margin: 0;">
                                <el-form-item label="证件号码" prop="idcardNo">
                                    <el-input v-model="form.idcardNo" disabled></el-input>
                                </el-form-item>
                            </div>
                            <div class="box_desc_list_ZW"></div>
                        </div>
                    </div>
                    <div class="box_desc">
                        <div class="box_desc_head" v-if="solutionList.length > 0">
                            <div class="box_desc_title">
                                <span class="box_desc_title_val">保险方案</span>
                            </div>
                        </div>
                        <div class="box_desc_f" v-if="solutionList.length > 0">
                            <div class="box_desc_fa" v-for="(item, index) in solutionList" :key="index">
                                <div class="box_desc_fa_title">
                                    <span @click="jumpSolutionDetail(item.applyId, item.solutionType)">{{item.solutionName}}</span>
                                    <el-checkbox v-model="item.active" @change="changeSolution($event, index)"></el-checkbox>
                                </div>
                                <div class="box_desc_fa_row">保单号：{{item.applyCode}}</div>
                                <div class="box_desc_fa_row">保障期限：{{item.parentStartTime}}～{{item.parentEndTime}}</div>
                                <div class="box_desc_fa_row">投保单位：{{item.companyName}}</div>
                                <div class="box_desc_fa_row">派遣单位：{{item.duName}}</div>
                                <div class="box_desc_fa_row">所属工种：{{item.workTypeName}}</div>
                            </div>
                            <div style="width: 32%; height: 0;"></div>
                        </div>
                        <div class="box_desc_head">
                            <div class="box_desc_title">
                                <span class="box_desc_title_val">出险信息</span>
                            </div>
                        </div>
                        <div class="box_desc_list">
                            <div class="box_desc_list_row">
                                <el-form-item label="出险时间" prop="happenTime">
                                    <el-date-picker
                                        v-model="form.happenTime"
                                        type="datetime"
                                        :disabled="!form.insuranceApplyId"
                                        :picker-options="pickerOptions"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </div>
                            <div class="box_desc_list_row">
                                <el-form-item label="就诊医疗机构" prop="hospital">
                                    <el-input v-model="form.hospital" placeholder="请输入"></el-input>
                                </el-form-item>
                            </div>
                            <div class="box_desc_list_row">
                                <el-form-item label="出险地区" prop="areaId">
                                    <div style="width: 100%; display: flex; align-items: center;">
                                        <el-cascader
                                            v-model="form.area"
                                            :options="area"
                                            ref="cascader"
                                            @change="changeArea"
                                            :props="{ label: 'name', children: 'childAreasList', value: 'id' }"/>
                                        <el-input v-model="form.address" placeholder="请输入详细地址"></el-input>
                                    </div>
                                </el-form-item>
                            </div>
                            <div class="box_desc_list_row" style="width: 100%;">
                                <el-form-item label="出险经过" prop="content">
                                    <el-input v-model="form.content" placeholder="请输入" type="textarea" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
                                </el-form-item>
                            </div>
                            <div class="box_desc_list_row" style="width: 100%;">
                                <el-form-item label="事故类型" prop="type">
                                    <el-radio-group v-model="form.type">
                                        <el-radio :label="0">工作期间受伤</el-radio>
                                        <el-radio :label="1">上下班途中受伤</el-radio>
                                        <el-radio :label="2">非工作时间受伤</el-radio>
                                        <el-radio :label="3">意外受伤</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </div>
                            <div class="box_desc_list_row" style="width: 100%;">
                                <el-form-item label="就诊类型" prop="inHospital">
                                    <el-radio-group v-model="form.inHospital">
                                        <el-radio :label="0">住院</el-radio>
                                        <el-radio :label="1">门诊</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </div>
                            <div class="box_desc_list_row">
                                <el-form-item label="是否伤残" prop="hurtType">
                                    <el-radio-group v-model="form.hurtType">
                                        <el-radio :label="0">是</el-radio>
                                        <el-radio :label="1">否</el-radio>
                                        <el-radio :label="2">待确定</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </div>
                            <div class="box_desc_list_row" style="width: 100%;">
                                <el-form-item label="是否有医保" prop="medicalInsurance">
                                    <el-radio-group v-model="form.medicalInsurance">
                                        <el-radio :label="0">是</el-radio>
                                        <el-radio :label="1">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </div>
                            <div class="box_desc_list_img">
                                <span>事故视频/照片：</span>
                                <div class="box_item_list_row_l">
                                    <div class="desc_data_list_item" v-for="(item, index) in form.reportFileList" :key="index">
                                        <div class="desc_data_list_item_dele" @click="delFile(index, 6)">删除</div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 0">
                                            <img :src="item.fileurlFull" alt="img"/>
                                        </div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 1">
                                            <video controls :src="item.fileurlFull" />
                                        </div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 2">
                                            <i class="el-icon-folder-opened"></i>
                                        </div>
                                        <div class="desc_data_list_item_info">
                                            <span>{{ item.name }}</span>
                                        </div>
                                    </div>
                                    <upload width="100px" height="100px" :list="[]" accept=".png,.jpg,.jpeg,.mp4,.word,.xlsx,.xls,.pdf,.excel" folder="settle" @success="claimsUploadFile($event, 6)" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box_desc">
                        <div class="box_desc_head">
                            <div class="box_desc_title">
                                <span class="box_desc_title_val">报案人信息</span>
                            </div>
                        </div>
                        <div class="box_desc_list">
                            <div class="box_desc_list_row">
                                <el-form-item label="报案人姓名" prop="informantName">
                                    <el-input v-model="form.informantName" placeholder="请输入"></el-input>
                                </el-form-item>
                            </div>
                            <div class="box_desc_list_row">
                                <el-form-item label="报案人联系方式" prop="informantPhone">
                                    <el-input v-model="form.informantPhone" placeholder="请输入"></el-input>
                                </el-form-item>
                            </div>
                            <div class="box_desc_list_ZW"></div>
                        </div>
                    </div>
                </template>
                <template v-if="i === 1">
                    <div class="box_info">
                        <i class="el-icon-info"></i>
                        <div class="box_info_title">
                            <span>重要提示</span>
                            <span>• 不同保险产品理赔材料有所不同</span>
                            <span>• 上传材料前注意使用盖章文件模版和查看理赔材料一览表</span>
                        </div>
                    </div>
                    <div class="box_item">
                        <div class="box_item_title">
                            <span>理赔材料</span>
                        </div>
                        <div class="box_item_list">
                            <div class="box_item_list_row" style="width: 100%; margin-bottom: 30px;">
                                <div class="box_item_list_row_title">
                                    <div class="x"></div>
                                    <span>员工关系证明材料</span>
                                </div>
                                <div class="box_item_list_row_info">
                                    <div class="label">文件上传说明：</div>
                                    <div class="content">需上传的文件：劳动合同复印件、工资流水、考勤记录、身份证正反面、；</div>
                                </div>
                                <div class="box_item_list_row_l">
                                    <div class="desc_data_list_item" v-for="(item, index) in form.relationFileList" :key="index">
                                        <div class="desc_data_list_item_dele" @click="delFile(index, 1)">删除</div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 0">
                                            <img :src="item.fileurlFull" alt="img"/>
                                        </div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 1">
                                            <video controls :src="item.fileurlFull" />
                                        </div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 2">
                                            <i class="el-icon-folder-opened"></i>
                                        </div>
                                        <div class="desc_data_list_item_info">
                                            <span>{{ item.name }}</span>
                                        </div>
                                    </div>
                                    <upload width="100px" height="100px" :list="[]" accept=".png,.jpg,.jpeg,.mp4,.word,.xlsx,.xls,.pdf,.excel" folder="settle" @success="claimsUploadFile($event, 1)" />
                                </div>
                            </div>
                            <div class="box_item_list_row" style="width: 100%; margin-bottom: 30px;">
                                <div class="box_item_list_row_title">
                                    <div class="x"></div>
                                    <span>门诊</span>
                                </div>
                                <div class="box_item_list_row_info">
                                    <div class="label">文件上传说明：</div>
                                    <div class="content">需上传的文件：劳动合同复印件、工资流水、考勤记录、身份证正反面、；</div>
                                </div>
                                <div class="box_item_list_row_l">
                                    <div class="desc_data_list_item" v-for="(item, index) in form.outpatientFileList" :key="index">
                                        <div class="desc_data_list_item_dele" @click="delFile(index, 2)">删除</div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 0">
                                            <img :src="item.fileurlFull" alt="img"/>
                                        </div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 1">
                                            <video controls :src="item.fileurlFull" />
                                        </div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 2">
                                            <i class="el-icon-folder-opened"></i>
                                        </div>
                                        <div class="desc_data_list_item_info">
                                            <span>{{ item.name }}</span>
                                        </div>
                                    </div>
                                    <upload width="100px" height="100px" :list="[]" accept=".png,.jpg,.jpeg,.mp4,.word,.xlsx,.xls,.pdf,.excel" folder="settle" @success="claimsUploadFile($event, 2)" />
                                </div>
                            </div>
                            <div class="box_item_list_row" style="width: 100%; margin-bottom: 30px;">
                                <div class="box_item_list_row_title">
                                    <div class="x"></div>
                                    <span>住院</span>
                                </div>
                                <div class="box_item_list_row_info">
                                    <div class="label">文件上传说明：</div>
                                    <div class="content">需上传的文件：劳动合同复印件、工资流水、考勤记录、身份证正反面、；</div>
                                </div>
                                <div class="box_item_list_row_l">
                                    <div class="desc_data_list_item" v-for="(item, index) in form.hospitalFileList" :key="index">
                                        <div class="desc_data_list_item_dele" @click="delFile(index, 3)">删除</div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 0">
                                            <img :src="item.fileurlFull" alt="img"/>
                                        </div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 1">
                                            <video controls :src="item.fileurlFull" />
                                        </div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 2">
                                            <i class="el-icon-folder-opened"></i>
                                        </div>
                                        <div class="desc_data_list_item_info">
                                            <span>{{ item.name }}</span>
                                        </div>
                                    </div>
                                    <upload width="100px" height="100px" :list="[]" accept=".png,.jpg,.jpeg,.mp4,.word,.xlsx,.xls,.pdf,.excel" folder="settle" @success="claimsUploadFile($event, 3)" />
                                </div>
                            </div>
                            <div class="box_item_list_row" style="width: 100%; margin-bottom: 30px;">
                                <div class="box_item_list_row_title">
                                    <div class="x"></div>
                                    <span>伤残</span>
                                </div>
                                <div class="box_item_list_row_info">
                                    <div class="label">文件上传说明：</div>
                                    <div class="content">需上传的文件：劳动合同复印件、工资流水、考勤记录、身份证正反面、；</div>
                                </div>
                                <div class="box_item_list_row_l">
                                    <div class="desc_data_list_item" v-for="(item, index) in form.disabilityFileList" :key="index">
                                        <div class="desc_data_list_item_dele" @click="delFile(index, 4)">删除</div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 0">
                                            <img :src="item.fileurlFull" alt="img"/>
                                        </div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 1">
                                            <video controls :src="item.fileurlFull" />
                                        </div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 2">
                                            <i class="el-icon-folder-opened"></i>
                                        </div>
                                        <div class="desc_data_list_item_info">
                                            <span>{{ item.name }}</span>
                                        </div>
                                    </div>
                                    <upload width="100px" height="100px" :list="[]" accept=".png,.jpg,.jpeg,.mp4,.word,.xlsx,.xls,.pdf,.excel" folder="settle" @success="claimsUploadFile($event, 4)" />
                                </div>
                            </div>
                            <div class="box_item_list_row" style="width: 100%; margin-bottom: 30px;">
                                <div class="box_item_list_row_title">
                                    <div class="x"></div>
                                    <span>其他</span>
                                </div>
                                <div class="box_item_list_row_info">
                                    <div class="label">文件上传说明：</div>
                                    <div class="content">需上传的文件：劳动合同复印件、工资流水、考勤记录、身份证正反面、；</div>
                                </div>
                                <div class="box_item_list_row_l">
                                    <div class="desc_data_list_item" v-for="(item, index) in form.otherFileList" :key="index">
                                        <div class="desc_data_list_item_dele" @click="delFile(index, 5)">删除</div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 0">
                                            <img :src="item.fileurlFull" alt="img"/>
                                        </div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 1">
                                            <video controls :src="item.fileurlFull" />
                                        </div>
                                        <div class="desc_data_list_item_img" v-if="item.type === 2">
                                            <i class="el-icon-folder-opened"></i>
                                        </div>
                                        <div class="desc_data_list_item_info">
                                            <span>{{ item.name }}</span>
                                        </div>
                                    </div>
                                    <upload width="100px" height="100px" :list="[]" accept=".png,.jpg,.jpeg,.mp4,.word,.xlsx,.xls,.pdf,.excel" folder="settle" @success="claimsUploadFile($event, 5)" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box_desc">
                        <div class="box_desc_head">
                            <div class="box_desc_title">
                                <span class="box_desc_title_val">收款信息</span>
                                <div class="box_desc_title_tips1">
                                    <i class="el-icon-info"></i>
                                    <span class="box_desc_title_tips_text">注意收款银行输入开户支行名称</span>
                                </div>
                            </div>
                        </div>
                        <div class="box_desc_list">
                            <div class="box_desc_list_row">
                                <el-form-item label="收款银行" prop="receiveBank">
                                    <el-input v-model="form.receiveBank" placeholder="请输入收款银行支行名称"></el-input>
                                </el-form-item>
                            </div>
                            <div class="box_desc_list_row">
                                <el-form-item label="收款人" prop="receiveUserName">
                                    <el-input v-model="form.receiveUserName" placeholder="请输入开户姓名"></el-input>
                                </el-form-item>
                            </div>
                            <div class="box_desc_list_row">
                                <el-form-item label="收款账号" prop="receiveAccount">
                                    <el-input v-model="form.receiveAccount" placeholder="请输入银行账号"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-if="i === 2">
                    <div class="box_success">
                        <div class="box_success_icon">
                            <i class="el-icon-check"></i>
                        </div>
                        <div class="box_success_title">提交成功</div>
                        <div class="box_success_info">请等待立案</div>
                        <div class="box_success_btns">
                            <el-button @click="continueReporting">继续报案</el-button>
                            <el-button type="primary" @click="$refs.operaSettleClaimsWindow.open('报案详情', id)">查看详情</el-button>
                        </div>
                    </div>
                </template>
            </el-form>
            <div class="box_footer">
                <div class="box_footer_btns" v-if="i === 0">
                    <el-button type="primary" @click="confirm(0)">暂存</el-button>
                    <el-button type="primary" @click="next">下一步</el-button>
                </div>
                <div class="box_footer_btns" v-if="i === 1">
                    <el-button @click="i--">上一步</el-button>
                    <el-button type="primary" @click="confirm(0)">暂存</el-button>
                    <el-button type="primary" @click="confirm(1)">提交</el-button>
                </div>
            </div>
        </div>
        <OperaInsuranceApplyDetails ref="OperaInsuranceApplyDetails" />
        <OperaWtbApplyShopWindow ref="OperaWtbApplyShopWindow" />
        <!-- 详情 -->
        <OperaSettleClaimsWindow ref="operaSettleClaimsWindow"/>
    </GlobalWindow>
</template>

@@ -142,79 +410,119 @@
    import BaseOpera from '@/components/base/BaseOpera'
    import GlobalWindow from '@/components/common/GlobalWindow'
    import upload from '@/components/common/upload'
    import selectSolutions from '@/components/enterprise/selectSolutions'
    import { saveSettleClaims } from '@/api/business/settleRisk'
    import { findById } from '@/api/business/settleClaims'
    import { findListByDTO } from '@/api/business/member'
    import { findList } from '@/api/business/applyChange'
    import { findTreeList } from '@/api/system/common'
    import { create, updateById } from '@/api/business/settleClaims'
    import { findTreeList } from '@/api/business/knowledge'
    import OperaWtbApplyShopWindow from '@/components/business/OperaWtbApplyShopWindow'
    import OperaInsuranceApplyDetails from '@/components/business/OperaInsuranceApplyWindow'
    import OperaSettleClaimsWindow from '@/components/business/OperaSettleClaimsWindow'
    import { mapState } from 'vuex'
    export default {
        name: 'onlineReporting',
        extends: BaseOpera,
        components: { GlobalWindow, upload, selectSolutions },
        components: { GlobalWindow, upload, OperaSettleClaimsWindow, OperaWtbApplyShopWindow, OperaInsuranceApplyDetails },
        computed: {
            ...mapState(['userInfo'])
        },
        data () {
            return {
                i: 0,
                id: null,
                statusList: [
                    {
                        name: '填写出险信息',
                        info: '完成报案基础信息填写'
                    },
                    {
                        name: '上传理赔材料',
                        info: '补充需要理赔的相关资料'
                    },
                    {
                        name: '完成报案',
                        info: '提交报案信息'
                    }
                ],
                form: {
                    id: null,
                    insuranceApplyId: '',
                    memberId: '',
                    solutionId: '',
                    solutionName: '',
                    duId: '',
                    duName: '',
                    worktypeId: '',
                    worktypeName: '',
                    idcardNo: '',
                    insuranceApplyId: '',
                    happenTime: '',
                    hospital: '',
                    area: [],
                    areaId: '',
                    address: '',
                    areaInfo: '',
                    content: '',
                    type: 0,
                    inHospital: 0,
                    hurtType: 0,
                    medicalInsurance: 0,
                    content: '',
                    reportFileList: [],
                    informantName: '',
                    informantPhone: '',
                    list: [],
                    reportFileList: []

                    relationFileList: [],
                    outpatientFileList: [],
                    hospitalFileList: [],
                    disabilityFileList: [],
                    otherFileList: [],

                    applyDetailId: '',
                    solutionId: '',
                    worktypeId: '',
                    duId: '',
                    receiveBank: '',
                    receiveUserName: '',
                    receiveAccount: ''
                },
                rules: {
                    receiveAccount: [
                        { required: true, message: '不能为空' }
                    ],
                    receiveUserName: [
                        { required: true, message: '不能为空' }
                    ],
                    receiveBank: [
                        { required: true, message: '不能为空' }
                    ],
                    memberId: [
                        { required: true, message: '请选择出险人' }
                        { required: true, message: '不能为空' }
                    ],
                    solutionId: [
                        { required: true, message: '请选择保险方案' }
                    ],
                    duId: [
                        { required: true, message: '请选择派遣单位' }
                    ],
                    worktypeId: [
                        { required: true, message: '请选择所属工种' }
                    idcardNo: [
                        { required: true, message: '不能为空' }
                    ],
                    happenTime: [
                        { required: true, message: '请选择事故发生时间' }
                    ],
                    type: [
                        { required: true, message: '请选择事故类型' }
                    ],
                    inHospital: [
                        { required: true, message: '请选择是否住院' }
                    ],
                    medicalInsurance: [
                        { required: true, message: '请选择是否有医疗保险' }
                        { required: true, message: '不能为空' }
                    ],
                    content: [
                        { required: true, message: '请输入事故描述' }
                        { required: true, message: '不能为空' }
                    ],
                    type: [
                        { required: true, message: '不能为空' }
                    ],
                    inHospital: [
                        { required: true, message: '不能为空' }
                    ],
                    hurtType: [
                        { required: true, message: '不能为空' }
                    ],
                    medicalInsurance: [
                        { required: true, message: '不能为空' }
                    ],
                    informantName: [
                        { required: true, message: '请输入报案人姓名' }
                        { required: true, message: '不能为空' }
                    ],
                    informantPhone: [
                        { required: true, message: '请输入报案人联系方式' }
                    ]
                        { required: true, message: '不能为空' }
                    ],
                },
                centerDialogVisible: false,
                pickerOptions: {},
                area: [],
                user: [],
                options: [],
                area: []
                solutionList: []
            }
        },
        created () {
@@ -224,112 +532,121 @@
            })
        },
        methods: {
            open (title, target) {
            open (title, id) {
                this.title = title
                this.visible = true
                this.form.list = []
                this.form.reportFileList = []
                this.form.area = []
                this.i = 0
                this.solutionList = []
                this.area = []
                this.user = []
                this.getUser()
                this.getArea()
                // 新建
                if (target == null) {
                this.getCityTree()
                if (id) {
                    findById(id)
                        .then(res => {
                            this.visible = true
                            this.$nextTick(() => {
                                for (const key in this.form) {
                                    this.form[key] = res[key]
                                }
                                if (this.form.areaId) {
                                    this.form.area = this.form.areaId.split(',').map(item => Number(item))
                                }
                                findList({ memberId: this.form.memberId })
                                    .then(res1 => {
                                        res1.forEach(item => {
                                            if (item.id === res.applyDetailId) {
                                                item.active = true
                                                this.pickerOptions = {
                                                    disabledDate(time) {
                                                        return time.getTime() < new Date(item.parentStartTime).getTime() || time.getTime() > new Date(item.parentEndTime).getTime()
                                                    }
                                                };
                                            } else {
                                                item.active = false
                                            }
                                        })
                                        this.solutionList = res1
                                    })
                            })
                        })
                } else {
                    this.visible = true
                    this.$nextTick(() => {
                        this.$refs.form.resetFields()
                        this.form[this.configData['field.id']] = null
                        setTimeout(() => {
                            this.centerDialogVisible = true
                        }, 300)
                        this.form.informantName = this.userInfo.realname
                    })
                    return
                }
                // 编辑
                this.$nextTick(() => {
                    for (const key in this.form) {
                        this.form[key] = target[key]
                    }
                })
            },
            handleTreeData(data) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].childAreasList.length < 1) {
                        data[i].childAreasList = undefined; // 看后端返的是child字段还是children字段，自行改变
                    } else {
                        this.handleTreeData(data[i].childAreasList) // children若不为空数组，则继续 递归调用 本方法
                    }
            continueReporting() {
                this.i = 0
                this.id = null
                this.pickerOptions = {}
                this.solutionList = []
                this.form = {
                    id: null,
                    memberId: '',
                    idcardNo: '',
                    insuranceApplyId: '',
                    happenTime: '',
                    hospital: '',
                    area: [],
                    areaId: '',
                    address: '',
                    areaInfo: '',
                    content: '',
                    type: 0,
                    inHospital: 0,
                    hurtType: 0,
                    medicalInsurance: 0,
                    reportFileList: [],
                    informantName: '',
                    informantPhone: '',

                    relationFileList: [],
                    outpatientFileList: [],
                    hospitalFileList: [],
                    disabilityFileList: [],
                    otherFileList: [],

                    applyDetailId: '',
                    solutionId: '',
                    worktypeId: '',
                    duId: '',
                    receiveBank: '',
                    receiveUserName: '',
                    receiveAccount: ''
                }
                return data;
            },
            __confirmEdit () {
                this.$refs.form.validate((valid) => {
                    if (!valid) {
                        return
                    }
                    // 调用新建接口
                    this.isWorking = true
                    let obj = JSON.parse(JSON.stringify(this.form))
                    obj.areaId = obj.areaId.join(',')
                    updateById(obj)
                        .then(() => {
                            this.visible = false
                            this.$tip.apiSuccess('修改成功')
                            this.$emit('success')
                        })
                        .catch(e => {
                            this.$tip.apiFailed(e)
                        })
                        .finally(() => {
                            this.isWorking = false
                        })
                })
            },
            __confirmCreate () {
                this.$refs.form.validate((valid) => {
                    if (!valid) {
                        return
                    }
                    // 调用新建接口
                    this.isWorking = true
                    let obj = JSON.parse(JSON.stringify(this.form))
                    if (obj.areaId) {
                        obj.areaId = obj.areaId.join(',')
                    }
                    create(obj)
                        .then(() => {
                            this.visible = false
                            this.$tip.apiSuccess('新建成功')
                            this.$emit('success')
                        })
                        .catch(e => {
                            this.$tip.apiFailed(e)
                        })
                        .finally(() => {
                            this.isWorking = false
                        })
                })
            },
            // 查询区域数据
            getArea() {
                findTreeList({})
                    .then(res => {
                        this.area = this.handleTreeData(res)
                    })
            },
            getVal(e) {
                console.log(e)
                this.form.insuranceApplyId = e.applyId
                this.form.solutionId = e.solutionId
                this.form.solutionName = e.solutionName
                this.form.duId = e.duId
                this.form.duName = e.duName
                this.form.worktypeId = e.worktypeId
                this.form.worktypeName = e.worktypeName
            },
            openS() {
                if (!this.form.memberId) {
                    this.$message.warning('请先选择出险人')
                    return
            changeArea(e) {
                if (!e && e.length === 0) {
                    this.form.areaId = ''
                    this.form.areaInfo = ''
                } else {
                    this.form.areaId = e.join(',')
                    this.form.areaInfo = this.$refs.cascader.getCheckedNodes()[0].pathLabels.join(',')
                }
                this.$refs.selectSolutions.open('选择保险方案', this.form.memberId)
            },
            async getCityTree() {
                this.area = await findTreeList({})
                this.setSecondLevelChildrenToNullPrecise(this.area);
            },
            setSecondLevelChildrenToNullPrecise(data, level = 1) {
                if (!data || !data.length) return;

                data.forEach(item => {
                    if (item.childAreasList && item.childAreasList.length) {
                        if (level === 2) {
                            // 这是第一级节点，处理其子节点（第二级）
                            item.childAreasList.forEach(child => {
                                child.childAreasList = null;
                            });
                        } else {
                            // 继续递归处理更深层级
                            this.setSecondLevelChildrenToNullPrecise(item.childAreasList, level + 1);
                        }
                    }
                });
            },
            getUser() {
                findListByDTO({})
@@ -337,62 +654,687 @@
                        this.user = res
                    })
            },
            getSolutions(id) {
                findList({ memberId: id })
                    .then(res => {
                        this.form.solutionId = ''
                        this.form.worktypeId = ''
                        this.form.duId = ''
                        this.options = res
                    })
            },
            getTreeName(list, id){
                let _this = this
                for (let i = 0; i < list.length; i++) {
                    let a = list[i]
                    if (a.id === id) {
                        return a.name
                    } else {
                        if (a.childAreasList && a.childAreasList.length > 0) {
                            let res = _this.getTreeName(a.childAreasList, id)
                            if (res) {
                                return res
                            }
                        }
                    }
            delFile(index, type) {
                if (type === 1) {
                    this.form.relationFileList.splice(index, 1)
                } else if (type === 2) {
                    this.form.outpatientFileList.splice(index, 1)
                } else if (type === 3) {
                    this.form.hospitalFileList.splice(index, 1)
                } else if (type === 4) {
                    this.form.disabilityFileList.splice(index, 1)
                } else if (type === 5) {
                    this.form.otherFileList.splice(index, 1)
                } else if (type === 6) {
                    this.form.reportFileList.splice(index, 1)
                }
            },
            handleChange(value) {
                let info = ''
                value.forEach(item => {
                    info += this.getTreeName(this.area, item)
                })
                this.form.areaInfo = info
            claimsUploadFile(file, type) {
                file.fileurl = file.imgaddr
                file.name = file.originname
                file.fileurlFull = file.url
                if (type === 1) {
                    this.form.relationFileList.push(file)
                } else if (type === 2) {
                    this.form.outpatientFileList.push(file)
                } else if (type === 3) {
                    this.form.hospitalFileList.push(file)
                } else if (type === 4) {
                    this.form.disabilityFileList.push(file)
                } else if (type === 5) {
                    this.form.otherFileList.push(file)
                } else if (type === 6) {
                    this.form.reportFileList.push(file)
                }
            },
            getData(data) {
                this.form.list.push(data)
                this.form.reportFileList.push({
                    fileurl: data.imgaddr,
                    name: data.originname,
                    type: data.type
                })
            getSolutions(id) {
                let row = this.user.filter(item => item.id === id)
                this.form.idcardNo = row[0].idcardNo
                findList({ memberId: id })
                    .then(res => {
                        this.form.insuranceApplyId = ''
                        res.forEach(item => {
                            item.active = false
                        })
                        this.solutionList = res
                    })
            },
            deleFile(index) {
                this.form.reportFileList.splice(index, 1)
                this.form.list.splice(index, 1)
            changeSolution(e, i) {
                this.solutionList.forEach((item, index) => {
                    item.active = i === index
                })
                let obj = this.solutionList.filter(item => item.active)[0]
                this.form.insuranceApplyId = obj.applyId
                this.form.solutionId = obj.solutionId
                this.form.worktypeId = obj.worktypeId
                this.form.duId = obj.duId
                this.form.applyDetailId = obj.id
                this.form.happenTime = ''
                this.pickerOptions = {
                    disabledDate(time) {
                        return time.getTime() < new Date(obj.parentStartTime).getTime() || time.getTime() > new Date(obj.parentEndTime).getTime()
                    }
                };
            },
            // 查看保单详情
            jumpSolutionDetail(id, solutionType) {
                if (solutionType === 1) {
                    this.$refs.OperaWtbApplyShopWindow.open('委托投保详情', { id: id })
                } else {
                    this.$refs.OperaInsuranceApplyDetails.open('投保详情', { id: id })
                }
            },
            confirm(saveType) {
                this.isWorking = true
                saveSettleClaims({...this.form, saveType})
                    .then(res => {
                        console.log(res)
                        if (saveType === 0) {
                            this.visible = false
                        } else {
                            this.id = res
                            this.i = 2
                        }
                        this.$emit('success')
                    })
                    .finally(() => {
                        this.isWorking = false
                    })
            },
            next() {
                this.$refs.form.validate((valid) => {
                    if (!valid) return
                    this.i++
                    // this.isWorking = true
                    // createSys(obj)
                    //     .then(() => {
                    //         this.visible = false
                    //         this.$emit('success')
                    //     })
                    //     .catch(e => {
                    //         this.$tip.apiFailed(e)
                    //     })
                    //     .finally(() => {
                    //         this.isWorking = false
                    //     })
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .fuwenben {
    .box {
        width: 100%;
        height: 400px;
        font-size: 16px;
        color: black;
        overflow-y: scroll;
        word-break: break-all;
        overflow-wrap: break-word;
        .box_info {
            width: 100%;
            padding: 15px 21px;
            box-sizing: border-box;
            display: flex;
            align-items: start;
            margin-bottom: 30px;
            background-color: rgba(240,246,254,1);
            i {
                color: #165DFF;
                font-size: 18px;
                margin-right: 8px;
            }
            .box_info_title {
                width: 100%;
                display: flex;
                flex-direction: column;
                span {
                    &:nth-child(1) {
                        color: rgba(16,16,16,1);
                        font-size: 14px;
                    }
                    &:nth-child(2) {
                        color: rgba(16,16,16,1);
                        font-size: 14px;
                        margin-top: 12px;
                    }
                    &:nth-child(3) {
                        color: rgba(16,16,16,1);
                        font-size: 14px;
                        margin-top: 12px;
                    }
                }
            }
        }
        .box_item {
            width: 100%;
            margin-bottom: 30px;
            .box_item_title {
                width: 100%;
                margin-bottom: 15px;
                span {
                    color: rgba(16,16,16,1);
                    font-size: 16px;
                    margin-right: 10px;
                }
            }
            .box_item_desc {
                width: 100%;
                padding-left: 50px;
                box-sizing: border-box;
                color: rgba(16,16,16,1);
                font-size: 14px;
                margin-bottom: 15px;
            }
            .price {
                width: 100%;
                height: 62px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-radius: 4px;
                background-color: rgba(239,239,239,1);
                margin-top: 50px;
                padding: 0 20px;
                box-sizing: border-box;
                span {
                    &:nth-child(1) {
                        color: rgba(16,16,16,1);
                        font-size: 18px;
                    }
                    &:nth-child(2) {
                        color: rgba(255,149,2,1);
                        font-size: 22px;
                    }
                }
            }
            .button {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: end;
                margin-top: 15px;
                .button_submit {
                    width: 108px;
                    height: 38px;
                    line-height: 38px;
                    text-align: center;
                    border-radius: 4px;
                    color: rgba(255,255,255,1);
                    font-size: 14px;
                    background-color: rgba(31,99,255,1);
                }
            }
            .box_item_list {
                width: 100%;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                justify-content: space-between;
                .box_item_list_rowx {
                    width: 33.3%;
                    height: 0;
                }
                .box_item_list_row {
                    width: 33.3%;
                    .box_item_list_row_l {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        .desc_data_list_item {
                            width: 100px;
                            height: 100px;
                            padding: 10px;
                            box-sizing: border-box;
                            border: 1px solid #e2e2e2;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            position: relative;
                            margin-bottom: 10px;
                            margin-left: 10px;
                            &:first-child {
                                margin-left: 0 !important;
                            }
                            .desc_data_list_item_dele {
                                position: absolute;
                                top: 5px;
                                right: 5px;
                                font-size: 14px;
                                cursor: pointer;
                                color: rgba(249, 86, 1, 0.996078431372549);
                            }
                            .desc_data_list_item_upload {
                                flex: 1;
                                height: 80px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                            .desc_data_list_item_img {
                                flex-shrink: 0;
                                width: 70px;
                                height: 70px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                overflow: hidden;
                                margin-right: 10px;
                                .el-icon-folder-opened {
                                    font-size: 34px;
                                    color: #666666;
                                }
                                .el-icon-plus {
                                    font-size: 26px;
                                    color: #ffffff;
                                }
                                img {
                                    width: 100%;
                                }
                                video {
                                    width: 100%;
                                }
                            }
                            .desc_data_list_item_info {
                                width: 100%;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                word-break: break-all;
                                span {
                                    width: 100%;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    font-size: 14px;
                                    color: black;
                                }
                            }
                        }
                    }
                    .box_item_list_row_info {
                        width: 100%;
                        height: 46px;
                        border-radius: 4px;
                        padding: 0 11px;
                        box-sizing: border-box;
                        margin-bottom: 20px;
                        background-color: rgba(239,239,239,1);
                        border: 1px solid rgba(187,187,187,1);
                        display: flex;
                        align-items: center;
                        .label {
                            flex-shrink: 0;
                            color: rgba(16,16,16,1);
                            font-size: 14px;
                        }
                        .content {
                            flex: 1;
                        }
                    }
                    .box_item_list_row_title {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        margin-bottom: 20px;
                        .x {
                            width: 1px;
                            height: 14px;
                            background-color: rgba(255,255,255,1);
                            border: 4px solid rgba(22,93,255,1);
                            margin-right: 10px;
                        }
                        span {
                            color: rgba(16,16,16,1);
                            font-size: 14px;
                        }
                    }
                }
            }
        }
        .box_footer {
            width: 100%;
            margin-top: 30px;
            .box_footer_btns {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: end;
            }
        }
        .box_status {
            width: 100%;
            padding: 30px 0;
            box-sizing: border-box;
            display: flex;
            align-items: start;
            justify-content: center;
            margin-bottom: 30px;
            .box_status_row {
                width: 250px;
                display: flex;
                align-items: start;
                .statusColor1 {
                    background-color: #E8F4FF !important;
                }
                .statusColor2 {
                    background-color: #165DFF !important;
                }
                .statusColor3 {
                    span {
                        color: #ffffff !important;
                    }
                }
                .box_status_row_icon {
                    width: 28px;
                    height: 28px;
                    background-color: rgba(242,243,245,1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    margin-right: 10px;
                    span {
                        color: rgba(78,89,105,1);
                        font-size: 14px;
                    }
                    i {
                        color: #165DFF;
                    }
                }
                .box_status_row_info {
                    display: flex;
                    flex-direction: column;
                    .title {
                        color: rgba(78,89,105,1);
                        font-size: 16px;
                        font-weight: bold;
                    }
                    .info {
                        color: rgba(154,154,154,1);
                        font-size: 14px;
                        margin-top: 5px;
                    }
                }
            }
        }
        .box_success {
            width: 100%;
            padding: 100px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            .box_success_icon {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgba(232,255,234,1);
                .el-icon-check {
                    color: #2DC24F;
                    font-size: 24px;
                    font-weight: bold;
                }
            }
            .box_success_title {
                color: rgb(29,33,41);
                font-size: 16px;
                margin-top: 16px;
            }
            .box_success_info {
                color: rgb(134,144,156);
                font-size: 12px;
                margin-top: 5px;
            }
            .box_success_btns {
                display: flex;
                align-items: center;
                margin-top: 20px;
            }
        }
        .box_desc {
            width: 100%;
            margin-bottom: 15px;
            .box_desc_cailiao {
                width: 100%;
                margin-bottom: 18px;
                .box_desc_cailiao_title {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin-bottom: 15px;
                    .box_desc_cailiao_title_x {
                        width: 5px;
                        height: 14px;
                        background-color: #165DFF;
                    }
                    span {
                        color: rgba(16,16,16,1);
                        font-size: 14px;
                        margin-left: 5px;
                    }
                }
                .box_desc_cailiao_list {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    .box_desc_cailiao_list_img {
                        width: 100px;
                        height: 100px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        overflow: hidden;
                        margin-right: 15px;
                        background-color: #E5E5E5;
                        &:last-child {
                            margin: 0;
                        }
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            .box_desc_head {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 26px;
                .box_desc_title {
                    display: flex;
                    align-items: center;
                    .box_desc_title_val {
                        color: rgba(16,16,16,1);
                        font-size: 18px;
                        margin-right: 20px;
                    }
                    .box_desc_title_tips1 {
                        display: flex;
                        align-items: center;
                        .el-icon-info {
                            color: #FF7B74;
                            margin-right: 8px;
                        }
                        .box_desc_title_tips_text {
                            color: rgba(255,123,116,1);
                            font-size: 14px;
                        }
                    }
                    .box_desc_title_zt {
                        height: 25px;
                        padding: 0 15px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        box-sizing: border-box;
                        border-radius: 15px;
                        background-color: rgba(239,239,239,1);
                        color: rgba(16,16,16,1);
                        font-size: 12px;
                        margin-right: 20px;
                    }
                    .box_desc_title_tips {
                        width: 84px;
                        height: 25px;
                        border-radius: 15px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: rgba(254,226,225,1);
                        span {
                            color: #FF4D4F;
                            font-size: 12px;
                        }
                    }
                }
            }
            .box_desc_list {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                .box_desc_list_ZW {
                    width: 33%;
                    height: 0;
                }
                .box_desc_list_row {
                    width: 33%;
                    color: rgba(16,16,16,1);
                    font-size: 14px;
                    margin-bottom: 24px;
                }
                .box_desc_list_img {
                    width: 100%;
                    display: flex;
                    align-items: start;
                    .box_item_list_row_l {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        .desc_data_list_item {
                            width: 100px;
                            height: 100px;
                            padding: 10px;
                            box-sizing: border-box;
                            border: 1px solid #e2e2e2;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            position: relative;
                            margin-bottom: 10px;
                            margin-left: 10px;
                            &:first-child {
                                margin-left: 0 !important;
                            }
                            .desc_data_list_item_dele {
                                position: absolute;
                                top: 5px;
                                right: 5px;
                                font-size: 14px;
                                cursor: pointer;
                                color: rgba(249, 86, 1, 0.996078431372549);
                            }
                            .desc_data_list_item_upload {
                                flex: 1;
                                height: 80px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                            .desc_data_list_item_img {
                                flex-shrink: 0;
                                width: 70px;
                                height: 70px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                overflow: hidden;
                                margin-right: 10px;
                                .el-icon-folder-opened {
                                    font-size: 34px;
                                    color: #666666;
                                }
                                .el-icon-plus {
                                    font-size: 26px;
                                    color: #ffffff;
                                }
                                img {
                                    width: 100%;
                                }
                                video {
                                    width: 100%;
                                }
                            }
                            .desc_data_list_item_info {
                                width: 100%;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                word-break: break-all;
                                span {
                                    width: 100%;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    font-size: 14px;
                                    color: black;
                                }
                            }
                        }
                    }
                    span {
                        flex-shrink: 0;
                        color: rgba(16,16,16,1);
                        font-size: 14px;
                    }
                }
            }
            .box_desc_f {
                width: 100%;
                display: flex;
                align-items: start;
                flex-wrap: wrap;
                margin-bottom: 30px;
                justify-content: space-between;
                .box_desc_fa {
                    width: 32%;
                    padding: 22px 25px;
                    box-sizing: border-box;
                    border-radius: 4px;
                    margin-bottom: 30px;
                    background-color: #ffffff;
                    border: 1px solid #ececec;
                    .box_desc_fa_title {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-bottom: 10px;
                        span {
                            color: rgba(16,16,16,1);
                            font-size: 18px;
                            font-weight: bold;
                            text-decoration: underline;
                            cursor: pointer;
                        }
                    }
                    .box_desc_fa_row {
                        color: rgba(16,16,16,1);
                        font-size: 14px;
                        margin-bottom: 10px;
                        &:last-child {
                            margin: 0;
                        }
                    }
                }
            }
        }
    }
</style>