<template>
    <ap-container>
        <ap-aside margin="1111" width="260px">
            <div class="layout-aside-header">
                <div class="layout-aside-header-title">
                    应用列表
                </div>
                <div class="layout-aside-header-icon">
                    <i class="el-icon-plus" @click="addFunctionType"/>
                    <i class="el-icon-edit-outline" @click="editFunctionType"/>
                    <i class="el-icon-delete" @click="deleteFunctionType"/>
                    <el-popover ref="popoverRef" placement="bottom" trigger="click">
                        <el-button-group>
                            <el-button type="primary" icon="el-icon-top" @click="doSortChange('prev')">上移
                            </el-button>
                            <el-button type="primary" icon="el-icon-bottom" @click="doSortChange('next')">下移
                            </el-button>
                            <el-button type="primary" icon="el-icon-s-operation" @click="sortByIndex">一键排序
                            </el-button>
                        </el-button-group>
                        <i class="el-icon-sort" slot="reference"/>
                    </el-popover>
                    <i class="el-icon-supervise" v-if="checkPermission('SYS-FUNCTION-SECRET')" @click="secretDialogVisible = true"/>
                </div>
            </div>
            <div class="field-aside-content" v-loading="loadingTreeFlag">
                <el-tree
                    ref="typeTree"
                    node-key="fdId"
                    :data="typeTreeList"
                    :props="defaultProps"
                    default-expand-all
                    :check-on-click-node="true"
                    :highlight-current="true"
                    :expand-on-click-node="false"
                    :check-strictly="false"
                    @check="nodeClickEvent">
                    <div slot-scope="{ node, data }" style="width: 100%" class="ap-ellipse">
                        <span v-if="data.fdType == 0" style="color: #2e6d91">{{ data.fdName }}</span>
                        <span v-if="data.fdType != 0" style="color: #1890FF;" v-html="getPlatform(data.fdPlatformCode, data.fdName)"></span>
                        <span v-if="data.fdSecret ==  1" class="ap-color-red"><i class="el-icon-supervise"/></span>
                    </div>
                </el-tree>
            </div>
        </ap-aside>
        <ap-split-panel></ap-split-panel>
        <ap-main margin="1110">
            <ap-table :options.sync="tableOpt" ref="functionTableRef"></ap-table>
        </ap-main>
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="600px">
            <el-form ref="dialogForm"
                     :inline="true"
                     :model="dialogForm" :rules="dialogFormRules" label-width="100px" class="ap-form">
                <div class="ap-form-row">
                    <el-form-item label="应用分组" prop="fdParentId">
                        <el-select v-model="dialogForm.fdParentId" filterable placeholder="请选择分组">
                            <el-option label="无" value=""></el-option>
                            <el-option
                                v-for="item in typeGroupList"
                                :key="item.fdId"
                                :label="item.fdName"
                                :value="item.fdId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="类型" prop="fdType">
                        <el-radio v-model="dialogForm.fdType" :label="0">分组</el-radio>
                        <el-radio v-model="dialogForm.fdType" :label="1">应用</el-radio>
                    </el-form-item>
                </div>

                <div class="ap-form-row">
                    <el-form-item label="名称" prop="fdName">
                        <el-input v-model="dialogForm.fdName"></el-input>
                    </el-form-item>
                    <el-form-item label="编码" prop="fdCode">
                        <el-input v-model="dialogForm.fdCode"></el-input>
                    </el-form-item>

                </div>

                <template v-if="dialogForm.fdType == 0">
                    <div class="ap-form-row">
                        <el-form-item label="背景图" prop="fdImage">
                            <el-input v-model="dialogForm.fdImage" placeholder="@/assets/images/cardbg/"></el-input>
                        </el-form-item>
                        <el-form-item label="排序" prop="fdSort">
                            <el-input-number v-model="dialogForm.fdSort" controls-position="right"></el-input-number>
                        </el-form-item>
                    </div>
                </template>

                <template v-if="dialogForm.fdType == 1">
                    <div class="ap-form-row">
                        <el-form-item label="所属平台" prop="fdPlatformCode">
                            <el-select v-model="dialogForm.fdPlatformCode" filterable placeholder="应用所属平台">
                                <el-option
                                    v-for="item in platformList"
                                    :key="item.value"
                                    :label="item.key"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="布局组件" prop="fdLayout">
                            <el-select v-model="dialogForm.fdLayout" filterable placeholder="页面布局组件">
                                <el-option
                                    v-for="item in layoutList"
                                    :key="item.value"
                                    :label="item.key"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="ap-form-row">
                        <!--                        <el-form-item label="图标" prop="fdIcon">-->
                        <!--                            <el-input v-model="dialogForm.fdIcon"></el-input>-->
                        <!--                        </el-form-item>-->
                        <el-form-item label="背景图" prop="fdBg">
                            <el-input v-model="dialogForm.fdBg"></el-input>
                        </el-form-item>
                        <el-form-item label="排序" prop="fdSort">
                            <el-input-number v-model="dialogForm.fdSort" controls-position="right"></el-input-number>
                        </el-form-item>
                    </div>
                </template>

                <div class="ap-form-row">
                    <template v-if="dialogForm.fdType == 1">
                        <el-form-item label="应用参数" prop="fdParameter">
                            <el-input type="textarea" v-model="dialogForm.fdParameter"></el-input>
                        </el-form-item>
                    </template>
                    <el-form-item label="描述" prop="fdDesc">
                        <el-input type="textarea" v-model="dialogForm.fdDesc"></el-input>
                    </el-form-item>
                </div>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveDialog">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="功能权限" :visible.sync="functionDialogVisible" width="800px" @opened="functionDialogOpenedEvent">
            <ap-table :options.sync="functionAuthTableOpt" ref="functionAuthTableRef" style="height: 400px"></ap-table>
        </el-dialog>
        <el-dialog title="JSON查看：控制台可看json对象" :visible.sync="jsonStrDialogVisible" width="600px" :append-to-body="true">
            <div v-html="jsonStr">

            </div>
        </el-dialog>
        <el-dialog title="JSON添加" :visible.sync="jsonInsertDialogVisible" width="600px" :append-to-body="true">
            <div class="ap-color-red">注1：复制后菜单名称，后缀自动添加“_json”</div>
            <div class="ap-color-red">注2：fdId和fdParentId 替换为新的Id。层级父子关系会自动处理。</div>
            <br>
            <div class="flex-center">
                <el-input v-model="insertJsonStr" type="textarea" rows=8></el-input>
            </div>
            <span slot="footer">
                <el-button @click="jsonStrDialogVisible = false">取 消</el-button>
                <ap-button type="primary" :click="copyJsonStr">添加/保存</ap-button>
            </span>
        </el-dialog>

        <el-dialog title="加密应用" :visible.sync="secretDialogVisible" width="350px">
            <el-input v-model="secretCode" placeholder="密文" show-password></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="setSecret">设为加密</el-button>
                <el-button @click="cancleSecret">取消加密</el-button>
                <el-button @click="secretDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="showSecret" >确 定</el-button>
            </span>
        </el-dialog>

    </ap-container>
