| | |
| | | </div> |
| | | <div class="right"> |
| | | <div class="label"> |
| | | <span>南方丝巢SOUTHSILK 19姆米真丝睡衣女 100%桑蚕丝 长版套装家 </span> |
| | | <span>{{ item.name }}</span> |
| | | </div> |
| | | <div class="price"> |
| | | <span>价格:¥</span> |
| | | <span>{{ item.name }}</span> |
| | | <span>{{ item.salePrice }}</span> |
| | | </div> |
| | | <div class="library"> |
| | | <span>在库:</span> |
| | | <span>{{ item.name }}</span> |
| | | <span>{{ item.amount }}</span> |
| | | <span style="margin-left: 5px">{{ item.unit }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> --> |
| | | </div> |
| | | <div class="btn-pager"> |
| | | <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> |
| | | <PagerView class="page" :pager-options="pagerOptions" :page-size="pageSizes" v-on="pagerEvents" /> |
| | | </div> |
| | | </div> |
| | | <!-- 新建/编辑 --> |
| | |
| | | infomation: {} |
| | | }, |
| | | isIconIndex: "1", // 1 图标 2 列表 |
| | | url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" |
| | | url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", |
| | | pageSizes: [15, 30] |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | }, |
| | | methods: { |
| | | setTable() { |
| | | if (this.isIconIndex === "1") { |
| | | this.pageSizes = [30, 60] |
| | | this.pagerOptions.pageSize = 30 |
| | | } |
| | | this.tableList = { |
| | | tableInfomation: [], |
| | | selectBox: true, |
| | |
| | | let tableColumn = [ |
| | | { |
| | | label: "产品名称", |
| | | prop: "id", |
| | | prop: "name", |
| | | isShowColumn: true, |
| | | default: true |
| | | }, |
| | | { |
| | | label: "内部参考", |
| | | prop: "deviceName", |
| | | prop: "internalReference", |
| | | isShowColumn: showcol.includes("内部参考"), |
| | | default: false |
| | | }, |
| | | { |
| | | label: "负责人", |
| | | prop: "id", |
| | | prop: "principal", |
| | | isShowColumn: true, |
| | | default: true |
| | | }, |
| | | { |
| | | label: "产品标签", |
| | | prop: "deviceId", |
| | | prop: "productTagName", |
| | | isShowColumn: showcol.includes("产品标签"), |
| | | default: false |
| | | }, |
| | | { |
| | | label: "条码", |
| | | prop: "shopName", |
| | | prop: "barcode", |
| | | isShowColumn: showcol.includes("条码"), |
| | | default: false |
| | | }, |
| | | { |
| | | label: "销售价格", |
| | | prop: "faultLevel", |
| | | prop: "salePrice", |
| | | isShowColumn: showcol.includes("销售价格"), |
| | | default: false |
| | | }, |
| | | { |
| | | label: "成本", |
| | | prop: "status", |
| | | prop: "cost", |
| | | isShowColumn: showcol.includes("成本"), |
| | | default: false, |
| | | status: true |
| | | default: false |
| | | }, |
| | | { |
| | | label: "产品类别", |
| | | prop: "faultTime", |
| | | prop: "categoryName", |
| | | isShowColumn: showcol.includes("产品类别"), |
| | | default: false |
| | | }, |
| | | { |
| | | label: "产品类型", |
| | | prop: "shopName", |
| | | prop: "productType", |
| | | isShowColumn: showcol.includes("产品类型"), |
| | | default: false |
| | | }, |
| | | { |
| | | label: "在库数量", |
| | | prop: "faultLevel", |
| | | prop: "amount", |
| | | isShowColumn: showcol.includes("在库数量"), |
| | | default: false |
| | | }, |
| | | { |
| | | label: "预测数量", |
| | | prop: "status", |
| | | isShowColumn: showcol.includes("预测数量"), |
| | | default: false, |
| | | status: true |
| | | }, |
| | | // { |
| | | // label: "预测数量", |
| | | // prop: "status", |
| | | // isShowColumn: showcol.includes("预测数量"), |
| | | // default: false, |
| | | // status: true |
| | | // }, |
| | | { |
| | | label: "计量单位", |
| | | prop: "faultTime", |
| | | prop: "unit", |
| | | isShowColumn: showcol.includes("计量单位"), |
| | | default: false |
| | | } |
| | |
| | | this.tableList.tableColumn = this.setTableColumn(val) |
| | | }, |
| | | // 请求数据 |
| | | async getData(val, content) { |
| | | async getData(val) { |
| | | await getProductList({ |
| | | [val]: content, |
| | | keyWord: val, |
| | | page: this.pagerOptions.currPage, |
| | | pageSize: this.pagerOptions.pageSize |
| | | }).then((res) => { |
| | | if (res.data.code === 200) { |
| | | const list = res.data.data.list.map((item) => { |
| | | if (res.code === 200) { |
| | | const list = res.data.map((item) => { |
| | | return { |
| | | ...item, |
| | | supplierNumber: item.supplier.number |
| | | ...item |
| | | } |
| | | }) |
| | | this.tableList.tableInfomation = list || [] |
| | | this.pagerOptions.totalCount = res.data.data.total |
| | | this.pagerOptions.totalCount = res.total |
| | | } |
| | | }) |
| | | }, |
| | | // 搜索 |
| | | searchClick(val) { |
| | | console.log(val) |
| | | this.getData() |
| | | this.pagerOptions.currPage = 1 |
| | | this.getData(val) |
| | | }, |
| | | // 新建 |
| | | addBtnClick() { |
| | | this.editConfig.visible = true |
| | | this.editConfig.title = "新建" |
| | | this.editConfig.infomation = {} |
| | | }, |
| | | // 行点击 |
| | | tableRowClick(row) { |
| | |
| | | }, |
| | | // 切换列表展现形式 |
| | | selIconSwitchClick(value) { |
| | | this.pagerOptions.currPage = 1 |
| | | this.isIconIndex = value |
| | | if (value === "1") { |
| | | this.pageSizes = [30, 60] |
| | | this.pagerOptions.pageSize = 30 |
| | | } else { |
| | | this.pageSizes = [15, 30] |
| | | this.pagerOptions.pageSize = 15 |
| | | } |
| | | this.getData() |
| | | } |
| | | } |
| | | } |
| | |
| | | justify-content: flex-start; |
| | | align-content: flex-start; |
| | | .product-box { |
| | | width: 295px; |
| | | height: 84px; |
| | | width: 294px; |
| | | height: 94px; |
| | | margin-bottom: 10px; |
| | | margin-right: 20px; |
| | | border: 1px solid #dee2e6; |
| | |
| | | -webkit-box-shadow: inset 0 0 2px #dee2e6; |
| | | padding: 8px; |
| | | display: flex; |
| | | align-items: center; |
| | | .left { |
| | | width: 60px; |
| | | text-align: center; |
| | |
| | | margin-left: 10px; |
| | | .label { |
| | | color: #212529; |
| | | margin-top: -10px; |
| | | margin-right: 15px; |
| | | word-break: break-all; |
| | | word-wrap: break-word; |
| | |
| | | .price, |
| | | .library { |
| | | color: #495057; |
| | | margin-top: 3px; |
| | | margin-top: 15px; |
| | | } |
| | | } |
| | | } |