<template> 
 | 
    <TableLayout :permissions="['business:insuranceapply:query']"> 
 | 
        <!-- 搜索表单 --> 
 | 
        <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline> 
 | 
            <el-form-item label="保单状态" prop="queryStatus" > 
 | 
                <el-select v-model="searchForm.queryStatus" placeholder="请选择" clearable @change="search"> 
 | 
                    <el-option label="待审核" value="0"></el-option> 
 | 
                    <el-option label="待签署" value="1"></el-option> 
 | 
                    <el-option label="待出单" value="2"></el-option> 
 | 
                    <el-option label="保障中" value="3"></el-option> 
 | 
                    <el-option label="已退回" value="4"></el-option> 
 | 
                    <el-option label="待生效" value="5"></el-option> 
 | 
                    <el-option label="已过期" value="6"></el-option> 
 | 
                </el-select> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="保险方案" prop="solutionId"> 
 | 
                <el-select v-model="searchForm.solutionId" filterable clearable  placeholder="请选择" @change="search"> 
 | 
                    <el-option 
 | 
                        v-for="item in solutionList" 
 | 
                        :key="item.id" 
 | 
                        :label="item.name" 
 | 
                        :value="item.id"> 
 | 
                    </el-option> 
 | 
                </el-select> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="提交日期" prop="time"> 
 | 
                <el-date-picker 
 | 
                    v-model="searchForm.time" 
 | 
                    @change="changeTime" 
 | 
                    type="daterange" 
 | 
                    range-separator="至" 
 | 
                    value-format="yyyy-MM-dd" 
 | 
                    start-placeholder="开始日期" 
 | 
                    end-placeholder="结束日期"> 
 | 
                </el-date-picker> 
 | 
            </el-form-item> 
 | 
            <section> 
 | 
                <el-button type="primary" @click="search">搜索</el-button> 
 | 
                <el-button @click="reset">重置</el-button> 
 | 
            </section> 
 | 
        </el-form> 
 | 
        <!-- 表格和分页 --> 
 | 
        <template v-slot:table-wrap> 
 | 
<!--            <ul class="toolbar"  v-if="userInfo.type==2"  v-permissions="['business:unionapply:create']">--> 
 | 
<!--                <li><el-button type="primary" @click="$refs.OpearaUnionApply.open('委托投保申请')" v-permissions="['business:unionapply:create']">提交申请</el-button></li>--> 
 | 
