省市区

<template>
    <div class="tablesss" ref="boxss">
        <div class="crumbs" ref="titlebox">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="iconfont iconshouye1"></i> 省级子公司</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div ref="userbox">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item size='mini' label="推荐人：">
                    <el-input v-model="formInline.branchName"></el-input>
                </el-form-item>
                <el-form-item size='mini' label="负责人手机号：">
                    <el-input v-model="formInline.phone"></el-input>
                </el-form-item>
                <el-form-item size='mini' label="省市区选择：">
                    <!-- 省 -->
                    <el-select v-model="formInline.province" placeholder="选择省" filterable clearable class="handle-select mr10"  @click='provincebuttton'>
                        <el-option
                            v-for="item in provinceList"
                            :key="item.codeId"
                            :label="item.cityName"
                            :value="item.codeId">
                        </el-option>
                    </el-select>
                    <!--市-->
                    <el-select v-model="formInline.town" placeholder="选择市" class="handle-select mr10" clearable  filterable @change='districtbuttton' v-if="citySelectAble">
                        <el-option
                            v-for="item in townList"
                            :key="item.codeId"
                            :label="item.cityName"
                            :value="item.codeId">
                        </el-option>
                    </el-select>
                    <!-- 区 -->
                    <el-select v-model="formInline.district" placeholder="选择区" class="handle-select mr10" clearable  filterable  v-if="rangeSelectAble">
                        <el-option
                            v-for="item in districtList"
                            :key="item.codeId"
                            :label="item.cityName"
                            :value="item.codeId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item size='mini' label="入驻日期：">
                    <el-date-picker
                    v-model="formInline.drawStartDate"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
                  </el-date-picker>
                </el-form-item>
                <el-form-item size='mini' label="到期日期：">
                    <el-date-picker
                    v-model="formInline.drawStartDate"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
                  </el-date-picker>
                </el-form-item>
            </el-form>
        </div>
        <!-- 编辑职位信息 -->
        <el-dialog title="编辑信息" :visible.sync="Edit_show" width="50%" ref="clearform">
            <el-form ref="form" label-width="130px">
                    <el-form-item size='mini' label="合伙人级别：">
                        <el-select v-model="Add_Data.status_data" clearable placeholder="请选择合伙人级别">
                            <el-option
                                v-for="item in status_list"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所在区域 :" style="width:80%;"  size="mini" v-if="Add_Data.status_data=='1'">
                        <el-select v-model="Add_Data.provinceCode" placeholder="选择省" filterable clearable>
                            <el-option
                                v-for="item in provinceList"
                                :key="item.codeId"
                                :label="item.cityName"
                                :value="item.codeId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所在区域 :" style="width:80%;"  size="mini" v-if="Add_Data.status_data=='2'">
                    <!-- 省 -->
                    <el-select v-model="formInline.province" placeholder="选择省" filterable clearable class="handle-select mr10"  @click='provincebuttton'>
                        <el-option
                            v-for="item in provinceList"
                            :key="item.codeId"
                            :label="item.cityName"
                            :value="item.codeId">
                        </el-option>
                    </el-select>
                    <!--市-->
                    <el-select v-model="formInline.town" placeholder="选择市" class="handle-select mr10" clearable  filterable @change='districtbuttton' v-if="citySelectAble">
                        <el-option
                            v-for="item in townList"
                            :key="item.codeId"
                            :label="item.cityName"
                            :value="item.codeId">
                        </el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="所在区域 :" style="width:80%;"  size="mini" v-if="Add_Data.status_data=='3'">
                    <!-- 省 -->
                    <el-select v-model="formInline.province" placeholder="选择省" filterable clearable class="handle-select mr10"  @click='provincebuttton'>
                        <el-option
                            v-for="item in provinceList"
                            :key="item.codeId"
                            :label="item.cityName"
                            :value="item.codeId">
                        </el-option>
                    </el-select>
                    <!--市-->
                    <el-select v-model="formInline.town" placeholder="选择市" class="handle-select mr10" clearable  filterable @change='districtbuttton' v-if="citySelectAble">
                        <el-option
                            v-for="item in townList"
                            :key="item.codeId"
                            :label="item.cityName"
                            :value="item.codeId">
                        </el-option>
                    </el-select>
                    <!-- 区 -->
                    <el-select v-model="formInline.district" placeholder="选择区" class="handle-select mr10" clearable  filterable  v-if="rangeSelectAble">
                        <el-option
                            v-for="item in districtList"
                            :key="item.codeId"
                            :label="item.cityName"
                            :value="item.codeId">
                        </el-option>
                    </el-select>
                    </el-form-item>
                <el-form-item label="负责人姓名：" style="width:80%;">
                    <el-input size="mini" v-model="Rowdata.name"></el-input>
                </el-form-item>
                <el-form-item label="负责人手机号：" style="width:80%;">
                    <el-input size="mini" v-model="Rowdata.phone"></el-input>
                </el-form-item>
                <el-form-item label="负责人身份证号：" style="width:80%;">
                    <el-input size="mini" v-model="Rowdata.idNo"></el-input>
                </el-form-item>
                    <el-form-item label="请上传身份证：" required>
                        <div class="idcard">
                            <div class="idcardZF">
                                <span>正面</span>
                                <el-upload 
                                    action='#'
                                    list-type="picture-card"
                                    :http-request="uploadFrontF"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove"
                                    :file-list="Rowdata.managerIdPicFSrc"
                                    >
                                <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="showImage" append-to-body>
                                        <img width="100%" :src="Add_Data.url" alt="">
                                </el-dialog>
                            </div>
                            <div class="idcardZF">
                                <span>反面</span>
                                <el-upload 
                                    action='#'
                                    list-type="picture-card"
                                    :http-request="uploadFrontC"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove"
                                    :file-list="Rowdata.managerIdPicCSrc"
                                    >
                                <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="showImage" append-to-body>
                                        <img width="100%" :src="Add_Data.url" alt="">
                                </el-dialog>
                            </div>
                        </div>
                    </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="Edit_show = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="subAddRole">确 定</el-button>
            </span>
		</el-dialog>
        <!-- 新增合伙人添加 -->
        <el-dialog title="合伙人添加" :visible.sync="Dictionary" width="50%" ref="clearform">
                <el-form label-width="180px" >
                    <el-form-item size='mini' label="合伙人级别：">
                        <el-select v-model="Add_Data.status_data" clearable placeholder="请选择合伙人级别">
                            <el-option
                                v-for="item in status_list"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所在区域 :" style="width:80%;"  size="mini" v-if="Add_Data.status_data=='1'">
                        <el-select v-model="Add_Data.provinceCode" placeholder="选择省" filterable clearable>
                            <el-option
                                v-for="item in provinceList"
                                :key="item.codeId"
                                :label="item.cityName"
                                :value="item.codeId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所在区域 :" style="width:80%;"  size="mini" v-if="Add_Data.status_data=='2'">
                    <!-- 省 -->
                    <el-select v-model="formInline.province" placeholder="选择省" filterable clearable class="handle-select mr10"  @click='provincebuttton'>
                        <el-option
                            v-for="item in provinceList"
                            :key="item.codeId"
                            :label="item.cityName"
                            :value="item.codeId">
                        </el-option>
                    </el-select>
                    <!--市-->
                    <el-select v-model="formInline.town" placeholder="选择市" class="handle-select mr10" clearable  filterable @change='districtbuttton' v-if="citySelectAble">
                        <el-option
                            v-for="item in townList"
                            :key="item.codeId"
                            :label="item.cityName"
                            :value="item.codeId">
                        </el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="所在区域 :" style="width:80%;"  size="mini" v-if="Add_Data.status_data=='3'">
                    <!-- 省 -->
                    <el-select v-model="formInline.province" placeholder="选择省" filterable clearable class="handle-select mr10"  @click='provincebuttton'>
                        <el-option
                            v-for="item in provinceList"
                            :key="item.codeId"
                            :label="item.cityName"
                            :value="item.codeId">
                        </el-option>
                    </el-select>
                    <!--市-->
                    <el-select v-model="formInline.town" placeholder="选择市" class="handle-select mr10" clearable  filterable @change='districtbuttton' v-if="citySelectAble">
                        <el-option
                            v-for="item in townList"
                            :key="item.codeId"
                            :label="item.cityName"
                            :value="item.codeId">
                        </el-option>
                    </el-select>
                    <!-- 区 -->
                    <el-select v-model="formInline.district" placeholder="选择区" class="handle-select mr10" clearable  filterable  v-if="rangeSelectAble">
                        <el-option
                            v-for="item in districtList"
                            :key="item.codeId"
                            :label="item.cityName"
                            :value="item.codeId">
                        </el-option>
                    </el-select>
                    </el-form-item>
                        <el-form-item label="负责人姓名:" style="width:80%;"  size="mini">
                            <el-input size="mini" v-model="Add_Data.name"></el-input>
                        </el-form-item>
                        <el-form-item label="负责人手机号:" style="width:80%;"  size="mini">
                            <el-input size="mini" v-model="Add_Data.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="负责人身份证号:" style="width:80%;"  size="mini">
                            <el-input size="mini" v-model="Add_Data.idNo"></el-input>
                        </el-form-item>
                        <el-form-item label="请上传身份证：" required>
                            <div class="idcard">
                                <div class="idcardZF">
                                    <span>正面</span>
                                    <el-upload 
                                        action='#'
                                        list-type="picture-card"
                                        :http-request="uploadFrontF"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove"
                                        :file-list="Add_Data.photosDateF"
                                        >
                                    <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="showImage" append-to-body>
                                            <img width="100%" :src="Add_Data.url" alt="">
                                    </el-dialog>
                                </div>
                                <div class="idcardZF">
                                    <span>反面</span>
                                    <el-upload 
                                        action='#'
                                        list-type="picture-card"
                                        :http-request="uploadFrontC"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove"
                                        :file-list="Add_Data.photosDateC"
                                        >
                                    <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="showImage" append-to-body>
                                            <img width="100%" :src="Add_Data.url" alt="">
                                    </el-dialog>
                                </div>
                            </div>
                        </el-form-item>
                </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="Dictionary = false">返回</el-button>
                <el-button size="mini" type="primary" @click="submittrue">确定</el-button>
            </span>
        </el-dialog>

        <div class="handle-box" ref="adduserbox">
            <!-- <el-button type="primary" @click="exportExcel()" size='mini'>导出EXCEL</el-button> -->
            <el-button type="primary" style="float: right; " icon="el-icon-search" size='mini' @click="getsearch()">搜索</el-button>
            <el-button type="primary" style="float: right; margin-right: 1%;" size='mini' @click="Dictionary_door()">新增</el-button>
        </div>
        <div :style="{'height':tableHeight+'px'}" class="table">
            <el-table id="out-table" :data="table_data.records" border height='100%' style="width: 100%;height:100%; overflow: auto;" ref="multipleTable">
                <el-table-column show-overflow-tooltip align="center" prop="partnerArea" label="所在区域" ></el-table-column>
                <el-table-column show-overflow-tooltip align="center" prop="name" label="合伙人姓名" ></el-table-column>
                <el-table-column show-overflow-tooltip align="center" prop="companyName" label="公司名" ></el-table-column>
                <!-- <el-table-column show-overflow-tooltip align="center" prop="partnerArea" label="门店地址" ></el-table-column> -->
                <el-table-column show-overflow-tooltip align="center" prop="phone" label="负责人手机号"></el-table-column>
                <el-table-column show-overflow-tooltip align="center" prop="siteInDate" label="入驻时间" ></el-table-column>
                <el-table-column show-overflow-tooltip align="center" prop="expireInDate" label="到期时间" ></el-table-column>
                <!-- <el-table-column show-overflow-tooltip align="center" prop="belonger" label="归属人" ></el-table-column> -->
                <!-- <el-table-column show-overflow-tooltip align="center" prop="expireInDate" label="到期时间" ></el-table-column> -->
                <el-table-column show-overflow-tooltip align="center" prop="cityNum" label="市级（数）" ></el-table-column>
                <el-table-column show-overflow-tooltip align="center" prop="cityNum" label="区/县级（数）" ></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="edit_data(scope.row)">编辑</el-button>
                        <el-button size="mini" type="primary" @click="delete_user(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination" ref='pagination' >
                <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="cur_page.current"
                :page-size="cur_page.size"
                layout="total, prev, pager, next, jumper"
                :total="table_data.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
