输入框输入限制数字

src/views/people/archive/info.vue

@@ -1,231 +1,233 @@
 <!--  -->
 <template>
-    <HcCard scrollbar title="员工档案信息编辑" actionUi="text-center">
+    <HcCard scrollbar title="员工档案信息编辑" action-ui="text-center">
         <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
             <el-row :gutter="20">
                 <el-col :span="8">
                     <el-form-item label="姓名:">
-                        <el-input v-model="formModel.name"/>
+                        <el-input v-model="formModel.name" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="年龄:">
-                        <el-input v-model="formModel.userAge"/>
+                        <el-input v-model="formModel.userAge" oninput="value=value.replace(/[^\d]/g,'')" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="手机号:">
-                        <el-input v-model="formModel.phone"/>
+                        <el-input v-model="formModel.phone" oninput="value=value.replace(/[^\d]/g,'')" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="身份证姓名:">
-                        <el-input v-model="formModel.carName"/>
+                        <el-input v-model="formModel.carName" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="性别:">
                         <el-select v-model="formModel.sex" block placeholder="请选择">
-                            <el-option label="男" value="1"/>
-                            <el-option label="女" value="2"/>
+                            <el-option label="男" value="1" />
+                            <el-option label="女" value="2" />
                         </el-select>
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="民族:">
-                        <el-input v-model="formModel.nation"/>
+                        <el-input v-model="formModel.nation" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="身份证号码:">
-                        <el-input v-model="formModel.idNumber"/>
+                        <el-input v-model="formModel.idNumber" oninput="value=value.replace(/[^\d]/g,'')" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="出生日期:">
-                        <el-date-picker class="block" v-model="formModel.birthday" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
+                        <el-date-picker v-model="formModel.birthday" class="block" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="试用期:">
-                        <el-input v-model="formModel.periodMoth">
-                            <template #append>月</template>
+                        <el-input v-model="formModel.periodMoth" oninput="value=value.replace(/[^\d]/g,'')">
+                            <template #append>
+                                月
+                            </template>
                         </el-input>
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="身份证地址:">
-                        <el-input v-model="formModel.carAddr"/>
+                        <el-input v-model="formModel.carAddr" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="入职时间:">
-                        <el-date-picker class="block" v-model="formModel.entryTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
+                        <el-date-picker v-model="formModel.entryTime" class="block" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="合同类型:">
-                        <el-input v-model="formModel.conTypeName" disabled/>
+                        <el-input v-model="formModel.conTypeName" disabled />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="司龄:">
-                        <el-input v-model="formModel.cyear" disabled/>
+                        <el-input v-model="formModel.cyear" disabled />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="合同开始日期:">
-                        <el-date-picker class="block" v-model="formModel.conStartDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
+                        <el-date-picker v-model="formModel.conStartDate" class="block" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="职位:">
-                        <el-input v-model="formModel.postName" disabled/>
+                        <el-input v-model="formModel.postName" disabled />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="合同结束日期:">
-                        <el-date-picker class="block" v-model="formModel.conEndDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" disabled/>
+                        <el-date-picker v-model="formModel.conEndDate" class="block" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" disabled />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="婚姻状况:">
-                        <el-select block v-model="formModel.marriageStatus" placeholder="请选择">
-                            <el-option v-for="item in dictData.marriage_status" :label="item.dictName" :value="item.dictValue"/>
+                        <el-select v-model="formModel.marriageStatus" block placeholder="请选择">
+                            <el-option v-for="item in dictData.marriage_status" :label="item.dictName" :value="item.dictValue" />
                         </el-select>
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="邮箱:">
-                        <el-input v-model="formModel.email"/>
+                        <el-input v-model="formModel.email" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="续签次数:">
-                        <el-input v-model="formModel.renewalCount"/>
+                        <el-input v-model="formModel.renewalCount" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="户籍:">
-                        <el-input v-model="formModel.domicileAddr"/>
+                        <el-input v-model="formModel.domicileAddr" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="部门:">
-                        <el-input v-model="formModel.deptName" disabled/>
+                        <el-input v-model="formModel.deptName" disabled />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="合同附件:">
                         <el-link class="truncate" type="primary" target="_blank" :href="formModel.conFileUrl">
