Merge branch 'master' of http://192.168.101.10:13000/boman/boman-framwork

boman-modules/boman-system/src/main/resources/bootstrap-prod.yml

@@ -12,7 +12,7 @@ spring:
         server-addr: 118.178.139.79:8848
         namespace: 5d3b2dc4-f69e-47de-baa1-234d60012c04
       config:
-        server-addr: 192.168.101.10:8848
+        server-addr: 118.178.139.79:8848
         file-extension: yml
         shared-configs:
           - application-${spring.profiles.active}.${spring.cloud.nacos.config.file-extension}

ruoyi-ui/src/components/FlowChartComponent/index.vue

@@ -38,15 +38,15 @@
   </div>
 </template>
 <script>
-// import '../__utils__/go'
-// import FlowDesinger from '../__utils__/flow-desinger';
+import '@/utils/go'
+import FlowDesinger from '@/utils/flow-desinger';
 import startNodeInfo from '@/components/startNodeInfo'
 import endNodeInfo from '@/components/endNodeInfo'
 import linkInfo from '@/components/linkInfo'
 import ProcessNodeConfig from '@/components/ProcessNodeConfig'
 import DynamicProcessNodeConfig from '@/components/DynamicProcessNodeConfig'
 import ServiceNodeConfig from '@/components/ServiceNodeConfig'
