<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)"
|
@blur="handleBlur($event, info, parentName)"
|
@focus="handleFocus($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 "@/api/product";
|
// 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) {
|
this.$emit("updateValue", val, item, parentName);
|
},
|
handleBlur(val, item, parentName) {
|
this.$emit("handleBlur",val, item, parentName)
|
},
|
handleFocus(val, item, parentName) {
|
this.$emit("handleFocus",val, item, parentName)
|
},
|
async querySearchAsync(query, cb) {
|
const that = this;
|
let bankCode = "";
|
console.log('querySearchAsync',this.showList)
|
this.showList.forEach((item) => {
|
if (item.name == "bankCode") {
|
const code = item.options.filter((res) => res.value === item.value);
|
console.log('code',code)
|
bankCode = code[0].text;
|
}
|
if (item.name == "bankName") {
|
const code = item.value;
|
bankCode = code;
|
}
|
});
|
|
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,
|
// });
|
const result = await qryBankBranchList({
|
currentPage: 1,
|
pageSize: 10,
|
bankcode: bankCode,
|
bankname: query,
|
});
|
result.result.records.forEach((val) => {
|
val.label = `${val.bankname}`;
|
val.value = `${val.bankno}`;
|
});
|
cb(result.result.records);
|
} else {
|
cb([]);
|
}
|
},
|
handleSelect(data) {
|
console.log(data, "data");
|
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;
|
},
|
blurForBug() {
|
const paymentbranchno = this.showList.filter(
|
(res) => res.name == "paymentbranchno"
|
);
|
this.$emit("updateValue",'', paymentbranchno[0]);
|
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>
|