-                            {{getFileName(formModel.conFileUrl)}}
+                            {{ getFileName(formModel.conFileUrl) }}
                         </el-link>
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="学历:">
-                        <el-select block v-model="formModel.educationType">
-                            <el-option v-for="item in dictData.education_type" :label="item.dictName" :value="item.dictValue"/>
+                        <el-select v-model="formModel.educationType" block>
+                            <el-option v-for="item in dictData.education_type" :label="item.dictName" :value="item.dictValue" />
                         </el-select>
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="直属主管:">
-                        <el-input v-model="formModel.leaderName" disabled/>
+                        <el-input v-model="formModel.leaderName" disabled />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="紧急联系人姓名:">
-                        <el-input v-model="formModel.emergencyName"/>
+                        <el-input v-model="formModel.emergencyName" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="专业:">
-                        <el-input v-model="formModel.speciality"/>
+                        <el-input v-model="formModel.speciality" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="政治面貌:">
-                        <el-select block v-model="formModel.politicalType" placeholder="请选择">
-                            <el-option v-for="item in dictData.political_type" :label="item.dictName" :value="item.dictValue"/>
+                        <el-select v-model="formModel.politicalType" block placeholder="请选择">
+                            <el-option v-for="item in dictData.political_type" :label="item.dictName" :value="item.dictValue" />
                         </el-select>
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
-                    <el-form-item label="联系人电话:">
-                        <el-input v-model="formModel.emergencyPhone"/>
+                    <el-form-item label="联系人电话:" oninput="value=value.replace(/[^\d]/g,'')">
+                        <el-input v-model="formModel.emergencyPhone" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="开户行:">
-                        <el-input v-model="formModel.bankName"/>
+                        <el-input v-model="formModel.bankName" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="员工状态:">
-                        <el-select block v-model="formModel.userStatus" placeholder="请选择">
-                            <el-option v-for="item in dictData.user_status" :label="item.dictName" :value="item.dictValue"/>
+                        <el-select v-model="formModel.userStatus" block placeholder="请选择">
+                            <el-option v-for="item in dictData.user_status" :label="item.dictName" :value="item.dictValue" />
                         </el-select>
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="联系人关系:">
-                        <el-input v-model="formModel.emergencyRelation"/>
+                        <el-input v-model="formModel.emergencyRelation" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="银行卡号:">
-                        <el-input v-model="formModel.bankNum"/>
+                        <el-input v-model="formModel.bankNum" oninput="value=value.replace(/[^\d]/g,'')" :controls="false" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="员工类型:">
-                        <el-select block v-model="formModel.userType" placeholder="请选择">
-                            <el-option v-for="item in dictData.user_type" :label="item.dictName" :value="item.dictValue"/>
+                        <el-select v-model="formModel.userType" block placeholder="请选择">
+                            <el-option v-for="item in dictData.user_type" :label="item.dictName" :value="item.dictValue" />
                         </el-select>
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="员工身份证（人像）:">
-                        <HcFormUpload type="preview" :num="1" :src="formModel.carAimgUrl" @upload="formItemUpload('carAimgUrl')" @change="formItemChange($event,'carAimgUrl')"/>
+                        <HcFormUpload type="preview" :num="1" :src="formModel.carAimgUrl" @upload="formItemUpload('carAimgUrl')" @change="formItemChange($event, 'carAimgUrl')" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="员工身份证（国徽）:">
-                        <HcFormUpload type="preview" :num="1" :src="formModel.carBimgUrl" @upload="formItemUpload('carBimgUrl')" @change="formItemChange($event,'carBimgUrl')"/>
+                        <HcFormUpload type="preview" :num="1" :src="formModel.carBimgUrl" @upload="formItemUpload('carBimgUrl')" @change="formItemChange($event, 'carBimgUrl')" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="8">
                     <el-form-item label="员工照片:">
