# 次日时间选择器

**Repository Path**: Fw-web/fan-next-time-select

## Basic Information

- **Project Name**: 次日时间选择器
- **Description**: 可以选择次日的时间选择器
- **Primary Language**: Unknown
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-01
- **Last Updated**: 2024-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 次日时间选择器

###### ~~show me bug...~~

### [源码地址：gitee](https://gitee.com/Fw-web/fan-next-time-select)

### [组件地址：npm](https://www.npmjs.com/package/fan-next-time-select)

### 版本更新 1.2.3

- bug 修复 单独使用时无法关闭列表的 bug

### 版本更新 1.2.1

- 新增 API：rangeFlag 是否验证范围选择器
- 新增 API：addStep 添加时较上一组新增多少分钟
- 新增 方法：formatPickerValue 格式化次日时间选择器的值
- 修改 多个方法逻辑
- 修改 示例
- 可单独引入 FanNextTimeSelectItem 组件

### 版本更新 1.1.3

- 删除 API：rangeList 时间选择器列表
- 删除 API：strict 严格模式
- 新增 API：range 是否显示范围选择器
- 新增 API：btnDisable 是否禁止显示+-按钮
- 新增 API：disable 是否禁用选择器
- 删除 $util 中需要用到的的方法：examineRange 校验次日时间选择器范围是否合法。
- 修改 $util 中需要用到的的方法：examine 校验次日时间选择器是否合法。
- 修改 示例

### 说明

- 本组件适用于使用了：vue2.x 和 element-ui 的家伙们。
- 本组件使用了 element-ui 部分组件：Message、Scrollbar、clickoutside 等
- 示例使用了 Dialog、Button 等

### 安装

```
// npm安装
npm i fan-next-time-select
```

### 如何使用

```
// main.js

import FanNextTimeSelectVue from "fan-next-time-select";
import util from "fan-next-time-select/util/index";
import "fan-next-time-select/css/index.css";

Vue.use(FanNextTimeSelectVue);
Vue.prototype.$util = util;
```

### 示例

