<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: 300px"
|
></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-select
|
v-model="StatusOptions"
|
clearable
|
placeholder="请选择审核状态"
|
style="width: 150px"
|
>
|
<el-option
|
v-for="item in StatusModules"
|
:key="item.Value"
|
:label="item.Text"
|
: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>
|
<el-select
|
v-model="PayTypeOptions"
|
clearable
|
placeholder="请选择领料类型"
|
style="width: 150px"
|
>
|
<el-option
|
v-for="item in payTypeModules"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value"
|
></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
|
WMSaleInfoGetParams, //枚举状态列表API
|
} from "../../../api/api";
|
export default {
|
name: "Toolbar",
|
data() {
|
return {
|
wareHouseModules: [],
|
payTypeModules: [
|
{ name: "对内领料", value: 1 },
|
{ name: "对外领料", value: 2 },
|
],
|
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]);
|
},
|
},
|
],
|
},
|
StatusModules: [],
|
searchVal: "", //双向绑定搜索内容
|
WareHouseOptions: "", //仓库下拉筛选
|
PayTypeOptions: "", //领料类型下拉筛选
|
CreateDate: [], //创建时间筛选
|
StatusOptions: "", //状态下拉筛选
|
};
|
},
|
props: ["buttonList"], //接受父组件传值
|
methods: {
|
callFunc(item) {
|
item.nameSearch = this.searchVal;
|
item.optionsSearch = this.WareHouseOptions;
|
item.typeoptionsSearch = this.PayTypeOptions;
|
item.startdateSearch = this.CreateDate[0];
|
item.enddateSearch = this.CreateDate[1];
|
item.statusoptionsSearch = this.StatusOptions;
|
this.$emit("callFunction", item); //将值传给父组件
|
},
|
},
|
mounted() {
|
//商品仓库下拉列表
|
getWMWareHouseGet().then((res) => {
|
this.wareHouseModules = res.data.response.wareHouseList;
|
});
|
|
//获取枚举状态类
|
WMSaleInfoGetParams({}).then((res) => {
|
if (!res.data.success) {
|
this.$message({
|
message: res.data.msg,
|
type: "error",
|
});
|
}
|
var info = res.data.response;
|
let tStatus = [];
|
|
for (var i = 0, c = info.dicStatus.length; i < c; i++) {
|
var it = info.dicStatus[i];
|
tStatus.push({ Value: it.Key, Text: it.Value || "" });
|
}
|
this.StatusModules = tStatus;
|
});
|
},
|
};
|
</script>
|