// import photosimage from '../../common/photosimage'
    // 引入导出Excel表格依赖
    import FileSaver from "file-saver";
    import XLSX from "xlsx";
    export default {
        // components:{
        //     photosimage
        // },
        data() {
            return {   
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                formInline: { 
                    town:'',
                    district:'',
                },
                cur_page:{
                    current:1,
                    size:20,
                },
                tableHeight:'',
                table_data:[],
                Add_Data:{
                    photosDateC:[],
                    photosDateF:[],

                },
                Edit_show:false,
                Dictionary:false,
                citySelectAble: false,    // 城市是否可选
                rangeSelectAble:false,    //区域选择
                provinceList:[],//省
                townList:[],//市
                districtList:[],//区
                radioshow:'省',
                showImage: false,
                Rowdata:{},
                status_list:[
                    {
                        id:'1',
                        name:'省级子公司',
                    },
                    {
                        id:'2',
                        name:'市级合伙人',
                    },
                    {
                        id:'3',
                        name:'区/县级合伙人',
                    }
                ],
            }
        },

        created(){
           this.tableDatalist()
        },
        mounted(){
            this.tableHeight =this.$refs.boxss.offsetHeight-this.$refs.titlebox.offsetHeight-20
                              -this.$refs.userbox.offsetHeight-this.$refs.adduserbox.offsetHeight
                              -this.$refs.pagination.offsetHeight-40-40
        },
        watch:{
            'formInline.province'(){
                    if(this.formInline.province){
                        this.formInline.town=''
                        this.provincebuttton()
                    }else{
                        this.citySelectAble=false 
                        this.rangeSelectAble=false

                    }
            },
            'formInline.town'(){
                    if(this.formInline.town){
                        this.formInline.district=''
                        this.districtbuttton()
                    }else{
                        this.formInline.district=''
                        this.rangeSelectAble=false
                    }
            }
        },
        
        methods: {
            tableDatalist(){
                this.$http.post('/api/account/getPartnerList',{
                        current:this.cur_page.current,
                        size:this.cur_page.size,
                        // branchName:this.formInline.branchName,
                        // drawStartDate:this.formInline.drawStartDate?this.formatDateTime(this.formInline.drawStartDate[0]):'',
                        // drawEndDate:this.formInline.drawStartDate?this.formatDateTime(this.formInline.drawStartDate[1]):'',
                        // operationStatus:1,
                        // phone:this.formInline.phone,
                        // verifyStatus:1,
                        type:1,
                })
                .then(res=>{
                    console.log('res',res);
                  this.table_data =res.data
                    this.CitySelect()
                })
            },
            // 地区选择
            // 省
            CitySelect(){
                this.$http.post('/api/account/getCityList',{
                        type:1
                })
                .then(res=>{
                        if(res.code==200){
                            this.provinceList =res.data;
                        }else{
                            this.$message.error(res.message);
                        }
                })
            },            
            // 市选择
            provincebuttton(){
                this.$http.post('/api/account/getCityList',{
                    type:2,
                    parentId:this.formInline.province?this.formInline.province:'',
                })
                .then(res=>{
                    if(res.code==200){
                        this.townList =res.data
                        if(this.formInline.province){ 
                            this.citySelectAble=true  
                        }
                    }else{
                        this.$message.error(res.message);
                    }
                }) 
            },

            // 区选择
            districtbuttton(){
                this.$http.post('/api/account/getCityList',{
                    type:3,
                    parentId:this.formInline.town?this.formInline.town:'',
                })
                .then(res=>{
                    if(res.code==200){
                        if(this.formInline.town){
                            this.districtList =res.data
                            this.rangeSelectAble=true
                        }
                    }else{
                        this.$message.error(res.message);
                    }
                }) 
            },
            // 确定按钮
            submittrue(){
                console.log(
                        this.Add_Data.provinceCode,
                        this.Add_Data.phone,
                        this.Add_Data.name,
                        this.Add_Data.idNo,
                        // this.Add_Data.photosDateC[0].id,
                        // this.Add_Data.photosDateF[0].id
                );
                this.$http.post('/api/account/addPartner',{
                        provinceCode:this.Add_Data.provinceCode,
                        phone:this.Add_Data.phone,
                        name:this.Add_Data.name,
                        idNo:this.Add_Data.idNo,
                        managerIdPicC:this.Add_Data.photosDateC[0].id,
                        managerIdPicF:this.Add_Data.photosDateF[0].id

                })
                .then(res=>{
                        if(res.code==200){
                            console.log(res);
                            this.tableDatalist();
                        }else{
                            this.$message.error(res.message);
                        }
                })
                this.Dictionary = false
            },
            // 身份证正面上传
            uploadFrontF(obj) {
                this.Add_Data.photosDateF=[]
                let formdata = new FormData();
                formdata.append('file', obj.file);
                    this.$http.post('/api/account/file/upload/6',formdata)
                    .then(res=>{
                        if(res.code==200){
                            this.$message({
                                message: '上传成功！',
                                type: 'success'
                            });
                            this.Add_Data.photosDateF.push({id:res.data.id,url:this.$imgUrl+res.data.src})
                            console.log(this.Add_Data);
                        }else{
                            this.$message.error(res.message);
                        }
                    })
            },
            uploadFrontC(obj){
                this.Add_Data.photosDateC=[]
                let formdata = new FormData();
                formdata.append('file', obj.file);
                    this.$http.post('/api/account/file/upload/6',formdata)
                    .then(res=>{
                        if(res.code==200){
                            this.$message({
                                message: '上传成功！',
                                type: 'success'
                            });
                            this.Add_Data.photosDateC.push({id:res.data.id,url:this.$imgUrl+res.data.src})
                            console.log(this.Add_Data);
                        }else{
                            this.$message.error(res.message);
                        }
                    })
            },
            handlePictureCardPreview(file, fileList) {
                this.showImage = true;
            },
            // 图片移除
            handleRemove() {
                    this.$http.post('/api/account/file/removeFile',{
                      id:[this.lookMsg.productList[0].pic]
                    }).then(res=>{
                        if(res.code==200){
                            this.$message({
                                message: '删除成功！',
                                type: 'success'
                            });
                        }else{
                            this.$message.error(res.message);
                        }
                    })
            },

            // 编辑
            edit_data(row){
                this.Rowdata='',
                console.log(row);
                var managerIdPicCSrc=[]
                var managerIdPicFSrc=[]
                managerIdPicCSrc.push({url:this.$imgUrl+row.managerIdPicCSrc,id:row.managerIdPicC})
                managerIdPicFSrc.push({url:this.$imgUrl+row.managerIdPicFSrc,id:row.managerIdPicF})
                row.managerIdPicCSrc=managerIdPicCSrc
                row.managerIdPicFSrc=managerIdPicFSrc
                this.Rowdata=row
                this.Edit_show=true;
                console.log('this.Rowdata',this.Rowdata);
            },
            // 确定
            subAddRole(){

            },
            // 查看员工
            delete_user(row){
                console.log(row);
                this.$confirm('此操作将删除该类型, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    this.$http.post('/api/account/deletePartnerById/',{
                        id:row.id
                    }
                        )
                    .then(res=>{
                        if(res.code==200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.tableDatalist()
                        }else{
                            this.$message.error(res.message);
                        }
                    })

                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 新增
            Dictionary_door(){
                this.Add_Data={
                    status_data:'',
                    name:'',
                    phone:'',
                    idNo:'',
                }
                this.Dictionary=true
            },
            // 搜索
            getsearch () {
                this.tableDatalist();
            },
            exportExcel() {
                this.cur_page.size= this.table_data.total
                this.tableDatalist()
            /* 从表生成工作簿对象 */
            var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
            /* 获取二进制字符串作为输出 */
            var wbout = XLSX.write(wb, {
                bookType: "xlsx",
                bookSST: true,
                type: "array"
            });
            try {
                FileSaver.saveAs(
                //Blob 对象表示一个不可变、原始数据的类文件对象。
                //Blob 表示的不一定是JavaScript原生格式的数据。
                //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
                //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
                new Blob([wbout], { type: "application/octet-stream" }),
                //设置导出文件名称
                "sheetjs.xlsx"
                );
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;
            },
            //封装时间戳转换成标准时间格式的方法
        	formatDateTime(timeStamp){
                var date = new Date(timeStamp);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + m + '-' + d;
            },
            //分页
            handleCurrentChange(val){
                this.cur_page.current=val;
                this.tableDatalist();
            },
       }
    }
</script>

<style scoped>
.idcard{
    display: flex;
}
.idcardZF{
    margin: 10px;
}
.tablesss{
    height: 100%;
    padding: 20px;
    box-sizing:border-box;
}
.handle-box{
    margin-bottom: 20px;
}
.Input-width{
    width: 70%;
}
.Charge-Text{
    color: #606266;
    font-size: 14px;
}
.handle-select{
    width: 100px;
}
.handle-input{
    width: 300px;
    display: inline-block;
}
.table{
    height: 100%;
    padding: 20px;
}
.addMsg{
    width: 70%;
    margin-left: 15%;
}
.addMsg .single{
    margin: 2.5% 0;
}
</style>