1148 lines
32 KiB
Vue
1148 lines
32 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="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" v-if="dateoptions&&dateoptions.length>0">
|
||
<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: "erpOptions",
|
||
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;
|
||
});
|
||
if(arr.length>0){
|
||
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>
|
||
|