renli-pc/src/pages/eashier/noArrears/components/cancelArrears.vue

<template>
  <div>
    <el-dialog
      title="取消欠款"
      :visible.sync="dialogFormVisible"
      width="70%"
      :close-on-click-modal="false"
      v-dialogDrag
      append-to-body
    >
      <div>
        <el-form :model="form" :inline="true" label-width="80px">
          <el-form-item label="手机号码:">
            <div class="form-width-ms flex">
              <el-input oninput="this.value=this.value.replace(/\D/g,'')" placeholder="请输入会员手机号" style="height:100%" pattern="[0-9]*" maxlength="11" v-model="queryForm.mobilePhone" @change.native.stop="query">
                <el-button size="mini" slot="append" icon="el-icon-search"  @click="openMember"></el-button>
              </el-input>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :header-cell-style="{
          background: 'linear-gradient(#6cb3ff, #1873d4)',
          color: '#eeeeee',
        }"
        :data="list"
        :element-loading-text="elementLoadingText"
        v-loading="loading"
        max-height="600"
      >
        <el-table-column
          show-overflow-tooltip
          prop="memberName"
          align="center"
          min-width="100"
          label="会员名称"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="mobilePhone"
          align="center"
          min-width="100"
          label="手机号码"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="storeNum"
          align="center"
          min-width="100"
          label="门店编码"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="storeName"
          align="center"
          min-width="100"
          label="门店名称"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="docNum"
          align="center"
          min-width="100"
          label="单号"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="docDate"
          align="center"
          min-width="100"
          label="时间"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="docType"
          align="center"
          min-width="100"
          label="类型"
        >
        <template slot-scope="scope">
          <span>{{ scope.row.docType=='card_recharge'?'正常充值':scope.row.docType=='card_use'?'疗程':scope.row.docType=='card_change'?'加价转疗程':scope.row.docType=='promotion_card_use'?'疗程促销':'暂无' }}</span>
        </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="tradeName"
          align="center"
          min-width="100"
          label="名称"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="tradeMoney"
          align="center"
          min-width="100"
          label="成交金额"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="debtMoney"
          align="center"
          min-width="100"
          label="欠款"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          min-width="100"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="cancel(scope.row)"
              >取消欠款</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="queryForm.pageNum"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <span slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          type="primary"
          plain
          @click="dialogFormVisible = false"
          >取 消</el-button
        >
      </span>
    </el-dialog>
    <cancel ref="cancel"></cancel>
    <member ref='member' @memberData="memberData"/>
  </div>
</template>

<script>
import cancel from "../../../../components/repayment/components/cancel.vue";
import { debtPage,storeMemberOne } from "@/api/eashier.js";
import { organizations } from "@/api/storeManage.js";
import member from "@/components/member/index";
export default {
  components: { cancel,member },
  data() {
    return {
      form:{},
      dialogFormVisible: false,
      layout: "total, sizes, prev, pager, next, jumper",
      elementLoadingText: "加载中",
      total: 0,
      list: [],
      loading: false,
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        mobilePhone:""
      },
      options:[]
    };
  },
  watch:{
    dialogFormVisible:{
      handler(show){
        if(show){
          this.queryForm.mobilePhone = ''
          this.list = []
        }
      },
      immediate:true
    }
  },
  methods: {
    memberData(v){
      this.queryForm.memberId = v.id
      this.init()
    },
    openMember(){
      this.$refs.member.show({})
    },
    query(){
      let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      console.log(myreg.test(this.queryForm.mobilePhone))
      if (myreg.test(this.queryForm.mobilePhone)){
        let params = {
          mobilePhone:this.queryForm.mobilePhone,
          storeId: sessionStorage.getItem("parentId"),
        }
        storeMemberOne(params).then(res=>{
          if(res.code == "000000"){
            this.queryForm.memberId = res.data.memberId
            this.init()
          }else{
            this.$message.warning({
                message: res.message,
            });
          }
        })
      }else{
        this.$message.info({
          message: "请输入正确的手机号 ! ",
        });
      }
    },
    getOption(){
      organizations({ pageSize: 999 }).then((res) => {
        if (res.code == "000000") {
          res.rows.forEach((item) => {
            item.label = item.storeNum + "-" + item.storeName;
          });
          this.options = res.rows;
        } else {
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
    handleCurrentChange(current) {
      this.queryForm.pageNum = current;
      this.init()
    },
    handleSizeChange(size) {
      this.queryForm.pageSize = size;
      this.init()
    },
    cancel(row) {
      delete row.adminList;
      delete row.entities;
      delete row.managerList;
      delete row.docDate;
      delete row.adminList;
      row.debtId = row.id

      for(let k in row){
        if(!row[k]){
            delete row[k]
        }
      }
      this.$refs.cancel.show(row);
    },
    init() {
      this.loading = true
      let params = {
        ...this.queryForm,
        state: 0,
        storeId: sessionStorage.getItem("storeId"),
      };
      debtPage(params).then((res) => {
        this.loading = false
        if (res.code == "000000"){
         this.list = res.pageInfo.list;
         this.total = res.pageInfo.total
        }
      });
    },

  },
  watch:{
    dialogFormVisible:{
      handler(show){
        if(show){
          this.queryForm= {
            pageNum: 1,
            pageSize: 10,
          },
          this.init()
        }
      },
      immediate:true
    }
  },
  created() {
    // this.getOption()
    // this.init()
  },
};
</script>
 
<style scoped>
.right{
  display: flex;
  justify-content: flex-end;
}
</style>