<template>
|
<div class="comm-input" :class="{ 'range-split': isShowRange }">
|
<div
|
v-if="Array.isArray(info.children)"
|
class="range-input el-range-editor el-input__inner"
|
>
|
<CommInput
|
v-for="(subItem, subIndex) in info.children"
|
:info="{
|
attrs: info.attrs || [],
|
rules: info.rules || [],
|
type: info.type,
|
...subItem,
|
}"
|
@updateValue="updateValue"
|
:parentName="info.name"
|
:key="subIndex"
|
:inputWidth="`${parseInt(inputWidth) / info.children.length - 6}px`"
|
:isShowRange="subIndex > 0 && subIndex < info.children.length"
|
></CommInput>
|
</div>
|
<component
|
v-else-if="info.type === 'select'"
|
@input="updateValue($event, info, parentName)"
|
:name="info.name"
|
:value="info.value"
|
v-bind="attrInfo"
|
v-bind:is="componentNames[info.type]"
|
>
|
<el-option
|
v-for="(optionsItem, optionsIndex) in info.options"
|
:key="optionsIndex"
|
:label="optionsItem.label"
|
:value="optionsItem.value"
|
></el-option>
|
</component>
|
<component
|
v-else-if="info.type === 'autocomplete'"
|
@input="updateValue($event, info, parentName)"
|
:name="info.name"
|
:value="info.value"
|
clearable
|
:fetch-suggestions="querySearchAsync"
|
:trigger-on-focus="false"
|
:popper-append-to-body="false"
|
:debounce="300"
|
value-key="label"
|
placeholder="请输入名称进行选择"
|
@select="handleSelect"
|
@clear="blurForBug()"
|
ref="myAutocomplete"
|
v-bind="attrInfo"
|
v-bind:is="componentNames[info.type]"
|
>
|
</component>
|
<div
|
v-else-if="info.type === 'customer'"
|
@click="updateValue($event, info, parentName)"
|
class="form-customer"
|
>
|
<p>{{ info.value }}</p>
|
<i class="el-icon-tickets"></i>
|
</div>
|
|
<p
|
v-else-if="!componentNames[info.type] || info.type === 'text'"
|
class="form-text"
|
>
|
{{ info.value | fRecord(info) }}
|
</p>
|
|
<component
|
v-else
|
@input="updateValue($event, info, parentName)"
|
:name="info.name"
|
:value="info.value"
|
v-bind="attrInfo"
|
v-bind:is="componentNames[info.type]"
|
></component>
|
</div>
|
</template>
|
<script>
|
import qryBankBranchList from "@/controller/qryBankBranchList";
|
// type input textarea inputs select
|
export default {
|
name: "CommInput",
|
props: {
|
/**
|
* info 单条配置信息 @example
|
* {type: 'input', label: '报单人:', value: '',name: 'formbllevel',attrs: [],rules:[]}
|
* */
|
info: {
|
type: Object,
|
required: true,
|
},
|
// 所有的信息
|
showList: {
|
type: Array,
|
required: false,
|
},
|
// 自身递归时用到，外部不用传入
|
parentName: {
|
type: String,
|
default: "",
|
},
|
|
// 不同类型默认配置配置
|
typeInfo: {
|
type: Object,
|
default: () => {},
|
},
|
|
// 输入框或select的宽度
|
inputWidth: {
|
type: String,
|
default: "220px",
|
},
|
|
isShowRange: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
|
data() {
|
return {
|
defaultTypeInfo: {
|
input: {
|
placeholder: "请输入",
|
maxLength: 300,
|
},
|
textarea: {
|
placeholder: "请输入",
|
maxLength: 3000,
|
},
|
select: {
|
placeholder: "请选择",
|
},
|
time: {
|
placeholder: "请选择",
|
},
|
date: {
|
placeholder: "请选择",
|
},
|
dateRange: {
|
placeholder: "请选择",
|
},
|
},
|
seachName: "",
|
componentNames: {
|
input: "el-input",
|
textarea: "el-input",
|
select: "el-select",
|
time: "el-time-select",
|
timePicker: "el-time-picker",
|
date: "el-date-picker",
|
autocomplete: "el-autocomplete",
|
dateRange: "el-date-picker",
|
},
|
};
|
},
|
|
methods: {
|
// 更新值
|
updateValue(val, item, parentName) {
|
console.log(
|
"模拟更新值val:",
|
val,
|
"item:",
|
item,
|
"parentName:",
|
parentName
|
);
|
this.$emit("updateValue", val, item, parentName);
|
},
|
async querySearchAsync(query, cb) {
|
console.log("运行querySearchAsync", query, this.info);
|
const that = this;
|
//区分不同的字段，处理不同的业务数据
|
//退款收款账户开户分行/支行
|
if (this.info.name == "paymentAccountNo") {
|
let bankCode = "";
|
this.showList.forEach((item) => {
|
if (item.name == "bankCode") {
|
const code = item.options.filter((res) => res.value === item.value);
|
if (code.length > 0) {
|
bankCode = code[0].text;
|
}
|
}
|
});
|
if (!bankCode) {
|
this.$message.error("退款收款账户开户银行简称不能为空");
|
return;
|
}
|
if (query.length > 1) {
|
const model = qryBankBranchList();
|
const result = await model.request({
|
currentPage: 1,
|
pageSize: 10,
|
bankcode: bankCode,
|
bankname: query,
|
});
|
console.log(result, "222");
|
result.list.forEach((val) => {
|
val.label = `${val.bankname}`;
|
val.value = `${val.bankno}`;
|
});
|
cb(result.list);
|
} else {
|
cb([]);
|
}
|
}
|
//退款收款账户户名
|
else if (this.info.name == "name") {
|
const nameAccountNameList = [
|
{
|
label: "深圳市众金合咨询管理有限公司",
|
value: {
|
accountNo: "44250100015700000470",
|
bankCode: "CCB",
|
paymentAccountNo: "中国建设银行股份有限公司深圳中旅公馆支行",
|
paymentbranchno: "105584000626",
|
},
|
},
|
{
|
label: "深圳市鹏友小额贷款有限公司",
|
value: {
|
accountNo: "767975195874",
|
bankCode: "BOC",
|
paymentAccountNo: "中国银行股份有限公司深圳莲塘支行",
|
paymentbranchno: "104584001241",
|
},
|
},
|
{
|
label: "深圳市鹏鼎小额贷款有限公司",
|
value: {
|
accountNo: "751072104617",
|
bankCode: "BOC",
|
paymentAccountNo: "中国银行股份有限公司深圳梅林支行",
|
paymentbranchno: "104584002445",
|
},
|
},
|
];
|
// 使用 filter 方法匹配 label 中包含 query 的项
|
// let results = query
|
// ? nameAccountNameList.filter((item) => item.label.includes(query))
|
// : nameAccountNameList;
|
let results = [];
|
if (query) {
|
// 将 query 分解为单个字符
|
const queryChars = query.split("");
|
results = nameAccountNameList.filter((item) => {
|
let label = item.label;
|
let index = -1;
|
for (let char of queryChars) {
|
index = label.indexOf(char, index + 1);
|
if (index === -1) {
|
return false;
|
}
|
}
|
return true;
|
});
|
} else {
|
results = nameAccountNameList;
|
}
|
cb(results);
|
}
|
},
|
handleSelect(data) {
|
console.log(data, "data");
|
if (this.info.name == "paymentAccountNo") {
|
const paymentbranchno = this.showList.filter(
|
(res) => res.name == "paymentbranchno"
|
);
|
|
this.$emit("updateValue", data.bankno, paymentbranchno[0]);
|
// this.loanForm[0].putoutbankbranchno = data.bankno;
|
// this.loanForm[0].putoutbankbranchname = data.bankname;
|
} else if (this.info.name == "name") {
|
console.log("退款收款账户户名选择后", data.value);
|
const accountNo = this.showList.filter(
|
(res) => res.name == "accountNo"
|
);
|
const bankCode = this.showList.filter((res) => res.name == "bankCode");
|
const paymentAccountNo = this.showList.filter(
|
(res) => res.name == "paymentAccountNo"
|
);
|
const paymentbranchno = this.showList.filter(
|
(res) => res.name == "paymentbranchno"
|
);
|
// const
|
this.$emit("updateValue", data.value.accountNo, accountNo[0]);
|
this.$emit(
|
"updateValue",
|
data.value.paymentAccountNo,
|
paymentAccountNo[0]
|
);
|
this.$emit(
|
"updateValue",
|
data.value.paymentbranchno,
|
paymentbranchno[0]
|
);
|
this.$emit("updateValue", data.value.bankCode, bankCode[0]);
|
}
|
},
|
blurForBug() {
|
document.activeElement.blur();
|
},
|
},
|
computed: {
|
// 导出属性信息
|
attrInfo() {
|
let { info, mixTypeInfo } = this;
|
const { attrs, rules, type } = info;
|
let result = mixTypeInfo[type] ? { ...mixTypeInfo[type] } : {};
|
|
// rules中如果设置了maxLength，则转移到属性中
|
if (Array.isArray(rules) && rules.length > 0) {
|
const maxItem = rules.find((item) =>
|
Object.keys(item).includes("maxLength")
|
);
|
if (maxItem) {
|
result.maxLength = maxItem["maxLength"];
|
}
|
}
|
if (type === "textarea") {
|
result.type = "textarea";
|
}
|
if (type === "dateRange") {
|
result.type = "daterange";
|
result.startPlaceholder = "开始日期";
|
result.endPlaceholder = "结束日期";
|
result.format = "yyyy/MM/dd";
|
}
|
|
if (Array.isArray(attrs) && attrs.length > 0) {
|
result = attrs.reduce(
|
(pre, curr) => {
|
if (typeof curr === "string") {
|
curr = { [curr]: true };
|
}
|
if (typeof curr === "object") {
|
pre = { ...pre, ...curr };
|
// 只读或disabled元素不需要默认placeholder
|
if (curr.disabled || curr.readonly) {
|
pre.placeholder = "";
|
}
|
}
|
return { ...pre };
|
},
|
{ ...result }
|
);
|
}
|
return result;
|
},
|
|
// 合并配置项
|
mixTypeInfo() {
|
const { typeInfo, defaultTypeInfo } = this;
|
return { ...defaultTypeInfo, ...typeInfo };
|
},
|
},
|
};
|
</script>
|
<style lang="postcss" scoped>
|
.comm-input {
|
& .range-input {
|
padding: 0;
|
line-height: 32px;
|
height: 32px;
|
& .comm-input {
|
line-height: 24px;
|
}
|
& >>> input {
|
line-height: 24px;
|
height: 24px;
|
border: none;
|
}
|
}
|
& .form-text {
|
margin: 0;
|
line-height: 16px;
|
}
|
& >>> input[readonly] {
|
color: #888888;
|
}
|
& .form-customer {
|
background: #f5f7fa;
|
border: 1px solid #f5f7fa;
|
border-radius: 4px;
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
color: #888888;
|
padding: 0 15px;
|
& p {
|
margin: 0;
|
padding: 0;
|
flex: 1;
|
height: 32px;
|
overflow: hidden;
|
}
|
}
|
}
|
.range-split {
|
position: relative;
|
&::before {
|
content: "-";
|
position: absolute;
|
z-index: 1;
|
line-height: 24px;
|
left: -4px;
|
top: 0;
|
}
|
}
|
|
.comm-input .el-autocomplete {
|
width: 100%;
|
}
|
</style>
|
