refactor：文件分割，上传，转换工具

api/convertApi.js

+import service from '@utils/GraphApiService'
+
+export function CnConversionPCT(baseURL, data) {
+  return service({
+    baseURL: baseURL,
+    url: 'Word/CN2PCT',
+    method: 'post',
+    data
+  })
+}
+
+export function fetchDownloadFile(baseURL, params) {
+  return service({
+    baseURL: baseURL,
+    url: 'RequestPayment/DownloadFile',
+    method: 'get',
+    responseType: 'blob',
+    params
+  })
+}
+// export function CnConversionPCT(baseURL, data) {
+//   return service({
+//     baseURL: baseURL,
+//     url: 'Word/CN2PCT',
+//     method: 'post',
+//     data
+//   })
+// }
\ No newline at end of file

api/fileApi.js

+import service from '@utils/requestService'
+
+export function SplitRevisionDoc(baseURL, data) {
+  return service({
+    baseURL: baseURL,
+    url: 'api/v1.0/Word/SplitRevisionDoc',
+    method: 'post',
+    data
+  })
+}
\ No newline at end of file

api/warningReportApi.js

+import service from '@utils/requestService'
+
+export function createHxRequestPaymentVerticalTotal(data) {
+  return service({
+    url: 'api/v1.0/RequestPayment/ChangeHXRequestPaymentVerticalTotal',
+    method: 'POST',
+    data
+  })
+}
+export function createHxRequestPaymentVerticalTotal2(data) {
+  return service({
+    url: 'api/v1.0/RequestPayment/ChangeHXRequestPaymentVerticalTotal2',
+    method: 'POST',
+    data
+  })
+}
+export function downloadFile(params) {
+  return service({
+    url: 'api/v1.0/RequestPayment/DownloadFile',
+    method: 'GET',
+    params,
+    responseType: 'blob'
+  })
+}

