vue-insagent-pc/src/views/FinancialManagement/WithdrawalManagement/WithdrawalProceduresPending.vue

<template>
  <div>
    <el-main ref="elMain" style="padding: 0px;">
      <el-row>
        <el-form
          :inline="true"
          :model="queryForm"
          class="demo-form-inline"
          label-width="130px"
          size="small"
        >
          <el-form-item label="业务员工号">
            <el-input v-model="queryForm.userId" placeholder="业务员工号" clearable></el-input>
          </el-form-item>
          <el-form-item label="业务员姓名">
            <el-input v-model="queryForm.userName" placeholder="业务员姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="queryForm.mobile" placeholder="电话" clearable></el-input>
          </el-form-item>
          <el-form-item label="提现单号">
            <el-input v-model="queryForm.id" placeholder="提现单号" clearable></el-input>
          </el-form-item>
          <el-form-item label="提现时间">
            <el-date-picker
              v-model="queryForm.date"
              type="datetimerange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="findPage">查询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <kt-common-table
        button2Type="text"
        button3Type="text"
        :showBatchDelete="false"
        :showBatchPrint="true"
        permsButton3="sys:withdrawalProceduresPending:examine"
        permsButton2="sys:withdrawalProceduresPending:examinepay"
        :data="pageResult"
        :columns="columns"
        @findPage="findPage"
        button3Name="审核并支付"
        @handleButton3="handleButton3"
        button2Name="审核提现"
        @handleButton2="handleButton2"
      ></kt-common-table>
      <el-dialog
      :visible.sync="dialogVisibleBatch"
      width="35%"
      :before-close="handleCloseBatch">
      <p >凭证号 ：<el-input style="width: 200px;" v-model="voucherId" placeholder="请输入凭证号"></el-input></p>
      <div style="display: flex">上传图片：  <el-upload
                action="#"
                :auto-upload="false"
                accept=".png, .jpg, .jpeg"
                :show-file-list="false"
                :on-change="drivingupload">
                <img v-if="qrCodeImage" :src="qrCodeImage"  class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisibleBatch = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handleSumbit()">确 定</el-button>
      </span>
    </el-dialog>
    </el-main>
  </div>
</template>
  <script>
