<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: 360px"
|
></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-select
|
v-model="StockTypeOptions"
|
clearable
|
placeholder="请选择台账类型"
|
style="width: 150px"
|
>
|
<el-option
|
v-for="item in stockTypeModules"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-select
|
v-model="WareHouseOptions"
|
filterable
|
clearable
|
placeholder="请选择所属仓库"
|
style="width: 150px"
|
>
|
<el-option
|
v-for="item in wareHouseModules"
|
:key="item.Id"
|
:value="item.Id"
|
:label="item.Name"
|
>
|
<span style="float: left">{{ item.Name }}</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 {
|
//获取后台数据接口
|
getWMWareHouseGet, //商品仓库下拉列表API
|
} from "../../../api/api";
|
export default {
|
name: "Toolbar",
|
data() {
|
return {
|
stockTypeModules: [
|
{ name: "初始化库存", value: 0 },
|
{ name: "采购入库", value: 1 },
|
{ name: "销售出库", value: 2 },
|
{ name: "库存盘点", value: 3 },
|
{ name: "报价入库", value: 4 },
|
],
|
wareHouseModules: [],
|
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: "", //双向绑定搜索内容
|
StockTypeOptions: "", //台账类型下拉筛选
|
WareHouseOptions: "", //所属仓库下拉筛选
|
CreateDate: [], //创建时间筛选
|
};
|
},
|
props: ["buttonList"], //接受父组件传值
|
methods: {
|
callFunc(item) {
|
item.nameSearch = this.searchVal;
|
item.stocktypeoptionsSearch = this.StockTypeOptions;
|
item.warehouseoptionsSearch = this.WareHouseOptions;
|
item.startdateSearch = this.CreateDate[0];
|
item.enddateSearch = this.CreateDate[1];
|
this.$emit("callFunction", item); //将值传给父组件
|
},
|
},
|
mounted() {
|
//仓库下拉列表
|
getWMWareHouseGet().then((res) => {
|
this.wareHouseModules = res.data.response.wareHouseList;
|
});
|
},
|
};
|
</script>
|
