146 lines
4.3 KiB
Vue
146 lines
4.3 KiB
Vue
<template>
|
|
<view class="pb-3 mb-2">
|
|
<Visitor></Visitor>
|
|
<view class="bg-white mx-4 px-2 pt-3 pb-4 rounded-2 shadow-sm">
|
|
<Input
|
|
:id="0"
|
|
value="单行"
|
|
title="单行文本"
|
|
:required="true"
|
|
placeholder="单行文本"
|
|
@change="inputChange"
|
|
></Input>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<Textarea
|
|
:id="1"
|
|
title="多行文本"
|
|
:required="false"
|
|
placeholder="多行文本"
|
|
@change="textareaChange"
|
|
></Textarea>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<SelectPicker
|
|
:value="1"
|
|
:id="2"
|
|
title="单选框"
|
|
placeholder="单选"
|
|
:columns="columns"
|
|
></SelectPicker>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<SelectPicker
|
|
:value="[0]"
|
|
:id="3"
|
|
title="多选框"
|
|
placeholder="多选"
|
|
type="checkbox"
|
|
:columns="columns"
|
|
></SelectPicker>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<Input
|
|
:id="4"
|
|
type="number"
|
|
title="数字"
|
|
:required="true"
|
|
placeholder="数字"
|
|
@change="inputChange"
|
|
></Input>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<DatetimePicker :id="5" title="日期1" @change="changeDate"></DatetimePicker>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<DatetimePicker
|
|
:id="6"
|
|
title="日期2"
|
|
type="dateHalfDay"
|
|
@change="changeDate"
|
|
></DatetimePicker>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<DatetimePicker
|
|
:id="7"
|
|
type="datetime"
|
|
:value="1737043380000"
|
|
title="日期3"
|
|
@change="changeDate"
|
|
></DatetimePicker>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<Images :id="8" title="图片"></Images>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<Description
|
|
:id="9"
|
|
title="图片21378912378923718982371217389712397837889713247893428793142897134728900978"
|
|
></Description>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<NavigatorSelector :id="10" title="成员" type="member" :multiple="true"></NavigatorSelector>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<NavigatorSelector
|
|
:id="11"
|
|
title="部门"
|
|
type="department"
|
|
:multiple="true"
|
|
></NavigatorSelector>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<Leave :id="12"></Leave>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<DatetimePickerGroup :id="13" type="businessTrip" unit="date"></DatetimePickerGroup>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<DatetimePickerGroup :id="14" type="goOut" unit="dateHalfDay"></DatetimePickerGroup>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<Overtime :id="15"></Overtime>
|
|
<wd-divider color="#bcbfbe"></wd-divider>
|
|
<DatetimePicker
|
|
:id="16"
|
|
type="datetime"
|
|
required
|
|
title="补卡时间"
|
|
@change="changeDate"
|
|
></DatetimePicker>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Input from '@/pages/approval/components/Input.vue'
|
|
import Textarea from '@/pages/approval/components/Textarea.vue'
|
|
import SelectPicker from '@/pages/approval/components/SelectPicker.vue'
|
|
import DatetimePicker from '@/pages/approval/components/DatetimePicker.vue'
|
|
import Images from '@/pages/approval/components/Images.vue'
|
|
import Description from '@/pages/approval/components/Description.vue'
|
|
import NavigatorSelector from '@/pages/approval/components/NavigatorSelector.vue'
|
|
import Leave from '@/pages/approval/components/Leave.vue'
|
|
import DatetimePickerGroup from '@/pages/approval/components/DatetimePickerGroup.vue'
|
|
import Overtime from '@/pages/approval/components/Overtime.vue'
|
|
import Visitor from '@/pages/approval/components/Visitor.vue'
|
|
|
|
const columns = ref<Record<number, string>>([
|
|
{
|
|
value: 0,
|
|
label: '男装'
|
|
},
|
|
{
|
|
value: 1,
|
|
label: '奢侈品'
|
|
},
|
|
{
|
|
value: 2,
|
|
label: '女装'
|
|
}
|
|
])
|
|
|
|
const inputChange = e => {
|
|
console.log('inputChange', e)
|
|
}
|
|
|
|
const textareaChange = e => {
|
|
console.log('textareaChange', e)
|
|
}
|
|
|
|
const changeDate = e => {
|
|
console.log('changeDate', e)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wd-divider {
|
|
padding: 0 0.5rem;
|
|
}
|
|
</style>
|