```
<template>
	<div class="index-contaienr">
		<hr />
		<h3>时间段</h3>
		<fan-next-time-select
			id="fan"
			startText="上班时间"
			endText="下班时间"
			:list="list"
			:rangeFlag="true"
			:maxLength="3"
			@setFanNextTimeSelectList="getFanNextTimeSelectList" />

		<div
			v-for="(item, i) in list"
			:key="i">
			<div>
				时段{{ i + 1 }}： 上班时间范围：{{
					$util.fanDecode(item.startRange[0].startValue).text
				}}——{{
					$util.fanDecode(item.startRange[0].endValue).text
				}}，下班时间范围：{{
					$util.fanDecode(item.endRange[0].startValue).text
				}}——{{ $util.fanDecode(item.endRange[0].endValue).text }}
			</div>
		</div>

		<el-button
			type="info"
			@click="showDialog"
			>设置打卡时间范围</el-button
		>

		<el-button
			type="primary"
			@click="submit"
			>提交表单</el-button
		>

		<el-dialog
			title="设置打卡时间范围"
			v-if="dialogFormVisible"
			:visible.sync="dialogFormVisible">
			<fan-next-time-select
				startText="上班时间"
				endText="下班时间"
				:range="true"
				:list="listCopy"
				:btnDisable="true"
				:disable="true"
				:maxLength="3"
				@setFanNextTimeSelectList="getFanNextTimeSelectListCopy" />
			<div
				slot="footer"
				class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button
					type="primary"
					@click="dialogSubmit"
					>确 定</el-button
				>
			</div>
		</el-dialog>
		<hr />
		<h3>单个时间</h3>
		<FanNextTimeSelectItem
			:item="myItem"
			@setItem="getItem" />
		<hr />
	</div>
</template>

<script>
export default {
	data() {
		return {
			// 时间选择器内容数组
			list: [
				{
					// 开始时间与后端交互的值
					startValue: 9 * 60,
					// 结束时间与后端交互的值
					endValue: 18 * 60,
					// 开始时间最小值、最大值
					startRange: [{ startValue: 9 * 60 - 30, endValue: 9 * 60 + 30 - 1 }],
					// 结束时间最小值、最大值
					endRange: [{ startValue: 18 * 60 - 30, endValue: 18 * 60 + 30 - 1 }],
				},
			],
			// 用来设置打卡时间范围
			listCopy: [],
			// 用来判断组件是否合法
			listFlag: false,
			// 是否显示dialog
			dialogFormVisible: false,

			// 单个时间用到的内容=========================================================================================
			myItem: {
				// 开始时间与后端交互的值
				startValue: 9 * 60,
				// 结束时间与后端交互的值
				endValue: 18 * 60,
			},
		};
	},
	methods: {
		/**
		 * 获取次日时间选择器返回的值
		 * @param {array} value 次日时间选择器返回的值
		 */
		getFanNextTimeSelectList(value) {
			// 赋值
			value.pickers.forEach((item, i) => {
				this.$set(this.list, i, item);
			});
			this.listFlag = value.flag;
		},

		/**
		 * 获取次日时间选择器返回的值--复制版
		 * @param {array} value 次日时间选择器返回的值
		 */
		getFanNextTimeSelectListCopy(value) {
			// 赋值
			value.pickers.forEach((item, i) => {
				this.$set(this.listCopy, i, item);
			});
			this.listFlag = value.flag;
		},

		/**
		 * 显示dialog
		 */
		showDialog() {
			// 赋值
			this.listCopy = this.$util.deepCopy(this.list);

			// 打开dialog
			this.dialogFormVisible = true;
		},

		/**
		 * 提交打卡范围
		 */
		dialogSubmit() {
			// 验证
			if (!this.listFlag)
				return this.$message.error("时间选择器有误不允许提交哦");

			// 赋值
			this.listCopy.forEach((item, i) => {
				this.$set(this.list, i, item);
			});

			// 关闭dialog
			this.dialogFormVisible = false;
		},

		/**
		 * 提交表单
		 */
		submit() {
			// 验证
			if (!this.listFlag)
				return this.$message.error("当前时间选择器有误，不能提交");

			let data = this.$util.formatPickerValue(this.list); // 最终用到的值
			console.log("最终用到的值：", data);

			this.$message.success("提交成功");
		},

		// 单个选择器用到的方法==================================================================================

		/**
		 * 单个选择器返回的值
		 * @param {array} value
		 */
		getItem(value) {
			// 赋值
			this.myItem = value;
			// 获取最终值
			let myValue = this.$util.formatPickerValue(this.myItem, true);
			console.log("最终分钟值：", myValue);
		},
	},
};
</script>

<style lang="less">
.index-contaienr {
	width: 100%;
	height: 100vh;
	background-color: #fff;
}
</style>
```

### FanNextTimeSelect 中的 API

| API         | 描述                                                         | 是否必填 | 默认值                                     | 范围             | 类型    |
| ----------- | ------------------------------------------------------------ | -------- | ------------------------------------------ | ---------------- | ------- |
| list        | 父组件传递的数组。                                           | 是       | 详情见下方 list 数组中每个对象的字段与值。 | -                | Array   |
| rangeFlag   | 是否验证范围选择器。组。                                     | 否       | true                                       | true/false       | Boolean |
| addStep     | 添加时较上一组新增多少分钟                                   | 否       | 1\*60                                      | 0-2880（48\*60） | Number  |
| startText   | 开始时间的标题。                                             | 否       | ''                                         | -                | String  |
| endText     | 结束时间的标题。                                             | 否       | ''                                         | -                | String  |
| maxLength   | 时间选择器组的最大数量。为 1 时不可添加或删除。              | 否       | 1                                          | 0-100            | Number  |
| step        | 步进值，每个时间选择器之间相差值，为 0 时可相等。            | 否       | 1                                          | 0-2880（48\*60） | Number  |
| stepMax     | 第一组选择器的开始时间与最后一组选择器的结束时间相差最大值。 | 否       | 1440(24\*60)                               | 0-2880（48\*60） | Number  |
| range       | 是否显示范围选择器。                                         | 否       | false                                      | true/false       | Boolean |
| btnDisable  | 是否禁止显示'+'、'-'按钮器。                                 | 否       | false                                      | true/false       | Boolean |
| disable     | 是否禁用选择器器。                                           | 否       | false                                      | true/false       | Boolean |
| width       | 设置选择器宽度，单位 px。                                    | 否       | 100                                        | 100-500          | Number  |
| titleSize   | 设置标题的字号大小，单位 px。                                | 否       | 14                                         | 2-100            | Number  |
| titleColor  | 设置标题颜色。                                               | 否       | #333333                                    | -                | String  |
| borderColor | 设置边框颜色。                                               | 否       | #ccd4e0                                    | -                | String  |
| bgColor     | 设置选择器背景颜色。                                         | 否       | #fafbfc                                    | -                | String  |
| color       | 设置选择器文字颜色。                                         | 否       | #333333                                    | -                | String  |

