doway-coms 1.8.6 → 1.8.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doway-coms",
-  "version": "1.8.6",
+  "version": "1.8.7",
   "description": "doway组件库",
   "author": "dowaysoft",
   "main": "packages/index.js",

package/packages/BaseForm/src/index.vue

@@ -264,6 +264,7 @@
         :columns="col.columns"
         :pageSize="col.pageSize"
         :immediate="col.immediate"
+        :percent="col.percent"
         @preSearch="preSearch"
         @selectChanged="
           (rowInfo) => {

package/packages/BaseNumberInput/src/index.vue

@@ -1,33 +1,46 @@
 <template>
-    <div class="d-control-container">
-      <div
-        class="d-control-label"
-        v-if="showLabel === true"
-        :style="{ width: labelWidth > 0 ? labelWidth + 'px' : 'none' }"
+  <div class="d-control-container">
+    <div
+      class="d-control-label"
+      v-if="showLabel === true"
+      :style="{ width: labelWidth > 0 ? labelWidth + 'px' : 'none' }"
+    >
+      {{ label }}
+      <span
+        v-if="rules && Object.getOwnPropertyNames(rules).length > 0"
+        class="d-control-label-required"
+      >*</span
       >
-        {{ label
-        }}
-        <span
-          v-if="rules && Object.getOwnPropertyNames(rules).length > 0"
-          class="d-control-label-required"
-        >*</span
-        >
-        <Tooltip :title="tooltip" v-if="tooltip" style="margin: 0 2px">
-          <img src="../../styles/icon/help.png" alt="" style="width: 14px">
-        </Tooltip>
-      </div>
-      <div
-        :class="{
-          'd-control': showLabel === true,
-          'd-grid-control': showLabel === false
-        }"
+      <Tooltip :title="tooltip" v-if="tooltip" style="margin: 0 2px">
+        <img src="../../styles/icon/help.png" alt="" style="width: 14px">
+      </Tooltip>
+    </div>
+    <div
+      :class="{
+        'd-control': showLabel === true,
+        'd-grid-control': showLabel === false
+      }"
+    >
+      <ValidationProvider
+        :name="label"
+        v-slot="v"
+        :rules="rules"
+        v-if="edit === true"
       >
-        <ValidationProvider
-          :name="label"
-          v-slot="v"
-          :rules="rules"
-          v-if="edit === true"
-        >
+        <span v-if="percent">
+          <InputNumber
+            :size="'small'"
+            v-model="percentValue"
+            @change="numberChange"
+            @blur="blur"
+            :placeholder="placeholder"
+            :formatter="numberFormatter"
+            :parser="numberParse"
+            style="width: 100%"
+            :class="{ 'd-error-input': v.errors.length > 0 }"
+          />
+        </span>
+        <span v-else>
           <InputNumber
             :size="'small'"
             v-model="currentValue"
@@ -39,192 +52,216 @@
             style="width: 100%"
             :class="{ 'd-error-input': v.errors.length > 0 }"
           />
-          <div class="d-error-msg">
-            {{ v.errors[0] }}
-          </div>
-        </ValidationProvider>
+        </span>
+        <div class="d-error-msg">
+          {{ v.errors[0] }}
+        </div>
+      </ValidationProvider>
+      <span v-else>
+        <span v-if="percent">{{ currentValue*100 }}%</span>
         <span v-else>{{ currentValue }}</span>
-      </div>
+      </span>
     </div>
-  </template>
-  
-  <script>
-  import XEUtils from 'xe-utils'
-  import { InputNumber } from 'ant-design-vue'
-  import { ValidationProvider } from 'vee-validate'
-  import { Tooltip } from 'ant-design-vue'
+  </div>
+</template>
 
