库区库位

gaoshp

2024-05-12 022e13de4490b06cc5be7d5a5fbe8ca0b29ef7fc

库区库位

 src/components/scTable/index.vue

@@ -3,20 +3,26 @@
 * @version: 1.10
 * @Author: sakuya
 * @Date: 2021年11月29日21:51:15
 * @LastEditors: gaoshp
 * @LastEditTime: 2024-04-08 14:47:10
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-12 13:00:03
-->

<template>
    <div class="scTable" :style="{'height':_height}" ref="scTableMain" v-loading="loading">
        <div class="scTable-table" :style="{'height':_table_height}">
            <el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="height=='auto'?null:'100%'" :size="config.size" :border="config.border" :stripe="config.stripe" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange">
    <div class="scTable" :style="{ 'height': _height }" ref="scTableMain" v-loading="loading">
        <div class="scTable-table" :style="{ 'height': _table_height }">
            <el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable"
                :height="height == 'auto' ? null : '100%'" :size="config.size" :border="config.border" :stripe="config.stripe"
                :summary-method="remoteSummary ? remoteSummaryMethod : summaryMethod" @sort-change="sortChange"
                @filter-change="filterChange">
                <slot></slot>
                <template v-for="(item, index) in userColumn" :key="index">
                    <el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler" :show-overflow-tooltip="item.showOverflowTooltip">
                    <el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop"
                        :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters"
                        :filter-method="remoteFilter || !item.filters ? null : filterHandler"
                        :show-overflow-tooltip="item.showOverflowTooltip">
                        <template #default="scope">
                            <slot :name="item.prop" v-bind="scope">
                                {{scope.row[item.prop]}}
                                {{ scope.row[item.prop] }}
                            </slot>
                        </template>
                    </el-table-column>
@@ -29,17 +35,23 @@
        </div>
        <div class="scTable-page" v-if="!hidePagination || !hideDo">
            <div class="scTable-pagination">
                <el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
                <el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total"
                    :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage"
                    @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
            </div>
            <div class="scTable-do" v-if="!hideDo">
                <el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
                <el-popover v-if="column" placement="top" title="列设置" :width="500" trigger="click" :hide-after="0" @show="customColumnShow=true" @after-leave="customColumnShow=false">
                <el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle
                    style="margin-left:15px"></el-button>
                <el-popover v-if="column" placement="top" title="列设置" :width="500" trigger="click" :hide-after="0"
                    @show="customColumnShow = true" @after-leave="customColumnShow = false">
                    <template #reference>
                        <el-button icon="el-icon-set-up" circle style="margin-left:15px"></el-button>
                    </template>
                    <columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting>
                    <columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange"
                        @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting>
                </el-popover>
                <el-popover v-if="!hideSetting" placement="top" title="表格设置" :width="400" trigger="click" :hide-after="0">
                <el-popover v-if="!hideSetting" placement="top" title="表格设置" :width="400" trigger="click"
                    :hide-after="0">
                    <template #reference>
                        <el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button>
                    </template>
@@ -63,344 +75,368 @@
</template>

<script>
    import config from "@/config/table";
    import columnSetting from './columnSetting'
import config from "@/config/table";
import columnSetting from './columnSetting'

    export default {
        name: 'scTable',
        components: {
            columnSetting
        },
        props: {
            tableName: { type: String, default: "" },
            apiObj: { type: Object, default: () => {} },
            params: { type: Object, default: () => ({}) },
            data: { type: Object, default: () => {} },
            height: { type: [String,Number], default: "100%" },
            size: { type: String, default: "default" },
            border: { type: Boolean, default: false },
            stripe: { type: Boolean, default: false },
            pageSize: { type: Number, default: config.pageSize },
            pageSizes: { type: Array, default: config.pageSizes },
            rowKey: { type: String, default: "" },
            summaryMethod: { type: Function, default: null },
            column: { type: Object, default: () => {} },
            remoteSort: { type: Boolean, default: false },
            remoteFilter: { type: Boolean, default: false },
            remoteSummary: { type: Boolean, default: false },
            hidePagination: { type: Boolean, default: false },
            hideDo: { type: Boolean, default: false },
            hideRefresh: { type: Boolean, default: false },
            hideSetting: { type: Boolean, default: false },
            paginationLayout: { type: String, default: config.paginationLayout },
        },
        watch: {
            //监听从props里拿到值了
            data(){
                this.tableData = this.data;
                this.total = this.tableData.length;
            },
            apiObj(){
                this.tableParams = this.params;
                this.refresh();
            },
            column(){
                this.userColumn=this.column;
            }
        },
        computed: {
            _height() {
                return Number(this.height)?Number(this.height)+'px':this.height
            },
            _table_height() {
                return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)"
            }
        },
