账户余额提现增加银行卡选择

src/views/FinancialManagement/AcountWithdrawal/AcountBalance.vue

@@ -1,106 +1,67 @@
 <template>
   <div>
-    <Split :gutterSize="2" style="height: calc(100vh - 120px)">
-      <!-- 左侧树Start -->
-      <SplitArea :size="leftSplitWidth" :minSize="240">
-        <div>
-          <el-divider></el-divider>
-          <tree
-            :setting="ztreeSetting"
-            :nodes="ztreeNodes"
-            @onClick="onZTreeClick"
-            @onCreated="onZTreeCreated"
-          />
-        </div>
-      </SplitArea>
-      <!-- 左侧树End -->
-      <!-- 右侧列表页面Start -->
-      <SplitArea :size="rightSplitWidth">
-        <div class="queryFrom" title="检索区">
-          <el-form ref="queryFormRef" :model="pageRequest" label-width="80px">
-            <el-row>
-              <el-col :span="5">
-                <el-form-item label="工号">
-                  <el-input
-                    clearable
-                    size="small"
-                    placeholder="工号"
-                    v-model="pageRequest.userId"
-                  ></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :span="5">
-                <el-form-item label="机构名称">
-                  <el-cascader
-                    class="widths"
-                    size="small"
-                    :options="institutionOptions"
-                    v-model="pageRequest.deptId"
-                    :props="{
-                      checkStrictly: true,
-                      value: 'id',
-                      label: 'name',
-                    }"
-                    @change="handleChange"
-                    clearable
-                  ></el-cascader>
-                </el-form-item>
-              </el-col>
-              <el-col :span="4">
-                <el-form-item label-width="20px">
-                  <el-button @click="queryBalance" type="primary" size="small"
-                    >查询</el-button
-                  >
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-        </div>
-        <kt-common-table
-          :showBatchDelete="false"
-          :showSysUserAccountCardList = "true"
-          :showBatchPrint="false"
-          :showOperation="true"
-          :data="pageResult"
-          :columns="columns"
-          @findPage="queryBalance"
-          :isshowpagination="true"
-          button2Name="提现"
-          button2Background="#409eff"
-          permsButton1="expenseManagement:expenseRequest:details"
-          @handleButton2="withdraw"
-        >
-        </kt-common-table>
-      </SplitArea>
+    <!-- 右侧列表页面Start -->
+    <SplitArea :size="rightSplitWidth">
+      <div class="queryFrom" title="检索区">
+        <el-form ref="queryFormRef" :model="pageRequest" label-width="80px">
+          <el-row>
+            <el-col :span="5">
+              <el-form-item label="工号">
+                <el-input clearable size="small" placeholder="工号" v-model="pageRequest.userId"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="姓名">
+                <el-input clearable size="small" placeholder="姓名" v-model="pageRequest.userName"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="机构名称">
+                <el-cascader class="widths" size="small" :options="institutionOptions" v-model="pageRequest.deptId"
+                  :props="{
+                    checkStrictly: true,
+                    value: 'id',
+                    label: 'name',
+                  }" @change="handleChange" clearable></el-cascader>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label-width="20px">
+                <el-button @click="queryBalance" type="primary" size="small">查询</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <kt-common-table :showBatchDelete="false" :showSysUserAccountCardList="true" :showBatchPrint="false"
+        :showOperation="true" :data="pageResult" :columns="columns" @findPage="queryBalance" :isshowpagination="true"
+        button2Name="提现" button2Background="#409eff" @handleButton2="withdrawButton">
+      </kt-common-table>
+    </SplitArea>
     </Split>
     <div class="popupBox">
-      <el-dialog
-        :visible.sync="dialogVisible"
-        title="提现"
-        @close="dialogVisible = false"
-      >
-        <el-select v-model="selectedValue" placeholder="请选择提现费用">
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option>
-        </el-select>
-        <el-input
-          v-model="amount"
-          placeholder="请输入提现金额"
-          style="margin-top: 20px"
-        ></el-input>
-        <el-input
-          v-model="fromBankCardId"
-          placeholder="请输入提现银行卡号"
-          style="margin-top: 20px"
-        ></el-input>
+      <el-dialog :visible.sync="dialogVisible" title="提现" @close="dialogVisible = false" width="40%">
+        <el-form ref="form" :model="withdrawForm" label-width="100px">
+          <el-form-item label="提现费用" >
+            <el-select v-model="withdrawForm.amountStatus" placeholder="请选择提现费用" style="width: 300px;">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="提现金额">
+            <el-input v-model="withdrawForm.amount" placeholder="请输入提现金额" style="width: 300px;"></el-input>
+          </el-form-item>
+          <el-form-item label="银行卡">
+            <el-select clearable filterable   v-model="withdrawForm.fromBankCardId" placeholder="请选择银行卡" style="width: 300px;">
+              <el-option v-for="(item, index) in sysUserAccountCardList" :key="index"
+                :label="item.bankNumber + '-' + item.bankAccount" :value="item.bankNumber">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
         <span slot="footer" class="dialog-footer">
-          <el-button @click="dialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="handleConfirm">确 定</el-button>
+          <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+          <el-button size="small" type="primary" @click="handleConfirm">确 定</el-button>
         </span>
       </el-dialog>
     </div>
