产品管理功能完善

1. 产品管理维护功能完善
2. 跳转仪表盘问题修复

components/ImgCropper.vue

@@ -75,13 +75,8 @@ export default {
   methods: {
     onSubmit() {
       this.$refs.cropper.getCropData(data => {
-        // console.log(data)
         this.$emit('onSubmit',data)
       });
-
-      /*
-            this.$emit('onSubmit',this.cropImg)
-      */
     },
     onOpen() {
       this.oldAvatarUrl = JSON.parse(JSON.stringify(this.avatarUrl))

pages/admin.vue

@@ -1,13 +1,13 @@
 <template>
   <el-row type="flex" justify="center" :gutter="8">
     <el-col v-if="hasPermissions" :span="20">
-      <el-col :span="4">
+      <el-col :span="4" v-if="menus">
         <el-menu
           :default-active="activeMenu"
           class="el-menu-vertical-demo"
           @select="handleSelectMenu">
           <template v-for="menu in menus">
-            <el-menu-item :key="menu.name" :index="menu.name">
+            <el-menu-item v-if="!(menu.isEdit)||false" :key="menu.name" :index="menu.name">
               <i :class="menu.icon"></i>
               <span slot="title">{{ menu.title }}</span>
             </el-menu-item>
@@ -135,6 +135,14 @@ export default {
           path: '/admin/products',
           icon: 'el-icon-box',
           closable: true
+        },
+        {
+          title: '产品编辑',
+          name: 'admin-product-post-product_id',
+          path: '/admin/product/post/:id?',
+          icon: 'el-icon-postcard',
+          closable: true,
+          isEdit: true
         }
       ]
     }

pages/admin/product/post/_product_id.vue

@@ -1,18 +1,29 @@
 <template>
   <el-row class="products">
-    <el-col v-if="hasPermissions">
+    <el-col style="margin-bottom: 1rem;">
-      <el-col>
+      <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-input
+        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">首页</el-breadcrumb-item>
-          v-model="productTitle"
+        <el-breadcrumb-item :to="{ path: '/admin/products' }">产品管理</el-breadcrumb-item>
-          class="product-title"
+        <el-breadcrumb-item v-if="product.idProduct">编辑</el-breadcrumb-item>
-          placeholder="请输入标题"
+        <el-breadcrumb-item v-else>创建</el-breadcrumb-item>
-          @change="setLocalstorage('title',productTitle)">
+      </el-breadcrumb>
-        </el-input>
     </el-col>
     <el-col>
+      <el-form ref='productInfo' :model='productInfo' :rules='rules' label-poionsit='right' label-width='110px'>
+        <div style="margin-bottom:20px">
+          <img :src="productInfo.productImgUrl" style="width: 120px;height: 120px;margin: 0 auto;display: block"
+               @click="cropperVisible=true">
+        </div>
+        <el-form-item label='产品名称' prop='productTitle'>
+          <el-input v-model='productInfo.productTitle' placeholder='请输入产品名称'/>
+        </el-form-item>
+        <el-form-item label='产品价格' prop='productPrice'>
+          <el-input v-model='productInfo.productPrice' placeholder='请输入产品价格'/>
+        </el-form-item>
+        <el-form-item label='产品描述' prop='type'>
           <div id="contentEditor"></div>
-      </el-col>
+        </el-form-item>
-      <el-col style="margin-top: 1rem;">
+        <el-form-item label='标签' prop='tags'>
           <el-select
             style="width: 100%;"
             v-model="productTags"
@@ -24,7 +35,7 @@
             :remote-method="remoteMethod"
             placeholder="请选择文章标签"
             :loading="loading"
-          @change="setLocalstorage('tags',productTags)">
+            @change="setLocalstorage('tags', productTags)">
             <el-option
               v-for="item in options"
               :key="item.value"
@@ -32,27 +43,24 @@
               :value="item.value">
             </el-option>
           </el-select>
+        </el-form-item>
+      </el-form>
+
+      <el-col style="margin-top: 1rem;">
       </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 :loading="doLoading" plain type="primary" @click="postProduct">发布</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="productInfo.status === 0" :loading="doLoading" plain type="danger" @click="updateStatus">下架</el-button>
-        <el-button v-if="productStatus === '1'" :loading="doLoading" @click="saveArticle" plain>保存草稿</el-button>
+        <el-button v-else :loading="doLoading" plain type="danger" @click="updateStatus">上架</el-button>
-        <el-button v-if="productStatus === '0'" :loading="doLoading" type="primary" @click="postArticle" plain>更新</el-button>
+        <el-button v-if="productInfo.status === 0" :loading="doLoading" plain type="primary" @click="postProduct">更新
-        <el-button v-else type="primary" :loading="doLoading" @click="postArticle" plain>发布</el-button>
+        </el-button>
+        <el-button v-else :loading="doLoading" plain type="primary" @click="postProduct">发布</el-button>
       </el-col>
     </el-col>
-    <el-col v-else class="text-center">
+    <ImgCropper :avatarUrl="productInfo.productImgUrl||''" :visible.sync='cropperVisible'
-      <el-alert
+                @onSubmit="updateProductImgUrl"></ImgCropper>
-        title="用户无权限"
-        type="warning"
-        center
-        show-icon
-        :closable="false">
-      </el-alert>
-    </el-col>
   </el-row>
 </template>
 
@@ -60,9 +68,18 @@
 import Vue from 'vue';
 import {mapState} from 'vuex';
 import apiConfig from '~/config/api.config';
+import ImgCropper from "~/components/ImgCropper.vue";
+import VueCropper from "vue-cropper";
 
+const rules = {
+  productTitle: [
+    {required: true, message: '请输入公司名称', trigger: 'blur'},
+    {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
+  ],
+  productDescription: [{required: true, message: '请输入产品描述', trigger: 'blur'}]
+}
 export default {
-  name: "PostArticle",
+  name: "PostProducts",
   middleware: 'auth',
   validate({params, store}) {
     if (typeof params.product_id === 'undefined') {
@@ -76,23 +93,13 @@ export default {
         .catch(err => error({statusCode: 404}))
     ])
   },
+  components: {
+    VueCropper, ImgCropper
+  },
   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 {
@@ -102,21 +109,34 @@ export default {
         linkToImageURL: '',
         token: ''
       },
-      idArticle: 0,
+      productInfo: {
+        idProduct: 0,
         productTitle: '',
         productContent: '',
         productType: 0,
+        tags: '',
+        status: 0,
+        productPrice: 0,
+        productImgUrl: '',
+        productImgType: 0
+      },
       productTags: [],
-      productStatus: '0',
       options: [],
       list: [],
       loading: false,
       doLoading: false,
       isEdit: false,
-      notificationFlag: true
+      notificationFlag: true,
+      cropperVisible: false,
+      rules: rules,
     }
   },
   methods: {
+    updateProductImgUrl(data) {
+      this.productInfo.productImgUrl = data
+      this.productInfo.productImgType = '1'
+      this.cropperVisible = false
+    },
     _initEditor(data) {
       let _ts = this;
 
@@ -164,7 +184,7 @@ export default {
         tab: '\t',
         cdn: apiConfig.VDITOR,
         cache: {
-          enable: this.$route.params.product_id ? false : true,
+          enable: !this.$route.params.product_id,
           id: this.$route.params.product_id ? this.$route.params.product_id : '',
         },
         after() {
@@ -191,7 +211,7 @@ export default {
           /*url: `${process.env.Server}/api/console/markdown`,*/
           parse: (element) => {
             if (element.style.display === 'none') {
-              return
+
             }
             // LazyLoadImage();
             // Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
@@ -205,9 +225,7 @@ export default {
           url: this.tokenURL.URL,
           linkToImgUrl: this.tokenURL.linkToImageURL,
           token: this.tokenURL.token,
-          filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
+          filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '')
-          replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
-          replace('/\\s/g', '')
         },
         height: data.height,
         counter: 102400,
@@ -248,10 +266,10 @@ export default {
         this.options = [];
       }
     },
-    deleteArticle() {
+    deleteProduct() {
       let _ts = this;
       _ts.doLoading = true;
-      this.$confirm('确定删除吗?', '提示', {
+      this.$confirm('确定下架吗?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -267,7 +285,7 @@ export default {
           _ts.contentEditor.setValue('');
           _ts.$set(_ts, 'notificationFlag', false);
           _ts.$router.push({
-            name: 'index'
+            name: 'admin-products'
           })
         })
       }).catch(() => {
@@ -275,26 +293,27 @@ export default {
       });
 
     },
-    async postArticle() {
+    async postProduct() {
       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)) {
+      if (!(_ts.productInfo.productTitle && productContent)) {
         _ts.$message("标题/正文不能为空！");
         _ts.doLoading = false;
         return false;
       }
       let product = {
-        idArticle: _ts.idArticle,
+        idProduct: _ts.productInfo.idProduct,
-        productTitle: _ts.productTitle,
+        productTitle: _ts.productInfo.productTitle,
+        productPrice: _ts.productInfo.productPrice,
+        productImgType: _ts.productInfo.productImgType || '0',
+        productImgUrl: _ts.productInfo.productImgUrl,
+        tags: _ts.productTags.join(','),
         productContent: productContent,
         productContentHtml: productContentHtml,
-        productTags: _ts.productTags.join(","),
-        productStatus: 0
       };
-      _ts.$axios[id ? '$put' : '$post']('/api/product/post', product).then(function (res) {
+      _ts.$axios[_ts.productInfo.idProduct ? '$put' : '$post']('/api/product/post', product).then(function (res) {
         if (res) {
           if (res.message) {
             _ts.$message(res.message);
@@ -307,32 +326,32 @@ export default {
           _ts.$store.commit('product/clearDetailData')
           _ts.$set(_ts, 'notificationFlag', false);
           _ts.$router.push({
-            path: `/product/${res}`
+            name: 'admin-products'
           })
         }
       })
 
     },
-    async saveArticle() {
+    async saveProduct() {
       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)) {
+      if (!(_ts.productInfo.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,
-        productStatus: 1
+        ..._ts.productInfo
       };
-      _ts.$axios[id ? '$put' : '$post']('/api/product/post', product).then(function (res) {
+
+      _ts.$axios[_ts.productInfo.idProduct ? '$put' : '$post']('/api/product/post', product).then(function (res) {
         if (res) {
           if (res.message) {
             _ts.$message(res.message);
@@ -344,7 +363,7 @@ export default {
           _ts.contentEditor.setValue('');
           _ts.$set(_ts, 'notificationFlag', false);
           _ts.$router.push({
-            path: `/draft/${res}`
+            name: 'admin-products'
           })
         }
       })
@@ -356,6 +375,43 @@ export default {
           _ts.$set(_ts, 'list', res);
         }
       })
+    },
+    updateStatus() {
+      let _ts = this;
+      let product = _ts.productInfo
+      let title, status;
+      if (product.status === 0) {
+        title = '下架';
+        status = 1;
+      } else {
+        title = '上架';
+        status = 0;
+      }
+      _ts.$confirm('确定' + title + '产品 ' + product.productTitle + '?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        _ts.$axios.$patch('/api/admin/product/update-status', {
+          idProduct: product.idProduct,
+          status: status
+        }).then(function (res) {
+          if (res && res.message) {
+            _ts.$message.error(res.message);
+          } else {
+            _ts.$message({
+              type: 'success',
+              message: title + '成功!'
+            });
+          }
+        });
+      }).catch(() => {
+        _ts.$message({
+          type: 'info',
+          message: '已取消'
+        });
+      });
+
     }
   },
   beforeRouteLeave(to, from, next) {
@@ -370,7 +426,7 @@ export default {
       }).catch(() => {
         return false
       });
-      _ts.$store.commit("setActiveMenu", "product-post");
+      _ts.$store.commit("setActiveMenu", "admin-product-post-product_id");
     } else {
       next();
     }
@@ -379,22 +435,15 @@ export default {
     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');
+    _ts.$store.commit('setActiveMenu', 'admin-product-post-product_id');
     const responseData = await _ts.$axios.$get('/api/upload/token');
     if (responseData) {
       _ts.$set(_ts, 'tokenURL', {
@@ -410,14 +459,10 @@ export default {
       if (_ts.$route.params.product_id) {
         _ts.$set(_ts, 'isEdit', true);
         let product = _ts.product;
-        _ts.$set(_ts, 'idArticle', product.idArticle);
+        _ts.productInfo = JSON.parse(JSON.stringify(product))
-        _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
+        let productTags = product.tags?.split(',');
+        _ts.$set(_ts, 'productTags', productTags || []);
       } else {
         _ts.$set(_ts, 'isEdit', false);
       }

pages/admin/products.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <el-row style="margin-top: 20px;">
       <el-col style="margin-bottom: 1rem;">
         <el-breadcrumb separator-class="el-icon-arrow-right">
@@ -6,6 +7,9 @@
           <el-breadcrumb-item>产品管理</el-breadcrumb-item>
         </el-breadcrumb>
       </el-col>
+      <el-col>
+        <el-button type="primary" @click="handleAdd">新增产品</el-button>
+      </el-col>
       <el-col>
         <el-table
           :data="products.list"
@@ -38,20 +42,33 @@
             width="180"
             prop="createdTime">
           </el-table-column>
+          <el-table-column
+            label="标签">
+            <template slot-scope="scope">
+              <el-tag
+                style="margin-left: 0.5rem;"
+                v-for="tag in scope.row.tags?.split(',')"
+                :key="tag"
+                size="mini"
+                effect="plain">
+                # {{ tag }}
+              </el-tag>
+            </template>
+          </el-table-column>
           <el-table-column
             label="状态"
             width="180"
             prop="status">
             <template slot-scope="scope">
               <el-tag type="primary" disable-transitions>
-              {{ scope.row.status === '0' ? '正常' : '禁用' }}
+                {{ scope.row.status === 0 ? '正常' : '禁用' }}
               </el-tag>
             </template>
           </el-table-column>
           <el-table-column label="操作">
             <template slot-scope="scope">
               <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" plain>编辑</el-button>
-            <el-button v-if="scope.row.status == 1" size="mini" type="primary"
+              <el-button v-if="scope.row.status === 1" size="mini" type="primary"
                          @click="toggleStatus(scope.$index, scope.row)" plain>上架
               </el-button>
               <el-button v-else size="mini" type="danger" @click="toggleStatus(scope.$index, scope.row)" plain>下架
@@ -73,13 +90,14 @@
         </el-pagination>
       </el-col>
     </el-row>
+  </div>
 </template>
 
 <script>
 import {mapState} from 'vuex';
 
 export default {
-  name: "products",
+  name: "productsList",
   middleware: 'auth',
   fetch() {
     let {store, params, error} = this.$nuxt.context
@@ -96,19 +114,21 @@ export default {
   },
   data() {
     return {
-      order: 'desc'
+      order: 'desc',
+      editVisible: false,
+      formStore: {},
     }
   },
   methods: {
-    onRouter(name, data) {
+    // onRouter(name, data) {
-      this.$router.push({
+    //   this.$router.push({
-        path: `/${name}/${data}`
+    //     path: `/${name}/${data}`
-      })
+    //   })
-    },
+    // },
     toggleStatus(index, product) {
       let _ts = this;
       let title, status;
-      if (product.status == 0) {
+      if (product.status === 0) {
         title = '下架';
         status = 1;
       } else {
@@ -155,9 +175,14 @@ export default {
         rows: _ts.products.pageSize
       })
     },
-    handleEdit(index ,row) {
+    handleEdit(index, row) {
       this.$router.push({
-        path: `/admin/product/post/${row.idProduct}`
+        path: `/admin/product/post/${row.idProduct}`,
+      })
+    },
+    handleAdd() {
+      this.$router.push({
+        path: `/admin/product/post`,
       })
     }
   }

pages/admin/tag/post/_tag_id.vue

@@ -2,7 +2,7 @@
   <el-row style="margin-top: 20px;">
     <el-col style="margin-bottom: 1rem;">
       <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item :to="{ path: '/admin/tags' }">标签管理</el-breadcrumb-item>
         <el-breadcrumb-item v-if="tag.idTag">编辑</el-breadcrumb-item>
         <el-breadcrumb-item v-else>创建</el-breadcrumb-item>

pages/admin/tags.vue

@@ -2,7 +2,7 @@
   <el-row style="margin-top: 20px;">
     <el-col style="margin-bottom: 1rem;">
       <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>标签管理</el-breadcrumb-item>
       </el-breadcrumb>
     </el-col>

pages/admin/topic/_topic_uri.vue

@@ -2,7 +2,7 @@
   <el-row style="margin-top: 20px;">
     <el-col style="margin-bottom: 1rem;">
       <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item :to="{ path: '/admin/topics' }">专题管理</el-breadcrumb-item>
         <el-breadcrumb-item>{{ topic.topicTitle }}</el-breadcrumb-item>
       </el-breadcrumb>

pages/admin/topic/bind/_topic_id.vue

@@ -3,7 +3,7 @@
     <el-col>
       <el-col style="margin-bottom: 1rem;">
         <el-breadcrumb separator-class="el-icon-arrow-right">
-          <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">首页</el-breadcrumb-item>
           <el-breadcrumb-item :to="{ path: '/admin/topics' }">专题管理</el-breadcrumb-item>
           <el-breadcrumb-item :to="{ path: '/admin/topic/' + topic.topicUri }">{{ topic.topicTitle }}</el-breadcrumb-item>
           <el-breadcrumb-item>关联标签</el-breadcrumb-item>

pages/admin/topic/post/_topic_id.vue

@@ -2,7 +2,7 @@
   <el-row style="margin-top: 20px;">
     <el-col style="margin-bottom: 1rem;">
       <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item :to="{ path: '/admin/topics' }">专题管理</el-breadcrumb-item>
         <el-breadcrumb-item v-if="topic.idTopic" :to="{ path: '/admin/topic/' + topic.topicUri }">{{
             topic.topicTitle

pages/admin/topics.vue

@@ -3,7 +3,7 @@
     <el-row style="margin-top: 20px;">
       <el-col style="margin-bottom: 1rem;">
         <el-breadcrumb separator-class="el-icon-arrow-right">
-          <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">首页</el-breadcrumb-item>
           <el-breadcrumb-item>专题管理</el-breadcrumb-item>
         </el-breadcrumb>
       </el-col>

pages/user/settings/account.vue

@@ -93,7 +93,6 @@
 <script>
 import {mapState} from 'vuex';
 import ImgCropper from "~/components/ImgCropper.vue";
-import VueCropper from "vue-cropper";
 import saveSvg from "save-svg-as-png";
 import Avataaars from 'vuejs-avataaars';
 
@@ -103,7 +102,7 @@ export default {
   name: "account",
   middleware: 'auth',
   components: {
-    ImgCropper, VueCropper, Avataaars
+    ImgCropper, Avataaars
   },
   computed: {
     ...mapState({