git ch

k94314517

2025-07-04 50fb58286ed3b718c39a97e0987ee7561a295651

 company/src/components/enterprise/onlineReporting.vue

@@ -2,394 +2,1382 @@
    <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" id="section1">
            <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">
                <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">
                    尊敬的客户：

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

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

                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>
                                    <uploadProgress 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" type="number" maxlength="11" 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">
                          <div> <span>上传理赔材料</span></div>
                          <div style="float: right">
                            <el-button type="primary" v-if="insurance && insurance.lpStampTempFile && insurance.lpStampTempFile.fileurlFull"   @click="openLinkUrl(insurance.lpStampTempFile.fileurlFull)">盖章文件模版</el-button>
                            <el-button type="primary" v-if="insurance && insurance.lpFile && insurance.lpFile.fileurlFull"   @click="openLinkUrl(insurance.lpFile.fileurlFull)">理赔材料一览表</el-button>
                          </div>
                        </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 v-if="insurance && insurance.lpYggxFileInfo" class="content" v-html="insurance.lpYggxFileInfo"></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>
                                    <uploadProgress width="100px" height="100px" :list="[]" 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 v-if="insurance && insurance.lpMzFileInfo" class="content" v-html="insurance.lpMzFileInfo"></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>
                                    <uploadProgress width="100px" height="100px" :list="[]" 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 v-if="insurance && insurance.lpZyFileInfo" class="content" v-html="insurance.lpZyFileInfo"></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>
                                    <uploadProgress width="100px" height="100px" :list="[]" 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 v-if="insurance && insurance.lpScFileInfo" class="content" v-html="insurance.lpScFileInfo"></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>
                                    <uploadProgress width="100px" height="100px" :list="[]" 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 v-if="insurance && insurance.lpYggxFileInfo" class="content" v-html="insurance.lpYggxFileInfo"></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>
                                    <uploadProgress width="100px" height="100px" :list="[]" 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="userInfo.type === 1 ? '' : '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="userInfo.type === 1 ? '' : '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="userInfo.type === 1 ? '' : '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" :loading="isWorking" @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="previousStep">上一步</el-button>
                    <el-button type="primary" :loading="isWorking" @click="confirm(0)">暂存</el-button>
                    <el-button type="primary" :loading="isWorking" @click="confirm(1)">提交</el-button>
                </div>
            </div>
        </div>
        <OperaInsuranceApplyDetails ref="OperaInsuranceApplyDetails" />
        <OperaWtbApplyShopWindow ref="OperaWtbApplyShopWindow" />
        <!-- 详情 -->
        <OperaSettleClaimsWindow ref="operaSettleClaimsWindow"/>
    </GlobalWindow>
</template>

