feat: 收款账户添加账户信息和备注字段

src/views/user/baseProceedsAccount.vue

@@ -48,43 +48,6 @@
         label-width="100px"
         :inline="true"
         size="mini">
-        <el-form-item label="账户类型" prop="accountType">
-          <el-select
-            v-model="addFormData.accountType"
-            placeholder="请选择账户类型"
-            @change="accountTypeChange"
-            style="width: 100%">
-            <el-option
-              v-for="item in accountTypeList"
-              :key="item.code"
-              :label="item.remark"
-              :value="item.code"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          label="银行卡开户行"
-          prop="openBank"
-          v-if="
-            addFormData.accountType === 'bank_transfer' ||
-            addFormData.accountType === 'xyk'
-          ">
-          <el-input
-            v-model="addFormData.openBank"
-            placeholder="请输入开户行"
-            clearable />
-        </el-form-item>
-        <el-form-item label="账户名称" prop="name">
-          <el-input
-            v-model="addFormData.name"
-            placeholder="请输入账户名称"
-            clearable />
-        </el-form-item>
-        <el-form-item label="账号" prop="accountNumber">
-          <el-input
-            v-model="addFormData.accountNumber"
-            placeholder="请输入账号"
-            clearable />
-        </el-form-item>
         <el-form-item label="收款方式" prop="receiverType">
           <el-select
             v-model="addFormData.receiverType"
@@ -101,6 +64,7 @@
           <el-select
             v-model="addFormData.operation"
             placeholder="请选择主要业务"
+            @change="operationChange"
             style="width: 100%">
             <el-option
               v-for="item in businessTypeList"
@@ -122,6 +86,43 @@
               :value="item.currencyCode"></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="账户类型" prop="accountType">
+          <el-select
+            v-model="addFormData.accountType"
+            placeholder="请选择账户类型"
+            @change="accountTypeChange"
+            style="width: 100%">
+            <el-option
+              v-for="item in accountTypeList"
+              :key="item.code"
+              :label="item.remark"
+              :value="item.code"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="银行卡开户行"
+          prop="openBank"
+          v-if="
+            addFormData.accountType === 'bank_transfer' ||
+            addFormData.accountType === 'xyk'
+          ">
+          <el-input
+            v-model="addFormData.openBank"
+            placeholder="请输入开户行"
+            clearable />
+        </el-form-item>
+        <el-form-item label="账户名称" prop="name">
+          <el-input
+            v-model="addFormData.name"
+            placeholder="请输入账户名称"
+            clearable />
+        </el-form-item>
+        <el-form-item label="账号" prop="accountNumber">
+          <el-input
+            v-model="addFormData.accountNumber"
+            placeholder="请输入账号"
+            clearable />
+        </el-form-item>
 
         <el-form-item label="日限额" prop="daySumLimited">
           <el-input-number
@@ -148,17 +149,22 @@
             :min="1"
             type="number" />
         </el-form-item>
-        <!-- <el-form-item label="启用状态" prop="isEnable">
-          <el-switch
-            class="switchStyle"
-            :width="100"
-            v-model="addFormData.isEnable"
-            active-color="#67C23A"
-            inactive-color="#F56C6C"
-            @change="dialogEnableChange"
-            active-text="启用"
-            inactive-text="禁用"></el-switch>
-        </el-form-item> -->
+        <el-form-item label="账户信息" prop="">
+          <el-input
+            v-model="addFormData.accountInfo"
+            placeholder="请输入账户信息"
+            type="textarea"
+            :rows="3"
+            clearable />
+        </el-form-item>
+        <el-form-item label="备注" prop="">
+          <el-input
+            v-model="addFormData.remark"
+            placeholder="请输入备注"
+            type="textarea"
+            :rows="3"
+            clearable />
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="default" @click="addDialog = false" size="small">
@@ -246,6 +252,32 @@
         <el-descriptions-item label="排序">
           {{ detailFormData.sort }}
         </el-descriptions-item>