@@ -118,12 +79,14 @@ export default {
   },
   data() {
     return {
+      withdrawForm: {
+        userId: "",
+        amountStatus: "",
+        amount: "",
+        fromBankCardId: "",
+      },
       //提现弹窗相关
       dialogVisible: false, //弹窗是否出现
-      selectedValue: "", //提现类型
-      amount: "", //体现金额
-      userId: "", //提现id
-      fromBankCardId: "", //提现银行卡号
       options: [
         { value: "1", label: "手续费佣金" },
         { value: "2", label: "非跟单佣金" },
@@ -178,6 +141,9 @@ export default {
         { prop: "documentary", label: "非跟单费", minWidth: 100 },
         { prop: "promotion", label: "分销费 （推广费）", minWidth: 100 },
         { prop: "zgCoin", label: "掌柜币", minWidth: 100 },
+        { prop: "zgCoinAmountWithdrawal", label: "掌柜币提现总金额", minWidth: 100 },
+        { prop: "zgCoinAmountAccount", label: "掌柜币已到账金额", minWidth: 100 },
+        { prop: "zgCoinAmountPayment", label: "掌柜币支付中金额", minWidth: 100 },
         {
           prop: "handlingAmountWithdrawal",
           label: "手续费提现总金额",
@@ -224,7 +190,7 @@ export default {
           minWidth: 120,
         },
       ],
-      secondarycolumn:[
+      secondarycolumn: [
         {
           prop: "bankAccount", label: "银行", minWidth: 160
         },
@@ -234,7 +200,8 @@ export default {
         {
           prop: "bankNumber", label: "银行卡号", minWidth: 160
         }
-      ]
+      ],
+      sysUserAccountCardList: [],
     };
   },
   created() {
@@ -256,23 +223,18 @@ export default {
     //体现操作
     handleConfirm() {
       this.dialogVisible = false;
-      let data = {};
-      data.userId = this.userId;
-      data.amountStatus = this.selectedValue;
-      data.amount = this.amount;
-      data.fromBankCardId = this.fromBankCardId;
-      this.$api.dept.withdraw(data).then((res) => {
+      this.$api.dept.withdraw(this.withdrawForm).then((res) => {
         if (res.code == 200) {
+          this.queryBalance();
           this.$message({
-            showClose: true,
+            message:'success',
             message: "提现成功",
           });
-        }else{
+        } else {
           this.$message({
-          showClose: true,
-          message: res.msg,
-          type: 'error'
-        });
+            message: res.msg,
+            type: 'error'
+          });
         }
         (this.userId = ""),
           (this.selectedValue = ""),
@@ -281,9 +243,10 @@ export default {
       });
     },
     //提现条件
-    withdraw(index) {
-      let row = index.row;
-      this.userId = row.userId;
+    withdrawButton({ index, row }) {
+      this.sysUserAccountCardList = [];
+      this.withdrawForm.userId = row.userId;
+      this.sysUserAccountCardList = row.sysUserAccountCardList;
       this.dialogVisible = !this.dialogVisible;
     },
     //联级选择器触发事件
@@ -317,32 +280,32 @@ export default {
         });
     },
     /**Split 开始 */
-    changeTreeWidth(widthVal){
-        // 初始化树的宽度
-        // this.leftSplitWidth = Math.ceil(widthVal/this.$refs.elMain.$el.clientWidth*100);
-        // this.rightSplitWidth = 100-(this.leftSplitWidth)
-      },
-      /**Split 结束 */
+    changeTreeWidth(widthVal) {
+      // 初始化树的宽度
+      // this.leftSplitWidth = Math.ceil(widthVal/this.$refs.elMain.$el.clientWidth*100);
+      // this.rightSplitWidth = 100-(this.leftSplitWidth)
+    },
+    /**Split 结束 */
 
-      //--left tree start-------
-      findLeftTreeData: function() {
-        // 获取数据
-        this.$api.dept.findTree().then(res => {
-          this.ztreeNodes = res.data;
-        });
-      },
-      onZTreeCreated: function(ztreeObj) {
-        this.ztreeObj = ztreeObj;
-        // onCreated 中操作ztreeObj对象展开第一个节点
-        ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
-        this.currentTreeNode=ztreeObj.getNodes()[0];
-      },
-      onZTreeClick: function(evt, treeId, treeNode) {
-        // 点击事件
-        this.currentTreeNode = treeNode;
-        this.pageRequest.deptId = this.currentTreeNode.id;
-        this.queryBalance();
-      },
+    //--left tree start-------
+    findLeftTreeData: function () {
+      // 获取数据
+      this.$api.dept.findTree().then(res => {
+        this.ztreeNodes = res.data;
+      });
+    },
+    onZTreeCreated: function (ztreeObj) {
+      this.ztreeObj = ztreeObj;
+      // onCreated 中操作ztreeObj对象展开第一个节点
+      ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
+      this.currentTreeNode = ztreeObj.getNodes()[0];
+    },
+    onZTreeClick: function (evt, treeId, treeNode) {
+      // 点击事件
+      this.currentTreeNode = treeNode;
+      this.pageRequest.deptId = this.currentTreeNode.id;
+      this.queryBalance();
+    },
     //--left tree end-------
   },
 };
@@ -358,6 +321,7 @@ export default {
   margin: 15px;
   padding: 20px;
 }
+
 .queryFrom:before {
   content: attr(title);
   position: absolute;
@@ -370,12 +334,15 @@ export default {
 .queryFrom .el-row {
   margin: 10px 0px;
 }
+
 .queryFrom .el-form-item {
   margin-bottom: 0px;
 }
+
 .queryFrom .queryButton .el-form-item__content {
   margin-left: 0px !important;
 }
+
 /* 顶部查询条件样式End */
 .el-cascader {
   width: 100%;