---开发数字输入组件

src/components/input-number/index.ts

@@ -0,0 +1,3 @@
+import { withInstall } from '/@/utils';
+import input from './input-number.vue';
+export const InputNumber = withInstall(input);

src/components/input-number/input-number.model.ts

@@ -0,0 +1,75 @@
+import { NoValueType } from "@grapecity/activereports/core";
+
+declare type ValueType = string | number | undefined;
+
+
+export class InputNumberModel {
+  viewValue: ValueType = undefined;
+  modelValue: ValueType = undefined;
+  focus: boolean = false;
+  digits: number = 2;
+  _fmt:string|undefined = undefined;
+  emit: any;
+  ref: any;
+
+  get numberFormat() {
+    if(this._fmt==undefined){
+      this._fmt = this.createNumberFmt(this.digits);
+    }
+    return this._fmt;
+  }
+
+  createNumberFmt(num:number){
+     let numFmt = "###,###,###,###,###,###";
+     if(num>0){
+        numFmt += ".";
+        for (let i = 0; i < num; i++) {
+          numFmt += "0";
+        }
+     }
+     return numFmt;
+  }
+
+
+  bind(digits: number,ref:any,emit:any) {
+    this.digits = digits==undefined?2:digits;
+    this.ref = ref;
+    this.emit = emit;
+  }
+
+  setViewValue(value: ValueType) {
+    this.viewValue = value;
+    this.modelValue = this.viewToModel(value);
+    this.triggerVm();
+  }
+
+  viewToModel(vv: ValueType):ValueType {
+     if(vv==undefined) return;
+     if(!this.focus){
+        this.viewValue = Number.format(Number.parse(vv),this.numberFormat);
+     }
+     return Number.parse(vv);
+  }
+
+  setModelValue(value: ValueType) {
+     this.modelValue = value;
+     this.viewValue = this.modelToView(value);
+  }
+
+  modelToView(mv: ValueType): ValueType {
+    if(mv==undefined || mv==null || mv== '') return '';
+    if(this.focus){
+       return mv+'';
+    }
+    return Number.format(Number.parse(mv),this.numberFormat);
+  }
+
+  isEmpty() {
+    return this.modelValue === undefined || this.viewValue === null || this.viewValue === '';
+  }
+
+  triggerVm(){
+    this.emit('update:value',this.modelValue);
+    this.emit('change',this.modelValue);
+  }
+}

src/components/input-number/input-number.vue

@@ -0,0 +1,99 @@
+<template>
+    <div v-if="!isSave">
+        <a-input
+            :size="size"
+            v-model:value="model.viewValue"
+            :placeholder="placeholder"
+            :maxlength="parseInt(maxlength)"
+            :addonBefore="addonBefore"
+            :addonAfter="addonAfter"
+            :allowClear="allowClear"
+            :disabled="disabled"
+            :readonly="readonly"
+            :bordered="bordered"
+            @change="handleChange"
+            @blur="handleBlur"
+            @input="handleInput"
+            @focus="handleFocus"
+            ref="inputRef"
+        >
+            <template #prefix v-if="prefix">
+                <Icon :icon="prefix" />
+            </template>
+            <template #suffix v-if="suffix">
+                <Icon :icon="suffix" />
+            </template>
+        </a-input>
+    </div>
+    <div v-else>{{ value }}</div>
+</template>
+<script lang="ts">
+export default {
+  name: 'input-number'
+};
+</script>
+<script lang="ts" setup>
+    import { ref, watch, onMounted } from 'vue';
+    import { Icon } from '/@/components/Icon';
+    import { InputNumberModel } from './input-number.model';
+
+    const inputRef = ref(null);
+
+    const props = defineProps({
+        size: String,
+        value: {
+            type: String,
+            default: ''
+        },
+        placeholder: String,
+        maxlength: {
+            type: [String, Number],
+            default: ''
+        },
+        digits: {
+            type: Number,
+            default: 2
+        },
+        addonBefore: String,
+        addonAfter: String,
+        allowClear: Boolean,
+        disabled: Boolean,
+        readonly: Boolean,
+        prefix: String,
+        suffix: String,
+        bordered: {
+            type: Boolean,
+            default: true
+        },
+        isSave: Boolean
+    });
+    const model = ref(new InputNumberModel());
+    const emit = defineEmits(['update:value', 'change', 'blur','focus']);
+    onMounted(() => {
+        model.value.bind(props.digits,inputRef.value,emit);
+        model.value.setViewValue(props.value);
+    });
+    watch(
+        () => props.value,
+        (val) => {
+            model.value.setModelValue(val);
+        }
+    );
+    const handleChange = (e) => {
+        model.value.setViewValue(e.target.value);
+    };
+    const handleInput = (e) => {
+      //e.stopPropagation();
+      //model.value.setViewValue(e.target.value);
+    };
+    const handleFocus = (e) => {
+        model.value.focus = true;
+        model.value.setViewValue(e.target.value);
+        emit('focus', e);
+    };
+    const handleBlur = (e) => {
+        model.value.focus = false;
+        model.value.setViewValue(e.target.value);
+        emit('blur', e);
+    };
+</script>

