wilson
/
krd-srm-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

2 Commits
c117c121a1 ... 0f4b88c1e7

Author SHA1 Message Date
qiankanghui 0f4b88c1e7 Merge remote-tracking branch 'origin/master'
4 days ago
qiankanghui 70ddabb49d feat(srmPartSku): 新增SRM零件SKU管理功能
4 days ago
1 changed files with 649 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats
  1. 649
      src/views/modules/srmBaseInformation/srmPartSku.vue

649
src/views/modules/srmBaseInformation/srmPartSku.vue
View File

@ -0,0 +1,649 @@
<template>
<div class="mod-config">
<el-form :inline="true" label-position="top" :model="searchData">
<el-form-item label="SKU编码">
<el-input v-model="searchData.sku" clearable style="width: 180px"></el-input>
</el-form-item>
<el-form-item label="是否在用">
<el-select v-model="searchData.active" clearable style="width: 120px">
<el-option label="Y" value="Y"></el-option>
<el-option label="N" value="N"></el-option>
</el-select>
</el-form-item>
<el-form-item label=" ">
<el-button v-if="authSearch" type="primary" @click="getDataList()">查询</el-button>
<el-button v-if="authSave" type="primary" @click="addModal()">新增</el-button>
</el-form-item>
</el-form>
<el-table
:height="height"
:data="dataList"
border
v-loading="dataListLoading"
style="width: 100%;">
<el-table-column
v-for="(item,index) in columnList" :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">
{{ formatCellValue(item.columnProp, scope.row[item.columnProp]) }}
</span>
</template>
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="210"
label="操作">
<template slot-scope="scope">
<el-link style="cursor: pointer" v-if="authUpdate" @click="updateModal(scope.row)">编辑</el-link>
<el-link style="cursor: pointer" v-if="authDelete" @click="deletePartSkuHandle(scope.row)"> | 删除</el-link>
<el-link style="cursor: pointer" @click="openSopList(scope.row)"> | SOP上传</el-link>
</template>
</el-table-column>
</el-table>
<el-pagination
@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-dialog title="SOP文件清单" :close-on-click-modal="false" v-drag :visible.sync="sopDialogVisible" width="860px">
<el-form :inline="true" label-position="top">
<el-form-item>
<el-button type="primary" @click="openSopUploadDialog">上传文件</el-button>
</el-form-item>
</el-form>
<el-table :height="360" :data="sopFileList" border v-loading="sopLoading" style="width: 100%">
<el-table-column prop="fileName" label="文件名称" min-width="300" show-overflow-tooltip />
<el-table-column prop="createdBy" label="上传人" width="120" align="center" />
<el-table-column prop="createDate" label="上传时间" width="180" align="center" />
<el-table-column prop="cadditionalInfo" label="备注" min-width="180" show-overflow-tooltip />
<el-table-column label="操作" width="130" align="center" fixed="right">
<template slot-scope="scope">
<el-link type="primary" @click="previewSopFile(scope.row)">查看 |</el-link>
<el-link type="danger" @click="removeSopFile(scope.row)">删除</el-link>
</template>
</el-table-column>
</el-table>
<el-footer style="height:40px;margin-top: 10px;text-align:center">
<el-button type="primary" @click="sopDialogVisible = false">关闭</el-button>
</el-footer>
</el-dialog>
<el-dialog title="上传" :visible.sync="ossVisible" v-drag width="400px" append-to-body :close-on-click-modal="false">
<el-form ref="form" class="rq" label-width="80px" label-position="top">
<el-row :gutter="10">
<slot></slot>
<el-col :span="24">
<el-form-item label=" " class="auto">
<el-upload drag :file-list="fileList2"
action="#" ref="upload"
:on-remove="onRemoveFile"
:on-change="onChangeFile"
multiple
:auto-upload="false">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" class="auto">
<el-input type="textarea" v-model="ossForm.remark" resize="none" :autosize="{minRows: 3, maxRows: 3}"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" :loading="uploadLoading" @click="handleUploadFiles">确认</el-button>
<el-button @click="ossVisible = false">取消</el-button>
</span>
</el-dialog>
<el-dialog :title="modalTitle" :close-on-click-modal="false" v-drag :visible.sync="modalFlag" width="560px">
<el-form label-position="top" :model="modalData" :rules="rules" ref="modalForm" style="margin-left: 7px; margin-right: 7px;">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="SKU编码" prop="sku">
<el-input v-model="modalData.sku" :disabled="modalDisableFlag" placeholder="请输入SKU编码"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否在用" prop="active">
<el-select v-model="modalData.active" style="width: 100%">
<el-option label="Y" value="Y"></el-option>
<el-option label="N" value="N"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="备注" prop="remark" >
<el-input type="textarea" v-model="modalData.remark" :rows="2" placeholder="请输入备注"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-footer style="height:40px;margin-top: 40px;text-align:center">
<el-button type="primary" @click="saveData()">保存</el-button>
<el-button type="primary" @click="modalFlag = false">关闭</el-button>
</el-footer>
</el-dialog>
</div>
</template>
<script>
import {
getPartSkuListPaging,
savePartSku,
updatePartSku,
deletePartSku
} from '@/api/baseInformation/srmPartSku.js'
import {
queryOssFilePlus,
ossUploadNoSaveOSSForYJY,
previewOssFileById,
removeOss
} from '@/api/oss/oss'
export default {
name: 'srmPartSku',
watch: {
searchData: {
deep: true,
handler: function () {
this.searchData.sku = (this.searchData.sku || '').toUpperCase()
}
},
modalData: {
deep: true,
handler: function () {
this.modalData.sku = (this.modalData.sku || '').toUpperCase()
}
}
},
data () {
const functionId = this.$route.meta.menuId || 'srmPartSku'
return {
height: 200,
dataList: [],
dataListLoading: false,
pageIndex: 1,
pageSize: 20,
totalPage: 0,
searchData: {
site: this.$store.state.user.site,
sku: '',
active: '',
page: 1,
limit: 20
},
modalFlag: false,
modalTitle: '',
modalDisableFlag: false,
sopDialogVisible: false,
ossVisible: false,
sopLoading: false,
uploadLoading: false,
sopCurrentRow: null,
sopFileList: [],
fileList2: [],
ossForm: {
remark: ''
},
modalData: {
site: this.$store.state.user.site,
sku: '',
remark: '',
active: 'Y',
createBy: this.$store.state.user.name
},
columnList: [
{
userId: this.$store.state.user.name,
functionId: functionId,
serialNumber: 'srmPartSkuTableSku',
tableId: 'srmPartSkuTable',
tableName: 'SKU管理表',
columnProp: 'sku',
headerAlign: 'center',
align: 'left',
columnLabel: 'SKU编码',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 180
},
{
userId: this.$store.state.user.name,
functionId: functionId,
serialNumber: 'srmPartSkuTableRemark',
tableId: 'srmPartSkuTable',
tableName: 'SKU管理表',
columnProp: 'remark',
headerAlign: 'center',
align: 'left',
columnLabel: '备注',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 300
},
{
userId: this.$store.state.user.name,
functionId: functionId,
serialNumber: 'srmPartSkuTableActive',
tableId: 'srmPartSkuTable',
tableName: 'SKU管理表',
columnProp: 'active',
headerAlign: 'center',
align: 'center',
columnLabel: '是否在用',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 100
},
{
userId: this.$store.state.user.name,
functionId: functionId,
serialNumber: 'srmPartSkuTableCreateDate',
tableId: 'srmPartSkuTable',
tableName: 'SKU管理表',
columnProp: 'createDate',
headerAlign: 'center',
align: 'center',
columnLabel: '创建日期',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 160
},
{
userId: this.$store.state.user.name,
functionId: functionId,
serialNumber: 'srmPartSkuTableCreateBy',
tableId: 'srmPartSkuTable',
tableName: 'SKU管理表',
columnProp: 'createBy',
headerAlign: 'center',
align: 'center',
columnLabel: '创建人',
columnHidden: false,
columnImage: false,
columnSortable: false,
sortLv: 0,
status: true,
fixed: '',
columnWidth: 120
}
],
rules: {
sku: [
{ required: true, message: ' ', trigger: 'blur' }
],
active: [
{ required: true, message: ' ', trigger: 'change' }
]
},
authSearch: false,
authSave: false,
authUpdate: false,
authDelete: false,
menuId: functionId
}
},
mounted () {
this.$nextTick(() => {
this.height = window.innerHeight - 180
})
},
created () {
this.getButtonAuthData()
this.getDataList()
},
methods: {
formatCellValue (columnProp, value) {
if (columnProp === 'createDate') {
return value ? this.dayjs(value).format('YYYY-MM-DD HH:mm:ss') : ''
}
return value
},
getDataList () {
this.dataListLoading = true
const params = {
...this.searchData,
site: this.$store.state.user.site,
page: this.pageIndex,
limit: this.pageSize
}
getPartSkuListPaging(params).then(({ data }) => {
if (data && data.code === 0) {
const pageData = data.data || data.page
this.dataList = pageData && pageData.list ? pageData.list : pageData
if (pageData && pageData.currPage) {
this.pageIndex = pageData.currPage
this.pageSize = pageData.pageSize
this.totalPage = pageData.totalCount
} else {
this.totalPage = this.dataList ? this.dataList.length : 0
}
} else {
this.$message.error((data && data.msg) || '获取数据失败')
}
}).catch(error => {
console.error('获取SKU列表失败:', error)
this.$message.error('获取数据失败: ' + (error.message || '网络错误'))
}).finally(() => {
this.dataListLoading = false
})
},
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
addModal () {
this.modalTitle = '新增SKU'
this.modalDisableFlag = false
this.modalData = {
site: this.$store.state.user.site || '',
sku: '',
remark: '',
active: 'Y',
createBy: this.$store.state.user.name
}
this.$nextTick(() => {
if (this.$refs.modalForm) {
this.$refs.modalForm.clearValidate()
}
})
this.modalFlag = true
},
updateModal (row) {
this.modalTitle = '编辑SKU'
this.modalDisableFlag = true
this.modalData = {
site: row.site,
sku: row.sku,
remark: row.remark || '',
active: row.active,
createBy: this.$store.state.user.name
}
this.$nextTick(() => {
if (this.$refs.modalForm) {
this.$refs.modalForm.clearValidate()
}
})
this.modalFlag = true
},
saveData () {
this.$refs.modalForm.validate((valid) => {
if (!valid) {
return false
}
const inData = { ...this.modalData }
const apiCall = this.modalDisableFlag ? updatePartSku : savePartSku
apiCall(inData).then(({ data }) => {
if (data && data.code === 0) {
this.$message.success('操作成功')
this.modalFlag = false
this.getDataList()
} else {
this.$message.error((data && data.msg) || '操作失败')
}
}).catch(error => {
console.error('保存SKU失败:', error)
this.$message.error('保存失败: ' + (error.message || '网络错误'))
})
})
},
deletePartSkuHandle (row) {
this.$confirm(`确定删除此SKU吗？编码：${row.sku}`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deletePartSku({
site: row.site,
sku: row.sku
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message.success('删除成功')
this.getDataList()
} else {
this.$message.error((data && data.msg) || '删除失败')
}
}).catch(error => {
console.error('删除SKU失败:', error)
this.$message.error('删除失败: ' + (error.message || '网络错误'))
})
}).catch(() => {
this.$message.info('已取消删除')
})
},
buildSopQueryParams (row) {
return {
orderRef1: row.site,
orderRef2: row.sku,
orderRef3: '',
orderReftype: 'PartSkuSop'
}
},
openSopList (row) {
this.sopCurrentRow = {
site: row.site,
sku: row.sku
}
this.sopDialogVisible = true
this.fetchSopFileList()
},
fetchSopFileList () {
if (!this.sopCurrentRow) {
this.sopFileList = []
return
}
this.sopLoading = true
queryOssFilePlus(this.buildSopQueryParams(this.sopCurrentRow)).then(({ data }) => {
if (data && data.code === 0) {
this.sopFileList = data.rows || []
} else {
this.sopFileList = []
}
}).catch(() => {
this.sopFileList = []
}).finally(() => {
this.sopLoading = false
})
},
openSopUploadDialog () {
if (!this.sopCurrentRow) {
this.$message.warning('请先选择SKU')
return
}
this.fileList2 = []
this.ossForm.remark = ''
this.ossVisible = true
this.$nextTick(() => {
if (this.$refs.upload) {
this.$refs.upload.clearFiles()
}
})
},
onRemoveFile (file, fileList) {
this.fileList2 = fileList
},
onChangeFile (file, fileList) {
this.fileList2 = fileList
},
handleUploadFiles () {
if (!this.sopCurrentRow) {
this.$message.warning('请先选择SKU')
return
}
if (!this.fileList2 || this.fileList2.length === 0) {
this.$message.warning('请选择文件')
return
}
const formData = new FormData()
for (let i = 0; i < this.fileList2.length; i++) {
formData.append('file', this.fileList2[i].raw)
}
formData.append('orderRef1', this.sopCurrentRow.site)
formData.append('orderRef2', this.sopCurrentRow.sku)
formData.append('orderRef3', '')
formData.append('createdBy', this.$store.state.user.name)
formData.append('CAdditionalInfo', this.ossForm.remark || '')
formData.append('orderReftype', 'PartSkuSop')
this.uploadLoading = true
ossUploadNoSaveOSSForYJY(formData).then(({ data }) => {
if (data && data.code === 0) {
this.$message.success('上传成功')
this.ossVisible = false
this.fileList2 = []
this.ossForm.remark = ''
this.fetchSopFileList()
} else {
this.$message.warning((data && data.msg) || '上传失败')
}
}).catch(() => {
this.$message.error('上传失败')
}).finally(() => {
this.uploadLoading = false
})
},
previewSopFile (row) {
previewOssFileById({ id: row.id }).then((response) => {
const contentType = (response.headers && response.headers['content-type']) || 'application/octet-stream'
const blob = new Blob([response.data], { type: contentType })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.setAttribute('download', row.fileName)
link.target = '_blank'
link.click()
URL.revokeObjectURL(link.href)
})
},
removeSopFile (row) {
this.$confirm('确定要删除该文件吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
removeOss([row.id]).then(({ data }) => {
if (data && data.code === 0) {
this.$message.success('删除成功')
this.fetchSopFileList()
} else {
this.$message.warning((data && data.msg) || '删除失败')
}
})
}).catch(() => {})
},
getButtonAuthData () {
let searchFlag = this.isAuth(this.menuId + ':search')
let saveFlag = this.isAuth(this.menuId + ':save')
let updateFlag = this.isAuth(this.menuId + ':update')
let deleteFlag = this.isAuth(this.menuId + ':delete')
this.authSearch = !searchFlag
this.authSave = !saveFlag
this.authUpdate = !updateFlag
this.authDelete = !deleteFlag
}
}
}
</script>
<style scoped>
.mod-config {
padding: 0;
}
.rq .auto /deep/ .el-form-item__content {
height: auto;
line-height: 1.5;
}
</style>
Write Preview
Loading…
Cancel
Save