348 lines
9.2 KiB
Vue
348 lines
9.2 KiB
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="$t('MN_T_1')">
|
||
|
|
<el-input
|
||
|
|
clearable
|
||
|
|
style="width: 200px"
|
||
|
|
v-model="form.memberCode"
|
||
|
|
@blur="checkName"
|
||
|
|
></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item :label="$t('CK_KS_14')">
|
||
|
|
<el-input
|
||
|
|
clearable
|
||
|
|
style="width: 200px"
|
||
|
|
v-model="form.memberName"
|
||
|
|
disabled
|
||
|
|
></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-button
|
||
|
|
class="my_search"
|
||
|
|
style="margin-left: 30px"
|
||
|
|
@click="getList"
|
||
|
|
>
|
||
|
|
{{ $t("MN_T_2") }}</el-button
|
||
|
|
>
|
||
|
|
<el-button class="my_reset" @click="reset">
|
||
|
|
{{ $t("MN_T_3") }}</el-button
|
||
|
|
>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<!-- <el-form-item :label="$t('MN_F_T_535')">
|
||
|
|
<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="$t('MN_F_T_587')">
|
||
|
|
<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="$t('MN_F_T_588')">
|
||
|
|
<el-radio-group v-model="rechargeMethod">
|
||
|
|
1
|
||
|
|
<el-radio
|
||
|
|
:label="item.value"
|
||
|
|
v-for="(item, index) in czWayList"
|
||
|
|
:key="index"
|
||
|
|
>{{ 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="$t('MN_T_1')"
|
||
|
|
min-width="120px"
|
||
|
|
>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
prop="memberName"
|
||
|
|
:label="$t('CK_KS_14')"
|
||
|
|
min-width="120px"
|
||
|
|
>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
prop="paymentMethod"
|
||
|
|
:label="$t('MN_F_T_587')"
|
||
|
|
min-width="120px"
|
||
|
|
>
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-select
|
||
|
|
clearable
|
||
|
|
:placeholder="$t('CK_KS_38')"
|
||
|
|
v-model="scope.row.paymentMethod"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in paymentTypeList"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value"
|
||
|
|
></el-option>
|
||
|
|
</el-select>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
|
||
|
|
<el-table-column
|
||
|
|
min-width="150px"
|
||
|
|
v-for="(item, index) in enumsAccountList"
|
||
|
|
:key="index"
|
||
|
|
align="center"
|
||
|
|
:prop="`${item.pkId}`"
|
||
|
|
:label="
|
||
|
|
item.pkTransactionKeyVal +
|
||
|
|
`${$t('CK_KS_129')}(${getUser.currency.symbol})`
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-input
|
||
|
|
clearable
|
||
|
|
v-model="scope.row.rechargeDetailMap[`${item.pkId}`]"
|
||
|
|
>
|
||
|
|
</el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
prop="memberRemarks"
|
||
|
|
:label="$t('MN_F_T_593')"
|
||
|
|
min-width="120px"
|
||
|
|
>
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-input v-model="scope.row.memberRemarks"></el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
align="center"
|
||
|
|
min-width="120px"
|
||
|
|
prop="remarks"
|
||
|
|
:label="$t('MN_F_T_594')"
|
||
|
|
>
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-input v-model="scope.row.remarks"></el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
<div class="footer">
|
||
|
|
<div style="margin: 0 auto">
|
||
|
|
<el-button
|
||
|
|
type="primary"
|
||
|
|
class="thebtn"
|
||
|
|
@click="saveDate('form')"
|
||
|
|
v-has-buttons="['ChongzhiConfirm']"
|
||
|
|
>
|
||
|
|
{{ $t("MN_F_32") }}</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: this.$t("MN_F_T_590"),
|
||
|
|
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: this.$t("MN_F_T_595"),
|
||
|
|
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>
|