本文介绍了一个基于Vue.js的应用程序，用于查询和展示刷脸数据。应用支持按省份、身份证号等条件筛选数据，并提供了详细的认证信息查看功能。
<style lang="less">
#asda .lkui-modal{
width: 60% !important;
}
#asda .lkui-modal-footer{
display: none;
}
@import './personal-data.less';
</style>
<template>
<div>
<Row :gutter="10">
<Col >
<Card>
<p slot="title">
<Icon type="ios-list-outline"></Icon>
刷脸数据
</p>
<Row>
<Form ref="formItem" :model="formItem" inline :label-width="100" >
<FormItem label="认证区域:" >
<Select v-model="formItem.province" :disabled="province_disabled" placeholder="请选择省" clearable style="width: 100px;margin-left:10px;" @on-change="getCity">
<Option v-for="item in provinceList" :value="item.id" :key="item.content">{{ item.shortName }}</Option>
</Select>
<Select v-model="formItem.city" :disabled="city_disabled" placeholder="请选择市" clearable style="width: 100px;margin-left:10px;" @on-change="getCountry">
<Option v-for="item in cityList" :value="item.id" :key="item.content">{{ item.shortName }}</Option>
</Select>
<Select v-model="formItem.country" :disabled="country_disabled" placeholder="请选择区/县" clearable style="width: 100px;margin-left:10px;" >
<Option v-for="item in countryList" :value="item.id" :key="item.content">{{ item.shortName }}</Option>
</Select>
</FormItem>
<FormItem label="身份证号:" >
<Input style="width: 328px;margin-left:10px;" v-model="formItem.idcard" placeholder="请输入身份证号" />
</FormItem>
<FormItem label="商户编号:" >
<Input style="width: 328px;margin-left:10px;" v-model="formItem.storenumber" placeholder="请输入商户编号" />
</FormItem>
<FormItem label="认证时间:">
<DatePicker v-model="formItem.starttime" type="date" placeholder="请选择开始时间" :options="startRule" format="yyyy-MM-dd" :time-picker-options="{value:['00','00','00']}"
style="width: 158px;margin-left:10px;" ></DatePicker>
<span>-</span>
<DatePicker v-model="formItem.endtime" type="date" placeholder="请选择结束时间" :options="endRule" format="yyyy-MM-dd" :time-picker-options="{value:['23','59','59']}"
style="width: 158px;"></DatePicker>
</FormItem>
<br>
<div class="sear">
<Button type="primary" @click="search()" icon="ios-search">查询</Button>
</div>
</Form>
</Row>
<Row class="margin-top-10">
<Table border :data="data1" :columns="columns1" :hover-show="true" :edit-incell="true" :loading="loading"></Table>
<div style="margin: 10px;overflow: hidden">
<div style="float: right;">
<Page :page-size="pagination.size" :total="pagination.total" :current="pagination.current" @on-change="changePage"></Page>
</div>
</div>
</Row>
</Card>
</Col>
</Row>
<Modal id="asda" v-model="panelShow" title="查看详情" :mask-closable="false">
<!-- 引用,父组件给子组件传值-->
<personnelDetails v @hidePanel=hidePanel v-show="panelShow" :panelShow="panelShow" :addEntityData="viewData"></personnelDetails>
</Modal>
</div>
</template>
<script>
import util from '@/libs/util.js';
import {formatDate} from '@/libs/date.js';
// 调用
import personnelDetails from './personnel-details';
export default {
name: 'personaldata',
data () {
return {
// 定义省市区
provinceList:[],
cityList:[],
countryList:[],
province_disabled:false,
city_disabled:false,
country_disabled:false,
// 定义
viewData: {
type: Array,
default: function () {
return {};
}
},
list: {},
panelShow: false, // 查看
pagination: {
current: 1,
total: 1,
size: 10,
start: 0
},
loading: false,
searchParams: {
data: '',
start: 0,
length: 8
},
data1: [],
fetchError: null,
// 表单提交
formItem: {
idcard: '',
storenumber: '',
starttime: '',
endtime: '',
province: '',
city: '',
country: '',
datatype: 3 // 数据为刷脸数据
},
// 时间START
startRule: {
disabledDate: date => {
date = formatDate (date, 'yyyy-MM-dd hh:mm:ss');
let end = this.formItem.endtime.valueOf();
if (end) {
return date && (date.valueOf() + 86300000) > (end + 3600 * 24);
}
return;
}
},
endRule: {
disabledDate: date => {
date = formatDate (date, 'yyyy-MM-dd hh:mm:ss');
let start = this.formItem.starttime.valueOf();
if (!start || !date) {
return false;
}
return date && (date.valueOf() + 86300000) < start;
}
},
// 时间END
columns1: [
{
title: '姓名',
key: 'name',
align: 'center'
},
{
title: '身份证号',
key: 'idcard',
align: 'center'
},
{
title: '商户编号',
key: 'storenumber',
align: 'center'
},
{
title: '商户名称',
key: 'storename',
align: 'center'
},
{
title: '认证时间',
key: 'authtime',
align: 'center'
},
{
title: '认证区域',
key: 'areaname',
align: 'center'
},
{
title: '认证结果',
key: 'authresult',
align: 'center',
render: (h, params) => {
if (params.row.authresult == 0) {
return h('div', "不同人 ");
}
if (params.row.authresult == 1) {
return h('div', "成功");
}
if (params.row.authresult == 2) {
return h('div', "手动开户");
}
}
},
{
title: '操作',
key: 'id',
align: 'center',
render: (h, params) => {
var href = this;
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginLeft: '5px'
},
on: {
click: () => {
href.showPerson(params.row.id);
}
}
}, '查看')
]);
}
}
],
};
},
mounted: function () {
this.$nextTick(function () {
this.fetchData();
this.defaultArea();
// this.getPublisherList();
// this.getType();
});
},
created () {
},
// computed: {
// authority () {
// return this.$store.state.authority;
// },
// status(){
// return this.$store.state.status;
// },
// control(){
// return this.$store.state.control;
// }
// },
methods: {
fetchData () {
var self = this;
self.formItem.page = self.pagination.current;
self.formItem.limit = self.pagination.size;
self.formItem.start = self.pagination.size * self.pagination.current - self.pagination.size;
// self.spinShow=true;
return util.ajax.post('/faceData/findAll.do', self.formItem)
.then(function (response) {
// console.log(response.data);
self.data1 = response.data.data;
self.pagination.total = response.data.total;
// self.spinShow=false;
})
.catch(function (error) {
self.fetchError = error;
});
},
// 查看
showPerson (id) {
this.panelShow = true;
var self = this;
// console.log(id+"查看id");
util.ajax.post('personDocumentData/findById.do', {id: id})
.then(function (response) { // 接口返回数据
// console.log(response.data.data, "打印response的值");
// self.viewData = JSON.stringify(response.data.data);
self.viewData = response.data.data;
// console.log("获取数据2：",self.viewData);
})
.catch(function (error) {
// self.fetchError = error
console.log(error);
});
},
// 获取省市县START
getProvince(){
var self = this;
util.ajax.post('/area/asynLoadProvinceList.do')
.then(function (response) {
self.provinceList = response.data.data;
})
.catch(function (error) {
self.fetchError = error
})
},
getCity(){
var self = this;
util.ajax.post('/area/asynLoadCityList.do',{province:self.formItem.province})
.then(function (response) {
self.cityList = response.data.data;
})
.catch(function (error) {
self.fetchError = error
})
},
getCountry(){
var self = this;
util.ajax.post('/area/asynLoadCountryList.do',{city:self.formItem.city})
.then(function (response) {
self.countryList = response.data.data;
})
.catch(function (error) {
self.fetchError = error
})
},
// 获取省市县END
// 默认当前用户区县START
defaultArea(){
var userareacode = this.getCookie("userareacode");
var self = this;
console.log(userareacode.length);
if (userareacode.length == 0) {
this.getProvince();
return;
}
if (userareacode.length == 2) {
util.ajax.post('/area/asynselectById.do',{id:userareacode})
.then(function (response) {
var area = response.data.data;
self.provinceList.push(area);
self.formItem.province = parseInt(userareacode);
self.province_disabled = true;
this.getCity();
})
.catch(function (error) {
self.fetchError = error
})
return;
}
if (userareacode.length == 4) {
var province = userareacode.substring(0,2);
util.ajax.post('/area/asynselectById.do',{id:province})
.then(function (response) {
var area = response.data.data;
self.provinceList.push(area);
self.formItem.province = parseInt(province);
self.province_disabled = true;
})
.catch(function (error) {
self.fetchError = error
})
util.ajax.post('/area/asynselectById.do',{id:userareacode})
.then(function (response) {
var area = response.data.data;
self.cityList.push(area);
self.formItem.city = parseInt(userareacode);
self.city_disabled = true;
this.getCountry();
})
.catch(function (error) {
self.fetchError = error
})
return;
}
if (userareacode.length == 6) {
var province = userareacode.substring(0,2);
var city = userareacode.substring(0,4);
util.ajax.post('/area/asynselectById.do',{id:province})
.then(function (response) {
var area = response.data.data;
self.provinceList.push(area);
self.formItem.province = parseInt(province);
self.province_disabled = true;
})
.catch(function (error) {
self.fetchError = error
})
util.ajax.post('/area/asynselectById.do',{id:city})
.then(function (response) {
var area = response.data.data;
self.cityList.push(area);
self.formItem.city = parseInt(city);
self.city_disabled = true;
})
.catch(function (error) {
self.fetchError = error
})
util.ajax.post('/area/asynselectById.do',{id:userareacode})
.then(function (response) {
var area = response.data.data;
self.countryList.push(area);
self.formItem.country = parseInt(userareacode);
self.country_disabled = true;
})
.catch(function (error) {
self.fetchError = error
})
return;
}
},
// 默认当前用户区县END
// 获取cookie
getCookie: function (cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
console.log(c)
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) != -1){
return c.substring(name.length, c.length);
}
}
return "";
},
getParams () {
// 取到路由带过来的参数
let routerParams = this.$route.params.code;
// console.log(routerParams);
// 将数据放在当前组件的数据内
this.id = routerParams;
},
getSelectList () {
var self = this;
util.ajax.post('/place/api/query/findSubType')
.then(function (response) {
console.log(response.data.data);
self.optionList = response.data.data;
})
.catch(function (error) {
self.fetchError = error;
});
},
search () {
var self = this;
self.pagination.current = 1;
this.fetchData();
},
changePage (index) {
this.pagination.current = index;
this.fetchData();
},
showEditModal () {
this.editModal = true;
},
showAddModel () {
this.addModal = true;
},
removeEmptyValue (obj) {
var newArr = {};
var arr = Object.keys(obj);
arr.forEach(function (value, key, arr) {
if (obj [value] != null && obj[value] != '') {
newArr[value] = obj[value];
}
});
return newArr;
},
cancel () {
var self = this;
self.editModal = false;
// 清空表单
self.$refs['formItem'].resetFields();
},
hidePanel () {
this.panelShow = false;
}
},
watch: {
'$route' (to) {
if (to.name == this.$route.name) {
this.getParams();
if (this.id) {
this.formItem.code = this.id;
this.fetchData();
} else {
this.fetchData();
}
}
}
},
// 注册
components: {
personnelDetails
}
};
</script>
=========================================================
子组件
<style>
.pesonMsg div{
margin: 10px 0;
}
</style>
<template>
<div class="person">
<div class="item">
<el-dialog
title="人员详情"
:visible.sync="viewData"
width="30%"
>
<template>
<div style="margin: 10px 0;font-size: 16px">
<Divider type="vertical" style="background-color: cornflowerblue"/>
身份信息
</div>
<div class="demo-split" style="height: 120px">
<div slot="left" style="width: 50%;text-align: center;float: left">
<template v-if="addEntityData.photo != null && addEntityData.photo !='' ">
<img style="width: 80px;height: 96px;border: 1px solid #EEEEEE;margin:0 15px" :src="addEntityData.photo" alt=""/>
<div style="width: 100%;text-align: center">身份证照</div>
</template>
<template v-if="addEntityData.authphoto != null && addEntityData.authphoto !='' ">
<img style="width: 80px;height: 96px;border: 1px solid #EEEEEE;margin:0 15px" :src="addEntityData.authphoto" alt=""/>
<div style="width: 100%;text-align: center">认证照片</div>
</template>
</div>
<div slot="right" style="width: 50%;text-align: center;float: left">
<template v-if="addEntityData.personphoto != null && addEntityData.personphoto !='' ">
<img style="width: 80px;height: 96px;border: 1px solid #EEEEEE;margin:0 15px" :src="addEntityData.personphoto" alt=""/>
<div style="width: 100%;text-align: center">近照</div>
</template>
</div>
</div>
<div class="demo-split " style="height: 300px;font-size: 16px;padding-top: 20px">
<div slot="left" class="demo-split-pane pesonMsg" style="width: 50%;float: left;">
<div >姓名：<span>{{addEntityData.name}}</span></div>
<div >民族：<span>{{addEntityData.nation}}</span></div>
<div >手机品牌：<span>{{addEntityData.brand}}</span></div>
<div >手机号码：<span>{{addEntityData.tel}}</span></div>
<div >实名认证时间：<span>{{addEntityData.authtime}}</span></div>
<div >IMSI：<span>{{addEntityData.imsi}}</span></div>
<div >IDFA：<span>{{addEntityData.idfa}}</span></div>
<template v-if="addEntityData.roomnumber">
<div >房间号：<span>{{addEntityData.roomnumber}}</span></div>
</template>
</div>
<div slot="right" class="demo-split-pane pesonMsg" style="width: 50%;float: left">
<div >性别:
<template v-if="addEntityData.sex === 1">
男
</template>
<template v-else>
女
</template>
</div>
<div >出生时间：<span>{{addEntityData.birth}}</span></div>
<div >地址：<span>{{addEntityData.address}}</span></div>
<div >手机型号：<span>{{addEntityData.model}}</span></div>
<div >身份证号：<span>{{addEntityData.idcard}}</span></div>
<div >MAC：<span>{{addEntityData.mac}}</span></div>
<div >IMEI：<span>{{addEntityData.imei}}</span></div>
</div>
</div>
<span slot="footer" class="dialog-footer">
</span>
</template>
<!--<el-button @click="comfirm()">取 消</el-button>-->
<!--<el-button type="primary" @click="comfirm()">确 定</el-button>-->
</el-dialog>
</div>
</div>
</template>
<script>
export default {
name: 'person',
data () {
return {
split1: 0.5,
split2: 0.5,
list: {
type: Object
},
panelShows: false
};
},
// 子组件内部肯定要去接受父组件传过来的值：props（小道具）来接收
// props: ['lists', 'panelShow'],
props: {
addEntityData: {
type: Array,
default: function () {
return {};
}
}},
created(){
// this.userId = this.route.params.id
console.log(this.lists , " 打印list ");
},
methods: {
handleClose (done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
},
comfirm () {
// console.log(this.panelShow)
// this.panelShow = false
this.$emit('hidePanel');
}
}
};
</script>
扫一扫
889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
