From e358d69fc18870584dd2d9f531910b7838ea27d9 Mon Sep 17 00:00:00 2001
From: wangting <wangting@vci-tech.com>
Date: 星期四, 02 一月 2025 09:58:53 +0800
Subject: [PATCH] 调整行点击后的回调

---
 Source/plt-web/plt-web-ui/src/views/authority/ui/dataAuthorization/dataView.vue |  408 ++++++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 323 insertions(+), 85 deletions(-)

diff --git a/Source/plt-web/plt-web-ui/src/views/authority/ui/dataAuthorization/dataView.vue b/Source/plt-web/plt-web-ui/src/views/authority/ui/dataAuthorization/dataView.vue
index cb054cb..0b7cd81 100644
--- a/Source/plt-web/plt-web-ui/src/views/authority/ui/dataAuthorization/dataView.vue
+++ b/Source/plt-web/plt-web-ui/src/views/authority/ui/dataAuthorization/dataView.vue
@@ -12,23 +12,26 @@
           <fieldset style="width: 48%">
             <legend>&nbsp;涓讳綋 </legend>
             <div>
-              <avue-crud  ref="mainCrud" :data="mainData" :option="mainOption">
+              <avue-crud  ref="mainCrud" :data="mainData" :option="mainOption"
+                          @current-row-change="mainCurrentRowHandler"
+              >
                 <template #type="{ row }">
                   <el-tag v-if="row.type=='鐢ㄦ埛'" :key="row.oid" effect="dark">{{ row.type }}</el-tag>
                   <el-tag v-else-if="row.type=='瑙掕壊'" type="info" :key="row.oid" effect="dark">{{ row.type }}</el-tag>
-                  <el-tag v-else="row.type=='閮ㄩ棬'" type="warning" :key="row.oid" effect="dark">{{ row.type }}</el-tag>
+                  <el-tag v-else="row.type=='鐢ㄦ埛缁�'" type="warning" :key="row.oid" effect="dark">{{ row.type }}</el-tag>
                 </template>
               </avue-crud>
             </div>
           </fieldset>
           <div style="text-align: center;">
-            <el-button icon="el-icon-arrow-right" size="mini" @click="rightHandler" style="margin-bottom: 50px;"></el-button><br/>
-            <el-button icon="el-icon-arrow-left" size="mini" @click="leftHandler"></el-button>
+            <el-button icon="el-icon-arrow-right" type="primary" size="small" @click="rightHandler" style="margin-bottom: 50px;"></el-button><br/>
+            <el-button icon="el-icon-arrow-left" type="primary" size="small" @click="leftHandler"></el-button>
           </div>
           <fieldset style="width: 42%">
             <legend>&nbsp;鎺堟潈涓讳綋 </legend>
             <div>
-              <avue-crud  ref="authCrud" :data="authData" :option="authOption" :table-loading="tableLoading">
+              <avue-crud  ref="authCrud" :data="authData" :option="authOption" :table-loading="tableLoading"
+                @current-row-change="authCurrentRowHandler">
               </avue-crud>
             </div>
           </fieldset>
@@ -53,7 +56,7 @@
                       :formData="form"
                       @getFormData="getFormData">
           </basic-form>
-          <el-container v-if="!readOnly">
+          <el-container v-if="!readOnly && (form.ruleType=='1' || form.ruleType=='3')">
             <el-aside style="width:350px">
               <fieldset>
                 <legend>&nbsp;鍊欓�夋潯浠�&nbsp;</legend>
@@ -91,13 +94,13 @@
       </el-tab-pane>
       <el-tab-pane>
         <span slot="label"><i class="el-icon-s-tools"></i> 鎿嶄綔</span>
-        <fieldset :style="'width:99.5%;height: '+(height/2+20)+'px;margin-bottom:10px;'">
+        <fieldset :style="'width:99.5%;height: '+(height-10)+'px;margin-bottom:10px;'">
           <legend>&nbsp;涓�鑸搷浣� </legend>
           <div>
             <avue-checkbox :disabled="readOnly" key="actionCheck" :all="!readOnly" v-model="actionForm" placeholder="璇烽�夋嫨鍐呭" :dic="actionDic"></avue-checkbox>
           </div>
         </fieldset>
