erp-el-element/commontable/options.vue

1148 lines
32 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>