<script setup>
|
import {ipc} from '@/utils/ipcRenderer'
|
import {message} from 'ant-design-vue'
|
import dkqImg from '@/assets/dkq.png'
|
import okImg from '@/assets/ok.png'
|
import { Modal } from 'ant-design-vue';
|
import {useStore} from "@/stores/icrfStore";
|
import router from "@/router";
|
import {createVNode, onBeforeUnmount, reactive, ref} from "vue";
|
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
|
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
const store = useStore();
|
let isCard = ref(false);
|
const formRef = ref(null);
|
|
const setps = [
|
{
|
title: '寻卡',
|
key: 'xk'
|
},
|
{
|
title: '填写数据',
|
key: 'set'
|
},
|
{
|
title: '制卡完成',
|
key:'ok'
|
}
|
]
|
const current = ref(0)
|
|
if (!store.isLJ){
|
Modal.warning({
|
title: '系统提示',
|
content: '读写器设备未连接，请先配置连接后操作！',
|
okText: '立即前往',
|
onOk:()=>{
|
router.push('Communication')
|
}
|
})
|
}
|
|
const validatorValidityTime = async (_rule,value)=>{
|
if (!formState.isValidity && !value){
|
return Promise.reject('不是长期卡时，请选择有效期')
|
}else{
|
return Promise.resolve();
|
}
|
}
|
const formMap ={
|
veCustomsNo:8,
|
veLicenseNo:9,
|
veLicenseNo2:10,
|
vehicleWeight:12,
|
validityTime:13,
|
}
|
// const formMap = [
|
// {key :'veCustomsNo',blockNr: 8},
|
// {key :'veLicenseNo',blockNr: 9},
|
// {key :'veLicenseNo2',blockNr: 10},
|
// {key :'vehicleWeight',blockNr: 12},
|
// {key :'validityTime',blockNr: 13},
|
// ]
|
|
const formState = reactive({
|
veCustomsNo:'',
|
veLicenseNo:'',
|
veLicenseNo2:'',
|
vehicleWeight:'',
|
validityTime:'',
|
isValidity: true
|
})
|
const isRead = ref(false);
|
const rules = {
|
veLicenseNo: [{
|
required: true, message: '请输入车牌号', trigger: 'blur'
|
}],
|
validityTime:[
|
{validator:validatorValidityTime,trigger: 'change'}
|
]
|
}
|
const isValidtyChange = () => {
|
if (formState.isValidity){
|
formState.validityTime =''
|
}
|
}
|
const parseStrEmpty =(str)=>{
|
if (!str || str==='undefined' || str ==='null'){
|
return ""
|
}else{
|
return str;
|
}
|
}
|
const key = 'installCard';
|
const onSubmit = ()=>{
|
formRef.value.validate().then(()=>{
|
ipc.invoke('controller.icrf.connectRfCard').then(res=> {
|
if (res.code === 0) {
|
if (formState.sn !== res.snr){
|
Modal.confirm({
|
title: '系统提示',
|
icon: createVNode(ExclamationCircleOutlined),
|
content:'卡中途被换，是否继续操作',
|
okText:'继续',
|
cancelText:'取消',
|
onOk(){
|
w1();
|
},
|
})
|
}else{
|
w1();
|
}
|
}
|
})
|
})
|
}
|
const w1 = () => {
|
if (isRead.value){
|
Modal.confirm({
|
title: '系统提示',
|
icon: createVNode(ExclamationCircleOutlined),
|
content:'卡里已经写过数据，是否覆盖',
|
okText:'确定',
|
cancelText:'取消',
|
onOk(){
|
wiData();
|
},
|
})
|
}else{
|
wiData();
|
}
|
}
|
const wiData =()=>{
|
|
let validityTime = formState.validityTime;
|
if (formState.isValidity){
|
validityTime= '99999999'
|
}
|
message.loading({content:'信息写入卡中!请稍等...',key:key})
|
Promise.all(
|
Object.keys(formMap).map(key=>{
|
if (key === 'validityTime'){
|
return ipc.invoke('controller.icrf.connectRfWrite',{data:validityTime,addr:formMap[key]})
|
}else{
|
return ipc.invoke('controller.icrf.connectRfWrite',{data:parseStrEmpty(formState[key]),addr:formMap[key]})
|
}
|
})
|
).then(resList=>{
|
console.log(resList)
|
let kk = resList.filter(item => item.code !== 0);
|
if (Array.isArray(kk) && kk.length> 0){
|
ipc.invoke('controller.icrf.connectBeep');
|
message.error({content:'写卡失败！'+kk[0].msg,key,duration:2})
|
}else{
|
ipc.invoke('controller.icrf.connectBeep');
|
current.value = 2;
|
message.success({content: '写入成功！请将卡拿走',key,duration:2});
|
resetForm();
|
}
|
|
})
|
|
}
|
|
|
const resetForm = ()=>{
|
formRef.value.resetFields();
|
isRead.value = false;
|
current.value = 0;
|
}
|
onBeforeUnmount(()=>{
|
})
|
|
const startCard = () => {
|
ipc.invoke('controller.icrf.connectRfCard').then(res=>{
|
if (res.code === 0){
|
formState.sn = res.snr;
|
Promise.all(
|
Object.values(formMap).map(item=>{
|
return ipc.invoke('controller.icrf.connectRfRead',{addr:item});
|
})
|
).then(resList=>{
|
let kk = resList.filter(item => item.code !== 0);
|
if (Array.isArray(kk) && kk.length> 0){
|
// ipc.invoke('controller.icrf.connectBeep',2);
|
message.error({content:'读卡失败！'+kk[0].msg,key,duration:2})
|
}else{
|
isCard.value = true;
|
current.value = 1;
|
resList.forEach((item,index)=>{
|
let key = Object.keys(formMap)[index];
|
let value = item.data;
|
if (key === 'validityTime'){
|
if (!value || value === '99999999'){
|
formState.isValidity = true;
|
}
|
}else{
|
formState[key] = value;
|
}
|
if (key ==='veLicenseNo' ){
|
if(value){
|
isRead.value = true
|
}else{
|
isRead.value = false
|
}
|
|
}
|
})
|
}
|
})
|
|
|
}else{
|
if (res.code === 65510){
|
message.error('未识别或检测到卡片，请将卡片放在读写器上')
|
}else{
|
message.error(res.msg)
|
}
|
}
|
})
|
|
}
|
const goBack = () => {
|
// resetForm();
|
current.value = 0;
|
}
|
|
</script>
|
|
<template>
|
<div class="app-container">
|
<a-steps style="margin-bottom: 10px;" :current="current" :items="setps"></a-steps>
|
<a-empty description="请将卡片放在读写器上" v-if="current === 0" class="emptyImg" :image="dkqImg">
|
<a-button type="primary" @click="startCard">开始制卡</a-button>
|
</a-empty>
|
<div v-else-if="current === 1">
|
<a-alert type="warning" show-icon message="卡片未写入或未操作完成时，请误将卡离开读写器"></a-alert>
|
<a-form ref="formRef" :model="formState" :rules="rules" >
|
<a-card style="margin-top: 10px">
|
<template #title>
|
<Section title="车辆备案信息"></Section>
|
</template>
|
<template #extra>卡片序列号: {{formState.sn}}</template>
|
<a-row :gutter="16">
|
<a-col :span="12">
|
<a-form-item label="车辆海关编号" ref="veCustomsNo" name="veCustomsNo">
|
<a-input v-model:value="formState.veCustomsNo"></a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="车牌号" ref="veLicenseNo" name="veLicenseNo">
|
<a-input v-model:value="formState.veLicenseNo"></a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="境外或粤港澳车牌" ref="veLicenseNo2" name="veLicenseNo2">
|
<a-input v-model:value="formState.veLicenseNo2"></a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="车辆自重" ref="vehicleWeight" name="vehicleWeight">
|
<a-input v-model:value="formState.vehicleWeight">
|
<template #suffix>KG</template>
|
</a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :span="18">
|
<a-form-item label="有效日期" ref="validityTime" name="validityTime">
|
<div style="display: flex;align-items: center;justify-content: space-between">
|
<a-form-item-rest>
|
<a-date-picker valueFormat="YYYYMMDD" :locale="locale" v-model:value="formState.validityTime" placeholder="请选择" :disabled="formState.isValidity" style="width:60%"/>
|
|
</a-form-item-rest>
|
<a-form-item-rest>
|
<a-checkbox v-model:checked="formState.isValidity" @change="isValidtyChange" style="margin-left: 10px;width: 40%">长期</a-checkbox>
|
</a-form-item-rest>
|
</div>
|
</a-form-item>
|
</a-col>
|
<a-col :span="24" style="text-align: center">
|
<a-button type="primary" style="margin-right: 10px;width: 200px" @click="onSubmit">制卡</a-button>
|
<a-button style="width: 200px" @click="resetForm">取消</a-button>
|
</a-col>
|
|
</a-row>
|
|
</a-card>
|
|
</a-form>
|
|
</div>
|
<a-empty description="制卡完成" v-if="current === 2" class="emptyImg" :image="okImg">
|
<a-button type="primary" @click="goBack">返回</a-button>
|
</a-empty>
|
</div>
|
|
|
</template>
|
|
<style scoped lang="less">
|
.app-container {
|
position: relative;
|
min-height: 100%;
|
}
|
|
.emptyImg {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
text-align: center;
|
font-size: 16px;
|
color: #8a919f;
|
font-weight: bold;
|
line-height: 34px;
|
}
|
</style>
|
