feat(srmPartSku): 新增SRM零件SKU管理功能

- 实现SKU编码、备注、是否在用等字段的增删改查功能 - 集成权限控制，支持查询、新增、编辑、删除按钮权限配置 - 添加分页功能，支持20/50/100/200/500条每页切换 - 实现SOP文件上传功能，支持多文件拖拽上传和预览 - 添加表格列自定义配置功能，支持列宽、排序、显示隐藏设置 - 集成OSS文件管理，支持SOP文件的上传、下载、删除操作 - 实现响应式布局，适配不同屏幕高度的表格展示
4 days ago · 70ddabb49d
1 changed files with 649 additions and 0 deletions
--- a/src/views/modules/srmBaseInformation/srmPartSku.vue
+++ b/src/views/modules/srmBaseInformation/srmPartSku.vue
@ -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>