<template>
|
<el-dialog class="viewLayer"
|
title="编辑"
|
width="80%"
|
ref="dialog"
|
id="peAdd"
|
@close="close"
|
:close-on-click-modal="false"
|
:visible.sync="dialogVisible">
|
<el-form :model="backData"
|
:rules="rules"
|
ref="ruleForm"
|
label-width="100px"
|
class="demo-ruleForm">
|
<el-form-item class="textItem"
|
label="支付公司"
|
prop="companyId">
|
<input type="text"
|
v-if="!addShow"
|
class="myText"
|
v-model="backData.payCompany">
|
<el-select placeholder="请选择"
|
clearable
|
v-if="addShow"
|
v-model="backData.companyId">
|
<el-option v-for="item in maskCompanyList"
|
:key="item.companyId"
|
:label="item.payCompany"
|
:value="item.companyId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="textItem"
|
label="交易类型"
|
prop="transType">
|
<input type="text"
|
v-if="!addShow"
|
class="myText"
|
v-model="backData.transType">
|
<el-select placeholder="请选择"
|
clearable
|
v-if="addShow"
|
v-model="backData.transType">
|
<el-option v-for="item in options2"
|
:key="item.value"
|
:label="item.value"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="textItem"
|
label="银行名称"
|
prop="bankId">
|
<input type="text"
|
v-if="!addShow"
|
class="myText"
|
v-model="backData.bankName">
|
<el-select placeholder="请选择"
|
clearable filterable
|
v-if="addShow"
|
v-model="backData.bankId">
|
<el-option v-for="item in maskBankList"
|
:key="item.bankId"
|
:label="item.bankName"
|
:value="item.bankId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="textItem"
|
label="是否启用"
|
prop="isoff">
|
<el-select placeholder="请选择"
|
clearable
|
v-model="backData.isoff">
|
<el-option v-for="item in options4"
|
:key="item.value"
|
:label="item.value"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="textItem"
|
label="状态"
|
prop="status">
|
<el-select placeholder="请选择"
|
clearable
|
v
|
v-model="backData.status">
|
<el-option v-for="item in options5"
|
:key="item.id"
|
:label="item.value"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="维护时间"
|
required
|
class="textItem">
|
<el-col :span="9">
|
<el-form-item prop="offStart"
|
style="width:80%;">
|
<el-date-picker v-model="backData.offStart"
|
type="datetime"
|
placeholder="任意时间点"
|
format="yyyy-MM-dd HH:mm:ss"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 160px;">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="3">-</el-col>
|
<el-col :span="9">
|
<el-form-item prop="offEnd"
|
style="width: 80%;">
|
<el-date-picker v-model="backData.offEnd"
|
type="datetime"
|
style="width: 160px;"
|
placeholder="选择日期"
|
format="yyyy-MM-dd HH:mm:ss"
|
value-format="yyyy-MM-dd HH:mm:ss">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-form-item>
|
</el-form>
|
<p style="margin-left:30px; margin-top:30px;">黑暗期为：银行系统维护，不支持交易处理期间。</p>
|
<div class="btnGroup">
|
<el-button
|
@click="submit('ruleForm')">提交</el-button>
|
<el-button
|
@click="cancel">取消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
|
export default {
|
data() {
|
var checkTime = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error("该选项为必填项"));
|
} else {
|
if (this.tonumber(this.backData.offStart) >= this.tonumber(value)) {
|
callback(new Error("结束时间必须大于开始时间"));
|
} else {
|
callback();
|
}
|
}
|
};
|
return {
|
selectShow: true,
|
addShow: false,
|
title: "编辑",
|
backData: {
|
company: "",
|
transType: "",
|
bankName: "",
|
enable: "",
|
status: ""
|
},
|
options2: [
|
{
|
value: "鉴权",
|
id: "100"
|
},
|
{
|
value: "单笔代扣",
|
id: "301"
|
},
|
{
|
value: "代付",
|
id: "200"
|
},
|
{
|
value: "批量代扣",
|
id: "302"
|
},
|
{
|
value: "协议代扣",
|
id: "303"
|
}
|
],
|
options4: [
|
{
|
value: "是",
|
id: 1
|
},
|
{
|
value: "否",
|
id: 0
|
}
|
],
|
options5: [
|
{
|
value: "正常",
|
id: 1
|
},
|
{
|
value: "关闭",
|
id: 0
|
}
|
],
|
rules: {
|
companyId: [
|
{
|
required: true,
|
message: "该选项为必选项",
|
trigger: "change"
|
}
|
],
|
transType: [
|
{
|
required: true,
|
message: "该选项为必选项",
|
trigger: "change"
|
}
|
],
|
bankId: [
|
{
|
required: true,
|
message: "该选项为必选项",
|
trigger: "change"
|
}
|
],
|
isoff: [
|
{
|
required: true,
|
message: "该选项为必选项",
|
trigger: "change"
|
}
|
],
|
status: [
|
{
|
required: true,
|
message: "该选项为必选项",
|
trigger: "change"
|
}
|
],
|
offStart: [
|
{
|
required: true,
|
message: "该选项为必选项",
|
trigger: "change"
|
}
|
],
|
offEnd: [
|
{
|
validator: checkTime,
|
trigger: "change"
|
}
|
]
|
},
|
dialogVisible: this.value
|
};
|
},
|
props: {
|
clickType: {
|
type: String,
|
default: "edit"
|
},
|
DarkData: {
|
type: Object,
|
default() {
|
return {};
|
}
|
},
|
maskBankList: {
|
type: Array,
|
default() {
|
return [];
|
}
|
},
|
maskCompanyList: {
|
type: Array,
|
default() {
|
return [];
|
}
|
},
|
|
value: {
|
type: Boolean,
|
default: false
|
}
|
},
|
|
watch: {
|
value: function(n) {
|
this.dialogVisible = n;
|
if (n) {
|
this.getCurrentTime();
|
this.getParentData();
|
}
|
}
|
},
|
methods: {
|
// 提交
|
submit(formName) {
|
this.$anti(this.backData);
|
if (this.clickType == "edit") {
|
this.$http
|
.post("/darkness/updateBankTrans", this.backData)
|
.then(response => {
|
// if (response.data == "9") {
|
// alert("该条数据已存在，请修改后重新提交！");
|
// } else {
|
// this.$emit("hide");
|
// }
|
if(response.data.retHeader.retCode==="0000"){
|
|
}else{
|
this.$message.error(response.data.retHeader.retMessage)
|
}
|
this.cancel();
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
} else if (this.clickType == "add") {
|
this.$refs[formName].validate(valid => {
|
if (valid) {
|
this.$http
|
.post("/darkness/addBankTrans", this.backData)
|
.then(response => {
|
// if (response.data == "9") {
|
// alert("该条数据已存在，请修改后重新提交！");
|
// } else {
|
// }
|
if(response.data.retHeader.retCode==="0000"){
|
|
}else{
|
this.$emit("hide");
|
this.$message.error(response.data.retHeader.retMessage)
|
}
|
this.cancel();
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
} else {
|
return false;
|
}
|
});
|
}
|
},
|
// 取消
|
cancel() {
|
this.$emit("hide");
|
},
|
// 获取当前时间
|
getCurrentTime() {
|
const now = new Date();
|
const year = now.getFullYear();
|
const month = now.getMonth();
|
const day = now.getDate();
|
const hour = now.getHours();
|
const minutes = now.getMinutes();
|
const second = now.getSeconds();
|
},
|
// 获取父组件传递过来的数据
|
getParentData() {
|
if (this.clickType == "edit") {
|
this.title = "编辑";
|
this.addShow = false;
|
this.backData = this.DarkData;
|
this.$mapData([this.backData]);
|
} else if (this.clickType == "add") {
|
this.title = "新增";
|
this.addShow = true;
|
this.backData = {
|
bankTransId: "",
|
bankId: "",
|
offStart: "",
|
offEnd: "",
|
isoff: "",
|
status: "",
|
transType: "",
|
companyId: ""
|
};
|
}
|
},
|
// 数字化数据
|
tonumber(str) {
|
str = str
|
.split("-")
|
.join("")
|
.split(":")
|
.join("")
|
.split(" ")
|
.join("");
|
return str;
|
},
|
|
// 编辑
|
close() {
|
this.$emit("hide");
|
}
|
}
|
};
|
</script>
|
|
<style>
|
</style>
|
<style lang="less" scoped>
|
.el-input {
|
width: 217px;
|
height: 40px;
|
}
|
|
.textItem {
|
height: 56px;
|
width: 66%;
|
padding: 8px;
|
> label {
|
display: inline-block;
|
width: 100px;
|
height: 40px;
|
text-align: right;
|
line-height: 40px;
|
}
|
.myText {
|
width: 217px;
|
padding: 0px 20px;
|
height: 36px;
|
border: none;
|
outline: none;
|
}
|
.myText[disabled] {
|
background-color: #fff;
|
}
|
.inputBorder {
|
border: 1px solid #ccc;
|
border-radius: 6px;
|
}
|
}
|
.line {
|
display: block;
|
width: 100%;
|
height: 1px;
|
background-color: black;
|
}
|
.notes {
|
margin-left: 8px;
|
}
|
.mynotes {
|
display: inline-block;
|
height: 100%;
|
font-size: 12px; // padding-top: 4px;
|
margin-left: 10px;
|
}
|
.btnGroup {
|
width: 160px;
|
height: 72px;
|
padding: 16px 0px;
|
margin-left: 50%;
|
transform: translateX(-60%);
|
}
|
|
</style>
|
