thoth-frontend-test/src/views/monthlyReport/childrenPage/editReport/components/VarText.vue

<template>
  <div class="fixedText" :class="{VarTextV2: headerTitleType === 'Head2'}">
    <div class="content">
      <div class="title" :class="{fontWeight: pageDate && pageDate.status > 20}">
        {{ name }}：
      </div>
      <div class="value">
        <el-row v-if="pageDate.status < 20 && !isHistory" type="flex" justify="space-between">
          <el-input
            v-model="textValue"
            type="textarea"
            :placeholder="headerTitleType === 'Head2' ? `请针对${headerTitle}进行分析，建议格式：【1、事实描述：XXXXXX；2、根因分析：XXXXXX；3、建议：XXXXXX。】` : '请输入'"
            show-word-limit
          />
          <el-button
            style="margin-left: 20px;font-size: 14px;font-weight: 400;"
            type="text"
            @click="markingIssues"
          >
            标记
          </el-button>
        </el-row>
        <span
          v-if="pageDate.status > 10 && textValue || isHistory && textValue"
          style="display: inline-block;line-height: 1.65;background-color: #f7f7f7; padding: 10px; border-radius: 5px;"
          v-html="textValue.replace(/\n/g, '<br />')"
        />
      </div>
    </div>
    <span @click.stop>
      <markingIssues ref="markingIssues" />
    </span>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import markingIssues from './markingIssues'
import _ from 'lodash'

export default {
  name: 'VarText',
  components: {
    markingIssues
  },
  props: {
    title: {
      type: String,
      required: false,
      default: () => ''
    },
    headerTitle: {
      type: String,
      required: false,
      default: () => ''
    },
    headerTitleType: {
      type: String,
      required: false,
      default: () => ''
    },
    name: {
      type: String,
      required: false,
      default: () => ''
    },
    value: {
      type: String,
      required: false,
      default: () => ''
    }
  },
  data() {
    this.upData = _.debounce(this.upData, 800)
    return {
      textValue: ''
    }
  },
  computed: {
    ...mapState('monthlyReportEdit', ['pageType', 'pageDate', 'isHistory'])
    // pageType() {
    //   return this.$store.state.monthlyReportEditV2.pageType
    // },
    // pageDate() {
    //   return this.$store.state.monthlyReportEditV2.pageDate
    // }
  },
  watch: {
    value(val) {
      this.textValue = val
    },
    textValue(val) {
      this.upData()
    }
  },
  mounted() {
    this.textValue = this.value
  },
  methods: {
    upData() {
      this.$emit('input', this.textValue)
    },
    markingIssues() {
      this.$refs.markingIssues.modalShow = true
      this.$nextTick(() => {
        this.$refs.markingIssues.openModal({
          title: '标记为重点问题',
          normalAreaName: `${this.value}`,
          headerTitle: this.headerTitle
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
.fixedText {
  //margin-top: 10px;
  padding-top: 10px;

  .top-title {
    width: 100%;
    display: flex;

    &-content {
      flex: 1;
      padding: 10px 0;
    }

    .handle-box {
      flex: none;
      width: 50px;
      text-align: right;
    }
  }

  .content {
    width: 100%;
    display: flex;

    .title {
      //padding: 9px 0;
      flex: none;
      //font-weight: 600;
      color: #333;
      width: 50px;
    }

    .value {
      flex: 1;
    }
  }
}

.VarTextV2 {
  padding-top: 10px;
  margin-top: 5px;
  margin-bottom: 15px;
  //.content{
  //  .title{
  //    font-weight: 400;
  //  }
  //}
}

.fontWeight {
  font-weight: 600;
  padding-top: 10px;
}
</style>