产品管理功能完善

1. 产品管理维护功能完善 2. 跳转仪表盘问题修复
2024-03-20 21:46:00 +08:00 · 2024-03-20 21:46:00 +08:00 · aceb025a7d
commit aceb025a7d
parent 14c2fccc56 8b1ff851e6
11 changed files with 279 additions and 207 deletions
--- a/components/ImgCropper.vue
+++ b/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))
--- a/pages/admin.vue
+++ b/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
        }
      ]
    }
--- a/pages/admin/product/post/_product_id.vue
+++ b/pages/admin/product/post/_product_id.vue
@ -1,18 +1,29 @@
 <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 style="margin-bottom: 1rem;">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/admin/products' }">产品管理</el-breadcrumb-item>
+        <el-breadcrumb-item v-if="product.idProduct">编辑</el-breadcrumb-item>
+        <el-breadcrumb-item v-else>创建</el-breadcrumb-item>
+      </el-breadcrumb>
    </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-col style="margin-top: 1rem;">
+        </el-form-item>
+        <el-form-item label='标签' prop='tags'>
          <el-select
            style="width: 100%;"
            v-model="productTags"
@ -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 type="primary" :loading="doLoading" @click="postArticle" plain>发布</el-button>
+        <el-button :loading="doLoading" plain type="primary" @click="postProduct">发布</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-button v-if="productInfo.status === 0" :loading="doLoading" plain type="danger" @click="updateStatus">下架</el-button>
+        <el-button v-else :loading="doLoading" plain type="danger" @click="updateStatus">上架</el-button>
+        <el-button v-if="productInfo.status === 0" :loading="doLoading" plain type="primary" @click="postProduct">更新
+        </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">
-      <el-alert
-        title="用户无权限"
-        type="warning"
-        center
-        show-icon
-        :closable="false">
-      </el-alert>
-    </el-col>
+    <ImgCropper :avatarUrl="productInfo.productImgUrl||''" :visible.sync='cropperVisible'
+                @onSubmit="updateProductImgUrl"></ImgCropper>
  </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, '').
-          replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
-          replace('/\\s/g', '')
+          filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/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,
-        productTitle: _ts.productTitle,
+        idProduct: _ts.productInfo.idProduct,
+        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.$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(','));
+        _ts.productInfo = JSON.parse(JSON.stringify(product))
        productContent = product.productContent
+        let productTags = product.tags?.split(',');
+        _ts.$set(_ts, 'productTags', productTags || []);
      } else {
        _ts.$set(_ts, 'isEdit', false);
      }
--- a/pages/admin/products.vue
+++ b/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) {
-      this.$router.push({
-        path: `/${name}/${data}`
-      })
-    },
+    // onRouter(name, data) {
+    //   this.$router.push({
+    //     path: `/${name}/${data}`
+    //   })
+    // },
    toggleStatus(index, product) {
      let _ts = this;
      let title, status;
-      if (product.status == 0) {
+      if (product.status === 0) {
        title = '下架';
        status = 1;
      } else {
@ -157,7 +177,12 @@ export default {
    },
    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`,
      })
    }
  }
--- a/pages/admin/tag/post/_tag_id.vue
+++ b/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>
--- a/pages/admin/tags.vue
+++ b/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>
--- a/pages/admin/topic/_topic_uri.vue
+++ b/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>
--- a/pages/admin/topic/bind/_topic_id.vue
+++ b/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>
--- a/pages/admin/topic/post/_topic_id.vue
+++ b/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
--- a/pages/admin/topics.vue
+++ b/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>
--- a/pages/user/settings/account.vue
+++ b/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({