438 lines
14 KiB
Vue
438 lines
14 KiB
Vue
<template>
|
|
<a-form :form="form" @submit="handleSubmit">
|
|
<a-spin type="loading" :spinning="loading">
|
|
<vx-card title="ویرایش آگهی">
|
|
<div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 md:gap-2 xl:grid-cols-2 lg:gap-4 xl:gap-4">
|
|
<a-form-item label="عنوان آگهی">
|
|
<a-input
|
|
v-decorator="['title', { rules: [{ required: true, message: 'واردکردن دسته الزامی است.' }] }]"
|
|
autocomplete="off"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="توضیحات آگهی">
|
|
<a-textarea
|
|
v-decorator="['body', { rules: [{ required: false, message: '' }] }]" autocomplete="off"/>
|
|
</a-form-item>
|
|
<a-form-item label="همراه آگهی دهنده">
|
|
<a-input
|
|
v-decorator="['phone', { rules: [{ required: false, message: 'واردکردن دسته الزامی است.' }] }]"
|
|
autocomplete="off"
|
|
:disabled="true"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="همراه بازاریاب">
|
|
<a-input
|
|
v-decorator="['marketer.mobile', { rules: [{ required: false, message: 'واردکردن دسته الزامی است.' }] }]"
|
|
autocomplete="off"
|
|
:disabled="true"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="دسته">
|
|
<a-tree-select
|
|
v-decorator="['collection_id', { rules: [{ required: false, message: 'واردکردن دسته الزامی است.' }] }]"
|
|
style="width: 100%"
|
|
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
|
:tree-data="collection"
|
|
placeholder=""
|
|
tree-default-expand-all
|
|
:replaceFields="replaceFields"
|
|
@change="accessIdAdv"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="فروشگاه ثبت کننده">
|
|
<a-input
|
|
style="width: 100%"
|
|
v-decorator="['store.title']" :disabled="true"/>
|
|
</a-form-item>
|
|
<a-form-item label="تعداد بازدید">
|
|
<a-input
|
|
v-decorator="['view_count', { rules: [{ required: false, message: 'واردکردن دسته الزامی است.' }] }]"
|
|
autocomplete="off"
|
|
:disabled="true"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="شهر">
|
|
<a-select
|
|
show-search
|
|
v-decorator="['city_id',{ rules: [{ required: true, message: 'واردکردن دسته الزامی است.' }] }]"
|
|
option-filter-prop="children"
|
|
:filter-option="filterOption"
|
|
>
|
|
<a-select-option v-for="(item, key, index) in cities" :value="key" :key="index">
|
|
{{item.join(' , ')}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item label="شماره نمایش داده شده در آگهی">
|
|
<a-input
|
|
v-decorator="['phone', { rules: [{ required: false, message: 'واردکردن دسته الزامی است.' }] }]"
|
|
autocomplete="off"
|
|
:disabled="true"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="تاریخ انقضا">
|
|
<a-input
|
|
v-decorator="['expired_at', { rules: [{ required: false, message: 'واردکردن دسته الزامی است.' }] }]"
|
|
autocomplete="off"
|
|
:disabled="true"
|
|
/>
|
|
<!-- <label></label>-->
|
|
<!-- <date-picker-->
|
|
<!-- :auto-submit="true"-->
|
|
<!-- color="#ff9800"-->
|
|
<!-- v-model="expired_at"-->
|
|
<!-- style="margin-top: 0.5em"-->
|
|
<!-- :initial-value="null"-->
|
|
<!-- />-->
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-checkbox :disabled="true" v-decorator="['is_swap',{initialValue:false,valuePropName: 'checked'}]">
|
|
تمایل به معاوضه
|
|
</a-checkbox>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-checkbox :disabled="true" v-decorator="['for_store',{initialValue:false,valuePropName: 'checked'}]">
|
|
ثبت شده برای فروشگاه
|
|
</a-checkbox>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-checkbox :disabled="true" v-decorator="['for_other',{initialValue:false,valuePropName: 'checked'}]">
|
|
ثبت آگهی برای شخص دیگر
|
|
</a-checkbox>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-checkbox :disabled="true" v-decorator="['active_chat',{valuePropName: 'checked'}]">
|
|
فعال کردن چت
|
|
</a-checkbox>
|
|
</a-form-item>
|
|
<a-form-item label="برچسب ها">
|
|
<TagCreator></TagCreator>
|
|
</a-form-item>
|
|
<!-- <a-checkbox @change="activeImage">تایید تصاویر</a-checkbox>-->
|
|
<a-form-item label="تصاویر آگهی">
|
|
<Xupload url="admin/file" v-model="images" @change="changeUploadImage"/>
|
|
</a-form-item>
|
|
</div>
|
|
<AdvAttributeComponent :attributes="attributes" :attr="getAttr" :id="data.collection_id" @handleAdd="saveAttrTable"/>
|
|
<a-button html-type="submit" type="primary" ghost style="margin-left: 3rem;margin-top: 1rem">
|
|
ذخیره تغییرات
|
|
</a-button>
|
|
</vx-card>
|
|
</a-spin>
|
|
|
|
</a-form>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from '@/axios'
|
|
import AdvAttributeModal from "./AdvAttributeModal";
|
|
import AdvAttributeComponent from "./AdvAttributeComponent";
|
|
import AdvImagesComponent from "./AdvImagesComponent";
|
|
import TagCreator from '../../components/tag-creator/TagCreator'
|
|
import * as moment from 'jalali-moment';
|
|
import Xupload from '../../components/x-upload/XUpload'
|
|
export default {
|
|
name: "adv-add",
|
|
components: {
|
|
AdvImagesComponent,
|
|
AdvAttributeComponent,
|
|
AdvAttributeModal,
|
|
TagCreator,
|
|
Xupload
|
|
},
|
|
data() {
|
|
return {
|
|
activeConfirm:false,
|
|
activeTitleBtn:false,
|
|
activeImageBtn:false,
|
|
attributes: [],
|
|
collection: [],
|
|
rejectReason: [],
|
|
provinces: [],
|
|
provinceCities: [],
|
|
images: [],
|
|
cities: [],
|
|
stores: [],
|
|
tags: [],
|
|
visibleConfirmForm: false,
|
|
cancelAdv: false,
|
|
value: this.text,
|
|
editable: false,
|
|
tempAttrModel: undefined,
|
|
count: 2,
|
|
visibleAdvAttrModal: false,
|
|
attr: {
|
|
title: '',
|
|
type: '',
|
|
value: '',
|
|
for_swap: ''
|
|
},
|
|
adv_for_other: true,
|
|
adv_has_store: true,
|
|
previewVisible: false,
|
|
previewImage: '',
|
|
form: this.$form.createForm(this, {name: 'coordinated'}),
|
|
expired_at:'',
|
|
replaceFields:{ children:'children', title:'title', key:'key', value: 'id' },
|
|
receiveAttr:null,
|
|
getAttr:null,
|
|
collection_adv:null
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
saveAttrTable(value){
|
|
console.log(value,'valuehjjjjj')
|
|
this.receiveAttr = value
|
|
},
|
|
accessIdAdv(id){
|
|
this.collection_adv = id
|
|
},
|
|
handleSubmit(e) {
|
|
e.preventDefault();
|
|
this.form.validateFields((err, values) => {
|
|
if (!err) {
|
|
try{
|
|
const rec_attr = this.receiveAttr
|
|
values.attributes = rec_attr
|
|
console.log(rec_attr,'dfffffffffff')
|
|
values.images = this.images
|
|
this.$store.dispatch('advModel/save', {
|
|
id: this.$route.params.id,
|
|
data:values
|
|
});
|
|
this.$ntSet('عملیات با موفقیت انجام شد.')
|
|
this.$router.push('/adv/list')
|
|
}catch ({message}) {
|
|
this.$ntSetError(message)
|
|
}finally {
|
|
|
|
}
|
|
// this.form.resetFields()
|
|
}
|
|
});
|
|
this.visibleConfirmForm = false;
|
|
},
|
|
|
|
activeTitle(e){
|
|
this.activeTitleBtn = e.target.checked;
|
|
if(this.activeTitleBtn === true && this.activeImageBtn === true){
|
|
this.activeConfirm = true
|
|
}
|
|
else {
|
|
this.activeConfirm = false
|
|
}
|
|
console.log('activeConfirm',this.activeConfirm);
|
|
},
|
|
|
|
changeUploadImage(file){
|
|
file.subject = 1
|
|
file.alt = null
|
|
file.description = null
|
|
file.collection_id = this.collection_adv
|
|
console.log(file,'fileeee')
|
|
},
|
|
|
|
activeImage(e){
|
|
this.activeImageBtn = e.target.checked;
|
|
if(this.activeTitleBtn === true && this.activeImageBtn === true){
|
|
this.activeConfirm = true
|
|
}
|
|
else {
|
|
this.activeConfirm = false
|
|
}
|
|
console.log('activeConfirm',this.activeConfirm);
|
|
},
|
|
|
|
cancellForm() {
|
|
this.cancelAdv = true;
|
|
},
|
|
|
|
async getCollection() {
|
|
const {data} = await axios.get('admin/adv/collection')
|
|
console.log(data,'collection')
|
|
this.collection = data
|
|
},
|
|
|
|
async getRejectReason() {
|
|
await axios.get('admin/adv/reject')
|
|
.then((res) => {
|
|
console.log(res.data, 'rejectReason')
|
|
return this.rejectReason = res.data
|
|
})
|
|
},
|
|
|
|
async getStores() {
|
|
const {data} = await axios.get('admin/adv/store')
|
|
this.stores = data
|
|
},
|
|
|
|
async getCity() {
|
|
const {data} = await axios.get('site/city');
|
|
console.log(data,'city')
|
|
this.cities = data;
|
|
// this.provinces = new Set(Object.values(data).map((item) => item[0]));
|
|
},
|
|
|
|
// async getCity() {
|
|
// const {data} = await axios.get('site/city');
|
|
// this.provinceCities = data;
|
|
// this.provinces = new Set(Object.values(data).map((item) => item[0]));
|
|
// },
|
|
//
|
|
// changeProvinces(value) {
|
|
// let cities = [];
|
|
// for (var i in this.provinceCities) {
|
|
// if (this.provinceCities[i][0] == value) {
|
|
// cities.push({id: i, title: this.provinceCities[i][1]});
|
|
// }
|
|
// }
|
|
// this.form.setFieldsValue({city: undefined});
|
|
// this.cities = cities;
|
|
// },
|
|
|
|
successUpload() {
|
|
console.log('ok')
|
|
this.$vs.notify({color: 'success', title: 'Upload Success', text: 'Lorem ipsum dolor sit amet, consectetur'})
|
|
},
|
|
|
|
addDomain() {
|
|
this.dynamicValidateForm.domains.push({
|
|
value: '',
|
|
key: Date.now(),
|
|
});
|
|
},
|
|
removeDomain(item) {
|
|
let index = this.dynamicValidateForm.domains.indexOf(item);
|
|
if (index !== -1) {
|
|
this.dynamicValidateForm.domains.splice(index, 1);
|
|
}
|
|
},
|
|
filterOption(input, option) {
|
|
return (
|
|
option.componentOptions.children[0].text.indexOf(input) >= 0
|
|
)
|
|
},
|
|
|
|
},
|
|
computed: {
|
|
loading() {
|
|
return this.$store.state.advModel.loading;
|
|
},
|
|
editAdvById() {
|
|
return this.$route.params && this.$route.params.id !== undefined
|
|
},
|
|
data() {
|
|
console.log('this.$store.state.adv.collectionSingle', this.$store.state.advModel.collectionSingle);
|
|
return this.$store.state.advModel.collectionSingle
|
|
},
|
|
},
|
|
mounted() {
|
|
this.getCollection();
|
|
this.getStores();
|
|
this.getRejectReason();
|
|
this.getCity();
|
|
if (this.editAdvById) {
|
|
this.$store.dispatch('advModel/advId', this.$route.params.id).then(() => {
|
|
// this.data.tags = `${this.data.tags}`
|
|
this.data.collection_id = `${this.data.collection_id}`
|
|
this.data.city_id = `${this.data.city_id}`
|
|
this.images = this.data.images;
|
|
this.attributes = this.data.attributes
|
|
this.getAttr = this.attributes.reduce((obj,item)=> Object.assign(obj,{[item.attribute_id]: item.value}),{});
|
|
console.log(this.getAttr,'getAttr')
|
|
this.form.setFieldsValue(this.data);
|
|
this.tags = this.data.tags
|
|
if (this.data.marketer_id !== null) {
|
|
this.adv_for_other = true
|
|
}
|
|
if (this.data.store_id !== null) {
|
|
this.adv_has_store = true
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
@media (min-width: 940px) {
|
|
.checkbox {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
[dir] .ant-form-item {
|
|
margin-bottom: 0
|
|
}
|
|
}
|
|
|
|
.content-area__content {
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
[dir=rtl] .ant-notification {
|
|
z-index: 100000000 !important;
|
|
}
|
|
|
|
.v-nav-menu .vs-sidebar {
|
|
z-index: 1 !important;
|
|
}
|
|
|
|
[dir=rtl] .ant-checkbox-wrapper + .ant-checkbox-wrapper {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.ant-checkbox-wrapper {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.ant-input-number {
|
|
width: 100%
|
|
}
|
|
|
|
.grow-space {
|
|
padding: 0 10px
|
|
}
|
|
|
|
[dir=rtl] .ant-checkbox-wrapper + .ant-checkbox-wrapper[data-v-6c853ba7] {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.birth-day{
|
|
margin-top: .3em;
|
|
}
|
|
|
|
.birth-day label{
|
|
color: rgba(0, 0, 0, 0.85);
|
|
}
|
|
|
|
[dir=rtl] .ant-checkbox-inner::after{
|
|
right: 55%;
|
|
top: 35%;
|
|
border-left: 0 !important;
|
|
-webkit-transform: rotate(-45deg) scale(0) translate(50%, -50%);
|
|
transform: rotate(-45deg) scale(0) translate(50%, -50%);
|
|
}
|
|
[dir=rtl] .ant-tree-checkbox-checked .ant-tree-checkbox-inner::after{
|
|
border-left: 0 !important;
|
|
border-right: 2px solid #fff;
|
|
}
|
|
[dir=rtl] .ant-tree-checkbox-checked .ant-tree-checkbox-inner::after {
|
|
border-left: 0 !important;
|
|
border-right: 2px solid #fff;
|
|
-webkit-transform: rotate(25deg) scale(1) translate(50%, -50%);
|
|
transform: rotate(25deg) scale(1) translate(50%, -50%);
|
|
}
|
|
[dir=rtl] .ant-checkbox-checked .ant-checkbox-inner::after {
|
|
border-right: 2px solid #fff;
|
|
-webkit-transform: rotate(25deg) scale(1) translate(50%, -50%);
|
|
transform: rotate(25deg) scale(1) translate(50%, -50%);
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|