web-base-admin/src/views/financial/recharge/singleCz.vue

<template>
  <div class="page2">
    <div class="main">
      <el-form ref="form" :model="form" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item :label="'会员编号'">
              <el-input
                v-model="form.memberCode"
                clearable
                style="width: 200px"
                @blur="checkName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="'会员姓名'">
              <el-input
                v-model="form.memberName"
                clearable
                style="width: 200px"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button
              class="my_search"
              style="margin-left: 30px"
              @click="getList"
            >
              {{ '搜索' }}</el-button>
            <el-button class="my_reset" @click="reset">
              {{ '重置' }}</el-button>
          </el-col>
        </el-row>
        <!-- <el-form-item :label="'钱包类型'">
            <el-checkbox-group v-model="theaccountType">
              <el-checkbox
                @change="changeAccountType"
                v-for="item in enumsAccountList"
                :key="item.pkId"
                :label="item.pkId"
              >{{ item.accountName }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item> -->
        <!-- <el-form-item :label="'交款方式'">
            <el-checkbox-group v-model="form.paymentMethod">
              <el-checkbox
                v-for="item in paymentTypeList"
                :key="item.value"
                :label="item.value"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item> -->
        <div class="tableBox">
          <el-form-item :label="'充值方式'">
            <el-radio-group v-model="rechargeMethod">
              1
              <el-radio
                v-for="(item, index) in czWayList"
                :key="index"
                :label="item.value"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-table
            :data="tableData"
            class="thetables"
            height="500px"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
          >
            <el-table-column
              align="center"
              prop="memberCode"
              :label="'会员编号'"
              min-width="120px"
            />
            <el-table-column
              align="center"
              prop="memberName"
              :label="'会员姓名'"
              min-width="120px"
            />
            <el-table-column
              align="center"
              prop="paymentMethod"
              :label="'交款方式'"
              min-width="120px"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.paymentMethod"
                  clearable
                  :placeholder="'请选择'"
                >
                  <el-option
                    v-for="item in paymentTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-table-column>

            <el-table-column
              v-for="(item, index) in enumsAccountList"
              :key="index"
              min-width="150px"
              align="center"
              :prop="`${item.pkId}`"
              :label="
                item.pkTransactionKeyVal +
                  `${'变更'}(${getUser.currency.symbol})`
              "
            >
              <template slot-scope="scope">
                <!-- <el-input
                  v-model="scope.row.rechargeDetailMap[`${item.pkId}`]"
                  clearable
                  type="number"
                  :min="0"
                /> -->
                <el-input-number
                  v-model="scope.row.rechargeDetailMap[`${item.pkId}`]"
                  clearable
                  size="small"
                  :min="0"
                  :controls="false"
                />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="memberRemarks"
              :label="'备注(前台)'"
              min-width="120px"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.memberRemarks" />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              min-width="120px"
              prop="remarks"
              :label="'备注(后台)'"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
    </div>
    <div class="footer">
      <div style="margin: 0 auto">
        <el-button
          v-has-buttons="['ChongzhiConfirm']"
          type="primary"
          class="thebtn"
          @click="saveDate('form')"
        >
          {{ '确认' }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getenumsCzAccount,
  getpaymentType,
  getrechargeMethod,
  changeAccountType,
  getMemberName
} from '@/api/financial'
import { stateFormat } from '@/utils/numberToCurrency'
export default {
  name: 'Chongzhi',
  computed: {
    ...mapGetters(['getUser'])
  },
  data() {
    return {
      tableData: [],
      form: {
        memberCode: '', // 会员编号
        memberName: null, // 会员姓名
        rechargeDetailMap: {},
        paymentMethod: [] // 交款方式
      },
      rechargeMethod: 1, // 充值方式
      enumsAccountList: [], // 币种类型
      paymentTypeList: [], // 交款方式
      czWayList: [] // 充值方式
    }
  },
  created() {
    // 钱包类型
    this.getenumsCzAccount()
    // 交款方式
    this.getpaymentType()
    // 充值方式
    this.getrechargeMethod()
  },
  methods: {
    stateFormat,
    // 根据会员编号查询会员姓名
    checkName() {
      getMemberName({ memberCode: this.form.memberCode }).then((res) => {
        this.form.memberName = res.memberName
      })
    },
    getList() {
      changeAccountType({
        memberCode: this.form.memberCode,
        memberName: this.form.memberName
      }).then((res) => {
        res.data.forEach((ele) => {
          ele.rechargeDetailMap = {}
        })
        this.tableData = res.data
      })
    },
    reset() {
      this.form.memberCode = ''
      this.form.memberName = ''
      this.getList()
    },
    // 充值
    saveDate(formName) {
      if (!this.rechargeMethod) {
        this.$message({
          message: '请先选择充值方式',
          type: 'warning'
        })
        return
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let shouldTerminate = false

            this.tableData.forEach((ele) => {
              if (!ele.paymentMethod) {
                shouldTerminate = true
                this.$message({
                  message: '交款方式不能为空',
                  type: 'warning'
                })
                return
              }
            })

            if (!shouldTerminate) {
              this.$router.push({
                path: '/information/business/czzxqc',
                query: {
                  data: '',
                  czlx: 1,
                  detailParams: JSON.stringify(this.tableData),
                  rechargeMethod: this.rechargeMethod
                }
              })
            }
          }
        })
      }
    },

    getrechargeMethod() {
      getrechargeMethod().then((res) => {
        this.czWayList = res.data
      })
    },

    getpaymentType() {
      getpaymentType().then((res) => {
        this.paymentTypeList = res.data
      })
    },
    getenumsCzAccount() {
      getenumsCzAccount({ accountProperty: 1 }).then((res) => {
        this.enumsAccountList = res.rows
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.thetables ::v-deep .el-select .el-input .el-select__caret {
  margin-top: 10px;
}
.thetables ::v-deep .el-input__suffix {
  margin-top: -4px;
}
::v-deep .el-table thead {
  color: #000000;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

.page2 {
  // padding: 20px;

  background: #f9f9f9;
  font-size: 14px;
  .mainbtn {
    margin-bottom: 20px;
    .thebtn1 {
      background: rgba(255, 103, 35, 1);
      color: #ffffff;
    }
    .thebtn2 {
      background: rgba(0, 155, 88, 1);
      color: #ffffff;
    }
  }
  .main {
    padding: 10px 0;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    .tableBox {
      border-radius: 8px;
      border: 1px solid rgba(204, 204, 204, 1);
      padding: 20px 0;
    }
  }
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    .thebtn {
      width: 120px;
      height: 38px;
    }
  }
}
</style>