-  export default {
-    name: 'BaseNumberInput',
-    components:{
-        InputNumber,
-    ValidationProvider,
-      Tooltip,
+<script>
+import XEUtils from 'xe-utils'
+import { InputNumber } from 'ant-design-vue'
+import { ValidationProvider } from 'vee-validate'
+import { Tooltip } from 'ant-design-vue'
 
+export default {
+  name: 'BaseNumberInput',
+  components:{
+      InputNumber,
+  ValidationProvider,
+    Tooltip,
+
+},
+  data() {
+    return {
+      testValue: 0,
+      filterValue: '',
+      isInputChanged: false,
+      inputTimeout: null,
+      searchRows: [],
+      filterCols: [],
+      gridLoading: false,
+      gridPagerConfig: {
+        total: 0,
+        currentPage: 1,
+        pageSize: 10
+      },
+      percentValue: 0,
+    }
   },
-    data() {
-      return {
-        testValue: 0,
-        filterValue: '',
-        isInputChanged: false,
-        inputTimeout: null,
-        searchRows: [],
-        filterCols: [],
-        gridLoading: false,
-        gridPagerConfig: {
-          total: 0,
-          currentPage: 1,
-          pageSize: 10
+  computed: {
+    currentValue: {
+      // 动态计算currentValue的值
+      get: function() {
+        if (this.percent) {
+          this.percentValue = this.value*100
+        }
+        return this.value // 将props中的value赋值给currentValue
+      },
+      set: function(val) {
+        if (val === '') {
+          val = 0
         }
+        if (XEUtils.isNumber(val)) {
+          this.$emit('input', val)
+        }
+        // 通过$emit触发父组件
+      }
+    }
+  },
+  props: {
+    showLabel: {
+      type: Boolean,
+      default: function() {
+        return true
       }
     },
-    computed: {
-      currentValue: {
-        // 动态计算currentValue的值
-        get: function() {
-          return this.value // 将props中的value赋值给currentValue
-        },
-        set: function(val) {
-          if (val === '') {
-            val = 0
-          }
-          if (XEUtils.isNumber(val)) {
-            this.$emit('input', val)
-          }
-          // 通过$emit触发父组件
-        }
+    labelWidth: {
+      type: Number,
+      default: function() {
+        return 0
       }
     },
-    props: {
-      showLabel: {
-        type: Boolean,
-        default: function() {
-          return true
-        }
-      },
-      labelWidth: {
-        type: Number,
-        default: function() {
-          return 0
-        }
-      },
-      value: {
-        type: Number,
-        default: function() {
-          return 0
-        }
-      },
-      max: {
-        //最大值
-        type: Number,
-        default: function() {
-          return null
-        }
-      },
-      min: {
-        //最小值
-        type: Number,
-        default: function() {
-          return 0
-        }
-      },
-      precision: {
-        //小数位精度
-        type: Number,
-        default: function() {
-          return 0
-        }
-      },
-      rules: {
-        type: Object,
-        default: function() {
-          return null
-        }
-      },
-      edit: {
-        type: Boolean,
-        default: function() {
-          return false
-        }
-      },
-      name: {
-        type: String,
-        default: function() {
-          return ''
-        }
-      },
-      label: {
-        type: String,
-        default: function() {
-          return ''
-        }
-      },
-      placeholder: {
-        type: String,
-        default: function() {
-          return ''
-        }
-      },
-      tooltip: {
-        type: String,
-        default: function() {
-          return ''
-        }
+    value: {
+      type: Number,
+      default: function() {
+        return 0
       }
     },
-    created() {},
-    methods: {
-      numberChange(value) {
-        this.$emit('change')
-      },
-      blur() {
-        this.$emit('blur')
-      },
-      numberFormatter(value) {
+    max: {
+      //最大值
+      type: Number,
+      default: function() {
+        return null
+      }
+    },
+    min: {
+      //最小值
+      type: Number,
+      default: function() {
+        return 0
+      }
+    },
+    precision: {
+      //小数位精度
+      type: Number,
+      default: function() {
+        return 0
+      }
+    },
+    rules: {
+      type: Object,
+      default: function() {
+        return null
+      }
+    },
+    edit: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
+    name: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    },
+    label: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    },
+    placeholder: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    },
+    tooltip: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    },
+    percent: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
+  },
+  created() {},
+  methods: {
+    numberChange(value) {
+      if (this.percent) {
+        this.currentValue = value/100
+      }
+      this.$emit('change')
+    },
+    blur() {
+      this.$emit('blur')
+    },
+    numberFormatter(value) {
+      // 百分比格式化
+      if (this.percent) {
+        return value + '%'
+      }
+      return value
+    },
+    numberParse(value) {
+      // 百分比格式化
+      if (this.percent) {
+        value.replace('%', '')
+      }
+      if (value === null || value === '') {
         return value
-      },
-      numberParse(value) {
-        if (value === null || value === '') {
-          return value
-        }
-        let returnValue = value
-        let tempPrecision = XEUtils.toNumber(this.precision)
-        let reg = new RegExp(
-          '^((-?)|(-?([1-9]{1}\\d*)|-?([0]{1})))(\\.(\\d){0,' +
-            tempPrecision +
-            '})?$'
-        )
-        if (!reg.test(value)) {
-          //小数点验证不通过
-          returnValue = XEUtils.floor(value, tempPrecision)
-        }
-        if (
-          this.max !== null &&
-          this.max !== undefined &&
-          XEUtils.toNumber(returnValue) > this.max
-        ) {
-          returnValue = this.max
-        }
-        if (
-          this.min !== null &&
-          this.min !== undefined &&
-          XEUtils.toNumber(returnValue) < this.min
-        ) {
-          returnValue = this.min
-        }
-        return returnValue
       }
+      let returnValue = value
+      let tempPrecision = XEUtils.toNumber(this.precision)
+      let reg = new RegExp(
+        '^((-?)|(-?([1-9]{1}\\d*)|-?([0]{1})))(\\.(\\d){0,' +
+          tempPrecision +
+          '})?$'
+      )
+      if (!reg.test(value)) {
+        //小数点验证不通过
+        returnValue = XEUtils.floor(value, tempPrecision)
+      }
+      if (
+        this.max !== null &&
+        this.max !== undefined &&
+        XEUtils.toNumber(returnValue) > this.max
+      ) {
+        returnValue = this.max
+      }
+      if (
+        this.min !== null &&
+        this.min !== undefined &&
+        XEUtils.toNumber(returnValue) < this.min
+      ) {
+        returnValue = this.min
+      }
+      return returnValue
     }
   }
-  </script>
-  
-  <style lang="scss" scoped></style>
-  <style>
-  .ant-input-number-handler-wrap {
-    display: none;
-  }
-  </style>
-  <style lang="less">
-  @import  '../../styles/default.less';
-  </style>
-  
+}
+</script>
+
+<style lang="scss" scoped></style>
+<style>
+.ant-input-number-handler-wrap {
+  display: none;
+}
+</style>
+<style lang="less">
+@import  '../../styles/default.less';
+</style>