### list 数组中每个对象的字段与值

| 字段名     | 详情                                   | 默认值                                 | 类型   | 范围                       |
| ---------- | -------------------------------------- | -------------------------------------- | ------ | -------------------------- |
| startValue | 与后端交互的开始时间值（以分钟计算）。 | 9\*60                                  | Number | 0-2880(48\*60)             |
| endValue   | 与后端交互的结束时间值（以分钟计算）。 | 18\*60                                 | Number | 0-2880(48\*60)             |
| startRange | startValue 的最大、最小值范围          | [{startValue:0,endValue:2880(48\*60)}] | Array  | 对象内字段：0-2880(48\*60) |
| endRange   | endValue 的最大、最小值范围            | [{startValue:0,endValue:2880(48\*60)}] | Array  | 对象内字段：0-2880(48\*60) |

### FanNextTimeSelect 中的 Events

| 事件名                   | 详情                                                 | 类型     |
| ------------------------ | ---------------------------------------------------- | -------- |
| setFanNextTimeSelectList | 参数返回最新的{pickers：数组或对象,flag：值是否合法} | Function |

### FanNextTimeSelectItem 中的 API

| API         | 描述                               | 是否必填 | 默认值                | 范围           | 类型     |
| ----------- | ---------------------------------- | -------- | --------------------- | -------------- | -------- |
| item        | 父组件传递的对象。                 | 是       | {startValue,endValue} | 0-2880(48\*60) | {Number} |
| title       | 标题。                             | 否       | ''                    | -              | String   |
| disable     | 是否禁用本组件。                   | 否       | false                 | true/false     | Boolean  |
| width       | 宽度。                             | 否       | 100                   | 100-500        | Number   |
| titleSize   | 标题字号。                         | 否       | 14                    | 2-100          | Number   |
| titleColor  | 标题颜色。                         | 否       | #333                  | -              | String   |
| borderColor | 边框颜色。                         | 否       | #ccd4e0               | -              | String   |
| bgColor     | 背景颜色。                         | 否       | #fafbfc               | -              | String   |
| color       | 文字颜色。                         | 否       | #33333                | -              | String   |
| end         | 是否为下班的控件。（不要动它。。） | 否       | 0                     | 0/1            | Number   |
| only        | 是否单独使用。（不要动它。。）     | 否       | true                  | true/false     | Boolean  |

### FanNextTimeSelectItem 中的 Events

| 事件名  | 详情                                                                    | 类型     |
| ------- | ----------------------------------------------------------------------- | -------- |
| setItem | 参数返回最新的 {pickers：数组或对象,flag：值是否合法}，或者 item 对象。 | Function |

### $util 中需要用到的的方法

| 方法名            | 详情                                 | 参数                                                                            |
| ----------------- | ------------------------------------ | ------------------------------------------------------------------------------- |
| formatPickerValue | 格式化次日时间选择器的值。           | 参 1：要格式化的数组或对象，参 2：是否单组件模式。为 true 时（参 1 应为对象）。 |
| fanCode           | 将小时和分钟编码获得与后端交互的值。 | 参 1：小时，参 2：分钟。                                                        |
| fanDecode         | 解码后端交互的值获得小时和分钟。     | 参 1：与后端交互的值。                                                          |

### bug 反馈与合作 weChat：

- <img src="https://gitee.com/Fw-web/fan-next-time-select/raw/master/src/img/fan.jpg" width="200">