123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- <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>
|