| | |
| | | <div class="body"> |
| | | <div class="body-card"> |
| | | <div class="list-view"> |
| | | <TableCommonView ref="tableListRef" :table-list="tableList" @selCommonClick="selCommonClick"> |
| | | <TableCommonView |
| | | ref="tableListRef" |
| | | :table-list="tableList" |
| | | @selCommonClick="selCommonClick" |
| | | @selTableCol="selTableCol" |
| | | > |
| | | <!-- <template slot="tableButton"> |
| | | <el-table-column label="操作" width="120"> |
| | | <template slot-scope="scope"> |
| | |
| | | visible: false, |
| | | title: "新建", |
| | | infomation: {} |
| | | } |
| | | }, |
| | | tableColumn: [ |
| | | { label: "产品编码", prop: "number", min: 190, isCommonClick: true }, |
| | | { label: "产品名称", prop: "name", min: 130 ,default:true}, |
| | | { label: "供应商", prop: "supplierName", min: 130 }, |
| | | { label: "产品类别", prop: "productType", min: 130 }, |
| | | { label: "规格", prop: "specifications", min: 130 }, |
| | | { label: "型号", prop: "modelNumber", min: 130 }, |
| | | { label: "单位", prop: "unit", min: 60 }, |
| | | { label: "价格", prop: "purchasePrice", min: 130 }, |
| | | { label: "最低库存", prop: "minimumStock", min: 80 }, |
| | | { label: "最高库存", prop: "maximumStock", min: 80 } |
| | | ], |
| | | showCol: ['产品编码', '产品名称', '供应商', '产品类别', '规格', '价格', '最低库存', '最高库存'] |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | this.getData() |
| | | }, |
| | | methods: { |
| | | setColumnVisible(showCol){ |
| | | return this.tableColumn.map(ele=>{ |
| | | return { |
| | | ...ele, |
| | | isShowColumn:showCol.includes(ele.label) |
| | | } |
| | | }) |
| | | }, |
| | | setTable() { |
| | | this.tableList = { |
| | | tableInfomation: [], |
| | | selectIndex: true, |
| | | tableColumn: [ |
| | | { label: "产品编码", prop: "number", min: 190, isCommonClick: true }, |
| | | { label: "产品名称", prop: "name", min: 130 }, |
| | | { label: "供应商", prop: "supplierNumber", min: 130 }, |
| | | { label: "产品类别", prop: "productType", min: 130 }, |
| | | { label: "规格", prop: "specifications", min: 130 }, |
| | | { label: "型号", prop: "modelNumber", min: 130 }, |
| | | { label: "单位", prop: "unit", min: 60 }, |
| | | { label: "价格", prop: "purchasePrice", min: 130 }, |
| | | { label: "最低库存", prop: "minimumStock", min: 80 }, |
| | | { label: "最高库存", prop: "maximumStock", min: 80 } |
| | | ] |
| | | showcol: this.showCol, |
| | | allcol: [], |
| | | tableColumn:this.setColumnVisible(this.showCol) |
| | | } |
| | | this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label); |
| | | |
| | | this.searchOptions = [] |
| | | for (let i = 0; i < this.tableList.tableColumn.length; i++) { |
| | | const label = this.tableList.tableColumn[i].label |
| | |
| | | this.searchOptions.push({ value: value, label: label }) |
| | | } |
| | | }, |
| | | selTableCol(val) { |
| | | this.showcol = val; |
| | | this.tableList.tableColumn = this.setColumnVisible(val); |
| | | }, |
| | | // 请求数据 |
| | | async getData(val, content) { |
| | | async getData() { |
| | | await getProductList({ |
| | | [val]: content, |
| | | keyword: this.searchText, |
| | | page: this.pagerOptions.currPage, |
| | | pageSize: this.pagerOptions.pageSize |
| | | }).then((res) => { |
| | |
| | | }) |
| | | }, |
| | | // 搜索 |
| | | searchClick(val, content) { |
| | | console.log(val, content) |
| | | this.getData(val.value, content) |
| | | }, |
| | | // searchClick(val, content) { |
| | | // console.log(val, content) |
| | | // this.getData(val.value, content) |
| | | // }, |
| | | |
| | | onFilterSearch(val){ |
| | | this.searchText = val ?? '' |
| | | console.log(this.searchText) |
| | | |
| | | // TODO: 需要接口支持 |
| | | throw new Error("功能未实现") |
| | | }, |
| | | |
| | | resetClick() { |
| | | this.pagerOptions.currPage = 1 |
| | | this.getData() |
| | | }, |
| | | |
| | | // resetClick() { |
| | | // this.getData() |
| | | // }, |
| | | // 新建 |
| | | addBtnClick() { |
| | | this.editConfig.visible = true |
| | |
| | | height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | box-sizing: border-box; |
| | | padding: 10px 20px; |
| | | flex: 1; |
| | | border-radius: 12px; |
| | | background-color: #fff; |