yd_qycpfb/jp-mobile/pages/dzf/components/enterpriseVisitorItem.vue

<template>
	<view class="enterpriseSituateItem">
		<view class="d-flex px-4">
			<view class="w-100 font-md text-dark font-weight">对接方式</view>
		</view>
		<view class="px-4">
			<u--form labelPosition="left" :model="model" ref="situateForm" labelWidth="100">
				<u-form-item label="" prop="dealResult">
					<u-radio-group v-model="model.staffTotal" placement="row" @change="groupChange">
						<u-radio :label="item.name" :name="item.value" class="mx-1" v-for="(item,index) in list"
							:key="index"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item :label="list[model.staffTotal?model.staffTotal-1:0]['name']+'记录时间：'" prop="endDate"
					@click="endDateTap">
					<u--input v-model="model.endDate" readonly :border="onlyFlag ? 'none' : 'surround'"
						:placeholder="!onlyFlag ? '请选择近期与企业沟通时间' : ''">
					</u--input>
				</u-form-item>
			</u--form>
			<!-- 年月控件 -->
			<!-- <u-datetime-picker :show="showDatetime" mode="date" @confirm="calendarConfirm" @close="showDatetime=false"
				@cancel="showDatetime=false" :minDate="1704038400000" confirmDisabledText="请选择截止日期" closeOnClickOverlay>
			</u-datetime-picker> -->
		</view>

		<u-calendar :minDate="minDate" :maxDate="maxDate" :show="showDatetime" @close="showDatetime=false"
			@confirm="calendarConfirm"></u-calendar>
	</view>
</template>

<script>
	import {formatDate} from "@/common/util2.js"
	export default {
		props: {
			model: {
				type: Object,
				default: () => {}
			},
			readOnlyFlag: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				showDatetime: false,
				monthType: '',
				list: [{
						name: "上门沟通",
						value: '1'
					},
					{
						name: "电话联系",
						value: '2'
					},
					{
						name: "平台沟通",
						value: '3'
					},
				]
			}
		},
		computed: {
			onlyFlag() {
				return this.readOnlyFlag
			},
			minDate() {
				const now = new Date();
				console.log(now.getFullYear())
				const previousMonth = this.getPreviousMonth(now.getFullYear(), now.getMonth() + 1, now.getDate());
				return previousMonth
			},
			maxDate() {
				const now = new Date();
				const nextMonth = this.getNextMonth(now.getFullYear(), now.getMonth() + 1, now.getDate());
				return nextMonth
			}
		},
		methods: {
			getPreviousMonth(year, month, day) {
				if (month === 1) {
					// 如果是1月，则前一个月是上一年的12月
					return year - 1 + '-12-' + day;
				} else {
					// 对于其他月份，直接减1即可
					return year + '-' + (month - 1) + '-' + day;
				}
			},
			getNextMonth(year, month, day) {
				if (month === 12) {
					// 如果是12月，则下一个月是下年的1月
					return year + 1 + '-01-' + day;
				} else {
					// 对于其他月份，直接加1即可
					return year + '-' + (month + 1) + '-' + day;
				}
			},
			// 持续到哪个月-->点击
			endDateTap(e) {

				if (this.readOnlyFlag) return
				this.showDatetime = true;
				this.hideKeyboard()
			},
			// 持续到哪个月-->日期选择确认
			calendarConfirm(e) {
				this.showDatetime = false
				this.model.endDate = e[0]
			},
			// 隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard()
			},
			groupChange(ele) {
				this.model.staffTotal = ele
			},
		},
	}
</script>

<style lang="scss" scoped>
	.enterpriseSituateItem {
		.commomWidth {
			width: 400rpx;

			.month {
				width: 150rpx;
			}

			.monthDesc {
				width: 230rpx;
			}
		}
	}
</style>