<!--
* @Author: yangwei
* @Date: 2023-09-01 10:39:03
* @LastEditors: yangwei
* @LastEditTime: 2023-09-12 15:12:09
* @FilePath: \bdcdj-web\src\views\sjgx\gbmhlgxsjgx\gbmhlgxsjgx.vue
* @Description:
*
* Copyright (c) 2023 by yangwei, All Rights Reserved.
-->
<template>
<div class="from-clues">
<div class="from-clues-header">
<el-form
:model="queryForm"
ref="queryForm"
@submit.native.prevent
label-width="100px"
>
<el-row>
<el-col :span="5">
<el-form-item label="身份证号">
<el-input
placeholder="身份证号"
v-model="queryForm.gmsfhm"
clearable
class="width100"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="姓名">
<el-input
placeholder="姓名"
v-model="queryForm.xm"
clearable
class="width100"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="证件种类">
<el-select
v-model="queryForm.qllx"
class="width100"
filterable
clearable
placeholder="证件种类"
>
<el-option
v-for="item in dictData['A30']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="不动产单元号">
<el-input
placeholder="不动产单元号"
v-model="queryForm.bdcdyh"
clearable
class="width100"
>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="from-clues-content">
<div
v-for="item in searchType"
:key="item.name"
@click="openDialog(item)"
class="search-type"
>
<div
:style="{
backgroundColor: 'rgba(' + item.bgColor + ',0.12)',
border: '1px solid ' + 'rgba(' + item.bgColor + ',0.3)',
'--hover-color': 'rgba(' + item.bgColor + ',1)'
}"
>
<img :src="item.svg" alt="" />
</div>
<p>{{ item.interfaceDescription }}</p>
</div>
</div>
<el-dialog
:close-on-click-modal="false"
:title="dialogTitle"
:visible.sync="dialogVisible"
custom-class="insetDialog"
append-to-body
width="50%"
>
<component :is="dialogComp" v-if="dialogVisible" :condition="queryForm" />
<div class="text-center pt-10 pb-20">
<el-button @click="dialogVisible = false">关 闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { getSysInterfaceList } from "@/api/ptjk.js";
export default {
name: "BdcdjWebGbmhlgxsjgx",
data() {
return {
queryForm: {},
searchType: [
{
name: "身份核查",
bgColor: "92, 149, 229",
comp: "sfhc",
svg: require("./images/sfhc.svg"),
},
{
name: "婚姻登记信息核验",
bgColor: "221, 138, 92",
comp: "hydjxxhy",
svg: require("./images/hydjxxhy.svg"),
},
{
name: "金融许可查询",
bgColor: "61, 164, 131",
comp: "jrxkcx",
svg: require("./images/jrxkcx.svg"),
},
{
name: "企业基本信息查询",
bgColor: "221, 138, 92",
comp: "qyjbxxcx",
svg: require("./images/qyjbxxcx.svg"),
},
{
name: "企业基本信息验证",
bgColor: "92, 181, 204",
comp: "qyjbxxyz",
svg: require("./images/qyjbxxyz.svg"),
},
{
name: "地域信息查询",
bgColor: "92, 149, 229",
comp: "dyxxcx",
svg: require("./images/dyxxcx.svg"),
},
{
name: "个体工商户基本信息查询",
bgColor: "61, 164, 131",
comp: "gtgshjbxxcx",
svg: require("./images/gtgshjbxxcx.svg"),
},
{
name: "个体工商户基本信息验证",
bgColor: "141, 100, 197",
comp: "gtgshjbxxyz",
svg: require("./images/gtgshjbxxyz.svg"),
},
{
name: "中编办机构信息查询",
bgColor: "141, 100, 197",
comp: "zbbjgxxcx",
svg: require("./images/zbbjgxxcx.svg"),
},
{
name: "机构信息查询",
bgColor: "92, 149, 229",
comp: "jgxxcx",
svg: require("./images/jgxxcx.svg"),
},
{
name: "不动产登记信息查询",
bgColor: "231, 128, 118",
comp: "bdcdjxxcx",
svg: require("./images/bdcdjxxcx.svg"),
},
{
name: "电子营业执照查询",
bgColor: "92, 149, 229",
comp: "dzyyzzcx",
svg: require("./images/dzyyzzcx.svg"),
},
{
name: "公证书信息查询",
bgColor: "221, 138, 92",
comp: "gzsxxcx",
svg: require("./images/gzsxxcx.svg"),
},
{
name: "最高法部门",
bgColor: "92, 181, 204",
comp: "zgfbm",
svg: require("./images/zgfbm.svg"),
},
{
name: "未知",
bgColor: "109, 114, 120",
comp: "",
svg: require("./images/unknow.svg"),
},
],
dialogVisible: false,
dialogTitle: "",
dialogComp: null,
};
},
mounted() {
getSysInterfaceList({ interfaceType: "4",pageSize:100 }).then((res) => {
if (res.code == 200) {
res.result.records.forEach(i=>{
let a = this.searchType.filter(item => i.interfaceService == item.name)
if (a.length) {
i.bgColor = a[0].bgColor
i.svg = a[0].svg
i.comp = a[0].comp
}else{
i.bgColor = '109, 114, 120'
i.svg = require("./images/unknow.svg")
i.comp = ''
}
})
this.searchType = res.result.records
}
});
},
methods: {
/**
* @description: openDialog 打开弹框窗口
* @param {*} item
* @author: renchao
*/
openDialog(item) {
this.dialogTitle = item.interfaceDescription;
this.dialogComp = (r) =>
require.ensure([], () => r(require(`./components/${item.comp}.vue`)));
item.comp && (this.dialogVisible = true);
},
},
computed: {
...mapGetters(["dictData"]),
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";
.from-clues-content {
height: calc(100% - 70px);
}
.search-type {
float: left;
width: 12.5%;
text-align: center;
height: 160px;
box-sizing: border-box;
padding: 32px 0;
> div {
width: 70px;
height: 70px;
border-radius: 4px;
margin: 0 auto;
cursor: pointer;
&:hover{
border-color: var(--hover-color)!important;
}
i {
text-align: center;
line-height: 60px;
font-size: 26px;
color: #fff;
}
img {
display: inline-block;
width: 34px;
height: 34px;
margin: 17px 0;
}
}
p {
margin-top: 20px;
cursor: pointer;
font-size: 16px;
color: #31333c;
}
}
/deep/.el-dialog__header {
text-align: center;
}
/deep/ .check-result {
min-height: 200px;
box-sizing: border-box;
padding: 20px 0 0;
}
.pb-20 {
padding-bottom: 20px;
/deep/ .el-button {
cursor: pointer;
}
}
</style>