优化

src/views/construction-person/entry-and-exit-manage/person-entry/add-or-edit-form.vue

@@ -3,7 +3,7 @@
     <div>
         <el-form
             label-width="140px"
-            ref="idCardInfoFormRef"
+            ref="idCardReaderFormRef"
             :model="idCardReaderForm"
             :rules="idCardReaderFormRules"
         >
@@ -15,20 +15,33 @@
                     >
                         <el-input
                             clearable
+                            style="width: 90%"
                             placeholder="请输入身份证读卡器地址"
                             v-model="idCardReaderForm.idCardReaderAddress"
                         />
+
+                        <span class="tip-text">
+                            {{ isConnected ? '已连接' : '未连接' }}
+                        </span>
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
                     <el-form-item>
-                        <el-button size="medium" type="primary" plain>
+                        <el-button
-                            建立连接
+                            plain
+                            size="medium"
+                            type="primary"
+                            @click="onHandleConnect"
+                        >
+                            {{ isConnected ? '断开连接' : '建立连接' }}
                         </el-button>
-                        <el-button size="medium" type="primary" plain>
+
-                            断开连接
+                        <el-button
-                        </el-button>
+                            plain
-                        <el-button size="medium" type="primary" plain>
+                            size="medium"
+                            type="primary"
+                            @click="onHandleDownloadDriver"
+                        >
                             下载驱动
                         </el-button>
                     </el-form-item>
@@ -932,6 +945,7 @@ export default {
             editUploadFileList: [], // 编辑时已上传的文件列表
             isEditContract: false, // 是否是编辑状态
             webSocket: null, // websocket连接
+            isConnected: false, // 是否连接成功
         }
     },
     methods: {
@@ -1448,24 +1462,80 @@ export default {
             )
             const _this = this
             this.webSocket.onopen = function (evt) {
-                console.log('建立连接成功', evt)
+                console.log('连接成功', evt)
-
+                _this.isConnected = true
                 _this.webSocket.send(
                     '{"module":"idcard","function":"beginreadcard","parameter":""}',
                 )
             }
             this.webSocket.onclose = function (evt) {
                 console.log('断开连接', evt)
+                _this.isConnected = false
             }
             this.webSocket.onmessage = function (evt) {
-                console.log('收到消息', evt)
+                const message = JSON.parse(evt.data)
+                console.log('收到消息', message)
+                if (message.Certificate) {
+                    const {
+                        Sex,
+                        Name,
+                        Nation,
+                        Address,
+                        Birthday,
+                        IDIssued,
+                        IDNumber,
+                        ValidDate,
+                        IssuedData,
+                    } = message.Certificate
+
+                    _this.idCardInfoForm.sex = Sex
+                    _this.idCardInfoForm.name = Name
+                    _this.idCardInfoForm.nation = Nation
+                    _this.idCardInfoForm.address = Address
+                    _this.idCardInfoForm.idNumber = IDNumber
+                    _this.idCardInfoForm.issuingAuthority = IDIssued
+                    _this.idCardInfoForm.endTime = _this.initDate(ValidDate)
+                    _this.idCardInfoForm.birthday = _this.initDate(Birthday)
+                    _this.idCardInfoForm.startTime = _this.initDate(IssuedData)
+                }
             }
             this.webSocket.onerror = function (evt) {
-                console.log('错误', evt)
+                console.log('连接错误', evt)
+                _this.$modal.msgError(
+                    '连接身份证读卡器失败，请下载驱动并安装后尝试',
+                )
+                _this.isConnected = false
             }
         },
 
-        onOpen(message) {},
+        // 处理日期格式
+        initDate(date) {
+            return (
+                date.slice(0, 4) +
+                '-' +
+                date.slice(4, 6) +
+                '-' +
+                date.slice(6, 8)
+            )
+        },
+
+        // 处理连接身份证读卡器
+        onHandleConnect() {
+            this.$refs.idCardReaderFormRef.validate((valid) => {
+                if (valid) {
+                    if (this.isConnected) {
+                        this.closeWebSocket()
+                    } else {
+                        this.createWebSocket()
+                    }
+                }
+            })
+        },
+
+        // 处理下载身份证读卡器驱动
+        onHandleDownloadDriver() {
+            window.open(window.origin + '/ZKIDROnline-Driven.zip')
+        },
 
         // 断开websocket连接
         closeWebSocket() {