<template> <el-dialog title="BOM选择" append-to-body :visible.sync="dialogVisible" destroy-on-close width="1000px" @close="close" @open="open" > <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="90px" label-suffix=":" > <el-form-item label="BOM编码"> <el-input v-model="query.name" clearable placeholder="BOM编码" @keyup.enter.native="crud.toQuery" /> </el-form-item> <rrOperation /> </el-form> <!--表格渲染--> <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" size="mini" border :header-cell-style="{background:'#f5f7fa',color:'#606266'}" @select="handleSelectionChange" @select-all="onSelectAll" @current-change="clickChange" > <el-table-column v-if="!isSingle" type="selection" width="55" /> <el-table-column v-if="isSingle" label="选择" width="55"> <template slot-scope="scope"> <el-radio v-model="tableRadio" :label="scope.row"><i /></el-radio> </template> </el-table-column> <el-table-column prop="material_code" label="BOM编码" :min-width="flexWidth('material_code',crud.data,'物料编码')" /> <el-table-column prop="standing_time" label="静置时间" :min-width="flexWidth('standing_time',crud.data,'静置时间')" /> <el-table-column prop="threshold_time" label="阈值时间" :min-width="flexWidth('threshold_time',crud.data,'阈值时间')" /> </el-table> <!--分页组件--> <pagination /> <span slot="footer" class="dialog-footer"> <el-button type="info" @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="submit">确 定</el-button> </span> </el-dialog> </template> <script> import crudMaterialbase from '@/api/wms/basedata/materialbase' import CRUD, { header, presenter } from '@crud/crud' import rrOperation from '@crud/RR.operation' import pagination from '@crud/Pagination' import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' import '@riophae/vue-treeselect/dist/vue-treeselect.css' import crudClassstandard from '@/api/wms/basedata/classstandard' export default { name: 'BOMDtl', components: { rrOperation, pagination }, cruds() { return CRUD({ title: 'BOM', url: 'api/Materialbase', crudMethod: { ...crudMaterialbase }, optShow: {}, query: { material_type: '2' } }) }, mixins: [presenter(), header()], dicts: ['product_series'], props: { dialogShow: { type: Boolean, default: false }, isSingle: { type: Boolean, default: true }, materOptCode: { type: String, default: '00' } }, data() { return { dialogVisible: false, classes: [], tableRadio: null, class_idStr: null, checkrow: null, rows: [] } }, watch: { dialogShow: { handler(newValue) { this.dialogVisible = newValue } } }, methods: { clickChange(item) { this.tableRadio = item }, open() { const param = { 'materOpt_code': this.materOptCode } crudMaterialbase.getMaterOptType(param).then(res => { this.class_idStr = res.class_idStr this.crud.query.class_idStr = res.class_idStr this.crud.toQuery() this.queryClassId() }) }, queryClassId() { const param = { 'class_idStr': this.class_idStr } crudClassstandard.queryClassById(param).then(res => { this.classes = res.content.map(obj => { if (obj.hasChildren) { obj.children = null } return obj }) }) }, handleSelectionChange(val, row) { if (this.isSingle) { if (val.length > 1) { this.$refs.table.clearSelection() this.$refs.table.toggleRowSelection(val.pop()) } else { this.checkrow = row } } }, onSelectAll() { this.$refs.table.clearSelection() }, close() { this.crud.resetQuery(false) this.$emit('update:dialogShow', false) }, submit() { // 处理单选 if (this.isSingle && this.tableRadio) { this.$emit('update:dialogShow', false) this.$emit('setBOMValue', this.tableRadio) return } this.rows = this.$refs.table.selection if (this.rows.length <= 0) { this.$message('请先选择物料') return } this.crud.resetQuery(false) this.$emit('update:dialogShow', false) this.$emit('setBOMValue', this.rows) }, loadClass({ action, parentNode, callback }) { if (action === LOAD_CHILDREN_OPTIONS) { crudClassstandard.getClass({ pid: parentNode.id }).then(res => { parentNode.children = res.content.map(function(obj) { if (obj.hasChildren) { obj.children = null } return obj }) setTimeout(() => { callback() }, 100) }) } } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> ::v-deep .el-dialog__body { padding-top: 0px; } </style>