Skip to content

M
mocp-uniapp
Commit 0fa8be33 by pangchong
Options

feat: 全局下拉框和日期组件修改

parent e539d854
Showing with 282 additions and 77 deletions
components.d.ts
......@@ -9,6 +9,7 @@ declare module 'vue' {
export interface GlobalComponents {
// 全局组件
GlobalButton: typeof import('./src/components/global-button/global-button.vue')['default']
GlobalDate: typeof import('./src/components/global-date/global-date.vue')['default']
GlobalEmpty: typeof import('./src/components/global-empty/global-empty.vue')['default']
GlobalField: typeof import('./src/components/global-field/global-field.vue')['default']
GlobalIcon: typeof import('./src/components/global-icon/global-icon.vue')['default']
......
src/components/global-date/global-date.vue 0 → 100644
<template>
<!-- 全局日期控件 -->
<view class="date">
<up-datetime-picker
:show="show"
v-model="defaultValue"
:mode="mode"
@confirm="confirm"
closeOnClickOverlay
@close="show = false"
@cancel="show = false"
:cancelText="cancelText"
:confirmText="confirmText"
:cancelColor="cancelColor"
:confirmColor="confirmColor"
></up-datetime-picker>
<view class="date-content" :class="getPickerClass" @tap="show = true" :style="getStyle">
<text class="date-value">{{ getLabelValue }}</text>
<view class="date-icon">
<view class="date-icon-close" v-if="clearable && !showPlaceholder && !disabled" @tap.stop="clear">
<up-icon name="close-circle-fill" color="#c0c4cc" size="36rpx"></up-icon>
</view>
<global-icon icon="calendar" color="#86909C"></global-icon>
</view>
</view>
</view>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
import Day from '@/utils/dayjs'
const es = defineEmits(['update:modelValue', 'change'])
const ps = defineProps({
//日历模式date,time,year-month
mode: {
type: String,
default: 'date'
},
//显示为空的value值
emptyValue: {
type: [String, Number],
default: ''
},
modelValue: {
type: [String, Number],
default: ''
},
clearable: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: '请选择'
},
disabled: {
type: Boolean,
default: false
},
pickAlign: {
type: String,
default: 'left'
},
format: {
type: String,
default: 'YYYY-MM-DD'
},
cancelText: {
type: String,
default: '取消'
},
confirmText: {
type: String,
default: '确认'
},
cancelColor: {
type: String,
default: '#909193'
},
confirmColor: {
type: String,
default: '#165dff'
}
})
//获取下拉框样式
const getStyle = computed(() => {
let pickAlign = 'flex-start'
if (ps.pickAlign == 'center') {
pickAlign = 'center'
} else if (ps.pickAlign == 'right') {
pickAlign = 'flex-end'
}
return {
justifyContent: pickAlign
}
})
//下拉框显示的内容
const labelValue = ref('')
const getLabelValue = computed(() => {
if (labelValue.value) {
return Day(labelValue.value).format(ps.format)
} else {
return ps.placeholder
}
})
//获取下拉框class
const showPlaceholder = computed(() => {
return !labelValue.value || labelValue.value == ps.emptyValue
})
const getPickerClass = computed(() => {
return {
disabled: ps.disabled,
placeholder: showPlaceholder.value
}
})
const show = ref(false)
//设置初始值
const defaultValue = ref()
watch(
() => ps.modelValue,
() => {
if (ps.modelValue != ps.emptyValue) {
labelValue.value = parseInt(ps.modelValue)
defaultValue.value = parseInt(ps.modelValue)
} else {
defaultValue.value = Day().valueOf()
}
},
{ immediate: true }
)
//点击确定按钮
const confirm = (e) => {
show.value = false
labelValue.value = e.value
defaultValue.value = e.value
es('update:modelValue', String(defaultValue.value))
es('change', String(defaultValue.value))
}
//点击清空按钮
const clear = () => {
labelValue.value = ''
defaultValue.value = ''
es('update:modelValue', ps.emptyValue)
es('change', ps.emptyValue)
}
</script>
<style lang="scss" scoped>
.date {
flex: auto;
&-content {
display: flex;
align-items: center;
line-height: 48rpx;
&.placeholder {
.date-value {
color: $uni-text-3;
}
}
&.disabled {
background: #f5f7fa;
}
}
&-value {
color: $uni-text-4;
margin-right: 8rpx;
}
&-icon {
display: flex;
align-items: center;
&-close {
margin-left: 4rpx;
}
}
}
</style>
src/components/global-picker/global-picker.vue
<template>
<!-- 全局下拉框 -->
<picker
:mode="mode"
:range="getRange"
@change="onChange"
:disabled="disabled"
:value="mode == 'selector' ? getPickerValue : getVal"
style="flex: auto"
>
<view class="picker" :class="{ placeholder: !!getVal, disabled }" :style="getStyle">
<text class="picker-value">{{ getVal }}</text>
<!-- 全局下拉框控件 -->
<view class="picker">
<up-picker
:show="show"
:columns="[getColumns]"
:keyName="labelField"
@confirm="confirm"
closeOnClickOverlay
@close="show = false"
@cancel="show = false"
:defaultIndex="[defaultIndex]"
:cancelText="cancelText"
:confirmText="confirmText"
:cancelColor="cancelColor"
:confirmColor="confirmColor"
></up-picker>
<view class="picker-content" :class="getPickerClass" @tap="show = true" :style="getStyle">
<text class="picker-value">{{ getLabelValue }}</text>
<view class="picker-icon">
<view class="picker-icon-close" v-if="clearable && selectedValue && !disabled" @tap.stop="clear">
<view class="picker-icon-close" v-if="clearable && !showPlaceholder && !disabled" @tap.stop="clear">
<up-icon name="close-circle-fill" color="#c0c4cc" size="36rpx"></up-icon>
</view>
<up-icon name="arrow-right" color="#86909C" size="36rpx" v-if="mode == 'selector'"></up-icon>
<global-icon icon="calendar" color="#86909C" v-else></global-icon>
<up-icon name="arrow-right" color="#86909C" size="36rpx"></up-icon>
</view>
</view>
</picker>
</view>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
import * as dictData from './dictData'
import { cloneDeep } from 'lodash'
import Day from '@/utils/dayjs'
const es = defineEmits(['update:modelValue', 'change'])
const ps = defineProps({
// selector,date
mode: {
type: String,
default: 'selector'
},
//显示为空的value值
emptyValue: {
type: [String, Number],
......@@ -49,7 +49,9 @@ const ps = defineProps({
},
options: {
type: Array,
default: () => []
default: () => {
return []
}
},
clearable: {
type: Boolean,
......@@ -74,8 +76,25 @@ const ps = defineProps({
disabled: {
type: Boolean,
default: false
},
cancelText: {
type: String,
default: '取消'
},
confirmText: {
type: String,
default: '确认'
},
cancelColor: {
type: String,
default: '#909193'
},
confirmColor: {
type: String,
default: '#165dff'
}
})
//获取下拉框样式
const getStyle = computed(() => {
let pickAlign = 'flex-start'
if (ps.pickAlign == 'center') {
......@@ -87,8 +106,26 @@ const getStyle = computed(() => {
justifyContent: pickAlign
}
})
//获取options
const getOptions = computed(() => {
//下拉框显示的内容
const labelValue = ref('')
const getLabelValue = computed(() => {
return labelValue.value || ps.placeholder
})
//获取下拉框class
const showPlaceholder = computed(() => {
return !labelValue.value || labelValue.value == ps.emptyValue
})
const getPickerClass = computed(() => {
return {
disabled: ps.disabled,
placeholder: showPlaceholder.value
}
})
const show = ref(false)
//设置下拉框打开的默认值
const defaultIndex = ref(0)
//获取下拉框的内容Columns
const getColumns = computed(() => {
if (ps.dictkey) {
return cloneDeep(dictData[ps.dictkey])
} else {
......@@ -104,75 +141,58 @@ const getOptions = computed(() => {
}
}
})
const selectedValue = ref('') //显示的内容
//监听设置labelValue的值
watch(
[() => ps.modelValue, () => ps.options],
() => {
if (ps.mode == 'selector') {
const option = getOptions.value.find((option) => String(option[ps.valueField]) === String(ps.modelValue))
if (option) {
selectedValue.value = option[ps.labelField]
} else {
selectedValue.value = ''
}
const option = getColumns.value.find((option) => String(option[ps.valueField]) === String(ps.modelValue))
const index = getColumns.value.findIndex((option) => String(option[ps.valueField]) === String(ps.modelValue))
if (option) {
labelValue.value = option[ps.labelField]
defaultIndex.value = index
} else {
selectedValue.value = ps.modelValue
labelValue.value = ''
defaultIndex.value = 0
}
},
{ immediate: true }
)
const getRange = computed(() => {
return getOptions.value.map((option) => option[ps.labelField])
})
const onChange = (event) => {
if (ps.mode == 'selector') {
const index = event.detail.value
selectedValue.value = getOptions.value[index][ps.labelField]
const value = getOptions.value[index][ps.valueField] !== '' ? getOptions.value[index][ps.valueField] : ps.emptyValue
es('update:modelValue', value)
es('change', value)
} else {
selectedValue.value = String(Day(event.detail.value).valueOf())
es('update:modelValue', selectedValue.value || ps.emptyValue)
es('change', selectedValue.value || ps.emptyValue)
}
//点击确定按钮
const confirm = (e) => {
show.value = false
const index = e.indexs[0]
labelValue.value = getColumns.value[index][ps.labelField]
es('update:modelValue', getColumns.value[index][ps.valueField])
es('change', getColumns.value[index][ps.valueField])
}
const getVal = computed(() => {
if (ps.mode == 'selector') {
return selectedValue.value || ps.placeholder
} else {
//日期
return uni.$tool.timeStampFormat(selectedValue.value, { format: 'YYYY-MM-DD' }) || ps.placeholder
}
})
const getPickerValue = computed(() => {
const index = getOptions.value.findIndex((option) => String(option[ps.valueField]) === String(ps.modelValue))
return index > 0 ? index : 0
})
//清空值
//点击清空按钮
const clear = () => {
selectedValue.value = ''
labelValue.value = ''
defaultIndex.value = 0
es('update:modelValue', ps.emptyValue)
es('change', ps.emptyValue)
}
</script>
<style lang="scss" scoped>
.picker {
line-height: 48rpx;
display: flex;
align-items: center;
flex: auto;
&-content {
display: flex;
align-items: center;
line-height: 48rpx;
&.placeholder {
.picker-value {
color: $uni-text-3;
}
}
&.disabled {
background: #f5f7fa;
}
}
&-value {
color: $uni-text-4;
margin-right: 8rpx;
}
&.placeholder {
color: $uni-text-3;
}
&.disabled {
background: #f5f7fa;
}
&-icon {
display: flex;
align-items: center;
......
src/pages/panel/appraisal-record/edit.vue
......@@ -34,7 +34,7 @@
<up-input border="none" inputAlign="right" clearable v-model="formData.acType" disabled disabledColor="#fff"></up-input>
</up-form-item>
<up-form-item label="日期" :borderBottom="true" required prop="eventTime">
<global-picker pickAlign="right" clearable v-model="formData.eventTime" mode="date" :emptyValue="-1"></global-picker>
<global-date pickAlign="right" clearable v-model="formData.eventTime" :emptyValue="-1"></global-date>
</up-form-item>
<up-form-item label="事件描述" :borderBottom="true" labelPosition="top">
<up-textarea
......
src/pages/panel/assign-work/edit-decompose.vue
......@@ -20,7 +20,7 @@
></up-textarea>
</up-form-item>
<up-form-item label="完成时限" :borderBottom="true">
<global-picker pickAlign="right" clearable mode="date" :emptyValue="-1" placeholder="请选择日期"></global-picker>
<global-date pickAlign="right" clearable :emptyValue="-1" placeholder="请选择日期"></global-date>
</up-form-item>
</view>
<view class="form">
......@@ -33,7 +33,7 @@
></up-textarea>
</up-form-item>
<up-form-item label="完成时限" :borderBottom="true">
<global-picker pickAlign="right" clearable mode="date" :emptyValue="-1" placeholder="请选择日期"></global-picker>
<global-date pickAlign="right" clearable :emptyValue="-1" placeholder="请选择日期"></global-date>
</up-form-item>
</view>
</up-form>
......
src/pages/panel/assign-work/edit-work.vue
......@@ -79,6 +79,9 @@
<up-form-item label="计划完成时间" :borderBottom="true">
<global-picker pickAlign="right" clearable mode="date" :emptyValue="-1" placeholder="请选择日期"></global-picker>
</up-form-item>
<up-form-item label="计划完成时间" :borderBottom="true">
<global-select pickAlign="right" v-model="selectValue" clearable></global-select>
</up-form-item>
</view>
</view>
</up-form>
......@@ -87,11 +90,16 @@
</template>
<script setup>
import { ref } from 'vue'
import { ref, watch } from 'vue'
const goTo = () => {
uni.navigateTo({ url: 'edit-decompose' })
}
const selectValue = ref('')
watch(selectValue, (value) => {
console.log(value)
})
//开关
const value = ref(true)
const change = (e) => {
console.log(e)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment