sasp-admin 0.2.57

package/src/views/complex/rendering/complexShow.vue

@@ -0,0 +1,16 @@
+<template>
+    <complex-view-rendering  :resource-id="this.$route.query.resourceId"
+                       ></complex-view-rendering>
+</template>
+
+<script>
+    import ComplexViewRendering from '../../../components/complexViewRendering'
+    export default {
+        name: "complex-how",
+        components: {ComplexViewRendering},
+    }
+</script>
+
+<style scoped>
+
+</style>

package/src/views/data/dataManage.vue

@@ -0,0 +1,560 @@
+<template>
+    <div style="width: 100%;height: 100%" @click="menuVisible = false">
+        <el-container style="height: 100%;position: relative">
+        <!--鼠标右键点击出现页面-->
+        <el-menu
+                :style="{'position': 'fixed','z-index':'99','top':top,'left':left}"
+                class="el-menu-vertical"
+                @select="handleRightSelect"
+                active-text-color="#fff" v-show="menuVisible"
+                text-color="#fff">
+            <el-menu-item index="addChild" class="menuItem">
+                <span slot="title">添加下级数据(A)</span>
+            </el-menu-item>
+            <el-menu-item index="addSame" class="menuItem">
+                <span slot="title">添加同级数据(C)</span>
+            </el-menu-item>
+            <hr style="color: #ffffff">
+            <el-menu-item index="removeCurrent" class="menuItem">
+                <span slot="title">删除当前节点(R)</span>
+            </el-menu-item>
+            <el-menu-item index="removeCheck" class="menuItem">
+                <span slot="title">删除勾选节点(D)</span>
+            </el-menu-item>
+        </el-menu>
+        <div class = "leftBlock">
+            <el-header style="height: 40px;padding: 0">
+                <el-input
+                        placeholder="输入关键字进行过滤"
+                        v-model="filterText" style="width: 209px;margin-top: 5px;" size="small">
+                </el-input>
+                <el-button @click="addNode()" style="margin-left: 15px" type="primary" icon="el-icon-circle-plus" size="small">添加</el-button>
+                <el-button @click="removeNode"  style="margin-left: 15px" type="danger" icon="el-icon-delete" size="small">删除</el-button>
+            </el-header>
+            <el-aside class="asideTree">
+                <common-tree :rootDatas="rootDatas" :refreshProper="typeId" :nodekey="nodekey" ref="commonTreeRef" :defaultProps="defaultProps"
+                             :treeAllowDrag="treeAllowDrag" :treeNodeDrop="treeNodeDrop" :tree-allow-drop="treeAllowDrop" :draggable=true
+                             :filterText="filterText" :expandOnclickNode=false :defaulExpand="defaulExpand" :rightClick="rightClick"
+                             :nodeClick="nodeClick" :requestUrl="api.data.getDataByType" :requestParam="{'typeId':typeId,'getOutDate':'1'}"
+                             :default-shift-key-select=true :default-ctrl-key-select=true
+                >
+
+                </common-tree>
+            </el-aside>
+        </div>
+        <div class="rightBlock">
+            <el-main style="padding-top: 0;height: 100%">
+                <el-form :model="formData" :rules="rules" style="width: 100%" ref="submitForm" size="small"  label-width="110px">
+                    <el-form-item label="数据字典名称" prop="dataName">
+                        <el-input type="textarea" v-model="formData.dataName" ref="dataNameTextarea" :autosize="{minRows:4,maxRows:6}"></el-input>
+                    </el-form-item>
+                    <el-form-item label="数据字典编码">
+                        <el-input v-model="formData.dataCode"></el-input>
+                    </el-form-item>
+                    <el-form-item label="图标">
+                        <el-input v-model="formData.dataicon" style="display: none"></el-input><el-button @click="menuIconDialog = true">
+                        <i :class="currentIcon" style="font-size:20px"></i></el-button>
+                        <el-button style="position: relative;top:-4px" @click="clearIcon()">清空</el-button>
+                    </el-form-item>
+                    <el-form-item label="字典状态">
+                        <el-radio v-model="formData.outDate" label="0">正常</el-radio>
+                        <el-radio v-model="formData.outDate" label="1">过期</el-radio>
+                    </el-form-item>
+                    <el-form-item label="描述">
+                        <el-input type="textarea" v-model="formData.dataDesc" :autosize="{minRows:2,maxRows:4}"></el-input>
+                    </el-form-item>
+                    <el-form-item label="排序" prop="dataOrder">
+                        <el-input v-model="formData.dataOrder"></el-input>
+                    </el-form-item>
+                </el-form>
+                <el-footer style="text-align: center">
+                    <el-button icon="el-icon-circle-check" @click="save" :disabled="saveDisabled" type="primary" size="small">保存</el-button>
+                </el-footer>
+            </el-main>
+        </div>
+        <el-dialog :close-on-click-modal=false :visible.sync="menuIconDialog" class="font-dialog" title="选择图标" width="70%" height="80%" top="10vh" :modal=false>
+            <font-icon :callback="getmenuIcon"></font-icon>
+        </el-dialog>
+    </el-container>
+    </div>
+</template>
+<script>
+    import {FontIcon} from 'sasp-base';
+
+    export default {
+        name: "data-manage",
+        components: {FontIcon},
+        props:{
+            typeId:{required:true,default:""},
+            typeName:{required:false,default:""},
+        },
+        data(){
+            return {
+                nodekey:'id',
+                filterText:'', // 需要过滤节点的关键字
+                rootDatas:[], // tree的根节点数据
+                defaultProps: { // tree中节点属性
+                    children: 'children',
+                    label: 'dataName',
+                    // isLeaf: 'leaf',
+                },
+                menuVisible:false, // 右击菜单显示的控制
+                defaulExpand:['-1'], // 默认展开节点
+                orginParentId:['-1'], // 根节点id
+                objectID:null,  // 右击时节点id,如果与上次相同则菜单保持显示
+                formData:{
+                    "parentId":'-1',
+                    "dataName":'',
+                    "dataCode":'',
+                    "dataicon":'',
+                    "dataDesc":'',
+                    "dataOrder":'',
+                    "outDate":"0",
+                    "id":'-1', // 默认为第一层级数据
+                },
+                loading:true, // tree控件中的加载条
+                shiftKeyData:'', // shift鼠标左击快捷操作
+                saveDisabled:false, // 保存按钮不能频繁点击
+                menuIconDialog:false,
+                currentIcon:'saspiconfont pl-icon-tuxiang',
+                rules:{
+                    dataName:[
+                        { required: true, message: '请填写内容', trigger: 'blur' }
+                    ],
+                    dataOrder:[
+                        {validator:this.platValidator.checkNumber,trigger:'blur'}
+                    ]
+                },
+                top:0,
+                left:0,
+                currentNode:{},//当前选中的节点
+            };
+        },
+        created(){
+            let vm = this;
+            vm.init();
+            document.onkeyup = function (e) { // 右键菜单快捷键
+                if(vm.menuVisible){
+                    let key = e.key.toLowerCase();
+                    switch (key) {
+                        case "a":
+                            vm.menuVisible = false;
+                            vm.handleRightSelect('addChild');
+                            break;
+                        case "c":
+                            vm.menuVisible = false;
+                            vm.handleRightSelect('addSame');
+                            break;
+                        case "r":
+                            vm.menuVisible = false;
+                            vm.handleRightSelect('removeCurrent');
+                            break;
+                        case "d":
+                            vm.menuVisible = false;
+                            vm.handleRightSelect('removeCheck');
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            }
+        },
+        watch:{
+            typeId(){
+                this.typeId && this.init();
+            },
+        },
+        methods: {
+            // 初始化
+            init() {
+                let vm = this;
+                vm.loading = true; // 每次typeId变化时初始化数据
+                vm.currentFinish = false;
+                vm.filterText = '';
+                vm.rootDatas = [];
+                vm.initFormData();
+                vm.rootDatas.push({
+                    "dataName": vm.typeName,
+                    "id": "-1",
+                    "parentId": null,
+                    "dataOrder": 1,
+                    "dataState": 1,
+                });
+                vm.$nextTick(function () { // 清除表單校驗
+                    vm.$refs.submitForm.clearValidate();
+                })
+            },
+            // 节点操作
+            addNode(key) {
+                key = key ? key : "addChild"; // 默认添加子元素
+                let vm = this;
+                let currentNode = vm.$refs.commonTreeRef.$refs.elTree.getCurrentNode();
+                let parentId = '';
+                if (key == 'addChild') {
+                    if (!currentNode) { // 如果没选中默认添加第一级
+                        parentId = '-1';
+                    } else {
+                        parentId = currentNode.id; // 当前选中节点的id是新增数据的父级，如果没选默认是-1
+                    }
+                } else { // 添加同级数据
+                    if (vm.orginParentId.indexOf(currentNode.id) > -1) {
+                        vm.$message("不能添加根节点数据！");
+                        return;
+                    }
+                    parentId = currentNode.parentId;
+                }
+
+                vm.$refs.dataNameTextarea.$el.children[0].focus(); // 焦点事件完成后设置初始化数据
+                vm.formData = {
+                    "parentId": parentId,
+                    "dataName": '',
+                    "dataCode":'',
+                    "dataicon": '',
+                    "dataDesc": '',
+                    "dataOrder": '',
+                    "outDate":"0",
+                    "id": '',
+                };
+            },
+            removeCurrentNode() { // 删除当前节点
+                let vm = this;
+                vm.$confirm('确定删除当前节点?', '警告', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                }).then(function () {
+                    let currentNode = vm.$refs.commonTreeRef.$refs.elTree.getCurrentNode();
+                    let removeNodeArr = vm.getCurrentChildren(currentNode, []);
+                    vm.axios.post(vm.api.data.deleteData, {"ids": removeNodeArr.join(",")}).then(function (res) {
+                        if (res.data.operateSuccess) {
+                            vm.initTreeRootData();
+                            vm.$refs.commonTreeRef.init();
+                        }
+                        vm.initFormData();
+                        vm.$message({
+                                duration: 1000,
+                                type: 'success',
+                                message: res.data.operateMessage
+                            }
+                        );
+                    });
+                }).catch(function () {
+                    vm.$message({
+                        duration: 1000,
+                        type: 'info',
+                        message: '已取消'
+                    });
+                });
+            },
+            initTreeRootData() {
+                let vm = this;
+                vm.rootDatas = [];
+                vm.rootDatas.push({
+                    "dataName": vm.typeName,
+                    "id": "-1",
+                    "parentId": null,
+                    "dataOrder": 1,
+                    "dataState": 1,
+                });
+            },
+            removeNode() { // 刪除勾選節點
+                let vm = this;
+                let removeArr = vm.$refs.commonTreeRef.getTreeCheckedNodes("key");
+                if (removeArr.length == 0) {
+                    vm.$message("请勾选需要删除的节点！");
+                    return;
+                }
+                vm.$confirm('确定删除已勾选节点?', '警告', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                }).then(function () {
+                    vm.axios.post(vm.api.data.deleteData, {"ids": removeArr.join(",")}).then(function (res) {
+                        if (res.data.operateSuccess) {
+                            vm.$refs.commonTreeRef.defaultTreeRemove(removeArr);
+                           /* vm.initTreeRootData();
+                            vm.$refs.commonTreeRef.init();*/
+                        }
+                        vm.$message({
+                                duration: 1000,
+                                type: 'success',
+                                message: res.data.operateMessage
+                            }
+                        );
+                        vm.initFormData();
+                    })
+                }).catch(function () {
+                    vm.$message({
+                        duration: 1000,
+                        type: 'info',
+                        message: '已取消'
+                    });
+                });
+            },
+            save() { // 提交
+                let vm = this;
+                let submitData = {};
+                Object.assign(submitData, vm.formData);
+                if (submitData.id == '-1') { // 如果是-1说明是进来什么都没做直接添加的，置空
+                    submitData.id = '';
+                }
+
+                if (!submitData.parentId) {
+                    vm.$message("请选择对应操作节点后再执行添加！");
+                    return;
+                }
+
+                if (!submitData.dataOrder && submitData.dataOrder != 0) {//dataOrder没写，获取当前同级节点的数量，从0开始。不+1
+                    submitData.dataOrder = vm.$refs.commonTreeRef.$refs.elTree.store.nodesMap[submitData.parentId].data.children.length;
+                }
+                submitData.dataOrder = Number(submitData.dataOrder);
+                vm.$refs.submitForm.validate(function (valid) {
+                    if (!valid) { // 验证不通过返回
+                        return;
+                    }
+                    vm.saveDisabled = true; // 设置按钮不可点击
+                    submitData.typeId = vm.typeId; // 设置typeId
+                    if (submitData.id) { // 修改
+                        let children=[];
+                        if(vm.currentNode.children){
+                            children=vm.currentNode.children;
+                        }
+                        vm.axios.post(vm.api.data.update, submitData).then(function (res) {
+                            vm.saveDisabled = false;
+                            if (res.data.operateSuccess) {
+                               // vm.$refs.commonTreeRef.init();
+                                let obj=res.data.operateObj||{};
+                                let node = vm.$refs.commonTreeRef.getNode(obj.id);
+                                Object.assign(node.data,obj)
+                                if(children.length>0){
+                                    obj.children=children;
+                                }
+                               // vm.$set( vm.rootDatas[0].children[0].children[0],"dataName","aaa")
+                               vm.$refs.commonTreeRef.defaultTreeUpdate(obj.id, obj);
+                                // 根据 data 获取tree组件中的 node
+                                setTimeout(()=>{
+                                    vm.defaulExpand=Object.assign([],obj.id)
+                                    vm.nodeClick(obj,node);
+                                },0)
+                            }
+                            vm.$message({
+                                    duration: 1000,
+                                    type: 'success',
+                                    message: res.data.operateMessage
+                                }
+                            );
+                        });
+                    } else {//新增
+                        vm.axios.post(vm.api.data.add, submitData).then(function (res) {
+                            vm.saveDisabled = false;
+                            if (res.data.operateSuccess) {
+                                //vm.$refs.commonTreeRef.init();
+                                let obj= res.data.operateObj[0]||{};
+                                let parentCode=obj.parentId||"";
+                                vm.$refs.commonTreeRef.defaultTreeAppend(res.data.operateObj, parentCode);
+                                // 根据 data 获取tree组件中的 node
+                                let node = vm.$refs.commonTreeRef.getNode(obj);
+                                vm.nodeClick(obj,node);
+                                vm.$refs.commonTreeRef.setTreeCurrentKey(obj.id);
+                            }
+                            vm.$message({
+                                    duration: 1000,
+                                    type: 'success',
+                                    message: res.data.operateMessage
+                                }
+                            );
+                        });
+                    }
+                    vm.initFormData();
+                    setTimeout(function () { // 添加修改异常时 1.5秒后解除按钮禁用
+                        vm.saveDisabled = false;
+                    }, 1500);
+                });
+            },
+            getCurrentChildren(node, allNodeArr) { // 获取指定节点的所有下级（包括自己）的id
+                let childProper = "children";
+                if (node.id != '-1') {
+                    allNodeArr.push(node.id);
+                }
+                if (node[childProper] && node[childProper].length > 0) {
+                    for (let elem of node[childProper]) {
+                        this.getCurrentChildren(elem, allNodeArr);
+                    }
+                }
+                return allNodeArr;
+            },
+            //初始化表单数据
+            initFormData() {
+                let vm = this;
+                vm.formData = {
+                    "parentId": '-1',
+                    "dataName": '',
+                    "dataCode":'',
+                    "dataicon": '',
+                    "dataDesc": '',
+                    "dataOrder": '',
+                    "outDate":"0",
+                    "id": '-1', // 默认为第一层级数据
+                };
+                vm.currentIcon = 'saspiconfont pl-icon-tuxiang';
+            },
+            // 树拖拽操作
+            treeAllowDrop(draggingNode, dropNode, type) { // 允许拖动的位置
+                let vm = this;
+                return !((type == 'next' || type == 'prev') && vm.orginParentId.indexOf(dropNode.data.id) > -1);
+            },
+            treeAllowDrag(node) {　// 允许拖动的节点
+                let vm = this;
+                return vm.orginParentId.indexOf(node.data.id) <= -1;
+            },
+            treeNodeDrop(node, endNode, type) { // 拖拽完成后修改数据
+                let vm = this;
+                let parentId = '';
+                if (type == 'inner') {
+                    parentId = endNode.data.id; // 下级
+                }
+                if (type == 'before' || type == 'after') {
+                    parentId = endNode.data.parentId; // 同级
+                }
+                if (node.data.parentId == parentId || !parentId || !node.data.id) { // 同级拖动或出现异常无上级数据不操作
+                    return;
+                }
+                node.data.parentId = parentId; // 修改当前树节点的数据
+                vm.axios.post(vm.api.data.update, {
+                    "parentId": parentId,
+                    "id": node.data.id,
+                    "typeId": vm.typeId
+                }).then(function () {
+                    vm.$refs.commonTreeRef.init();//重新渲染树，这样是为了重新将eltree节点排序，以进行节点快捷选择
+                }); // 修改实际数据
+            },
+            handleRightSelect(key) {
+                let vm = this;
+                switch (key) {
+                    case "addChild":
+                    case "addSame":
+                        vm.addNode(key);
+                        break;
+                    case "removeCurrent":
+                        vm.removeCurrentNode();
+                        break;
+                    case "removeCheck":
+                        vm.removeNode();
+                        break;
+                    default:
+                        console.log("未检测到当前操作的对应方法！");
+                        break;
+                }
+            },
+            nodeClick(data, node) { // 节点点击事件
+                let vm = this;
+                vm.menuVisible = false;
+                vm.currentNode=JSON.parse(JSON.stringify(node.data));
+                if (data["id"] != '-1') { // 根节点不参与修改，因为它不是真实数据
+                    if(!data.outDate){
+                        data.outDate = "0";
+                    }
+                    let submitArr = ["id", "parentId", "dataOrder", "dataState", "dataicon", "dataName", "dataCode", "dataDesc","outDate"];
+                    for (let elem of submitArr) {
+                        vm.formData[elem] = data[elem];// 复制数据
+                    }
+                    vm.currentIcon = vm.formData["dataicon"] || "saspiconfont pl-icon-tuxiang";
+                } else {
+                    node.expanded = !node.expanded;
+                    vm.initFormData();
+                }
+            },
+            rightClick(event, data, node) { // 右击菜单事件
+                let expand = node.expanded;
+                let target = window.event.target;
+                if (target.tagName == 'DIV') {
+                    target.click(); // 右键时点击当前节点
+                } else {
+                    let pNode = target.parentNode;
+                    if (target.className == 'el-checkbox__inner') { // 右击checkBox
+                        pNode.parentNode.parentNode.click();
+                    } else { // 右击下拉图标
+                        pNode.click();
+                    }
+                }
+                node.expanded = expand; // 右击仅选中当前节点保持当前节点展开情况不变
+                let vm = this;
+                if (vm.objectID !== data.id) {
+                    vm.objectID = data.id;
+                    vm.menuVisible = true;
+                } else {
+                    vm.menuVisible = !vm.menuVisible;
+                }
+                vm.left = window.event.clientX + "px";
+                vm.top = window.event.clientY + "px";
+            },
+            getmenuIcon(icon) {
+                let vm = this;
+                if(icon.startsWith("el-icon-")){
+                    vm.formData.dataicon = icon;
+                    vm.currentIcon = icon;
+                }else{
+                    vm.formData.dataicon = 'saspiconfont ' + icon;
+                    vm.currentIcon = 'saspiconfont ' + icon;
+                }
+                vm.menuIconDialog = false;
+            },
+            clearIcon() { // 清空图标
+                let vm = this;
+                vm.formData.dataicon = '';
+                vm.currentIcon = 'saspiconfont pl-icon-tuxiang';
+            }
+        }
+    }
+</script>
+<style>
+    .el-menu-vertical .el-menu-item{
+        height: 40px;
+        line-height: 40px;
+        font-size: 14px;
+    }
+</style>
+
+<style scoped>
+    .el-menu-vertical{
+        background-color: #555C63;
+        opacity: 0.9;
+        border-radius: 8px;
+        width: 150px;
+        z-index: 99;
+    }
+    .leftBlock,.rightBlock{
+        box-sizing: border-box;
+        height: 100%;
+        padding: 5px;
+        border:1px solid #DCDFE6;
+        margin-top: -5px;
+    }
+    .leftBlock{
+        width: 400px;
+        border-right-width: 0;
+        border-radius: 8px 0 0 8px;
+    }
+    .rightBlock{
+        width: calc(100% - 400px);
+        float: right;
+        border-radius: 0 8px 8px 0;
+    }
+    .asideTree{
+        overflow-y: auto;
+        width: 100%!important;
+        height:calc(100% - 45px);
+        position: relative;
+        margin-top: 10px;
+    }
+    .asideTree /deep/ .el-tree > .el-tree-node > .el-tree-node__content { /* 选中第一级菜单 */
+        background-color: #1A598A;
+        text-decoration: none;
+        border: 1px silver solid;
+        color: #fff;
+        text-align: center;
+        height: 35px;
+    }
+    .font-dialog /deep/ .el-dialog__body{
+        padding: 0;
+        height: calc(100% - 50px);
+    }
+</style>