优化内容文档-前端优化

src/views/business/payOrder/batchToAli.vue

@@ -4,8 +4,18 @@
       <el-form ref="batchForm" :model="batchForm" :rules="batchRules" label-width="120px">
         <el-row :gutter="10">
           <el-col :span="12">
-            <el-form-item label="支付名称" prop="batchPayName">
-              <el-input v-model="batchForm.batchPayName" placeholder="请输入支付名称" />
+            <el-form-item label="业务名称" prop="batchPayName">
+              <el-input v-model="batchForm.batchPayName" placeholder="请输入支业务名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-alert title="此信息不会展示给收款人，只在系统中展示便于后期查询；" type="warning">
+            </el-alert>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="付款账号" prop="payerAccNo">
+              <acc-select v-model="batchForm.payerAccNo" :defaultVal="defaultPayerAccNo"
+                :isDisabled="defaultPayerAccNo"></acc-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -16,17 +26,16 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="付款账号" prop="payerAccNo">
-              <acc-select v-model="batchForm.payerAccNo" :defaultVal="defaultPayerAccNo"
-                :isDisabled="defaultPayerAccNo"></acc-select>
-            </el-form-item>
-          </el-col>
+
           <el-col :span="12">
             <el-form-item label="备注" prop="payRemark">
               <el-input v-model="batchForm.payRemark" placeholder="请输入支付备注" />
             </el-form-item>
           </el-col>
+          <el-col :offset="14" :span="10">
+            <el-alert title="此信息将展示在收款人的备注中；" type="warning">
+            </el-alert>
+          </el-col>
         </el-row>
       </el-form>
     </div>
@@ -93,39 +102,46 @@
     <!-- 添加或修改 批量支付明细对话框 -->
     <el-dialog title="新增收款人" :visible.sync="addPanelOpen" width="600px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="支付类型" prop="payTitle">
-          <el-select v-model="form.payTitle" placeholder="请选择支付类型">
-            <el-option v-for="dict in dict.type.pay_type_title" :key="dict.value" :label="dict.label"
-              :value="dict.value" />
-          </el-select>
-        </el-form-item>
+
         <el-form-item label="收款人户名" prop="payeeAccName">
           <el-input v-model="form.payeeAccName" placeholder="请输入收款人户名" />
         </el-form-item>
         <el-form-item label="收款人账户" prop="payeeAccNo">
           <el-input v-model="form.payeeAccNo" placeholder="请输入收款人账户" />
         </el-form-item>
-        <el-form-item label="收款账户类型" prop="payeeAccType">
+        <!-- <el-form-item label="收款账户类型" prop="payeeAccType">
           <el-select v-model="form.payeeAccType" placeholder="请选择收款账户类型" disabled>
             <el-option v-for="dict in dict.type.payee_acc_type" :key="dict.value" :label="dict.label"
               :value="dict.value * 1" />
           </el-select>
-        </el-form-item>
-        <el-form-item label="公户/私户" prop="isPrivateAcc">
+        </el-form-item> -->
+        <!-- <el-form-item label="公户/私户" prop="isPrivateAcc">
           <el-select v-model="form.isPrivateAcc" placeholder="请选择收款账户类型" disabled>
             <el-option label="对私账户" :value="1" />
             <el-option label="对公账户" :value="2" />
           </el-select>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="手机号码" prop="payeeMobile">
           <el-input v-model="form.payeeMobile" placeholder="请输入收款人手机号" />
         </el-form-item>
         <el-form-item label="金额" prop="amount">
           <el-input-number style="width: 100%" v-model="form.amount" :precision="2" :step="0.1" placeholder="请输入支付金额" />
         </el-form-item>
+        <el-form-item label="支付类型" prop="payTitle">
+          <el-select v-model="form.payTitle" placeholder="请选择支付类型">
+            <el-option v-for="dict in dict.type.pay_type_title" :key="dict.value" :label="dict.label"
+              :value="dict.value" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="备注" prop="payRemark">
           <el-input v-model="form.payRemark" placeholder="请输入支付备注" />
         </el-form-item>
+        <el-row>
+          <el-col :offset="4" :span="20">
+            <el-alert title="备注内容将展示在收款人的备注中;" type="warning">
+            </el-alert>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="addDetail">确 定</el-button>
@@ -141,6 +157,8 @@
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip text-center" slot="tip">
+          <span style="line-height: 28px;">每次最大批量转账条数为一千条;</span>
+          <br />
           <span>仅允许导入xls、xlsx格式文件。</span>
           <a style="color:#1890ff;margin:0px;line-height:14px" class="download" download="收款人明细模板" href="/收款人明细模板.xlsx"
             target="_blank">下载模板</a>
