xk-doctor-wx/subPackages/sub_workbench/workbench_announcement.vue

<template>
	<view class="box">
		<view class="b-r-8 white p-32 flex-row flex-jus-sp flex-ali-center m-b-2">
			<text class="left">停诊公告</text>
			<u-switch v-model="form.checked" @change="disabled=form.id?false:!form.checked"></u-switch>
		</view>
		<view class="b-r-8 white p-32 " style="margin-bottom: calc(env(safe-area-inset-bottom) + 110rpx);"
			v-show="form.checked">
			<u-form :model="form" ref="announcement" label-width="150rpx">
				<u-form-item label="公告内容" prop="msg" label-position="top">
					<view class="flex-col bg b-r-8 p-row-16" style="width: 646rpx;">
						<u-input v-model="form.msg" placeholder="请输入" type="textarea" :maxlength="500" auto-height />
						<d-text :text="`${form['msg']?form['msg'].length:0}/500`" color="#C4C7CC" width="614"
							align="right">
						</d-text>
					</view>
				</u-form-item>
				<u-form-item label="开始时间" prop="startTime">
					<u-input input-align="right" v-model="form.startTime" type="select" :select-open="select1"
						@click="select1=true;show=true" placeholder="请选择" />
				</u-form-item>
				<u-form-item label="结束时间" prop="endTime" :border-bottom="false">
					<u-input input-align="right" v-model="form.endTime" type="select" :select-open="select2"
						@click="select2=true;show=true" placeholder="请选择" />
				</u-form-item>
			</u-form>
		</view>
		<view class="button">
			<u-button :throttle-time="0" type="primary" shape="circle" @click="submit" :ripple="true"
				:disabled="form.id&&!form.checked?false:!form.checked">确定</u-button>
		</view>
		<u-picker :safe-area-inset-bottom="true" :mask-close-able="false" @cancel="select1 = false;select2 = false"
			v-model="show" mode="time" :params="params" @confirm="confirm"></u-picker>
		<d-loading-page :loading="loading" :loadingText="loadingText"></d-loading-page>
	</view>
</template>

<script>
	import {
		queryNotice,
		saveClose
	} from '@/api/all.js'
	export default {
		data() {
			return {
				disabled: true,
				loadingText: '正在加载中...',
				info: '',
				loading: true,
				form: {},
				show: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
					timestamp: true
				},
				select1: 0,
				select2: 0,
				rules: {
					msg: [{
						required: true,
						validator: (rule, value, callback) => {
							if (!this.form['msg']) {
								callback(new Error('公告内容不能为空'));
							} else {
								callback();
							}
						},
						trigger: ['change', 'blur']
					}],
					startTime: [{
						required: true,
						validator: (rule, value, callback) => {
							if (!this.form['startTime']) {
								callback(new Error('请选择开始时间'));
							} else {
								callback();
							}
						},
						trigger: ['change', 'blur']
					}],
					endTime: [{
						required: true,
						validator: (rule, value, callback) => {
							if (!this.form['endTime']) {
								callback(new Error('请选择结束时间'));
								return
							}
							if (this.endTimestamp <= this.startTimestamp) {
								callback(new Error('结束时间不能小于等于开始时间'));
								return
							}
							callback();
						},
						trigger: ['change', 'blur']
					}]
				}
			}
		},
		created() {
			this.$nextTick(() => {
				this.$refs.announcement.setRules(this.rules);
			})
			this.queryNotice()
		},
		methods: {
			queryNotice() {
				queryNotice().then(res => {
					if (res.errcode == 0) {
						if (res.data.close_notice) {
							this.form = {
								checked: res.data.close_notice ? true : false,
								msg: res.data.content,
								startTime: this.$u.timeFormat(res.data.start_time, 'yyyy-mm-dd hh:MM:ss'),
								endTime: this.$u.timeFormat(res.data.end_time, 'yyyy-mm-dd hh:MM:ss'),
							}
							this.startTimestamp = res.data.start_time
							this.endTimestamp = res.data.end_time
						}
						this.form.id = res.data.id
						this.loading = false
						this.disabled = false
					} else {
						this.disabled = true
						this.loading = false
					}
				})
			},
			saveClose(data) {
				saveClose(data).then(res => {
					if (res.errcode == 0) {
						this.$toast('提交成功')
						this.loading = false
					} else {
						this.$toast(res.msg)
						this.loading = false
					}
				})
			},
			confirm(e) {
				let time = `${e.month}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
				if (this.select1) {
					this.form.startTime = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd hh:MM:ss')
					this.startTimestamp = e.timestamp
					this.select1 = false
				}
				if (this.select2) {
					this.form.endTime = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd hh:MM:ss')
					this.endTimestamp = e.timestamp
					this.select2 = false
				}
			},
			submit() {
				this.$refs.announcement.validate(valid => {
					if (valid) {
						let y = new Date().getFullYear()
						const data = {
							close_notice: this.form.checked ? 1 : 0,
							content: this.form.msg,
							start_time: this.startTimestamp,
							end_time: this.endTimestamp,
						}
						this.loadingText = '请稍后...'
						this.loading = true
						this.saveClose(data)
					}
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #F9FAFB;
	}
</style>
<style scoped lang="scss">
	.box {
		padding: 20rpx;
	}

	.button {
		position: fixed;
		bottom: env(safe-area-inset-bottom);
		left: 0;
		width: 750rpx;
		height: 110rpx;
		background: #FFFFFF;
		border-top: 2rpx solid #F2F3F5;
		padding: 12rpx 32rpx;
		box-sizing: border-box;
		z-index: 999;
	}
</style>