From 9b918f8c3d7a9211d45bae93d81a6ff2dd6c23f4 Mon Sep 17 00:00:00 2001
From: ronger <ronger-x@outlook.com>
Date: Fri, 22 Dec 2023 09:44:05 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(components):=20=E4=BB=AA=E8=A1=A8?=
 =?UTF-8?q?=E7=9B=98=E7=95=8C=E9=9D=A2=E4=B8=8B=E6=9E=B6=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/admin/dashboard.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/admin/dashboard.vue b/pages/admin/dashboard.vue
index 71a331d..fc3dec2 100644
--- a/pages/admin/dashboard.vue
+++ b/pages/admin/dashboard.vue
@@ -71,9 +71,9 @@
                 <el-button size="mini" type="primary" @click="updateTags(scope.$index, scope.row)" plain>编辑标签
                 </el-button>
                 <el-button v-if="scope.row.articleStatus === '0'" size="mini" type="danger"
-                           @click="toggleStatus(scope.$index, scope.row)" plain>下架
+                           @click="toggleStatus(scope.row.idArticle, 1)" plain>下架
                 </el-button>
-                <el-button v-else size="mini" type="success" @click="toggleStatus(scope.$index, scope.row)" plain>上架
+                <el-button v-else size="mini" type="success" @click="toggleStatus(scope.row.idArticle, 0)" plain>上架
                 </el-button>
               </template>
             </el-table-column>

From ea3b66847514a0ca21c66242373631d7a86bc0d8 Mon Sep 17 00:00:00 2001
From: ronger <ronger-x@outlook.com>
Date: Fri, 16 Feb 2024 14:23:44 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(components):=20=E4=BA=A7=E5=93=81?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/admin/product/post/_product_id.vue | 439 +++++++++++++++++++++++
 pages/admin/products.vue                 |   6 +-
 2 files changed, 444 insertions(+), 1 deletion(-)
 create mode 100644 pages/admin/product/post/_product_id.vue

