<template> 
 | 
    <TableLayout :permissions="['business:member:query']"> 
 | 
        <!-- 搜索表单 --> 
 | 
        <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline> 
 | 
            <el-form-item label="员工姓名" prop="name"> 
 | 
                <el-input v-model="searchForm.name" placeholder="请输入" @keypress.enter.native="search"></el-input> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="身份证号" prop="idcardNo"> 
 | 
                <el-input v-model="searchForm.idcardNo" placeholder="请输入" maxlength="18" @keypress.enter.native="search"></el-input> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="保险方案" prop="solutionId"> 
 | 
                <el-select v-model="searchForm.solutionId" placeholder="请选择" @change="search"> 
 | 
                    <el-option 
 | 
                        v-for="item in solutions" 
 | 
                        :key="item.id" 
 | 
                        :label="item.name" 
 | 
                        :value="item.id"> 
 | 
                    </el-option> 
 | 
                </el-select> 
 | 
            </el-form-item> 
 | 
            <el-form-item label="保险状态" prop="solutionsStatus"> 
 | 
                <el-select v-model="searchForm.solutionsStatus" placeholder="请选择" @change="search"> 
 | 
                    <el-option label="保障中" value="1"></el-option> 
 | 
                    <el-option label="不在保" value="2"></el-option> 
 | 
                </el-select> 
 | 
            </el-form-item> 
 | 
            <el-form-item  v-if="userInfo.type === 0" label="所属企业" prop="companyId"> 
 | 
                <el-select v-model="searchForm.companyId" placeholder="请选择" @change="search"> 
 | 
                    <el-option 
 | 
                        v-for="(item, index) in companyList" 
 | 
                        :key="index" 
 | 
                        :label="item.name" 
 | 
                        :value="item.id"> 
 | 
                    </el-option> 
 | 
                </el-select> 
 | 
            </el-form-item> 
 | 
          <el-form-item label="派遣单位" prop="duName"> 
 | 
            <el-input v-model="searchForm.duName" placeholder="请输入" maxlength="18" @keypress.enter.native="search"></el-input> 
 | 
          </el-form-item> 
 | 
