修改初始化

zhaochongyi

2024-09-02 af92a5138042c26b6460bcdbe4746caebc6f0b4b

 frontend/src/views/card/index.vue

@@ -1,11 +1,317 @@
<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:1,
  veLicenseNo:2,
  veLicenseNo2:4,
  vehicleWeight:5,
  validityTime:6,
}
// 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>卡片设置</div>
  <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>
<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>