更新问题答疑完整功能

chenyunhao
Showing 6 changed files with 81 additions and 52 deletions
src/components/WangEditor/index.vue
src/main.js
src/permission.js
src/styles/index.scss
src/views/Q&A/article/detail.vue
src/views/Q&A/article/list.vue
--- a/src/components/WangEditor/index.vue
View file @27abcbe
+++ b/src/components/WangEditor/index.vue
View file @27abcbe
@@ -12,6 +12,7 @@
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
+      @customPaste="customPaste"
    />
  </div>
 </template><script>
@@ -87,25 +88,13 @@ export default Vue.extend({
  },
  methods: {
    onCreated(editor) {
-      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
-    },
-    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
      editor.on("modalOrPanelShow", modalOrPanel => {});
-      // 可监听 `modalOrPanelShow` 和 `modalOrPanelHide` 自定义事件来设置样式、蒙层
-      // this.editor.on("modalOrPanelShow", modalOrPanel => {
-      //   modalOrPanel.isShow = false;
-      //   // modalOrPanel.$elem[0].style.display = "none";
-      //   // if (modalOrPanel.type !== "modal") return;
-      //   // const { $elem } = modalOrPanel; // modal element
-      //   // 设置 modal 样式（定位、z-index）
-      //   // 显示蒙层
-      // });
      this.editor.on("modalOrPanelHide", () => {
        // 隐藏蒙层
      });
    },
    onOk() {
      this.editor.restoreSelection();
      SlateTransforms.setNodes(
@@ -114,10 +103,14 @@ export default Vue.extend({
        { match: n => SlateElement.isElement(n) }
      );
    },
    onChange(editor) {
      console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
-      // console.log(this.editor.getFragment());
+      this.html = this.pasteTextHandle("aa");
-    }
+    },
+    customPaste(editor, event) {
+    },
  },
  mounted() {
    setTimeout(() => {
--- a/src/main.js
View file @27abcbe
+++ b/src/main.js
View file @27abcbe
@@ -12,7 +12,7 @@ import store from './store'
 import router from './router'
 import '@/icons' // icon
-// import '@/permission' // permission control
+import '@/permission' // permission control
 import {
--- a/src/permission.js
View file @27abcbe
+++ b/src/permission.js
View file @27abcbe
@@ -2,32 +2,23 @@ import router from './router'
 import store from './store'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
-import { Message } from 'element-ui'
+import {
-import { getToken } from '@/utils/auth' // getToken from cookie
+  Message
+} from 'element-ui'
+import {
+  getToken
+} from '@/utils/auth' // getToken from cookie
-NProgress.configure({ showSpinner: false })// NProgress configuration
+NProgress.configure({
+  showSpinner: false
+}) // NProgress configuration
 const whiteList = ['/login'] // 不重定向白名单
 router.beforeEach((to, from, next) => {
+  console.log('getToken()', getToken())
  NProgress.start()
  if (getToken()) {
-    if (to.path === '/login') {
-      next({ path: '/' })
-      NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
-    } else {
-      if (store.getters.roles.length === 0) {
-        store.dispatch('GetInfo').then(res => { // 拉取用户信息
-          next()
-        }).catch((err) => {
-          store.dispatch('FedLogOut').then(() => {
-            Message.error(err || 'Verification failed, please login again')
-            next({ path: '/' })
-          })
-        })
-      } else {
    next()
-      }
-    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
--- a/src/styles/index.scss
View file @27abcbe
+++ b/src/styles/index.scss
View file @27abcbe
@@ -102,3 +102,7 @@ a:hover {
 .el-date-editor .el-range-separator {
  padding: 0;
 }
+.maxItem {
+  width: 100%;
+}
--- a/src/views/Q&A/article/detail.vue
View file @27abcbe
+++ b/src/views/Q&A/article/detail.vue
View file @27abcbe
@@ -12,12 +12,19 @@
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.9)"
    >
+      <el-form-item label="类型">
+        <el-select v-model="editForm.type" placeholder="请选择类型">
+          <el-option key="0" label="文章" :value="0"></el-option>
+          <el-option key="1" label="外链" :value="1"></el-option>
+        </el-select>
+      </el-form-item>
      <el-form-item
        label="所属分类"
-        prop="classifyCode"
+        prop="classifyCodes"
        :rules="{ required: true, message: '所属分类不能为空', trigger: 'change' }"
      >
-        <el-select class="maxItem" v-model="editForm.classifyCode" placeholder="请选择所属分类">
+        <el-select class="maxItem" v-model="editForm.classifyCodes" placeholder="请选择所属分类" multiple>
          <el-option
            v-for="item in classifyList"
            :key="item.classifyCode"
@@ -35,6 +42,11 @@
        <el-input v-model="editForm.articleTitle" placeholder="请输入标题"></el-input>
      </el-form-item>
+      <el-form-item v-if="editForm.type == 1" label="外部链接" prop="outerLink">
+        <el-input v-model="editForm.outerLink" placeholder="请输入外部链接"></el-input>
+      </el-form-item>
+      <template v-else-if="editForm.type == 0">
        <el-form-item
          label="内容"
          prop="content"
@@ -68,17 +80,12 @@
          <el-input-number v-model="editForm.orderId" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="是否在线" prop="onlineStatus">
-        <el-switch
+          <el-switch v-model="editForm.onlineStatus" inactive-color="rgb(234,236,240)"></el-switch>
-          v-model="editForm.onlineStatus"
-          inactive-color="rgb(234,236,240)"
-        ></el-switch>
        </el-form-item>
        <el-form-item label="是否置顶" prop="inTop">
-        <el-switch
+          <el-switch v-model="editForm.inTop" inactive-color="rgb(234,236,240)"></el-switch>
-          v-model="editForm.inTop"
-          inactive-color="rgb(234,236,240)"
-        ></el-switch>
        </el-form-item>
+      </template>
    </el-form>
    <div slot="footer" class="dialog-footer" style="padding-right:30px">
      <el-button @click="componentClose">取 消</el-button>
@@ -104,7 +111,7 @@ export default {
      subPath: "article",
      editForm: {
        articleCode: null,
-        classifyCode: null,
+        classifyCodes: [],
        articleTitle: null,
        articleThumb: 0,
        author: null,
@@ -113,7 +120,9 @@ export default {
        orderId: 0,
        onlineStatus: true,
        inTop: false,
-        attachments: []
+        attachments: [],
+        outerLink: "",
+        type: 0
      },
      classifyList: [],
      extraData: {
@@ -143,6 +152,7 @@ export default {
        .then(res => {
          res.inTop = res.inTop == 1 ? true : false;
          res.onlineStatus = res.onlineStatus == 1 ? true : false;
+          res.classifyCodes = res.classifyCodes.split(",");
          if (res.attachments) {
            res.attachments = JSON.parse(res.attachments);
@@ -150,6 +160,11 @@ export default {
            res.attachments = [];
          }
+          if (res.outerLink) {
+            res.type = 1;
+          } else {
+            res.type = 0;
+          }
          this.editForm = res;
        });
    },
@@ -178,6 +193,7 @@ export default {
          } else {
            editForm.attachments = "";
          }
+          editForm.classifyCodes = editForm.classifyCodes.join(",");
          console.log("this.editForm", editForm);
          app
--- a/src/views/Q&A/article/list.vue
View file @27abcbe
+++ b/src/views/Q&A/article/list.vue
View file @27abcbe
@@ -3,9 +3,25 @@
    <!-- 筛选参数 -->
    <el-header>
      <el-form :inline="true" style="display:flex">
-        <el-form-item style="flex-grow: 1">
+        <el-form-item>
          <el-input @change="getList" v-model="queryForm.query" placeholder="请输入标题名称"></el-input>
        </el-form-item>
+        <el-form-item style="flex-grow: 1">
+          <el-select
+            @change="getList"
+            class="maxItem"
+            v-model="queryForm.classifyCode"
+            placeholder="请选择分类"
+            clearable
+          >
+            <el-option
+              v-for="item in classifyList"
+              :key="item.classifyCode"
+              :label="item.classifyName"
+              :value="item.classifyCode"
+            ></el-option>
+          </el-select>
+        </el-form-item>
        <el-form-item>
          <el-button @click="handleShowEdit(null)" type="primary" icon="el-icon-plus">新建</el-button>
        </el-form-item>
@@ -90,9 +106,7 @@ export default {
        page: 1,
        size: 10,
        query: "",
-        onlineStatus: null,
+        classifyCode: ""
-        messageType: null,
-        vipMark: null
      }, //列表默认传参
      list: [], //列表数据
      total: 0, //列表总数
@@ -101,7 +115,8 @@ export default {
      pojo: null,
      showEdit: false,
-      showChangePwd: false
+      showChangePwd: false,
+      classifyList: []
    };
  },
  created() {
@@ -112,6 +127,7 @@ export default {
    // 初始化数据
    async initData() {
      this.getList();
+      this.getClassifyList();
    },
    // 获取列表
    getList(resize) {
@@ -140,6 +156,15 @@ export default {
        });
    },
+    getClassifyList() {
+      app
+        .get({ url: app.api.getArticleClassify, data: null })
+        .then(res => {
+          this.classifyList = res.list;
+        })
+        .catch(e => {});
+    },
    // 更新内容
    setList(item) {
      let editForm = JSON.parse(JSON.stringify(item));