scriptimport moment from momentimport ConTitle from dashboardcomponentsConTitlevueimport defineComponent onMounted reactive toRefs from vueimport $groupList $groupDel $groupAdd $groupEdit from api

<!-- 引入moment库用来格式化时间 -->
<script>
    import moment from "moment"
    // 引入组件
    import ConTitle from '../dashboard/components/ConTitle.vue'
    // 引入Vue3的相关API
    import { defineComponent, onMounted, reactive, toRefs } from 'vue'
    // 引入接口请求函数
    import { $groupList, $groupDel, $groupAdd, $groupEdit } from '@/api';
    // 引入element-plus的消息弹窗组件
    import { ElMessageBox } from "element-plus";

    export default defineComponent({
        name: "sheBequnzhu",
        // 注册组件
        components: {
            ConTitle
        },
        setup() {
            // 定义响应式数据
            let Data = reactive({
                // 页面标题
                topTitle: {
                    type: "设备",
                    text: "节点网络",
                    msg: "以分组的形式管理节点设备，提供了搜索、添加新的群组、重命名、移动设备等功能",
                },
                // 查询参数
                query: {
                    currPage: 1,
                    pageSize: 5,
                    keyword: "",
                },
                // 列表数据
                arr: [],
                // 列表总数
                total: 0,
                // 当前选中的标签页
                activeName: "all",
                // 添加/编辑表单数据
                ruleForm: {
                    groupName: "",
                },
                // 添加/编辑表单验证规则
                rules: {
                    groupName: [
                        { required: true, message: "请输入群组名称", trigger: "blur" },
                    ],
                },
                // 是否显示添加/编辑弹窗
                dialogVisible: false,
                // 当前编辑的群组ID
                editId: "",
            })
            // 页面初始化时获取列表数据
            onMounted(() => {
                getData()
            })

            // 格式化时间函数
            const formatTime = (value) => {
                return moment(value).format('YYYY-MM-DD')
            };

            // 添加/编辑群组函数
            let addItem = () => {
                // 验证表单
                dynamicValidateForm.ruleForm.validate((valid) => {
                    if (valid) {
                        console.log("submit!");
                        // 调用添加/编辑接口
                        // 如果Data.editId为空，则表示添加群组；否则表示编辑群组
                        if (Data.editId == '') {
                            $groupAdd({ groupName: Data.ruleForm.groupName }).then((res) => {
                                console.log(res);
                                if (res.msg == "success") {
                                    Data.dialogVisible = false;
                                    getData();
                                }
                            });
                        } else {
                            $groupEdit({
                                groupName: Data.ruleForm.groupName,
                                id: Data.editId,
                            }).then((res) => {
                                console.log(res);
                                if (res.msg == "success") {
                                    Data.dialogVisible = false;
                                    tgetData();
                                }
                            });
                        }
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            }

            // 获取列表数据函数
            const getData = () => {
                // 调用查询接口
                $groupList(Data.query).then(res => {
                    console.log(res);
                    Data.arr = res.data;
                    Data.total = res.total;
                });
            };

            // 编辑群组函数
            let editFun = (id, name) => {
                // 显示添加/编辑弹窗，并设置编辑群组的ID和群组名称
                Data.dialogVisible = true;
                Data.editId = id;
                Data.ruleForm.groupName = name;

            }

            // 删除群组函数
            let delFun = (id) => {
                // 弹出确认框
                ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        // 调用删除接口
                        $groupDel({
                            id: id
                        }).then((res) => {
                            console.log(res);
                            if (res.msg == "success") {
                                console.log(6666);
                                 // 提示删除成功
                                 ElMessageBox.$message({
                                    type: "success",
                                    message: "删除成功!",
                                });
                                // 重新获取列表数据
                                getData();
                            }
                        });
                    })
                    .catch(() => {
                        // 提示已取消删除
                        ElMessageBox.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            };

            // 定义动态表单引用
            let dynamicValidateForm = ref();

            // 编辑群组提交函数
            let editItem = () => {
                // 验证表单
                dynamicValidateForm.ruleForm.validate((valid) => {
                    if (valid) {
                        console.log("submit!");
                        // 调用编辑接口
                        $groupEdit({
                            groupName: Data.ruleForm.groupName,
                            id: Data.editId,
                        }).then((res) => {
                            console.log(res);
                            if (res.msg == "success") {
                                Data.dialogVisible = false;
                                tgetData();
                            }
                        });
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            };

            // 搜索函数
            let fn = () => {
                getData();
            };

            // 返回响应式数据和相关函数
            return {
                ...toRefs(Data),
                formatTime,
                delFun,
                editFun,
                editItem,
                fn,
            }
        }
    })
</script