|
@@ -7,6 +7,14 @@ import RoundedTitle from "../../../components/public/roundedTitle.vue";
|
|
|
import PopCard from "../../../components/public/popCard.vue";
|
|
import PopCard from "../../../components/public/popCard.vue";
|
|
|
import ImageTable from "../../../components/public/imageTable.vue";
|
|
import ImageTable from "../../../components/public/imageTable.vue";
|
|
|
import Pop from "../../../components/public/pop.vue";
|
|
import Pop from "../../../components/public/pop.vue";
|
|
|
|
|
+import TableSelect from "../../../components/public/tableSelect.vue";
|
|
|
|
|
+import dbField_esm from "../../../map/dbField_esm";
|
|
|
|
|
+import {checkFormItem, initForm} from "../../../until/formTool";
|
|
|
|
|
+import InputRow from "../../../components/public/form/inputRow.vue";
|
|
|
|
|
+import ImageViewer from "../../../components/public/imageViewer.vue";
|
|
|
|
|
+import {handle} from "../../../until/handle";
|
|
|
|
|
+import {apiMap} from "../../../map/apiMap";
|
|
|
|
|
+import {rCode} from "../../../map/rcodeMap_esm";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@@ -23,6 +31,9 @@ if (process.client) {
|
|
|
export default {
|
|
export default {
|
|
|
name: "add",
|
|
name: "add",
|
|
|
components: {
|
|
components: {
|
|
|
|
|
+ ImageViewer,
|
|
|
|
|
+ InputRow,
|
|
|
|
|
+ TableSelect,
|
|
|
Pop,
|
|
Pop,
|
|
|
ImageTable,
|
|
ImageTable,
|
|
|
PopCard,
|
|
PopCard,
|
|
@@ -30,6 +41,25 @@ export default {
|
|
|
// Use the <ckeditor> component in this view.
|
|
// Use the <ckeditor> component in this view.
|
|
|
|
|
|
|
|
},
|
|
},
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ // 产品类型数据
|
|
|
|
|
+ newsTypes(){
|
|
|
|
|
+ let arr = [];
|
|
|
|
|
+ if (this.form.pType.val === dbField_esm.db_base.newsType.all){
|
|
|
|
|
+ arr = this.$store.getters.allNewsTypes;
|
|
|
|
|
+ }else if (this.form.pType.val === dbField_esm.db_base.newsType.news){
|
|
|
|
|
+ arr = this.$store.getters.newsTypes;
|
|
|
|
|
+ }else if (this.form.pType.val === dbField_esm.db_base.newsType.solution){
|
|
|
|
|
+ arr = this.$store.getters.solutionTypes;
|
|
|
|
|
+ }
|
|
|
|
|
+ if (arr[0].key !== 'all'){
|
|
|
|
|
+ // 添加 all
|
|
|
|
|
+ arr.unshift({text: '全部', key: 'all' });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ return arr;
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
data(){
|
|
data(){
|
|
|
return {
|
|
return {
|
|
|
editor: ClassicEditor,
|
|
editor: ClassicEditor,
|
|
@@ -40,33 +70,145 @@ export default {
|
|
|
},
|
|
},
|
|
|
imagePopShow: false,
|
|
imagePopShow: false,
|
|
|
imagePopLoading: false,
|
|
imagePopLoading: false,
|
|
|
|
|
+ isCoverSelect: false,
|
|
|
|
|
+ form: {
|
|
|
|
|
+ pType: {
|
|
|
|
|
+ val: dbField_esm.db_base.newsType.all,
|
|
|
|
|
+ oldVal: dbField_esm.db_base.newsType.all,
|
|
|
|
|
+ init: dbField_esm.db_base.newsType.all,
|
|
|
|
|
+ msg: '',
|
|
|
|
|
+ state: 0,
|
|
|
|
|
+ options: [
|
|
|
|
|
+ {text: '全部', key: dbField_esm.db_base.newsType.all},
|
|
|
|
|
+ {text: '新闻', key: dbField_esm.db_base.newsType.news},
|
|
|
|
|
+ {text: '解决方案', key: dbField_esm.db_base.newsType.solution},
|
|
|
|
|
+ ]
|
|
|
|
|
+ },
|
|
|
|
|
+ type: {
|
|
|
|
|
+ val: '',
|
|
|
|
|
+ init: '',
|
|
|
|
|
+ msg: '',
|
|
|
|
|
+ state: 0,
|
|
|
|
|
+ options: []
|
|
|
|
|
+ },
|
|
|
|
|
+ title: {
|
|
|
|
|
+ val: '',
|
|
|
|
|
+ init: '',
|
|
|
|
|
+ msg: '',
|
|
|
|
|
+ state: 0
|
|
|
|
|
+ },
|
|
|
|
|
+ author: {
|
|
|
|
|
+ val: '',
|
|
|
|
|
+ init: '',
|
|
|
|
|
+ msg: '',
|
|
|
|
|
+ state: 0
|
|
|
|
|
+ },
|
|
|
|
|
+ source: {
|
|
|
|
|
+ val: '',
|
|
|
|
|
+ init: '',
|
|
|
|
|
+ msg: '',
|
|
|
|
|
+ state: 0
|
|
|
|
|
+ },
|
|
|
|
|
+ cover: {
|
|
|
|
|
+ val: '',
|
|
|
|
|
+ init: '',
|
|
|
|
|
+ msg: '',
|
|
|
|
|
+ state: 0
|
|
|
|
|
+ },
|
|
|
|
|
+ remark: {
|
|
|
|
|
+ val: '',
|
|
|
|
|
+ init: '',
|
|
|
|
|
+ msg: '',
|
|
|
|
|
+ state: 0
|
|
|
|
|
+ },
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
beforeMount() {
|
|
beforeMount() {
|
|
|
- // this.editorConfig.toolbar.push('customButton');
|
|
|
|
|
// 插入toolbar
|
|
// 插入toolbar
|
|
|
-
|
|
|
|
|
this.editorConfig.customFunction = () => {
|
|
this.editorConfig.customFunction = () => {
|
|
|
- console.log('customFunction2');
|
|
|
|
|
this.openImageSelect();
|
|
this.openImageSelect();
|
|
|
};
|
|
};
|
|
|
|
|
+ this.initForm();
|
|
|
|
|
+
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
|
- // 插入按钮
|
|
|
|
|
},
|
|
},
|
|
|
methods:{
|
|
methods:{
|
|
|
|
|
+ initForm(){
|
|
|
|
|
+ this.form.pType.val = dbField_esm.db_base.newsType.all;
|
|
|
|
|
+ this.form.type.options = this.newsTypes;
|
|
|
|
|
+ initForm(this.form);
|
|
|
|
|
+ },
|
|
|
|
|
+ openCoverSelect(){
|
|
|
|
|
+ console.log('打开文章封面选择窗口');
|
|
|
|
|
+ this.isCoverSelect = true;
|
|
|
|
|
+ this.imagePopShow = true;
|
|
|
|
|
+ },
|
|
|
openImageSelect(){
|
|
openImageSelect(){
|
|
|
console.log('尝试打开图片选择窗口');
|
|
console.log('尝试打开图片选择窗口');
|
|
|
|
|
+ this.isCoverSelect = false;
|
|
|
this.imagePopShow = true;
|
|
this.imagePopShow = true;
|
|
|
},
|
|
},
|
|
|
- okHandle(fileData){
|
|
|
|
|
|
|
+ selectImageHandle(fileData){
|
|
|
console.log('okHandle');
|
|
console.log('okHandle');
|
|
|
console.log(fileData);
|
|
console.log(fileData);
|
|
|
this.imagePopShow = false;
|
|
this.imagePopShow = false;
|
|
|
|
|
+ if(this.isCoverSelect){
|
|
|
|
|
+ // 选择封面图片
|
|
|
|
|
+ this.form.cover.val = fileData.filePath;
|
|
|
|
|
+ this.form.cover.init = fileData.filePath;
|
|
|
|
|
+ this.form.cover.msg = '';
|
|
|
|
|
+ this.form.cover.state = 0;
|
|
|
|
|
+ this.form.cover.showText = fileData.filePath;
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
// 将图片新增至编辑器中,允许调整图片大小
|
|
// 将图片新增至编辑器中,允许调整图片大小
|
|
|
this.editorData += `<img src="${fileData.filePath}" alt="${fileData.fileName}">`;
|
|
this.editorData += `<img src="${fileData.filePath}" alt="${fileData.fileName}">`;
|
|
|
console.log(this.editorData);
|
|
console.log(this.editorData);
|
|
|
},
|
|
},
|
|
|
|
|
+ onPTypeChange(){
|
|
|
|
|
+ console.log('文章主类型改变');
|
|
|
|
|
+ console.log(this.newsTypes);
|
|
|
|
|
+ this.form.type.val = this.newsTypes[0].key;
|
|
|
|
|
+ this.form.type.oldVal = this.newsTypes[0].key;
|
|
|
|
|
+ this.form.type.init = this.newsTypes[0].key;
|
|
|
|
|
+ this.form.type.options = this.newsTypes;
|
|
|
|
|
+ },
|
|
|
|
|
+ async onSubmitHandle(){
|
|
|
|
|
+ // 提交文章
|
|
|
|
|
+ console.log('提交文章');
|
|
|
|
|
+ let formData = {};
|
|
|
|
|
+ let isPass = checkFormItem(this.form);
|
|
|
|
|
+ if(!isPass){
|
|
|
|
|
+ return console.log('数据验证不通过');
|
|
|
|
|
+ }
|
|
|
|
|
+ formData.content = this.editorData;
|
|
|
|
|
+ formData.type = this.form.type.val;
|
|
|
|
|
+ formData.title = this.form.title.val;
|
|
|
|
|
+ formData.author = this.form.author.val;
|
|
|
|
|
+ formData.source = this.form.source.val;
|
|
|
|
|
+ formData.cover = this.form.cover.val;
|
|
|
|
|
+ formData.remark = this.form.remark.val;
|
|
|
|
|
+ formData.pType = this.form.pType.val;
|
|
|
|
|
+ console.log(formData);
|
|
|
|
|
+ // 发送请求至后台
|
|
|
|
|
+ let [err,res] = await handle(this.$axios.post(
|
|
|
|
|
+ apiMap.newsAdd.path,
|
|
|
|
|
+ formData
|
|
|
|
|
+ ));
|
|
|
|
|
+ if(err){
|
|
|
|
|
+ console.log(err);
|
|
|
|
|
+ return this.$message.error('新增文章失败');
|
|
|
|
|
+ }
|
|
|
|
|
+ let result = res.data;
|
|
|
|
|
+ if (result.code === rCode.OK){
|
|
|
|
|
+ this.$message.success('新增文章成功');
|
|
|
|
|
+ }else{
|
|
|
|
|
+ this.$message.error(`新增文章失败,${result.msg}`);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
@@ -80,8 +222,57 @@ export default {
|
|
|
hover:text-orange-500 ">文章中心</a>
|
|
hover:text-orange-500 ">文章中心</a>
|
|
|
</rounded-title>
|
|
</rounded-title>
|
|
|
<div class="page-content-box w-full mt-2 p-0.5 rounded bg-white">
|
|
<div class="page-content-box w-full mt-2 p-0.5 rounded bg-white">
|
|
|
- <ckeditor ref="ckeditor" :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
|
|
|
|
|
|
|
+ <div class="flex pb-1 border-b border-gray-300 border-dashed">
|
|
|
|
|
+ <a-radio-group class="flex flex-shrink-0 items-center" v-model="form.pType.val" @change="onPTypeChange">
|
|
|
|
|
+ <a-radio-button class="" :value="item.key" v-for="item in form.pType.options" :key="item.key">{{item.text}}</a-radio-button>
|
|
|
|
|
+ </a-radio-group>
|
|
|
|
|
+
|
|
|
|
|
+ <table-select
|
|
|
|
|
+ class="w-48 !mx-3 flex-shrink-0"
|
|
|
|
|
+ :options="form.type.options"
|
|
|
|
|
+ v-model="form.type.val"
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <input-row class="mt-2" :msg="form.author.msg"
|
|
|
|
|
+ label="作者">
|
|
|
|
|
+ <a-input v-model="form.author.val" placeholder="请输入作者"></a-input>
|
|
|
|
|
+ </input-row>
|
|
|
|
|
+ <input-row class="mt-2" :msg="form.source.msg"
|
|
|
|
|
+ label="来源">
|
|
|
|
|
+ <a-input v-model="form.source.val" placeholder="请输入来源"></a-input>
|
|
|
|
|
+ </input-row>
|
|
|
|
|
+ <input-row class="mt-2" :msg="form.title.msg"
|
|
|
|
|
+ label="标题">
|
|
|
|
|
+ <a-input v-model="form.title.val" placeholder="请输入标题"></a-input>
|
|
|
|
|
+ </input-row>
|
|
|
|
|
+ <input-row class="mt-2" :msg="form.remark.msg"
|
|
|
|
|
+ remark="文章的简介摘要部分,用于外部展示"
|
|
|
|
|
+ label="摘要" >
|
|
|
|
|
+ <a-input v-model="form.remark.val" placeholder="请输入摘要"></a-input>
|
|
|
|
|
+ </input-row>
|
|
|
|
|
+ <input-row class="my-2" :msg="form.cover.msg"
|
|
|
|
|
+ label="文章封面">
|
|
|
|
|
+ <div class="rounded relative" style="width: 524px;height: 360px" >
|
|
|
|
|
+ <image-viewer class="" :src="form.cover.showText"></image-viewer>
|
|
|
|
|
+ <div class="absolute w-full h-full left-0 top-0
|
|
|
|
|
+ justify-center text-white bg-gray-400
|
|
|
|
|
+ items-center text-2xl flex opacity-0 hover:opacity-70"
|
|
|
|
|
+ @click="openCoverSelect"
|
|
|
|
|
+ >
|
|
|
|
|
+ 点击选择封面图片
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </input-row>
|
|
|
|
|
+
|
|
|
|
|
+ <ckeditor class="mt-2" ref="ckeditor" :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="mt-2">
|
|
|
|
|
+ <a-button type="primary" @click="onSubmitHandle">新增文章</a-button>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+<!-- 图片选择弹窗 -->
|
|
|
<pop :show="imagePopShow" :loading="imagePopLoading">
|
|
<pop :show="imagePopShow" :loading="imagePopLoading">
|
|
|
<pop-card>
|
|
<pop-card>
|
|
|
<template slot="header">
|
|
<template slot="header">
|
|
@@ -90,7 +281,7 @@ export default {
|
|
|
<image-table
|
|
<image-table
|
|
|
class="w-full h-full"
|
|
class="w-full h-full"
|
|
|
@cancel="imagePopShow = false"
|
|
@cancel="imagePopShow = false"
|
|
|
- @ok="okHandle">
|
|
|
|
|
|
|
+ @ok="selectImageHandle">
|
|
|
|
|
|
|
|
</image-table>
|
|
</image-table>
|
|
|
</pop-card>
|
|
</pop-card>
|