文章编写和导航
This commit is contained in:
clay
263
ebts-ui/src/views/sist/article/components/article.vue
Normal file
263
ebts-ui/src/views/sist/article/components/article.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="文章标题" prop="title">
|
||||
<el-input v-model="formData.title" placeholder="请输入文章标题" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发布人" prop="publishUserName">
|
||||
<el-input v-model="formData.publishUserName" placeholder="请输入发布人" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="文章类型" prop="type">
|
||||
<el-select v-model="formData.type" placeholder="请选择文章类型" clearable :style="{width: '100%'}">
|
||||
<el-option
|
||||
v-for="dict in typeOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否顶置" prop="isTop">
|
||||
<el-select v-model="formData.isTop" placeholder="请选择是否顶置" clearable :style="{width: '100%'}">
|
||||
<el-option
|
||||
v-for="dict in isTopOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否显示" prop="isView">
|
||||
<el-select v-model="formData.isView" placeholder="请选择是否英语" clearable :style="{width: '100%'}">
|
||||
<el-option
|
||||
v-for="dict in isViewOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否英语" prop="isEnglish">
|
||||
<el-select v-model="formData.isEnglish" placeholder="请选择是否英语" clearable :style="{width: '100%'}">
|
||||
<el-option
|
||||
v-for="dict in isEnglishOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发布网站" prop="sitetype">
|
||||
<el-radio-group v-model="formData.sitetype">
|
||||
<el-radio-button v-for="(item, index) in sitetypeOptions" :key="index"
|
||||
:label="item.dictValue">{{ item.dictLabel }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发布时间" prop="publishTime">
|
||||
<el-date-picker
|
||||
v-model="formData.publishTime"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
align="right"
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :offset="1" :span="22">
|
||||
<Editor v-model="formData.content" :min-height="500"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24" class="submitForm">
|
||||
<el-form-item size="large">
|
||||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Editor from '@/components/Editor';
|
||||
import {updateArticle, getArticle, addArticle} from "@/api/sist/article";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Editor,
|
||||
},
|
||||
props: [],
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
id: null,
|
||||
title: null,
|
||||
publishUserName: null,
|
||||
type: null,
|
||||
isTop: null,
|
||||
isEnglish: null,
|
||||
sitetype: "",
|
||||
content: "",
|
||||
},
|
||||
rules: {
|
||||
title: [{
|
||||
required: true,
|
||||
message: '请输入文章标题',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
publishUserName: [{
|
||||
required: true,
|
||||
message: '请输入发布人',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
type: [{
|
||||
required: true,
|
||||
message: '请选择文章类型',
|
||||
trigger: 'change'
|
||||
}],
|
||||
isTop: [{
|
||||
required: true,
|
||||
message: '请选择是否顶置',
|
||||
trigger: 'change'
|
||||
}],
|
||||
isEnglish: [{
|
||||
required: true,
|
||||
message: '请选择是否英语',
|
||||
trigger: 'change'
|
||||
}],
|
||||
isView: [{
|
||||
required: true,
|
||||
message: '请选择是否显示',
|
||||
trigger: 'change'
|
||||
}],
|
||||
sitetype: [{
|
||||
required: true,
|
||||
message: '单选框组不能为空',
|
||||
trigger: 'change'
|
||||
}],
|
||||
publishTime: [{
|
||||
required: true,
|
||||
message: '请选择发布日期',
|
||||
trigger: 'change'
|
||||
}],
|
||||
},
|
||||
typeOptions: [],
|
||||
isTopOptions: [],
|
||||
isViewOptions: [],
|
||||
isEnglishOptions: [],
|
||||
sitetypeOptions: [],
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
this.formData.id = this.$route.params && this.$route.params.articleId;
|
||||
if (this.formData.id === undefined) {
|
||||
this.formData.id = null;
|
||||
this.formData.sitetype
|
||||
} else {
|
||||
getArticle(this.formData.id).then(response => {
|
||||
this.formData = response.data
|
||||
})
|
||||
}
|
||||
this.getDicts("article_site_type").then(response => {
|
||||
this.sitetypeOptions = response.data;
|
||||
});
|
||||
this.getDicts("type").then(response => {
|
||||
this.typeOptions = response.data;
|
||||
});
|
||||
this.getDicts("is_top").then(response => {
|
||||
this.isTopOptions = response.data;
|
||||
});
|
||||
this.getDicts("is_view").then(response => {
|
||||
this.isViewOptions = response.data;
|
||||
});
|
||||
this.getDicts("is_english").then(response => {
|
||||
this.isEnglishOptions = response.data;
|
||||
});
|
||||
this.getDicts("article_status").then(response => {
|
||||
this.statusOptions = response.data;
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
this.$refs['elForm'].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.formData.id != null) {
|
||||
updateArticle(this.formData).then(response => {
|
||||
this.msgSuccess("修改成功");
|
||||
this.$router.push("/sist/article");
|
||||
});
|
||||
} else {
|
||||
addArticle(this.formData).then(response => {
|
||||
this.msgSuccess("新增成功");
|
||||
this.$router.push("/sist/article");
|
||||
});
|
||||
}
|
||||
}
|
||||
// TODO 提交表单
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs['elForm'].resetFields()
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.article {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.submitForm{
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user