新增物料信息页面

src/api/MaterialCategoryApi.js

@@ -0,0 +1,9 @@
+import BaseCurdApi from './BaseCurdApi'
+
+class MaterialCategoryApi extends BaseCurdApi {
+  constructor () {
+    super('/materiel/category')
+  }
+}
+
+export default new MaterialCategoryApi()

src/api/MaterialDetailApi.js

@@ -0,0 +1,9 @@
+import BaseCurdApi from './BaseCurdApi'
+
+class MaterialDetailApi extends BaseCurdApi {
+  constructor () {
+    super('/materiel')
+  }
+}
+
+export default new MaterialDetailApi()

src/entries/MaterialCategory.js

@@ -0,0 +1,22 @@
+import BaseCurdEntry from './BaseCurdEntry'
+import materialCategoryApi from '@@/api/MaterialCategoryApi'
+
+export default class MaterialCategory extends BaseCurdEntry {
+  id
+
+  name
+
+  parentId
+
+  constructor (id, name, parentId) {
+    super()
+
+    this.id = id
+    this.name = name
+    this.parentId = parentId
+  }
+
+  static get $$api () {
+    return materialCategoryApi
+  }
+}

src/entries/MaterialDetail.js

@@ -0,0 +1,44 @@
+import BaseCurdEntry from './BaseCurdEntry'
+import MaterialCategory from './MaterialCategory'
+import materialDetailApiApi from '@@/api/MaterialDetailApi'
+
+export default class MaterialDetail extends BaseCurdEntry {
+  id
+
+  materielCode
+
+  goodsCode
+
+  name
+
+  bigCategoryName
+
+  middleCategoryName
+
+  smallCategoryName
+
+  materielDescribe
+
+  brand
+  manufacturer
+  static get $$api () {
+    return materialDetailApiApi
+  }
+
+  static $$getQuery = () => ({
+    name: '',
+    materielCode: '',
+    bigCategoryId: '',
+    middleCategoryId: '',
+    smallCategoryId: ''
+  })
+
+  static $$optionTargetConfigGroup = [
+    [{
+      Target: MaterialCategory,
+      getQuery: () => ({
+        parentId: '0'
+      })
+    }]
+  ]
+}

src/router/index.js

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

src/views/MaterialDetail.vue

@@ -0,0 +1,215 @@
+<template>
+    <div class="wrapper flex column layout-gap">
+      <el-card shadow="hover" class="filter-card">
+        <el-form label-width="100px">
+          <el-row :gutter="$$Constant.LAYOUT_GAP">
+            <el-col :span="8">
+              <el-form-item label="物料名称">
+               <el-input v-model="query.name" placeholder="输入物料名称"></el-input>
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="8">
+              <el-form-item label="物料编码">
+               <el-input v-model="query.materielCode" placeholder="输入物料编码"></el-input>
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="8">
+                <el-form-item label="大类">
+                    <my-select
+                        v-model="query.bigCategoryId"
+                        :options="optionGroup.MaterialCategory ? optionGroup.MaterialCategory.list : []"
+                        @change="onChangeBigCategoryBtnClick"
+                    >
+                    <el-option label="全部" value=""></el-option>
+                    </my-select>
+                </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="$$Constant.LAYOUT_GAP" :style="{
+                'margin-top': `${$$Constant.LAYOUT_GAP}px`
+            }">
+               <el-col :span="8">
+                    <el-form-item label="中类">
+                        <my-select
+                            v-model="query.middleCategoryId"
+                            :options="middleCategories"
+                             @change="onChangeMiddleCategoryBtnClick"
+                        >
+                        <el-option label="全部" value=""></el-option>
+                        </my-select>
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="8">
+                    <el-form-item label="小类">
+                        <my-select
+                            v-model="query.smallCategoryId"
+                            :options="middleCategories"
+                             @change="onSearchBtnClick"
+                        >
+                        <el-option label="全部" value=""></el-option>
+                        </my-select>
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="8" class="text-right">
+                    <el-button
+                        plain
+                        class="filter-button"
+                        @click="onResetBtnClick"
+                    >重置</el-button>
+                    <el-button
+                        type="primary"
+                        class="filter-button"
+                        @click="onSearchBtnClick"
+                    >查询</el-button>
+                </el-col>
+          </el-row>
+        </el-form>
+      </el-card>
+
+      <el-card
+        shadow="hover"
+        class="z-card flex column flex-1 fit-size"
+      >
+        <div class="wrapper flex column layout-gap">
+          <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"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="60"
+                align="center"
+                fixed
+              ></el-table-column>
+              <el-table-column
+                label="物料商品编码"
+                prop="goodsCode"
+                align="center"
+                min-width="80"
+                header-align="center"
+                fixed
+              ></el-table-column>
+              <el-table-column
+                label="物料名称"
+                prop="name"
+                min-width="150"
+                header-align="center"
+                align="left"
+                fixed
+              ></el-table-column>
+              <el-table-column
+                label="物料编码"
+                prop="materielCode"
+                min-width="80"
+                header-align="center"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                label="大类"
+                prop="bigCategoryName"
+                min-width="80"
+                header-align="center"
+                align="left"
+              ></el-table-column>
+              <el-table-column
+                label="中类"
+                prop="middleCategoryName"
+                min-width="80"
+                header-align="center"
+                align="left"
+              ></el-table-column>
+              <el-table-column
+                label="小类"
+                prop="smallCategoryName"
+                min-width="80"
+                header-align="center"
+                align="left"
+              ></el-table-column>
+              <el-table-column
+                label="物料描述"
+                prop="materielDescribe"
+                min-width="150"
+                header-align="center"
+                align="left"
+              ></el-table-column>
+              <el-table-column
+                label="品牌"
+                prop="brand"
+                align="left"
+                min-width="100"
+                header-align="center"
+              ></el-table-column>
+              <el-table-column
+                label="生产商名称"
+                prop="manufacturer"
+                min-width="100"
+                header-align="center"
+                align="left"
+              ></el-table-column>
+              <el-table-column
+                label="操作栏"
+                min-width="80"
+                header-align="center"
+                align="center"
+              >
+                <template v-slot="{ row }">
+                  <div class="flex center layout-gap">
+                    <edit-button :data="row" :on-click="onOpenEditorBtnClick" icon="el-icon-edit">详情</edit-button>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+
+          <my-pagination
+            :total="total"
+            :pagination="pagination"
+            @current-change="currentPageNoChange"
+          />
+        </div>
+      </el-card>
+
+    </div>
+  </template>
+
+<script>
+import BaseCurdList from '@@/utils/BaseCurdList'
+import MaterialDetail from '@@/entries/MaterialDetail'
+import materialCategoryApi from '@@/api/MaterialCategoryApi'
+
+export default {
+  name: 'MaterialDetail',
+  extends: BaseCurdList(MaterialDetail),
+  data: () => ({
+    middleCategories: [],
+    smallCategories: []
+  }),
+  methods: {
+    onChangeBigCategoryBtnClick (id) {
+      this.$$request(materialCategoryApi.getList, {parentId: id}).then(dataList => {
+        this.middleCategories = Object.freeze(dataList)
+      }).catch(console.error)
+    },
+
+    onChangeMiddleCategoryBtnClick (id) {
+      this.$$request(materialCategoryApi.getList, {parentId: id}).then(dataList => {
+        this.middleCategories = Object.freeze(dataList)
+      }).catch(console.error)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>