export default {
    name: 'scTable',
    components: {
        columnSetting
    },
    props: {
        tableName: { type: String, default: "" },
        apiObj: { type: Object, default: () => { } },
        params: { type: Object, default: () => ({}) },
        data: { type: Object, default: () => { } },
        height: { type: [String, Number], default: "100%" },
        size: { type: String, default: "default" },
        border: { type: Boolean, default: false },
        stripe: { type: Boolean, default: false },
        pageSize: { type: Number, default: config.pageSize },
        pageSizes: { type: Array, default: config.pageSizes },
        rowKey: { type: String, default: "" },
        summaryMethod: { type: Function, default: null },
        column: { type: Object, default: () => { } },
        remoteSort: { type: Boolean, default: false },
        remoteFilter: { type: Boolean, default: false },
        remoteSummary: { type: Boolean, default: false },
        hidePagination: { type: Boolean, default: false },
        hideDo: { type: Boolean, default: false },
        hideRefresh: { type: Boolean, default: false },
        hideSetting: { type: Boolean, default: false },
        paginationLayout: { type: String, default: config.paginationLayout },
    },
    watch: {
        //监听从props里拿到值了
        data() {
            return {
                scPageSize: this.pageSize,
                isActivat: true,
                emptyText: "暂无数据",
                toggleIndex: 0,
                tableData: [],
                total: 0,
                currentPage: 1,
                prop: null,
                order: null,
                loading: false,
                tableHeight:'100%',
                tableParams: this.params,
                userColumn: [],
                customColumnShow: false,
                summary: {},
                config: {
                    size: this.size,
                    border: this.border,
                    stripe: this.stripe
                }
            }
            this.tableData = this.data;
            this.total = this.tableData.length;
        },
        mounted() {
            //判断是否开启自定义列
            if(this.column){
                this.getCustomColumn()
            }else{
                this.userColumn = this.column
            }
            //判断是否静态数据
            if(this.apiObj){
                this.getData();
            }else if(this.data){
                this.tableData = this.data;
                this.total = this.tableData.length
            }
        apiObj() {
            this.tableParams = this.params;
            this.refresh();
        },
        activated(){
            if(!this.isActivat){
                this.$refs.scTable.doLayout()
            }
        column() {
            this.userColumn = this.column;
        }
    },
    computed: {
        _height() {
            return Number(this.height) ? Number(this.height) + 'px' : this.height
        },
        deactivated(){
            this.isActivat = false;
        },
        methods: {
            //获取列
            async getCustomColumn(){
                const userColumn = await config.columnSettingGet(this.tableName, this.column)
                this.userColumn = userColumn
            },
            //获取数据
            async getData(){
                this.loading = true;
                var reqData = {
                    [config.request.page]: this.currentPage,
                    [config.request.pageSize]: this.scPageSize,
                    [config.request.prop]: this.prop,
                    [config.request.order]: this.order
                }
                if(this.hidePagination){
                    delete reqData[config.request.page]
                    delete reqData[config.request.pageSize]
                }
                Object.assign(reqData, this.tableParams)

                try {
                    var res = await this.apiObj.get(reqData);
                }catch(error){
                    this.loading = false;
                    this.emptyText = error.statusText;
                    return false;
                }
                try {
                    var response = config.parseData(res);
                }catch(error){
                    this.loading = false;
                    this.emptyText = "数据格式错误";
                    return false;
                }
                if(response.code != config.successCode){
                    this.loading = false;
                    this.emptyText = response.msg;
                }else{
                    this.emptyText = "暂无数据";
                    if(this.hidePagination){
                        this.tableData = response.data || [];
                    }else{
                        this.tableData = response.rows || [];
                    }
                    this.total = response.total || 0;
                    this.summary = response.summary || {};
                    this.loading = false;
                }
                this.$refs.scTable.setScrollTop(0)
                this.$emit('dataChange', res, this.tableData)
            },
            //分页点击
            paginationChange(){
                this.getData();
            },
            //条数变化
            pageSizeChange(size){
                this.scPageSize = size
                this.getData();
            },
            //刷新数据
            refresh(){
                this.$refs.scTable.clearSelection();
                this.getData();
            },
            //更新数据 合并上一次params
            upData(params, page=1){
                this.currentPage = page;
                this.$refs.scTable.clearSelection();
                Object.assign(this.tableParams, params || {})
                this.getData()
            },
            //重载数据 替换params
            reload(params, page=1){
                this.currentPage = page;
                this.tableParams = params || {}
                this.$refs.scTable.clearSelection();
                this.$refs.scTable.clearSort()
                this.$refs.scTable.clearFilter()
                this.getData()
            },
            //自定义变化事件
            columnSettingChange(userColumn){
                this.userColumn = userColumn;
                this.toggleIndex += 1;
            },
            //自定义列保存
            async columnSettingSave(userColumn){
                this.$refs.columnSetting.isSave = true
                try {
                    await config.columnSettingSave(this.tableName, userColumn)
                }catch(error){
                    this.$message.error('保存失败')
                    this.$refs.columnSetting.isSave = false
                }
                this.$message.success('保存成功')
                this.$refs.columnSetting.isSave = false
            },
            //自定义列重置
            async columnSettingBack(){
                this.$refs.columnSetting.isSave = true
                try {
                    const column = await config.columnSettingReset(this.tableName, this.column)
                    this.userColumn = column
                    this.$refs.columnSetting.usercolumn = JSON.parse(JSON.stringify(this.userColumn||[]))
                }catch(error){
                    this.$message.error('重置失败')
                    this.$refs.columnSetting.isSave = false
                }
                this.$refs.columnSetting.isSave = false
            },
            //排序事件
            sortChange(obj){
                if(!this.remoteSort){
                    return false
                }
                if(obj.column && obj.prop){
                    this.prop = obj.prop
                    this.order = obj.order
                }else{
                    this.prop = null
                    this.order = null
                }
                this.getData()
            },
            //本地过滤
            filterHandler(value, row, column){
                const property = column.property;
                return row[property] === value;
            },
            //过滤事件
            filterChange(filters){
                if(!this.remoteFilter){
                    return false
                }
                Object.keys(filters).forEach(key => {
                    filters[key] = filters[key].join(',')
                })
                this.upData(filters)
            },
            //远程合计行处理
            remoteSummaryMethod(param){
                const {columns} = param
                const sums = []
                columns.forEach((column, index) => {
                    if(index === 0) {
                        sums[index] = '合计'
                        return
                    }
                    const values =  this.summary[column.property]
                    if(values){
                        sums[index] = values
                    }else{
                        sums[index] = ''
                    }
                })
                return sums
            },
            configSizeChange(){
                this.$refs.scTable.doLayout()
            },
            //插入行 unshiftRow
            unshiftRow(row){
                this.tableData.unshift(row)
            },
            //插入行 pushRow
            pushRow(row){
                this.tableData.push(row)
            },
            //根据key覆盖数据
            updateKey(row, rowKey=this.rowKey){
                this.tableData.filter(item => item[rowKey]===row[rowKey] ).forEach(item => {
                    Object.assign(item, row)
                })
            },
            //根据index覆盖数据
            updateIndex(row, index){
                Object.assign(this.tableData[index], row)
            },
            //根据index删除
            removeIndex(index){
                this.tableData.splice(index, 1)
            },
            //根据index批量删除
            removeIndexes(indexes=[]){
                indexes.forEach(index => {
                    this.tableData.splice(index, 1)
                })
            },
            //根据key删除
            removeKey(key, rowKey=this.rowKey){
                this.tableData.splice(this.tableData.findIndex(item => item[rowKey]===key), 1)
            },
            //根据keys批量删除
            removeKeys(keys=[], rowKey=this.rowKey){
                keys.forEach(key => {
                    this.tableData.splice(this.tableData.findIndex(item => item[rowKey]===key), 1)
                })
            },
            //原生方法转发
            clearSelection(){
                this.$refs.scTable.clearSelection()
            },
            toggleRowSelection(row, selected){
                this.$refs.scTable.toggleRowSelection(row, selected)
            },
            toggleAllSelection(){
                this.$refs.scTable.toggleAllSelection()
            },
            toggleRowExpansion(row, expanded){
                this.$refs.scTable.toggleRowExpansion(row, expanded)
            },
            setCurrentRow(row){
                this.$refs.scTable.setCurrentRow(row)
            },
            clearSort(){
                this.$refs.scTable.clearSort()
            },
            clearFilter(columnKey){
                this.$refs.scTable.clearFilter(columnKey)
            },
            doLayout(){
                this.$refs.scTable.doLayout()
            },
            sort(prop, order){
                this.$refs.scTable.sort(prop, order)
        _table_height() {
            return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)"
        }
    },
    data() {
        return {
            scPageSize: this.pageSize,
            isActivat: true,
            emptyText: "暂无数据",
            toggleIndex: 0,
            tableData: [],
            total: 0,
            currentPage: 1,
            prop: null,
            order: null,
            loading: false,
            tableHeight: '100%',
            tableParams: this.params,
            userColumn: [],
            customColumnShow: false,
            summary: {},
            config: {
                size: this.size,
                border: this.border,
                stripe: this.stripe
            }
        }
    },
    mounted() {
        //判断是否开启自定义列
        if (this.column) {
            this.getCustomColumn()
        } else {
            this.userColumn = this.column
        }
        //判断是否静态数据
        if (this.apiObj) {
            this.getData();
        } else if (this.data) {
            this.tableData = this.data;
            this.total = this.tableData.length
        }
    },
    activated() {
        if (!this.isActivat) {
            this.$refs.scTable.doLayout()
        }
    },
    deactivated() {
        this.isActivat = false;
    },
    methods: {
        //获取列
        async getCustomColumn() {
            const userColumn = await config.columnSettingGet(this.tableName, this.column)
            this.userColumn = userColumn
        },
        //获取数据
        async getData() {
            this.loading = true;
            var reqData = {
                [config.request.page]: this.currentPage,
                [config.request.pageSize]: this.scPageSize,
                [config.request.prop]: this.prop,
                [config.request.order]: this.order
            }
            if (this.hidePagination) {
                delete reqData[config.request.page]
                delete reqData[config.request.pageSize]
            }
            Object.assign(reqData, this.tableParams)

            try {
                var res = await this.apiObj.get(reqData);
            } catch (error) {
                this.loading = false;
                this.emptyText = error.statusText;
                return false;
            }
            try {
                var response = config.parseData(res);
            } catch (error) {
                this.loading = false;
                this.emptyText = "数据格式错误";
                return false;
            }
            if (response.code != config.successCode) {
                this.loading = false;
                this.emptyText = response.msg;
            } else {
                this.emptyText = "暂无数据";
                if (this.hidePagination) {
                    this.tableData = response.data || [];
                } else {
                    this.tableData = response.rows || [];
                }
                this.total = response.total || 0;
                this.summary = response.summary || {};
                this.loading = false;
            }
            this.$refs?.scTable?.setScrollTop(0)
            this.$emit('dataChange', res, this.tableData)
        },
        //分页点击
        paginationChange() {
            this.getData();
        },
        //条数变化
        pageSizeChange(size) {
            this.scPageSize = size
            this.getData();
        },
        //刷新数据
        refresh() {
            this.$refs.scTable.clearSelection();
            this.getData();
        },
        //更新数据 合并上一次params
        upData(params, page = 1) {
            this.currentPage = page;
            this.$refs.scTable.clearSelection();
            Object.assign(this.tableParams, params || {})
            this.getData()
        },
        //重载数据 替换params
        reload(params, page = 1) {
            this.currentPage = page;
            this.tableParams = params || {}
            this.$refs.scTable.clearSelection();
            this.$refs.scTable.clearSort()
            this.$refs.scTable.clearFilter()
            this.getData()
        },
        //自定义变化事件
        columnSettingChange(userColumn) {
            this.userColumn = userColumn;
            this.toggleIndex += 1;
        },
        //自定义列保存
        async columnSettingSave(userColumn) {
            this.$refs.columnSetting.isSave = true
            try {
                await config.columnSettingSave(this.tableName, userColumn)
            } catch (error) {
                this.$message.error('保存失败')
                this.$refs.columnSetting.isSave = false
            }
            this.$message.success('保存成功')
            this.$refs.columnSetting.isSave = false
        },
        //自定义列重置
        async columnSettingBack() {
            this.$refs.columnSetting.isSave = true
            try {
                const column = await config.columnSettingReset(this.tableName, this.column)
                this.userColumn = column
                this.$refs.columnSetting.usercolumn = JSON.parse(JSON.stringify(this.userColumn || []))
            } catch (error) {
                this.$message.error('重置失败')
                this.$refs.columnSetting.isSave = false
            }
            this.$refs.columnSetting.isSave = false
        },
        //排序事件
        sortChange(obj) {
            if (!this.remoteSort) {
                return false
            }
            if (obj.column && obj.prop) {
                this.prop = obj.prop
                this.order = obj.order
            } else {
                this.prop = null
                this.order = null
            }
            this.getData()
        },
        //本地过滤
        filterHandler(value, row, column) {
            const property = column.property;
            return row[property] === value;
        },
        //过滤事件
        filterChange(filters) {
            if (!this.remoteFilter) {
                return false
            }
            Object.keys(filters).forEach(key => {
                filters[key] = filters[key].join(',')
            })
            this.upData(filters)
        },
        //远程合计行处理
        remoteSummaryMethod(param) {
            const { columns } = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计'
                    return
                }
                const values = this.summary[column.property]
                if (values) {
                    sums[index] = values
                } else {
                    sums[index] = ''
                }
            })
            return sums
        },
        configSizeChange() {
            this.$refs.scTable.doLayout()
        },
        //插入行 unshiftRow
        unshiftRow(row) {
            this.tableData.unshift(row)
        },
        //插入行 pushRow
        pushRow(row) {
            this.tableData.push(row)
        },
        //根据key覆盖数据
        updateKey(row, rowKey = this.rowKey) {
            this.tableData.filter(item => item[rowKey] === row[rowKey]).forEach(item => {
                Object.assign(item, row)
            })
        },
        //根据index覆盖数据
        updateIndex(row, index) {
            Object.assign(this.tableData[index], row)
        },
        //根据index删除
        removeIndex(index) {
            this.tableData.splice(index, 1)
        },
        //根据index批量删除
        removeIndexes(indexes = []) {
            indexes.forEach(index => {
                this.tableData.splice(index, 1)
            })
        },
        //根据key删除
        removeKey(key, rowKey = this.rowKey) {
            this.tableData.splice(this.tableData.findIndex(item => item[rowKey] === key), 1)
        },
        //根据keys批量删除
        removeKeys(keys = [], rowKey = this.rowKey) {
            keys.forEach(key => {
                this.tableData.splice(this.tableData.findIndex(item => item[rowKey] === key), 1)
            })
        },
        //原生方法转发
        clearSelection() {
            this.$refs.scTable.clearSelection()
        },
        toggleRowSelection(row, selected) {
            this.$refs.scTable.toggleRowSelection(row, selected)
        },
        toggleAllSelection() {
            this.$refs.scTable.toggleAllSelection()
        },
        toggleRowExpansion(row, expanded) {
            this.$refs.scTable.toggleRowExpansion(row, expanded)
        },
        setCurrentRow(row) {
            this.$refs.scTable.setCurrentRow(row)
        },
        clearSort() {
            this.$refs.scTable.clearSort()
        },
        clearFilter(columnKey) {
            this.$refs.scTable.clearFilter(columnKey)
        },
        doLayout() {
            this.$refs.scTable.doLayout()
        },
        sort(prop, order) {
            this.$refs.scTable.sort(prop, order)
        }
    }
}
</script>

