90 lines
3.0 KiB
Vue
90 lines
3.0 KiB
Vue
<template>
|
|
<view class="bg-white mx-4 px-2 pb-3 pt-4.5 rounded-2 mb-2 shadow-sm">
|
|
<Input :id="0" title="访客姓名" :required="true" @change="inputChange" inline></Input>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<Input
|
|
:id="1"
|
|
title="访客手机"
|
|
:required="true"
|
|
:maxlength="11"
|
|
@change="inputChange"
|
|
inline
|
|
type="number"
|
|
></Input>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<SelectPicker required :id="2" title="访客类型" :columns="columns" inline></SelectPicker>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<NavigatorSelector :id="3" title="通行门禁点" type="accessControl" inline></NavigatorSelector>
|
|
</view>
|
|
<view class="bg-white mx-4 px-2 py-3 rounded-2 mb-2 shadow-sm">
|
|
<Keyboard :id="4" title="车牌号码" type="car" :maxlength="8" inline></Keyboard>
|
|
</view>
|
|
<view class="bg-white mx-4 px-2 pt-3 pb-2 rounded-2 mb-2 shadow-sm">
|
|
<DatetimePicker
|
|
:id="5"
|
|
ref="startDatetimePicker"
|
|
title="预约到访时间"
|
|
@change="changeDate"
|
|
type="datetime"
|
|
inline
|
|
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>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<Input :id="9" title="到访事由说明" @change="inputChange" inline></Input>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<Input :id="10" title="访问地址" @change="inputChange" inline></Input>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<Description :id="11" title="表单通过后，访客将收到断音邀请通知"></Description>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Input from '@/pages/approval/components/Input.vue'
|
|
import SelectPicker from '@/pages/approval/components/SelectPicker.vue'
|
|
import Description from '@/pages/approval/components/Description.vue'
|
|
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>>([
|
|
{
|
|
value: 0,
|
|
label: '外卖快递'
|
|
},
|
|
{
|
|
value: 1,
|
|
label: '会议洽谈'
|
|
},
|
|
{
|
|
value: 2,
|
|
label: '探亲访友'
|
|
},
|
|
{
|
|
value: 3,
|
|
label: '业务沟通'
|
|
}
|
|
])
|
|
|
|
const inputChange = e => {
|
|
console.log('inputChange', e)
|
|
}
|
|
|
|
const changeDate = e => {
|
|
// timestamp.value = e.value
|
|
console.log('changeDate', e)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wd-divider {
|
|
padding: 0 0.5rem;
|
|
}
|
|
</style>
|