From 00814401bba75825126baa6675e542ea3c82a5bb Mon Sep 17 00:00:00 2001 From: cuiqian2004 <cuiqian2004@163.com> Date: 星期五, 14 三月 2025 12:19:39 +0800 Subject: [PATCH] 日期 --- uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue | 1064 +++++++++ pages/modal/3018_2.vue | 265 +- uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hans.json | 22 pages/modal/3200_view.vue | 231 - uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js | 421 +++ components/oi-date-time-picker/index.js | 8 pages/modal/5601.vue | 834 ++---- pages/modal/3037_2.vue | 646 ++++- uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json | 22 components/oi-date-time-picker/oi-time-picker.vue | 128 + uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue | 940 ++++++++ pages/modal/form/index.vue | 67 uni_modules/uni-datetime-picker/readme.md | 21 uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue | 177 + components/oi-date-time-picker/oi-date-picker.vue | 137 + uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue | 947 ++++++++ uni_modules/uni-datetime-picker/changelog.md | 168 + package.json | 1 components/oi-date-time-picker/oi-date-picker-range.vue | 126 + pages/modal/3200.vue | 249 +- uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hant.json | 22 uni_modules/uni-datetime-picker/package.json | 88 pages/login/index.vue | 12 uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js | 8 package-lock.json | 11 25 files changed, 5,509 insertions(+), 1,106 deletions(-) diff --git a/components/oi-date-time-picker/index.js b/components/oi-date-time-picker/index.js new file mode 100644 index 0000000..e4dd950 --- /dev/null +++ b/components/oi-date-time-picker/index.js @@ -0,0 +1,8 @@ +import OIDatePicker from './oi-date-picker.vue' +import OIDatePickerRange from './oi-date-picker-range.vue' +import OITimePicker from './oi-time-picker.vue' +export default { + OIDatePicker, + OIDatePickerRange, + OITimePicker +} \ No newline at end of file diff --git a/components/oi-date-time-picker/oi-date-picker-range.vue b/components/oi-date-time-picker/oi-date-picker-range.vue new file mode 100644 index 0000000..69676ba --- /dev/null +++ b/components/oi-date-time-picker/oi-date-picker-range.vue @@ -0,0 +1,126 @@ +<template> + <uni-datetime-picker type="daterange" v-model="displayValue" :start="start" :end="end" :returnType="returnType" + :placeholder="placeholder" :startPlaceholder="startPlaceholder" :endPlaceholder="endPlaceholder" + :rangeSeparator="rangeSeparator" :border="border" :disabled="disabled" :clearIcon="clearIcon" + @change="onChange" /> +</template> + +<script> + import dayjs from "dayjs"; + export default { + name: 'OIDatePickerRange', + props: { + modelValue: { + type: [String, Number, Array, Date], + default: '' + }, + start: { + type: [Number, String], + default: '' + }, + end: { + type: [Number, String], + default: '' + }, + returnType: { + type: String, + default: 'string' + }, + placeholder: { + type: String, + default: '' + }, + startPlaceholder: { + type: String, + default: '' + }, + endPlaceholder: { + type: String, + default: '' + }, + rangeSeparator: { + type: String, + default: '-' + }, + border: { + type: [Boolean], + default: true + }, + disabled: { + type: [Boolean], + default: false + }, + clearIcon: { + type: [Boolean], + default: true + }, + format: { + type: String, + default: '' + } + }, + data() { + return { + displayValue: "", + } + }, + methods: { + toDate(t) { + if (!t) return undefined; + else if (typeof t == "string") { + if (t.includes(",")) return this.toDate(t.split(",")); + else return this.toDate([t, t]); + } else if (t instanceof Array) { + let dt = []; + let d0 = t[0]; + let d1 = t[1]; + if (!d0 && !d1) return undefined; + else if (!d0) return undefined; + else if (!d1) d1 = d0; + + let dt0 = new Date(dayjs(d0).format("YYYY-MM-DD")); + let dt1 = new Date(dayjs(d1).format("YYYY-MM-DD")); + return [dt0, dt1]; + } + }, + onChange(val) { + if (val instanceof Array) { + let format = "YYYY-MM-DD"; + if (this.format) + format = this.format + .replace(/y/g, "Y") + .replace(/m/g, "M") + .replace(/d/g, "D"); + let dt = []; + let d0 = val[0]; + let d1 = val[1]; + if (!d0 && !d1) return undefined; + else if (!d0) return undefined; + else if (!d1) d1 = d0; + let dt0 = dayjs(d0).format(format); + let dt1 = dayjs(d1).format(format); + + this.$emit("update:modelValue", [dt0, dt1]) + this.$emit('input', [dt0, dt1]) + this.$emit("change", [dt0, dt1]) + } + }, + }, + watch: { + // #ifndef VUE3 + value(val) { + this.displayValue = this.toDate(val); + }, + // #endif + // #ifdef VUE3 + modelValue(val) { + this.displayValue = this.toDate(val); + }, + // #endif + }, + + } +</script> + +<style> +</style> \ No newline at end of file diff --git a/components/oi-date-time-picker/oi-date-picker.vue b/components/oi-date-time-picker/oi-date-picker.vue new file mode 100644 index 0000000..2aa55ab --- /dev/null +++ b/components/oi-date-time-picker/oi-date-picker.vue @@ -0,0 +1,137 @@ +<template> + <uni-datetime-picker type="date" v-model="displayValue" :start="start" :end="end" :returnType="returnType" + :placeholder="placeholder" :border="border" :disabled="disabled" :clearIcon="clearIcon" @change="onChange" /> +</template> + +<script> + import dayjs from "dayjs"; + export default { + name: 'OIDatePicker', + emits: ['update:modelValue', 'clear'], + props: { + value: { + type: [String, Number, Date], + default: '' + }, + modelValue: { + type: [String, Number, Date], + default: '' + }, + + start: { + type: [Number, String], + default: '' + }, + end: { + type: [Number, String], + default: '' + }, + returnType: { + type: String, + default: 'string' + }, + placeholder: { + type: String, + default: '' + }, + border: { + type: [Boolean], + default: true + }, + disabled: { + type: [Boolean], + default: false + }, + clearIcon: { + type: [Boolean], + default: true + }, + hideSecond: { + type: [Boolean], + default: false + }, + format: { + type: String, + default: '' + }, + defaultToday: { + type: Boolean, + default: false + } + }, + data() { + return { + displayValue: "", + } + }, + methods: { + onChange(date) { + + let format = "YYYY-MM-DD"; + if (this.format) + format = this.format + .replace(/y/g, "Y") + .replace(/m/g, "M") + .replace(/d/g, "D"); + let date2 = dayjs(date).format(format); + console.log(date, this.displayValue, date2) + + this.$emit("update:modelValue", date2) + this.$emit('input', date2) + this.$emit("change", date2) + }, + checkDefaultDate() { + let format = "YYYY-MM-DD"; + if (this.format) + format = this.format + .replace(/y/g, "Y") + .replace(/m/g, "M") + .replace(/d/g, "D"); + if (this.defaultToday && !this.value) { + this.displayValue = dayjs().format("YYYY-MM-DD"); + let date = dayjs(this.displayValue).format(format); + this.$emit("update:modelValue", date) + this.$emit('input', date) + this.$emit("change", date) + } + }, + }, + mounted() { + this.checkDefaultDate(); + }, + watch: { + // #ifndef VUE3 + + value: { + immediate: true, + handler(newVal) { + if (newVal) { + this.displayValue = dayjs(newVal).format("YYYY-MM-DD"); + } else { + this.displayValue = '' + } + }, + }, + // #endif + // #ifdef VUE3 + modelValue: { + immediate: true, + handler(newVal) { + console.log(newVal) + if (newVal) { + this.displayValue = dayjs(newVal).format("YYYY-MM-DD"); + } else { + this.displayValue = '' + } + }, + + }, + + // #endif + + }, + } +</script> + +<style> +</style> \ No newline at end of file diff --git a/components/oi-date-time-picker/oi-time-picker.vue b/components/oi-date-time-picker/oi-time-picker.vue new file mode 100644 index 0000000..f2586a3 --- /dev/null +++ b/components/oi-date-time-picker/oi-time-picker.vue @@ -0,0 +1,128 @@ +<template> + <view class="oi-time-picker"> + <picker mode="time" :disabled="disabled" @change="onChange"> + <view class="oi-time-picker-x" + :class="{'oi-time-picker-disabled': disabled,'oi-time-picker-border': border}"> + <uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons> + <view class="oi-time-picker-input">{{displayValue}}</view> + </view> + </picker> + </view> +</template> +<script> + import dayjs from "dayjs"; + export default { + name: 'OITimePicker', + props: { + value: { + type: String, + default: '' + }, + modelValue: { + type: [String, Number], + default: '' + }, + placeholder: { + type: String, + default: '' + }, + border: { + type: [Boolean], + default: true + }, + disabled: { + type: [Boolean], + default: false + }, + format: { + type: String, + default: '' + }, + + }, + data() { + return { + displayValue: "", + } + }, + methods: { + onChange(e) { + this.displayValue = e.detail.value + console.log(this.displayValue, e.detail) + this.$emit('update:modelValue', this.displayValue) + this.$emit('input', this.displayValue) + this.$emit("change", this.displayValue) + }, + + }, + mounted() { + + }, + watch: { + // #ifndef VUE3 + value(val) { + this.displayValue = val + }, + // #endif + // #ifdef VUE3 + modelValue(val) { + this.displayValue = val + }, + // #endif + + }, + } +</script> + +<style lang="scss"> + .oi-time-picker { + + width: 100%; + flex: 1; + + .oi-time-picker-x { + + + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + border-radius: 4px; + background-color: #fff; + color: #666; + font-size: 14px; + flex: 1; + + + + .icon-calendar { + padding-left: 3px; + } + + .oi-time-picker-input { + width: auto; + height: 35px; + /* #ifndef MP */ + padding-left: 5px; + /* #endif */ + position: relative; + flex: 1; + line-height: 35px; + font-size: 14px; + overflow: hidden; + } + + } + + .oi-time-picker-disabled { + opacity: 0.4; + cursor: default; + } + + .oi-time-picker-border { + box-sizing: border-box; + border-radius: 4px; + border: 1px solid #e5e5e5; + } + } +</style> \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 89a1886..60cf0f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "packages": { "": { "dependencies": { + "dayjs": "^1.11.13", "vue-i18n": "^9.13.1" } }, @@ -211,6 +212,11 @@ "resolved": "https://r.cnpmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "peer": true + }, + "node_modules/dayjs": { + "version": "1.11.13", + "resolved": "https://r.cnpmjs.org/dayjs/-/dayjs-1.11.13.tgz", + "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==" }, "node_modules/entities": { "version": "4.5.0", @@ -509,6 +515,11 @@ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "peer": true }, + "dayjs": { + "version": "1.11.13", + "resolved": "https://r.cnpmjs.org/dayjs/-/dayjs-1.11.13.tgz", + "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==" + }, "entities": { "version": "4.5.0", "resolved": "https://r.cnpmjs.org/entities/-/entities-4.5.0.tgz", diff --git a/package.json b/package.json index 7b1afdb..a860e43 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "dependencies": { + "dayjs": "^1.11.13", "vue-i18n": "^9.13.1" } } diff --git a/pages/login/index.vue b/pages/login/index.vue index bba6b7e..1cb579e 100644 --- a/pages/login/index.vue +++ b/pages/login/index.vue @@ -403,8 +403,7 @@ } }, - onClickWms() - { + onClickWms() { let otherAppSchemeURL = "testapp://pages/index/index"; // 鏇挎崲涓虹洰鏍嘺pp鐨剆cheme URL plus.runtime.openURL(otherAppSchemeURL, function(error) { console.error('鎵撳紑搴旂敤澶辫触: ', error); @@ -421,14 +420,7 @@ }, onLoad(options) { //鑾峰彇mac鍦板潃 - let tip=`login:account:${options.account || ""},password:${options.password || ""}` - // console.log(options); - uni.showModal({ - title: "鍙傛暟", - content: tip, - showCancel: false, - confirmText:'close' - }); + var url = utils.session.getValue('server'); var username = utils.session.getValue('account'); var userpwd = utils.session.getValue('password'); diff --git a/pages/modal/3018_2.vue b/pages/modal/3018_2.vue index 56d6ed0..29fca4f 100644 --- a/pages/modal/3018_2.vue +++ b/pages/modal/3018_2.vue @@ -12,7 +12,7 @@ <uni-data-select id="dv_select" v-if="item.name=='Select'" :style="'width: calc(100% - '+item.labelWidth-10+'px);'" :class="item.disabled?'input-disabled':''" v-model="item.value" :localdata="item.dict" - @change="onChange(item)" :disabled="item.disabled" :clear="false"></uni-data-select> + @change="onEnterChange(item)" :disabled="item.disabled" :clear="false"></uni-data-select> <!-- 鏂囨湰妗�鏁板瓧妗�--> <view class="input-wrapper" v-if="(item.name=='Input' || item.name=='InputNumber')"> <text v-if="item.setting.prefix" class="uni-icon" :class="[item.setting.prefix]" @@ -22,22 +22,22 @@ v-model="item.value" :disabled="item.disabled" :placeholder="item.placeholder" :style="{'padding-left':item.setting.prefix?0 : '8rpx','right':item.setting.suffix?0 : '8rpx'}" :focus="focusFieldId == item.fieldId" @focus="ontap(item)" @click="onClick(item)" - @keyup.enter="onModelValue(item)" @blur="onModelValue(item)" :maxlength="-1" /> + @keyup.enter="onEnterChange(item)" @blur="onEnterChange(item)" :maxlength="-1" /> <text v-if="item.setting.suffix" class="uni-icon" :class="[item.setting.suffix]" @click="classAttr_extButton(item)"></text> </view> <!-- 澶氳鏂囨湰 --> <view class="input-wrapper" v-if="item.name=='Textarea' "> - <textarea class="uni-input" :class="item.disabled?'input-disabled':''" :value="item.value" + <textarea class="uni-input" :class="item.disabled?'input-disabled':''" v-model="item.value" :focus="focusFieldId == item.fieldId" :placeholder="item.placeholder" - @blur="onModelValue(item)" @click="onClick(item)" :data-index="index" + @blur="onEnterChange(item)" @click="onClick(item)" :data-index="index" style="height:60px;" :style="{'width':'96%'}" :disabled="item.disabled"></textarea> </view> <!-- 澶嶉�妗�--> <checkbox-group class="check_rememberPwd" v-if="item.name=='Checkbox'" :class="item.disabled?'input-disabled':''" :disabled="item.disabled" - @change="onCheckBoxValue" :data-attr="item.fieldId"> + @change="onCheckBoxValue" :data-attr="item.fieldId" :data-index="index"> <label v-for="(item2) in item.selections" :key="item2.value"> <checkbox :value="item2.value" :checked="item.value.includes(item2.value)" /> <text>{{item2.label}}</text> @@ -46,7 +46,7 @@ <!-- 鍗曢�妗�--> <radio-group class="check_rememberPwd" v-if="item.name=='Radio'" :class="item.disabled?'input-disabled':''" :disabled="item.disabled" - @change="onRadioBoxValue" :data-attr="item.fieldId"> + @change="onRadioBoxValue" :data-attr="item.fieldId" :data-index="index"> <label v-for="(item2) in item.selections" :key="item2.value"> <radio :value="item2.value" :checked="item2.value === item.value" /> <text>{{item2.label}}</text> @@ -57,12 +57,23 @@ :class="item.disabled?'input-disabled':''" :disabled="item.disabled" v-model="item.value" @change="onModelValue(item)" /> <!-- 鏃ユ湡鏃堕棿 --> - <view class="input-wrapper" v-if="(item.name=='TimePicker' || item.name=='DatePicker')"> + <!-- <view class="input-wrapper" v-if="(item.name=='TimePicker' || item.name=='DatePicker')"> <picker mode="date" class="date_iput" :class="item.disabled?'input-disabled':''" :disabled="item.disabled" :value="item.value" @change="onModelValue(item)"> <view class="picker">{{item.value}}</view> </picker> - </view> + </view> --> + <OIDatePicker v-if="item.name=='DatePicker'" :class="item.disabled?'input-disabled':''" + :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" + :defaultToday="item.setting.defaultToday" :format="item.setting.format" + @change="onModelValue(item)" /> + <OIDatePickerRange v-if="item.name=='DatePickerRange'" :rangeSeparator="item.setting.separator" + :format="item.setting.format" :class="item.disabled?'input-disabled':''" + :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" + @change="onModelValue(item)" /> + <OITimePicker v-if="item.name=='TimePicker'" :class="item.disabled?'input-disabled':''" + :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" + @change="onModelValue(item)" /> </uni-forms-item> <!-- 鏍呮牸甯冨眬 --> <uni-row class="demo-uni-row" v-if="item.name=='Layout'"> @@ -78,27 +89,29 @@ v-model="cols.value" :disabled="cols.disabled" :placeholder="cols.placeholder" :style="{'padding-left':cols.setting.prefix?0 : '8px','right':cols.setting.suffix?0 : '8px'}" :focus="focusFieldId == cols.fieldId" @focus="ontap(cols)" - @click="onClick(cols)" @blur="onevent(cols)" :maxlength="-1" /> + @click="onClick(cols)" @keyup.enter="onEnterChange(cols)" + @blur="onEnterChange(cols)" :maxlength="-1" /> <text v-if="cols.setting.suffix" class="uni-icon" :class="[cols.setting.suffix]" @click="classAttr_extButton(cols)"></text> </view> <!-- 涓嬫媺妗�鍗曢� cols.useDict?cols.dict:cols.selections--> <uni-data-select id="dv_select" v-if="cols.name=='Select' " :class="cols.disabled?'input-disabled':''" v-model="cols.value" - :localdata="cols.dict" @change="onChange(cols)" :disabled="cols.disabled" + :localdata="cols.dict" @change="onEnterChange(cols)" :disabled="cols.disabled" :clear="false"></uni-data-select> <!-- 澶氳鏂囨湰 --> <view class="input-wrapper" v-if="cols.name=='Textarea' "> - <textarea class="uni-input" :value="cols.value" + <textarea class="uni-input" v-model="cols.value" :class="cols.disabled?'input-disabled':''" :placeholder="cols.placeholder" - :focus="focusFieldId == cols.fieldId" @blur="onModelValue(cols)" + :focus="focusFieldId == cols.fieldId" @blur="onEnterChange(cols)" @click="onClick(cols)" style="height:60px;" :style="{'width':'96%'}" :disabled="cols.disabled"></textarea> </view> <!-- 澶嶉�妗�--> <checkbox-group class="check_rememberPwd" v-if="cols.name=='Checkbox'" :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" - @change="onCheckBoxValue" :data-attr="cols.fieldId"> + @change="onCheckBoxValue" :data-attr="cols.fieldId" :data-index="index" + :data-iindex="key"> <label v-for="(cols2) in cols.selections" :key="cols2.value"> <checkbox :value="cols2.value" :checked="cols.value.includes(cols2.value)" /> <text>{{cols2.label}}</text> @@ -107,7 +120,8 @@ <!-- 鍗曢�妗�--> <radio-group class="check_rememberPwd" v-if="cols.name=='Radio'" :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" - @change="onRadioBoxValue" :data-attr="cols.fieldId"> + @change="onRadioBoxValue" :data-attr="cols.fieldId" :data-index="index" + :data-iindex="key"> <label v-for="(cols2) in cols.selections" :key="cols2.value"> <radio :value="cols2.value" :checked="cols2.value === cols.value" /> <text>{{cols2.label}}</text> @@ -118,15 +132,27 @@ :disabled="cols.disabled" v-model="cols.value" @change="onModelValue(cols)" :style="{'margin-left':'10rpx'}" /> <!-- 鏃ユ湡鏃堕棿 --> - <view class="input-wrapper" + <!-- <view class="input-wrapper" v-if="(cols.name=='TimePicker' || cols.name=='DatePicker') && !cols.disabled"> <picker mode="date" class="date_iput" :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" :value="cols.value" @change="onModelValue(cols)"> <view class="picker">{{cols.value}}</view> </picker> - </view> - + </view> --> + <OIDatePicker v-if="cols.name=='DatePicker'" :class="cols.disabled?'input-disabled':''" + :disabled="cols.disabled" v-model="cols.value" :placeholder="cols.placeholder" + :defaultToday="cols.setting.defaultToday" :format="cols.setting.format" + @change="onModelValue(cols)" /> + <OIDatePickerRange v-if="cols.name=='DatePickerRange'" + :rangeSeparator="cols.setting.separator" :format="cols.setting.format" + :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" + v-model="cols.value" :placeholder="cols.placeholder" @change="onModelValue(cols)" /> + <OITimePicker v-if="cols.name=='TimePicker'" :class="cols.disabled?'input-disabled':''" + :disabled="cols.disabled" v-model="cols.value" :placeholder="cols.placeholder" + @change="onModelValue(cols)" /> </uni-forms-item> + <uni-forms-item v-else label=""></uni-forms-item> + </uni-col> </uni-row> </view> @@ -178,6 +204,11 @@ <script> import Base64 from '../../components/js-base64/base64.js' import utils from "@/js/utils.js" + import dayjs from "dayjs"; + import OIDatePicker from '@/components/oi-date-time-picker/oi-date-picker.vue' + import OIDatePickerRange from '@/components/oi-date-time-picker/oi-date-picker-range.vue' + import OITimePicker from '@/components/oi-date-time-picker/oi-time-picker.vue' + import { appGetInfo, dictGetInfo @@ -191,6 +222,11 @@ export default { modules: { Base64, + }, + components: { + OIDatePicker, + OIDatePickerRange, + OITimePicker }, data() { return { @@ -394,8 +430,7 @@ //鏈夐粯璁ゅ�锛屾樉绀洪粯璁ゅ� let itemName = ele.value || ""; if (itemName) { - styledefHead.form - .model[ele.fieldId] = itemName; + styledefHead.form.model[ele.fieldId] = itemName; } ele.dict = selections.map((a) => { return { @@ -403,9 +438,7 @@ text: a.label } }) - } - } if ($this.focusFieldId == "") { if (ele.name == 'Input' || ele.name == @@ -441,10 +474,7 @@ text: a.label } }) - - } - } if ($this.focusFieldId == "") { if (col.name == 'Input' || col @@ -798,73 +828,9 @@ // console.log("onClick",item); this.focusFieldId = item.fieldId }, - onevent(item) { - // console.log("onevent",item); - if (item.oldvalue != item.value && item.value.trim() != "") { - item.oldvalue = item.value; - var attr = item.fieldId; - this.head_styledef.form.model[attr] = item.value; - //瀛愭暟鎹被鎵爜鍖轰簨浠惰剼鏈�- var eventid = item.bind.onChangeEvent.id; //鍐呭鍙樺寲鍚庝簨浠�- if (eventid) { - var obj_attr = this.head_styledef.form.model; - // console.log(obj_attr); - var req = Object.keys(obj_attr).map((a) => ({ - attr: a, - value: obj_attr[a] || "", - })); - var info = { - eventid: eventid, - edtype: "0", - projectid: '', - rclsid: '', - robjid: '', - userlogin: '', - clsid: this.$data.param.DataCls.id, - objid: "", - attr: req, - dataJson: [], - } - this.DataObjRunCustomEvent(info, ""); - } - } - - }, - onChange(item) { - console.log("onChange", item); - if (item.oldvalue != item.value && item.value.trim() != "") { - item.oldvalue = item.value; - var attr = item.fieldId; - this.head_styledef.form.model[attr] = item.value; - var eventid = item.bind.onChangeEvent.id; //鍐呭鍙樺寲鍚庝簨浠�- if (eventid) { - // self.event_no_sub = 1; - var obj_attr = this.head_styledef.form.model; - // console.log(obj_attr); - var req = Object.keys(obj_attr).map((a) => ({ - attr: a, - value: obj_attr[a] || "", - })); - var info = { - eventid: eventid, - edtype: "0", - projectid: '', - rclsid: '', - robjid: '', - userlogin: '', - clsid: this.$data.param.DataCls.id, - objid: "", - attr: req, - dataJson: [] - } - this.DataObjRunCustomEvent(info); - } - } - - }, - onModelValue(item) { //缁戝畾Model鍊�- var attr = item.fieldId; - if (item.oldvalue != item.value && item.value.trim() != "") { + onEnterChange(item) { + console.log("onEnterChange", item); + if (item.oldvalue != item.value) { item.oldvalue = item.value; var attr = item.fieldId; this.head_styledef.form.model[attr] = item.value; @@ -872,21 +838,99 @@ if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠� this.onChange(onChangeEvent); } - } + }, + // 鍐呭鍙樺寲鍚庝簨浠�+ async onChange(event) { + var eventid = event?.id; //鍐呭鍙樺寲鍚庝簨浠�+ if (eventid) { + // self.event_no_sub = 1; + var obj_attr = this.head_styledef.form.model; + // console.log(obj_attr); + var req = Object.keys(obj_attr).map((a) => ({ + attr: a, + value: obj_attr[a] || "", + })); + var info = { + eventid: eventid, + edtype: "0", + projectid: '', + rclsid: '', + robjid: '', + userlogin: '', + clsid: this.$data.param.DataCls.id, + objid: "", + attr: req, + dataJson: [] + } + this.DataObjRunCustomEvent(info); + } + + }, + onCheckBoxValue(e) { //缁戝畾Model鍊� let values = e.detail.value || [] - let attr = e.currentTarget?.dataset?.attr || "" - this.head_styledef.form.model[attr] = values; + const item = this.head_styledef.form.items[e.currentTarget?.dataset?.index || 0] + if (item?.setting?.colList) { + const col = item.setting.colList[e.currentTarget?.dataset?.iindex || 0] + if (col) { + col.value = values + let attr = col.fieldId; + this.head_styledef.form.model[attr] = col.value; + var onChangeEvent = col.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�+ if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�+ this.onChange(onChangeEvent); + } + return + } + } else { + if (item) { + item.value = values + let attr = item.fieldId; + this.head_styledef.form.model[attr] = item.value; + var onChangeEvent = item.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�+ if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�+ this.onChange(onChangeEvent); + } + } + } + }, onRadioBoxValue(e) { //缁戝畾Model鍊�- let value = e.detail.value || "" - let attr = e.currentTarget?.dataset?.attr || "" - this.head_styledef.form.model[attr] = value; + let values = e.detail.value || "" + const item = this.head_styledef.form.items[e.currentTarget?.dataset?.index || 0] + if (item?.setting?.colList) { + const col = item.setting.colList[e.currentTarget?.dataset?.iindex || 0] + if (col) { + col.value = values + let attr = col.fieldId; + this.head_styledef.form.model[attr] = col.value; + var onChangeEvent = col.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�+ if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�+ this.onChange(onChangeEvent); + } + return + } + } else { + if (item) { + item.value = values + let attr = item.fieldId; + this.head_styledef.form.model[attr] = item.value; + var onChangeEvent = item.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�+ if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�+ this.onChange(onChangeEvent); + } + } + + } + + }, + onModelValue(item) { + var attr = item.fieldId; + this.head_styledef.form.model[attr] = item.value; }, classAttr_extButton(item) { - console.log("classAttr_extButton", item) var onSuffixClickCallbackEvent = item.bind.onSuffixClickCallbackEvent; //鍚庡浘鏍囩偣鍑讳簨浠� var onSuffixClickEvent = item.bind.onSuffixClickEvent; //鍚庡浘鏍囩偣鍑诲洖璋� @@ -1108,22 +1152,18 @@ } else if (action.action_type == "set_dlg_current_edit_attr" ) { - if ($this - .focusOldFieldId == - action.value) { + if ($this.focusOldFieldId == action.value) { $this.setData({ focusFieldId: "" }) } else { $this.setData({ - focusFieldId: $this - .focusOldFieldId + focusFieldId: $this.focusOldFieldId }) } $this.$nextTick(() => { $this.setData({ - focusFieldId: action - .value + focusFieldId: action.value }) }); } else { @@ -1345,13 +1385,10 @@ var d = dialog({ title: '<i class="ace-icon fa fa-info-circle"></i> ' + $this.translateSys("tip"), - content: $this.translateSys( - "quotation_mark_left") + - action - .action_type + $this.translateSys( - "quotation_mark_right") + $this - .translate( - "tip_action_unprocessed") + content: $this.translateSys("quotation_mark_left") + + action.action_type + $this.translateSys( + "quotation_mark_right") + + $this.translate("tip_action_unprocessed") }); d.show(); } else if (action.action_type == 'open_select_userdlg') { @@ -2274,7 +2311,7 @@ } .uni-icon { - padding: 8rpx; + padding: 10rpx 5rpx; font-size: 32rpx; color: rgb(192, 196, 204); } @@ -2295,7 +2332,7 @@ .uni-icon { /* border: 1px solid red; */ - width: 8%; + width: 30rpx; font-family: uniicons; font-size: 40rpx; font-weight: 400; diff --git a/pages/modal/3037_2.vue b/pages/modal/3037_2.vue index 15f5ff0..9487d2a 100644 --- a/pages/modal/3037_2.vue +++ b/pages/modal/3037_2.vue @@ -7,40 +7,33 @@ <text class="txt_title" :style="{'width':item.labelWidth+'px'}">{{item.label}}锛�/text> <!-- 涓嬫媺妗�鍗曢� item.useDict?item.dict:item.selections--> <uni-data-select id="dv_select" v-if="item.name=='Select'" :class="item.disabled?'input-disabled':''" - v-model="item.value" :localdata="item.dict" @change="onchange(item)" :disabled="item.disabled" + v-model="item.value" :localdata="item.dict" @change="onEnterChange(item)" :disabled="item.disabled" :clear="false"></uni-data-select> - <!-- 涓嬫媺妗�澶氶� --> - <!-- <select-cy v-else-if="attr.select==true" :value="item.value" - :name="item.fieldId" - :options="item.dict" - showClearIcon="true" - @change="onchange2" - :data-index="index" - :disabled="item.disabled" - ></select-cy> --> <!-- 鏂囨湰妗�鏁板瓧妗�--> <view class="input-wrapper" v-if="item.name=='Input' || item.name=='InputNumber'"> <text v-if="item.setting.prefix" class="uni-icon" :class="[item.setting.prefix]" - @change="onchange(item)"></text> + @click="classAttr_extButton(item)"></text> <input class="uni-input" :class="item.disabled?'input-disabled':''" :type="item.name=='Input'?'text':item.name=='InputNumber'?'number':'text'" v-model="item.value" :disabled="item.disabled" :placeholder="item.placeholder" :style="{'width':item.setting.prefix && item.setting.suffix?'78%':item.setting.prefix || item.setting.suffix?'87%':'96%'}" - :focus="focusMateria" @focus="ontap(item)" @blur="onevent(item)" :maxlength="-1" /> + :focus="focusMateria" @focus="ontap(item)" @keyup.enter="onEnterChange(item)" + @blur="onEnterChange(item)" :maxlength="-1" /> <text v-if="item.setting.suffix" class="uni-icon" :class="[item.setting.suffix]" - @click="onchange(item)"></text> + @click="classAttr_extButton(item)"></text> </view> <!-- 澶氳鏂囨湰 --> <view class="input-wrapper" v-if="item.name=='Textarea'"> - <textarea class="uni-input" :class="item.disabled?'input-disabled':''" :value="item.value" - :placeholder="item.placeholder" @blur="onModelValue(item)" :data-index="index" - style="height:60px;" :style="{'width':'96%'}" :disabled="item.disabled"></textarea> + <textarea class="uni-input" :class="item.disabled?'input-disabled':''" v-model="item.value" + :placeholder="item.placeholder" @blur="onEnterChange(item)" + :data-index="index" style="height:60px;" :style="{'width':'96%'}" + :disabled="item.disabled"></textarea> </view> <!-- 澶嶉�妗�--> <checkbox-group class="check_rememberPwd" v-if="item.name=='Checkbox'" :class="item.disabled?'input-disabled':''" :disabled="item.disabled" @change="onCheckBoxValue" - :data-attr="item.fieldId"> + :data-attr="item.fieldId" :data-index="index"> <label v-for="(item2) in item.selections" :key="item2.value"> <checkbox :value="item2.value" :checked="item.value.includes(item2.value)" /> <text>{{item2.label}}</text> @@ -49,7 +42,7 @@ <!-- 鍗曢�妗�--> <radio-group class="check_rememberPwd" v-if="item.name=='Radio'" :class="item.disabled?'input-disabled':''" :disabled="item.disabled" @change="onRadioBoxValue" - :data-attr="item.fieldId"> + :data-attr="item.fieldId" :data-index="index"> <label v-for="(item2) in item.selections" :key="item2.value"> <radio :value="item2.value" :checked="item2.value === item.value" /> <text>{{item2.label}}</text> @@ -59,11 +52,26 @@ <switch v-if="item.name=='Switch'" :class="item.disabled?'input-disabled':''" :disabled="item.disabled" v-model="item.value" @change="onModelValue(item)" :style="{'margin-left':'10rpx'}" /> <!-- 鏃ユ湡鏃堕棿 --> - <view class="input-wrapper" v-if="item.name=='TimePicker' || item.name=='DatePicker'"> + <!-- <view class="input-wrapper" v-if="item.name=='TimePicker' || item.name=='DatePicker'"> <picker mode="date" class="date_iput" :class="item.disabled?'input-disabled':''" :disabled="item.disabled" :value="item.value" @change="onModelValue(item)"> <view class="picker">{{item.value}}</view> </picker> + </view> + --> + <view class="input-wrapper" + v-if="item.name=='TimePicker' || item.name=='DatePicker'|| item.name=='DatePickerRange'"> + <OIDatePicker v-if="item.name=='DatePicker'" :class="item.disabled?'input-disabled':''" + :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" + :defaultToday="item.setting.defaultToday" :format="item.setting.format" + @change="onModelValue(item)" /> + <OIDatePickerRange v-if="item.name=='DatePickerRange'" :rangeSeparator="item.setting.separator" + :format="item.setting.format" :class="item.disabled?'input-disabled':''" + :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" + @change="onModelValue(item)" /> + <OITimePicker v-if="item.name=='TimePicker'" :class="item.disabled?'input-disabled':''" + :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" + @change="onModelValue(item)" /> </view> </view> @@ -104,58 +112,10 @@ <text class="txt_title" :style="{'width':item.labelWidth+'px'}">{{item.label}}锛�/text> <span class="form-item-span" v-if="item.disabled">{{item.value}}</span> <!-- 鏂囨湰妗�鏁板瓧妗�--> - <view class="input-wrapper" - v-if="(item.name=='Input' || item.name=='InputNumber') && !item.disabled"> - <text v-if="item.setting.prefix" class="uni-icon" :class="[item.setting.prefix]" - @change="onchange(item)"></text> - <input class="uni-input" :class="item.disabled?'input-disabled':''" - :type="item.name=='Input'?'text':item.name=='InputNumber'?'number':'text'" - v-model="item.value" :disabled="item.disabled" :placeholder="item.placeholder" - :style="{'width':item.setting.prefix && item.setting.suffix?'78%':item.setting.prefix || item.setting.suffix?'87%':'96%'}" - :focus="focusMateria" @focus="ontap(item)" @blur="onevent(item)" :maxlength="-1" /> - <text v-if="item.setting.suffix" class="uni-icon" :class="[item.setting.suffix]" - @click="onchange(item)"></text> - </view> - <!-- 涓嬫媺妗�鍗曢� item.useDict?item.dict:item.selections--> - <uni-data-select id="dv_select" v-if="item.name=='Select' && !item.disabled" - :class="item.disabled?'input-disabled':''" v-model="item.value" :localdata="item.dict" - @change="onchange(item)" :disabled="item.disabled" :clear="false"></uni-data-select> - <!-- 澶氳鏂囨湰 --> - <view class="input-wrapper" v-if="item.name=='Textarea' && !item.disabled"> - <textarea class="uni-input" :value="item.value" - :class="item.disabled?'input-disabled':''" :placeholder="item.placeholder" - @blur="onModelValue(item)" style="height:60px;" :style="{'width':'96%'}" - :disabled="item.disabled"></textarea> - </view> - <!-- 澶嶉�妗�--> - <checkbox-group class="check_rememberPwd" v-if="item.name=='Checkbox'" - :class="item.disabled?'input-disabled':''" :disabled="item.disabled" - @change="onCheckBoxValue" :data-attr="item.fieldId"> - <label v-for="(item2) in item.selections" :key="item2.value"> - <checkbox :value="item2.value" :checked="item.value.includes(item2.value)" /> - <text>{{item2.label}}</text> - </label> - </checkbox-group> - <!-- 鍗曢�妗�--> - <radio-group class="check_rememberPwd" v-if="item.name=='Radio'" - :class="item.disabled?'input-disabled':''" :disabled="item.disabled" - :style="{'margin-left':'10rpx'}" @change="onRadioBoxValue" :data-attr="cols.fieldId"> - <label v-for="(item2) in item.selections" :key="item2.value"> - <radio :value="item2.value" :checked="item2.value === item.value" /> - <text>{{item2.label}}</text> - </label> - </radio-group> - <!-- Switch寮�叧 --> - <switch v-if="item.name=='Switch'" :class="item.disabled?'input-disabled':''" - :disabled="item.disabled" v-model="item.value" @change="onModelValue(item)" - :style="{'margin-left':'10rpx'}" /> - <!-- 鏃ユ湡鏃堕棿 --> - <view class="input-wrapper" - v-if="(item.name=='TimePicker' || item.name=='DatePicker') && !item.disabled"> - <picker mode="date" class="date_iput" :class="item.disabled?'input-disabled':''" - :disabled="item.disabled" :value="item.value" @change="onModelValue(item)"> - <view class="picker">{{item.value}}</view> - </picker> + <view v-else class="input-wrapper"> + <input :type="item.name=='InputNumber'?'number':'text'" v-model="item.value" + :placeholder="item.placeholder" :maxlength="-1" + @on-enter="onDetail1EnterChange(item)" /> </view> </view> <!-- 鏍呮牸甯冨眬 --> @@ -166,62 +126,11 @@ <text class="txt_title" :style="{'width':cols.labelWidth+'px'}">{{cols.label}}锛�/text> <span class="form-item-span" v-if="cols.disabled">{{cols.value}}</span> - <view class="input-wrapper" - v-if="(cols.name=='Input' || cols.name=='InputNumber') && !cols.disabled"> - <text v-if="cols.setting.prefix" class="uni-icon" :class="[cols.setting.prefix]" - @change="onchange(cols)"></text> - <input class="uni-input" :class="cols.disabled?'input-disabled':''" - :type="cols.name=='Input'?'text':cols.name=='InputNumber'?'number':'text'" - v-model="cols.value" :disabled="cols.disabled" - :placeholder="cols.placeholder" - :style="{'width':cols.setting.prefix && cols.setting.suffix?'78%':cols.setting.prefix || cols.setting.suffix?'87%':'96%'}" - :focus="focusMateria" @focus="ontap(cols)" @blur="onevent(cols)" - :maxlength="-1" /> - <text v-if="cols.setting.suffix" class="uni-icon" :class="[cols.setting.suffix]" - @click="onchange(cols)"></text> - </view> - <!-- 涓嬫媺妗�鍗曢� cols.useDict?cols.dict:cols.selections--> - <uni-data-select id="dv_select" v-if="cols.name=='Select' && !cols.disabled" - :class="cols.disabled?'input-disabled':''" v-model="cols.value" - :localdata="cols.dict" @change="onchange(cols)" :disabled="cols.disabled" - :clear="false"></uni-data-select> - <!-- 澶氳鏂囨湰 --> - <view class="input-wrapper" v-if="cols.name=='Textarea' && !cols.disabled"> - <textarea class="uni-input" :value="cols.value" - :class="cols.disabled?'input-disabled':''" :placeholder="cols.placeholder" - @blur="onModelValue(cols)" style="height:60px;" :style="{'width':'96%'}" - :disabled="cols.disabled"></textarea> - </view> - <!-- 澶嶉�妗�--> - <checkbox-group class="check_rememberPwd" v-if="cols.name=='Checkbox'" - :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" - @change="onCheckBoxValue" :data-attr="cols.fieldId"> - <label v-for="(cols2) in cols.selections" :key="cols2.value"> - <checkbox :value="cols2.value" - :checked="cols.value.includes(cols2.value)" /> - <text>{{cols2.label}}</text> - </label> - </checkbox-group> - <!-- 鍗曢�妗�--> - <radio-group class="check_rememberPwd" v-if="cols.name=='Radio'" - :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" - @change="onRadioBoxValue " :data-attr="cols.fieldId"> - <label v-for="(cols2) in cols.selections" :key="cols2.value"> - <radio :value="cols2.value" :checked="cols2.value === cols.value" /> - <text>{{cols2.label}}</text> - </label> - </radio-group> - <!-- Switch寮�叧 --> - <switch v-if="cols.name=='Switch'" :class="cols.disabled?'input-disabled':''" - :disabled="cols.disabled" v-model="cols.value" @change="onModelValue(cols)" - :style="{'margin-left':'10rpx'}" /> - <!-- 鏃ユ湡鏃堕棿 --> - <view class="input-wrapper" - v-if="(cols.name=='TimePicker' || cols.name=='DatePicker') && !cols.disabled"> - <picker mode="date" class="date_iput" :class="cols.disabled?'input-disabled':''" - :disabled="cols.disabled" :value="cols.value" @change="onModelValue(cols)"> - <view class="picker">{{cols.value}}</view> - </picker> + <!-- 鏂囨湰妗�鏁板瓧妗�--> + <view v-else class="input-wrapper"> + <input :type="cols.name=='InputNumber'?'number':'text'" v-model="cols.value" + :placeholder="cols.placeholder" :maxlength="-1" + @on-enter="onDetail1EnterChange(cols)" /> </view> </view> @@ -289,10 +198,19 @@ dataObjCreate, dataObjDel } from "@/api/data.js" + import dayjs from "dayjs"; + import OIDatePicker from '@/components/oi-date-time-picker/oi-date-picker.vue' + import OIDatePickerRange from '@/components/oi-date-time-picker/oi-date-picker-range.vue' + import OITimePicker from '@/components/oi-date-time-picker/oi-time-picker.vue' export default { modules: { Base64, + }, + components: { + OIDatePicker, + OIDatePickerRange, + OITimePicker }, data() { return { @@ -568,7 +486,7 @@ var dataInfo = { ed_type: 0, start_transaction: true, - class_id: this.param.DataCls.id, + class_id: styledef.form.clsId, event_id: eventid, }; console.log(dataInfo); @@ -860,39 +778,395 @@ } }, - onchange(item) { - console.log(item); - var $this = this; - console.log(item); + classAttr_extButton(item) { + var onSuffixClickCallbackEvent = item.bind.onSuffixClickCallbackEvent; //鍚庡浘鏍囩偣鍑诲洖璋�+ var onSuffixClickEvent = item.bind.onSuffixClickEvent; //鍚庡浘鏍囩偣鍑讳簨浠�+ + if (!onSuffixClickCallbackEvent.id) { + uni.showModal({ + title: this.translateSys("tip"), + content: this.translate('icon_click_callback_empty'), + showCancel: false, + confirmText: this.translateSys('close') + }); + return; + } + if (!onSuffixClickEvent.id) { + uni.showModal({ + title: this.translateSys("tip"), + content: this.translate('icon_click_event_empty'), + showCancel: false, + confirmText: this.translateSys('close') + }); + return; + } + this.$data.popupType = 'right' + // open 鏂规硶浼犲叆鍙傛暟 绛夊悓鍦�uni-popup 缁勪欢涓婄粦瀹�type灞炴� + this.$refs.popup.open(this.popupType); + + this.dataObjRunCustomEvent_Return(onSuffixClickEvent.id, '', onSuffixClickCallbackEvent.id, + item); + }, + dataObjRunCustomEvent_Return(eventid, data_attr, button_callback, item) { + const $this = this + var enviroment = { + 'function': '3000', // 鍔熻兘鐐圭紪鍙�+ cls_id: $this.head_styledef.form.clsId, // 鍔熻兘鐐逛富鏁版嵁绫绘爣璇�+ 'button': 'top', // top/bottom + button_name: $this.translateSys('add2'), + master: { + cls_id: $this.head_styledef.form.clsId, // button=bottom鏃�master鐨刢ls_id + //obj_id: '' // button=bottom鏃�master鐨刼bj_id + } + }; + var obj_attr = $this.head_styledef.form.model; + console.log(obj_attr); + var req = Object.keys(obj_attr).map((a) => ({ + attr: a, + value: obj_attr[a] || "", + })); + if ($this.refdatastore.length > 0) { + for (var i = 0; i < $this.refdatastore.length; i++) { + if (!req.filter(function(s) { + return $this.refdatastore[i].attr == s.name + }).length) { + req.push({ + 'attr': $this.refdatastore[i].attr, + 'value': $this.refdatastore[i].value + }); + } + } + } + + var extinfo = enviroment; + extinfo.edit_dlg = { + type: 'small', //灏忕獥鍙�+ class_id: $this.head_styledef.form.clsId, //褰撳墠鏁版嵁绫籭d + } + extinfo = Base64.encode(JSON.stringify(extinfo)); //灏嗗瓧绗︿覆杞崲涓篵ase64缂栫爜 + var global_attr = Base64.encode(JSON.stringify($this.global_attr)); //灏嗗瓧绗︿覆杞崲涓篵ase64缂栫爜 + var obj_attr = {}; + req.forEach(item2 => { + obj_attr[item2.attr] = item2.value; + }); + let input_param = Base64.encode( + JSON.stringify( + Object.keys(obj_attr).map((a) => ({ + attr: a, + value: obj_attr[a] || "", + })) + ) + ); + + if (!eventid.includes('{')) eventid = '{' + eventid + '}'; + var dataInfo = { + ed_type: "0", + start_transaction: true, + class_id: $this.head_styledef.form.clsId, + class_name: '', + event_id: eventid, + event_name: '', + data_obj_id: '', + obj_attr: obj_attr, + prj_id: '', + ref_cls_id: '', + rel_obj_id: '', + user_login: '', + data_json: [], + compose_info: '', + ext_info: extinfo, + global_attr: global_attr, + input_param: input_param, + }; + console.log(dataInfo); + // return; + runCustomEvent(dataInfo).then(data => { + if (data.ret != 0) { + var tip = data.err_info ? typeof data.err_info == 'string' ? data + .err_info : + data + .err_info.join('<br/>') : ''; + if (data.ret == 801) { + if ($this.param.Only_Script_Error) { + let pos = tip.indexOf("锛�); + if (pos > -1) tip = tip.substring(pos + 1); + } + uni.showModal({ + title: $this.translateSys("tip"), + content: tip, + showCancel: false, + confirmText: $this.translateSys('close') + }); + } else uni.showModal({ + title: $this.translateSys("tip"), + content: tip + ',' + $this.translateSys('tip') + ':' + data + .ret, + showCancel: false, + confirmText: $this.translateSys('close') + }); + return false + } else { + var tip = data.info ? typeof data.info == 'string' ? data.info : data + .info + .join( + '<br/>') : ''; + if (tip) uni.showModal({ + title: $this.translateSys("tip"), + content: tip, + showCancel: false, + confirmText: $this.translateSys('close') + }); + + if (data != "") { + var actions = data.action; + if (actions) { + for (var i = 0; i < actions.length; i++) { + var action = actions[i]; + console.log(action) + var val = action.value; + var enviroment = JSON.stringify(enviroment); + + if (action.action_type == 'open_panel') { + var d = dialog({ + title: '<i class="ace-icon fa fa-info-circle"></i> ' + + $this.translateSys("tip"), + content: $this.translateSys("quotation_mark_left") + + action.action_type + $this.translateSys( + "quotation_mark_right") + + $this.translate("tip_action_unprocessed") + }); + d.show(); + } else if (action.action_type == 'open_select_userdlg') { + var style = val.style; + // style == 'user' ? '閫夋嫨浜哄憳' : style == 'department' ? '閫夋嫨閮ㄩ棬' : style == 'role' ? '閫夋嫨瑙掕壊' : '' + var param = { + item: item, + button_callback: button_callback, + req: req, + data_attr: data_attr + } + uni.navigateTo({ + url: '../selpsn/index?mulit=false¶m=' + + JSON + .stringify( + param), + events: { + AddPer(data, param) { + // console.log(param); + console.log(data); + var callback_eventid = param + .button_callback + .trim(); + var info = { + eventid: callback_eventid, + edtype: "0", + projectid: '', + rclsid: '', + robjid: '', + userlogin: '', + clsid: $this.$data.param + .DataCls + .id, + objid: "", + attr: param.req, + inputparameter: data, + dataJson: [], + } + $this.DataObjRunCustomEvent(info, + param + .data_attr); + } + } + }); + } else if (action.action_type == 'open_data_query_dlg') { + var d = dialog({ + title: '<i class="ace-icon fa fa-info-circle"></i> ' + + $this.translateSys("tip"), + content: $this.translateSys( + "quotation_mark_left") + + action + .action_type + $this.translateSys( + "quotation_mark_right") + $this + .translate( + "tip_action_unprocessed") + }); + d.show(); + } else if (action.action_type == 'open_common_dlg') { + + if (val.common_dlg_id == 'check_list') { + + $this.setData({ + check_list: val.config + }) + if (val.config.appear_style == 'sideslip') //鍒ゆ柇鏄惁鏄晶婊�+ $this.setData({ + popupType: "right" + }) + else + $this.setData({ + popupType: "center" + }) + // open 鏂规硶浼犲叆鍙傛暟 绛夊悓鍦�uni-popup 缁勪欢涓婄粦瀹�type灞炴� + $this.$refs.popup.open($this.popupType); + var popupParam = { + item: item, + button_callback: button_callback, + req: req, + data_attr: data_attr + } + $this.setData({ + popupParam: popupParam + }) + } + } else if (action.action_type == 'open_project_query_dlg') { + //console.log(action.value.select_range); + //console.log(action.value.mulit_select); + var priRel = '-1'; + if (action.value.select_range == '鍏ㄩ儴鐩稿叧') + priRel = '0'; + else if (action.value.select_range == '鎴戣礋璐g殑椤圭洰') + priRel = '1'; + else if (action.value.select_range == '鎴戝垱寤虹殑') + priRel = '2'; + else if (action.value.select_range == '鎴戝弬涓庣殑' || action + .value + .select_range == '鎴戝弬鍔犵殑') + priRel = '3'; + else if (action.value.select_range == '鎴戝叧娉ㄧ殑') + priRel = '4'; + else if (action.value.select_range == '鎴戜笅灞炵殑椤圭洰') + priRel = '5'; + var param_ = { + item: item, + button_callback: button_callback, + req: req + } + uni.navigateTo({ + url: '../selPrj/index?relation=' + priRel + + '¶m=' + + JSON.stringify(param_), + events: { + AddPer(data, param) { + var attr = param.item.fieldId; + $this.head_styledef.form.model[ + attr] = + data[0].ID + + ';' + data[0].Name; + + // $this.$data.classAttrList[param.index].Attr[param.iindex].Value=data[0].Name; + // $this.$data.classAttrList[param.index].Attr[param.iindex].ValID=data[0].ID+';'+data[0].Name; + var callback_eventid = param + .button_callback + .trim(); + if (callback_eventid) { + var info = { + eventid: callback_eventid, + edtype: "2", + projectid: data[0].ID, + rclsid: "", + robjid: "", + userlogin: "", + clsid: $this.$data + .param + .DataCls.id, + objid: "", + attr: param.req, + dataJson: [], + } + + $this.DataObjRunCustomEvent( + info); + } + } + } + }); + } else { + uni.showModal({ + title: $this.translateSys("tip"), + content: $this.translateSys( + "quotation_mark_left") + + action.action_type + $this.translateSys( + "quotation_mark_right") + $this + .translate( + "tip_action_unprocessed"), + showCancel: false, + confirmText: $this.translateSys('close') + }); + } + } + } + } else { + uni.showModal({ + title: $this.translateSys('tip') + "5.2", + content: $this.translateSys("quotation_mark_left") + + "before_click_button" + $this.translateSys( + "quotation_mark_right") + $this.translateSys( + "comma") + 'event_id' + eventid, + showCancel: false, + confirmText: $this.translateSys('close') + }); + } + } + + }).catch(ex => { + // console.log(ex); + let exStr = JSON.stringify(ex) + if (exStr == "{}") + exStr = ex + let tip = typeof ex.errMsg == "string" ? ex.errMsg : exStr + uni.showModal({ + title: $this.translateSys('tip') + "5.1", + content: exStr, + showCancel: false, + confirmText: $this.translateSys('close') + }); + }); + }, + + onEnterChange(item) { + console.log("onEnterChange", item); if (item.oldvalue != item.value && item.value.trim() != "") { item.oldvalue = item.value; var attr = item.fieldId; - $this.head_styledef.form.model[attr] = item.value; - var eventid = item.bind.onChangeEvent.id; //鍐呭鍙樺寲鍚庝簨浠�- if (eventid) { - // self.event_no_sub = 1; - var obj_attr = this.head_styledef.form.model; - // console.log(obj_attr); - var req = Object.keys(obj_attr).map((a) => ({ - attr: a, - value: obj_attr[a] || "", - })); - var info = { - eventid: eventid, - edtype: "0", - projectid: '', - rclsid: '', - robjid: '', - userlogin: '', - clsid: this.$data.param.Master_Cls.ID, - objid: "", - attr: req, - } - this.DataObjRunCustomEvent(info); + this.head_styledef.form.model[attr] = item.value; + var onChangeEvent = item.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�+ if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�+ this.onChange(onChangeEvent); } } }, + onDetail1EnterChange(item) { + //鐮佺洏涓牱寮忓洖杞︿簨浠�+ // console.log(item); + }, + // 鍐呭鍙樺寲鍚庝簨浠�+ async onChange(event) { + var eventid = event?.id; //鍐呭鍙樺寲鍚庝簨浠�+ if (eventid) { + // self.event_no_sub = 1; + var obj_attr = this.head_styledef.form.model; + // console.log(obj_attr); + var req = Object.keys(obj_attr).map((a) => ({ + attr: a, + value: obj_attr[a] || "", + })); + var info = { + eventid: eventid, + edtype: "0", + projectid: '', + rclsid: '', + robjid: '', + userlogin: '', + clsid: this.head_styledef.form.clsId, + objid: "", + attr: req, + } + this.DataObjRunCustomEvent(info); + } + + }, + scan_ontap(e) { //鎵爜鍖烘壂鐮佸姛鑳� //console.log(e.target) getApp().onScan((result) => { @@ -999,22 +1273,69 @@ } } }, - onCheckBoxValue(e) { //缁戝畾Model鍊� let values = e.detail.value || [] - let attr = e.currentTarget?.dataset?.attr || "" - this.head_styledef.form.model[attr] = values; + const item = this.head_styledef.form.items[e.currentTarget?.dataset?.index || 0] + if (item?.setting?.colList) { + const col = item.setting.colList[e.currentTarget?.dataset?.iindex || 0] + if (col) { + col.value = values + let attr = col.fieldId; + this.head_styledef.form.model[attr] = col.value; + var onChangeEvent = col.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�+ if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�+ this.onChange(onChangeEvent); + } + return + } + } else { + if (item) { + item.value = values + let attr = item.fieldId; + this.head_styledef.form.model[attr] = item.value; + var onChangeEvent = item.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�+ if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�+ this.onChange(onChangeEvent); + } + } + } + }, onRadioBoxValue(e) { //缁戝畾Model鍊�- let value = e.detail.value || "" - let attr = e.currentTarget?.dataset?.attr || "" - this.head_styledef.form.model[attr] = value; + let values = e.detail.value || "" + const item = this.head_styledef.form.items[e.currentTarget?.dataset?.index || 0] + if (item?.setting?.colList) { + const col = item.setting.colList[e.currentTarget?.dataset?.iindex || 0] + if (col) { + col.value = values + let attr = col.fieldId; + this.head_styledef.form.model[attr] = col.value; + var onChangeEvent = col.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�+ if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�+ this.onChange(onChangeEvent); + } + return + } + } else { + if (item) { + item.value = values + let attr = item.fieldId; + this.head_styledef.form.model[attr] = item.value; + var onChangeEvent = item.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�+ if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�+ this.onChange(onChangeEvent); + } + } + + } + }, onModelValue(item) { //缁戝畾Model鍊� //console.log(e.target) var attr = item.fieldId; - $this.head_styledef.form.model[attr] = item.value; + this.head_styledef.form.model[attr] = item.value; }, + panel_del(index) { //闈㈡澘鍒犻櫎 var $this = this; if (this.$data.subPanelList[index].scanCodeVal == this.$data.scanCodeVal) { @@ -2067,7 +2388,8 @@ .uni-icon { /* border: 1px solid red; */ - width: 8%; + width: 30rpx; + padding: 10rpx 5rpx; font-family: uniicons; font-size: 40rpx; font-weight: 400; diff --git a/pages/modal/3200.vue b/pages/modal/3200.vue index eb4082f..45fb2f3 100644 --- a/pages/modal/3200.vue +++ b/pages/modal/3200.vue @@ -6,7 +6,7 @@ <text class="txt_title" :style="{'width':item.labelWidth+'px'}">{{item.label}}锛�/text> <!-- 涓嬫媺妗�鍗曢� item.useDict?item.dict:item.selections--> <uni-data-select id="dv_select" v-if="item.name=='Select'" :class="item.disabled?'input-disabled':''" - v-model="item.value" :localdata="item.dict" @change="onChange(item)" :disabled="item.disabled" + v-model="item.value" :localdata="item.dict" @change="onEnterChange(item)" :disabled="item.disabled" :clear="false"></uni-data-select> <view class="input-wrapper" v-if="item.name=='Input' || item.name=='InputNumber'"> <text v-if="item.setting.prefix" class="uni-icon" :class="[item.setting.prefix]" @@ -19,6 +19,20 @@ @blur="onEnterChange(item)" :maxlength="-1" /> <text v-if="item.setting.suffix" class="uni-icon" :class="[item.setting.suffix]" @click="onEnterChange(item)"></text> + </view> + <view class="input-wrapper" + v-if="item.name=='TimePicker' || item.name=='DatePicker'|| item.name=='DatePickerRange'"> + <OIDatePicker v-if="item.name=='DatePicker'" :class="item.disabled?'input-disabled':''" + :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" + :defaultToday="item.setting.defaultToday" :format="item.setting.format" + @change="onModelValue(item)" /> + <OIDatePickerRange v-if="item.name=='DatePickerRange'" :rangeSeparator="item.setting.separator" + :format="item.setting.format" :class="item.disabled?'input-disabled':''" + :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" + @change="onModelValue(item)" /> + <OITimePicker v-if="item.name=='TimePicker'" :class="item.disabled?'input-disabled':''" + :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" + @change="onModelValue(item)" /> </view> </view> @@ -50,66 +64,12 @@ <view v-if="item.name!='Layout'"> <text class="txt_title" :style="{'width':item.labelWidth+'px'}">{{item.label}}锛�/text> + <span class="form-item-span" v-if="item.disabled">{{item.value}}</span> <!-- 鏂囨湰妗�鏁板瓧妗�--> - <view class="dv_input" v-if="(item.name=='Input' || item.name=='InputNumber')"> - <text v-if="item.setting.prefix" class="uni-icon" - :class="[item.setting.prefix]" @change="onChange(item)"></text> - <input class="uni-input" :class="item.disabled?'input-disabled':''" - :type="item.name=='Input'?'text':item.name=='InputNumber'?'number':'text'" - v-model="item.value" :disabled="item.disabled" - :placeholder="item.placeholder" - :style="{'width':item.setting.prefix && item.setting.suffix?'78%':item.setting.prefix || item.setting.suffix?'87%':'96%'}" - :focus="focusMateria" @focus="ontap(item)" @blur="onevent(item)" - :maxlength="-1" /> - <text v-if="item.setting.suffix" class="uni-icon" - :class="[item.setting.suffix]" @click="onChange(item)"></text> - </view> - <!-- 涓嬫媺妗�鍗曢� item.useDict?item.dict:item.selections--> - <uni-data-select id="dv_select" v-if="item.name=='Select'" - :class="item.disabled?'input-disabled':''" v-model="item.value" - :localdata="item.dict" @change="onChange(item)" :disabled="item.disabled" - :clear="false"></uni-data-select> - <!-- 澶氳鏂囨湰 --> - <view class="input-wrapper" v-if="item.name=='Textarea'"> - <textarea class="uni-input" :value="item.value" - :class="item.disabled?'input-disabled':''" - :placeholder="item.placeholder" @blur="onModelValue(item)" - style="height:60px;" :style="{'width':'96%'}" - :disabled="item.disabled"></textarea> - </view> - <!-- 澶嶉�妗�--> - <checkbox-group class="check_rememberPwd" v-if="item.name=='Checkbox'" - :class="item.disabled?'input-disabled':''" :disabled="item.disabled" - @change="onCheckBoxValue" :data-attr="item.fieldId"> - <label v-for="(item2) in item.selections" :key="item2.value"> - <checkbox :value="item2.value" - :checked="item.value.includes(item2.value)" /> - <text>{{item2.label}}</text> - </label> - </checkbox-group> - - <!-- 鍗曢�妗�--> - <radio-group class="check_rememberPwd" v-if="item.name=='Radio'" - :class="item.disabled?'input-disabled':''" :disabled="item.disabled" - :style="{'margin-left':'10rpx'}" @change="onModelValue(item)" - :data-attr="item.fieldId"> - <label v-for="(item2) in item.selections" :key="item2.value"> - <radio :value="item2.value" :checked="item2.value === item.value" /> - <text>{{item2.label}}</text> - </label> - </radio-group> - <!-- Switch寮�叧 --> - <switch v-if="item.name=='Switch'" :class="item.disabled?'input-disabled':''" - :disabled="item.disabled" v-model="item.value" @change="onModelValue(item)" - :style="{'margin-left':'10rpx'}" /> - <!-- 鏃ユ湡鏃堕棿 --> - <view class="input-wrapper" - v-if="(item.name=='TimePicker' || item.name=='DatePicker') && !item.disabled"> - <picker mode="date" class="date_iput" - :class="item.disabled?'input-disabled':''" :disabled="item.disabled" - :value="item.value" @change="onModelValue(item)"> - <view class="picker">{{item.value}}</view> - </picker> + <view v-else class="form-item-input"> + <input :type="item.name=='InputNumber'?'number':'text'" v-model="item.value" + :placeholder="item.placeholder" :maxlength="-1" + @on-enter="onDetail1EnterChange(item)" /> </view> </view> <!-- 鏍呮牸甯冨眬 --> @@ -119,71 +79,13 @@ <view v-if="cols!=null"> <text class="txt_title" :style="{'width':cols.labelWidth+'px'}">{{cols.label}}锛�/text> - <view class="dv_input" - v-if="(cols.name=='Input' || cols.name=='InputNumber') && !cols.disabled"> - <text v-if="cols.setting.prefix" class="uni-icon" - :class="[cols.setting.prefix]" - @change="onChange(cols)"></text> - <input class="uni-input" :class="cols.disabled?'input-disabled':''" - :type="cols.name=='Input'?'text':cols.name=='InputNumber'?'number':'text'" - v-model="cols.value" :disabled="cols.disabled" - :placeholder="cols.placeholder" - :style="{'width':cols.setting.prefix && cols.setting.suffix?'78%':cols.setting.prefix || cols.setting.suffix?'87%':'96%'}" - :focus="focusMateria" @focus="ontap(cols)" @blur="onevent(cols)" - :maxlength="-1" /> - <text v-if="cols.setting.suffix" class="uni-icon" - :class="[cols.setting.suffix]" - @click="onChange(cols)"></text> + <span class="form-item-span" v-if="cols.disabled">{{cols.value}}</span> + <!-- 鏂囨湰妗�鏁板瓧妗�--> + <view v-else class="form-item-input"> + <input :type="cols.name=='InputNumber'?'number':'text'" + v-model="cols.value" :placeholder="cols.placeholder" + :maxlength="-1" @on-enter="onDetail1EnterChange(cols)" /> </view> - <!-- 涓嬫媺妗�鍗曢� cols.useDict?cols.dict:cols.selections--> - <uni-data-select id="dv_select" v-if="cols.name=='Select'" - :class="cols.disabled?'input-disabled':''" v-model="cols.value" - :localdata="cols.dict" @change="onChange(cols)" - :disabled="cols.disabled" :clear="false"></uni-data-select> - <!-- 澶氳鏂囨湰 --> - <view class="input-wrapper" v-if="cols.name=='Textarea'"> - <textarea class="uni-input" :value="cols.value" - :class="cols.disabled?'input-disabled':''" - :placeholder="cols.placeholder" @blur="onModelValue(cols)" - style="height:60px;" :style="{'width':'96%'}" - :disabled="cols.disabled"></textarea> - </view> - <!-- 澶嶉�妗�--> - <checkbox-group class="check_rememberPwd" v-if="cols.name=='Checkbox'" - :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" - @change="onCheckBoxValue" :data-attr="cols.fieldId"> - <label v-for="(cols2) in cols.selections" :key="cols2.value"> - <checkbox :value="cols2.value" - :checked="cols.value.includes(cols2.value)" /> - <text>{{cols2.label}}</text> - </label> - </checkbox-group> - <!-- 鍗曢�妗�--> - <radio-group class="check_rememberPwd" v-if="cols.name=='Radio'" - :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" - :style="{'margin-left':'10rpx'}" @change="onModelValue(cols)"> - <label v-for="(cols2) in cols.selections" :key="cols2.value"> - <radio :value="cols2.value" - :checked="cols2.value === cols.value" /> - <text>{{cols2.label}}</text> - </label> - </radio-group> - <!-- Switch寮�叧 --> - <switch v-if="cols.name=='Switch'" - :class="cols.disabled?'input-disabled':''" :disabled="item.disabled" - v-model="cols.value" @change="onModelValue(cols)" - :style="{'margin-left':'10rpx'}" /> - <!-- 鏃ユ湡鏃堕棿 --> - <view class="input-wrapper" - v-if="(cols.name=='TimePicker' || cols.name=='DatePicker') && !cols.disabled"> - <picker mode="date" class="date_iput" - :class="cols.disabled?'input-disabled':''" - :disabled="item.disabled" :value="cols.value" - @change="onModelValue(cols)"> - <view class="picker">{{cols.value}}</view> - </picker> - </view> - </view> </uni-col> </uni-row> @@ -237,10 +139,18 @@ dataObjQuery, dataObjDel } from "@/api/data.js" - + import dayjs from "dayjs"; + import OIDatePicker from '@/components/oi-date-time-picker/oi-date-picker.vue' + import OIDatePickerRange from '@/components/oi-date-time-picker/oi-date-picker-range.vue' + import OITimePicker from '@/components/oi-date-time-picker/oi-time-picker.vue' export default { modules: { Base64, + }, + components: { + OIDatePicker, + OIDatePickerRange, + OITimePicker }, onNavigationBarButtonTap(e) { // console.log(e); @@ -954,8 +864,10 @@ uni.showModal({ title: this.translateSys("tip"), content: btn.PromptContent || this.translate("are_you_sure"), + cancelText: this.translateSys('ok'), + confirmText: this.translateSys('cancel'), success: function(res) { - if (res.confirm) { + if (res.cancel) { that.onButtonClicked(btn, style); // } else if (res.cancel) { // console.log('鐢ㄦ埛鐐瑰嚮鍙栨秷'); @@ -980,10 +892,11 @@ if (btn.Prompt) { uni.showModal({ title: this.translateSys("tip"), - content: btn.PromptContent || this.translate( - "are_you_sure"), + content: btn.PromptContent || this.translate("are_you_sure"), + cancelText: this.translateSys('ok'), + confirmText: this.translateSys('cancel'), success: function(res) { - if (res.confirm) { + if (res.cancel) { that.onButtonClicked(btn); // } else if (res.cancel) { // console.log('鐢ㄦ埛鐐瑰嚮鍙栨秷'); @@ -1076,8 +989,10 @@ uni.showModal({ title: this.translateSys("tip"), content: this.translate("confirm_delete_data"), + cancelText: this.translateSys('ok'), + confirmText: this.translateSys('cancel'), success: function(res) { - if (res.confirm) { + if (res.cancel) { var objID = style.form.objId; if (!style.form.objId.includes('{')) objID = '{' + style.form .objId + '}'; @@ -1388,6 +1303,7 @@ } }) }, + onEnterChange(item) { //鍥炶溅锛岀偣鍑绘寜閽紝鍙栨秷鑺傜偣浜嬩欢 // console.log(item); if (item.oldvalue != item.value) { @@ -1580,6 +1496,69 @@ } }, + onCheckBoxValue(e) { //缁戝畾Model鍊�+ let values = e.detail.value || [] + const item = this.head_styledef.form.items[e.currentTarget?.dataset?.index || 0] + if (item?.setting?.colList) { + const col = item.setting.colList[e.currentTarget?.dataset?.iindex || 0] + if (col) { + col.value = values + let attr = col.fieldId; + this.head_styledef.form.model[attr] = col.value; + var onChangeEvent = col.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�+ if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�+ this.onChange(onChangeEvent); + } + return + } + } else { + if (item) { + item.value = values + let attr = item.fieldId; + this.head_styledef.form.model[attr] = item.value; + var onChangeEvent = item.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�+ if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�+ this.onChange(onChangeEvent); + } + } + } + + }, + onRadioBoxValue(e) { //缁戝畾Model鍊�+ let values = e.detail.value || "" + const item = this.head_styledef.form.items[e.currentTarget?.dataset?.index || 0] + if (item?.setting?.colList) { + const col = item.setting.colList[e.currentTarget?.dataset?.iindex || 0] + if (col) { + col.value = values + let attr = col.fieldId; + this.head_styledef.form.model[attr] = col.value; + var onChangeEvent = col.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�+ if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�+ this.onChange(onChangeEvent); + } + return + } + } else { + if (item) { + item.value = values + let attr = item.fieldId; + this.head_styledef.form.model[attr] = item.value; + var onChangeEvent = item.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�+ if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�+ this.onChange(onChangeEvent); + } + } + + } + + }, + + onModelValue(item) { + var attr = item.fieldId; + this.head_styledef.form.model[attr] = item.value; + }, + onDetail1EnterChange() {}, //鐐逛腑琛ㄥ崟 onPanelClick(value) { //鐐瑰嚮闈㈡澘楂樹寒鏄剧ず // console.log(value); @@ -2088,7 +2067,8 @@ .uni-icon { /* border: 1px solid red; */ - width: 8%; + width: 30rpx; + padding: 10rpx 5rpx; font-family: uniicons; font-size: 40rpx; font-weight: 400; @@ -2207,6 +2187,11 @@ width: calc(100% - 100px); } + .dv-panel .form-item-input { + + width: calc(100% - 100px); + } + .dv-panel-button { display: inline-block; } @@ -2257,7 +2242,7 @@ line-height: 1.5; background: #fff; // border: none; - color: #000; + color: #000; font-size: 38rpx; font-weight: bold; float: left; diff --git a/pages/modal/3200_view.vue b/pages/modal/3200_view.vue index 67413ef..63b1fa5 100644 --- a/pages/modal/3200_view.vue +++ b/pages/modal/3200_view.vue @@ -19,32 +19,32 @@ <!-- 鏂囨湰妗�鏁板瓧妗�--> <view class="dv_input" v-if="(item.name=='Input' || item.name=='InputNumber') "> <text v-if="item.setting.prefix" class="uni-icon" :class="[item.setting.prefix]" - @change="onChange(item)"></text> + @click="onEnterChange(item)"></text> <input class="uni-input" :class="item.disabled?'input-disabled':''" :type="item.name=='Input'?'text':item.name=='InputNumber'?'number':'text'" v-model="item.value" :disabled="item.disabled" :placeholder="item.placeholder" :style="{'width':item.setting.prefix && item.setting.suffix?'78%':item.setting.prefix || item.setting.suffix?'87%':'96%'}" - :focus="focusMateria" @focus="ontap(item)" @blur="onevent(item)" - :maxlength="-1" /> + :focus="focusMateria" @focus="ontap(item)" @keyup.enter="onEnterChange(item)" + @blur="onEnterChange(item)" :maxlength="-1" /> <text v-if="item.setting.suffix" class="uni-icon" :class="[item.setting.suffix]" - @click="onChange(item)"></text> + @click="onEnterChange(item)"></text> </view> <!-- 涓嬫媺妗�鍗曢� item.useDict?item.dict:item.selections--> <uni-data-select id="dv_select" v-if="item.name=='Select'" :class="item.disabled?'input-disabled':''" v-model="item.value" - :localdata="item.dict" @change="onChange(item)" :disabled="item.disabled" + :localdata="item.dict" @change="onEnterChange(item)" :disabled="item.disabled" :clear="false"></uni-data-select> <!-- 澶氳鏂囨湰 --> <view class="input-wrapper" v-if="item.name=='Textarea'"> <textarea class="uni-input" :value="item.value" :class="item.disabled?'input-disabled':''" :placeholder="item.placeholder" - @blur="onModelValue(item)" style="height:60px;" :style="{'width':'96%'}" + @blur="onEnterChange(item)" style="height:60px;" :style="{'width':'96%'}" :disabled="item.disabled"></textarea> </view> <!-- 澶嶉�妗�--> <checkbox-group class="check_rememberPwd" v-if="item.name=='Checkbox'" :class="item.disabled?'input-disabled':''" :disabled="item.disabled" - @change="onCheckBoxValue" :data-attr="item.fieldId"> + @change="onCheckBoxValue" :data-attr="item.fieldId" :data-index="index"> <label v-for="(item2) in item.selections" :key="item2.value"> <checkbox :value="item2.value" :checked="item.value.includes(item2.value)" /> <text>{{item2.label}}</text> @@ -53,7 +53,8 @@ <!-- 鍗曢�妗�--> <radio-group class="check_rememberPwd" v-if="item.name=='Radio'" :class="item.disabled?'input-disabled':''" :disabled="item.disabled" - :style="{'margin-left':'10rpx'}" @change="onModelValue(item)"> + :style="{'margin-left':'10rpx'}" @change="onRadioBoxValue" :data-attr="item.fieldId" + :data-index="index"> <label v-for="(item2) in item.selections" :key="item2.value"> <radio :value="item2.value" :checked="item2.value === item.value" /> <text>{{item2.label}}</text> @@ -64,12 +65,29 @@ :disabled="item.disabled" v-model="item.value" @change="onModelValue(item)" :style="{'margin-left':'10rpx'}" /> <!-- 鏃ユ湡鏃堕棿 --> - <view class="input-wrapper" + <!-- <view class="input-wrapper" v-if="(item.name=='TimePicker' || item.name=='DatePicker') "> <picker mode="date" class="date_iput" :class="item.disabled?'input-disabled':''" :disabled="item.disabled" :value="item.value" @change="onModelValue(item)"> <view class="picker">{{item.value}}</view> </picker> + </view> --> + <view class="input-wrapper" + v-if="(item.name=='TimePicker' || item.name=='DatePicker' || item.name=='DatePickerRange') "> + <OIDatePicker v-if="item.name=='DatePicker'" + :class="item.disabled?'input-disabled':''" :disabled="item.disabled" + v-model="item.value" :placeholder="item.placeholder" + :defaultToday="item.setting.defaultToday" :format="item.setting.format" + @change="onModelValue(item)" /> + <OIDatePickerRange v-if="item.name=='DatePickerRange'" + :rangeSeparator="item.setting.separator" :format="item.setting.format" + :class="item.disabled?'input-disabled':''" :disabled="item.disabled" + v-model="item.value" :placeholder="item.placeholder" + @change="onModelValue(item)" /> + <OITimePicker v-if="item.name=='TimePicker'" + :class="item.disabled?'input-disabled':''" :disabled="item.disabled" + v-model="item.value" :placeholder="item.placeholder" + @change="onModelValue(item)" /> </view> </view> <!-- 鏍呮牸甯冨眬 --> @@ -81,34 +99,37 @@ :style="{'width':cols.labelWidth+'px'}">{{cols.label}}锛�/text> <view class="dv_input" v-if="(cols.name=='Input' || cols.name=='InputNumber') "> <text v-if="cols.setting.prefix" class="uni-icon" - :class="[cols.setting.prefix]" @change="onChange(cols)"></text> + :class="[cols.setting.prefix]" + @click="onEnterChange(cols)"></text> <input class="uni-input" :class="cols.disabled?'input-disabled':''" :type="cols.name=='Input'?'text':cols.name=='InputNumber'?'number':'text'" v-model="cols.value" :disabled="cols.disabled" :placeholder="cols.placeholder" :style="{'width':cols.setting.prefix && cols.setting.suffix?'78%':cols.setting.prefix || cols.setting.suffix?'87%':'96%'}" - :focus="focusMateria" @focus="ontap(cols)" @blur="onevent(cols)" - :maxlength="-1" /> + :focus="focusMateria" @focus="ontap(cols)" @blur="onEnterChange(cols)" + @keyup.enter="onEnterChange(cols)" :maxlength="-1" /> <text v-if="cols.setting.suffix" class="uni-icon" - :class="[cols.setting.suffix]" @click="onChange(cols)"></text> + :class="[cols.setting.suffix]" + @click="onEnterChange(cols)"></text> </view> <!-- 涓嬫媺妗�鍗曢� cols.useDict?cols.dict:cols.selections--> <uni-data-select id="dv_select" v-if="cols.name=='Select' " :class="cols.disabled?'input-disabled':''" v-model="cols.value" - :localdata="cols.dict" @change="onChange(cols)" :disabled="cols.disabled" - :clear="false"></uni-data-select> + :localdata="cols.dict" @change="onEnterChange(cols)" + :disabled="cols.disabled" :clear="false"></uni-data-select> <!-- 澶氳鏂囨湰 --> <view class="input-wrapper" v-if="cols.name=='Textarea' "> <textarea class="uni-input" :value="cols.value" :class="cols.disabled?'input-disabled':''" - :placeholder="cols.placeholder" @blur="onModelValue(cols)" + :placeholder="cols.placeholder" @blur="onEnterChange(cols)" style="height:60px;" :style="{'width':'96%'}" :disabled="cols.disabled"></textarea> </view> <!-- 澶嶉�妗�--> <checkbox-group class="check_rememberPwd" v-if="cols.name=='Checkbox'" :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" - @change="onCheckBoxValue" :data-attr="cols.fieldId"> + @change="onCheckBoxValue" :data-attr="cols.fieldId" :data-index="index" + :data-iindex="key"> <label v-for="(cols2) in cols.selections" :key="cols2.value"> <checkbox :value="cols2.value" :checked="cols.value.includes(cols2.value)" /> @@ -118,7 +139,8 @@ <!-- 鍗曢�妗�--> <radio-group class="check_rememberPwd" v-if="cols.name=='Radio'" :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" - :style="{'margin-left':'10rpx'}" @change="onModelValue(cols)"> + :style="{'margin-left':'10rpx'}" @change="onRadioBoxValue" + :data-attr="cols.fieldId" :data-index="index" :data-iindex="key"> <label v-for="(cols2) in cols.selections" :key="cols2.value"> <radio :value="cols2.value" :checked="cols2.value === cols.value" /> <text>{{cols2.label}}</text> @@ -126,16 +148,30 @@ </radio-group> <!-- Switch寮�叧 --> <switch v-if="cols.name=='Switch'" :class="cols.disabled?'input-disabled':''" - :disabled="item.disabled" v-model="cols.value" @change="onModelValue(cols)" + :disabled="cols.disabled" v-model="cols.value" @change="onModelValue(cols)" :style="{'margin-left':'10rpx'}" /> <!-- 鏃ユ湡鏃堕棿 --> <view class="input-wrapper" v-if="(cols.name=='TimePicker' || cols.name=='DatePicker') && !cols.disabled"> - <picker mode="date" class="date_iput" + <!-- <picker mode="date" class="date_iput" :class="cols.disabled?'input-disabled':''" :disabled="item.disabled" :value="cols.value" @change="onModelValue(cols)"> <view class="picker">{{cols.value}}</view> - </picker> + </picker> --> + <OIDatePicker v-if="cols.name=='DatePicker'" + :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" + v-model="cols.value" :placeholder="cols.placeholder" + :defaultToday="cols.setting.defaultToday" :format="cols.setting.format" + @change="onModelValue(cols)" /> + <OIDatePickerRange v-if="cols.name=='DatePickerRange'" + :rangeSeparator="cols.setting.separator" :format="cols.setting.format" + :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" + v-model="cols.value" :placeholder="cols.placeholder" + @change="onModelValue(cols)" /> + <OITimePicker v-if="cols.name=='TimePicker'" + :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" + v-model="cols.value" :placeholder="cols.placeholder" + @change="onModelValue(cols)" /> </view> </view> @@ -177,10 +213,17 @@ runCustomEvent, dataObjQuery } from "@/api/data.js" - + import OIDatePicker from '@/components/oi-date-time-picker/oi-date-picker.vue' + import OIDatePickerRange from '@/components/oi-date-time-picker/oi-date-picker-range.vue' + import OITimePicker from '@/components/oi-date-time-picker/oi-time-picker.vue' export default { modules: { Base64, + }, + components: { + OIDatePicker, + OIDatePickerRange, + OITimePicker }, onBackPress(e) { // console.log("鐩戝惉杩斿洖鎸夐挳浜嬩欢",e); @@ -441,123 +484,24 @@ }); } }, + onCheckBoxValue(e) { //缁戝畾Model鍊�+ let values = e.detail.value || [] + var attr = item.fieldId; + this.detail2_styledef.form.model[attr] = values; - // 鍐呭鍙樺寲鍚庝簨浠�- async onChange(event) { - try { - if (event.id) { - var obj_attr = this.detail2_styledef.form.model; - // console.log(obj_attr); - var input_param = Base64.encode( - JSON.stringify( - Object.keys(obj_attr).map((a) => ({ - attr: a, - value: obj_attr[a] || "", - })) - ) - ); - var $this = this; - var dataInfo = { - ed_type: 0, - start_transaction: true, - class_id: this.$data.detail2_styledef.form.clsId, - class_name: '', - event_id: event.id, - event_name: '', - data_obj_id: "", - obj_attr: obj_attr, - prj_id: '', - ref_cls_id: '', - rel_obj_id: '', - user_login: '', - data_json: '', - compose_info: '', - ext_info: '', - global_attr: '', - input_param: input_param, - }; - runCustomEvent(dataInfo).then(result => { - // console.log(result); - if (result.ret != 0) { - var tip = result.err_info ? typeof result.err_info == 'string' ? result - .err_info : result.err_info.join('<br/>') : ''; - if (result.ret == 801) uni.showModal({ - title: this.translateSys("tip"), - content: tip, - showCancel: false, - confirmText: this.translateSys('close') - }); - else uni.showModal({ - title: this.translateSys("tip"), - content: tip + ',' + this.translateSys('tip') + ':' + result - .ret, - showCancel: false, - confirmText: this.translateSys('close') - }); - return false; - } else { - var tip = result.info ? typeof result.info == 'string' ? result.info : - result.info.join('<br/>') : ''; - if (tip) uni.showModal({ - title: this.translateSys("tip"), - content: tip, - showCancel: false, - confirmText: this.translateSys('close') - }); - - if (result.result_type == 0 && result.action) { - result.action.forEach(item => { - if (item.action_type == "set_dlg_attr") { - // value = {"attr":"xxx", "value":"xxx"} - var data = item.value; - $this.$data.detail2_styledef.form.items.forEach(async ( - ele, index) => { - data.forEach(async (ele2, index) => { - if (ele.fieldId == ele2 - .attr) { - ele.value = ele2 - .value; - } - }); - }); - } - }); - } else { - // this.detail2StyleDefList=[]; - if (result.info) { - uni.showModal({ - title: this.translateSys("tip"), - content: result.info, - showCancel: false, - confirmText: this.translateSys('close') - }); - } - } - } - - - }).catch(ex => { - // console.log(ex); - uni.showModal({ - title: this.translateSys("error") + "8.1", - content: ex.errMsg, - showCancel: false, - confirmText: this.translateSys('close') - }); - }); - } - } catch (ex) { - var tip = typeof ex == "string" ? ex : ex.message; - uni.showModal({ - title: this.translateSys("error") + "8.2", - content: this.translate('execute_after_change_event_failed') + this.translateSys( - "comma") + - this.translate('reason') + this.translateSys("colon") + tip, - showCancel: false, - confirmText: this.translateSys('close') - }); - - } + }, + onRadioBoxValue(e) { //缁戝畾Model鍊�+ let values = e.detail.value || "" + var attr = item.fieldId; + this.detail2_styledef.form.model[attr] = values; + }, + onModelValue(item) { + var attr = item.fieldId; + this.detail2_styledef.form.model[attr] = item.value; + }, + onEnterChange(item) { + var attr = item.fieldId; + this.detail2_styledef.form.model[attr] = item.value; }, //鐐瑰嚮鎸夐挳 onBtnClick(btn) { @@ -566,8 +510,10 @@ uni.showModal({ title: this.translateSys("tip"), content: btn.PromptContent || this.translate("are_you_sure"), + cancelText: this.translateSys('ok'), + confirmText: this.translateSys('cancel'), success: function(res) { - if (res.confirm) { + if (res.cancel) { that.onButtonClicked(btn); // } else if (res.cancel) { // console.log('鐢ㄦ埛鐐瑰嚮鍙栨秷'); @@ -594,8 +540,10 @@ uni.showModal({ title: this.translateSys("tip"), content: btn.PromptContent || this.translate("are_you_sure"), + cancelText: this.translateSys('ok'), + confirmText: this.translateSys('cancel'), success: function(res) { - if (res.confirm) { + if (res.cancel) { that.onButtonClicked(btn); // } else if (res.cancel) { // console.log('鐢ㄦ埛鐐瑰嚮鍙栨秷'); @@ -989,7 +937,8 @@ .uni-icon { /* border: 1px solid red; */ - width: 8%; + width: 30rpx; + padding: 10rpx 5rpx; font-family: uniicons; font-size: 40rpx; font-weight: 400; diff --git a/pages/modal/5601.vue b/pages/modal/5601.vue index a09008a..1082962 100644 --- a/pages/modal/5601.vue +++ b/pages/modal/5601.vue @@ -43,6 +43,18 @@ <!-- Switch寮�叧 --> <switch class="input-switch" v-if="item.name=='Switch'" :class="item.disabled?'input-disabled':''" :disabled="item.disabled" v-model="item.value" @change="onEnterChange(item)" /> + <OIDatePicker v-if="item.name=='DatePicker'" :class="item.disabled?'input-disabled':''" + :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" + :defaultToday="item.setting.defaultToday" :format="item.setting.format" + @change="onModelValue(item)" /> + <OIDatePickerRange v-if="item.name=='DatePickerRange'" :rangeSeparator="item.setting.separator" + :format="item.setting.format" :class="item.disabled?'input-disabled':''" + :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" + @change="onModelValue(item)" /> + <OITimePicker v-if="item.name=='TimePicker'" :class="item.disabled?'input-disabled':''" + :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" + @change="onModelValue(item)" /> + </uni-forms-item> <!-- 鏍呮牸甯冨眬 --> <uni-row v-else :gutter="item.setting.gutter"> @@ -88,7 +100,19 @@ <!-- Switch寮�叧 --> <switch v-if="col.name=='Switch'" :class="col.disabled?'input-disabled':''" :disabled="col.disabled" v-model="col.value" @change="onEnterChange(col)" /> + <OIDatePicker v-if="col.name=='DatePicker'" :class="col.disabled?'input-disabled':''" + :disabled="col.disabled" v-model="col.value" :placeholder="col.placeholder" + :defaultToday="col.setting.defaultToday" :format="col.setting.format" + @change="onModelValue(col)" /> + <OIDatePickerRange v-if="col.name=='DatePickerRange'" + :rangeSeparator="col.setting.separator" :format="col.setting.format" + :class="col.disabled?'input-disabled':''" :disabled="col.disabled" v-model="col.value" + :placeholder="col.placeholder" @change="onModelValue(col)" /> + <OITimePicker v-if="col.name=='TimePicker'" :class="col.disabled?'input-disabled':''" + :disabled="col.disabled" v-model="col.value" :placeholder="col.placeholder" + @change="onModelValue(col)" /> </uni-forms-item> + <uni-forms-item v-else label=""></uni-forms-item> </uni-col> </uni-row> </view> @@ -115,38 +139,39 @@ @tap="onPanelClick(ii,style.form.htmlobjId)" :id="'dvpanel'+style.form.htmlobjId" :class="style.form.htmlobjId==active_id?'bk-active':''"> - <div class="dv-panel-input"> - <div class="dv-input" v-for="(item,index) in style.form.items"> + <uni-forms class="dv-panel-form" label-align="right"> + <div class="dv-panel-form-item" v-for="(item,index) in style.form.items"> <!-- 鏅�甯冨眬 --> - <view v-if="item.name!='Layout'"> - <text class="txt_title" - :style="{'width':item.labelWidth+'px'}">{{item.label}}锛�/text> + <uni-forms-item v-if="item.name != 'Layout'" + :label="item.label ?item.label +'锛�:'' " + :label-width="item.labelWidth+'px'"> <span class="form-item-span" v-if="item.disabled">{{item.value}}</span> - <input class="uni-input" v-if="!item.disabled" + <input v-else class="uni-input" :type="item.name=='InputNumber'?'number':'text'" v-model="item.value" :disabled="item.disabled" :placeholder="item.placeholder" :maxlength="-1" /> - </view> + </uni-forms-item> <!-- 鏍呮牸甯冨眬 --> - <uni-row class="demo-uni-row" v-else :gutter="item.setting.gutter"> + <uni-row v-else :gutter="item.setting.gutter"> <uni-col - :span=" item.setting.spanList && item.setting.spanList[key]? item.setting.spanList[key] : 24 / item.setting.col" - v-for="(cols,key) in item.setting.colList"> - <view v-if="cols!=null"> - <text class="txt_title" - :style="{'width':cols.labelWidth+'px'}">{{cols.label}}锛�/text> + :span=" item.setting.spanList && item.setting.spanList[key]? item.setting.spanList[key] : (24 / item.setting.col)" + v-for="(col,key) in item.setting.colList"> + <uni-forms-item v-if="col!=null" + :label="col.label ? col.label +'锛�:''" + :label-width="col.labelWidth+'px'"> <span class="form-item-span" - v-if="cols.disabled">{{cols.value}}</span> - <input class="uni-input" v-if="!cols.disabled" - :type="cols.name=='InputNumber'?'number':'text'" - v-model="cols.value" :disabled="cols.disabled" - :placeholder="cols.placeholder" :maxlength="-1" /> - </view> + v-if="col.disabled">{{col.value}}</span> + <input v-else class="uni-input" + :type="col.name=='InputNumber'?'number':'text'" + v-model="col.value" :disabled="col.disabled" + :placeholder="col.placeholder" :maxlength="-1" /> + </uni-forms-item> + <uni-forms-item v-else label=""></uni-forms-item> </uni-col> </uni-row> </div> - </div> + </uni-forms> <div class="dv-panel-button" v-if="pageData.Select_Button==true || pageData.Row_Button.length > 0"> @@ -163,6 +188,7 @@ {{(btn.Style == 'text'|| btn.Style == 'img_text') ? btn.ShowName :""}} </button> </div> + </div> </checkbox-group> </view> @@ -238,11 +264,20 @@ getUIStyleInfo, runCustomEvent, } from "@/api/data.js" + import dayjs from "dayjs"; + import OIDatePicker from '@/components/oi-date-time-picker/oi-date-picker.vue' + import OIDatePickerRange from '@/components/oi-date-time-picker/oi-date-picker-range.vue' + import OITimePicker from '@/components/oi-date-time-picker/oi-time-picker.vue' export default { name: "PageModal5601", modules: { Base64, + }, + components: { + OIDatePicker, + OIDatePickerRange, + OITimePicker }, data() { return { @@ -895,6 +930,10 @@ } }, + onModelValue(item) { + var attr = item.fieldId; + this.head_styledef.form.model[attr] = item.value; + }, classAttr_extButton(item) { var onSuffixClickCallbackEvent = item.bind.onSuffixClickCallbackEvent; //鍚庡浘鏍囩偣鍑讳簨浠� var onSuffixClickEvent = item.bind.onSuffixClickEvent; //鍚庡浘鏍囩偣鍑诲洖璋�@@ -933,9 +972,9 @@ var detail_attr = {}; style.form.items.forEach(item => { if (item.name == "Layout") { //鍒ゆ柇鏄惁鏄爡鏍忔牸寮�- item.setting.colList.forEach(cols => { - if (cols != null) detail_attr[cols - .fieldId] = cols.value; + item.setting.colList.forEach(col => { + if (col != null) detail_attr[col + .fieldId] = col.value; }); } else detail_attr[item.fieldId] = item.value; @@ -993,9 +1032,9 @@ var head_attr = {}; this.head_styledef.form.items.forEach(item => { if (item.name == "Layout") { //鍒ゆ柇鏄惁鏄爡鏍忔牸寮�- item.setting.colList.forEach(cols => { - if (cols != null) head_attr[cols - .fieldId] = cols.value; + item.setting.colList.forEach(col => { + if (col != null) head_attr[col + .fieldId] = col.value; }); } else head_attr[item.fieldId] = item.value; @@ -1091,262 +1130,96 @@ if (result.result_type == 0 && result.action) { result.action.forEach(item => { - - if (item.action_type == - "insert_subtable_page_row" - ) { //鐮佺洏涓�- $this.$data.param - .Show_Welcom_Page = - false; + if (item.action_type == "insert_subtable_page_row") { //鐮佺洏涓�+ $this.$data.param.Show_Welcom_Page = false; var value = item.value; $this.viewAceionRow(value); } else if (item.action_type == - "set_subtable_page_content" - ) { //宸茬爜鐩�- $this.$data.param - .Show_Welcom_Page = - false; + "set_subtable_page_content") { //宸茬爜鐩�+ $this.$data.param.Show_Welcom_Page = false; var value = item.value; - const pageData = $this - .pageDetail.find(( - page) => { - return value - .page_name == - page.Name; - }); - if (value.clear_confirm != - false && value.clear == - true && - pageData && pageData - .DefList.length > 0 + const pageData = $this.pageDetail.find((page) => { + return value.page_name == page.Name; + }); + if (value.clear_confirm != false && value.clear == true && + pageData && pageData.DefList.length > 0 ) { //鍒ゆ柇鏄惁娓呯┖椤电鍐呭,姝e湪鐮佺洏鏄惁鏈夋暟鎹� uni.showModal({ - title: this - .translateSys( - 'tip' - ), - content: this - .translate( - "are_you_sure_clear_first" - ) + - this - .translateSys( - "quotation_mark_left" - ) + - value - .page_name + - this - .translateSys( - "quotation_mark_right" - ) + - this - .translate( - "are_you_sure_clear_last" - ), - success: function( - res - ) { - if (res - .confirm - ) { - if ( - pageData) - pageData - .DefList = []; - $this - .viewAceionContent( - value - ); - } else if ( - res - .cancel - ) { - if ( - pageData) - pageData - .DefList = []; - $this - .viewAceionContent( - value - ); + title: this.translateSys('tip'), + content: this.translate( + "are_you_sure_clear_first") + + this.translateSys( + "quotation_mark_left") + + value.page_name + + this.translateSys( + "quotation_mark_right") + + this.translate( + "are_you_sure_clear_last"), + cancelText: $this.translateSys('ok'), + confirmText: $this.translateSys('cancel'), + success: function(res) { + if (res.cancel) { + if (pageData) + pageData.DefList = []; + $this.viewAceionContent(value); + } else if (res.confirm) { + if (pageData) + pageData.DefList = []; + $this.viewAceionContent(value); } } }); } else { if (pageData) - pageData - .DefList = []; - $this - .viewAceionContent( - value); + pageData.DefList = []; + $this.viewAceionContent(value); } - } else if (item.action_type == - "select_subtable_page_row" - ) { + } else if (item.action_type == "select_subtable_page_row") { // value = {"page_name":"鐮佺洏涓�, "row":{"id":"xx"}} var value = item.value; - const pageData = $this - .pageDetail.find(( - page) => { - return value - .page_name == - page.Name; - }); - if (pageData?.DefList) { - pageData.DefList - .forEach(ele => { - - if (ele - .form - .objId == - value - .row.id - ) { - ele.SelBut_Checked = - true; - $this - .active_id = - ele - .form - .htmlobjId; - //鑷姩婊氬姩鍒版寚瀹氬厓绱�- uni.createSelectorQuery() - .select( - "#tabpanel" + - value - .page_name - ) //瀵瑰簲澶栧眰鑺傜偣 - .boundingClientRect( - ( - container - ) => { - uni.createSelectorQuery() - .select( - "#dvpanel" + - ele - .form - .htmlobjId - ) //鐩爣鑺傜偣 - .boundingClientRect( - ( - target - ) => { - uni.pageScrollTo({ - scrollTop: target - .top - - container - .top, //婊氬姩鍒板疄闄呰窛绂绘槸鍏冪礌璺濈椤堕儴鐨勮窛绂诲噺鍘绘渶澶栧眰鐩掑瓙鐨勬粴鍔ㄨ窛绂�- }); - } - ) - .exec(); - } - ) - .exec(); - } - }); - } + $this.viewActionSelectRow(value) } else if (item.action_type == - "remove_subtable_page_row" - ) { //娓呴櫎闈㈡澘涓寚瀹歩d鐨勬暟鎹�+ "remove_subtable_page_row") { //娓呴櫎闈㈡澘涓寚瀹歩d鐨勬暟鎹� var value = item.value; - const pageData = $this - .pageDetail.find(( - page) => { - return value - .page_name == - page.Name; - }); - if (pageData - ?.DefList - ) //鍒ゆ柇杩斿洖鐨刟ction鐨刾age_name鏄惁鏄緟鍒嗘嫞//娓呴櫎闈㈡澘涓寚瀹歩d鐨勬暟鎹�- { - value.row.forEach( - row => { - pageData - .DefList - .forEach( - (ele, - index - ) => { - if (ele - .form - .objId == - row - .id - ) { - pageData - .DefList - .splice( - index, - 1 - ); - } - }); - }); - } + $this.viewActionRemoveRow(value) + } else if (item.action_type == "set_subtable_page_row") { + $this.viewActionSetRow(item.value) - - - } else if (item.action_type == - "set_subtable_page_row") { - $this.viewActionSetRow(item - .value) - - } else if (item.action_type == - "set_subtable_page_ext_data" - ) { + } else if (item.action_type == "set_subtable_page_ext_data") { var value = item.value; - const pageData = $this - .pageDetail.find(( - page) => { - return value - .page_name == - page.Name; - }); + const pageData = $this.pageDetail.find((page) => { + return value.page_name == page.Name; + }); if (pageData) - pageData.ExtData = - value.ext_data + pageData.ExtData = value.ext_data - } else if (item.action_type == - "clear_subpage_rows") { + } else if (item.action_type == "clear_subpage_rows") { var value = item.value; - const pageData = $this - .pageDetail.find(( - page) => { - return value - .page_name == - page.Name; - }); + const pageData = $this.pageDetail.find((page) => { + return value.page_name == page.Name; + }); if (pageData) { pageData.DefList = [] pageData.ExtData = {} } - } else if (item.action_type == - "set_dlg_current_edit_attr" - ) { + } else if (item.action_type == "set_dlg_current_edit_attr") { - if ($this - .focusOldFieldId == - item.value) { + if ($this.focusOldFieldId == item.value) { $this.setData({ focusFieldId: "" }) } else { $this.setData({ - focusFieldId: $this - .focusOldFieldId + focusFieldId: $this.focusOldFieldId }) } $this.$nextTick(() => { $this.setData({ - focusFieldId: item - .value + focusFieldId: item.value }) }); - } else if (item.action_type == - "set_dlg_attr") { + } else if (item.action_type == "set_dlg_attr") { // value = {"attr":"xxx", "value":"xxx"} var data = item.value; $this.setFormValues(data) @@ -1424,6 +1297,51 @@ } }, + viewActionSelectRow(value) { + const pageData = this.pageDetail.find((page) => { + return value.page_name == page.Name; + }); + if (pageData?.DefList) { + pageData.DefList.forEach(ele => { + if (ele.form.objId == value.row.id) { + ele.SelBut_Checked = true; + this.active_id = ele.form.htmlobjId; + //鑷姩婊氬姩鍒版寚瀹氬厓绱�+ uni.createSelectorQuery().select("#tabpanel" + value.page_name) //瀵瑰簲澶栧眰鑺傜偣 + .boundingClientRect((container) => { + uni.createSelectorQuery() + .select("#dvpanel" + ele.form.htmlobjId) //鐩爣鑺傜偣 + .boundingClientRect((target) => { + uni.pageScrollTo({ + scrollTop: target.top - container + .top, //婊氬姩鍒板疄闄呰窛绂绘槸鍏冪礌璺濈椤堕儴鐨勮窛绂诲噺鍘绘渶澶栧眰鐩掑瓙鐨勬粴鍔ㄨ窛绂�+ }); + }).exec(); + }).exec(); + } + }); + } + + }, + + viewActionRemoveRow(value) { + if (JSON.stringify(value.row) == '{}') { + return; + } + const pageData = this.pageDetail.find((page) => { + return value.page_name == page.Name; + }); + if (pageData?.DefList) //鍒ゆ柇杩斿洖鐨刟ction鐨刾age_name鏄惁鏄緟鍒嗘嫞//娓呴櫎闈㈡澘涓寚瀹歩d鐨勬暟鎹�+ { + value.row.forEach((row) => { + pageData.DefList.forEach((ele, index) => { + if (ele.form.objId == row.id) { + pageData.DefList.splice(index, 1); + } + }); + }); + } + }, //鏇存柊鍒嗛〉绛句腑鐨勫垪琛ㄩ」鍐呭 viewActionSetRow(value) { const $this = this @@ -1815,9 +1733,9 @@ var head_attr = {}; this.$data.head_styledef.form.items.forEach(item => { if (item.name == "Layout") { //鍒ゆ柇鏄惁鏄爡鏍忔牸寮�- item.setting.colList.forEach(cols => { - if (cols != null) head_attr[cols.fieldId] = - cols.value; + item.setting.colList.forEach(col => { + if (col != null) head_attr[col.fieldId] = + col.value; }); } else head_attr[item.fieldId] = item.value; @@ -1828,9 +1746,9 @@ var detail_attr = {}; style.form.items.forEach(item => { if (item.name == "Layout") { //鍒ゆ柇鏄惁鏄爡鏍忔牸寮�- item.setting.colList.forEach(cols => { - if (cols != null) detail_attr[cols - .fieldId] = cols + item.setting.colList.forEach(col => { + if (col != null) detail_attr[col + .fieldId] = col .value; }); } else @@ -2557,11 +2475,14 @@ const $this = this if (btn.Prompt) { const sContent = btn.PromptContent || this.translate("confirm") + uni.showModal({ title: this.translateSys("tip"), content: btn.PromptContent || this.translate("confirm"), + cancelText: this.translateSys('ok'), + confirmText: this.translateSys('cancel'), success: function(res) { - if (res.confirm) { + if (res.cancel) { $this.onButtonClicked(btn, pageData, -1); } @@ -2579,8 +2500,10 @@ uni.showModal({ title: this.translateSys("tip"), content: btn.PromptContent || this.translate("confirm"), + cancelText: this.translateSys('ok'), + confirmText: this.translateSys('cancel'), success: function(res) { - if (res.confirm) { + if (res.cancel) { $this.onButtonClicked(btn, pageData, index); } @@ -2651,9 +2574,9 @@ const objAttr = {} row.form.items.forEach(item => { if (item.name == "Layout") { //鍒ゆ柇鏄惁鏄爡鏍忔牸寮�- item.setting.colList.forEach(cols => { - if (cols != null) objAttr[cols - .fieldId] = cols.value; + item.setting.colList.forEach(col => { + if (col != null) objAttr[col + .fieldId] = col.value; }); } else objAttr[item.fieldId] = item.value; @@ -2703,9 +2626,8 @@ const objAttr = {} row.form.items.forEach(item => { if (item.name == "Layout") { //鍒ゆ柇鏄惁鏄爡鏍忔牸寮�- item.setting.colList.forEach(cols => { - if (cols != null) objAttr[cols - .fieldId] = cols.value; + item.setting.colList.forEach(col => { + if (col != null) objAttr[col.fieldId] = col.value; }); } else objAttr[item.fieldId] = item.value; @@ -2782,9 +2704,9 @@ var head_attr = {}; this.$data.head_styledef.form.items.forEach(item => { if (item.name == "Layout") { //鍒ゆ柇鏄惁鏄爡鏍忔牸寮�- item.setting.colList.forEach(cols => { - if (cols != null) head_attr[cols.fieldId] = - cols.value; + item.setting.colList.forEach(col => { + if (col != null) head_attr[col.fieldId] = + col.value; }); } else head_attr[item.fieldId] = item.value; @@ -2796,10 +2718,9 @@ var detail_attr = {}; style.form.items.forEach(item => { if (item.name == "Layout") { //鍒ゆ柇鏄惁鏄爡鏍忔牸寮�- item.setting.colList.forEach(cols => { - if (cols != null) detail_attr[ - cols - .fieldId] = cols.value; + item.setting.colList.forEach(col => { + if (col != null) + detail_attr[col.fieldId] = col.value; }); } else detail_attr[item.fieldId] = item.value; @@ -2958,242 +2879,100 @@ ) { //鐮佺洏涓� var value = item.value; //鍔犺浇宸茬粡鐮佺洏鏁版嵁 - $this.viewAceionRow( - value, ); + $this.viewAceionRow(value); //娓呯┖鏉$爜鍐呭 - $this.$data - .head_styledef - .form.items - .forEach(( - item, - index) => { - if (item - .fieldId != - "S_CNTR_CODE" - ) { - item.value = - ''; - item.oldvalue = - ''; - $this - .$data - .head_styledef - .form - .model[ - item - .fieldId - ] = - ''; - } - }); + $this.$data.head_styledef.form.items.forEach((item, index) => { + if (item.fieldId != "S_CNTR_CODE") { + item.value = ''; + item.oldvalue = ''; + $this.$data.head_styledef.form.model[item + .fieldId] = ''; + } + }); uni.showModal({ - title: this - .translateSys( - "tip" - ), - content: this - .translate( - 'execute_event_success' - ), + title: $this.translateSys("tip"), + content: $this.translate('execute_event_success'), showCancel: false, - confirmText: this - .translateSys( - 'close' - ) + confirmText: $this.translateSys('close') }); } else if (item.action_type == "set_subtable_page_content" ) { //宸茬爜鐩�- $this.$data.param - .Show_Welcom_Page = - false; + $this.$data.param.Show_Welcom_Page = false; var value = item.value; - const pageData = $this - .pageDetail.find(( - page) => { - return value - .page_name == - page.Name; - }); - if (value.clear_confirm != - false && value.clear == - true && - pageData && pageData - .DefList.length > 0 + const pageData = $this.pageDetail.find((page) => { + return value.page_name == page.Name; + }); + if (value.clear_confirm != false && value.clear == true && + pageData && pageData.DefList.length > 0 ) { //鍒ゆ柇鏄惁娓呯┖椤电鍐呭,姝e湪鐮佺洏鏄惁鏈夋暟鎹� uni.showModal({ - title: this - .translateSys( - 'tip' - ), - content: this - .translate( - "are_you_sure_clear_first" - ) + - this - .translateSys( - "quotation_mark_left" - ) + - value - .page_name + - this - .translateSys( - "quotation_mark_right" - ) + - this - .translate( - "are_you_sure_clear_last" - ), - success: function( - res - ) { - if (res - .confirm - ) { - if ( - pageData - ) - pageData - .DefList = []; - $this - .viewAceionContent( - value - ); - } else if ( - res - .cancel - ) { - if ( - pageData - ) - pageData - .DefList = []; - $this - .viewAceionContent( - value - ); + title: $this.translateSys('tip'), + content: $this.translate( + "are_you_sure_clear_first") + + $this.translateSys("quotation_mark_left") + + value.page_name + + $this.translateSys( + "quotation_mark_right") + + $this.translate("are_you_sure_clear_last"), + cancelText: $this.translateSys('ok'), + confirmText: $this.translateSys('cancel'), + success: function(res) { + if (res.cancel) { + if (pageData) + pageData.DefList = []; + $this.viewAceionContent(value); + } else if (res.confirm) { + if (pageData) + pageData.DefList = []; + $this.viewAceionContent(value); } } }); } else { if (pageData) - pageData - .DefList = []; - $this - .viewAceionContent( - value); + pageData.DefList = []; + $this.viewAceionContent(value); } - } else if (item - .action_type == - "remove_subtable_page_row" - ) { //娓呴櫎闈㈡澘涓寚瀹歩d鐨勬暟鎹�- var value = item.value; - const pageData = $this - .pageDetail.find(( - page) => { - return value - .page_name == - page - .Name; - }); - if (pageData - ?.DefList - ) { //鍒ゆ柇杩斿洖鐨刟ction鐨刾age_name鏄惁鏄緟鍒嗘嫞 - //娓呴櫎闈㈡澘涓寚瀹歩d鐨勬暟鎹�- value.row.forEach( - row => { - pageData - .DefList - .forEach( - ( - ele, - index - ) => { - if (ele - .form - .objId == - row - .id - ) { - pageData - .DefList - .splice( - index, - 1 - ); - } - } - ); - }); - } - } else if (item - .action_type == - "set_subtable_page_row" - ) { - $this.viewActionSetRow( - item - .value) - - } else if (item - .action_type == - "set_subtable_page_ext_data" - ) { - var value = item.value; - const pageData = $this - .pageDetail.find(( - page) => { - return value - .page_name == - page - .Name; - }); + } else if (item.action_type == + "remove_subtable_page_row") { //娓呴櫎闈㈡澘涓寚瀹歩d鐨勬暟鎹�+ let value = item.value; + $this.viewActionRemoveRow(value) + } else if (item.action_type == "set_subtable_page_row") { + $this.viewActionSetRow(item.value) + } else if (item.action_type == "set_subtable_page_ext_data") { + let value = item.value; + const pageData = $this.pageDetail.find((page) => { + return value.page_name == page.Name; + }); if (pageData) { - pageData.ExtData = - value - .ext_data + pageData.ExtData = value.ext_data } - } else if (item - .action_type == - "clear_subpage_rows") { + } else if (item.action_type == "clear_subpage_rows") { var value = item.value; - const pageData = $this - .pageDetail.find(( - page) => { - return value - .page_name == - page - .Name; - }); + const pageData = $this.pageDetail.find((page) => { + return value.page_name == page.Name; + }); if (pageData) { - pageData - .DefList = [] - pageData - .ExtData = {} + pageData.DefList = [] + pageData.ExtData = {} } - } else if (item - .action_type == - "set_dlg_current_edit_attr" - ) { - if ($this - .focusOldFieldId == - item.value) + } else if (item.action_type == "set_dlg_current_edit_attr") { + if ($this.focusOldFieldId == item.value) $this.setData({ focusFieldId: "" }) else { $this.setData({ - focusFieldId: $this - .focusOldFieldId + focusFieldId: $this.focusOldFieldId }) } $this.$nextTick(() => { - $this - .setData({ - focusFieldId: item - .value - }) + $this.setData({ + focusFieldId: item.value + }) }); } else if (item.action_type == "set_dlg_attr") { @@ -3204,12 +2983,8 @@ }); } else { - if ($this.$data.After_OK_Event.ID != - event - .ID) { //鍒ゆ柇褰撳墠浜嬩欢鏄惁鏄‘瀹氬悗浜嬩欢 - - $this.sava(pageParam, $this.$data - .After_OK_Event); //鎵ц纭畾鍚庝簨浠�+ if ($this.$data.After_OK_Event.ID != event.ID) { //鍒ゆ柇褰撳墠浜嬩欢鏄惁鏄‘瀹氬悗浜嬩欢 + $this.sava(pageParam, $this.$data.After_OK_Event); //鎵ц纭畾鍚庝簨浠� } } @@ -3217,12 +2992,10 @@ if (result.info) { uni.showModal({ - title: this.translateSys( - "tip"), + title: this.translateSys("tip"), content: result.info, showCancel: false, - confirmText: this - .translateSys('close') + confirmText: this.translateSys('close') }); } } @@ -3234,11 +3007,8 @@ let tip = typeof ex.errMsg == "string" ? ex.errMsg : ex uni.showModal({ title: this.translateSys("error") + "8.1", - content: this.translate( - "execute_after_ok_event_failed") + - this.translateSys( - "comma") + - tip, + content: this.translate("execute_after_ok_event_failed") + + this.translateSys("comma") + tip, showCancel: false, confirmText: this.translateSys('close') }); @@ -3309,7 +3079,7 @@ } .uni-icon { - padding: 8rpx; + padding: 10rpx 5rpx; font-size: 32rpx; color: rgb(192, 196, 204); } @@ -3366,8 +3136,6 @@ background-color: #ddd !important; color: #888 !important; } - - .btn-left { padding: 20rpx; @@ -3439,7 +3207,7 @@ .uni-icon { /* border: 1px solid red; */ - width: 8%; + width: 30rpx; font-family: uniicons; font-size: 40rpx; font-weight: 400; @@ -3455,46 +3223,55 @@ .dv-panel { background-color: #efefef; - padding: 20rpx 20rpx 10rpx 0px; + padding: 10rpx 10rpx 10rpx 0px; border-radius: 12rpx; margin: 10rpx 0 20rpx 0; - text-align: right; - .txt_title { - font-size: 28rpx; - text-align: right; - display: inline-block; - } + .dv-panel-form { + padding: 0px; + margin: 0; - input { - vertical-align: middle; - display: inline-block; - border: 1px solid #d5d5d5; - width: 68%; - height: 48rpx; - line-height: 28rpx; - background: #FFF; - border-radius: 7px !important; - color: #2d8cf0; - padding: 6rpx 8rpx 8rpx; - font-size: 28rpx; - font-family: inherit; - box-shadow: none !important; - transition-duration: 0.1s; - margin-top: 0rpx; - } + .dv-panel-form-item { + margin: 0; + padding: 0px; + } - input::-webkit-input-placeholder { - font-size: 10rpx; - } + .uni-forms-item { + padding-bottom: 5rpx; + margin-bottom: 0; - .form-item-span { - vertical-align: text-top; - color: #2d8cf0; - white-space: normal; - word-break: break-all; - display: inline-block; - width: calc(100% - 100px); + .uni-forms-item__label { + height: 20px !important; + padding: 0 10rpx 0 0 !important; + } + + .uni-input { + width: calc(100% - 12rpx); + padding: 5rpx; + border: 1px solid #d5d5d5; + color: #2d8cf0; + height: 20px; + background: #FFF; + line-height: 20px; + border-radius: 6px !important; + font-size: 14px; + font-family: inherit; + box-shadow: none !important; + transition-duration: 0.1s; + vertical-align: middle; + } + + .form-item-span { + vertical-align: text-top; + color: #2d8cf0; + white-space: normal; + word-break: break-all; + width: 100%; + } + } + + + } .dv-panel-button { @@ -3522,15 +3299,6 @@ } - .dv-panel-input { - width: 100%; - display: inline-block; - text-align: left; - - .dv-input { - margin-bottom: 2rpx; - } - } .logo { height: 100rpx; @@ -3675,7 +3443,7 @@ .popup-footer { float: right; position: absolute; - bottom:10rpx; + bottom: 10rpx; right: 20rpx; } diff --git a/pages/modal/form/index.vue b/pages/modal/form/index.vue index 72ffda4..a1acb6d 100644 --- a/pages/modal/form/index.vue +++ b/pages/modal/form/index.vue @@ -8,8 +8,9 @@ <uni-forms-item v-if="item.name != 'Layout'" :label="item.label ?item.label +'锛�:'' " :label-width="item.labelWidth+'px'"> <uni-data-picker v-if="item.name=='Select'" :class="item.disabled?'input-disabled':''" - v-model="item.value" :localdata="item.useDict ? item.dict : item.selections" @change="onEnterChange(item)" - :readonly="item.disabled" :clear-icon="false" :popup-title="item.label"></uni-data-picker> + v-model="item.value" :localdata="item.useDict ? item.dict : item.selections" + @change="onEnterChange(item)" :readonly="item.disabled" :clear-icon="false" + :popup-title="item.label"></uni-data-picker> <view class="input-wrapper" v-if="item.name=='Input' || item.name=='InputNumber'"> <text v-if="item.setting.prefix" class="uni-icon" :class="[item.setting.prefix]" @click="classAttr_extButton(item)"></text> @@ -44,16 +45,28 @@ <switch class="input-switch" v-if="item.name=='Switch'" :class="item.disabled?'input-disabled':''" :disabled="item.disabled" v-model="item.value" @change="onEnterChange(item)" /> + <OIDatePicker v-if="item.name=='DatePicker'" :class="item.disabled?'input-disabled':''" + :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" + :defaultToday="item.setting.defaultToday" :format="item.setting.format" + @change="onDatetimePickerChange(item)" /> + <OIDatePickerRange v-if="item.name=='DatePickerRange'" :rangeSeparator="item.setting.separator" + :format="item.setting.format" :class="item.disabled?'input-disabled':''" + :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" + @change="onDatetimePickerChange(item)" /> + <OITimePicker v-if="item.name=='TimePicker'" :class="item.disabled?'input-disabled':''" + :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" + @change="onDatetimePickerChange(item)" /> </uni-forms-item> <!-- 鏍呮牸甯冨眬 --> <uni-row v-else :gutter="item.setting.gutter"> <uni-col :span=" item.setting.spanList && item.setting.spanList[key]? item.setting.spanList[key] : 24 / item.setting.col" v-for="(col,key) in item.setting.colList"> - <uni-forms-item v-if="col!=null" :label="col.label ? col.label +'锛�:''" :label-width="col.labelWidth+'px'"> + <uni-forms-item v-if="col!=null" :label="col.label ? col.label +'锛�:''" + :label-width="col.labelWidth+'px'"> <uni-data-picker v-if="col.name=='Select'" :class="col.disabled?'input-disabled':''" - v-model="col.value" :localdata="col.useDict ? col.dict : col.selections" @change="onEnterChange(col)" - :readonly="col.disabled" :clear-icon="false" + v-model="col.value" :localdata="col.useDict ? col.dict : col.selections" + @change="onEnterChange(col)" :readonly="col.disabled" :clear-icon="false" :popup-title="col.label"></uni-data-picker> <view class="input-wrapper" v-if="col.name=='Input' || col.name=='InputNumber'"> <text v-if="col.setting.prefix" class="uni-icon" :class="[col.setting.prefix]" @@ -88,6 +101,18 @@ <!-- Switch寮�叧 --> <switch v-if="col.name=='Switch'" :class="col.disabled?'input-disabled':''" :disabled="col.disabled" v-model="col.value" @change="onEnterChange(col)" /> + <OIDatePicker v-if="col.name=='DatePicker'" :class="col.disabled?'input-disabled':''" + :disabled="col.disabled" v-model="col.value" :placeholder="col.placeholder" + :defaultToday="col.setting.defaultToday" :format="col.setting.format" + @change="onDatetimePickerChange(col)" /> + <OIDatePickerRange v-if="col.name=='DatePickerRange'" + :rangeSeparator="col.setting.separator" :format="col.setting.format" + :class="col.disabled?'input-disabled':''" :disabled="col.disabled" + v-model="col.value" :placeholder="col.placeholder" + @change="onDatetimePickerChange(col)" /> + <OITimePicker v-if="col.name=='TimePicker'" :class="col.disabled?'input-disabled':''" + :disabled="col.disabled" v-model="col.value" :placeholder="col.placeholder" + @change="onDatetimePickerChange(col)" /> </uni-forms-item> </uni-col> </uni-row> @@ -104,9 +129,9 @@ <uni-popup class="view-popup" ref="popup" background-color="#fff" @change="popupChange"> <view class="popup-header">{{check_list.title}}</view> <view class="popup-content" :class="{ 'popup-height': popupType === 'left' || popupType === 'right' }" - :style="{'width':check_list.width?check_list.width+'px':'375rpx','height':check_list.height?check_list.height+'px':popupType =='center'?'60vh':'88vh'}"> - <view class="popup-cont" - :style="{'height':check_list.height?check_list.height-45+'px':popupType =='center'?'50vh':'80vh'}"> + :style="{'width':check_list.width?check_list.width+'px':'375rpx','height':check_list.height?check_list.height+'px':popupType =='center'?'60vh':'88vh'}"> + <view class="popup-cont" + :style="{'height':check_list.height?check_list.height-45+'px':popupType =='center'?'50vh':'80vh'}"> <view class="view_popup_CheckList" v-for="(item,index) in check_list.items"> <checkbox-group class="check_list" @change="checkChange" :data-ischeck="item.check" :data-index="index" :style="{'margin-left': '10rpx'}"> @@ -140,11 +165,19 @@ updateDataObj, dataObjInfo } from "@/api/data.js" - + import dayjs from "dayjs"; + import OIDatePicker from '@/components/oi-date-time-picker/oi-date-picker.vue' + import OIDatePickerRange from '@/components/oi-date-time-picker/oi-date-picker-range.vue' + import OITimePicker from '@/components/oi-date-time-picker/oi-time-picker.vue' export default { name: "PageModalForm", modules: { Base64, + }, + components: { + OIDatePicker, + OIDatePickerRange, + OITimePicker }, data() { return { @@ -232,7 +265,7 @@ this.ext_info = JSON.parse(options.extInfo); if (options.dataJson) this.data_json = JSON.parse(options.dataJson); - this.title = options.titlename ? options.titlename : this.param.ShowName; //璁剧疆鎸夐挳鏂囧瓧 + this.title = options.titlename ? options.titlename : this.param.ShowName; //璁剧疆鎸夐挳鏂囧瓧 // console.log(options) uni.setNavigationBarTitle({ title: this.title @@ -440,7 +473,7 @@ }, async loadFormData(objAttr) { let attrs = [] - + if (this.objId) { let info = await dataObjInfo({ class_id: this.clsId, @@ -772,6 +805,11 @@ } } + + }, + onDatetimePickerChange(e) { + var attr = item.fieldId; + this.head_styledef.form.model[attr] = item.value; }, classAttr_extButton(item) { @@ -2048,7 +2086,8 @@ } .uni-icon { - padding: 8rpx; + + padding: 10rpx 5rpx; font-size: 32rpx; color: rgb(192, 196, 204); } @@ -2119,7 +2158,7 @@ .uni-icon { /* border: 1px solid red; */ - width: 8%; + width: 30rpx; font-family: uniicons; font-size: 40rpx; font-weight: 400; @@ -2157,7 +2196,7 @@ .popup-footer { float: right; position: absolute; - bottom:10rpx; + bottom: 10rpx; right: 20rpx; } diff --git a/uni_modules/uni-datetime-picker/changelog.md b/uni_modules/uni-datetime-picker/changelog.md new file mode 100644 index 0000000..102ddb1 --- /dev/null +++ b/uni_modules/uni-datetime-picker/changelog.md @@ -0,0 +1,168 @@ +## 2.2.38锛�024-10-15锛�+- 淇 寰俊灏忕▼搴忎腑鐨刧etSystemInfo璀﹀憡 +## 2.2.37锛�024-10-12锛�+- 淇 寰俊灏忕▼搴忎腑鐨刧etSystemInfo璀﹀憡 +## 2.2.36锛�024-10-12锛�+- 淇 寰俊灏忕▼搴忎腑鐨刧etSystemInfo璀﹀憡 +## 2.2.35锛�024-09-21锛�+- 淇 娌℃湁閫変腑鏃ユ湡鏃剁偣鍑荤‘瀹氱洿鎺ユ姤閿欑殑Bug [璇︽儏](https://ask.dcloud.net.cn/question/198168) +## 2.2.34锛�024-04-24锛�+- 鏂板 鏃ユ湡鐐瑰嚮浜嬩欢锛屽湪鐐瑰嚮鏃ユ湡鏃朵細瑙﹀彂璇ヤ簨浠躲� +## 2.2.33锛�024-04-15锛�+- 淇 鎶栭煶灏忕▼搴忎簨浠朵紶閫掑け鏁坆ug +## 2.2.32锛�024-02-20锛�+- 淇 鏃ュ巻鐨刢lose浜嬩欢瑙﹀彂寮傚父鐨刡ug [璇︽儏](https://github.com/dcloudio/uni-ui/issues/844) +## 2.2.31锛�024-02-20锛�+- 淇 h5骞冲彴 鍙宠竟鏃ュ巻鐨勬湀浠介粯璁�1鐨刡ug [璇︽儏](https://github.com/dcloudio/uni-ui/issues/841) +## 2.2.30锛�024-01-31锛�+- 淇 闅愯棌鈥滅鈥濇椂锛屽湪IOS15鍙婁互涓嬬増鏈椂鍑虹幇 缁撴潫鏃堕棿鍦ㄥ紑濮嬫椂闂翠箣鍓�鐨刡ug [璇︽儏](https://github.com/dcloudio/uni-ui/issues/788) +## 2.2.29锛�024-01-20锛�+- 鏂板 show浜嬩欢锛屽脊绐楀脊鍑烘椂瑙﹀彂璇ヤ簨浠�[璇︽儏](https://github.com/dcloudio/uni-app/issues/4694) +## 2.2.28锛�024-01-18锛�+- 鍘婚櫎 noChange浜嬩欢锛屽綋杩涜鏃ユ湡鑼冨洿閫夋嫨鏃讹紝鑻ュ彧閫変簡涓�ぉ锛屽垯寮�缁撴潫鏃ユ湡閮戒负鍚屼竴澶�[璇︽儏](https://github.com/dcloudio/uni-ui/issues/815) +## 2.2.27锛�024-01-10锛�+- 浼樺寲 澧炲姞noChange浜嬩欢锛屽綋杩涜鏃ユ湡鑼冨洿閫夋嫨鏃讹紝鑻ユ湁绌哄�锛屽垯瑙﹀彂璇ヤ簨浠�[璇︽儏](https://github.com/dcloudio/uni-ui/issues/815) +## 2.2.26锛�024-01-08锛�+- 淇 瀛楄妭灏忕▼搴忔椂闂撮�鎷╄寖鍥村櫒澶辨晥闂 [璇︽儏](https://github.com/dcloudio/uni-ui/issues/834) +## 2.2.25锛�023-10-18锛�+- 淇 PC绔垵娆′慨鏀规椂闂达紝寮�鏃堕棿鏈洿鏂扮殑Bug [璇︽儏](https://github.com/dcloudio/uni-ui/issues/737) +## 2.2.24锛�023-06-02锛�+- 淇 閮ㄥ垎鎯呭喌淇敼鏃堕棿锛屽紑濮嬨�缁撴潫鏃堕棿鏄剧ず寮傚父鐨凚ug [璇︽儏](https://ask.dcloud.net.cn/question/171146) +- 浼樺寲 褰撳墠鏈堝彲浠ラ�鎷╀笂鏈堛�涓嬫湀鐨勬棩鏈熺殑Bug +## 2.2.23锛�023-05-02锛�+- 淇 閮ㄥ垎鎯呭喌淇敼鏃堕棿锛屽紑濮嬫椂闂存湭鏇存柊鐨凚ug [璇︽儏](https://github.com/dcloudio/uni-ui/issues/737) +- 淇 閮ㄥ垎骞冲彴鍙婅澶囩涓�鐐瑰嚮鏃犳硶鏄剧ず寮规鐨凚ug +- 淇 ios 鏃ユ湡鏍煎紡鏈ˉ闆舵樉绀哄強浣跨敤寮傚父鐨凚ug [璇︽儏](https://ask.dcloud.net.cn/question/162979) +## 2.2.22锛�023-03-30锛�+- 淇 鏃ュ巻 picker 淇敼骞存湀鍚庯紝鑷姩閫変腑褰撴湀1鏃ョ殑Bug [璇︽儏](https://ask.dcloud.net.cn/question/165937) +- 淇 灏忕▼搴忕 浣庣増鏈�ios NaN鐨凚ug [璇︽儏](https://ask.dcloud.net.cn/question/162979) +## 2.2.21锛�023-02-20锛�+- 淇 firefox 娴忚鍣ㄦ樉绀哄尯鍩熺偣鍑绘棤娉曟媺璧锋棩鍘嗗脊妗嗙殑Bug [璇︽儏](https://ask.dcloud.net.cn/question/163362) +## 2.2.20锛�023-02-17锛�+- 浼樺寲 鍊间负绌轰緷鐒堕�涓綋澶╅棶棰�+- 浼樺寲 鎻愪緵 default-value 灞炴�鏀寔閰嶇疆閫夋嫨鍣ㄦ墦寮�椂榛樿鏄剧ず鐨勬椂闂�+- 浼樺寲 闈炶寖鍥撮�鎷╂湭閫夋嫨鏃ユ湡鏃堕棿锛岀偣鍑荤‘璁ゆ寜閽�涓綋鍓嶆棩鏈熸椂闂�+- 浼樺寲 瀛楄妭灏忕▼搴忔棩鏈熸椂闂磋寖鍥撮�鎷╋紝搴曢儴鏃ユ湡鎹㈣鐨凚ug +## 2.2.19锛�023-02-09锛�+- 淇 2.2.18 寮曡捣鑼冨洿閫夋嫨閰嶇疆 end 閫夋嫨鏃犳晥鐨凚ug [璇︽儏](https://github.com/dcloudio/uni-ui/issues/686) +## 2.2.18锛�023-02-08锛�+- 淇 绉诲姩绔寖鍥撮�鎷ヽhange浜嬩欢瑙﹀彂寮傚父鐨凚ug [璇︽儏](https://github.com/dcloudio/uni-ui/issues/684) +- 浼樺寲 PC绔緭鍏ユ棩鏈熸牸寮忛敊璇椂杩斿洖褰撳墠鏃ユ湡鏃堕棿 +- 浼樺寲 PC绔緭鍏ユ棩鏈熸椂闂磋秴鍑�start銆乪nd 闄愬埗鐨凚ug +- 浼樺寲 绉诲姩绔棩鏈熸椂闂磋寖鍥寸敤娉曟椂闂村睍绀轰笉瀹屾暣闂 +## 2.2.17锛�023-02-04锛�+- 淇 灏忕▼搴忕缁戝畾 Date 绫诲瀷鎶ラ敊鐨凚ug [璇︽儏](https://github.com/dcloudio/uni-ui/issues/679) +- 淇 vue3 time-picker 鏃犳硶鏄剧ず缁戝畾鏃跺垎绉掔殑Bug +## 2.2.16锛�023-02-02锛�+- 淇 瀛楄妭灏忕▼搴忔姤閿欑殑Bug +## 2.2.15锛�023-02-02锛�+- 淇 鏌愪簺鎯呭喌鍒囨崲鏈堜唤閿欒鐨凚ug +## 2.2.14锛�023-01-30锛�+- 淇 鏌愪簺鎯呭喌鍒囨崲鏈堜唤閿欒鐨凚ug [璇︽儏](https://ask.dcloud.net.cn/question/162033) +## 2.2.13锛�023-01-10锛�+- 淇 澶氭鍔犺浇缁勪欢閫犳垚鍐呭瓨鍗犵敤鐨凚ug +## 2.2.12锛�022-12-01锛�+- 淇 vue3 涓�i18n 鍥介檯鍖栧垵濮嬪�涓嶆纭殑Bug +## 2.2.11锛�022-09-19锛�+- 淇 鏀粯瀹濆皬绋嬪簭鏍峰紡閿欎贡鐨凚ug [璇︽儏](https://github.com/dcloudio/uni-app/issues/3861) +## 2.2.10锛�022-09-19锛�+- 淇 鍙嶅悜閫夋嫨鏃ユ湡鑼冨洿锛屾棩鏈熸樉绀哄紓甯哥殑Bug [璇︽儏](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false) +## 2.2.9锛�022-09-16锛�+- 鍙互浣跨敤 uni-scss 鎺у埗涓婚鑹�+## 2.2.8锛�022-09-08锛�+- 淇 close浜嬩欢鏃犳晥鐨凚ug +## 2.2.7锛�022-09-05锛�+- 淇 绉诲姩绔�maskClick 鏃犳晥鐨凚ug [璇︽儏](https://ask.dcloud.net.cn/question/140824) +## 2.2.6锛�022-06-30锛�+- 浼樺寲 缁勪欢鏍峰紡锛岃皟鏁翠簡缁勪欢鍥炬爣澶у皬銆侀珮搴︺�棰滆壊绛夛紝涓巙ni-ui椋庢牸淇濇寔涓�嚧 +## 2.2.5锛�022-06-24锛�+- 淇 鏃ュ巻椤堕儴骞存湀鍙婂簳閮ㄧ‘璁ゆ湭鍥介檯鍖栫殑Bug +## 2.2.4锛�022-03-31锛�+- 淇 Vue3 涓嬪姩鎬佽祴鍊�鍗曢�绫诲瀷鏈搷搴旂殑Bug +## 2.2.3锛�022-03-28锛�+- 淇 Vue3 涓嬪姩鎬佽祴鍊兼湭鍝嶅簲鐨凚ug +## 2.2.2锛�021-12-10锛�+- 淇 clear-icon 灞炴�鍦ㄥ皬绋嬪簭骞冲彴涓嶇敓鏁堢殑Bug +## 2.2.1锛�021-12-10锛�+- 淇 鏃ユ湡鑼冨洿閫夊湪灏忕▼搴忓钩鍙帮紝蹇呴』澶氱偣鍑讳竴娆℃墠鑳藉彇娑堥�涓姸鎬佺殑Bug +## 2.2.0锛�021-11-19锛�+- 浼樺寲 缁勪欢UI锛屽苟鎻愪緵璁捐璧勬簮 [璇︽儏](https://uniapp.dcloud.io/component/uniui/resource) +- 鏂囨。杩佺Щ [https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker) +## 2.1.5锛�021-11-09锛�+- 鏂板 鎻愪緵缁勪欢璁捐璧勬簮锛岀粍浠舵牱寮忚皟鏁�+## 2.1.4锛�021-09-10锛�+- 淇 hide-second 鍦ㄧЩ鍔ㄧ鐨凚ug +- 淇 鍗曢�璧嬮粯璁ゅ�鏃讹紝璧嬪�鏃ユ湡鏈珮浜殑Bug +- 淇 璧嬮粯璁ゅ�鏃讹紝绉诲姩绔湭姝g‘鏄剧ず鏃堕棿鐨凚ug +## 2.1.3锛�021-09-09锛�+- 鏂板 hide-second 灞炴�锛屾敮鎸佸彧浣跨敤鏃跺垎锛岄殣钘忕 +## 2.1.2锛�021-09-03锛�+- 浼樺寲 鍙栨秷閫変腑鏃讹紙鑼冨洿閫夛級鐩存帴寮�涓嬩竴娆¢�鎷� 閬垮厤澶氱偣涓� +- 浼樺寲 绉诲姩绔敮鎸佹竻闄ゆ寜閽紝鍚屾椂鏀寔閫氳繃 ref 璋冪敤缁勪欢鐨�clear 鏂规硶 +- 浼樺寲 璋冩暣瀛楀彿澶у皬锛岀編鍖栨棩鍘嗙晫闈�+- 淇 鍥犲浗闄呭寲瀵艰嚧鐨�placeholder 澶辨晥鐨凚ug +## 2.1.1锛�021-08-24锛�+- 鏂板 鏀寔鍥介檯鍖�+- 浼樺寲 鑼冨洿閫夋嫨鍣ㄥ湪 pc 绔繃瀹界殑闂 +## 2.1.0锛�021-08-09锛�+- 鏂板 閫傞厤 vue3 +## 2.0.19锛�021-08-09锛�+- 鏂板 鏀寔浣滀负 uni-forms 瀛愮粍浠剁浉鍏冲姛鑳�+- 淇 鍦�uni-forms 涓娇鐢ㄦ椂锛岄�鎷╂椂闂存姤 NAN 閿欒鐨凚ug +## 2.0.18锛�021-08-05锛�+- 淇 type 灞炴�鍔ㄦ�璧嬪�鏃犳晥鐨凚ug +- 淇 鈥樼‘璁も�鎸夐挳琚�tabbar 閬洊 bug +- 淇 缁勪欢鏈祴鍊兼椂鑼冨洿閫夊乏銆佸彸鏃ュ巻鐩稿悓鐨凚ug +## 2.0.17锛�021-08-04锛�+- 淇 鑼冨洿閫夋湭姝g‘鏄剧ず褰撳墠鍊肩殑Bug +- 淇 h5 骞冲彴锛堢Щ鍔ㄧ锛夋姤閿�'cale' of undefined 鐨凚ug +## 2.0.16锛�021-07-21锛�+- 鏂板 return-type 灞炴�鏀寔杩斿洖 date 鏃ユ湡瀵硅薄 +## 2.0.15锛�021-07-14锛�+- 淇 鍗曢�鏃ユ湡绫诲瀷锛屽垵濮嬭祴鍊煎悗涓嶅湪褰撳墠鏃ュ巻鐨凚ug +- 鏂板 clearIcon 灞炴�锛屾樉绀烘鐨勬竻绌烘寜閽彲閰嶇疆鏄剧ず闅愯棌锛堜粎 pc 鏈夋晥锛�+- 浼樺寲 绉诲姩绔Щ闄ゆ樉绀烘鐨勬竻绌烘寜閽紝鏃犲疄闄呯敤閫�+## 2.0.14锛�021-07-14锛�+- 淇 缁勪欢璧嬪�涓虹┖锛岀晫闈㈡湭鏇存柊鐨凚ug +- 淇 start 鍜�end 涓嶈兘鍔ㄦ�璧嬪�鐨凚ug +- 淇 鑼冨洿閫夌被鍨嬶紝鐢ㄦ埛閫夋嫨鍚庡啀娆¢�鎷╁彸渚ф棩鍘嗭紙缁撴潫鏃ユ湡锛夋樉绀轰笉姝g‘鐨凚ug +## 2.0.13锛�021-07-08锛�+- 淇 鑼冨洿閫夋嫨涓嶈兘鍔ㄦ�璧嬪�鐨凚ug +## 2.0.12锛�021-07-08锛�+- 淇 鑼冨洿閫夋嫨鐨勫垵濮嬫椂闂村湪涓�釜鏈堝唴鏃讹紝閫犳垚鏃犳硶閫夋嫨鐨刡ug +## 2.0.11锛�021-07-08锛�+- 浼樺寲 寮瑰嚭灞傚湪瓒呭嚭瑙嗙獥杈圭紭瀹氫綅涓嶅噯纭殑闂 +## 2.0.10锛�021-07-08锛�+- 淇 鑼冨洿璧峰鐐规牱寮忕殑鑳屾櫙鑹蹭笌浠婃棩鏍峰紡鐨勫瓧浣撳墠鏅壊铻嶅悎锛屽鑷存棩鏈熷瓧浣撶湅涓嶆竻鐨凚ug +- 浼樺寲 寮瑰嚭灞傚湪瓒呭嚭瑙嗙獥杈圭紭琚伄鐩栫殑闂 +## 2.0.9锛�021-07-07锛�+- 鏂板 maskClick 浜嬩欢 +- 淇 鐗规畩鎯呭喌鏃ュ巻 rpx 甯冨眬閿欒鐨凚ug锛宺px -> px +- 淇 鑼冨洿閫夋嫨鏃舵竻绌鸿繑鍥炲�涓嶅悎鐞嗙殑bug锛孾'', ''] -> [] +## 2.0.8锛�021-07-07锛�+- 鏂板 鏃ユ湡鏃堕棿鏄剧ず妗嗘敮鎸佹彃妲�+## 2.0.7锛�021-07-01锛�+- 浼樺寲 娣诲姞 uni-icons 渚濊禆 +## 2.0.6锛�021-05-22锛�+- 淇 鍥炬爣鍦ㄥ皬绋嬪簭涓婁笉鏄剧ず鐨凚ug +- 浼樺寲 閲嶅懡鍚嶅紩鐢ㄧ粍浠讹紝閬垮厤娼滃湪缁勪欢鍛藉悕鍐茬獊 +## 2.0.5锛�021-05-20锛�+- 浼樺寲 浠g爜鐩綍鎵佸钩鍖�+## 2.0.4锛�021-05-12锛�+- 鏂板 缁勪欢绀轰緥鍦板潃 +## 2.0.3锛�021-05-10锛�+- 淇 ios 涓嬩笉璇嗗埆 '-' 鏃ユ湡鏍煎紡鐨凚ug +- 浼樺寲 pc 涓嬪脊鍑哄眰娣诲姞杈规鍜岄槾褰�+## 2.0.2锛�021-05-08锛�+- 淇 鍦�admin 涓幏鍙栧脊鍑哄眰瀹氫綅閿欒鐨刡ug +## 2.0.1锛�021-05-08锛�+- 淇 type 灞炴�鍚戜笅鍏煎锛岄粯璁ゅ�浠�date 鍙樻洿涓�datetime +## 2.0.0锛�021-04-30锛�+- 鏀寔鏃ュ巻褰㈠紡鐨勬棩鏈�鏃堕棿鐨勮寖鍥撮�鎷�+ > 娉ㄦ剰锛氭鐗堟湰涓嶅悜鍚庡吋瀹癸紝涓嶅啀鏀寔鍗曠嫭鏃堕棿閫夋嫨锛坱ype=time锛夊強鐩稿叧鐨�hide-second 灞炴�锛堟椂闂撮�鍙娇鐢ㄥ唴缃粍浠�picker锛�+## 1.0.6锛�021-03-18锛�+- 鏂板 hide-second 灞炴�锛屾椂闂存敮鎸佷粎閫夋嫨鏃躲�鍒�+- 淇 閫夋嫨璺熸樉绀虹殑鏃ユ湡涓嶄竴鏍风殑Bug +- 淇 chang浜嬩欢瑙﹀彂2娆$殑Bug +- 淇 鍒嗐�绉�end 鑼冨洿閿欒鐨凚ug +- 浼樺寲 鏇村ソ鐨�nvue 閫傞厤 diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue new file mode 100644 index 0000000..dba9887 --- /dev/null +++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue @@ -0,0 +1,177 @@ +<template> + <view class="uni-calendar-item__weeks-box" :class="{ + 'uni-calendar-item--disable':weeks.disable, + 'uni-calendar-item--before-checked-x':weeks.beforeMultiple, + 'uni-calendar-item--multiple': weeks.multiple, + 'uni-calendar-item--after-checked-x':weeks.afterMultiple, + }" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)"> + <view class="uni-calendar-item__weeks-box-item" :class="{ + 'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover), + 'uni-calendar-item--checked-range-text': checkHover, + 'uni-calendar-item--before-checked':weeks.beforeMultiple, + 'uni-calendar-item--multiple': weeks.multiple, + 'uni-calendar-item--after-checked':weeks.afterMultiple, + 'uni-calendar-item--disable':weeks.disable, + }"> + <text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text> + <text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text> + </view> + <view :class="{'uni-calendar-item--today': weeks.isToday}"></view> + </view> +</template> + +<script> + export default { + props: { + weeks: { + type: Object, + default () { + return {} + } + }, + calendar: { + type: Object, + default: () => { + return {} + } + }, + selected: { + type: Array, + default: () => { + return [] + } + }, + checkHover: { + type: Boolean, + default: false + } + }, + methods: { + choiceDate(weeks) { + this.$emit('change', weeks) + }, + handleMousemove(weeks) { + this.$emit('handleMouse', weeks) + } + } + } +</script> + +<style lang="scss" > + $uni-primary: #007aff !default; + + .uni-calendar-item__weeks-box { + flex: 1; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + justify-content: center; + align-items: center; + margin: 1px 0; + position: relative; + } + + .uni-calendar-item__weeks-box-text { + font-size: 14px; + // font-family: Lato-Bold, Lato; + font-weight: bold; + color: darken($color: $uni-primary, $amount: 40%); + } + + .uni-calendar-item__weeks-box-item { + position: relative; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + /* #ifdef H5 */ + cursor: pointer; + /* #endif */ + } + + + .uni-calendar-item__weeks-box-circle { + position: absolute; + top: 5px; + right: 5px; + width: 8px; + height: 8px; + border-radius: 8px; + background-color: #dd524d; + + } + + .uni-calendar-item__weeks-box .uni-calendar-item--disable { + cursor: default; + } + + .uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable { + color: #D1D1D1; + } + + .uni-calendar-item--today { + position: absolute; + top: 10px; + right: 17%; + background-color: #dd524d; + width:6px; + height: 6px; + border-radius: 50%; + } + + .uni-calendar-item--extra { + color: #dd524d; + opacity: 0.8; + } + + .uni-calendar-item__weeks-box .uni-calendar-item--checked { + background-color: $uni-primary; + border-radius: 50%; + box-sizing: border-box; + border: 3px solid #fff; + } + + .uni-calendar-item--checked .uni-calendar-item--checked-text { + color: #fff; + } + + .uni-calendar-item--multiple .uni-calendar-item--checked-range-text { + color: #333; + } + + .uni-calendar-item--multiple { + background-color: #F6F7FC; + // color: #fff; + } + + .uni-calendar-item--multiple .uni-calendar-item--before-checked, + .uni-calendar-item--multiple .uni-calendar-item--after-checked { + background-color: $uni-primary; + border-radius: 50%; + box-sizing: border-box; + border: 3px solid #F6F7FC; + } + + .uni-calendar-item--before-checked .uni-calendar-item--checked-text, + .uni-calendar-item--after-checked .uni-calendar-item--checked-text { + color: #fff; + } + + .uni-calendar-item--before-checked-x { + border-top-left-radius: 50px; + border-bottom-left-radius: 50px; + box-sizing: border-box; + background-color: #F6F7FC; + } + + .uni-calendar-item--after-checked-x { + border-top-right-radius: 50px; + border-bottom-right-radius: 50px; + background-color: #F6F7FC; + } +</style> diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue new file mode 100644 index 0000000..0f9e121 --- /dev/null +++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue @@ -0,0 +1,947 @@ +<template> + <view class="uni-calendar" @mouseleave="leaveCale"> + + <view v-if="!insert && show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" + @click="maskClick"></view> + + <view v-if="insert || show" class="uni-calendar__content" + :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}"> + <view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}"> + + <view class="uni-calendar__header-btn-box" @click.stop="changeMonth('pre')"> + <view class="uni-calendar__header-btn uni-calendar--left"></view> + </view> + + <picker mode="date" :value="date" fields="month" @change="bindDateChange"> + <text + class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text> + </picker> + + <view class="uni-calendar__header-btn-box" @click.stop="changeMonth('next')"> + <view class="uni-calendar__header-btn uni-calendar--right"></view> + </view> + + <view v-if="!insert" class="dialog-close" @click="maskClick"> + <view class="dialog-close-plus" data-id="close"></view> + <view class="dialog-close-plus dialog-close-rotate" data-id="close"></view> + </view> + </view> + <view class="uni-calendar__box"> + + <view v-if="showMonth" class="uni-calendar__box-bg"> + <text class="uni-calendar__box-bg-text">{{nowDate.month}}</text> + </view> + + <view class="uni-calendar__weeks" style="padding-bottom: 7px;"> + <view class="uni-calendar__weeks-day"> + <text class="uni-calendar__weeks-day-text">{{SUNText}}</text> + </view> + <view class="uni-calendar__weeks-day"> + <text class="uni-calendar__weeks-day-text">{{MONText}}</text> + </view> + <view class="uni-calendar__weeks-day"> + <text class="uni-calendar__weeks-day-text">{{TUEText}}</text> + </view> + <view class="uni-calendar__weeks-day"> + <text class="uni-calendar__weeks-day-text">{{WEDText}}</text> + </view> + <view class="uni-calendar__weeks-day"> + <text class="uni-calendar__weeks-day-text">{{THUText}}</text> + </view> + <view class="uni-calendar__weeks-day"> + <text class="uni-calendar__weeks-day-text">{{FRIText}}</text> + </view> + <view class="uni-calendar__weeks-day"> + <text class="uni-calendar__weeks-day-text">{{SATText}}</text> + </view> + </view> + + <view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex"> + <view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex"> + <calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" + :checkHover="range" @change="choiceDate" @handleMouse="handleMouse"> + </calendar-item> + </view> + </view> + </view> + + <view v-if="!insert && !range && hasTime" class="uni-date-changed uni-calendar--fixed-top" + style="padding: 0 80px;"> + <view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view> + <time-picker type="time" :start="timepickerStartTime" :end="timepickerEndTime" v-model="time" + :disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style"> + </time-picker> + </view> + + <view v-if="!insert && range && hasTime" class="uni-date-changed uni-calendar--fixed-top"> + <view class="uni-date-changed--time-start"> + <view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}} + </view> + <time-picker type="time" :start="timepickerStartTime" v-model="timeRange.startTime" :border="false" + :hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style"> + </time-picker> + </view> + <view style="line-height: 50px;"> + <uni-icons type="arrowthinright" color="#999"></uni-icons> + </view> + <view class="uni-date-changed--time-end"> + <view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view> + <time-picker type="time" :end="timepickerEndTime" v-model="timeRange.endTime" :border="false" + :hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style"> + </time-picker> + </view> + </view> + + <view v-if="!insert" class="uni-date-changed uni-date-btn--ok"> + <view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view> + </view> + </view> + </view> +</template> + +<script> + import { + Calendar, + getDate, + getTime + } from './util.js'; + import calendarItem from './calendar-item.vue' + import timePicker from './time-picker.vue' + + import { + initVueI18n + } from '@dcloudio/uni-i18n' + import i18nMessages from './i18n/index.js' + const { + t + } = initVueI18n(i18nMessages) + + /** + * Calendar 鏃ュ巻 + * @description 鏃ュ巻缁勪欢鍙互鏌ョ湅鏃ユ湡锛岄�鎷╀换鎰忚寖鍥村唴鐨勬棩鏈燂紝鎵撶偣鎿嶄綔銆傚父鐢ㄥ満鏅锛氶厭搴楁棩鏈熼璁€�鐏溅鏈虹エ閫夋嫨璐拱鏃ユ湡銆佷笂涓嬬彮鎵撳崱绛�+ * @tutorial https://ext.dcloud.net.cn/plugin?id=56 + * @property {String} date 鑷畾涔夊綋鍓嶆椂闂达紝榛樿涓轰粖澶�+ * @property {String} startDate 鏃ユ湡閫夋嫨鑼冨洿-寮�鏃ユ湡 + * @property {String} endDate 鏃ユ湡閫夋嫨鑼冨洿-缁撴潫鏃ユ湡 + * @property {Boolean} range 鑼冨洿閫夋嫨 + * @property {Boolean} insert = [true|false] 鎻掑叆妯″紡,榛樿涓篺alse + * @value true 寮圭獥妯″紡 + * @value false 鎻掑叆妯″紡 + * @property {Boolean} clearDate = [true|false] 寮圭獥妯″紡鏄惁娓呯┖涓婃閫夋嫨鍐呭 + * @property {Array} selected 鎵撶偣锛屾湡寰呮牸寮廩{date: '2019-06-27', info: '绛惧埌', data: { custom: '鑷畾涔変俊鎭�, name: '鑷畾涔夋秷鎭ご',xxx:xxx... }}] + * @property {Boolean} showMonth 鏄惁閫夋嫨鏈堜唤涓鸿儗鏅�+ * @property {[String} defaultValue 閫夋嫨鍣ㄦ墦寮�椂榛樿鏄剧ず鐨勬椂闂�+ * @event {Function} change 鏃ユ湡鏀瑰彉锛宍insert :ture` 鏃剁敓鏁�+ * @event {Function} confirm 纭閫夋嫨`insert :false` 鏃剁敓鏁�+ * @event {Function} monthSwitch 鍒囨崲鏈堜唤鏃惰Е鍙�+ * @example <uni-calendar :insert="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" /> + */ + export default { + components: { + calendarItem, + timePicker + }, + + options: { + // #ifdef MP-TOUTIAO + virtualHost: false, + // #endif + // #ifndef MP-TOUTIAO + virtualHost: true + // #endif + }, + props: { + date: { + type: String, + default: '' + }, + defTime: { + type: [String, Object], + default: '' + }, + selectableTimes: { + type: [Object], + default () { + return {} + } + }, + selected: { + type: Array, + default () { + return [] + } + }, + startDate: { + type: String, + default: '' + }, + endDate: { + type: String, + default: '' + }, + startPlaceholder: { + type: String, + default: '' + }, + endPlaceholder: { + type: String, + default: '' + }, + range: { + type: Boolean, + default: false + }, + hasTime: { + type: Boolean, + default: false + }, + insert: { + type: Boolean, + default: true + }, + showMonth: { + type: Boolean, + default: true + }, + clearDate: { + type: Boolean, + default: true + }, + checkHover: { + type: Boolean, + default: true + }, + hideSecond: { + type: [Boolean], + default: false + }, + pleStatus: { + type: Object, + default () { + return { + before: '', + after: '', + data: [], + fulldate: '' + } + } + }, + defaultValue: { + type: [String, Object, Array], + default: '' + } + }, + data() { + return { + show: false, + weeks: [], + calendar: {}, + nowDate: {}, + aniMaskShow: false, + firstEnter: true, + time: '', + timeRange: { + startTime: '', + endTime: '' + }, + tempSingleDate: '', + tempRange: { + before: '', + after: '' + } + } + }, + watch: { + date: { + immediate: true, + handler(newVal) { + if (!this.range) { + this.tempSingleDate = newVal + setTimeout(() => { + this.init(newVal) + }, 100) + } + } + }, + defTime: { + immediate: true, + handler(newVal) { + if (!this.range) { + this.time = newVal + } else { + this.timeRange.startTime = newVal.start + this.timeRange.endTime = newVal.end + } + } + }, + startDate(val) { + // 瀛楄妭灏忕▼搴�watch 鏃╀簬 created + if (!this.cale) { + return + } + this.cale.setStartDate(val) + this.cale.setDate(this.nowDate.fullDate) + this.weeks = this.cale.weeks + }, + endDate(val) { + // 瀛楄妭灏忕▼搴�watch 鏃╀簬 created + if (!this.cale) { + return + } + this.cale.setEndDate(val) + this.cale.setDate(this.nowDate.fullDate) + this.weeks = this.cale.weeks + }, + selected(newVal) { + // 瀛楄妭灏忕▼搴�watch 鏃╀簬 created + if (!this.cale) { + return + } + this.cale.setSelectInfo(this.nowDate.fullDate, newVal) + this.weeks = this.cale.weeks + }, + pleStatus: { + immediate: true, + handler(newVal) { + const { + before, + after, + fulldate, + which + } = newVal + this.tempRange.before = before + this.tempRange.after = after + setTimeout(() => { + if (fulldate) { + this.cale.setHoverMultiple(fulldate) + if (before && after) { + this.cale.lastHover = true + if (this.rangeWithinMonth(after, before)) return + this.setDate(before) + } else { + this.cale.setMultiple(fulldate) + this.setDate(this.nowDate.fullDate) + this.calendar.fullDate = '' + this.cale.lastHover = false + } + } else { + // 瀛楄妭灏忕▼搴�watch 鏃╀簬 created + if (!this.cale) { + return + } + + this.cale.setDefaultMultiple(before, after) + if (which === 'left' && before) { + this.setDate(before) + this.weeks = this.cale.weeks + } else if (after) { + this.setDate(after) + this.weeks = this.cale.weeks + } + this.cale.lastHover = true + } + }, 16) + } + } + }, + computed: { + timepickerStartTime() { + const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate + return activeDate === this.startDate ? this.selectableTimes.start : '' + }, + timepickerEndTime() { + const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate + return activeDate === this.endDate ? this.selectableTimes.end : '' + }, + /** + * for i18n + */ + selectDateText() { + return t("uni-datetime-picker.selectDate") + }, + startDateText() { + return this.startPlaceholder || t("uni-datetime-picker.startDate") + }, + endDateText() { + return this.endPlaceholder || t("uni-datetime-picker.endDate") + }, + okText() { + return t("uni-datetime-picker.ok") + }, + yearText() { + return t("uni-datetime-picker.year") + }, + monthText() { + return t("uni-datetime-picker.month") + }, + MONText() { + return t("uni-calender.MON") + }, + TUEText() { + return t("uni-calender.TUE") + }, + WEDText() { + return t("uni-calender.WED") + }, + THUText() { + return t("uni-calender.THU") + }, + FRIText() { + return t("uni-calender.FRI") + }, + SATText() { + return t("uni-calender.SAT") + }, + SUNText() { + return t("uni-calender.SUN") + }, + confirmText() { + return t("uni-calender.confirm") + }, + }, + created() { + // 鑾峰彇鏃ュ巻鏂规硶瀹炰緥 + this.cale = new Calendar({ + selected: this.selected, + startDate: this.startDate, + endDate: this.endDate, + range: this.range, + }) + // 閫変腑鏌愪竴澶�+ this.init(this.date) + }, + methods: { + leaveCale() { + this.firstEnter = true + }, + handleMouse(weeks) { + if (weeks.disable) return + if (this.cale.lastHover) return + let { + before, + after + } = this.cale.multipleStatus + if (!before) return + this.calendar = weeks + // 璁剧疆鑼冨洿閫�+ this.cale.setHoverMultiple(this.calendar.fullDate) + this.weeks = this.cale.weeks + // hover鏃讹紝杩涘叆涓�釜鏃ュ巻锛屾洿鏂板彟涓�釜 + if (this.firstEnter) { + this.$emit('firstEnterCale', this.cale.multipleStatus) + this.firstEnter = false + } + }, + rangeWithinMonth(A, B) { + const [yearA, monthA] = A.split('-') + const [yearB, monthB] = B.split('-') + return yearA === yearB && monthA === monthB + }, + // 钂欑増鐐瑰嚮浜嬩欢 + maskClick() { + this.close() + this.$emit('maskClose') + }, + + clearCalender() { + if (this.range) { + this.timeRange.startTime = '' + this.timeRange.endTime = '' + this.tempRange.before = '' + this.tempRange.after = '' + this.cale.multipleStatus.before = '' + this.cale.multipleStatus.after = '' + this.cale.multipleStatus.data = [] + this.cale.lastHover = false + } else { + this.time = '' + this.tempSingleDate = '' + } + this.calendar.fullDate = '' + this.setDate(new Date()) + }, + + bindDateChange(e) { + const value = e.detail.value + '-1' + this.setDate(value) + }, + /** + * 鍒濆鍖栨棩鏈熸樉绀�+ * @param {Object} date + */ + init(date) { + // 瀛楄妭灏忕▼搴�watch 鏃╀簬 created + if (!this.cale) { + return + } + this.cale.setDate(date || new Date()) + this.weeks = this.cale.weeks + this.nowDate = this.cale.getInfo(date) + this.calendar = { + ...this.nowDate + } + if (!date) { + // 浼樺寲date涓虹┖榛樿涓嶉�涓粖澶�+ this.calendar.fullDate = '' + if (this.defaultValue && !this.range) { + // 鏆傛椂鍙敮鎸佺Щ鍔ㄧ闈炶寖鍥撮�鎷�+ const defaultDate = new Date(this.defaultValue) + const fullDate = getDate(defaultDate) + const year = defaultDate.getFullYear() + const month = defaultDate.getMonth() + 1 + const date = defaultDate.getDate() + const day = defaultDate.getDay() + this.calendar = { + fullDate, + year, + month, + date, + day + }, + this.tempSingleDate = fullDate + this.time = getTime(defaultDate, this.hideSecond) + } + } + }, + /** + * 鎵撳紑鏃ュ巻寮圭獥 + */ + open() { + // 寮圭獥妯″紡骞朵笖娓呯悊鏁版嵁 + if (this.clearDate && !this.insert) { + this.cale.cleanMultipleStatus() + this.init(this.date) + } + this.show = true + this.$nextTick(() => { + setTimeout(() => { + this.aniMaskShow = true + }, 50) + }) + }, + /** + * 鍏抽棴鏃ュ巻寮圭獥 + */ + close() { + this.aniMaskShow = false + this.$nextTick(() => { + setTimeout(() => { + this.show = false + this.$emit('close') + }, 300) + }) + }, + /** + * 纭鎸夐挳 + */ + confirm() { + this.setEmit('confirm') + this.close() + }, + /** + * 鍙樺寲瑙﹀彂 + */ + change(isSingleChange) { + if (!this.insert && !isSingleChange) return + this.setEmit('change') + }, + /** + * 閫夋嫨鏈堜唤瑙﹀彂 + */ + monthSwitch() { + let { + year, + month + } = this.nowDate + this.$emit('monthSwitch', { + year, + month: Number(month) + }) + }, + /** + * 娲惧彂浜嬩欢 + * @param {Object} name + */ + setEmit(name) { + if (!this.range) { + if (!this.calendar.fullDate) { + this.calendar = this.cale.getInfo(new Date()) + this.tempSingleDate = this.calendar.fullDate + } + if (this.hasTime && !this.time) { + this.time = getTime(new Date(), this.hideSecond) + } + } + let { + year, + month, + date, + fullDate, + extraInfo + } = this.calendar + this.$emit(name, { + range: this.cale.multipleStatus, + year, + month, + date, + time: this.time, + timeRange: this.timeRange, + fulldate: fullDate, + extraInfo: extraInfo || {} + }) + }, + /** + * 閫夋嫨澶╄Е鍙�+ * @param {Object} weeks + */ + choiceDate(weeks) { + if (weeks.disable) return + this.calendar = weeks + this.calendar.userChecked = true + // 璁剧疆澶氶� + this.cale.setMultiple(this.calendar.fullDate, true) + this.weeks = this.cale.weeks + this.tempSingleDate = this.calendar.fullDate + const beforeDate = new Date(this.cale.multipleStatus.before).getTime() + const afterDate = new Date(this.cale.multipleStatus.after).getTime() + if (beforeDate > afterDate && afterDate) { + this.tempRange.before = this.cale.multipleStatus.after + this.tempRange.after = this.cale.multipleStatus.before + } else { + this.tempRange.before = this.cale.multipleStatus.before + this.tempRange.after = this.cale.multipleStatus.after + } + this.change(true) + }, + changeMonth(type) { + let newDate + if (type === 'pre') { + newDate = this.cale.getPreMonthObj(this.nowDate.fullDate).fullDate + } else if (type === 'next') { + newDate = this.cale.getNextMonthObj(this.nowDate.fullDate).fullDate + } + + this.setDate(newDate) + this.monthSwitch() + }, + /** + * 璁剧疆鏃ユ湡 + * @param {Object} date + */ + setDate(date) { + this.cale.setDate(date) + this.weeks = this.cale.weeks + this.nowDate = this.cale.getInfo(date) + } + } + } +</script> + +<style lang="scss"> + $uni-primary: #007aff !default; + + .uni-calendar { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + } + + .uni-calendar__mask { + position: fixed; + bottom: 0; + top: 0; + left: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.4); + transition-property: opacity; + transition-duration: 0.3s; + opacity: 0; + /* #ifndef APP-NVUE */ + z-index: 99; + /* #endif */ + } + + .uni-calendar--mask-show { + opacity: 1 + } + + .uni-calendar--fixed { + position: fixed; + bottom: calc(var(--window-bottom)); + left: 0; + right: 0; + transition-property: transform; + transition-duration: 0.3s; + transform: translateY(460px); + /* #ifndef APP-NVUE */ + z-index: 99; + /* #endif */ + } + + .uni-calendar--ani-show { + transform: translateY(0); + } + + .uni-calendar__content { + background-color: #fff; + } + + .uni-calendar__content-mobile { + border-top-left-radius: 10px; + border-top-right-radius: 10px; + box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1); + } + + .uni-calendar__header { + position: relative; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + justify-content: center; + align-items: center; + height: 50px; + } + + .uni-calendar__header-mobile { + padding: 10px; + padding-bottom: 0; + } + + .uni-calendar--fixed-top { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + justify-content: space-between; + border-top-color: rgba(0, 0, 0, 0.4); + border-top-style: solid; + border-top-width: 1px; + } + + .uni-calendar--fixed-width { + width: 50px; + } + + .uni-calendar__backtoday { + position: absolute; + right: 0; + top: 25rpx; + padding: 0 5px; + padding-left: 10px; + height: 25px; + line-height: 25px; + font-size: 12px; + border-top-left-radius: 25px; + border-bottom-left-radius: 25px; + color: #fff; + background-color: #f1f1f1; + } + + .uni-calendar__header-text { + text-align: center; + width: 100px; + font-size: 15px; + color: #666; + } + + .uni-calendar__button-text { + text-align: center; + width: 100px; + font-size: 14px; + color: $uni-primary; + /* #ifndef APP-NVUE */ + letter-spacing: 3px; + /* #endif */ + } + + .uni-calendar__header-btn-box { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + align-items: center; + justify-content: center; + width: 50px; + height: 50px; + } + + .uni-calendar__header-btn { + width: 9px; + height: 9px; + border-left-color: #808080; + border-left-style: solid; + border-left-width: 1px; + border-top-color: #555555; + border-top-style: solid; + border-top-width: 1px; + } + + .uni-calendar--left { + transform: rotate(-45deg); + } + + .uni-calendar--right { + transform: rotate(135deg); + } + + + .uni-calendar__weeks { + position: relative; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + } + + .uni-calendar__weeks-item { + flex: 1; + } + + .uni-calendar__weeks-day { + flex: 1; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + justify-content: center; + align-items: center; + height: 40px; + border-bottom-color: #F5F5F5; + border-bottom-style: solid; + border-bottom-width: 1px; + } + + .uni-calendar__weeks-day-text { + font-size: 12px; + color: #B2B2B2; + } + + .uni-calendar__box { + position: relative; + // padding: 0 10px; + padding-bottom: 7px; + } + + .uni-calendar__box-bg { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + justify-content: center; + align-items: center; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + + .uni-calendar__box-bg-text { + font-size: 200px; + font-weight: bold; + color: #999; + opacity: 0.1; + text-align: center; + /* #ifndef APP-NVUE */ + line-height: 1; + /* #endif */ + } + + .uni-date-changed { + padding: 0 10px; + // line-height: 50px; + text-align: center; + color: #333; + border-top-color: #DCDCDC; + ; + border-top-style: solid; + border-top-width: 1px; + flex: 1; + } + + .uni-date-btn--ok { + padding: 20px 15px; + } + + .uni-date-changed--time-start { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + align-items: center; + } + + .uni-date-changed--time-end { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + align-items: center; + } + + .uni-date-changed--time-date { + color: #999; + line-height: 50px; + /* #ifdef MP-TOUTIAO */ + font-size: 16px; + /* #endif */ + margin-right: 5px; + // opacity: 0.6; + } + + .time-picker-style { + // width: 62px; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + justify-content: center; + align-items: center + } + + .mr-10 { + margin-right: 10px; + } + + .dialog-close { + position: absolute; + top: 0; + right: 0; + bottom: 0; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + align-items: center; + padding: 0 25px; + margin-top: 10px; + } + + .dialog-close-plus { + width: 16px; + height: 2px; + background-color: #737987; + border-radius: 2px; + transform: rotate(45deg); + } + + .dialog-close-rotate { + position: absolute; + transform: rotate(-45deg); + } + + .uni-datetime-picker--btn { + border-radius: 100px; + height: 40px; + line-height: 40px; + background-color: $uni-primary; + color: #fff; + font-size: 16px; + letter-spacing: 2px; + } + + /* #ifndef APP-NVUE */ + .uni-datetime-picker--btn:active { + opacity: 0.7; + } + + /* #endif */ +</style> diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json new file mode 100644 index 0000000..024f22f --- /dev/null +++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/en.json @@ -0,0 +1,22 @@ +{ + "uni-datetime-picker.selectDate": "select date", + "uni-datetime-picker.selectTime": "select time", + "uni-datetime-picker.selectDateTime": "select date and time", + "uni-datetime-picker.startDate": "start date", + "uni-datetime-picker.endDate": "end date", + "uni-datetime-picker.startTime": "start time", + "uni-datetime-picker.endTime": "end time", + "uni-datetime-picker.ok": "ok", + "uni-datetime-picker.clear": "clear", + "uni-datetime-picker.cancel": "cancel", + "uni-datetime-picker.year": "-", + "uni-datetime-picker.month": "", + "uni-calender.MON": "MON", + "uni-calender.TUE": "TUE", + "uni-calender.WED": "WED", + "uni-calender.THU": "THU", + "uni-calender.FRI": "FRI", + "uni-calender.SAT": "SAT", + "uni-calender.SUN": "SUN", + "uni-calender.confirm": "confirm" +} diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js new file mode 100644 index 0000000..de7509c --- /dev/null +++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/index.js @@ -0,0 +1,8 @@ +import en from './en.json' +import zhHans from './zh-Hans.json' +import zhHant from './zh-Hant.json' +export default { + en, + 'zh-Hans': zhHans, + 'zh-Hant': zhHant +} diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hans.json b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hans.json new file mode 100644 index 0000000..d2df5e7 --- /dev/null +++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hans.json @@ -0,0 +1,22 @@ +{ + "uni-datetime-picker.selectDate": "閫夋嫨鏃ユ湡", + "uni-datetime-picker.selectTime": "閫夋嫨鏃堕棿", + "uni-datetime-picker.selectDateTime": "閫夋嫨鏃ユ湡鏃堕棿", + "uni-datetime-picker.startDate": "寮�鏃ユ湡", + "uni-datetime-picker.endDate": "缁撴潫鏃ユ湡", + "uni-datetime-picker.startTime": "寮�鏃堕棿", + "uni-datetime-picker.endTime": "缁撴潫鏃堕棿", + "uni-datetime-picker.ok": "纭畾", + "uni-datetime-picker.clear": "娓呴櫎", + "uni-datetime-picker.cancel": "鍙栨秷", + "uni-datetime-picker.year": "骞�, + "uni-datetime-picker.month": "鏈�, + "uni-calender.SUN": "鏃�, + "uni-calender.MON": "涓�, + "uni-calender.TUE": "浜�, + "uni-calender.WED": "涓�, + "uni-calender.THU": "鍥�, + "uni-calender.FRI": "浜�, + "uni-calender.SAT": "鍏�, + "uni-calender.confirm": "纭" +} \ No newline at end of file diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hant.json b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hant.json new file mode 100644 index 0000000..d23fa3c --- /dev/null +++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/i18n/zh-Hant.json @@ -0,0 +1,22 @@ +{ + "uni-datetime-picker.selectDate": "閬告搰鏃ユ湡", + "uni-datetime-picker.selectTime": "閬告搰鏅傞枔", + "uni-datetime-picker.selectDateTime": "閬告搰鏃ユ湡鏅傞枔", + "uni-datetime-picker.startDate": "闁嬪鏃ユ湡", + "uni-datetime-picker.endDate": "绲愭潫鏃ユ湡", + "uni-datetime-picker.startTime": "闁嬪鏃堕棿", + "uni-datetime-picker.endTime": "绲愭潫鏃堕棿", + "uni-datetime-picker.ok": "纰哄畾", + "uni-datetime-picker.clear": "娓呴櫎", + "uni-datetime-picker.cancel": "鍙栨秷", + "uni-datetime-picker.year": "骞�, + "uni-datetime-picker.month": "鏈�, + "uni-calender.SUN": "鏃�, + "uni-calender.MON": "涓�, + "uni-calender.TUE": "浜�, + "uni-calender.WED": "涓�, + "uni-calender.THU": "鍥�, + "uni-calender.FRI": "浜�, + "uni-calender.SAT": "鍏�, + "uni-calender.confirm": "纰鸿獚" +} \ No newline at end of file diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue new file mode 100644 index 0000000..1817692 --- /dev/null +++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue @@ -0,0 +1,940 @@ +<template> + <view class="uni-datetime-picker"> + <view @click="initTimePicker"> + <slot> + <view class="uni-datetime-picker-timebox-pointer" + :class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}"> + <text class="uni-datetime-picker-text">{{time}}</text> + <view v-if="!time" class="uni-datetime-picker-time"> + <text class="uni-datetime-picker-text">{{selectTimeText}}</text> + </view> + </view> + </slot> + </view> + <view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view> + <view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']" + :style="fixNvueBug"> + <view class="uni-title"> + <text class="uni-datetime-picker-text">{{selectTimeText}}</text> + </view> + <view v-if="dateShow" class="uni-datetime-picker__container-box"> + <picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd" + @change="bindDateChange"> + <picker-view-column> + <view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index"> + <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> + </view> + </picker-view-column> + <picker-view-column> + <view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index"> + <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> + </view> + </picker-view-column> + <picker-view-column> + <view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index"> + <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> + </view> + </picker-view-column> + </picker-view> + <!-- 鍏煎 nvue 涓嶆敮鎸佷吉绫�--> + <text class="uni-datetime-picker-sign sign-left">-</text> + <text class="uni-datetime-picker-sign sign-right">-</text> + </view> + <view v-if="timeShow" class="uni-datetime-picker__container-box"> + <picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']" + :indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange"> + <picker-view-column> + <view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index"> + <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> + </view> + </picker-view-column> + <picker-view-column> + <view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index"> + <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> + </view> + </picker-view-column> + <picker-view-column v-if="!hideSecond"> + <view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index"> + <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> + </view> + </picker-view-column> + </picker-view> + <!-- 鍏煎 nvue 涓嶆敮鎸佷吉绫�--> + <text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text> + <text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text> + </view> + <view class="uni-datetime-picker-btn"> + <view @click="clearTime"> + <text class="uni-datetime-picker-btn-text">{{clearText}}</text> + </view> + <view class="uni-datetime-picker-btn-group"> + <view class="uni-datetime-picker-cancel" @click="tiggerTimePicker"> + <text class="uni-datetime-picker-btn-text">{{cancelText}}</text> + </view> + <view @click="setTime"> + <text class="uni-datetime-picker-btn-text">{{okText}}</text> + </view> + </view> + </view> + </view> + </view> +</template> + +<script> + import { + initVueI18n + } from '@dcloudio/uni-i18n' + import i18nMessages from './i18n/index.js' + const { + t + } = initVueI18n(i18nMessages) + import { + fixIosDateFormat + } from './util' + + /** + * DatetimePicker 鏃堕棿閫夋嫨鍣�+ * @description 鍙互鍚屾椂閫夋嫨鏃ユ湡鍜屾椂闂寸殑閫夋嫨鍣�+ * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx + * @property {String} type = [datetime | date | time] 鏄剧ず妯″紡 + * @property {Boolean} multiple = [true|false] 鏄惁澶氶� + * @property {String|Number} value 榛樿鍊�+ * @property {String|Number} start 璧峰鏃ユ湡鎴栨椂闂�+ * @property {String|Number} end 璧峰鏃ユ湡鎴栨椂闂�+ * @property {String} return-type = [timestamp | string] + * @event {Function} change 閫変腑鍙戠敓鍙樺寲瑙﹀彂 + */ + + export default { + name: 'UniDatetimePicker', + data() { + return { + indicatorStyle: `height: 50px;`, + visible: false, + fixNvueBug: {}, + dateShow: true, + timeShow: true, + title: '鏃ユ湡鍜屾椂闂�, + // 杈撳叆妗嗗綋鍓嶆椂闂�+ time: '', + // 褰撳墠鐨勫勾鏈堟棩鏃跺垎绉�+ year: 1920, + month: 0, + day: 0, + hour: 0, + minute: 0, + second: 0, + // 璧峰鏃堕棿 + startYear: 1920, + startMonth: 1, + startDay: 1, + startHour: 0, + startMinute: 0, + startSecond: 0, + // 缁撴潫鏃堕棿 + endYear: 2120, + endMonth: 12, + endDay: 31, + endHour: 23, + endMinute: 59, + endSecond: 59, + } + }, + options: { + // #ifdef MP-TOUTIAO + virtualHost: false, + // #endif + // #ifndef MP-TOUTIAO + virtualHost: true + // #endif + }, + props: { + type: { + type: String, + default: 'datetime' + }, + value: { + type: [String, Number], + default: '' + }, + modelValue: { + type: [String, Number], + default: '' + }, + start: { + type: [Number, String], + default: '' + }, + end: { + type: [Number, String], + default: '' + }, + returnType: { + type: String, + default: 'string' + }, + disabled: { + type: [Boolean, String], + default: false + }, + border: { + type: [Boolean, String], + default: true + }, + hideSecond: { + type: [Boolean, String], + default: false + } + }, + watch: { + // #ifndef VUE3 + value: { + handler(newVal) { + if (newVal) { + this.parseValue(fixIosDateFormat(newVal)) + this.initTime(false) + } else { + this.time = '' + this.parseValue(Date.now()) + } + }, + immediate: true + }, + // #endif + // #ifdef VUE3 + modelValue: { + handler(newVal) { + if (newVal) { + this.parseValue(fixIosDateFormat(newVal)) + this.initTime(false) + } else { + this.time = '' + this.parseValue(Date.now()) + } + }, + immediate: true + }, + // #endif + type: { + handler(newValue) { + if (newValue === 'date') { + this.dateShow = true + this.timeShow = false + this.title = '鏃ユ湡' + } else if (newValue === 'time') { + this.dateShow = false + this.timeShow = true + this.title = '鏃堕棿' + } else { + this.dateShow = true + this.timeShow = true + this.title = '鏃ユ湡鍜屾椂闂� + } + }, + immediate: true + }, + start: { + handler(newVal) { + this.parseDatetimeRange(fixIosDateFormat(newVal), 'start') + }, + immediate: true + }, + end: { + handler(newVal) { + this.parseDatetimeRange(fixIosDateFormat(newVal), 'end') + }, + immediate: true + }, + + // 鏈堛�鏃ャ�鏃躲�鍒嗐�绉掑彲閫夎寖鍥村彉鍖栧悗锛屾鏌ュ綋鍓嶅�鏄惁鍦ㄨ寖鍥村唴锛屼笉鍦ㄥ垯褰撳墠鍊奸噸缃负鍙�鑼冨洿绗竴椤�+ months(newVal) { + this.checkValue('month', this.month, newVal) + }, + days(newVal) { + this.checkValue('day', this.day, newVal) + }, + hours(newVal) { + this.checkValue('hour', this.hour, newVal) + }, + minutes(newVal) { + this.checkValue('minute', this.minute, newVal) + }, + seconds(newVal) { + this.checkValue('second', this.second, newVal) + } + }, + computed: { + // 褰撳墠骞淬�鏈堛�鏃ャ�鏃躲�鍒嗐�绉掗�鎷╄寖鍥�+ years() { + return this.getCurrentRange('year') + }, + + months() { + return this.getCurrentRange('month') + }, + + days() { + return this.getCurrentRange('day') + }, + + hours() { + return this.getCurrentRange('hour') + }, + + minutes() { + return this.getCurrentRange('minute') + }, + + seconds() { + return this.getCurrentRange('second') + }, + + // picker 褰撳墠鍊兼暟缁�+ ymd() { + return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay] + }, + hms() { + return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond] + }, + + // 褰撳墠 date 鏄�start + currentDateIsStart() { + return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay + }, + + // 褰撳墠 date 鏄�end + currentDateIsEnd() { + return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay + }, + + // 褰撳墠骞淬�鏈堛�鏃ャ�鏃躲�鍒嗐�绉掔殑鏈�皬鍊煎拰鏈�ぇ鍊�+ minYear() { + return this.startYear + }, + maxYear() { + return this.endYear + }, + minMonth() { + if (this.year === this.startYear) { + return this.startMonth + } else { + return 1 + } + }, + maxMonth() { + if (this.year === this.endYear) { + return this.endMonth + } else { + return 12 + } + }, + minDay() { + if (this.year === this.startYear && this.month === this.startMonth) { + return this.startDay + } else { + return 1 + } + }, + maxDay() { + if (this.year === this.endYear && this.month === this.endMonth) { + return this.endDay + } else { + return this.daysInMonth(this.year, this.month) + } + }, + minHour() { + if (this.type === 'datetime') { + if (this.currentDateIsStart) { + return this.startHour + } else { + return 0 + } + } + if (this.type === 'time') { + return this.startHour + } + }, + maxHour() { + if (this.type === 'datetime') { + if (this.currentDateIsEnd) { + return this.endHour + } else { + return 23 + } + } + if (this.type === 'time') { + return this.endHour + } + }, + minMinute() { + if (this.type === 'datetime') { + if (this.currentDateIsStart && this.hour === this.startHour) { + return this.startMinute + } else { + return 0 + } + } + if (this.type === 'time') { + if (this.hour === this.startHour) { + return this.startMinute + } else { + return 0 + } + } + }, + maxMinute() { + if (this.type === 'datetime') { + if (this.currentDateIsEnd && this.hour === this.endHour) { + return this.endMinute + } else { + return 59 + } + } + if (this.type === 'time') { + if (this.hour === this.endHour) { + return this.endMinute + } else { + return 59 + } + } + }, + minSecond() { + if (this.type === 'datetime') { + if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) { + return this.startSecond + } else { + return 0 + } + } + if (this.type === 'time') { + if (this.hour === this.startHour && this.minute === this.startMinute) { + return this.startSecond + } else { + return 0 + } + } + }, + maxSecond() { + if (this.type === 'datetime') { + if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) { + return this.endSecond + } else { + return 59 + } + } + if (this.type === 'time') { + if (this.hour === this.endHour && this.minute === this.endMinute) { + return this.endSecond + } else { + return 59 + } + } + }, + + /** + * for i18n + */ + selectTimeText() { + return t("uni-datetime-picker.selectTime") + }, + okText() { + return t("uni-datetime-picker.ok") + }, + clearText() { + return t("uni-datetime-picker.clear") + }, + cancelText() { + return t("uni-datetime-picker.cancel") + } + }, + + mounted() { + // #ifdef APP-NVUE + const res = uni.getSystemInfoSync(); + this.fixNvueBug = { + top: res.windowHeight / 2, + left: res.windowWidth / 2 + } + // #endif + }, + + methods: { + /** + * @param {Object} item + * 灏忎簬 10 鍦ㄥ墠闈㈠姞涓�0 + */ + + lessThanTen(item) { + return item < 10 ? '0' + item : item + }, + + /** + * 瑙f瀽鏃跺垎绉掑瓧绗︿覆锛屼緥濡傦細00:00:00 + * @param {String} timeString + */ + parseTimeType(timeString) { + if (timeString) { + let timeArr = timeString.split(':') + this.hour = Number(timeArr[0]) + this.minute = Number(timeArr[1]) + this.second = Number(timeArr[2]) + } + }, + + /** + * 瑙f瀽閫夋嫨鍣ㄥ垵濮嬪�锛岀被鍨嬪彲浠ユ槸瀛楃涓层�鏃堕棿鎴筹紝渚嬪锛�000-10-02銆�08:30:00'銆�1610695109000 + * @param {String | Number} datetime + */ + initPickerValue(datetime) { + let defaultValue = null + if (datetime) { + defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end) + } else { + defaultValue = Date.now() + defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end) + } + this.parseValue(defaultValue) + }, + + /** + * 鍒濆鍊艰鍒欙細 + * - 鐢ㄦ埛璁剧疆鍒濆鍊�value + * - 璁剧疆浜嗚捣濮嬫椂闂�start銆佺粓姝㈡椂闂�end锛屽苟 start < value < end锛屽垵濮嬪�涓�value锛�鍚﹀垯鍒濆鍊间负 start + * - 鍙缃簡璧峰鏃堕棿 start锛屽苟 start < value锛屽垵濮嬪�涓�value锛屽惁鍒欏垵濮嬪�涓�start + * - 鍙缃簡缁堟鏃堕棿 end锛屽苟 value < end锛屽垵濮嬪�涓�value锛屽惁鍒欏垵濮嬪�涓�end + * - 鏃犺捣濮嬬粓姝㈡椂闂达紝鍒欏垵濮嬪�涓�value + * - 鏃犲垵濮嬪� value锛屽垯鍒濆鍊间负褰撳墠鏈湴鏃堕棿 Date.now() + * @param {Object} value + * @param {Object} dateBase + */ + compareValueWithStartAndEnd(value, start, end) { + let winner = null + value = this.superTimeStamp(value) + start = this.superTimeStamp(start) + end = this.superTimeStamp(end) + + if (start && end) { + if (value < start) { + winner = new Date(start) + } else if (value > end) { + winner = new Date(end) + } else { + winner = new Date(value) + } + } else if (start && !end) { + winner = start <= value ? new Date(value) : new Date(start) + } else if (!start && end) { + winner = value <= end ? new Date(value) : new Date(end) + } else { + winner = new Date(value) + } + + return winner + }, + + /** + * 杞崲涓哄彲姣旇緝鐨勬椂闂存埑锛屾帴鍙楁棩鏈熴�鏃跺垎绉掋�鏃堕棿鎴�+ * @param {Object} value + */ + superTimeStamp(value) { + let dateBase = '' + if (this.type === 'time' && value && typeof value === 'string') { + const now = new Date() + const year = now.getFullYear() + const month = now.getMonth() + 1 + const day = now.getDate() + dateBase = year + '/' + month + '/' + day + ' ' + } + if (Number(value)) { + value = parseInt(value) + dateBase = 0 + } + return this.createTimeStamp(dateBase + value) + }, + + /** + * 瑙f瀽榛樿鍊�value锛屽瓧绗︿覆銆佹椂闂存埑 + * @param {Object} defaultTime + */ + parseValue(value) { + if (!value) { + return + } + if (this.type === 'time' && typeof value === "string") { + this.parseTimeType(value) + } else { + let defaultDate = null + defaultDate = new Date(value) + if (this.type !== 'time') { + this.year = defaultDate.getFullYear() + this.month = defaultDate.getMonth() + 1 + this.day = defaultDate.getDate() + } + if (this.type !== 'date') { + this.hour = defaultDate.getHours() + this.minute = defaultDate.getMinutes() + this.second = defaultDate.getSeconds() + } + } + if (this.hideSecond) { + this.second = 0 + } + }, + + /** + * 瑙f瀽鍙�鎷╂椂闂磋寖鍥�start銆乪nd锛屽勾鏈堟棩瀛楃涓层�鏃堕棿鎴�+ * @param {Object} defaultTime + */ + parseDatetimeRange(point, pointType) { + // 鏃堕棿涓虹┖锛屽垯閲嶇疆涓哄垵濮嬪� + if (!point) { + if (pointType === 'start') { + this.startYear = 1920 + this.startMonth = 1 + this.startDay = 1 + this.startHour = 0 + this.startMinute = 0 + this.startSecond = 0 + } + if (pointType === 'end') { + this.endYear = 2120 + this.endMonth = 12 + this.endDay = 31 + this.endHour = 23 + this.endMinute = 59 + this.endSecond = 59 + } + return + } + if (this.type === 'time') { + const pointArr = point.split(':') + this[pointType + 'Hour'] = Number(pointArr[0]) + this[pointType + 'Minute'] = Number(pointArr[1]) + this[pointType + 'Second'] = Number(pointArr[2]) + } else { + if (!point) { + pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60 + return + } + if (Number(point)) { + point = parseInt(point) + } + // datetime 鐨�end 娌℃湁鏃跺垎绉� 鍒欎笉闄愬埗 + const hasTime = /[0-9]:[0-9]/ + if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test( + point)) { + point = point + ' 23:59:59' + } + const pointDate = new Date(point) + this[pointType + 'Year'] = pointDate.getFullYear() + this[pointType + 'Month'] = pointDate.getMonth() + 1 + this[pointType + 'Day'] = pointDate.getDate() + if (this.type === 'datetime') { + this[pointType + 'Hour'] = pointDate.getHours() + this[pointType + 'Minute'] = pointDate.getMinutes() + this[pointType + 'Second'] = pointDate.getSeconds() + } + } + }, + + // 鑾峰彇 骞淬�鏈堛�鏃ャ�鏃躲�鍒嗐�绉�褰撳墠鍙�鑼冨洿 + getCurrentRange(value) { + const range = [] + for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) { + range.push(i) + } + return range + }, + + // 瀛楃涓查瀛楁瘝澶у啓 + capitalize(str) { + return str.charAt(0).toUpperCase() + str.slice(1) + }, + + // 妫�煡褰撳墠鍊兼槸鍚﹀湪鑼冨洿鍐咃紝涓嶅湪鍒欏綋鍓嶅�閲嶇疆涓哄彲閫夎寖鍥寸涓�」 + checkValue(name, value, values) { + if (values.indexOf(value) === -1) { + this[name] = values[0] + } + }, + + // 姣忎釜鏈堢殑瀹為檯澶╂暟 + daysInMonth(year, month) { // Use 1 for January, 2 for February, etc. + return new Date(year, month, 0).getDate(); + }, + + /** + * 鐢熸垚鏃堕棿鎴�+ * @param {Object} time + */ + createTimeStamp(time) { + if (!time) return + if (typeof time === "number") { + return time + } else { + time = time.replace(/-/g, '/') + if (this.type === 'date') { + time = time + ' ' + '00:00:00' + } + return Date.parse(time) + } + }, + + /** + * 鐢熸垚鏃ユ湡鎴栨椂闂寸殑瀛楃涓�+ */ + createDomSting() { + const yymmdd = this.year + + '-' + + this.lessThanTen(this.month) + + '-' + + this.lessThanTen(this.day) + + let hhmmss = this.lessThanTen(this.hour) + + ':' + + this.lessThanTen(this.minute) + + if (!this.hideSecond) { + hhmmss = hhmmss + ':' + this.lessThanTen(this.second) + } + + if (this.type === 'date') { + return yymmdd + } else if (this.type === 'time') { + return hhmmss + } else { + return yymmdd + ' ' + hhmmss + } + }, + + /** + * 鍒濆鍖栬繑鍥炲�锛屽苟鎶涘嚭 change 浜嬩欢 + */ + initTime(emit = true) { + this.time = this.createDomSting() + if (!emit) return + if (this.returnType === 'timestamp' && this.type !== 'time') { + this.$emit('change', this.createTimeStamp(this.time)) + this.$emit('input', this.createTimeStamp(this.time)) + this.$emit('update:modelValue', this.createTimeStamp(this.time)) + } else { + this.$emit('change', this.time) + this.$emit('input', this.time) + this.$emit('update:modelValue', this.time) + } + }, + + /** + * 鐢ㄦ埛閫夋嫨鏃ユ湡鎴栨椂闂存洿鏂�data + * @param {Object} e + */ + bindDateChange(e) { + const val = e.detail.value + this.year = this.years[val[0]] + this.month = this.months[val[1]] + this.day = this.days[val[2]] + }, + bindTimeChange(e) { + const val = e.detail.value + this.hour = this.hours[val[0]] + this.minute = this.minutes[val[1]] + this.second = this.seconds[val[2]] + }, + + /** + * 鍒濆鍖栧脊鍑哄眰 + */ + initTimePicker() { + if (this.disabled) return + const value = fixIosDateFormat(this.time) + this.initPickerValue(value) + this.visible = !this.visible + }, + + /** + * 瑙﹀彂鎴栧叧闂脊妗�+ */ + tiggerTimePicker(e) { + this.visible = !this.visible + }, + + /** + * 鐢ㄦ埛鐐瑰嚮鈥滄竻绌衡�鎸夐挳锛屾竻绌哄綋鍓嶅� + */ + clearTime() { + this.time = '' + this.$emit('change', this.time) + this.$emit('input', this.time) + this.$emit('update:modelValue', this.time) + this.tiggerTimePicker() + }, + + /** + * 鐢ㄦ埛鐐瑰嚮鈥滅‘瀹氣�鎸夐挳 + */ + setTime() { + this.initTime() + this.tiggerTimePicker() + } + } + } +</script> + +<style lang="scss"> + $uni-primary: #007aff !default; + + .uni-datetime-picker { + /* #ifndef APP-NVUE */ + /* width: 100%; */ + /* #endif */ + } + + .uni-datetime-picker-view { + height: 130px; + width: 270px; + /* #ifndef APP-NVUE */ + cursor: pointer; + /* #endif */ + } + + .uni-datetime-picker-item { + height: 50px; + line-height: 50px; + text-align: center; + font-size: 14px; + } + + .uni-datetime-picker-btn { + margin-top: 60px; + /* #ifndef APP-NVUE */ + display: flex; + cursor: pointer; + /* #endif */ + flex-direction: row; + justify-content: space-between; + } + + .uni-datetime-picker-btn-text { + font-size: 14px; + color: $uni-primary; + } + + .uni-datetime-picker-btn-group { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + } + + .uni-datetime-picker-cancel { + margin-right: 30px; + } + + .uni-datetime-picker-mask { + position: fixed; + bottom: 0px; + top: 0px; + left: 0px; + right: 0px; + background-color: rgba(0, 0, 0, 0.4); + transition-duration: 0.3s; + z-index: 998; + } + + .uni-datetime-picker-popup { + border-radius: 8px; + padding: 30px; + width: 270px; + /* #ifdef APP-NVUE */ + height: 500px; + /* #endif */ + /* #ifdef APP-NVUE */ + width: 330px; + /* #endif */ + background-color: #fff; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition-duration: 0.3s; + z-index: 999; + } + + .fix-nvue-height { + /* #ifdef APP-NVUE */ + height: 330px; + /* #endif */ + } + + .uni-datetime-picker-time { + color: grey; + } + + .uni-datetime-picker-column { + height: 50px; + } + + .uni-datetime-picker-timebox { + + border: 1px solid #E5E5E5; + border-radius: 5px; + padding: 7px 10px; + /* #ifndef APP-NVUE */ + box-sizing: border-box; + cursor: pointer; + /* #endif */ + } + + .uni-datetime-picker-timebox-pointer { + /* #ifndef APP-NVUE */ + cursor: pointer; + /* #endif */ + } + + + .uni-datetime-picker-disabled { + opacity: 0.4; + /* #ifdef H5 */ + cursor: not-allowed !important; + /* #endif */ + } + + .uni-datetime-picker-text { + font-size: 14px; + line-height: 50px + } + + .uni-datetime-picker-sign { + position: absolute; + top: 53px; + /* 鍑忔帀 10px 鐨勫厓绱犻珮搴︼紝鍏煎nvue */ + color: #999; + /* #ifdef APP-NVUE */ + font-size: 16px; + /* #endif */ + } + + .sign-left { + left: 86px; + } + + .sign-right { + right: 86px; + } + + .sign-center { + left: 135px; + } + + .uni-datetime-picker__container-box { + position: relative; + display: flex; + align-items: center; + justify-content: center; + margin-top: 40px; + } + + .time-hide-second { + width: 180px; + } +</style> diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue new file mode 100644 index 0000000..6843e80 --- /dev/null +++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue @@ -0,0 +1,1064 @@ +<template> + <view class="uni-date"> + <view class="uni-date-editor" @click="show"> + <slot> + <view class="uni-date-editor--x" + :class="{'uni-date-editor--x__disabled': disabled,'uni-date-x--border': border}"> + <view v-if="!isRange" class="uni-date-x uni-date-single"> + <uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons> + <view class="uni-date__x-input">{{ displayValue || singlePlaceholderText }}</view> + </view> + + <view v-else class="uni-date-x uni-date-range"> + <uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons> + <view class="uni-date__x-input text-center">{{ displayRangeValue.startDate || startPlaceholderText }}</view> + + <view class="range-separator">{{rangeSeparator}}</view> + + <view class="uni-date__x-input text-center">{{ displayRangeValue.endDate || endPlaceholderText }}</view> + </view> + + <view v-if="showClearIcon" class="uni-date__icon-clear" @click.stop="clear"> + <uni-icons type="clear" color="#c0c4cc" size="22"></uni-icons> + </view> + </view> + </slot> + </view> + + <view v-show="pickerVisible" class="uni-date-mask--pc" @click="close"></view> + + <view v-if="!isPhone" v-show="pickerVisible" ref="datePicker" class="uni-date-picker__container"> + <view v-if="!isRange" class="uni-date-single--x" :style="pickerPositionStyle"> + <view class="uni-popper__arrow"></view> + + <view v-if="hasTime" class="uni-date-changed popup-x-header"> + <input class="uni-date__input text-center" type="text" v-model="inputDate" :placeholder="selectDateText" /> + + <time-picker type="time" v-model="pickerTime" :border="false" :disabled="!inputDate" + :start="timepickerStartTime" :end="timepickerEndTime" :hideSecond="hideSecond" style="width: 100%;"> + <input class="uni-date__input text-center" type="text" v-model="pickerTime" :placeholder="selectTimeText" + :disabled="!inputDate" /> + </time-picker> + </view> + + <Calendar ref="pcSingle" :showMonth="false" :start-date="calendarRange.startDate" + :end-date="calendarRange.endDate" :date="calendarDate" @change="singleChange" :default-value="defaultValue" + style="padding: 0 8px;" /> + + <view v-if="hasTime" class="popup-x-footer"> + <text class="confirm-text" @click="confirmSingleChange">{{okText}}</text> + </view> + </view> + + <view v-else class="uni-date-range--x" :style="pickerPositionStyle"> + <view class="uni-popper__arrow"></view> + <view v-if="hasTime" class="popup-x-header uni-date-changed"> + <view class="popup-x-header--datetime"> + <input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startDate" + :placeholder="startDateText" /> + + <time-picker type="time" v-model="tempRange.startTime" :start="timepickerStartTime" :border="false" + :disabled="!tempRange.startDate" :hideSecond="hideSecond"> + <input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startTime" + :placeholder="startTimeText" :disabled="!tempRange.startDate" /> + </time-picker> + </view> + + <uni-icons type="arrowthinright" color="#999" style="line-height: 40px;"></uni-icons> + + <view class="popup-x-header--datetime"> + <input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endDate" + :placeholder="endDateText" /> + + <time-picker type="time" v-model="tempRange.endTime" :end="timepickerEndTime" :border="false" + :disabled="!tempRange.endDate" :hideSecond="hideSecond"> + <input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endTime" + :placeholder="endTimeText" :disabled="!tempRange.endDate" /> + </time-picker> + </view> + </view> + + <view class="popup-x-body"> + <Calendar ref="left" :showMonth="false" :start-date="calendarRange.startDate" + :end-date="calendarRange.endDate" :range="true" :pleStatus="endMultipleStatus" @change="leftChange" + @firstEnterCale="updateRightCale" style="padding: 0 8px;"/> + <Calendar ref="right" :showMonth="false" :start-date="calendarRange.startDate" + :end-date="calendarRange.endDate" :range="true" @change="rightChange" :pleStatus="startMultipleStatus" + @firstEnterCale="updateLeftCale" style="padding: 0 8px;border-left: 1px solid #F1F1F1;" /> + </view> + + <view v-if="hasTime" class="popup-x-footer"> + <text @click="clear">{{clearText}}</text> + <text class="confirm-text" @click="confirmRangeChange">{{okText}}</text> + </view> + </view> + </view> + + <Calendar v-if="isPhone" ref="mobile" :clearDate="false" :date="calendarDate" :defTime="mobileCalendarTime" + :start-date="calendarRange.startDate" :end-date="calendarRange.endDate" :selectableTimes="mobSelectableTime" + :startPlaceholder="startPlaceholder" :endPlaceholder="endPlaceholder" :default-value="defaultValue" + :pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :hasTime="hasTime" :insert="false" + :hideSecond="hideSecond" @confirm="mobileChange" @maskClose="close" @change="calendarClick"/> + </view> +</template> +<script> + /** + * DatetimePicker 鏃堕棿閫夋嫨鍣�+ * @description 鍚屾椂鏀寔 PC 鍜岀Щ鍔ㄧ浣跨敤鏃ュ巻閫夋嫨鏃ユ湡鍜屾棩鏈熻寖鍥�+ * @tutorial https://ext.dcloud.net.cn/plugin?id=3962 + * @property {String} type 閫夋嫨鍣ㄧ被鍨�+ * @property {String|Number|Array|Date} value 缁戝畾鍊�+ * @property {String} placeholder 鍗曢�鎷╂椂鐨勫崰浣嶅唴瀹�+ * @property {String} start 璧峰鏃堕棿 + * @property {String} end 缁堟鏃堕棿 + * @property {String} start-placeholder 鑼冨洿閫夋嫨鏃跺紑濮嬫棩鏈熺殑鍗犱綅鍐呭 + * @property {String} end-placeholder 鑼冨洿閫夋嫨鏃剁粨鏉熸棩鏈熺殑鍗犱綅鍐呭 + * @property {String} range-separator 閫夋嫨鑼冨洿鏃剁殑鍒嗛殧绗�+ * @property {Boolean} border = [true|false] 鏄惁鏈夎竟妗�+ * @property {Boolean} disabled = [true|false] 鏄惁绂佺敤 + * @property {Boolean} clearIcon = [true|false] 鏄惁鏄剧ず娓呴櫎鎸夐挳锛堜粎PC绔�鐢級 + * @property {[String} defaultValue 閫夋嫨鍣ㄦ墦寮�椂榛樿鏄剧ず鐨勬椂闂�+ * @event {Function} change 纭畾鏃ユ湡鏃惰Е鍙戠殑浜嬩欢 + * @event {Function} maskClick 鐐瑰嚮閬僵灞傝Е鍙戠殑浜嬩欢 + * @event {Function} show 鎵撳紑寮瑰嚭灞�+ * @event {Function} close 鍏抽棴寮瑰嚭灞�+ * @event {Function} clear 娓呴櫎涓婃閫変腑鐨勭姸鎬佸拰鍊�+ **/ + import Calendar from './calendar.vue' + import TimePicker from './time-picker.vue' + import { + initVueI18n + } from '@dcloudio/uni-i18n' + import i18nMessages from './i18n/index.js' + import { + getDateTime, + getDate, + getTime, + getDefaultSecond, + dateCompare, + checkDate, + fixIosDateFormat + } from './util' + + export default { + name: 'UniDatetimePicker', + + options: { + // #ifdef MP-TOUTIAO + virtualHost: false, + // #endif + // #ifndef MP-TOUTIAO + virtualHost: true + // #endif + }, + components: { + Calendar, + TimePicker + }, + data() { + return { + isRange: false, + hasTime: false, + displayValue: '', + inputDate: '', + calendarDate: '', + pickerTime: '', + calendarRange: { + startDate: '', + startTime: '', + endDate: '', + endTime: '' + }, + displayRangeValue: { + startDate: '', + endDate: '', + }, + tempRange: { + startDate: '', + startTime: '', + endDate: '', + endTime: '' + }, + // 宸﹀彸鏃ュ巻鍚屾鏁版嵁 + startMultipleStatus: { + before: '', + after: '', + data: [], + fulldate: '' + }, + endMultipleStatus: { + before: '', + after: '', + data: [], + fulldate: '' + }, + pickerVisible: false, + pickerPositionStyle: null, + isEmitValue: false, + isPhone: false, + isFirstShow: true, + i18nT: () => {} + } + }, + props: { + type: { + type: String, + default: 'datetime' + }, + value: { + type: [String, Number, Array, Date], + default: '' + }, + modelValue: { + type: [String, Number, Array, Date], + default: '' + }, + start: { + type: [Number, String], + default: '' + }, + end: { + type: [Number, String], + default: '' + }, + returnType: { + type: String, + default: 'string' + }, + placeholder: { + type: String, + default: '' + }, + startPlaceholder: { + type: String, + default: '' + }, + endPlaceholder: { + type: String, + default: '' + }, + rangeSeparator: { + type: String, + default: '-' + }, + border: { + type: [Boolean], + default: true + }, + disabled: { + type: [Boolean], + default: false + }, + clearIcon: { + type: [Boolean], + default: true + }, + hideSecond: { + type: [Boolean], + default: false + }, + defaultValue: { + type: [String, Object, Array], + default: '' + } + }, + watch: { + type: { + immediate: true, + handler(newVal) { + this.hasTime = newVal.indexOf('time') !== -1 + this.isRange = newVal.indexOf('range') !== -1 + } + }, + // #ifndef VUE3 + value: { + immediate: true, + handler(newVal) { + if (this.isEmitValue) { + this.isEmitValue = false + return + } + this.initPicker(newVal) + } + }, + // #endif + // #ifdef VUE3 + modelValue: { + immediate: true, + handler(newVal) { + if (this.isEmitValue) { + this.isEmitValue = false + return + } + this.initPicker(newVal) + } + }, + // #endif + start: { + immediate: true, + handler(newVal) { + if (!newVal) return + this.calendarRange.startDate = getDate(newVal) + if (this.hasTime) { + this.calendarRange.startTime = getTime(newVal) + } + } + }, + end: { + immediate: true, + handler(newVal) { + if (!newVal) return + this.calendarRange.endDate = getDate(newVal) + if (this.hasTime) { + this.calendarRange.endTime = getTime(newVal, this.hideSecond) + } + } + }, + }, + computed: { + timepickerStartTime() { + const activeDate = this.isRange ? this.tempRange.startDate : this.inputDate + return activeDate === this.calendarRange.startDate ? this.calendarRange.startTime : '' + }, + timepickerEndTime() { + const activeDate = this.isRange ? this.tempRange.endDate : this.inputDate + return activeDate === this.calendarRange.endDate ? this.calendarRange.endTime : '' + }, + mobileCalendarTime() { + const timeRange = { + start: this.tempRange.startTime, + end: this.tempRange.endTime + } + return this.isRange ? timeRange : this.pickerTime + }, + mobSelectableTime() { + return { + start: this.calendarRange.startTime, + end: this.calendarRange.endTime + } + }, + datePopupWidth() { + // todo + return this.isRange ? 653 : 301 + }, + + /** + * for i18n + */ + singlePlaceholderText() { + return this.placeholder || (this.type === 'date' ? this.selectDateText : this.selectDateTimeText) + }, + startPlaceholderText() { + return this.startPlaceholder || this.startDateText + }, + endPlaceholderText() { + return this.endPlaceholder || this.endDateText + }, + selectDateText() { + return this.i18nT("uni-datetime-picker.selectDate") + }, + selectDateTimeText() { + return this.i18nT("uni-datetime-picker.selectDateTime") + }, + selectTimeText() { + return this.i18nT("uni-datetime-picker.selectTime") + }, + startDateText() { + return this.startPlaceholder || this.i18nT("uni-datetime-picker.startDate") + }, + startTimeText() { + return this.i18nT("uni-datetime-picker.startTime") + }, + endDateText() { + return this.endPlaceholder || this.i18nT("uni-datetime-picker.endDate") + }, + endTimeText() { + return this.i18nT("uni-datetime-picker.endTime") + }, + okText() { + return this.i18nT("uni-datetime-picker.ok") + }, + clearText() { + return this.i18nT("uni-datetime-picker.clear") + }, + showClearIcon() { + return this.clearIcon && !this.disabled && (this.displayValue || (this.displayRangeValue.startDate && this + .displayRangeValue.endDate)) + } + }, + created() { + this.initI18nT() + this.platform() + }, + methods: { + initI18nT() { + const vueI18n = initVueI18n(i18nMessages) + this.i18nT = vueI18n.t + }, + initPicker(newVal) { + if ((!newVal && !this.defaultValue) || Array.isArray(newVal) && !newVal.length) { + this.$nextTick(() => { + this.clear(false) + }) + return + } + + if (!Array.isArray(newVal) && !this.isRange) { + if (newVal) { + this.displayValue = this.inputDate = this.calendarDate = getDate(newVal) + if (this.hasTime) { + this.pickerTime = getTime(newVal, this.hideSecond) + this.displayValue = `${this.displayValue} ${this.pickerTime}` + } + } else if (this.defaultValue) { + this.inputDate = this.calendarDate = getDate(this.defaultValue) + if (this.hasTime) { + this.pickerTime = getTime(this.defaultValue, this.hideSecond) + } + } + } else { + const [before, after] = newVal + if (!before && !after) return + const beforeDate = getDate(before) + const beforeTime = getTime(before, this.hideSecond) + + const afterDate = getDate(after) + const afterTime = getTime(after, this.hideSecond) + const startDate = beforeDate + const endDate = afterDate + this.displayRangeValue.startDate = this.tempRange.startDate = startDate + this.displayRangeValue.endDate = this.tempRange.endDate = endDate + + if (this.hasTime) { + this.displayRangeValue.startDate = `${beforeDate} ${beforeTime}` + this.displayRangeValue.endDate = `${afterDate} ${afterTime}` + this.tempRange.startTime = beforeTime + this.tempRange.endTime = afterTime + } + const defaultRange = { + before: beforeDate, + after: afterDate + } + this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, defaultRange, { + which: 'right' + }) + this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, { + which: 'left' + }) + } + }, + updateLeftCale(e) { + const left = this.$refs.left + // 璁剧疆鑼冨洿閫�+ left.cale.setHoverMultiple(e.after) + left.setDate(this.$refs.left.nowDate.fullDate) + }, + updateRightCale(e) { + const right = this.$refs.right + // 璁剧疆鑼冨洿閫�+ right.cale.setHoverMultiple(e.after) + right.setDate(this.$refs.right.nowDate.fullDate) + }, + platform() { + if (typeof navigator !== "undefined") { + this.isPhone = navigator.userAgent.toLowerCase().indexOf('mobile') !== -1 + return + } + // #ifdef MP-WEIXIN + const { + windowWidth + } = uni.getWindowInfo() + // #endif + // #ifndef MP-WEIXIN + const { + windowWidth + } = uni.getSystemInfoSync() + // #endif + this.isPhone = windowWidth <= 500 + this.windowWidth = windowWidth + }, + show() { + this.$emit("show") + if (this.disabled) { + return + } + this.platform() + if (this.isPhone) { + setTimeout(() => { + this.$refs.mobile.open() + }, 0); + return + } + this.pickerPositionStyle = { + top: '10px' + } + const dateEditor = uni.createSelectorQuery().in(this).select(".uni-date-editor") + dateEditor.boundingClientRect(rect => { + if (this.windowWidth - rect.left < this.datePopupWidth) { + this.pickerPositionStyle.right = 0 + } + }).exec() + setTimeout(() => { + this.pickerVisible = !this.pickerVisible + if (!this.isPhone && this.isRange && this.isFirstShow) { + this.isFirstShow = false + const { + startDate, + endDate + } = this.calendarRange + if (startDate && endDate) { + if (this.diffDate(startDate, endDate) < 30) { + this.$refs.right.changeMonth('pre') + } + } else { + // this.$refs.right.changeMonth('next') + if (this.isPhone) { + this.$refs.right.cale.lastHover = false; + } + } + } + + }, 50) + }, + close() { + setTimeout(() => { + this.pickerVisible = false + this.$emit('maskClick', this.value) + this.$refs.mobile && this.$refs.mobile.close() + }, 20) + }, + setEmit(value) { + if (this.returnType === "timestamp" || this.returnType === "date") { + if (!Array.isArray(value)) { + if (!this.hasTime) { + value = value + ' ' + '00:00:00' + } + value = this.createTimestamp(value) + if (this.returnType === "date") { + value = new Date(value) + } + } else { + if (!this.hasTime) { + value[0] = value[0] + ' ' + '00:00:00' + value[1] = value[1] + ' ' + '00:00:00' + } + value[0] = this.createTimestamp(value[0]) + value[1] = this.createTimestamp(value[1]) + if (this.returnType === "date") { + value[0] = new Date(value[0]) + value[1] = new Date(value[1]) + } + } + } + + this.$emit('update:modelValue', value) + this.$emit('input', value) + this.$emit('change', value) + this.isEmitValue = true + }, + createTimestamp(date) { + date = fixIosDateFormat(date) + return Date.parse(new Date(date)) + }, + singleChange(e) { + this.calendarDate = this.inputDate = e.fulldate + if (this.hasTime) return + this.confirmSingleChange() + }, + confirmSingleChange() { + if (!checkDate(this.inputDate)) { + const now = new Date() + this.calendarDate = this.inputDate = getDate(now) + this.pickerTime = getTime(now, this.hideSecond) + } + + let startLaterInputDate = false + let startDate, startTime + if (this.start) { + let startString = this.start + if (typeof this.start === 'number') { + startString = getDateTime(this.start, this.hideSecond) + } + [startDate, startTime] = startString.split(' ') + if (this.start && !dateCompare(startDate, this.inputDate)) { + startLaterInputDate = true + this.inputDate = startDate + } + } + + let endEarlierInputDate = false + let endDate, endTime + if (this.end) { + let endString = this.end + if (typeof this.end === 'number') { + endString = getDateTime(this.end, this.hideSecond) + } + [endDate, endTime] = endString.split(' ') + if (this.end && !dateCompare(this.inputDate, endDate)) { + endEarlierInputDate = true + this.inputDate = endDate + } + } + if (this.hasTime) { + if (startLaterInputDate) { + this.pickerTime = startTime || getDefaultSecond(this.hideSecond) + } + if (endEarlierInputDate) { + this.pickerTime = endTime || getDefaultSecond(this.hideSecond) + } + if (!this.pickerTime) { + this.pickerTime = getTime(Date.now(), this.hideSecond) + } + this.displayValue = `${this.inputDate} ${this.pickerTime}` + } else { + this.displayValue = this.inputDate + } + this.setEmit(this.displayValue) + this.pickerVisible = false + }, + leftChange(e) { + const { + before, + after + } = e.range + this.rangeChange(before, after) + const obj = { + before: e.range.before, + after: e.range.after, + data: e.range.data, + fulldate: e.fulldate + } + this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, obj) + this.$emit('calendarClick', e) + }, + rightChange(e) { + const { + before, + after + } = e.range + this.rangeChange(before, after) + const obj = { + before: e.range.before, + after: e.range.after, + data: e.range.data, + fulldate: e.fulldate + } + this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj) + this.$emit('calendarClick', e) + }, + mobileChange(e) { + if (this.isRange) { + const { + before, + after + } = e.range + if (!before) { + return; + } + + this.handleStartAndEnd(before, after, true) + if (this.hasTime) { + const { + startTime, + endTime + } = e.timeRange + this.tempRange.startTime = startTime + this.tempRange.endTime = endTime + } + this.confirmRangeChange() + } else { + if (this.hasTime) { + this.displayValue = e.fulldate + ' ' + e.time + } else { + this.displayValue = e.fulldate + } + this.setEmit(this.displayValue) + } + this.$refs.mobile.close() + }, + rangeChange(before, after) { + if (!(before && after)) return + this.handleStartAndEnd(before, after, true) + if (this.hasTime) return + this.confirmRangeChange() + }, + confirmRangeChange() { + if (!this.tempRange.startDate || !this.tempRange.endDate) { + this.pickerVisible = false + return + } + if (!checkDate(this.tempRange.startDate)) { + this.tempRange.startDate = getDate(Date.now()) + } + if (!checkDate(this.tempRange.endDate)) { + this.tempRange.endDate = getDate(Date.now()) + } + + let start, end + + let startDateLaterRangeStartDate = false + let startDateLaterRangeEndDate = false + let startDate, startTime + if (this.start) { + let startString = this.start + if (typeof this.start === 'number') { + startString = getDateTime(this.start, this.hideSecond) + } + [startDate, startTime] = startString.split(' ') + if (this.start && !dateCompare(this.start, `${this.tempRange.startDate} ${this.tempRange.startTime}`)) { + startDateLaterRangeStartDate = true + this.tempRange.startDate = startDate + } + if (this.start && !dateCompare(this.start, `${this.tempRange.endDate} ${this.tempRange.endTime}`)) { + startDateLaterRangeEndDate = true + this.tempRange.endDate = startDate + } + } + let endDateEarlierRangeStartDate = false + let endDateEarlierRangeEndDate = false + let endDate, endTime + if (this.end) { + let endString = this.end + if (typeof this.end === 'number') { + endString = getDateTime(this.end, this.hideSecond) + } + [endDate, endTime] = endString.split(' ') + + if (this.end && !dateCompare(`${this.tempRange.startDate} ${this.tempRange.startTime}`, this.end)) { + endDateEarlierRangeStartDate = true + this.tempRange.startDate = endDate + } + if (this.end && !dateCompare(`${this.tempRange.endDate} ${this.tempRange.endTime}`, this.end)) { + endDateEarlierRangeEndDate = true + this.tempRange.endDate = endDate + } + } + if (!this.hasTime) { + start = this.displayRangeValue.startDate = this.tempRange.startDate + end = this.displayRangeValue.endDate = this.tempRange.endDate + } else { + if (startDateLaterRangeStartDate) { + this.tempRange.startTime = startTime || getDefaultSecond(this.hideSecond) + } else if (endDateEarlierRangeStartDate) { + this.tempRange.startTime = endTime || getDefaultSecond(this.hideSecond) + } + if (!this.tempRange.startTime) { + this.tempRange.startTime = getTime(Date.now(), this.hideSecond) + } + + if (startDateLaterRangeEndDate) { + this.tempRange.endTime = startTime || getDefaultSecond(this.hideSecond) + } else if (endDateEarlierRangeEndDate) { + this.tempRange.endTime = endTime || getDefaultSecond(this.hideSecond) + } + if (!this.tempRange.endTime) { + this.tempRange.endTime = getTime(Date.now(), this.hideSecond) + } + start = this.displayRangeValue.startDate = `${this.tempRange.startDate} ${this.tempRange.startTime}` + end = this.displayRangeValue.endDate = `${this.tempRange.endDate} ${this.tempRange.endTime}` + } + if (!dateCompare(start, end)) { + [start, end] = [end, start] + } + this.displayRangeValue.startDate = start + this.displayRangeValue.endDate = end + const displayRange = [start, end] + this.setEmit(displayRange) + this.pickerVisible = false + }, + handleStartAndEnd(before, after, temp = false) { + if (!before) return + if (!after) after = before; + const type = temp ? 'tempRange' : 'range' + const isStartEarlierEnd = dateCompare(before, after) + this[type].startDate = isStartEarlierEnd ? before : after + this[type].endDate = isStartEarlierEnd ? after : before + }, + /** + * 姣旇緝鏃堕棿澶у皬 + */ + dateCompare(startDate, endDate) { + // 璁$畻鎴鏃堕棿 + startDate = new Date(startDate.replace('-', '/').replace('-', '/')) + // 璁$畻璇︾粏椤圭殑鎴鏃堕棿 + endDate = new Date(endDate.replace('-', '/').replace('-', '/')) + return startDate <= endDate + }, + + /** + * 姣旇緝鏃堕棿宸�+ */ + diffDate(startDate, endDate) { + // 璁$畻鎴鏃堕棿 + startDate = new Date(startDate.replace('-', '/').replace('-', '/')) + // 璁$畻璇︾粏椤圭殑鎴鏃堕棿 + endDate = new Date(endDate.replace('-', '/').replace('-', '/')) + const diff = (endDate - startDate) / (24 * 60 * 60 * 1000) + return Math.abs(diff) + }, + + clear(needEmit = true) { + if (!this.isRange) { + this.displayValue = '' + this.inputDate = '' + this.pickerTime = '' + if (this.isPhone) { + this.$refs.mobile && this.$refs.mobile.clearCalender() + } else { + this.$refs.pcSingle && this.$refs.pcSingle.clearCalender() + } + if (needEmit) { + this.$emit('change', '') + this.$emit('input', '') + this.$emit('update:modelValue', '') + } + } else { + this.displayRangeValue.startDate = '' + this.displayRangeValue.endDate = '' + this.tempRange.startDate = '' + this.tempRange.startTime = '' + this.tempRange.endDate = '' + this.tempRange.endTime = '' + if (this.isPhone) { + this.$refs.mobile && this.$refs.mobile.clearCalender() + } else { + this.$refs.left && this.$refs.left.clearCalender() + this.$refs.right && this.$refs.right.clearCalender() + this.$refs.right && this.$refs.right.changeMonth('next') + } + if (needEmit) { + this.$emit('change', []) + this.$emit('input', []) + this.$emit('update:modelValue', []) + } + } + }, + + calendarClick(e) { + this.$emit('calendarClick', e) + } + } + } +</script> + +<style lang="scss"> + $uni-primary: #007aff !default; + + .uni-date { + width: 100%; + flex: 1; + } + + .uni-date-x { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + border-radius: 4px; + background-color: #fff; + color: #666; + font-size: 14px; + flex: 1; + + .icon-calendar { + padding-left: 3px; + } + + .range-separator { + height: 35px; + /* #ifndef MP */ + padding: 0 2px; + /* #endif */ + line-height: 35px; + } + } + + .uni-date-x--border { + box-sizing: border-box; + border-radius: 4px; + border: 1px solid #e5e5e5; + } + + .uni-date-editor--x { + display: flex; + align-items: center; + position: relative; + } + + .uni-date-editor--x .uni-date__icon-clear { + padding-right: 3px; + display: flex; + align-items: center; + /* #ifdef H5 */ + cursor: pointer; + /* #endif */ + } + + .uni-date__x-input { + width: auto; + height: 35px; + /* #ifndef MP */ + padding-left: 5px; + /* #endif */ + position: relative; + flex: 1; + line-height: 35px; + font-size: 14px; + overflow: hidden; + } + + .text-center { + text-align: center; + } + + .uni-date__input { + height: 40px; + width: 100%; + line-height: 40px; + font-size: 14px; + } + + .uni-date-range__input { + text-align: center; + max-width: 142px; + } + + .uni-date-picker__container { + position: relative; + } + + .uni-date-mask--pc { + position: fixed; + bottom: 0px; + top: 0px; + left: 0px; + right: 0px; + background-color: rgba(0, 0, 0, 0); + transition-duration: 0.3s; + z-index: 996; + } + + .uni-date-single--x { + background-color: #fff; + position: absolute; + top: 0; + z-index: 999; + border: 1px solid #EBEEF5; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 4px; + } + + .uni-date-range--x { + background-color: #fff; + position: absolute; + top: 0; + z-index: 999; + border: 1px solid #EBEEF5; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 4px; + } + + .uni-date-editor--x__disabled { + opacity: 0.4; + cursor: default; + } + + .uni-date-editor--logo { + width: 16px; + height: 16px; + vertical-align: middle; + } + + /* 娣诲姞鏃堕棿 */ + .popup-x-header { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + } + + .popup-x-header--datetime { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + flex: 1; + } + + .popup-x-body { + display: flex; + } + + .popup-x-footer { + padding: 0 15px; + border-top-color: #F1F1F1; + border-top-style: solid; + border-top-width: 1px; + line-height: 40px; + text-align: right; + color: #666; + } + + .popup-x-footer text:hover { + color: $uni-primary; + cursor: pointer; + opacity: 0.8; + } + + .popup-x-footer .confirm-text { + margin-left: 20px; + color: $uni-primary; + } + + .uni-date-changed { + text-align: center; + color: #333; + border-bottom-color: #F1F1F1; + border-bottom-style: solid; + border-bottom-width: 1px; + } + + .uni-date-changed--time text { + height: 50px; + line-height: 50px; + } + + .uni-date-changed .uni-date-changed--time { + flex: 1; + } + + .uni-date-changed--time-date { + color: #333; + opacity: 0.6; + } + + .mr-50 { + margin-right: 50px; + } + + /* picker 寮瑰嚭灞傞�鐢ㄧ殑鎸囩ず灏忎笁瑙� todo锛氭墿灞曡嚦涓婁笅宸﹀彸鏂瑰悜瀹氫綅 */ + .uni-popper__arrow, + .uni-popper__arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border: 6px solid transparent; + border-top-width: 0; + } + + .uni-popper__arrow { + filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); + top: -6px; + left: 10%; + margin-right: 3px; + border-bottom-color: #EBEEF5; + } + + .uni-popper__arrow::after { + content: " "; + top: 1px; + margin-left: -6px; + border-bottom-color: #fff; + } +</style> diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js new file mode 100644 index 0000000..6e9f47d --- /dev/null +++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js @@ -0,0 +1,421 @@ +class Calendar { + constructor({ + selected, + startDate, + endDate, + range, + } = {}) { + // 褰撳墠鏃ユ湡 + this.date = this.getDateObj(new Date()) // 褰撳墠鍒濆叆鏃ユ湡 + // 鎵撶偣淇℃伅 + this.selected = selected || []; + // 璧峰鏃堕棿 + this.startDate = startDate + // 缁堟鏃堕棿 + this.endDate = endDate + // 鏄惁鑼冨洿閫夋嫨 + this.range = range + // 澶氶�鐘舵� + this.cleanMultipleStatus() + // 姣忓懆鏃ユ湡 + this.weeks = {} + this.lastHover = false + } + /** + * 璁剧疆鏃ユ湡 + * @param {Object} date + */ + setDate(date) { + const selectDate = this.getDateObj(date) + this.getWeeks(selectDate.fullDate) + } + + /** + * 娓呯悊澶氶�鐘舵� + */ + cleanMultipleStatus() { + this.multipleStatus = { + before: '', + after: '', + data: [] + } + } + + setStartDate(startDate) { + this.startDate = startDate + } + + setEndDate(endDate) { + this.endDate = endDate + } + + getPreMonthObj(date) { + date = fixIosDateFormat(date) + date = new Date(date) + + const oldMonth = date.getMonth() + date.setMonth(oldMonth - 1) + const newMonth = date.getMonth() + if (oldMonth !== 0 && newMonth - oldMonth === 0) { + date.setMonth(newMonth - 1) + } + return this.getDateObj(date) + } + getNextMonthObj(date) { + date = fixIosDateFormat(date) + date = new Date(date) + + const oldMonth = date.getMonth() + date.setMonth(oldMonth + 1) + const newMonth = date.getMonth() + if (newMonth - oldMonth > 1) { + date.setMonth(newMonth - 1) + } + return this.getDateObj(date) + } + + /** + * 鑾峰彇鎸囧畾鏍煎紡Date瀵硅薄 + */ + getDateObj(date) { + date = fixIosDateFormat(date) + date = new Date(date) + + return { + fullDate: getDate(date), + year: date.getFullYear(), + month: addZero(date.getMonth() + 1), + date: addZero(date.getDate()), + day: date.getDay() + } + } + + /** + * 鑾峰彇涓婁竴涓湀鏃ユ湡闆嗗悎 + */ + getPreMonthDays(amount, dateObj) { + const result = [] + for (let i = amount - 1; i >= 0; i--) { + const month = dateObj.month - 1 + result.push({ + date: new Date(dateObj.year, month, -i).getDate(), + month, + disable: true + }) + } + return result + } + /** + * 鑾峰彇鏈湀鏃ユ湡闆嗗悎 + */ + getCurrentMonthDays(amount, dateObj) { + const result = [] + const fullDate = this.date.fullDate + for (let i = 1; i <= amount; i++) { + const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}` + const isToday = fullDate === currentDate + // 鑾峰彇鎵撶偣淇℃伅 + const info = this.selected && this.selected.find((item) => { + if (this.dateEqual(currentDate, item.date)) { + return item + } + }) + + // 鏃ユ湡绂佺敤 + let disableBefore = true + let disableAfter = true + if (this.startDate) { + disableBefore = dateCompare(this.startDate, currentDate) + } + + if (this.endDate) { + disableAfter = dateCompare(currentDate, this.endDate) + } + + let multiples = this.multipleStatus.data + let multiplesStatus = -1 + if (this.range && multiples) { + multiplesStatus = multiples.findIndex((item) => { + return this.dateEqual(item, currentDate) + }) + } + const checked = multiplesStatus !== -1 + + result.push({ + fullDate: currentDate, + year: dateObj.year, + date: i, + multiple: this.range ? checked : false, + beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after), + afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after), + month: dateObj.month, + disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare( + currentDate, this.endDate)), + isToday, + userChecked: false, + extraInfo: info + }) + } + return result + } + /** + * 鑾峰彇涓嬩竴涓湀鏃ユ湡闆嗗悎 + */ + _getNextMonthDays(amount, dateObj) { + const result = [] + const month = dateObj.month + 1 + for (let i = 1; i <= amount; i++) { + result.push({ + date: i, + month, + disable: true + }) + } + return result + } + + /** + * 鑾峰彇褰撳墠鏃ユ湡璇︽儏 + * @param {Object} date + */ + getInfo(date) { + if (!date) { + date = new Date() + } + const res = this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate) + return res ? res : this.getDateObj(date) + } + + /** + * 姣旇緝鏃堕棿鏄惁鐩哥瓑 + */ + dateEqual(before, after) { + before = new Date(fixIosDateFormat(before)) + after = new Date(fixIosDateFormat(after)) + return before.valueOf() === after.valueOf() + } + + /** + * 姣旇緝鐪熷疄璧峰鏃ユ湡 + */ + + isLogicBefore(currentDate, before, after) { + let logicBefore = before + if (before && after) { + logicBefore = dateCompare(before, after) ? before : after + } + return this.dateEqual(logicBefore, currentDate) + } + + isLogicAfter(currentDate, before, after) { + let logicAfter = after + if (before && after) { + logicAfter = dateCompare(before, after) ? after : before + } + return this.dateEqual(logicAfter, currentDate) + } + + /** + * 鑾峰彇鏃ユ湡鑼冨洿鍐呮墍鏈夋棩鏈�+ * @param {Object} begin + * @param {Object} end + */ + geDateAll(begin, end) { + var arr = [] + var ab = begin.split('-') + var ae = end.split('-') + var db = new Date() + db.setFullYear(ab[0], ab[1] - 1, ab[2]) + var de = new Date() + de.setFullYear(ae[0], ae[1] - 1, ae[2]) + var unixDb = db.getTime() - 24 * 60 * 60 * 1000 + var unixDe = de.getTime() - 24 * 60 * 60 * 1000 + for (var k = unixDb; k <= unixDe;) { + k = k + 24 * 60 * 60 * 1000 + arr.push(this.getDateObj(new Date(parseInt(k))).fullDate) + } + return arr + } + + /** + * 鑾峰彇澶氶�鐘舵� + */ + setMultiple(fullDate) { + if (!this.range) return + + let { + before, + after + } = this.multipleStatus + if (before && after) { + if (!this.lastHover) { + this.lastHover = true + return + } + this.multipleStatus.before = fullDate + this.multipleStatus.after = '' + this.multipleStatus.data = [] + this.multipleStatus.fulldate = '' + this.lastHover = false + } else { + if (!before) { + this.multipleStatus.before = fullDate + this.multipleStatus.after = undefined; + this.lastHover = false + } else { + this.multipleStatus.after = fullDate + if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) { + this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus + .after); + } else { + this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus + .before); + } + this.lastHover = true + } + } + this.getWeeks(fullDate) + } + + /** + * 榧犳爣 hover 鏇存柊澶氶�鐘舵� + */ + setHoverMultiple(fullDate) { + //鎶栭煶灏忕▼搴忕偣鍑讳細瑙﹀彂hover浜嬩欢锛岄渶瑕侀伩鍏嶄竴涓�+ // #ifndef MP-TOUTIAO + if (!this.range || this.lastHover) return + const { + before + } = this.multipleStatus + + if (!before) { + this.multipleStatus.before = fullDate + } else { + this.multipleStatus.after = fullDate + if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) { + this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after); + } else { + this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before); + } + } + this.getWeeks(fullDate) + // #endif + + } + + /** + * 鏇存柊榛樿鍊煎閫夌姸鎬�+ */ + setDefaultMultiple(before, after) { + this.multipleStatus.before = before + this.multipleStatus.after = after + if (before && after) { + if (dateCompare(before, after)) { + this.multipleStatus.data = this.geDateAll(before, after); + this.getWeeks(after) + } else { + this.multipleStatus.data = this.geDateAll(after, before); + this.getWeeks(before) + } + } + } + + /** + * 鑾峰彇姣忓懆鏁版嵁 + * @param {Object} dateData + */ + getWeeks(dateData) { + const { + year, + month, + } = this.getDateObj(dateData) + + const preMonthDayAmount = new Date(year, month - 1, 1).getDay() + const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData)) + + const currentMonthDayAmount = new Date(year, month, 0).getDate() + const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData)) + + const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount + const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData)) + + const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays] + + const weeks = new Array(6) + for (let i = 0; i < calendarDays.length; i++) { + const index = Math.floor(i / 7) + if (!weeks[index]) { + weeks[index] = new Array(7) + } + weeks[index][i % 7] = calendarDays[i] + } + + this.calendar = calendarDays + this.weeks = weeks + } +} + +function getDateTime(date, hideSecond) { + return `${getDate(date)} ${getTime(date, hideSecond)}` +} + +function getDate(date) { + date = fixIosDateFormat(date) + date = new Date(date) + const year = date.getFullYear() + const month = date.getMonth() + 1 + const day = date.getDate() + return `${year}-${addZero(month)}-${addZero(day)}` +} + +function getTime(date, hideSecond) { + date = fixIosDateFormat(date) + date = new Date(date) + const hour = date.getHours() + const minute = date.getMinutes() + const second = date.getSeconds() + return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}` +} + +function addZero(num) { + if (num < 10) { + num = `0${num}` + } + return num +} + +function getDefaultSecond(hideSecond) { + return hideSecond ? '00:00' : '00:00:00' +} + +function dateCompare(startDate, endDate) { + startDate = new Date(fixIosDateFormat(startDate)) + endDate = new Date(fixIosDateFormat(endDate)) + return startDate <= endDate +} + +function checkDate(date) { + const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g + return date.match(dateReg) +} +//ios浣庣増鏈�5鍙婁互涓嬶紝鏃犳硶鍖归厤 娌℃湁 鈥欑鈥�鏃剁殑鎯呭喌锛屾墍浠ラ渶瑕佸湪鏈熬 绉�鍔犱笂 闂彿 +const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9](:[0-5]?[0-9])?)?$/; + +function fixIosDateFormat(value) { + if (typeof value === 'string' && dateTimeReg.test(value)) { + value = value.replace(/-/g, '/') + } + return value +} + +export { + Calendar, + getDateTime, + getDate, + getTime, + addZero, + getDefaultSecond, + dateCompare, + checkDate, + fixIosDateFormat +} diff --git a/uni_modules/uni-datetime-picker/package.json b/uni_modules/uni-datetime-picker/package.json new file mode 100644 index 0000000..a886f1b --- /dev/null +++ b/uni_modules/uni-datetime-picker/package.json @@ -0,0 +1,88 @@ +{ + "id": "uni-datetime-picker", + "displayName": "uni-datetime-picker 鏃ユ湡閫夋嫨鍣�, + "version": "2.2.38", + "description": "uni-datetime-picker 鏃ユ湡鏃堕棿閫夋嫨鍣紝鏀寔鏃ュ巻锛屾敮鎸佽寖鍥撮�鎷�, + "keywords": [ + "uni-datetime-picker", + "uni-ui", + "uniui", + "鏃ユ湡鏃堕棿閫夋嫨鍣�, + "鏃ユ湡鏃堕棿" +], + "repository": "https://github.com/dcloudio/uni-ui", + "engines": { + "HBuilderX": "" + }, + "directories": { + "example": "../../temps/example_temps" + }, +"dcloudext": { + "sale": { + "regular": { + "price": "0.00" + }, + "sourcecode": { + "price": "0.00" + } + }, + "contact": { + "qq": "" + }, + "declaration": { + "ads": "鏃�, + "data": "鏃�, + "permissions": "鏃� + }, + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", + "type": "component-vue" + }, + "uni_modules": { + "dependencies": [ + "uni-scss", + "uni-icons" + ], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y", + "alipay": "n" + }, + "client": { + "App": { + "app-vue": "y", + "app-nvue": "n" + }, + "H5-mobile": { + "Safari": "y", + "Android Browser": "y", + "寰俊娴忚鍣�Android)": "y", + "QQ娴忚鍣�Android)": "y" + }, + "H5-pc": { + "Chrome": "y", + "IE": "y", + "Edge": "y", + "Firefox": "y", + "Safari": "y" + }, + "灏忕▼搴�: { + "寰俊": "y", + "闃块噷": "y", + "鐧惧害": "y", + "瀛楄妭璺冲姩": "y", + "QQ": "y" + }, + "蹇簲鐢�: { + "鍗庝负": "u", + "鑱旂洘": "u" + }, + "Vue": { + "vue2": "y", + "vue3": "y" + } + } + } + } +} diff --git a/uni_modules/uni-datetime-picker/readme.md b/uni_modules/uni-datetime-picker/readme.md new file mode 100644 index 0000000..162fbef --- /dev/null +++ b/uni_modules/uni-datetime-picker/readme.md @@ -0,0 +1,21 @@ + + +> `閲嶈閫氱煡锛氱粍浠跺崌绾ф洿鏂�2.0.0 鍚庯紝鏀寔鏃ユ湡+鏃堕棿鑼冨洿閫夋嫨锛岀粍浠�ui 灏嗕娇鐢ㄦ棩鍘嗛�鎷╂棩鏈燂紝ui 鍙樺寲杈冨ぇ锛屽悓鏃舵敮鎸�PC 鍜�绉诲姩绔�姝ょ増鏈笉鍚戝悗鍏煎锛屼笉鍐嶆敮鎸佸崟鐙殑鏃堕棿閫夋嫨锛坱ype=time锛夊強鐩稿叧鐨�hide-second 灞炴�锛堟椂闂撮�鍙娇鐢ㄥ唴缃粍浠�picker锛夈�鑻ヤ粛闇�娇鐢ㄦ棫鐗堟湰锛屽彲鍦ㄦ彃浠跺競鍦轰笅杞�闈瀠ni_modules鐗堟湰*锛屾棫鐗堟湰灏嗕笉鍐嶇淮鎶 + +## DatetimePicker 鏃堕棿閫夋嫨鍣�+ +> **缁勪欢鍚嶏細uni-datetime-picker** +> 浠g爜鍧楋細 `uDatetimePicker` + + +璇ョ粍浠剁殑浼樺娍鏄紝鏀寔**鏃堕棿鎴�*杈撳叆鍜岃緭鍑猴紙璧峰鏃堕棿銆佺粓姝㈡椂闂翠篃鏀寔鏃堕棿鎴筹級锛屽彲**鍚屾椂閫夋嫨**鏃ユ湡鍜屾椂闂淬� + +鑻ュ彧鏄渶瑕佸崟鐙�鎷╂棩鏈熷拰鏃堕棿锛屼笉闇�鏃堕棿鎴宠緭鍏ュ拰杈撳嚭锛屽彲浣跨敤鍘熺敓鐨�picker 缁勪欢銆�+ +**_鐐瑰嚮 picker 榛樿鍊艰鍒欙細_** + +- 鑻ヨ缃垵濮嬪� value, 浼氭樉绀哄湪 picker 鏄剧ず妗嗕腑 +- 鑻ユ棤鍒濆鍊�value锛屽垯鍒濆鍊�value 涓哄綋鍓嶆湰鍦版椂闂�Date.now()锛�浣嗕笉浼氭樉绀哄湪 picker 鏄剧ず妗嗕腑 + +### [鏌ョ湅鏂囨。](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker) +#### 濡備娇鐢ㄨ繃绋嬩腑鏈変换浣曢棶棰橈紝鎴栬�鎮ㄥuni-ui鏈変竴浜涘ソ鐨勫缓璁紝娆㈣繋鍔犲叆 uni-ui 浜ゆ祦缇わ細871950839 \ No newline at end of file -- Gitblit v1.9.1