Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
1289181c by renchao@pashanhoo.com
Options

style:补录权利人信息模块功能的完善

1 parent c0867727
Inline Side-by-side
Showing 4 changed files with 552 additions and 163 deletions
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-05-17 10:39:47
* @LastEditTime: 2023-09-21 16:03:36
-->
<template>
<dialogBox
title="权利人信息"
width="60%"
width="75%"
isMain
v-model="myValue"
:isFullscreen="false"
@submitForm="submitForm"
@closeDialog="closeDialog"
:isButton="showButton"
>
:isButton="isShow">
<el-tabs v-model="activeName" @tab-click="handleClick" class="from-clues-header">
<el-tab-pane label="基本信息" name="1"></el-tab-pane>
<el-tab-pane label="企业信息" v-if="showButton" name="2"></el-tab-pane>
<el-tab-pane label="银行机构" v-if="showButton" name="3"></el-tab-pane>
</el-tabs>
<el-form
:model="ruleForm"
v-if="activeName==1"
:rules="rules"
ref="ruleForm"
label-width="120px"
>
label-width="120px">
<el-form-item label="身份证读卡器">
<el-button type="text" icon="el-icon-tickets" :disabled="!showButton" @click="readClick">读取</el-button>
<el-button type="primary" v-if="isBz" @click="handleFilings">信息备案</el-button>
</el-form-item>
<el-row>
<el-col :span="8">
<el-form-item label="权利人类型" prop="qlrlx">
......@@ -28,56 +37,51 @@
v-model="ruleForm.qlrlx"
class="width100"
:disabled="!showButton"
placeholder="请选择"
>
placeholder="请选择">
<el-option
v-for="item in dictData['A36']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="姓名/名称" prop="qlrmc">
<el-input
<el-input
v-model="ruleForm.qlrmc"
maxlegth="15"
:disabled="!showButton"
></el-input>
:disabled="!showButton"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="证件种类" prop="zjzl">
<el-select
<el-select
clearable
v-model="ruleForm.zjzl"
:disabled="!showButton"
class="width100"
placeholder="请选择"
>
@change="handleZjzl"
placeholder="请选择">
<el-option
v-for="item in dictData['A30']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-col :span="8">
<el-form-item label="证件号" prop="zjh">
<el-input
v-model="ruleForm.zjh"
:disabled="!showButton"
maxlength="18"
oninput="this.value=this.value.replace(/[^\X0-9]/g,'')"
></el-input>
oninput="this.value=this.value.replace(/[^\X0-9]/g,'')"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
......@@ -86,8 +90,7 @@
v-model="ruleForm.dh"
:disabled="!showButton"
maxlength="11"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
oninput="value=value.replace(/[^\d]/g,'')"></el-input>
</el-form-item>
</el-col>
......@@ -96,8 +99,7 @@
<el-input
v-model="ruleForm.qlbl"
maxlength="32"
:disabled="!showButton || this.ruleForm.gyfs == 1"
></el-input>
:disabled="!showButton || this.ruleForm.gyfs == 1"></el-input>
</el-form-item>
</el-col>
</el-row>
......@@ -107,8 +109,7 @@
<el-input
v-model="ruleForm.frmc"
maxlength="32"
:disabled="!showButton"
></el-input>
:disabled="!showButton"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
......@@ -116,8 +117,7 @@
<el-input
v-model="ruleForm.gj"
maxlength="3"
:disabled="!showButton"
></el-input>
:disabled="!showButton"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
......@@ -125,8 +125,7 @@
<el-input
v-model="ruleForm.hjszss"
maxlength="3"
:disabled="!showButton"
></el-input>
:disabled="!showButton"></el-input>
</el-form-item>
</el-col>
</el-row>
......@@ -137,8 +136,7 @@
<el-input
v-model="ruleForm.dz"
maxlength="100"
:disabled="!showButton"
></el-input>
:disabled="!showButton"></el-input>
</el-form-item>
</el-col>
</el-row>
......@@ -149,8 +147,7 @@
<el-input
v-model="ruleForm.fzjg"
maxlength="10"
:disabled="!showButton"
></el-input>
:disabled="!showButton"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
......@@ -158,8 +155,7 @@
<el-input
v-model="ruleForm.dzyj"
:disabled="!showButton"
maxlength="25"
></el-input>
maxlength="25"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
......@@ -168,8 +164,7 @@
v-model.number="ruleForm.yb"
:disabled="!showButton"
maxlength="6"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
oninput="value=value.replace(/[^\d]/g,'')"></el-input>
</el-form-item>
</el-col>
</el-row>
......@@ -180,8 +175,7 @@
<el-input
v-model="ruleForm.gzdw"
maxlength="32"
:disabled="!showButton"
></el-input>
:disabled="!showButton"></el-input>
</el-form-item>
</el-col>
<el-col :span="16">
......@@ -189,8 +183,7 @@
<el-input
v-model="ruleForm.dlrjgmc"
maxlength="32"
:disabled="!showButton"
></el-input>
:disabled="!showButton"></el-input>
</el-form-item>
</el-col>
</el-row>
......@@ -202,8 +195,7 @@
v-model="ruleForm.dlrdhhm"
:disabled="!showButton"
maxlength="11"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
oninput="value=value.replace(/[^\d]/g,'')"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
......@@ -211,8 +203,7 @@
<el-input
v-model="ruleForm.dlrxm"
maxlength="15"
:disabled="!showButton"
></el-input>
:disabled="!showButton"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
......@@ -222,14 +213,12 @@
v-model="ruleForm.dlrzjlx"
:disabled="!showButton"
class="width100"
placeholder="请选择"
>
placeholder="请选择">
<el-option
v-for="item in dictData['A30']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</el-form-item>
......@@ -243,14 +232,12 @@
v-model="ruleForm.xb"
:disabled="!showButton"
class="width100"
placeholder="请选择"
>
placeholder="请选择">
<el-option
v-for="item in dictData['A43']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
:value="item.dcode">
</el-option>
</el-select>
</el-form-item>
......@@ -260,111 +247,408 @@
<el-input
v-model="ruleForm.dlrzjh"
:disabled="!showButton"
maxlength="18"
></el-input>
maxlength="18"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div v-if="activeName==2" class="padding10">
<el-form :model="queryFormQY" label-width="80px">
<el-row>
<el-col :span="8">
<el-form-item label="姓名/名称">
<el-input placeholder="姓名/名称" v-model="queryFormQY.qymc" clearable class="width100">
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="证件号">
<el-input placeholder="证件号" v-model="queryFormQY.zjh" clearable class="width100">
</el-input>
</el-form-item>
</el-col>
<el-col :span="8" class="btnColRight">
<el-form-item>
<el-button type="primary" @click="handleSearchQY">查询</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table :data="tableDataQy.data" border v-Loading="loading" :height="426.8">
<el-table-column label="序号" type="index" width="50" align="center">
<template slot-scope="scope">
{{(pageData.currentPage - 1) * pageData.pageSize + scope.$index + 1}}
</template>
</el-table-column>
<el-table-column v-for="item in tableDataQy.columns" :key="item.index" :width="item.width" :prop="item.prop" :label="item.label" align="center">
</el-table-column>
<el-table-column label="操作" width="50">
<template slot-scope="scope">
<el-button type="text" @click="handleSelect(scope.row)">使用</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next,total" :total="tableDataQy.total"
@current-change="handleQYCurrentChange"></el-pagination>
</div>
<div v-if="activeName==3" class="padding10">
<el-form :model="queryFormYH" label-width="80px">
<el-row>
<el-col :span="8">
<el-form-item label="姓名/名称">
<el-input placeholder="姓名/名称" v-model="queryFormYH.qymc" clearable class="width100">
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="证件号">
<el-input placeholder="证件号" v-model="queryFormYH.zjh" clearable class="width100">
</el-input>
</el-form-item>
</el-col>
<el-col :span="8" class="btnColRight">
<el-form-item>
<el-button type="primary" @click="handleSearchYH">查询</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table :data="tableDataYh.data" border v-Loading="loading" :height="426.8">
<el-table-column label="序号" type="index" width="50" align="center">
<template slot-scope="scope">
{{(pageData.currentPage - 1) * pageData.pageSize + scope.$index + 1}}
</template>
</el-table-column>
<el-table-column v-for="item in tableDataYh.columns" :key="item.index" :prop="item.prop" :label="item.label" align="center">
</el-table-column>
<el-table-column label="操作" width="50">
<template slot-scope="scope">
<el-button type="text" @click="handleSelect(scope.row)">使用</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next,total" :total="tableDataYh.total"
@current-change="handleYHCurrentChange"></el-pagination>
</div>
</dialogBox>
</template>
<script>
import { mapGetters } from "vuex";
export default {
props: {
value: { type: Boolean, default: false },
details: { type: Object, default: {} },
showButton: { type: Boolean, default: false },
},
computed: {
...mapGetters(["dictData"]),
},
data() {
return {
myValue: this.value,
ruleForm: {
bsmBdcqz: "",
bsmQlr: "",
bsmQlxx: "",
bz: "",
cbfbm: "",
dh: "",
dlrdhhm: "",
dlrjgmc: "",
dlrxm: "",
dlrzjh: "",
dlrzjlx: "",
dz: "",
dzyj: "",
fbfbm: "",
frdh: "",
frmc: "",
fzjg: "",
gj: "",
gzdw: "",
hjszss: "",
qlrlx: "",
qlrmc: "",
qlrtz: "",
sfczr: "",
sshy: "",
sxh: 0,
xb: "",
yb: "",
zjh: "",
zjzl: "",
},
rules: {
qlrlx: [{ required: true, message: "权利人类型", trigger: "change" }],
qlrmc: [{ required: true, message: "姓名/名称", trigger: "blur" }],
zjzl: [{ required: true, message: "证件种类", trigger: "change" }],
zjh: [{ required: true, message: "证件号", trigger: "blur" }],
},
};
},
watch: {
value(val) {
this.myValue = _.cloneDeep(val);
import { mapGetters } from "vuex";
import store from '@/store/index.js'
import { replace } from "@/api/company.js"
import { getUuid } from "@/utils/operation.js"
import { getIdCardInfo } from '@/utils/operation.js'
import { queryQyByPage, queryYhByPage, addQy } from "@/api/xxba.js";
import { dataYh, dataQy, sendThis } from "./addQlrData";
export default {
props: {
value: { type: Boolean, default: false },
details: { type: Object, default: {} },
showButton: { type: Boolean, default: false },
},
details: {
handler: function (val, oldVal) {
this.ruleForm = val;
},
deep: true,
computed: {
...mapGetters(["dictData"]),
},
mounted () {
sendThis(this);
},
data () {
return {
isShow: false,
isBz: false,
activeName: '1',
loading: false,
myValue: this.value,
ruleForm: {
bsmBdcqz: "",
bsmQlr: "",
bsmQlxx: "",
bz: "",
cbfbm: "",
dh: "",
dlrdhhm: "",
dlrjgmc: "",
dlrxm: "",
dlrzjh: "",
dlrzjlx: "",
dz: "",
dzyj: "",
fbfbm: "",
frdh: "",
frmc: "",
fzjg: "",
gj: "",
gzdw: "",
hjszss: "",
qlrlx: "",
qlrmc: "",
qlrtz: "",
sfczr: "",
sshy: "",
sxh: 0,
xb: "",
yb: "",
zjh: "",
zjzl: "",
},
rules: {
qlrlx: [{ required: true, message: "权利人类型", trigger: "change" }],
qlrmc: [{ required: true, message: "姓名/名称", trigger: "blur" }],
zjzl: [{ required: true, message: "证件种类", trigger: "change" }],
zjh: [{ required: true, message: "证件号", trigger: "blur" }],
},
pageData: {
currentPage: 1,
pageSize: 8
},
// 企业
queryFormQY: {
qymc: "",
zjh: ""
},
tableDataQy: {
total: 0,
columns: dataQy.columns(),
data: [],
},
// 银行
queryFormYH: {
qymc: "",
zjh: ""
},
tableDataYh: {
total: 0,
columns: dataYh.columns(),
data: [
]
}
}
},
},
methods: {
/**
* @description: closeDialog
* @author: renchao
*/
closeDialog() {
this.$emit("input", false);
this.$refs["ruleForm"].resetFields();
watch: {
value (val) {
this.myValue = _.cloneDeep(val)
if (val && Object.keys(this.details).length > 0) {
this.activeName = '1'
}
this.isShow = this.showButton
},
details: {
handler: function (val, oldVal) {
this.ruleForm = val;
},
deep: true
}
},
/**
* @description: submitForm
* @author: renchao
*/
submitForm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.$emit("input", false);
this.$emit("updateDetail", _.cloneDeep(this.ruleForm));
methods: {
handleZjzl (val) {
if (['6', '7', '8'].includes(val)) {
this.isBz = true
} else {
this.isBz = false
}
},
/**
* @description: 信息备案
* @author: renchao
*/
handleFilings () {
this.ruleForm.qymc = this.ruleForm.qlrmc
this.ruleForm.dwdz = this.ruleForm.dz
addQy(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message.success('备案成功')
} else {
this.$message.error(res.message);
}
})
},
/**
* @description: handleClick
* @author: renchao
*/
handleClick (event, tab) {
if (this.activeName != 1) {
this.isShow = false
} else {
return false;
this.isShow = true
}
this.pageData.currentPage = 1
if (this.activeName == 2) {
this.handleSearchQY()
} else {
this.handleSearchYH()
}
},
/**
* @description:企业查询
* @param {*} val
* @param {*} code
* @author: renchao
*/
dicStatus (val, code) {
let data = store.getters.dictData[code],
name = '暂无'
if (data) {
data.map((item) => {
if (item.dcode == val) {
name = item.dname
}
})
return name
}
});
},
/**
* @description: 企业信息搜索
* @author: renchao
*/
handleSearchQY () {
let data = { ...this.queryFormQY, ...this.pageData }
this.tableDataQy.data = []
queryQyByPage(data).then((res) => {
if (res.code === 200) {
let { total, records } = res.result;
this.tableDataQy.total = total;
this.tableDataQy.data = records;
this.tableDataQy.data.forEach(item => {
item.zjzlMc = this.dicStatus(item.zjzl, 'A30')
item.qlrmc = item.qymc
item.dz = item.dwdz
item.id = getUuid(16)
})
}
})
},
/**
* @description: handleQYCurrentChange
* @param {*} val
* @author: renchao
*/
handleQYCurrentChange (val) {
this.pageData.currentPage = val
this.handleSearchQY()
},
/**
* @description: handlesQYSelect
* @param {*} val
* @author: renchao
*/
handleSelect (val) {
let that = this
let bsmSldy = window.currentSelect.bsmSldy ? window.currentSelect.bsmSldy : ''
this.$confirm('是否同步材料信息?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(() => {
replace(val.bsmCompany, this.$route.query.bsmSlsq, bsmSldy).then(res => {
that.$emit("updateDetail", _.cloneDeep(val));
that.$emit("input", false);
if (res.code == 200) {
that.$message({
type: 'success',
message: '同步成功!'
})
} else {
this.$message.error(res.message);
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
})
})
},
/**
* @description: 银行信息搜索
* @author: renchao
*/
handleSearchYH () {
let data = { ...this.queryFormYH, ...this.pageData }
this.tableDataYh.data = []
queryYhByPage(data).then((res) => {
if (res.code === 200) {
let { total, records } = res.result;
this.tableDataYh.total = total;
this.tableDataYh.data = records;
this.tableDataYh.data.forEach(item => {
item.zjzlMc = this.dicStatus(item.zjzl, 'A30')
item.qlrmc = item.qymc
item.dz = item.dwdz
item.id = getUuid(16)
})
}
})
},
/**
* @description: handleYHCurrentChange
* @param {*} val
* @author: renchao
*/
handleYHCurrentChange (val) {
this.pageData.currentPage = val
this.handleSearchQY()
},
/**
* @description: 身份证打卡器
* @author: renchao
*/
readClick () {
getIdCardInfo().then(res => {
if (res.data.code == 0) {
let data = res.data.IDCardInfo
this.ruleForm.qlrmc = data.name
this.ruleForm.zjzl = '1'
this.ruleForm.zjh = data.cardID
this.ruleForm.xb = data.sexCode
this.ruleForm.dz = data.address
this.ruleForm.fzjg = data.issueOrgan
this.$message({
message: '读取成功！',
type: 'success'
})
} else {
this.$message({
message: res.data.message,
type: 'warning'
})
}
})
},
/**
* @description: closeDialog
* @author: renchao
*/
closeDialog () {
this.$emit("input", false);
this.$refs["ruleForm"].resetFields();
},
/**
* @description: submitForm
* @author: renchao
*/
submitForm () {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.$emit("input", false);
this.$emit("updateDetail", _.cloneDeep(this.ruleForm));
} else {
return false;
}
});
},
},
},
};
};
</script>
<style scoped lang="scss">
@import "~@/styles/dialogBoxheader.scss";
.submit-button {
text-align: center;
height: 52px;
padding-top: 10px;
background-color: #fff;
}
@import "~@/styles/dialogBoxheader.scss";
.submit-button {
text-align: center;
height: 52px;
padding-top: 10px;
background-color: #fff;
}
.padding10 {
padding-bottom: 10px;
}
</style>
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-21 15:45:27
*/
import filter from '@/utils/filter.js'
let vm = null
const sendThis = (_this) => {
vm = _this
}
class data1 extends filter {
constructor() {
super()
}
columns () {
return [
{
prop: "qlrmc",
label: "姓名/名称",
},
{
prop: "zjzlMc",
label: "证件种类"
},
{
prop: "zjh",
label: "证件号",
},
{
prop: "frmc",
label: "法人名称",
},
{
prop: "dwdz",
label: "地址",
},
{
prop: "dh",
label: "联系电话",
}
]
}
}
class data2 extends filter {
constructor() {
super()
}
columns () {
return [
{
prop: "qlrmc",
label: "姓名/名称",
},
{
prop: "zjzlMc",
label: "证件种类",
},
{
prop: "zjh",
label: "证件号",
},
{
prop: "frmc",
label: "法人名称",
},
{
prop: "dwdz",
label: "地址",
},
{
prop: "dh",
label: "联系电话",
},
]
}
}
let dataYh = new data1()
let dataQy = new data2()
export {
dataYh,
dataQy,
sendThis
}
<!--
* @Description: workFrame左侧菜单列表-普通
* @Autor: renchao
* @LastEditTime: 2023-07-17 16:16:13
* @LastEditTime: 2023-09-21 16:02:05
-->
<template>
<div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }">
......@@ -171,7 +171,6 @@
this.$parent.loadComponent(this.currentSelectProps, data);
this.$parent.tabset();
},
//申请单元点击事件
/**
* @description: 申请单元点击事件
* @param {*} index
......@@ -180,6 +179,7 @@
unitClick (index) {
this.clickindex = index
this.currentSelectProps = this.supplementarylist[index];
window.currentSelect = this.supplementarylist[index]
this.$emit("getCurrentSelectProps", this.currentSelectProps);
},
/**
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-01 13:30:54
* @LastEditTime: 2023-09-21 16:02:53
-->
<template>
<div>
......@@ -21,8 +21,9 @@
</div>
</template>
<script>
import addQlr from "./dialog/addQlr.vue";
import { mapGetters } from "vuex";
import addQlr from "./dialog/addQlr.vue";
import { getIdCardInfo } from '@/utils/operation.js'
export default {
components: {
addQlr,
......@@ -102,7 +103,7 @@
icon="el-icon-tickets"
disabled={!this.ableOperation}
onClick={() => {
this.readClick(scope);
this.readClick(scope.row)
}}
>
读取
......@@ -178,12 +179,12 @@
this.$nextTick(() => {
if (val.length == 0 || !val) {
that.tableDataList = _.cloneDeep([
{
qlrmc: "",
dlrzjlx: "",
dlrzjh: "",
fr: "",
},
// {
// qlrmc: "",
// dlrzjlx: "",
// dlrzjh: "",
// fr: "",
// },
]);
} else {
that.tableDataList = _.cloneDeep(val);
......@@ -255,15 +256,32 @@
this.tableDataList.splice(index, 1);
this.$emit("upDateQlrxxList", this.tableDataList);
},
// 身份证读取
/**
* @description: 身份证读取
* @author: renchao
*/
readClick () { },
// 身份证读取按钮禁用
readClick (row) {
getIdCardInfo().then(res => {
if (res.data.code == 0) {
let data = res.data.IDCardInfo
row.qlrmc = data.name
row.zjzl = '1'
row.zjh = data.cardID
row.xb = data.sexCode
row.dz = data.address
row.fzjg = data.issueOrgan
this.$message({
message: '读取成功！',
type: 'success'
})
} else {
this.$message({
message: res.data.message,
type: 'warning'
})
}
})
},
/**
* @description: 身份证读取按钮禁用
* @author: renchao
......