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

<template>
  <div class="AddPlanWrapper clearfix" @click="close">
    <crumbs title="电子病历方案配置-添加方案" class="topBack" :param="$route.params" linkTo="Plan"></crumbs>
    <div class="AddPlanBox">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="方案名称" prop="planName">
          <el-input v-model="form.planName"></el-input>
        </el-form-item>
        <el-form-item label="方案编码" prop="planCode">
          <el-input v-model="form.planCode"></el-input>
        </el-form-item>
        <el-form-item label="方案配置">
          <ul>
            <li>
              <div class="title">
                <h4>辅助信息</h4>
                <div class="titlwSwitch">
                  <el-switch
                    v-model="switchSubStatus"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#4BC4D7"
                    inactive-color="#BBBBBB"
                  ></el-switch>
                  <span class="titlwSwitchStatus">{{switchSubStatus === 1 ? '启用中' : '未启用'}}</span>
                </div>
              </div>
              <ul class="sub" v-for="(item,index) in  planDefaultList" :key="item.id">
                <li class="planItem">
                  <div class="sort">
                    <div
                      class="down"
                      @click="sortPlan('down')"
                      v-if="index !== planDefaultList.length - 1"
                    >下</div>
                    <div class="top" @click="sortPlan('top')" v-if="index !== 0">上</div>
                  </div>
                  <div class="openOrClose">
                    <span class="planInfo">{{item.name}}</span>
                    <div class="switch">
                      <el-switch
                        v-model="item.status"
                        :active-value="1"
                        :inactive-value="0"
                        active-color="#4BC4D7"
                        inactive-color="#BBBBBB"
                      ></el-switch>
                    </div>
                    <span class="planStatus">{{item.status === 1 ? '启用中' : '未启用'}}</span>
                  </div>
                  <div class="showNum" v-if="item.number">
                    <span style="marginRight:8px;">默认显示个数</span>
                    <el-select v-model="item.number" placeholder="请选择" size="small">
                      <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>
                </li>
              </ul>
            </li>
            <li>
              <div class="title">
                <h4>医学知识</h4>
                <div class="titlwSwitch">
                  <el-switch
                    v-model="switchMedStatus"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#4BC4D7"
                    inactive-color="#BBBBBB"
                  ></el-switch>
                  <span class="titlwSwitchStatus">{{switchMedStatus === 1 ? '启用中' : '未启用'}}</span>
                </div>
              </div>
            </li>
          </ul>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :disabled="saveDisable">确定添加</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import api from '@api/icss.js';

