Vue-Convert-10-To-34-Example-1

2022-06-23

VUE 前端 10 进制转换为 34 进制 (可以作为参考)

10 进制变为 3 位 34 进制的算法如下（34 进制不包括 i 和 o）

以后遇到进制转换问题，可以参考下述代码

---------定义-----------------------------
// 34 进制的字符串
code34Str: '0123456789ABCDEFGHJKLMNPQRSTUVWXYZ'
// 10进制数
tenNum: 1000
------------计算--------------------------
// 34 进制 个位计算
this.code34Str.substr(tenNum % 34, 1)
// 34 进制 第二位计算
this.code34Str.substr(((tenNum - tenNum % 34)
 / 34) % 34, 1)
// 34 进制 第三位计算
this.code34Str.substr(
(tenNum - 34 * (((tenNum - tenNum % 34) / 34) % 34) - (tenNum % 34)) / (34 * 34), 1)

VUE 完整案例


<template>
   <a-card :bordered="false">
      <div class="table-page-search-wrapper">
         <a-divider style="font-size: 20px;font-weight: bold">日期转换为三位编码</a-divider>
         <a-form layout="inline">
            <a-row>
               <a-col :span="5">
                  <a-form-item label="计算日期">
                     <a-date-picker valeFormat="YYYY-MM-DD" v-model="inputDate" />
                  </a-form-item>
               </a-col>
               <a-col :span="4">
                  <a-button type="primary" @click="tranDateToCode()">转换</a-button>
                  <span style="font-size: 20px;font-weight: bold;color:red">
                     {{ dateCode }}
                  </span>
               </a-col>
               <a-col :span="5">
                  <a-form-item label="启用修改起始日期">
                     <a-switch v-model="enableBaseDate" />
                  </a-form-item>
               </a-col>
               <a-col :span="5">
                  <a-form-item label="起始日期">
                     <a-date-picker valeFormat="YYYY-MM-DD" v-model="baseDate" :disabled="!enableBaseDate" />
                  </a-form-item>
               </a-col>
            </a-row>
         </a-form>
      </div>
   </a-card>
</template>

<script>
import moment from 'moment'

export default {
   data () {
      return {
         // 34位编码
         code34Str: '0123456789ABCDEFGHJKLMNPQRSTUVWXYZ',
         // 基础日期
         baseDate: '',
         // 获得的日期
         inputDate: '',
         // 生成的编码
         dateCode: '',
         // 基础日期修改启用状态
         enableBaseDate: false
      }
   },
   created () {
      this.baseDate = moment('1970-01-01', 'YYYY-MM-DD')
      this.inputDate = moment(new Date(), 'YYYY-MM-DD')
   },
   methods: {
      tranDateToCode () {
         this.dateCode = ''
         var dateCount = ''
         var overCount = 0
         if (!this.inputDate) {
            this.$message.warning('请选择日期！！！')
         } else if (new Date(this.inputDate) < this.baseDate) {
            this.$message.warning('基础日期大于选择日期！！！')
         } else {
            dateCount = parseInt((new Date(this.inputDate) - this.baseDate) / 86400000)
            while (true) {
               if (dateCount > 39303) {
                  dateCount = dateCount - 39304
                  overCount = overCount + 1
               } else {
                  break
               }
            }
            if (overCount > 0) {
               // 实时刷新 页面的数据(主要解决 v-model 绑定延时)
               this.$set(this.baseDate, this.baseDate.add(39304 * overCount, 'days'))
            }
            this.dateCode = this.code34Str.substr(
            (dateCount - 34 * (((dateCount - dateCount % 34) / 34) % 34) - (dateCount % 34)) / (34 * 34), 1)
            .concat(this.code34Str.substr(((dateCount - dateCount % 34) / 34) % 34, 1))
            .concat(this.code34Str.substr(dateCount % 34, 1))
         }
      }
   }
}
</script>