银行卡bug

src/views/operationManagement/modules/addCard.vue

@@ -1,47 +1,33 @@
 <template>
   <div class="form">
-    <el-form ref="BankRef" :rules="bankRules" :model="bankForm" label-width="80">
-      <el-form-item prop="name" label="姓名">
-        <el-input v-model="bankForm.name" disabled></el-input>
+    <el-form ref="BankRef" :rules="bankRules" :model="bankForm" label-width="120">
+      <el-form-item prop="cardHolderName" label="姓名">
+        <el-input v-model="bankForm.cardHolderName" :disabled="props.userInfo.isRead"></el-input>
       </el-form-item>
-      <el-form-item prop="bank" label="银行">
-        <el-select v-model="bankForm.bankName" :disabled="bankForm.isRead">
+      <el-form-item prop="cardHolderMobile" label="持卡人手机号">
+        <el-input v-model="bankForm.cardHolderMobile"  maxlength="11" :disabled="props.userInfo.isRead"></el-input>
+      </el-form-item>
+      <el-form-item prop="bankName" label="银行">
+        <el-select v-model="bankForm.bankName" :disabled="props.userInfo.isRead">
           <el-option v-for="item in bankOption" :key="item.id" :value="item.label" :label="item.label"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item prop="bankCardNumber" label="银行卡号">
-        <el-input v-model="bankForm.bankCardNumber" :disabled="bankForm.isRead"></el-input>
-      </el-form-item>
-      <el-form-item prop="bankName" label="开户行">
-        <el-input v-model="bankForm.bankAddress" :disabled="bankForm.isRead"></el-input>
+        <el-input v-model="bankForm.bankCardNumber" :disabled="props.userInfo.isRead"></el-input>
       </el-form-item>
-      <el-form-item prop="photo" label="照片" class="upload-btn">
-        <el-upload :auto-upload="false" v-if="!bankForm.imageUrl" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage">
-          <el-button size="large" icon="Plus" />
-        </el-upload>
-        <div class="image-view" v-else>
-          <img :src="bankForm.imageUrl" />
-          <div class="btns" v-if="!bankForm.isRead">
-            <el-upload  :disabled="bankForm.isRead" style="display: inline" :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage">
-              <el-icon class="btn-icon"><Upload /></el-icon>
-            </el-upload>
-<!--            <el-icon class="btn-icon" @click="imageView"><View /></el-icon>-->
-          </div>
-        </div>
+      <el-form-item prop="bankAddress" label="开户行">
+        <el-input v-model="bankForm.bankAddress" :disabled="props.userInfo.isRead"></el-input>
       </el-form-item>
-      <div style="display: flex; justify-content: flex-end" v-if="!bankForm.isRead">
+      <div style="display: flex; justify-content: flex-end" v-if="!props.userInfo.isRead">
         <el-button @click="onSubmit(BankRef, 0)">取消</el-button>
         <el-button type="primary" @click="onSubmit(BankRef, 1)">确定</el-button>
       </div>
     </el-form>
-    <div class="image-show" v-show="imageShow" @click="() => { imageShow = false }">
-      <img :src="bankForm.imageUrl" />
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, defineEmits, onMounted, watch } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import {ElMessage, FormInstance} from 'element-plus'
 import api from "@/api";
 
@@ -49,37 +35,50 @@ const BankRef = ref<FormInstance>()
 
 let props = defineProps<{
   userInfo: {
-    userJzgInfoId: string,
-    name: string,
-    bankName?: string,
-    bankCardNumber?: string,
-    bankAddress?: string,
-    attachment?: string,
-    imageUrl?: string
-    isRead?: boolean
+    userJzgInfoId?: string,
+    name?: string,
+    isRead?: boolean,
+    DetailInfo?: any
   }
 }>()
