<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: 150px"
|
/>
|
<!-- 下拉-->
|
|
<el-cascader
|
v-model="val"
|
v-if="item.type === 'cascader'"
|
:placeholder="item.placeholder || '请选择'"
|
:options="item.options"
|
:props="item.optionsConfig.props||{ checkStrictly: true,emitPath: false,value: 'id' }"
|
:show-all-levels="false"
|
filterable
|
clearable
|
style="width: 150px"
|
@change="(v) => this.$emit('change', v)"
|
>
|
</el-cascader>
|
<!-- 下拉-->
|
<el-select
|
v-if="item.type === 'select'"
|
:placeholder="item.placeholder || '请选择'"
|
v-model="val"
|
filterable
|
:multiple="item.multiple || false"
|
:collapse-tags="item.collapseTags || false"
|
:clearable="true"
|
style="width: 150px"
|
@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: 150px"
|
@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: 150px"
|
@change="(v) => this.$emit('change', v)"
|
/>
|
<!--年选择器-->
|
<el-date-picker
|
v-if="item.type === 'year-picker'"
|
v-model="val"
|
type="year"
|
:clearable="true"
|
:placeholder="item.placeholder || '请选择'"
|
style="width: 150px"
|
:value-format="item.format?item.format:'yyyy'"
|
@change="(v) => panelChange(v, 'yyyy')"
|
/>
|
<!--月选择器-->
|
<el-date-picker
|
v-if="item.type === 'month-picker'"
|
v-model="val"
|
type="month"
|
:clearable="true"
|
:placeholder="item.placeholder || '请选择'"
|
style="width: 150px"
|
:value-format="item.format?item.format:'yyyyMM'"
|
@change="(v) => panelChange(v, 'yyyy-MM')"
|
/>
|
<!--日选择器-->
|
<el-date-picker
|
v-if="item.type === 'date-picker'"
|
v-model="val"
|
type="date"
|
:clearable="true"
|
:placeholder="item.placeholder || '请选择'"
|
style="width: 150px"
|
:value-format="item.format?item.format:'yyyyMMdd'"
|
@change="(v) => panelChange(v, 'yyyy-MM-dd')"
|
/>
|
<!--日期带时间选择器-->
|
<el-date-picker
|
v-if="item.type === 'date-time-picker'"
|
v-model="val"
|
type="datetime"
|
:clearable="true"
|
:placeholder="item.placeholder || '请选择'"
|
style="width: 150px"
|
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"
|
style="width: 378px"
|
:placeholder="item.placeholder || '请选择'"
|
type="datetimerange"
|
:pickerOptions='pickerOptions'
|
:disabled="item.disabled"
|
:clearable="true"
|
:format="item.format?item.format:'yyyy-MM-dd HH:mm'"
|
:value-format="item.format?item.format:'yyyy-MM-dd HH:mm'"
|
@change="(v) => this.$emit('change', v)"
|
/>
|
</div>
|
</template>
|
|
<script>
|
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() {
|
this.initData({})
|
},
|
watch: {
|
value(v) {
|
this.val = v;
|
},
|
},
|
data() {
|
return {
|
val: this.item.defaultValue,
|
treeData: [], // 树形下拉
|
endOpen: false, // 控制年份选择显示隐藏
|
pickerOptions: {
|
shortcuts: [{
|
text: '最近一周',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
picker.$emit('pick', [start, end]);
|
}
|
}, {
|
text: '最近一个月',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
picker.$emit('pick', [start, end]);
|
}
|
}, {
|
text: '最近三个月',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
picker.$emit('pick', [start, end]);
|
}
|
},
|
{
|
text: '最近半年',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
|
picker.$emit('pick', [start, end]);
|
}
|
}]
|
},
|
};
|
},
|
methods: {
|
clearData() {
|
this.item.options = []
|
this.treeData = []
|
},
|
initData(params) {
|
this.val = this.item.defaultValue
|
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',
|
params
|
}).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',
|
params
|
}).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) {
|
params.value = 0
|
this.asyncLoad(params).then((res) => {
|
this.treeData = res;
|
});
|
} else {
|
this.asyncLoad(params).then((res) => {
|
this.treeData = res;
|
});
|
}
|
}
|
},
|
panelChange(v, type) {
|
this.$emit('change', v)
|
},
|
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>
|
