@smart100/spu-web-plugin 0.0.18 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart100/spu-web-plugin",
-  "version": "0.0.18",
+  "version": "0.0.22",
   "description": "",
   "scripts": {
     "dev": "rollup -c -w",
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@smart100/wxworksuite-plugin": "^0.0.3",
     "axios": "^1.6.0",
     "co": "^4.6.0",
     "dayjs": "^1.11.10",

package/src/axios.ts

@@ -8,6 +8,7 @@ import { get } from 'lodash-es'
 // import { Message } from 'element-ui'
 import { loadding } from './components/loadding'
 import login from './login'
+import core from './core'
 
 interface Response {
   code: number | string
@@ -18,6 +19,7 @@ interface Response {
 const createAxiosInstance = (type: 'spu' | 'apaas' = 'spu', options: SPUWebPluginOptions) => {
   const axiosInstance: AxiosInstance = axios.create({
     baseURL: type === 'spu' ? `/api/${options.modulekey}/${options.moduleversion}` : '',
+    // baseURL: '',
     // timeout: 36000000
     // withCredentials: true, // 不能开启 影响ali oss
     // headers: {
@@ -26,7 +28,7 @@ const createAxiosInstance = (type: 'spu' | 'apaas' = 'spu', options: SPUWebPlugi
     // }
   })
 
-  axiosInstance.interceptors.request.use((config: any) => {
+  axiosInstance.interceptors.request.use(async (config: any) => {
     // const isShowLoading = typeof config?.isShowLoading !== 'undefined' ? config.isShowLoading : true
     const isShowLoading = get(config, 'isShowLoading', true)
     isShowLoading && loadding.open()
@@ -38,6 +40,17 @@ const createAxiosInstance = (type: 'spu' | 'apaas' = 'spu', options: SPUWebPlugi
         config.headers.token = token
       }
     }
+
+    if (type === 'spu' && config.modulekey) {
+      const moduleData: any = await core.getModuleData(config.modulekey)
+      if (moduleData.data) {
+        config.baseURL = `/api/${config.modulekey}/${moduleData.data.moduleversion}`
+      } else {
+        console.error(moduleData.errorMsg)
+        config.baseURL = `/api/${config.modulekey}/v?.?`
+      }
+    }
+
     return config
   }, error => {
     return Promise.reject(error)

package/src/components/expandexp/index.ts

@@ -54,6 +54,7 @@ export default class SpuExpandexp extends HTMLElement {
 
       expandStatus: '1', // 1普通导出（没有做图片导出服务） 2服务端导出（做了图片导出服务未SPU化） 3安装了图片导出SPU
       filewatermarkGlobalConfig: '0', // 全局文件水印开关
+      exportConfigInit: false,
       exportcontentArray: ['excel', 'link', 'photo'], // 当 expandStatus = 2 | 3时才显示导出内容给用户选择
       percentage: 0,
       step: new Step(),
@@ -68,7 +69,7 @@ export default class SpuExpandexp extends HTMLElement {
       runningTaskCount: 0,
       isOldVersionService: false
     }, (key: string, value: any) => {
-      const { expandStatus, stepName, stepText, exportcontentArray, exportcontent, isOldVersionService, runningTaskCount, fileName, filetype, fileSize, exportDataItem, percentage, resultMessage } = this.data
+      const { exportConfigInit, stepName, stepText, exportcontentArray, exportcontent, isOldVersionService, runningTaskCount, fileName, filetype, fileSize, exportDataItem, percentage, resultMessage } = this.data
 
       // debugger
       const $exportSel = this.shadow.querySelector('.export-sel') as any
@@ -89,6 +90,10 @@ export default class SpuExpandexp extends HTMLElement {
       const $wait = this.shadow.querySelector('.export-wait') as any
       const $waitSpan = this.shadow.querySelector('.export-wait span') as any
 
+      if (key === 'exportConfigInit') {
+        this.vIf($exportSelCon, exportConfigInit)
+      }
+
       if (key === 'expandStatus' || key === 'stepName') {
         // this.vIf($exportSel, (expandStatus !== '1' && stepName === 'initial'))
         this.vIf($exportSel, (stepName === 'initial'))
@@ -232,6 +237,15 @@ export default class SpuExpandexp extends HTMLElement {
     }
   }
 
+  vOp (ele: any, flag: boolean) {
+    const elc = ele.classList
+    if (flag) {
+      elc.contains('opacity0') && elc.remove('opacity0')
+    } else {
+      !elc.contains('opacity0') && elc.add('opacity0')
+    }
+  }
+
   initData (data: any, setCallback: any) {
     this.data = cloneDeep(data)
     const dataP = cloneDeep(data)
@@ -286,17 +300,34 @@ export default class SpuExpandexp extends HTMLElement {
     })
 
     this.shadow.querySelector('.export-file .export-file-r-download')!.addEventListener('click', () => {
-      console.log('下载')
       this.handleDownload()
     })
 
     this.shadow.querySelector('.export-file .export-file-r-cancel')!.addEventListener('click', () => {
-      console.log('取消')
+      // this.handleCencel()
+      const ele = this.shadow.querySelector('.spu-expandexp-confirm')
+      this.vIf(ele, true)
+    })
+
+
+    this.shadow.querySelector('.spu-expandexp-confirm-modal-th-close')!.addEventListener('click', () => {
+      const ele = this.shadow.querySelector('.spu-expandexp-confirm')
+      this.vIf(ele, false)
+    })
+
+    this.shadow.querySelector('.spu-expandexp-confirm-modal-cancel')!.addEventListener('click', () => {
+      const ele = this.shadow.querySelector('.spu-expandexp-confirm')
+      this.vIf(ele, false)
+    })
+
+    this.shadow.querySelector('.spu-expandexp-confirm-modal-confirm')!.addEventListener('click', () => {
       this.handleCencel()
     })
 
-    this.shadow.querySelector('.export-btnwrap .btn')!.addEventListener('click', () => {
-      console.log('导出')
+
+
+    this.shadow.querySelector('.export-btn')!.addEventListener('click', () => {
+      // console.log('导出')
       this.handleExport()
       // this.data.percentage = this.data.percentage + 20
       // this.data.isOldVersionService = false
@@ -338,6 +369,8 @@ export default class SpuExpandexp extends HTMLElement {
             this.data.iscompress = data.iscompress.toString()
             this.data.imagesizepercolumn = data.imagesizepercolumn.toString()
             this.data.imageheightcm = data.imageheightcm.toString()
+
+            this.data.exportConfigInit = true
           }
         }
       })
@@ -377,6 +410,8 @@ export default class SpuExpandexp extends HTMLElement {
             this.data.exportcontent = 'excel'
             this.data.filewatermark = '0'
             this.data.iscompress = '0'
+
+            this.data.exportConfigInit = true
           } else if (this.data.expandStatus === '2') {
             this.data.iscompress = '1'
 
@@ -396,6 +431,7 @@ export default class SpuExpandexp extends HTMLElement {
                 this.data.filewatermarkGlobalConfig = '0'
               }).finally(() => {
                 this.data.filewatermark = this.data.filewatermarkGlobalConfig === '1' ? '1' : '0'
+                this.data.exportConfigInit = true
               })
           }
         })
@@ -555,8 +591,21 @@ export default class SpuExpandexp extends HTMLElement {
   }
 
   handleCencel () {
+    const $message = this.shadow.querySelector('.spu-expandexp-message') as any
+    // this.vText($message, '取消成功！')
+    // this.vIf($message, true)
+    // this.vOp($message, true)
+    // $message.classList.add('success')
+    // setTimeout(() => {
+    //   this.vOp($message, false)
+    //   setTimeout(() => {
+    //     this.vIf($message, false)
+    //   }, 1000)
+    // }, 1500)
+    // return false
     // console.log(this.data)
     // console.log(this.data.exportDataItem)
+
     apaasAxios
       .post('/api/teapi/queue/impexp/cancel', {
         dynamicid: this.data.exportId
@@ -566,9 +615,28 @@ export default class SpuExpandexp extends HTMLElement {
           // 取消成功
           this.updateStep('cancel')
           this.data.resultMessage = '任务已取消'
+          this.vText($message, '取消成功！')
+          this.vIf($message, true)
+          this.vOp($message, true)
+          $message.classList.add('success')
         }
       })
       .catch((error: any) => {
+        this.vText($message, '取消失败！')
+        this.vIf($message, true)
+        this.vOp($message, true)
+        $message.classList.add('error')
+      })
+      .finally(() => {
+        const ele = this.shadow.querySelector('.spu-expandexp-confirm')
+        this.vIf(ele, false)
+
+        setTimeout(() => {
+          this.vOp($message, false)
+          setTimeout(() => {
+            this.vIf($message, false)
+          }, 2000)
+        }, 2000)
 
       })
   }

package/src/components/expandexp/template.ts

@@ -10,6 +10,87 @@ import icon_zip from './icons/icon_zip.png'
 export default (ele: SpuExpandexp) => {
   return `
 <style>
+.spu-expandexp-confirm {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+}
+.spu-expandexp-confirm-modal {
+  width: 400px;
+  margin: 50px auto 0;
+  border-radius: 2px;
+  overflow: hidden;
+}
+.spu-expandexp-confirm-modal-th {
+  height: 40px;
+  background-color: #409eff;
+}
+.spu-expandexp-confirm-modal-th-title {
+  float: left;
+  line-height: 40px;
+  color: #fff;
+  font-size: 16px;
+  margin-left: 16px;
+}
+.spu-expandexp-confirm-modal-th-close {
+  float: right;
+  line-height: 40px;
+  height: 40px;
+  width: 40px;
+  color: #fff;
+  font-size: 16px;
+  text-align: center;
+  cursor: pointer;
+}
+.spu-expandexp-confirm-modal-tb {
+  padding: 16px;
+  background-color: #fff;
+}
+.spu-expandexp-confirm-modal-tb-tip {
+
+}
+.spu-expandexp-confirm-modal-btnwrap {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.spu-expandexp-message {
+  width: auto;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 3px;
+  overflow: hidden;
+  position: absolute;
+  padding: 0 24px;
+  top: 50px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  transition: all .6s ease;
+}
+.spu-expandexp-message.success {
+  background-color: #f0f9eb;
+  border: 1px solid #529b2e;
+  color: #67c23a;
+}
+.spu-expandexp-message.error {
+  background-color: #fde2e2;
+  border: 1px solid #c45656;
+  color: #f56c6c;
+}
+.opacity0 {
+  transition: all .6s ease;
+  opacity: 0;
+}
+
+</style>
+<style>
 :host {
   display: block;
   width: 100%;
@@ -31,9 +112,16 @@ export default (ele: SpuExpandexp) => {
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   overflow: auto;
+  position: absolute;
+  top: 0;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
 }
 
 
+
+
 .modal {
   width: 80%;
   max-width: 800px;
@@ -181,17 +269,17 @@ export default (ele: SpuExpandexp) => {
   line-height: 20px;
   width: 20px;
   border-radius: 14px;
-  color: #f56c6c;
-  background: #fef0f0;
-  border: 1px solid #fbc4c4;
+  color: #999;
+  background: #fff;
+  border: 1px solid #999;
   text-align: center;
   font-size: 14px;
   cursor: pointer;
 }
 .export-file-r-cancel:hover {
-  background: #f56c6c;
-  border-color: #f56c6c;
-  color: #fff;
+  background: #fff;
+  border-color: #777;
+  color: #777;
 }
 
 
@@ -214,7 +302,7 @@ export default (ele: SpuExpandexp) => {
   animation-duration: 3s;
   height: 100%;
   width: 0;
-  background-color: #417AE7;
+  background-color: #409eff;
   -webkit-transition: width .6s ease;
   transition: width .6s ease;
 }
@@ -267,7 +355,7 @@ export default (ele: SpuExpandexp) => {
   flex-direction: row-reverse;
 }
 .btn {
-  line-height: 38px;
+  height: 38px;
   line-height: 38px;
   border: 1px solid #409eff;
   background-color: #409eff;
@@ -281,6 +369,39 @@ export default (ele: SpuExpandexp) => {
   background: #66b1ff;
   border-color: #66b1ff;
 }
+
+.btn1 {
+  height: 30px;
+  line-height: 30px;
+  border: 1px solid #409eff;
+  background-color: #409eff;
+  border-radius: 5px;
+  color: #fff;
+  padding: 0 12px;
+  font-size: 14px;
+  cursor: pointer;
+}
+.btn1:hover {
+  background: #66b1ff;
+  border-color: #66b1ff;
+}
+
+.btn2 {
+  height: 30px;
+  line-height: 30px;
+  border: 1px solid #aaa;
+  background-color: #fff;
+  border-radius: 5px;
+  color: #444;
+  padding: 0 12px;
+  font-size: 14px;
+  cursor: pointer;
+}
+.btn2:hover {
+  border-color: #ccc;
+  color: #777;
+  background-color: #fff;
+}
 </style>
 
     <div class="spu-expandexp">
@@ -301,7 +422,7 @@ export default (ele: SpuExpandexp) => {
 
             <div class="export-sel hide">
               <div class="export-sel-title">请选择导出内容</div>
-              <div class="export-sel-con"></div>
+              <div class="export-sel-con hide"></div>
             </div>
 
             <div class="export-section-wrap hide">
@@ -333,12 +454,39 @@ export default (ele: SpuExpandexp) => {
             </div>
 
             <div class="export-btnwrap">
-              <div class="btn">导出</div>
+              <div class="export-btn btn">导出</div>
             </div>
 
           </div>
         </div>
       </div>
     </div>
+
+    <div class="spu-expandexp-confirm hide">
+      <div class="spu-expandexp-confirm-modal">
+        <div class="spu-expandexp-confirm-modal-th">
+          <div class="spu-expandexp-confirm-modal-th-title">
+            数据导出
+          </div>
+          <div class="spu-expandexp-confirm-modal-th-close">
+            x
+          </div>
+        </div>
+        <div class="spu-expandexp-confirm-modal-tb">
+
+          <div class="spu-expandexp-confirm-modal-tb-tip">
+            确认是否取消该任务？
+          </div>
+
+          <div class="spu-expandexp-confirm-modal-btnwrap">
+            <div class="spu-expandexp-confirm-modal-confirm btn1">确定</div>
+            <div class="spu-expandexp-confirm-modal-cancel btn2" style="margin-right: 12px;">关闭</div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <div class="spu-expandexp-message hide opacity0"></div>
   `
 }

package/src/components/webMessage/index.ts

@@ -0,0 +1,143 @@
+const styletext = `
+  :host {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10000;
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  :host .spu-web-message {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`
+
+const template = `
+  <div class="spu-web-message">
+    <div class="spu-web-message-icon"></div>
+  </div>
+`
+
+export default class SpuWebMessage extends HTMLElement {
+
+  static componentName: string = 'spu-web-message'
+  static register () {
+    if (!window.customElements.get(SpuWebMessage.componentName)) {
+      window.customElements.define(SpuWebMessage.componentName, SpuWebMessage)
+    }
+  }
+
+  isuseshadow = true
+  // isuseshadow = false
+  shadow: ShadowRoot | null = null
+  constructor () {
+    super()
+  }
+
+  // 当自定义元素第一次被连接到文档DOM时被调用。
+  connectedCallback () {
+    // console.log('connectedCallback')
+    const templateElem = document.createElement('template')
+    templateElem.innerHTML = template
+    const content = templateElem.content.cloneNode(true)
+
+    if (this.isuseshadow) {
+      this.shadow = this.attachShadow({ mode: 'open' })
+      this.shadow.append(content)
+      this.appendStyle()
+
+
+      // this.shadow.querySelector('.spu-web-message').addEventListener('click', () => {
+      //   console.log(this)
+      //   console.log(this.isuseshadow)
+      //   console.log(this.shadow)
+      // })
+      // this.addEventListener('click', () => {
+      //   console.log(this)
+      //   console.log(this.isuseshadow)
+      //   console.log(this.shadow)
+      // })
+
+    } else {
+      this.append(content)
+      this.appendStyle()
+
+      // this.addEventListener('click', () => {
+      //   console.log(this)
+      //   console.log(this.isuseshadow)
+      //   console.log(this.shadow)
+      // })
+    }
+  }
+
+  // 当组件从 DOM 文档移除后调用。
+  disconnectedCallback () {
+    // console.log('disconnectedCallback')
+    // setTimeout(() => {
+    //   console.log(this)
+    // }, 100)
+  }
+
+  createStyleEle () {
+    var styleElement = document.createElement('style')
+    styleElement.type = 'text/css'
+    styleElement.id = SpuWebMessage.componentName
+    styleElement.innerHTML = styletext
+    return styleElement
+  }
+
+  appendStyle () {
+    if (this.isuseshadow) {
+      const style = this.createStyleEle()
+      this.shadow!.appendChild(style)
+    } else {
+      if (!document.getElementById(SpuWebMessage.componentName)) {
+        const style = this.createStyleEle()
+        document.getElementsByTagName('head')[0].appendChild(style)
+      }
+    }
+  }
+}
+
+
+
+class Loadding {
+  count = 0
+
+  ele: null | HTMLElement = null
+
+  constructor () {
+    SpuWebMessage.register()
+  }
+
+  open () {
+    this.count++
+    if (!this.ele) {
+      this.ele = document.createElement('spu-web-message')
+      // console.log(this.ele)
+      document.body.appendChild(this.ele)
+    }
+  }
+
+  close () {
+    this.count--
+    if (this.count <= 0) {
+      this.count = 0
+      if (this.ele) {
+        document.body.removeChild(this.ele)
+        this.ele = null
+      }
+    }
+  }
+}
+
+const loadding = new Loadding()
+
+export {
+  loadding
+}

package/src/core.js

@@ -70,6 +70,7 @@ class Core {
       let response
       try {
         response = await axios.get(`${hostsRoot}/multiplatconfig/env/${envName}`, {
+          isShowLoading: false,
           isSendToken: false
         })
         // console.log(response)
@@ -98,6 +99,8 @@ class Core {
         res = await axios.post(`${smartcenter}/api/smartcenter/biz/getTenantWebAndApiDefined`, {
           envid: envId,
           tenantcode: tenantCode
+        }, {
+          isShowLoading: false
         })
       } catch (err) {
         console.error(err)
@@ -180,6 +183,9 @@ class Core {
   }
 
   async getModuleData (modulekey) {
+    if (!modulekey) {
+      modulekey = globalOptions.modulekey
+    }
     const res = {
       errorMsg: '',
       data: null
@@ -205,6 +211,9 @@ class Core {
   }
 
   async getContext (modulekey) {
+    if (!modulekey) {
+      modulekey = globalOptions.modulekey
+    }
     let context
     const moduleData = await this.getModuleData(modulekey)
     if (moduleData?.data) {
@@ -234,6 +243,9 @@ class Core {
   }
 
   async checkModule (modulekey) {
+    if (!modulekey) {
+      modulekey = globalOptions.modulekey
+    }
     const moduleData = await this.getModuleData(modulekey)
     return !!moduleData.data
   }
@@ -362,21 +374,21 @@ class Core {
     }
   }
 
-  async getApiOrigin (modulekey) {
-    let apiOrigin = ''
-    let errorMsg = ''
-    const moduleData = await this.getModuleData(modulekey)
-    if (moduleData.data) {
-      const moduleBusiness = await this.getModuleBusiness(modulekey)
-      apiOrigin = `${moduleBusiness}/api/${moduleData.data.modulekey}/${moduleData.data.moduleversion}/`
-    } else {
-      errorMsg = moduleData.errorMsg
-    }
-    return {
-      apiOrigin,
-      errorMsg
-    }
-  }
+  // async getApiOrigin (modulekey) {
+  //   let apiOrigin = ''
+  //   let errorMsg = ''
+  //   const moduleData = await this.getModuleData(modulekey)
+  //   if (moduleData.data) {
+  //     const moduleBusiness = await this.getModuleBusiness(modulekey)
+  //     apiOrigin = `${moduleBusiness}/api/${moduleData.data.modulekey}/${moduleData.data.moduleversion}/`
+  //   } else {
+  //     errorMsg = moduleData.errorMsg
+  //   }
+  //   return {
+  //     apiOrigin,
+  //     errorMsg
+  //   }
+  // }
 
 
   // Module.apiRequest({
@@ -441,30 +453,23 @@ class Core {
   }
 }
 
-
 const core = new Core()
 
-
-
-
 const Module = {
   // getContextSync () {
   //   return core.getContext(modulekey)
   // },
   // linkToPage: core.linkToPage.bind(core),
   // linkToModule: core.linkToModule.bind(core),
+  getModuleData: core.getModuleData.bind(core),
+  getContext: core.getContext.bind(core),
+  getEnvData: core.getEnvData.bind(core),
   apiRequest: core.apiRequest.bind(core),
   checkModule: core.checkModule.bind(core)
 }
 
-
-
-
-
 export default core
 
-
-
 export {
   Module
 }