<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 class="query-bg">
|
<el-input
|
v-model="bomParams.keyword"
|
placeholder="搜索产品名称，编码等关键词"
|
style="width: 60%; margin-right: 10px"
|
></el-input>
|
<el-button type="primary" @click="searchClick">查询</el-button>
|
</div>
|
<TableCommonView
|
class="bg-list"
|
ref="tableListRef"
|
:loading="loading"
|
:table-list="tableList"
|
:select-box="editCommonConfig.isSelectBox"
|
@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 { getMaterialList } from "@/api/common/other"
|
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
|
export default {
|
name: "EditSelCommonDialog",
|
mixins: [pageMixin],
|
props: {
|
editCommonConfig: {
|
type: Object,
|
default: () => {
|
return {
|
editVisible: false,
|
isSelectBox: false,
|
title: "",
|
clientId: 0,
|
isRequest: true,
|
client_name: "",
|
tableInfomation: []
|
}
|
}
|
}
|
},
|
components: {},
|
computed: {},
|
data() {
|
return {
|
dialogWidth: "42rem",
|
pagerCount: 5,
|
editConfig: this.editCommonConfig,
|
loading: false,
|
tableList: {},
|
showcolTop: ["产品规格", "产品型号"],
|
selectArray: [],
|
bomParams: {
|
keyword: "",
|
page: 1,
|
pageSize: 10
|
}
|
}
|
},
|
created() {
|
this.setTable()
|
this.getData()
|
},
|
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: "name",
|
isShowColumn: true,
|
default: true,
|
isClick: true
|
},
|
{
|
label: "产品编码",
|
prop: "id",
|
isShowColumn: true,
|
default: true
|
},
|
{
|
label: "产品规格",
|
prop: "specs",
|
isShowColumn: showcol.includes("产品规格"),
|
default: false
|
},
|
{
|
label: "产品型号",
|
prop: "type",
|
isShowColumn: showcol.includes("产品型号"),
|
default: false
|
}
|
]
|
return tableColumn
|
},
|
selTableCol(val) {
|
this.showcolTop = val
|
this.tableList.tableColumn = this.setTopTableColumn(val)
|
},
|
// 列表多选
|
getSelectArray(val) {
|
this.selectArray = val
|
},
|
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))
|
console.log(params)
|
await getMaterialList(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
|
})
|
},
|
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: 20px 30px 30px 30px !important;
|
box-sizing: border-box !important;
|
min-height: 200px;
|
}
|
.el-dialog__footer {
|
width: 100%;
|
height: 55px;
|
line-height: 55px;
|
background-color: #fff;
|
padding: 0px 20px 0;
|
text-align: right;
|
box-sizing: border-box;
|
border-top: 0px solid #dadee5;
|
position: relative;
|
.footer-left {
|
position: absolute;
|
top: 0px;
|
left: 20px;
|
}
|
}
|
}
|
</style>
|
