新增入库物资标签设置页面

src/api/MaterialDetailApi.js

@@ -1,6 +1,23 @@
 import BaseCurdApi from './BaseCurdApi'
 
 class MaterialDetailApi extends BaseCurdApi {
+  importData = (data) => {
+    const formData = new FormData()
+    formData.append('file', data.file)
+    return this.api({
+      url: `${this.basePath}/tag/data/import`,
+      method: 'POST',
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
+  }
+  downloadTemplateTag = (query) => this.api({
+    url: `${this.basePath}/tag/download/template`,
+    method: 'GET',
+    responseType: 'blob'
+  })
   constructor () {
     super('/materiel')
   }

src/api/MessageCenterApi.js

@@ -2,7 +2,7 @@ import BaseCurdApi from './BaseCurdApi'
 
 class MessageCenterApi extends BaseCurdApi {
   constructor () {
-    super('/messagecenter')
+    super('/message/center')
   }
 }
 

src/components/DialogImportTag.vue

@@ -0,0 +1,123 @@
+<template>
+    <el-dialog
+      :visible.sync="visible"
+      title="导入数据"
+      append-to-body
+      width="500px"
+    >
+      <el-form
+        ref="form"
+        :model="uploadData"
+        label-width="80px"
+      >
+      <el-row :gutter="0">
+              <el-col :span="24">
+                <el-form-item prop="file" label="上传文件" :rules="[{
+                  required: true,
+                  message: '请选择需要上传的文件'
+                }]">
+                  <el-input :value="uploadData.file ? uploadData.file.name : ''" read-only>
+                    <template #append>
+                      <el-upload
+                        ref="upload"
+                        action=""
+                        :auto-upload="false"
+                        :multiple="false"
+                        :show-file-list="false"
+                        accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
+                        :on-change="onFileChange"
+                      >
+                        <div class="el-button el-button--primary" style="border-radius: 0 4px 4px 0;">浏览</div>
+                      </el-upload>
+                    </template>
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+      </el-form>
+
+      <template #footer>
+        <div class="flex center dialog-footer">
+          <el-button
+            @click="onCloseBtnClick"
+          >取消</el-button>
+
+          <el-button
+            type="primary"
+            @click="onImportDataBtnClick"
+          >确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </template>
+
+<script>
+import BasePage from '@@/utils/BasePage'
+
+export default {
+  name: 'DialogImportTag',
+  extends: BasePage,
+  props: {
+    api: {
+      required: true,
+      type: Function
+    }
+  },
+  data: () => ({
+    visible: false,
+    uploadData: {
+      file: null
+    }
+  }),
+  methods: {
+    open () {
+      this.uploadData = {
+        file: null
+      }
+
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.upload.clearFiles()
+        this.$refs.form.resetFields()
+      })
+    },
+    onFileChange (event) {
+      this.uploadData.file = event.raw
+      const uploadEl = this.$refs.upload
+      const { uploadFiles } = uploadEl
+      uploadFiles.splice(0, uploadFiles.length, event)
+    },
+    onImportDataBtnClick () {
+      this.$refs.form.validate(flag => {
+        if (!flag) {
+          return
+        }
+
+        this.$$request(this.api, this.uploadData).then((flag) => {
+          if (flag) {
+            this.$notify({
+              title: '成功',
+              message: '上传成功',
+              type: 'success',
+              position: 'bottom-right'
+            })
+
+            this.close()
+            this.$emit('imported')
+          }
+        }).catch(console.error).finally(() => {})
+      })
+    },
+    close () {
+      this.$refs.upload.clearFiles()
+      this.uploadData.file = null
+      this.visible = false
+    },
+    onCloseBtnClick () {
+      this.close()
+    }
+  }
+}
+</script>
+
+  <style lang="scss"></style>

src/entries/MaterialTag.js

@@ -0,0 +1,24 @@
+import BaseCurdEntry from './BaseCurdEntry'
+import materialDetailApi from '@@/api/MaterialDetailApi'
+
+export default class MaterialTag extends BaseCurdEntry {
+  id
+
+  materielCode
+
+  goodsCode
+
+  name
+
+  smallCategoryName
+
+  tagTypeName
+
+  static get $$api () {
+    return materialDetailApi
+  }
+
+  static get $$name () {
+    return 'MaterialTag'
+  }
+}

