<template>
|
<el-col
|
v-if="buttonList!=null&&buttonList.length>0"
|
:span="24"
|
class="toolbar"
|
style="padding-bottom: 0px;"
|
>
|
<el-form :inline="true" @submit.native.prevent>
|
<el-form-item>
|
<el-input v-model="searchVal" clearable placeholder="请输入商品名称" style="width:200px"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-select v-model="ClassOptions" filterable clearable placeholder="请选择分类" style="width:150px">
|
<el-option
|
v-for="item in classModules"
|
:key="item.Id"
|
:value="item.Id"
|
:label="item.ClassName"
|
>
|
<span style="float: left">{{ item.ClassName }}</span>
|
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.LevelId }}级</span>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<div class="block">
|
<el-date-picker
|
v-model="CreateDate"
|
type="daterange"
|
unlink-panels
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:picker-options="pickerOptions"
|
:default-time="['00:00:00', '23:59:59']"
|
style="width:250px"
|
></el-date-picker>
|
</div>
|
</el-form-item>
|
<!-- 这个就是当前页面内，所有的btn列表 -->
|
<el-form-item v-for="item in buttonList" v-bind:key="item.id">
|
<!-- 这里触发点击事件 -->
|
<el-button
|
class="jbtn"
|
:type="item.Func&&(item.Func.toLowerCase().indexOf('handledel')!= -1 ||item.Func.toLowerCase().indexOf('stop')!= -1 )? 'danger':'primary'"
|
v-if="!item.IsHide"
|
@click="callFunc(item)"
|
>{{item.name}}</el-button>
|
</el-form-item>
|
</el-form>
|
</el-col>
|
</template>
|
<style scoped>
|
.jbtn {
|
background-color: #f90;
|
color: #f3f7fc;
|
border: 1px solid #f90;
|
}
|
.jbtn:hover {
|
background-color: #f90;
|
}
|
</style>
|
<script>
|
import {
|
//获取后台数据接口
|
getWMProductClassGet, //商品分类下拉列表API
|
} from "../../../api/api";
|
export default {
|
name: "Toolbar",
|
data() {
|
return {
|
classModules: [],
|
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]);
|
},
|
},
|
],
|
},
|
searchVal: "", //双向绑定搜索内容
|
ClassOptions: "", //分类下拉筛选
|
CreateDate: [], //创建时间筛选
|
};
|
},
|
props: ["buttonList"], //接受父组件传值
|
methods: {
|
callFunc(item) {
|
item.nameSearch = this.searchVal;
|
item.optionsSearch = this.ClassOptions;
|
item.startdateSearch = this.CreateDate[0];
|
item.enddateSearch = this.CreateDate[1];
|
this.$emit("callFunction", item); //将值传给父组件
|
},
|
},
|
mounted() {
|
//商品分类下拉列表
|
getWMProductClassGet().then((res) => {
|
this.classModules = res.data.response.classList;
|
});
|
},
|
};
|
</script>
|
