smart-bid-web/src/views/enterpriseLibrary/tool/index.vue

<template>
    <!-- 工器具库 -->
    <el-card class="tool-container">
        <!-- 返回按钮 -->
        <div class="back-container">
            <el-button type="default" size="small" @click="handleBack" class="back-btn">
                返回
            </el-button>
        </div>
        <div class="table-container">
            <TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="false" ref="toolTableRef"
                :columnsList="columnsList" :request-api="listAPI" :sendParams= "sendParams">
                <template slot="tableTitle">
                    <h3>数据列表</h3>
                </template>
                <template slot="tableActions">
                    <el-button @click="handleModelExport" v-hasPermi="['enterpriseLibrary:tool:add']"
                        class="add-btn">导入模板下载</el-button>
                    <el-button @click="handleBathchImport" v-hasPermi="['enterpriseLibrary:tool:import']"
                        class="add-btn">批量导入</el-button>
                    <el-button @click="handleAdd" v-hasPermi="['enterpriseLibrary:tool:add']" class="add-btn"><i
                            class="el-icon-plus"></i> 新增工器具</el-button>
                </template>
                <template slot="deptName" slot-scope="{ data }">
                    <span>{{ data.dept.deptName || '--' }}</span>
                </template>
                <template slot="handle" slot-scope="{ data }">
                    <el-button type="text" v-hasPermi="['enterpriseLibrary:tool:detail']" class="action-btn"
                        @click="handleDetail(data)">
                        查看
                    </el-button>
                    <el-button type="text" v-hasPermi="['enterpriseLibrary:tool:edit']" class="action-btn"
                        style="color: #EAA819;" @click="handleUpdate(data)">
                        编辑
                    </el-button>
                    <el-button type="text" v-hasPermi="['enterpriseLibrary:tool:del']" class="action-btn"
                        style="color: #DB3E29;" @click="handleDelete(data)">
                        删除
                    </el-button>
                    
                </template>
            </TableModel>
        </div>

        <!-- 添加方案类型弹窗 -->
        <ToolForm ref="toolForm" v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
            @closeDialog="closeDialog" :width="600" />
        <!-- 批量导入弹窗 -->
        <ImportExcelDialog 
            :visible.sync="importExcelDialogVisible" 
            ref="importExcelDialog" 
            title="工器具导入"
            :upload-url="importExcelDialogUploadUrl" 
            @upload-success="handleImportSuccess" 
            @close="handleImportClose"
            :maxFileTips="maxFileTips"
            :params = "params"
        />
    </el-card>
</template>

<script>
import TableModel from '@/components/TableModel2'
import { columnsList, formLabel } from './config'
import ToolForm from './components/ToolForm.vue'
import { listAPI, delDataAPI } from '@/api/enterpriseLibrary/tool/tool'
import { encryptWithSM4, decryptWithSM4 } from '@/utils/sm'
import { downloadFileWithLoading } from '@/utils/download'
import ImportExcelDialog from '@/views/common/ImportExcelDialog'
const IMPORT_URL = '/smartBid/mainDatabase/tool/importData';
export default {
    name: 'Tool',
    components: {
        TableModel,
        ToolForm,
        ImportExcelDialog
    },
    data() {
        return {
            formLabel,
            columnsList,
            listAPI,
            enterpriseId: decryptWithSM4(this.$route.query.enterpriseId) || '0',
            title: "",
            isflag: false,
            isAdd: '',
            row: {},
            maxFileTips:'20MB',
            importExcelDialogVisible: false,
            // 批量导入上传地址（需要根据实际API接口修改）
            importExcelDialogUploadUrl: process.env.VUE_APP_BASE_API + IMPORT_URL,
            params:{
                enterpriseId: decryptWithSM4(this.$route.query.enterpriseId) || '0',
            },
        }
    },

    created() {
    },
    computed:{
        sendParams(){
            return {
                enterpriseId : this.enterpriseId
            }
        }
    },
    methods: {
        // 返回上一页
        handleBack() {
            const obj = {
                path: "/enterpriseKnowledge/index",
                query: {
                    enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
                }
            }
            this.$tab.closeOpenPage(obj)
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.title = "新增工器具";
            this.isAdd = 'add';
            this.row = {enterpriseId:this.enterpriseId};
            this.isflag = true;
        },

        /** 修改操作 */
        handleUpdate(row) {
            this.title = "修改工器具";
            this.isAdd = 'edit';
            this.row = row;
            this.isflag = true;
        },

        /* 查看操作 */
        handleDetail(row){
            this.title = "查看详情";
            this.isAdd = 'detail';
            this.row = row;
            this.isflag = true;
        },
        // 模板下载
        handleModelExport() {
            downloadFileWithLoading(
                'smartBid/commonDownload/downLoadToolModel',
                '工器具导入模板.xlsx',
                '正在下载模板，请稍候...'
            )
        },
        // 批量导入
        handleBathchImport(){
            this.importExcelDialogVisible = true;
        },
        handleImportSuccess() {
            this.handleQuery();
        },
        handleImportClose() {
            this.handleQuery();
        },
        closeDialog() {
            this.isflag = false;
        },
        /* 搜索操作 */
        handleQuery() {
            this.$refs.toolTableRef.getTableList()
        },
        /** 删除操作 */
        handleDelete(row) {
            this.$confirm(`确定要删除"${row.toolName}"吗？删除后将无法恢复！`, '操作提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
                customClass: 'delete-confirm-dialog'
            }).then(() => {
                delDataAPI(
                    {
                        toolId: row.toolId,
                        enterpriseId: this.enterpriseId
                    }
                ).then(res => {
                    if (res.code === 200) {
                        this.$message.success('删除成功');
                        this.handleQuery();
                    } else {
                        this.$message.error(res.msg || '删除失败');
                    }
                }).catch(error => {
                    console.error('删除失败:', error);
                });
            })
        },
    },
}
</script>
<style scoped lang="scss">
.tool-container {
    height: calc(100vh - 84px);
    overflow: hidden;
    background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
}

.back-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 20px;

    .back-btn {
        width: 98px;
        height: 36px;
        background: #FFFFFF;
        box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
        border-radius: 4px;
        border: none;
        color: #666;
        font-size: 14px;
        transition: all 0.3s ease;

        &:hover {
            background: #f5f5f5;
            color: #409EFF;
            box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
        }
    }
}


.add-btn {
    width: 121px;
    height: 36px;
    background: #1F72EA;
    box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
    border-radius: 4px 4px 4px 4px;
    color: #fff;
    border: none;
    font-size: 14px;
    transition: all 0.3s;

    &:hover {
        background: #4A8BFF;
        box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
    }
}

.action-btn {
    margin-right: 8px;

    &:last-child {
        margin-right: 0;
    }
}
</style>