src/mock/index.js

@@ -186,16 +186,4 @@ Mock.mock(/\/tag\/code\/page/, 'post', {
     }]
   }
 })
-
-Mock.mock(/\/messagecenter\/page/, 'post', {
-  type: 'success',
-  data: {
-    'count|10-40': 1,
-    'list|1-20': [{
-      'dataTime|1': ['2024/01/01 16:00:00', '2024/02/01 16:00:00', '2024/03/01 16:00:00'],
-      'content|1': ['测试消息', '测试消息1']
-    }]
-  }
-})
-
 export default Mock

src/router/index.js

@@ -75,6 +75,14 @@ export default new Router({
           permission: 'isAuthenticated'
         },
         component: () => import('@@/views/MaterialDetail.vue')
+      }, {
+        path: '/page-in-src/material-tag',
+        name: 'MaterialTag',
+        meta: {
+          title: '入库物资标签',
+          permission: 'isAuthenticated'
+        },
+        component: () => import('@@/views/MaterialTag.vue')
       }]
     }
   ]

src/views/MaterialTag.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="wrapper flex column layout-gap">
+      <el-card
+        shadow="hover"
+        class="z-card flex column flex-1 fit-size"
+      >
+        <div class="wrapper flex column layout-gap">
+            <div class="flex valign-center">
+                <el-button
+                  plain
+                  icon="el-icon-upload2"
+                  type="primary"
+                  size="small"
+                  class="custom-plain-button"
+                  @click="onOpenEditorBtnClick"
+                >批量导入</el-button>
+                <el-button
+                  icon="el-icon-download"
+                  plain
+                  type="primary"
+                  size="small"
+                  class="custom-plain-button"
+                  @click="onDownloadTemplateBtnClick"
+                >下载模版
+                </el-button>
+            </div>
+
+          <!-- <div class="flex column flex-1 fit-size"></div> -->
+          <div class="flex-1 fit-size">
+            <el-table
+              ref="table"
+              :data="list"
+              stripe
+              border
+              highlight-current-row
+              height="100%"
+              size="small"
+              class="custom-el-table-style"
+              @selection-change="onSelectionChange"
+              @row-click="onRowClick"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="60"
+                align="center"
+                fixed
+              ></el-table-column>
+              <el-table-column
+                label="商品Id"
+                prop="goodsCode"
+                align="center"
+                min-width="100"
+                header-align="center"
+                fixed
+              ></el-table-column>
+              <el-table-column
+                label="物料编码"
+                prop="materielCode"
+                min-width="100"
+                header-align="center"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                label="物料名称"
+                prop="name"
+                min-width="150"
+                header-align="center"
+                align="left"
+              ></el-table-column>
+              <el-table-column
+                label="商品名称"
+                prop="providerName"
+                min-width="150"
+                header-align="center"
+                align="left"
+              ></el-table-column>
+              <el-table-column
+                label="物料小类"
+                prop="smallCategoryName"
+                min-width="120"
+                header-align="center"
+                align="left"
+              ></el-table-column>
+              <el-table-column
+                label="标签类型"
+                prop="tagTypeName"
+                min-width="120"
+                header-align="center"
+                align="left"
+              ></el-table-column>
+            </el-table>
+          </div>
+
+          <my-pagination
+            :total="total"
+            :pagination="pagination"
+            @current-change="currentPageNoChange"
+          />
+        </div>
+      </el-card>
+      <dialog-import-tag
+        ref="dialogImportTag"
+        :api="$$api.importData"
+        @imported="onSaved"
+      ></dialog-import-tag>
+    </div>
+    </template>
+
+<script>
+import BaseCurdList from '@@/utils/BaseCurdList'
+import MaterialTag from '@@/entries/MaterialTag'
+
+export default {
+  name: 'MaterialTag',
+  extends: BaseCurdList(MaterialTag),
+  data: () => ({
+    editorName: 'dialogImportTag'
+  }),
+  methods: {
+    onImportDataBtnClick () {
+      this.$refs.dialogImportTag.open()
+    },
+    onDownloadTemplateBtnClick () {
+      this.$$request(this.$$api.downloadTemplateTag).then(() => {
+      }).catch(console.error).finally(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>