PC-application/component/guidance/person-edit-panel.js

var PersonEditPanel = {
  template:
    '<div>\
    			<div style="height: 34px;" >\
		    		指导模板\
		    		<div class="save-btn ml10" @click="save" v-show="sendMode">\
		    		保存\
		    		</div>\
		    		<div class="delete-btn ml10" @click="deleteTemplate" v-show="editable && !sendMode">\
		    		删除\
		    		</div>\
		    	</div>\
		    	<div class="temp-info c-f14">\
		    		<div class="temp-name pl10 ptb10">\
		    			模板名称：<input v-model="modelName" placeholder="请输入模板名称( 10字内 )" class="c-f14" maxlength="10"/>\
		    		</div>\
		    		<div class="c-position-r">\
		    			<textarea @input="countWord" v-model="content" class="ptb10 plr10" style="border: 0;width: 100%;box-sizing: border-box;height: 180px;"></textarea>\
		    			<div class="c-t-right mr10 mb5 c-909090">{{count}}/{{words}}</div>\
		    		</div>\
		    	</div>\
		    	<div class="img-wrap mt20 c-f14">\
	    			<div>插入图片<span class="c-909090">（{{imgs.length}}/9）</span></div>\
	    			<div class="clearfix">\
	    				<div class="c-position-r fl mr15 mt20" v-for="(url,i) in imgs">\
				            <img class="upload_img" :src="url" width="65" height="65">\
				            <div class="delete-icon" @click="removeImg(url,i)"><img src="../../../images/delete_icon.png" width="18"></div>\
			            </div>\
	    				<img-upload @uploaded="imgUploaded" v-show="imgs.length<9"></img-upload>\
            		</div>\
	    		</div>\
	    		<div class="foot-btns" >\
	    			<a class="preview-btn c-t-center mr15" @click="preview" v-show="editable || sendMode">\
		    			预览\
		    		</a>\
		    		<a class="send-btn c-t-center" @click="save" v-show="editable && !sendMode">\
		    			保存\
		    		</a>\
		    		<a class="send-btn c-t-center" @click="sendTemplate" v-show="sendMode">\
		    			发送\
		    		</a>\
		    	</div>\
    </div>',
  beforeRouteEnter: function (to, from, next) {
    next(function (vm) {
      var query = vm.$route.query
      vm.modelCode = query.modelCode
      console.log(storage.patient, query.patient, 'xxxxxxxxxxxxxxxxxxx')
      if (!storage.patient && !query.patient) {
        vm.sendMode = false
      } else {
        storage.patient = storage.patient || query.patient
        storage.planId = storage.planId || query.planId
        vm.sendMode = true
      }

      if (vm.modelCode && from.path != '/preview-panel') {
        vm.editable = true
        vm.listDetail()
      }
    })
  },
  props: [],
  data: function () {
    return {
      words: 1000,
      count: 0,
      content: '',
      modelName: '',
      imgs: [],
      modelCode: '',
      editable: true,
      sendMode: false // 根据url中是否携带patient来判断是否是"发送"模式
    }
  },
  mounted: function () {
    var vm = this
    EventBus.$emit('active-nav-tab', 0)
  },
  methods: {
    countWord: function () {
      if (this.content.length <= this.words) {
        this.count = this.content.length
      } else {
        this.content = this.content.slice(0, this.words)
      }
    },
    listDetail: function () {
      var vm = this
      guidanceAPI
        .listDetail({
          modelCode: vm.modelCode
        })
        .then(function (res) {
          var data = res.data
          if (data) {
            vm.content = data.content
            vm.modelName = data.modelName
            vm.imgs = _.map(data.imagesUrls, function (s) {
              return httpRequest.getImgUrl(s)
            })
          }
        })
    },
    imgUploaded: function (url) {
      var vm = this
      vm.imgs.push(httpRequest.getImgUrl(url))
    },
    removeImg: function (url, idx) {
      var vm = this
      vm.imgs.splice(idx, 1)
    },
    save: function () {
      var vm = this
      if (!vm.modelCode) {
        toastr && toastr.error('请选择模板')
        return
      }
      if (!vm.modelName) {
        toastr && toastr.error('模板名称不能为空')
        return
      }
      if (!vm.content) {
        toastr && toastr.error('模板内容不能为空')
        return
      }
      guidanceAPI
        .modifyTemplate({
          content: vm.content,
          modelName: vm.modelName,
          imagesUrl: vm.imgs.join(','),
          code: vm.modelCode
        })
        .then(function (res) {
          if (res.status == 200) {
            toastr && toastr.success('保存成功')
            EventBus.$emit('refresh-person-panel')
          }
        })
        .catch(function (e) {
          console.error(e)
        })
    },
    deleteTemplate: function () {
      var vm = this
      var d = dialog({
        width: 350,
        title: '删除模板',
        content: '删除后无法恢复,是否确认删除?',
        okValue: '确定',
        ok: function () {
          guidanceAPI
            .deleteTemplate({ code: vm.modelCode })
            .then(function (res) {
              toastr && toastr.success('删除成功')
              vm.editable = false
              EventBus.$emit('refresh-person-panel')
            })
            .catch(function (e) {
              console.error(e)
            })
        },
        cancelValue: '取消',
        cancel: function () {}
      })
      d.showModal()
    },
    sendTemplate: function () {
      var vm = this
      if (!vm.modelName) {
        toastr && toastr.error('模板名称不能为空')
        return
      }
      if (!vm.content) {
        toastr && toastr.error('模板内容不能为空')
        return
      }
      var d = dialog({
        width: 350,
        content: '发出后无法变更，是否确认发送给居民？',
        okValue: '继续发送',
        ok: function () {
          guidanceAPI
            .sendTemplate({
              patient: storage.patient,
              content: vm.content,
              modelCode: vm.modelCode,
              images: vm.imgs.join(',')
            })
            .then(function (res) {
              toastr && toastr.success('发送成功')

              var obj = {
                rehabilitationDetailId: storage.planId,
                patientCode: storage.patient,
                // patientName: patientName,
                doctorCode: storage.docInfo.code,
                doctorName: storage.docInfo.name,
                relationRecordType: 2, //健康指导
                relationRecordCode: res.data.id
              }
              guidanceAPI
                .saveRehabilitationOperateRecord({
                  dataJson: JSON.stringify(obj)
                })
                .then(function (res) {
                  if (res.status == 200) {
                    var index = parent.layer && parent.layer.getFrameIndex(window.name) //先得到当前iframe层的索引
                    parent.layer && parent.layer.close(index)
                  } else {
                    toastr && toastr.success(res.msg)
                  }
                })
            })
            .catch(function (e) {
              console.error(e)
            })
        },
        cancelValue: '取消',
        cancel: function () {}
      })
      d.showModal()
    },
    preview: function () {
      var vm = this

      var query = {
        modelCode: vm.modelCode,
        patient: storage.patient || '',
        timestemp: $.now()
      }
      this.$router.push({ path: '/preview-panel', query: query })
    }
  },
  watch: {
    '$route': function (to, from) {
      var vm = this
      var query = vm.$route.query
      if (query && query.modelCode && from.path == '/person-edit-panel' && to.path == '/person-edit-panel') {
        vm.modelCode = query.modelCode
        vm.editable = true
        vm.listDetail()
      }

      if (storage.patient) {
        vm.sendMode = true
      } else {
        vm.sendMode = false
      }

      if (to.path == '/preview-panel') {
        EventBus.$emit('preview-template', {
          content: vm.content,
          modelName: vm.modelName,
          imgs: vm.imgs
        })
      }
    },
    'content': function (v) {
      this.countWord()
    }
  }
}