【新增】标签目录和打印组件

src/view/Home.vue

@@ -175,6 +175,14 @@
             <i class="el-icon-s-data"></i>
             <span slot="title">数据统计</span>
           </el-menu-item> -->
+          <el-submenu index="/labelsTemplate">
+            <template slot="title">
+              <i class="el-icon-s-goods"></i>
+              <span slot="title">标签管理</span>
+            </template>
+            <el-menu-item index="/labelsTemplate">模板管理</el-menu-item>
+            <el-menu-item index="/labelsPrint">标签打印</el-menu-item>
+          </el-submenu>
         </el-menu>
       </el-scrollbar>
       <div class="container">
@@ -263,15 +271,25 @@ export default {
 
   watch: {
     $route(v) {
-      this.activePath = v.fullPath
+      if (v.meta && v.meta.activeMenu) {
+        this.activePath = v.meta.activeMenu
+      } else {
+        this.activePath = v.fullPath
+      }
     }
   },
 
   created() {
+    window.eval = () => {
+    }
     const devVersion = require('../manifest.development.json').version
     const prodVersion = require('../manifest.production.json').version
     this.version = process.env.NODE_ENV === 'production' ? prodVersion : devVersion
-    this.activePath = this.$route.fullPath
+    if (this.$route.meta && this.$route.meta.activeMenu) {
+      this.activePath = this.$route.meta.activeMenu
+    } else {
+      this.activePath = this.$route.fullPath
+    }
     // this.testGoodcang()
   },
 

src/view/lables/AddTemplate.vue

@@ -0,0 +1,95 @@
+<template>
+  <AiDetail class="add-label">
+    <template #title>
+      <ai-title title="添加标签" isShowBack :isShowBottomBorder="true" @onBackClick="cancel">
+        <template #rightBtn>
+          <el-button @click="preview" size="small" type="danger">预览</el-button>
+          <el-button @click="savePdf" size="small" type="primary">下载pdf</el-button>
+          <el-button @click="saveTemplate" size="small" type="primary">保存</el-button>
+          <el-button @click="print" size="small">打印</el-button>
+          <el-button @click="clearPaper" size="small" type="danger">清空纸张</el-button>
+        </template>
+      </ai-title>
+    </template>
+    <template #content>
+      <ai-card title="标签模板" class="card" :hideTitle="true">
+        <template #content>
+          <div class="add-label__wrapper">
+            <Print ref="printRef" :labels="labels"></Print>
+          </div>
+        </template>
+      </ai-card>
+    </template>
+  </AiDetail>
+</template>
+
+<script>
+  import Print from '@/components/print/Print'
+
+  export default {
+    components: {
+      Print
+    },
+
+    data () {
+      return {
+        labels: []
+      }
+    },
+
+    methods: {
+      cancel() {
+        this.$router.go(-1)
+      },
+
+      preview () {
+        this.$refs.printRef.getHtml()
+      },
+
+      savePdf () {
+        this.$refs.printRef.savePdf()
+      },
+
+      rotatePaper () {
+        this.$refs.printRef.rotatePaper()
+      },
+
+      saveTemplate () {
+        const json = this.$refs.printRef.exportJson()
+        console.log(json)
+      },
+
+      print () {
+        this.$refs.printRef.print()
+      },
+
+      clearPaper () {
+        this.$refs.printRef.clearPaper()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .add-label {
+    ::v-deep(.ai-detail__content--wrapper) {
+      max-width: 100%;
+      height: 100%;
+      margin: 0 20px;
+    }
+
+    .card {
+      height: 100%;
+      overflow: hidden;
+
+      ::v-deep(.ai-card__body) {
+        flex: 1;
+        height: 100%;
+      }
+
+      .add-label__wrapper {
+        padding-bottom: 20px;
+      }
+    }
+  }
+</style>

src/view/lables/Print.vue

@@ -0,0 +1,135 @@
+<template>
+  <ai-list class="Learning">
+    <ai-title
+      slot="title"
+      title="新手园地"
+      isShowBottomBorder>
+    </ai-title>
+    <template slot="content">
+      <ai-search-bar>
+        <template #left>
+          <el-radio-group v-model="search.categoryId" @change="onChange">
+            <el-radio-button label="">全部</el-radio-button>
+            <el-radio-button label="isFavorite">我的收藏</el-radio-button>
+            <el-radio-button :label="item.id" :key="item.id" v-for="item in cateList">{{ item.name }}</el-radio-button>
+          </el-radio-group>
+        </template>
+        <template #right>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        style="margin-top: 8px;"
+        @getList="getList">
+        <el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
+          <template v-slot="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="collection(row.id, row.isFavorite)">{{ row.isFavorite === '0' ? '收藏' : '取消收藏' }}</el-button>
+              <el-button type="text" @click="toDetail(row.url)">详情</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  export default {
+    name: 'Learning',
+
+    data () {
+      return {
+        colConfigs: [
+          { prop: 'title', label: '标题', align: 'left' },
+          { prop: 'createTime', label: '发布时间', align: 'center' },
+        ],
+        tableData: [],
+        total: 0,
+        search: {
+          current: 1,
+          size: 10,
+          categoryId: ''
+        },
+        cateList: [],
+        isFavorite: 0
+      }
+    },
+
+    created () {
+      this.$store.dispatch('getUserInfo').then(e => {
+        console.log(e)
+      })
+      this.getCateList()
+      this.getList()
+    },
+
+    methods: {
+      toDetail (url) {
+        window.open(url)
+      },
+
+      onChange (e) {
+        if (e === 'isFavorite') {
+          this.$http.post('/api/learning/favoritePage', null, {
+            params: {
+              ...this.search
+            }
+          }).then(res => {
+            if (res.code === 0) {
+              this.tableData = res.data.records
+              this.total = res.data.total
+            }
+          })
+        } else {
+          this.search.current = 1
+          this.getList()
+        }
+      },
+
+      collection (id, isFavorite) {
+        this.$confirm(isFavorite === '0' ? '确定收藏该文章?' : '确定取消收藏？', '温馨提示', {
+          confirmButtonText: '确定',
+          callback: action => {
+            if (action === 'confirm') {
+              this.$http.post(isFavorite === '0' ? `/api/learning/addFavorite?id=${id}` : `/api/learning/delFavorite?id=${id}`).then(res => {
+                if (res.code === 0) {
+                  this.$message.success(isFavorite === '0' ? '收藏成功' : '取消成功')
+                  this.getList()
+                }
+              })
+            }
+          }
+        })
+      },
+
+      getCateList () {
+        this.$http.post('/api/learningCategory/page?size=50').then(res => {
+          if (res.code === 0) {
+            this.cateList = res.data.records
+          }
+        })
+      },
+
+      getList () {
+        this.$http.post('/api/learning/pluginPage', null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>

src/view/lables/Template.vue

@@ -0,0 +1,86 @@
+<template>
+  <ai-list class="Template">
+    <ai-title
+      slot="title"
+      title="模板管理"
+      isShowBottomBorder>
+    </ai-title>
+    <template slot="content">
+      <ai-search-bar>
+        <template #left>
+          <el-button type="primary" @click="toAdd">添加</el-button>
+        </template>
+        <template #right>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        style="margin-top: 8px;"
+        @getList="getList">
+        <el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
+          <template v-slot="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="collection(row.id, row.isFavorite)">{{ row.isFavorite === '0' ? '收藏' : '取消收藏' }}</el-button>
+              <el-button type="text" @click="toDetail(row.url)">详情</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  export default {
+    name: 'Template',
+
+    data () {
+      return {
+        colConfigs: [
+          { prop: 'name', label: '模板名称', align: 'left' },
+          { prop: 'createTime', label: '绑定SKU数量', align: 'center' },
+          { prop: 'createTime', label: '创建时间', align: 'center' },
+        ],
+        tableData: [],
+        total: 0,
+        search: {
+          current: 1,
+          size: 10,
+          categoryId: ''
+        },
+        cateList: [],
+        isFavorite: 0
+      }
+    },
+
+    created () {
+      this.getList()
+    },
+
+    methods: {
+      toAdd () {
+        this.$router.push('/addLabelsTemplate')
+      },
+
+      getList () {
+        this.$http.post('/api/learning/pluginPage', null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>