epmet-work-pc-chengyang/src/views/modules/communityParty/heart/heartReview.vue

<template>
  <div>
    <div class="dialog-h-content scroll-h">

      <el-form ref="ref_form"
               :inline="true"
               :model="formData"
               class="div_form ">

        <el-form-item label="活动回顾"
                      prop="actContent"
                      label-width="150px">
          <!-- <div style="width:400px"> -->
          <Tinymce class="tinymce_view"
                   v-if="formType!='detail'"
                   v-model="formData.actContent"
                   :height="450"
                   style="width:1000px"
                   :customerId="customerId"
                   placeholder="在这里输入文字" />
          <p v-else
             class="text_p"
             v-html="formData.actContent"></p>
          <!-- </div> -->
        </el-form-item>
      </el-form>

    </div>
    <div class="div_btn">
      <el-button size="small"
                 @click="handleCancle">取 消</el-button>
      <el-button size="small"
                 v-if="formType != 'detail'"
                 type="primary"
                 :disabled="btnDisable"
                 @click="handleComfirm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'

import Tinymce from '@c/tinymce2/index.vue'

let loading // 加载动画


export default {
  data () {

    return {
      formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
      btnDisable: false,
      customerId: '',
      actId: '',

      formData: {
        actContent: '',
      },




    }
  },
  components: { Tinymce },
  mounted () {
    this.customerId = localStorage.getItem('customerId')

  },

  methods: {

    async initForm (type, actId) {
      this.$refs.ref_form.resetFields();
      this.startLoading()

      this.formType = type
      if (actId) {
        this.actId = actId
        this.formData.actId = actId


      }
      this.endLoading()
    },




    async handleComfirm () {
      console.log(this.formData)
      // this.btnDisable = true
      // setTimeout(() => {
      //   this.btnDisable = false
      // }, 10000)
      // this.$refs['ref_form'].validate((valid, messageObj) => {
      //   if (!valid) {
      //     app.util.validateRule(messageObj)
      //     this.btnDisable = false
      //   } else {
      //     this.addRecord()
      //   }

      // })

    },
    async addRecord () {
      this.formData.actContent = this.dormatHtml(this.formData.actContent)

      let url = "/gov/org/placepatrolrecord/add"
      // let url = "http://yapi.elinkservice.cn/mock/245/gov/org/placepatrolrecord/add"
      this.formData.inspectors = this.formData.inspectorArray.join(',')

      const { data, code, msg } = await requestPost(url, this.formData)

      if (code === 0) {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.resetData()
        this.$emit('dialogOk')
        this.btnDisable = false
      } else {
        this.btnDisable = false
        this.$message.error(msg)
      }

    },

    dormatHtml (content) {
      let c = ''
      if (content.indexOf('DOCTYPE') != -1) {
        c = content.slice(45, -16);
      }
      console.log('content', typeof content)
      return c || content
    },




    handleCancle () {

      this.resetData()
      this.$emit('dialogCancle')

    },

    resetData () {
      this.formData = {
        actContent: '',
      }
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {
    dataRule () {
      return {

        gridId: [
          { required: true, message: '场所网格不能为空', trigger: 'blur' }
        ],
        ninePlaceVal: [
          { required: true, message: '场所类型不能为空', trigger: 'blur' },
        ],
        placeOrgId: [
          { required: true, message: '场所名称不能为空', trigger: 'blur' }
        ],
        placePatrolTeamId: [
          { required: true, message: '分队不能为空', trigger: 'blur' }
        ],

        inspectorArray: [
          { required: true, message: '巡检人员不能为空', trigger: 'blur' }
        ],
        firstTime: [
          { required: true, message: '首次巡查时间不能为空', trigger: 'blur' }
        ],
        detailed: [
          { required: true, message: '隐患明细不能为空', trigger: 'blur' }
        ],
        firstResult: [
          { required: true, message: '首次巡查结果不能为空', trigger: 'blur' }
        ]
      }
    },

  },
  props: {


  }
}
</script>

<style lang="scss" scoped >
@import "@/assets/scss/modules/management/form-main.scss";

.avatar-uploader {
  margin: 0 0 0 20px;
}
</style>

<style lang="scss">
.el-dialog__body {
  padding: 0 10px 20px !important;
}

.hide {
  .el-upload--picture-card {
    display: none !important;
  }
}
</style>