@@ -194,7 +212,7 @@ export default {
           { required: true, message: "支付类型不能为空", trigger: "blur" }
         ],
         batchPayName: [
-          { required: true, message: "支付名称不能为空", trigger: "blur" }
+          { required: true, message: "业务名称不能为空", trigger: "blur" }
         ],
         payerAccNo: [
           { required: true, message: "请选择付款账号", trigger: "blur" }
@@ -237,6 +255,10 @@ export default {
     };
   },
   mounted() {
+    this.getDicts("pay_type_title").then(response => {
+      this.batchForm.payTitle = response.data[0].dictValue;
+      this.$forceUpdate()
+    });
     if (this.$route.query.number) {
       this.defaultPayerAccNo = String(this.$route.query.number)
     }

src/views/business/payOrder/batchToBank.vue

@@ -4,29 +4,37 @@
       <el-form ref="batchForm" :model="batchForm" :rules="batchRules" label-width="120px">
         <el-row :gutter="10">
           <el-col :span="12">
-            <el-form-item label="支付名称" prop="batchPayName">
-              <el-input v-model="batchForm.batchPayName" placeholder="请输入支付名称" />
+            <el-form-item label="业务名称" prop="batchPayName">
+              <el-input v-model="batchForm.batchPayName" placeholder="请输入业务名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-alert title="此信息不会展示给收款人，只在系统中展示便于后期查询；" type="warning">
+            </el-alert>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="付款账号" prop="payerAccNo">
+              <acc-select v-model="batchForm.payerAccNo" :defaultVal="defaultPayerAccNo"
+                :isDisabled="defaultPayerAccNo"></acc-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="支付类型" prop="payTitle">
-              <el-select v-model="batchForm.payTitle" placeholder="请选择支付类型">
+              <el-select v-model="batchForm.payTitle" @change="chaheuhashjs" placeholder="请选择支付类型">
                 <el-option v-for="dict in dict.type.pay_type_title" :key="dict.value" :label="dict.label"
                   :value="dict.value" />
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="付款账号" prop="payerAccNo">
-              <acc-select v-model="batchForm.payerAccNo" :defaultVal="defaultPayerAccNo"
-                :isDisabled="defaultPayerAccNo"></acc-select>
-            </el-form-item>
-          </el-col>
           <el-col :span="12">
             <el-form-item label="备注" prop="payRemark">
               <el-input v-model="batchForm.payRemark" placeholder="请输入支付备注" />
             </el-form-item>
           </el-col>
+          <el-col :offset="14" :span="10">
+            <el-alert title="此信息将展示在收款人的备注中；" type="warning">
+            </el-alert>
+          </el-col>
         </el-row>
       </el-form>
     </div>
@@ -93,39 +101,45 @@
     <!-- 添加或修改 批量支付明细对话框 -->
     <el-dialog title="新增收款人" :visible.sync="addPanelOpen" width="600px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="支付类型" prop="payTitle">
-          <el-select v-model="form.payTitle" placeholder="请选择支付类型">
-            <el-option v-for="dict in dict.type.pay_type_title" :key="dict.value" :label="dict.label"
-              :value="dict.value" />
-          </el-select>
-        </el-form-item>
         <el-form-item label="收款人户名" prop="payeeAccName">
           <el-input v-model="form.payeeAccName" placeholder="请输入收款人户名" />
         </el-form-item>
         <el-form-item label="收款人账户" prop="payeeAccNo">
           <el-input v-model="form.payeeAccNo" placeholder="请输入收款人账户" />
         </el-form-item>
-        <el-form-item label="收款账户类型" prop="payeeAccType">
-          <el-select v-model="form.payeeAccType" placeholder="请选择收款账户类型" disabled>
-            <el-option v-for="dict in dict.type.payee_acc_type" :key="dict.value" :label="dict.label"
-              :value="dict.value * 1" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="公户/私户" prop="isPrivateAcc">
-          <el-select v-model="form.isPrivateAcc" placeholder="请选择收款账户类型" disabled>
-            <el-option label="对私账户" :value="1" />
-            <el-option label="对公账户" :value="2" />
-          </el-select>
-        </el-form-item>
         <el-form-item label="手机号码" prop="payeeMobile">
           <el-input v-model="form.payeeMobile" placeholder="请输入收款人手机号" />
         </el-form-item>
         <el-form-item label="金额" prop="amount">
           <el-input-number style="width: 100%" v-model="form.amount" :precision="2" :step="0.1" placeholder="请输入支付金额" />
         </el-form-item>
+        <el-form-item label="支付类型" prop="payTitle">
+          <el-select v-model="form.payTitle" placeholder="请选择支付类型">
+            <el-option v-for="dict in dict.type.pay_type_title" :key="dict.value" :label="dict.label"
+              :value="dict.value" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="备注" prop="payRemark">
           <el-input v-model="form.payRemark" placeholder="请输入支付备注" />
         </el-form-item>
+        <el-row>
+          <el-col :offset="4" :span="20">
+            <el-alert title="备注内容将展示在收款人的备注中;" type="warning">
+            </el-alert>
+          </el-col>
+        </el-row>
+        <!-- <el-form-item label="收款账户类型" prop="payeeAccType">
+          <el-select v-model="form.payeeAccType" placeholder="请选择收款账户类型" disabled>
+            <el-option v-for="dict in dict.type.payee_acc_type" :key="dict.value" :label="dict.label"
+              :value="dict.value * 1" />
+          </el-select>
+        </el-form-item> -->
+        <!-- <el-form-item label="公户/私户" prop="isPrivateAcc">
+          <el-select v-model="form.isPrivateAcc" placeholder="请选择收款账户类型" disabled>
+            <el-option label="对私账户" :value="1" />
+            <el-option label="对公账户" :value="2" />
+          </el-select>
+        </el-form-item> -->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="addDetail">确 定</el-button>
@@ -144,6 +158,8 @@
           <!--          <div class="el-upload__tip" slot="tip">-->
           <!--            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据 -->
           <!--          </div>-->
+          <span style="line-height: 28px;">每次最大批量转账条数为一千条;</span>
+          <br />
           <span>仅允许导入xls、xlsx格式文件。</span>
           <a style="color:#1890ff;margin:0px;line-height:14px" class="download" download="收款人明细模板" href="/收款人明细模板.xlsx"
             target="_blank">下载模板</a>
@@ -195,7 +211,7 @@ export default {
           { required: true, message: "支付类型不能为空", trigger: "blur" }
         ],
         batchPayName: [
-          { required: true, message: "支付名称不能为空", trigger: "blur" }
+          { required: true, message: "业务名称不能为空", trigger: "blur" }
         ],
         payerAccNo: [
           { required: true, message: "请选择付款账号", trigger: "blur" }
@@ -238,11 +254,19 @@ export default {
     };
   },
   mounted() {
+    this.getDicts("pay_type_title").then(response => {
+      this.batchForm.payTitle = response.data[0].dictValue;
+      this.$forceUpdate()
+    });
     if (this.$route.query.number) {
       this.defaultPayerAccNo = String(this.$route.query.number)
     }
   },
   methods: {
+    chaheuhashjs() {
+      console.log('当前选中的数据', this.batchForm);
+
+    },
     // 新增明细
     handleAdd() {
       if (this.transMap && this.transMap.size >= 1000) {

src/views/business/payOrder/index.vue

 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
-      <el-form-item label="支付名称" prop="batchPayName">
-        <el-input
-          v-model="queryParams.batchPayName"
-          placeholder="请输入支付名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+      <el-form-item label="流水号" prop="batchNo">
+        <el-input v-model="queryParams.batchNo" placeholder="流水号" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="业务名称" prop="batchPayName">
+        <el-input v-model="queryParams.batchPayName" placeholder="请输入支付名称" clearable
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="付款账户名" prop="payerAccName">
-        <el-input
-          v-model="queryParams.payerAccName"
-          placeholder="请输入付款账户名"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.payerAccName" placeholder="请输入付款账户名" clearable
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
-      <el-form-item label="付款账号" prop="payerAccNo">
-        <el-input
-          v-model="queryParams.payerAccNo"
-          placeholder="请输入付款账号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+      <el-form-item label="支付状态" prop="payStatus">
+        <el-select v-model="queryParams.payStatus" placeholder="请选择支付状态" @change="handleQuery" clearable>
+          <el-option v-for="dict in dict.type.pay_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
       </el-form-item>
-      <el-form-item label="流水号" prop="batchNo">
-        <el-input
-          v-model="queryParams.batchNo"
-          placeholder="流水号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+      <el-form-item label="付款账号" prop="payerAccNo">
+        <el-input v-model="queryParams.payerAccNo" placeholder="请输入付款账号" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="支付类型" prop="payTitle">
         <el-select v-model="queryParams.payTitle" placeholder="请选择支付类型" @change="handleQuery" clearable>
           <el-option v-for="dict in dict.type.pay_type_title" :key="dict.value" :label="dict.label"
-                     :value="dict.value" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="支付状态" prop="payStatus">
-        <el-select v-model="queryParams.payStatus" placeholder="请选择支付状态" @change="handleQuery" clearable>
-          <el-option v-for="dict in dict.type.pay_status" :key="dict.value" :label="dict.label"
-                     :value="dict.value" />
+            :value="dict.value" />
         </el-select>
       </el-form-item>
+
       <el-form-item label="支付备注" prop="payRemark">
-        <el-input
-          v-model="queryParams.payRemark"
-          placeholder="请输入支付备注"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.payRemark" placeholder="请输入支付备注" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -61,28 +38,27 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['business:payOrder:export']"
-        >导出</el-button>
+        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
+          v-hasPermi="['business:payOrder:export']">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="payOrderList" height="700px">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="支付名称" align="center" prop="batchPayName" />
-      <el-table-column label="付款账户" align="center" >
+      <el-table-column label="流水号" align="center" prop="batchNo" />
+      <el-table-column label="业务名称" align="center" prop="batchPayName" />
+      <el-table-column label="付款账户" align="center">
         <template slot-scope="scope">
           {{ scope.row.payerAccName }}
           <div>{{ scope.row.payerAccNo }}</div>
         </template>
       </el-table-column>
-      <el-table-column label="流水号" align="center" prop="batchNo" />
-      <el-table-column label="支付标题" align="center" prop="payTitle" />
+      <el-table-column label="支付状态" align="center" prop="payStatus">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.pay_status" :value="scope.row.payStatus" />
+        </template>
+      </el-table-column>
       <el-table-column label="详情预览" align="center">
         <template slot-scope="scope">
           <p style="margin: 0px;padding: 0px;">批次总笔数：{{ scope.row.totalCount }}</p>
@@ -95,45 +71,27 @@
           <p style="margin: 0px;padding: 0px;">服务费：{{ scope.row.transFee }}</p>
         </template>
       </el-table-column>
-      <el-table-column label="支付状态" align="center" prop="payStatus" >
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.pay_status" :value="scope.row.payStatus" />
-        </template>
-      </el-table-column>
       <el-table-column label="完成时间" align="center" prop="transactionTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.transactionTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="备注" align="center" prop="payRemark" />
+      <el-table-column label="支付类型" align="center" prop="payTitle" />
+      <el-table-column label="支付备注" align="center" prop="payRemark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-s-order"
-            @click="viewDetail(scope.row)"
-          >查看明细</el-button>
-          <el-button v-if="scope.row.payStatus && scope.row.payStatus === 4 || scope.row.payStatus === 5"
-            size="mini"
-            type="text"
-            icon="el-icon-s-promotion"
-            @click="doRepay(scope.row)"
-          >失败补发</el-button>
+          <el-button size="mini" type="text" icon="el-icon-s-order" @click="viewDetail(scope.row)">查看明细</el-button>
+          <el-button v-if="scope.row.payStatus && scope.row.payStatus === 4 || scope.row.payStatus === 5" size="mini"
+            type="text" icon="el-icon-s-promotion" @click="doRepay(scope.row)">失败补发</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
     <el-dialog title="失败补发" :visible.sync="rePayPanel" width="90%" append-to-body class="dialogIp">
-      <RePay ref="rePay" :batch-info="rePayObj" @closeRePayPanel="closeRePayPanel"/>
+      <RePay ref="rePay" :batch-info="rePayObj" @closeRePayPanel="closeRePayPanel" />
       <div slot="footer" class="dialog-footer">
         <el-button @click="closeRePayPanel">关 闭</el-button>
       </div>
@@ -230,7 +188,7 @@ export default {
       }, `payOrder_${new Date().getTime()}.xlsx`)
     },
     viewDetail(row) {
-      this.$router.push({ path: "/business/payDetails", query: {orderId : row.id, batchNo: row.batchNo} });
+      this.$router.push({ path: "/business/payDetails", query: { orderId: row.id, batchNo: row.batchNo } });
     },
     doRepay(row) {
       if (row.id) {
@@ -252,7 +210,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.dialogIp ::v-deep{
+.dialogIp ::v-deep {
   .el-dialog__body {
     padding: 0 !important;
   }