BizDurationInput 时长输入

时长分段组合录入：时 / 分 / 秒（hms）或天 / 时 / 分（dhm），模型值为秒数——写入按段换算、回填自动进位（95 分 → 1 时 35 分）、上限钳制、可读格式化展示。监控告警阈值、工时填报、课程 / 视频时长、维保周期配置——与 BizNumberRange（数值区间）互补，本组件承载时分秒组合语义。

基础用法

时

分

秒

≈ 1时2分5秒

模型值（秒）：3725

时分秒三段组合，模型值为秒，右侧显示可读格式。

<script setup lang="ts">
/** 场景：视频时长配置——时分秒组合，模型值为秒 */
import { ref } from 'vue'
import { BizDurationInput } from 'vue3-ep-biz-lib'

const seconds = ref(3725)
</script>

<template>
  <div style="max-width: 460px">
    <BizDurationInput v-model="seconds" />
    <p style="margin: 8px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">模型值（秒）：{{ seconds }}</p>
  </div>
</template>

显示代码

单位组切换

天

时

分

≈ 3天5时0分

模型值（秒）：277200

units="dhm" 天 / 时 / 分（长周期场景，如维保周期）。

<script setup lang="ts">
/** 场景：长周期——dhm 天/时/分（维保周期配置） */
import { ref } from 'vue'
import { BizDurationInput } from 'vue3-ep-biz-lib'

const seconds = ref(86400 * 3 + 3600 * 5)
</script>

<template>
  <div style="max-width: 460px">
    <BizDurationInput v-model="seconds" units="dhm" />
    <p style="margin: 8px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">模型值（秒）：{{ seconds }}</p>
  </div>
</template>

显示代码

上限钳制

max = 86400（1 天）：把「时」拉到 25 以上会被钳制回 24

时

分

秒

≈ 2时0分0秒

模型值（秒）：7200 / 86400

max 限定最大秒数，首段上限同步收敛（告警阈值场景）。

<script setup lang="ts">
/** 场景：上限钳制——告警静默期上限 86400s（1 天），首段上限同步收敛 */
import { ref } from 'vue'
import { ElAlert } from 'element-plus'
import { BizDurationInput } from 'vue3-ep-biz-lib'

const seconds = ref(7200)
</script>

<template>
  <div style="max-width: 460px">
    <ElAlert title="max = 86400（1 天）：把「时」拉到 25 以上会被钳制回 24" type="info" :closable="false" style="margin-bottom: 10px" />
    <BizDurationInput v-model="seconds" :max="86400" />
    <p style="margin: 8px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">模型值（秒）：{{ seconds }} / 86400</p>
  </div>
</template>

显示代码

步进控件

default + controls

时

分

秒

≈ 2分0秒

small + controls

时

分

秒

≈ 15分0秒

controls 显示各段加减按钮，size 适配表单。

<script setup lang="ts">
/** 场景：步进控件与尺寸——controls 加减按钮 + small 尺寸 */
import { ref } from 'vue'
import { BizDurationInput } from 'vue3-ep-biz-lib'

const a = ref(120)
const b = ref(900)
</script>

<template>
  <div style="max-width: 520px; display: flex; flex-direction: column; gap: 16px">
    <div>
      <p style="margin: 0 0 6px; font-size: 12px; color: var(--el-text-color-secondary)">default + controls</p>
      <BizDurationInput v-model="a" controls />
    </div>
    <div>
      <p style="margin: 0 0 6px; font-size: 12px; color: var(--el-text-color-secondary)">small + controls</p>
      <BizDurationInput v-model="b" size="small" controls />
    </div>
  </div>
</template>

显示代码

格式化展示

expose format 静态工具（秒 → 可读文案），用于列表 / 详情展示。

<script setup lang="ts">
/** 场景：格式化工具——formatBizDuration 秒 → 可读文案（列表展示） */
import { ElTable, ElTableColumn } from 'element-plus'
import { formatBizDuration } from 'vue3-ep-biz-lib'

const rows = [
  { name: '必修课《安全生产》', seconds: 5400 },
  { name: '选修课《办公效率》', seconds: 25200 },
  { name: '实操《设备点检》', seconds: 86400 * 2 + 3600 },
]
</script>

<template>
  <div style="max-width: 560px">
    <ElTable :data="rows" size="small">
      <ElTableColumn prop="name" label="课程" min-width="160" />
      <ElTableColumn label="总时长" width="180">
        <template #default="{ row }">
          {{ formatBizDuration(row.seconds, row.seconds > 86400 ? 'dhm' : 'hms') }}
        </template>
      </ElTableColumn>
      <ElTableColumn prop="seconds" label="秒数" width="110" />
    </ElTable>
  </div>
</template>

显示代码

表单集成

SLA 名称

响应时限

时

分

秒

≈ 15分0秒

说明

与 ElForm 集成（SLA 时限配置），提交取秒数入库。

<script setup lang="ts">
/** 场景：SLA 表单——ElForm 集成，提交取秒数入库 */
import { reactive } from 'vue'
import { ElButton, ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus'
import { BizDurationInput, formatBizDuration } from 'vue3-ep-biz-lib'

const form = reactive({ name: '一级故障响应', minutes: 900, description: '' })

const submit = (): void => {
  ElMessage.success(`已保存：${form.name}，时限 ${formatBizDuration(form.minutes)}`)
}
</script>

<template>
  <div style="max-width: 520px">
    <ElForm label-width="90px">
      <ElFormItem label="SLA 名称">
        <ElInput v-model="form.name" />
      </ElFormItem>
      <ElFormItem label="响应时限">
        <BizDurationInput v-model="form.minutes" :max="6 * 3600" size="small" />
      </ElFormItem>
      <ElFormItem label="说明">
        <ElInput v-model="form.description" type="textarea" :rows="2" placeholder="超时自动升级通知" />
      </ElFormItem>
      <ElFormItem>
        <ElButton type="primary" @click="submit">保存配置</ElButton>
      </ElFormItem>
    </ElForm>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
v-model	number	0	时长（秒）
units	'hms' | 'dhm'	'hms'	单位组：时分秒 / 天时分
max	number	—	上限（秒），超出钳制
disabled	boolean	false	禁用
size	'small' | 'default' | 'large'	'default'	尺寸
controls	boolean	false	各段加减步进按钮

Events

事件名	参数	说明
change	(seconds: number)	值变化（update 同步）

Expose

名称	类型	说明
format	(seconds, units?) => string	秒数 → 可读文案（静态工具）