From c339455817d31d521c011382df62d83db525b302 Mon Sep 17 00:00:00 2001
From: TimSpan <cat20201314@163.com>
Date: Mon, 2 Dec 2024 10:55:07 +0800
Subject: [PATCH] Update securityUserForm.vue

---
 .../securityUserForm/securityUserForm.vue     | 251 ++++++++++--------
 1 file changed, 139 insertions(+), 112 deletions(-)

diff --git a/collect_information/src/subPages/projectManager/securityUserForm/securityUserForm.vue b/collect_information/src/subPages/projectManager/securityUserForm/securityUserForm.vue
index 1b25b1b..3c9fe8e 100644
--- a/collect_information/src/subPages/projectManager/securityUserForm/securityUserForm.vue
+++ b/collect_information/src/subPages/projectManager/securityUserForm/securityUserForm.vue
@@ -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()
     }