sky/starwork-uniapp
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成审批访客预约套件封装+选择门禁点页面

Browse Source
This commit is contained in:
范鹏 2025-01-17 11:59:26 +08:00
parent f8be94b7a9
commit 10ce85a53d
5 changed files with 305 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages.json
View File

@ -241,7 +241,11 @@
},
{
"path": "pages/select/select-access-control",
"type": "page"
"type": "page",
"style": {
"navigationStyle": "custom",
"disableScroll": true
}
},
{
"path": "pages/select/select-organization",

9
src/pages/approval/components/NavigatorSelector.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="px-2 text-3.5">
<view v-if="inline">
<view class="flex flex-items-center pos-relative pb-1.5">
<view class="flex flex-items-center pos-relative pb-1.5" @click="toSelect">
<view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
<view>{{ title }}</view>
<view class="ml-a mr-2" :class="[text ? 'custom-color-black' : 'color-#bfbfbf']">
@ -68,7 +68,12 @@
const toSelect = () => {
if (props.type === 'accessControl') {
uni.navigateTo({
url: `/pages/select/select-access-control`
url: `/pages/select/select-access-control`,
events: {
change: res => {
console.log(1111, res)
}
}
})
} else {
const params = {

194
src/pages/approval/components/VisitDuration.vue Normal file
View File

@ -0,0 +1,194 @@
<template>
<view class="px-2 text-3.5">
<view v-if="inline">
<view class="flex flex-items-center pos-relative pb-1.5" @click="toSelect">
<view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
<view>{{ title }}</view>
<view class="ml-a mr-2" :class="[text ? 'custom-color-black' : 'color-#bfbfbf']">
{{ text || placeholder }}
</view>
<wd-icon name="arrow-right" color="rgba(0,0,0,0.25)" size="18px"></wd-icon>
</view>
</view>
<view v-else>
<view class="flex flex-items-center pos-relative">
<view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
<view>{{ title }}</view>
</view>
<view class="py-2" @click="toSelect">
<view class="flex flex-items-center flex-justify-between">
<view :class="[text ? 'custom-color-black' : 'color-#bfbfbf']">
{{ text || placeholder }}
</view>
<wd-icon name="arrow-right" color="rgba(0,0,0,0.25)" size="18px"></wd-icon>
</view>
</view>
</view>
<wd-popup v-model="show" position="bottom" custom-style="border-radius:12rpx;">
<view v-if="showDuration">
<view
class="px-4 py-2 text-3.5 border-b-1 border-[#dcdcdc] border-solid flex flex-items-center"
>
<view @click="show = false">取消</view>
<view class="font-bold text-4 flex-1 text-center">访问时长</view>
<view class="flex flex-items-center" @click="changeSelect">
<view class="custom-color-blue">自定义时间</view>
<wd-icon name="arrow-right" size="14px" class="ml-1" color="#255cf7"></wd-icon>
</view>
</view>
<scroll-view class="h-60 text-3.5" :scroll-y="true">
<view
v-for="item in durationList"
:key="item.value"
@click="changeDuration(item)"
class="py-4 px-4 flex flex-items-center"
>
<view>{{ item.label }}</view>
<view
class="bg-#f3f5fa ml-a w-12 h-6 rounded-5 flex flex-items-center flex-justify-center"
>
<wd-icon
v-if="duration === item.label"
name="check"
size="15px"
class="ml-1"
color="#255cf7"
></wd-icon>
</view>
</view>
</scroll-view>
</view>
<view v-else>
<view
class="px-4 py-2 text-3.5 border-b-1 border-[#dcdcdc] border-solid flex flex-items-center"
>
<view class="flex flex-items-center" @click="showDuration = true">
<wd-icon name="arrow-left" size="14px" class="ml-1" color="#0d0f10"></wd-icon>
<view class="custom-color-black">返回</view>
</view>
<view class="font-bold text-4 flex-1 text-center">时间选择器</view>
<wd-icon
name="close"
size="14px"
class="ml-1"
color="#0d0f10"
@click="show = false"
></wd-icon>
</view>
<wd-datetime-picker-view
:formatter="formatter"
type="datetime"
v-model="timestamp"
@change="change"
/>
</view>
<view
@click="confirm"
class="py-2.5 rounded custom-bg-blue w-90% mx-5% font-bold text-center color-white text-3.5 my-2"
>
完成
</view>
</wd-popup>
</view>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
const text = ref<string | null>(null)
const show = ref<boolean>(false)
const timestamp = ref<number>(0)
const duration = ref<string>('')
const showDuration = ref<boolean>(true)
const formatter = (type, value) => {
switch (type) {
case 'year':
return value + '年'
case 'month':
return value + '月'
case 'date':
return value + '日'
case 'hour':
return value + '时'
case 'minute':
return value + '分'
default:
return value
}
}
const props = defineProps({
id: {
type: Number,
required: true
},
required: {
type: Boolean,
default: false
},
title: {
type: String,
required: true
},
value: {
type: [String, null],
default: null
},
placeholder: {
type: String,
default: '请选择'
},
inline: {
type: Boolean,
default: false
}
})
const durationList = [
{ label: '30分钟', value: 1800000 },
{ label: '1小时', value: 3600000 },
{ label: '2小时', value: 7200000 },
{ label: '3小时', value: 10800000 },
{ label: '5小时', value: 18000000 },
{ label: '8小时', value: 28800000 },
{ label: '12小时', value: 43200000 },
{ label: '24小时', value: 86400000 }
]
onMounted(() => {
if (props.value) {
text.value = props.value
duration.value = props.value
}
})
const changeSelect = () => {
timestamp.value = new Date().getTime()
showDuration.value = false
}
const toSelect = () => {
show.value = true
}
const change = value => {
timestamp.value = value.value
duration.value = ''
}
const changeDuration = item => {
duration.value = item.label
timestamp.value = 0
}
const confirm = () => {
if (timestamp.value === 0) {
text.value = duration.value
} else {
text.value = dayjs(timestamp.value).format('YYYY-M-D HH:mm')
}
show.value = false
}
</script>

3
src/pages/approval/components/Visitor.vue
View File

@ -30,6 +30,8 @@
required
></DatetimePicker>
<wd-divider color="#bcbfbe"></wd-divider>
<VisitDuration :id="6" title="访问时长" required value="2小时" inline></VisitDuration>
<wd-divider color="#bcbfbe"></wd-divider>
<Input :id="7" title="同行人数" @change="inputChange" inline></Input>
<wd-divider color="#bcbfbe"></wd-divider>
<Input :id="8" title="访问单位" @change="inputChange" inline></Input>
@ -49,6 +51,7 @@
import Keyboard from '@/pages/approval/components/Keyboard.vue'
import DatetimePicker from '@/pages/approval/components/DatetimePicker.vue'
import NavigatorSelector from '@/pages/approval/components/NavigatorSelector.vue'
import VisitDuration from '@/pages/approval/components/VisitDuration.vue'
const columns = ref<Record<number, string>>([
{

99
src/pages/select/select-access-control.vue
View File

@ -1,7 +1,100 @@
<route lang="json5">
{
style: {
navigationStyle: 'custom',
disableScroll: true
}
}
</route>
<template>
<view></view>
<view class="h-100vh flex flex-col">
<TopNavigation class="bg-white" title="选择门禁点"></TopNavigation>
<scroll-view class="flex-1 box-border text-3.5 custom-color-black border-1" :scroll-y="true">
<wd-checkbox-group v-model="value" size="large" @change="change">
<view class="px-4 py-1.5 bg-white mb-2">
<wd-checkbox :modelValue="item.id" v-for="item in permissionList" :key="item.id">
<view class="flex flex-items-center">
<view
class="w-10 h-10 flex flex-justify-center flex-items-center bg-#e4f1ff rounded-2"
>
<image src="/static/images/icon_file.png" class="w-6 h-6" mode="aspectFill"></image>
</view>
<view class="ml-2">{{ item.name }}</view>
</view>
</wd-checkbox>
</view>
<view
v-for="(item, index) in list"
:key="item.id"
class="bg-white border-#eef0f5 border-b-solid"
:class="[index === list.length - 1 ? 'border-b-0' : 'border-b-1']"
>
<wd-checkbox :modelValue="item.id" class="py-1.5 px-4">
<view class="flex flex-items-center">
<image
src="https://file.hikmall.com/prod/image/69c3851d052e493ebb6e7c2e7a189b61.png"
class="w-10 h-10"
></image>
<view class="ml-2">{{ item.name }}</view>
</view>
</wd-checkbox>
</view>
</wd-checkbox-group>
</scroll-view>
<view class="pb-safe border-#eef0f5 border-t-solid border-1 flex flex-items-center">
<view
@click="confirm"
class="opacity-60% w-90% py-2 mx-5% text-center custom-bg-blue color-white rounded-2 my-3"
>
确定
</view>
</view>
</view>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
const instance = getCurrentInstance().proxy
const eventChannel = instance.getOpenerEventChannel()
<style scoped lang="scss"></style>
const value = ref<number[]>([])
const selected = ref<Array>([])
const permissionList = [
{
name: '[访客类型]权限组',
id: 0
}
]
const list = [
{
name: 'DS-K(FU6004429)',
id: 1
},
{
name: 'DS-K(L40959329)',
id: 2
}
]
const change = value => {
selected.value = []
selected.value.push(...permissionList.filter(item => value.value.includes(item.id)))
selected.value.push(...list.filter(item => value.value.includes(item.id)))
}
const confirm = () => {
eventChannel.emit('change', { value: selected.value })
uni.navigateBack()
}
</script>
<style scoped lang="scss">
.wd-checkbox-group {
background-color: transparent;
}
.wd-checkbox {
margin-bottom: 0;
}
</style>