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-style="color: #B8BECC"
								:maxlength="-1"
								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"
					  />
          </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: [] }]
        }
      },
    },
		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;
        console.log('日期时间', dateObj.f4, index);
        this.$emit('changeRecordList', _recordList);
      },
      // 改善效果改变
      changeFilePaths(filePaths, index) {
        let _recordList = [...this.recordList];
        _recordList[index].filePath = filePaths;
        console.log('改善效果', filePaths, index);
        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>