realName.vue 10.3 KB
<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :md="6" :sm="12">
                        <a-form-item label="用户ID">
                            <a-input placeholder="输入用户ID" v-model="queryParam.applyNo"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="12">
                        <a-form-item label="用户名称">
                            <a-input placeholder="输入用户名称" v-model="queryParam.idCardName"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="12">
                        <a-form-item label="手机号码">
                            <a-input placeholder="输入手机号码" v-model="queryParam.mobilePhone"></a-input>
                        </a-form-item>
                    </a-col>
                    <template v-if="toggleSearchStatus">
                        <a-col :md="6" :sm="12">
                        <a-form-item label="证件号码">
                            <a-input placeholder="输入证件号码" v-model="queryParam.idCardNoView"></a-input>
                        </a-form-item>
                    </a-col>
                        <a-col :md="6" :sm="8">
                            <a-form-item label="实名认证状态">
                                <a-select v-model="queryParam.statue" placeholder="请选择">
                                    <a-select-option :value="99">
                                    已认证
                                    </a-select-option>
                                    <a-select-option :value="0">
                                    未认证
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="8">
                            <a-form-item label="注册时间" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                                <a-date-picker style="width: 100%" :disabledDate="disabledStartDate"
                                    :format="dateFormat" v-model="applyFromTime" @change="onChangeApplyDateStart" />
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="8">
                            <a-form-item label="至" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                                <a-date-picker style="width: 100%" :disabledDate="disabledEndDate" :format="dateFormat"
                                    v-model="applyToTime" @change="onChangeApplyDateEnd" />
                            </a-form-item>
                        </a-col>
                    </template>
                    <a-col :md="6" :sm="8">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置
                            </a-button>
                            <a @click="handleToggleSearch" style="margin-left: 8px">
                                {{ toggleSearchStatus ? '收起' : '展开' }}
                                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                            </a>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <!-- table区域-begin -->
        <div>
            <a-table ref="table" size="middle" bordered :rowKey="(record, index) => index" :columns="columns" :dataSource="dataSource"
                :pagination="ipagination" :loading="loading" :scroll="{ x: 1600 }" @change="handleTableChange">
                <!-- 字符串超长截取省略号显示-->
                <span slot="esContent" slot-scope="text">
                    <j-ellipsis :value="text" :length="10" />
                </span>

                <span slot="action" slot-scope="text, record">
                    <a-button
                        type="link"
                        size="small"
                        @click="handleDetailBai(record, '查看客户认证信息')"
                        v-has="'personalInformationList:look'"
                        icon="search"
                        style="font-size: 12px"
                    >
                    查看</a-button
                    >
                    <a-divider type="vertical" />
                    <a-button
                        type="link"
                        size="small"
                        @click="handleEditBai(record, '修改客户认证信息')" v-has="'personalInformationList:edit'"
                        icon="edit"
                        style="font-size: 12px"
                    >
                    修改</a-button
                    >
                </span>
            </a-table>
        </div>
        <!-- table区域-end -->
        <personal-information-list-modal ref="modalForm" @ok="modalFormOk"></personal-information-list-modal>
    </a-card>
</template>
<script>
import PersonalInformationListModal from './modules/PersonalInformationListModal'
import { JeecgListMixin } from '@/mixins/CoreListMixin'
import { details } from '@/api/configApi'
import { userStatus } from '@/data/params'

export default {
    name: 'personalInformationList',
    mixins: [JeecgListMixin],
    components: {
        PersonalInformationListModal,
    },
    data() {
        return {
            queryParam: {},
            userStatus: userStatus,
            createTime: undefined,
            updateTime: undefined,
            dateFormat: 'YYYY-MM-DD 00:00:00',
            columns: [
                {
                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width:55,
                    align: 'center',
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1
                    }
                },
                {
                    title: '用户ID',
                    align: 'center',
                    dataIndex: 'applyNo',
                    width:300,
                },
                {
                    title: '手机号码',
                    align: 'center',
                    dataIndex: 'mobilePhoneView',
                    width:120,
                },
                {
                    title: '用户名称',
                    align: 'center',
                    dataIndex: 'idCardName',
                    width:180,
                },
                {
                    title: '证件号码',
                    align: 'center',
                    dataIndex: 'idCardNoView',
                    width:200,
                },
                // {
                //   title: '用户类型',
                //   align: 'center',
                //   dataIndex: 'idCardNoView'
                // },
                {
                    title: '实名认证状态',
                    align: 'center',
                    dataIndex: 'status',
                    width:120,
                    customRender: function (t, r, index) {
                        if (t == 99) {
                            return "已认证"
                        } else {
                            return "未认证"
                        }
                    }
                },
                // {
                //   title: '客户状态',
                //   align: 'center',
                //   dataIndex: 'status',
                //   customRender: function (t, r, index) {
                //     for (var i = 0; i < userStatus.length; i++) {
                //       if (t === userStatus[i].value) {
                //         return userStatus[i].label
                //       }
                //     }
                //   }
                // },
                {
                    title: '注册时间',
                    align: 'center',
                    dataIndex: 'createTime',
                    width:200,
                },
                {
                    title: '更新时间',
                    align: 'center',
                    dataIndex: 'updateTime',
                    width:200,
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' },
                    align: 'center',
                    width: 180,
                    fixed: 'right'
                }
            ],
            url: {
                list: '/collection/admin/api/personalCertify/list',
            }
        }
    },
    computed: {},
    methods: {
        handleEditBai: function (record, title) {
            let _p = {
                applyNo: record.applyNo,
            };
            details(_p).then(res => {
                if (res.status.statusCode == 0) {
                    this.$refs.modalForm.edit(res.result, record.applyNo)
                    localStorage.setItem("applyNo",record.applyNo)
                } else {
                    this.$message.warning(res.status.statusReason)
                }
            })
            this.$refs.modalForm.title = title
            this.$refs.modalForm.disableSubmit = false
            this.$refs.modalForm.onlyread = true
        },
        handleDetailBai: function (record, title) {
            let _p = {
                applyNo: record.applyNo,
            };
            localStorage.setItem("applyNo",record.applyNo)
            details(_p).then(res => {
                if (res.status.statusCode == 0) {
                    this.$refs.modalForm.edit(res.result, record.applyNo)
                    localStorage.setItem("applyNo",record.applyNo)
                } else {
                    this.$message.warning(res.status.statusReason)
                }
            })
            this.$refs.modalForm.title = title
            this.$refs.modalForm.disableSubmit = true
            this.$refs.modalForm.onlyread = true
        },
    }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>