<style scoped>
    .scTable {}
    .scTable-table {height: calc(100% - 50px);}
    .scTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
    .scTable-do {white-space: nowrap;}
    .scTable:deep(.el-table__footer) .cell {font-weight: bold;}
    .scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {height: 12px;border-radius: 12px;}
    .scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {width: 12px;border-radius: 12px;}
.scTable {}

.scTable-table {
    height: calc(100% - 50px);
}

.scTable-page {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
}

.scTable-do {
    white-space: nowrap;
}

.scTable:deep(.el-table__footer) .cell {
    font-weight: bold;
}

.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {
    height: 12px;
    border-radius: 12px;
}

.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {
    width: 12px;
    border-radius: 12px;
}
</style>

 src/utils/request.js

@@ -35,11 +35,12 @@
axios.interceptors.response.use(
    (response) => {
        if (response.data.code && response.data.code !== 200) {
            ElNotification.error({
                title: '请求错误',
                message: response.data.msg
            });
            return Promise.reject(response);
            ElMessage({
                message: response.data.msg,
                type: 'warning',
            })
            return new Error()
            // return new Error();
        }
        return response;
    },
@@ -72,10 +73,10 @@
                    }).catch(() => { })
                }
            } else {
                ElNotification.error({
                    title: '请求错误',
                    message: error.message || `Status:${error.response.status}，未知错误！`
                });
                // ElNotification.error({
                //     title: '请求错误',
                //     message: error.message || `Status:${error.response.status}，未知错误！`
                // });
            }
        } else {
            ElNotification.error({

 src/views/console/basic-data/material-warehousing-data/reservoir-location/reservoir-location.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-05-07 22:51:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-10 23:16:26
 * @LastEditTime: 2024-05-12 13:14:41
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/basic-data/material-warehousing-data/reservoir-location/reservoir-location.vue
-->
<template>
@@ -12,7 +12,21 @@
                    <el-container>
                        <el-main>
                            <el-tree default-expand-all ref="group" node-key="id" :data="treeData" :props="props"
                                @node-click="nodeClick" highlight-current :current-node-key="params.areaId"></el-tree>
                                @node-click="nodeClick" highlight-current :current-node-key="params.areaId">
                                <template #default="{ node, data }">
                                    <div class="custom-tree-node">
                                        <span :class="data.isArea ? 'treedisabled' : ''">{{
                                            node.label }}</span>
                                        <el-icon class="icon" @click.stop="renameArea(data)" v-if="data.status"
                                            style="margin-left: auto;margin-right: 4px;">
                                            <ElIconEditPen />
                                        </el-icon>
                                        <el-icon class="icon" v-if="data.status" @click.stop="delArea(data)">
                                            <ElIconDelete />
                                        </el-icon>
                                    </div>
                                </template>
                            </el-tree>
                        </el-main>
                        <el-footer>
                            <el-button @click="addArea" type="primary" icon="el-icon-plus" size="small">添加库区</el-button>
@@ -25,7 +39,7 @@
                        <!-- <el-button type="primary">导入</el-button> -->
                        <import-table style="margin:0 8px" :exportUrl="exportUrl" :uploadUrl="uploadUrl"></import-table>
                        <el-button type="primary" @click="getExport">导出</el-button>
                        <el-popconfirm width="220" title="确定将选择的数据删除" @confirm="table_del([scope.row], '0')">
                        <el-popconfirm width="220" title="确定将选择的数据删除" @confirm="table_del(selection, '0')">
                            <template #reference>
                                <el-button :disabled="selection.length == 0" type="danger" plain
                                    icon="el-icon-delete"></el-button>
@@ -69,10 +83,10 @@
                </el-container>
            </el-container>
        </el-card>
        <el-dialog v-model="areaVisible" title="添加" width="500">
        <el-dialog v-model="areaVisible" title="库区信息" width="500">
            <el-form :model="form" :rules="rules" ref="dialogForm" label-width="120px" label-position="center">
                <el-form-item label="库区编号" prop="code">
                    <el-input v-model="form.code" />
                    <el-input :disabled="form.id" v-model="form.code" />
                </el-form-item>
                <el-form-item label="库区名称" prop="name">
                    <el-input v-model="form.name" />
@@ -81,6 +95,26 @@
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="saveArea">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="optionVisible" title="库位信息" width="500">
            <el-form :model="form1" :rules="rules1" ref="dialogForm1" label-width="120px" label-position="center">
                <el-form-item v-show="form1.warehouseCode" label="库位编号" prop="warehouseCode">
                    <el-input disabled v-model="form1.warehouseCode" />
                </el-form-item>
                <el-form-item label="库位名称" prop="warehouseName">
                    <el-input v-model="form1.warehouseName" />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form1.remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="savePosition">
                        确定
                    </el-button>
                </div>
@@ -129,6 +163,13 @@
                    })
                }
            },
            optionVisible: false,
            form1: {},
            rules1: {
                warehouseName: [
                    { required: true, message: '必填' }
                ]
            },
        }
    },
    mounted() {
@@ -145,13 +186,45 @@
            this.params.areaId = node.id
            this.$refs?.table?.reload(this.params)
        },
        renameArea(data) {
            this.form = { ...data }
            this.areaVisible = true
        },
        addArea() {
            this.form = {}
            this.areaVisible = true
        },
        delArea({ id }) {
            this.$confirm(`确定删除选中当前库区？`, '提示', {
                type: 'warning'
            }).then(() => {
                const loading = this.$loading();
                this.$HTTP.get(`/api/blade-cps/warehouse-area/station-count?id=${id}`).then(res => {
                    if (res.data > 0) {
                        this.$message.warning("该库区已经绑定库位，请先清除库位！")
                    } else {
                        this.$HTTP.delete(`/api/blade-cps/warehouse-area/remove`, {}, { data: [id] }).then(res => {
                            this.$message.success('操作成功')
                            this.init()
                        })
                    }
                })
                loading.close();

            }).catch(() => {

            })
        },
        saveArea() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    if (this.form.id) {
                        return this.$HTTP.put(`/api/blade-cps/warehouse-area/update`, { ...this.form }).then(res => {
                            this.$message.success('操作成功')
                            this.areaVisible = false
                            this.init()
                        })
                    }
                    this.$HTTP.post(`/api/blade-cps/warehouse-area/insert`, { ...this.form, parentId: 1 }).then(res => {
                        this.$message.success('操作成功')
                        this.areaVisible = false
@@ -164,13 +237,36 @@
            this.$refs.table.reload()
        },
        table_add() {

            this.form1 = {}
            this.optionVisible = true
        },
        table_del() {

        table_del(ids) {
            this.$HTTP.delete(`/api/blade-cps/warehouse-station/remove`, {}, { data: ids.map(v => v.id) }).then(res => {
                this.$message.success('操作成功')
                this.search()
            })
        },
        table_edit() {

        table_edit(row) {
            this.form1 = { ...row }
            this.optionVisible = true
        },
        savePosition() {
            this.$refs.dialogForm1.validate(async (valid) => {
                if (valid) {
                    if (this.form1.id) {
                        return this.$HTTP.put(`/api/blade-cps/warehouse-station/update`, { ...this.form1, areaId: this.params.areaId }).then(res => {
                            this.$message.success('操作成功')
                            this.optionVisible = false
                            this.search()
                        })
                    }
                    this.$HTTP.post(`/api/blade-cps/warehouse-station/insert`, { ...this.form1, areaId: this.params.areaId }).then(res => {
                        this.$message.success('操作成功')
                        this.optionVisible = false
                        this.search()
                    })
                }
            })
        },
        handleSelectionChange(selection) {
            this.selection = selection
@@ -186,4 +282,19 @@
}
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.custom-tree-node {
    width: 100%;
    display: flex;

    .icon {
        visibility: hidden;
    }
}

.custom-tree-node:hover {
    .icon {
        visibility: visible;
    }
}
</style>