<template>
|
<div class="rightContent">
|
<div class="top">
|
<SearchCommonView :add-title="'新建'" :placeholder="'请输入产品名称'" :amount-view="false" :search-task-map="searchTaskMap" @addCommonClick="addBtnClick" @searchClick="searchClick" @delSelectClick="delSelectClick">
|
<template slot="leftButton">
|
<el-upload class="upload-demo" action="/api-wms/v1/product/inputProduct" :headers="{ Authorization: 'Bearer ' + token }" accept=".xls,.xlsx" :on-success="onSuccess" :on-error="onError" :limit="1" :show-file-list="false">
|
<el-button size="small" type="primary" style="margin-left: 10px">导入</el-button>
|
</el-upload>
|
</template>
|
<template slot="leftButton">
|
<el-button size="small" type="text" style="margin-left: 10px" @click="downloadInputFormatCilck">模板下载</el-button>
|
</template>
|
</SearchCommonView>
|
</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="140" 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>
|
<span @click.stop="deleteRow(scope.row)" class="cursor_pointer">
|
<span style="color: #2a78fb; margin-left: 10px">删除</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 ref="addProductRef" v-if="editConfig.visible" :edit-common-config="editConfig" />
|
</div>
|
</template>
|
|
<script>
|
import pageMixin from '@/components/makepager/pager/mixin/pageMixin'
|
import { getProductList, deleteProduct, downloadInputFormat } from '@/api/product/product'
|
// import DetailProduct from "@/views/productManage/product/DetailProduct"
|
import AddProductDialog from '@/views/productManage/product/AddProductDialog'
|
import { queryAttributeApi } from '@/api/product/attributeManage.js'
|
import Cookies from 'js-cookie'
|
import FileSaver from 'file-saver';
|
import _ from 'lodash'
|
export default {
|
attributeList: [],
|
name: 'PruductManage',
|
props: {},
|
components: { AddProductDialog },
|
mixins: [pageMixin],
|
computed: {},
|
data() {
|
return {
|
token: Cookies.get('token'),
|
tableList: {},
|
showcol: ['内部编码', '产品规格', '负责人', '产品标签', '成本', '在库数量', '预测数量', '计量单位'],
|
searchOptions: [],
|
commonDetail: {
|
visible: false,
|
title: '新建',
|
infomation: {},
|
},
|
editConfig: {
|
visible: false,
|
title: '新建',
|
infomation: {},
|
autoEdit: false,
|
attributeList: [],
|
},
|
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()
|
this.queryAttribute()
|
},
|
methods: {
|
async queryAttribute() {
|
const params = {
|
page: 0,
|
pageSize: 0,
|
entityType: 1,
|
}
|
const { code, data } = await queryAttributeApi(params)
|
if (code == 200) {
|
this.attributeList = data
|
}
|
},
|
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 = {
|
purchaseTypeList: [],
|
}
|
this.editConfig.visible = true
|
this.editConfig.attributeList = JSON.parse(JSON.stringify(this.attributeList))
|
},
|
// 详情
|
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
|
this.editConfig.attributeList = row.attributes || []
|
},
|
// 编辑
|
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, moreUnitList: row.moreUnitList ? row.moreUnitList : [] }
|
this.editConfig.visible = true
|
this.editConfig.attributeList = row.attributes || []
|
},
|
// 切换列表展现形式
|
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() {},
|
|
//删除
|
deleteRow(row) {
|
this.$confirm('此操作将永久删除该产品, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => {
|
deleteProduct({
|
id: row.id,
|
}).then((res) => {
|
if (res.code == 200) {
|
this.$message({
|
type: 'success',
|
message: '删除成功!',
|
})
|
this.getData()
|
} else {
|
this.$message.error('删除时出错，请稍后重试或联系管理员...')
|
}
|
})
|
})
|
.catch(() => {})
|
},
|
|
onSuccess(res, file, fileList) {
|
if (res.code == 200) {
|
this.$message({
|
type: 'success',
|
message: '导入成功!',
|
})
|
this.getData()
|
} else {
|
this.$message.error(res.msg)
|
}
|
},
|
onError(err, file, fileList) {
|
this.$message.error('导入时出错，请稍后重试或联系管理员...')
|
},
|
downloadInputFormatCilck: _.debounce(function () {
|
downloadInputFormat({
|
}).then((res) => {
|
if (res) {
|
console.log(res);
|
FileSaver.saveAs(res, '产品导入模板.xlsx');
|
this.$message.success('下载成功！')
|
}
|
})
|
}, 1000),
|
},
|
}
|
</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>
|
