Web_TracerMethodology/pages/mission-action/components/pdca-components/do-and-check.vue

<template>
	<view class="com-plan-content">
		<view class="title">
			<text>
				{{ type === 'do' ? '执行过程记录（Do）' :  '改善确认（Check）'}}
			</text>
		</view>
		<template v-for="(item, i) in recordList">
			<view class="item-view" :key="type + i">
				<view class="top-action">
					<text>改善确认（{{ i + 1 }}）</text>
					<text class="blue-text" v-if="!disabled" @click="delRecord(i)">
						删除
					</text>
				</view>
				<view class="main">
					<view class="row">
						<view class="label-view">
							<text>过程记录</text>
						</view>
						<view class="content">
							<textarea class="textarea" :key="type" :placeholder="placeholder" placeholder-style="color: #B8BECC"
								:maxlength="500" auto-height :value="item.record" :disabled="disabled"
								@input="changeRecord($event, i)" />
						</view>
					</view>
					<view class="row row-heigth">
						<view class="label-view">
							<text>计划日期</text>
						</view>
						<view class="time-pick">
							<date-time-picker :height="140" :pickIndex="i" :defaultValue="item.date"
								:disabled="disabled" @change="changeDateTime" />
						</view>
					</view>
					<template v-if="showUploadImg">
						<tm-upload-img label="改善效果" :filePaths="item.filePath" :disabled="disabled"
							@changeFilePaths="changeFilePaths" isMultiple="true" />
					</template>
				</view>
			</view>
		</template>
		<view class="add-btn" @click="addRecord" v-if="!disabled">
			<text class="blue-text">
				<text class="big">＋</text>
				增加一条记录
			</text>
		</view>
	</view>
</template>

<script>
	// 执行过程记录（Do）和 改善确认（Check）
	export default {
		props: {
			// 多行文本框标题
			type: {
				type: String,
				default: 'do'
			},
			// 是否展示上传图片行
			showUploadImg: {
				type: Boolean,
				default: false
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 控制记录列表数组
			recordList: {
				type: Array,
				default: () => {
					return [{
						record: '',
						date: '',
						filePath: []
					}]
				}
			},
		},
		computed:{
			placeholder(){
				return this.type === 'do' ? '**具体实施方式，What项目+When时间+Where地点+Who负责人+How如何做' : '**根据目标/对策/方案/计划检测执行成果，以图来呈现，须有具体数据做比'
			},
		},
		methods: {
			// 过程记录变化
			changeRecord(e, index) {
				let _recordList = [...this.recordList];
				_recordList[index].record = e.target.value;
				this.$emit('changeRecordList', _recordList);
			},
			// 日期时间改变
			changeDateTime(dateObj, pickType, index) {
				let _recordList = [...this.recordList];
				_recordList[index].date = dateObj.f4;
				this.$emit('changeRecordList', _recordList);
			},
			// 改善效果改变
			/**
			 * @param {{
				 files
				 index,
			 }} fileInfo
			 files：文件集合
			 index:当前编辑的下标
			 */
			changeFilePaths({
				files,
				index
			}) {
				let _recordList = [...this.recordList];
				_recordList[index].filePath = files;
				this.$emit('changeRecordList', _recordList);
			},
			// 新增一条记录
			addRecord() {
				this.$emit('changeRecordList', [...this.recordList, {
					record: '',
					date: '',
					filePath: []
				}]);
			},
			// 删除记录
			delRecord(index) {
				this.$emit('changeRecordList', this.recordList.filter((item, i) => i != index));
			}
		}
	}
</script>

<style lang="less">
	.com-plan-content {
		height: 100%;
		padding-top: 35rpx;

		.title {
			line-height: 35rpx;
			padding: 0 25rpx;

			text {
				font-size: 35rpx;
				color: #292C33;
			}
		}

		.blue-text {
			font-size: 23.75rpx;
			color: #3377FF !important;

			.big {
				font-size: 28.75rpx;
			}
		}

		.item-view {

			.top-action {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 25rpx;
				margin-bottom: 15rpx;
				height: 22.5rpx;
				padding: 0 25rpx;

				text {
					font-size: 22.5rpx;
					color: #666F80;
				}
			}

			.main {
				background-color: #fff;

				.row {
					display: flex;
					border-bottom: 0.62rpx solid #DADEE6;
					padding-left: 25rpx;

					.label-view {
						width: 175rpx;
						line-height: 22.5rpx;
						padding: 31.25rpx 0;

						>text {
							font-size: 22.5rpx;
							color: #666F80;
						}
					}

					.content {
						flex: 1;
						padding: 25rpx 0;

						.textarea {
							width: 100%;
							min-height: 200rpx;
							padding: 0 25rpx;
							line-height: 38rpx;
							font-size: 22.5rpx;
							color: #525866;
							box-sizing: border-box;
						}

						>text {
							font-size: 22.5rpx;
							color: #B8BECC;
						}
					}

					.time-pick {
						flex: 1;
					}
				}

				.row-heigth {

					.label-view {
						line-height: 22.5rpx;
						padding: 31.25rpx 0;
					}
				}
			}
		}

		.add-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 75rpx;
			background-color: #fff;
			border-top: 0.62rpx solid #DADEE6;
		}
	}
</style>