cdssHospital/src/components/icss/AddMedicinePrompt.vue

<template>
  <el-scrollbar style="height: 100%" ref="elscrollbar" id="message-container">
    <div class="NoiseTemplateWrapper TemplateWrapper knowledgeWrapper">
      <crumbs
        :title="'医学术语静态知识维护-'+title"
        class="topBack"
        :param="$route.params"
        linkTo="MedicinePrompt"
      ></crumbs>
      <div class="info-container">
        <el-form :rules="rules" :model="form" label-width="160px" ref="groups">
          <el-form-item v-if="!isEdit" label="选择标准术语：" prop="selectedTerm">
            <el-select
              v-model="form.selectedTerm"
              filterable
              remote
              clearable
              :loading="showDrop"
              loading-text="加载中..."
              @change="changeWord"
              @visible-change="handleVisible"
              value-key="id"
              @clear="handleClear"
              ref="termName"
              placeholder="搜索"
              :remote-method="searchTerms"
            >
              <el-option
                v-for="(term,idx) in terms"
                :key="idx"
                :label="term.name+(term.typeName?'('+term.typeName+')':'')"
                :value="term"
                :title="term.name+(term.typeName?'('+term.typeName+')':'')"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="已选择标准术语：" label-width="160px">{{form.selectedTermName}}</el-form-item>
          <el-form-item
            v-if="form.selectedTerm&&(form.typeId==1||form.typeId==3||form.typeId==4||form.typeId==5||form.typeId==6)"
            :label="titleChange"
            prop="titleChange"
            label-width="160px"
          >
            <el-input v-model="form.titleChange"></el-input>
          </el-form-item>
          <p class="line"></p>
          <InfoParagraph
            v-for="(f,i) in form.prags"
            v-if="!upload"
            :key="(i+1)*10000 + showType"
            :data="f"
            :index="i"
            :total="form.prags.length"
            :isEdit="isEdit"
            ref="subForm"
            @add="addParagraph(i)"
            @del="delParagraph"
            @reOrder="reOrder"
            :showType="showType"
          ></InfoParagraph>
          <el-form-item v-if="upload" label="标题名称：" prop="fileTitle" label-width="160px">
            <el-input v-model="form.fileTitle"></el-input>
          </el-form-item>
          <el-form-item
            v-if="upload"
            label="上传文件："
            ref="upload"
            prop="fileList"
            label-width="160px"
          >
            <el-upload
              @mouseenter.native="handleMouseenter"
              @mouseleave.native="handleMouseleave"
              class="upload-demo"
              :action="config.urls.promptServer"
              name="upfile"
              :multiple="false"
              :limit="1"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-upload="handleBeforeUpLoad"
              :before-remove="beforeRemove"
              :on-change="handleChange"
              :on-success="handleSuccess"
              :show-file-list="showFileList"
              :file-list="form.fileList"
            >
              <el-button size="small" type="primary" v-if="showUpLoad">点击上传</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
            <span class="tipInfo" v-show="isShowTip">{{form.fileList[0]&&form.fileList[0].name}}</span>
            <!-- <el-button size="small" type="primary" >点击上传</el-button> -->
          </el-form-item>
          <el-form-item label-width="160px">
            <div class="uploadInfo" v-if="isSuccessUpload===1">文件上传中，请稍等...</div>
          </el-form-item>
        </el-form>
        <div class="btn">
          <el-button type="primary" :disabled="saveDisable" @click="submitForm">确 定</el-button>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
/**
 *
 */
import api from '@api/icss.js';
import InfoParagraph from './MedicineInfoPg';
import config from '@api/config';