export default {
  name: 'AddPlan',
  data() {
    return {
      form: {
        planName: '',
        planCode: ''
      },
      saveDisable: false, //保存按钮禁止点击
      rules: {
        planName: [
          { required: true, message: '方案名称不能为空', trigger: 'change' }
        ],
        planCode: [
          { required: true, message: '方案编码不能为空', trigger: 'change' }
        ]
      },
      planDefaultList: [],
      hospitalId: '',
      isEdit: false, // 是否处于编辑页面 false--新增   true--编辑
      switchSubStatus: 0, // 辅助信息
      switchMedStatus: 0 // 医学知识
    };
  },
  async created() {
    const { isEdit, data } = this.$route.params;
    // console.log(data, '编辑页传递的data');
    let res = await api.getHospitalInfo(); // 同步获取医院信息
    this.hospitalId = res.data.data.id;
    if (isEdit) {
      // 编辑页面
      this.isEdit = true;
      let params = {
        hospitalId: res.data.data.id,
        id: data.id
      };
      this._getPlanInfoIds(params);
    } else {
      // 新增页面
      this._getDefaultPlans(); // 获取默认配置信息
    }
  },
  methods: {
    close() {},
    // 方案配置排序
    sortPlan(type) {
      console.log('排序', type);
    },

    // 获取默认方案配置
    _getDefaultPlans() {
      api.getDefaultPlans().then(res => {
        // console.log(res, '获取默认的方案配置');
        if (res.data.code === '0') {
          this.planDefaultList =
            res.data.data &&
            res.data.data.planDetailDefault &&
            res.data.data.planDetailDefault[0].planDetails;
          this.switchSubStatus =
            res.data.data &&
            res.data.data.planDetailDefault &&
            res.data.data.planDetailDefault[0].status;
          this.switchMedStatus =
            res.data.data &&
            res.data.data.planDetailDefault &&
            res.data.data.planDetailDefault[1].status;
        }
      });
    },

    // 编辑页面 根据id获取方案配置
    _getPlanInfoIds(params) {
      api.getPlanInfoIds(params).then(res => {
        if (res.data.code === '0') {
          this.planDefaultList = res.data.data[0].sysSetInfo[0].planDetails;
          this.form.planName = res.data.data[0].planName;
          this.form.planCode = res.data.data[0].planCode;
          this.switchSubStatus = res.data.data[0].sysSetInfo[0].status;
          this.switchMedStatus = res.data.data[0].sysSetInfo[1].status;
        }
      });
    },

    // format处理细项数据
    handleSendData() {
      let TempPlanDetail = [];
      TempPlanDetail = this.planDefaultList.map((item, index) => {
        return {
          code: item.code,
          hospitalId: this.hospitalId,
          name: item.name,
          number: item.number,
          orderNo: item.orderNo,
          planId: item.planId,
          remark: item.remark,
          status: item.status,
          value: item.value
        };
      });
      return TempPlanDetail;
      // console.log(TempPlanDetail, 'TempPlanDetail');
    },

    // 处理保存活动信息参数
    _getParams() {
      let params = {
        hospitalId: this.hospitalId,
        planCode: this.form.planCode,
        planDetailParent: [
          {
            code: 'auxiliary',
            hospitalId: this.hospitalId,
            name: '辅助信息',
            number: 0,
            orderNo: 1,
            planDetailSub: this.handleSendData(),
            status: this.switchSubStatus,
          },
          {
            code: 'medical',
            hospitalId: this.hospitalId,
            name: '医学知识',
            orderNo: 3,
            planDetailSub: [{}],
            status: this.switchMedStatus,
          }
        ], // 方案配置信息
        planName: this.form.planName,
        planStatus: 1,
      };
      if (this.isEdit){
        // 编辑状态,需要额外添加ID 
        const {  data } = this.$route.params;
        params = {...params,id: data.id}
      }
      return params;
    },

    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.saveDisable = true
          let params = this._getParams();
          api.savePlanInfoDatas(params).then(res => {
            if (res.data.code === '0') {
              this.$message({
                showClose: true,
                message: '操作成功',
                type: 'success'
              });
            } else if (res.data.code === '00020007') {
              // 方案名/方案编码已存在
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: 'error'
              });
            }
            this.saveDisable = false
          });
        } else {
          this.saveDisable = false
          return false;

        }
      });
    }
  }
};
</script>
<style lang="less">
.AddPlanWrapper {
  min-width: 940px;
  .AddPlanBox {
    padding: 20px 60px 120px 60px;
    margin: 70px 20px 0 20px;
    background: #fff;
  }
  color: #606266;
  .topBack {
    top: 0;
  }
  .title {
    background-color: #f2f2f2;
    display: flex;
    .titlwSwitch {
      width: 120px;
    }
    h4 {
      flex: 1;
    }
    .titlwSwitchStatus{
      margin-left: 16px;
    }
  }
  .sub {
    .planItem {
      display: flex;
      .sort {
        width: 60px;
        display: flex;
        .top {
          width: 30px;
          cursor: pointer;
        }
        .down {
          width: 30px;
          cursor: pointer;
        }
      }
      .openOrClose {
        display: flex;
        flex: 1;
        .planInfo {
          width: 140px;
        }
        .switch {
        }
        .planStatus {
          margin-left: 16px;
        }
      }
      .showNum {
        display: flex;
        width: 320px;
        /deep/.el-input--small {
          width: 60px;
        }
      }
    }
  }
  .el-button {
    float: right;
  }
}
</style>