diff --git a/pages/admin/product/post/_product_id.vue b/pages/admin/product/post/_product_id.vue
new file mode 100644
index 0000000..2427d0b
--- /dev/null
+++ b/pages/admin/product/post/_product_id.vue
@@ -0,0 +1,439 @@
+<template>
+  <el-row class="products">
+    <el-col v-if="hasPermissions">
+      <el-col>
+        <el-input
+          v-model="productTitle"
+          class="product-title"
+          placeholder="请输入标题"
+          @change="setLocalstorage('title',productTitle)">
+        </el-input>
+      </el-col>
+      <el-col>
+        <div id="contentEditor"></div>
+      </el-col>
+      <el-col style="margin-top: 1rem;">
+        <el-select
+          style="width: 100%;"
+          v-model="productTags"
+          multiple
+          filterable
+          allow-create
+          default-first-option
+          remote
+          :remote-method="remoteMethod"
+          placeholder="请选择文章标签"
+          :loading="loading"
+          @change="setLocalstorage('tags',productTags)">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-col>
+      <el-col v-if="!isEdit" style="margin-top: 1rem;padding-right:3rem;text-align: right;">
+        <el-button :loading="doLoading" @click="saveArticle" plain>保存草稿</el-button>
+        <el-button type="primary" :loading="doLoading" @click="postArticle" plain>发布</el-button>
+      </el-col>
+      <el-col v-else style="margin-top: 1rem;padding-right:3rem;text-align: right;">
+        <el-button type="danger" :loading="doLoading" @click="deleteArticle" plain>删除</el-button>
+        <el-button v-if="productStatus === '1'" :loading="doLoading" @click="saveArticle" plain>保存草稿</el-button>
+        <el-button v-if="productStatus === '0'" :loading="doLoading" type="primary" @click="postArticle" plain>更新</el-button>
+        <el-button v-else type="primary" :loading="doLoading" @click="postArticle" plain>发布</el-button>
+      </el-col>
+    </el-col>
+    <el-col v-else class="text-center">
+      <el-alert
+        title="用户无权限"
+        type="warning"
+        center
+        show-icon
+        :closable="false">
+      </el-alert>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import Vue from 'vue';
+import {mapState} from 'vuex';
+import apiConfig from '~/config/api.config';
+
+export default {
+  name: "PostArticle",
+  middleware: 'auth',
+  validate({params, store}) {
+    if (typeof params.product_id === 'undefined') {
+      return true;
+    }
+    return params.product_id && !isNaN(Number(params.product_id))
+  },
+  asyncData({store, params, error}) {
+    return Promise.all([
+      store.dispatch('product/fetchPostDetail', params)
+        .catch(err => error({statusCode: 404}))
+    ])
+  },
+  computed: {
+    ...mapState({
+      product: state => state.product.detail.data
+    }),
+    hasPermissions() {
+      let account = this.$store.state.auth.user?.nickname;
+      if (account) {
+        if (this.$route.params.product_id) {
+          if (account === this.product.productAuthor.userNickname) {
+            return true;
+          }
+        } else {
+          return true;
+        }
+      }
+      return this.$auth.hasScope('blog_admin') || this.$auth.hasScope('admin');
+    }
+  },
+  data() {
+    return {
+      contentEditor: null,
+      tokenURL: {
+        URL: '',
+        linkToImageURL: '',
+        token: ''
+      },
+      idArticle: 0,
+      productTitle: '',
+      productContent: '',
+      productType: 0,
+      productTags: [],
+      productStatus: '0',
+      options: [],
+      list: [],
+      loading: false,
+      doLoading: false,
+      isEdit: false,
+      notificationFlag: true
+    }
+  },
+  methods: {
+    _initEditor(data) {
+      let _ts = this;
+
+      let toolbar = [
+        'emoji',
+        'headings',
+        'bold',
+        'italic',
+        'strike',
+        'link',
+        '|',
+        'list',
+        'ordered-list',
+        'check',
+        'outdent',
+        'indent',
+        '|',
+        'quote',
+        'line',
+        'code',
+        'inline-code',
+        'insert-before',
+        'insert-after',
+        '|',
+        'upload',
+        // 'record',
+        'table',
+        '|',
+        'undo',
+        'redo',
+        '|',
+        'edit-mode',
+        {
+          name: 'more',
+          toolbar: [
+            'fullscreen',
+            'both',
+            'preview',
+            'info'
+          ],
+        }]
+      return new Vue.Vditor(data.id, {
+        toolbar,
+        mode: 'sv',
+        tab: '\t',
+        cdn: apiConfig.VDITOR,
+        cache: {
+          enable: this.$route.params.product_id ? false : true,
+          id: this.$route.params.product_id ? this.$route.params.product_id : '',
+        },
+        after() {
+          _ts.contentEditor.setValue(data.value ? data.value : '');
+        },
+        hint: {
+          emoji: Vue.emoji
+        },
+        preview: {
+          hljs: {
+            enable: true,
+            lineNumber: true,
+            style: 'github'
+          },
+          markdown: {
+            toc: true,
+            autoSpace: true
+          },
+          math: {
+            inlineDigit: true
+          },
+          delay: 500,
+          mode: data.mode,
+          /*url: `${process.env.Server}/api/console/markdown`,*/
+          parse: (element) => {
+            if (element.style.display === 'none') {
+              return
+            }
+            // LazyLoadImage();
+            // Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
+          },
+          theme: {
+            cdn: apiConfig.VDITOR_CSS
+          }
+        },
+        upload: {
+          max: 10 * 1024 * 1024,
+          url: this.tokenURL.URL,
+          linkToImgUrl: this.tokenURL.linkToImageURL,
+          token: this.tokenURL.token,
+          filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
+          replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
+          replace('/\\s/g', '')
+        },
+        height: data.height,
+        counter: 102400,
+        resize: {
+          enable: data.resize,
+        },
+        lang: this.$store.state.locale,
+        placeholder: data.placeholder,
+      })
+    },
+    setLocalstorage(type) {
+      if (typeof arguments[0] === 'object') {
+        localStorage.setItem('productTags', arguments[1]);
+        return
+      }
+      switch (type) {
+        case 'title': {
+          localStorage.setItem('product-title', arguments[1])
+          break;
+        }
+        case 'tags': {
+          localStorage.setItem('product-tags', arguments[1]);
+          break;
+        }
+      }
+    },
+    remoteMethod(query) {
+      if (query !== '') {
+        this.loading = true;
+        setTimeout(() => {
+          this.loading = false;
+          this.options = this.list.filter(item => {
+            return item.label.toLowerCase()
+              .indexOf(query.toLowerCase()) > -1;
+          });
+        }, 200);
+      } else {
+        this.options = [];
+      }
+    },
+    deleteArticle() {
+      let _ts = this;
+      _ts.doLoading = true;
+      this.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let id = _ts.$route.params.product_id;
+        _ts.$axios.$delete('/api/product/delete/' + id).then(function (res) {
+          if (res && res.message) {
+            _ts.$message(res.message);
+            return false;
+          }
+          localStorage.removeItem('product-title');
+          localStorage.removeItem('product-tags');
+          _ts.contentEditor.setValue('');
+          _ts.$set(_ts, 'notificationFlag', false);
+          _ts.$router.push({
+            name: 'index'
+          })
+        })
+      }).catch(() => {
+        _ts.doLoading = false;
+      });
+
+    },
+    async postArticle() {
+      let _ts = this;
+      _ts.doLoading = true;
+      let id = _ts.$route.params.product_id;
+      let productContent = _ts.contentEditor.getValue();
+      let productContentHtml = await _ts.contentEditor.getHTML();
+      if (!(_ts.productTitle && productContent)) {
+        _ts.$message("标题/正文不能为空！");
+        _ts.doLoading = false;
+        return false;
+      }
+      let product = {
+        idArticle: _ts.idArticle,
+        productTitle: _ts.productTitle,
+        productContent: productContent,
+        productContentHtml: productContentHtml,
+        productTags: _ts.productTags.join(","),
+        productStatus: 0
+      };
+      _ts.$axios[id ? '$put' : '$post']('/api/product/post', product).then(function (res) {
+        if (res) {
+          if (res.message) {
+            _ts.$message(res.message);
+            _ts.doLoading = false;
+            return false;
+          }
+          localStorage.removeItem('product-title');
+          localStorage.removeItem('product-tags');
+          _ts.contentEditor.setValue('');
+          _ts.$store.commit('product/clearDetailData')
+          _ts.$set(_ts, 'notificationFlag', false);
+          _ts.$router.push({
+            path: `/product/${res}`
+          })
+        }
+      })
+
+    },
+    async saveArticle() {
+      let _ts = this;
+      _ts.doLoading = true;
+      let id = _ts.$route.params.product_id;
+      let productContent = _ts.contentEditor.getValue();
+      let productContentHtml = await _ts.contentEditor.getHTML();
+      if (!(_ts.productTitle && productContent)) {
+        _ts.$message("标题/正文不能为空！");
+        _ts.doLoading = false;
+        return false;
+      }
+      let product = {
+        idArticle: _ts.idArticle,
+        productTitle: _ts.productTitle,
+        productContent: productContent,
+        productContentHtml: productContentHtml,
+        productTags: _ts.productTags.join(","),
+        productStatus: 1
+      };
+      _ts.$axios[id ? '$put' : '$post']('/api/product/post', product).then(function (res) {
+        if (res) {
+          if (res.message) {
+            _ts.$message(res.message);
+            _ts.doLoading = false;
+            return false;
+          }
+          localStorage.removeItem('product-title');
+          localStorage.removeItem('product-tags');
+          _ts.contentEditor.setValue('');
+          _ts.$set(_ts, 'notificationFlag', false);
+          _ts.$router.push({
+            path: `/draft/${res}`
+          })
+        }
+      })
+    },
+    getTags() {
+      let _ts = this;
+      _ts.$axios.$get('/api/tag/tags').then(function (res) {
+        if (res) {
+          _ts.$set(_ts, 'list', res);
+        }
+      })
+    }
+  },
+  beforeRouteLeave(to, from, next) {
+    let _ts = this;
+    if (_ts.notificationFlag) {
+      _ts.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        next();
+      }).catch(() => {
+        return false
+      });
+      _ts.$store.commit("setActiveMenu", "product-post");
+    } else {
+      next();
+    }
+  },
+  beforeDestroy() {
+    window.onbeforeunload = null;
+  },
+  async mounted() {
+    if (!this.hasPermissions) {
+      return
+    }
+    window.addEventListener('beforeunload', e => {
+      e = e || window.event;
+
+      // 兼容IE8和Firefox 4之前的版本
+      if (e) {
+        e.returnValue = '关闭提示';
+      }
+
+      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
+      return '关闭提示';
+    });
+    let _ts = this;
+    _ts.$store.commit('setActiveMenu', 'product-post');
+    const responseData = await _ts.$axios.$get('/api/upload/token');
+    if (responseData) {
+      _ts.$set(_ts, 'tokenURL', {
+        token: responseData.uploadToken || '',
+        URL: responseData.uploadURL || '',
+        linkToImageURL: responseData.linkToImageURL || ''
+      })
+    }
+
+    _ts.getTags();
+    Vue.nextTick(() => {
+      let productContent = '';
+      if (_ts.$route.params.product_id) {
+        _ts.$set(_ts, 'isEdit', true);
+        let product = _ts.product;
+        _ts.$set(_ts, 'idArticle', product.idArticle);
+        _ts.$set(_ts, 'productTitle', product.productTitle);
+        _ts.$set(_ts, 'productContent', product.productContent);
+        _ts.$set(_ts, 'productStatus', product.productStatus);
+        _ts.$set(_ts, 'productTags', (product.productTags).split(','));
+        localStorage.setItem("product-title", product.productTitle);
+        localStorage.setItem("product-tags", (product.productTags).split(','));
+        productContent = product.productContent
+      } else {
+        _ts.$set(_ts, 'isEdit', false);
+      }
+      _ts.contentEditor = _ts._initEditor({
+        id: 'contentEditor',
+        mode: 'both',
+        height: 480,
+        placeholder: '', //_ts.$t('inputContent', _ts.$store.state.locale)
+        resize: false,
+        value: productContent
+      });
+    })
+  }
+}
+</script>
+
+<style lang="less">
+@import "~vditor/src/assets/less/index.less";
+</style>
diff --git a/pages/admin/products.vue b/pages/admin/products.vue
index 9cf9fa6..f94ae64 100644
--- a/pages/admin/products.vue
+++ b/pages/admin/products.vue
@@ -155,7 +155,11 @@ export default {
         rows: _ts.products.pageSize
       })
     },
-    handleEdit(index ,row) {}
+    handleEdit(index ,row) {
+      this.$router.push({
+        path: `/admin/product/post/${row.idProduct}`
+      })
+    }
   }
 }
 </script>