shijiplus-web-plugin 0.1.20 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shijiplus-web-plugin",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "files": [
     "src"
   ],

package/src/components/plus-comp/index.js

@@ -1,4 +1,4 @@
-const compFiles = ['plus-icon', 'plus-city-cascader', 'plus-count-down', 'plus-city-cascader', 'plus-common-header', 'plus-poptip', 'plus-qr-code', 'plus-drawer', 'plus-tabs', 'plus-remote-selector', 'plus-select', 'plus-form', 'plus-scrollview', 'plus-table', 'plus-modal', 'plus-card', 'permission-component']
+const compFiles = ['plus-tag', 'plus-icon', 'plus-city-cascader', 'plus-count-down', 'plus-city-cascader', 'plus-common-header', 'plus-poptip', 'plus-qr-code', 'plus-drawer', 'plus-tabs', 'plus-remote-selector', 'plus-select', 'plus-form', 'plus-scrollview', 'plus-table', 'plus-modal', 'plus-card', 'permission-component']
 
 const install = (vue, opts = {}) => {
   console.log('--------install---plus-comp----------')

package/src/components/plus-comp/plus-confirm-modal/plus-confirm-modal.vue

@@ -0,0 +1,103 @@
+<template>
+  <PlusModal
+    :props="modelProps"
+    closable
+    @on-close="handlerCancel"
+    width="width: 430px;"
+  >
+    <div class="content-wrap">
+      <div class="confirm-title f-s-16 f-w-600 f-lh-24 f-c-17233D">
+        {{ modelProps.title }}
+      </div>
+      <div class="confirm-content f-s-14 f-lh-20">
+        <render-template v-if="render" :render="render"></render-template>
+        <div v-else-if="html" v-html="html"></div>
+        <div v-else>{{ content }}</div>
+      </div>
+    </div>
+    <div slot="footer" class="f-row justify-center footer-wrap">
+      <Button v-if="!hideCancel" @click="handlerCancel">{{
+        cancelText || '取消'
+      }}</Button>
+      <Button
+        @click="handlerConfirm"
+        type="primary"
+        >{{ confirmText || '确认' }}</Button
+      >
+    </div>
+  </PlusModal>
+</template>
+<script>
+import RenderTemplate from '@/components/common/render-template.vue'
+export default {
+  components: {
+    RenderTemplate
+  },
+  data() {
+    return {
+      modelProps: {
+        show: false,
+        title: ''
+      },
+      render: null,
+      content: '',
+      cancelText: '取消',
+      confirmText: '确认',
+      hideCancel: false,
+      html: ''
+    }
+  },
+  methods: {
+    handlerCancel() {
+      if (this.mReject) {
+        this.mReject()
+      }
+      this.handlerColose()
+    },
+    handlerConfirm() {
+      if (this.mResolve) {
+        this.mResolve()
+      }
+      this.handlerColose()
+    },
+    handlerColose() {
+      this.modelProps.show = false
+      this.$emit('on-closed')
+    },
+    show(config) {
+      this.modelProps.show = true
+      this.modelProps.title = config.title
+      this.render = config.render
+      this.content = config.content
+      this.hideCancel = config.hideCancel
+      this.confirmText = config.confirmText
+      this.cancelText = config.cancelText
+      this.html = config.html
+      return new Promise((resolve, reject) => {
+        this.mResolve = resolve
+        this.mReject = reject
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.content-wrap {
+  box-sizing: border-box;
+  height: 230px;
+}
+.confirm-title {
+  margin-top: 87px;
+  text-align: center;
+}
+.confirm-content {
+  margin-top: 24px;
+  width: 354px;
+  text-align: center;
+}
+.footer-wrap {
+  .ivu-btn + .ivu-btn {
+    margin-left: 40px;
+  }
+}
+</style>

package/src/components/plus-comp/plus-drawer/plus-drawer.vue

@@ -13,7 +13,7 @@
         <slot></slot>
       </div>
 
-      <div class="drawer-footer i-flex-wrap justify-center align-center">
+      <div class="drawer-footer i-flex-wrap justify-end align-center">
         <slot name="footer">
           <Button type="primary" @click="onClose"> 关闭 </Button>
         </slot>

package/src/components/plus-comp/plus-form/plus-form.vue

@@ -143,6 +143,9 @@ export default {
     &.ivu-form-inline {
       display: inline-flex;
       flex-wrap: wrap;
+      .ivu-form-item {
+        display: inline-flex;
+      }
     }
   }
 }

package/src/components/plus-comp/plus-icon/plus-icon.vue

@@ -11,6 +11,10 @@ export default {
       type: String,
       default: ''
     },
+    staticSrc: {
+      type: Boolean,
+      default: false
+    },
     src: {
       type: String,
       default: ''
@@ -65,6 +69,9 @@ export default {
   },
   methods: {
     handleSrc(src) {
+      if (this.staticSrc) {
+        return src
+      }
       const ss = src.replace('@/assets', '')
       return require(`@/assets` + ss)
     }
@@ -88,4 +95,13 @@ export default {
     filter: drop-shadow(var(--size) 0px var(--filterColor));
   }
 }
+
+.click-span {
+  &:hover {
+    .plus-icon {
+      --vector: -1;
+      --filterColor: var(--primary-color);
+    }
+  }
+}
 </style>

package/src/components/plus-comp/plus-scrollview/plus-scrollview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="scrollId" class="scroll-wrap">
+  <div :id="scrollId" class="plus-scroll-wrap">
     <slot>
       <div class="empty-wrap">暂无数据</div>
     </slot>
@@ -40,7 +40,7 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.scroll-wrap {
+.plus-scroll-wrap {
   overflow: auto;
   .empty-wrap {
     display: flex;

package/src/components/plus-comp/plus-select/plus-select.vue

@@ -4,6 +4,7 @@
       ref="select"
       v-model="mValue"
       label-in-value
+      :transfer="transfer"
       :disabled="disabled"
       :placeholder="placeholder"
       @on-change="valueChange"
@@ -31,6 +32,10 @@ export default {
     modelValue: {
       type: [Number, String, Array]
     },
+    transfer: {
+      type: Boolean,
+      default: false
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -46,6 +51,10 @@ export default {
       type: [String, Array],
       default: 'label'
     },
+    labelGenFun: {
+      type: Function,
+      default: null
+    },
     placeholder: {
       type: String,
       default: '请选择'
@@ -80,7 +89,9 @@ export default {
       return this.options.map((item) => {
         let label = ''
         let value = item[this.valueKey]
-        if (this.labelKeys) {
+        if (this.labelGenFun) {
+          label = this.labelGenFun(item)
+        } else if (this.labelKeys) {
           let tempKeys = this.labelKeys
           if (typeof tempKeys == 'string') {
             tempKeys = this.labelKeys.split(',')

package/src/components/plus-comp/plus-table/plus-table.vue

@@ -459,6 +459,8 @@ export default {
 .plus-table-wrap {
   --sibling-nodes-height: 0px;
   --table-th-bg-color: #f8f8f9;
+  --table-header-height: 54px;
+  --cell-top-bottom-padding: 16px;
   background-color: #ffffff;
   padding: 0px;
   box-sizing: border-box;
@@ -467,15 +469,15 @@ export default {
   }
   .p-search-area {
     position: relative;
-    padding-bottom: 16px;
     /deep/.plus-form-wrap {
       .ivu-form-item {
-        margin-bottom: 0px;
+        margin-bottom: 16px;
       }
     }
   }
   .btn-area {
     margin-top: auto;
+    margin-bottom: 16px;
     button {
       margin-left: 8px;
       &:first-child {
@@ -501,6 +503,7 @@ export default {
         background-color: transparent;
       }
       th {
+        height: var(--table-header-height);
         height: 54px;
         border-bottom: none;
         background-color: var(--table-th-bg-color);
@@ -516,15 +519,15 @@ export default {
       //   height: 64px;
       // }
       .ivu-table-tip {
-        height: ~'calc(100% - 54px)'; // 54 header的高
+        height: ~'calc(100% - var(--table-header-height))'; // 54 header的高
         table {
           height: 100%;
         }
       }
       .ivu-table-tbody {
         .ivu-table-cell {
-          padding-top: 16px;
-          padding-bottom: 16px;
+          padding-top: var(--cell-top-bottom-padding);
+          padding-bottom: var(--cell-top-bottom-padding);
           line-height: 1.4;
         }
       }
@@ -552,6 +555,25 @@ export default {
           }
         }
       }
+
+      td {
+        &:last-child {
+          .ivu-table-cell {
+            .click-span {
+              margin-right: 9px;
+              margin-bottom: 2px;
+              margin-top: 2px;
+              &:last-child {
+                margin-right: 0;
+                &:first-child {
+                  margin-bottom: 0;
+                  margin-top: 0px;
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
   /deep/.ivu-page {

package/src/components/plus-comp/plus-tag/plus-tag.vue

@@ -0,0 +1,75 @@
+<template>
+  <Tag
+    ref="plusTagRef"
+    :style="`--alpha-color:${alphaColor}`"
+    class="plus-new-tag"
+    :type="type"
+    :color="color"
+  >
+    <slot></slot>
+  </Tag>
+</template>
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: 'default'
+    }
+  },
+  watch: {
+    color: {
+      handler(nVal) {
+        this.$nextTick(() => {
+          const textTag =
+            this.$refs.plusTagRef.$el.getElementsByClassName('ivu-tag-text')[0]
+          const rgbColor = this.rgbaColor(
+            window.getComputedStyle(textTag).color
+          )
+          this.$refs.plusTagRef.$el.style.setProperty(
+            '--alpha-color',
+            `rgba(${rgbColor.r},${rgbColor.g},${rgbColor.b},${rgbColor.a})`
+          )
+        })
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      alphaColor: '#FFFFFF'
+    }
+  },
+  methods: {
+    rgbaColor(rgb) {
+      var rgbValues = rgb.match(/\d+/g)
+      if (!rgbValues) {
+        return {
+          r: 255,
+          g: 255,
+          b: 255,
+          a: 0
+        }
+      }
+      return {
+        r: rgbValues[0],
+        g: rgbValues[1],
+        b: rgbValues[2],
+        a: 0.05
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.plus-new-tag {
+  --alpha-color: '#FFFFFF';
+  &.ivu-tag-border {
+    background-color: var(--alpha-color) !important;
+  }
+}
+</style>

package/src/index.less

@@ -135,6 +135,14 @@
     cursor: default !important;
   }
 
+  &.under-line {
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration-color: @link-color;
+    }
+  }
+
   &:hover {
     opacity: 0.8;
   }
@@ -528,4 +536,12 @@
   background-image: url('~@/assets/union-pay/line-bg.png');
   background-size : cover;
   padding         : 0 12px;
+}
+
+.transparent-input {
+  background: transparent;
+
+  /deep/ input {
+    background: transparent;
+  }
 }

package/src/libs/util.js

@@ -213,6 +213,22 @@ export const debounce = (fn, scheduleMs, immediate = false) => {
   })
 }
 
+export const calcMaxCharByView = (str, options = { width: 0, fontSize: 1, lines: 0 }) => {
+  const { width, fontSize, lines } = options
+  const maxCount = Math.floor(width / fontSize) * lines
+  return maxCount
+}
+
+export const replaceMaxCharacters = (str, replaceStr, replaceIndex) => {
+  let result = str
+  if (result.length > replaceIndex) {
+    const rLength = replaceStr.length
+    result = result
+      .substr(0, replaceIndex)
+      .substr(0, replaceIndex - rLength) + replaceStr
+  }
+  return result
+}
 export const trailingCharacters = (str, replaceStr, options = { width: 0, fontSize: 1, lines: 0 }) => {
   const { width, fontSize, lines } = options
   const maxCharacters = Math.floor(width / fontSize) * lines