cdssHospital/src/components/icss/plan/AddPlan.vue

<style lang="less" scoped>
  .addPlanWrapper {
    padding: 20px 60px 120px 60px;
    margin: 70px 20px 0 20px;
    background: #fff;
    .topBack {
      top: 0;
      left: 0;
    }
	.tipImg{
		  position: absolute;
		  width: 20px;
		  height: 20px;
		  top: 10px;
		  right: -30px;
		  cursor: pointer;
	}
    ul {
      li {
		  border-radius: 2px;
		  margin-bottom: 10px;
      }
    }
    .group_item {
      border-bottom: 1px solid #eee;
      .item_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #E3EAF4;
        border-radius: 4px;
        margin-bottom: 10px;
        .title_left {
          display: flex;
          justify-content: center;
          align-items: center;
          .handleIcon {
            display: flex;
            align-items: center;
            margin: 0 5px;
            cursor: pointer;
            img {
              width: 20px;
              height: 20px;
            }
          }
        }

        .title_right {
          .titlwSwitchStatus {
            margin: 0 22px 0 16px;
          }
        }
      }
      ul {
        li {
          display: flex;
          .move_btn {
			background: #E2F4F6;
			padding-left: 10px;  
            display: flex;
            height: 40px;
            .move_top,
            .move_down {
              width: 30px;
              .img_box {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              }
              .ispointer {
                cursor: pointer;
              }
              img {
                width: 10px;
                height: 14px;
              }
            }
            .move_top {
              img {
                margin-top: -15px;
              }
            }
          }
          .list_item_title {
            width: 140px;
          }
          .list_item_swich {
            .planStatus {
              margin-left: 16px;
            }
          }

          .list_right {
            // width: calc(100% - 60px);
            flex: 1;
            display: flex;
            justify-content: space-between;
			background: #E2F4F6;
            .right_l {
              display: flex;
              // width: calc(100% - 200px);
            }
            /deep/.el-input--small {
              width: 60px;
            }
          }
          .list_right1 {
            width: calc(100%);
			background: #FFFFFF;
          }
        }
      }
    }
	.list-w {
		  /deep/.list_right:nth-of-type(1){
		  	  background: #E2F4F6 !important;
		  }
	}
	.b_active{
		  background: #F2F2F2 ;
		  /deep/.list_right{
			background: #F2F2F2 !important;  
		  }
	}
	.pr-10{
		  padding-right: 10px;
	}
    .open {
      transform: rotate(0deg);
      transition: transform 0.3s;
    }
    .close {
      transform: rotate(180deg);
      transition: transform 0.3s;
    }
    .plus-icon-enter-active {
      transition: all 0.3s;
    }
    .plus-icon-enter {
      opacity: 0;
    }
    .plus-icon-leave-active {
      transition: all 0.3s;
    }
    .plus-icon-leave-active {
      opacity: 0;
    }
  }