-// import FlowDisplay from '../__utils__/flow-display';
+import FlowDisplay from '@/utils/flow-display';
 export default {
   components:{
     startNodeInfo, endNodeInfo, linkInfo, ProcessNodeConfig, DynamicProcessNodeConfig, ServiceNodeConfig
@@ -125,13 +125,13 @@ export default {
         if(this.currentSteps === 1){
           // 流程图设计器
           if(!this.myDesigner){
-            // this.myDesigner= new FlowDesinger('goChart',{
-            //   showEditNode:this.showEditNode,  //节点双击编辑
-            //   SelectionDeleted:this.SelectionDeleted,  //删除事件
-            //   LinkDrawn:this.LinkDrawn,  //线的生成
-            //   externalobjectsdropped:this.externalobjectsdropped,  //节点生成
-            //   LinkRelinked: this.LinkRelinked  //连线修改
-            // });
+            this.myDesigner= new FlowDesinger('goChart',{
+              showEditNode:this.showEditNode,  //节点双击编辑
+              SelectionDeleted:this.SelectionDeleted,  //删除事件
+              LinkDrawn:this.LinkDrawn,  //线的生成
+              externalobjectsdropped:this.externalobjectsdropped,  //节点生成
+              LinkRelinked: this.LinkRelinked  //连线修改
+            });
 
           }
 

ruoyi-ui/src/components/FormItemComponent/index.vue

@@ -61,6 +61,7 @@ export default {
         // 计算显示行数
         list[current].component = Vue.extend(list[current].component);
         temp.push(list[current]);
+        console.log(temp,998)
         return temp;
       }, []);
     },

ruoyi-ui/src/components/listModalComponent/index.vue

@@ -34,8 +34,8 @@
   </div>
 </template>
 <script>
-// import {DispatchEvent} from '../__utils__/dispatchEvent'
-// import {  mapMutations } from 'vuex';
+import {DispatchEvent} from '@/utils/dispatchEvent.js'
+import {  mapMutations } from 'vuex';
 export default {
   name:'listModalComponent',
   props:{
@@ -97,7 +97,7 @@ export default {
     }
   },
   methods:{
-    // ...mapMutations(['currentChange','changeKeepAliveArray']),
+    ...mapMutations(['currentChange','changeKeepAliveArray']),
     mouseout () {
       this.$refs.poptip.handleClose()
     },
@@ -157,12 +157,12 @@ export default {
     ckeckModal () {  //选择流程
       if(this.readonly){
         this.active = !this.active
-        // DispatchEvent('modalClick',{
-        //   detail:{
-        //     items:this.items,
-        //     value:this.active
-        //   }
-        // })
+        DispatchEvent('modalClick',{
+          detail:{
+            items:this.items,
+            value:this.active
+          }
+        })
       }
 
     }

ruoyi-ui/src/utils/dispatchEvent.js

@@ -0,0 +1,7 @@
+
+export const DispatchEvent = (event, config) => {
+  const ev = new CustomEvent(event, config);
+  window.dispatchEvent(ev);
+};
+
+export default DispatchEvent;

ruoyi-ui/src/utils/flow-desinger.js

@@ -0,0 +1,1036 @@
+import icons from './icon.js'
+
+function FlowDesigner(diagramDiv,event) {
+    var G = go.GraphObject.make;
+    var _this = {};
+    var _designer = {};
+    var myPalette = null
+    var _jsonNewStep = { key: guid(), text: "审批节点", remark: '', type: 0 };
+
+    /** 处理传入事件 */
+    if(event.showEditNode){  //编辑节点
+        _this.showEditNode = event.showEditNode
+    }
+    if(event.SelectionDeleted){  //删除事件
+        _this.SelectionDeleted = event.SelectionDeleted
+    }
+    if(event.LinkDrawn){  //线的生成事件
+        _this.LinkDrawn = event.LinkDrawn
+    }
+    if(event.externalobjectsdropped){  //节点的生成事件
+        _this.externalobjectsdropped = event.externalobjectsdropped
+    }
+
+    if(event.LinkRelinked){  //连线修改
+        _this.LinkRelinked = event.LinkRelinked
+    }
+
+    /** --------public method----------------------------------------**/
+    /**
+     * 初始化图例面板
+     * 0审批节点 1开始节点 2结束节点 3操作节点 4服务节点
+     * @returns {*}
+     */
+    this.initToolbar = function(div,moduleType){
+        
+        let modelArr = [
+            // { key: guid(), text: "开始", figure: "Terminator", fill: "#4fba4f", type: 1 },
+            { key: guid(), text: "审批节点", remark: '', type: 0, category:'Approval' },
+            { key: guid(), text: "操作节点", remark: '', type: 4, category:'Operation' },
+            { key: guid(), text: "服务节点", remark: '', type: 3, category:'Service' },
+            { key: guid(), text: "子流程节点", remark: '', type: 6, category:'Subprocesses' }
+            // { key: guid(), text: "结束", figure: "Terminator", fill: "#CE0620", type: 2 }
+        ]
+        if(!moduleType){
+            modelArr = [{ key: guid(), text: "审批节点", remark: '', type: 0, category:'Approval' }]
+        }
+        if(!myPalette){
+            var Palette =
+            G(go.Palette, div, // 必须是DIV元素
+                {
+                    maxSelectionCount: 3,
+                    nodeTemplateMap: _designer.nodeTemplateMap, // 跟设计图共同一套样式模板
+                    model: new go.GraphLinksModel(modelArr)
+                });
+            myPalette = Palette
+        }else{
+            myPalette.model.nodeDataArray = modelArr
+        }
+
+        return myPalette;
+    };
+
+    /**
+     * 在设计面板中显示流程图
+     * @param flowData  流程图json数据
+     */
+    this.displayFlow = function (flowData) {
+
+        if(!flowData) return;
+
+        _designer.model = go.Model.fromJson(flowData);
+
+        var pos = _designer.model.modelData.position;
+        
+        // if (pos) _designer.initialPosition = go.Point.parse(pos);
+        this.diagram = _designer
+        // 更改所有连线中间的文本背景色
+        setLinkTextBg();
+    };
+
+    /**
+     * 创建新步骤
+     */
+    this.createStep = function() {
+        var jsonNewStep = {key:_jsonNewStep.key, text:_jsonNewStep.text};
+        jsonNewStep.loc = "270 140";// “新步骤”显示的位置
+        _designer.model.addNodeData(jsonNewStep);
+    };
+
+    /**
+     * 获取流程图数据
+     * @returns {*}
+     */
+    this.getFlowData = function () {
+        _designer.model.modelData.position = go.Point.stringify(_designer.position);
+        return _designer.model.toJson();
+    };
+
+    /**
+     * 检验流程图是否规范
+     */
+    this.checkData = function() {
+        var errMsg = "";
+
+        // 检查：每个步骤必须包含角色
+        if (!_designer.model.nodeDataArray) return '请绘制流程图';
+
+        // $.each(_designer.model.nodeDataArray, function(i, item) {
+        //     if (!item.hasOwnProperty("remark") || item.remark === "") {
+        //         errMsg = "请为步骤【" + item.text + "】设置备注~";
+        //         return false;
+        //     }
+        // });
+
+        _designer.model.nodeDataArray.map(item => {
+            if (!item.hasOwnProperty("remark") || item.remark === "") {
+                errMsg = "请为步骤【" + item.text + "】设置备注~";
+                return false;
+            }
+        })
+
+
+        return errMsg;
+    };
+
+
+
+    /** --------public method-------------end---------------------------**/
+
+    this.diagram = init(diagramDiv);
+
+    /** --------private method----------------------------------------**/
+
+    /**
+     * 初始化流程设计器
+     * @param divId 设计器Div
+     * 
+     * node type 
+     */
+    function init(divId) {
+        _designer = G(go.Diagram, divId, // must name or refer to the DIV HTML element
+                {  
+                    // grid: G(go.Panel, "Grid",  背景格
+                    //     G(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.5 }),
+                    //     G(go.Shape, "LineH", { stroke: "gray", strokeWidth: 0.5, interval: 10 }),
+                    //     G(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.5 }),
+                    //     G(go.Shape, "LineV", { stroke: "gray", strokeWidth: 0.5, interval: 10 })
+                    // ),
+                    allowDrop: true, // must be true to accept drops from the Palette
+                    allowTextEdit: false,
+                    allowHorizontalScroll: true,
+                    allowVerticalScroll: true,
+                    // "clickCreatingTool.isDoubleClick":false,
+                    // "clickCreatingTool.archetypeNodeData": {}, // 双击创建新步骤
+                    // "draggingTool.dragsLink": true,
+                    "draggingTool.isGridSnapEnabled": true,
+                    // "linkingTool.isUnconnectedLinkValid": true,
+                    "linkingTool.portGravity": 20,
+                    // "relinkingTool.isUnconnectedLinkValid": true,
+                    "relinkingTool.portGravity": 20,
+                    "relinkingTool.fromHandleArchetype":
+                        G(go.Shape, "Diamond", { segmentIndex: 0, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "tomato", stroke: "darkred" }),
+                    "relinkingTool.toHandleArchetype":
+                        G(go.Shape, "Diamond", { segmentIndex: -1, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "darkred", stroke: "tomato" }),
+                    "linkReshapingTool.handleArchetype":
+                        G(go.Shape, "Diamond", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
+                    "undoManager.isEnabled": false
+                });
+
+        // 流程图如果有变动，则提示用户保存
+        _designer.addDiagramListener("Modified", onDiagramModified);
+
+        // 双击事件
+        _designer.addDiagramListener("ObjectDoubleClicked", onObjectDoubleClicked);
+
+        // 移除事件
+        _designer.addDiagramListener("SelectionDeleted", function(e) {
+            e.subject.each(function(n){
+                _this.SelectionDeleted(n.data)
+            });
+        })
+
+        //线的生成
+        _designer.addDiagramListener("LinkDrawn", function(e) {
+            e.subject.data.key = guid()
+            _this.LinkDrawn(e.subject.data)
+        })
+
+
+        //线的重绘
+        _designer.addDiagramListener("LinkRelinked", function(e) {
+            _this.LinkRelinked(e.subject.data)
+        })
+
+        //添加监听节点生成事件
+        _designer.addDiagramListener("externalobjectsdropped", function(e) {
+            // var jsonNewStep = {key:_jsonNewStep.key, text:_jsonNewStep.text};
+            e.subject.each(function(n){
+                //得到从Palette拖过来的节点
+                _this.externalobjectsdropped(n.data)
+            });
+            // jsonNewStep.loc = "-100 0";// “新步骤”显示的位置
+            // jsonNewStep.type = 0 
+            // jsonNewStep.key = guid()
+            // // _designer.model.addNodeData(jsonNewStep);
+            // _this.externalobjectsdropped(jsonNewStep)
+        })
+
+
+        //监听节点或线的删除前事件
+        _designer.commandHandler.canDeleteSelection = function(e) { 
+			//用例获取选中的节点或线 
+			return _designer.selection.all(function(nodeOrLink) { 
+				//判断是否是开始或者结束节点
+				if(nodeOrLink.data.type === 1 || nodeOrLink.data.type === 2){ 
+					return false; 
+				}else{ 
+					return true; 
+				} 
+			}); 
+        }
+        
+        // var tool = _designer.toolManager.clickCreatingTool;
+        // tool.insertPart = (loc) => {
+        //     var jsonNewStep = {key:_jsonNewStep.key, text:_jsonNewStep.text};
+        //     jsonNewStep.type = 0 
+        //     jsonNewStep.loc = `${loc.x} ${loc.y}`;
+        //     _designer.model.addNodeData(jsonNewStep);
+        //     _this.externalobjectsdropped(jsonNewStep)
+        // }
+        
+
+        // 流程步骤的样式模板
+        // _designer.nodeTemplate = approvalNodeTemplate();
+        // _designer.nodeTemplate = operationNodeTemplate();
+        // _designer.nodeTemplateMap.add('Approval',approvalNodeTemplate)
+
+        // 服务节点
+        _designer.nodeTemplateMap.add('Subprocesses',
+            G(go.Node, "Spot",
+            { locationSpot: go.Spot.Center },
+            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
+            { selectable: true, selectionAdornmentTemplate: makeNodeSelectionAdornmentTemplate() },
+            new go.Binding("angle").makeTwoWay(),
+            // the main object is a Panel that surrounds a TextBlock with a Shape
+            G(go.Panel, "Auto",
+                { name: "PANEL" },
+                new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
+                G(go.Shape, "RoundedRectangle", // default figure
+                        {
+                            portId: "", // the default port: if no spot on link data, use closest side
+                            name: "PIPE",
+                            fromLinkable: true,
+                            toLinkable: true,
+                            cursor: "pointer",
+                            fill: "white", // default color
+                            strokeWidth: 1,
+                            stroke: "#DCDEE2"
+                        },
+                        new go.Binding("figure"),
+                        new go.Binding("stroke"),
+                        new go.Binding("strokeDashArray"),
+                        new go.Binding("strokeWidth"),
+                        new go.Binding("fill")),
+                G(go.Shape,
+                    { 
+                        margin: 5, 
+                        fill: 'black', 
+                        strokeWidth: 0, 
+                        width: 28, 
+                        height: 20,
+                        alignment: go.Spot.TopRight,
+                        geometry: go.Geometry.parse(geoFunc('subprocesses'))
+                    }),
+                G(go.TextBlock,
+                        {
+                            font: "bold 11pt Helvetica, Arial, sans-serif",
+                            margin: 8,
+                            wrap: go.TextBlock.WrapFit,
+                            stroke: "#343434",
+                            textAlign: "center",
+                            alignment: go.Spot.Center,
+                            verticalAlignment: go.Spot.Center,
+                            wrap: go.TextBlock.WrapFit,
+                            minSize: new go.Size(126, 27),
+                            maxSize: new go.Size(126, NaN)
+                        },
+                        new go.Binding("text").makeTwoWay()),// the label shows the node data's text
+                {
+                    toolTip:// this tooltip Adornment is shared by all nodes
+                        G(go.Adornment, "Auto",
+                            G(go.Shape, { fill: "#FFFFCC" }),
+                            G(go.TextBlock, { margin: 4 }, // the tooltip shows the result of calling nodeInfo(data)
+                                new go.Binding("text", "", nodeInfo))
+                        ),
+                    // 绑定上下文菜单
+                    // contextMenu: makePartContextMenu()
+                }
+            ),
+            // 4个连接点
+            makeNodePort("T", go.Spot.Top, false, true),
+            makeNodePort("L", go.Spot.Left, true, true),
+            makeNodePort("R", go.Spot.Right, true, true),
+            makeNodePort("B", go.Spot.Bottom, true, false),
+            {
+                mouseEnter: function (e, node) { showNodePort(node, true); },
+                mouseLeave: function (e, node) { showNodePort(node, false); }
+            }
+        )
+        )
+
+        // 服务节点
+        _designer.nodeTemplateMap.add('Service',
+            G(go.Node, "Spot",
+            { locationSpot: go.Spot.Center },
+            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
+            { selectable: true, selectionAdornmentTemplate: makeNodeSelectionAdornmentTemplate() },
+            new go.Binding("angle").makeTwoWay(),
+            // the main object is a Panel that surrounds a TextBlock with a Shape
+            G(go.Panel, "Auto",
+                { name: "PANEL" },
+                new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
+                G(go.Shape, "RoundedRectangle", // default figure
+                        {
+                            portId: "", // the default port: if no spot on link data, use closest side
+                            name: "PIPE",
+                            fromLinkable: true,
+                            toLinkable: true,
+                            cursor: "pointer",
+                            fill: "white", // default color
+                            strokeWidth: 1,
+                            stroke: "#DCDEE2"
+                        },
+                        new go.Binding("figure"),
+                        new go.Binding("stroke"),
+                        new go.Binding("strokeDashArray"),
+                        new go.Binding("strokeWidth"),
+                        new go.Binding("fill")),
+                G(go.Shape,
+                    { 
+                        margin: 5, 
+                        fill: 'black', 
+                        strokeWidth: 0, 
+                        width: 28, 
+                        height: 20,
+                        alignment: go.Spot.TopRight,
+                        geometry: go.Geometry.parse(geoFunc('service'))
+                    }),
+                G(go.TextBlock,
+                        {
+                            font: "bold 11pt Helvetica, Arial, sans-serif",
+                            margin: 8,
+                            wrap: go.TextBlock.WrapFit,
+                            stroke: "#343434",
+                            textAlign: "center",
+                            alignment: go.Spot.Center,
+                            verticalAlignment: go.Spot.Center,
+                            wrap: go.TextBlock.WrapFit,
+                            minSize: new go.Size(126, 27),
+                            maxSize: new go.Size(126, NaN)
+                        },
+                        new go.Binding("text").makeTwoWay()),// the label shows the node data's text
+                {
+                    toolTip:// this tooltip Adornment is shared by all nodes
+                        G(go.Adornment, "Auto",
+                            G(go.Shape, { fill: "#FFFFCC" }),
+                            G(go.TextBlock, { margin: 4 }, // the tooltip shows the result of calling nodeInfo(data)
+                                new go.Binding("text", "", nodeInfo))
+                        ),
+                    // 绑定上下文菜单
+                    // contextMenu: makePartContextMenu()
+                }
+            ),
+            // 4个连接点
+            makeNodePort("T", go.Spot.Top, false, true),
+            makeNodePort("L", go.Spot.Left, true, true),
+            makeNodePort("R", go.Spot.Right, true, true),
+            makeNodePort("B", go.Spot.Bottom, true, false),
+            {
+                mouseEnter: function (e, node) { showNodePort(node, true); },
+                mouseLeave: function (e, node) { showNodePort(node, false); }
+            }
+        )
+        )
+
+        // 审批节点
+        _designer.nodeTemplateMap.add('Approval',
+            G(go.Node, "Spot",
+            { locationSpot: go.Spot.Center },
+            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
+            { selectable: true, selectionAdornmentTemplate: makeNodeSelectionAdornmentTemplate() },
+            new go.Binding("angle").makeTwoWay(),
+            // the main object is a Panel that surrounds a TextBlock with a Shape
+            G(go.Panel, "Auto",
+                { name: "PANEL" },
+                new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
+                G(go.Shape, "RoundedRectangle", // default figure
+                        {
+                            portId: "", // the default port: if no spot on link data, use closest side
+                            name: "PIPE",
+                            fromLinkable: true,
+                            toLinkable: true,
+                            cursor: "pointer",
+                            fill: "white", // default color
+                            strokeWidth: 1,
+                            stroke: "#DCDEE2"
+                        },
+                        new go.Binding("figure"),
+                        new go.Binding("stroke"),
+                        new go.Binding("strokeDashArray"),
+                        new go.Binding("strokeWidth"),
+                        new go.Binding("fill")),
+                G(go.Shape,
+                    { 
+                        margin: 5, 
+                        fill: 'black', 
+                        strokeWidth: 0, 
+                        width: 28, 
+                        height: 20,
+                        alignment: go.Spot.TopRight,
+                        geometry: go.Geometry.parse(geoFunc('approval'))
+                    }),
+                G(go.TextBlock,
+                        {
+                            font: "bold 11pt Helvetica, Arial, sans-serif",
+                            margin: 8,
+                            wrap: go.TextBlock.WrapFit,
+                            stroke: "#343434",
+                            textAlign: "center",
+                            alignment: go.Spot.Center,
+                            verticalAlignment: go.Spot.Center,
+                            wrap: go.TextBlock.WrapFit,
+                            minSize: new go.Size(126, 27),
+                            maxSize: new go.Size(126, NaN)
+                        },
+                        new go.Binding("text").makeTwoWay()),// the label shows the node data's text
+                {
+                    toolTip:// this tooltip Adornment is shared by all nodes
+                        G(go.Adornment, "Auto",
+                            G(go.Shape, { fill: "#FFFFCC" }),
+                            G(go.TextBlock, { margin: 4 }, // the tooltip shows the result of calling nodeInfo(data)
+                                new go.Binding("text", "", nodeInfo))
+                        ),
+                    // 绑定上下文菜单
+                    // contextMenu: makePartContextMenu()
+                }
+            ),
+            // 4个连接点
+            makeNodePort("T", go.Spot.Top, false, true),
+            makeNodePort("L", go.Spot.Left, true, true),
+            makeNodePort("R", go.Spot.Right, true, true),
+            makeNodePort("B", go.Spot.Bottom, true, false),
+            {
+                mouseEnter: function (e, node) { showNodePort(node, true); },
+                mouseLeave: function (e, node) { showNodePort(node, false); }
+            }
+        )
+        )
+
+        // 操作节点
+        _designer.nodeTemplateMap.add('Operation',
+        G(go.Node, "Spot",
+        { locationSpot: go.Spot.Center },
+        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
+        { selectable: true, selectionAdornmentTemplate: makeNodeSelectionAdornmentTemplate() },
+        new go.Binding("angle").makeTwoWay(),
+        // the main object is a Panel that surrounds a TextBlock with a Shape
+        G(go.Panel, "Auto",
+            { name: "PANEL" },
+            new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
+            G(go.Shape, "RoundedRectangle", // default figure
+                    {
+                        portId: "", // the default port: if no spot on link data, use closest side
+                        name: "PIPE",
+                        fromLinkable: true,
+                        toLinkable: true,
+                        cursor: "pointer",
+                        fill: "white", // default color
+                        strokeWidth: 1,
+                        stroke: "#DCDEE2"
+                    },
+                    new go.Binding("figure"),
+                    new go.Binding("stroke"),
+                    new go.Binding("strokeDashArray"),
+                    new go.Binding("strokeWidth"),
+                    new go.Binding("fill")),
+            G(go.Shape,
+                { 
+                    margin: 5, 
+                    fill: 'black', 
+                    strokeWidth: 0, 
+                    width: 28, 
+                    height: 20,
+                    alignment: go.Spot.TopRight,
+                    geometry: go.Geometry.parse(geoFunc('operation'))
+                }),
+            G(go.TextBlock,
+                    {
+                        font: "bold 11pt Helvetica, Arial, sans-serif",
+                        margin: 8,
+                        wrap: go.TextBlock.WrapFit,
+                        stroke: "#343434",
+                        textAlign: "center",
+                        alignment: go.Spot.Center,
+                        verticalAlignment: go.Spot.Center,
+                        wrap: go.TextBlock.WrapFit,
+                        minSize: new go.Size(126, 27),
+                        maxSize: new go.Size(126, NaN)
+                    },
+                    new go.Binding("text").makeTwoWay()),// the label shows the node data's text
+            {
+                toolTip:// this tooltip Adornment is shared by all nodes
+                    G(go.Adornment, "Auto",
+                        G(go.Shape, { fill: "#FFFFCC" }),
+                        G(go.TextBlock, { margin: 4 }, // the tooltip shows the result of calling nodeInfo(data)
+                            new go.Binding("text", "", nodeInfo))
+                    ),
+                // 绑定上下文菜单
+                // contextMenu: makePartContextMenu()
+            }
+        ),
+        // 4个连接点
+        makeNodePort("T", go.Spot.Top, false, true),
+        makeNodePort("L", go.Spot.Left, true, true),
+        makeNodePort("R", go.Spot.Right, true, true),
+        makeNodePort("B", go.Spot.Bottom, true, false),
+        {
+            mouseEnter: function (e, node) { showNodePort(node, true); },
+            mouseLeave: function (e, node) { showNodePort(node, false); }
+        }
+    )    
+        )
+        // 添加开始节点
+        _designer.nodeTemplateMap.add("Start",
+            G(go.Node, "Spot",
+            { locationSpot: go.Spot.Center },
+                new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
+            { selectable: true, selectionAdornmentTemplate: makeNodeSelectionAdornmentTemplate() },
+                new go.Binding("angle").makeTwoWay(),
+            G(go.Panel, "Auto",
+                    { name: "Start" },
+                    new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
+                G(go.Shape, "Circle", // default figure
+                        {
+                            portId: "", // the default port: if no spot on link data, use closest side
+                            name: "Start",
+                            fromLinkable: true,
+                            toLinkable: true,
+                            cursor: "pointer",
+                            fill: "#5F7790", // default color
+                            strokeWidth: 1,
+                            stroke: "#5F7790",
+                            // geometryString: "F M0 0 L100 0 B-90 180 100 25 25 25 L0 50 B90 180 0 25 25 25"
+                        },
+                        new go.Binding("figure"),
+                        new go.Binding("stroke"),
+                        new go.Binding("strokeDashArray"),
+                        new go.Binding("strokeWidth"),
+                        new go.Binding("fill")),
+                G(go.TextBlock,
+                        {
+                            font: "bold 11pt Helvetica, Arial, sans-serif",
+                            margin:8,
+                            wrap: go.TextBlock.WrapFit,
+                            stroke: "white",
+                            overflow:go.TextBlock.OverflowEllipsis
+                        },
+                        new go.Binding("text").makeTwoWay()),
+                    {
+                        toolTip: G(go.Adornment, "Auto",
+                            G(go.Shape, { fill: "#FFFFCC" }),
+                            G(go.TextBlock, { margin: 4 },
+                                new go.Binding("text", "", nodeInfo))
+                        )
+                    }
+                ),
+                // 4个连接点
+                makeNodePort("B", go.Spot.Bottom, true, false),
+                {
+                    mouseEnter: function (e, node) { showNodePort(node, true); },
+                    mouseLeave: function (e, node) { showNodePort(node, false); }
+                }
+        ));
+        
+        // 添加结束节点
+        _designer.nodeTemplateMap.add("End",
+            G(go.Node, "Spot",
+                { locationSpot: go.Spot.Center },
+                    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
+                { selectable: true, selectionAdornmentTemplate: makeNodeSelectionAdornmentTemplate() },
+                    new go.Binding("angle").makeTwoWay(),
+                G(go.Panel, "Auto",
+                        { name: "End" },
+                        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
+                    G(go.Shape, "Circle", // default figure
+                            {
+                                portId: "", // the default port: if no spot on link data, use closest side
+                                name: "End",
+                                fromLinkable: true,
+                                toLinkable: true,
+                                cursor: "pointer",
+                                fill: "#5F7790", // default color
+                                strokeWidth: 1,
+                                stroke: "#5F7790",
+                                // geometryString: "F M0 0 L100 0 Q175 25 100 50 L0 50 Q-75 25 0 0"
+                            },
+                            new go.Binding("figure"),
+                            new go.Binding("stroke"),
+                            new go.Binding("strokeDashArray"),
+                            new go.Binding("strokeWidth"),
+                            new go.Binding("fill")),
+                    G(go.TextBlock,
+                            {
+                                font: "bold 11pt Helvetica, Arial, sans-serif",
+                                margin: 8,
+                                wrap: go.TextBlock.WrapFit,
+                                stroke: "white"
+                            },
+                            new go.Binding("text").makeTwoWay()),
+                        {
+                            toolTip: G(go.Adornment, "Auto",
+                                G(go.Shape, { fill: "#FFFFCC" }),
+                                G(go.TextBlock, { margin: 4 },
+                                    new go.Binding("text", "", nodeInfo))
+                            )
+                        }
+                    ),
+                    // 4个连接点
+                    makeNodePort("T", go.Spot.Top, false, true),
+                    {
+                        mouseEnter: function (e, node) { showNodePort(node, true); },
+                        mouseLeave: function (e, node) { showNodePort(node, false); }
+                    }
+        ));
+
+        // 流程连接线的样式模板
+        _designer.linkTemplate = makeLinkTemplate();
+        
+        return _designer
+    }
+
+    /**
+     * 生成GUID
+     * @returns {string}
+     */
+    function guid() {
+        var r = Math.floor(Math.random() * (30000 - 1 + 1) + 1);
+        return Number(r);
+    }
+
+    function geoFunc(geoname) {
+        if (icons[geoname]) return icons[geoname];
+        else return icons["approval"]; // default icon
+    }
+
+    /**
+     * 操作节点样式模板
+     * @returns {*}
+     */
+    function operationNodeTemplate(){
+        return G(go.Node, "Spot",
+            { locationSpot: go.Spot.Center },
+            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
+            { selectable: true, selectionAdornmentTemplate: makeNodeSelectionAdornmentTemplate() },
+            new go.Binding("angle").makeTwoWay(),
+            // the main object is a Panel that surrounds a TextBlock with a Shape
+            G(go.Panel, "Auto",
+                { name: "PANEL" },
+                new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
+                G(go.Shape, "RoundedRectangle", // default figure
+                        {
+                            portId: "", // the default port: if no spot on link data, use closest side
+                            name: "PIPE",
+                            fromLinkable: true,
+                            toLinkable: true,
+                            cursor: "pointer",
+                            fill: "white", // default color
+                            strokeWidth: 1,
+                            stroke: "#DCDEE2"
+                        },
+                        new go.Binding("figure"),
+                        new go.Binding("stroke"),
+                        new go.Binding("strokeDashArray"),
+                        new go.Binding("strokeWidth"),
+                        new go.Binding("fill")),
+                G(go.Shape,
+                    { 
+                        margin: 5, 
+                        fill: 'black', 
+                        strokeWidth: 0, 
+                        width: 20, 
+                        height: 20,
+                        alignment: go.Spot.TopRight,
+                        geometry: go.Geometry.parse(geoFunc('operation'))
+                    }),
+                G(go.TextBlock,
+                        {
+                            font: "bold 11pt Helvetica, Arial, sans-serif",
+                            margin: 8,
+                            wrap: go.TextBlock.WrapFit,
+                            stroke: "#343434",
+                            textAlign: "center",
+                            alignment: go.Spot.Center,
+                            verticalAlignment: go.Spot.Center,
+                            wrap: go.TextBlock.WrapFit,
+                            minSize: new go.Size(126, 27),
+                            maxSize: new go.Size(126, NaN)
+                        },
+                        new go.Binding("text").makeTwoWay()),// the label shows the node data's text
+                {
+                    toolTip:// this tooltip Adornment is shared by all nodes
+                        G(go.Adornment, "Auto",
+                            G(go.Shape, { fill: "#FFFFCC" }),
+                            G(go.TextBlock, { margin: 4 }, // the tooltip shows the result of calling nodeInfo(data)
+                                new go.Binding("text", "", nodeInfo))
+                        ),
+                    // 绑定上下文菜单
+                    // contextMenu: makePartContextMenu()
+                }
+            ),
+            // 4个连接点
+            makeNodePort("T", go.Spot.Top, false, true),
+            makeNodePort("L", go.Spot.Left, true, true),
+            makeNodePort("R", go.Spot.Right, true, true),
+            makeNodePort("B", go.Spot.Bottom, true, false),
+            {
+                mouseEnter: function (e, node) { showNodePort(node, true); },
+                mouseLeave: function (e, node) { showNodePort(node, false); }
+            }
+        );
+    }
+
+    /**
+     * 操作节点样式模板
+     * @returns {*}
+     */
+    function approvalNodeTemplate(){
+        return G(go.Node, "Spot",
+            { locationSpot: go.Spot.Center },
+            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
+            { selectable: true, selectionAdornmentTemplate: makeNodeSelectionAdornmentTemplate() },
+            new go.Binding("angle").makeTwoWay(),
+            // the main object is a Panel that surrounds a TextBlock with a Shape
+            G(go.Panel, "Auto",
+                { name: "PANEL" },
+                new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
+                G(go.Shape, "RoundedRectangle", // default figure
+                        {
+                            portId: "", // the default port: if no spot on link data, use closest side
+                            name: "PIPE",
+                            fromLinkable: true,
+                            toLinkable: true,
+                            cursor: "pointer",
+                            fill: "white", // default color
+                            strokeWidth: 1,
+                            stroke: "#DCDEE2"
+                        },
+                        new go.Binding("figure"),
+                        new go.Binding("stroke"),
+                        new go.Binding("strokeDashArray"),
+                        new go.Binding("strokeWidth"),
+                        new go.Binding("fill")),
+                G(go.Shape,
+                    { 
+                        margin: 5, 
+                        fill: 'black', 
+                        strokeWidth: 0, 
+                        width: 20, 
+                        height: 20,
+                        alignment: go.Spot.TopRight,
+                        geometry: go.Geometry.parse(geoFunc('approval'))
+                    }),
+                G(go.TextBlock,
+                        {
+                            font: "bold 11pt Helvetica, Arial, sans-serif",
+                            margin: 8,
+                            wrap: go.TextBlock.WrapFit,
+                            stroke: "#343434",
+                            textAlign: "center",
+                            alignment: go.Spot.Center,
+                            verticalAlignment: go.Spot.Center,
+                            wrap: go.TextBlock.WrapFit,
+                            minSize: new go.Size(126, 27),
+                            maxSize: new go.Size(126, NaN)
+                        },
+                        new go.Binding("text").makeTwoWay()),// the label shows the node data's text
+                {
+                    toolTip:// this tooltip Adornment is shared by all nodes
+                        G(go.Adornment, "Auto",
+                            G(go.Shape, { fill: "#FFFFCC" }),
+                            G(go.TextBlock, { margin: 4 }, // the tooltip shows the result of calling nodeInfo(data)
+                                new go.Binding("text", "", nodeInfo))
+                        ),
+                    // 绑定上下文菜单
+                    // contextMenu: makePartContextMenu()
+                }
+            ),
+            // 4个连接点
+            makeNodePort("T", go.Spot.Top, false, true),
+            makeNodePort("L", go.Spot.Left, true, true),
+            makeNodePort("R", go.Spot.Right, true, true),
+            makeNodePort("B", go.Spot.Bottom, true, false),
+            {
+                mouseEnter: function (e, node) { showNodePort(node, true); },
+                mouseLeave: function (e, node) { showNodePort(node, false); }
+            }
+        );
+    }
+
+    /**
+     * 选中节点的样式
+     * @returns {*}
+     */
+    function makeNodeSelectionAdornmentTemplate(){
+        return G(go.Adornment, "Auto",
+            G(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }),
+            G(go.Placeholder)
+        );
+    }
+
+    /**
+     * 创建连接点
+     * @param name
+     * @param spot
+     * @param output
+     * @param input
+     * @returns {*}
+     */
+    function makeNodePort(name, spot, output, input) {
+        // the port is basically just a small transparent square
+        return G(go.Shape, "Circle",
+            {
+                fill: null, // not seen, by default; set to a translucent gray by showSmallPorts, defined below
+                stroke: null,
+                desiredSize: new go.Size(7, 7),
+                alignment: spot, // align the port on the main Shape
+                alignmentFocus: spot, // just inside the Shape
+                portId: name, // declare this object to be a "port"
+                fromSpot: spot,
+                toSpot: spot, // declare where links may connect at this port
+                fromLinkable: output,
+                toLinkable: input, // declare whether the user may draw links to/from here
+                cursor: "pointer" // show a different cursor to indicate potential link point
+            });
+    }
+
+    /**
+     * tooltip上显示的信息
+     * @param d
+     * @returns {string}
+     */
+    function nodeInfo(d) {
+        return '双击可编辑';
+    }
+
+    /**
+     * 右键菜单
+     * @returns {*}
+     */
+    function makePartContextMenu(){
+        return G(go.Adornment, "Vertical",
+            makeMenuItem("编辑",
+                function(e, obj) { // OBJ is this Button
+                    var contextmenu = obj.part; // the Button is in the context menu Adornment
+                    var part = contextmenu.adornedPart; // the adornedPart is the Part that the context menu adorns
+                    // now can do something with PART, or with its data, or with the Adornment (the context menu)
+                    showEditNode(part);
+                }),
+            makeMenuItem("剪切",
+                function(e, obj) { e.diagram.commandHandler.cutSelection(); },
+                function(o) { return o.diagram.commandHandler.canCutSelection(); }),
+            makeMenuItem("复制",
+                function(e, obj) { e.diagram.commandHandler.copySelection(); },
+                function(o) { return o.diagram.commandHandler.canCopySelection(); }),
+            makeMenuItem("删除",
+                function(e, obj) { e.diagram.commandHandler.deleteSelection(); },
+                function(o) { return o.diagram.commandHandler.canDeleteSelection(); })
+        );
+    }
+
+    /**
+     * 生成右键菜单项
+     * @param text
+     * @param action
+     * @param visiblePredicate
+     * @returns {*}
+     */
+    function makeMenuItem(text, action, visiblePredicate) {
+        return G("ContextMenuButton",
+            G(go.TextBlock, text, {
+                margin: 5,
+                textAlign: "left",
+                stroke: "#555555"
+            }),
+            { click: action },
+            // don't bother with binding GraphObject.visible if there's no predicate
+            visiblePredicate ? new go.Binding("visible", "", visiblePredicate).ofObject() : {});
+    }
+
+    /**
+     * 是否显示步骤的连接点
+     * @param node
+     * @param show
+     */
+    function showNodePort(node, show) {
+        node.ports.each(function (port) {
+            if (port.portId !== "") { // don't change the default port, which is the big shape
+                port.fill = show ? "rgba(255,0,0,.5)" : null;
+            }
+        });
+    }
+
+    /**
+     * 连接线的选中样式
+     * @returns {*}
+     */
+    function makeLinkSelectionAdornmentTemplate(){
+        return G(go.Adornment, "Link",
+            G(go.Shape,
+                // isPanelMain declares that this Shape shares the Link.geometry
+                { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }) // use selection object's strokeWidth
+        );
+    }
+
+    
+    /**
+     * 定义连接线的样式模板
+     * @returns {*}
+     */
+    function makeLinkTemplate(){
+        return G(go.Link, // the whole link panel
+            { selectable: true, selectionAdornmentTemplate: makeLinkSelectionAdornmentTemplate() },
+            { relinkableFrom: true, relinkableTo: true, reshapable: true },
+            {
+                routing: go.Link.AvoidsNodes,
+                curve: go.Link.JumpOver,
+                corner: 5,
+                toShortLength: 4
+            },
+            G(go.Shape, // 线条
+                { isPanelMain: true, stroke: "#D5D5D5", strokeWidth: 3 }),
+            G(go.Shape, // 箭头
+                { toArrow: "standard", stroke: null, fill: '#D5D5D5' }, new go.Binding("stroke"), new go.Binding("fill"), new go.Binding("zOrder")),
+            G(go.Panel, "Auto",
+                G(go.Shape, {
+                    fill: null,
+                    stroke: null
+                }, new go.Binding("fill", "pFill"), new go.Binding("zOrder")),
+                G(go.TextBlock,
+                    {
+                        textAlign: "center",
+                        font: "10pt helvetica, arial, sans-serif",
+                        stroke: "#555555",
+                        margin: 4
+                    },
+                    new go.Binding("text", "text"), new go.Binding("zOrder")), // the label shows the node data's text
+                {
+                    toolTip:// this tooltip Adornment is shared by all nodes
+                        G(go.Adornment, "Auto",
+                            G(go.Shape, { fill: "#FFFFCC" }),
+                            G(go.TextBlock, { margin: 4 }, // the tooltip shows the result of calling nodeInfo(data)
+                                new go.Binding("text", "", nodeInfo))
+                        ),
+                    // this context menu Adornment is shared by all nodes
+                    // contextMenu: makePartContextMenu()
+                }
+            )
+        );
+    }
+
+    /**
+     * 流程图元素的双击事件
+     * @param ev
+     */
+    function onObjectDoubleClicked(ev) {
+        var part = ev.subject.part;
+        showEditNode(part);
+    }
+
+    /**
+     * 流程图如果有变动，则提示用户保存
+     * @param e
+     */
+    function onDiagramModified(e){
+        var button = document.getElementById("btnSaveFlow");
+        if (button) button.disabled = !_designer.isModified;
+        var idx = document.title.indexOf("*");
+        if (_designer.isModified) {
+            if (idx < 0) document.title += "*";
+        } else {
+            if (idx >= 0) document.title = document.title.substr(0, idx);
+        }
+    }
+
+    /**
+     * 编辑节点信息
+     */
+    function showEditNode(node) {
+        _this.showEditNode(node)
+        return node
+    }
+
+    /**
+     * 更新节点信息
+     * @param oldData
+     * @param newData
+     */
+    function updateNodeData(node, text) {
+        _designer.startTransaction("vacate");
+        _designer.model.setDataProperty(node.data, "text", text);
+        _designer.commitTransaction("vacate");
+    }
+
+    /**
+     * 更改所有连线中间的文本背景色
+     */
+    function setLinkTextBg() {
+        _designer.links.each(function (link) {
+            _designer.startTransaction("vacate");
+            if (link.data.text) {
+                _designer.model.setDataProperty(link.data, "pFill", window.go.GraphObject.make(go.Brush, "Radial", {
+                    0: "rgb(240, 240, 240)",
+                    0.3: "rgb(240, 240, 240)",
+                    1: "rgba(240, 240, 240, 0)"
+                }));
+            }
+            _designer.commitTransaction("vacate");
+        });
+    }
+
+    /** --------private method------------------end----------------------**/
+
+    return this;
+}
+
+export default FlowDesigner

ruoyi-ui/src/views/activiti/TemplateManagementNew/index.vue

@@ -73,7 +73,7 @@
   </div>
 </template>
 <script>
-// import '../__utils__/go'
+import '@/utils/go'
 import Vue from 'vue'
 import ParameterConfiguration from '@/components/ParameterConfiguration'
 import FlowChartComponent from '@/components/FlowChartComponent'

ruoyi-ui/src/views/activiti/modeler/index.vue

@@ -226,7 +226,6 @@ export default {
         this.searchData.startTime = ''
         this.searchData.endTime = ''
       }
-
       let obj = Object.assign({},this.searchData)
       delete obj.createTime
       delete obj.status
@@ -322,7 +321,7 @@ export default {
         }
 
         obj = Object.assign({},this.searchData)
-      } 
+      }
 
       obj.url = this.serverUrl
       this.$network.post('/p/cs/module/migrate', obj)

ruoyi-ui/src/views/login.vue

@@ -199,7 +199,7 @@ export default {
   text-align: center;
   font-size: 11px;
   color: #AAAAAA;
-  line-height: 1;
+  // line-height: 1;
 }
 .medTitle{
   margin-top: 10px;

ruoyi-ui/src/views/system/editing/index.vue

@@ -250,7 +250,9 @@
             if (item.hrChildren[i].htmlType == 'checkbox') {
               this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config
             }else if(item.hrChildren[i].htmlType == 'imageUpload' || item.hrChildren[i].htmlType == 'fileUpload'){
-              this.queryParams[item.hrChildren[i].columnName] = JSON.stringify(this.$refs[item.hrChildren[i].columnName][0].config)
+              if(this.$refs[item.hrChildren[i].columnName][0].config.length){
+                this.queryParams[item.hrChildren[i].columnName] = JSON.stringify(this.$refs[item.hrChildren[i].columnName][0].config)
+              }
             } else {
               this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config[
                 item.hrChildren[i].columnName]

ruoyi-ui/src/views/system/form/index.vue

@@ -30,17 +30,24 @@
             </p>
           </div>
           <el-divider></el-divider>
-          <!-- v-show="showSearch" -->
-         <el-form :model="queryParamstwoi" ref="queryForm" :inline="true" >
-           <dynamic-forms :ref="item.columnName" :config="queryParamstwoi" @inputs="changeFn" :formConfig="item" v-for="(item,index) in queryDatatao.showData"
-             :key='index' />
-           <el-form-item>
-             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryiu">搜索</el-button>
-             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-           </el-form-item>
-         </el-form>
-          <el-table stripe v-loading="loading" :data="postList.rows" @selection-change="handleSelectionChange">
-            <el-table-column :label="item.columnComment" align="center" :prop="item.columnName" v-for="(item,index) in postList.tableHeadList" :key="index" />
+          <el-form :model="queryParamstwoi" ref="queryForm" :inline="true" >
+            <dynamic-forms :ref="item.columnName" :config="queryParamstwoi" @inputs="changeFn" :formConfig="item" v-for="(item,index) in queryDatatao.showData"
+              :key='index' />
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryiu">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+          <el-table stripe v-loading="loading" :data="postList.rows" @selection-change="handleSelectionChange">
+            <template v-for="(item, index) in postList.tableHeadList">
+              <el-table-column :label="item.columnComment" align="center" :prop="item.columnName" :key="index">
+                <template slot-scope="scope">
+                  <img class="img_icon" v-if="item.htmlType=='imageUpload'&& scope.row[scope.column.property]" @click="imgBtn(JSON.parse(scope.row[scope.column.property])[0].url)" :src="JSON.parse(scope.row[scope.column.property])[0].url" alt="">
+                  <span v-else>{{ scope.row[scope.column.property] }}</span>
+                </template>
+              </el-table-column>
+            </template>
+            <!-- <el-table-column :label="item.columnComment" align="center" :prop="item.columnName" v-for="(item,index) in postList.tableHeadList" :key="index" /> -->
           </el-table>
           <div class="index_haderPagin">
             <pagination
@@ -56,8 +63,8 @@
             </el-pagination> -->
           </div>
         </el-collapse-item>
-
-      </el-collapse>
+      </el-collapse>
+      <BigPicture ref="BigPicture" :urls="pir_imgs"></BigPicture>
     </div>
   </div>
 </template>
@@ -75,7 +82,8 @@
   export default {
     name: "index",
     data() {
-      return {
+      return {
+        pir_imgs: '', // 图片链接
         num: 0,
        // 总条数
         total: 0,
@@ -188,6 +196,10 @@
       this.edingelsietab()
     },
     methods: {
+      imgBtn(url) {
+        this.pir_imgs = url
+        this.$refs.BigPicture.hidden.status = true
+      },
       modelFn(obj, cont) {
         this.$set(this.queryParams,obj,cont)
       },
@@ -326,7 +338,9 @@
              if(item.hrChildren[i].htmlType == 'checkbox'){
                this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config
              }else if(item.hrChildren[i].htmlType == 'imageUpload' || item.hrChildren[i].htmlType == 'fileUpload'){
-               this.queryParams[item.hrChildren[i].columnName] = JSON.stringify(this.$refs[item.hrChildren[i].columnName][0].config)
+               if(this.$refs[item.hrChildren[i].columnName][0].config.length){
+                 this.queryParams[item.hrChildren[i].columnName] = JSON.stringify(this.$refs[item.hrChildren[i].columnName][0].config)
+               }
              } else{
                this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config[item.hrChildren[i].columnName]
              }
@@ -477,7 +491,8 @@
       // }
 
       .el-collapse {
-        border-top: 0;
+        border-top: 0;
+        border: 0;
       }
 
       .el-divider--horizontal {

ruoyi-ui/src/views/system/role/fz-index.vue

@@ -4,45 +4,47 @@
       <el-col :span="24" class="roleCol">
         <div class="roleH"></div>
         <span>功能权限</span>
-      </el-col>
-      <el-col :span="24" class="roleBot">
+      </el-col>
+      <el-col :span="24" class="roleBot">
         <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button type="primary" style="background-color: #2AC1CA;color: #fff;border: none;" plain icon="el-icon-plus"
-            @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button type="primary" style="background-color: #FF9639;color: #fff;border: none;" plain icon="el-icon-refresh"
-            @click="handleAdd" v-hasPermi="['system:role:list']">刷新</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button type="primary" style="background-color: #3C8DBC;color: #fff;border: none;" plain icon="el-icon-my-export"
-            @click="handleAdd" v-hasPermi="['system:role:edit']">保存</el-button>
-        </el-col>
+          <el-col :span="1.5">
+            <el-button type="primary" style="background-color: #2AC1CA;color: #fff;border: none;" plain icon="el-icon-plus"
+              @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="primary" style="background-color: #FF9639;color: #fff;border: none;" plain icon="el-icon-refresh"
+              @click="refreshFn" v-hasPermi="['system:role:list']">刷新</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="primary" style="background-color: #3C8DBC;color: #fff;border: none;" plain icon="el-icon-my-export"
+              @click="handleAdd" v-hasPermi="['system:role:edit']">保存</el-button>
+          </el-col>
         </el-row>
-      </el-col>
-      </el-row>
-    <el-row style="margin-top: 18px;">
+      </el-col>
+    </el-row>
+    <el-row class="roleCont" style="margin-top: 18px;">
       <el-col :span="5" class="searBoxs">
         <div class="searBox">
           <div class="searInput">
-            <input type="text" placeholder="请输入角色">
+            <input type="text" v-model="queryParams.roleName" placeholder="请输入角色">
           </div>
           <div class="searBtn">
-            <img src="@/assets/images/icon_sr_ss@2x.png" alt="" class="icon">
+            <img src="@/assets/images/icon_sr_ss@2x.png" @click="handleQuery" alt="" class="icon">
           </div>
         </div>
         <div class="searList">
-          <div class="searItem" v-for="item in roleList" :class="{'active': false}">
+          <div class="searItem" v-loading.fullscreen.lock="fullscreenLoading" v-for="item in roleList" @click="searBtnFn(item)" :class="{'active': item.id == roleId}">
             {{item.roleName}}
-          </div>
+          </div>
         </div>
+        <pagination sty v-show="total>0" :total="total" layout="prev, pager, next" :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize" />
       </el-col>
       <el-col :span="19" class="roleContr">
         <div class="roleContrBox">
           <el-col :span="7">
-            <div class="searContLeft">  
-              <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+            <div class="searContLeft">
+              <el-tree class="tree-border" @node-click="qxList" :data="deptOptions" default-expand-all ref="dept" node-key="id" :props="defaultProps"></el-tree>
             </div>
           </el-col>
           <el-col :span="17">
@@ -71,51 +73,34 @@
   </div>
 </template>
 
-<script>
-  import { listRole, getRole, delRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from "@/api/system/role";
-  import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
-  import { treeselect as deptTreeselect, roleDeptTreeselect } from "@/api/system/dept";
+<script>
+  import {
+    listRole,
+    getRole,
+    delRole,
+    addRole,
+    updateRole,
+    exportRole,
+    dataScope,
+    changeRoleStatus
+  } from "@/api/system/role";
+  import {
+    treeselect as menuTreeselect,
+    allLeafNodeById,
+    treeMenuNotAddLeafNode
+  } from "@/api/system/menu";
+  import {
+    treeselect as deptTreeselect,
+    roleDeptTreeselect
+  } from "@/api/system/dept";
 
   export default {
     name: "Role",
     data() {
-      return {
+      return {
+        fullscreenLoading: false,
         searIndex: '',
-        data: [{
-          label: '一级 1',
-          children: [{
-            label: '二级 1-1',
-            children: [{
-              label: '三级 1-1-1'
-            }]
-          }]
-        }, {
-          label: '一级 2',
-          children: [{
-            label: '二级 2-1',
-            children: [{
-              label: '三级 2-1-1'
-            }]
-          }, {
-            label: '二级 2-2',
-            children: [{
-              label: '三级 2-2-1'
-            }]
-          }]
-        }, {
-          label: '一级 3',
-          children: [{
-            label: '二级 3-1',
-            children: [{
-              label: '三级 3-1-1'
-            }]
-          }, {
-            label: '二级 3-2',
-            children: [{
-              label: '三级 3-2-1'
-            }]
-          }]
-        }],
+        data: [],
         defaultProps: {
           children: 'children',
           label: 'label'
@@ -183,12 +168,9 @@
           roleKey: undefined,
           status: undefined
         },
+        roleId: '',
         // 表单参数
         form: {},
-        defaultProps: {
-          children: "children",
-          label: "label"
-        },
         // 表单校验
         rules: {
           roleName: [{
@@ -216,8 +198,21 @@
       });
     },
     methods: {
-      handleNodeClick() {
-        console.log(221)
+      qxList(e) {
+        allLeafNodeById(e.id).then(res => {
+          console.log(res)
+        })
+      },
+      refreshFn() {
+        this.getList()
+        this.deptOptions = []
+      },
+      searBtnFn(item) {
+        this.roleId = item.id
+        this.handleUpdate()
+      },
+      handleNodeClick() {
+        console.log(221)
       },
       /** 查询角色列表 */
       getList() {
@@ -262,7 +257,7 @@
       },
       /** 根据角色ID查询菜单树结构 */
       getRoleMenuTreeselect(id) {
-        return roleMenuTreeselect(id).then(response => {
+        return treeMenuNotAddLeafNode(id).then(response => {
           this.menuOptions = response.menus;
           return response;
         });
@@ -377,24 +372,14 @@
         this.title = "添加角色";
       },
       /** 修改按钮操作 */
-      handleUpdate(row) {
-        this.reset();
-        const id = row.id || this.ids
-        const roleMenu = this.getRoleMenuTreeselect(id);
-        getRole(id).then(response => {
-          this.form = response.data;
-          this.open = true;
-          this.$nextTick(() => {
-            roleMenu.then(res => {
-              let checkedKeys = res.checkedKeys
-              checkedKeys.forEach((v) => {
-                this.$nextTick(() => {
-                  this.$refs.menu.setChecked(v, true, false);
-                })
-              })
-            });
-          });
-          this.title = "修改角色";
+      handleUpdate() {
+        this.reset();
+        this.fullscreenLoading = true
+        const roleMenu = this.getRoleMenuTreeselect(this.roleId);
+        roleMenu.then(res => {
+          // let checkedKeys = res.checkedKeys
+          this.deptOptions = res.menus
+          this.fullscreenLoading = false
         });
       },
       /** 选择角色权限范围触发 */
@@ -480,14 +465,22 @@
     border-radius: 6px;
     overflow: hidden;
     padding: 23px 0;
+    height: calc(100% - 183px);
   }
 
   .roleContr {
     padding-left: 17px;
 
     .searContLeft {
+      max-height: calc(100vh - 353px);
+      overflow-y: auto;
+      box-sizing: border-box;
       padding: 23px 17px 23px 23px;
       border-right: 2px solid #E5E5E5;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
     }
 
     .searContRight {
@@ -547,6 +540,7 @@
   .searBoxs {
     background-color: #fff;
     border-radius: 6px;
+    box-sizing: border-box;
     padding: 23px;
 
     .searBox {
@@ -579,7 +573,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        background-color: #3C8DBC;
+        background-color: #3C8DBC;
         cursor: pointer;
 
         .icon {
@@ -609,8 +603,7 @@
 
   .app-container {
     background-color: #EFF0FF;
-    min-height: calc(100vh - 70px);
-    box-sizing: border-box;
+    height: calc(100vh - 84px);
     box-sizing: border-box;
   }
 
@@ -662,24 +655,26 @@
       }
     }
   }
-</style>
-<style>
-  .el-icon-my-export{
-      background: url('~@/assets/images/icon_btn_bc@2x.png') center no-repeat;
-      background-size: 13px 13px;
-     /* background-size: cover;*/
-  }
-  .el-icon-my-export:before{
-      content: "替";
-      font-size: 16px;
-      visibility: hidden;
-  }
-
-
-  .el-icon-my-export{
-      font-size: 16px;
-  }
-  .el-icon-my-export:before{
-      content: "\e611";
-  }
+</style>
+<style>
+  .el-icon-my-export {
+    background: url('~@/assets/images/icon_btn_bc@2x.png') center no-repeat;
+    background-size: 13px 13px;
+    /* background-size: cover;*/
+  }
+
+  .el-icon-my-export:before {
+    content: "替";
+    font-size: 16px;
+    visibility: hidden;
+  }
+
+
+  .el-icon-my-export {
+    font-size: 16px;
+  }
+
+  .el-icon-my-export:before {
+    content: "\e611";
+  }
 </style>

ruoyi-ui/src/views/system/role/index.vue

@@ -1,680 +1,610 @@
-<template>
-  <div class="app-container">
-    <el-row class="roleBox">
-      <el-col :span="24" class="roleCol">
-        <div class="roleH"></div>
-        <span>功能权限</span>
-      </el-col>
-      <el-col :span="24" class="roleBot">
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" style="background-color: #2AC1CA;color: #fff;border: none;" plain icon="el-icon-plus"
-              @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="primary" style="background-color: #FF9639;color: #fff;border: none;" plain icon="el-icon-refresh"
-              @click="refreshFn" v-hasPermi="['system:role:list']">刷新</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="primary" style="background-color: #3C8DBC;color: #fff;border: none;" plain icon="el-icon-my-export"
-              @click="handleAdd" v-hasPermi="['system:role:edit']">保存</el-button>
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
-    <el-row class="roleCont" style="margin-top: 18px;">
-      <el-col :span="5" class="searBoxs">
-        <div class="searBox">
-          <div class="searInput">
-            <input type="text" v-model="queryParams.roleName" placeholder="请输入角色">
-          </div>
-          <div class="searBtn">
-            <img src="@/assets/images/icon_sr_ss@2x.png" @click="handleQuery" alt="" class="icon">
-          </div>
-        </div>
-        <div class="searList">
-          <div class="searItem" v-loading.fullscreen.lock="fullscreenLoading" v-for="item in roleList" @click="searBtnFn(item)" :class="{'active': item.id == roleId}">
-            {{item.roleName}}
-          </div>
-        </div>
-        <pagination sty v-show="total>0" :total="total" layout="prev, pager, next" :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize" />
-      </el-col>
-      <el-col :span="19" class="roleContr">
-        <div class="roleContrBox">
-          <el-col :span="7">
-            <div class="searContLeft">
-              <el-tree class="tree-border" @node-click="qxList" :data="deptOptions" default-expand-all ref="dept" node-key="id" :props="defaultProps"></el-tree>
-            </div>
-          </el-col>
-          <el-col :span="17">
-            <div class="searContRight">
-              <div class="searTitle">
-                <div class="searName">
-                  功能
-                </div>
-                <div class="searItem" v-for="item in 8">
-                  <el-checkbox :label="'新增'+item"></el-checkbox>
-                </div>
-              </div>
-              <div class="searCont" v-for="items in 12" @click="searIndex = item" :class="{'active': searIndex == item}">
-                <div class="searName">
-                  功能功能{{items}}
-                </div>
-                <div class="searItem" v-for="item in 8">
-                  <el-checkbox></el-checkbox>
-                </div>
-              </div>
-            </div>
-          </el-col>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-  import {
-    listRole,
-    getRole,
-    delRole,
-    addRole,
-    updateRole,
-    exportRole,
-    dataScope,
-    changeRoleStatus
-  } from "@/api/system/role";
-  import {
-    treeselect as menuTreeselect,
-    allLeafNodeById,
-    treeMenuNotAddLeafNode
-  } from "@/api/system/menu";
-  import {
-    treeselect as deptTreeselect,
-    roleDeptTreeselect
-  } from "@/api/system/dept";
-
-  export default {
-    name: "Role",
-    data() {
-      return {
-        fullscreenLoading: false,
-        searIndex: '',
-        data: [],
-        defaultProps: {
-          children: 'children',
-          label: 'label'
-        },
-        indexs: 3,
-        // 遮罩层
-        loading: true,
-        // 选中数组
-        ids: [],
-        // 非单个禁用
-        single: true,
-        // 非多个禁用
-        multiple: true,
-        // 显示搜索条件
-        showSearch: true,
-        // 总条数
-        total: 0,
-        // 角色表格数据
-        roleList: [],
-        // 弹出层标题
-        title: "",
-        // 是否显示弹出层
-        open: false,
-        // 是否显示弹出层（数据权限）
-        openDataScope: false,
-        menuExpand: false,
-        menuNodeAll: false,
-        deptExpand: true,
-        deptNodeAll: false,
-        // 日期范围
-        dateRange: [],
-        // 状态数据字典
-        statusOptions: [],
-        // 数据范围选项
-        dataScopeOptions: [{
-            value: "1",
-            label: "全部数据权限"
-          },
-          {
-            value: "2",
-            label: "自定数据权限"
-          },
-          {
-            value: "3",
-            label: "本部门数据权限"
-          },
-          {
-            value: "4",
-            label: "本部门及以下数据权限"
-          },
-          {
-            value: "5",
-            label: "仅本人数据权限"
-          }
-        ],
-        // 菜单列表
-        menuOptions: [],
-        // 部门列表
-        deptOptions: [],
-        // 查询参数
-        queryParams: {
-          pageNum: 1,
-          pageSize: 10,
-          roleName: undefined,
-          roleKey: undefined,
-          status: undefined
-        },
-        roleId: '',
-        // 表单参数
-        form: {},
-        // 表单校验
-        rules: {
-          roleName: [{
-            required: true,
-            message: "角色名称不能为空",
-            trigger: "blur"
-          }],
-          roleKey: [{
-            required: true,
-            message: "权限字符不能为空",
-            trigger: "blur"
-          }],
-          roleSort: [{
-            required: true,
-            message: "角色顺序不能为空",
-            trigger: "blur"
-          }]
-        }
-      };
-    },
-    created() {
-      this.getList();
-      this.getDicts("sys_normal_disable").then(response => {
-        this.statusOptions = response.data;
-      });
-    },
-    methods: {
-      qxList(e) {
-        allLeafNodeById(e.id).then(res => {
-          console.log(res)
-        })
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input
+          v-model="queryParams.roleName"
+          placeholder="请输入角色名称"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="权限字符" prop="roleKey">
+        <el-input
+          v-model="queryParams.roleKey"
+          placeholder="请输入权限字符"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="角色状态"
+          clearable
+          size="small"
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in statusOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:role:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:role:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:role:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:role:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="角色编号" prop="roleId" width="120" />
+      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="显示顺序" prop="roleSort" width="100" />
+      <el-table-column label="状态" align="center" width="100">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.status"
+            active-value="0"
+            inactive-value="1"
+            @change="handleStatusChange(scope.row)"
+          ></el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:role:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-circle-check"
+            @click="handleDataScope(scope.row)"
+            v-hasPermi="['system:role:edit']"
+          >数据权限</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:role:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改角色配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input v-model="form.roleName" placeholder="请输入角色名称" />
+        </el-form-item>
+        <el-form-item label="权限字符" prop="roleKey">
+          <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
+        </el-form-item>
+        <el-form-item label="角色顺序" prop="roleSort">
+          <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in statusOptions"
+              :key="dict.dictValue"
+              :label="dict.dictValue"
+            >{{dict.dictLabel}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="菜单权限">
+          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
+          <el-tree
+            class="tree-border"
+            :data="menuOptions"
+            show-checkbox
+            ref="menu"
+            node-key="id"
+            :check-strictly="!form.menuCheckStrictly"
+            empty-text="加载中，请稍后"
+            :props="defaultProps"
+          ></el-tree>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 分配角色数据权限对话框 -->
+    <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="角色名称">
+          <el-input v-model="form.roleName" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="权限字符">
+          <el-input v-model="form.roleKey" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="权限范围">
+          <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
+            <el-option
+              v-for="item in dataScopeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据权限" v-show="form.dataScope == 2">
+          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
+          <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
+          <el-tree
+            class="tree-border"
+            :data="deptOptions"
+            show-checkbox
+            default-expand-all
+            ref="dept"
+            node-key="id"
+            :check-strictly="!form.deptCheckStrictly"
+            empty-text="加载中，请稍后"
+            :props="defaultProps"
+          ></el-tree>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitDataScope">确 定</el-button>
+        <el-button @click="cancelDataScope">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listRole, getRole, delRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from "@/api/system/role";
+import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
+import { treeselect as deptTreeselect, roleDeptTreeselect } from "@/api/system/dept";
+
+export default {
+  name: "Role",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 角色表格数据
+      roleList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否显示弹出层（数据权限）
+      openDataScope: false,
+      menuExpand: false,
+      menuNodeAll: false,
+      deptExpand: true,
+      deptNodeAll: false,
+      // 日期范围
+      dateRange: [],
+      // 状态数据字典
+      statusOptions: [],
+      // 数据范围选项
+      dataScopeOptions: [
+        {
+          value: "1",
+          label: "全部数据权限"
+        },
+        {
+          value: "2",
+          label: "自定数据权限"
+        },
+        {
+          value: "3",
+          label: "本部门数据权限"
+        },
+        {
+          value: "4",
+          label: "本部门及以下数据权限"
+        },
+        {
+          value: "5",
+          label: "仅本人数据权限"
+        }
+      ],
+      // 菜单列表
+      menuOptions: [],
+      // 部门列表
+      deptOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        roleName: undefined,
+        roleKey: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: "children",
+        label: "label"
       },
-      refreshFn() {
-        this.getList()
-        this.deptOptions = []
-      },
-      searBtnFn(item) {
-        this.roleId = item.id
-        this.handleUpdate()
-      },
-      handleNodeClick() {
-        console.log(221)
-      },
-      /** 查询角色列表 */
-      getList() {
-        this.loading = true;
-        listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
-          response => {
-            this.roleList = response.rows;
-            this.total = response.total;
-            this.loading = false;
-          }
-        );
-      },
-      /** 查询菜单树结构 */
-      getMenuTreeselect() {
-        menuTreeselect().then(response => {
-          this.menuOptions = response.data;
-        });
-      },
-      /** 查询部门树结构 */
-      getDeptTreeselect() {
-        deptTreeselect().then(response => {
-          this.deptOptions = response.data;
-        });
-      },
-      // 所有菜单节点数据
-      getMenuAllCheckedKeys() {
-        // 目前被选中的菜单节点
-        let checkedKeys = this.$refs.menu.getCheckedKeys();
-        // 半选中的菜单节点
-        let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
-        checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-        return checkedKeys;
-      },
-      // 所有部门节点数据
-      getDeptAllCheckedKeys() {
-        // 目前被选中的部门节点
-        let checkedKeys = this.$refs.dept.getCheckedKeys();
-        // 半选中的部门节点
-        let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
-        checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-        return checkedKeys;
-      },
-      /** 根据角色ID查询菜单树结构 */
-      getRoleMenuTreeselect(id) {
-        return treeMenuNotAddLeafNode(id).then(response => {
-          this.menuOptions = response.menus;
-          return response;
-        });
-      },
-      /** 根据角色ID查询部门树结构 */
-      getRoleDeptTreeselect(id) {
-        return roleDeptTreeselect(id).then(response => {
-          this.deptOptions = response.depts;
-          return response;
-        });
-      },
-      // 角色状态修改
-      handleStatusChange(row) {
-        let text = row.status === "0" ? "启用" : "停用";
-        this.$confirm('确认要"' + text + '""' + row.roleName + '"角色吗?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return changeRoleStatus(row.id, row.status);
-        }).then(() => {
-          this.msgSuccess(text + "成功");
-        }).catch(function() {
-          row.status = row.status === "0" ? "1" : "0";
-        });
-      },
-      // 取消按钮
-      cancel() {
-        this.open = false;
-        this.reset();
-      },
-      // 取消按钮（数据权限）
-      cancelDataScope() {
-        this.openDataScope = false;
-        this.reset();
-      },
-      // 表单重置
-      reset() {
-        if (this.$refs.menu != undefined) {
-          this.$refs.menu.setCheckedKeys([]);
-        }
-        this.menuExpand = false,
-          this.menuNodeAll = false,
-          this.deptExpand = true,
-          this.deptNodeAll = false,
-          this.form = {
-            id: undefined,
-            roleName: undefined,
-            roleKey: undefined,
-            roleSort: 0,
-            status: "0",
-            menuIds: [],
-            deptIds: [],
-            menuCheckStrictly: true,
-            deptCheckStrictly: true,
-            remark: undefined
-          };
-        this.resetForm("form");
-      },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.queryParams.pageNum = 1;
-        this.getList();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.dateRange = [];
-        this.resetForm("queryForm");
-        this.handleQuery();
-      },
-      // 多选框选中数据
-      handleSelectionChange(selection) {
-        this.ids = selection.map(item => item.id)
-        this.single = selection.length != 1
-        this.multiple = !selection.length
-      },
-      // 树权限（展开/折叠）
-      handleCheckedTreeExpand(value, type) {
-        if (type == 'menu') {
-          let treeList = this.menuOptions;
-          for (let i = 0; i < treeList.length; i++) {
-            this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
-          }
-        } else if (type == 'dept') {
-          let treeList = this.deptOptions;
-          for (let i = 0; i < treeList.length; i++) {
-            this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
-          }
-        }
-      },
-      // 树权限（全选/全不选）
-      handleCheckedTreeNodeAll(value, type) {
-        if (type == 'menu') {
-          this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
-        } else if (type == 'dept') {
-          this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
-        }
-      },
-      // 树权限（父子联动）
-      handleCheckedTreeConnect(value, type) {
-        if (type == 'menu') {
-          this.form.menuCheckStrictly = value ? true : false;
-        } else if (type == 'dept') {
-          this.form.deptCheckStrictly = value ? true : false;
-        }
-      },
-      /** 新增按钮操作 */
-      handleAdd() {
-        this.reset();
-        this.getMenuTreeselect();
-        this.open = true;
-        this.title = "添加角色";
-      },
-      /** 修改按钮操作 */
-      handleUpdate() {
-        this.reset();
-        this.fullscreenLoading = true
-        const roleMenu = this.getRoleMenuTreeselect(this.roleId);
-        roleMenu.then(res => {
-          // let checkedKeys = res.checkedKeys
-          this.deptOptions = res.menus
-          this.fullscreenLoading = false
-        });
-      },
-      /** 选择角色权限范围触发 */
-      dataScopeSelectChange(value) {
-        if (value !== '2') {
-          this.$refs.dept.setCheckedKeys([]);
-        }
-      },
-      /** 分配数据权限操作 */
-      handleDataScope(row) {
-        this.reset();
-        const roleDeptTreeselect = this.getRoleDeptTreeselect(row.id);
-        getRole(row.id).then(response => {
-          this.form = response.data;
-          this.openDataScope = true;
-          this.$nextTick(() => {
-            roleDeptTreeselect.then(res => {
-              this.$refs.dept.setCheckedKeys(res.checkedKeys);
-            });
-          });
-          this.title = "分配数据权限";
-        });
-      },
-      /** 提交按钮 */
-      submitForm: function() {
-        this.$refs["form"].validate(valid => {
-          if (valid) {
-            if (this.form.id != undefined) {
-              this.form.menuIds = this.getMenuAllCheckedKeys();
-              updateRole(this.form).then(response => {
-                this.msgSuccess("修改成功");
-                this.open = false;
-                this.getList();
-              });
-            } else {
-              this.form.menuIds = this.getMenuAllCheckedKeys();
-              addRole(this.form).then(response => {
-                this.msgSuccess("新增成功");
-                this.open = false;
-                this.getList();
-              });
-            }
-          }
-        });
-      },
-      /** 提交按钮（数据权限） */
-      submitDataScope: function() {
-        if (this.form.id != undefined) {
-          this.form.deptIds = this.getDeptAllCheckedKeys();
-          dataScope(this.form).then(response => {
-            this.msgSuccess("修改成功");
-            this.openDataScope = false;
-            this.getList();
-          });
-        }
-      },
-      /** 删除按钮操作 */
-      handleDelete(row) {
-        const ids = row.id || this.ids;
-        this.$confirm('是否确认删除角色编号为"' + ids + '"的数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return delRole(ids);
-        }).then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
-        })
-      },
-      /** 导出按钮操作 */
-      handleExport() {
-        this.download('system/role/export', {
-          ...this.queryParams
-        }, `role_${new Date().getTime()}.xlsx`)
-      }
-    }
-  };
-</script>
-<style lang="scss" scoped>
-  .roleContrBox {
-    background-color: #fff;
-    border-radius: 6px;
-    overflow: hidden;
-    padding: 23px 0;
-    height: calc(100% - 183px);
-  }
-
-  .roleContr {
-    padding-left: 17px;
-
-    .searContLeft {
-      max-height: calc(100vh - 353px);
-      overflow-y: auto;
-      box-sizing: border-box;
-      padding: 23px 17px 23px 23px;
-      border-right: 2px solid #E5E5E5;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-
-    .searContRight {
-      padding-left: 18px;
-
-      .searTitle {
-        display: flex;
-        padding-left: 11px;
-        margin-bottom: 26px;
-
-        .searName {
-          color: #343434;
-          font-size: 12px;
-          width: 156px;
-        }
-
-        .searItem {
-          flex: 1;
-          font-size: 12px;
-        }
-      }
-
-      .searCont {
-        display: flex;
-        height: 23px;
-        padding-left: 11px;
-        align-items: center;
-        margin-bottom: 4px;
-        cursor: pointer;
-
-        .searName {
-          color: #343434;
-          font-size: 12px;
-          width: 156px;
-        }
-
-        .searItem {
-          flex: 1;
-          font-size: 12px;
-        }
-
-        &:hover {
-          background-color: rgba(0, 0, 0, .1);
-        }
-      }
-
-      .active {
-        background-color: #CADBE4;
-
-        .searName {
-          color: #fff;
-        }
-      }
-    }
-  }
-
-  .searBoxs {
-    background-color: #fff;
-    border-radius: 6px;
-    box-sizing: border-box;
-    padding: 23px;
-
-    .searBox {
-      display: flex;
-
-      .searInput {
-        flex: 1;
-        height: 32px;
-        margin-right: 8px;
-        box-sizing: border-box;
-      }
-
-      input {
-        width: 100%;
-        height: 100%;
-        background-color: #F7F6F6;
-        border: none;
-        padding: 0 7px;
-        outline: none;
-
-        &::placeholder {
-          color: #AAAAAA;
-          font-size: 12px;
-        }
-      }
-
-      .searBtn {
-        width: 30px;
-        height: 32px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color: #3C8DBC;
-        cursor: pointer;
-
-        .icon {
-          width: 18px;
-          height: 17px;
-        }
-      }
-    }
-
-    .searList {
-      padding: 10px 0;
-
-      .searItem {
-        padding: 0 8px;
-        line-height: 30px;
-        font-size: 12px;
-        color: #343434;
-        cursor: pointer;
-      }
-
-      .active {
-        background-color: #CADBE4;
-        color: #3C8DBC;
-      }
-    }
-  }
-
-  .app-container {
-    background-color: #EFF0FF;
-    height: calc(100vh - 84px);
-    box-sizing: border-box;
-  }
-
-  .roleBox {
-    padding: 0 23px;
-    background: #fff;
-    border-radius: 6px;
-
-    .roleCol {
-      padding: 20px 0;
-      border-bottom: 1px solid #E5E5E5;
-
-      .roleH {
-        width: 18px;
-        height: 8px;
-        border-radius: 4px;
-        background-color: #3C8DBC;
-        margin-bottom: 8px;
-      }
-
-      span {
-        font-size: 15px;
-        color: #3C8DBC;
-      }
-    }
-
-    .roleBot {
-      padding: 22px 0;
-
-      .roleBtn {
-        height: 32px;
-        display: flex;
-        border-radius: 3px;
-        justify-content: center;
-        align-items: center;
-        width: 83px;
-        margin-right: 18px;
-
-        .icon {
-          width: 14px;
-          height: 14px;
-          margin-right: 7px;
-        }
-
-        span {
-          color: #fff;
-          font-size: 12px;
-        }
-      }
-    }
-  }
-</style>
-<style>
-  .el-icon-my-export {
-    background: url('~@/assets/images/icon_btn_bc@2x.png') center no-repeat;
-    background-size: 13px 13px;
-    /* background-size: cover;*/
-  }
-
-  .el-icon-my-export:before {
-    content: "替";
-    font-size: 16px;
-    visibility: hidden;
-  }
-
-
-  .el-icon-my-export {
-    font-size: 16px;
-  }
-
-  .el-icon-my-export:before {
-    content: "\e611";
-  }
-</style>
+      // 表单校验
+      rules: {
+        roleName: [
+          { required: true, message: "角色名称不能为空", trigger: "blur" }
+        ],
+        roleKey: [
+          { required: true, message: "权限字符不能为空", trigger: "blur" }
+        ],
+        roleSort: [
+          { required: true, message: "角色顺序不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+    this.getDicts("sys_normal_disable").then(response => {
+      this.statusOptions = response.data;
+    });
+  },
+  methods: {
+    /** 查询角色列表 */
+    getList() {
+      this.loading = true;
+      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
+        response => {
+          this.roleList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 查询菜单树结构 */
+    getMenuTreeselect() {
+      menuTreeselect().then(response => {
+        this.menuOptions = response.data;
+      });
+    },
+    /** 查询部门树结构 */
+    getDeptTreeselect() {
+      deptTreeselect().then(response => {
+        this.deptOptions = response.data;
+      });
+    },
+    // 所有菜单节点数据
+    getMenuAllCheckedKeys() {
+      // 目前被选中的菜单节点
+      let checkedKeys = this.$refs.menu.getCheckedKeys();
+      // 半选中的菜单节点
+      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
+      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+      return checkedKeys;
+    },
+    // 所有部门节点数据
+    getDeptAllCheckedKeys() {
+      // 目前被选中的部门节点
+      let checkedKeys = this.$refs.dept.getCheckedKeys();
+      // 半选中的部门节点
+      let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
+      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+      return checkedKeys;
+    },
+    /** 根据角色ID查询菜单树结构 */
+    getRoleMenuTreeselect(roleId) {
+      return roleMenuTreeselect(roleId).then(response => {
+        this.menuOptions = response.menus;
+        return response;
+      });
+    },
+    /** 根据角色ID查询部门树结构 */
+    getRoleDeptTreeselect(roleId) {
+      return roleDeptTreeselect(roleId).then(response => {
+        this.deptOptions = response.depts;
+        return response;
+      });
+    },
+    // 角色状态修改
+    handleStatusChange(row) {
+      let text = row.status === "0" ? "启用" : "停用";
+      this.$confirm('确认要"' + text + '""' + row.roleName + '"角色吗?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return changeRoleStatus(row.roleId, row.status);
+        }).then(() => {
+          this.msgSuccess(text + "成功");
+        }).catch(function() {
+          row.status = row.status === "0" ? "1" : "0";
+        });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 取消按钮（数据权限）
+    cancelDataScope() {
+      this.openDataScope = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      if (this.$refs.menu != undefined) {
+        this.$refs.menu.setCheckedKeys([]);
+      }
+      this.menuExpand = false,
+      this.menuNodeAll = false,
+      this.deptExpand = true,
+      this.deptNodeAll = false,
+      this.form = {
+        roleId: undefined,
+        roleName: undefined,
+        roleKey: undefined,
+        roleSort: 0,
+        status: "0",
+        menuIds: [],
+        deptIds: [],
+        menuCheckStrictly: true,
+        deptCheckStrictly: true,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.roleId)
+      this.single = selection.length!=1
+      this.multiple = !selection.length
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value, type) {
+      if (type == 'menu') {
+        let treeList = this.menuOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      } else if (type == 'dept') {
+        let treeList = this.deptOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      }
+    },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value, type) {
+      if (type == 'menu') {
+        this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
+      } else if (type == 'dept') {
+        this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
+      }
+    },
+    // 树权限（父子联动）
+    handleCheckedTreeConnect(value, type) {
+      if (type == 'menu') {
+        this.form.menuCheckStrictly = value ? true: false;
+      } else if (type == 'dept') {
+        this.form.deptCheckStrictly = value ? true: false;
+      }
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.getMenuTreeselect();
+      this.open = true;
+      this.title = "添加角色";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const roleId = row.roleId || this.ids
+      const roleMenu = this.getRoleMenuTreeselect(roleId);
+      getRole(roleId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.$nextTick(() => {
+          roleMenu.then(res => {
+            let checkedKeys = res.checkedKeys
+            checkedKeys.forEach((v) => {
+                this.$nextTick(()=>{
+                    this.$refs.menu.setChecked(v, true ,false);
+                })
+            })
+          });
+        });
+        this.title = "修改角色";
+      });
+    },
+    /** 选择角色权限范围触发 */
+    dataScopeSelectChange(value) {
+      if(value !== '2') {
+        this.$refs.dept.setCheckedKeys([]);
+      }
+    },
+    /** 分配数据权限操作 */
+    handleDataScope(row) {
+      this.reset();
+      const roleDeptTreeselect = this.getRoleDeptTreeselect(row.roleId);
+      getRole(row.roleId).then(response => {
+        this.form = response.data;
+        this.openDataScope = true;
+        this.$nextTick(() => {
+          roleDeptTreeselect.then(res => {
+            this.$refs.dept.setCheckedKeys(res.checkedKeys);
+          });
+        });
+        this.title = "分配数据权限";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.roleId != undefined) {
+            this.form.menuIds = this.getMenuAllCheckedKeys();
+            updateRole(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            this.form.menuIds = this.getMenuAllCheckedKeys();
+            addRole(this.form).then(response => {
+              this.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 提交按钮（数据权限） */
+    submitDataScope: function() {
+      if (this.form.roleId != undefined) {
+        this.form.deptIds = this.getDeptAllCheckedKeys();
+        dataScope(this.form).then(response => {
+          this.msgSuccess("修改成功");
+          this.openDataScope = false;
+          this.getList();
+        });
+      }
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const roleIds = row.roleId || this.ids;
+      this.$confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return delRole(roleIds);
+        }).then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有角色数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return exportRole(queryParams);
+        }).then(response => {
+          this.download(response.msg);
+        })
+    }
+  }
+};
+</script>

ruoyi-ui/src/views/system/surface/index.vue

@@ -4,12 +4,12 @@
       <!-- <p>单表</p>
       <el-divider></el-divider> -->
       <div class="table_headerBtun" v-if="queryData.buttonList">
-        <el-button type="primary" plain @click="headerBtn(item)" size="small" v-for="(item,index) in queryData.buttonList.split('')"
+        <el-button type="primary" plain @click="headerBtn(item)" size="small" v-for="(item,index) in queryData.buttonList.split('').filter((res) => {return res!='S'||res!='U'})"
           :key="index">{{item | btnConversion}}</el-button>
       </div>
       <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
-        <dynamic-forms :ref="item.columnName" :config="queryParams" @inputs="changeFn" :formConfig="item" v-for="(item,index) in queryData.queryList"
-          :key='index' />
+        <dynamic-forms :type="1" :ref="item.columnName" :config="queryParams" @inputs="changeFn" :formConfig="item"
+          v-for="(item,index) in queryData.queryList" :key='index' />
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -23,7 +23,8 @@
         <template v-for="(item, index) in tabData">
           <el-table-column :label="item.columnComment" align="center" :prop="item.columnName" :key="index">
             <template slot-scope="scope">
-              <img class="img_icon" v-if="item.htmlType=='imageUpload'&&JSON.parse(scope.row[scope.column.property]).length" @click="imgBtn(JSON.parse(scope.row[scope.column.property])[0].url)" :src="JSON.parse(scope.row[scope.column.property])[0].url" alt="">
+              <img class="img_icon" v-if="item.htmlType=='imageUpload' && scope.row[scope.column.property]" @click="imgBtn(JSON.parse(scope.row[scope.column.property])[0].url)"
+                :src="JSON.parse(scope.row[scope.column.property])[0].url" alt="">
               <span v-else>{{ scope.row[scope.column.property] }}</span>
             </template>
           </el-table-column>
@@ -31,7 +32,7 @@
       </el-table>
       <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
         @pagination="getList" />
-    </div>
+    </div>
     <BigPicture ref="BigPicture" :urls="pir_imgs"></BigPicture>
   </div>
 </template>
@@ -52,7 +53,7 @@
   export default {
     name: "index",
     data() {
-      return {
+      return {
         pir_imgs: '', // 图片链接
         tabData: [],
         multiple: true,
@@ -135,10 +136,10 @@
       this.init();
       this.getList();
     },
-    methods: {
-      imgBtn(url) {
-        this.pir_imgs = url
-        this.$refs.BigPicture.hidden.status = true
+    methods: {
+      imgBtn(url) {
+        this.pir_imgs = url
+        this.$refs.BigPicture.hidden.status = true
       },
       routerFn(id, tables) {
         if (this.queryData.viewType == 'crud') {
@@ -298,13 +299,14 @@
 </script>
 
 
-<style lang="scss">
-  .img_icon{
-    width: 120px;
-    height: 120px;
-    cursor: pointer;
-    object-fit: cover;
+<style lang="scss">
+  .img_icon {
+    width: 120px;
+    height: 120px;
+    cursor: pointer;
+    object-fit: cover;
   }
+
   .table_header {
     .el-divider--horizontal {
       margin-top: 16px;

ruoyi-ui/src/views/system/table/index.vue

@@ -145,8 +145,7 @@
               this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config
             } else if (item.hrChildren[i].htmlType == 'imageUpload' || item.hrChildren[i].htmlType == 'fileUpload') {
               if (this.$refs[item.hrChildren[i].columnName][0].config.length) {
-                this.queryParams[item.hrChildren[i].columnName] = JSON.stringify(this.$refs[item.hrChildren[i].columnName]
-                  [0].config)
+                this.queryParams[item.hrChildren[i].columnName] = JSON.stringify(this.$refs[item.hrChildren[i].columnName][0].config)
               }
             } else {
               this.queryParams[item.hrChildren[i].columnName] = this.$refs[item.hrChildren[i].columnName][0].config[