<template>
|
<div>
|
<!--文本-->
|
<el-input
|
:type="item.inputType || 'text'"
|
v-if="item.type === 'text'"
|
:placeholder="item.placeholder || ''"
|
@change="(e) => inputChange(e)"
|
:clearable="true"
|
v-model="val"
|
style="width: 200px"
|
/>
|
<!-- 下拉-->
|
|
<el-cascader
|
v-model="val"
|
v-if="item.type === 'cascader'"
|
:options="item.options"
|
:props="{ checkStrictly: true,value: 'id' }"
|
clearable
|
:clearable="true"
|
style="width: 200px"
|
@change="(v) => this.$emit('change', v)"
|
>
|
</el-cascader>
|
<!-- 下拉-->
|
<el-select
|
v-if="item.type === 'select'"
|
:placeholder="item.placeholder || ''"
|
v-model="val"
|
show-search
|
:multiple="item.multiple || false"
|
:collapse-tags="item.collapseTags || false"
|
:clearable="true"
|
style="width: 200px"
|
@change="(v) => this.$emit('change', v)"
|
>
|
<el-option v-for="(o, i) in item.options" :value="o.value" :label="o.label" :key="o.value"> </el-option>
|
</el-select>
|
|
<!-- 树形下拉-->
|
<el-tree
|
v-if="item.type === 'tree'"
|
v-model="val"
|
placeholder="请选择"
|
allow-clear
|
:data="treeData"
|
:load-data="onLoadData"
|
style="width: 200px"
|
@change="(v) => this.$emit('change', v)"
|
>
|
</el-tree>
|
|
<!--时间-->
|
<el-time-select
|
v-if="item.type === 'time-picker'"
|
:placeholder="item.placeholder || ''"
|
v-model="val"
|
:clearable="true"
|
style="width: 200px"
|
@change="(v) => this.$emit('change', v)"
|
/>
|
<!--年选择器-->
|
<el-date-picker
|
v-if="item.type === 'year-picker'"
|
v-model="val"
|
type="year"
|
:clearable="true"
|
style="width: 200px"
|
@change="(v) => panelChange(v, 'yyyy')"
|
/>
|
<!--月选择器-->
|
<el-date-picker
|
v-if="item.type === 'month-picker'"
|
v-model="val"
|
type="month"
|
:clearable="true"
|
style="width: 200px"
|
@change="(v) => panelChange(v, 'yyyy-MM')"
|
/>
|
<!--日选择器-->
|
<el-date-picker
|
v-if="item.type === 'date-picker'"
|
v-model="val"
|
type="date"
|
:clearable="true"
|
style="width: 200px"
|
@change="(v) => panelChange(v, 'yyyy-MM-dd')"
|
/>
|
<!--日期带时间选择器-->
|
<el-date-picker
|
v-if="item.type === 'date-time-picker'"
|
v-model="val"
|
type="datetime"
|
:clearable="true"
|
style="width: 200px"
|
format="yyyy-MM-dd HH:mm:ss"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
@change="(v)=>panelChange(v,'yyyy-MM-dd HH:mm:ss')"
|
/>
|
<!--范围选择时间-->
|
<el-date-picker
|
v-if="item.type === 'datetimerange-picker'"
|
v-model="val"
|
:placeholder="item.placeholder || ''"
|
type="datetimerange"
|
:disabled="item.disabled"
|
:clearable="true"
|
format="yyyy-MM-dd HH:mm:ss"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
@change="(v) => this.$emit('change', v)"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import {formatDates} from '@/utils/index';
|
import request from '@/utils/request';
|
|
function trim(str) {
|
if (str == null) {
|
return '';
|
}
|
return str.replace(/^\s*(.*?)[\s\n]*$/g, '$1');
|
}
|
|
export default {
|
name: 'SearchItem',
|
props: {
|
value: [String, Number, Object, Array],
|
item: Object,
|
},
|
created() {
|
if (this.item.type === 'select' && this.item.optionsConfig) {
|
if (this.$axios === undefined) {
|
console.error('请先配置this.$axios');
|
return;
|
}
|
request({
|
url: this.item.optionsConfig.url,
|
method: 'get',
|
}).then((res) => {
|
const data = res || [];
|
this.item.options = [];
|
data.forEach((v) => {
|
this.item.options.push({
|
label: v[this.item.optionsConfig.label || 'label'],
|
value: v[this.item.optionsConfig.value || 'value'],
|
});
|
});
|
});
|
}
|
if (this.item.type === 'cascader' && this.item.optionsConfig) {
|
if (this.$axios === undefined) {
|
console.error('请先配置this.$axios');
|
return;
|
}
|
request({
|
url: this.item.optionsConfig.url,
|
method: 'get',
|
}).then((res) => {
|
const data = res || [];
|
this.item.options = [];
|
this.item.options = data;
|
});
|
}
|
if (this.item.type === 'tree-select' && this.item.optionsConfig) {
|
if (this.$axios === undefined) {
|
console.error('请先配置this.$axios');
|
return;
|
}
|
if (this.item.asyncLoad) {
|
this.asyncLoad({ value: 0 }).then((res) => {
|
this.treeData = res;
|
});
|
} else {
|
this.asyncLoad({}).then((res) => {
|
this.treeData = res;
|
});
|
}
|
}
|
},
|
watch: {
|
value(v) {
|
this.val = v;
|
},
|
},
|
data() {
|
return {
|
val: this.item.defaultValue,
|
treeData: [], // 树形下拉
|
endOpen: false, // 控制年份选择显示隐藏
|
};
|
},
|
methods: {
|
panelChange (v,type) {
|
var info = null
|
if( v && this.item.type!=='date-time-picker'){
|
info = formatDates(v, type)
|
}else{
|
info = v
|
}
|
this.val = info
|
this.$emit('change', info)
|
},
|
filterOption(input, option) {
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
},
|
inputChange(e) {
|
this.$emit('change', trim(e));
|
},
|
onLoadData(treeNode) {
|
return new Promise((resolve) => {
|
if (this.item.asyncLoad === undefined || !this.item.asyncLoad) {
|
resolve();
|
return;
|
}
|
if (treeNode.dataRef.children) {
|
resolve();
|
return;
|
}
|
this.asyncLoad(treeNode.dataRef).then((res) => {
|
treeNode.dataRef.children = res;
|
this.treeData = [...this.treeData];
|
resolve();
|
});
|
});
|
},
|
asyncLoad({ value }) {
|
let url = `${this.item.optionsConfig.url}`;
|
if (value !== undefined) {
|
url = `${this.item.optionsConfig.url}?pid=${value}`;
|
}
|
return new Promise((resolve) => {
|
// this.$axios({
|
// url: url,
|
// method: 'get'
|
// })
|
request({
|
url: url,
|
method: 'get',
|
})
|
.then((res) => {
|
const data = res || [];
|
const result = [];
|
const rander = (array, r) => {
|
array.forEach((v) => {
|
const d = {
|
label: v[this.item.optionsConfig.label || 'label'],
|
value: v[this.item.optionsConfig.value || 'value'],
|
disabled: false,
|
};
|
if (this.item.allowLv) {
|
if (
|
// eslint-disable-next-line no-eval
|
eval(v[this.item.optionsConfig.lv || 'lv'] + this.item.allowLv)
|
) {
|
d.disabled = false;
|
} else {
|
d.disabled = true;
|
}
|
}
|
if (v.children && v.children.length > 0) {
|
d.children = [];
|
rander(v.children, d.children);
|
}
|
r.push(d);
|
});
|
};
|
rander(data, result);
|
resolve(result);
|
})
|
.catch(() => {
|
resolve([]);
|
});
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped></style>
|
