nebula/pages/admin/product/post/_product_id.vue

<template>
  <div>
    test
    test
  </div>
</template>
<!--<template>-->
<!--  <el-row class="products">-->
<!--    <el-col>-->
<!--      <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-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>-->
<!--&lt;!&ndash;    <el-col v-else class="text-center">&ndash;&gt;-->
<!--&lt;!&ndash;      <el-alert&ndash;&gt;-->
<!--&lt;!&ndash;        title="用户无权限"&ndash;&gt;-->
<!--&lt;!&ndash;        type="warning"&ndash;&gt;-->
<!--&lt;!&ndash;        center&ndash;&gt;-->
<!--&lt;!&ndash;        show-icon&ndash;&gt;-->
<!--&lt;!&ndash;        :closable="false">&ndash;&gt;-->
<!--&lt;!&ndash;      </el-alert>&ndash;&gt;-->
<!--&lt;!&ndash;    </el-col>&ndash;&gt;-->
<!--  </el-row>-->
<!--</template>-->

<!--<script>-->
<!--import Vue from 'vue';-->
<!--import {mapState} from 'vuex';-->
<!--import apiConfig from '~/config/api.config';-->

<!--export default {-->
<!--  name: "PostProducts",-->
<!--  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: ''-->
<!--      },-->
<!--      formStore:{-->
<!--        idArticle: 0,-->
<!--        productTitle: '',-->
<!--        productContent: '',-->
<!--        productType: 0,-->
<!--        productTags: [],-->
<!--        productStatus: '0',-->
<!--      },-->
<!--      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() {-->
<!--    console.log('??')-->
<!--    // 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>-->