<!-- * @Description: * @Autor: renchao * @LastEditTime: 2023-09-14 16:37:15 --> <template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> <el-row> <el-col :span="8"> <el-form-item label="发证人姓名"> <el-input v-model="ruleForm.fzrmc" disabled></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="发证时间"> <el-input v-model="ruleForm.fzsj" disabled></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="发证数量"> <el-input v-model="ruleForm.fzsl" disabled></el-input> </el-form-item> </el-col> </el-row> <lb-table :column="tableData.columns" @row-dblclick="handleRowClick" ref="table" @selection-change="handleSelectionChange" :data="tableData.data" :pagination="false" :calcHeight="300"> </lb-table> <el-row> <el-col :span="3"> <el-form-item label="身份证读卡器"> <el-button type="text" icon="el-icon-tickets" @click="readClick">读取</el-button> </el-form-item> </el-col> <el-col :span="5"> <el-form-item label="领证人" prop="lzrxm" label-width="70px"> <el-input v-model="ruleForm.lzrxm"></el-input> </el-form-item> </el-col> <el-col :span="5"> <el-form-item label="证件类型" prop="lzrzjlb" label-width="80px"> <el-select v-model="ruleForm.lzrzjlb" filterable clearable placeholder="请选择"> <el-option v-for="item in lzrzjlbData" :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="证件号" prop="lzrzjh" label-width="70px"> <el-input v-model="ruleForm.lzrzjh"></el-input> </el-form-item> </el-col> <el-col :span="5"> <el-form-item label="领证人电话" prop="lzrdh"> <el-input v-model="ruleForm.lzrdh"></el-input> </el-form-item> </el-col> </el-row> <el-form-item class="text-center"> <el-button @click="$popupCacel">取消</el-button> <el-button type="primary" @click="handleSubmit">确定</el-button> </el-form-item> </el-form> </template> <script> import Vue from 'vue' import store from '@/store/index.js' import table from "@/utils/mixin/table"; import { getIdCardInfo } from '@/utils/operation.js' import { getUnclaimedBdcqz, issueCertificate, getBdcqzQlr } from "@/api/bdcqz.js"; import { datas } from "../../javascript/fzxxdata"; export default { props: { formData: { type: Object, default: () => { return {} } } }, mixins: [table], data () { return { lzrzjlbData: store.getters.dictData['A30'], ruleForm: { fzrmc: '', fzsj: '', fzsl: '', bdcqzList: [], lzrxm: '', lzrzjlb: '', lzrzjh: '', lzrdh: '' }, rules: { lzrxm: [ { required: true, message: '请输入领证人', trigger: 'blur' } ], lzrzjlb: [ { required: true, message: '请选择证件类型', trigger: 'change' } ], lzrzjh: [ { required: true, message: '请输入证件号', trigger: 'blur' } ], lzrdh: [ { required: true, message: '请输入电话号码', trigger: 'blur' } ] }, tableData: { total: 0, columns: datas.columns().lzgrid, data: [] } } }, mounted () { this.$nextTick(() => { this.loadGrid() }) }, methods: { /** * @description: 身份证打卡器 * @author: renchao */ readClick () { getIdCardInfo().then(res => { if (res.data.code == 0) { let data = res.data.IDCardInfo this.ruleForm.lzrxm = data.name this.ruleForm.lzrzjlb = '1' this.ruleForm.lzrzjh = data.cardID this.$message({ message: '读取成功!', type: 'success' }) } else { this.$message({ message: res.data.message, type: 'warning' }) } }) }, /** * @description: 列表初始化 * @author: renchao */ loadGrid () { let that = this getUnclaimedBdcqz({ bsmSlsq: Vue.prototype.$currentRoute.query.bsmSlsq }).then(res => { if (res.code === 200) { this.tableData.data = res.result.list; this.$nextTick(() => { this.tableData.data.forEach(item => { that.$refs.table.toggleRowSelection(item) }) }) this.ruleForm.fzrmc = res.result.fzrmc this.ruleForm.fzsj = res.result.fzsj this.ruleForm.fzsl = res.result.fzsl this.ruleForm.bdcqzList = res.result.list; res.result.list.length && this.getQlr(res.result.list[0].bsmBdcqz) } }) }, /** * @description: 获取权利人信息 * @author: renchao */ getQlr (bsmBdcqz) { getBdcqzQlr(bsmBdcqz).then(res => { if (res.code === 200) { this.ruleForm.lzrxm = res.result.qlrmc; this.ruleForm.lzrzjlb = res.result.zjzl; this.ruleForm.lzrzjh = res.result.zjh; this.ruleForm.lzrdh = res.result.dh; } }) }, /** * @description: handleSelectionChange * @param {*} val * @author: renchao */ handleSelectionChange (val) { this.ruleForm.bdcqzList = val }, /** * @description: handleRowClick * @param {*} row * @author: renchao */ handleRowClick (row) { this.$refs.table.toggleRowSelection(row) }, /** * @description: handleSubmit * @author: renchao */ handleSubmit () { this.$refs.ruleForm.validate(valid => { if (valid) { issueCertificate(this.ruleForm).then(res => { if (res.code == 200) { this.$message.success('保存成功'); //刷新列表 store.dispatch('user/reWorkFresh', true) this.$popupCacel() } else { this.$message.error(res.message) } }) } else { this.$message.error("请填写领取人信息!") return false; } }) } } } </script> <style scoped lang="scss"> @import "~@/styles/mixin.scss"; </style>