Browse Source

产品资料基本功能界面

master
yanyan 1 month ago
parent
commit
02e874409b
  1. 7
      src/api/srm/srmPart.js
  2. 872
      src/views/modules/srmPart/partInfoList.vue

7
src/api/srm/srmPart.js

@ -0,0 +1,7 @@
import { createAPI } from '@/utils/httpRequest.js'
export const searchPartList = data => createAPI('/part/searchPartList', 'POST', data)
export const createPart = data => createAPI('/part/save', 'POST', data)
export const updatePart = data => createAPI('/part/save', 'POST', data)
export const deletePart = data => createAPI('/part/delete', 'POST', data)

872
src/views/modules/srmPart/partInfoList.vue

@ -0,0 +1,872 @@
<template>
<div class="customer-css" >
<!-- 查询时间和产品 -->
<el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;" >
<el-row>
<el-col :span="24" style="">
<el-form-item >
<span style="cursor: pointer" slot="label" @click="getBaseList(1100)"><a href="#">产品编码</a></span>
<el-input v-model="searchData.partNo" style="width: 130px"></el-input>
</el-form-item>
<el-form-item :label="'NPC货号:'">
<el-input v-model="searchData.npc" style="width: 130px"></el-input>
</el-form-item>
<el-form-item :label="'产品名称:'">
<el-input v-model="searchData.partDesc" style="width: 130px"></el-input>
</el-form-item>
<el-form-item :label="' '">
<el-button class="customer-bun-min" type="primary" @click="getMainData" style="">查询</el-button>
<el-button @click="addPart()" type="primary" style="margin-left: 2px">新增</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table
:height="height"
:data="mainDataList"
border
ref="mainTable"
highlight-current-row
@row-click="changeData"
v-loading="dataListLoading"
style="margin-top: 0px; width: 100%;">
<el-table-column
v-for="(item,index) in columnArray1" :key="index"
:sortable="item.columnSortable"
:prop="item.columnProp"
:header-align="item.headerAlign"
:show-overflow-tooltip="item.showOverflowTooltip"
:align="item.align"
:fixed="item.fixed==''?false:item.fixed"
:min-width="item.columnWidth"
:label="item.columnLabel">
<template slot-scope="scope">
<span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
style="width: 100px; height: 100px"/></span>
</template>
</el-table-column>
<!-- 操作列 -->
<el-table-column
fixed="right"
header-align="center"
align="center"
width="160"
label="Action">
<template slot-scope="scope">
<el-link style="cursor: pointer" @click="editPart(scope.row)">编辑 |</el-link>
<el-link style="cursor: pointer" @click="deletePart(scope.row)">删除</el-link>
</template>
</el-table-column>
</el-table>
<!-- 分页插件 -->
<el-pagination style="margin-top: 0px"
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[20, 50, 100, 200, 500]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<el-tabs v-model="activeName" style="margin-top: 0px; width: 99%;" @tab-click="tabClick" class="customer-tab" type="border-card">
<el-tab-pane label="基础信息" name="basicInfo" style="">
<basicInfo ref="basicInfo"></basicInfo>
</el-tab-pane>
<el-tab-pane label="规格参数" name="specParams" style="">
<specParams ref="specParams"></specParams>
</el-tab-pane>
<el-tab-pane label="关联供应商" name="suppliers" style="">
<suppliers ref="suppliers"></suppliers>
</el-tab-pane>
<el-tab-pane label="审批与放行" name="approval" style="">
<approval ref="approval"></approval>
</el-tab-pane>
<el-tab-pane label="附件" name="attachments" style="">
<attachments ref="attachments"></attachments>
</el-tab-pane>
</el-tabs>
<Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist>
<!-- 产品编辑对话框 -->
<el-dialog :title="isAdd ? '新增产品' : '编辑产品'" :visible.sync="partDialogVisible" width="600px" top="3vh" :close-on-click-modal="false" class="part-dialog">
<div class="dialog-content">
<el-form
:model="currentpart"
:rules="partRules"
ref="partForm"
label-position="top"
class="part-form">
<div class="form-section">
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="产品编码" prop="partNo">
<el-input v-model="currentpart.partNo" :disabled="!isAdd"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="NPC货号" prop="npc">
<el-input v-model="currentpart.npc"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="产品名称" prop="partDesc">
<el-input v-model="currentpart.partDesc"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="产品规格" prop="partSpec">
<el-input v-model="currentpart.partSpec"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<span style="cursor: pointer" slot="label" @click="getBaseList(521)"><a href="#">产品分类</a></span>
<el-input v-model="currentpart.category" style="width: 130px"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<span style="cursor: pointer" slot="label" @click="getBaseList(525)"><a href="#">计量单位</a></span>
<el-input v-model="currentpart.unit" style="width: 130px"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div class="form-section">
<el-row :gutter="24">
<el-col :span="8">
<el-form-item>
<span style="cursor: pointer" slot="label" @click="getBaseList(522)"><a href="#">采购员</a></span>
<el-input v-model="currentpart.buyerName" style="width: 130px"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<span style="cursor: pointer" slot="label" @click="getBaseList(523)"><a href="#">sourcing专员</a></span>
<el-input v-model="currentpart.sourcingName" style="width: 130px"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<span style="cursor: pointer" slot="label" @click="getBaseList(524)"><a href="#">属性模板</a></span>
<el-input v-model="currentpart.codeNo" style="width: 130px"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div class="form-section">
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="状态">
<el-select v-model="currentpart.status" placeholder="请选择" style="width: 130px">
<el-option label="启用" value="N"></el-option>
<el-option label="停用" value="Y"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
</el-col>
</el-row>
</div>
<div class="form-section">
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model="currentpart.remark" type="textarea" :rows="2" resize="none" ></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
<div slot="footer" class="dialog-footer-center">
<el-button type="primary" @click="savePart()">保存</el-button>
<el-button @click="partDialogVisible = false">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
/* 组件 */
import {
searchPartList,
createPart,
updatePart,
deletePart
} from '@/api/srm/srmPart.js'
import excel from '@/utils/excel-util.js'
import Chooselist from '@/views/modules/common/Chooselist_eam'
// import basicInfo from './com_part_BasicInfo'
// import specParams from './com_part_SpecParams'
// import suppliers from './com_part_Suppliers'
// import approval from './com_part_Approval'
// import attachments from './com_part_Attachments'
export default {
data () {
return {
functionId: this.$route.meta.menuId,
height: 200,
currentRow: {},
searchData: {
partNo: '',
npc: '',
partDesc: '',
partSpec: '',
buyerName: '',
sourcingName: '',
category: '',
unit: '',
status: '',
codeNo: '',
createBy: '',
site: this.$store.state.user.site,
page: 1,
limit: 10
},
pageIndex: 1,
pageSize: 50,
totalPage: 0,
tagNo: '',
mainDataList: [],
dataListLoading: false,
activeName: 'basicInfo',
columnArray1: [
{
userId: this.$store.state.user.name,
functionId: this.functionId,
serialNumber: 'partTablePartNo',
tableId: 'partTable',
tableName: '产品信息',
columnProp: 'partNo',
headerAlign: 'center',
align: 'center',
columnLabel: '产品编码',
columnWidth: '100',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: false
},
{
userId: this.$store.state.user.name,
functionId: this.functionId,
serialNumber: 'partTableNpc',
tableId: 'partTable',
tableName: '产品信息',
columnProp: 'npc',
headerAlign: 'center',
align: 'center',
columnLabel: 'NPC货号',
columnWidth: '100',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: false
},
{
userId: this.$store.state.user.name,
functionId: this.functionId,
serialNumber: 'partTablePartDesc',
tableId: 'partTable',
tableName: '产品信息',
columnProp: 'partDesc',
headerAlign: 'center',
align: 'left',
columnLabel: '产品名称',
columnWidth: '200',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: false
},
{
userId: this.$store.state.user.name,
functionId: this.functionId,
serialNumber: 'partTablepartSpec',
tableId: 'partTable',
tableName: '产品信息',
columnProp: 'partSpec',
headerAlign: 'center',
align: 'left',
columnLabel: '产品规格',
columnWidth: '150',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: false
},
{
userId: this.$store.state.user.name,
functionId: this.functionId,
serialNumber: 'partTableBuyerName',
tableId: 'partTable',
tableName: '产品信息',
columnProp: 'buyerName',
headerAlign: 'center',
align: 'center',
columnLabel: '采购员',
columnWidth: '100',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: false
},
{
userId: this.$store.state.user.name,
functionId: this.functionId,
serialNumber: 'partTableSourcingName',
tableId: 'partTable',
tableName: '产品信息',
columnProp: 'sourcingName',
headerAlign: 'center',
align: 'center',
columnLabel: 'sourcing专员',
columnWidth: '100',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: false
},
{
userId: this.$store.state.user.name,
functionId: this.functionId,
serialNumber: 'partTableCategory',
tableId: 'partTable',
tableName: '产品信息',
columnProp: 'category',
headerAlign: 'center',
align: 'center',
columnLabel: '产品分类',
columnWidth: '100',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: false
},
{
userId: this.$store.state.user.name,
functionId: this.functionId,
serialNumber: 'partTableUnit',
tableId: 'partTable',
tableName: '产品信息',
columnProp: 'unit',
headerAlign: 'center',
align: 'center',
columnLabel: '计量单位',
columnWidth: '80',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: false
},
{
userId: this.$store.state.user.name,
functionId: this.functionId,
serialNumber: 'partTableStatus',
tableId: 'partTable',
tableName: '产品信息',
columnProp: 'status',
headerAlign: 'center',
align: 'center',
columnLabel: '状态',
columnWidth: '80',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: false
},
{
userId: this.$store.state.user.name,
functionId: this.functionId,
serialNumber: 'partTableCodeNo',
tableId: 'partTable',
tableName: '产品信息',
columnProp: 'codeNo',
headerAlign: 'center',
align: 'center',
columnLabel: '属性模板',
columnWidth: '100',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: false
},
{
userId: this.$store.state.user.name,
functionId: this.functionId,
serialNumber: 'partTableCreateBy',
tableId: 'partTable',
tableName: '产品信息',
columnProp: 'createBy',
headerAlign: 'center',
align: 'center',
columnLabel: '创建人',
columnWidth: '100',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: false
}
],
exportName: '产品信息' + this.dayjs().format('YYYYMMDDHHmmss'),
//
partDialogVisible: false,
isAdd: true,
currentpart: {
partNo: '',
npc: '',
partDesc: '',
partSpec: '',
buyerName: '',
sourcingName: '',
category: '',
unit: '',
status: 'active',
codeNo: '',
createBy: '',
remark: '',
site: this.$store.state.user.site,
},
partRules: {
partNo: [
{ required: true, message: ' ', trigger: 'blur' }
],
partDesc: [
{ required: true, message: ' ', trigger: 'blur' }
]
}
}
},
/* 组件 */
components: {
Chooselist,
// basicInfo,
// specParams,
// suppliers,
// approval,
// attachments
},
created() {
this.getMainData()
},
mounted () {
this.$nextTick(() => {
this.height = (window.innerHeight - 280) / 2
})
},
methods: {
getBaseList (val, type) {
this.tagNo = val
this.$nextTick(() => {
let strVal = ''
if (val === 1100) {
strVal = this.searchData.partNo
}
if (this.tagNo === 521) {
strVal = this.currentpart.category
}
if (this.tagNo === 525) {
strVal = this.currentpart.unit
}
if (val === 522) {
strVal = this.currentpart.buyerName
}
if (val === 523) {
strVal = this.currentpart.sourcingName
}
if (val === 524) {
strVal = this.currentpart.codeNo
}
this.$refs.baseList.init(val, strVal)
})
},
/* 列表方法的回调 */
getBaseData (val) {
if (this.tagNo === 1100) {
this.searchData.partNo = val.part_no
}
if (this.tagNo === 521) {
this.currentpart.category = val.category_name
}
if (this.tagNo === 525) {
this.currentpart.unit = val.unit_code
}
if (this.tagNo === 522) {
this.currentpart.buyerName = val.buyer_name
}
if (this.tagNo === 523) {
this.currentpart.sourcingName = val.sourcing_name
}
if (this.tagNo === 524) {
this.currentpart.codeNo = val.template_code
}
},
getMainData () {
this.searchData.limit = this.pageSize
this.searchData.page = this.pageIndex
searchPartList(this.searchData).then(({data}) => {
if (data.code === 0) {
this.mainDataList = data.page.list
this.pageIndex = data.page.currPage
this.pageSize = data.page.pageSize
this.totalPage = data.page.totalCount
//
if (this.mainDataList.length > 0) {
//
this.$refs.mainTable.setCurrentRow(this.mainDataList[0])
this.changeData(this.mainDataList[0])
} else {
this.changeData(null)
}
}
this.dataListLoading = false
})
},
tabClick (tab, event) {
this.refreshCurrentTabTable()
},
//
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getMainData()
},
//
currentChangeHandle (val) {
this.pageIndex = val
this.getMainData()
},
changeData (row) {
this.currentRow = JSON.parse(JSON.stringify(row))
this.refreshCurrentTabTable()
},
refreshCurrentTabTable () {
if (this.currentRow === '' || this.currentRow === null) {
this.currentRow = {site: '', partNo: ''}
}
if (this.activeName === 'basicInfo') {
this.refreshBasicInfo()
}
if (this.activeName === 'specParams') {
this.refreshSpecParams()
}
if (this.activeName === 'suppliers') {
this.refreshSuppliers()
}
if (this.activeName === 'approval') {
this.refreshApproval()
}
if (this.activeName === 'attachments') {
this.refreshAttachments()
}
},
async exportExcel () {
this.searchData.limit = -1
this.searchData.page = 1
excel.exportTable({
url: '/part/searchPartList',
columnMapping: this.columnArray1,
mergeSetting: [],
params: this.searchData,
fileName: this.exportName + '.xlsx',
rowFetcher: res => res.data,
columnFormatter: [],
dropColumns: []
})
},
refreshBasicInfo () {
let inData = {
site: this.currentRow.site,
partNo: this.currentRow.partNo,
partDesc: this.currentRow.partDesc,
height: Number(this.height) - 20
}
this.$refs.basicInfo.init(inData)
},
refreshSpecParams () {
let inData = {
site: this.currentRow.site,
partNo: this.currentRow.partNo,
height: Number(this.height) - 20
}
this.$refs.specParams.init(inData)
},
refreshSuppliers () {
let inData = {
site: this.currentRow.site,
partNo: this.currentRow.partNo,
height: Number(this.height) - 20
}
this.$refs.suppliers.init(inData)
},
refreshApproval () {
let inData = {
site: this.currentRow.site,
partNo: this.currentRow.partNo,
height: Number(this.height) - 20
}
this.$refs.approval.init(inData)
},
refreshAttachments () {
let inData = {
site: this.currentRow.site,
objectNo: this.currentRow.partNo,
objectType: 'part',
height: Number(this.height) - 20
}
this.$refs.attachments.init(inData)
},
//
addPart() {
this.isAdd = true
this.currentpart = {
partNo: '',
npc: '',
partDesc: '',
partSpec: '',
buyerName: '',
sourcingName: '',
category: '',
unit: '',
status: 'N',
codeNo: '',
createBy: this.$store.state.user.name,
remark: '',
site: this.$store.state.user.site,
}
this.partDialogVisible = true
},
//
editPart(row) {
if (!row) {
this.$message.warning('请选择一个产品修改')
return
}
this.isAdd = false
this.currentpart = {...row}
this.partDialogVisible = true
},
//
savePart() {
this.$refs.partForm.validate((valid) => {
if (valid) {
const apiCall = this.isAdd ? createPart(this.currentpart) : updatePart(this.currentpart)
apiCall.then(({data}) => {
if (data && data.code === 0) {
this.$message.success(this.isAdd ? '新增产品成功' : '修改产品成功')
this.partDialogVisible = false
this.getMainData()
} else {
this.$message.error(data.msg || '操作失败')
}
}).catch(error => {
this.$message.error('操作失败: ' + error.message)
})
} else {
this.$message.warning('请填写必填字段')
}
})
},
//
deletePart(row) {
this.$confirm('你确定删除该产品?', '确认删除', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deletePart(row.id).then(({data}) => {
if (data && data.code === 0) {
this.$message.success('产品删除成功')
this.getMainData()
} else {
this.$message.error(data.msg || '删除失败')
}
}).catch(error => {
this.$message.error('删除失败: ' + error.message)
})
})
}
}
}
</script>
<!--当前页面的标签样式-->
<style scoped lang="scss">
/deep/ .customer-tab .el-tabs__content {
padding: 5px !important;
}
/* 产品对话框整体样式 */
.part-dialog {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.part-dialog .el-dialog {
margin-top: 5vh !important;
margin-bottom: 5vh !important;
}
.part-dialog .el-dialog__header {
padding: 20px 25px 15px 25px;
border-bottom: 1px solid #E4E7ED;
}
.part-dialog .el-dialog__body {
padding: 25px 25px 25px 25px;
max-height: 75vh;
overflow-y: auto;
min-height: 400px;
}
.dialog-content {
width: 100%;
}
/* 产品表单样式 */
.part-form {
width: 100%;
}
.part-form .el-form-item {
margin-bottom: 1px;
}
.part-form .el-form-item__label {
font-weight: 500;
color: #303133;
line-height: 32px;
padding-right: 12px;
}
.part-form .el-form-item__content {
line-height: normal;
}
/* 表单分组样式 */
.form-section {
margin-bottom: 5px;
}
.form-section:last-child {
margin-bottom: 5px;
}
/* 输入框样式 */
.part-form .el-input,
.part-form .el-textarea,
.part-form .el-date-editor {
width: 100%;
}
/* 文本域样式优化 */
.part-form .el-textarea__inner {
resize: none;
font-family: inherit;
line-height: 1.5;
}
/* 对话框底部按钮居中 */
.dialog-footer-center {
text-align: center;
padding: 15px 0 5px 0;
border-top: 1px solid #E4E7ED;
margin-top: 15px;
}
.dialog-footer-center .el-button {
margin: 0 10px;
min-width: 90px;
height: 36px;
padding: 0 20px;
font-size: 14px;
}
/* 响应式调整 */
@media (max-width: 1200px) {
.part-dialog {
width: 95% !important;
}
.part-dialog .el-dialog__body {
padding: 20px 20px 15px 20px;
}
}
@media (max-width: 768px) {
.part-form .el-col {
margin-bottom: 20px;
}
.form-section {
margin-bottom: 35px;
}
.part-form .el-form-item__label {
line-height: 28px;
height: 28px;
}
}
</style>
Loading…
Cancel
Save