fix: 基本组件

package.json

@@ -28,9 +28,11 @@
     "moment": "^2.27.0",
     "normalize.css": "^8.0.1",
     "pluralize": "^8.0.0",
+    "qrcode": "^1.4.4",
     "qs": "^6.9.4",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
+    "vue-click-outside": "^1.1.0",
     "vue-property-decorator": "^8.4.2",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",

src/components/global/ComGlobal.vue

@@ -12,6 +12,11 @@ export default class ComGlobal extends Vue {
   value = '';
   arrNumber = [1, 2, 3];
   arrStr = ['a', 'b', 'c'];
+  searcherOptions = [
+    { label: '金额', value: 'amount', type: 'number' },
+    { label: '支付方式', value: 'payment_way', type: 'string' },
+  ];
+  query: IObject = {};
   arrObj = [
     { value: 'A', label: 'a' },
     { value: 'B', label: 'b' },
@@ -19,6 +24,7 @@ export default class ComGlobal extends Vue {
   ];
   ComMainModalVisible = false;
   ComPopoverVisible = false;
+  ComPopoverConfirmVisible = false;
   comLogCellAudit = {
     icon: 'check-circle',
     username: '张三',
@@ -161,7 +167,7 @@ export default class ComGlobal extends Vue {
     )
   ComGlobalTable.height_100(name="ComNoScrollBarContainer")
     ComNoScrollBarContainer.div
-      .slot 溢出隐藏不能滚动组件
+      .slot 溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-
   ComGlobalTable(name="ComPanel")
     ComPanel(
       title="标题",
@@ -181,7 +187,31 @@ export default class ComGlobal extends Vue {
     )
       .main(slot="main") main
       .footer(slot="footer") footer
-      div 点击有气泡
+      a-button 点击有气泡
+  ComGlobalTable(name="ComPopoverConfirm")
+    ComPopoverConfirm(
+      v-model="ComPopoverConfirmVisible"
+    )
+    a-button(type="danger" @click="ComPopoverConfirmVisible=true") 点击确定删除弹窗样式
+  ComGlobalTable(name="ComQrCode")
+    ComQrCode.box_50(:data="'二维码内容'" level="H")
+  ComGlobalTable(name="ComRansackSearcher")
+    ComRansackSearcher(
+      v-model="query"
+      :options="searcherOptions"
+      :variables="['seq', 'projects_name', 'projects_uid', 'remark']"
+      tips="检索单据"
+      placeholder="流水单号、资金卡号、资金卡名")
+  ComGlobalTable(name="ComTitleContainer")
+    ComTitleContainer(
+      title="标题"
+    )
+      div(slot="actions") actions
+      div 插槽
+  ComGlobalTable(name="ComTaAvatar")
+    ComTaAvatar(
+      name="用户名"
+    )
 </template>
 
 <style lang="stylus" scoped>
@@ -192,4 +222,7 @@ export default class ComGlobal extends Vue {
 .height_100
   text-align center
   height 100px !important
+.box_50
+  width 50px
+  height 50px
 </style>

src/components/global/ComPopoverConfirm.vue

+<template lang="pug">
+a-popover(
+  :visible="localVisible"
+  :placement="placement"
+  trigger="click"
+  @visibleChange="syncVisible")
+  template(slot="content")
+    .popover-card(:style="{width: width + 'px'}")
+      .popover-header
+        slot(name="title")
+          span {{ title }}
+        a-button.close(shape="circle" icon="close" size="small" @click="localVisible = false")
+      .popover-content
+        slot(name="content")
+          span {{ content }}
+      .popover-footer
+        slot(name="footer")
+          a-button(
+            :type="type"
+            block
+            size="large"
+            @click.stop="confirm"
+            :loading="loading"
+            :disabled="throttleDisabled || disabled")
+            | {{ okText }}
+  slot
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Model, Watch, Emit } from 'vue-property-decorator';
+
+@Component
+export default class ComPopoverConfirm extends Vue {
+  @Model('change', { type: Boolean }) visible!: boolean;
+  @Prop({ type: String, default: '删除' }) title!: string;
+  @Prop({ type: String, default: '您确认继续执行此操作吗?' }) content!: string;
+  @Prop({ type: String, default: 'bottom' }) placement!: string;
+  @Prop({ type: Number, default: 248 }) width!: number;
+  @Prop({ type: Boolean, default: false }) private loading!: string;
+  @Prop({ type: Boolean, default: false }) private disabled!: string;
+  @Prop({ type: String, default: 'click' }) private trigger!: string;
+  @Prop({ type: String, default: 'danger' }) private type!: string;
+  @Prop({ type: String, default: '确认' }) private okText!: string;
+  @Prop({ type: Boolean, default: true }) private autoClose!: boolean;
+
+  localVisible = false;
+  throttleDisabled = false;
+
+  @Watch('visible')
+  onVisibleChange() {
+    this.localVisible = this.visible;
+  }
+
+  confirm() {
+    if (this.throttleDisabled) return;
+    this.throttleDisabled = true;
+
+    this.$emit('confirm');
+    this.syncVisible(false);
+
+    setTimeout(() => {
+      this.throttleDisabled = false;
+    }, 1000);
+  }
+  syncVisible(visible: boolean) {
+    if (this.autoClose) {
+      this.localVisible = visible;
+      this.$emit('change', visible);
+      if (!visible) {
+        this.$emit('close');
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.popover-card
+  margin -12px -16px
+  width 100%
+  .popover-header
+    position relative
+    padding 15px 0px
+    width 100%
+    height 50px
+    border-bottom 1px #E5E5E5 solid
+    text-align center
+    font-weight 500
+    font-size 16px
+    line-height 20px
+    .close
+      position absolute
+      top 15px
+      right 12px
+      width 20px
+      height 20px
+      border none
+      color #a6a6a6
+      line-height 20px
+      &:hover
+        color #3da8f5
+  .popover-content
+    padding 16px
+    width 100%
+  .popover-footer
+    padding 12px 16px
+    width 100%
+    border-top 1px #E5E5E5 solid
+</style>

src/components/global/ComQrCode.vue

+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import QRCode, { QRCodeErrorCorrectionLevel } from 'qrcode';
+
+@Component
+export default class ComQrCode extends Vue {
+  @Prop({ type: String }) data!: string;
+  @Prop({ type: Number, default: 6 }) scale!: number;
+  @Prop({ type: String, default: 'M', validator: l => ['L', 'Q', 'M', 'H'].indexOf(l) > -1 })
+  level!: QRCodeErrorCorrectionLevel;
+  @Prop({ type: String, default: '#fff' }) background!: string;
+  @Prop({ type: String, default: '#000' }) foreground!: string;
+  @Prop({ type: Number, default: 0 }) margin!: number;
+
+  mounted() {
+    this.draw();
+    ['data', 'scale', 'level', 'background', 'foreground'].forEach(key => {
+      this.$watch(key, this.draw);
+    });
+  }
+
+  draw() {
+    QRCode.toCanvas(
+      this.$refs.qrcode,
+      this.data || '',
+      {
+        errorCorrectionLevel: this.level,
+        margin: this.margin,
+        scale: this.scale,
+        color: {
+          dark: this.foreground,
+          light: this.background,
+        },
+      },
+      error => {
+        if (!error) {
+          const element = this.$refs.qrcode as HTMLElement;
+          element.style.height = '';
+          element.style.width = '';
+        }
+      },
+    );
+  }
+}
+</script>
+
+<template lang="pug">
+canvas(ref="qrcode")
+</template>
+
+<style lang="stylus" scoped>
+canvas
+  width 100%
+  height auto
+</style>

src/components/global/ComTaAvatar.vue

+<template lang="pug">
+.avatar-page(:style="{ width: boxSize, height: boxSize }")
+  template(v-if="url")
+    a-avatar.avatar(:src="url" :size="size" :style="{ borderRadius: borderRadius }")
+  template(v-else-if="nameText")
+    .avatar(
+      :style="{ background: sex ? bgColor : color, fontSize: fontSize, borderRadius: borderRadius, color: textColor }") 
+      | {{ nameText }}
+  template(v-else-if="useName")
+    a-avatar(
+      :size="size" 
+      :style="{ background: sex ? bgColor : color }") 
+      | {{ name }}
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
+
+@Component({
+  components: {},
+})
+export default class ComTaAvatar extends Vue {
+  @Prop({ type: String, default: '50%' }) private borderRadius?: string;
+  @Prop({ type: String, default: '' }) private url!: string;
+  @Prop({ type: String, default: '' }) private name!: string;
+  @Prop({ type: String, default: 'small' }) private size?: 'large' | 'small' | 'default';
+  @Prop({ type: String, default: '36px' }) private boxSize?: string;
+  @Prop({ type: String, default: '32px' }) private fontSize?: string;
+  @Prop({ type: String, default: '#58A8EF' }) private color!: string;
+  @Prop({ type: String, default: '#fff' }) private textColor!: string;
+  @Prop({ type: String, default: '' }) private sex!: string;
+  @Prop({ type: Boolean, default: false }) private short!: boolean;
+  get useName() {
+    return !this.url && this.name;
+  }
+  get nameText() {
+    return this.short && this.name ? this.name.slice(0, 1).toLocaleUpperCase() : '';
+  }
+  get bgColor() {
+    return ['男', 'male', 'Male'].includes(this.sex) ? '#58A8EF' : '#F28E36';
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.avatar-page
+  width 36px
+  height 36px
+  .avatar
+    display flex
+    justify-content center
+    align-items center
+    width 100%
+    height 100%
+    background #eee
+</style>

src/components/global/ComTitleContainer.vue

+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+@Component({
+  components: {},
+})
+export default class ComTitleContainer extends Vue {
+  @Prop({ type: String }) private title!: string;
+}
+</script>
+
+<template lang="pug">
+.title-container
+  TaTitleHeader(:title="title")
+    slot(name="actions")
+  slot
+</template>
+
+<style lang="stylus" scoped></style>

src/components/global/TaTitleHeader.vue

+<template lang="pug">
+.table-header
+  .table-header__title-box
+    slot(name="title")
+      .table-header__title
+        | {{ title }}
+    slot(name="actions")
+  .table-header__actions
+    slot
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
+
+@Component
+export default class TaTitleHeader extends Vue {
+  @Prop({ type: String }) title!: string;
+}
+</script>
+
+<style lang="stylus" scoped>
+.table-header
+  display flex
+  justify-content space-between
+  align-items stretch
+  height 48px
+  .table-header__title-box
+    align-self center
+    flex-shrink 0
+    display flex
+    align-items center
+    .table-header__title
+      color #383838
+      color #383838
+      font-weight 500
+      font-size 18px
+      line-height 20px
+  .table-header__actions
+    display flex
+    justify-content flex-end
+    align-items center
+    max-height 100%
+    width 100%
+    button
+      margin-left 14px
+</style>

yarn.lock

@@ -2599,6 +2599,11 @@ base64-js@^1.0.2:
   resolved "https://registry.npm.taobao.org/base64-js/download/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
   integrity sha1-WOzoy3XdB+ce0IxzarxfrE2/jfE=
 
+base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.npm.taobao.org/base64-js/download/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha1-GxtEAWClv3rUC2UPCVljSBkDkwo=
+
 base@^0.11.1:
   version "0.11.2"
   resolved "https://registry.npm.taobao.org/base/download/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
@@ -2842,7 +2847,25 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
-buffer-from@1.x, buffer-from@^1.0.0:
+buffer-alloc-unsafe@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npm.taobao.org/buffer-alloc-unsafe/download/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
+  integrity sha1-vX3CauKXLQ7aJTvgYdupkjScGfA=
+
+buffer-alloc@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npm.taobao.org/buffer-alloc/download/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
+  integrity sha1-iQ3ZDZI6hz4I4Q5f1RpX5bfM4Ow=
+  dependencies:
+    buffer-alloc-unsafe "^1.1.0"
+    buffer-fill "^1.0.0"
+
+buffer-fill@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/buffer-fill/download/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
+  integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
+
+buffer-from@1.x, buffer-from@^1.0.0, buffer-from@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npm.taobao.org/buffer-from/download/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha1-MnE7wCj3XAL9txDXx7zsHyxgcO8=
@@ -2871,6 +2894,14 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
+buffer@^5.4.3:
+  version "5.7.1"
+  resolved "https://registry.npm.taobao.org/buffer/download/buffer-5.7.1.tgz?cache=0&sync_timestamp=1606098189689&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbuffer%2Fdownload%2Fbuffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
+  integrity sha1-umLnwTEzBTWCGXFghRqPZI6Z7tA=
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.1.13"
+
 builtin-modules@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npm.taobao.org/builtin-modules/download/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -4210,6 +4241,11 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
+dijkstrajs@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/dijkstrajs/download/dijkstrajs-1.0.1.tgz#d3cd81221e3ea40742cfcde556d4e99e98ddc71b"
+  integrity sha1-082BIh4+pAdCz83lVtTpnpjdxxs=
+
 dir-glob@^2.0.0, dir-glob@^2.2.2:
   version "2.2.2"
   resolved "https://registry.npm.taobao.org/dir-glob/download/dir-glob-2.2.2.tgz#fa09f0694153c8918b18ba0deafae94769fc50c4"
@@ -5819,6 +5855,11 @@ icss-utils@^4.0.0, icss-utils@^4.1.1:
   dependencies:
     postcss "^7.0.14"
 
+ieee754@^1.1.13:
+  version "1.2.1"
+  resolved "https://registry.npm.taobao.org/ieee754/download/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha1-jrehCmP/8l0VpXsAFYbRd9Gw01I=
+
 ieee754@^1.1.4:
   version "1.1.13"
   resolved "https://registry.npm.taobao.org/ieee754/download/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
@@ -6322,6 +6363,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.npm.taobao.org/isarray/download/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
+isarray@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.npm.taobao.org/isarray/download/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha1-ivHkwSISRMxiRZ+vOJQNTmRKVyM=
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/isexe/download/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -8545,6 +8591,11 @@ pn@^1.1.0:
   resolved "https://registry.npm.taobao.org/pn/download/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha1-4vTO8OIZ9GPBeas3Rj5OHs3Muvs=
 
+pngjs@^3.3.0:
+  version "3.4.0"
+  resolved "https://registry.npm.taobao.org/pngjs/download/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
+  integrity sha1-mcp9clll+2VYFOr2XzjxK72/VV8=
+
 pnp-webpack-plugin@^1.6.4:
   version "1.6.4"
   resolved "https://registry.npm.taobao.org/pnp-webpack-plugin/download/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"
@@ -9199,6 +9250,19 @@ q@^1.1.2, q@^1.5.1:
   resolved "https://registry.npm.taobao.org/q/download/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qrcode@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.npm.taobao.org/qrcode/download/qrcode-1.4.4.tgz#f0c43568a7e7510a55efc3b88d9602f71963ea83"
+  integrity sha1-8MQ1aKfnUQpV78O4jZYC9xlj6oM=
+  dependencies:
+    buffer "^5.4.3"
+    buffer-alloc "^1.2.0"
+    buffer-from "^1.1.1"
+    dijkstrajs "^1.0.1"
+    isarray "^2.0.1"
+    pngjs "^3.3.0"
+    yargs "^13.2.4"
+
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
@@ -11205,6 +11269,11 @@ vue-cli-plugin-pug@^1.0.7:
     pug-plain-loader "^1.0.0"
     raw-loader "^0.5.1"
 
+vue-click-outside@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npm.taobao.org/vue-click-outside/download/vue-click-outside-1.1.0.tgz#48b7680b518923e701643cccb3e165854aad99eb"
+  integrity sha1-SLdoC1GJI+cBZDzMs+FlhUqtmes=
+
 vue-eslint-parser@^7.0.0:
   version "7.1.0"
   resolved "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.0.tgz?cache=0&sync_timestamp=1589539313907&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.1.0.tgz#9cdbcc823e656b087507a1911732b867ac101e83"
@@ -11745,7 +11814,7 @@ yargs-parser@^18.1.2, yargs-parser@^18.1.3:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs@^13.3.0, yargs@^13.3.2:
+yargs@^13.2.4, yargs@^13.3.0, yargs@^13.3.2:
   version "13.3.2"
   resolved "https://registry.npm.taobao.org/yargs/download/yargs-13.3.2.tgz?cache=0&sync_timestamp=1594421046064&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs%2Fdownload%2Fyargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
   integrity sha1-rX/+/sGqWVZayRX4Lcyzipwxot0=