feat: 加入下載範例按鈕

package.json

-{
-  "name": "@purplevin/component",
-  "version": "0.1.18",
-  "private": false,
-  "main": "lib/index.umd.min.js",
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lib": "vue-cli-service build --target lib --name index --dest lib packages/index.js",
-    "publish": "npm publish --registry http://192.168.1.10:4873"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "4.4.4",
-    "@vue/cli-service": "4.4.4",
-    "sass": "1.26.8",
-    "sass-loader": "8.0.2",
-    "vue-template-compiler": "2.6.14"
-  },
-  "dependencies": {
-    "axios": "^0.27.2",
-    "core-js": "^3.6.5",
-    "element-ui": "2.15.8",
-    "moment": "^2.29.4",
-    "vue": "2.6.14",
-    "vuex": "^3.4.0",
-    "xlsx": "^0.17.5"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
-}
+{
+  "name": "@purplevin/component",
+  "version": "0.1.19",
+  "private": false,
+  "main": "lib/index.umd.min.js",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lib": "vue-cli-service build --target lib --name index --dest lib packages/index.js",
+    "publish": "npm publish --registry http://192.168.1.10:4873"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "4.4.4",
+    "@vue/cli-service": "4.4.4",
+    "sass": "1.26.8",
+    "sass-loader": "8.0.2",
+    "vue-template-compiler": "2.6.14"
+  },
+  "dependencies": {
+    "axios": "^0.27.2",
+    "core-js": "^3.6.5",
+    "element-ui": "2.15.8",
+    "moment": "^2.29.4",
+    "vue": "2.6.14",
+    "vuex": "^3.4.0",
+    "xlsx": "^0.17.5"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

packages/convertTool/src/index.vue

-<template>
-  <div>
-    <el-tabs type="border-card">
-      <el-tab-pane label="CN转换PCT">
-        <cn-2-pct-form :baseUrl="baseUrl"/>
-      </el-tab-pane>
-      <el-tab-pane label="公式转换图片">
-        <visio-form :baseUrl="baseUrl"/>
-      </el-tab-pane>
-      <el-tab-pane label="PCT槁转CN稿">
-        <Pct2CnForm :baseUrl="baseUrl"/>
-      </el-tab-pane>
-    </el-tabs>
-  </div>
-</template>
-
-<script>
-import Cn2CpcForm from './components/Cn2CpcForm'
-import Cn2PctForm from './components/Cn2PctForm'
-import VisioForm from './components/VisioForm'
-import Pct2CnForm from './components/Pct2CnForm'
-export default {
-  name: 'ConvertTool',
-  props:{
-    baseUrl:{
-      type: String,
-      require: true,
-      default: 'https://dev.essenptl.com/graphAPITest/'
-    }
-  },
-  components: {
-    Cn2CpcForm,
-    Cn2PctForm,
-    VisioForm,
-    Pct2CnForm
-  }
-}
-</script>
+<template>
+  <div>
+    <el-tabs type="border-card">
+      <el-tab-pane label="CN转换PCT">
+        <cn-2-pct-form :baseUrl="baseUrl" 
+        :showDownloadSampleButton="true"
+        @on-downloadSampleClick="handleDownloadSampleClick" />
+      </el-tab-pane>
+      <el-tab-pane label="公式转换图片">
+        <visio-form :baseUrl="baseUrl"/>
+      </el-tab-pane>
+      <el-tab-pane label="PCT槁转CN稿">
+        <Pct2CnForm :baseUrl="baseUrl" 
+        :showDownloadSampleButton="true"
+        @on-downloadSampleClick="handleDownloadSampleClick" />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import Cn2CpcForm from './components/Cn2CpcForm'
+import Cn2PctForm from './components/Cn2PctForm'
+import VisioForm from './components/VisioForm'
+import Pct2CnForm from './components/Pct2CnForm'
+export default {
+  name: 'ConvertTool',
+  props:{
+    baseUrl:{
+      type: String,
+      require: true,
+      default: 'https://dev.essenptl.com/graphAPITest/'
+    }
+  },
+  components: {
+    Cn2CpcForm,
+    Cn2PctForm,
+    VisioForm,
+    Pct2CnForm
+  },
+  methods: {
+    handleDownloadSampleClick(type){
+      console.log('download sample', type)
+    }
+  },
+}
+</script>