Merge branch 'master' of ssh://101.201.226.163:50022/binbin0314/datang-admin

src/components/Detail/addOrEdit.vue

@@ -11,13 +11,13 @@
                 </el-cascader>
             </el-form-item>
             <el-form-item label="正文：" prop="content">
-                <!-- <editor /> -->
-                <el-input
+                <editor />
+                <!-- <el-input
                     type="textarea"
                     :rows="2"
                     placeholder="请输入内容"
                     v-model="formLabelAlign.content">
-                </el-input>
+                </el-input> -->
             </el-form-item>
             <el-form-item>
                 <el-button type="primary" @click="submit(formLabelAlign)">确定</el-button>
@@ -28,7 +28,7 @@
 </template>
 
 <script>
-    // import Editor from './editor.vue';
+    import Editor from './editor.vue';
     import {BASE_API} from '../../config';
     import {tabList} from '../../filters/code';
     import {
@@ -41,7 +41,7 @@
     export default {
         name: "detailsOfDistribution",
         components: {
-            // Editor,
+            Editor,
         },
         props: ['currList', 'showAdd'],
         data() {

src/components/Detail/editor copy.vue

@@ -1,43 +0,0 @@
-<template>
-  <div id="editorSection" @change="handleChange"></div>
-</template>
-
-<script>
-import Editor from "tui-editor"; /* ES6 */
-import "tui-editor/dist/tui-editor.css"; // editor's ui
-import "tui-editor/dist/tui-editor-contents.css"; // editor's content
-import "codemirror/lib/codemirror.css"; // codemirror
-import "highlight.js/styles/github.css"; // code block highlight
-import { init } from "echarts/lib/echarts";
-
-export default {
-  name: "mytuieditor",
-  mounted() {
-    this.initialize();
-  },
-  beforeDestroy() {
-    this.tuieditor = null;
-    delete this.tuieditor;
-  },
-  methods: {
-    initialize() {
-      if (this.$el) {
-        this.tuieditor = new Editor({
-          el: document.querySelector("#editorSection"),
-          initialEditType: "wysiwyg",
-          previewStyle: "vertical",
-          height: "300px"
-        });
-        this.tuieditor.getHtml();
-      }
-    },
-
-    handleChange(value){
-      console.log('value: ', value);
-    }
-  }
-};
-</script>
-
-<style>
-</style>

src/components/Detail/editor.vue

@@ -1,38 +1,42 @@
 <template>
-  <div class="ArticleDetail">
-  <div ref="editor" style="text-align:left"></div>
-</div>
+  <div id="editorSection" @change="handleChange"></div>
 </template>
 
 <script>
-  import axios from 'axios';
-  import {Loading} from 'element-ui'
-  import E from 'wangeditor'
-  var editor;
+import Editor from "tui-editor"; /* ES6 */
+import "tui-editor/dist/tui-editor.css"; // editor's ui
+import "tui-editor/dist/tui-editor-contents.css"; // editor's content
+import "codemirror/lib/codemirror.css"; // codemirror
+import "highlight.js/styles/github.css"; // code block highlight
+import { init } from "echarts/lib/echarts";
 
-  export default {
-    name: "WriteArticle",
-    data: function () {
-      return {
-        Title:'',
-        Content:''
+export default {
+  name: "mytuieditor",
+  mounted() {
+    this.initialize();
+  },
+  beforeDestroy() {
+    this.tuieditor = null;
+    delete this.tuieditor;
+  },
+  methods: {
+    initialize() {
+      if (this.$el) {
+        this.tuieditor = new Editor({
+          el: document.querySelector("#editorSection"),
+          initialEditType: "wysiwyg",
+          previewStyle: "vertical",
+          height: "300px"
+        });
+        this.tuieditor.getHtml();
       }
     },
 
-    mounted(){
-      var That = this;
-      editor = new E(this.$refs.editor);
-      editor.customConfig = {
-        onchange:function(html){
-          That.Content = html
-        },
-        uploadImgServer: '/api/UploadImg', // 上传图片到服务器
-        uploadFileName : 'Content', //后端使用这个字段获取图片信息
-        uploadImgMaxLength : 1 , // 限制一次最多上传 1 张图片
-      }
-      editor.create()
+    handleChange(value){
+      console.log('value: ', value);
     }
   }
+};
 </script>
 
 <style>

src/components/News/addOrEdit.vue

@@ -1,8 +1,40 @@
 <template>
     <div class="container">
         <div class="title">{{ showAdd ? '添加' : '修改' }}详情</div>
-        <el-form :model="formLabelAlign" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
-            <el-form-item label="位置：" prop="showPage">
+        <el-form :model="formLabelAlign" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
+            <el-form-item label="作者：" prop="author">
+                <el-input v-model="formLabelAlign.input" placeholder="作者" />
+            </el-form-item>
+            <el-form-item label="责编：" prop="editor">
+                <el-input v-model="formLabelAlign.editor" placeholder="责编" />
+            </el-form-item>
+            <el-form-item label="标题：" prop="title">
+                <el-input v-model="formLabelAlign.title" placeholder="标题" />
+            </el-form-item>
+            <el-form-item label="标题图片/视频：" prop="titleUrl">
+                <el-upload
+                    class="avatar-uploader"
+                    :action="`${BASE_API}/file/upload`"
+                    :show-file-list="false"
+                    :on-success="handleAvatarSuccess"
+                    :before-upload="beforeAvatarUpload"
+                    >
+                    <img v-if="formLabelAlign.showType === 1" :src="formLabelAlign.titleUrl" class="avatar w-full">
+                    <video v-else-if="formLabelAlign.showType === 2" controls="controls" :src="formLabelAlign.titleUrl"></video>
+                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+            </el-form-item>
+            <el-form-item label="跳转路径：" prop="jumpUrl">
+                <el-input v-model="formLabelAlign.jumpUrl" placeholder="跳转路径" />
+            </el-form-item>
+            <el-form-item label="发表时间：" prop="publishTime">
+                <el-date-picker
+                    v-model="formLabelAlign.publishTime"
+                    type="date"
+                    placeholder="选择日期">
+                </el-date-picker>
+            </el-form-item>
+            <el-form-item label="页面显示位置：" prop="showPage">
                 <el-cascader
                     v-model="formLabelAlign.showPage"
                     :props="props"
@@ -10,6 +42,22 @@
                     @change="handleChange">
                 </el-cascader>
             </el-form-item>
+            <el-form-item label="标题路径显示类型：" prop="showType">
+                <el-radio-group v-model="formLabelAlign.showType" @change="changeShowType">
+                    <el-radio :label="0">文本</el-radio>
+                    <el-radio :label="1">图片</el-radio>
+                    <el-radio :label="2">视频</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="来源：" prop="source">
+                <el-input v-model="formLabelAlign.source" placeholder="来源" />
+            </el-form-item>
+            <el-form-item label="提交状态：" prop="submitStatus">
+                <el-radio-group v-model="formLabelAlign.submitStatus" @change="changeSubmitStatus">
+                    <el-radio :label="0">保存</el-radio>
+                    <el-radio :label="1">发布</el-radio>
+                </el-radio-group>
+            </el-form-item>
             <el-form-item label="正文：" prop="content">
                 <!-- <editor /> -->
                 <el-input
@@ -49,7 +97,8 @@
                 labelPosition: 'right',
                 formLabelAlign: {
                     showPage: ['00', '0000'],
-                    content: ''
+                    content: '',
+                    showType: 0
                 },
                 BASE_API,
                 tabList,
@@ -68,9 +117,9 @@
 
         mounted() {
             if(this.currList && this.currList && !this.showAdd){
-                const { detailId, showPage } = this.currList
+                const { showPage } = this.currList
                 this.getDetail()
-                this.formLabelAlign.detailId = detailId;
+                this.formLabelAlign = this.currList
                 this.formLabelAlign.showPage.splice(0, 1, showPage.slice(0, 2))
                 this.formLabelAlign.showPage.splice(1, 1, showPage)
             }else{
@@ -82,11 +131,43 @@
         },
 
         methods: {
+            /**
+             * 上传预览图
+             * @param {*} res
+             * @param {*} file
+             */
+            handleAvatarSuccess(res) {
+                if (res.data && res.data.path) {
+                    this.formLabelAlign.titleUrl = res.data.path;
+                }
+            },
+            beforeAvatarUpload(file) {
+                // const isJPG = file.type === 'image/jpeg';
+                // if (!isJPG) {
+                    //   ElMessage.error('上传头像图片只能是 JPG 格式!');
+                // }
+                const isLt2M = file.size / 1024 / 1024 < 2;
+                if (!isLt2M) {
+                    ElMessage.error('上传头像图片大小不能超过 2MB!');
+                }
+                return isLt2M;
+            },
+
             // 位置选择
             handleChange(value) {
                 this.formLabelAlign.showPage = value
             },
 
+            // 修改标题路径显示类型
+            changeShowType(value){
+                this.formLabelAlign.showType = value;
+            },
+
+            // 修改提交状态
+            changeSubmitStatus(value){
+                this.formLabelAlign.submitStatus = value;
+            },
+
             submit(formName) {
                 this.$refs.ruleForm.validate((valid) => {
                     if (valid) {

src/components/News/detailContent.vue

@@ -1,5 +1,6 @@
 <template>
-  <el-descriptions title="垂直带边框列表" direction="vertical" :column="3" border>
+<div class="w-full">
+  <!-- <el-descriptions title="垂直带边框列表" direction="vertical" :column="3" border>
     <el-descriptions-item label="发表时间">{{ $moment(list.publishTime).format('YYYY-MM-DD HH:mm') }}</el-descriptions-item>
     <el-descriptions-item label="创建时间">{{ $moment(list.createdAt).format('YYYY-MM-DD HH:mm') }}</el-descriptions-item>
     <el-descriptions-item label="修改时间" :span="2">{{ $moment(list.updatedAt).format('YYYY-MM-DD HH:mm') }}</el-descriptions-item>
@@ -11,7 +12,21 @@
       <div v-if="detailContent && detailContent.content" v-html="detailContent.content"></div>
       <div v-else>暂无</div>
     </el-descriptions-item>
-  </el-descriptions>
+  </el-descriptions> -->
+
+    <div>发表时间: {{ $moment(list.publishTime).format('YYYY-MM-DD HH:mm') }}</div>
+    <div>创建时间: {{ $moment(list.createdAt).format('YYYY-MM-DD HH:mm') }}</div>
+    <div>修改时间: {{ $moment(list.updatedAt).format('YYYY-MM-DD HH:mm') }}</div>
+    <div></div>
+    <div>标题显示类型: {{ list.showType == 0 ? '文本' : list.showType == 1 ? '图片' : list.showType == 2 ? '视频' : '' }}</div>
+    <div class="ml-5">跳转路径: {{ list.jumpUrl }}</div>
+    <div v-if="detailContent && detailContent.content" v-html="detailContent.content"></div>
+    <div v-else>暂无</div>
+    <div>责编: {{ list.editor }}</div>
+    <div>来源: {{ list.source }}</div>
+    <!-- 关联文章信息 -->
+
+  </div>
 </template>
 
 <script>

src/components/News/index.vue

@@ -18,20 +18,7 @@
                 >
                 <el-table-column type="expand">
                     <template slot-scope="lists">
-                        <div class="w-full">
-                            <detail-content :list="lists.row" :detailContent="detailContent" />
-                            <!-- <div>发表时间: {{ $moment(lists.row.publishTime).format('YYYY-MM-DD HH:mm') }}</div>
-                            <div>创建时间: {{ $moment(lists.row.createdAt).format('YYYY-MM-DD HH:mm') }}</div>
-                            <div>修改时间: {{ $moment(lists.row.updatedAt).format('YYYY-MM-DD HH:mm') }}</div>
-                            <div></div>
-                            <div>标题显示类型: {{ lists.row.showType == 0 ? '文本' : lists.row.showType == 1 ? '图片' : lists.row.showType == 2 ? '视频' : '' }}</div>
-                            <div class="ml-5">跳转路径: {{ lists.row.jumpUrl }}</div>
-                            <div v-if="detailContent && detailContent.content" v-html="detailContent.content"></div>
-                            <div v-else>暂无</div>
-                            <div>责编: {{ lists.row.editor }}</div>
-                            <div>来源: {{ lists.row.source }}</div> -->
-                            <!-- 关联文章信息 -->
-                        </div>
+                        <detail-content :list="lists.row" :detailContent="detailContent" />
                     </template>
                 </el-table-column>
                 <el-table-column