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

<template>
	<view class="com-plan-content">
		<view class="title">
			<text>{{ title }}</text>
		</view>
		<template v-for="(item, i) in list">
			<view class="item-view">
				<view class="top-action">
					<text>改善确认（1）</text>
					<text class="blue-text">删除</text>
				</view>
				<view class="main">
					<view class="row">
						<view class="label-view">
							<text>过程记录</text>
						</view>
						<view class="content">
							<textarea class="textarea"
						    :key="title"
							  placeholder="请输入"
								placeholder-style="color: #B8BECC"
								:maxlength="-1"
								auto-height
							/>
						</view>
					</view>
					<view class="row row-heigth">
						<view class="label-view">
							<text>计划日期</text>
						</view>
						<view class="content">
							<text>选择计划日期</text>
						</view>
					</view>
					<tm-upload-img
						:filePaths="['/static/img-icon.png', '/static/img-icon.png']"
					/>
				</view>
			</view>
		</template>
		<view class="add-btn" @click="addRecord">
			<text class="blue-text"> 
			  <text class="big">＋</text>
			  增加一条记录
			</text>
		</view>
	</view>
</template>

<script>
	// 执行过程记录（Do）和 改善确认（Check）
	export default {
		props: {
      // 多行文本框标题
			title: {
        type: String,
        default: '执行过程记录（Do）'
			}
    },
    data() {
      return {
        // list长度 控制个数
        list: [
					{gcjl: '', date: '', imgPath: '' },
					{gcjl: '', date: '', imgPath: '' }
				]
      }
    },
		methods: {
      changeVal(e) {
        if(this.label === '改善计划'){
          this.planvalue = e.target.value;
        }else {
          this.actionvalue = e.target.value;
        }
      },
			// 新增一条记录
			addRecord() {
				this.list = [...this.list, {gcjl: '', date: '', imgPath: '' }]
			}
		},
	}
</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;
						}
					}
				}
				
				.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>