starwork-uniapp/src/pages/personnel-passage/AccessManage/add-permission-group.vue

<route lang="json5">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom'
  }
}
</route>

<template>
  <TopNavigation title="添加权限组" />
  <scroll-view
    class="group-container"
    :scroll-y="true"
    :style="{ height: 'calc(100vh - var(--status-bar-height) - 44px)' }"
  >
    <!-- 配置名称 -->
    <view class="form-item input-item">
      <view class="form-header">
        <view class="form-label">
          <text class="required">*</text>
          <text>配置名称</text>
        </view>
      </view>
      <input
        class="input"
        type="text"
        v-model="name"
        @input="nameLength = name.length"
        placeholder="必填"
        placeholder-class="placeholder"
        maxlength="20"
      />
      <text class="count">{{ nameLength }}/20</text>
    </view>

    <!-- 配置描述 -->
    <view class="form-item input-item">
      <view class="form-header">
        <text class="form-label">配置描述</text>
      </view>
      <textarea
        class="textarea"
        v-model="desc"
        @input="descLength = desc.length"
        placeholder="描述权限配置的范围，例如：1幢1单元门口机出入口"
        placeholder-class="placeholder"
        maxlength="50"
      />
      <text class="count">{{ descLength }}/50</text>
    </view>

    <!-- 人员配置方式 -->
    <view class="form-item select-item">
      <view class="form-label">
        <text class="required">*</text>
        <text>人员配置方式</text>
      </view>
      <view class="form-value">
        <text>按人员/组织</text>
        <image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
      </view>
    </view>

    <!-- 人员范围 -->
    <view class="form-item select-item">
      <view class="form-label">
        <text class="required">*</text>
        <text>人员范围</text>
      </view>
      <view class="form-value">
        <text class="placeholder">必选</text>
        <image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
      </view>
    </view>

    <!-- 门禁范围 -->
    <view class="form-item select-item">
      <view class="form-label">
        <text class="required">*</text>
        <text>门禁范围</text>
      </view>
      <view class="form-value">
        <text class="placeholder">必选</text>
        <image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
      </view>
    </view>

    <!-- 门禁通行时间 -->
    <view class="form-item select-item" @click="handleTimePlanningAllocationClick">
      <view class="form-label">
        <text class="required">*</text>
        <text>门禁通行时间</text>
      </view>
      <view class="form-value">
        <text>全天时段有效</text>
        <image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
      </view>
    </view>

    <!-- 提示说明 -->
    <view class="tips">
      <view class="tips-header">
        <image class="icon" src="/static/images/icon_gray_tip.png" mode="aspectFit" />
        <text class="title">提示</text>
      </view>
      <view class="tips-content">
        <view class="tips-list">
          <view class="tip-item">
            <text>1.</text>
            <text>
              通行时间仅型号为DS-K1T、D1或HST-AU开头的门禁设备有效，其余型号仅支持全天时段有效；
            </text>
          </view>
          <view class="tip-item">
            <text>2.</text>
            <text>
              通过角色配置[一键开门]、[密码开门]菜单权限，可远程/蓝牙/密码打开此配置范围内的门禁；
            </text>
          </view>
          <view class="tip-item">
            <text>3.</text>
            <text>一键开门不受通行时间、门禁状态的限制，可全天开门。</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部占位，防止保存按钮遮挡内容 -->
    <view style="height: 76px"></view>
  </scroll-view>
  <!-- 底部按钮 -->
  <button class="save-btn">保存</button>
</template>

<script setup>
  import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'

  const nameLength = ref(0)
  const descLength = ref(0)

  // 门禁通行时间
  const handleTimePlanningAllocationClick = () => {
    uni.navigateTo({
      url: '/pages/personnel-passage/AccessManage/time-planning-allocation/time-planning-allocation-list'
    })
  }
</script>

<style lang="scss" scoped>
  .group-container {
    box-sizing: border-box;
    padding: 12px 16px;
    background-color: #f5f6fa;
  }

  .form-item {
    position: relative;
    padding: 16px;
    margin-bottom: 12px;
    background-color: #fff;
    border-radius: 8px;
  }

  .input-item {
    .form-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .form-label {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333;

      .required {
        margin-right: 4px;
        color: #ff4d4f;
      }

      .placeholder {
        margin-left: 4px;
        color: #999;
      }
    }

    .input,
    .textarea {
      display: block; // 确保是块级元素
      width: auto; // 让宽度自动计算
      padding: 8px;
      //   margin-right: 10px;
      font-size: 14px;
      color: #333;
      background-color: #f8f9fc;
      border-radius: 4px;
    }

    .textarea {
      height: 80px;
    }

    .count {
      position: absolute;
      right: 26px;
      bottom: 26px;
      font-size: 12px;
      color: #999;
    }
  }

  .select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .form-label {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333;

      .required {
        margin-right: 4px;
        color: #ff4d4f;
      }
    }

    .form-value {
      display: flex;
      gap: 4px;
      align-items: center;
      font-size: 14px;
      color: #999;

      .arrow {
        width: 16px;
        height: 16px;
      }
    }
  }

  .tips {
    padding: 16px;
    margin-top: 12px;
    background-color: #fff;
    border-radius: 8px;

    .tips-header {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .icon {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #333;
      }
    }

    .tips-content {
      .tips-list {
        padding-left: 4px;
        clear: both;

        .tip-item {
          display: flex;
          gap: 4px;
          margin-bottom: 8px;
          font-size: 14px;
          line-height: 1.4;
          color: #666;

          &:last-child {
            margin-bottom: 0;
          }

          text:last-child {
            flex: 1;
          }
        }
      }
    }
  }

  .save-btn {
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: 16px;
    height: 44px;
    font-size: 16px;
    color: #fff;
    background-color: #2b5cff;
    border-radius: 8px;

    &::after {
      border: none;
    }
  }
</style>