BizFooterToolbar 吸底操作条

长表单 / 协议签署 / 配置页的底部常驻操作区：无论滚动到哪，保存按钮始终可见。左侧提示文案（#left 插槽）+ 右侧操作按钮（默认插槽），自动渲染等高占位块防止内容被遮挡。

基础用法

占位块会自动撑出等高空间，页面内容不会被吸底条遮挡；文档页可滚动验证常驻效果

有未保存的巡检结论

左侧默认提示「未保存的修改将在离开页面时丢失」（tip 可配）；placeholder 默认开启，撑出等高空间避免遮挡页面末行。

<script setup lang="ts">
/** 基础用法：长表单底部常驻保存条（左侧提示 + 保存/取消） */
import { ref } from 'vue'
import { ElButton, ElInput, ElMessage } from 'element-plus'
import { BizFooterToolbar } from 'vue3-ep-biz-lib'

const saving = ref(false)
const remark = ref('')

const onSave = (): void => {
  saving.value = true
  window.setTimeout(() => {
    saving.value = false
    ElMessage.success('已保存（示例）')
  }, 800)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 560px">
    <ElInput v-model="remark" type="textarea" :rows="3" placeholder="模拟长表单内容——滚动页面，底部操作条始终可见" />
    <p style="font-size: 13px; color: var(--el-text-color-secondary)">
      占位块会自动撑出等高空间，页面内容不会被吸底条遮挡；文档页可滚动验证常驻效果
    </p>
    <BizFooterToolbar tip="有未保存的巡检结论">
      <ElButton @click="ElMessage.info('已取消')">取 消</ElButton>
      <ElButton type="primary" :loading="saving" @click="onSave">保存巡检结论</ElButton>
    </BizFooterToolbar>
  </div>
</template>

显示代码

分步协议页

0

填写信息

已完成

0

签署协议

进行中

0

提交审核

协议未签署前无法提交审核

#left 插槽接管提示区（告警语义文案），操作组含「存草稿」次操作与被禁语义的主操作；height 提到 64px 容纳更多信息。

<script setup lang="ts">
/** 场景：分步协议页——左侧步骤状态 + 次操作「存草稿」 */
import { ElButton, ElMessage, ElSteps, ElStep } from 'element-plus'
import { BizFooterToolbar } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 640px">
    <ElSteps :active="1" align-center>
      <ElStep title="填写信息" description="已完成" />
      <ElStep title="签署协议" description="进行中" />
      <ElStep title="提交审核" />
    </ElSteps>
    <BizFooterToolbar :height="64">
      <template #left>
        <span style="color: var(--el-color-warning)">协议未签署前无法提交审核</span>
      </template>
      <ElButton @click="ElMessage.info('已存草稿')">存草稿</ElButton>
      <ElButton type="primary" @click="ElMessage.warning('请先勾选同意协议')">提交审核</ElButton>
    </BizFooterToolbar>
  </div>
</template>

显示代码

工单处理页

WO-20260923-0088｜2 号线输送机安全光幕联锁停机（P2）

09:15 张工接单到场；09:40 确认光幕被物料遮挡；10:02 加装临时导料板恢复运行；12:00 复测无复发……（长处理记录持续滚动，底部操作条不受影响）

办结后工单不可再修改，请确认结论完整

工单场景：长处理记录滚动区 + 必填结论校验，办结按钮常驻不随内容滚走；转派作为次操作并存。

<script setup lang="ts">
/** 场景：工单处理页——长内容滚动 + 常驻转派/办结 */
import { ref } from 'vue'
import { ElButton, ElInput, ElMessage } from 'element-plus'
import { BizFooterToolbar } from 'vue3-ep-biz-lib'

const conclusion = ref('')
const finishing = ref(false)

const onFinish = (): void => {
  if (conclusion.value.trim() === '') {
    ElMessage.warning('请填写处理结论')
    return
  }
  finishing.value = true
  window.setTimeout(() => {
    finishing.value = false
    ElMessage.success('工单已办结')
  }, 800)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 620px">
    <div style="max-height: 180px; overflow-y: auto; padding: 12px; background: var(--el-fill-color-light); border-radius: 6px; font-size: 13px; line-height: 1.9">
      <p style="margin: 0 0 6px"><b>WO-20260923-0088</b>｜2 号线输送机安全光幕联锁停机（P2）</p>
      <p style="margin: 0">09:15 张工接单到场；09:40 确认光幕被物料遮挡；10:02 加装临时导料板恢复运行；12:00 复测无复发……（长处理记录持续滚动，底部操作条不受影响）</p>
    </div>
    <ElInput v-model="conclusion" type="textarea" :rows="2" placeholder="填写处理结论（必填）" maxlength="200" />
    <BizFooterToolbar tip="办结后工单不可再修改，请确认结论完整">
      <ElButton @click="ElMessage.info('已转派机电组')">转 派</ElButton>
      <ElButton type="primary" :loading="finishing" @click="onFinish">办结工单</ElButton>
    </BizFooterToolbar>
  </div>
</template>

显示代码

合同签署页

第一条 服务内容：乙方为甲方提供设备年度巡检服务……
第二条 费用与结算：合同总额 ¥86,400，验收后 30 日内一次性支付……
第三条 违约责任：任一方违约按合同总额 0.5%/ 日支付违约金……

我已阅读并同意《设备巡检服务合同》全部条款

请先勾选同意合同条款

法务场景：协议勾选联动启用「电子签署」（未勾选 disabled + 左侧告警文案），下载合同作为并列次操作。

<script setup lang="ts">
/** 场景：合同签署页——协议勾选联动启用签署按钮 */
import { ref } from 'vue'
import { ElButton, ElCheckbox, ElMessage } from 'element-plus'
import { BizFooterToolbar } from 'vue3-ep-biz-lib'

const agreed = ref(false)
const signing = ref(false)

const onSign = (): void => {
  signing.value = true
  window.setTimeout(() => {
    signing.value = false
    ElMessage.success('已完成电子签章（示例）')
  }, 1000)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 620px">
    <div style="height: 140px; overflow-y: auto; padding: 12px; background: var(--el-fill-color-light); border-radius: 6px; font-size: 13px; line-height: 1.9">
      第一条 服务内容：乙方为甲方提供设备年度巡检服务……<br>第二条 费用与结算：合同总额 ¥86,400，验收后 30 日内一次性支付……<br>第三条 违约责任：任一方违约按合同总额 0.5%/ 日支付违约金……
    </div>
    <ElCheckbox v-model="agreed">我已阅读并同意《设备巡检服务合同》全部条款</ElCheckbox>
    <BizFooterToolbar>
      <template #left>
        <span :style="{ color: agreed ? 'var(--el-text-color-secondary)' : 'var(--el-color-warning)' }">
          {{ agreed ? '可以签署' : '请先勾选同意合同条款' }}
        </span>
      </template>
      <ElButton @click="ElMessage.info('已下载合同文本')">下载合同</ElButton>
      <ElButton type="primary" :disabled="!agreed" :loading="signing" @click="onSign">电子签署</ElButton>
    </BizFooterToolbar>
  </div>
</template>

显示代码

系统设置页

强制两步验证（MFA）

告警短信通知

页面水印

设置与线上一致

设置场景：开关改动驱动 tip 变化（「有 1 项待保存 / 与线上一致」），未改动时保存按钮禁用。

<script setup lang="ts">
/** 场景：系统设置页——批量改动提示 + 恢复默认 */
import { ref } from 'vue'
import { ElButton, ElMessage, ElSwitch } from 'element-plus'
import { BizFooterToolbar } from 'vue3-ep-biz-lib'

const settings = ref({ mfa: true, sms: false, watermark: true })
const dirty = ref(false)
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 14px; max-width: 620px">
    <div style="display: flex; flex-direction: column; gap: 12px">
      <div v-for="(_value, key) in settings" :key="key" style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--el-border-color-lighter)">
        <span>{{ { mfa: '强制两步验证（MFA）', sms: '告警短信通知', watermark: '页面水印' }[key as 'mfa' | 'sms' | 'watermark'] }}</span>
        <ElSwitch v-model="settings[key as 'mfa' | 'sms' | 'watermark']" @change="dirty = true" />
      </div>
    </div>
    <BizFooterToolbar :tip="dirty ? '有 1 项设置待保存' : '设置与线上一致'">
      <ElButton @click="ElMessage.info('已恢复默认设置')">恢复默认</ElButton>
      <ElButton type="primary" :disabled="!dirty" @click="ElMessage.success('设置已保存'); dirty = false">保存设置</ElButton>
    </BizFooterToolbar>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
height	number	56	条高（px）
tip	string	'未保存的修改将在离开页面时丢失'	左侧提示文案
bordered	boolean	true	上边框与阴影
placeholder	boolean	true	渲染等高占位块防内容遮挡

Events

事件名	参数	说明
—	—	无自定义事件（按钮事件由插槽内容自行处理）

Slots

插槽名	说明
left	左侧提示区（覆盖 tip）
default	右侧操作按钮组

Expose

属性/方法	说明
—	无暴露实例（纯布局组件）