-                        <HcFormUpload type="preview" :num="1" :src="formModel.userImgUrl" @upload="formItemUpload('userImgUrl')" @change="formItemChange($event,'userImgUrl')"/>
+                        <HcFormUpload type="preview" :num="1" :src="formModel.userImgUrl" @upload="formItemUpload('userImgUrl')" @change="formItemChange($event, 'userImgUrl')" />
                     </el-form-item>
                 </el-col>
             </el-row>
         </el-form>
         <template #action>
             <el-button size="large" type="info" hc-btn @click="goBackClick">
-                <HcIcon name="arrow-go-back"/>
+                <HcIcon name="arrow-go-back" />
                 <span>取消并返回</span>
             </el-button>
             <el-button size="large" type="primary" hc-btn :loading="submitLoading" @click="formSaveClick">
-                <HcIcon name="check-double"/>
+                <HcIcon name="check-double" />
                 <span>提交保存</span>
             </el-button>
         </template>
 
-        <!--上传组件-->
-        <HcUploadFile ref="uploadFileRef" :options="uploadOptions" :echoParams="uploadParams" @success="uploadSuccess"/>
+        <!-- 上传组件 -->
+        <HcUploadFile ref="uploadFileRef" :options="uploadOptions" :echo-params="uploadParams" @success="uploadSuccess" />
     </HcCard>
 </template>
 
 <script setup>
-import {onActivated, ref} from 'vue'
-import mainApi from "~api/people/archive";
-import {getTokenHeader} from "~src/api/request/header";
-import {getArrValue, getObjValue} from "js-fast-way"
-import {useRouter, useRoute} from 'vue-router'
-import {getDictInfo} from "~api/other";
-import {getFileName} from "~uti/tools";
+import { onActivated, ref } from 'vue'
+import mainApi from '~api/people/archive'
+import { getTokenHeader } from '~src/api/request/header'
+import { getArrValue, getObjValue } from 'js-fast-way'
+import { useRoute, useRouter } from 'vue-router'
+import { getDictInfo } from '~api/other'
+import { getFileName } from '~uti/tools'
 
 //初始路由数据
 const router = useRouter(), useRoutes = useRoute()
@@ -245,7 +247,7 @@ const getDictionaryData = async () => {
     //婚姻 ：marriage_status  学历 education_type  政治面貌 political_type  员工状态 user_status  员工类型 user_type
     const keys = ['marriage_status', 'education_type', 'political_type', 'user_status', 'user_type']
     for (let i = 0; i < keys.length; i++) {
-        const {data} = await getDictInfo(keys[i])
+        const { data } = await getDictInfo(keys[i])
         newDict[keys[i]] = getArrValue(data)
     }
     dictData.value = newDict
@@ -253,8 +255,8 @@ const getDictionaryData = async () => {
 
 //获取用户信息
 const getUserInfo = async () => {
-    const {data} = await mainApi.detail({
-        id: dataId.value
+    const { data } = await mainApi.detail({
+        id: dataId.value,
     })
     formModel.value = getObjValue(data)
 }
@@ -273,13 +275,13 @@ const uploadOptions = {
     accept: 'image/png,image/jpg,image/jpeg',
     accept_tip: '只能上传图片(png、jpg、jpeg)',
     multiple: false,
-    size: 50
+    size: 50,
 }
 
 //上传
 const formItemUpload = (key) => {
-    uploadParams.value = {key}
-    uploadFileRef.value?.selectFile();
+    uploadParams.value = { key }
+    uploadFileRef.value?.selectFile()
 }
 
 //文件变化
@@ -288,10 +290,10 @@ const formItemChange = (src, key) => {
 }
 
 //文件上传成功
-const uploadSuccess = ({resData, echoParams}) => {
-    const {key} = echoParams
+const uploadSuccess = ({ resData, echoParams }) => {
+    const { key } = echoParams
     formModel.value[key] = resData.link
-    uploadFileRef.value?.setModalShow(false);
+    uploadFileRef.value?.setModalShow(false)
 }
 
 //提交保存
@@ -299,7 +301,7 @@ const submitLoading = ref(false)
 const formSaveClick = async () => {
     submitLoading.value = true
     //发起请求
-    const {error, code, msg} = await mainApi.submit(formModel.value)
+    const { error, code, msg } = await mainApi.submit(formModel.value)
     //判断状态
     submitLoading.value = false
     if (!error && code === 200) {