<template>
|
<div class="bc">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-button type="primary" @click="onEd" class="submit">
|
{{ $t("abc") }}
|
</el-button>
|
</el-col>
|
</el-row>
|
|
<el-table :data="tableData" style="width: 100%" empty-text="No Data">
|
<el-table-column prop="bankName" :label="$t('hj213')"> </el-table-column>
|
|
<el-table-column prop="bankNo" :label="$t('hj215')"> </el-table-column>
|
|
<el-table-column prop="bankCardholderName" :label="$t('银行卡户主名称')">
|
</el-table-column>
|
|
<el-table-column :label="$t('Operation')">
|
<template slot-scope="scope">
|
<el-button
|
type="primary"
|
icon="el-icon-edit"
|
circle
|
style="margin-right: 8px"
|
@click="onEd(scope.row)"
|
></el-button>
|
<el-popconfirm
|
:title="`${$t('删除')}?`"
|
:confirm-button-text="$t('qr')"
|
:cancel-button-text="$t('qx')"
|
icon="el-icon-info"
|
icon-color="red"
|
@confirm="deleteBank(scope.row)"
|
>
|
<el-button
|
slot="reference"
|
type="danger"
|
icon="el-icon-delete"
|
circle
|
></el-button>
|
</el-popconfirm>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<el-dialog
|
:title="!this.editForm.id ? $t('hj211') : $t('hj212')"
|
:visible.sync="dialogVisible"
|
width="720px"
|
>
|
<el-form
|
ref="cardform"
|
:model="editForm"
|
label-width="auto"
|
:rules="rules"
|
>
|
<el-form-item :label="$t('hj213')" prop="bankName">
|
<el-input v-model="editForm.bankName"></el-input>
|
</el-form-item>
|
|
<el-form-item :label="$t('hj215')" prop="bankNo">
|
<el-input v-model="editForm.bankNo"></el-input>
|
</el-form-item>
|
|
<el-form-item
|
:label="$t('银行卡户主名称')"
|
prop="bankCardholderName"
|
:rules="[{ required: true, message: this.$t('请输入') }]"
|
v-if="!editForm.id"
|
>
|
<el-input v-model="editForm.bankCardholderName"></el-input>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button @click="dialogVisible = false">{{ $t("qx") }}</el-button>
|
<el-button type="primary" @click="onSubmit" class="submit">
|
{{ $t("qr") }}
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import mixins from "@/mixins/myMixins"; // 混入
|
import * as api from "@/axios/api";
|
import { mapState } from "vuex";
|
export default {
|
mixins: [mixins],
|
data() {
|
return {
|
// 列表参数,必须是opt和myMixins混入配合使用
|
opt: {},
|
editForm: {
|
bankName: "",
|
bankNo: "",
|
bankCardholderName: "",
|
id: "",
|
},
|
rules: {
|
bankName: [{ required: true, message: this.$t("请输入") }],
|
bankNo: [{ required: true, message: this.$t("请输入") }],
|
// bankCardholderName: [{ required: true, message: this.$t("请输入") }],
|
},
|
dialogVisible: false,
|
};
|
},
|
computed: {
|
...mapState(["userInfo"]),
|
},
|
watch: {},
|
created() {
|
this.apiInterface = api.getBankCard; // 赋值接口
|
this.init(); // 获取记录列表
|
},
|
methods: {
|
// 删除银行卡
|
async deleteBank(item) {
|
// 调用删除接口
|
let res = await api.deleteBankCard({ id: item.id });
|
if (res.status === 0) {
|
this.init(); // 刷新列表
|
} else {
|
Toast(res.msg);
|
}
|
},
|
// 弹窗提交
|
onSubmit() {
|
this.$refs["cardform"].validate(async (valid) => {
|
if (valid) {
|
let apiUrl = null;
|
!!this.editForm.id
|
? (apiUrl = api.getUpdate)
|
: (apiUrl = api.addBankCard);
|
|
let data = await apiUrl(this.editForm);
|
if (data.status == 0) {
|
this.init(); // 刷新列表
|
this.$message.success(data.msg);
|
this.dialogVisible = false;
|
}
|
} else {
|
console.log("cardform err");
|
return false;
|
}
|
});
|
},
|
// 添加/编辑
|
onEd(val) {
|
if (!!val) {
|
this.editForm = {
|
bankName: val.bankName,
|
bankNo: val.bankNo,
|
bankCardholderName: val.bankCardholderName,
|
id: val.id,
|
};
|
} else {
|
this.editForm = {
|
bankName: "",
|
bankNo: "",
|
bankCardholderName: "",
|
};
|
}
|
this.dialogVisible = true;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.bc {
|
width: 100%;
|
|
.pagination {
|
margin-top: 20px;
|
text-align: center;
|
}
|
}
|
.submit {
|
background-color: #c4d600 !important;
|
border-color: #c4d600 !important;
|
}
|
</style>
|