</style>
<template>
  <el-scrollbar style="height: 100%" ref="elscrollbar">
    <div class="addPlanWrapper">
      <crumbs
              :title="
          isEdit ? '电子病历方案配置-修改方案' : '电子病历方案配置-添加方案'
        "
              class="topBack"
              :param="$route.params"
              linkTo="Plan"
      ></crumbs>
      <el-row>
        <el-col :span="16">
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="方案名称" prop="planName">
              <el-input
                      v-model="form.planName"
                      placeholder="2-30位,可输入汉字、字母、数字和下划线"
              ></el-input>
            </el-form-item>
            <el-form-item label="方案编码" prop="planCode">
              <el-input
                      v-model="form.planCode"
                      placeholder="可输入字母、数字和下划线"
              ></el-input>
            </el-form-item>
            <el-form-item label="方案配置">
              <div
                      class="group_item"
                      v-for="(group, i) in form.planDetailSub"
                      :key="group.id"
              >
                <div class="item_title">
                  <div class="title_left">
                    <div class="handleIcon" @click="listShow(i)">
                      <img
                              src="../../../images/multi.png"
                              :alt="group.name"
                              :class="isOpenCloseItems[i] ? 'open' : 'close'"
                      />
                    </div>
                    <h4>{{ group.name }}</h4>
                  </div>
                  <div class="title_right">
                    <el-switch
                            v-model="group.status"
                            :active-value="1"
                            :inactive-value="0"
                            active-color="#4BC4D7"
                            inactive-color="#BBBBBB"
                    ></el-switch>
                    <span class="titlwSwitchStatus">{{
                      group.status === 1 ? "启用中" : "未启用"
                    }}</span>
                  </div>
                </div>
                <transition name="plus-icon">
                  <ul v-show="isOpenCloseItems[i]">
                    <li
                            v-for="(item, index) in group.planDetails"
                            :key="item.id"
							:class="((downActive==index||upActive == index)&&item.list)?'b_active':''"
                    >
                      <div class="move_btn">
                        <div class="move_top">
                          <div
                                  class="img_box ispointer"
                                  v-if="index !== 0 && ismix(item.name)"
                                  @mouseover="upActive = index"
                                  @mouseout="upActive = null"
                                  @click="
                              handleMove('up', {
                                name: item.name,
                                orderNo: item.orderNo,
                                groupIndex: i,
                                itemIndex: index
                              })
                            "
                          >
                            <img
                                    :src="
                                upActive === index
                                  ? require('../../../images/icon_hover_top.png')
                                  : require('../../../images/icon_default_top.png')
                              "
                            />
                          </div>
                          <div class="img_box" v-else></div>
                        </div>
                        <div class="move_down">
                          <div
                                  class="img_box ispointer"
                                  v-if="
                              index !== group.planDetails.length - 1 &&
                              ismix(item.name)
                            "
                                  @mouseover="downActive = index"
                                  @mouseout="downActive = null"
                                  @click="
                              handleMove('down', {
                                name: item.name,
                                orderNo: item.orderNo,
                                groupIndex: i,
                                itemIndex: index
                              })
                            "
                          >
                            <img
                                    :src="
                                downActive === index
                                  ? require('../../../images/icon_hover_down.png')
                                  : require('../../../images/icon_default_down.png')
                              "
                            />
                          </div>
                          <div class="img_box" v-else></div>
                        </div>
                      </div>
                      <div class="list_right" v-if="!item.list">
                        <div class="list_right">
                          <div class="right_l">
                            <div class="list_item_title">
                              {{ item.name }}
                            </div>
                            <div class="list_item_swich">
                              <el-switch
                                      v-model="item.status"
                                      :active-value="1"
                                      :inactive-value="0"
                                      active-color="#4BC4D7"
                                      inactive-color="#BBBBBB"
                              ></el-switch>
                              <span class="planStatus">{{
                                item.status === 1 ? "启用中" : "未启用"
                              }}</span>
                            </div>
                          </div>
                          <div v-if="item.number" style="position: relative;" class="pr-10">
                            <span style="margin-right: 8px">默认显示个数</span>
                            <el-select
                                    v-model="item.number"
                                    placeholder="请选择"
                                    size="small"
                                    :disabled="item.status !== 1 ? true : false"
                            >
                              <el-option label="1" :value="1"></el-option>
                              <el-option label="2" :value="2"></el-option>
                              <el-option label="3" :value="3"></el-option>
                              <el-option label="4" :value="4"></el-option>
                              <el-option label="5" :value="5"></el-option>
                              <el-option label="6" :value="6"></el-option>
                            </el-select>
							<el-tooltip class="item" effect="dark" :content="item.code==='diag'?tipZn:tipQt" placement="top">
							     <img :src="require('@/images/tip.png')" v-if="item.code==='casewriting'||item.code==='treatment'||item.code==='diag'" class="tipImg">
							</el-tooltip>
                          </div>
                        </div>
                      </div>
                      <div v-else style="width: 100%" class="list-w">
                        <div
                                class="list_right list_right1"
                                v-for="child in item.list"
                                :key="child.id"
                        >
                          <div class="right_l">
                            <div class="list_item_title">
                              {{ child.name }}
                            </div>
                            <div class="list_item_swich" v-if="child.code!='znjs'">
								<div @click="isStauts(item,child)" style="display: inline-block;">
									<el-switch
									        v-model="child.status"
									        :active-value="1"
									        :inactive-value="0"
									        active-color="#4BC4D7"
									        inactive-color="#BBBBBB"
									></el-switch>
							  </div>
                              <span class="planStatus">{{
                                child.status === 1 ? "启用中" : "未启用"
                              }}</span>
                            </div>
                          </div>
                          <div v-if="child.number" class="pr-10">
                            <span style="margin-right: 8px">默认显示个数</span>
                            <el-select
                                    v-model="child.number"
                                    placeholder="请选择"
                                    size="small"
                                    :disabled="child.status !== 1 ? true : false"
                            >
                              <el-option label="1" :value="1"></el-option>
                              <el-option label="2" :value="2"></el-option>
                              <el-option label="3" :value="3"></el-option>
                              <el-option label="4" :value="4"></el-option>
                              <el-option label="5" :value="5"></el-option>
                              <el-option label="6" :value="6"></el-option>
                            </el-select>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </transition>
              </div>
            </el-form-item>
            <el-form-item>
              <div>
                <el-button style="float: right" type="primary" @click="onSubmit"
                >确定</el-button
                >
              </div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </el-scrollbar>
