详情页

src/api/contentDetail.js

@@ -17,6 +17,22 @@ export function POST_QUERY_DETAIL(params) {
     })
 }
 
+/**
+ *  单个内容详情
+ * @param params
+ * @returns {Promise<T | never>}
+ * @constructor
+ */
+export function QUERY_DETAIL(params) {
+    return request({
+        url: `${contentDetail}/detail`,
+        method: 'post',
+        data:params
+    }).then(res => {
+        return res.data
+    })
+}
+
 /**
  * 删除内容详情
  * @param params

src/components/Detail/addOrEdit.vue

@@ -42,7 +42,7 @@
                 labelPosition: 'right',
                 formLabelAlign: {
                     showPage: ['00', '0000'],
-                    content: 0
+                    content: ''
                 },
                 BASE_API,
                 tabList,
@@ -55,9 +55,6 @@
                     showPage: [
                         { type: 'array', required: true, message: '请选择位置', trigger: 'change' }
                     ],
-                    content: [
-                        { required: true, message: '请选择状态', trigger: 'change' }
-                    ],
                 }
             }
         },

src/components/Detail/editor.vue

@@ -1,3 +1,43 @@
 <template>
-  <div>55565</div>
+  <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/index.vue

@@ -11,28 +11,23 @@
         <div class="table">
             <el-table
                     :data="lists"
-                    style="width: 100%">
+                    style="width: 100%"
+                    @expand-change="getDetail"
+                    >
                 <el-table-column type="expand">
                     <template slot-scope="props">
                         <el-form label-position="left" inline class="demo-table-expand">
-                            <el-form-item label="商品名称">
-                                商品名称
-                                <!-- <span>{{ props.row.name }}</span> -->
+                            <el-form-item label="正文">
+                                {{ lists.row.content || '' }}
                             </el-form-item>
                         </el-form>
                     </template>
                 </el-table-column>
-                <el-table-column
-                    prop="id"
-                    label="序号"
-                    type="index"
-                    align="center">
-                </el-table-column>
                 <el-table-column
                     prop="name"
                     label="位置"
                     align="center"
-                    width="250">
+                    >
                     <template slot-scope="lists">
                         {{ setCode(lists.row.showPage) }}
                     </template>
@@ -41,27 +36,27 @@
                     prop="name"
                     label="创建时间"
                     align="center"
-                    width="250">
+                    >
                     <template slot-scope="lists">
-                        {{ setCode(lists.row.createdAt) }}
+                        {{ $moment(lists.row.createdAt).format('YYYY-MM-DD HH:mm') }}
                     </template>
                 </el-table-column>
                 <el-table-column
                     prop="name"
                     label="修改时间"
                     align="center"
-                    width="250">
+                    >
                     <template slot-scope="lists">
-                        {{ setCode(lists.row.updatedAt) }}
+                        {{ $moment(lists.row.updatedAt).format('YYYY-MM-DD HH:mm') }}
                     </template>
                 </el-table-column>
                 <el-table-column
                     prop="name"
                     label="最后修改人登录名"
                     align="center"
-                    width="250">
+                    >
                     <template slot-scope="lists">
-                        {{ setCode(lists.row.modifyName) }}
+                        {{ lists.row.modifyName }}
                     </template>
                 </el-table-column>
 
@@ -69,7 +64,7 @@
                     fixed="right"
                     label="操作"
                     align="center"
-                    width="250">
+                    >
                     <template slot-scope="lists">
                         <el-button
                             type="primary"
@@ -120,6 +115,7 @@
     const AddOrEdit = () => import('./addOrEdit.vue');
     import {
         POST_QUERY_DETAIL,
+        QUERY_DETAIL,
         DELETE_DETAIL
     } from '@/api/contentDetail'
     import Alert from "@/utils/alert";
@@ -155,7 +151,7 @@
         },
         methods: {
             /**
-             * 获取轮播图列表
+             * 获取详情列表
              */
             getList() {
                 const { pageNum, pageSize, showPage } = this;
@@ -184,6 +180,30 @@
                 this.getList()
             },
 
+            /**
+             * 单个内容详情
+             */
+            getDetail(row){
+                let arr = this.lists
+                let index = arr.findIndex(item => item.detailId === row.detailId)
+                const { showPage } = this;
+                const params = {
+                    detailId: row.detailId,
+                    pageNum: 1,
+                    pageSize: 10,
+                    showPage
+                };
+                QUERY_DETAIL(params).then(res => {
+                    console.log('res: ', res);
+                    if(res.code === 200){
+                        arr[index].content = res.data.content
+                        this.lists = [...arr]
+                    }else{
+                        Alert.fail('获取失败');
+                    }
+                });
+            },
+
             // 设置显示位置
             setCode(showPage){
                 let item = null
@@ -197,7 +217,7 @@
                         }
                     }
                 }
-                return item.title
+                return item && item.title ? item.title : ''
             },
 
             addModal(){
@@ -227,14 +247,14 @@
                 const params = {
                     id
                 };
-                DELETE_DETAIL(params).then((res) => {
-                    if(res.code === 200){
-                        Alert.success('删除成功');
-                        this.getList()
-                    }else{
-                        Alert.fail(res.msg || '删除失败');
-                    }
-                });
+                // DELETE_DETAIL(params).then((res) => {
+                //     if(res.code === 200){
+                        // Alert.success('删除成功');
+                //         this.getList()
+                //     }else{
+                //         Alert.fail(res.msg || '删除失败');
+                //     }
+                // });
                 this.visible = false
             },
         }