-        <fieldset :style="'width:99.5%;height: '+(height/2-30)+'px;'">
+        <fieldset v-if="0" :style="'width:99.5%;height: '+(height/2-30)+'px;'">
           <legend>&nbsp;鍏崇郴鍜岃穬杩� </legend>
           <div>
             <avue-checkbox :disabled="readOnly" key="linkActionCheck" :all="!readOnly" v-model="linkactionForm" placeholder="璇烽�夋嫨鍐呭" :dic="linkactionDic"></avue-checkbox>
@@ -112,9 +115,32 @@
     </transfer>
     <!-- 閫夋嫨鐢ㄦ埛绌挎妗�   -->
     <transfer ref="roletransfer" :left-role-data="leftRoleData" :right-role-data="rightRoleData"
-              :transferTitle="['鐜版湁瑙掕壊','鎷ユ湁瑙掕壊']" title="娣诲姞瑙掕壊"
+              :transferTitle="['鐜版湁瑙掕壊','鎷ユ湁瑙掕壊']" title="鍒嗛厤瑙掕壊"
               @transferSend="roleSendHandler">
     </transfer>
+    <!-- 閫夋嫨閮ㄩ棬瀵硅瘽妗�    -->
+    <el-dialog
+      v-dialogDrag
+      v-loading="departLoading"
+      :visible.sync="departVisible"
+      append-to-body="true"
+      class="avue-dialog"
+      title="閫夋嫨閮ㄩ棬"
+      width="50%"
+    >
+      <avue-crud
+        ref="departCrud"
+        :data="departData"
+        :option="departOption"
+        @selection-change="selectDepartChange"
+        @row-click="rowClickDeptHandler"
+      >
+      </avue-crud>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" type="primary" @click="saveDepartHandler">纭� 瀹�</el-button>
+        <el-button size="small" @click="departVisible = false">鍙� 娑�</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -123,7 +149,8 @@
 import formQueryDialog from "@/views/modelingMenu/queryTemplate/linkTypeQuery/formQueryDialog.vue";
 import {queryTemplateListByAttr} from "@/api/queryTemplate/queryDefine";
 import {getCriteria} from "@/api/queryTemplate/linkTypeQuery";
-import {listUserByRoleOid, listUserUnInRoleOid, saveRight} from "@/api/system/role/api";
+import {listUserByUserType, gridRoles, departmentQueryController} from "@/api/system/user/api";
+import func from "@/util/func";
 
 export default {
   name: "dataView",
@@ -135,7 +162,7 @@
       default: {}
     },
     //閫変腑琛屾暟鎹�
-    data: {
+    selectRow: {
       type: Object,
       default: {}
     },
@@ -147,7 +174,7 @@
       type: Number,
       default: 400
     },
