hy-archives-date v0.0.0

hy-archives-date

项目地址

Gitee: hy-archives-date NPM: hy-archives-date - npm (npmjs.com)

项目简介

本项目是针对档案系统研发的档案行业日期控件，在需求与设计阶段充分考虑了档案工作的实际场景与使用要求，得出一个更符合档案工作实际需要的崭新的日期填写形式，提升档案数据录入的工作效率 :rocket:

技术栈

本项目采用 Vue3 作为前前端基础框架进行开发，使用下一代构建工具 Vite 进行构建，在运行与启速度上奔向巨人的肩膀 ~ :running:

集成的组件

本项目建设初衷是创建一个纯粹的日期控件，所有没有使用任何其他第三方组件（VUE 基础组件除外），希望在未来的维护中尽量保持这一原则，如果有无法解决的问题，重读一遍 Vue3 吧，相信会有不同的启示 :star2:

需求与设计

主要功能有：

1. 支持日期选择
2. 支持手动输入
3. 支持读取缓存日期
4. 支持双击快速输入当前日期
5. 支持输入0000年度和00的月份与日期

详细信息请查看 自研日期时间控件-需求规格说明书.docx 和 自研日期时间控件-需求设计说明书.docx 文档中的设计图与源文件为 日期选择器.drawio.png 和 日期选择器.drawio

使用方式

为了方便组件的使用，项目中对集成方式进行了测试，使用方式非常简单，代码如下：

npm 安装

npm install hy-archives-date

局部注册

<template>
  <div>
     <DateComponentsVue v-model=dateString ref="DateComponents" v-model:dbDate=dbDate></DateComponentsVue>
  </div>
</template>
<script>
import 'hy-archives-date/dist/style.css'
import { DateComponentsVue } from 'hy-archives-date'
export default {
  components: {
    DateComponentsVue
  },
  data() {
    return {
      dateString: '',
      renderDate: null,
      dbDate: null
    }
  },
   methods: {
    getDate() {
      this.renderDate = this.$refs.DateComponents.renderDate();
    }
  }
}
</script>

全局 注册

main.js

import 'hy-archives-date/dist/style.css'
import { DateComponentsVue } from 'hy-archives-date'
const app = createApp(App)
app.component('DateComponentsVue', DateComponentsVue)

GlobalInstallationDate.vue

<template>
  <div>
    <DateComponentsVue v-model="dateString" ref="DateComponents"></DateComponentsVue>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dateString: ''
    }
  }
}
</script>

获取返回值

多种类型

this.$refs.DateComponents.renderData()

数据库日期格式

/**
 * 为了兼容数据库存储，制定了数据库保存的形式,使用 v-model:dbDate 绑定
 * 以时分秒代表年月日
 * 时、分、秒为 01 则代表正常日期，直接显示
 * 时、分、秒为 00 则代表非正常日期，需要转换后显示
 * 年度为 0000 的直接存储 0000
 * 月份与日期为 00 的存储为 01
 * 正常日期 2023/03/15 01:01:01
 * 年度为 0000 0000/03/15 00:01:01
 * 月份为 00 2023/01/15 01:00:01
 * 日期为 00 2023/03/01 01:01:00
 * 全部为 00 0000/01/01 00:00:00
 */
  <DateComponentsVue v-model:dbDate=dbDate ></DateComponentsVue>

项目安装

npm install

项目运行

npm run serve

编译为网页应用

npm run build

编译为组件库

npm run dist

代码分析

npm run lint

组件发布

npm 24 小时之内只允许发布一次，如需测试可以先发布到私服

注意：发布到私服时组件名称要加上 @archser/前缀，如 @archser/hy-archives-date ，在项目中引用时也需要使用 @archser/hy-archives-date 来引用

发布到 npm

• 设置发布地址 npm config set registry=https://registry.npmjs.org
• 登录 npm，会调用浏览器并通过邮件发送一次性密码 npm login registry=https://www.npmjs.com
• 发布版本 npm publish

遇到的问题

npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher.

这个问题是在已经成功发布组件之后突然出现的，按照网上的说法更新 npm : npm install -g npm 和下载 tls :npm install -g https://tls-test.npmjs.com/tls-test-1.0.0.tgz 都无效，后来安装了 enable-tls-1.3.reg 之后正常了，具体原因不清楚