FileMaster

Edit File: AmAttachmentFormField.vue

<template>
  <el-form-item
    v-if="props.isUpload"
    :id="props.id"
    ref="formFieldRef"
    class="am-ff__item"
    :prop="props.itemName"
    :label-position="props.labelPosition"
  >
    <template #label>
      <span class="am-ff__item-label" v-html="props.label" />
    </template>
    <AmAttachment
      :id="props.id"
      v-model="model"
      :auto-upload="false"
      :accept="customFieldsAllowedExtensions"
      @change="onAddFile"
      @remove="onRemoveFile"
    >
      {{props.btnLabel}}
    </AmAttachment>
  </el-form-item>
  <div v-else>
    <p v-for="(fileInfo, index) in props.modelValue" :key="index">
      <a
        :key="index"
        :href="ajaxUrl + '/fields/' + props.id + '/' + props.bookingId + '/' + index + '&source=' + props.source"
        target="_blank"
      >
        {{ fileInfo.name }}
      </a>
    </p>
  </div>
</template>

// * Import from Vue
import {
  computed, onMounted,
  ref,
  toRefs
} from "vue";
import {settings} from "../../../plugins/settings";

// * Import from Vuex
import { useStore } from 'vuex'

// * Form Item Props
let props = defineProps({
  modelValue: {
    type: [String, Array, Object, Number],
    required: true
  },
  id: {
    type: [String, Number]
  },
  bookingId: {
    type: [String, Number]
  },
  itemName: {
    type: String,
    required: true
  },
  isUpload: {
    type: Boolean,
    default: true
  },
  label: {
    type: String
  },
  labelPosition: {
    type: String,
    default: 'top'
  },
  btnLabel: {
    type: String
  },
  source: {
    type: String,
    default: 'cabinet-provider'
  }
})

// * Define Emits
const emits = defineEmits(['update:modelValue', 'change', 'remove'])

const store = useStore()

let ajaxUrl = computed(() => store.getters['getBaseUrls'].wpAmeliaPluginAjaxURL)

// * Component model
let { modelValue } = toRefs(props)
let model = computed({
  get: () => modelValue.value,
  set: (val) => {
    emits('update:modelValue', val)
  }
})

// * Form Item Reference
let formFieldRef = ref(null)

defineExpose({
  formFieldRef
})

let customFieldsAllowedExtensions = ref('')

onMounted(() => {
  if (settings.general.customFieldsAllowedExtensions) {
    customFieldsAllowedExtensions.value = Object.keys(settings.general.customFieldsAllowedExtensions).join(', ')
  }
})

function onAddFile (a) {
  emits('update:modelValue', a.raw)
}

function onRemoveFile (a) {
  emits('update:modelValue', a.raw)
}
</script>

Back