<!--            <el-form-item label="派遣单位" prop="duId"> 
 | 
                <el-select v-model="searchForm.duId" placeholder="请选择" @change="search"> 
 | 
                    <el-option 
 | 
                        v-for="(item, index) in options" 
 | 
                        :key="index" 
 | 
                        :label="item.name" 
 | 
                        :value="item.id"> 
 | 
                    </el-option> 
 | 
                </el-select> 
 | 
            </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"> 
 | 
                <li><el-button type="primary" @click="expr">导出人员名单</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 label="保险状态" min-width="100px"> 
 | 
                    <template slot-scope="{row}"> 
 | 
                        <span style="color: green;" v-if="row.solutionsStatus === 1">保障中</span> 
 | 
                        <span v-else-if="row.solutionsStatus === 2">不在保</span> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
                <el-table-column prop="companyName"  label="所属企业" min-width="100px" v-if="userInfo.type === 0"></el-table-column> 
 | 
                <el-table-column prop="name" label="员工姓名" min-width="100px"></el-table-column> 
 | 
                <el-table-column label="性别" min-width="100px"> 
 | 
                    <template slot-scope="{row}"> 
 | 
                        <span v-if="row.sex === 0">男</span> 
 | 
                        <span v-else>女</span> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
                <el-table-column prop="idcardNo" label="身份证号码" min-width="100px"></el-table-column> 
 | 
                <el-table-column label="年龄" min-width="100px"> 
 | 
                    <template slot-scope="{row}"> 
 | 
                        {{ calculateAge(row.idcardNo) }} 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
                <el-table-column prop="solutionName" label="保险方案" min-width="100px"></el-table-column> 
 | 
                <el-table-column prop="duName" label="派遣单位" min-width="100px"></el-table-column> 
 | 
                <el-table-column prop="workTypeName" label="所属工种" min-width="100px"></el-table-column> 
 | 
                <el-table-column prop="startTime" label="实际保险生效起期" min-width="100px"></el-table-column> 
 | 
                <el-table-column prop="endTime" label="实际保险生效止期" min-width="100px"></el-table-column> 
 | 
                <el-table-column label="操作" 
 | 
                     fixed="right" 
 | 
                     min-width="120px"> 
 | 
                    <template slot-scope="{row}"> 
 | 
                        <el-button type="text" @click="$refs.insuranceRecords.open('投保记录', row)">投保记录</el-button> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
            </el-table> 
 | 
            <pagination 
 | 
                @size-change="handleSizeChange" 
 | 
                @current-change="handlePageChange" 
 | 
                :pagination="tableData.pagination" 
 | 
            > 
 | 
            </pagination> 
 | 
        </template> 
 | 
        <!-- 新建/修改 --> 
 | 
        <OperaMemberWindow ref="operaMemberWindow" @success="handlePageChange" /> 
 | 
        <!--    投保记录    --> 
 | 
        <insuranceRecords ref="insuranceRecords" @success="handlePageChange" /> 
 | 
    </TableLayout> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
    import BaseTable from '@/components/base/BaseTable' 
 | 
    import TableLayout from '@/layouts/TableLayout' 
 | 
    import Pagination from '@/components/common/Pagination' 
 | 
    import OperaMemberWindow from '@/components/business/OperaMemberWindow' 
 | 
    import insuranceRecords from '@/components/enterprise/insuranceRecords' 
 | 
    import { all } from '@/api/business/solutions' 
 | 
    import { findListByDTO } from '@/api/business/dispatchUnit' 
 | 
    import { memberExportExcel } from '@/api/business/member' 
 | 
    import { mapState } from 'vuex' 
 | 
    import {pageAll as companyAll} from "@/api/business/company"; 
 | 
    export default { 
 | 
        name: 'Member', 
 | 
        extends: BaseTable, 
 | 
        components: { TableLayout, Pagination, OperaMemberWindow, insuranceRecords }, 
 | 
        data () { 
 | 
            return { 
 | 
                // 搜索 
 | 
                searchForm: { 
 | 
                    duId: '', 
 | 
                    name: '', 
 | 
                    idcardNo: '', 
 | 
                    solutionsStatus: '', 
 | 
                    solutionId: '' 
 | 
                }, 
 | 
                options: [], 
 | 
                solutions: [], 
 | 
                companyList: [] 
 | 
            } 
 | 
        }, 
 | 
        computed: { 
 | 
            ...mapState(['userInfo']) 
 | 
        }, 
 | 
        created () { 
 | 
            this.config({ 
 | 
                module: '用工信息表', 
 | 
                api: '/business/member', 
 | 
                'field.id': 'id', 
 | 
                'field.main': 'id' 
 | 
            }) 
 | 
            this.search() 
 | 
            this.getSolutions() 
 | 
        }, 
 | 
        methods: { 
 | 
            expr() { 
 | 
                memberExportExcel({ 
 | 
                    capacity: 1000, 
 | 
                    page: 1, 
 | 
                    model: this.searchForm 
 | 
                }).then(res => { 
 | 
                    this.download(res) 
 | 
                }) 
 | 
            }, 
 | 
            getSolutions() { 
 | 
                all({}) 
 | 
                    .then(res => { 
 | 
                        this.solutions = res 
 | 
                    }) 
 | 
             /* if(this.userInfo.type ==1){ 
 | 
                findListByDTO({ dataType: 2 }) 
 | 
                    .then(res => { 
 | 
                      this.options = res 
 | 
                    }) 
 | 
              }*/ 
 | 
  
 | 
              companyAll({}).then(res => { 
 | 
                this.companyList = res 
 | 
              }) 
 | 
            }, 
 | 
            calculateAge(idNumber) { 
 | 
                if (!idNumber) return 
 | 
                let birthYear = parseInt(idNumber.substr(6, 4)); // 提取生日年份部分 
 | 
                let currentYear = new Date().getFullYear(); // 获取当前年份 
 | 
  
 | 
                return currentYear - birthYear; // 返回年龄 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</script> 
 |