<template>
|
<div class="rightContent">
|
<div class="top">
|
<SearchCommonView
|
:add-title="'新建'"
|
:placeholder="'请输入产品名称'"
|
:amount-view="false"
|
@addCommonClick="addBtnClick"
|
@searchClick="searchClick"
|
/>
|
</div>
|
<div class="list-view">
|
<div class="icon-switch">
|
<div class="icon-view">
|
<span
|
class="icon-label"
|
@click="selIconSwitchClick('1')"
|
:class="{ blueBackgroud: isIconIndex === '1', whiteBackgroud: isIconIndex === '2' }"
|
><i class="el-icon-menu"></i
|
></span>
|
<span
|
class="icon-label"
|
@click="selIconSwitchClick('2')"
|
:class="{ whiteBackgroud: isIconIndex === '1', blueBackgroud: isIconIndex === '2' }"
|
style="margin-left: 5px"
|
><i class="el-icon-s-unfold"></i
|
></span>
|
</div>
|
</div>
|
<!-- 图表形式 -->
|
<div v-if="isIconIndex === '1'" class="product-view">
|
<div class="product-box" v-for="item in tableList.tableInfomation" :key="item.id" @click="tableRowClick(item)">
|
<div class="left">
|
<!-- <el-image style="width: 60px; height: 80px" :src="url"></el-image> -->
|
<div class="img-view">
|
<i class="el-icon-picture-outline"></i>
|
</div>
|
</div>
|
<div class="right">
|
<div class="label">
|
{{ item.name }}
|
</div>
|
<div class="price">
|
<span>价格:￥</span>
|
<span>{{ item.salePrice }}</span>
|
</div>
|
<div class="library">
|
<span>在库：</span>
|
<span>{{ item.amount }}</span>
|
<span style="margin-left: 5px">{{ item.unit }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 列表形式 -->
|
<div v-if="isIconIndex === '2'" class="product-list">
|
<TableCommonView
|
ref="tableListRef"
|
:table-list="tableList"
|
@selTableCol="selTableCol"
|
@tableRowClick="tableRowClick"
|
>
|
</TableCommonView>
|
<!-- <div class="btn-pager">
|
<PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
|
</div> -->
|
</div>
|
<div class="btn-pager">
|
<PagerView class="page" :pager-options="pagerOptions" :page-size="pageSizes" v-on="pagerEvents" />
|
</div>
|
</div>
|
<!-- 新建/编辑 -->
|
<AddProductDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
|
</div>
|
</template>
|
|
<script>
|
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
|
import { getProductList } from "@/api/product/product"
|
// import DetailProduct from "@/views/productManage/product/DetailProduct"
|
import AddProductDialog from "@/views/productManage/product/AddProductDialog"
|
|
export default {
|
name: "PruductManage",
|
props: {},
|
components: { AddProductDialog },
|
mixins: [pageMixin],
|
computed: {},
|
data() {
|
return {
|
tableList: {},
|
showcol: ["内部参考", "负责人", "产品标签", "销售价格", "成本", "在库数量", "预测数量", "计量单位"],
|
searchOptions: [],
|
commonDetail: {
|
visible: false,
|
title: "新建",
|
infomation: {}
|
},
|
editConfig: {
|
visible: false,
|
title: "新建",
|
infomation: {}
|
},
|
isIconIndex: "1", // 1 图标 2 列表
|
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
pageSizes: [15, 30],
|
keyWord: "",
|
categoryId: null
|
}
|
},
|
created() {
|
this.setTable()
|
let query = this.$route.query
|
if (query) {
|
this.categoryId = query.id ? Number(query.id) : null
|
this.pagerOptions.currPage = 1
|
}
|
this.getData()
|
},
|
methods: {
|
setTable() {
|
if (this.isIconIndex === "1") {
|
this.pageSizes = [30, 60]
|
this.pagerOptions.pageSize = 30
|
}
|
this.tableList = {
|
tableInfomation: [],
|
selectBox: true,
|
showcol: this.showcol,
|
allcol: [],
|
tableColumn: this.setTableColumn(this.showcol)
|
}
|
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
|
},
|
setTableColumn(showcol) {
|
let tableColumn = [
|
{
|
label: "产品名称",
|
prop: "name",
|
isShowColumn: true,
|
default: true
|
},
|
{
|
label: "内部参考",
|
prop: "internalReference",
|
isShowColumn: showcol.includes("内部参考"),
|
default: false
|
},
|
{
|
label: "负责人",
|
prop: "principal",
|
isShowColumn: true,
|
default: true
|
},
|
{
|
label: "产品标签",
|
prop: "productTagName",
|
isShowColumn: showcol.includes("产品标签"),
|
default: false
|
},
|
{
|
label: "条码",
|
prop: "barcode",
|
isShowColumn: showcol.includes("条码"),
|
default: false
|
},
|
{
|
label: "销售价格",
|
prop: "salePrice",
|
isShowColumn: showcol.includes("销售价格"),
|
default: false
|
},
|
{
|
label: "成本",
|
prop: "cost",
|
isShowColumn: showcol.includes("成本"),
|
default: false
|
},
|
{
|
label: "产品类别",
|
prop: "categoryName",
|
isShowColumn: showcol.includes("产品类别"),
|
default: false
|
},
|
{
|
label: "产品类型",
|
prop: "model",
|
isShowColumn: showcol.includes("产品类型"),
|
default: false
|
},
|
{
|
label: "在库数量",
|
prop: "amount",
|
isShowColumn: showcol.includes("在库数量"),
|
default: false
|
},
|
// {
|
// label: "预测数量",
|
// prop: "status",
|
// isShowColumn: showcol.includes("预测数量"),
|
// default: false,
|
// status: true
|
// },
|
{
|
label: "计量单位",
|
prop: "unit",
|
isShowColumn: showcol.includes("计量单位"),
|
default: false
|
}
|
]
|
return tableColumn
|
},
|
selTableCol(val) {
|
this.showcol = val
|
this.tableList.tableColumn = this.setTableColumn(val)
|
},
|
// 请求数据
|
async getData() {
|
await getProductList({
|
keyWord: this.keyWord,
|
categoryId: this.categoryId ? this.categoryId : null,
|
page: this.pagerOptions.currPage,
|
pageSize: this.pagerOptions.pageSize
|
}).then((res) => {
|
if (res.code === 200) {
|
const list = res.data.map((item) => {
|
return {
|
...item
|
}
|
})
|
this.tableList.tableInfomation = list || []
|
this.pagerOptions.totalCount = res.total
|
}
|
})
|
},
|
// 搜索
|
searchClick(val) {
|
console.log(val)
|
this.keyWord = val
|
this.pagerOptions.currPage = 1
|
this.getData()
|
},
|
// 新建
|
addBtnClick() {
|
this.editConfig.visible = true
|
this.editConfig.title = "新建"
|
this.editConfig.infomation = {}
|
},
|
// 行点击
|
tableRowClick(row) {
|
console.log(row)
|
this.editConfig.visible = true
|
this.editConfig.title = "编辑"
|
this.editConfig.infomation = { ...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()
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.icon-switch {
|
height: 15px;
|
position: relative;
|
.icon-view {
|
position: absolute;
|
top: -6px;
|
right: 20px;
|
.icon-label {
|
padding: 0px 30px;
|
// background: #ffffff;
|
border-top-left-radius: 8px;
|
border-top-right-radius: 8px;
|
cursor: pointer;
|
box-shadow: inset 0 0 1px #dee2e6;
|
-moz-box-shadow: inset 0 0 1px #dee2e6;
|
-webkit-box-shadow: inset 0 0 1px #dee2e6;
|
}
|
.blueBackgroud {
|
color: #fff;
|
background: #2a78fb;
|
}
|
.whiteBackgroud {
|
color: #2a78fb;
|
background: #fff;
|
}
|
}
|
}
|
.product-view {
|
padding: 20px 0 0px 20px;
|
height: calc(100% - 85px);
|
overflow: auto;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: flex-start;
|
align-content: flex-start;
|
.product-box {
|
width: 294px;
|
height: 94px;
|
margin-bottom: 10px;
|
margin-right: 20px;
|
border: 1px solid #dee2e6;
|
box-shadow: inset 0 0 2px #dee2e6;
|
-moz-box-shadow: inset 0 0 2px #dee2e6;
|
-webkit-box-shadow: inset 0 0 2px #dee2e6;
|
padding: 8px;
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
.left {
|
width: 60px;
|
text-align: center;
|
.img-view {
|
width: 60px;
|
height: 80px;
|
line-height: 80px;
|
border: 1px solid #dee2e6;
|
font-size: 22px;
|
color: #b8babb;
|
}
|
}
|
.right {
|
flex: 1;
|
font-size: 13px;
|
margin-left: 10px;
|
.label {
|
// max-height: 30px;
|
color: #212529;
|
// margin-top: -5px;
|
margin-right: 15px;
|
word-break: break-all;
|
word-wrap: break-word;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.price,
|
.library {
|
color: #495057;
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
.product-list {
|
height: calc(100% - 65px);
|
}
|
::v-deep {
|
.el-table {
|
border-top-left-radius: 0px;
|
border-top-right-radius: 0px;
|
}
|
}
|
</style>
|
