Files
ostandari/pages/admin/news/_details.vue
T
2025-07-21 09:40:58 +03:30

872 lines
29 KiB
Vue

<template>
<div>
<CustomSubHeader>
<CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
<CButton
size="sm"
color="primary"
class="mr-auto"
:to="{ name: 'admin-news' }"
>برگشت به صفحه قبل</CButton
>
<CButton
v-if="$route.params.details === 'new'"
size="sm"
color="success"
class="mr-1"
@click="post"
>افزودن
</CButton>
<CButton v-else size="sm" color="success" class="mr-1" @click="update"
>بروزرسانی</CButton
>
</CustomSubHeader>
<CRow>
<CCol lg="6">
<!-- *************** start set category *************** -->
<CCard>
<CCardBody>
<CForm>
<CRow>
<CCol>
<h6>
قسمت انتخابی
<i
v-c-tooltip="
'شما باید تعیین کنید که این خبر برای کدام قسمت پرتال می باشد'
"
class="fas fa-question-circle"
></i>
</h6>
<el-select
:disabled="$auth.user.portals.length === 1"
v-model="news.modelType"
placeholder="انتخاب کنید"
style="width: 100%"
@change="[clearIDs('catId'), clearIDs('newsFile')]"
>
<el-option
v-for="item in portals"
:key="item.value"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
<p
style="margin-top: 5px !important ; color: red"
class="form-err"
v-if="validation.modelType"
>
{{ validation.modelType.msg }}
</p>
<template v-if="filterParent">
<el-divider />
<CRow>
<CCol sm="12">
<h6>
{{
this.$route.params.details !== "new"
? "دسته بندی"
: "انتخاب دسته بندی"
}}
</h6>
<el-select
filterable
clearable
style="width: 100%"
v-model="catId"
placeholder="انتخاب دسته بندی"
@change="clearIDs('newsFile')"
>
<el-option
v-for="item in filterParent"
:key="item._id"
:label="item.title"
:value="item._id"
>
<!-- <span>{{setTitle(item)}}</span> -->
</el-option>
</el-select>
<p
style="margin-top: 5px !important ; color: red"
class="form-err"
v-if="validation.catId"
>
{{ validation.catId.msg }}
</p>
</CCol>
</CRow>
</template>
</CCol>
</CRow>
</CForm>
</CCardBody>
</CCard>
<!-- *************** end set category ***************** -->
<!-- *************** start set details **************** -->
<CCard>
<CCardBody>
<CRow>
<CCol sm="12">
<CTextarea
:class="validation.summaryTitle ? 'err' : null"
label="رو تیتر"
:description="
validation.summaryTitle ? validation.summaryTitle.msg : null
"
v-model="news.summaryTitle"
rows="3"
/>
</CCol>
</CRow>
<CRow>
<CCol sm="12">
<CTextarea
:class="validation.title ? 'err' : null"
label="تیتر"
:description="validation.title ? validation.title.msg : null"
v-model="news.title"
rows="3"
/>
</CCol>
</CRow>
<CRow>
<CCol sm="12">
<CTextarea
:class="validation.leadTitle ? 'err' : null"
label="لید"
:description="
validation.leadTitle ? validation.leadTitle.msg : null
"
v-model="news.leadTitle"
rows="3"
/>
</CCol>
</CRow>
<CRow>
<CCol sm="12">
<CTextarea
:class="validation.metaTagDesc ? 'err' : null"
label="توضیحات برای موتورهای جست و جو"
placeholder="در صورتی که این کادر را خالی بگذارید از متن لید استفاده خواهد شد."
:description="
validation.metaTagDesc ? validation.metaTagDesc.msg : null
"
v-model="news.metaTagDesc"
rows="3"
/>
</CCol>
</CRow>
<CRow>
<CCol sm="12">
<p>کلمات کلیدی</p>
<div>
<el-input
class="input-new-tag mb-3"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button
v-else
class="button-new-tag mb-3"
size="small"
@click="showInput"
>کلمه جدید
</el-button>
</div>
<div class="mb-3">
<el-tag
class="ml-1"
:key="tag"
v-for="tag in news.keywords"
closable
:disable-transitions="false"
@close="handleClose(tag)"
>
{{ tag }}
</el-tag>
</div>
</CCol>
</CRow>
<CRow>
<CCol>
<CRow>
<CCol sm="12" class="mb-3">
<template>
<client-only>
<p>متن خبر</p>
<ckeditor
v-model="news.pageContent"
:config="editorConfig"
></ckeditor>
<p class="text-danger" v-if="validation.pageContent">
{{ validation.pageContent.msg }}
</p>
</client-only>
</template>
</CCol>
</CRow>
</CCol>
</CRow>
</CCardBody>
</CCard>
<!-- *************** end set details ****************** -->
</CCol>
<CCol lg="6">
<CCard>
<CCardBody>
<CCol sm="12">
<el-checkbox v-model="news.publish" label="انتشار خبر" />
</CCol>
<CCol sm="12">
<el-checkbox
v-model="news.showInHome"
label="نمایش خبر در صفحه اصلی"
/>
</CCol>
<el-divider></el-divider>
<!-- <CCol sm="12">
<el-checkbox
v-model="news.slider"
label="قرار گرفتن خبر در اسلایدر صفحه اصلی"
/>
</CCol> -->
<!-- <el-divider></el-divider> -->
<CCol sm="12">
<el-checkbox
v-model="news.priority"
label="نمایش خبر در بالای صفحه ی دسته بندی"
/>
</CCol>
<CCol sm="12">
<el-checkbox
v-model="news.allowComment"
label="اجازه کامنت گذاشتن برای این خبر"
/>
</CCol>
<el-divider></el-divider>
<CCol sm="12">
<el-checkbox
v-model="news.special"
label="نمایش در قسمت مطالب ویژه"
/>
</CCol>
<CCol sm="12">
<el-checkbox
v-model="news.notifications"
label="قرار گرفتن در بخش اطلاعیه ها"
/>
</CCol>
</CCardBody>
</CCard>
<CCard>
<CCardBody>
<CCol sm="12">
<h6>
انتخاب موضوع پرونده خبری
<i
v-c-tooltip="
'شما می توانید در صورت تمایل این خبر را در یکی از موضوعات پرونده های خبری قرار دهید'
"
class="fas fa-question-circle"
></i>
</h6>
<el-select
v-model="news.newsFileId"
placeholder="انتخاب کنید"
style="width: 100%"
filterable
clearable
>
<el-option
v-for="item in filteredSetNewsFile"
:key="item._id"
:label="item.title"
:value="item._id"
>
</el-option>
</el-select>
<p
style="margin-top: 5px !important ; color: red"
class="form-err"
v-if="validation.newsFileId"
>
{{ validation.newsFileId.msg }}
</p>
</CCol>
</CCardBody>
</CCard>
<CCard v-if="$route.params.details !== 'new'">
<CCardBody>
<CCol sm="12">
<h6>تغییر زمان ثبت خبر</h6>
<date-picker
clearable
input-format="YYYY-MM-DD HH:mm"
format="YYYY-MM-DD HH:mm"
display-format="jYYYY/jMM/jDD HH:mm"
v-model="news.customDate"
type="datetime"
/>
<p
style="margin-top: 5px !important ; color: red"
class="form-err"
v-if="validation.customDate"
>
{{ validation.customDate.msg }}
</p>
</CCol>
</CCardBody>
</CCard>
<CCard>
<CCardBody>
<p style="font-weight: bold; color: red">
*در صورتی که عکس خبر وارد نشده باشد خبر در حالت ناقص قرار می گیرد
</p>
<CCol sm="12">
<h4>عکس خبر هنگام نمایش در لیست اخبار</h4>
<el-divider />
<CCol>
<img :src="news.thumbCover" style="width: 100%" alt="" />
</CCol>
<input type="file" ref="thumbCover" @change="imagePreview2" />
<p
style="margin-top: 5px !important"
class="form-err text-danger"
v-if="validation.thumbCover"
>
{{ validation.thumbCover.msg }}
</p>
<p class="mt-3 text-muted">
عکس 300*600 باشد. در غیر این صورت اتوماتیک بریده می شود.
</p>
</CCol>
<CCol sm="12">
<h4>کاور اصلی خبر</h4>
<el-divider />
<CCol>
<img :src="news.cover" style="width: 100%" alt="" />
</CCol>
<input type="file" ref="cover" @change="imagePreview" />
<p
style="margin-top: 5px !important"
class="form-err text-danger"
v-if="validation.cover"
>
{{ validation.cover.msg }}
</p>
<p class="mt-3 text-muted">
عکس 1080*1920 باشد. در غیر این صورت اتوماتیک بریده می شود.
</p>
</CCol>
</CCardBody>
</CCard>
</CCol>
<CCol sm="12" v-if="$route.params.details !== 'new'">
<CCard>
<CCardBody>
<CRow>
<CCol sm="6">
<h2>لیست فایل های ضمیمه</h2>
<el-divider></el-divider>
<el-table :data="news.attachments">
<el-table-column type="index" label="#"> </el-table-column>
<el-table-column label="فایل" width="">
<template slot-scope="scope">
<a :href="scope.row.file" target="_blank">{{
scope.row.title
}}</a>
</template>
</el-table-column>
<el-table-column label="ویرایش" width="75" align="center">
<template slot-scope="scope">
<CButton
color="danger"
variant="outline"
@click="deleteFile(scope.row._id)"
>
<i class="far fa-trash-alt"></i>
</CButton>
</template>
</el-table-column>
</el-table>
</CCol>
<CCol sm="6">
<h2>افزودن فایل ضمیمه</h2>
<el-divider></el-divider>
<input type="file" ref="attFile" />
<p class="text-danger" v-if="validation.file">
{{ validation.file.msg }}
</p>
<br />
<br />
<input
type="text"
ref="attTitle"
placeholder="عنوان فایل را بنویسید"
style="width: 300px"
/>
<p class="text-danger" v-if="validation.attTitle">
{{ validation.attTitle.msg }}
</p>
<br />
<br />
<el-button size="small" type="success" @click="addFile"
>افزودن</el-button
>
</CCol>
</CRow>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</template>
<script>
import axiosUploadProcess from "@/mixins/axiosUploadProcess";
import moment from "moment-jalaali";
export default {
data() {
return {
news: null,
typePage: true,
inputVisible: false,
inputValue: "",
validation: {},
newsFile: [],
editorConfig: {
language: "en",
extraPlugins: ["bidi", "justify"],
versionCheck: false,
},
parents: null,
portals: null,
};
},
mixins: [axiosUploadProcess],
computed: {
title() {
return this.$route.params.details === "new"
? "افزودن خبر جدید"
: "مشاهده جزئیات خبر";
},
catId: {
get() {
if (this.$route.params.details === "new") return this.news.catId;
else return this.news.catId._id;
},
set(value) {
if (this.$route.params.details === "new") this.news.catId = value;
else this.news.catId._id = value;
},
},
filterParent() {
return this.parents.filter(
(item) => item.modelType === this.news.modelType
);
},
filteredSetNewsFile() {
return this.newsFile.filter(
(item) =>
item.modelType === this.news.modelType &&
(this.$route.params.details === "new"
? item.catId === this.news.catId
: item.catId === this.news.catId._id)
);
},
},
methods: {
jDate(date) {
return moment(date);
},
handleClose(tag) {
this.news.keywords.splice(this.news.keywords.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick((_) => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.news.keywords.push(inputValue);
}
this.inputVisible = false;
this.inputValue = "";
},
clearIDs(mode) {
if (mode === "catId") this.catId = "";
if (mode === "newsFile") this.news.newsFileId = "";
},
imagePreview(e) {
this.news.cover = URL.createObjectURL(e.target.files[0]);
},
imagePreview2(e) {
this.news.thumbCover = URL.createObjectURL(e.target.files[0]);
},
post() {
this.validation = {};
const data = new FormData();
data.append("title", this.news?.title?.trim());
data.append("summaryTitle", this.news?.summaryTitle?.trim());
data.append("leadTitle", this.news?.leadTitle?.trim());
data.append("catId", this.catId);
data.append("priority", this.news.priority);
data.append("allowComment", this.news.allowComment);
data.append("showInHome", this.news.showInHome);
// data.append("slider", this.news.slider);
data.append("publish", this.news.publish);
data.append("pageContent", this.news.pageContent);
data.append("special", this.news.special);
data.append("notifications", this.news.notifications);
data.append("keywords", JSON.stringify(this.news.keywords));
data.append(
"metaTagDesc",
this.news?.metaTagDesc || this.news?.leadTitle
);
data.append("modelType", this.news.modelType);
if (this.news.newsFileId) {
data.append("newsFileId", this.news.newsFileId);
}
if (this.$refs.cover.files[0])
data.append("cover", this.$refs.cover.files[0]);
if (this.$refs.thumbCover.files[0])
data.append("thumbCover", this.$refs.thumbCover.files[0]);
this.$axios
.post(`/api/admin/news`, data, this.axiosConfig)
.then((response) => {
this.$message({
type: "success",
message: "خبر با موفقیت ایجاد شد.",
});
this.$router.push({
name: "admin-news",
});
})
.catch((err) => {
if (err.response.status === 401) {
return this.$message({
type: "error",
message: "لطفا دوباره وارد سیستم شوید.",
});
}
if (err.response.status === 403) {
return this.$message({
type: "error",
message: err.response.data.message,
});
}
if (err.response.status === 500) {
return this.$message({
type: "error",
message: "مشکلی در ارسال درخواست پیش آمده",
});
}
if (err.response.status === 422) {
this.validation = err.response.data.validation;
this.$message({
type: "warning",
message: "پارامتر هارو بررسی کنید",
});
} else console.log(err.response.data);
});
},
update() {
this.validation = {};
const data = new FormData();
data.append("title", this.news.title.trim());
data.append("summaryTitle", this.news.summaryTitle.trim());
data.append("leadTitle", this.news.leadTitle.trim());
data.append("catId", this.catId);
data.append("priority", this.news.priority);
data.append("allowComment", this.news.allowComment);
data.append("showInHome", this.news.showInHome);
// data.append("slider", this.news.slider);
data.append("publish", this.news.publish);
data.append("pageContent", this.news.pageContent);
data.append("special", this.news.special);
data.append("notifications", this.news.notifications);
data.append("keywords", JSON.stringify(this.news.keywords));
data.append("metaTagDesc", this.news.metaTagDesc || this.news.leadTitle);
data.append("modelType", this.news.modelType);
data.append("customDate", this.news.customDate);
if (this.news.newsFileId) {
data.append("newsFileId", this.news.newsFileId);
}
if (this.$refs.cover.files[0])
data.append("cover", this.$refs.cover.files[0]);
if (this.$refs.thumbCover.files[0])
data.append("thumbCover", this.$refs.thumbCover.files[0]);
this.$axios
.put(`/api/admin/news/${this.news._id}`, data, this.axiosConfig)
.then((response) => {
this.$message({
type: "success",
message: "اطلاعات بروزرسانی شد.",
});
// بروزرسانی تصاویر در صورت تغییر
if (response.data.cover && response.data.cover !== this.news.cover) {
this.news.cover = response.data.cover + "?t=" + Date.now();
}
if (
response.data.thumbCover &&
response.data.thumbCover !== this.news.thumbCover
) {
this.news.thumbCover =
response.data.thumbCover + "?t=" + Date.now();
}
// بروزرسانی سایر اطلاعات
this.news.newsStatus = response.data.newsStatus;
this.$refs.cover.value = null;
this.$refs.thumbCover.value = null;
})
.catch((err) => {
if (err.response.status === 401) {
return this.$message({
type: "error",
message: "لطفا دوباره وارد سیستم شوید.",
});
}
if (err.response.status === 403) {
return this.$message({
type: "error",
message: err.response.data.message,
});
}
if (err.response.status === 500) {
return this.$message({
type: "error",
message: "مشکلی در ارسال درخواست پیش آمده",
});
}
if (err.response.status === 422) {
this.$message({
type: "warning",
message: "پارامترها رو بررسی کنید",
});
this.validation = err.response.data.validation;
} else console.log(err.response.data);
});
},
addFile() {
this.validation = {};
const data = new FormData();
data.append("file", this.$refs.attFile.files[0]);
data.append("attTitle", this.$refs.attTitle.value);
this.$axios
.post(
`/api/admin/news/attachments/${this.news._id}`,
data,
this.axiosConfig
)
.then((res) => {
this.$message({
type: "success",
message: "فایل با موفقیت اضافه شد",
});
this.$refs.attFile.value = null;
this.$refs.attTitle.value = null;
this.$nuxt.refresh();
})
.catch((err) => {
if (err.response.status === 401) {
return this.$message({
type: "error",
message: "لطفا دوباره وارد سیستم شوید.",
});
}
if (err.response.status === 403) {
return this.$message({
type: "error",
message: err.response.data.message,
});
}
if (err.response.status === 500) {
return this.$message({
type: "error",
message: "مشکلی در ارسال درخواست پیش آمده",
});
}
if (err.response.status === 422) {
this.$message({
type: "warning",
message: "پارامترها را بررسی کنید",
});
this.validation = err.response.data.validation;
} else console.log(err.response.data);
});
},
deleteFile(id) {
this.$confirm("فایل حذف شود؟", "هشدار", {
confirmButtonText: "بله",
cancelButtonText: "لغو",
type: "warning",
})
.then(async () => {
this.$axios
.delete(`/api/admin/news/attachments/${id}`)
.then((res) => {
this.$message({
type: "success",
message: "فایل با موفقیت حذف شد",
});
this.news.attachments = this.news.attachments.filter(
(item) => item._id !== id
);
})
.catch((err) => {
if (err.response.status === 401) {
return this.$message({
type: "error",
message: "لطفا دوباره وارد سیستم شوید.",
});
}
if (err.response.status === 403) {
return this.$message({
type: "error",
message: err.response.data.message,
});
}
if (err.response.status === 422) {
return this.$message({
type: "error",
message: err.response.data.message,
});
}
console.log(err.response.data);
});
})
.catch(() => {
this.$message({
type: "warning",
message: "عملیات لغو شد",
});
});
},
},
head() {
return {
title: this.title,
};
},
layout: "admin",
async asyncData({ $axios, $auth, params, query, error }) {
try {
const requests = [
$axios.get("/api/admin/category/getParent", {
params: {
type: "news",
},
}),
$axios.get("/api/admin/portals", { progress: false }),
$axios.get(`/api/admin/newsFile`, { progress: false }),
];
const fetch = await Promise.all(requests);
let [parents, portals, newsFile] = fetch;
const setModelType =
$auth.user.portals.length !== 1
? $auth.user.portals
: $auth.user.portals[0];
// const setFilterParent =
// $auth.user.portals.length !== 1
// ? null
// : parents.data.filter(
// (item) => item.modelType === $auth.user.portals[0]
// );
if (params.details !== "new") {
const news = await $axios.get(`/api/admin/news/${params.details}`);
return {
portals: portals.data,
parents: parents.data,
news: news.data,
// filterParent: parents.data,
newsFile: newsFile.data,
};
} else {
return {
portals: portals.data,
parents: parents.data,
// filterParent: parents.data,
newsFile: newsFile.data,
news: {
title: "",
summaryTitle: "",
leadTitle: "",
catId: $auth.user.specialPermissions,
allowComment: false,
// slider: false,
priority: false,
showInHome: true,
siteMap: true,
special: false,
publish: true,
notifications: false,
pageContent: "",
keywords: [],
metaTagDesc: "",
newsStatus: false,
modelType: setModelType,
newsFileId: "",
},
};
}
} catch (e) {
console.log(e);
if (e?.response?.status === 401) {
error({
status: 401,
message: "لطفا دوباره وارد سیستم شوید.",
});
}
if (e?.response?.status === 403) {
error({
status: 403,
message: e?.response?.data?.message,
});
}
if (e?.response?.status === 500) {
error({
status: 500,
message: "مشکلی در گرفتن اطلاعات پیش آمده",
});
} else
error({
status: 404,
message: "خبر مورد نظر پیدا نشد",
});
}
},
};
</script>