Tag.vue

<template>
<!-- mt报文 -->
  <div v-if="styleType == 'mtstyle'">
    <c-row class="m-swf-message-content-item">
      <c-col :span="1">
        <slot name="icon"></slot>
      </c-col>
      <c-col :span="3" class="m-swf-message-content-tag">
        <span v-if="pattern.status === 'M'" class="m-swf-message-content-star">*</span>
        <c-select v-model="pattern.tag" :clearable="false" size="small"
          v-if="pattern.letter && pattern.letter.length > 0" @change="handleTagChange">
          <el-option v-for="item in pattern.letter" :key="item" :label="item" :value="item"></el-option>
        </c-select>
        <span v-else>
          {{pattern.tag}}
        </span>
      </c-col>
      <c-col :span="4" class="m-swf-message-content-label">
        {{pattern.label}}
      </c-col>
      <c-col :span="15">
        <m-tag-content :tag="pattern.tag" :pattern="pattern" @validate="handleValidate" :seqlist="seqlist" :mty="mty">
        </m-tag-content>
      </c-col>
      <c-col :span="1" class="m-swf-message-content-tno">
        {{pattern.tno}}
      </c-col>
    </c-row>
  </div>
<!-- fmt 报文 -->
<div v-else-if="styleType == 'fmtstyle'">
    <c-row class="m-swf-message-content-item">
      <c-col :span="1">
        <slot name="icon"></slot>
      </c-col>
      <c-col :span="3" class="m-swf-message-content-tag">
        <span v-if="pattern.status === 'M'" class="m-swf-message-content-star">*</span>
        <c-select v-model="pattern.tag" :clearable="false" size="small"
          v-if="pattern.letter && pattern.letter.length > 0" @change="handleTagChange">
          <el-option v-for="item in pattern.letter" :key="item" :label="item" :value="item"></el-option>
        </c-select>
        <span v-else>
          {{pattern.tag}}
        </span>
      </c-col>
      <c-col :span="19">
        <m-tag-content :tag="pattern.tag" :pattern="pattern" @validate="handleValidate" :seqlist="seqlist" :mty="mty">
        </m-tag-content>
      </c-col>
      <c-col :span="1" class="m-swf-message-content-tno">
        {{pattern.tno}}
      </c-col>
    </c-row>
  </div>
</template>
<script>
  import TagContent from './Tags/index.vue'
  import {
    TagV,
    isTagValueEmpty
  } from './TagValidater'

  export default {
    name: 'm-tag',
    components: {
      'm-tag-content': TagContent
    },
    props: {
      pattern: {
        type: Object,
        default: () => {}
      },
      mty: {
        type: String
      },
      seqlist: {
        type: Array,
        default: () => []
      },
      extra: {
        type: Object,
        default: () => {}
      }
    },
    data: function () {
      return {
        state: {
          tagValue: this.pattern.tagValue,
          isEmpty: this.isEmpty(this.pattern.tagValue)
        }
      }
    },
    mounted: function () {
      if (this.seqlist && !this.isEmpty(this.state.tagValue)) {
        let {
          countMap = {}
        } = this.extra
        for (let seqlbl of this.seqlist) {
          let key = seqlbl.seqlist
          if (!countMap[key])
            countMap[key] = 1
          else
            countMap[key]++
        }
        this.extra.countMap = countMap
      }
    },
    destroyed: function () {
      if (this.seqlist) {
        if (this.isEmpty(this.state.tagValue))
          return
        let {
          countMap
        } = this.extra
        if (!countMap)
          return
        for (let seqlbl of this.seqlist) {
          let key = seqlbl.seqlist
          if (countMap[key])
            countMap[key]--
        }
      }
    },
    computed: {
      styleType () {
        if (this.mty.indexOf('fmt19') !== -1 || this.mty == 'fmt985') {
          // fmt19X 和 fmt985 报文的样式
          return 'fmtstyle'
        } else {
          return 'mtstyle'
        }
      }
    },
    methods: {
      handleValidate: function () {
        console.log(JSON.stringify(this.pattern.tagValue))
        TagV("T" + this.pattern.tag,
          this.pattern.status,
          this.pattern.tagValue,
          this.pattern.tno,
          this.mty,
          this.seqlist,
          this.extra.countMap)
      },
      isEmpty: function (tagValue) {
        if (!tagValue)
          return true
        if (!tagValue.length || tagValue.length < 1)
          return true
        return isTagValueEmpty("T" + this.pattern.tag, tagValue)
      },
      handleTagChange: function () {
        if (this.pattern.copyTagFlag && this.pattern.copyTagFlag[this.pattern.tag + '-flag']) {
          this.pattern.tagFlag = this.pattern.copyTagFlag[this.pattern.tag + '-flag']
        } else {
          this.pattern.tagFlag = []
        }
        delete this.pattern.tagValue

        this.$nextTick(() => {
          if (this.pattern.tagValue && this.pattern.copyTagValue && this.pattern.copyTagValue[this.pattern.tag]) {
            for (let keyvalue in this.pattern.copyTagValue[this.pattern.tag][0]) {
              if (this.pattern.copyTagValue[this.pattern.tag][0][keyvalue]) {
                this.pattern.tagValue[0][keyvalue] = this.pattern.copyTagValue[this.pattern.tag][0][keyvalue]
              }
            }
            if (this.pattern.copyTagValue[this.pattern.tag][1]) {
              this.pattern.tagValue[1] = this.pattern.copyTagValue[this.pattern.tag][1]
            }
          }
        })
      }
    }
  }
</script>
<style>
  .m-swf-message-content-tag {
    position: relative;
    padding-left: 10px;
  }

  .m-swf-message-content-star {
    color: red;
    position: absolute;
    left: 0;
  }

  .m-swf-message-content-tag .el-select {
    width: 70%;
    display: inline-block;
  }

  .m-swf-message-content-label {
    font-size: 12px;
    text-align: center;
    padding-right: 10px;
  }

  .m-swf-message-content-tno {
    padding-left: 5px;
    font-size: 14px;
  }
</style>