src/components/registerGlobComp.ts

@@ -1,7 +1,8 @@
 import type { App } from 'vue';
 import { Button } from './Button';
 import { Input, Layout } from 'ant-design-vue';
+import { InputNumber } from './input-number';
 
 export function registerGlobComp(app: App) {
-  app.use(Input).use(Button).use(Layout);
+  app.use(Input).use(Button).use(Layout).use(InputNumber);
 }

src/main.ts

@@ -14,10 +14,6 @@ import { setupStore } from '/@/store';
 import { setupGlobDirectives } from '/@/directives';
 import { setupI18n } from '/@/locales/setupI18n';
 import { registerGlobComp } from '/@/components/registerGlobComp';
-import TColor  from '/@/utils/t-color';
-
-let cols = new TColor("#4598FA").gradient("#85F7D8",5);
-console.log(cols);
 
 import axios from 'axios';
 import VueGridLayout from 'vue-grid-layout';

src/views/mdm/Testflow003/index.vue

@@ -1,6 +1,6 @@
 <template>
   <PageWrapper dense fixedHeight contentFullHeight contentClass="flex">
-      <BasicTable @register="registerTable" ref="tableRef"   @row-dbClick="dbClickRow">
+      <!-- <BasicTable @register="registerTable" ref="tableRef"   @row-dbClick="dbClickRow">
         <template #toolbar>
           <template v-for="button in tableButtonConfig" :key="button.code">
             <a-button v-if="button.isDefault" :type="button.type" @click="buttonClick(button.code)">
@@ -18,9 +18,12 @@
             <TableAction :actions="getActions(record)" />
           </template>
         </template>
-      </BasicTable>
-   <Testflow003Modal @register="registerModal" @success="handleSuccess" />
-  <DataLog :logId="logId" :logPath="logPath" v-model:visible="modalVisible"/>
+      </BasicTable> -->
+   <!-- <Testflow003Modal @register="registerModal" @success="handleSuccess" />
+  <DataLog :logId="logId" :logPath="logPath" v-model:visible="modalVisible"/> -->
+    <div style="width: 100%;height: 100%;position: relative;">
+      <input-number v-model:value="numberValue" />
+    </div>
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -72,6 +75,7 @@
   const customSearchFormSchema =ref(searchFormSchema);
   
   const tableRef = ref();
+  const numberValue = ref();
   //所有按钮
   const buttons = ref([{"isUse":true,"name":"新增","code":"add","icon":"ant-design:plus-outlined","isDefault":true,"type":"primary"},{"isUse":true,"name":"编辑","code":"edit","icon":"ant-design:form-outlined","isDefault":true},{"isUse":true,"name":"刷新","code":"refresh","icon":"ant-design:reload-outlined","isDefault":true},{"isUse":true,"name":"查看","code":"view","icon":"ant-design:eye-outlined","isDefault":true},{"isUse":true,"name":"数据日志","code":"datalog","icon":"ant-design:profile-outlined","isDefault":true},{"isUse":true,"name":"发起审批","code":"startwork","icon":"ant-design:form-outlined","isDefault":true},{"isUse":true,"name":"查看流转记录","code":"flowRecord","icon":"ant-design:form-outlined","isDefault":true},{"isUse":true,"name":"删除","code":"delete","icon":"ant-design:delete-outlined","isDefault":true}]);
   //展示在列表内的按钮