feat: 1、完成添加权限组UI。2、完成下发权限UI。3、完成下发记录UI。4、添加及节日计划配置UI。5、添加增加时间计划UI
This commit is contained in:
魏少阳
parent
216e29873d
commit
ece4437d7d
@ -398,6 +398,38 @@
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/personnel-passage/AccessManage/time-planning-allocation/add-daily-traffic-plan",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/personnel-passage/AccessManage/time-planning-allocation/add-time-schedule",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/personnel-passage/AccessManage/time-planning-allocation/time-planning-allocation-detail",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/personnel-passage/AccessManage/time-planning-allocation/time-planning-allocation-list",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": []
|
||||
|
||||
@ -87,7 +87,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 门禁通行时间 -->
|
||||
<view class="form-item select-item">
|
||||
<view class="form-item select-item" @click="handleTimePlanningAllocationClick">
|
||||
<view class="form-label">
|
||||
<text class="required">*</text>
|
||||
<text>门禁通行时间</text>
|
||||
@ -138,6 +138,13 @@
|
||||
|
||||
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>
|
||||
|
||||
@ -171,7 +171,7 @@
|
||||
.query-container {
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
padding-bottom: 76px;
|
||||
padding-bottom: 63px;
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,231 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationStyle: 'custom'
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<TopNavigation title="日常通行计划" />
|
||||
<view class="plan-container">
|
||||
<!-- 周时间选择 -->
|
||||
<view class="week-section">
|
||||
<text class="required">*</text>
|
||||
<text class="title">周时间选择</text>
|
||||
<view class="week-list">
|
||||
<view
|
||||
v-for="(day, index) in weekDays"
|
||||
:key="index"
|
||||
:class="['week-item', { active: day.active }]"
|
||||
>
|
||||
{{ day.label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 通行时段 -->
|
||||
<view class="time-section">
|
||||
<view class="section-header">
|
||||
<text>通行时段</text>
|
||||
<text class="sub-text">未添加通行时段表示全天不可通行</text>
|
||||
</view>
|
||||
|
||||
<!-- 时段列表 -->
|
||||
<view class="time-list">
|
||||
<view class="time-item" v-for="(period, index) in timePeriods" :key="index">
|
||||
<view class="time-info">
|
||||
<text class="period-label">时段{{ index + 1 }}</text>
|
||||
<text class="time-value">{{ period.time }}</text>
|
||||
</view>
|
||||
<view class="action-icons">
|
||||
<image
|
||||
class="gray-delet-icon"
|
||||
src="/static/images/icon_gray_delet.png"
|
||||
mode="scaleToFill"
|
||||
@click="deletAction"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 添加时段按钮 -->
|
||||
<view class="add-time">
|
||||
<image class="add-icon" src="/static/images/icon_blue_add.png" mode="aspectFit" />
|
||||
<text>增加通行时段</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部保存按钮 -->
|
||||
<button class="save-btn">保存</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
|
||||
|
||||
const weekDays = ref([
|
||||
{ label: '一', active: true },
|
||||
{ label: '二', active: true },
|
||||
{ label: '三', active: true },
|
||||
{ label: '四', active: true },
|
||||
{ label: '五', active: true },
|
||||
{ label: '六', active: false },
|
||||
{ label: '日', active: false }
|
||||
])
|
||||
|
||||
const timePeriods = ref([{ time: '08:00:00-12:00:00' }, { time: '14:00:00-18:00:00' }])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.plan-container {
|
||||
padding: 12px 0;
|
||||
// margin-right: 16px;
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
|
||||
.week-section {
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
background-color: #fff;
|
||||
|
||||
.required {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.week-list {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
|
||||
.week-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: calc((100% - 48px) / 7);
|
||||
aspect-ratio: 1;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
border: 1px dashed #ddd;
|
||||
border-radius: 50%;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background-color: #2b5cff;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-section {
|
||||
padding: 12px 16px;
|
||||
background-color: #fff;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
|
||||
.sub-text {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.time-list {
|
||||
.time-item {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.time-info {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 0;
|
||||
background-color: #f8f9fc;
|
||||
border-radius: 8px;
|
||||
|
||||
.period-label {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.time-value {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.action-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-left: 12px;
|
||||
|
||||
.gray-delet-icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-time {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background-color: #f8f9fc;
|
||||
border-radius: 8px;
|
||||
|
||||
.add-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 14px;
|
||||
color: #2b5cff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
@ -0,0 +1,313 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationStyle: 'custom'
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<TopNavigation title="增加时间计划" />
|
||||
<scroll-view scroll-y class="time-schedule">
|
||||
<view class="content">
|
||||
<!-- 计划名称 -->
|
||||
<view class="form-item">
|
||||
<view class="label">
|
||||
<text class="required">*</text>
|
||||
<text>计划名称</text>
|
||||
</view>
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="请填写计划名称"
|
||||
placeholder-style="color: #999;"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 计划描述 -->
|
||||
<view class="form-item">
|
||||
<view class="label">计划描述</view>
|
||||
<textarea
|
||||
class="textarea"
|
||||
placeholder="非必填"
|
||||
placeholder-style="color: #999;"
|
||||
maxlength="50"
|
||||
/>
|
||||
<view class="word-count">0/50</view>
|
||||
</view>
|
||||
|
||||
<!-- 日常通行计划 -->
|
||||
<view class="form-item">
|
||||
<view class="label">
|
||||
<text class="required">*</text>
|
||||
<text>日常通行计划</text>
|
||||
</view>
|
||||
<view class="time-block-main">
|
||||
<view class="time-block">
|
||||
<view class="week-select">
|
||||
<text>周一至周五</text>
|
||||
<!-- <uni-icons type="right" size="16" color="white"></uni-icons> -->
|
||||
<image
|
||||
class="right-icon"
|
||||
src="/static/images/icon_black_right.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="time-periods">
|
||||
<view class="time-item">
|
||||
<text>时段1</text>
|
||||
<text class="time">08:00:00-12:00:00</text>
|
||||
<view class="delete-icon">
|
||||
<uni-icons type="trash" size="20" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time-item">
|
||||
<text>时段2</text>
|
||||
<text class="time">14:00:00-16:00:00</text>
|
||||
<view class="delete-icon">
|
||||
<uni-icons type="trash" size="20" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
class="gray_delet-icon"
|
||||
src="/static/images/icon_gray_delet.png"
|
||||
mode="scaleToFill"
|
||||
@click="deletAction"
|
||||
/>
|
||||
</view>
|
||||
<view class="add-time" @click="addTimeSlot">
|
||||
<!-- <uni-icons type="plusempty" size="16" color="#2979ff"></uni-icons> -->
|
||||
<image class="add-icon" src="/static/images/icon_blue_add.png" mode="scaleToFill" />
|
||||
<text>添加日常通行计划</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 节假日通行计划 -->
|
||||
<view class="form-item">
|
||||
<view class="holiday-header">
|
||||
<text>节假日通行计划</text>
|
||||
<text class="sub-text">遇节假日将按假日计划执行</text>
|
||||
</view>
|
||||
<view class="holiday-select" @click="selectHoliday">
|
||||
<text>法定节假日</text>
|
||||
<image
|
||||
class="holiday-select-right-icon"
|
||||
src="/static/images/icon_black_right.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部占位，为fixed按钮留出空间 -->
|
||||
<view class="footer-placeholder"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部保存按钮 -->
|
||||
<view class="footer">
|
||||
<button class="save-btn" type="primary">保存</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.time-schedule {
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 44px); // 减去顶部导航栏的高度
|
||||
background-color: #f5f6fa;
|
||||
|
||||
.content {
|
||||
padding: 12px 16px;
|
||||
|
||||
.form-item {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
|
||||
.label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
|
||||
.required {
|
||||
margin-right: 4px;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
// width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
background-color: #f8f9fc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
box-sizing: border-box;
|
||||
height: 80px;
|
||||
padding: 8px 12px;
|
||||
margin-right: 32px;
|
||||
font-size: 14px;
|
||||
background-color: #f8f9fc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.word-count {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.time-block-main {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
|
||||
.time-block {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
background-color: #f5f6fa;
|
||||
border-radius: 8px;
|
||||
|
||||
.week-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: fit-content;
|
||||
min-width: 120px;
|
||||
padding: 12px 16px;
|
||||
background-color: #f5f6fa;
|
||||
border-radius: 8px;
|
||||
|
||||
.right-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.time-periods {
|
||||
padding: 12px 0;
|
||||
|
||||
.time-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
color: #666;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.time {
|
||||
flex: 1;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gray_delet-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.add-time {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
color: #2979ff;
|
||||
background-color: #f8f9fc;
|
||||
border-radius: 4px;
|
||||
|
||||
.add-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 16px;
|
||||
color: #2979ff;
|
||||
}
|
||||
}
|
||||
|
||||
.holiday-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.sub-text {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.holiday-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
background-color: #f8f9fc;
|
||||
border-radius: 4px;
|
||||
|
||||
.holiday-select-right-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-placeholder {
|
||||
height: 76px; // 为底部按钮占位
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
padding: 16px;
|
||||
background-color: #f5f6fa;
|
||||
|
||||
.save-btn {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
line-height: 44px;
|
||||
color: #fff;
|
||||
background-color: #2979ff;
|
||||
border-radius: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script setup>
|
||||
const addTimeSlot = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/personnel-passage/AccessManage/time-planning-allocation/add-daily-traffic-plan'
|
||||
})
|
||||
}
|
||||
|
||||
const deletAction = () => {
|
||||
console.log('删除')
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,136 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationStyle: 'custom'
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<TopNavigation title="计划1" />
|
||||
<scroll-view
|
||||
class="plan-container"
|
||||
:scroll-y="true"
|
||||
:style="{ height: 'calc(100vh - var(--status-bar-height) - 44px - 76px)' }"
|
||||
>
|
||||
<view class="tip-box">
|
||||
<text>如需修改，请在【通行权限】-【通行时间计划】功能内修改</text>
|
||||
</view>
|
||||
|
||||
<!-- 计划名称 -->
|
||||
<view class="form-item">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="planName"
|
||||
placeholder="我路走里呀我路走里哇路在"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 日常通行时间 -->
|
||||
<view class="time-section">
|
||||
<text class="section-title">日常通行时间</text>
|
||||
<view class="time-card">
|
||||
<text class="week-text">周一至周五</text>
|
||||
<view class="time-row">
|
||||
<text class="time-label">时段1</text>
|
||||
<text class="time-value">08:00:00-18:00:00</text>
|
||||
</view>
|
||||
<view class="time-row">
|
||||
<text class="time-label">时段2</text>
|
||||
<text class="time-value">20:00:00-23:59:00</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
|
||||
|
||||
const planName = ref('')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.plan-container {
|
||||
padding: 12px 16px;
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
|
||||
.tip-box {
|
||||
padding: 12px 16px;
|
||||
margin-right: 32px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
color: #ff6b00;
|
||||
background-color: #fff6f0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
padding: 16px;
|
||||
margin-right: 32px;
|
||||
margin-bottom: 12px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.time-section {
|
||||
margin-right: 32px;
|
||||
|
||||
.section-title {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.time-card {
|
||||
padding: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
|
||||
.week-text {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.time-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.time-label {
|
||||
width: 60px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.time-value {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,157 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationStyle: 'custom'
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<TopNavigation title="节假日计划配置" />
|
||||
<scroll-view
|
||||
class="plan-container"
|
||||
:scroll-y="true"
|
||||
:style="{ height: 'calc(100vh - var(--status-bar-height) - 44px - 76px)' }"
|
||||
>
|
||||
<!-- 添加计划 -->
|
||||
<view class="plan-item add-plan" @click="handleAddPlan">
|
||||
<text class="title">增加时间计划</text>
|
||||
<image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
<!-- 计划列表 -->
|
||||
<view class="plan-list">
|
||||
<!-- 法定节假日 -->
|
||||
<view class="plan-item" @click="handlePlanClickDetail">
|
||||
<view class="checkbox-wrap">
|
||||
<checkbox class="checkbox" :checked="false" color="#2B5CFF" />
|
||||
</view>
|
||||
<view class="content" @click="handlePlanClick">
|
||||
<text class="title">法定节假日</text>
|
||||
<text class="desc">每年自动同步国家法定节假日，通行时段可自定义</text>
|
||||
<image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 浓的 -->
|
||||
<view class="plan-item" @click="handlePlanClickDetail">
|
||||
<view class="checkbox-wrap">
|
||||
<checkbox class="checkbox" :checked="false" color="#2B5CFF" />
|
||||
</view>
|
||||
<view class="content" @click="handlePlanClick">
|
||||
<text class="title">浓的</text>
|
||||
<image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<button class="save-btn">保存</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
|
||||
|
||||
const handleAddPlan = () => {
|
||||
// 处理添加计划
|
||||
uni.navigateTo({
|
||||
url: '/pages/personnel-passage/AccessManage/time-planning-allocation/add-time-schedule'
|
||||
})
|
||||
}
|
||||
|
||||
const handlePlanClick = () => {
|
||||
// 处理计划点击
|
||||
}
|
||||
|
||||
// 处理计划点击
|
||||
const handlePlanClickDetail = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/personnel-passage/AccessManage/time-planning-allocation/time-planning-allocation-detail'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.plan-container {
|
||||
padding: 12px 16px;
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
|
||||
.plan-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
margin-right: 32px;
|
||||
margin-bottom: 12px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
|
||||
&.add-plan {
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-wrap {
|
||||
margin-right: 8px;
|
||||
|
||||
.checkbox {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: block;
|
||||
margin-right: 16px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
BIN
src/static/images/icon_blue_add.png
Normal file
BIN
src/static/images/icon_blue_add.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/static/images/icon_gray_delet.png
Normal file
BIN
src/static/images/icon_gray_delet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
6
src/types/uni-pages.d.ts
vendored
6
src/types/uni-pages.d.ts
vendored
@ -48,7 +48,11 @@ interface NavigateToOptions {
|
||||
"/pages/personnel-passage/password-open-door/password-open-door" |
|
||||
"/pages/personnel-passage/traffic-record/traffic-record" |
|
||||
"/pages/personnel-passage/visitor-invitation/visitor-invitation" |
|
||||
"/pages/personnel-passage/visitor-manage/visitor-manage-tab";
|
||||
"/pages/personnel-passage/visitor-manage/visitor-manage-tab" |
|
||||
"/pages/personnel-passage/AccessManage/time-planning-allocation/add-daily-traffic-plan" |
|
||||
"/pages/personnel-passage/AccessManage/time-planning-allocation/add-time-schedule" |
|
||||
"/pages/personnel-passage/AccessManage/time-planning-allocation/time-planning-allocation-detail" |
|
||||
"/pages/personnel-passage/AccessManage/time-planning-allocation/time-planning-allocation-list";
|
||||
}
|
||||
interface RedirectToOptions extends NavigateToOptions {}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user