export default {
  name: 'AddMedicinePrompt',
  components: {
    InfoParagraph
  },
  data() {
    return {
      isFixedTop: true,
      isEdit: false,
      isCopy: false,
      title: '添加',
      termTypes: [],
      terms: [], //术语列表
      form: {
        conceptId: '', //术语id
        isTip: 0, //是否要覆盖,0不覆盖，1覆盖
        selectedTerm: '', //术语标签
        termType: '',
        typeId: '',
        selectedTermName: '',
        selectedTermType: '',
        // titleChange: '',
        fileList: [],
        name: '',
        prags: [
          {
            //单个段落相关
            title: '',
            content: '',
            isReason: 0,
            orderNo: 0,
            position: [],
            text: ''
          }
        ],
        fileTitle: '',
        titleChange: ''
      },
      rules: {
        selectedTerm: [
          { required: true, message: '请选择术语标签', trigger: 'change' }
        ],
        fileTitle: [
          { required: true, message: '请输入标题名称', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if (value.length > 30) {
                callback(new Error('标题名称不能超过30字'));
              } else {
                callback();
              }
            },
            trigger: 'change'
          }
        ],
        fileList: [
          { required: true, message: '请上传文件', trigger: 'change' }
        ],
        titleChange: [{ max: 30, message: '标题最多30字', trigger: 'change' }]
      },
      saveDisable: false, //保存按钮禁止点击
      showDrop: false, //下拉框显示文字bug1774
      config: config,
      showUpLoad: true,
      showFileList: false,
      upload: false,
      showConfirm: true,
      isSuccessUpload: 0, //是否上传成功  0: 不在上传  1: 上传过程中  2: 上传成功
      isShowTip: false,
      showType: -1, // 1 诊断  2  药品   3检验套餐 4检验细项  5检查  6检查子 7手术和操作 8量表 9护理
      editCount: -1, // 页面会否被编辑 >0被编辑   =0 未编辑
      startCount: -1,
      isSaveSuccess: false // 是否保存成功
    };
  },
  watch: {
    showType: {
      handler(newVal, oldVal) {
        // console.log('newVal============', newVal, 'oldVal============', oldVal);
        if (newVal !== oldVal) {
          this.form.prags = this.form.prags.map(item => {
            return { ...item, position: [] };
          });
        }
      }
    },
    form: {
      handler(newName, oldName) {
        this.editCount++;
      },
      deep: true,
      immediate: true
    }
  },
  created: function() {
    const { isEdit, data, isCopy } = this.$route.params;   
    console.log('静态数据？？？',data)
    if (isEdit || isCopy) {
      this.showType = data.type; // 编辑页确认显示类型
      this.isEdit = isEdit;
      this.isCopy = isCopy;
      this.title = isEdit ? '修改' : isCopy ? '复制' : '添加';
      isEdit && this.changeWord(data);
      api
        .getTremList({ id: data.id })
        .then(res => {
          if (res.data.code == '0') {
            const data = res.data.data;
            if (this.form.typeId === 82 || this.form.typeId === 83) {
              // console.log('data',data)
              this.form.fileList =
                data &&
                data.map(it => {
                  return JSON.parse(it.content);
                });
              this.showFileList = true;
              this.showUpLoad = false;
            } else {
              this.conceptId = data.id;
              this.form.typeId = data.type;
              this.form.name = data.name;
              this.form.titleChange =
                data.type == 1
                  ? data.clinicalPathwayName
                  : data.type == 3 || data.type == 4 || data.type == 5||  data.type == 6
                  ? data.noticeName
                  : '';
              this.form.selectedTermName =
                data.name + (data.typeName ? '(' + data.typeName + ')' : '');
              this.form.selectedTerm =
                data.name + (data.typeName ? '(' + data.typeName + ')' : '');
              if(data &&data.details&&data.details.length===0){   //量表有评估内容没有静态知识的情况
                  this.form.prags =[
                      {
                          title: '',
                          content: '',
                          isReason: 0,
                          orderNo: 0,
                          position: [],
                          text: ''
                      }
                  ];
                  return;
              }
              this.form.prags =
                data &&
                data.details.map(it => {
                  return {
                    title: it.title,
                    position: (it.contentType||'').split(","),
                    content: it.content && it.content.replace(
                      /{imageUrlPrefix}/g,
                      config.imgHost
                    ),
                    // isReason:it.isReason,
                    text: it.text,
                    disabled: true
                  };
                });
            }
          }
        })
        .catch(error => {
          if (error.code === '900010001') {
            return false;
          }
          console.log(error);
        });
    }
    setTimeout(() => {
      this.startCount = this.editCount;
    }, 500);
  },
  mounted() {},
  beforeRouteLeave(to, from, next) {
    // if (this.isSuccessUpload === 1) {
    //   this.$confirm('文件正在上传，是否确定返回？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     cancelButtonClass: 'cancel',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       next();
    //     })
    //     .catch(() => {});
    //   //  this.warning('还有未保存的文件，是否确定返回？');
    // } else if (this.isSuccessUpload === 2) {
    //   this.$confirm('还有未保存的文件，是否确定返回？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     cancelButtonClass: 'cancel',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       next();
    //     })
    //     .catch(() => {});
    // } else {
    //   next();
    // }

    if (this.startCount !== this.editCount && !this.isSaveSuccess) {
      this.$confirm('还有未保存的内容,确定要退出当前页面吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'leaveBtn',
        customClass: 'leaveBox',
        type: 'warning'
      })
        .then(() => {
          next();
        })
        .catch(() => {});
    } else {
      next();
    }
  },
  methods: {
    handleClear() {
      this.form.selectedTermName = '';
      this.form.selectedTerm = '';
      this.form.titleChange = '';
      // console.log('处理清空的操作');
    },

    handleMouseenter() {
      if (this.form.fileList.length !== 0) {
        this.isShowTip = true;
      }
    },
    handleMouseleave() {
      this.isShowTip = false;
    },
    changeWord(newVal) {
      this.showType = newVal.type || -1;
      const name = newVal.name;
      const typeName = newVal.typeName;
      const type = newVal.type;
      this.form.selectedTermName = name + (typeName ? '(' + typeName + ')' : '');
      // this.form.selectedTerm = name + (typeName ? '(' + typeName + ')' : '');
      this.form.name = name;
      this.form.fileList = [];
      this.showFileList = false;
      this.form.typeId = type || '';
      this.showUpLoad = true;
      this.titleChange =
        type == 1
          ? '临床路径标题：'
          : type == 3 || type == 4 || type == 5 || type == 6
          ? '注意事项标题：'
          : '';
      this.form.fileTitle = '';
      if (newVal.typeId === 82 || newVal.typeId === 83) {
        this.upload = true;
        this.form.fileTitle = newVal.title;
      } else {
        this.upload = false;
      }
    },
    handleVisible(flag) {
      if (!flag) {
        this.terms = [];
      }
    },
    reOrder(isUp, i) {
      // isUp: 1 上升    0 下降
      let div = this.$refs['elscrollbar'].$refs['wrap'];
      let temp = {},
        it = {};
      if (isUp === 1) {
        if (i === 0) {
          this.warning('已经是第一个，不能再升啦！');
          return;
        }
        temp = Object.assign(this.form.prags[i - 1]);
        it = Object.assign(this.form.prags[i]);
        this.form.prags.splice(i - 1, 2, it, temp);
        this.$nextTick(() => {
          div.scrollTop = this.$refs.subForm[i - 1].$el.offsetTop - 48;
        });
      } else {
        if (i === this.form.prags.length - 1) {
          this.warning('已经是最后一个，不能再降啦！');
          return;
        }
        temp = Object.assign(this.form.prags[i + 1]);
        it = Object.assign(this.form.prags[i]);
        this.form.prags.splice(i, 2, temp, it);
      }
    },
    // 添加段落
    addParagraph(i) {
      this.form.prags.splice(i + 1, 0, {
        title: '',
        content: '',
        isReason: 0,
        position: [],
        text: ''
      });
      //添加段落光标自动落到新增的段落中
      setTimeout(() => {
        this.$refs.subForm[i + 1].$el
          .getElementsByClassName('el-input__inner')[0]
          .focus();
      });
    },
    delParagraph(i) {
      if (this.form.prags.length == 1) {
        this.warning('只剩一个段落，不能再删啦！');
        return;
      }
      this.showConfirmDialog('确定要删除该段落？', () => {
        this.form.prags.splice(i, 1);
      });
    },
    back() {
      this.$router.go(-1);
    },
    searchTerms(query) {
      if (!query.trim()) {
        this.form.terms = [];
        return;
      }
      //搜索术语列表
      this.showDrop = true;
      api.getAllConcept({ inputStr: query.trim(), types: [0] }).then(res => {
        this.showDrop = false;
        if (res.data.code === '0') {
          this.terms = res.data.data;
        } else {
          this.warning('数据获取失败');
        }
      });
    },
    mapStringToNum(str) {
      return str.split(',').map(it => {
        return +it;
      });
    },

    // 额外的表单检验
    formVal() {
      let positiontemp = this.form.prags.map(item => {
        return [...item.position];
      });
      let positionArr = positiontemp.reduce(function(a, b) {
        return a.concat(b);
      }); // 所有被选中的值集合
      // console.log(positionArr, 'positionArr');
      // console.log(this.showType, '当前页的显示类型');
      let isVisFlag = positionArr.some(item => item === 2);
      let isDiagFlag = positionArr.some(item => item === 3);
      // console.log(isVisFlag, 'isVisFlag');
      if (
        (this.showType == 3 || this.showType == 4 || this.showType == 5|| this.showType == 6) &&
        isVisFlag
      ) {
        //若医学术语为检验/检查，且内容类型选择了注意事项，此时“注意事项标题”是必填项
        this.$refs.groups.clearValidate();
        this.rules.titleChange.push({
          required: true,
          message: '请输入注意事项标题',
          trigger: 'change'
        });
        this.$refs.groups.validateField('titleChange');
        this.rules.titleChange = this.rules.titleChange.slice(0, 1);
        if (this.form.titleChange.trim() !== '') {
          // console.log('内容不为空');
          return true;
        } else {
          var div = this.$refs['elscrollbar'].$refs['wrap'];
          this.$nextTick(() => {
            div.scrollTop = 0;
          });
          return false;
        }
        // return;
      } else if (isDiagFlag && this.showType == 1) {
        // 若医学术语为诊断，且内容类型选择了临床路径，此时“临床路径标题”是必填项
        this.$refs.groups.clearValidate();
        this.rules.titleChange.push({
          required: true,
          message: '请输入临床路径标题',
          trigger: 'change'
        });
        this.$refs.groups.validateField('titleChange');
        this.rules.titleChange = this.rules.titleChange.slice(0, 1);

        if (this.form.titleChange.trim() !== '') {
          // console.log('内容不为空');
          return true;
        } else {
          var div = this.$refs['elscrollbar'].$refs['wrap'];
          this.$nextTick(() => {
            div.scrollTop = 0;
          });
          return false;
        }
      }
    },

    submitForm() {
      if (this.isSuccessUpload === 1) {
        this.warning('文件上传中，请稍等');
        return;
      }
      let flagVal = this.formVal(); // 额外的表单校验
      if (flagVal === false) return;
      //验证外层表单
      let goOn = true,
        it = null;
      let outIsVia = true; // 外层验证是否通过
      this.$refs.groups.validate(valid => {
        if (!valid) {
          goOn = false;
          outIsVia = false;
          return false;
        }
      });
      //验证段落表单
      let viewHeight = 0; // 定位到表单校验的高度
      let viewHeightArr = []; // 表单校验出错高度的所有数组
      if (this.form.typeId !== 82 && this.form.typeId !== 83) {
        for (let i = 0; i < this.$refs.subForm.length; i++) {
          it = this.$refs.subForm[i];
          viewHeight += it.$el.offsetHeight;
          it.$refs.form.validate(valid => {
            if (!valid) {
              goOn = false;
              viewHeightArr.push(viewHeight);
            }
          });
        }
      }
      // console.log(viewHeightArr,'viewHeightArr');
      if (!goOn) {
        var div = this.$refs['elscrollbar'].$refs['wrap'];
        if (outIsVia) {
          // 外层校验通过,跳转至下层校验具体位置
          this.$nextTick(() => {
            div.scrollTop = +viewHeightArr[0] - 150;
          });
        } else {
          // 外层校验没通过,页面滚动到顶部
          this.$nextTick(() => {
            div.scrollTop = 0;
          });
        }
        return;
      }
      //通过必填验证，提交保存
      const item = this.form.prags;
      let param = [];
      if (this.form.typeId === 82 || this.form.typeId === 83) {
        if (this.form.fileList.length === 0) {
          this.warning('文件未上传，不存储数据');
          return;
        }
        param.push(
          Object.assign(
            {},
            {
              position: this.form.typeId === 82 ? '8' : '9',
              conceptId: this.form.conceptId,
              title: this.form.fileTitle,
              orderNo: 0,
              content: JSON.stringify(this.form.fileList[0])
            }
          )
        );
      } else {
        let data = this.form.prags,
          tempArr = [],
          paramsAll = {},
          types = this.form.typeId;
        for (let i = 0; i < data.length; i++) {
          let obj = {};
          obj.content = data[i].content;
          obj.text = data[i].text;
          obj.conceptId = data[i].conceptId;
          obj.orderNo = i;
          obj.title = data[i].title;
          obj.contentType = data[i].position.join(',');
          tempArr.push(obj);
        }
        paramsAll.clinicalPathwayName = types == 1 ? this.form.titleChange : '';
        paramsAll.id = this.conceptId;
        paramsAll.name = this.form.name;
        paramsAll.noticeName = types == 3 || types == 4 || types == 5 || types == 6 ? this.form.titleChange : '';
        paramsAll.type = this.form.typeId;
        paramsAll.details = tempArr;
        param = paramsAll;
      }
      // this.showSaveDialog(param,'是否'+(this.isEdit?'修改':'保存')+'该静态知识？');

      if (!this.isEdit) {
        // 新增页面
        this.saveDisable = true;
        this.sendSaveOrEdit(param);
        return;
      }
      this.showSaveDialog(
        param,
        '<div><p style="color: #333333">确定保存修改内容?</p><p style="color: #D70A25">保存后将覆盖原有数据,且原有数据无法恢复。</p></div>'
      );
    },
    showSaveDialog(param, msg) {
      this.showConfirmDialog(msg, () => {
        this.saveDisable = true; //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
        this.sendSaveOrEdit(param);
      });
    },

    //保存编辑 接口
    sendSaveOrEdit(param) {
      api
        .saveTermPrompts(param)
        .then(res => {
          if (res.data.code === '0') {
            this.isSuccessUpload = 0; // 修改文件上传状态为0
            this.warning(res.data.msg || '保存成功', 'success');
            this.isSaveSuccess = true; // 保存成功,可正常退出
            //返回带搜索条件的首页
            this.$router.push({
              name: 'MedicinePrompt',
              params: Object.assign({}, this.$route.params, {
                currentPage: 1
              })
            });
          } else {
            this.warning(res.data.msg);
          }
          this.saveDisable = false;
        })
        .catch(err => {
          if (err.code === '900010001') {
            return false;
          }
          this.saveDisable = false;
          this.warning(err);
        });
    },

    // 弹出窗
    showConfirmDialog(msg, resolve) {
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'cancel',
        confirmButtonClass: 'confirmBtn',
        dangerouslyUseHTMLString: true,
        type: 'warning'
      })
        .then(() => {
          resolve();
        })
        .catch(() => {});
    },
    warning(msg, type) {
      this.$message({
        showClose: true,
        message: msg,
        type: type || 'warning',
        duration:1000
      });
    },
    handleChange(file, fileList) {
      // if(fileList&&fileList[0]&&fileList[0].response&&fileList[0].response.code==='0'){
      //   this.showUpLoad = false
      //   this.showFileList = true
      // }else{
      //    this.showUpLoad = true
      //    this.showFileList = false
      // }
      // console.log(fileList,this.form.fileList,'aa')
    },
    handleSuccess(response, file, fileList) {
      if (response.code == '0') {
        this.showFileList = true;
        this.form.fileList = [];
        this.form.fileList.push({
          name: response.data.title,
          url: response.data.url,
          size: response.data.size
        });
        this.showUpLoad = false;
        if (!this.form.fileTitle) {
          this.form.fileTitle = response.data.title;
        }
        this.isSuccessUpload = 2; // 上传成功状态
        this.$refs.upload && this.$refs.upload.clearValidate(); // 清除校验
      } else {
        this.warning(response.msg || '上传失败');
        // this.form.fileList = []
        this.showUpLoad = true;
        this.showFileList = false;
        this.form.fileList = [];
      }
    },
    handleRemove(file, fileList) {
      this.showUpLoad = true;
      this.form.fileList = [];
      this.isSuccessUpload = 0;
    },
    handleBeforeUpLoad(file) {
      // 上传过程中   上传按钮 隐藏
      this.isSuccessUpload = 1; // 上传过程中
      this.showFileList = true; // 新增 进度条  显示
      this.$refs.upload && this.$refs.upload.clearValidate(); // 清除校验

      this.showUpLoad = false;
      if (file.size / 1024 / 1024 >= 500) {
        this.warning('文件上传失败，超出大小限制500MB');
        this.form.fileList = [];
        this.showConfirm = false;
        return false;
      } else {
        this.showConfirm = true;
      }
    },
    handlePreview(file) {},
    beforeRemove(file, fileList) {
      if (this.showConfirm) {
        return this.$confirm(`确定移除 ${file.name}？`, '', {
          cancelButtonClass: 'cacelBtn'
        });
      }
    }
  }
};
</script>
<style lang="less">
@import '../../less/common.less';
.cell .el-button.delete:focus {
  color: red !important;
}

