@smart100/spu-web-plugin 0.0.9 → 0.0.12

package/src/components/expandexp/step.ts

@@ -0,0 +1,46 @@
+export class Step {
+  statusMap: Array<string> = [
+    'initial',
+    'ready',
+    'running',
+    'ext_readyrun',
+    'ext_running',
+    'success',
+    'error',
+    'cancel'
+  ]
+  statusTextMap: Array<string> = [
+    '',
+    '已加入导出队列，等待导出',
+    '文件下载中',
+    '图片处理中',
+    '图片处理中',
+    '导出完成',
+    '导出失败',
+    '任务已取消'
+  ]
+  status = 0
+  statusName = 'initial'
+  statusText = ''
+
+  next () {
+    this.go(this.statusMap[this.status + 1])
+  }
+
+  go (statusName: string) {
+    const status = this.statusMap.findIndex((item) => {
+      return item === statusName
+    })
+    if (status < 0) {
+      console.error(`不存在 ${statusName} 状态`)
+    } else {
+      this.status = status
+      this.statusName = this.statusMap[this.status]
+      this.statusText = this.statusTextMap[this.status]
+    }
+  }
+
+  current () {
+    return this.statusName
+  }
+}

package/src/components/expandexp/template.ts

@@ -0,0 +1,320 @@
+import SpuExpandexp from './index'
+
+export default (ele: SpuExpandexp) => {
+  return `
+<style>
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+}
+
+.hide {
+  display: none!important;
+}
+
+.spu-expandexp {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  overflow: auto;
+}
+
+
+
+
+.modal {
+  width: 80%;
+  max-width: 800px;
+  min-width: 500px;
+  margin: 50px auto 0;
+  border-radius: 2px;
+  overflow: hidden;
+}
+.modal-th {
+  height: 40px;
+  background-color: #409eff;
+}
+.modal-th .title {
+  float: left;
+  line-height: 40px;
+  color: #fff;
+  font-size: 16px;
+  margin-left: 16px;
+}
+.modal-th .close {
+  float: right;
+  line-height: 40px;
+  height: 40px;
+  width: 40px;
+  color: #fff;
+  font-size: 16px;
+  text-align: center;
+  cursor: pointer;
+}
+.modal-tb {
+  padding: 16px;
+  background-color: #fff;
+}
+
+.export {}
+.export-wait {
+  line-height: 32px;
+  height: 32px;
+  text-align: center;
+  background-color: rgba(255, 73, 73, .1);
+  color: #333;
+}
+.export-wait span {
+  color: red;
+  margin: 0 4px;
+}
+.export-tit {
+  line-height: 32px;
+  height: 32px;
+}
+
+.export-sel {
+  margin-bottom: 12px;
+}
+.export-sel-title {
+  margin-bottom: 12px;
+}
+.export-sel-con {
+  display: flex;
+}
+.export-sel-con-item {
+  display: flex;
+  align-items: center;
+  margin-right: 32px;
+  cursor: pointer;
+}
+.export-sel-con-item label {
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+}
+.export-sel-con-item input {
+  cursor: pointer;
+  margin: 4px;
+}
+
+.export-section-wrap {}
+.export-section {
+  border: 1px solid #ddd;
+  padding: 12px;
+}
+
+.export-file {
+  height: 28px;
+  line-height: 28px;
+  display: flex;
+  justify-content: space-between;
+  // margin-bottom: 12px;
+}
+.export-file-l {
+  flex: 1;
+  display: flex;
+}
+.export-file-l img {
+  flex: none;
+  display: block;
+  height: 28px;
+  width: 28px;
+  margin-right: 4px;
+}
+.export-file-l-filename {
+  flex: 1;
+}
+.export-file-l-filesize {
+  flex: none;
+}
+.export-file-r {
+  display: flex;
+  width: 80px;
+  flex-direction: row-reverse;
+}
+.export-file-r-download {
+  line-height: 26px;
+  border-radius: 3px;
+  background-color: #67c23a;
+  border: 1px solid #67c23a;
+  color: #fff;
+  padding: 0 12px;
+  font-size: 14px;
+  cursor: pointer;
+}
+.export-file-r-download:hover {
+  background: #85ce61;
+  border-color: #85ce61;
+}
+.export-file-r-cancel {
+  line-height: 26px;
+  width: 26px;
+  border-radius: 14px;
+  color: #f56c6c;
+  background: #fef0f0;
+  border: 1px solid #fbc4c4;
+  text-align: center;
+  font-size: 14px;
+  cursor: pointer;
+}
+.export-file-r-cancel:hover {
+  background: #f56c6c;
+  border-color: #f56c6c;
+  color: #fff;
+}
+
+
+
+.export-progress {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 30px;
+}
+.export-progress-outer {
+  flex: 1;
+  height: 8px;
+  background-color: #EBEEF5;
+  overflow: hidden;
+  position: relative;
+  vertical-align: middle;
+}
+.export-progress-inner {
+  animation-duration: 3s;
+  height: 100%;
+  width: 0;
+  background-color: #417AE7;
+  -webkit-transition: width .6s ease;
+  transition: width .6s ease;
+}
+.export-progress-inner.error {
+  background: red;
+}
+.export-progress-inner.success {
+  background: #67C23A;
+}
+.export-progress-text {
+  flex: none;
+  width: 50px;
+  font-size: 14px;
+  line-height: 30px;
+  text-align: right;
+}
+
+
+
+.export-result {
+  height: 28px;
+  line-height: 28px;
+  text-align: right;
+  font-size: 12px;
+  padding: 0px 8px;
+}
+.export-result.error {
+  background: #fdf1ef;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.export-result.success {
+  background: #e5f7f3;
+}
+
+
+.export-tip {
+  height: 28px;
+  line-height: 28px;
+  margin-top: 8px;
+  font-size: 12px;
+  text-align: right;
+  color: #999;
+}
+
+.export-btnwrap {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: row-reverse;
+}
+.btn {
+  line-height: 38px;
+  line-height: 38px;
+  border: 1px solid #409eff;
+  background-color: #409eff;
+  border-radius: 5px;
+  color: #fff;
+  padding: 0 20px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.btn:hover {
+  background: #66b1ff;
+  border-color: #66b1ff;
+}
+</style>
+
+    <div class="spu-expandexp">
+      <div class="modal">
+        <div class="modal-th">
+          <div class="title">
+            数据导出
+          </div>
+          <div class="close">
+            x
+          </div>
+        </div>
+        <div class="modal-tb">
+          <div class="export">
+            <div class="export-wait hide">
+              导出等待队列中：还有<span></span>位，请耐心稍等...
+            </div>
+
+            <div class="export-sel hide">
+              <div class="export-sel-title">请选择导出内容</div>
+              <div class="export-sel-con"></div>
+            </div>
+
+            <div class="export-section-wrap hide">
+              <div class="export-tit"></div>
+              <div class="export-section">
+                <div class="export-file">
+                  <div class="export-file-l">
+                    <img src="" class="hide" />
+                    <span class="export-file-l-filename"></span>
+                    <span class="export-file-l-filesize"></span>
+                  </div>
+                  <div class="export-file-r">
+                    <div class="export-file-r-download hide">下载</div>
+                    <div class="export-file-r-cancel hide">x</div>
+                  </div>
+                </div>
+
+                <div class="export-progress">
+                  <div class="export-progress-outer">
+                    <div class="export-progress-inner"></div>
+                  </div>
+                  <div class="export-progress-text"></div>
+                </div>
+
+                <div class="export-result hide"></div>
+
+                <div class="export-tip hide">您可以随时关闭该弹框，之后在导入导出列表中查看结果。</div>
+              </div>
+            </div>
+
+            <div class="export-btnwrap">
+              <div class="btn">导出</div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+}

package/src/components/expandexp/util.ts

@@ -0,0 +1,91 @@
+export const dealCostTime = (val: number) => {
+  // const $t = useI18n().t
+  // 1000 * 60 * 1 + 1000 *58 + 500  //1分58.5秒
+  // val = 1000 * 60 * 60 * 2 +  1000 * 60 * 1 + 1000 *58 + 500 // 两小时1分58.5秒
+  if (val < 1000) {
+    return '1' + '秒'
+  } else if (val >= 1000 && val < 1000 * 60) {
+    return `${(val / 1000).toFixed(2)}` + '秒'
+  } else if (val >= 1000 * 60 && val < 1000 * 60 * 60) {
+    // return `${moment
+    //     .duration((val / (1000 * 60)).toFixed(2), 'minute')
+    //     .locale('zh_CN')
+    //     .humanize()}`
+    return Math.floor(val / (1000 * 60)) + '分' + Math.ceil((val % (1000 * 60)) / 1000) + '秒'
+  } else {
+    // return `${moment
+    //     .duration((val / (1000 * 60 * 60)).toFixed(2), 'hour')
+    //     .locale('zh_CN')
+    //     .humanize()}`
+    return (
+      Math.floor(val / (1000 * 60 * 60)) +
+      '时' +
+      Math.floor((val % (1000 * 60 * 60)) / (1000 * 60)) +
+      '分' +
+      Math.ceil((val % (1000 * 60)) / 1000) +
+      '秒'
+    )
+  }
+}
+
+export const fixFileName = (sheetname: string, type: string, exportcontent: string) => {
+  let fileName = sheetname && sheetname.replace('.xlsx', '').replace('.csv', '')
+  if (exportcontent === 'link') {
+    fileName = fileName + '.zip'
+  } else {
+    if (parseInt(type) === 1) {
+      fileName = fileName + '.xlsx'
+    } else if (parseInt(type) === 2) {
+      fileName = fileName + '.csv'
+    } else if (parseInt(type) === 3) {
+      fileName = fileName + '.pdf'
+    }
+  }
+  return fileName
+}
+
+export const dealResultMessage = (item: any) => {
+  if (!item.errorfileurl && !item.fatalerrormsg) {
+    // 成功
+    return `成功导出${item.exptotalitem}条数据，耗时${dealCostTime(+item.finishdate - +item.initdate)}`
+  } else if (item.fatalerrormsg) {
+    return `${item.fatalerrormsg}`
+  } else {
+    return `总计${item.exptotalitem}条数据，成功${item.expsuctotalitem}条，失败${
+      item.exptotalitem - item.expsuctotalitem
+    }条，耗时${dealCostTime(+item.finishdate - +item.initdate)}`
+  }
+}
+
+export const sizeUnit = (val: number) => {
+  if (!val) {
+    return '0kb'
+  }
+  if (val < 1024) {
+    return `${val}b`
+  } else if (val >= 1024 && val < 1024 * 1024) {
+    return `${(val / 1024).toFixed(2)}kb`
+  } else {
+    return `${(val / (1024 * 1024)).toFixed(2)}mb`
+  }
+}
+
+// 兼容 val 为数字如4000 或者 4kb
+export const dealFileSize = (val: number | string): string => {
+  if (val === '' || val === null) {
+    return ''
+  } else if (val === 0 || val === '0') {
+    return '0kb'
+  } else if (Number(val)) {
+    val = Number(val)
+    if (val < 1024) {
+      return `${val}b`
+    } else if (val >= 1024 && val < 1024 * 1024) {
+      return `${(val / 1024).toFixed(2)}kb`
+    } else {
+      return `${(val / (1024 * 1024)).toFixed(2)}mb`
+    }
+  } else {
+    return val.toString()
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,7 @@
+// import SpuLoadding from './loadding'
+// import SpuExpandexp from './expandexp'
+
+export default {
+  // SpuLoadding,
+  // SpuExpandexp
+}

package/src/components/loadding/index.ts

@@ -0,0 +1,152 @@
+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-loadding {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :host .spu-loadding-icon {
+    width: 24px;
+    height: 24px;
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-image: url(data:image/gif;base64,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);
+  }
+`
+
+const template = `
+  <div class="spu-loadding">
+    <div class="spu-loadding-icon"></div>
+  </div>
+`
+
+export default class SpuLoadding extends HTMLElement {
+
+  static componentName: string = 'spu-loadding'
+  static register () {
+    if (!window.customElements.get(SpuLoadding.componentName)) {
+      window.customElements.define(SpuLoadding.componentName, SpuLoadding)
+    }
+  }
+
+  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-loadding').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 = SpuLoadding.componentName
+    styleElement.innerHTML = styletext
+    return styleElement
+  }
+
+  appendStyle () {
+    if (this.isuseshadow) {
+      const style = this.createStyleEle()
+      this.shadow!.appendChild(style)
+    } else {
+      if (!document.getElementById(SpuLoadding.componentName)) {
+        const style = this.createStyleEle()
+        document.getElementsByTagName('head')[0].appendChild(style)
+      }
+    }
+  }
+}
+
+
+
+class Loadding {
+  count = 0
+
+  ele: null | HTMLElement = null
+
+  constructor () {
+    SpuLoadding.register()
+  }
+
+  open () {
+    this.count++
+    if (!this.ele) {
+      this.ele = document.createElement('spu-loadding')
+      // 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
+}