<template>
|
<div class="rightContent">
|
<div class="top">
|
<SearchCommonView
|
:add-title="'新建'"
|
:placeholder="'请输入产品名称'"
|
:amount-view="false"
|
:search-task-map="searchTaskMap"
|
@addCommonClick="addBtnClick"
|
@searchClick="searchClick"
|
@delSelectClick="delSelectClick"
|
/>
|
</div>
|
<div class="list-view">
|
<div class="icon-switch">
|
<div class="icon-view">
|
<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>
|
<span
|
class="icon-label"
|
@click="selIconSwitchClick('1')"
|
:class="{ blueBackgroud: isIconIndex === '1', whiteBackgroud: isIconIndex === '2' }"
|
><i class="el-icon-menu"></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="showDetail(item)">
|
<div class="left">
|
<el-image
|
v-if="item.attachmentList?.length > 0"
|
style="width: 60px; height: 80px"
|
:src="item.attachmentList[0].FileUrl"
|
:preview-src-list="item.srcList"
|
:z-index="9999"
|
@click.stop="imgClick"
|
></el-image>
|
<div v-else 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">
|
<template slot="tableButton">
|
<el-table-column label="操作" width="90" align="center">
|
<template slot-scope="scope">
|
<span @click.stop="showDetail(scope.row)" class="cursor_pointer" style="margin-right: 10px">
|
<span style="color: #2a78fb">查看</span>
|
</span>
|
<span @click.stop="editRow(scope.row)" class="cursor_pointer">
|
<span style="color: #2a78fb">编辑</span>
|
</span>
|
</template>
|
</el-table-column>
|
</template>
|
</TableCommonView>
|
</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: {},
|
autoEdit: false
|
},
|
isIconIndex: "2", // 1 图标 2 列表
|
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
pageSizes: [15, 30],
|
keyWord: "",
|
categoryId: null,
|
searchTaskMap: []
|
}
|
},
|
created() {
|
this.setTable()
|
let query = this.$route.query
|
if (query) {
|
console.log("ssssss")
|
this.categoryId = query.id ? Number(query.id) : null
|
this.pagerOptions.currPage = 1
|
this.searchTaskMap = query.id ? [{ categoryId: this.categoryId, title: query.categoryName }] : []
|
}
|
this.getData()
|
},
|
methods: {
|
setTable() {
|
if (this.isIconIndex === "1") {
|
this.pageSizes = [30, 60]
|
this.pagerOptions.pageSize = 30
|
}
|
this.tableList = {
|
tableInfomation: [],
|
selectBox: false,
|
selectIndex: 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: "id",
|
isShowColumn: true,
|
default: true
|
},
|
{
|
label: "产品名称",
|
prop: "name",
|
isShowColumn: true,
|
default: true
|
},
|
{
|
label: "产品规格",
|
prop: "specs",
|
isShowColumn: showcol.includes("产品规格"),
|
default: false
|
},
|
{
|
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) => {
|
let srcList = []
|
if (item.attachmentList?.length > 0) {
|
item.attachmentList.forEach((ele) => {
|
if (ele.fileType === "picture") {
|
srcList.push(ele.FileUrl)
|
}
|
})
|
} else {
|
srcList = []
|
}
|
|
return {
|
...item,
|
srcList
|
}
|
})
|
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.title = "新建"
|
this.editConfig.infomation = {}
|
this.editConfig.visible = true
|
},
|
// 详情
|
showDetail(row) {
|
console.log(row)
|
this.editConfig.autoEdit = false
|
this.editConfig.title = "编辑"
|
let imageSrc = row.attachmentList?.length > 0 ? row.attachmentList[0].FileUrl : ""
|
this.editConfig.infomation = { ...row, imageSrc: imageSrc }
|
this.editConfig.visible = true
|
},
|
// 编辑
|
editRow(row) {
|
this.editConfig.autoEdit = true
|
this.editConfig.title = "编辑"
|
let imageSrc = row.attachmentList?.length > 0 ? row.attachmentList[0].FileUrl : ""
|
this.editConfig.infomation = { ...row, imageSrc: imageSrc }
|
this.editConfig.visible = true
|
},
|
// 切换列表展现形式
|
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()
|
},
|
// 删除产品类型
|
delSelectClick() {
|
this.categoryId = 0
|
this.getData()
|
},
|
imgClick() {}
|
}
|
}
|
</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% - 70px);
|
}
|
::v-deep {
|
.el-table {
|
border-top-left-radius: 0px;
|
border-top-right-radius: 0px;
|
}
|
}
|
</style>
|