.topBack {
  top: 0;
}
.info-container {
  background: #fff;
  padding: 20px;
  margin: 70px 20px -20px 20px;
  .el-input__inner {
    width: 200px;
  }
  .el-form-item__label {
    text-align: left;
  }
  .add-prg .el-form-item {
    margin-bottom: 20px;
  }
  .el-form-item {
    margin-bottom: 8px !important;
  }
}
// .cancel span {
//   color: #22ccc8;
// }
.line {
  border-top: 1px #dcdfe6 solid;
  margin-bottom: 25px;
  margin-top: 25px;
}
.NoiseTemplateWrapper .info-container .el-input__inner {
  width: 250px;
}
// .NoiseTemplateWrapper .el-select .el-input .el-icon-circle-close{
//     display: inherit!important;
// }
.cacelBtn {
  color: #22ccc8 !important;
}
.upload-demo {
  width: 300px;
  /deep/.el-upload-list__item .el-icon-close-tip {
    display: none !important;
  }

  /deep/.el-upload-list__item .el-upload-list__item-name {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /deep/ .focusing {
    // border: 1px solid transparent !important;
    outline: transparent !important;
  }
}
.uploadInfo {
  margin-top: -20px;
  color: #606266;
}
.tipInfo {
  position: absolute;
  // position: relative;
  line-height: 24px;
  top: -56px;
  left: 20px;
  // background-color: transparent;
  // color: #606266;
  padding: 3px 10px;
  border-radius: 4px;
  margin: 100px auto;
  background-color: #4d4d4d;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
.tipInfo:before {
  content: '';
  display: block;
  position: absolute;
  // bottom: 9px;
  top: -10px;
  left: 18px;
  border-bottom: 6px solid #4d4d4d;
  border-top: 6px solid transparent;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  // border-right: 6px solid #4D4D4D;
}
.btn {
  text-align: right;
  padding-right: 20px;
}
.el-message-box {
  /deep/ .el-icon-warning {
    background-color: transparent !important;
    // display: none;
  }
  /deep/ .el-message-box__message {
    margin: 24px 0px;
  }
  // /deep/ .confirmBtn {
  //   // position: relative;
  //   // right: 240px !important;
  //   // top: 0px;
  //   background-color: #fff !important;
  //   span {
  //     color: #48c5d7 !important;
  //   }
  // }
  /deep/ .cancel {
    background-color: #d7d7d7;
    border-color: transparent !important;
    span {
      color: #fff;
    }
  }
}
</style>