Amir Mohamadi
128 lines
4.2 KiB
Vue
128 lines
4.2 KiB
Vue
<template>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<admin-title-bar :title="title">
|
|
<el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
|
|
<el-button type="success" @click="upload">ایجاد</el-button>
|
|
</admin-title-bar>
|
|
|
|
<div class="col-6">
|
|
<admin-panel>
|
|
<el-form>
|
|
<el-form-item prop="title" :class="validation.fa_title ? 'is-error' : ''" label="عنوان فارسی">
|
|
<el-input v-model="formData.fa_title"></el-input>
|
|
<p class="err" v-if="validation.fa_title">{{ validation.fa_title.msg }}</p>
|
|
</el-form-item>
|
|
|
|
<el-form-item prop="title" :class="validation.en_title ? 'is-error' : ''" label="عنوان انگلیسی">
|
|
<el-input v-model="formData.en_title"></el-input>
|
|
<p class="err" v-if="validation.en_title">{{ validation.en_title.msg }}</p>
|
|
</el-form-item>
|
|
|
|
<el-form-item prop="title" :class="validation.fa_caption ? 'is-error' : ''" label="توضیحات فارسی">
|
|
<el-input v-model="formData.fa_caption"></el-input>
|
|
<p class="err" v-if="validation.fa_caption">{{ validation.fa_caption.msg }}</p>
|
|
</el-form-item>
|
|
|
|
<el-form-item prop="title" :class="validation.en_caption ? 'is-error' : ''" label="توضیحات انگلیسی">
|
|
<el-input v-model="formData.en_caption"></el-input>
|
|
<p class="err" v-if="validation.en_caption">{{ validation.en_caption.msg }}</p>
|
|
</el-form-item>
|
|
</el-form>
|
|
</admin-panel>
|
|
</div>
|
|
<div class="col-6">
|
|
<admin-panel>
|
|
<h2 class="secondTitle">تصویر</h2>
|
|
<el-divider></el-divider>
|
|
<img :src="formData.image" alt="" style="width: 100%">
|
|
<input type="file" ref="image" @change="preview">
|
|
<p class="err" v-if="validation.image">{{ validation.image.msg }}</p>
|
|
</admin-panel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
formData: {
|
|
fa_title: '',
|
|
en_title: '',
|
|
fa_caption: '',
|
|
en_caption: '',
|
|
image: ''
|
|
},
|
|
validation: {},
|
|
uploading: false,
|
|
uploadProgress: null
|
|
}
|
|
},
|
|
computed: {
|
|
title() {
|
|
if (!this.uploading) {
|
|
return 'افزودن اسلاید'
|
|
} else {
|
|
return this.uploadProgress
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
upload() {
|
|
this.validation = ''
|
|
const data = new FormData()
|
|
data.append('fa_title', this.formData.fa_title)
|
|
data.append('en_title', this.formData.en_title)
|
|
data.append('fa_caption', this.formData.fa_caption)
|
|
data.append('en_caption', this.formData.en_caption)
|
|
data.append('image', this.$refs.image.files[0])
|
|
|
|
const axiosConfig = {
|
|
onUploadProgress: progressEvent => {
|
|
this.uploading = true
|
|
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
|
|
|
|
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
|
|
this.uploading = false
|
|
}
|
|
}
|
|
}
|
|
this.$axios.post(`/api/private/slider`, data, axiosConfig)
|
|
.then(response => {
|
|
if (response.data) {
|
|
this.$message({
|
|
message: 'اسلاید با موفقیت ثبت شد.',
|
|
type: 'success'
|
|
});
|
|
this.$router.push({name: 'admin-slider'})
|
|
}
|
|
}).catch(error => {
|
|
if (error.response.status === 422) {
|
|
this.validation = error.response.data.validation
|
|
this.$message({
|
|
type: 'error',
|
|
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
|
})
|
|
} else {
|
|
this.$alert(error.response.data.error.message, 'خطا', {
|
|
confirmButtonText: 'باشه'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
preview(event) {
|
|
this.formData.image = URL.createObjectURL(event.target.files[0])
|
|
}
|
|
},
|
|
head() {
|
|
return {
|
|
title: this.title
|
|
}
|
|
},
|
|
layout: 'admin'
|
|
}
|
|
</script>
|