364 lines
10 KiB
364 lines
10 KiB
<template> |
|
<el-drawer |
|
:title="controlWindows.addInfo.title" |
|
direction="ltr" |
|
size="50%" |
|
:visible="controlWindows.add" |
|
@opened="openDrawer" |
|
:before-close="closeWindow" |
|
> |
|
<div class="add"> |
|
<el-form ref="form" :model="form" :rules="rules" label-width="140px"> |
|
<el-form-item label="公司" prop="companyId"> |
|
<autocomplete |
|
:params="form" |
|
:config="configAutocomplete" |
|
@change="companyChange" |
|
/> |
|
</el-form-item> |
|
<el-form-item label="交易类型" prop="transactionType"> |
|
<el-select |
|
:disabled="form.id" |
|
v-model="form.transactionType" |
|
placeholder="请选择交易类型" |
|
@change="changeTransactionType" |
|
> |
|
<el-option label="充值" value="RECHARGE" /> |
|
<!-- <el-option label="赊销" value="CHARGE_SALES" /> |
|
<el-option label="消费返利" value="CONSUME_REBATE" /> --> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<template |
|
v-if=" |
|
companyFinance.settlementModes === 1 || |
|
companyFinance.settlementModes === 3 |
|
" |
|
> |
|
<el-form-item label="充值返利比例"> |
|
<el-input |
|
disabled |
|
v-model="companyFinance.rechargeRebate" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item label="预计充值返利金额"> |
|
<el-input disabled v-model="rechargeRebateAmount"></el-input> |
|
</el-form-item> |
|
</template> |
|
|
|
<el-form-item label="交易金额" prop="transactionAmount"> |
|
<el-input |
|
v-checkNum |
|
v-model="form.transactionAmount" |
|
placeholder="请输入交易金额" |
|
></el-input> |
|
</el-form-item> |
|
|
|
<template v-if="form.transactionType === 'RECHARGE'"> |
|
<el-form-item label="企业收款账户" prop="companyBankCardArr"> |
|
<el-cascader |
|
:options="cascaderList" |
|
v-model="form.companyBankCardArr" |
|
filterable |
|
clearable |
|
></el-cascader> |
|
</el-form-item> |
|
|
|
<el-form-item label="线下汇款公司账户" prop="offlinePaymentCompany"> |
|
<el-input |
|
v-model="form.offlinePaymentCompany" |
|
placeholder="请输入线下汇款公司账户" |
|
></el-input> |
|
</el-form-item> |
|
|
|
<el-form-item label="线下交易发起时间" prop="offlineStartTime"> |
|
<el-date-picker |
|
v-model="form.offlineStartTime" |
|
type="datetime" |
|
format="yyyy-MM-dd HH:mm:ss" |
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
default-time="00:00:00" |
|
placeholder="选择日期时间" |
|
> |
|
</el-date-picker> |
|
</el-form-item> |
|
|
|
<el-form-item label="线下交易完成时间" prop="offlineCompleteTime"> |
|
<el-date-picker |
|
v-model="form.offlineCompleteTime" |
|
type="datetime" |
|
format="yyyy-MM-dd HH:mm:ss" |
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
default-time="23:59:59" |
|
placeholder="选择日期时间" |
|
> |
|
</el-date-picker> |
|
</el-form-item> |
|
</template> |
|
|
|
<el-form-item |
|
v-if=" |
|
form.transactionType === 'CONSUME_REBATE' || |
|
form.transactionType === 'RECHARGE' |
|
" |
|
label="线下交易凭证" |
|
prop="offlineTransactionProof" |
|
> |
|
<el-upload |
|
:action="uploadUrl" |
|
list-type="picture-card" |
|
:on-preview="handlePictureCardPreview" |
|
:on-remove="handleRemove" |
|
:on-success="handleSuccess" |
|
:limit="1" |
|
> |
|
<i class="el-icon-plus"></i> |
|
</el-upload> |
|
<el-dialog :visible.sync="imgDialog" :modal="false"> |
|
<img width="100%" :src="form.offlineTransactionProof" alt="" /> |
|
</el-dialog> |
|
</el-form-item> |
|
|
|
<el-form-item label="交易说明" prop="reverseRemark"> |
|
<el-input |
|
type="textarea" |
|
:rows="2" |
|
placeholder="请输入交易说明" |
|
v-model="form.reverseRemark" |
|
> |
|
</el-input> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<div class="buttons"> |
|
<el-button @click="closeWindow">取消 </el-button> |
|
<el-button @click="submit">提交</el-button> |
|
</div> |
|
</el-drawer> |
|
</template> |
|
|
|
<script> |
|
import serve from "api/financialCenter/enterpriseRecharge.js"; |
|
import commonServe from "api/common.js"; |
|
|
|
import autocomplete from "components/autocomplete/index.vue"; |
|
|
|
import utils from "utils/encode"; |
|
const JSESSIONID = utils.uuid(); |
|
|
|
export default { |
|
components: { |
|
autocomplete, |
|
}, |
|
props: { |
|
controlWindows: Object, |
|
}, |
|
data() { |
|
let validatorcompanyId = (rule, value, callback) => { |
|
if (this.form.companyId) callback(); |
|
else callback("请选择公司"); |
|
}; |
|
let validatorofflineTransactionProof = (rule, value, callback) => { |
|
if (this.form.offlineTransactionProof) callback(); |
|
else callback("请上传凭证"); |
|
}; |
|
return { |
|
uploadUrl: |
|
process.env.VUE_APP_ENV === "development" |
|
? "/api/oil-oss/obejct/uploadFile" |
|
: "/adminapi/oil-oss/obejct/uploadFile", |
|
imgDialog: false, |
|
headers: { |
|
dataSources: "WEB", |
|
Authorization: localStorage.getItem("token"), |
|
JSESSIONID: JSESSIONID, |
|
token: utils.bcrypt(JSESSIONID), |
|
}, |
|
cascaderList: [], |
|
companyFinance: {}, |
|
form: {}, |
|
refineryList: [], |
|
configAutocomplete: { |
|
serveTarget: serve.getLikeByNameSuccess, |
|
autocompleteKey: "name", |
|
labelKey: "name", |
|
valueKey: "id", |
|
placeholder: "企业名称", |
|
querykey: "companyId", |
|
echoId: "", |
|
echoName: "", |
|
}, |
|
rules: { |
|
companyId: [ |
|
{ required: true, validator: validatorcompanyId, trigger: "change" }, |
|
], |
|
transactionType: [ |
|
{ required: true, message: "请选择交易类型", trigger: "change" }, |
|
], |
|
transactionAmount: [ |
|
{ required: true, message: "请输入交易金额", trigger: "blur" }, |
|
], |
|
offlineTransactionProof: [ |
|
{ |
|
required: true, |
|
validator: validatorofflineTransactionProof, |
|
trigger: "change", |
|
}, |
|
], |
|
offlinePaymentCompany: [ |
|
{ |
|
required: true, |
|
message: "请输入线下汇款公司账户", |
|
trigger: "blur", |
|
}, |
|
], |
|
offlineStartTime: [ |
|
{ |
|
required: true, |
|
message: "请选择线下交易发起时间", |
|
trigger: "change", |
|
}, |
|
], |
|
offlineCompleteTime: [ |
|
{ |
|
required: true, |
|
message: "请选择线下交易完成时间", |
|
trigger: "change", |
|
}, |
|
], |
|
offlineCompleteTime: [ |
|
{ |
|
required: true, |
|
message: "请选择企业收款账户", |
|
trigger: "change", |
|
}, |
|
], |
|
reverseRemark: [ |
|
{ required: true, message: "请输入交易说明", trigger: "blur" }, |
|
], |
|
}, |
|
}; |
|
}, |
|
computed: { |
|
rechargeRebateAmount() { |
|
if ( |
|
this.companyFinance.settlementModes === 1 || |
|
this.companyFinance.settlementModes === 3 |
|
) { |
|
return ( |
|
(this.form.transactionAmount || 0) * |
|
this.companyFinance.rechargeRebate |
|
); |
|
} else return this.companyFinance.rechargeRebateAmount; |
|
}, |
|
}, |
|
created() { |
|
this.getCascaderList(); |
|
}, |
|
methods: { |
|
openDrawer() { |
|
let { id } = this.controlWindows.addInfo; |
|
//回显 |
|
id && |
|
(this.form = JSON.parse(JSON.stringify(this.controlWindows.addInfo))); |
|
let configUpdata = id |
|
? { echoId: id, echoName: this.form.refineryName, isDisabled: true } |
|
: { |
|
echoId: "", |
|
echoName: "", |
|
isDisabled: false, |
|
}; |
|
Object.assign(this.configAutocomplete, configUpdata); |
|
}, |
|
// 公司change |
|
companyChange(id) { |
|
if (id) { |
|
serve.getByCompanyIdSec(id).then((res) => { |
|
this.companyFinance = res.data; |
|
}); |
|
} |
|
}, |
|
// 交易类型 change |
|
changeTransactionType(val) { |
|
if (val === "CHARGE_SALES") { |
|
this.handleRemove(); |
|
} |
|
}, |
|
//img大图 |
|
handlePictureCardPreview(file) { |
|
this.form.offlineTransactionProof = file.url; |
|
this.imgDialog = true; |
|
}, |
|
// img remove |
|
handleRemove(file, fileList) { |
|
this.form.offlineTransactionProof = ""; |
|
}, |
|
// 上传成功 |
|
handleSuccess(response, file, fileList) { |
|
if (response.code === 20000) { |
|
this.form.offlineTransactionProof = response.data.publicUrl; |
|
} |
|
}, |
|
//企业收款账户 |
|
getCascaderList() { |
|
serve.getCascaderList().then((res) => { |
|
this.cascaderList = res.data; |
|
}); |
|
}, |
|
submit() { |
|
this.$refs["form"].validate((valid) => { |
|
if (valid) { |
|
let params = { transactionType: "RECHARGE", ...this.form }; |
|
this.judgeInterface(this.form).then((res) => { |
|
this.$message.success(res.msg); |
|
this.closeWindow(); |
|
}); |
|
} |
|
}); |
|
}, |
|
judgeInterface(form) { |
|
let { id } = this.controlWindows.addInfo; |
|
if (id) return serve.update(form); |
|
else return serve.save(form); |
|
}, |
|
closeWindow() { |
|
this.$emit("closeWindow"); |
|
this.form = {}; |
|
this.controlWindows.addInfo = {}; |
|
this.$nextTick(() => { |
|
this.$refs.form.clearValidate(); |
|
this.controlWindows.add = false; |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.add { |
|
padding: 20px; |
|
.el-input, |
|
.el-select, |
|
.el-cascader, |
|
.el-textarea, |
|
.el-autocomplete { |
|
width: 300px; |
|
} |
|
} |
|
.buttons { |
|
position: absolute; |
|
left: 0; |
|
bottom: 0; |
|
padding-right: 40px; |
|
width: 100%; |
|
height: 80px; |
|
line-height: 80px; |
|
text-align: right; |
|
border-top: 1px solid #f2f3f5; |
|
.el-button { |
|
text-align: right; |
|
font-size: 14px; |
|
border-radius: 5px; |
|
} |
|
} |
|
</style>
|
|
|