smart_archives_web/src/views/archivesManagement/fileManager/components/rightTable.vue

<template>
    <!-- 档案目录管理 -->
    <div>
        <el-card style="min-height: calc(100vh - 190px);">
        <TableModel :formLabel="formLabel" :showOperation="fileStatus === '0'" :showRightTools="true" ref="tableRef"
            :columnsList="columnsList" :request-api="getFileManageApi" :send-params="defaultParams">
            <template slot="dataSource" slot-scope="{ data }">
                <span>{{ data.dataSource === '1' ? '本系统上传' : '智慧现场' }}</span>
            </template>
            <template slot="fileName" slot-scope="{ data }">
                <span class="file-name-link" @click="viewFile(data)">{{ data.fileName }}</span>
            </template>
            <template slot="btn">
                <el-button plain size="mini" type="primary" icon="el-icon-plus" v-hasPermi="['file:manage:add']"
                    @click="handleAdd" :disabled="addBtnIsShow" v-if="fileStatus === '0'">
                    新增
                </el-button>
            </template>

            <template slot="handle" slot-scope="{ data }">
                <el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['file:manage:update']"
                    @click="handleUpdate(data)">
                    修改
                </el-button>
                <el-button plain size="mini" type="danger" icon="el-icon-delete" v-hasPermi="['file:manage:del']"
                    @click="handleDelete(data)">
                    删除
                </el-button>
            </template>
        </TableModel>
            <!-- 新增/编辑 -->
            <AddTableData v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
                @closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :width="600" :projectId="projectId" />
            <!-- 预览文件 -->
            <ViewFile v-if="isViewflag" :rowData="row" :title="title" @closeDialog="closeDialog" @showColose="showColose" :width="600" />
        </el-card>
    </div>
</template>

<script>
import TableModel from '@/components/TableModel'
import { columnsList, formLabel } from './config'
import {
    delFileManageApi,
    getFileManageApi,
} from '@/api/archivesManagement/fileManager/fileManager.js'
import AddTableData from './addTableData'
import ViewFile from '@/views/viewFile/viewFile.vue'


export default {
    name: 'FileRightTable',
    props:{
        projectId:{
            type:String,
            default:''
        },
        selectedNode:{
            type:Object,
            default:null
        },
        fileStatus:{
            type:String,
            default:''
        }
    },
    components: {
        TableModel,
        AddTableData,
        ViewFile
    },
    data() {
        return {
            formLabel,
            columnsList,
            getFileManageApi,
            title: "",
            isflag: false,
            isViewflag: false,
            isAdd: '',
            row: {},
            loading: false,
            addBtnIsShow:true,
            defaultParams: {}
        }
    },

    created() {

    },

    methods: {
        
        closeDialog() {
            this.isflag = false;
            this.isViewflag = false; 
        },
        showColose() {
            this.isflag = false;
            this.isViewflag = false; 
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.title = "新增";
            this.isAdd = 'add';
            this.isflag = true;
            this.row = this.selectedNode;
            this.row.detailStatus = false;
            this.row.belongName = this.selectedNode.parentName + '/' + this.selectedNode.label
            
        },

        /** 修改操作 */
        handleUpdate(row) {
            this.title = "修改";
            this.isAdd = 'edit';
            this.row = row;
            this.row.belongName = this.selectedNode.parentName + '/' + this.selectedNode.label
            this.row.detailStatus = false;
            this.isflag = true;
        },
        
        // 预览文件
        viewFile(row) {
            this.title = "预览";
            this.isAdd = 'view';
            this.row = row;
            this.isViewflag = true;
        },
        /* 搜索操作 */
        handleQuery() {
            this.$refs.tableRef.getTableList()
        },
        /** 删除操作 */
        handleDelete(row) {
            this.$modal.confirm(`是否确认删除文件名称为"${row.contentName}"的数据项？`).then(() => {
                // 显示加载遮罩
                this.$modal.loading("正在删除，请稍候...");
                delFileManageApi({ id: row.id }).then(res => {
                    this.$modal.closeLoading();
                    if (res.code === 200) {
                        this.$modal.msgSuccess("删除成功");
                        this.handleQuery();
                    } else {
                        this.$modal.msgError(res.msg);
                    }
                }).catch(error => {
                    this.$modal.closeLoading();
                    this.$modal.msgError(error);
                });
            }).catch(() => {
                // 用户取消删除，不需要处理
            });
        },
    },
    // 监听选中的节点
    watch: {
        selectedNode: {
            handler(newVal) {
                this.addBtnIsShow = !(newVal && Number(newVal.level) === 4)
                // 更新并下发默认请求参数（例如 parentId、proId）
                const parentId = newVal && newVal.id ? newVal.id : 0
                const proId = this.projectId
                this.defaultParams = { parentId,proId }
                if (this.$refs.tableRef) {
                    this.$refs.tableRef.queryTableList({ parentId,proId })
                }
            },
            immediate: true, // 表示立即执行
        },
    },
}
</script>
<style scoped>
.file-name-link {
    color: #409EFF;
    cursor: pointer;
}
.file-name-link:hover {
    text-decoration: underline;
}
</style>