+        <el-descriptions-item
+          label="账户信息"
+          :span="3"
+          :labelStyle="{ width: '130px' }"
+          :contentStyle="{
+            textAlign: 'left',
+            verticalAlign: 'top',
+            wordBreak: 'break-word'
+          }">
+          <span class="proceeds-multiline">{{
+            detailFormData.accountInfo || '-'
+          }}</span>
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="备注"
+          :span="3"
+          :labelStyle="{ width: '130px' }"
+          :contentStyle="{
+            textAlign: 'left',
+            verticalAlign: 'top',
+            wordBreak: 'break-word'
+          }">
+          <span class="proceeds-multiline">{{
+            detailFormData.remark || '-'
+          }}</span>
+        </el-descriptions-item>
         <el-descriptions-item label="支付宝授权状态">
           <span v-if="detailFormData.accountType === 'alipay'">
             <el-tag
@@ -263,7 +295,6 @@
         <el-descriptions-item label="更新时间">
           {{ detailFormData.updateTime }}
         </el-descriptions-item>
-        <el-descriptions-item />
       </el-descriptions>
     </el-dialog>
     <!-- 日志弹窗 -->
@@ -456,7 +487,9 @@ export default {
       monthlySumLimited: '',
       operation: '',
       isEnable: false,
-      sort: null
+      sort: null,
+      accountInfo: '',
+      remark: ''
     }
     return {
       select: '',
@@ -627,7 +660,9 @@ export default {
           key: 'accountType',
           width: '100',
           render: (item) => {
-            const accountType = this.accountTypeList.find((i) => i.code === item.accountType)
+            const accountType = this.accountTypeList.find(
+              (i) => i.code === item.accountType
+            )
             return accountType && accountType.remark
           }
         },
@@ -694,8 +729,10 @@ export default {
           key: 'operation',
           width: 200,
           render: (item) => {
-            return this.businessTypeList.find((i) => i.key === item.operation)
-              .value || ''
+            return (
+              this.businessTypeList.find((i) => i.key === item.operation)
+                .value || ''
+            )
           }
         },
         {
@@ -719,6 +756,42 @@ export default {
           key: 'monthlySumLimited',
           width: '150'
         },
+        {
+          label: '账户信息',
+          key: 'accountInfo',
+          width: '200',
+          minWidth: '160',
+          align: 'left',
+          showOverflow: false,
+          render: (item) => {
+            const text = item.accountInfo
+            if (!text) return '-'
+            return (
+              <span
+                style="white-space: pre-line; word-break: break-word; display: inline-block; width: 100%; text-align: left;">
+                {text}
+              </span>
+            )
+          }
+        },
+        {
+          label: '备注',
+          key: 'remark',
+          width: '200',
+          minWidth: '160',
+          align: 'left',
+          showOverflow: false,
+          render: (item) => {
+            const text = item.remark
+            if (!text) return '-'
+            return (
+              <span
+                style="white-space: pre-line; word-break: break-word; display: inline-block; width: 100%; text-align: left;">
+                {text}
+              </span>
+            )
+          }
+        },
 
         {
           label: '相关操作',
@@ -809,6 +882,13 @@ export default {
     }
   },
   methods: {
+    operationChange(value) {
+      if (value === 'ORDERS' || value === 'BALANCE') {
+        this.addFormData.currencyType = 'CNY'
+      } else {
+        this.addFormData.currencyType = 'USD'
+      }
+    },
     sizeChange(value) {
       this.paginationOptions.pageSize = value
       this.getList()
@@ -1082,7 +1162,9 @@ export default {
         monthlySumLimited: '',
         operation: '',
         sort: '',
-        isEnable: false
+        isEnable: false,
+        accountInfo: '',
+        remark: ''
       })
       this.$nextTick(() => {
         this.$refs.addForm.clearValidate()
@@ -1314,4 +1396,9 @@ export default {
   opacity: 0;
   margin-right: 10px;
 }
+
+.proceeds-multiline {
+  white-space: pre-line;
+  word-break: break-word;
+}
 </style>