-    actionDic:{
+    actionMap:{
       type: Object,
       default: {}
     }
@@ -158,7 +185,40 @@
       rightUserData: [], // 閫夋嫨鎴愬憳绌挎妗嗗彸渚у垵濮嬫暟鎹�
       leftRoleData: [],  // 閫夋嫨瑙掕壊绌挎妗嗗乏渚у垵濮嬫暟鎹�
       rightRoleData: [], // 閫夋嫨瑙掕壊绌挎妗嗗彸渚у垵濮嬫暟鎹�
+      departCurrenRows: [],
+      departOption: {
+        ...basicOption,
+        addBtn: false,
+        rowKey: 'oid',
+        rowParentKey: 'parentId',
+        selection: true,
+        highlightCurrentRow: true,
+        stripe: false,
+        menu: false,
+        refreshBtn: false,
+        gridBtn: false,
+        header: false,
+        column: [
+          {
+            label: '鍚嶇О',
+            prop: 'name',
+            align: 'left'
+          },
+          {
+            label: '缂栧彿',
+            prop: 'id',
+          },
+          {
+            label: '鎻忚堪',
+            prop: 'description',
+          },
+        ]
+      },
+      departData: [],//閫夋嫨閮ㄩ棬鏁版嵁
+      departLoading: false,
+      departVisible: false,
       mainData:[],
+      mainCurrentRow:{},
       tableLoading: false,
       mainOption: {
         ...basicOption,
@@ -172,11 +232,12 @@
         height: this.height-80,
         tip:false,
         size:'mini',
+        highlightCurrentRow:true,
         column: [{
           label: ' 鍒嗙被',
           prop: 'type',
           sortable: true,
-          width:110
+          width:90
         },{
           label: '缂栫爜',
           prop: 'id'
@@ -186,6 +247,7 @@
           }]
       },
       authData:[],
+      authCurrentRow:{},
       authOption:{
         ...basicOption,
         header:false,
@@ -199,6 +261,8 @@
         tip:false,
         showHeader:false,
         size:'mini',
+        highlightCurrentRow:true,
+        align:'left',
         column: [{
           label: '鍚嶇О',
           prop: 'name'
@@ -206,7 +270,7 @@
       },
       formItems:[{
         label: '瑙勫垯鍚嶇О',
-        prop: 'qtName',
+        prop: 'ruleName',
         type: 'input',
         span:8,
         labelWidth: 100,
@@ -218,31 +282,54 @@
         }]
       }, {
         label: '瑙勫垯绫诲瀷',
-        prop: 'version',
+        prop: 'ruleType',
         type: 'select',
         span:6,
         labelWidth:110,
         disabled:this.readOnly,
         dicData: [{
           label: '鍏ㄩ儴鍏佽',
-          value: 1
+          value: '0'
         }, {
           label: '鍏佽鏉冮檺',
-          value: 2
+          value: '1',
+          disabled:true
         }, {
           label: '鍏ㄩ儴鎷掔粷',
-          value: 3
+          value: '2'
         }, {
           label: '鎷掔粷鏉冮檺',
-          value: 7
+          value: '3',
+          disabled:true
         }],
-        value: 1
+        value: '0',
+        change:function (column,value){
+          if(value=='1' || value=='3'){
+            this.form.btmName=this.btmNode.attributes.name;
+            this.form.levelFlag=0;
+            this.form.queryTemplate={};
+          }
+        }
       }],
       form:{
         btmName:'',
         qtName: '',
         levelFlag:0,//0:鏅�氭煡璇㈡ā鏉�; 1:楂樼骇鏌ヨ妯℃澘"
-        queryTemplate:{}
+        queryTemplate:{},//瀹綋涓煡璇㈡潯浠�
+        "ID": "",//鏁版嵁鐨処D
+        "roles": "",//鏄剧ず鍒版巿鏉冧富浣撶晫闈紝瑙掕壊鍚嶇О锛屽涓娇鐢ㄩ�楀彿鍒嗛殧
+        "userGroups": "",//鏄剧ず鍒版巿鏉冧富浣撶晫闈紝閮ㄩ棬鍚嶇О锛屽涓娇鐢ㄩ�楀彿鍒嗛殧
+        "users": "",//鏄剧ず鍒版巿鏉冧富浣撶晫闈紝鐢ㄦ埛鍚嶇О锛屽涓娇鐢ㄩ�楀彿鍒嗛殧
+        "expToSQL": "",//姝ゅ涓哄厑璁告潈闄愭垨鎷掔粷鏉冮檺闇�濉厖鐨勬暟鎹紝鏆傛椂涓嶅仛澶勭悊锛屼负绌哄瓧绗︿覆鍗冲彲
+        "identifier": "",//涓氬姟绫诲瀷锛坱erminology锛�+涓嬪垝绾匡紙_锛�+鎿嶄綔鍖虹殑涓�鑸搷浣滅殑鎸夐挳鑻辨枃鍚嶇О锛坬uery锛�,澶氫釜鎸夐挳鐨勮瘽鏄鏉℃暟鎹笉鏄娇鐢ㄩ�楀彿鍒嗛殧
+        "isGrand": 49, //姝ゅ涓烘搷浣滃尯鐨勪竴鑸搷浣滅殑鎸夐挳鏄惁涓洪�夋嫨鎯呭喌锛屾湭閫変腑鍊间负48锛岄�変腑涓�49锛岃繖閲屾槸灏�0鍜�1杞负浜哹yte鍊硷紝鎵�浠ヤ负48锛�49
+        "lexpToSQL": "",//姝ゅ涓哄厑璁告潈闄愭垨鎷掔粷鏉冮檺闇�濉厖鐨勬暟鎹紝鏆傛椂涓嶅仛澶勭悊锛屼负绌哄瓧绗︿覆鍗冲彲
+        "lruleText": "",//姝ゅ涓哄厑璁告潈闄愭垨鎷掔粷鏉冮檺闇�濉厖鐨勬暟鎹紝鏆傛椂涓嶅仛澶勭悊锛屼负绌哄瓧绗︿覆鍗冲彲
+        "lseniorRuleText": "",//姝ゅ涓哄厑璁告潈闄愭垨鎷掔粷鏉冮檺闇�濉厖鐨勬暟鎹紝鏆傛椂涓嶅仛澶勭悊锛屼负绌哄瓧绗︿覆鍗冲彲
+        "ruleName": "",//瑙勫垯鍚嶇О
+        "ruleText": "",//姝ゅ涓哄厑璁告潈闄愭垨鎷掔粷鏉冮檺闇�濉厖鐨勬暟鎹紝鏆傛椂涓嶅仛澶勭悊锛屼负绌哄瓧绗︿覆鍗冲彲
+        "ruleType": "",//0鍏ㄩ儴鍏佽锛�1鍏佽鏉冮檺锛�2鍏ㄩ儴鎷掔粷锛�3鎷掔粷鏉冮檺锛岀敱浜庢殏鏃跺彧鍋氬叏閮ㄥ厑璁镐笌鍏ㄩ儴鎷掔粷锛屾墍浠ユ殏鏃跺彲浠ヤ笉鐢ㄧ
+        "seniorRuleText": "",//姝ゅ涓哄厑璁告潈闄愭垨鎷掔粷鏉冮檺闇�濉厖鐨勬暟鎹紝鏆傛椂涓嶅仛澶勭悊锛屼负绌哄瓧绗︿覆鍗冲彲
       },
       radioForm:0,
       radioDic:[{
@@ -289,38 +376,110 @@
       actionForm:[],//涓�鑸搷浣滈�変腑鍊�
       actionDic:[],//涓�鑸搷浣滈�変腑椤�
       linkactionForm:[],//鍏崇郴鍜岃穬杩侀�変腑鍊�
-      linkactionDic:[{
-        label:'閫夐」111',
-        value:0
-      },{
-        label:'閫夐」222',
-        value:1
-      }]//鍏崇郴鍜岃穬杩侀�変腑椤�
+      linkactionDic:[]//鍏崇郴鍜岃穬杩侀�変腑椤�
     }
   },
   created() {
-
+    listUserByUserType().then(res => {
+      // 缁勮濂界┛姊鍙敤鏁版嵁
+      this.leftUserData = res.data.data.map(item => {
+        return {
+          ...item,
+          name: item.name + `(${item.id})`,
+          oid: item.oid
+        }
+      })
+      this.rightUserData = [];
+    })
+    gridRoles(1,-1).then(res => {
+      // 缁勮濂界┛姊鍙敤鏁版嵁
+      this.leftRoleData = res.data.data.map(item => {
+        return {
+          ...item,
+          name: item.name ,
+          oid: item.oid
+        }
+      })
+      this.rightRoleData = [];
+    })
+    departmentQueryController({queryAllLevel: true}).then(res => {
+      const data = res.data.treeData;
+      this.departData = this.departDtaFormAtter(data);
+    })
   },
   watch: {
-    data:{
+    actionMap:{
       handler(val) {
-        if(val && val.oid){
-          this.getTemp(true);
-          this.getTemp(false)
-        }
+        this.actionDic=[];
+        if(val){
+          for(var i in val){
+            this.actionDic.push({
+              label:i,
+              value:val[i]
+            })
+          }
+        };
       },
       immediate: true,
       deep: true
     },
-    actionMap:{
-      handler(val) {
-        this.actionDic=[{
-          label:'閫夐」1',
-          value:0
-        },{
-          label:'閫夐」2',
-          value:1
-        }];
+    selectRow:{
+      handler(val,oldval) {
+        this.authData=[];
+        if(val && val.rules &&val.rules.length>0) {
+          this.form = JSON.parse(JSON.stringify(val.rules[0]));
+          //this.getTemp(true);
+          //this.getTemp(false)
+          //鏋勫缓鎺堟潈涓讳綋鏁版嵁
+          if (val.rules[0].users) {
+            val.rules[0].users.split(',').forEach((item, i) => {
+              if (item) {
+                this.authData.push({
+                  name: '{' + item + ', ' + item + ', user}'
+                })
+              }
+            })
+          }
+          if (val.rules[0].roles) {
+            val.rules[0].roles.split(',').forEach((item, i) => {
+              if (item) {
+                this.authData.push({
+                  name: '{' + item + ', ' + item + ', role}'
+                })
+              }
+            })
+          }
+          if (val.rules[0].userGroups) {
+            val.rules[0].userGroups.split(',').forEach((item, i) => {
+              if (item) {
+                this.authData.push({
+                  name: '{' + item + ', ' + item + ', userGroup}'
+                })
+              }
+            })
+          }
+          //瑙f瀽鎿嶄綔鎸夐挳閫変腑鍊�
+          if (this.actionDic.length > 0) {
+            let actionDicStr = JSON.stringify(this.actionDic);
+            val.rules.forEach(item => {
+              if (item.isGrand == 49) {
+                let identifier = item.identifier.replace(this.btmNode.attributes.name + '_', '')
+                if (actionDicStr.indexOf('"value":"'+identifier+'"}') != -1) {
+                  this.actionForm.push(identifier)
+                } else {
+                  this.linkactionForm.push(identifier);
+                }
+              }
+            })
+          }
+        }else {
+          this.form={
+            ruleName:'',
+            ruleType:'0'
+          };
+          this.actionForm=[];
+          this.linkactionForm=[];
+        }
       },
       immediate: true,
       deep: true
@@ -329,67 +488,144 @@
   methods: {
     //閫変腑鐢ㄦ埛
     userHandler(){
-      Promise.all([
-        listUserUnInRoleOid({pkRole: this.selectList.oid}),
-        listUserByRoleOid({pkRole: this.selectList.oid})
-      ]).then(([unInRoleRes, byRoleRes]) => {
-        if (unInRoleRes.data.code === 200 && byRoleRes.data.code === 200) {
-          const leftData = [...unInRoleRes.data.data, ...byRoleRes.data.data];
-          // 缁勮濂界┛姊鍙敤鏁版嵁
-          this.leftUserData = leftData.map(item => {
-            return {
-              name: item.name + `(${item.id})`,
-              oid: item.oid
-            }
-          })
-          this.rightUserData = byRoleRes.data.data.map(item => item.oid);
-          this.$refs.usertransfer.visible = true;
-        }
-      });
-
+      this.$refs.usertransfer.visible = true;
     },
 
     // 閫変腑鐢ㄦ埛绌挎妗嗗洖濉�
     userSendHandler(row) {
+      this.mainData=this.mainData.filter(item=>{
+        return item.type!='鐢ㄦ埛'
+      })
       row.forEach((item,index)=>{
-        this.authData.push({
-          type:'user',
-          ...item
+        var addItem=this.leftUserData.find(leftitem=>leftitem.oid==item);
+        this.mainData.push({
+          type:'鐢ㄦ埛',
+          id:addItem.id,
+          name:addItem.name.split('(')[0],
+          oid:addItem.oid
         })
       })
+      this.rightUserData=row;
+      this.$refs.usertransfer.visible = false;
     },
     //閫夋嫨瑙掕壊
     roleHandler(){
-      Promise.all([
-        listUserUnInRoleOid({pkRole: this.selectList.oid}),
-        listUserByRoleOid({pkRole: this.selectList.oid})
-      ]).then(([unInRoleRes, byRoleRes]) => {
-        if (unInRoleRes.data.code === 200 && byRoleRes.data.code === 200) {
-          const leftData = [...unInRoleRes.data.data, ...byRoleRes.data.data];
-          // 缁勮濂界┛姊鍙敤鏁版嵁
-          this.leftRoleData = leftData.map(item => {
-            return {
-              name: item.name + `(${item.id})`,
-              oid: item.oid
-            }
-          })
-          this.rightRoleData = byRoleRes.data.data.map(item => item.oid);
-          this.$refs.transfer.visible = true;
-        }
-      });
+      this.$refs.roletransfer.visible = true;
     },
     // 閫夋嫨瑙掕壊绌挎妗嗗洖濉�
     roleSendHandler(row) {
+      this.mainData=this.mainData.filter(item=>{
+        return item.type!='瑙掕壊'
+      })
       row.forEach((item,index)=>{
-        this.authData.push({
-          type:'role',
-          ...item
+        var addItem=this.leftRoleData.find(leftitem=>leftitem.oid==item);
+        this.mainData.push({
+          type:'瑙掕壊',
+          id:addItem.name,
+          name:addItem.name,
+          oid:addItem.oid
         })
       })
+      this.rightRoleData=row;
+      this.$refs.roletransfer.visible = false;
     },
     //閫夋嫨鐢ㄦ埛缁�
     deptHandler(){
-
+      this.departVisible=true;
+    },
+    // 閫夋嫨閮ㄩ棬鏁版嵁杞崲
+    departDtaFormAtter(items) {
+      return items.map(item => {
+        // 杞崲褰撳墠鑺傜偣鐨勫睘鎬�
+        const formList = {
+          oid: item.oid,
+          id: item.attributes.id,
+          name: item.attributes.name,
+          description: item.attributes.description,
+          parentId: item.parentId,
+          parentName: item.parentName,
+          parentBtmName: item.parentBtmName,
+          // 濡傛灉children瀛樺湪涓斾笉涓虹┖锛屽垯閫掑綊杞崲children
+          children: item.children && item.children.length > 0 ? this.departDtaFormAtter(item.children) : undefined
+        };
+        return formList;
+      });
+    },
+    // 閫夋嫨閮ㄩ棬
+    selectDepartChange(row) {
+      this.departCurrenRows = row;
+    },
+    // 閫夋嫨閮ㄩ棬 琛屽崟閫�
+    rowClickDeptHandler(row) {
+      func.rowClickHandler(
+        row,
+        this.$refs.departCrud,
+        this.lastIndex,
+        (newIndex) => {
+          this.lastIndex = newIndex;
+        },
+        () => {
+          this.departCurrenRows = [row];
+        }
+      );
+    },
+    // 閫夋嫨閮ㄩ棬 纭畾
+    saveDepartHandler() {
+      if (this.departCurrenRows.length==0) {
+        this.$message.warning('璇烽�夋嫨閮ㄩ棬鑺傜偣锛�')
+        return;
+      }
+      this.mainData=this.mainData.filter(item=>{
+        return item.type!='鐢ㄦ埛缁�'
+      })
+      this.departCurrenRows.forEach((addItem,index)=>{
+        this.mainData.push({
+          type:'鐢ㄦ埛缁�',
+          id:addItem.id,
+          name:addItem.name,
+          oid:addItem.oid
+        })
+      })
+      this.departVisible = false;
+    },
+    //涓讳綋鍒楄〃琛岀偣鍑�
+    mainCurrentRowHandler(row){
+      this.mainCurrentRow=row;
+    },
+    //鎺堟潈涓讳綋鍒楄〃琛岀偣鍑�
+    authCurrentRowHandler(row){
+      this.authCurrentRow=row;
+    },
+    rightHandler() {
+      if(func.isEmptyObject(this.mainCurrentRow)){
+        this.$message.warning('璇烽�夋嫨鐢ㄦ埛銆佺敤鎴风粍銆佽鑹蹭俊鎭紒')
+        return;
+      }
+      let name='{' + this.mainCurrentRow.id + ', ' + this.mainCurrentRow.name + ', ';
+      if (this.mainCurrentRow.type == '鐢ㄦ埛') {
+        name+='user}';
+      } else if (this.mainCurrentRow.type == '瑙掕壊') {
+        name+='role}';
+      } else if (this.mainCurrentRow.type == '鐢ㄦ埛缁�') {
+        name+='userGroup}';
+      }
+      let canAdd = !this.authData.some(item => {
+        return item.name == name
+      })
+      if(canAdd) {
+        this.authData.push({
+          name: name
+        })
+        this.$refs.mainCrud.setCurrentRow();
+        this.mainCurrentRow={}
+      }else {
+        this.$message.warning('鎺堟潈涓讳綋淇℃伅閫夋嫨閲嶅锛�')
+      }
+    },
+    leftHandler() {
+      this.authData = this.authData.filter(item => {
+        return item.name != this.authCurrentRow.name
+      })
     },
     initFormData() {
       let formData = {
@@ -538,6 +774,7 @@
 ::v-deep {
   .el-radio ,.el-checkbox{
     margin-right: 30px;
+    margin-bottom: 10px;
   }
 }
 div{
@@ -547,5 +784,6 @@
   padding: 10px 6px;
   margin: 0;
   border: 1px solid #EBEEF5;
+  overflow: auto;
 }
 </style>

--
Gitblit v1.9.3