import Cookies from "js-cookie";
import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
import KtButton from "@/views/Core/KtButton";
import CommonUtil from "@/utils/comutil.js";
export default {
  components: {
    KtCommonTable,
    KtButton
  },
  data() {
    return {
      dialogVisibleBatch:false,
      voucherId:'',
      qrCodeImage:'',
      picId:'',
      rowlist:{},
      // 右侧列表查询数据Start
      queryForm: {},
      pageResult: {},
      pageRequest: {
        //查询的默认条件
        pageNum: 1,
        pageSize: 10,
        auditingStatus: "2"
      },
      columns: [
        //数据列
        { prop: "id", label: "提现单号" },
        { prop: "userId", label: "业务员工号" },
        { prop: "userName", label: "业务员姓名" },
        { prop: "mobile", label: "电话" },
        { prop: "deptId", label: "机构代码" },
        { prop: "deptName", label: "机构名称" },
        { prop: "amount", label: "提现金额" },
        { prop: "surplusAmount", label: "账户余额" },
        { prop: "bankAddress", label: "开户行" },
        { prop: "bankAccount", label: "银行" },
        { prop: "bankNumber", label: "账号" },
        { prop: "createTime", label: "提现时间" }
      ],
    };
  },
  created() {
  },
  mounted() {},
  methods: {
    handlePrint(index, row) {
      this.$api.task.AmountReview(this.pageRequest).then(res => {
        console.log(res);
        let blob = new Blob([res], {
          type: "application/vnd.ms-excel"
        }); // 2.获取请求返回的response对象中的blob 设置文件类型，这里以excel为例
        let url = window.URL.createObjectURL(blob); // 3.创建一个临时的url指向blob对象
        // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
        let a = document.createElement("a");
        a.href = url;
        a.download = "提现待支付清单.xlsx";
        a.click();
        // 5.释放这个临时的对象url
        window.URL.revokeObjectURL(url);
      });
    },
    // 右侧列表的方法Start
    findPage(data) {
      // 获取分页数据
      let that = this;
      if (data && data.pageRequest) {
        this.pageRequest.pageNum = data.pageRequest.pageNum;
        this.pageRequest.pageSize = data.pageRequest.pageSize;
      }
      if (this.queryForm.date && this.queryForm.date.length>0) {
        this.queryForm.startTime = this.queryForm.date[0];
        this.queryForm.endTime = this.queryForm.date[1];
      } else {
        this.queryForm.startTime = "";
        this.queryForm.endTime = "";
      }
      that.$api.task
        .payqueryPage({ ...this.pageRequest, ...this.queryForm,amountStatus:'1' })
        .then(res => {
          if (res.code == 200) {
            that.pageResult = res.data;
          }
        })
        .then(data != null ? data.callback : "");
    },
    drivingupload(file) {
      let fileRaw = file.raw;
      this.qrCodeImage = window.URL.createObjectURL(fileRaw);
      const params = new FormData(); // 声明formData数据类型
      params.append("multipartFile", fileRaw);
      params.append("type", "image");
      this.$api.letter.uploadFile(params).then(res => {
        if (res.code == "200") {
          this.picId=res.data.id
        } else {
          this.$message({ message: res.msg, type: "warning" });
        }
      });
    },
    handleSumbit(){
      this.$api.task.AmountReview({ ...this.rowlist, status: '1',picId:this.picId,voucherId:this.voucherId }).then(res => {
          if (res.code == 200) {
            this.dialogVisibleBatch = false
            this.findPage();
            this.$message({
              type: "success",
              message: res.msg
            });
          }
          else {
            this.$message.error(res.msg)
          }
        })
    },
    handleButton2({ row, index }) {
      this.dialogVisibleBatch=true
      this.rowlist=row
      this.picId=''
      this.voucherId=''
      // this.$api.task.AmountReview(row).then(res => {
      //   if (res.code == 200) {
      //     this.$message({
      //       type: "success",
      //       message: res.msg
      //     });
      //     this.findPage();
      //   }
      // });
    },
    handleButton3({ row, index }) {
      let auditid = Cookies.get("user"); // 放置token到Cookie
      let auditname = Cookies.get("name"); // 放置token到Cookie
      this.$confirm("是否确认审核并线下支付？", "提示", {})
        .then(() => {
          var data = {
            applyno: row.applyno,
            applystatus: "2",
            auditid: auditid,
            auditname: auditname,
            paytime: this.formatTime(new Date().getTime(), "Y-M-D h:m:s")
          };
          this.$api.task.insPayApplyAudit(data).then(res => {
            this.dialogVisible = false;
            this.findPage(null);
            this.$message({
              type: "success",
              message: "已提交"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审核"
          });
        });
    },

    // 格式化日期，如月、日、时、分、秒保证为2位数
    formatNumber(n) {
      n = n.toString();
      return n[1] ? n : "0" + n;
    },
    // 参数number为毫秒时间戳，format为需要转换成的日期格式
    formatTime(number, format) {
      let time = new Date(number);
      let newArr = [];
      let formatArr = ["Y", "M", "D", "h", "m", "s"];
      newArr.push(time.getFullYear());
      newArr.push(this.formatNumber(time.getMonth() + 1));
      newArr.push(this.formatNumber(time.getDate()));

      newArr.push(this.formatNumber(time.getHours()));
      newArr.push(this.formatNumber(time.getMinutes()));
      newArr.push(this.formatNumber(time.getSeconds()));

      for (let i in newArr) {
        format = format.replace(formatArr[i], newArr[i]);
      }
      return format;
    }
  }
};
</script>
  
  
  <style scoped>
  .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
.avatar {
  border: 1px dashed #d9d9d9;
  padding: 5px;
  border-radius: 6px;
  width: 150px;
  height: 150px;
  display: block;
}
</style>