search_ui/components/entity/modals/EntityShowSocialEffectsModal.vue
2025-02-01 14:36:10 +03:30

130 lines
2.7 KiB
Vue

<template>
<div class="position-relative">
<form action="">
<div class="row">
<div class="col-12" style="margin: 0 25%; max-width: 300px">
<img :src="src" class="img-thumbnail" />
</div>
<div class="col-12">
<h5 class="font-weight-bold">{{ value.title }}</h5>
<p class="text-justify">{{ value.description }}</p>
</div>
</div>
<div class="popUp-tab__buttons">
<div class="d-flex justify-content-between flex-grow-1">
<span>&nbsp;</span>
<div class="d-flex">
<button
type="button"
class="popUp-tab__clear btn"
@click.prevent="closeModal"
>
لغو
</button>
</div>
</div>
</div>
</form>
</div>
</template>
<script>
import { propertyMixin } from "~/entity/mixins/propertyMixin";
// import ImageUploader from "vue-image-upload-resize";
export default {
mixins: [propertyMixin],
props: {
data: { type: Object, default: () => ({}) },
},
mounted() {
const res = this.getPropertyValue(
this.data.entity,
this.data.keyName,
this.data.index
);
if (res) this.value = res;
this.src = import.meta.env.VITE_MEDIA_BASE_URL + this.value.file;
},
data() {
return {
src: "",
value: {
title: null,
description: null,
file: null,
},
hasImage: false,
imageUrl: undefined,
};
},
computed: {
// propertyObj(){
// return this.value;
// }
},
methods: {
setImage: function (file) {
this.hasImage = true;
this.imageUrl = file;
this.saveFile(file.info);
},
// ...mapActions("entity",['SAVE_PROPERTY']),
// saveProperty(){
// let self = this;
// let property = this.propertyObj;
// let index = 0;
// if(property.id){
// index = property.index;
// }
// this.SAVE_PROPERTY(property).then(response => {
// self.$emit('change', {item: response.data, type: 'necessities', index: index});
// });
// }
},
};
</script>
<style lang="scss">
.picture-input input[type="file"],
#fileInput {
display: none !important;
}
.image-uploader-container {
position: relative;
border: 2px dashed #eee;
padding: 0.2em;
&.hide-preview {
.upload-label {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
width: auto !important;
overflow: hidden;
}
.upload-label img {
visibility: hidden;
}
}
.img-preview {
width: 300px;
max-width: 100%;
height: auto;
max-height: 200px;
object-fit: contain;
}
}
</style>