config/index.js

 module.exports = {
-  prod_sz:{
-    VUE_APP_GRAPHAPI_URL :'https://pvapi.purplevineip.com/graphAPI/api/v1.0/'
+  prod_sz: {
+    VUE_APP_GRAPHAPI_URL: 'https://pvapi.purplevineip.com/graphAPI/api/v1.0/'
   },
-  prod_tp:{
-    VUE_APP_GRAPHAPI_URL : 'https://pvapi.purplevineip.com/graphAPI/api/v1.0/'
+  prod_tp: {
+    VUE_APP_GRAPHAPI_URL: 'https://pvapi.purplevineip.com/graphAPI/api/v1.0/'
   },
-  prod_test_sz:{
-    VUE_APP_GRAPHAPI_URL : 'https://dev.essenptl.com/graphAPITest/api/v1.0/'
+  prod_test_sz: {
+    VUE_APP_GRAPHAPI_URL: 'https://dev.essenptl.com/graphAPITest/api/v1.0/'
   },
-  dev_tp:{
-    VUE_APP_GRAPHAPI_URL : 'http://localhost:64224/api/v1.0/'
+  prod_file_sz: {
+    VUE_APP_GRAPHAPI_URL: 'https://dev.essenptl.com/dev2/wade_ext/'
   },
-  dev_sz:{
-    VUE_APP_GRAPHAPI_URL : 'http://localhost:64224/api/v1.0/'
+  dev_tp: {
+    VUE_APP_GRAPHAPI_URL: 'http://localhost:64224/api/v1.0/'
   },
-  dev_test_tp:{
-    VUE_APP_GRAPHAPI_URL : 'https://dev.essenptl.com/graphAPITest/api/v1.0/'
+  dev_sz: {
+    VUE_APP_GRAPHAPI_URL: 'http://localhost:64224/api/v1.0/'
   },
-  dev_test_sz:{
-    VUE_APP_GRAPHAPI_URL : 'https://dev.essenptl.com/graphAPITest/api/v1.0/'
-  }
+  dev_test_tp: {
+    VUE_APP_GRAPHAPI_URL: 'https://dev.essenptl.com/graphAPITest/api/v1.0/'
+  },
+  dev_test_sz: {
+    VUE_APP_GRAPHAPI_URL: 'https://dev.essenptl.com/graphAPITest/api/v1.0/',
+  },
+  dev_file_tp: {
+    VUE_APP_GRAPHAPI_URL: 'https://dev.essenptl.com/dev2/wade_ext/'
+  },
+  dev_file_sz: {
+    VUE_APP_GRAPHAPI_URL: 'https://dev.essenptl.com/dev2/wade_ext/'
+  },
+  VUE_APP_USER_ID_MODE: 'variable'
 }
\ No newline at end of file

example/App.vue

@@ -2,12 +2,16 @@
   <div id="app">
     Hi app
     <pLink type="primary">Test</pLink>
-    <splitTool env="dev_test_sz"></splitTool>
+    <!-- <splitTool env="dev_test_sz"></splitTool> -->
+    <!-- <convertTool env="dev_test_sz"></convertTool> -->
+    <!-- <upload env="dev_file_sz"></upload> -->
+    <uploadExcel env="dev_test_sz"></uploadExcel>
+    <!-- <fileSplit env="dev_file_sz"></fileSplit> -->
   </div>
 </template>
 
 <script>
 export default {
-  name: 'App'
+    name: "App"
 }
 </script>
\ No newline at end of file

example/main.js

 import Vue from 'vue'
 import App from './App.vue'
+import store from './store'
 import purpUI from '../packages'
 
 import ElementUI from 'element-ui';
@@ -10,5 +11,6 @@ Vue.config.productionTip = false
 Vue.use(purpUI)
 
 new Vue({
+  store,
   render: h => h(App),
 }).$mount('#app')

example/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+// https://webpack.js.org/guides/dependency-management/#requirecontext
+const modulesFiles = require.context('./modules', true, /\.js$/)
+
+// you do not need `import app from './modules/app'`
+// it will auto require all vuex module from modules file
+const modules = modulesFiles.keys().reduce((modules, modulePath) => {
+  // set './app.js' => 'app'
+  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
+  const value = modulesFiles(modulePath)
+  modules[moduleName] = value.default
+  return modules
+}, {})
+
+const store = new Vuex.Store({
+  modules
+})
+
+export default store

example/store/modules/user.js

+function getUserId() {
+  console.log(`current getUserIdMode:variable`)
+  switch ('variable' || 'localStorage') {
+    case 'variable':
+      return 'f12e6db7-99f7-43c9-88ec-3c77d4f173bd'
+    case 'localStorage':
+      return localStorage.getItem('user_id')
+  }
+}
+
+const state = {
+  wadeUserID: getUserId()
+}
+
+const mutations = {
+  SET_USERID: (stete, userID) => {
+    state.wadeUserID = userID
+  }
+}
+
+const actions = {
+  setUserID({ commit, state }) {
+    commit('SET_USERID', state.userID)
+  }
+}
+const getters = {
+  wadeUserID: state => state.wadeUserID
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+}

lib/index.css

-.p-link-default[data-v-30dd6ef1]{color:#606266}.p-link-primary[data-v-30dd6ef1]{color:#409eff}
\ No newline at end of file
+.p-link-default[data-v-30dd6ef1]{color:#606266}.p-link-primary[data-v-30dd6ef1]{color:#409eff}.el-form .el-form-item[data-v-8461da98]{margin:10px 0}.el-form .el-form-item .el-radio-group[data-v-8461da98]{margin-left:20px}.el-form .el-form-item input[data-v-8461da98]{width:126px;margin-left:10px;outline:none;border:0;background:#c6c6c6}.choose-box[data-v-8461da98]{margin-left:200px;border:1px solid #000;width:220px}.choose-box div>span[data-v-8461da98]{display:inline-block;width:56px;text-align:center;margin:10px 5px;border:1px solid #000}input[data-v-8461da98]::-webkit-input-placeholder{font-size:12px;opacity:.8}[data-v-8461da98] .el-form-item__content{line-height:1.5!important}.excel-upload-input[data-v-77bf1e84]{display:none;z-index:-9999}.drop[data-v-77bf1e84]{border:2px dashed #bbb;width:600px;height:160px;line-height:160px;margin:0 auto;font-size:24px;border-radius:5px;text-align:center;color:#bbb;position:relative}
\ No newline at end of file

package.json

@@ -10,9 +10,12 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
-    "core-js": "^3.8.3",
-    "element-ui": "^2.15.9",
-    "vue": "^2.6.14"
+    "core-js": "^3.25.0",
+    "element-ui": "^2.9.2",
+    "moment": "^2.29.4",
+    "vue": "^2.6.14",
+    "vuex": "^3.4.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.0",
@@ -21,10 +24,9 @@
     "sass-loader": "^12.0.0",
     "vue-template-compiler": "^2.6.14"
   },
-  "peerDependencies":{
-    "element-ui": "^2.15.9",
-    "vue": "^2.6.14",
-    "sass-loader": "^12.0.0"
+  "peerDependencies": {
+    "sass-loader": "^12.0.0",
+    "vue": "^2.6.14"
   },
   "browserslist": [
     "> 1%",

packages/convertTool/index.js

+import convertTool from './src'
+
+convertTool.install = function (Vue) {
+  Vue.component(convertTool.name, convertTool)
+}
+
+export default convertTool
\ No newline at end of file

packages/convertTool/src/components/Cn2CpcForm.vue

+<template>
+  <div>
+    <h3>CN稿转成CPC</h3>
+    <el-alert
+      title="此功能将协助您将CN稿快速转换成CPC的排版, CN稿中须包含下列几种标题 1.说明书摘要 2.权利要求书 3.说明书 4.说明书附图或摘要附图"
+      type="info"
+    />
+    <br>
+    <el-form ref="searchForm" size="small" label-width="160px">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="CN稿" prop="business">
+            <el-upload
+              ref="upload"
+              class="upload-demo"
+              drag
+              :limit="1"
+              :file-list="fileList"
+              :action="uploadURL"
+              :on-change="handelFileChange"
+              :on-remove="handleFileRemove"
+              :on-exceed="handleExceed"
+              :auto-upload="false"
+              accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+            >
+              <i class="el-icon-upload" />
+              <div class="el-upload__text">
+                将文件拖到此处，或<em>点击上传</em>
+              </div>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12" :offset="10">
+          <el-button
+            style="margin-left: 10px"
+            size="small"
+            type="success"
+            @click="submitUpload"
+          >
+            开始转换
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+<script>
+import { CnConversionPCT,fetchDownloadFile } from "@api/convertApi";
+import GraphApiService from '@utils/GraphApiService'
+export default {
+  name: 'Cn2CpcForm',
+  data: function() {
+    return {
+      uploadURL: 'Word/CN2CPC',
+      fileList: []
+    }
+  },
+  props:{
+    baseUrl:{
+      type: String
+    }
+  },
+  methods: {
+    // 上传到服务器
+    submitUpload() {
+      console.log(this.fileList)
+      if (this.fileList.length <= 0) {
+        this.$message.error('请先选择需要上传的文件！')
+        return false
+      }
+      const formData = new FormData()
+      this.fileList.forEach(e => {
+        formData.append('file', e.raw)
+      })
+      GraphApiService
+        .post('Word/CN2CPC', formData)
+        .then(res => {
+          if (res.status === 200) {
+            this.fileList = []
+            this.$refs.upload.clearFiles()
+            const excelFileName = res.data
+            GraphApiService
+              .get('RequestPayment/DownloadFile', {
+                params: {
+                  fileName: excelFileName
+                },
+                responseType: 'blob'
+              })
+              .then(response => {
+                const blob = new Blob([response])
+                const downloadElement = document.createElement('a')
+                const href = window.URL.createObjectURL(blob)
+                downloadElement.href = href
+                downloadElement.download = excelFileName.split('/')[1]
+                document.body.appendChild(downloadElement)
+                downloadElement.click()
+                document.body.removeChild(downloadElement)
+                window.URL.revokeObjectURL(href)
+              })
+          } else {
+            this.$refs.upload.abort()
+            this.$message.error('下载档案失败!')
+          }
+          console.log(res.data)
+        })
+        .catch(error => {
+          console.log('error', error)
+          this.$refs.upload.abort()
+          this.$message.error('下载档案失败!')
+        })
+    },
+    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+    handelFileChange(file, fileList) {
+      // 存在文件标识
+      let existsFileFlag = false
+
+      for (let i = 0; i < this.fileList.length; i++) {
+        if (
+          file.name === this.fileList[i].name &&
+          file.size === this.fileList[i].size
+        ) {
+          // 如果存在了，赋值true
+          existsFileFlag = true
+        }
+      }
+      // 遍历的这个文件存在当前列表直接结束
+      if (existsFileFlag) {
+        // 否则不加入
+        fileList.pop()
+        // console.log(`文件已经存在：${file.name}`)
+        // this.handleMsg(`文件已经选择过了：${file.name})`);
+        this.$message({
+          showClose: true,
+          message: `文件已经选择过了：${file.name})`,
+          type: 'error'
+        })
+        return
+      }
+      this.fileList.push(file)
+    },
+    handelDetailFileChange(file, fileList) {
+      // 存在文件标识
+      let existsFileFlag = false
+
+      for (let i = 0; i < this.detailFileList.length; i++) {
+        if (
+          file.name === this.detailFileList[i].name &&
+          file.size === this.detailFileList[i].size
+        ) {
+          // 如果存在了，赋值true
+          existsFileFlag = true
+        }
+      }
+      // 遍历的这个文件存在当前列表直接结束
+      if (existsFileFlag) {
+        // 否则不加入
+        fileList.pop()
+        // console.log(`文件已经存在：${file.name}`)
+        // this.handleMsg(`文件已经选择过了：${file.name})`);
+        this.$message({
+          showClose: true,
+          message: `文件已经选择过了：${file.name})`,
+          type: 'error'
+        })
+        return
+      }
+      this.detailFileList.push(file)
+    },
+    // 文件列表移除文件时的钩子
+    handleFileRemove(file, fileList) {
+      this.fileList = fileList
+    },
+    handleDetailFileRemove(file, fileList) {
+      this.detailFileList = fileList
+    },
+    handleExceed(files, fileList) {
+      this.$set(fileList[0], 'raw', files[0])
+      this.$set(fileList[0], 'name', files[0].name)
+      this.$refs['rebateUpload'].clearFiles()// 清除文件
+      this.$refs['rebateUpload'].handleStart(files[0])// 选择文件后的赋值方法
+    }
+  }
+}
+</script>

packages/convertTool/src/components/Cn2PctForm.vue

+<template>
+  <div>
+    <h3>CN稿转成PCT稿</h3>
+    <el-alert
+      title="此功能将协助您将CN稿快速转换成PC稿的排版, CN稿中须包含下列几种标题 1.说明书摘要 2.权利要求书 3.说明书 4.说明书附图或摘要附图, 并且标题需设置下框线"
+      type="info"
+    />
+
+    <br>
+    <el-form ref="searchForm" size="small" label-width="160px">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="CN稿" prop="business">
+            <el-upload
+              ref="upload"
+              class="upload-demo"
+              drag
+              :limit="1"
+              :file-list="fileList"
+              :action="uploadURL"
+              :on-change="handelFileChange"
+              :on-remove="handleFileRemove"
+              :on-exceed="handleExceed"
+              :auto-upload="false"
+              accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+            >
+              <i class="el-icon-upload" />
+              <div class="el-upload__text">
+                将文件拖到此处，或<em>点击上传</em>
+              </div>
+            </el-upload>
+            <el-link target="_blank" type="primary" href="https://essenptl-my.sharepoint.com/personal/service_essenptl_com/_layouts/15/onedrive.aspx?id=%2Fpersonal%2Fservice%5Fessenptl%5Fcom%2FDocuments%2F%E7%B4%AB%E8%97%A4%2Dshare%20folder%2FIT%2FDocument%2F%E4%B8%93%E5%88%A9%E4%BB%A3%E7%90%86%E4%B8%9A%E5%8A%A1%E6%A8%A1%E6%9D%BF2020%2Ezip&parent=%2Fpersonal%2Fservice%5Fessenptl%5Fcom%2FDocuments%2F%E7%B4%AB%E8%97%A4%2Dshare%20folder%2FIT%2FDocument">
+              模板下載
+            </el-link>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12" :offset="10">
+          <el-button
+            style="margin-left: 10px"
+            size="small"
+            type="success"
+            @click="submitUpload"
+          >
+            开始转换
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+<script>
+import { CnConversionPCT,fetchDownloadFile } from "@api/convertApi";
+import GraphApiService from '@utils/GraphApiService'
+export default {
+  name: 'Cn2PctForm',
+  data: function() {
+    return {
+      uploadURL: 'Word/CN2PCT',
+      fileList: []
+    }
+  },
+  props:{
+    baseUrl:{
+      type: String
+    }
+  },
+  methods: {
+    // 上传到服务器
+    async submitUpload() {
+      console.log(this.fileList)
+      if (this.fileList.length <= 0) {
+        this.$message.error('请先选择需要上传的文件！')
+        return false
+      }
+      const formData = new FormData()
+      this.fileList.forEach(e => {
+        formData.append('file', e.raw)
+      })
+      console.log(this.baseUrl)
+      GraphApiService
+        .post('Word/CN2PCT', formData)
+        .then(res => {
+          if (res.status === 200) {
+            this.fileList = []
+            this.$refs.upload.clearFiles()
+            const excelFileName = res.data
+            GraphApiService
+              .get('RequestPayment/DownloadFile', {
+                params: {
+                  fileName: excelFileName
+                },
+                responseType: 'blob'
+              })
+              .then(response => {
+                const blob = new Blob([response])
+                const downloadElement = document.createElement('a')
+                const href = window.URL.createObjectURL(blob)
+                downloadElement.href = href
+                downloadElement.download = excelFileName.split('/')[1]
+                document.body.appendChild(downloadElement)
+                downloadElement.click()
+                document.body.removeChild(downloadElement)
+                window.URL.revokeObjectURL(href)
+              })
+          } else {
+            this.$refs.upload.abort()
+            this.$message.error('下载档案失败!')
+          }
+          console.log(res.data)
+        })
+        .catch(error => {
+          console.log('error', error)
+          this.$refs.upload.abort()
+          this.$message.error('下载档案失败!')
+        })
+    },
+    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+    handelFileChange(file, fileList) {
+      // 存在文件标识
+      let existsFileFlag = false
+
+      for (let i = 0; i < this.fileList.length; i++) {
+        if (
+          file.name === this.fileList[i].name &&
+          file.size === this.fileList[i].size
+        ) {
+          // 如果存在了，赋值true
+          existsFileFlag = true
+        }
+      }
+      // 遍历的这个文件存在当前列表直接结束
+      if (existsFileFlag) {
+        // 否则不加入
+        fileList.pop()
+        // console.log(`文件已经存在：${file.name}`)
+        // this.handleMsg(`文件已经选择过了：${file.name})`);
+        this.$message({
+          showClose: true,
+          message: `文件已经选择过了：${file.name})`,
+          type: 'error'
+        })
+        return
+      }
+      this.fileList.push(file)
+    },
+    handelDetailFileChange(file, fileList) {
+      // 存在文件标识
+      let existsFileFlag = false
+
+      for (let i = 0; i < this.detailFileList.length; i++) {
+        if (
+          file.name === this.detailFileList[i].name &&
+          file.size === this.detailFileList[i].size
+        ) {
+          // 如果存在了，赋值true
+          existsFileFlag = true
+        }
+      }
+      // 遍历的这个文件存在当前列表直接结束
+      if (existsFileFlag) {
+        // 否则不加入
+        fileList.pop()
+        // console.log(`文件已经存在：${file.name}`)
+        // this.handleMsg(`文件已经选择过了：${file.name})`);
+        this.$message({
+          showClose: true,
+          message: `文件已经选择过了：${file.name})`,
+          type: 'error'
+        })
+        return
+      }
+      this.detailFileList.push(file)
+    },
+    // 文件列表移除文件时的钩子
+    handleFileRemove(file, fileList) {
+      this.fileList = fileList
+    },
+    handleDetailFileRemove(file, fileList) {
+      this.detailFileList = fileList
+    },
+    handleExceed(files, fileList) {
+      this.$set(fileList[0], 'raw', files[0])
+      this.$set(fileList[0], 'name', files[0].name)
+      this.$refs['rebateUpload'].clearFiles()// 清除文件
+      this.$refs['rebateUpload'].handleStart(files[0])// 选择文件后的赋值方法
+    }
+  }
+}
+</script>

packages/convertTool/src/components/Pct2CnForm.vue

+<template>
+  <div>
+    <h3>PCT槁转CN稿</h3>
+    <el-alert
+      title="此功能将协助您将PCT稿快速转换成CN稿的排版"
+      type="info"
+    />
+    <br>
+    <el-form ref="searchForm" size="small" label-width="160px">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="PCT稿" prop="business">
+            <el-upload
+              ref="upload"
+              class="upload-demo"
+              drag
+              :limit="1"
+              :file-list="fileList"
+              :action="uploadURL"
+              :on-change="handelFileChange"
+              :on-remove="handleFileRemove"
+              :on-exceed="handleExceed"
+              :auto-upload="false"
+              accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+            >
+              <i class="el-icon-upload" />
+              <div class="el-upload__text">
+                将文件拖到此处，或<em>点击上传</em>
+              </div>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12" :offset="10">
+          <el-button
+            style="margin-left: 10px"
+            size="small"
+            type="success"
+            @click="submitUpload"
+          >
+            开始转换
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+<script>
+import GraphApiService from '@utils/GraphApiService'
+
+export default {
+  name: 'Cn2CpcForm',
+  data: function() {
+    return {
+      uploadURL: 'Word/CN2CPC',
+      fileList: []
+    }
+  },
+  props:{
+    baseUrl:{
+      type: String
+    }
+  },
+  methods: {
+    // 上传到服务器
+    submitUpload() {
+      console.log(this.fileList)
+      if (this.fileList.length <= 0) {
+        this.$message.error('请先选择需要上传的文件！')
+        return false
+      }
+      const formData = new FormData()
+      this.fileList.forEach(e => {
+        formData.append('file', e.raw)
+      })
+      GraphApiService
+        .post('Word/PCT2CN', formData)
+        .then(res => {
+          if (res.status === 200) {
+            this.fileList = []
+            this.$refs.upload.clearFiles()
+            const excelFileName = res.data
+            GraphApiService
+              .get('RequestPayment/DownloadFile', {
+                params: {
+                  fileName: excelFileName
+                },
+                responseType: 'blob'
+              })
+              .then(response => {
+                const blob = new Blob([response])
+                const downloadElement = document.createElement('a')
+                const href = window.URL.createObjectURL(blob)
+                downloadElement.href = href
+                downloadElement.download = excelFileName.split('/')[1]
+                document.body.appendChild(downloadElement)
+                downloadElement.click()
+                document.body.removeChild(downloadElement)
+                window.URL.revokeObjectURL(href)
+              })
+          } else {
+            this.$refs.upload.abort()
+            this.$message.error('下载档案失败!')
+          }
+          console.log(res.data)
+        })
+        .catch(error => {
+          console.log('error', error)
+          this.$refs.upload.abort()
+          this.$message.error('下载档案失败!')
+        })
+    },
+    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+    handelFileChange(file, fileList) {
+      // 存在文件标识
+      let existsFileFlag = false
+
+      for (let i = 0; i < this.fileList.length; i++) {
+        if (
+          file.name === this.fileList[i].name &&
+          file.size === this.fileList[i].size
+        ) {
+          // 如果存在了，赋值true
+          existsFileFlag = true
+        }
+      }
+      // 遍历的这个文件存在当前列表直接结束
+      if (existsFileFlag) {
+        // 否则不加入
+        fileList.pop()
+        // console.log(`文件已经存在：${file.name}`)
+        // this.handleMsg(`文件已经选择过了：${file.name})`);
+        this.$message({
+          showClose: true,
+          message: `文件已经选择过了：${file.name})`,
+          type: 'error'
+        })
+        return
+      }
+      this.fileList.push(file)
+    },
+    handelDetailFileChange(file, fileList) {
+      // 存在文件标识
+      let existsFileFlag = false
+
+      for (let i = 0; i < this.detailFileList.length; i++) {
+        if (
+          file.name === this.detailFileList[i].name &&
+          file.size === this.detailFileList[i].size
+        ) {
+          // 如果存在了，赋值true
+          existsFileFlag = true
+        }
+      }
+      // 遍历的这个文件存在当前列表直接结束
+      if (existsFileFlag) {
+        // 否则不加入
+        fileList.pop()
+        // console.log(`文件已经存在：${file.name}`)
+        // this.handleMsg(`文件已经选择过了：${file.name})`);
+        this.$message({
+          showClose: true,
+          message: `文件已经选择过了：${file.name})`,
+          type: 'error'
+        })
+        return
+      }
+      this.detailFileList.push(file)
+    },
+    // 文件列表移除文件时的钩子
+    handleFileRemove(file, fileList) {
+      this.fileList = fileList
+    },
+    handleDetailFileRemove(file, fileList) {
+      this.detailFileList = fileList
+    },
+    handleExceed(files, fileList) {
+      this.$set(fileList[0], 'raw', files[0])
+      this.$set(fileList[0], 'name', files[0].name)
+      this.$refs['rebateUpload'].clearFiles()// 清除文件
+      this.$refs['rebateUpload'].handleStart(files[0])// 选择文件后的赋值方法
+    }
+  }
+}
+</script>

packages/convertTool/src/components/VisioForm.vue

+<template>
+  <div>
+    <h3>公式转换图片</h3>
+    <el-alert title="此功能将协助您将CN稿内中的公式快速转换为图像" type="info" />
+    <br>
+    <el-form ref="visioForm" :model="form" size="small" label-width="160px">
+      <el-row>
+        <el-col :span="16">
+          <el-form-item label="稿件" prop="file">
+            <el-upload
+              ref="upload"
+              class="upload-demo"
+              drag
+              :limit="1"
+              :file-list="fileList"
+              :action="uploadURL"
+              :on-change="handelFileChange"
+              :on-remove="handleFileRemove"
+              :on-exceed="handleExceed"
+              :auto-upload="false"
+              accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+            >
+              <i class="el-icon-upload" />
+              <div class="el-upload__text">
+                将文件拖到此处，或<em>点击上传</em>
+              </div>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label="图像设置" prop="isImgSetting">
+            <el-switch
+              v-model="form.isImgSetting"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+            />
+          </el-form-item>
+          <el-form-item
+            v-show="form.isImgSetting"
+            label="寬度小于"
+            prop="width"
+          >
+            <el-col :span="4">
+              <el-input v-model="form.width" />
+            </el-col>
+            <el-col :span="3">
+              <el-select v-model="form.includeType" placeholder="是否或是高度">
+                <el-option label="无" value="无" />
+                <el-option label="同时" value="同时" />
+                <el-option label="或是" value="或是" />
+              </el-select>
+            </el-col>
+            <el-col v-show="form.includeType !== '无'" :span="2">
+              <span>高度小于</span>
+            </el-col>
+            <el-col v-show="form.includeType !== '无'" :span="2">
+              <el-input v-model="form.height" />
+            </el-col>
+          </el-form-item>
+          <el-form-item
+            v-show="form.isImgSetting"
+            label="放大倍率"
+            prop="width"
+          >
+            <el-col :span="4">
+              <el-input v-model="form.magn" />
+            </el-col>
+            <el-col :span="2">
+              <span>倍</span>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="行距设置" prop="isSetLineHeight">
+            <el-switch
+              v-model="form.isSetLineHeight"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+            />
+          </el-form-item>
+          <el-form-item
+            v-show="form.isSetLineHeight"
+            label="行距"
+            prop="lineHeight"
+          >
+            <el-col :span="4">
+              <el-input v-model="form.lineHeight" />
+            </el-col>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12" :offset="10">
+          <el-button
+            style="margin-left: 10px"
+            size="small"
+            type="success"
+            @click="submitUpload"
+          >
+            开始转换
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+<script>
+import GraphApiService from '@utils/GraphApiService'
+export default {
+  name: 'VisioForm',
+  data: function() {
+    return {
+      form: {
+        isImgSetting: true,
+        width: 100,
+        height: 100,
+        magn: 1.8,
+        includeType: '无',
+        isSetLineHeight: true,
+        lineHeight: 18
+      },
+      uploadURL: 'Word/ConvertEquations',
+      fileList: []
+    }
+  },
+  props:{
+    baseUrl:{
+      type: String
+    }
+  },
+  methods: {
+    // 上传到服务器
+    submitUpload() {
+      console.log(this.fileList)
+      if (this.fileList.length <= 0) {
+        this.$message.error('请先选择需要上传的文件！')
+        return false
+      }
+      const formData = new FormData()
+      this.fileList.forEach(e => {
+        formData.append('file', e.raw)
+      })
+      formData.append('height', this.form.height)
+      formData.append('width', this.form.width)
+      formData.append('magn', this.form.magn)
+      formData.append('isImgSetting', this.form.isImgSetting)
+      formData.append(
+        'isIncludeHeight',
+        this.form.includeType !== '无'
+      )
+      formData.append('includeType', this.form.includeType)
+      formData.append('isSetLineHeight', this.form.isSetLineHeight)
+      formData.append('lineHeight', this.form.lineHeight)
+      GraphApiService
+        .post('Word/ConvertEquations', formData)
+        .then(res => {
+          if (res.status === 200) {
+            this.fileList = []
+            this.$refs.upload.clearFiles()
+            const excelFileName = res.data
+            GraphApiService
+              .get('RequestPayment/DownloadFile', {
+                params: {
+                  fileName: excelFileName
+                },
+                responseType: 'blob'
+              })
+              .then(response => {
+                const blob = new Blob([response])
+                const downloadElement = document.createElement('a')
+                const href = window.URL.createObjectURL(blob)
+                downloadElement.href = href
+                downloadElement.download = excelFileName.split('/')[1]
+                document.body.appendChild(downloadElement)
+                downloadElement.click()
+                document.body.removeChild(downloadElement)
+                window.URL.revokeObjectURL(href)
+              })
+          } else {
+            this.$refs.upload.abort()
+            this.$message.error('下载档案失败!')
+          }
+          console.log(res.data)
+        })
+        .catch(error => {
+          console.log('error', error)
+          this.$refs.upload.abort()
+          this.$message.error('下载档案失败!')
+        })
+    },
+    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+    handelFileChange(file, fileList) {
+      // 存在文件标识
+      let existsFileFlag = false
+
+      for (let i = 0; i < this.fileList.length; i++) {
+        if (
+          file.name === this.fileList[i].name &&
+          file.size === this.fileList[i].size
+        ) {
+          // 如果存在了，赋值true
+          existsFileFlag = true
+        }
+      }
+      // 遍历的这个文件存在当前列表直接结束
+      if (existsFileFlag) {
+        // 否则不加入
+        fileList.pop()
+        // console.log(`文件已经存在：${file.name}`)
+        // this.handleMsg(`文件已经选择过了：${file.name})`);
+        this.$message({
+          showClose: true,
+          message: `文件已经选择过了：${file.name})`,
+          type: 'error'
+        })
+        return
+      }
+      this.fileList.push(file)
+    },
+    handelDetailFileChange(file, fileList) {
+      // 存在文件标识
+      let existsFileFlag = false
+
+      for (let i = 0; i < this.detailFileList.length; i++) {
+        if (
+          file.name === this.detailFileList[i].name &&
+          file.size === this.detailFileList[i].size
+        ) {
+          // 如果存在了，赋值true
+          existsFileFlag = true
+        }
+      }
+      // 遍历的这个文件存在当前列表直接结束
+      if (existsFileFlag) {
+        // 否则不加入
+        fileList.pop()
+        // console.log(`文件已经存在：${file.name}`)
+        // this.handleMsg(`文件已经选择过了：${file.name})`);
+        this.$message({
+          showClose: true,
+          message: `文件已经选择过了：${file.name})`,
+          type: 'error'
+        })
+        return
+      }
+      this.detailFileList.push(file)
+    },
+    // 文件列表移除文件时的钩子
+    handleFileRemove(file, fileList) {
+      this.fileList = fileList
+    },
+    handleDetailFileRemove(file, fileList) {
+      this.detailFileList = fileList
+    },
+    handleExceed(files, fileList) {
+      this.$set(fileList[0], 'raw', files[0])
+      this.$set(fileList[0], 'name', files[0].name)
+      this.$refs['rebateUpload'].clearFiles()// 清除文件
+      this.$refs['rebateUpload'].handleStart(files[0])// 选择文件后的赋值方法
+    }
+  }
+}
+</script>

packages/convertTool/src/index.vue

+<template>
+  <el-card>
+    <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>
+  </el-card>
+</template>
+
+<script>
+import Cn2CpcForm from './components/Cn2CpcForm'
+import Cn2PctForm from './components/Cn2PctForm'
+import VisioForm from './components/VisioForm'
+import Pct2CnForm from './components/Pct2CnForm'
+import config from '@config/index.js'
+export default {
+  name: 'ConvertTool',
+  props:{
+    env:{
+      type: String,
+      default: 'prod_sz'
+    }
+  },
+  components: {
+    Cn2CpcForm,
+    Cn2PctForm,
+    VisioForm,
+    Pct2CnForm
+  },
+  computed:{
+    baseUrl(){
+      console.log('config', config, this.env)
+      return config[this.env].VUE_APP_GRAPHAPI_URL
+    }
+  },
+}
+</script>

packages/fileSplit/index.js

+import fileSplit from './src'
+
+fileSplit.install = function (Vue) {
+  Vue.component(fileSplit.name, fileSplit)
+}
+
+export default fileSplit
\ No newline at end of file

packages/fileSplit/src/components/SplitWordForm.vue

+<template>
+  <div>
+    <el-form ref="searchForm" size="small" label-width="160px">
+      <el-form-item prop="business">
+        <el-upload
+          ref="upload"
+          drag
+          :limit="1"
+          :file-list="fileList"
+          :action="uploadURL"
+          :on-change="handelFileChange"
+          :on-remove="handleFileRemove"
+          :on-exceed="handleExceed"
+          :auto-upload="false"
+          accept=".docx, .doc"
+        >
+          <i class="el-icon-upload" />
+          <div class="el-upload__text">
+            将文件拖到此处，或<em>点击上传</em>
+          </div>
+        </el-upload>
+      </el-form-item>
+      <el-form-item>
+        <span>申請類型</span>
+        <el-radio-group v-model="form.applyType">
+          <el-radio label="1">發明</el-radio>
+          <el-radio label="2">新型</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item class="split-style">
+        <span>分割方式</span>
+        <el-radio-group v-model="form.split">
+          <el-radio label="splitAccording">按照標題拆分</el-radio>
+          <el-radio label="pageNum">選擇自訂頁數</el-radio>
+        </el-radio-group>
+        <div v-show="form.split === 'pageNum'" class="choose-box">
+          <div v-for="(item, i) in inpFields" :key="item.label">
+            <span>{{ item.label }}</span>
+            <input
+              v-model="form[`${item.field}`]"
+              :placeholder="`${item.placeholder}`"
+              :disabled="i !== editInpIndex && editInpIndex !== -1"
+              @input="onInput($event, i)"
+            >
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          size="medium"
+          type="primary"
+        >
+          分割
+        </el-button>
+        <el-button
+          v-if="fileList[0]"
+          size="medium"
+          type="primary"
+          @click="handleDownloadClick"
+        >
+          下載
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <el-alert type="error">
+      <template slot="title">
+        注意: 切割的最後一頁 要加 分節符號且不可和文字同行
+        <br>
+        <h3><b>正確</b></h3>
+        <img src="../picture/success.png" width="60%">
+        <h3><b>錯誤</b></h3>
+        <img src="../picture/error.png" width="60%">
+      </template>
+    </el-alert>
+  </div>
+</template>
+<script>
+// import { SplitRevisionDoc } from '@api/fileApi'
+import { mixins } from "../mixin/toolMixin";
+import service from '@utils/requestService'
+
+export default {
+  name: 'SplitWordForm',
+  mixins:["mixin"],
+  props:{
+    baseUrl:{
+      type: String
+    }
+  },
+  data: function() {
+    return {
+      uploadURL: 'Word/SplitRevisionDoc',
+      fileList: [],
+      form: {
+        applyType: '1',
+        split: 'splitAccording',
+        abstPageRange: '',
+        specPageRange: '',
+        claimPageRange: '',
+        figPageRange: ''
+      },
+      disabled: {
+        1: false,
+        2: false,
+        3: false,
+        4: false
+      },
+      showPage: false,
+
+      inpFields: [
+        {
+          label: 'ABST',
+          field: 'abstPageRange',
+          placeholder: '請輸入頁數如: 1-10'
+        },
+        {
+          label: 'SPEC',
+          field: 'specPageRange',
+          placeholder: '請輸入頁數如: 11-20'
+        },
+        {
+          label: 'CLAIM',
+          field: 'claimPageRange',
+          placeholder: '請輸入頁數如: 21-30'
+        },
+        {
+          label: 'FIG',
+          field: 'figPageRange',
+          placeholder: '請輸入頁數如: 31-40'
+        }
+      ],
+      editInpIndex: -1
+
+    }
+  },
+  watch: {
+    'form.split'(val) {
+      if (val === 'splitAccording') {
+        this.form.abstPageRange = ''
+        this.form.specPageRange = ''
+        this.form.claimPageRange = ''
+        this.form.figPageRange = ''
+      }
+    }
+
+  },
+  methods: {
+    onInput(e, i) {
+      if (e.target.value) {
+        this.editInpIndex = i
+      } else {
+        this.editInpIndex = -1
+      }
+    },
+
+    // 點擊下載按鈕
+    async handleDownloadClick() {
+      if (this.fileList.length <= 0) {
+        this.$message.error('请先选择需要上传的文件！')
+        return false
+      }
+      const formData = new FormData()
+      const { form } = this
+
+      formData.append('file', this.fileList[0].raw)
+      formData.append('applyType', form.applyType)
+      // if (form.split === 'pageNum') {
+      formData.append('abstPageRange', form.abstPageRange)
+      formData.append('specPageRange', form.specPageRange)
+      formData.append('claimPageRange', form.claimPageRange)
+      formData.append('figPageRange', form.figPageRange)
+      // 上傳的參數置空
+      // } else {
+      //   formData.append('abstPageRange', '')
+      //   formData.append('specPageRange', '')
+      //   formData.append('claimPageRange', '')
+      //   formData.append('figPageRange', '')
+      // }
+      const response = await service.post(`api/v1.0/Word/SplitRevisionDoc`, formData)
+      // const response = await SplitRevisionDoc(this.baseUrl, formData)
+      if (response) {
+        this.fileList = []
+        this.$refs.upload.clearFiles()
+        const zipFileName = response.data
+        this.downloadFile(zipFileName)
+        console.log(this.downloadFile)
+      } else {
+        this.$refs.upload.abort()
+        this.$message.error('下载档案失败!')
+      }
+    },
+    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+    handelFileChange(file, fileList) {
+      // 存在文件标识
+      let existsFileFlag = false
+
+      for (let i = 0; i < this.fileList.length; i++) {
+        if (
+          file.name === this.fileList[i].name &&
+          file.size === this.fileList[i].size
+        ) {
+          // 如果存在了，赋值true
+          existsFileFlag = true
+        }
+      }
+      // 遍历的这个文件存在当前列表直接结束
+      if (existsFileFlag) {
+        // 否则不加入
+        fileList.pop()
+        // console.log(`文件已经存在：${file.name}`)
+        // this.handleMsg(`文件已经选择过了：${file.name})`);
+        this.$message({
+          showClose: true,
+          message: `文件已经选择过了：${file.name})`,
+          type: 'error'
+        })
+        return
+      }
+      this.fileList.push(file)
+    },
+    handelDetailFileChange(file, fileList) {
+      // 存在文件标识
+      let existsFileFlag = false
+
+      for (let i = 0; i < this.detailFileList.length; i++) {
+        if (
+          file.name === this.detailFileList[i].name &&
+          file.size === this.detailFileList[i].size
+        ) {
+          // 如果存在了，赋值true
+          existsFileFlag = true
+        }
+      }
+      // 遍历的这个文件存在当前列表直接结束
+      if (existsFileFlag) {
+        // 否则不加入
+        fileList.pop()
+        // console.log(`文件已经存在：${file.name}`)
+        // this.handleMsg(`文件已经选择过了：${file.name})`);
+        this.$message({
+          showClose: true,
+          message: `文件已经选择过了：${file.name})`,
+          type: 'error'
+        })
+        return
+      }
+      this.detailFileList.push(file)
+    },
+    // 文件列表移除文件时的钩子
+    handleFileRemove(file, fileList) {
+      this.fileList = fileList
+    },
+    handleDetailFileRemove(file, fileList) {
+      this.detailFileList = fileList
+    },
+    handleExceed(files, fileList) {
+      this.$set(fileList[0], 'raw', files[0])
+      this.$set(fileList[0], 'name', files[0].name)
+      this.$refs['rebateUpload'].clearFiles()// 清除文件
+      this.$refs['rebateUpload'].handleStart(files[0])// 选择文件后的赋值方法
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.el-form .el-form-item{
+  margin: 10px 0;
+  .el-radio-group{
+    margin-left: 20px;
+  }
+  input{
+    width: 126px;
+    margin-left: 10px;
+    outline: none;
+    border: 0;
+    background: #C6C6C6;
+  }
+}
+.choose-box{
+  margin-left:200px;
+  border: 1px solid #000;
+  width: 220px;
+  div > span{
+    display: inline-block;
+    width: 56px;
+    text-align: center;
+    margin: 10px 5px;
+    border: 1px solid #000;
+  }
+}
+input::-webkit-input-placeholder{
+  font-size: 12px;
+  opacity: 0.8;
+}
+::v-deep .el-form-item__content{
+  line-height: 1.5!important;
+  }
+</style>

packages/fileSplit/src/index.vue

+<template>
+  <el-card>
+    <el-tabs type="border-card">
+      <el-tab-pane label="TW OA答辯 Word 檔案分割">
+        <SplitWordForm :baseUrl="baseUrl"/>
+      </el-tab-pane>
+    </el-tabs>
+  </el-card>
+</template>
+
+<script>
+import SplitWordForm from './components/SplitWordForm'
+import config from '@config/index.js'
+export default {
+  name: 'fileSplit',
+  components: { SplitWordForm },
+  props:{
+    env:{
+      type: String,
+      default: 'prod_sz'
+    }
+  },
+  computed:{
+    baseUrl(){
+      console.log('config', config, this.env)
+      return config[this.env].VUE_APP_GRAPHAPI_URL
+    }
+  },
+}
+</script>

packages/fileSplit/src/mixin/toolMixin.js

+import service from '@utils/requestService'
+import Vue from 'vue'
+
+Vue.mixin({
+  methods: {
+    async downloadFile(zipFileName) {
+      try {
+        const formData = new FormData()
+        formData.append('fileName', zipFileName)
+        const response = await service.post('api/v1.0/Word/DownloadFile', formData, { responseType: 'blob' })
+        if (response) {
+          const blob = new Blob([response])
+          const downloadElement = document.createElement('a')
+          const href = window.URL.createObjectURL(blob)
+          downloadElement.href = href
+          downloadElement.download = zipFileName.split('\\').pop().split('/').pop()
+          document.body.appendChild(downloadElement)
+          downloadElement.click()
+          document.body.removeChild(downloadElement)
+          window.URL.revokeObjectURL(href)
+        }
+      } catch (error) {
+        console.log('error', error)
+        this.$refs.upload.abort()
+        this.$message.error('下载档案失败!')
+      }
+    }
+  }
+})

packages/index.js

 import pLink from './aComponent'
 import splitTool from './splitTool'
+import convertTool from './convertTool'
+import fileSplit from './fileSplit'
+import upload from './upload'
+import uploadExcel from './upload_excel'
 // 存放组件的数组
 const components = [
   pLink,
-  splitTool
+  splitTool,
+  convertTool,
+  fileSplit,
+  upload,
+  uploadExcel
 ]
 
 // 全局注册
-const install = function( Vue, opt = {} ) {
+const install = function (Vue, opt = {}) {
   components.forEach(item => {
-      register( Vue, item )
+    register(Vue, item)
   })
 }
 
@@ -23,9 +31,9 @@ if (typeof window !== 'undefined' && window.Vue) {
 * @param { vue } _v
 * @param { component } com
 */
-function register ( _v, com ) {
-  if(typeof _v !== 'function' && typeof com !== 'object') return
-  _v.component( com.name, com)
+function register(_v, com) {
+  if (typeof _v !== 'function' && typeof com !== 'object') return
+  _v.component(com.name, com)
 }
 // 按需暴露
 export {

packages/splitTool/src/components/SplitBookMarkWordForm.vue

@@ -21,7 +21,7 @@
               :on-remove="handleFileRemove"
               :on-exceed="handleExceed"
               :auto-upload="false"
-              accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+              accept=".doc, .docx"
             >
               <i class="el-icon-upload" />
               <div class="el-upload__text">

packages/splitTool/src/components/SplitPageBreakWordForm.vue

@@ -21,7 +21,7 @@
               :on-remove="handleFileRemove"
               :on-exceed="handleExceed"
               :auto-upload="false"
-              accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+              accept=".doc, .docx"
             >
               <i class="el-icon-upload" />
               <div class="el-upload__text">

packages/splitTool/src/components/SplitRangeWordForm.vue

@@ -21,7 +21,7 @@
               :on-remove="handleFileRemove"
               :on-exceed="handleExceed"
               :auto-upload="false"
-              accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+              accept=".doc, .docx"
             >
               <i class="el-icon-upload" />
               <div class="el-upload__text">

packages/splitTool/src/components/SplitWordForm.vue

@@ -21,7 +21,7 @@
               :on-remove="handleFileRemove"
               :on-exceed="handleExceed"
               :auto-upload="false"
-              accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+              accept=".doc, .docx"
             >
               <i class="el-icon-upload" />
               <div class="el-upload__text">

packages/splitTool/src/index.vue

@@ -31,12 +31,17 @@ export default {
       default: 'prod_sz'
     }
   },
+  components: {
+    SplitWordForm,
+    SplitRangeWordForm,
+    SplitPageBreakWordForm,
+    SplitBookMarkWordForm
+  },
   computed:{
     baseUrl(){
       console.log('config', config, this.env)
       return config[this.env].VUE_APP_GRAPHAPI_URL
     }
   },
-  components: { SplitWordForm, SplitRangeWordForm, SplitPageBreakWordForm, SplitBookMarkWordForm }
 }
 </script>

packages/upload/index.js

+import upload from './src'
+
+upload.install = function (Vue) {
+  Vue.component(upload.name, upload)
+}
+
+export default upload
\ No newline at end of file

packages/upload_excel/index.js

+import uploadExcel from './src'
+
+uploadExcel.install = function (Vue) {
+  Vue.component(uploadExcel.name, uploadExcel)
+}
+
+export default uploadExcel
\ No newline at end of file

packages/upload_excel/src/components/UploadExcel.vue

+<template>
+  <div>
+    <input
+      ref="excel-upload-input"
+      class="excel-upload-input"
+      type="file"
+      accept=".xlsx, .xls"
+      @change="handleClick"
+    >
+    <div
+      class="drop"
+      @drop="handleDrop"
+      @dragover="handleDragover"
+      @dragenter="handleDragover"
+    >
+      Drop excel file here or
+      <el-button
+        :loading="loading"
+        style="margin-left: 16px"
+        size="mini"
+        type="primary"
+        @click="handleUpload"
+      >
+        Browse
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import XLSX from 'xlsx/dist/xlsx.mini.min.js'
+
+export default {
+  props: {
+    beforeUpload: Function, // eslint-disable-line
+    onSuccess: Function, // eslint-disable-line
+  },
+  data() {
+    return {
+      loading: false,
+      excelData: {
+        header: null,
+        results: null
+      }
+    }
+  },
+  methods: {
+    generateData({ header, results }) {
+      this.excelData.header = header
+      this.excelData.results = results
+      this.onSuccess && this.onSuccess(this.excelData)
+    },
+    handleDrop(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      if (this.loading) return
+      const files = e.dataTransfer.files
+      if (files.length !== 1) {
+        this.$message.error('Only support uploading one file!')
+        return
+      }
+      const rawFile = files[0] // only use files[0]
+
+      if (!this.isExcel(rawFile)) {
+        this.$message.error(
+          'Only supports upload .xlsx, .xls, .csv suffix files'
+        )
+        return false
+      }
+      this.upload(rawFile)
+      e.stopPropagation()
+      e.preventDefault()
+    },
+    handleDragover(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'copy'
+    },
+    handleUpload() {
+      this.$refs['excel-upload-input'].click()
+    },
+    handleClick(e) {
+      const files = e.target.files
+      const rawFile = files[0] // only use files[0]
+      if (!rawFile) return
+      this.upload(rawFile)
+    },
+    upload(rawFile) {
+      this.$refs['excel-upload-input'].value = null // fix can't select the same excel
+
+      if (!this.beforeUpload) {
+        this.readerData(rawFile)
+        return
+      }
+      const before = this.beforeUpload(rawFile)
+      if (before) {
+        this.readerData(rawFile)
+      }
+    },
+    readerData(rawFile) {
+      this.loading = true
+      return new Promise(resolve => {
+        const reader = new FileReader()
+        reader.onload = e => {
+          const data = e.target.result
+          const workbook = XLSX.read(data, { type: 'array' })
+          const firstSheetName = workbook.SheetNames[0]
+          const worksheet = workbook.Sheets[firstSheetName]
+          const header = this.getHeaderRow(worksheet)
+          const results = XLSX.utils.sheet_to_json(worksheet)
+          this.generateData({ header, results })
+          this.loading = false
+          resolve()
+        }
+        reader.readAsArrayBuffer(rawFile)
+      })
+    },
+    getHeaderRow(sheet) {
+      const headers = []
+      const range = XLSX.utils.decode_range(sheet['!ref'])
+      let C
+      const R = range.s.r
+      /* start in the first row */
+      for (C = range.s.c; C <= range.e.c; ++C) {
+        /* walk every column in the range */
+        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
+        /* find the cell in the first row */
+        let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
+        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
+        headers.push(hdr)
+      }
+      return headers
+    },
+    isExcel(file) {
+      return /\.(xlsx|xls|csv)$/.test(file.name)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.excel-upload-input {
+  display: none;
+  z-index: -9999;
+}
+.drop {
+  border: 2px dashed #bbb;
+  width: 600px;
+  height: 160px;
+  line-height: 160px;
+  margin: 0 auto;
+  font-size: 24px;
+  border-radius: 5px;
+  text-align: center;
+  color: #bbb;
+  position: relative;
+}
+</style>

packages/upload_excel/src/index.vue

+<template>
+  <div class="app-container">
+    <upload-excel-component
+      :on-success="handleSuccess"
+      :before-upload="beforeUpload"
+    />
+    <el-button @click="inputHandler">導入</el-button>
+    <el-table
+      :key="itemkey"
+      :data="tableData"
+      border
+      highlight-current-row
+      style="width: 100%; margin-top: 20px"
+    >
+      <el-table-column
+        v-for="item of tableHeader"
+        :key="item"
+        :prop="item"
+        :label="item"
+      />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import UploadExcelComponent from './components/UploadExcel.vue'
+import graphRequest from '@utils/GraphApiService'
+export default {
+  name:'uploadExcel',
+  components: { UploadExcelComponent },
+  data() {
+    return {
+      tableData: [],
+      tableHeader: [],
+      itemkey: '', // 临时变量
+      levelKeys: [
+        { name: 'level1', value: '核心' },
+        { name: 'level2', value: '重要' },
+        { name: 'level3', value: '常规' }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters('user/', ['wadeUserID'])
+  },
+  methods: {
+    beforeUpload(file) {
+      const isLt1M = file.size / 1024 / 1024 < 1
+
+      if (isLt1M) {
+        return true
+      }
+
+      this.$message({
+        message: 'Please do not upload files larger than 1m in size.',
+        type: 'warning'
+      })
+      return false
+    },
+    handleSuccess({ results, header }) {
+      console.log(this.wadeUserID)
+      this.tableData = results
+      this.tableHeader = header
+      this.tableHeader.push('isUpload')
+      // this.tableData = this.tableData.map(obj => ({ ...obj, isUpload: false }))
+      console.log(this.tableData)
+      this.levelKeys.map(level => {
+        this.tableData.forEach((obj, index, array) => {
+          array[index][level.name] = this.getLevel(level.value)
+          array[index].isUpload = 'x'
+        })
+      })
+    },
+    inputHandler() {
+      this.levelKeys.forEach(level => {
+        console.log(`=====================${level.value}======================`)
+        this.tableData
+          .filter(item => {
+            return item[level.value] === 'ν'
+          })
+          .map(item => {
+            graphRequest
+              .get('/Wade/GetEhrEmployeeByName', {
+                params: { name: item['姓名'] }
+              })
+              .then(rest => {
+                if (rest.status === 200) {
+                  if (rest.data === null || rest.data.wade_user_id === null) {
+                    this.$message({
+                      type: 'error',
+                      message: `系統找不到${item['姓名']}!`
+                    })
+                    return
+                  }
+                  console.log(rest.data.wade_user_id)
+                  const params = {
+                    customer_id: '0BE8F97E-320D-49D7-A13B-E4E5EF4738ED', // 華星
+                    case_level: item[level.name],
+                    match_case_user_id: rest.data.wade_user_id,
+                    match_type: '1',
+                    update_user_id: this.wadeUserID
+                  }
+                  graphRequest
+                    .post('/Wade/CreateCaseLevelList', params)
+                    .then(res => {
+                      if (res.status === 200) {
+                        console.log(
+                          `${item[level.name]} isUpload: ${item['姓名']}`
+                        )
+                        item.isUpload = 'ν'
+                        this.itemkey = Math.random() // 在这边给key赋随机值
+                        this.$message({ type: 'success', message: '新增成功!' })
+                      }
+                    })
+                    .catch(() => {
+                      this.$message({
+                        type: 'error',
+                        message: '新增失败! 已有该笔资料!'
+                      })
+                    })
+                }
+              })
+          })
+      })
+    },
+    searchitem(index) {
+      console.log(this.tableHeader[index])
+      return this.tableHeader[index]
+    },
+    getLevel(level) {
+      switch (level) {
+        case '重要':
+          return '重要專利'
+        case '核心':
+          return '核心專利'
+        case '常规':
+          return '常規專利'
+      }
+    }
+  }
+}
+</script>

utils/requestService.js

+import axios from 'axios'
+import { Message } from 'element-ui'
+
+const service = axios.create({
+  baseURL: "https://dev.essenptl.com/dev2/wade_ext",
+  // withCredentials: true,
+  timeout: 1500000
+})
+
+// response interceptor
+service.interceptors.response.use(
+  async response => {
+    const res = response.data
+    // 判斷是否為檔案類型
+    if (response.config.responseType === 'blob') return res
+
+    if (
+      res.type && (res.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
+        res.type === 'application/zip')
+    ) {
+      return res
+    }
+    // 如果code非20000表示有發生問題
+    // code = 1 為運營看板暫時使用
+    return res
+  },
+  error => {
+    if (error.response) {
+      console.log('err' + error) // for debug
+      return error
+      // return Promise.reject(error)
+    } else {
+      console.log('err' + error) // for debug
+      Message({
+        message: error.message,
+        type: 'error',
+        duration: 5 * 1000
+      })
+      return Promise.reject(error)
+    }
+  }
+)
+
+export default service