Web_TracerMethodology/pages/creatingSituations/components/preview.vue

<template>
	<view class="planPreview">
		<view class="title">计划预览</view>
		<div class="content">
			<div class="theme">主题：督查自查</div>
			<div class="rowTwo">
				<div class="subBlock">
					<span class="subBlocklabel">计划模块</span>
					<div class="subBlockval">{{(typeList.checkedItems.map(v=>v.name)).join(',')}}</div>
				</div>
				<div class="subBlock">
					<span class="subBlocklabel">负责职能科室</span>
					<div class="subBlockval">{{responsibleDepartments}}</div>
				</div>
			</div>
		</div>
        <div class="endContent">
            <span>任务名称</span>
            <input class="inputArea" v-model="name" type="text" >
        </div>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";

export default {
    props: {},
    data() {
        return {}
    },
    computed:{
			 ...mapState({
			 	typeList: state => state.creatingSituations.typeList,
			 	zhinengDepartments:state => state.creatingSituations.zhinengDepartments,
				situationPreview:state=>state.creatingSituations.situationPreview,
			 }),
         // 双向绑定任务名称到 store
         name: {
             get(){
                 return this.situationPreview && this.situationPreview.sitName ? this.situationPreview.sitName : ''
             },
             set(val){
                 this.$store.commit({
                     type: 'creatingSituations/comChangeState',
                     key: 'situationPreview',
                     data: { ...this.situationPreview, sitName: val }
                 });
             }
         },
			 responsibleDepartments:function(){
				  const a = this.zhinengDepartments.checkedItems.reduce((prev,cur)=>prev+`${cur.name}(${cur.employees})`,'');
				  return a;
			 }
		},
    methods: {}
	}
</script>

<style lang="less" scoped>
	.planPreview {
		.title {
			height: 30rpx;
			font-size: 30rpx;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			color: #292C33;
			line-height: 30rpx;
			margin-bottom: 35rpx;
		}

		.content {
			padding: 31.25rpx 25rpx;
			background-color: #fff;

			.theme {
				font-size: 30rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #292C33;
				margin-bottom: 31.25rpx;
			}

			.rowTwo {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.subBlock {
					width: 45%;

					.subBlocklabel {
						font-size: 17.5rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #666F80;

					}

					.subBlockval {
						font-size: 25rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #292C33;
					}

					&:first-child {
						position: relative;

						&::after {
							display: block;
							position: absolute;
							top: 50%;
							margin-top: -25rpx;
							right: 0;
							content: '';
							width: 1rpx;
							height: 50rpx;
							background-color: rgba(218, 222, 230, 1);
						}
					}
				}
			}

		}

		.endContent {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 15rpx;
			padding: 31.25rpx 25rpx;
			background-color: #fff;
			span {
				font-size: 25rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #525866;
				&:last-child {
					display: inline-block;
					color: rgba(41, 44, 51, 1);
					padding-left: 75rpx;
				}
			}
			.inputArea {
				padding-left: 31.25rpx;
			}
		}
	}
</style>