<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-select
|
v-model="DepartmentOptions"
|
filterable
|
clearable
|
placeholder="请选择所属部门"
|
style="width:150px"
|
>
|
<el-option
|
v-for="item in departmentModules"
|
: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="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="SupplierOptions"
|
filterable
|
clearable
|
placeholder="请选择供应商"
|
style="width:150px"
|
>
|
<el-option
|
v-for="item in supplierModules"
|
: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="OutInTypeOptions" clearable placeholder="请选择出入库类型" style="width:150px">
|
<el-option
|
v-for="item in outInTypeModules"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</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 {
|
//获取后台数据接口
|
getDepartmentGet, //部门下拉列表API
|
getWMWareHouseGet, //仓库下拉列表API
|
getWMSupplierGet, //供应商下拉列表API
|
} from "../../../api/api";
|
export default {
|
name: "Toolbar",
|
data() {
|
return {
|
departmentModules: [],
|
wareHouseModules: [],
|
supplierModules: [],
|
outInTypeModules: [{ name: "普通采购", value: 1 }],
|
DepartmentOptions: "", //部门下拉筛选
|
WareHouseOptions: "", //仓库下拉筛选
|
SupplierOptions: "", //供应商下拉筛选
|
OutInTypeOptions: "", //出入库类型下拉筛选
|
};
|
},
|
props: ["buttonList"], //接受父组件传值
|
methods: {
|
callFunc(item) {
|
item.departmentoptionsSearch = this.DepartmentOptions;
|
item.warehouseoptionsSearch = this.WareHouseOptions;
|
item.supplieroptionsSearch = this.SupplierOptions;
|
item.typeoptionsSearch = this.OutInTypeOptions;
|
this.$emit("callFunction", item); //将值传给父组件
|
},
|
},
|
mounted() {
|
//部门下拉列表
|
getDepartmentGet().then((res) => {
|
this.departmentModules = res.data.response.departmentList;
|
});
|
//仓库下拉列表
|
getWMWareHouseGet().then((res) => {
|
this.wareHouseModules = res.data.response.wareHouseList;
|
});
|
//供应商下拉列表
|
getWMSupplierGet().then((res) => {
|
this.supplierModules = res.data.response.supplierList;
|
});
|
},
|
};
|
</script>
|