<script>
    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 { findListByDTO } from '@/api/business/member'
    import { findList } from '@/api/business/applyChange'
    import { findTreeList } from '@/api/system/common'
    import { create, updateById } from '@/api/business/settleClaims'
    export default {
        name: 'onlineReporting',
        extends: BaseOpera,
        components: { GlobalWindow, upload, selectSolutions },
        data () {
            return {
                form: {
                    id: null,
                    insuranceApplyId: '',
                    memberId: '',
                    solutionId: '',
                    solutionName: '',
                    duId: '',
                    duName: '',
                    worktypeId: '',
                    worktypeName: '',
                    happenTime: '',
                    hospital: '',
                    areaId: '',
                    areaInfo: '',
                    type: 0,
                    inHospital: 0,
                    medicalInsurance: 0,
                    content: '',
                    informantName: '',
                    informantPhone: '',
                    list: [],
                    reportFileList: []
                },
                rules: {
                    memberId: [
                        { required: true, message: '请选择出险人' }
                    ],
                    solutionId: [
                        { required: true, message: '请选择保险方案' }
                    ],
                    duId: [
                        { required: true, message: '请选择派遣单位' }
                    ],
                    worktypeId: [
                        { required: true, message: '请选择所属工种' }
                    ],
                    happenTime: [
                        { required: true, message: '请选择事故发生时间' }
                    ],
                    type: [
                        { required: true, message: '请选择事故类型' }
                    ],
                    inHospital: [
                        { required: true, message: '请选择是否住院' }
                    ],
                    medicalInsurance: [
                        { required: true, message: '请选择是否有医疗保险' }
                    ],
                    content: [
                        { required: true, message: '请输入事故描述' }
                    ],
                    informantName: [
                        { required: true, message: '请输入报案人姓名' }
                    ],
                    informantPhone: [
                        { required: true, message: '请输入报案人联系方式' }
                    ]
                },
                centerDialogVisible: false,
                user: [],
                options: [],
                area: []
            }
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import upload from '@/components/common/upload'
import uploadProgress from '@/components/common/uploadProgress'
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/business/knowledge'
import OperaWtbApplyShopWindow from '@/components/business/OperaWtbApplyShopWindow'
import OperaInsuranceApplyDetails from '@/components/business/OperaInsuranceApplyWindow'
import OperaSettleClaimsWindow from '@/components/business/OperaSettleClaimsWindow'
import { mapState } from 'vuex'
import { getById } from '@/api/business/insurance'
export default {
  name: 'onlineReporting',
  extends: BaseOpera,
  components: { GlobalWindow, upload,uploadProgress, OperaSettleClaimsWindow, OperaWtbApplyShopWindow, OperaInsuranceApplyDetails },
  computed: {
    ...mapState(['userInfo'])
  },
  data () {
      var checkPhone = (rule, value, callback) => {
          if (value === '') {
              callback(new Error('请输入'));
          } else if (!/^[1]\d{10}$/.test(value)) {
              callback(new Error('手机号不合法'));
          } else {
              callback();
          }
      };
    return {
      i: 0,
      id: null,
      statusList: [
        {
          name: '填写出险信息',
          info: '完成报案基础信息填写'
        },
        created () {
            this.config({
                api: '/business/settleClaims',
                'field.id': 'id'
            })
        {
          name: '上传理赔材料',
          info: '补充需要理赔的相关资料'
        },
        methods: {
            open (title, target) {
                this.title = title
                this.visible = true
                this.form.list = []
                this.form.reportFileList = []
                this.getUser()
                this.getArea()
                // 新建
                if (target == null) {
                    this.$nextTick(() => {
                        this.$refs.form.resetFields()
                        this.form[this.configData['field.id']] = null
                        setTimeout(() => {
                            this.centerDialogVisible = true
                        }, 300)
                    })
                    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若不为空数组，则继续 递归调用 本方法
                    }
                }
                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))
                    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) {
                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
                }
                this.$refs.selectSolutions.open('选择保险方案', this.form.memberId)
            },
            getUser() {
                findListByDTO({})
                    .then(res => {
                        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
                            }
                        }
                    }
                }
            },
            handleChange(value) {
                let info = ''
                value.forEach(item => {
                    info += this.getTreeName(this.area, item)
                })
                this.form.areaInfo = info
            },
            getData(data) {
                this.form.list.push(data)
                this.form.reportFileList.push({
                    fileurl: data.imgaddr,
                    name: data.originname,
                    type: data.type
                })
            },
            deleFile(index) {
                this.form.reportFileList.splice(index, 1)
                this.form.list.splice(index, 1)
            }
        {
          name: '完成报案',
          info: '提交报案信息'
        }
      ],
      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: ''
      },
      rules: {
        receiveAccount: [
          { required: true, message: '不能为空' }
        ],
        receiveUserName: [
          { required: true, message: '不能为空' }
        ],
        receiveBank: [
          { required: true, message: '不能为空' }
        ],
        memberId: [
          { required: true, message: '不能为空' }
        ],
        idcardNo: [
          { required: true, message: '不能为空' }
        ],
        happenTime: [
          { required: true, message: '不能为空' }
        ],
        content: [
          { required: true, message: '不能为空' }
        ],
        type: [
          { required: true, message: '不能为空' }
        ],
        inHospital: [
          { required: true, message: '不能为空' }
        ],
        hurtType: [
          { required: true, message: '不能为空' }
        ],
        medicalInsurance: [
          { required: true, message: '不能为空' }
        ],
        informantName: [
          { required: true, message: '不能为空' }
        ],
        informantPhone: [
          { required: true, validator: checkPhone }
        ]
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now() // 禁用未来的日期
        }
      },
      area: [],
      user: [],
      insurance: null,
      solutionList: []
    }
  },
  created () {
    this.config({
      api: '/business/settleClaims',
      'field.id': 'id'
    })
  },
  methods: {
    open (title, id) {
      this.title = title
      this.continueReporting()
      this.form.area = []
      this.i = 0
      this.solutionList = []
      this.area = []
      this.user = []
      this.getUser()
      this.getCityTree()
      this.insurance = {}
      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) {
                      this.getInsuranceFile(item)//获取保险方案文件说明
                      item.active = true
                      this.pickerOptions = {
                        disabledDate (time) {
                          var start = new Date(item.startTime)
                          var end = new Date(item.endTime)
                          return (time.getTime() < start.getTime() || time.getTime() > end.getTime())
                        }
                      }
                    } else {
                      item.active = false
                    }
                  })
                  this.solutionList = res1
                })
            })
          })
      } else {
        this.visible = true
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.form.informantName = this.userInfo.realname
        })
      }
    },
    openLinkUrl(url){
      window.open(url)
    },
    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: ''
      }
    },
    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(',')
      }
    },
    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({})
        .then(res => {
          this.user = 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)
      }
    },
    getInsuranceFile (obj) {
      this.insurance = null
      getById(obj.insuranceId,1)
        .then(res => {
          this.insurance = res
        })
    },
    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)
      }
    },
    getSolutions (id) {
      const row = this.user.filter(item => item.id === id)
      this.form.idcardNo = row[0].idcardNo
      findList({ memberId: id, isSettleClaims: 1 })
        .then(res => {
          this.form.insuranceApplyId = ''
          res.forEach(item => {
            item.active = false
          })
          this.solutionList = res
          this.changeSolution(null, 0)
        })
    },
    changeSolution (e, i) {
      this.pickerOptions = {}
      if (this.solutionList.length < i) {
        return
      }
      this.solutionList.forEach((item, index) => {
        item.active = i === index
      })
      const obj = this.solutionList.filter(item => item.active)[0]
      this.getInsuranceFile(obj)
      this.pickerOptions = {
        disabledDate (time) {
          var start = new Date(obj.startTime)
          var end = new Date(obj.endTime)
          return (time.getTime() < start.getTime() || time.getTime() > end.getTime())
        }
      }
      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 = obj.startTime
      console.log(this.pickerOptions)
    },
    // 查看保单详情
    jumpSolutionDetail (id, solutionType) {
      if (solutionType === 1) {
        this.$refs.OperaWtbApplyShopWindow.open('委托投保详情', { id: id })
      } else {
        this.$refs.OperaInsuranceApplyDetails.open('投保详情', { id: id })
      }
    },
    confirm (saveType) {
        this.$refs.form.validate((valid) => {
            if (!valid) return;
            this.isWorking = true
            saveSettleClaims({ ...this.form, saveType })
                .then(res => {
                    if (saveType === 0) {
                        this.visible = false
                    } else {
                        this.id = res
                        this.i = 2
                    }
                    this.$emit('success')
                }).catch(err => {
                this.$tip.apiFailed(err)
            })
                .finally(() => {
                    this.isWorking = false
                })
        })
    },
      previousStep() {
          this.i--
          var element = document.getElementById('section1');
          element.scrollIntoView({ behavior: 'smooth' });
      },
    next () {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        this.i++
          var element = document.getElementById('section1');
          element.scrollIntoView({ behavior: 'smooth' });
      })
    }
  }
}
</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>