提现申请功能开发

src/api/distribution/Withdrawl.js

@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+// 分页查询
+export const pageList = (query) => {
+  return request({
+    url: '/member/marketWithdrawLog/pageList',
+    method: 'get',
+    params: query
+  })
+}
+
+//  导出
+export function downOrderListXls(params) {
+  return request({
+    url: '/member/marketWithdrawLog/exportExcel',
+    method: 'get',
+    responseType: 'blob',
+    params
+  });
+}
+// 上传打款凭证
+export const withdrawAudit = (data) => {
+  return request({
+    url: '/member/marketPersons/withdrawAudit',
+    method: 'post',
+    data: data
+  })
+}

src/views/distribution/withdrawalApp/dialog/imgAduit.vue

@@ -0,0 +1,267 @@
+<!--
+ * @Description: 打款凭证弹框
+-->
+<template>
+  <el-dialog :title="title" :visible.sync="open" width="600" append-to-body :close-on-click-modal="false"
+    @close="cancel">
+    <div class="dialog" v-if="form">
+      <div v-loading="loading" element-loading-text="加载详情中...">
+        <!-- 对公支付信息 -->
+        <el-form :model="form" ref="form" :rules="rules" label-width="120px">
+          <el-form-item label="打款凭证：" prop="voucherImg">
+              <el-upload
+                ref="upload"
+                list-type="picture-card"
+                :limit="2"
+                :file-list="form.voucherImg"
+                :action="uploadObj.url"
+                :headers="uploadObj.headers"
+                :before-upload="beforeAvatarUpload" 
+                :on-success="handleAvatarSuccess"
+                :on-progress="handleAvatarProgress" 
+                :disabled="actionUrlLoading" 
+                :on-error="handleAvatarError"
+                :on-remove="handleRemove"
+              >
+                <i class="el-icon-plus"></i>
+              </el-upload>
+              <!-- <div style="width: 100px; height: 100px;margin-top: 5px;" v-if="!form.voucherImg || form.voucherImg.length < 15"
+                v-loading="actionUrlLoading" element-loading-text="上传中..." element-loading-spinner="el-icon-loading"
+                element-loading-background="rgba(0, 0, 0, 0.8)">
+                <el-upload 
+                 class="avatar-uploader" 
+                  :action="uploadObj.url" 
+                  :headers="uploadObj.headers"
+                  :show-file-list="false" 
+                  :before-upload="beforeAvatarUpload" 
+                  :on-success="handleAvatarSuccess"
+                  :on-progress="handleAvatarProgress" 
+                  :disabled="actionUrlLoading" 
+                  :on-error="handleAvatarError">
+                  <i class="el-icon-plus"></i>
+                </el-upload>
+              </div> -->
+          </el-form-item>
+          <el-form-item label="备注:" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="handleWithdrawAudit()" :loading="loading">
+        <span v-if="loading">提交中...</span>
+        <span v-else>保存</span>
+      </el-button>
+    </span>
+
+  </el-dialog>
+</template>
+
+<script>
+// import { getSelectById, updateCorporateApi } from '@/api/order/groupBuyingMr'
+import { 
+  withdrawAudit
+} from '@/api/distribution/Withdrawl'
+import { getToken } from "@/utils/auth";
+export default {
+  name: "imgAduit",
+  data() {
+    return {
+      title: "上传打款凭证",
+      model: "EDIT",
+      open: false,
+      loading: false,
+      form: {
+        withdrawLogId: undefined,
+        voucherImg: [],
+        remark: null,
+      },
+      rules: {
+        voucherImg: [{ required: true, message: "请上传凭证", trigger: ["change","blur"] }],
+        remark: [
+          { required: true, message: '请输入备注', trigger: ['change','blur' ]}
+        ],
+      },
+      loading_form: false,//  加载表单
+      uploadObj: {
+        url: process.env.VUE_APP_UPLOAD_FILE_API + "/upload/single/minio",
+        Headers: { Authorization: "Bearer " + getToken() },
+      },
+      actionUrlLoading:false,
+    };
+  },
+  methods: {
+    // 打开弹框
+    async openDialog(title, obj) {
+      this.title = title
+      this.open = true;
+      if(obj.voucherImg){
+        if(obj.voucherImg.indexOf(',') > -1){
+          let img_list = obj.voucherImg.split(',');
+          let img_list_new = [];
+          img_list.forEach((item, index) => {
+            img_list_new.push({
+              url: item,
+            })
+          });
+          this.$set(this.form, 'voucherImg', img_list_new);
+        } else {
+          this.$set(this.form, 'voucherImg', [{url: obj.voucherImg}]);
+        }
+      } else {
+        this.$set(this.form, 'voucherImg', []);
+      }
+      this.$set(this.form, 'withdrawLogId', obj.id);
+      this.$set(this.form, 'remark', obj.remark);
+      this.$nextTick(() => {
+        this.$refs["form"].clearValidate();
+      });
+    },
+    /** 保存打款凭证 */
+    async handleWithdrawAudit() { 
+      this.$refs["form"].validate(async (valid) => {
+        if (valid) {
+          try {
+            if(this.form.voucherImg.length==0) {
+              this.$message.error("请上传打款凭证!");
+            }
+            this.loading = true
+            let param = JSON.parse(JSON.stringify(this.form))
+            let imgStr = ''
+            if(param.voucherImg.length != 0){
+              param.voucherImg.forEach((item, index) => {
+                if(index < param.voucherImg.length - 1) {
+                  imgStr += item.url + ","
+                } else {
+                  imgStr += item.url
+                }
+              })
+            }
+            param.voucherImg = imgStr
+            console.log(param,'param111')
+            let res = await withdrawAudit(param)
+            if(res.code == 200) {
+              this.$message.success("操作成功!");
+              this.loading = false
+              this.$emit("getList");
+              this.cancel()
+            }else {
+              this.loading = false
+            }
+          } catch (error) {
+            console.error(error)
+            this.loading = false
+          }
+        }
+      })
+    },
+    cancel() {
+      this.open = false;
+    },
+    /**  上传图片 单张  */
+    handleAvatarSuccess(response, file, fileList) {
+      console.log("res, file",response, file, fileList)
+      this.actionUrlLoading = false
+      if(response.code == 200) {
+        this.form.voucherImg.push({url: response.data.url})
+      }
+      this.$refs.form.validateField('voucherImg')
+    },
+    beforeAvatarUpload(file) {
+      const isLt2M = file.size / 1024 / 1024 <= 100;
+      let testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
+      let typeList = ['png','jepg','jpg','gif']
+      const isJPG = typeList.includes(testmsg);
+      if (!isJPG) {
+        this.$message.error(`上传图片图片只能是 ${typeList} 格式!`);
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片图片大小不能超过 100MB!');
+      }
+      return isJPG && isLt2M;
+    },
+    handleAvatarProgress(){
+      this.actionUrlLoading = true
+    },
+    handleAvatarError() {
+      this.actionUrlLoading = false
+    },
+    handleRemove(file, fileList) {
+      console.log(file,'qqq');
+      this.form.voucherImg.forEach((item, index) => {
+        if(item.url == file.url){
+          this.form.voucherImg.splice(index, 1)
+        }
+      })
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog {
+  width: 100%;
+}
+.dialog {
+  padding: 0 30px;
+  .upload-btn {
+    width: 100px;
+    height: 100px;
+    background-color: #fbfdff;
+    border: dashed 1px #c0ccda;
+    border-radius: 5px;
+    i {
+      font-size: 30px;
+      margin-top: 20px;
+    }
+    &-text {
+      margin-top: -10px;
+    }
+  }
+  .avatar {
+    cursor: pointer;
+  }
+  .title-class{
+    font-size: 16px;
+    font-weight: bold;
+    color: black;
+    margin-bottom: 20px;
+    margin-top: 20px;
+  }
+  .item-class{
+    margin-bottom: 20px;
+  }
+}
+
+.voucher-list{
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24rpx;
+}
+.pay-type-remark{
+  margin:14px 0;
+}
+
+.dialog-bbb {
+  width: 100%;
+  display: flex;
+  --widdd: 700px;
+
+  >div:first-child {
+    width: var(--widdd);
+    flex-shrink: 0;
+    overflow-y: auto;
+    padding: 0 0 10px 0;
+    margin-right: 10px;
+  }
+
+  .dialog-bbb_2 {
+    width: calc(100% - var(--widdd));
+    height: 100%;
+  }
+}
+
+</style>

src/views/distribution/withdrawalApp/index.vue

@@ -0,0 +1,357 @@
+<template>
+  <div class="app-container withdrawalApp-table" :style="{'--q-height':qHeight}">
+    <div class="app-container-query" ref="queryFormBox">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+        <el-form-item label="分销商名称">
+          <el-input
+            v-model="queryParams.personName"
+            placeholder="请输入分销商名称"
+            clearable
+            style="width: 220px;"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="真实名称">
+          <el-input
+            v-model="queryParams.salePerson"
+            placeholder="请输入真实名称"
+            clearable
+            style="width: 220px;"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="打款状态">
+          <el-select
+            v-model="queryParams.voucherStatus"
+            placeholder="打款状态"
+            clearable
+            style="width: 140px"
+          >
+            <el-option
+              v-for="dict in statusList"
+              :key="dict.value"
+              :label="dict.name"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="申请时间">
+          <el-date-picker
+            style="width: 240px"
+            v-model="dateRange"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    
+    <div class="app-container-table-box">
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="3">
+          <el-button
+            type="primary"
+            size="mini"
+            icon="el-icon-download"
+            @click="handleExport"
+            v-hasPermi="['withdrawalApp:export']"
+            v-loading.fullscreen.lock="handleExportLoading"
+            element-loading-text="正在拼命生成数据中..."
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.5)"
+          >导出excel</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+      <div class="app-container-table-info">
+        <el-table ref="tables" v-loading="loading" height="100%" :data="dataList" border>
+          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
+          <el-table-column label="分销商名称" align="center" prop="personName"  width="100" />
+          <el-table-column label="分销商类型" align="center" prop="type" width="100" >
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.distribution_type" :value="scope.row.personType"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="真实姓名" align="center" prop="realName" />
+          <el-table-column label="开户行" align="center" prop="bankName" />
+          <el-table-column label="银行卡号" align="center" prop="bankNo" />
+          <el-table-column label="申请金额" align="center" prop="realPrice" />
+          <el-table-column label="申请时间" align="center" prop="createTime" width="160" />
+          <el-table-column label="打款状态" align="center" prop="voucherStatus">
+            <template slot-scope="scope">
+              {{ scope.row.voucherStatus === 1 ? '已打款':'未打款' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="打款凭证" align="center" prop="voucherImg" >
+            <template slot-scope="scope">
+            <el-button type="text" @click="seeCenter(scope.row, 'img')">查看</el-button>
+          </template>
+          </el-table-column>
+          <el-table-column label="备注" align="center" prop="remark" />
+          <el-table-column label="提现到账时间" align="center" prop="queryTime"  width="160" />
+          <el-table-column label="操作人" align="center" prop="auditUserName" />
+          <el-table-column label="操作" align="center" width="180" fixed="right" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <!-- <el-button
+                size="mini"
+                type="text"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['withdrawalApp:withdrawalApp:edit']"
+              >修改</el-button> -->
+              <el-button
+                size="mini"
+                type="text"
+                v-if="scope.row.voucherStatus === 0"
+                @click="withdrawImgAudit(scope.row)"
+                v-hasPermi="['withdrawalApp:add']"
+              >上传打款凭证</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                v-if="scope.row.voucherStatus === 1"
+                @click="withdrawImgAudit(scope.row)"
+                 v-hasPermi="['withdrawalApp:edit']"
+              >修改打款凭证</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"
+        />
+      </div>
+    </div>
+
+    <!--  修改凭证  -->
+    <imgAduit ref="imgAduit" @getList="getList" />
+
+    
+    <el-dialog
+      title="查看凭证"
+      :visible.sync="visibleStatus"
+      width="600px"
+      :destroy-on-close="true"
+      :close-on-click-modal="false"
+    >
+      <div v-if="visibleType == 'img'">
+        <el-image
+          style="width: 260px; height: 100%;margin: 0 5px;"
+          v-for="(item, index) in newObj.contractImgList"
+          :key="index"
+          :src="item"
+          :preview-src-list="newObj.contractImgList"
+          fit="cover"
+        />
+      </div>
+      <!-- <div v-if="visibleType == 'html'">
+        <div v-html="newObj.centent"></div>
+      </div> -->
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="visibleStatus = false">确 定</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+
+import { 
+  pageList, 
+  downOrderListXls,
+  withdrawAudit
+} from '@/api/distribution/Withdrawl'
+import imgAduit from "./dialog/imgAduit.vue";
+import { exportExcel } from '@/utils/exportexcel'
+// import html2canvas from 'html2canvas'
+
+export default {
+  name: "WithdrawalApp",
+  dicts: ['distribution_type'],
+  components: { imgAduit },
+  data() {
+    return {
+      qHeight: '0px',
+      resizeObserver: null,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      dataList: null,
+      // 弹出层标题
+      title: "",
+
+      // 是否显示弹出层
+      open: false,
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        // type: undefined
+      },
+      statusList: [
+        {id: 1, name: '未打款', value: 0},
+        {id: 2, name: '已打款', value: 1},
+      ],
+      handleExportLoading: false,
+      visibleStatus: false,
+      newObj: {},
+      visibleType: ''
+    };
+  },
+  created() {
+    this.getList();
+  },
+  mounted() {
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        const { width, height } = entry.contentRect;
+        this.qHeight = height + 'px'
+      }
+    });
+    this.resizeObserver.observe(this.$refs.queryFormBox);
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.dataList = []
+      this.loading = true;
+      if(this.dateRange && this.dateRange.length > 0){
+        this.queryParams.beginDate = this.dateRange[0];
+        this.queryParams.endDate = this.dateRange[1];
+      } else {
+        if(this.queryParams.beginDate) {
+          delete this.queryParams.beginDate
+          delete this.queryParams.endDate
+        }
+      }
+      // this.queryParams.time
+      pageList(this.queryParams)
+      .then(response => {
+          let list = response.data.rows
+          list.forEach(item =>{
+            item.switchValue = item.status;
+          })
+          this.dataList = list
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      ).catch(()=>{
+        this.dataList = []
+        this.loading = false;
+      })
+    },
+    // 打款凭证
+    withdrawImgAudit(row) {
+      this.$refs["imgAduit"].openDialog("打款凭证", row);
+    },
+    /** 查看按钮操作 */
+    seeCenter(obj, type) {
+      this.visibleStatus = true
+      this.visibleType = type;
+      this.newObj = obj;
+      if(obj.voucherImg){
+        this.newObj.contractImgList = obj.voucherImg.split(',')
+      }
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.$set(this.queryParams, 'personName', '');
+      // this.$set(this.queryParams, 'time', []);
+      this.$set(this.queryParams, 'voucherStatus', '');
+      this.$set(this.queryParams, 'salePerson', '');
+      this.queryParams.pageNum = 1;
+      this.handleQuery();
+    },
+   
+    // 导出报表
+     handleExport() {
+      this.$confirm('您确定要导出当前查询的数据吗？', '提示', {
+        confirmButtonText: '确定 ',
+        cancelButtonText: '取消 ',
+        type: 'warning'
+      })
+        .then(() => {
+          this.handleExportLoading = true;
+          // const { pageNum, pageSize} = this.params;
+          let postMap = {}
+          if(this.queryParams.time && this.queryParams.time.length > 0){
+            this.queryParams.beginDate = this.queryParams.time[0];
+            this.queryParams.endDate = this.queryParams.time[1];
+          } else {
+            if(this.queryParams.beginDate){
+              delete this.queryParams.beginDate
+              delete this.queryParams.endDate
+            }
+          }
+          let params = JSON.parse(JSON.stringify(this.queryParams))
+          for (let key in params) {
+            if(key != 'pageNum' && key != 'pageSize' && key != 'time' && key != 'personName' && key != 'salePerson' && key != 'voucherStatus'){
+              postMap[key] = params[key]
+            }
+          }
+          downOrderListXls(postMap)
+            .then((res) => {
+              exportExcel(res, '提现申请', '.xlsx');
+              this.handleExportLoading = false;
+            })
+            .catch((error) => {
+              // console.log("error===",error)
+              this.handleExportLoading = false;
+            });
+        })
+        .catch(() => {
+          this.$message.info('您已取消导出！');
+        });
+    },
+  },
+  beforeDestroy() {
+    this.resizeObserver.unobserve(this.$refs.queryFormBox);
+    this.resizeObserver.disconnect();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  height: calc( 100vh - 110px );
+  box-sizing: border-box;
+}
+.app-container-table-box {
+  height: calc( 100% - var(--q-height) );
+  .app-container-table-info {
+    height: calc( 100% - 100px );
+  }
+}
+</style>