scd_tools_ui/src/pages/components/drawModal/AbilityModal.vue

<template>
    <div>
        <el-dialog v-model="dialogVisible" title="装置功能配置" width="70%" @close="handleClose" :close-on-click-modal="false">
            <el-button type="primary" plain @click="addAbility(0)"><el-icon>
                    <Plus />
                </el-icon>添加新功能</el-button>
            <el-upload style="display: inline-block;margin: 0 10px;" v-model:file-list="fileList" class="upload-demo"
                :show-file-list="false" :http-request="upTemplate" multiple :limit="1">
                <el-button type="primary" plain :disabled="upState">Excel上传</el-button>
            </el-upload>
            <el-button type="success" plain @click="downloadFile">模板下载</el-button>

            <el-table :data="tableData" style="width: 100%;height: calc(100vh - 600px);">
                <el-table-column label="序号" width="100">
                    <template #default="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="func_name" label="设计功能名称" width="220" />
                <el-table-column prop="fcda_name" label="端子设计名称" width="220" />
                <el-table-column prop="fcda_match_exp" label="端子匹配关键词" width="220" />
                <el-table-column fixed="right" label="操作" width="auto">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="addAbility(1, scope.row)">编辑</el-button>
                        <!-- <el-popconfirm title="确认删除吗?" @confirm="firmSure">
                            <template #reference> -->
                        <el-button link type="primary" size="small" style="color: red;"
                            @click="delAbility(scope.row)">删除</el-button>
                        <!-- </template>
                        </el-popconfirm> -->
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancels">取消</el-button>
                    <el-button type="primary" @click="sureClick">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <AddAbility v-if="addModal" :addModal="addModal" :modelIds="modelIds" :iedTypes="iedTypes" :copyReload="copyReload"
            :editOrAdd="editOrAdd" :editRow="editRow" @addAback="addAback" :tableData="tableData"></AddAbility>
        <DelAbility v-if="delModal" :delModal="delModal" :modelIds="modelIds" :delFcda="delFcda" :copyReload="copyReload"
            @delBack="delBack"></DelAbility>
    </div>
</template>

<script>
import { ref, onMounted, watch, toRefs } from 'vue';
import flow from "@/api/flow/flow"
import system from '@/api/system';
import AddAbility from './AddAbility.vue';
import DelAbility from './DelAbility.vue';
import { ElMessage } from 'element-plus';
export default {
    props: {
        abModal: {
            type: Boolean,
            required: true
        },
        modelId: {
            type: String,
            required: true,
        },
        iedType: {
            type: String,
            required: true,
        }
    },
    setup(props, { emit }) {
        let dialogVisible = ref(false)//模态框开关
        let modelIds = ref('')//模型id
        let iedTypes = ref('')//iedtype
        let addModal = ref(false)//新增功能模态框开关状态
        let delModal = ref(false)//删除功能模态框开关状态
        let tableData = ref([])//表格数据
        let editOrAdd = ref(0)//0为新增，1为编辑
        let editRow = ref({})//编辑的对象
        let delFcda = ref("")//需要删除的fcda_id
        watch(() => props.modelId, (newVal) => {
            modelIds.value = newVal
        })
        watch(() => props.iedType, (newVal) => {
            iedTypes.value = newVal
        })
        // 初始化函数
        function reload() {
            dialogVisible.value = props.abModal
            modelIds.value = props.modelId
            iedTypes.value = props.iedType
            flow.getModelAndIed({//获取所有功能
                model_id: modelIds.value - 0,
                ied_type: iedTypes.value
            }).then(res => {
                tableData.value = res.data
            })
        }

        function downloadFile() {
            const fileUrl = '../../../../public/fanc_comp.xlsx'; // 修改为绝对路径
            fetch(fileUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.blob();
                })
                .then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.download = 'fanc_comp.xlsx'; // 修改文件名
                    a.href = url;
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    window.URL.revokeObjectURL(url);
                })
                .catch(error => {
                    console.error('There was a problem with the fetch operation:', error);
                });
        }
        // 下载报告模板
        function lookTemplate() {
            // 84780
            system.downLoad({ ids: 84780 }).then(res => {
                if (res.code == 0) {//使用接口获取服务器上文件位置
                    let a = window.ApiServer + res.data//合成链接
                    window.location = a//调用原生链接下载文件
                }
            })
        }
        // 文件上传
        function upTemplate(e) {
            // 调用接口进行文件上传
            flow.excelInData({ code: "ied_func_fcda", file: e.file, model_id: modelIds.value - 0 }).then(res => {
                if (res.returncode == 200) {
                    ElMessage({
                        message: "上传成功!",
                        type: "success"
                    })
                    flow.getModelAndIed({//获取所有功能
                        model_id: modelIds.value - 0,
                        ied_type: iedTypes.value
                    }).then(res => {
                        tableData.value = res.data
                    })
                } else {
                    ElMessage({
                        message: res.msg,
                        type: "error"
                    })
                }
            })
        }
        function copyReload() {
            flow.getModelAndIed({//获取所有功能
                model_id: modelIds.value - 0,
                ied_type: iedTypes.value
            }).then(res => {
                tableData.value = res.data
            })
        }
        // 关闭模态框
        function closeModal() {
            dialogVisible.value = false//赋值为false关闭模态框
            emit("abilityBack", dialogVisible.value)//返回给组件状态
        }
        // 确认后关闭模态框
        function sureClose() {
            dialogVisible.value = false//赋值为false关闭模态框
            emit("abilityBack", dialogVisible.value)//返回给组件状态
        }
        // 打开新增或编辑模态框
        function addAbility(num, row) {
            editOrAdd.value = num
            editRow.value = row
            addModal.value = true
        }
        // 删除功能
        function delAbility(row) {
            delFcda.value = row.id
            delModal.value = true
        }
        // 确认删除功能
        function firmSure() {

        }
        function addAback(data) {
            addModal.value = data
        }
        function delBack(data) {
            delModal.value = data
        }
        onMounted(() => {
            reload()
        })
        return {
            dialogVisible,//模态框开关
            reload,//初始化组件
            handleClose: closeModal,//关闭模态框
            cancels: closeModal,//关闭模态框
            sureClick: sureClose,//确认后关闭模态框
            addModal,//新增功能模态框开关状态
            addAbility,//打开新增功能模态框
            addAback,//AddAbility.vue返回模态框状态
            tableData,//表格数据
            modelIds,//本组件需要的模型id
            iedTypes,//本组件需要的iedtypes
            copyReload,//给addability.vue准备的方法
            delAbility,//删除功能
            firmSure,//确认删除功能
            editOrAdd,//0为新增，1为编辑
            editRow,//编辑的对象
            delFcda,//需要删除的fcdaid
            delModal,//删除功能模态框开关状态
            delBack,//DelAbility.vue返回模态框状态
            lookTemplate,//模板下载
            upTemplate,//文件上传
            downloadFile,
        }
    },
    components: {
        AddAbility,//嵌套新增功能窗口
        DelAbility,//嵌套删除模态框
    }
}
</script>

<style scoped></style>