+let bankForm = ref({
+  userJzgInfoId: '',
+  cardHolderName: "",
+  cardHolderMobile: "",
+  bankName: "",
+  bankCardNumber: "",
+  bankAddress: "",
+})
 const emits = defineEmits(['closeDialog'])
 watch(() => props.userInfo, (newVal, oldVal) => {
-  bankForm.value = newVal
-}, { deep: true });
+  bankForm.value.cardHolderName = newVal.name || ''
+  bankForm.value.userJzgInfoId = newVal.userJzgInfoId || ''
+  if(newVal.DetailInfo) {
+    bankForm.value.userJzgInfoId = newVal.DetailInfo.userJzgInfoId || ''
+    bankForm.value.cardHolderName = newVal.DetailInfo.name || ''
+    bankForm.value.cardHolderMobile = newVal.DetailInfo.cardHolderMobile || ''
+    bankForm.value.bankName = newVal.DetailInfo.bankName || ''
+    bankForm.value.bankCardNumber = newVal.DetailInfo.bankCardNumber || ''
+    bankForm.value.bankAddress = newVal.DetailInfo.bankAddress || ''
+  }
+}, { immediate: true })
+
+
 
-let bankForm = ref({
-  userJzgInfoId: props.userInfo.userJzgInfoId,
-  name: props.userInfo.name,
-  bankName: props.userInfo.bankName,
-  bankCardNumber: props.userInfo.bankCardNumber,
-  bankAddress: props.userInfo.bankAddress,
-  attachment: props.userInfo.attachment,
-  imageUrl: props.userInfo.attachment,
-  isRead: props.userInfo.isRead
-})
 const bankRules = {
-  name: [
+  cardHolderName: [
     { required: true, message: '请填写姓名', trigger: 'blur' }
   ],
+  cardHolderMobile: [
+    { required: true, message: '请填写持卡人手机号', trigger: 'blur' },
+    {
+      pattern: /^1[0-9]{10}$/,
+      message: '请填写正确的手机号',
+      trigger: 'blur'
+    }
+  ],
   bankName: [
-    { required: true, message: '请填写开户行', trigger: 'blur' }
+    { required: true, message: '请填写银行名称', trigger: 'blur' }
   ],
   bankCardNumber: [
     { required: true, message: '请填写银行卡号', trigger: 'blur' },
@@ -94,28 +93,12 @@ const bankRules = {
   ],
 }
 
-// 照片
-let imageShow = ref(false)
-const uploadImage = async (file) => {
-  let files = file.raw
-  const params = new FormData(); // 声明formData数据类型
-  params.append("file", files);
-  params.append("type", "image");
-  const { code, data, msg } = await api.commonApi.fileUpload(params)
-  if(code == 200) {
-    bankForm.value.imageUrl = data.downloadUrl
-    bankForm.value.attachment = data.id
-  }
-}
-const imageView = () => {
-  imageShow.value = true
-}
 
 // 初始化银行数据
 let bankOption = ref([])
 const initBankCard = () => {
-  api.commonApi.personInfo('bank_info').then(res => {
-    if(res.code == 200) {
+  api.commonApi.personInfo('bank_info').then((res:any) => {
+    if(res?.code == 200) {
       bankOption.value = res.data
     } else {
       ElMessage({
@@ -135,6 +118,7 @@ const onSubmit = async (BankRef:FormInstance | undefined, type: number) => {
   if(type) {
     await BankRef.validate((valid) => {
       if(valid) {
+        console.log(bankForm.value)
         api.operationApi.addBankCard(bankForm.value).then(res => {
           if(res.code == 200) {
             ElMessage({

src/views/operationManagement/operationDetail.vue

@@ -81,14 +81,10 @@
                 <template #default>
                   <el-table
                     :data="dataDetail?.bankCardList"
-                    height="200"
+                    height="300"
                   >
                     <el-table-column prop="name" label="姓名"></el-table-column>
-                    <el-table-column prop="bankName" label="开户行">
-                      <template #default="scope">
-                        {{ bankCardChange(bankOption, scope.row.bankName) }}
-                      </template>
-                    </el-table-column>
+                    <el-table-column prop="bankName" label="开户行"></el-table-column>
                     <el-table-column prop="bankCardNumber" label="卡号"></el-table-column>
                     <el-table-column prop="bankAddress" label="开户支行"></el-table-column>
                     <el-table-column prop="auditStatus" label="审核状态">
@@ -96,21 +92,9 @@
                         {{ scope.row.auditStatus == '0'?'未审核':scope.row.auditStatus == '1'?'审核通过':scope.row.auditStatus == '2'?'审核驳回':''}}
                       </template>
                     </el-table-column>
-                    <el-table-column prop="" label="身份证件照片">
-                      <template #default="scope">
-<!--                        <img class="cardImage" :src="dataDetail?.fileList.length>0?dataDetail?.fileList?.[0].fileUrl:''">-->
-                          {{ dataDetail?.fileList.length>0?`${dataDetail?.fileList?.length}张`: '暂无' }}
-                      </template>
-                    </el-table-column>
-                    <el-table-column prop="cardFile" label="银行卡照片">
-                      <template #default="scope">
-<!--                        <img class="cardImage" :src="scope.row.cardFile">-->
-                          {{ scope.row.cardFileUrl?`1张`: '暂无' }}
-                      </template>
-                    </el-table-column>
                     <el-table-column label="操作">
                       <template #default="scope">
-                        <a style="color: #409EFF; cursor: pointer" @click="editBankCard(scope.row)">详情</a>
+                        <el-button link type="primary" @click="editBankCard(scope.row)">详情</el-button>
                       </template>
                     </el-table-column>
                   </el-table>
@@ -158,7 +142,7 @@
       :title="bankTitle"
       width="500"
     >
-      <addCard @closeDialog="closeAddBankCard" :userInfo="bankCardInfo"></addCard>
+      <addCard v-if="bankCardDialogShow" @closeDialog="closeAddBankCard" :userInfo="bankCardInfo"></addCard>
     </el-dialog>
     <el-dialog
       v-model="dialogShow"
@@ -198,6 +182,7 @@ import { useRoute, useRouter } from 'vue-router'
 import api from '@/api'
 import {OperationIsEnable} from "@/api/modules/operation.ts";
 import router from "@/router";
+import Detail from '../representative/detail.vue';
 
 let AddOperationRef = ref(null)
 const AllocationRef = ref(null)
@@ -325,27 +310,25 @@ let bankCardDialogShow = ref(false)
 // 添加银行卡
 const addBankCard = () => {
   bankTitle.value = '添加银行卡'
-  bankCardDialogShow.value = true
   bankCardInfo.value = {
-    userJzgInfoId: dataDetail.value.id,
-    name: dataDetail.value.name,
+    userJzgInfoId: dataDetail.value?.id || '',
+    name: dataDetail.value?.name || '',
     isRead: false
   }
+  bankCardDialogShow.value = true
+
 }
 // 编辑银行卡
-const editBankCard = (row) => {
+const editBankCard = (row:any) => {
   bankTitle.value = '查看银行卡'
-  bankCardDialogShow.value = true
   bankCardInfo.value = {
     userJzgInfoId: dataDetail.value.id,
     name: dataDetail.value.name,
-    bankName: row.bankName,
-    bankCardNumber: row.bankCardNumber,
-    bankAddress: row.bankAddress,
-    attachment: row.cardFile,
-    imageUrl: row.cardFile,
-    isRead: true
+    isRead: true,
+    DetailInfo: row || {}
   }
+  bankCardDialogShow.value = true
+
 }
 // 关闭添加银行卡弹框
 const closeAddBankCard = (type: string) => {
@@ -479,7 +462,7 @@ const imageChangeUrl = (type) => {
 // 预览
 let imageUrl = ref('')
 let imageShow = ref(false)
-const imageView = (type) => {
+const imageView = (type: string) => {
   imageUrl.value = imageChangeUrl(type)
   imageShow.value = true
 }
@@ -488,7 +471,7 @@ const imageView = (type) => {
 let dataDetail = ref(null)
 const initDetail = () => {
   let id = myRoute.query?.id
-  api.operationApi.operationDetail(id).then(res => {
+  api.operationApi.operationDetail(id).then((res:any) => {
     if(res?.code == 200) {
       dataDetail.value = res.data
     } else {
@@ -503,8 +486,8 @@ const initDetail = () => {
 // 初始化银行数据
 let bankOption = ref([])
 const initBankCard = () => {
-  api.commonApi.personInfo('bank_info').then(res => {
-    if(res.code == 200) {
+  api.commonApi.personInfo('bank_info').then((res:any) => {
+    if(res?.code == 200) {
       bankOption.value = res.data
     } else {
       ElMessage({
@@ -514,16 +497,10 @@ const initBankCard = () => {
     }
   })
 }
-// 转换
-const bankCardChange = (list, code) => {
-  if(code&&list.length>0) {
-    let obj = list.find(item => item.id == code)
-    return obj.label
-  }
-}
+
 
 // 名字转换首字母
-const initName = (name) => {
+const initName = (name: string) => {
   return name?pinyin.getFullChars(name).substring(0, 1):''
 }