luozhun
/
policeSecurity
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update securityUserForm.vue

This commit is contained in:
TimSpan 2024-12-02 10:55:07 +08:00
parent e08ba079fe
commit c339455817
1 changed files with 139 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

251
collect_information/src/subPages/projectManager/securityUserForm/securityUserForm.vue
View File

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