FileMaster

Edit File: LastNameFormField.vue

<template>
  <el-col :sm="12">
  
  <el-form-item
    v-show="customizationEdit.editable ? customizationEdit.editable : componentDisplay()"
    class="am-customize-field"
    :class="{'editable': customizationEdit.editable}"
    :style="{borderColor: customizationEdit.reverseBackgroundColorForm}"
  >
    <template slot="label">
      <span :style="{ 'color': customizationForm.formTextColor }">
        <template v-if="!languageShortCode">
          {{ labelLastName.value || `${$root.labels.last_name_colon}:` }}
        </template>
        <template v-else>
          {{ labelLastName.translations[languageShortCode] || `${$root.labels.last_name_colon}:` }}
        </template>
      </span>
    </template>

<el-input
      v-model="LastName"
      :style="{ backgroundColor: customizationForm.formInputColor, color: customizationForm.formInputTextColor, borderColor: selectInputFocus ? customization.primaryColor : '#C0C4CC' }"
      @focus="inputFocus"
    >
    </el-input>

<customize-edit-dialog
      :form-field="formField"
      :language-short-code="languageShortCode"
      @saveEdit="saveFormFiledEdit"
    >
      <template v-slot:fieldEdit>
        <span v-show="customizationEdit.editable" class="am-customize-field__edit">
          <img :src="$root.getUrl + 'public/img/am-customize-icon-edit.svg'" />
        </span>
      </template>
    </customize-edit-dialog>
    
    <span v-if="customizationEdit.editable" class="am-customize-drag-handle">
      <img :src="$root.getUrl + 'public/img/am-customize-icon-drag-handle.svg'"/>
    </span>
  </el-form-item>
  
  </el-col>
</template>

export default {
    name: 'lastNameFormField',

components: {
      customizeEditDialog
    },

props: {
      languageShortCode: {
        type: String,
        default: ''
      },
      customization: {
        type: Object
      },
      customizationForm: {
        type: Object,
        default: () => {
          return {}
        }
      },
      customizationEdit: {
        type: Object,
        default: () => {
          return {}
        }
      },
      formField: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },

data () {
      return {
        LastName: '',
        selectInputFocus: false,
        labelLastName: this.formField.labels.last_name_colon
      }
    },

mounted () {},

methods: {
      inputFocus () {
        this.selectInputFocus = true
      },

componentDisplay () {
        if (this.formField.hasOwnProperty('visibility')) {
          return this.formField.visibility
        }

return true
      },

capitalizeFirstLetter (string) {
        return string.charAt(0).toUpperCase() + string.slice(1)
      },

saveFormFiledEdit (objData) {
        let fieldData = {}
        fieldData['itemsDraggable'] = {}
        fieldData['itemsDraggable'][this.$options.name] = JSON.parse(JSON.stringify(objData))
        this.$emit('saveEdit', fieldData)
      }
    },

watch: {
      'formField' () {
        this.labelLastName = this.formField.labels.last_name_colon
      }
    }
  }
</script>

Back