<!--            </ul>--> 
 | 
            <el-table 
 | 
                v-loading="isWorking.search" 
 | 
                :data="tableData.list" 
 | 
                stripe 
 | 
            > 
 | 
                <el-table-column label="序号" width="80px"> 
 | 
                    <template slot-scope="scope"> 
 | 
                        <span>{{scope.$index + 1}}</span> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
                <el-table-column prop="statusInfo" label="状态" min-width="100px"> 
 | 
                    <template slot-scope="{row}"> 
 | 
                        <span v-if="row.status === 3 && row.statusInfo === '已过期'" style="color: #999;">{{ row.statusInfo}}</span> 
 | 
                        <span v-else-if="row.status === 3 && row.statusInfo === '待生效'" style="color: #f95601;">{{ row.statusInfo}}</span> 
 | 
                        <span v-else-if="row.status === 4 && row.statusInfo === '已退回'" style="color: red;">{{ row.statusInfo}}</span> 
 | 
                        <span v-else-if="row.status === 5 && row.statusInfo === '待审核'" style="color: #216EEE;">{{ row.statusInfo}}</span> 
 | 
                        <span :class="'union-apply-status'+row.status" v-else>{{ row.statusInfo}}</span> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
                <el-table-column prop="companyName" v-if="userInfo.type === 0" label="企业名称" min-width="150"></el-table-column> 
 | 
                <el-table-column prop="solutionName" label="保险方案" min-width="100px"></el-table-column> 
 | 
                <el-table-column prop="insureNum" label="投保人数" min-width="100px"></el-table-column> 
 | 
              <el-table-column prop="guaranteeNum" label="在保人数"></el-table-column> 
 | 
                <el-table-column prop="fee" label="总费用(元)" min-width="100px"></el-table-column> 
 | 
                <el-table-column prop="createDate" label="提交时间" min-width="100px"></el-table-column> 
 | 
                <el-table-column 
 | 
                    v-if="containPermissions(['business:insuranceapply:update', 'business:insuranceapply:delete'])" 
 | 
                    label="操作" 
 | 
                    min-width="120" 
 | 
                    fixed="right" 
 | 
                > 
 | 
                  <template slot-scope="{row}"> 
 | 
                        <el-button type="text"  icon="el-icon-edit" @click="$refs.detailsEntrustedInsurance.open('委托投保详情', row)" v-permissions="['business:insuranceapply:update']">查看详情</el-button> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
            </el-table> 
 | 
            <pagination 
 | 
                @size-change="handleSizeChange" 
 | 
                @current-change="handlePageChange" 
 | 
                :pagination="tableData.pagination" 
 | 
            > 
 | 
            </pagination> 
 | 
        </template> 
 | 
        <!-- 新建/修改 --> 
 | 
        <OpearaUnionApply ref="OpearaUnionApply" @success="handlePageChange"/> 
 | 
        <!-- 详情 --> 
 | 
        <detailsEntrustedInsurance ref="detailsEntrustedInsurance" /> 
 | 
    </TableLayout> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
    import BaseTable from '@/components/base/BaseTable' 
 | 
    import TableLayout from '@/layouts/TableLayout' 
 | 
    import Pagination from '@/components/common/Pagination' 
 | 
    import { all as solutionAll } from '@/api/business/solutions' 
 | 
    import OpearaUnionApply from '@/components/business/OpearaUnionApply' 
 | 
    import detailsEntrustedInsurance from '@/components/business/detailsEntrustedInsurance' 
 | 
    import {mapState} from "vuex"; 
 | 
    export default { 
 | 
        name: 'unionApply', 
 | 
        extends: BaseTable, 
 | 
        components: { TableLayout, Pagination, OpearaUnionApply, detailsEntrustedInsurance }, 
 | 
        data () { 
 | 
            return { 
 | 
                // 搜索 
 | 
                searchForm: { 
 | 
                    queryStartTime: '', 
 | 
                    queryEndTime: '', 
 | 
                    solutionId: '', 
 | 
                    queryStatus: '', 
 | 
                    time: [] 
 | 
                }, 
 | 
                solutionList: [] 
 | 
            } 
 | 
        }, 
 | 
        created () { 
 | 
            this.config({ 
 | 
                module: '委托投保审核信息表', 
 | 
                api: '/business/unionApply', 
 | 
                'field.id': 'id', 
 | 
                'field.main': 'id' 
 | 
            }) 
 | 
            this.search() 
 | 
          this.loadSelectList() 
 | 
        }, 
 | 
      computed: { 
 | 
        ...mapState(['userInfo']) 
 | 
      }, 
 | 
        methods:{ 
 | 
            // 搜索框重置 
 | 
            reset () { 
 | 
                this.$refs.searchForm.resetFields() 
 | 
                this.searchForm.queryStartTime = '' 
 | 
                this.searchForm.queryEndTime = '' 
 | 
                this.search() 
 | 
            }, 
 | 
            changeTime(e) { 
 | 
                if (e.length > 0) { 
 | 
                    this.searchForm.queryStartTime = e[0] 
 | 
                    this.searchForm.queryEndTime = e[1] 
 | 
                } else { 
 | 
                    this.searchForm.queryStartTime = '' 
 | 
                    this.searchForm.queryEndTime = '' 
 | 
                } 
 | 
                this.search() 
 | 
            }, 
 | 
            loadSelectList() { 
 | 
                solutionAll({dataType:0,type:1}).then(res => { 
 | 
                    this.solutionList = res 
 | 
                }).catch(err => { 
 | 
                }) 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</script> 
 |