smart-bid-web/src/views/analysis/index.vue

<template>
    <!-- 招标解析 -->
    <el-card class="analysis-container">
        <div class="table-container">
            <TableModel 
                :formLabel="formLabel" 
                :showOperation="true" 
                :showRightTools="false" 
                ref="analysisTableRef"
                :columnsList="columnsList" 
                :request-api="listAPI" 
                :sendParams="sendParams" 
                :handleColWidth="250"
            >
                <template slot="tableTitle">
                    <h3>数据列表</h3>
                </template>
                <template slot="tableActions">
                    <el-button @click="handleAdd" v-hasPermi="['analysis:analysis:add']" class="add-btn"><i
                            class="el-icon-plus"></i> 新建项目</el-button>
                    <el-button @click="showViewer = true">预览文档</el-button>
                </template>
                <template slot="handle" slot-scope="{ data }">
                    <el-button type="text" v-hasPermi="['enterpriseLibrary:analysis:detail']" class="action-btn"
                        @click="handleDetail(data)">
                        查看
                    </el-button>
                    <el-button type="text" v-hasPermi="['enterpriseLibrary:analysis:detail']" class="action-btn"
                        @click="handleBidDetail(data)">
                        标段解析
                    </el-button>
                    <el-button type="text" v-hasPermi="['enterpriseLibrary:analysis:detail']" class="action-btn"
                        @click="handleBidListDetail(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>
        <el-dialog :visible.sync="showViewer" width="60%" append-to-body>
            <OnlyOfficeViewer :document-id="documentId" :document-name="documentName" height="80vh"
                :allow-download="true" @close="showViewer = false" @loaded="onViewerLoaded" @error="onViewerError"
                @download-success="onDownloadSuccess" />
        </el-dialog>
        <!-- 新建项目 -->
        <AnalysisForm v-if="showAnalysisForm" :title="title" :row="row" @closeDialog="showAnalysisForm = false"
            :width="600" />
    </el-card>
</template>

<script>
import TableModel from '@/components/TableModel2'
import { columnsList, formLabel } from './config'
import { encryptWithSM4 } from '@/utils/sm'
import { listAPI, delDataAPI } from '@/api/analysis/analysis'
import OnlyOfficeViewer from '@/views/common/OnlyOfficeViewer.vue'
import AnalysisForm from './components/AnalysisForm.vue'
export default {
    name: 'Analysis',
    components: {
        TableModel,
        OnlyOfficeViewer,
        AnalysisForm
    },
    data() {
        return {
            formLabel,
            columnsList,
            listAPI,
            sendParams: {
                enterpriseId: 2
            },
            showViewer: false,
            documentId: '716d9f3d89434c56bc49296dbbccc226',
            documentName: 'technicalSolutionDatabase/2025/11/03/716d9f3d89434c56bc49296dbbccc226.docx',
            showAnalysisForm: false,
            title: '',
            row: {},
            selectedRow: null, // 单选框选中的行数据
        }
    },

    created() {
    },

    methods: {
        onViewerLoaded(editor) {
            console.log('文档查看器已加载', editor);
        },
        onViewerError(error) {
            console.error('文档查看器错误', error);
            this.$message.error('加载文档失败');
        },
        onDownloadSuccess() {
            this.$message.success('文档下载成功');
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.title = "新建项目";
            this.showAnalysisForm = true;
        },

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

        /* 查看操作 */
        handleDetail(row) {
            this.$router.push({
                name: 'AnalysisDetail',
                query: {
                    proId: encryptWithSM4('2')
                }
            })
        },
        /** 标段解析操作 */
        handleBidDetail(row) {
            this.$router.push({
                name: 'AnalysisBidDetail',
                query: {
                    proId: encryptWithSM4('2')
                }
            })
        },
        /** 查看标段操作 */
        handleBidListDetail(row) {
            this.$router.push({
                name: 'AnalysisBidIndex',
                query: {
                    proId: encryptWithSM4('2')
                }
            })
        },

        /* 搜索操作 */
        handleQuery() {
            this.$refs.analysisTableRef.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">
.analysis-container {
    height: calc(100vh - 84px);
    overflow: hidden;
    background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
}

::v-deep .table-card {
    height: calc(100vh - 230px) !important;
}



.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>