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

<template>
    <basic-container>
        <el-tabs v-model="tabPosition" class="demo-tabs" @tab-change="tabPositionChange">
            <el-tab-pane label="库房设置" name="warehouseSetup"></el-tab-pane>
            <el-tab-pane label="库管设置" name="inventorySetup"></el-tab-pane>
            <el-tab-pane label="库位设置" name="storageSetup"></el-tab-pane>
        </el-tabs>
        <avue-crud v-if="tabPosition != 'inventorySetup'" :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page" ref="crud"
            @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
            @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
            <template #menu="{row}">
                <el-button type="text" v-if="tabPosition == 'warehouseSetup'">管理员设置</el-button>
            </template>
        </avue-crud>
        <div v-if="tabPosition == 'inventorySetup'">
            <div style="margin-bottom: 10px;">
                <el-button type="primary">按人员设置</el-button>
                <el-button type="primary">按库房设置</el-button>
            </div>
            <el-input></el-input>
            <el-transfer
                style="margin-top: 10px;"
                filterable
                :titles="['未选择','已选择']"
                :filter-method="filterMethod"
                filter-placeholder="请输入城市拼音"
                v-model="value"
                :data="transferData">
            </el-transfer>
            <div style="margin-top: 10px;display: flex;justify-content: center;align-items: center;">
                <el-button  type="primary">保 存</el-button>
            </div>
        </div>
    </basic-container>  
</template>
<script>
    import warehouseMain from './js/warehouseMain'
    export default{
        data(){
            return{
                loading:false,
                tabPosition:'warehouseSetup',
                data:[],
                form:{},
                page:{
                    pageSize: 10,
                    currentPage: 1,
                    total: 0,
                },
                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: true,
                    viewBtn: false,
                    delBtn: false,
                    editBtn: false,
                    editBtnIcon:' ',
                    delBtnIcon: ' ',
                    addBtn: false,
                    labelWidth: 120,
                    searchLabelWidth: 120,
                    menu: true,
                    menuWidth: 200,
                    dialogWidth: 600,
                    dialogClickModal: false,
                    searchEnter: true,
                    excelBtn: true,
                    gridBtn: false,
                    searchShowBtn: false,
                    showOverflowTooltip: true,
                    searchLabelPosition:'left',
searchLabelPosition:'left',
 searchGutter:24,
  searchSpan:6,
menuAlign: 'left',
gridBtn:false,
searchMenuPosition:'right',
addBtnIcon: ' ',
        viewBtnIcon: ' ',
        delBtnIcon: ' ',
        editBtnIcon: ' ',
                    column: []
                }
            }
        },
        mounted(){
            this.option.delBtn = true
            this.option.editBtn = true
            this.option.column = warehouseMain[this.tabPosition]
        },
        methods:{
            tabPositionChange(val){
                this.option.delBtn = false
                this.option.editBtn = false
                if(this.tabPosition == 'warehouseSetup'){
                    this.option.delBtn = true
                    this.option.editBtn = true
                    this.option.column = warehouseMain[this.tabPosition]
                }else if(this.tabPosition == 'storageSetup'){
                    this.option.delBtn = true
                    this.option.editBtn = true
                    this.option.column = warehouseMain[this.tabPosition]
                }
            },
            rowDel(){
                this.$confirm('确定删除此条数据?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {

                })
            },
            onLoad(){
                this.data = [
                    {id:1,shCode:'001',shName:'名称一',memo:'',toolingTypeStr:'001',typeStr:'',shLevel:'',userName:""},
                    {id:1,shCode:'001',shName:'名称一',memo:'',toolingTypeStr:'001',typeStr:'',shLevel:'',userName:""},
                    {id:1,shCode:'001',shName:'名称一',memo:'',toolingTypeStr:'001',typeStr:'',shLevel:'',userName:""},
                ]
                this.page.total = this.data.length
            },
        }
    }
</script>
<style lang="scss" scoped>
::v-deep.el-transfer{
   .el-transfer-panel{
        width: 44% !important;
    } 
}

</style>