</template>

<script>
    import api from "@api/icss.js";
    export default {
        name: "addPlan",
        data() {
            var numreg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
            var numreg1 = /^[0-9a-zA-Z_]{1,}$/;
            var validatePass = (rule, value, callback) => {
                if (!numreg.test(value)) {
                    callback(new Error("汉字、字母、数字和下划线"));
                } else {
                    callback();
                }
            };
            var validatePass1 = (rule, value, callback) => {
                if (!numreg1.test(value)) {
                    callback(new Error("字母、数字和下划线"));
                } else {
                    callback();
                }
            };
            return {
				tipZn:'智能诊断模块内的可能诊断、鉴别诊断、既往诊断也取该数量。',
				tipQt:'此数量对横版不生效',
                upActive: null,
                downActive: null,
                isEdit: false,
                hospitalId: null,
                form: {
                    hospitalId: "",
                    planName: "",
                    planCode: "",
                    planStatus: 1,
                    planDetailSub: []
                },
                isOpenCloseItems: { 0: true }, // 是否展开方案配置项
                rules: {
                    planName: [
                        { required: true, message: "方案名称不能为空", trigger: "change" },
                        { min: 2, max: 30, message: "长度2-30位", trigger: "blur" },
                        { required: true, validator: validatePass, trigger: "blur" }
                    ],
                    planCode: [
                        { required: true, message: "方案编码不能为空", trigger: "change" },
                        { required: true, validator: validatePass1, trigger: "blur" }
                    ]
                },
                mixArr: ["开单合理性", "高危", "危急值提醒", "其他提醒"],
                newList: []
            };
        },
        methods: {
			// 对有子集的启用禁用按钮进行联动
			isStauts(arr,arrChild){
				let len=0; //控制数量
				let arrCopy=JSON.parse(JSON.stringify(arr))
				if(arr.name=='开单合理性') return
				arr.list.forEach(item=>{
					if(arrChild.code!=arr.list[0].code&&arrChild.status==1){
						//子集选中父级也要选中
						this.$set(arr.list[0],'status',arrChild.status)
						return
					}
					if(arr.list[0].status==0){
						//父级为0，子级都要为0
						this.$set(item,'status',arrChild.status)
						return
					}
					if(arrChild.code==arr.list[0].code&&arr.list[0].status==1){
						//父级为1，子级都要为1
						this.$set(item,'status',arrChild.status)
						return
					}
					if(item.status===0){
						len=len+1;
					}
				})
				if(arr.list.length-1==len&&arrChild.code!=arr.list[0].code){
					//当子级都不选中，父级也不选中
					this.$set(arr.list[0],'status',0)	
				}
			},
            //展开收起控制
            listShow(i) {
                // TODO Vue监听不到对象中新添加的项，所以复制一份
                let obj = { ...this.isOpenCloseItems };
                obj[i] === true ? (obj[i] = false) : (obj[i] = true);
                this.isOpenCloseItems = obj;
            },
            onSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        const hospitalId = this.$route.params.hospitalId;
                        let params =JSON.parse(JSON.stringify(this.form))
                        let paramsCopy=JSON.parse(JSON.stringify(params))
                        params.hospitalId=hospitalId;
                        params.planDetailParent = params.planDetailSub;
                        delete params.planDetailSub;
                        let arr = [];
                        let index = null;
                        params.planDetailParent[0].planDetails.forEach((item, i) => {
                            if (item.name === "开单合理性") {
                                arr.push(...item.list);
                                index = i;
                            }
                        });
                        params.planDetailParent[0].planDetails.splice(index, 1, ...arr);
                      console.log(this.$route.params)
					  //改变param里面的可能诊断和已诊断的数据结构
					  let objArr=[...this.updateDateParam(paramsCopy,"maydiagnose")] //可能诊断
					  let objhasArr=[...this.updateDateParam(paramsCopy,"hasdiagnose")]  //已有诊断
					  let objArrOne=objArr[0];  //获取可能诊断的对象
					  delete objArrOne.list     //删除可能诊断对象中的多余list
					  let objhasArrOne=objhasArr[0];
					  delete objhasArrOne.list
					  objArr.splice(0,1)
					  objhasArr.splice(0,1)
                        params.planDetailParent = params.planDetailParent.map((item) => {
                            let newArr = [];
                            if (item.planDetails) {
                              newArr = item.planDetails.map((child) => {
                            	  let obj={
                                  code: child.code,
                                  hospitalId: hospitalId,
                                  name: child.name,
                                  number: child.number,
                                  orderNo: child.orderNo,
                                  planId: child.planId,
                                  remark: child.remark,
                                  status: child.status,
                                  value: child.value,
                            	  id:child.id,
                            	  parentId:child.parentId,
                            	  planDetailSub:null,
                                };
                            	  if(child.code==='maydiagnose'){
                            		  obj=JSON.parse(JSON.stringify(objArrOne));
                            		  obj.hospitalId=hospitalId
                            		  obj.planDetailSub=[];
                            		  objArr.forEach(item=>{
                            			  item.hospitalId=hospitalId
                            			  obj.planDetailSub.push(item)
                            		  })
                            	  }else if(child.code==='hasdiagnose'){
                            		  obj=obj=JSON.parse(JSON.stringify(objhasArrOne));
                            		  obj.hospitalId=hospitalId
                            		  obj.planDetailSub=[];
                            		  objhasArr.forEach(item=>{
                            			 item.hospitalId=hospitalId
                            		  	 obj.planDetailSub.push(item)				  
                            		  })
                            	  }else{
                            		obj= obj 
                            	  }
                            	  return obj
                              });
                            }
                            return {
                                code: item.code,
                                hospitalId: hospitalId,
                                name: item.name,
                                number: item.number,
                                orderNo: item.orderNo,
                                planDetailSub: newArr,
                                status: item.status
                            };
                        });
						//处理开单合理性,删除前端写死的智能警示
						params.planDetailParent[0].planDetailSub.forEach((item,index)=>{
							if(item.code==="znjs"){
								params.planDetailParent[0].planDetailSub.splice(index,1)
							}		  
						})
                        api.savePlanInfoDatas(params).then((res) => {
                            if (res.data.code === "0") {
                                this.$message({
                                    showClose: true,
                                    message: "保存成功",
                                    type: "success",
                                    duration: 1000
                                });
                                this.isSaveSuccess = true; // 保存成功,可正常退出
                                this.$router.push({
                                    name: "Plan",
                                    params: Object.assign({}, this.$route.params, {
                                        currentPage: 1
                                    })
                                });
                            } else if (res.data.code === "00020007") {
                                // 方案名/方案编码已存在
                                this.$message({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: "error",
                                    duration: 1000
                                });
                            }
                            this.saveDisable = false;
                        });
                    }
                });
            },
            ismix(val) {
                const index = this.mixArr.findIndex((item) => item == val);
                if (index <= 0) {
                    return true;
                }
                return false;
            },
            handleMove(type, obj) {
                /**
                 * @params
                 *    type:up/down
                 *    obj:{
       *      orderNo:当前点击项的orderNo,
       *      itemIndex:当前点击项的index,
       *      groupIndex:当前组的index
       *    }
                 */
                const { name, orderNo, itemIndex, groupIndex } = obj;
                // exIndex获取到要交换的Index值
                let exIndex = type === "up" ? itemIndex - 1 : itemIndex + 1;
                // exOrderNo获取到要交换的orderNo
                const exOrder = this.form.planDetailSub[groupIndex].planDetails[exIndex];
                // 赋值一份新的数据
                let newList = JSON.parse(
                    JSON.stringify(this.form.planDetailSub[groupIndex].planDetails)
                );
                // 交换orderNo
                newList[exIndex].orderNo = orderNo;
                newList[itemIndex].orderNo = exOrder.orderNo;
                if (newList[itemIndex].list) {
                    newList[itemIndex].list[0].orderNo = exOrder.orderNo;
                }

                // 排序
                newList = this.groupSort(newList);
                // 更新数据
                this.form.planDetailSub[groupIndex].planDetails = newList;
            },
            // 初始化
            fomatArr() {
                let oneArr = JSON.parse(
                    JSON.stringify(this.form.planDetailSub[0].planDetails)
                );
                // const index = this.mixArr.findIndex((item) => item == val);
                let list = oneArr.filter((ite) => {
                    const j = this.mixArr.findIndex((itemB) => itemB === ite.name);
                    return j !== -1;
                });
                let biglist = oneArr.filter((ite) => {
                    const j = this.mixArr.findIndex((itemB) => itemB === ite.name);
                    return j === -1;
                });
                let obj = { list };
                list.forEach((child) => {
                    if (child.name === "开单合理性") {
                        obj.orderNo = child.orderNo;
                        obj.name = child.name;
                        obj.id = child.id + "d";
                    }
                });
                biglist.push(obj);
                this.form.planDetailSub[0].planDetails = this.groupSort(biglist);
            },
			//添加固定的智能警示
			setZnData(data,name){
				let znjsData={}
				data.forEach(item=>{
					if(item.name=='开单合理性'){
						znjsData.code='znjs';
						znjsData.name='智能警示';
						znjsData.orderNo=item.orderNo;
						znjsData.id=item.id+'s';
						// this.$set(item.list,0,znjsData)
						item.list.unshift(znjsData)	
					}
				})
			},
			//处理数量不显示 (备注：因为考虑到客户层面，需要前端特殊处理)
			delNumber(datas){
			    //没有数量的code
			    let nameArray=["auxiliary",'critical',"maymedicine","mayoperation","maynurse","hasmedicine","hasoperation","hasnurse",'rationali','highrisk ','crivalue','otherremind'];
			    console.log(datas)
			    //递归遍历将没用数量设置为空不展示
			    for (let i in datas){
			        nameArray.some(item=>{
			            if(item==datas[i].code){
			                return datas[i].number=null;
			            }
			        })
			        if(datas[i].planDetails){
			            this.delNumber(datas[i].planDetails)
			        }
			    }    
			},
            getDefaultPlans() {
                api.getDefaultPlans().then((res) => {
                    if (res.data.code === "0") {
                        this.form.planDetailSub = res.data.data.planDetailDefault;
                        this.fomatArr();
						//改变可能诊断和已诊断的数据添加list数组，方便页面渲染
						this.$nextTick(()=>{
							//给开单合理性的list里面加一个固定的智能警示
							this.setZnData(this.form.planDetailSub[0].planDetails,'开单合理性')
							// 改数组里面的可能诊断和已有诊断
							this.updateDate(this.form.planDetailSub[0].planDetails,'maydiagnose')
							this.updateDate(this.form.planDetailSub[0].planDetails,'hasdiagnose')
							 //处理数量不显示 (备注：因为考虑到客户层面，需要前端特殊处理)
							this.delNumber(this.form.planDetailSub[0].planDetails)
							this.$forceUpdate()		  
						})
                    }
                });
            },
            // 相应数组排序
            groupSort(arr) {
                if (Array.isArray(arr)) {
                    for (let i = arr.length - 1; i > 0; i--) {
                        for (let j = 0; j < i; j++) {
                            if (arr[j].orderNo > arr[j + 1].orderNo) {
                                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
                            }
                        }
                    }
                    return arr;
                }
            },
            // 编辑获取默认数据
            async getPlanInfoIds(params) {
                try {
                    const res = await api.getPlanInfoIds(params);
                    if (res.data.code === "0") {
                        const obj = res.data.data[0];
                        const { data } = this.$route.params;
                        this.form = {
                            hospitalId: obj.hospitalId,
                            planName: obj.planName,
                            planCode: obj.planCode,
                            planStatus: obj.planStatus||1,
                            planDetailSub: obj.sysSetInfo,
                            id: data.id
                        };

                        const defaultRes = await api.getDefaultPlans();
                        if (defaultRes.data.code === "0") {
                            // 合并默认数据
                            this.mergeDefaultPlans(defaultRes.data.data.planDetailDefault);
							this.$nextTick(()=>{
								//给开单合理性的list里面加一个固定的智能警示
								this.setZnData(this.form.planDetailSub[0].planDetails,'开单合理性')
								// 改数组里面的可能诊断和已有诊断
								this.updateDate(this.form.planDetailSub[0].planDetails,'maydiagnose')
								this.updateDate(this.form.planDetailSub[0].planDetails,'hasdiagnose')
								//处理数量不显示
								this.delNumber(this.form.planDetailSub[0].planDetails)
								this.$forceUpdate()			  
							})
                        }
                    }
                } catch (err) {
                    console.error("err", err);
                }
            },
            // 合并默认数据
            mergeDefaultPlans(data) {
                if (!this.form.planDetailSub) {
                    this.form.planDetailSub = data;
                    return;
                }
                data.forEach((item) => {
                    const oneIndex = this.form.planDetailSub.findIndex(
                        (ite) => ite.name === item.name
                    );
                    // 第一层数据不存在的话，直接加入进去

                    if (oneIndex === -1) {
                        item.status = 0;
                        this.form.planDetailSub.push(item);
                    } else if (!this.form.planDetailSub[oneIndex].planDetails) {
                        this.form.planDetailSub[oneIndex].planDetails = item.planDetails;
                    } else {
                        // 第一层数据存在，验证第二层
                        item.planDetails &&
                        item.planDetails.forEach((child) => {
                            const twoArr = this.form.planDetailSub[oneIndex].planDetails;
                            const childIndex = twoArr
                                ? twoArr.findIndex((it) => it.name === child.name)
                                : null;
                            // 第二层数据不存在，直接添加进去
                            if (childIndex && childIndex === -1) {
                                child.status = 0;
                                this.form.planDetailSub[oneIndex].planDetails.push(child);
                            }
                        });
                    }
                });
                // 排序
                const newData = this.groupSort(this.form.planDetailSub);
                newData.forEach((sun) => {
                    if (sun.planDetails) {
                        this.groupSort(sun.planDetails);
                    }
                });
                this.fomatArr();
            },
			// 修改请求数据中的可能诊断和已诊断的数据模式
			updateDate(array,name){
				array.forEach(item=>{
					if(item.code===name){
						this.$set(item,'list',[])
						if(Array.isArray(item.planDetails)){
							item.planDetails.forEach((items)=>{
								item.list.push(items)
							})
						}
						let itemCopy=JSON.parse(JSON.stringify(item))
						delete itemCopy.planDetails
						item.list.unshift(itemCopy)
					}
				})
			},
			// 修改params里面的可能诊断和已诊断数据
			updateDateParam(arrayCopy,name){
				let dataList=[]
				arrayCopy.planDetailSub[0].planDetails.forEach((item)=>{
					if(item.code===name){
						dataList=item.list
					}
				})
				return dataList
			}, 
        },

        created() {
            const { isEdit, data } = this.$route.params;
            if (isEdit) {
                // 编辑页面
                this.isEdit = true;

                let params = {
                    hospitalId: data.hospitalId,
                    id: data.id
                };
                this.getPlanInfoIds(params);
            } else {
                // 新增页面
                this.getDefaultPlans(); // 获取默认配置信息
            }
        }
    };
</script>