Jeff.RFID.UI/src/views/MaterialDetail.vue

<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="onOpenDetailEditorBtnClick" icon="el-icon-tickets">详情</edit-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <my-pagination
            :total="total"
            :pagination="pagination"
            @current-change="currentPageNoChange"
          />
        </div>
      </el-card>
      <dialog-material-detail
        ref="editor"
         @saved="loadList"
    ></dialog-material-detail>
    </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)
    },
    onOpenDetailEditorBtnClick (data) {
      this.onOpenEditorBtnClick(data, true)
    }
  }
}
</script>

<style lang="scss" scoped></style>