<template>
|
<div ref="serchinquer" class="flex align-center padding10 justify-between">
|
<div v-if="buttonShow" class="width25" :style="buttonWidth ? 'width:' + buttonWidth + '%' : ''">
|
<el-button-group>
|
<template v-for="(item, index) in elbuttonlist">
|
<el-button :key="index" type="primary" size="mini" icon="el-icon-plus" @click="$emit(item.value)">{{
|
item.label
|
}}</el-button>
|
</template>
|
</el-button-group>
|
<el-button-group class="margin-left">
|
<div class="flex">
|
<el-upload
|
class="upload-demo"
|
ref="upload"
|
action=""
|
accept=".xls,.xlsx"
|
name="files"
|
:show-file-list="false"
|
:http-request="httprequest"
|
>
|
<el-button v-if="imexcel" style="margin-left: 10px" icon="el-icon-upload2" size="mini" type="success"
|
>导入</el-button
|
>
|
</el-upload>
|
|
<el-button
|
v-if="derive"
|
style="margin-left: 10px"
|
type="primary"
|
size="mini"
|
icon="el-icon-download"
|
@click="$emit('derive')"
|
>导出</el-button
|
>
|
<el-button
|
v-if="templateShow"
|
style="margin-left: 10px"
|
type="primary"
|
size="mini"
|
icon="el-icon-download"
|
@click="$emit('download')"
|
>下载模板</el-button
|
>
|
</div>
|
</el-button-group>
|
</div>
|
<div
|
id="topinquer"
|
v-if="inquerShow"
|
class="width80 flex align-start"
|
:style="inquerWdith ? 'width:' + inquerWdith + '%' : ''"
|
>
|
<div class="width96 flex margin-right" :class="flexwrap ? 'justify-start flex-wrap' : 'justify-end'">
|
<template v-for="(item, index) in inuqerlist">
|
<div
|
:key="index + 'input'"
|
class="width25 flex align-center"
|
:class="item.class"
|
:style="item.boxWdith ? 'width:' + item.boxWdith + '%' : ''"
|
>
|
<label class="textalign margin-right5px" :style="item.label ? 'width:' + fixWidth(item.label) + 'px' : ''">
|
{{ item.label ? item.label + ':' : '' }}</label
|
>
|
|
<el-date-picker
|
v-if="item.type == 'pickerOptions'"
|
:style="'width:calc(100% - ' + fixWidth(item.label) + 'px)'"
|
v-model="containinquer[item.prop]"
|
size="mini"
|
type="datetimerange"
|
:clearable="item.clearable"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
>
|
</el-date-picker>
|
<el-date-picker
|
v-if="item.type == 'date'"
|
:style="'width:calc(100% - ' + fixWidth(item.label) + 'px)'"
|
v-model="containinquer[item.prop]"
|
type="date"
|
size="mini"
|
:clearable="item.clearable"
|
value-format="yyyy-MM-dd"
|
placeholder="选择日期"
|
>
|
</el-date-picker>
|
<el-input
|
v-if="item.type == 'text'"
|
:style="item.label ? 'width:calc(100% - ' + fixWidth(item.label) + 'px)' : ''"
|
size="mini"
|
:placeholder="item.placeholder ? item.placeholder : '请输入' + item.label"
|
@keyup.enter.native="focussearch"
|
v-model="containinquer[item.prop]"
|
:clearable="item.clearable"
|
></el-input>
|
<el-select
|
v-if="item.type == 'select'"
|
:style="'width:calc(100% - ' + fixWidth(item.label) + 'px)'"
|
v-model="containinquer[item.prop]"
|
size="mini"
|
:clearable="item.clearable"
|
:multiple="item.multiple"
|
:filterable="item.filterable"
|
:collapse-tags="item.collapseTags"
|
:placeholder="'请选择' + item.label"
|
@change="$emit('selectchange', containinquer[item.prop])"
|
>
|
<el-option
|
v-for="(selectItem, selectIndex) in item.list"
|
:key="selectIndex + 'selet'"
|
:label="selectItem.label"
|
:value="selectItem.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</template>
|
</div>
|
|
<div class="flex">
|
<el-button v-if="inquerbuttonshow" type="primary" size="mini" @click="inquer">查询</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { throttle } from '@/utils/throttle';
|
import { GetDateStr } from '@/utils/date';
|
export default {
|
data() {
|
return {
|
iqnuer: {
|
startend: [GetDateStr(-15), GetDateStr(0)]
|
},
|
materia_name: '',
|
agvtypecodelist: []
|
};
|
},
|
props: {
|
addshow: {
|
type: Boolean,
|
default: false
|
},
|
delshow: {
|
type: Boolean,
|
default: false
|
},
|
templateShow: {
|
type: Boolean,
|
default: false
|
},
|
flexwrap: {
|
type: Boolean,
|
default: false
|
},
|
inquerShow: {
|
type: Boolean,
|
default: true
|
},
|
inquerbuttonshow: {
|
type: Boolean,
|
default: true
|
},
|
imexcel: {
|
type: Boolean,
|
default: false
|
},
|
derive: {
|
type: Boolean,
|
default: false
|
},
|
inuqerlist: {
|
type: Array,
|
default: () => []
|
},
|
elbuttonlist: {
|
type: Array,
|
default: () => []
|
},
|
containinquer: {
|
type: Object,
|
require: true
|
},
|
inquerWdith: {
|
type: String,
|
require: true
|
},
|
buttonWidth: {
|
type: String,
|
require: true
|
},
|
|
boxWdith: {
|
type: String,
|
require: true
|
},
|
buttonShow: {
|
type: Boolean,
|
default: false
|
}
|
},
|
mounted() {},
|
methods: {
|
fixWidth(val) {
|
let length = 0;
|
if (val.indexOf('(') != -1) {
|
length = val.length * 16 + 10;
|
} else {
|
length = val.length * 20;
|
}
|
if (length < 100) {
|
length = 80;
|
}
|
return length;
|
},
|
focussearch: throttle(function () {
|
this.emits();
|
}, 3000),
|
|
inquer: throttle(function () {
|
this.emits();
|
}, 1500),
|
|
emits() {
|
this.$emit('inquer');
|
},
|
|
reset() {
|
// this.containinquer = {};
|
// this.inquer();
|
},
|
//导入
|
httprequest(file) {
|
this.$emit('importfile', file);
|
},
|
//物料筛选
|
formquerySearchAsync(queryString, cb) {
|
let index = queryString.split('');
|
if (queryString && index.length > 1) {
|
let keywords = JSON.stringify({ keywords: queryString });
|
}
|
},
|
elautocom(el) {
|
this.iqnuer.material_code = el.label;
|
}
|
},
|
watch: {}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
#topinquer {
|
::v-deep .el-select {
|
width: 90%;
|
}
|
::v-deep .el-select > .el-input {
|
width: 100%;
|
}
|
::v-deep .el-input {
|
width: 100%;
|
}
|
::v-deep .el-date-editor--daterange.el-input,
|
.el-date-editor--daterange.el-input__inner,
|
.el-date-editor--timerange.el-input,
|
.el-date-editor--timerange.el-input__inner {
|
width: 70%;
|
}
|
}
|
</style>
|
