Update securityUserForm.vue
This commit is contained in:
parent
e08ba079fe
commit
c339455817
|
|
@ -3,54 +3,50 @@
|
|||
<nut-form ref="formRef" :model-value="formData" :rules="rules">
|
||||
<nut-form-item label="头像" prop="avatar">
|
||||
<view @click="chooseImage">
|
||||
<image v-if="!Url" src="@/assets/logo/avatar1.png" style="width:50px;height: 50px"></image>
|
||||
<image v-else :src="Url" style="width:150px;height: 150px"></image>
|
||||
<image v-if="!Url" src="@/assets/logo/avatar1.png" style="width: 50px; height: 50px"></image>
|
||||
<image v-else :src="Url" style="width: 150px; height: 150px"></image>
|
||||
</view>
|
||||
</nut-form-item>
|
||||
<nut-form-item label="身份证" prop="idCard">
|
||||
<view style="display: flex;justify-content: space-between;align-items: center">
|
||||
<nut-input v-model="formData.idCard" placeholder="请填写身份证" type="text" @blur="cardBlur"/>
|
||||
<view style="color: #3a6bbe;width: 70px;text-align: center;" @click="idCardBlur(formData,0)">查询</view>
|
||||
<view style="display: flex; justify-content: space-between; align-items: center">
|
||||
<nut-input v-model="formData.idCard" placeholder="请填写身份证" type="text" @blur="cardBlur" />
|
||||
<view style="color: #3a6bbe; width: 70px; text-align: center" @click="idCardBlur(formData, 0)">查询</view>
|
||||
</view>
|
||||
</nut-form-item>
|
||||
<nut-form-item label="姓名" prop="name">
|
||||
<nut-input v-model="formData.name" placeholder="请输入姓名" type="text"/>
|
||||
<nut-input v-model="formData.name" placeholder="请输入姓名" type="text" />
|
||||
</nut-form-item>
|
||||
<nut-form-item label="性别" prop="sex">
|
||||
<nut-radio-group v-model="formData.sex" direction="horizontal">
|
||||
<nut-radio v-for="item in SEX" :key="item.value" :label="item.value"
|
||||
>{{ item.label }}
|
||||
</nut-radio>
|
||||
<nut-radio v-for="item in SEX" :key="item.value" :label="item.value">{{ item.label }} </nut-radio>
|
||||
</nut-radio-group>
|
||||
</nut-form-item>
|
||||
<nut-form-item label="出生日期" prop="dateOfBirth">
|
||||
<view @click="showPicker = true">
|
||||
{{
|
||||
formData.dateOfBirth ? dayjs(formData.dateOfBirth).format('YYYY-MM-DD') : '请选择出生年月'
|
||||
}}
|
||||
{{ formData.dateOfBirth ? dayjs(formData.dateOfBirth).format('YYYY-MM-DD') : '请选择出生年月' }}
|
||||
</view>
|
||||
</nut-form-item>
|
||||
<nut-form-item label="工作岗位" prop="workPost">
|
||||
<nut-input v-model="formData.workPost" placeholder="请输入工作岗位" type="text"/>
|
||||
<nut-input v-model="formData.workPost" placeholder="请输入工作岗位" type="text" />
|
||||
</nut-form-item>
|
||||
|
||||
<nut-form-item label="手机号" prop="telephone">
|
||||
<nut-input v-model="formData.telephone" placeholder="请输入手机号" type="text"/>
|
||||
<nut-input v-model="formData.telephone" placeholder="请输入手机号" type="text" />
|
||||
</nut-form-item>
|
||||
<nut-form-item label="籍贯" prop="nativePlace">
|
||||
<nut-input v-model="formData.nativePlace" placeholder="请输入籍贯" type="text"/>
|
||||
<nut-input v-model="formData.nativePlace" placeholder="请输入籍贯" type="text" />
|
||||
</nut-form-item>
|
||||
<nut-form-item label="地址" prop="homeAddress">
|
||||
<nut-input v-model="formData.homeAddress" placeholder="请输入地址" type="text"/>
|
||||
<nut-input v-model="formData.homeAddress" placeholder="请输入地址" type="text" />
|
||||
</nut-form-item>
|
||||
<nut-form-item label="保安证件号" prop="securityNumber">
|
||||
<nut-input v-model="formData.securityNumber" placeholder="请输入保安证号" type="text"/>
|
||||
<nut-input v-model="formData.securityNumber" placeholder="请输入保安证号" type="text" />
|
||||
</nut-form-item>
|
||||
<nut-form-item label="无证说明" v-if="!formData.securityNumber">
|
||||
<nut-input v-model="formData.noSecurityNumberDesc" placeholder="无证说明" type="text"/>
|
||||
<nut-input v-model="formData.noSecurityNumberDesc" placeholder="无证说明" type="text" />
|
||||
</nut-form-item>
|
||||
<nut-form-item label="备注" prop="remark">
|
||||
<nut-input v-model="formData.remark" placeholder="请填写备注" type="text"/>
|
||||
<nut-input v-model="formData.remark" placeholder="请填写备注" type="text" />
|
||||
</nut-form-item>
|
||||
</nut-form>
|
||||
<view class="formButton">
|
||||
|
|
@ -61,8 +57,8 @@
|
|||
<nut-date-picker
|
||||
v-model="formData.dateOfBirth"
|
||||
:three-dimensional="false"
|
||||
:min-date="new Date(1900,1,1)"
|
||||
:max-date="new Date(2100,1,1)"
|
||||
:min-date="new Date(1900, 1, 1)"
|
||||
:max-date="new Date(2100, 1, 1)"
|
||||
@confirm="showPicker = false"
|
||||
@cancel="showPicker = false"
|
||||
></nut-date-picker>
|
||||
|
|
@ -72,30 +68,29 @@
|
|||
<view style="margin-bottom: 5px">
|
||||
<view>姓名：{{ securityNumberByIdCard?.name ? securityNumberByIdCard?.name : '无' }}</view>
|
||||
<view>保安证件号：{{ securityNumberByIdCard?.bayzh ? securityNumberByIdCard?.bayzh : '无' }}</view>
|
||||
<view>身份证：{{ securityNumberByIdCard?.sfzhm ? securityNumberByIdCard?.sfzhm : "无" }}</view>
|
||||
<view>身份证：{{ securityNumberByIdCard?.sfzhm ? securityNumberByIdCard?.sfzhm : '无' }}</view>
|
||||
</view>
|
||||
</slot>
|
||||
</nut-dialog>
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {ref} from "vue";
|
||||
import {enumSelectNodes} from "@/enums";
|
||||
import {FormRules} from "@nutui/nutui-taro/dist/types/__VUE/form/types";
|
||||
import api from "@/request";
|
||||
import { ref } from 'vue'
|
||||
import { enumSelectNodes } from '@/enums'
|
||||
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types'
|
||||
import api from '@/request'
|
||||
import './securityUserForm.scss'
|
||||
import Taro, {useLoad} from "@tarojs/taro";
|
||||
import dayjs from "dayjs";
|
||||
import {SecurityUserFormParams, securityNumberByIdCard} from "@/types/subPages/projectManager/securityUserForm";
|
||||
import {FormInstance} from "@nutui/nutui-taro";
|
||||
import {generateSimpleObjectName, getResignedObjectUrl} from "@/utils";
|
||||
|
||||
import Taro, { useLoad } from '@tarojs/taro'
|
||||
import dayjs from 'dayjs'
|
||||
import { SecurityUserFormParams, securityNumberByIdCard } from '@/types/subPages/projectManager/securityUserForm'
|
||||
import { FormInstance } from '@nutui/nutui-taro'
|
||||
import { generateSimpleObjectName, getResignedObjectUrl } from '@/utils'
|
||||
|
||||
const SEX = enumSelectNodes('Sex')
|
||||
const minioBaseUrl = process.env.TARO_APP_MINIO_URL
|
||||
const showPicker = ref(false)
|
||||
const Url =ref('')
|
||||
const type = ref<'formInput' | 'QcCodeInput'>(null!);
|
||||
const Url = ref('')
|
||||
const type = ref<'formInput' | 'QcCodeInput'>(null!)
|
||||
const formData = ref<SecurityUserFormParams>({} as any)
|
||||
const formRef = ref<FormInstance>(null!)
|
||||
const visible = ref<boolean>(false)
|
||||
|
|
@ -104,25 +99,20 @@ const uploadRef = ref<any>(null)
|
|||
const modelValue = ref('')
|
||||
|
||||
const rules: FormRules = {
|
||||
name: [
|
||||
{required: true, message: "请输入姓名"},
|
||||
],
|
||||
sex: [{required: true, message: "请选择性别"}],
|
||||
name: [{ required: true, message: '请输入姓名' }],
|
||||
sex: [{ required: true, message: '请选择性别' }],
|
||||
idCard: [
|
||||
{required: true, message: "请输入身份证号"},
|
||||
{ required: true, message: '请输入身份证号' },
|
||||
{
|
||||
regex: /^(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))((0[1-9])|([12][0-9])|(30|31))\d{3}(\d|X)$)/,
|
||||
message: "身份证格式错误",
|
||||
message: '身份证格式错误',
|
||||
},
|
||||
],
|
||||
telephone: [
|
||||
{required: true, message: "请输入手机号"},
|
||||
]
|
||||
};
|
||||
|
||||
telephone: [{ required: true, message: '请输入手机号' }],
|
||||
}
|
||||
|
||||
useLoad((options) => {
|
||||
type.value = options.type;
|
||||
type.value = options.type
|
||||
if (type.value === 'QcCodeInput') {
|
||||
formData.value = {
|
||||
name: '',
|
||||
|
|
@ -140,7 +130,7 @@ useLoad((options) => {
|
|||
console.log(form)
|
||||
formData.value = Object.assign({}, form, {
|
||||
idCard: form.idCard.originalValue,
|
||||
telephone: form.telephone.originalValue
|
||||
telephone: form.telephone.originalValue,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -151,13 +141,13 @@ const idCardBlur = async (e: any, num: number) => {
|
|||
Taro.request({
|
||||
url: 'https://www.hnjinglian.cn:5678/common/querySecurityNumberByIdCard',
|
||||
data: {
|
||||
idCard: value
|
||||
idCard: value,
|
||||
},
|
||||
method: 'GET',
|
||||
success: ({data}) => {
|
||||
success: ({ data }) => {
|
||||
visible.value = true
|
||||
securityNumberByIdCard.value = data.data
|
||||
}
|
||||
},
|
||||
})
|
||||
return
|
||||
} else {
|
||||
|
|
@ -175,14 +165,14 @@ const cardBlur = (e, num) => {
|
|||
value = e.detail.value
|
||||
}
|
||||
if (!value?.length || value.length < 18) {
|
||||
formData.value.dateOfBirth = null;
|
||||
formData.value.dateOfBirth = null
|
||||
cancel()
|
||||
return
|
||||
}
|
||||
const birthDate = value.substring(6, 14);
|
||||
const year = birthDate.substring(0, 4);
|
||||
const month = birthDate.substring(4, 6);
|
||||
const day = birthDate.substring(6, 8);
|
||||
const birthDate = value.substring(6, 14)
|
||||
const year = birthDate.substring(0, 4)
|
||||
const month = birthDate.substring(4, 6)
|
||||
const day = birthDate.substring(6, 8)
|
||||
formData.value.dateOfBirth = new Date(parseInt(year), parseInt(month) - 1, parseInt(day))
|
||||
}
|
||||
|
||||
|
|
@ -196,77 +186,114 @@ const cancel = () => {
|
|||
visible.value = false
|
||||
}
|
||||
const chooseImage = () => {
|
||||
Taro.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
Taro.chooseMedia({
|
||||
count: 1, // 选择一个文件
|
||||
// type: 'image', // 可以选择所有文件类型
|
||||
mediaType: ['image', 'video'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: async (resp) => {
|
||||
Url.value = resp.tempFilePaths[0]
|
||||
console.log(resp.tempFilePaths[0])
|
||||
const objectName = generateSimpleObjectName(resp.tempFiles[0].path, '/securityUser')
|
||||
maxDuration: 30,
|
||||
camera: 'back',
|
||||
success: async (res) => {
|
||||
console.log('🚀 ~ success: ~ res:', res)
|
||||
|
||||
const tempFilePath = res.tempFiles[0].tempFilePath
|
||||
const objectName = generateSimpleObjectName(tempFilePath, '/securityUser')
|
||||
const uploadUrl = await getResignedObjectUrl(process.env.TARO_APP_MINIO_BUCKET, objectName)
|
||||
modelValue.value = '/' + process.env.TARO_APP_MINIO_BUCKET + objectName;
|
||||
console.log(modelValue)
|
||||
// Taro.request({
|
||||
// url: uploadUrl,
|
||||
// data: resp.tempFiles,
|
||||
// method: 'PUT',
|
||||
// header: {
|
||||
// 'content-type': 'application/json'
|
||||
// },
|
||||
// success: (resp) => {
|
||||
// console.log(resp)
|
||||
// }
|
||||
// })
|
||||
Taro.getFileSystemManager().readFile({
|
||||
filePath: resp.tempFiles[0].path, // 文件路径
|
||||
encoding: 'base64', // 指定编码为 base64
|
||||
success (res) {
|
||||
console.log(res.data)
|
||||
// 成功回调，这里可以创建一个 Blob 对象
|
||||
const blob = b64toBlob(res.data, 'image/jpeg'); // 根据实际情况指定 MIME 类型
|
||||
// 创建一个 File 对象
|
||||
const file = new File([blob], 'filename.jpg', {type: 'image/jpeg'});
|
||||
console.log(file)
|
||||
Taro.request({
|
||||
url:uploadUrl,
|
||||
data: file,
|
||||
method:'PUT',
|
||||
success:(res)=>{
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
// 现在你可以使用 file 变量了
|
||||
// 使用 wx.getFileSystemManager().readFileSync 读取文件的二进制内容
|
||||
const fs = Taro.getFileSystemManager()
|
||||
const fileData = fs.readFileSync(tempFilePath) // 返回的是文件的二进制内容
|
||||
|
||||
// 发送 PUT 请求上传二进制文件
|
||||
Taro.request({
|
||||
url: uploadUrl, // 后端上传接口
|
||||
method: 'PUT',
|
||||
header: {
|
||||
'Content-Type': 'application/octet-stream', // 设置为二进制流
|
||||
},
|
||||
fail (err) {
|
||||
console.error('读取文件失败:', err);
|
||||
}
|
||||
});
|
||||
}
|
||||
data: fileData, // 传递二进制数据
|
||||
success(res) {
|
||||
console.log('上传成功', res)
|
||||
},
|
||||
fail(err) {
|
||||
console.error('上传失败', err)
|
||||
},
|
||||
})
|
||||
},
|
||||
fail(err) {
|
||||
console.error('选择文件失败', err)
|
||||
},
|
||||
})
|
||||
|
||||
// Taro.chooseImage({
|
||||
// count: 1,
|
||||
// sizeType: ['original', 'compressed'],
|
||||
// sourceType: ['album', 'camera'],
|
||||
// success: async (resp) => {
|
||||
// Url.value = resp.tempFilePaths[0]
|
||||
// console.log(resp.tempFilePaths[0])
|
||||
// const objectName = generateSimpleObjectName(resp.tempFiles[0].path, '/securityUser')
|
||||
// const uploadUrl = await getResignedObjectUrl(process.env.TARO_APP_MINIO_BUCKET, objectName)
|
||||
// modelValue.value = '/' + process.env.TARO_APP_MINIO_BUCKET + objectName;
|
||||
// console.log(modelValue)
|
||||
// // Taro.request({
|
||||
// // url: uploadUrl,
|
||||
// // data: resp.tempFiles,
|
||||
// // method: 'PUT',
|
||||
// // header: {
|
||||
// // 'content-type': 'application/json'
|
||||
// // },
|
||||
// // success: (resp) => {
|
||||
// // console.log(resp)
|
||||
// // }
|
||||
// // })
|
||||
// Taro.getFileSystemManager().readFile({
|
||||
// filePath: resp.tempFiles[0].path, // 文件路径
|
||||
// encoding: 'base64', // 指定编码为 base64
|
||||
// success (res) {
|
||||
// console.log(res.data)
|
||||
// // 成功回调，这里可以创建一个 Blob 对象
|
||||
// const blob = b64toBlob(res.data, 'image/jpeg'); // 根据实际情况指定 MIME 类型
|
||||
// // 创建一个 File 对象
|
||||
// const file = new File([blob], 'filename.jpg', {type: 'image/jpeg'});
|
||||
// console.log(file)
|
||||
// Taro.request({
|
||||
// url:uploadUrl,
|
||||
// data: file,
|
||||
// method:'PUT',
|
||||
// success:(res)=>{
|
||||
// console.log(res)
|
||||
// }
|
||||
// })
|
||||
// // 现在你可以使用 file 变量了
|
||||
// },
|
||||
// fail (err) {
|
||||
// console.error('读取文件失败:', err);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// })
|
||||
}
|
||||
const b64toBlob = (b64Data, contentType='', sliceSize=512) =>{
|
||||
const byteCharacters = atob(b64Data);
|
||||
const byteArrays:any = [];
|
||||
const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
|
||||
const byteCharacters = atob(b64Data)
|
||||
const byteArrays: any = []
|
||||
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
|
||||
const slice = byteCharacters.slice(offset, offset + sliceSize);
|
||||
const slice = byteCharacters.slice(offset, offset + sliceSize)
|
||||
|
||||
const byteNumbers = new Array(slice.length);
|
||||
const byteNumbers = new Array(slice.length)
|
||||
for (let i = 0; i < slice.length; i++) {
|
||||
byteNumbers[i] = slice.charCodeAt(i);
|
||||
byteNumbers[i] = slice.charCodeAt(i)
|
||||
}
|
||||
const byteArray = new Uint8Array(byteNumbers);
|
||||
byteArrays.push(byteArray);
|
||||
const byteArray = new Uint8Array(byteNumbers)
|
||||
byteArrays.push(byteArray)
|
||||
}
|
||||
return new Blob(byteArrays, {type: contentType});
|
||||
return new Blob(byteArrays, { type: contentType })
|
||||
}
|
||||
|
||||
|
||||
const submit = () => {
|
||||
console.log(formData.value.photo)
|
||||
formRef.value?.validate().then(async ({valid}) => {
|
||||
formRef.value?.validate().then(async ({ valid }) => {
|
||||
if (valid) {
|
||||
let url: string;
|
||||
let url: string
|
||||
if (type.value === 'formInput') {
|
||||
url = '/mp/user/add_security_user_upd'
|
||||
} else {
|
||||
|
|
@ -294,7 +321,7 @@ const submit = () => {
|
|||
remark: '',
|
||||
homeAddress: '',
|
||||
noSecurityNumberDesc: '',
|
||||
photo: ''
|
||||
photo: '',
|
||||
}
|
||||
uploadRef.value?.clearUploadQueue()
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue