Web_TracerMethodology/pages/mission-action/components/pdca.vue

<template>
	<view class="pdca-page">
		<uni-segmented-control
		  :current="current"
			:values="tabItems"
			@clickItem="onClickItem"
			style-type="text"
			active-color="#3377FF" />
		<view class="content">
			<scroll-view class="scroll-y" scroll-y="true">
        <one-textarea
          v-if="current === 0"
          type="plan"
          :defaultValue="plan"
          :disabled="disabled"
          @changeTextare="changeTextare"
        />
				 <do-and-check
					 v-if="current === 1"
           type="do"
           :disabled="disabled"
           :recordList="doList"
           @changeRecordList="changeDoList"
				/>
				<do-and-check
					v-if="current === 2"
          type="check"
          :disabled="disabled"
          :recordList="checkList"
          :showUploadImg="true"
          @changeRecordList="changeCheckList"
				/>
				<one-textarea
          v-if="current === 3"
          type="action"
          title="对策处置（Action）"
          label="对策处置"
          :defaultValue="action"
          :disabled="disabled"
          @changeTextare="changeTextare"
         />
			</scroll-view>
			<view class="fixed-buttom-btn" v-if="!disabled">
		   	<view class="btn-text cancle" @click="sure('')">
					<text>暂存</text>
				</view>
				<view class="btn-text" @click="toggleModalVisibile">
					<text>提交</text>
				</view>
			</view>
		</view>
    <!-- 方案名称modal -->
    <modal
      v-if="modalVisibile"
      @close="toggleModalVisibile"
      @sure="sure" />
	</view>
</template>

<script>
	// 改善任务PDCA
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	import oneTextarea from './pdca-components/one-textarea.vue'
  import doAndCheck from './pdca-components/do-and-check.vue'
  import modal from './modal.vue'

	export default {
    props: {
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false
      },
      // 详情回显的数据
      values: {
        type: Object,
        default: () => {
          return {}
        }
      },
      // 按钮信息 (包过请求的key)
      btnInfo: {
        type: Object,
        default: () => {
          return {}
        }
      },
      // 任务详情
      missionDetails: {
        type: Object,
        default: () => {
          return {}
        }
      },
      // pdca类型 p 和 pdca
      pdcaSetting: {
        type: String,
        default: 'p'
      }
    },
		data() {
			return {
        current: 0,
        plan: '', // 改善计划
        doList: [{record: '', date: ''}], // 执行过程
        checkList: [{record: '', date: '', filePath: [] }], // 改善确认
        action: '', // 对策处置
        // 方案名称显示隐藏
        modalVisibile: false
			}
    },
    computed: {
      tabItems(){
        return this.pdcaSetting === 'p'
          ? ['改善计划(P)']
          : ['改善计划(P)', '执行过程(D)', '改善确认(C)', '对策处置(A)'];
      }
    },
		created() {
			uni.setNavigationBarTitle({
				title: '改善计划'
      });
      if(this.disabled || this.btnInfo.isEdit) {
        this.plan = this.values['plan'] || '';
        this.doList = (this.values['do'] && this.values['do'].length > 0)
          ? this.getComList(this.values['do'], 'do')
          : [{record: '', date: ''}];
        this.checkList = (this.values['check'] && this.values['check'].length > 0)
          ? this.getComList(this.values['check'], 'check')
          : [{record: '', date: '', filePath: [] }];
        this.action = this.values['action'] || '';
      }
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
      },
      // 切换方案名称显示隐藏
      toggleModalVisibile() {
        this.modalVisibile = !this.modalVisibile;
      },
      // 改善计划/对策处置变化
      changeTextare(type, text) {
        this[type] = text;
      },
      // 执行过程变化
      changeDoList(list) {
        this.doList = list;
      },
      // 改善确认变化
      changeCheckList(list) {
        this.checkList = list;
      },
      // 提交审核/ 暂存(暂存时improveScheme为空)
      sure(improveScheme) {
        let requestParams = {
          improveScheme // 改善方案名称
        };
        this.btnInfo.params && this.btnInfo.params.map(item => {
          if(item.valueKey && !item.isEdit){
            requestParams[item.paramsKey] = (
              item.isOutvalueKey
              ? this.missionDetails
              : this.btnInfo
            )[item.valueKey];
          }else {
            switch(item.paramsKey){
              case 'taskPlan':
                requestParams[item.paramsKey] = this.plan;
                break;
              case 'taskAction':
                requestParams[item.paramsKey] = this.action;
                break;
              case 'taskDoRequestList':
                requestParams[item.paramsKey] = this.doList.map((item, i) => {
                  return {
                    taskDoId: i + 1,
                    taskDoProcess: item.record,
                    taskDoPlan: item.date
                  }
                });
                break;
              case 'taskCheckRequestList':
                requestParams[item.paramsKey] = this.checkList.map((item, i) => {
                  return {
                    taskCheckId: i + 1,
                    taskCheckProcess: item.record,
                    taskCheckPlan: item.date,
                    taskCheckEffect: item.filePath.join(',')
                  }
                });
                break;
              default:
                requestParams[item.paramsKey] = '';
                break;
            }
          }
        });
        this.$emit('comRequest', requestParams);
        improveScheme && this.toggleModalVisibile();
      },
       /**
       * 获取相同key 的新数组
       * @param {Array} list 原数组
       * @param {String} type 类型(如 do、check)
       */
      getComList(list, type) {
        let newList = [];
        list.map(item => {
          if(type === 'do') {
            newList.push({
              record: item.taskDoProcess || '', // 记录内容
              date: item.taskDoPlan || '' // 计划日期
            });
          }else if(type === 'check'){
            newList.push({
              record: item.taskCheckProcess || '', // 记录过程
              date: item.taskCheckPlan || '', // 计划日期
              filePath: item.taskCheckEffect ? item.taskCheckEffect.split(',') : [] // 改善效果(图片)
            });
          }
        });
        return newList;
      }
		},
		components: {
			uniSegmentedControl,
			oneTextarea,
      doAndCheck,
      modal
		}
	}
</script>

<style lang="less">
	.pdca-page {
		height: 100%;

		.content {
      height: calc(100% - 141.5rpx);

			.scroll-y {
				height: 100%;
			}
		}
	}
</style>