1162 lines
34 KiB
Vue
1162 lines
34 KiB
Vue
|
<template>
|
|||
|
<div class="home">
|
|||
|
<el-form
|
|||
|
label-position="right"
|
|||
|
label-width="90px"
|
|||
|
:inline="true"
|
|||
|
style="display: flex; flex-wrap: wrap"
|
|||
|
>
|
|||
|
<el-form-item>
|
|||
|
<div class="myinput">
|
|||
|
<div class="flex">
|
|||
|
<div class="flex-left">
|
|||
|
<!-- 分类,需要合并的 -->
|
|||
|
<!-- <div class="hbbox" v-show="packupFlag">
|
|||
|
<div v-for="(item, index) in hboptions" :key="index" class="box">
|
|||
|
<el-select v-model="model[item.enName]" :placeholder="item.placeholder" class="option"
|
|||
|
:style="hboptionWidth" @change="change(item.lable)" :clearable="item.clearable"
|
|||
|
:filterable="item.filterable" :size="item.size">
|
|||
|
<el-option v-for="item in item.options" :key="item.value" :label="item.label"
|
|||
|
:value="item.value">
|
|||
|
</el-option>
|
|||
|
</el-select>
|
|||
|
<div class="center" v-show="index != hboptions.length - 1">
|
|||
|
<el-divider direction="vertical"></el-divider>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div> -->
|
|||
|
<!-- 机器分类更多弹出框 -->
|
|||
|
<div class="machinemore" v-if="hboptions.length">
|
|||
|
<el-popover
|
|||
|
placement="bottom"
|
|||
|
:offset="120"
|
|||
|
width="450"
|
|||
|
v-model="machinevisible"
|
|||
|
trigger="manual"
|
|||
|
popper-class="machinebox"
|
|||
|
>
|
|||
|
<el-form
|
|||
|
label-position="top"
|
|||
|
label-width="90px"
|
|||
|
:inline="true"
|
|||
|
>
|
|||
|
<el-row :gutter="10">
|
|||
|
<el-col
|
|||
|
:span="12"
|
|||
|
v-for="(item, index) in hboptions"
|
|||
|
:key="index"
|
|||
|
>
|
|||
|
<el-form-item
|
|||
|
:label="item.lable"
|
|||
|
:prop="item.prop"
|
|||
|
v-show="item.show !== false"
|
|||
|
>
|
|||
|
<el-select
|
|||
|
v-model="model[item.enName]"
|
|||
|
:placeholder="item.placeholder"
|
|||
|
@change="
|
|||
|
change(item.lable, model[item.enName], item)
|
|||
|
"
|
|||
|
:clearable="item.clearable"
|
|||
|
:filterable="item.filterable"
|
|||
|
:size="item.size"
|
|||
|
v-loading="item.loading"
|
|||
|
@clear="clearhboptions(item.lable)"
|
|||
|
>
|
|||
|
<el-option
|
|||
|
v-for="item in item.options"
|
|||
|
:key="item.value"
|
|||
|
:label="item.label"
|
|||
|
:value="item.value"
|
|||
|
>
|
|||
|
</el-option>
|
|||
|
</el-select>
|
|||
|
</el-form-item>
|
|||
|
</el-col>
|
|||
|
</el-row>
|
|||
|
</el-form>
|
|||
|
<div class="btnbox1">
|
|||
|
<el-button size="mini" plain @click="machinecancel"
|
|||
|
>取消</el-button
|
|||
|
>
|
|||
|
<el-button
|
|||
|
size="mini"
|
|||
|
type="primary"
|
|||
|
plain
|
|||
|
@click="machinesearch"
|
|||
|
>查询</el-button
|
|||
|
>
|
|||
|
</div>
|
|||
|
<el-input
|
|||
|
readonly
|
|||
|
slot="reference"
|
|||
|
v-model="machineval"
|
|||
|
placeholder="请选择分类/品牌/型号"
|
|||
|
size="small"
|
|||
|
clearable
|
|||
|
@focus="machineFocus"
|
|||
|
@change="machinechange"
|
|||
|
@clear="machineclear"
|
|||
|
></el-input>
|
|||
|
</el-popover>
|
|||
|
</div>
|
|||
|
<!-- 动态加载的分类 -->
|
|||
|
<div v-if="false">
|
|||
|
<el-cascader
|
|||
|
:props="cascaderProps"
|
|||
|
ref="cascaderHandle"
|
|||
|
v-model="cascaderFrom"
|
|||
|
@expand-change="handleExpandChange"
|
|||
|
@visible-change="(v) => visibleChange(v, 'cascaderHandle')"
|
|||
|
@change="cascaderchange"
|
|||
|
clearable
|
|||
|
filterable
|
|||
|
:collapse-tags="true"
|
|||
|
size="small"
|
|||
|
placeholder="请选择分类/品牌/型号"
|
|||
|
class="dynamicLoading"
|
|||
|
></el-cascader>
|
|||
|
</div>
|
|||
|
<!-- 带弹窗 -->
|
|||
|
<div class="popover" v-if="tankuangVisible">
|
|||
|
<div class="item">
|
|||
|
<el-select
|
|||
|
v-model="value"
|
|||
|
placeholder="请选择"
|
|||
|
class="dateselect"
|
|||
|
size="small"
|
|||
|
@change="imeiselectchange"
|
|||
|
>
|
|||
|
<el-option
|
|||
|
v-for="item in popoveroptions"
|
|||
|
:key="item.enName"
|
|||
|
:label="item.lable"
|
|||
|
:value="item.enName"
|
|||
|
>
|
|||
|
</el-option>
|
|||
|
</el-select>
|
|||
|
<el-popover
|
|||
|
placement="bottom"
|
|||
|
trigger="manual"
|
|||
|
ref="popover"
|
|||
|
popper-class="popperOptions"
|
|||
|
v-model="imeipopover"
|
|||
|
>
|
|||
|
<el-input
|
|||
|
v-model="textarea"
|
|||
|
type="textarea"
|
|||
|
:rows="12"
|
|||
|
placeholder="一行一项,最多支持200行"
|
|||
|
resize="none"
|
|||
|
@input="imeichange(textarea)"
|
|||
|
/>
|
|||
|
<el-divider class="divider"></el-divider>
|
|||
|
<div class="btnbox">
|
|||
|
<div>
|
|||
|
<el-button size="mini" @click="imeiclose"
|
|||
|
>关闭</el-button
|
|||
|
>
|
|||
|
</div>
|
|||
|
<div>
|
|||
|
<el-button size="mini" @click="cleartext"
|
|||
|
>清空</el-button
|
|||
|
>
|
|||
|
<el-button
|
|||
|
size="mini"
|
|||
|
type="primary"
|
|||
|
plain
|
|||
|
@click="search"
|
|||
|
>查询</el-button
|
|||
|
>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
<el-input
|
|||
|
slot="reference"
|
|||
|
v-model="imeisn"
|
|||
|
size="small"
|
|||
|
class="ipt2"
|
|||
|
placeholder="请输入内容"
|
|||
|
@input="imeichange"
|
|||
|
:disabled="isinput"
|
|||
|
>
|
|||
|
<i
|
|||
|
slot="suffix"
|
|||
|
class="iconfont iconicon-piliangcaozuo imeiicondefault"
|
|||
|
:class="imeipopover ? 'imeiiconActive' : 'imeiicon'"
|
|||
|
style="font-size: 12px; margin-top: 4px"
|
|||
|
@click.prevent="imeiiconClick"
|
|||
|
></i>
|
|||
|
</el-input>
|
|||
|
</el-popover>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
|
|||
|
<!-- 日期 -->
|
|||
|
<div class="dateinput">
|
|||
|
<div class="item">
|
|||
|
<el-select
|
|||
|
v-model="dateval"
|
|||
|
placeholder="请选择"
|
|||
|
class="dateselect"
|
|||
|
size="small"
|
|||
|
@change="dateselectchange"
|
|||
|
>
|
|||
|
<el-option
|
|||
|
v-for="item in dateoptions"
|
|||
|
:key="item.enName"
|
|||
|
:label="item.lable"
|
|||
|
:value="item.enName"
|
|||
|
v-show="item.show"
|
|||
|
>
|
|||
|
</el-option>
|
|||
|
</el-select>
|
|||
|
<el-date-picker
|
|||
|
class="datepicker"
|
|||
|
v-model="datevalue"
|
|||
|
value-format="timestamp"
|
|||
|
:picker-options="pickerOptions"
|
|||
|
size="small"
|
|||
|
type="daterange"
|
|||
|
range-separator="-"
|
|||
|
start-placeholder="开始日期"
|
|||
|
end-placeholder="结束日期"
|
|||
|
:default-time="['00:00:00', '23:59:59']"
|
|||
|
@change="datechange"
|
|||
|
>
|
|||
|
</el-date-picker>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
<!-- 下拉项不需要合并的 -->
|
|||
|
<!-- <div
|
|||
|
:is="item.type"
|
|||
|
v-show="packupFlag"
|
|||
|
v-for="(item, index) in selectoptions"
|
|||
|
:key="index"
|
|||
|
v-model="model[item.enName]"
|
|||
|
:placeholder="item.placeholder"
|
|||
|
class="option"
|
|||
|
:style="optionWidth"
|
|||
|
:clearable="item.clearable"
|
|||
|
:filterable="item.filterable"
|
|||
|
:size="item.size"
|
|||
|
:multiple="item.multiple"
|
|||
|
@change="change(item.lable)"
|
|||
|
collapse-tags
|
|||
|
>
|
|||
|
<el-option
|
|||
|
v-for="item in item.options"
|
|||
|
:key="item.value"
|
|||
|
:label="item.label"
|
|||
|
:value="item.value"
|
|||
|
>
|
|||
|
</el-option>
|
|||
|
</div> -->
|
|||
|
</div>
|
|||
|
<!-- 按钮 -->
|
|||
|
<div class="searchbtnbox">
|
|||
|
<el-button
|
|||
|
type="primary"
|
|||
|
size="small"
|
|||
|
@click="search"
|
|||
|
class="btn searchbtn"
|
|||
|
>查询</el-button
|
|||
|
>
|
|||
|
<el-button size="small" @click="resetfrom" class="btn restbtn"
|
|||
|
>重置</el-button
|
|||
|
>
|
|||
|
<el-popover
|
|||
|
popper-class="machinebox"
|
|||
|
placement="bottom"
|
|||
|
width="450"
|
|||
|
trigger="manual"
|
|||
|
ref="popover"
|
|||
|
v-model="morepopover"
|
|||
|
v-if="morepopoverFlag"
|
|||
|
>
|
|||
|
<!-- 下拉项不需要合并的 -->
|
|||
|
<el-form label-position="top" label-width="90px" :inline="true">
|
|||
|
<el-row :gutter="10">
|
|||
|
<el-col
|
|||
|
:span="12"
|
|||
|
v-for="(item, index) in selectoptions"
|
|||
|
:key="index"
|
|||
|
>
|
|||
|
<el-form-item
|
|||
|
:label="item.lable"
|
|||
|
:prop="item.prop"
|
|||
|
v-show="item.show && !item.Composite"
|
|||
|
>
|
|||
|
<div
|
|||
|
:is="item.type"
|
|||
|
v-model="model[item.enName]"
|
|||
|
:placeholder="item.placeholder"
|
|||
|
class="option"
|
|||
|
:style="optionWidth"
|
|||
|
:clearable="item.clearable"
|
|||
|
:filterable="item.filterable"
|
|||
|
:size="item.size"
|
|||
|
:multiple="item.multiple"
|
|||
|
@change="change(item.lable, model[item.enName], item)"
|
|||
|
collapse-tags
|
|||
|
>
|
|||
|
<el-option
|
|||
|
v-for="item in item.options"
|
|||
|
:key="item.value"
|
|||
|
:label="item.label"
|
|||
|
:value="item.value"
|
|||
|
>
|
|||
|
</el-option>
|
|||
|
</div>
|
|||
|
</el-form-item>
|
|||
|
<el-form-item
|
|||
|
v-if="item.show && item.Composite"
|
|||
|
:label="item.lable"
|
|||
|
:prop="item.prop"
|
|||
|
>
|
|||
|
<Composite
|
|||
|
:key="componentKey"
|
|||
|
:data="item.options"
|
|||
|
:default="item.default"
|
|||
|
:content="item.placeholder"
|
|||
|
:enName="item.enName"
|
|||
|
@CompositeVal="CompositeVal"
|
|||
|
></Composite>
|
|||
|
</el-form-item>
|
|||
|
</el-col>
|
|||
|
</el-row>
|
|||
|
</el-form>
|
|||
|
<div class="morebtnbox">
|
|||
|
<el-button size="mini" plain @click="moreclear"
|
|||
|
>取消</el-button
|
|||
|
>
|
|||
|
<el-button
|
|||
|
size="mini"
|
|||
|
type="primary"
|
|||
|
plain
|
|||
|
@click="moresearch"
|
|||
|
>查询</el-button
|
|||
|
>
|
|||
|
</div>
|
|||
|
<el-button
|
|||
|
slot="reference"
|
|||
|
size="small"
|
|||
|
@click="morescreen"
|
|||
|
class="btn morebtn"
|
|||
|
>更多筛选</el-button
|
|||
|
>
|
|||
|
</el-popover>
|
|||
|
<!-- <el-button size="small" @click="packup" class="btn packup">{{
|
|||
|
packupFlag ? "收起筛选" : "高级筛选"
|
|||
|
}}</el-button> -->
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</el-form-item>
|
|||
|
</el-form>
|
|||
|
</div>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
import Composite from "./../CommonInput/Composite.vue";
|
|||
|
import {
|
|||
|
cate_brand_list_in_stock,
|
|||
|
res_advanced_search,
|
|||
|
} from "./../api/InventoryManagement";
|
|||
|
|
|||
|
export default {
|
|||
|
name: "erpOption",
|
|||
|
components: { Composite },
|
|||
|
props: {
|
|||
|
data: {
|
|||
|
default: () => {
|
|||
|
return [];
|
|||
|
},
|
|||
|
},
|
|||
|
// 是否禁用
|
|||
|
disabled: {
|
|||
|
type: Boolean,
|
|||
|
default: false,
|
|||
|
},
|
|||
|
//合并的下拉框样式
|
|||
|
hboptionWidth: {
|
|||
|
default: () => {
|
|||
|
return {
|
|||
|
width: "150px",
|
|||
|
marginLeft: "10px",
|
|||
|
};
|
|||
|
},
|
|||
|
},
|
|||
|
optionWidth: {
|
|||
|
default: () => {
|
|||
|
return {
|
|||
|
minWidth: "150px",
|
|||
|
marginLeft: "10px",
|
|||
|
marginBottom: "10px",
|
|||
|
};
|
|||
|
},
|
|||
|
},
|
|||
|
iptWidth: {
|
|||
|
type: Number,
|
|||
|
default: 830,
|
|||
|
},
|
|||
|
model: {
|
|||
|
default: () => {
|
|||
|
return "";
|
|||
|
},
|
|||
|
},
|
|||
|
//是否显示更多筛选
|
|||
|
morepopoverFlag: {
|
|||
|
default: () => true,
|
|||
|
},
|
|||
|
//是否显示带弹框项
|
|||
|
tankuangVisible:{
|
|||
|
default:()=> true
|
|||
|
}
|
|||
|
},
|
|||
|
watch: {
|
|||
|
data(newval, old) {
|
|||
|
console.log(newval, "zi------------------------", newval);
|
|||
|
},
|
|||
|
},
|
|||
|
computed: {
|
|||
|
//合并的input盒子总宽度
|
|||
|
styleIptWidth() {
|
|||
|
return {
|
|||
|
"--myinput-width": this.iptWidth + "px",
|
|||
|
};
|
|||
|
},
|
|||
|
//分类-需要合并的
|
|||
|
hboptions() {
|
|||
|
let arr = [];
|
|||
|
let flagarr = this.flagArr;
|
|||
|
arr = this.data.filter((item) => {
|
|||
|
return flagarr.includes(item.lable);
|
|||
|
});
|
|||
|
console.log(arr, "arr-----------");
|
|||
|
return arr;
|
|||
|
},
|
|||
|
//普通input
|
|||
|
inputoptions() {
|
|||
|
let arr = [];
|
|||
|
let flagarr = this.flagArr;
|
|||
|
arr = this.data.filter((item) => {
|
|||
|
return (
|
|||
|
!flagarr.includes(item.lable) &&
|
|||
|
item.type == "el-input" &&
|
|||
|
!item.ispopover
|
|||
|
);
|
|||
|
});
|
|||
|
console.log(arr, "arr-----------");
|
|||
|
return arr;
|
|||
|
},
|
|||
|
//日期
|
|||
|
dateoptions() {
|
|||
|
let arr = [];
|
|||
|
arr = this.data.filter((item) => {
|
|||
|
return item.format == "timestamp" && item.show == true;
|
|||
|
});
|
|||
|
arr.findIndex((item) => item.enName == this.dateval) == -1
|
|||
|
? this.$set(this, "dateval", arr[0].enName)
|
|||
|
: "";
|
|||
|
console.log(arr, "arr-----------日期");
|
|||
|
return arr;
|
|||
|
},
|
|||
|
//带弹出框
|
|||
|
popoveroptions() {
|
|||
|
let arr = [];
|
|||
|
arr = this.data.filter((item) => {
|
|||
|
return item.ispopover == true;
|
|||
|
});
|
|||
|
console.log(arr, "arr-----------");
|
|||
|
return arr;
|
|||
|
},
|
|||
|
// 下拉项不需要合并
|
|||
|
selectoptions() {
|
|||
|
let arr = [];
|
|||
|
let flagarr = this.flagArr;
|
|||
|
arr = this.data.filter((item) => {
|
|||
|
return (
|
|||
|
!flagarr.includes(item.lable) &&
|
|||
|
item.format != "timestamp" &&
|
|||
|
!item.ispopover
|
|||
|
);
|
|||
|
});
|
|||
|
console.log(arr, "arr-----------");
|
|||
|
return arr;
|
|||
|
},
|
|||
|
},
|
|||
|
data() {
|
|||
|
return {
|
|||
|
flagArr: ["分类", "品牌", "型号", "颜色", "容量"], //需要合并的数据
|
|||
|
value: "imei", //imei||sn的下拉项
|
|||
|
datevalue: "", //时间v-model
|
|||
|
imeisn: "", //质检码||sn
|
|||
|
textarea: "", //文本域v-model
|
|||
|
dateval: "time", //日期下拉项
|
|||
|
packupFlag: false, //收起
|
|||
|
cascaderFrom: [],
|
|||
|
cascaderProps: {
|
|||
|
multiple: false,
|
|||
|
checkStrictly: true,
|
|||
|
lazy: true,
|
|||
|
lazyLoad: this.lazyLoad,
|
|||
|
},
|
|||
|
colorList: [],
|
|||
|
imeipopover: false, //带弹窗的imei输入框
|
|||
|
machineval: "", //机器分类更多弹出框-input回显文本
|
|||
|
machinevisible: false, //机器分类更多弹出框
|
|||
|
machinevals: {
|
|||
|
fenlei: "",
|
|||
|
pinpai: "",
|
|||
|
xinghao: "",
|
|||
|
yanse: "",
|
|||
|
rongliang: "",
|
|||
|
},
|
|||
|
componentKey: "",
|
|||
|
morepopover: false, //更多筛选
|
|||
|
isinput: false, //是否可以输入
|
|||
|
pickerOptions: {
|
|||
|
disabledDate(time) {
|
|||
|
return (
|
|||
|
time.getTime() >
|
|||
|
new Date(new Date().toLocaleDateString()).getTime() +
|
|||
|
24 * 60 * 60 * 1000 -
|
|||
|
1
|
|||
|
);
|
|||
|
},
|
|||
|
shortcuts: [
|
|||
|
{
|
|||
|
text: "本月",
|
|||
|
onClick(picker) {
|
|||
|
const end =
|
|||
|
new Date(new Date().toLocaleDateString()).getTime() +
|
|||
|
24 * 60 * 60 * 1000 -
|
|||
|
1;
|
|||
|
const time = new Date();
|
|||
|
time.setDate(1);
|
|||
|
time.setHours(0);
|
|||
|
time.setSeconds(0);
|
|||
|
time.setMinutes(0);
|
|||
|
var start = time.getTime();
|
|||
|
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]);
|
|||
|
},
|
|||
|
},
|
|||
|
{
|
|||
|
text: "最近一年",
|
|||
|
onClick(picker) {
|
|||
|
const end = new Date();
|
|||
|
const start = new Date();
|
|||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
|
|||
|
picker.$emit("pick", [start, end]);
|
|||
|
},
|
|||
|
},
|
|||
|
],
|
|||
|
},
|
|||
|
};
|
|||
|
},
|
|||
|
|
|||
|
methods: {
|
|||
|
// 获取机器类型
|
|||
|
lazyLoad(node, resolve) {
|
|||
|
const { level } = node;
|
|||
|
if (!node.data) {
|
|||
|
cate_brand_list_in_stock().then((res) => {
|
|||
|
const nodes = Array.from(res.datas).map((res) => {
|
|||
|
return {
|
|||
|
label: res.label,
|
|||
|
value: res.value,
|
|||
|
leaf: false,
|
|||
|
type: "shouji",
|
|||
|
};
|
|||
|
});
|
|||
|
resolve(nodes);
|
|||
|
});
|
|||
|
} else if (node.data.type == "shouji") {
|
|||
|
cate_brand_list_in_stock({ cate_id: node.data.value }).then((res) => {
|
|||
|
const nodes = Array.from(res.datas).map((item) => ({
|
|||
|
value: item.value,
|
|||
|
label: item.label,
|
|||
|
leaf: false,
|
|||
|
type: "pinpai",
|
|||
|
}));
|
|||
|
console.log("请求");
|
|||
|
resolve(nodes);
|
|||
|
});
|
|||
|
} else if (node.data.type == "pinpai") {
|
|||
|
cate_brand_list_in_stock({
|
|||
|
cate_id: node.path[0],
|
|||
|
brand_id: node.path[1],
|
|||
|
}).then((res) => {
|
|||
|
const nodes = Array.from(res.datas).map((item) => ({
|
|||
|
value: item.value,
|
|||
|
label: item.label,
|
|||
|
leaf: true,
|
|||
|
type: "xinghao",
|
|||
|
}));
|
|||
|
resolve(nodes);
|
|||
|
});
|
|||
|
}
|
|||
|
// else if (node.data.type == 'xinghao') {
|
|||
|
// cate_brand_list_in_stock({ cate_id: node.path[0], brand_id: node.path[1], model_id: node.path[2] }).then((res) => {
|
|||
|
// if (res.datas.length != 0) {
|
|||
|
// const nodes = Array.from(res.datas.rom_list).map(item => ({
|
|||
|
// value: item.value,
|
|||
|
// label: item.label,
|
|||
|
// leaf: level >= 4,
|
|||
|
// type: 'rom'
|
|||
|
// }))
|
|||
|
// this.colorList = res.datas.color_list
|
|||
|
// resolve(nodes);
|
|||
|
// } else {
|
|||
|
// resolve();
|
|||
|
// }
|
|||
|
// })
|
|||
|
// }
|
|||
|
// else if (node.data.type == 'rom') {
|
|||
|
// const nodes = this.colorList.map(item => ({
|
|||
|
// value: item.value,
|
|||
|
// label: item.label,
|
|||
|
// leaf: level >= 4
|
|||
|
// }))
|
|||
|
// resolve(nodes);
|
|||
|
// }
|
|||
|
else {
|
|||
|
resolve();
|
|||
|
}
|
|||
|
},
|
|||
|
handleExpandChange(e) {
|
|||
|
console.log(e);
|
|||
|
// this.cascaderFrom.push(e)
|
|||
|
},
|
|||
|
cleartext() {
|
|||
|
this.isinput = false;
|
|||
|
this.textarea = "";
|
|||
|
this.imeisn = "";
|
|||
|
this.$emit("imeichange", this.value, "");
|
|||
|
this.$emit("cleartext");
|
|||
|
},
|
|||
|
//点击imei关闭
|
|||
|
imeiclose() {
|
|||
|
this.imeipopover = false;
|
|||
|
},
|
|||
|
//点击imei小图标
|
|||
|
imeiiconClick() {
|
|||
|
this.imeipopover = !this.imeipopover;
|
|||
|
},
|
|||
|
imeichange() {
|
|||
|
const rep = /[^\s]+/g;
|
|||
|
let imeisn = "";
|
|||
|
this.textarea ? (this.isinput = true) : (this.isinput = false);
|
|||
|
if (this.textarea) {
|
|||
|
this.imeisn = "";
|
|||
|
imeisn = this._.words(this.textarea, rep).join();
|
|||
|
} else {
|
|||
|
this.textarea = "";
|
|||
|
imeisn = this.imeisn;
|
|||
|
}
|
|||
|
this.$emit("imeichange", this.value, imeisn);
|
|||
|
this.$forceUpdate();
|
|||
|
// console.log("zi-------------------", imeisn);
|
|||
|
},
|
|||
|
//下拉项change
|
|||
|
change(label, model, itm) {
|
|||
|
// console.log(label, model,"99999");
|
|||
|
if (this.flagArr.includes(label)) {
|
|||
|
let result = "";
|
|||
|
this.hboptions.forEach((item) => {
|
|||
|
if (item.lable == label) {
|
|||
|
result = item.options.find((item_) => item_.value == model);
|
|||
|
}
|
|||
|
});
|
|||
|
//分类,品牌,型号,颜色,容量
|
|||
|
switch (label) {
|
|||
|
case "分类":
|
|||
|
if (result && result.label) {
|
|||
|
this.machinevals.fenlei = result.label;
|
|||
|
this.machinevals.pinpai = "";
|
|||
|
this.machinevals.xinghao = "";
|
|||
|
this.machinevals.yanse = "";
|
|||
|
this.machinevals.rongliang = "";
|
|||
|
}
|
|||
|
break;
|
|||
|
case "品牌":
|
|||
|
if (result && result.label) {
|
|||
|
this.machinevals.pinpai = result.label;
|
|||
|
this.machinevals.xinghao = "";
|
|||
|
this.machinevals.yanse = "";
|
|||
|
this.machinevals.rongliang = "";
|
|||
|
}
|
|||
|
break;
|
|||
|
case "型号":
|
|||
|
if (result && result.label) {
|
|||
|
this.machinevals.xinghao = result.label;
|
|||
|
this.machinevals.yanse = "";
|
|||
|
this.machinevals.rongliang = "";
|
|||
|
}
|
|||
|
break;
|
|||
|
case "颜色":
|
|||
|
if (result && result.label) this.machinevals.yanse = result.label;
|
|||
|
break;
|
|||
|
case "容量":
|
|||
|
if (result && result.label)
|
|||
|
this.machinevals.rongliang = result.label;
|
|||
|
break;
|
|||
|
default:
|
|||
|
break;
|
|||
|
}
|
|||
|
this.machineval = [
|
|||
|
this.machinevals.fenlei,
|
|||
|
this.machinevals.pinpai,
|
|||
|
this.machinevals.xinghao,
|
|||
|
this.machinevals.yanse,
|
|||
|
this.machinevals.rongliang,
|
|||
|
]
|
|||
|
.filter((item) => item != "")
|
|||
|
.join("/");
|
|||
|
}
|
|||
|
this.$emit("change", label, model, itm);
|
|||
|
},
|
|||
|
clearhboptions(label) {
|
|||
|
if (this.flagArr.includes(label)) {
|
|||
|
switch (label) {
|
|||
|
case "分类":
|
|||
|
this.machinevals.fenlei = "";
|
|||
|
this.machinevals.pinpai = "";
|
|||
|
this.machinevals.xinghao = "";
|
|||
|
this.machinevals.yanse = "";
|
|||
|
this.machinevals.rongliang = "";
|
|||
|
break;
|
|||
|
case "品牌":
|
|||
|
this.machinevals.pinpai = "";
|
|||
|
this.machinevals.xinghao = "";
|
|||
|
this.machinevals.yanse = "";
|
|||
|
this.machinevals.rongliang = "";
|
|||
|
break;
|
|||
|
case "型号":
|
|||
|
this.machinevals.xinghao = "";
|
|||
|
this.machinevals.yanse = "";
|
|||
|
this.machinevals.rongliang = "";
|
|||
|
break;
|
|||
|
case "颜色":
|
|||
|
this.machinevals.yanse = "";
|
|||
|
break;
|
|||
|
case "容量":
|
|||
|
this.machinevals.rongliang = "";
|
|||
|
break;
|
|||
|
default:
|
|||
|
break;
|
|||
|
}
|
|||
|
this.machineval = [
|
|||
|
this.machinevals.fenlei,
|
|||
|
this.machinevals.pinpai,
|
|||
|
this.machinevals.xinghao,
|
|||
|
this.machinevals.yanse,
|
|||
|
this.machinevals.rongliang,
|
|||
|
]
|
|||
|
.filter((item) => item != "")
|
|||
|
.join("/");
|
|||
|
console.log(this.machineval, " this.machineval");
|
|||
|
}
|
|||
|
},
|
|||
|
// 查询
|
|||
|
search(val) {
|
|||
|
this.imeipopover = false;
|
|||
|
this.$emit("search");
|
|||
|
},
|
|||
|
//重置
|
|||
|
resetfrom() {
|
|||
|
this.isinput = false;
|
|||
|
this.textarea = "";
|
|||
|
this.imeisn = "";
|
|||
|
this.datevalue = "";
|
|||
|
this.machineval = ""; //机器分类更多弹出框-input回显文本
|
|||
|
this.$emit("resetfrom");
|
|||
|
this.$emit("search");
|
|||
|
this.componentKey += 1;
|
|||
|
// console.log( this.$children," this.$children");
|
|||
|
},
|
|||
|
//更多筛选
|
|||
|
morescreen() {
|
|||
|
this.morepopover = !this.morepopover;
|
|||
|
},
|
|||
|
//收起
|
|||
|
packup() {
|
|||
|
this.packupFlag = !this.packupFlag;
|
|||
|
},
|
|||
|
//imei下拉change
|
|||
|
imeiselectchange(e) {
|
|||
|
this.imeisn = "";
|
|||
|
this.textarea = "";
|
|||
|
this.textarea ? (this.isinput = true) : (this.isinput = false);
|
|||
|
this.$emit("imeichange", this.value, this.imeisn);
|
|||
|
console.log(e, "imei下拉----------");
|
|||
|
},
|
|||
|
//日期下拉change
|
|||
|
dateselectchange(e) {
|
|||
|
// console.log(e, "日期下拉----------111", this.datevalue);
|
|||
|
this.datevalue = [];
|
|||
|
this.$emit("datevalue", e, this.datevalue);
|
|||
|
},
|
|||
|
//日期change
|
|||
|
datechange(e) {
|
|||
|
this.$emit("datevalue", this.dateval, e);
|
|||
|
// console.log(e, "日期change---------", this.dateval);
|
|||
|
},
|
|||
|
/**
|
|||
|
* 修改默认日期
|
|||
|
* @param {String} e
|
|||
|
* @param {Array} time
|
|||
|
*/
|
|||
|
changeDefaultDate(e,time){
|
|||
|
this.dateval = e;
|
|||
|
this.datechange(time)
|
|||
|
},
|
|||
|
//动态加载分类-change
|
|||
|
cascaderchange(e) {
|
|||
|
console.log(e, "e------------", e.length, this.cascaderFrom);
|
|||
|
// 选中节点后,关闭下拉
|
|||
|
// this.$refs.cascaderHandle.dropDownVisible = false;
|
|||
|
},
|
|||
|
//动态加载input加自定义内容
|
|||
|
visibleChange(visible, refName) {
|
|||
|
if (visible) {
|
|||
|
const ref = this.$refs[refName];
|
|||
|
let popper = ref.$refs.popper;
|
|||
|
if (popper.$el) popper = popper.$el;
|
|||
|
if (
|
|||
|
!Array.from(popper.children).some(
|
|||
|
(v) => v.className === "el-template-menu__list"
|
|||
|
)
|
|||
|
) {
|
|||
|
const el = document.createElement("div");
|
|||
|
el.className = "el-template-menu__list";
|
|||
|
el.style =
|
|||
|
"border-top:1px solid rgb(219 225 241); padding:0; color:rgb(64 158 255);font-size: 13px";
|
|||
|
el.innerHTML = `<div class="" style="display:flex;justify-content: flex-end;padding:8px;">
|
|||
|
<button id="btn1" class="el-button btn restbtn el-button--default el-button--small">取消</button>
|
|||
|
<button id="btn2" class="el-button btn searchbtn el-button--primary el-button--small">确定</button>
|
|||
|
</div>`;
|
|||
|
popper.appendChild(el);
|
|||
|
document.getElementById("btn1").onclick = (e) => {
|
|||
|
console.log(e);
|
|||
|
ref.toggleDropDownVisible(false);
|
|||
|
};
|
|||
|
document.getElementById("btn2").onclick = (e) => {
|
|||
|
console.log(e);
|
|||
|
ref.toggleDropDownVisible(false);
|
|||
|
};
|
|||
|
}
|
|||
|
}
|
|||
|
},
|
|||
|
//机器分类更多弹出框
|
|||
|
machineFocus() {
|
|||
|
this.machinevisible = true;
|
|||
|
},
|
|||
|
//机器分类更多弹出框-查询
|
|||
|
machinesearch() {
|
|||
|
console.log(this.model);
|
|||
|
this.machinevisible = false;
|
|||
|
this.$emit("search");
|
|||
|
},
|
|||
|
//机器分类更多弹出框-change
|
|||
|
machinechange(e) {
|
|||
|
console.log(e, "e------------------change");
|
|||
|
},
|
|||
|
//机器分类更多弹出框-清除
|
|||
|
machineclear() {
|
|||
|
this.machinevals.fenlei = "";
|
|||
|
this.machinevals.pinpai = "";
|
|||
|
this.machinevals.xinghao = "";
|
|||
|
this.machinevals.yanse = "";
|
|||
|
this.machinevals.rongliang = "";
|
|||
|
this.$emit("machineclear");
|
|||
|
console.log("e------------------清除");
|
|||
|
},
|
|||
|
//机器分类更多弹出框取消
|
|||
|
machinecancel() {
|
|||
|
this.machinevisible = false;
|
|||
|
},
|
|||
|
//更多筛选-取消
|
|||
|
moreclear() {
|
|||
|
this.morepopover = false;
|
|||
|
},
|
|||
|
//更多筛选-查询
|
|||
|
moresearch(val) {
|
|||
|
this.morepopover = false;
|
|||
|
this.$emit("search", val);
|
|||
|
},
|
|||
|
CompositeVal(val) {
|
|||
|
this.$emit("CompositeVal", val);
|
|||
|
},
|
|||
|
},
|
|||
|
deactivated() {
|
|||
|
this.imeipopover = false;
|
|||
|
this.morepopover = false;
|
|||
|
this.machinevisible = false;
|
|||
|
},
|
|||
|
};
|
|||
|
</script>
|
|||
|
|
|||
|
<style lang="scss">
|
|||
|
.popperOptions {
|
|||
|
min-width: 200px !important;
|
|||
|
padding: 0px !important;
|
|||
|
}
|
|||
|
|
|||
|
.machinebox {
|
|||
|
display: flex;
|
|||
|
flex-wrap: wrap;
|
|||
|
|
|||
|
.machine {
|
|||
|
margin-bottom: 5px;
|
|||
|
}
|
|||
|
|
|||
|
.btnbox1 {
|
|||
|
width: 100%;
|
|||
|
display: flex;
|
|||
|
justify-content: flex-end;
|
|||
|
}
|
|||
|
}
|
|||
|
</style>
|
|||
|
<style lang="scss" scoped>
|
|||
|
.divider {
|
|||
|
margin: 0;
|
|||
|
}
|
|||
|
|
|||
|
.btnbox {
|
|||
|
padding: 5px;
|
|||
|
display: flex;
|
|||
|
justify-content: space-between;
|
|||
|
}
|
|||
|
|
|||
|
::v-deep .el-form-item {
|
|||
|
width: 100%;
|
|||
|
margin-bottom: 0;
|
|||
|
margin-right: 0;
|
|||
|
}
|
|||
|
.el-form {
|
|||
|
width: 100%;
|
|||
|
line-height: 0px;
|
|||
|
}
|
|||
|
.home {
|
|||
|
display: flex;
|
|||
|
padding: 15px 20px;
|
|||
|
box-sizing: border-box;
|
|||
|
background: #fff;
|
|||
|
}
|
|||
|
|
|||
|
::v-deep .el-form-item__content {
|
|||
|
width: 100%;
|
|||
|
line-height: 32px;
|
|||
|
}
|
|||
|
|
|||
|
.myinput {
|
|||
|
.flex {
|
|||
|
width: 100%;
|
|||
|
display: flex;
|
|||
|
flex-wrap: wrap;
|
|||
|
.flex-left {
|
|||
|
display: flex;
|
|||
|
}
|
|||
|
.hbbox {
|
|||
|
display: flex;
|
|||
|
border: 1px solid #ccc;
|
|||
|
border-radius: 4px;
|
|||
|
height: 34px;
|
|||
|
margin-left: 10px;
|
|||
|
margin-bottom: 10px;
|
|||
|
}
|
|||
|
|
|||
|
.dynamicLoading {
|
|||
|
margin-left: 10px;
|
|||
|
|
|||
|
::v-deep .el-input.el-input--small.el-input--suffix {
|
|||
|
.el-input__inner[style="height: 34px;"] {
|
|||
|
height: 32px !important;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.box {
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
|
|||
|
.option {
|
|||
|
width: 100px;
|
|||
|
|
|||
|
::v-deep .el-input__inner {
|
|||
|
border: none;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.machinemore {
|
|||
|
// padding-left: 10px;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
.dateselect {
|
|||
|
max-width: 135px;
|
|||
|
}
|
|||
|
.popover {
|
|||
|
display: flex;
|
|||
|
margin: 0 10px;
|
|||
|
.ipt2 {
|
|||
|
.imeiicondefault {
|
|||
|
padding: 5px;
|
|||
|
border-radius: 4px;
|
|||
|
background: #f0f2f5;
|
|||
|
cursor: pointer;
|
|||
|
}
|
|||
|
|
|||
|
.imeiiconActive {
|
|||
|
color: #409eff;
|
|||
|
background: #e9f1fc;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
.item {
|
|||
|
width: 100%;
|
|||
|
display: flex;
|
|||
|
span {
|
|||
|
width: calc(100% - 135px);
|
|||
|
display: inline-block;
|
|||
|
font-size: 12px;
|
|||
|
color: #606266;
|
|||
|
}
|
|||
|
}
|
|||
|
::v-deep .el-textarea__inner {
|
|||
|
border: none;
|
|||
|
}
|
|||
|
|
|||
|
::v-deep .popover {
|
|||
|
.dateselect {
|
|||
|
.el-input__inner {
|
|||
|
position: relative;
|
|||
|
border-radius: 4px 0 0 4px;
|
|||
|
z-index: 1;
|
|||
|
}
|
|||
|
}
|
|||
|
.ipt2 {
|
|||
|
margin-left: -1px;
|
|||
|
}
|
|||
|
.el-input__inner {
|
|||
|
border-radius: 0 4px 4px 0;
|
|||
|
}
|
|||
|
.el-input__inner:hover {
|
|||
|
position: relative;
|
|||
|
z-index: 1;
|
|||
|
}
|
|||
|
.el-input.is-active .el-input__inner,
|
|||
|
.el-input__inner:focus {
|
|||
|
position: relative;
|
|||
|
z-index: 1;
|
|||
|
}
|
|||
|
.el-input__suffix {
|
|||
|
z-index: 1;
|
|||
|
}
|
|||
|
}
|
|||
|
::v-deep .dateinput {
|
|||
|
display: flex;
|
|||
|
.el-select .el-input__inner {
|
|||
|
min-width: 135px;
|
|||
|
position: relative;
|
|||
|
border-radius: 4px 0 0 4px;
|
|||
|
z-index: 1;
|
|||
|
}
|
|||
|
.el-input__suffix {
|
|||
|
z-index: 1;
|
|||
|
}
|
|||
|
.el-input__inner:hover,
|
|||
|
.el-select:hover .el-input__inner {
|
|||
|
position: relative;
|
|||
|
z-index: 1;
|
|||
|
}
|
|||
|
.el-range-editor.is-active,
|
|||
|
.el-range-editor.is-active:hover,
|
|||
|
.el-select .el-input.is-focus .el-input__inner {
|
|||
|
position: relative;
|
|||
|
z-index: 1;
|
|||
|
}
|
|||
|
.el-range-editor.el-input__inner {
|
|||
|
width: 100%;
|
|||
|
max-width: 240px;
|
|||
|
border-radius: 0px 4px 4px 0px;
|
|||
|
margin-left: -1px;
|
|||
|
}
|
|||
|
}
|
|||
|
.searchbtnbox {
|
|||
|
padding-left: 10px;
|
|||
|
.btn {
|
|||
|
height: 32px;
|
|||
|
}
|
|||
|
|
|||
|
.morebtn {
|
|||
|
margin: 0 10px;
|
|||
|
}
|
|||
|
}
|
|||
|
.machinebox {
|
|||
|
.el-form-item {
|
|||
|
margin-right: 0px !important;
|
|||
|
}
|
|||
|
|
|||
|
.el-input {
|
|||
|
margin: 0px !important;
|
|||
|
}
|
|||
|
.el-select {
|
|||
|
width: 100%;
|
|||
|
margin: 0px !important;
|
|||
|
}
|
|||
|
}
|
|||
|
::v-deep .el-form-item__label {
|
|||
|
padding: 0 !important;
|
|||
|
}
|
|||
|
.morebtnbox {
|
|||
|
width: 100%;
|
|||
|
display: flex;
|
|||
|
justify-content: flex-end;
|
|||
|
margin-top: 10px;
|
|||
|
}
|
|||
|
::v-deep .Merchant {
|
|||
|
// .el-form-item__content {
|
|||
|
// width: 192px;
|
|||
|
// margin-left: 10px;
|
|||
|
// }
|
|||
|
}
|
|||
|
// ::v-deep .el-input__inner,.el-input{
|
|||
|
// min-width: 230px;
|
|||
|
// max-width: 230px;
|
|||
|
// }
|
|||
|
.el-row {
|
|||
|
display: flex;
|
|||
|
flex-wrap: wrap;
|
|||
|
}
|
|||
|
</style>
|
|||
|
|