</template>

<script>
import {convertToArrayData, convertToTreeData} from 'ap-util/util/DataUtil'
import {getNodeByCurrent} from 'ap-util/util/TreeUtil'
import md5 from "js-md5";
import {hasPermission} from "ap-util/util/LoginUserUtil";

export default {
    name: 'SysFunction',
    data() {
        let toolBar = ["add", "edit", "del", "refresh", "save", "separator",
            {
                btnType: "primary",
                text: "复制",
                icon: "el-icon-document-copy",
                onClick: () => {
                    this.doCopy();
                }
            }, "separator",
            {
                btnType: "primary",
                text: "JSON查看",
                icon: "el-icon-tickets",
                onClick: this.showJsonDialog
            }, {
                btnType: "primary",
                text: "JSON添加",
                icon: "el-icon-document-add",
                onClick: this.showJsonInsertDialog
            },
            , "separator",
            {
                btnType: "primary",
                text: "功能权限",
                icon: "el-icon-menu",
                onClick: () => {
                    this.openFunctionAuthDialog();
                }
            }, "separator", "sortAuto", "sortDown", "sortUp"];
        let columns = [
            {
                prop: "fdName",
                label: "菜单名称",
                type: "input",
                minWidth: 120,
                rules: [
                    {required: true, message: '菜单名称必填'},
                ],
            }, {
                prop: "fdParentId",
                label: "父菜单",
                type: "select",
                selectOptionsKey: {label: "fdName", value: "fdId"},
                selectOptionsRemote: "parentList",
                minWidth: 100
            }, {
                prop: "fdTypeId",
                label: "所属应用",
                type: "select",
                selectOptionsKey: {label: "fdName", value: "fdId"},
                selectOptionsRemote: "typeList",
                minWidth: 100
            }, {
                prop: "fdCode",
                label: "编码",
                type: "input",
                minWidth: 120,
                showOverflowTooltip: true,
                rules: [
                    {required: true, message: '编码必填'},
                ],
            }, {
                prop: "fdSort",
                label: "排序",
                type: "inputNumber",
                width: 60,
                align: "center"
            }, {
                prop: "fdUrl",
                label: "跳转路径",
                type: "input",
                showOverflowTooltip: true,
                minWidth: 120,
                rules: [
                    {required: true, message: '跳转路径必填'},
                ],
            }, {
                prop: "fdCmptName",
                label: "组件名称",
                type: "input",
                showOverflowTooltip: true,
                minWidth: 100
            }, {
                prop: "fdCmptUrl",
                label: "组件路径",
                type: "input",
                showOverflowTooltip: true,
                minWidth: 200
            }, {
                prop: "fdIcon",
                label: "图标",
                showOverflowTooltip: true,
                type: "input",
                width: 60,
                align: 'center',
                html: function (value, row) {
                    return '<i class="' + value + '"  style="font-size: 18px;"/>';
                }
            }, {
                prop: "fdBg",
                label: "背景图",
                type: "input",
                width: 60
            }, {
                prop: "fdHidden",
                label: "显示",
                type: "select",
                width: 60,
                selectOptions: [{label: "隐藏", value: 1}, {label: "显示", value: 0}],
                addDefaultValue: 0,
                align: "center",
                html: function (value, row) {
                    if (value == 1) {
                        return '<div class="ap-tag-danger">隐藏</div>'
                    } else if (value == 0) {
                        return '<div class="ap-tag-success">显示</el-tag>';
                    }
                }
            }, {
                prop: "fdDisabled",
                label: "生效",
                type: "select",
                width: 60,
                selectOptions: [{label: "失效", value: 1}, {label: "有效", value: 0}],
                addDefaultValue: 0,
                align: "center",
                html: function (value, row) {
                    if (value == 1) {
                        return '<div class="ap-tag-danger">失效</div>'
                    } else if (value == 0) {
                        return '<div class="ap-tag-success">有效</el-tag>';
                    }
                }
            }];
        let tableOpt = {
            title: "菜单列表",
            columns: columns,
            dataUrl: "/apm/sys/function/getTSysFunctionGridList",
            saveUrl: "/apm/sys/function/saveTSysFunctionGridData",
            editPk: "fdId",
            deletePk: "fdId,name",
            deleteUrl: "/apm/sys/function/deleteTSysFunctionByFdId",
            sortUrl: "/apm/sys/function/updateFunctionSortList",
            method: "POST",
            toolbarBtn: toolBar,
            initData: false,
            rowParentKey: 'fdParentId',
            rowKey: 'fdId',
            defaultExpandAll: true,
            indexAlign: 'left',
            indexWidth: 80,
            pagination: {pageSizes: [1000, 2000, 3000], pageSize: 1000},
            addDefaultObj: {fdDeleted: 0, fdTypeId: '', fdAuthType: 0},
            param: {
                functionTypeId: ""
            }
        };

        let functionAuthColumns = [
            {
                prop: "fdName",
                label: "权限名称",
                type: "input",
                minWidth: 120,
                rules: [
                    {required: true, message: '菜单名称必填'},
                ],
            }, {
                prop: "fdCode",
                label: "编码",
                type: "input",
                minWidth: 120,
                rules: [
                    {required: true, message: '编码必填'},
                ],
            }, {
                prop: "fdSort",
                label: "排序",
                type: "inputNumber",
                minWidth: 80,
                align: "center"
            }, {
                prop: "fdDisabled",
                label: "是否有效",
                type: "select",
                selectOptions: [{label: "失效", value: 1}, {label: "有效", value: 0}],
                addDefaultValue: 0,
                align: "center",
                html: function (value, row) {
                    if (value == 1) {
                        return '<div class="ap-tag-danger">失效</div>'
                    } else if (value == 0) {
                        return '<div class="ap-tag-success">有效</el-tag>';
                    }
                }
            }];
        let functionAuthTableOpt = {
            title: "",
            columns: functionAuthColumns,
            dataUrl: "/apm/sys/function/getSysFunctionAuthGridList",
            saveUrl: "/apm/sys/function/saveTSysFunctionGridData",
            editPk: "fdId",
            deletePk: "fdId,name",
            deleteUrl: "/apm/sys/function/deleteTSysFunctionByFdId",
            method: "POST",
            toolbarBtn: ["add", "edit", "del", "cancel", "refresh", "save"],
            initData: false,
            pagination: {pageSizes: [100, 200, 300], pageSize: 100},
            addDefaultObj: () => {
                return {
                    fdAuthType: 1,
                    fdHidden: 0,
                    fdParentId: this.selectedRow.fdId
                }
            },
            params: () => {
                return {
                    parentId: this.selectedRow.fdId
                }
            }
        };

        return {
            // ----- 左侧树 -----
            loadingTreeFlag: false,
            secretDialogVisible: false,
            fdSecret: 0,
            secretCode: '',
            typeTreeList: [],
            typeGroupList: [],
            platformList: [],
            layoutList: [],
            defaultProps: {
                children: 'children',
                label: 'fdName'
            },
            // ----- dialog -----
            typeList: [],
            dialogVisible: false,
            dialogTitle: '',          // dialog标题
            isAddDialog: true,        // 添加类型dialog
            dialogForm: {
                fdId: '',
                fdParentId: '',
                fdName: '',
                fdCode: '',
                fdPlatformCode: '',
                fdUrl: '',
                fdType: 0,
                fdLayout: '',
                fdIcon: '',
                fdBg: '',
                fdImage: '',
                fdDesc: '',
                fdParameter: '',
                fdSort: undefined
            },
            dialogFormRules: {
                fdSort: [
                    {type: 'number', message: '请输入数字', trigger: 'change'}
                ],
                fdName: [
                    {required: true, message: '应用名称必填', trigger: 'blur'},
                    {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                ],
                fdCode: [
                    {required: true, message: '应用编码必填', trigger: 'blur'},
                    {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                ],
                fdType: [
                    {required: true, message: '类型必填', trigger: 'blur'},
                ],
                fdPlatformCode: [
                    {required: true, message: '所属平台必选', trigger: 'blur'},
                ],

            },

            tableOpt: tableOpt,
            selectedRow: {},
            // 功能权限dialog
            functionDialogVisible: false,
            functionAuthTableOpt: functionAuthTableOpt,
            // json dialog
            jsonStrDialogVisible: false,
            jsonStr: "",
            jsonInsertDialogVisible: false,
            insertJsonStr: "",
            selectTypeName: ""
        }
    },
    created() {
        this.loadTreeData();
    },
    methods: {
        // 左侧树
        loadTreeData() {
            this.loadingTreeFlag = true;
            let code = "";
            if (this.secretCode != null && this.secretCode != '') {
                code = md5(this.secretCode);
            }
            this.$request({
                url: '/apm/sys/functionType/getTSysFunctionTypeList',
                data: {
                    secretCode: code
                },
                method: 'post'
            }).then(response => {
                this.typeTreeList = convertToTreeData(response.data.typeTreeList, {
                    idKey: "fdId",
                    parentKey: "fdParentId",
                    childrenKey: "children",
                });
                this.typeGroupList = response.data.typeGroupList;
                this.platformList = response.data.platformList;
                this.layoutList = response.data.layoutList;
            }).finally(() => {
                this.loadingTreeFlag = false;
            })
        },
        // 左侧树：初始化数据
        initTreeData() {
            // 重置当前选择节点
            this.$refs.typeTree.setCurrentKey();
            this.loadTreeData();
        },
        getPlatform(code, name) {
            switch (code) {
                case "1":
                    return '<i class="el-icon-monitor" /> ' + name;
                case "2":
                    return '<i class="el-icon-mobile-phone" /> ' + name;
                case "3":
                    return '<i class="el-icon-pda" /> ' + name;
                case "4":
                    return '<i class="el-icon-pingban" /> ' + name;

            }
            return name;
        },
        // 修改排序
        doSortChange(type) {
            let currentNode = this.getCurrentNode();
            if (!currentNode.fdId) {
                this.$message.error(`请选择需要操作的节点！`);
                return;
            }
            let exchangeNode = getNodeByCurrent(this.$refs.typeTree, type);
            if (exchangeNode == null) {
                this.$message.error(`无需排序！`);
                return;
            }

            this.$request({
                url: '/apm/sys/functionType/updateFunctionTypeSort',
                method: 'post',
                data: {
                    rowFdId: currentNode.fdId,
                    rowFdSort: exchangeNode.fdSort,
                    exchangeRowFdId: exchangeNode.fdId,
                    exchangeRowFdSort: currentNode.fdSort
                }
            }).then(response => {
                this.$message.success(`修改成功！`)
                this.$refs.popoverRef.doClose();
                this.loadTreeData();
            })
        },
        // 一键排序
        sortByIndex() {
            let list = convertToArrayData(this.$refs.typeTree.data);
            let sortList = [];
            for (var i = 0; i < list.length; i++) {
                sortList.push({
                    fdId: list[i].fdId,
                    fdSort: i + 1
                })
            }
            this.$request({
                url: '/apm/sys/functionType/updateFunctionTypeSortList',
                method: 'post',
                data: {list: JSON.stringify(sortList)}
            }).then(response => {
                this.$message.success(`排序成功！`)
                this.$refs.popoverRef.doClose();
                this.loadTreeData();
            })
        },
        // 选择勾选事件
        nodeClickEvent(data, node, comp) {
            this.tableOpt.params.functionTypeId = data.fdId;
            this.selectTypeName = data.fdName;
            this.tableOpt.addDefaultObj.fdTypeId = data.fdId;
            this.$refs.functionTableRef.refresh();
        },
        // dialog：重置表单
        resetDialogForm() {
            this.dialogForm = {
                fdId: '',
                fdParentId: '',
                fdName: '',
                fdPlatformCode: '',
                fdCode: '',
                fdUrl: '',
                fdType: 0,
                fdLayout: '',
                fdIcon: '',
                fdBg: '',
                fdImage: '',
                fdDesc: '',
                fdParameter: '',
                fdSort: undefined
            };
        },
        getCurrentNode() {
            return this.$refs.typeTree.getCurrentNode() || {}
        },
        // dialog：添加数据
        addFunctionType() {
            this.resetDialogForm();
            this.dialogVisible = true;
            this.dialogTitle = '添加应用';
            this.isAddDialog = true;
        },
        // dialog：编辑数据
        editFunctionType() {
            let currentNodeFdId = this.getCurrentNode().fdId;
            if (!currentNodeFdId) {
                this.$message.error('请选择需要编辑的数据！');
                return
            }

            this.resetDialogForm();
            this.dialogVisible = true;
            this.dialogTitle = '编辑应用';
            this.isAddDialog = false;
            this.dialogForm.fdId = currentNodeFdId;

            this.$request({
                url: '/apm/sys/functionType/getTSysFunctionTypeByFdId',
                method: 'post',
                data: {
                    fdId: currentNodeFdId
                }
            }).then(response => {
                this.dialogForm.fdId = response.data.fdId
                this.dialogForm.fdParentId = response.data.fdParentId
                this.dialogForm.fdType = response.data.fdType
                this.dialogForm.fdName = response.data.fdName
                this.dialogForm.fdCode = response.data.fdCode
                this.dialogForm.fdLayout = response.data.fdLayout
                this.dialogForm.fdImage = response.data.fdImage
                this.dialogForm.fdIcon = response.data.fdIcon
                this.dialogForm.fdBg = response.data.fdBg
                this.dialogForm.fdSort = response.data.fdSort
                this.dialogForm.fdDesc = response.data.fdDesc
                this.dialogForm.fdParameter = response.data.fdParameter
                this.dialogForm.fdPlatformCode = response.data.fdPlatformCode
                this.dialogForm.fdUrl = response.data.fdUrl
            })

        },
        // 删除类型数据
        deleteFunctionType() {
            let currentNode = this.getCurrentNode();
            let currentNodeFdId = currentNode.fdId;
            if (!currentNodeFdId) {
                this.$message.error('请选择需要删除的数据！');
                return
            }

            this.$confirm(`确定要删除【${currentNode.fdName}】?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$request({
                    url: '/apm/sys/functionType/deleteTSysFunctionTypeByFdId',
                    method: 'post',
                    data: {
                        fdId: currentNodeFdId
                    }
                }).then(response => {
                    this.$message.success(`删除成功！已删除${response.data}条数据！`);
                    this.initTreeData();
                })
            })
        },
        // dialog：保存类型数据
        saveDialog() {
            this.$refs.dialogForm.validate((valid) => {
                if (!valid) {
                    this.$message.error(`数据校验失败，请重新填写信息！`);
                    return false;
                }
                console.log(this.dialogForm);
                if (this.dialogForm.fdType == 0 && this.dialogForm.fdParentId != null && this.dialogForm.fdParentId != "") {
                    this.$message.error(`分组下只能是应用！`);
                    return false;
                }

                if (this.isAddDialog) {
                    // 添加数据
                    this.$request({
                        url: '/apm/sys/functionType/insertTSysFunctionType',
                        method: 'post',
                        data: this.dialogForm
                    }).then(response => {
                        this.$message.success(`添加成功！已添加${response.data}条数据！`)
                        this.dialogVisible = false;
                        this.initTreeData();
                    })
                } else {
                    // 更新数据
                    this.$request({
                        url: '/apm/sys/functionType/updateTSysFunctionType',
                        method: 'post',
                        data: this.dialogForm
                    }).then(response => {
                        this.$message.success(`更新成功！已更新${response.data}条数据！`)
                        this.dialogVisible = false;
                        this.initTreeData();
                    })
                }
            });
        },
        showSecret() {
            this.secretDialogVisible = false;
            this.loadTreeData();
        },
        cancleSecret() {
            this.updateSecret(0);
        },
        setSecret() {
            this.updateSecret(1);
        },
        updateSecret(fdSecret) {
            let currentNodeFdId = this.getCurrentNode().fdId;
            if (!currentNodeFdId) {
                this.$message.error('请选择应用！');
                return
            }
            this.$request({
                url: '/apm/sys/functionType/setSecret',
                method: 'post',
                data: {
                    fdId: currentNodeFdId,
                    fdSecret: fdSecret,
                    secretCode: md5(this.secretCode)
                }
            }).then(response => {
                this.loadTreeData();
            })
        },
        checkPermission(code) {
            return hasPermission(code);
        },
        // 复制行
        doCopy() {
            let rowData = this.checkSort();
            if (rowData == null) {
                return;
            }
            this.$request({
                url: '/apm/sys/function/copyFunction',
                method: 'post',
                data: rowData
            }).then(response => {
                this.$message.success(`复制成功！`)
                this.$refs.functionTableRef.refresh();
            })
        },
        checkSort() {
            let selection = this.$refs.functionTableRef.getSelection();
            if (selection.length == 0) {
                this.$message.error(`请选择需要操作的行！`);
                return null;
            } else if (selection.length > 1) {
                this.$message.error(`只能选择一行！`);
                return null;
            }
            return selection[0];
        },
        // 功能权限dialog
        openFunctionAuthDialog() {
            let rowData = this.checkSort();
            if (rowData == null) {
                return;
            }
            this.selectedRow = rowData;
            this.functionAuthTableOpt.title = `功能列表 -【${rowData.fdName}】-【${rowData.fdCode}】`;
            this.functionDialogVisible = true;
        },
        functionDialogOpenedEvent() {
            this.$refs.functionAuthTableRef.refresh();
        },
        showJsonDialog() {
            let rows = this.$refs.functionTableRef.getSelection();

            if (rows == null || rows.length < 1) {
                this.$message.error("请选择需要查看JSON的行");
                return;
            }

            this.jsonStrDialogVisible = true;
            let jsonList = [];
            for (let i = 0; i < rows.length; i++) {
                jsonList.push({
                    fdAuthType: rows[i].fdAuthType,
                    fdBg: rows[i].fdBg,
                    fdCmptName: rows[i].fdCmptName,
                    fdCmptUrl: rows[i].fdCmptUrl,
                    fdCode: rows[i].fdCode,
                    fdDisabled: rows[i].fdDisabled,
                    fdHidden: rows[i].fdHidden,
                    fdIcon: rows[i].fdIcon,
                    fdId: rows[i].fdId,
                    fdName: rows[i].fdName,
                    fdParentId: rows[i].fdParentId,
                    fdSort: rows[i].fdSort,
                    fdTypeId: rows[i].fdTypeId, // 无用
                    fdUrl: rows[i].fdUrl,
                })
            }
            this.jsonStr = JSON.stringify(jsonList);
            console.log(jsonList);
        },
        showJsonInsertDialog() {
            let functionTypeId = this.tableOpt.params.functionTypeId;
            if (functionTypeId == null || functionTypeId == "") {
                this.$message.error("请先选择菜单所属的应用");
                return;
            }
            this.jsonInsertDialogVisible = true;
        },
        copyJsonStr() {
            if (this.insertJsonStr == null || this.insertJsonStr == "") {
                this.$message.error("请先复制json字符串");
                return;
            }
            this.$confirm("确定在【" + this.selectTypeName +"】应用下添加菜单？", '提示', {
                confirmButtonText: '确定添加',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$request({
                    url: '/apm/sys/function/addJsonFunctions',
                    method: 'post',
                    data: {
                        functionTypeId: this.tableOpt.params.functionTypeId,
                        jsonList: this.insertJsonStr
                    }
                }).then(response => {
                    this.$message.success(response.data);
                    this.jsonInsertDialogVisible = false;
                    this.$refs.functionTableRef.refresh();

                })
            })


            console.log(1111111);
        }
    }
}
</script>

<style lang="scss" scoped>
.field-aside-title {
    border-bottom: 1px solid #cccccc;
    padding: 5px 10px;

    & i {
        color: #cccccc;
        margin-left: 5px;
    }

    & i:hover {
        color: #1890FF;
    }

}

.field-aside-title-name {
    font-weight: bold;
    font-size: 14px;
}

.field-aside-content {
    overflow: auto;
}

.field-aside-content /deep/ .el-tree-node__children .el-tree-node__content {
    padding-left: 8px !important;
}
</style>
