<template>
|
<div class="edit-selClient-box">
|
<el-dialog
|
:visible.sync="editConfig.editVisible"
|
:width="dialogWidth"
|
:before-close="handleClose"
|
:append-to-body="true"
|
:close-on-click-modal="false"
|
>
|
<div slot="title" class="tac drawerHeader">{{ editCommonConfig.title }}</div>
|
|
<div class="bg-view">
|
<div style="display: flex;justify-content: space-between">
|
<div class="query-bg" style="margin: 10px">
|
<el-input
|
v-model="bomParams.keyword"
|
placeholder="搜索产品名称，编码等关键词"
|
></el-input>
|
<el-button type="primary" @click="searchClick">查询</el-button>
|
</div>
|
<div style="margin: 10px">
|
<el-cascader
|
v-model="categoryIds"
|
collapse-tags
|
placeholder="请选择产品类别"
|
:options="productCategoryList"
|
:props="props"
|
clearable
|
@change="getProductList"
|
></el-cascader>
|
</div>
|
</div>
|
<TableCommonView
|
:warehouseId="warehouseId"
|
class="bg-list"
|
ref="tableListRef"
|
:loading="loading"
|
:table-list="tableList"
|
:select-box="editCommonConfig.isSelectBox"
|
:selectBoxList="selectBoxList"
|
name="product"
|
@selCommonClick="selNameClick"
|
@selTableCol="selTableCol"
|
@getSelectArray="getSelectArray"
|
>
|
</TableCommonView>
|
<div slot="footer" class="dialog-footer">
|
<div class="btn-pager">
|
<PagerView
|
class="page"
|
:pager-options="pagerOptions"
|
:pagerCount="pagerCount"
|
layout="total, sizes, prev, pager, next"
|
v-on="pagerEvents"
|
/>
|
</div>
|
</div>
|
</div>
|
<div slot="footer" class="dialog-footer" v-if="editCommonConfig.isSelectBox">
|
<el-button type="primary" @click="saveClick()">确定</el-button>
|
<el-button @click="editConfig.editVisible = false">取消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { getProductList,locationProductListApi } from "@/api/product/product"
|
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
|
import { getProductCategoryList } from '@/api/product/productCategory'
|
import { getTreeData } from '@/common/untils/index';
|
export default {
|
name: "EditSelCommonDialog",
|
mixins: [pageMixin],
|
props: {
|
warehouseId:{
|
type:Number,
|
default:0
|
},
|
editCommonConfig: {
|
type: Object,
|
default: () => {
|
return {
|
editVisible: false,
|
isSelectBox: false,
|
title: "",
|
clientId: 0,
|
isRequest: true,
|
client_name: "",
|
tableInfomation: []
|
}
|
}
|
},
|
// 不可选的数据
|
selectBoxList: {
|
type: Array,
|
default: () => []
|
}
|
},
|
components: {},
|
computed: {},
|
data() {
|
return {
|
categoryIds:[],
|
props:{
|
label:'name',
|
value:'id',
|
multiple:true
|
},
|
dialogWidth: "42rem",
|
pagerCount: 5,
|
editConfig: this.editCommonConfig,
|
loading: false,
|
tableList: {},
|
showcolTop: ["产品规格", "产品型号"],
|
selectArray: [],
|
bomParams: {
|
keyword: "",
|
page: 1,
|
pageSize: 10,
|
types: ["原材料", "半成品", "成品"]
|
},
|
productCategoryList:[]
|
}
|
},
|
created() {
|
this.setTable();
|
this.getData();
|
this.queryProductCategoryList();
|
},
|
methods: {
|
setTable() {
|
this.tableList = {
|
tableInfomation: [],
|
selectIndex: false,
|
selectBox: this.editCommonConfig.isSelectBox,
|
showcol: this.showcolTop,
|
allcol: [],
|
tableColumn: this.setTopTableColumn(this.showcolTop)
|
}
|
let allcol = []
|
for (let i = 0; i < this.tableList.tableColumn.length; i++) {
|
if (!this.tableList.tableColumn[i].default) {
|
const label = this.tableList.tableColumn[i].label
|
allcol.push(label)
|
}
|
}
|
this.tableList.allcol = allcol
|
},
|
setTopTableColumn(showcol) {
|
|
let tableColumn = [
|
{
|
label: "产品编码",
|
prop: "id",
|
min: 110,
|
isShowColumn: true,
|
default: true
|
},
|
{
|
label: "产品名称",
|
prop: "name",
|
isShowColumn: true,
|
default: true,
|
isClick: true
|
},
|
/*{
|
label: "产品类别",
|
prop: "categoryName",
|
isShowColumn: true,
|
default: true
|
},*/
|
{
|
label: "位置",
|
prop: "locationName",
|
min: 110,
|
isShowColumn: true,
|
default: true
|
},
|
{
|
label: "数量",
|
prop: "amount",
|
min: 110,
|
isShowColumn: true,
|
default: true
|
},
|
{
|
label: "产品规格",
|
prop: "specs",
|
isShowColumn: showcol.includes("产品规格"),
|
default: false
|
},
|
{
|
label: "产品型号",
|
prop: "type",
|
width: 90,
|
isShowColumn: showcol.includes("产品型号"),
|
default: false
|
}
|
]
|
return tableColumn
|
},
|
selTableCol(val) {
|
this.showcolTop = val
|
this.tableList.tableColumn = this.setTopTableColumn(val)
|
},
|
// 列表多选
|
getSelectArray(val) {
|
this.selectArray = val
|
},
|
async queryProductCategoryList(){
|
const {code ,data}=await getProductCategoryList({page:0,pageSize:0});
|
if(code===200){
|
this.productCategoryList=getTreeData(data);
|
}
|
} ,
|
saveClick() {
|
this.$emit("getSelectArray", this.selectArray)
|
this.editConfig.editVisible = false
|
},
|
// 请求数据
|
async getData() {
|
this.loading = true
|
if (this.editConfig.title === "产品名称") {
|
this.getProductList()
|
}
|
},
|
// 产品名称
|
async getProductList() {
|
this.bomParams.page = this.pagerOptions.currPage ? this.pagerOptions.currPage : 1
|
this.bomParams.pageSize = this.pagerOptions.pageSize ? this.pagerOptions.pageSize : 15
|
let params = JSON.parse(JSON.stringify(this.bomParams));
|
const routerParams=this.$route.query;
|
const ids=[...new Set(this.categoryIds.flat(Infinity))];
|
params.categoryIds=ids;
|
if(routerParams.workType==1){
|
await getProductList(params).then((res) => {
|
console.log(res.data)
|
if (res.code === 200) {
|
if (res.data) {
|
this.tableList.tableInfomation = res.data || []
|
this.pagerOptions.totalCount = res.total ? res.total : 0
|
} else {
|
this.tableList.tableInfomation = []
|
}
|
}
|
this.loading = false
|
})
|
}else{
|
params={
|
"keyword": "",
|
"page":this.pagerOptions.currPage ? this.pagerOptions.currPage : 1,
|
"pageSize": this.pagerOptions.pageSize ? this.pagerOptions.pageSize : 15,
|
"warehouseId": routerParams.warehouseId?parseInt(routerParams.warehouseId):this.warehouseId
|
};
|
params.categoryIds=ids;
|
locationProductListApi(params).then(res=>{
|
if (res.code === 200) {
|
if (res.data) {
|
this.tableList.tableInfomation = res.data || []
|
this.tableList.tableInfomation.map(item=>{
|
item.locationName=item.location.name;
|
});
|
this.pagerOptions.totalCount = res.total ? res.total : 0
|
} else {
|
this.tableList.tableInfomation = []
|
}
|
}
|
this.loading = false
|
});
|
}
|
|
},
|
handleClose() {
|
this.editConfig.editVisible = false
|
},
|
selNameClick(row) {
|
if (this.editCommonConfig.isSelectBox) {
|
return true
|
}
|
this.editConfig.editVisible = false
|
if (this.editConfig.title === "产品名称") {
|
this.$emit("selClient", row, "productName")
|
}
|
},
|
// 搜索
|
searchClick() {
|
this.bomParams.page = 1
|
this.total = 0
|
this.getData()
|
},
|
resetClick() {
|
this.keyword = ""
|
this.getData()
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.bg-view {
|
.bg-list {
|
height: 370px;
|
}
|
.query-bg {
|
margin-bottom: 10px;
|
.el-input {
|
width: 310px;
|
.el-select {
|
width: 100px;
|
}
|
}
|
|
.btn {
|
float: right;
|
}
|
}
|
}
|
.sel-name {
|
color: $color-primary;
|
cursor: pointer;
|
}
|
.dialog-footer {
|
.btn-pager {
|
display: flex;
|
margin-top: 0px;
|
.page {
|
margin-left: auto;
|
}
|
}
|
}
|
::v-deep {
|
.el-dialog__body {
|
padding-bottom: 10px !important;
|
}
|
}
|
</style>
|
