jonhon-mes-web/src/views/basicData/materialAttributeMaintenance.vue

<template>
    <basic-container>
        <!-- <el-tabs v-model="tabPosition" class="demo-tabs" @tab-change="tabPositionChange">
            <el-tab-pane label="物料类别" name="materialCategory"></el-tab-pane>
            <el-tab-pane label="物料标记" name="materialMarking"></el-tab-pane>
        </el-tabs> -->
        <avue-crud :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page" ref="crud"
            @row-del="rowDel" @row-save="rowAdd" @row-update="rowUpdate" @search-change="searchChange" @search-reset="searchReset"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            @refresh-change="refreshChange" @on-load="onLoad">
        </avue-crud>
    </basic-container>
</template>

<script>
import {getList,addType,updateType,deleteType} from "@/api/basicData/materialAttributeMaintenance"
// import materialAttribute from './js/materialAttribute'
export default {
    data() {
        return {
            tabPosition: 'materialCategory',
            query:{},
            loading:false,
            option: {
                columnSort: true,
                tip: false,
                height: 'auto',
                align: 'center',
                calcHeight: 32,
                simplePage: false,
                searchShow: true,
                searchMenuSpan: 6,
                searchIcon: true,
                searchIndex: 3,
                tree: false,
                border: true,
                index: true,
                selection: false,
                viewBtn: false,
                delBtn: true,
                editBtn: true,
                delBtnIcon: ' ',
                editBtnIcon: ' ',
                addBtn: true,
                labelWidth: 120,
                searchLabelWidth: 120,
                menu: true,
                menuWidth: 120,
                dialogWidth: 600,
                dialogClickModal: false,
                searchEnter: true,
                excelBtn: true,
                gridBtn: false,
                searchShowBtn: false,
                showOverflowTooltip: true,
                searchLabelPosition:'left',
                searchLabelPosition:'left',
                searchGutter:24,
                searchSpan:6,
                menuAlign: 'center',
                gridBtn:false,
                searchMenuPosition:'right',
                addBtnIcon: ' ',
                viewBtnIcon: ' ',
                delBtnIcon: ' ',
                editBtnIcon: ' ',
                column: [
                    {
                        label: '类别编码',
                        prop: 'gcCode',
                        span: 24,
                        overflow: true,
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入类别编码',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '类别名称',
                        prop: 'gcName',
                        span: 24,
                        overflow: true,
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入类别名称',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '类别说明',
                        prop: 'memo',
                        type: 'textarea',
                        span: 24,
                        overflow: true,
                        search: false,
                    },
                ]
            },
            data: [],
            loading: false,
            form: {},
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            selectionList:[]
        }
    },
    mounted() {
        // this.option.column = materialAttribute[this.tabPosition]
    },
    methods: {
        searchChange(params, done){
            this.page.currentPage = 1
            this.query = params
            this.onLoad()
            done()
        },
        searchReset(){
            this.query = {}
            this.onLoad()
        },
        selectionChange(list){
            this.selectionList = list
        },
        currentChange(currentPage){
            this.page.currentPage = currentPage
        },
        sizeChange(pageSize){
            this.page.pageSize = pageSize;
        },
        refreshChange(){
            this.onLoad()
        },
        rowDel(row) {
            this.$confirm('确定删除此条数据?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                deleteType({
                    ids:row.id
                }).then(res =>{
                    if(res.data.code == 200){
                        this.$message.success('删除成功')
                        this.onLoad()
                    }
                })
            })
        },
        rowAdd(row, done, loading){
            console.log('row-----------',row)
            addType(row).then(res =>{
                if(res.data.code == 200){
                    this.$message.success("新增成功")
                    this.onLoad()
                    done()
                }
            })
        },
        rowUpdate(row, index, done, loading){
            updateType(row).then(res =>{
                if(res.data.code == 200){
                    this.$message.success("修改成功")
                    this.onLoad()
                    done()
                }
            })
        },
        onLoad() {
            getList({
                current:this.page.currentPage,
                size:this.page.pageSize,
                ...this.query
            }).then(res =>{
                this.data = res.data.data.records
                this.page.total = res.data.data.total
            })
        }
    }
}
</script>

<style></style>