组织管理

src/assets/css/index.css

@@ -243,6 +243,7 @@ div {
 .el-dialog__header {
   border-bottom: 1px solid #edf0ff;
   padding: 16px;
+  margin-right: 0;
 }
 
 .el-dialog__title {
@@ -1518,10 +1519,6 @@ border-radius:8px;
 	color: #404a62;
   padding-left: 20px;
 }
-.name_btn {
-  color: #3759be;
-  cursor: pointer;
-}
 .fr {
   float: right;
 }
@@ -1539,6 +1536,17 @@ border-radius:8px;
   vertical-align: baseline;
   cursor: pointer;
 }
+/* 可点击文字颜色、指针样式 */
+.can_click_text {
+  cursor: pointer;
+  color: #3759be;
+}
+.can_click_text:hover {
+  color: #738bd2;
+}
+.can_click_text:active {
+  color: #2c4798;
+}
 
 .warning_info {
   background-color: #f7f7f9;

src/bg-ui/bg-info.vue

@@ -21,6 +21,7 @@
           >
           <span v-if="item.state" :style="{color: stateColor[item.state]}"> <span class="state-dot" :style="{backgroundColor: stateColor[item.state]}"></span>{{item.value}}</span>
            <span v-else-if="item.secret">{{secret(item.value)}}</span>
+           <span v-else-if="item.callback"  @click.stop="item.callback && item.callback()" class="can_click_text">{{item.value}}</span>
           <span v-else>{{ item.value }}</span>
           </span>
           <a

src/bg-ui/bg-table-btns.vue

 <template>
   <div class="bg-table-btns">
     <bg-table-btn
+      class="can_click_text"
       v-for="(item, index) in curOperations"
       :key="index"
       :disabled="isDisabled(item)"

src/bg-ui/index.scss

@@ -808,6 +808,10 @@ a {
   &.disabled {
     cursor: not-allowed;
     color: #a9b1c7;
+    &:hover,
+    &:active {
+      color: #a9b1c7;
+    }
   }
 
   & + .bg-table-btn {
@@ -1805,6 +1809,7 @@ a {
     .el-upload__tip {
       // display: none;
       cursor: not-allowed;
+      line-height: 18px;
     }
   }
 

src/components/error-table.vue

@@ -34,8 +34,8 @@
         </template>
   
         <template v-slot:action="{ row,index }">
-          <bg-table-btn :disabled="disabled||acDisable" :click="()=>{addParam(index)}">增加</bg-table-btn>
-          <bg-table-btn :disabled="disabled||acDisable" :click="()=>{removeParam(row, index)}">
+          <bg-table-btn class="can_click_btn" :disabled="disabled||acDisable" :click="()=>{addParam(index)}">增加</bg-table-btn>
+          <bg-table-btn class="can_click_btn" :disabled="disabled||acDisable" :click="()=>{removeParam(row, index)}">
               删除
           </bg-table-btn>
         </template>

src/components/input-object-table.vue

@@ -94,8 +94,8 @@
         </template>
 
         <template v-slot:action="{ row }">
-          <bg-table-btn :disabled="disabled" :click="()=>{addInputConf(row)}"> 增加 </bg-table-btn>
-          <bg-table-btn :disabled="disabled" :click="()=>{removeInputConf(row)}"> 删除 </bg-table-btn>
+          <bg-table-btn  class="can_click_btn" :disabled="disabled" :click="()=>{addInputConf(row)}"> 增加 </bg-table-btn>
+          <bg-table-btn  class="can_click_btn" :disabled="disabled" :click="()=>{removeInputConf(row)}"> 删除 </bg-table-btn>
         </template>
       </bg-table-pro>
     </el-form>

src/page/main/config/dict/index.vue

@@ -9,7 +9,7 @@
     <div class="flex_row">
       <div class="flex_left">
         <div class="box">
-          <el-input class="type-input" v-model="typeKeyword" @input="searchType" placeholder="请输入内容"></el-input>
+          <el-input class="type-input" v-model="typeKeyword" @input="searchType" :prefix-icon="Search" placeholder="请输入搜索内容"></el-input>
           
           <div class="type_station bg-scroll">
             <div class="type-box" :class="{'current-type':nodeClassifyId==item.classify_id}" @click="nodeClick(item)" v-for="(item,index) in typeList" :key="'type'+index+200">
@@ -164,6 +164,7 @@ import { reactive, ref,onBeforeMount,toRefs,computed, watch, nextTick } from 'vu
 import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus'
 import axios from '../../../../request/http.js'
+import { Search } from '@element-plus/icons-vue'
 const bgForm = ref(null)
 const state = reactive({
   bgForm,

src/page/main/develop/account/index.vue

@@ -57,14 +57,14 @@
                         重置密码
                     </el-button>
                     <span class="header_info">已选择<span style="color: #202531;font-weight: bold">{{selected.length}}</span>项</span>
-                    <span class="header_info name_btn" @click="clearSelected">清空</span>
+                    <span class="header_info can_click_text" @click="clearSelected">清空</span>
                   </div>
                   </template>
                 </bg-filter-group>
                 <div class="table_container apaas_scroll">
                   <bg-table ref="dataTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true" :select="true" @selectAc="selectRows">
                     <template v-slot:business_name="{ row }">
-                      <span @click="goDetail(row)" class="name_btn">
+                      <span @click="goDetail(row)" class="can_click_text">
                         {{ row.business_name }}
                       </span>
                     </template>
@@ -72,13 +72,13 @@
                       <bg-switch @click="stateChange(row)" :labels="['否','是']" :values="[0,1]" v-model="row.state"></bg-switch>
                     </template>
                     <template v-slot:action="{ row }">
-                      <bg-table-btn class="btn" @click="editAccount(row.id)">
+                      <bg-table-btn class="can_click_text" @click="editAccount(row.id)">
                         编辑
                       </bg-table-btn>
-                      <bg-table-btn class="btn" @click="editPsdAccount(row)">
+                      <bg-table-btn class="can_click_text" @click="editPsdAccount(row)">
                         修改密码
                       </bg-table-btn>
-                      <bg-table-btn class="btn"  @click="deleteAccount(row)">
+                      <bg-table-btn class="can_click_text"  @click="deleteAccount(row)">
                         删除
                       </bg-table-btn>
                     </template>

src/page/main/develop/menu/index.vue

@@ -55,7 +55,7 @@
                   <div class="action" @click="fileAction(1,selectData,selectParentData)">
                     新建本级
                   </div>
-                  <div class="action" :class="{'disable':selectData && selectData.menu_type == 2}" @click="fileAction(2,selectData,selectParentData,selectData.menu_type == 2)">
+                  <div class="action" @click="fileAction(2,selectData,selectParentData)">
                     新建下级
                   </div>
                   <div class="action" @click="fileAction(3,selectData,selectParentData)">
@@ -217,6 +217,15 @@ const handleNodeClick = (data) => {
   state.selectData = data
   menuFormRef.value.setForm(state.selectData)
   closeAction()
+  if (menuFormRef) {
+    nextTick().then(() => {
+      menuFormRef.value.menuRef.validate(valid => {
+        if (!valid) {
+          menuFormRef.value.menuRef.clearValidate()
+        }
+      })
+    })
+  } // 清除表单验证
 } // 菜单树节点点击
 
 const filterNode = (val,data) => {
@@ -237,6 +246,7 @@ const fileAction = (val,data,parent,disabled=false) => {
       state: 1,
       menu_url: "",
       menu_logo: "",
+      level: data.level
     }
     state.menuTree.insertAfter(newChild,parent? parent.Child[parent.Child.length-1] : state.data[state.data.length -1])
     state.menuTree && state.menuTree.setCurrentKey(newChild.menu_id);
@@ -250,11 +260,12 @@ const fileAction = (val,data,parent,disabled=false) => {
     let newChild = {
       menu_name: "新菜单",
       menu_id: 'new' + state.newMenuId,
-      menu_type: 0,
+      menu_type: data.menu_type == 0 ? 0 : data.menu_type == 1 ? 1 : 2,
       dict_group_id: "",
       state: 1,
       menu_url: "",
       menu_logo: "",
+      p_menu_type: data.menu_type
     }
     state.menuTree.append(newChild,data)
     state.menuTree && state.menuTree.setCurrentKey(newChild.menu_id);

src/page/main/develop/menu/menu-form.vue

@@ -11,14 +11,14 @@
     <el-form-item label="菜单名称" prop="menu_name">
       <el-input v-model="menuForm.menu_name" show-word-limit maxlength="8" placeholder="请输入菜单名称" />
     </el-form-item>
-    <el-form-item label="类型" prop="menu_type">
+    <el-form-item label="类型" prop="menu_type" v-if="!topLevel">
       <el-radio-group v-model="menuForm.menu_type" :disabled="radioDisabled">
-        <el-radio :label="0">目录</el-radio>
-        <el-radio :label="1">菜单</el-radio>
+        <el-radio :label="0" :disabled="typeDisFlag != 0">目录</el-radio>
+        <el-radio :label="1" :disabled="typeDisFlag == 2">菜单</el-radio>
         <el-radio :label="2">子页面</el-radio>
       </el-radio-group>
     </el-form-item>
-    <el-form-item label="分组" prop="dict_group_id" v-if="menuForm.menu_type == 0">
+    <el-form-item label="分组" prop="dict_group_id" v-if="menuForm.menu_type == 0 && !topLevel">
       <el-select v-model="menuForm.dict_group_id" placeholder="请选择分组">
         <el-option
           v-for="item in groupList"
@@ -39,10 +39,10 @@
         inactive-text="否"
       />
     </el-form-item>
-    <el-form-item label="菜单路径" prop="menu_url">
+    <el-form-item label="菜单路径" :prop="topLevel ? '' : 'menu_url'">
       <el-input v-model="menuForm.menu_url" placeholder="请输入菜单路径" />
     </el-form-item>
-    <el-form-item label="菜单图标" prop="menu_logo" v-if="menuForm.menu_type !== 2">
+    <el-form-item label="菜单图标" prop="menu_logo">
       <div class="iconBox" :style="iconFlag ? {'border-color':'#2b4695'} : {} " @click="openIconbox">
         <div>
           <span>
@@ -129,7 +129,7 @@ const state = reactive({
       { required: true, message: '请选择菜单分组', trigger: 'change' },
     ],
     menu_url: [
-    { required: true, message: '请输入菜单路径', trigger: 'blur' },
+      { required: true, message: '请输入菜单路径', trigger: 'blur' },
     ]
   },
   groupList: [],
@@ -139,6 +139,8 @@ const state = reactive({
   showIconArr: [], // 展示的图标
   timer: null,
   radioDisabled: false,
+  topLevel: false,
+  typeDisFlag: null,
 })
 
 const getGroupList = () => {
@@ -180,6 +182,13 @@ const searchIcon = () => {
 
 const setForm = (data) => {
   console.log(data)
+  if (data.level && data.level == 1) {
+    state.topLevel = true
+  }else {
+    state.topLevel = false
+  }
+  state.typeDisFlag = data.p_menu_type
+  console.log(state.topLevel)
   if (data.id) { // 编辑状态
     state.radioDisabled = true
   }else {
@@ -217,6 +226,8 @@ const {
   showIconArr,
   icon_search,
   radioDisabled,
+  topLevel,
+  typeDisFlag,
 } = toRefs(state)
 
 defineExpose({ setForm , menuForm, menuRef })

src/page/main/system/organization/index.vue

@@ -77,7 +77,7 @@
                 <div class="table_container apaas_scroll">
                   <bg-table ref="dataTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true" :select="true" @selectAc="selectRows">
                     <template v-slot:system_account="{ row }">
-                      <span @click="goDetail(row)" class="name_btn">
+                      <span @click="goDetail(row)" class="can_click_text">
                         {{ row.system_account }}
                       </span>
                     </template>
@@ -85,13 +85,13 @@
                       <bg-switch @click="stateChange(row)" :labels="['否','是']" :values="[0,1]" v-model="row.state"></bg-switch>
                     </template>
                     <template v-slot:action="{ row }">
-                      <bg-table-btn @click="editAccount(row)" class="btn">
+                      <bg-table-btn @click="editAccount(row)" class="can_click_text">
                         编辑
                       </bg-table-btn>
-                      <bg-table-btn @click="editPsdAccount(row)" class="btn">
+                      <bg-table-btn @click="editPsdAccount(row)" class="can_click_text">
                         修改密码
                       </bg-table-btn>
-                      <bg-table-btn @click="deleteAccount(row)" class="btn">
+                      <bg-table-btn @click="deleteAccount(row)" class="can_click_text">
                         删除
                       </bg-table-btn>
                     </template>
@@ -271,11 +271,21 @@ import tree from './tree.vue';
 import directoryForm from './directory-form.vue';
 import orgForm from './org-form.vue';
 import CryptoJS from "crypto-js"; 
+import { downloadFileFormatNew } from '@/services/helper'
 
   const { proxy } = getCurrentInstance()
   const { $axios,$message } = proxy
   
   const dataTable = ref(null);
+  const toOrgDetail = () => {
+    router.push({
+        path: "/system/organization/org-detail",
+        query: {
+          id: selectTreeData.value.organization_id
+        }
+       
+      })
+  }
   const baseInfo = reactive(
     [
     {
@@ -291,6 +301,7 @@ import CryptoJS from "crypto-js";
     {
       name: "机构名称",
       value: "",
+      callback: toOrgDetail,
       nameWidth: 130
     },
     {
@@ -536,7 +547,7 @@ import CryptoJS from "crypto-js";
         name: data.name,
         organization_code: data.organization_code,
         description: data.description,
-        attachment:  data.attachment && data.attachment.length > 0 ? data.attachment[0].url : '',
+        attachment:  data.attachment && data.attachment.length > 0 ? data.attachment.map(item => item.url).join(',') : '',
         data_type: 1
       }
       $axios.post(`/apaas/system/v5/org/add`, params)
@@ -555,7 +566,7 @@ import CryptoJS from "crypto-js";
         name: data.name,
         organization_code: data.organization_code,
         description: data.description,
-        attachment:  data.attachment && data.attachment.length > 0 ? data.attachment[0].url : '',
+        attachment:  data.attachment && data.attachment.length > 0 ? data.attachment.map(item => item.url).join(',') : '',
         data_type: 1
       }
       $axios.put(`/apaas/system/v5/org/${selectTreeData.value.id}`, params)
@@ -618,7 +629,7 @@ import CryptoJS from "crypto-js";
                  level: data.data.value.p_organization_id ? false : true,
                  organization_code: data.data.value.organization_code,
                  description: data.data.value.description,
-                 attachment: [{url: data.data.value.attachment}]
+                 attachment: data.data.value.attachment.split(',').map(i => {return {name: downloadFileFormatNew(i),url: i}})
                  });
             }else if(data.action === 'create') {
               orgFormRef.value.setForm({p_organization_id: data.data.value.organization_id});
@@ -867,6 +878,8 @@ import CryptoJS from "crypto-js";
     dataTable.value.clearSelection();
   }
 
+  
+
   onBeforeMount(() => {
    
   })
@@ -896,7 +909,7 @@ import CryptoJS from "crypto-js";
 .tree {
   overflow: auto;
   height: calc(100% - 65px);
-  padding: 5px;
+  /* padding: 5px; */
 }
 .tree :deep() .el-tree-node>.el-tree-node__children {
   overflow: unset;

src/page/main/system/organization/org-detail/index.vue

@@ -21,25 +21,11 @@
                     <div class="org_file info_box">
                       <div class="pl-1">组织附件</div>
                       <div>
-                        <div class="file_item pl-1">
-                          <span><bg-icon  style="font-size: 24px" icon="#bg-ic-c-file-doc"></bg-icon></span>
-                          <span class="file_name">xxxxxxx协议.doc</span>
+                        <div class="file_item pl-1" v-for="(item, index) in fileList" :key="'file_'+index">
+                          <span><bg-icon  style="font-size: 24px" :icon="'#bg-ic-'+formatFile(item)"></bg-icon></span>
+                          <span class="file_name">{{downloadFileFormatNew(item)}}</span>
                           <span class="fr download_btn">
-                            <el-button type="primary" @click="downloadFile"><bg-icon  icon="#bg-ic-to-bottom"></bg-icon>下载</el-button>
-                          </span>
-                        </div>
-                        <div class="file_item pl-1">
-                          <span><bg-icon  style="font-size: 24px" icon="#bg-ic-c-file-zip"></bg-icon></span>
-                          <span class="file_name">xxxxxxx协议.zip</span>
-                          <span class="fr download_btn">
-                            <el-button type="primary"><bg-icon  icon="#bg-ic-to-bottom"></bg-icon>下载</el-button>
-                          </span>
-                        </div>
-                        <div class="file_item pl-1">
-                          <span><bg-icon  style="font-size: 24px" icon="#bg-ic-c-file-image"></bg-icon></span>
-                          <span class="file_name">xxxxxxx协议.jpg</span>
-                          <span class="fr download_btn">
-                            <el-button type="primary"><bg-icon  icon="#bg-ic-to-bottom"></bg-icon>下载</el-button>
+                            <el-button type="primary" @click="downloadFile(item)"><bg-icon  icon="#bg-ic-to-bottom"></bg-icon>下载</el-button>
                           </span>
                         </div>
                       </div>
@@ -58,9 +44,9 @@
                       </bg-table>
                       <div class="pagination_box">
                      <bg-pagination
-                        :page="1"
-                        :size="10"
-                        :total="100"
+                        :page="filter.page"
+                        :size="filter.limit"
+                        :total="tableTotal"
                         @change-page="changePage"
                         @change-size="changeSize"
                       >
@@ -76,33 +62,37 @@
 import { reactive, toRefs, ref, } from '@vue/reactivity'
 import { getCurrentInstance } from 'vue'
 import { computed, onBeforeMount } from '@vue/runtime-core'
-import { useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
+import { downloadFileFormatNew } from '@/services/helper'
+const { proxy } = getCurrentInstance()
+const { $axios,$message } = proxy
+const route = useRoute();
 
 const baseInfo = reactive(
     [
     {
       name: "机构名称",
-      value: "大数据局",
+      value: "",
       nameWidth: 130
     },
     {
       name: "组织机构代码",
-      value: "00000001",
+      value: "",
       nameWidth: 130
     },
     {
       name: "组织管理员数量",
-      value: "15",
+      value: "",
       nameWidth: 130
     },
     {
       name: "业务系统数量",
-      value: "10",
+      value: "",
       nameWidth: 130
     },
     {
       name: "组织描述",
-      value: "组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述组织描述",
+      value: "",
       nameWidth: 130
     },
   ])
@@ -110,48 +100,100 @@ const baseInfo = reactive(
   const headers = reactive([
         {
           label: "业务系统名称",
-          prop: "name",
+          prop: "business_name",
         },
         {
           label: "是否启用",
-          prop: "is_use",
+          prop: "state",
         },
         {
           label: "业务系统账号",
-          prop: "account",
+          prop: "system_account",
         },
       ])
  
-  const tableRows = reactive([
-    {name: '大数据处理系统',is_use: "是",account: "admin"},
-    {name: '大数据处理系统',is_use: "是",account: "admin"},
-    // {name: '大数据处理系统',is_use: "是",account: "admin"},
-    // {name: '大数据处理系统',is_use: "是",account: "admin"},
-    // {name: '大数据处理系统',is_use: "是",account: "admin"},
-    // {name: '大数据处理系统',is_use: "是",account: "admin"},
-    // {name: '大数据处理系统',is_use: "是",account: "admin"},
-    // {name: '大数据处理系统',is_use: "是",account: "admin"},
-    // {name: '大数据处理系统',is_use: "是",account: "admin"},
-    // {name: '大数据处理系统',is_use: "是",account: "admin"},
-    // {name: '大数据处理系统',is_use: "是",account: "admin"},
-    // {name: '大数据处理系统',is_use: "是",account: "admin"},
-    
-  ])
+  const tableRows = ref([])
+  const fileList = ref([])
+  const filter = reactive({
+        page: 1,
+        limit: 10,
+      });
+  const tableTotal = ref(0);
 
   const changeSize = (size) => {
+    filter.limit = size;
+    changePage(1)
+  }
 
+  const changePage = (page) => {
+    filter.page = page;
+    getSystemInfo();
   }
 
-  const changePage = (size) => {
+  const downloadFile = (data) => {
+    const a = document.createElement("a"); // 创建a标签
+      a.setAttribute("download", ""); // download属性
+      a.setAttribute("href", data); // href链接
+      a.click(); // 自执行点击事件
+  }
 
+  const formatFile = (url) => {
+    const file = url.split('.')[1];
+    let icon = ''
+    if(('docx').indexOf(file) !== -1) {
+      icon = 'c-file-doc'
+    }else if(('xlsx').indexOf(file) !== -1) {
+      icon = 'c-file-xlsx'
+    }else if(('pdf').indexOf(file) !== -1) {
+      icon = 'c-file-pdf'
+    }else if(('txt').indexOf(file) !== -1) {
+      icon = 'c-file-txt'
+    }else if(('zip').indexOf(file) !== -1) {
+      icon = 'c-file-zip'
+    }else if(('jpg,png').indexOf(file) !== -1) {
+      icon = 'c-file-image'
+    }else {
+      icon = 'txt'
+    }
+    return icon;
   }
 
-  const downloadFile = (data) => {
+  const getDetail = () => {
+      $axios.get(`/apaas/system/v5/org/detail?organization_id=${route.query.id}&key_word=&state=&limit=&page=&data_type=1`)
+                  .then((res) => {
+                  if (res.data.code == 200) {
+                      const detail = res.data.data.org_info;
+                      baseInfo[0].value = detail.name;
+                      baseInfo[1].value = detail.organization_code;
+                      baseInfo[2].value = detail.org_admin_number;
+                      baseInfo[3].value = detail.business_system_number;
+                      baseInfo[4].value = detail.description;
+                      fileList.value = detail.attachment ? detail.attachment.split(',') : [];
+                  }else {
+                      $message.error(res.data.msg)
+                  }
+              })
+  }
 
+  const getSystemInfo = () => {
+    console.log(11111111)
+    const params = {...filter,organization_id: route.query.id}
+    $axios.get(`/apaas/system/v5/org/business/msg`,{params})
+            .then((res) => {
+            if (res.data.code == 200) {
+              tableRows.value = res.data.data || [];
+              tableTotal.value = res.data.total;
+            }else {
+                $message.error(res.data.msg)
+            }
+        })
   }
 
   onBeforeMount(() => {
-     
+     if(route.query.id) {
+        getDetail()
+        getSystemInfo()
+    }
  })
 </script>
 
@@ -187,7 +229,7 @@ const baseInfo = reactive(
     margin-bottom: 40px;
 }
 .img_box {
-    width: 120px;
+    width: 120px\;
 }
 .info_box {
     width: 60%;
@@ -228,5 +270,12 @@ const baseInfo = reactive(
   line-height: 40px;
   padding-top: 5px;
 }
+.bg-pagination {
+  margin-top: 0px;
+}
+.info_content :deep() .bg-table .empty_container {
+  height: 160px;
+  padding-top: 25px;
+}
 
 </style>
\ No newline at end of file

src/page/main/system/organization/org-form.vue

@@ -23,7 +23,9 @@
       <el-input type="textarea" :rows="3" v-model="orgForm.description" />
     </el-form-item>
     <el-form-item label="组织附件" prop="logo">
-       <bg-upload v-model="orgForm.attachment" customTips>
+       <bg-upload v-model="orgForm.attachment" customTips :limit="3" 
+                  :fileTypes="['doc','docx','xls','xlsx','pdf','jpg','jpeg','png','zip','rar']" 
+                  :otherInfo="'最多可上传三个附件，可上传zip，rar，doc，docx，xlsx，xls，png，jpg，可上传营业执照和相关协议文件等'">
           <span>将文件拖到此处，或 点击上传</span>
         </bg-upload>
     </el-form-item>

src/page/main/system/organization/tree.vue

@@ -239,13 +239,14 @@ import { useRouter } from 'vue-router';
   padding: 8px 0;
   background-color: var(--el-tree-node-hover-bg-color);
 }
+
 .label-text:hover {
   padding: 8px 0;
   background-color: var(--el-tree-node-hover-bg-color);
 }
 .is_active {
   padding: 8px 0;
-  background-color: var(--el-tree-node-hover-bg-color);
+  background-color: var(--el-color-primary-light-9);
 }
 
 .custom_tree_node {
@@ -296,4 +297,8 @@ import { useRouter } from 'vue-router';
   z-index: 9;
 }
 
+.file-tree :deep().el-tree-node__content{
+  height: 36px!important;
+}
+
 </style>
\ No newline at end of file

src/page/main/system/role/add/role_form.vue

@@ -5,7 +5,7 @@
       <el-breadcrumb separator="/">
         <el-breadcrumb-item> 系统管理 </el-breadcrumb-item>
         <el-breadcrumb-item to="/system/role"> 角色管理 </el-breadcrumb-item>
-        <el-breadcrumb-item> 新建 </el-breadcrumb-item>
+        <el-breadcrumb-item> {{route.query.id ? "编辑" : "新建"}} </el-breadcrumb-item>
       </el-breadcrumb>
     </div>
     <div class="main_container">
@@ -95,7 +95,7 @@ const roleState = reactive({
     data_purview: 3,
     state: 1,
     permission_arr: [],
-  },
+  }, // 表单项
   rules: {
     role_name: [
       { required: true, message: "请输入角色名称", trigger: "blur" },
@@ -112,13 +112,13 @@ const roleState = reactive({
     permission_arr: [
       { required: true, type: "array", validator: checkMenuLength, trigger: "change" }
     ]
-  },
+  }, // 表单校验规则
   defaultProps: {
     name: 'menu_name',
     value: 'id',
     children: 'Child',
-  },
-  permissionData: [],
+  }, // 菜单框默认配置
+  permissionData: [], // 菜单数据
 })
 const getMenuTree = () => {
   axios
@@ -130,22 +130,37 @@ const getMenuTree = () => {
         ElMessage.error(res.data.data)
       }
     })
-}
+} // 获取菜单数据
 
 const changeMenu = (val) => {
   roleState.formData.permission_arr = val
-}
+} // 修改选中的菜单
+
 const getRoleDetail = () => {
   axios
     .get(`/apaas/system/v5/role/detail/${route.query.id}`)
     .then((res) => {
       if (res.data.code == 200) {
-        console.log(res.data.data)
+        let { role_name, role_desc, data_purview, state, menus } = res.data.data
+        let permission_arr = []
+        if (menus && menus.length > 0) {
+          menus.forEach(e => {
+            permission_arr.push(e.id)
+          })
+        }
+        roleState.formData = {
+          role_name,
+          role_desc,
+          data_purview,
+          state,
+          permission_arr:[...permission_arr]
+        }
+        console.log(roleState.formData.permission_arr)
       }else {
         ElMessage.error(res.data.data)
       }
     })
-}
+} // 获取角色详情
 
 const saveRole = () => {
   roleState.form.validate(valid => {
@@ -169,7 +184,7 @@ const saveRole = () => {
             }
           })
       }else { // 编辑
-        params.id = route.query.id
+        params.id = +route.query.id
         axios
           .post(`/apaas/system/v5/role/update`,params)
           .then((res) => {
@@ -183,10 +198,12 @@ const saveRole = () => {
       }
     }
   })
-}
+} // 新增或编辑角色的保存
+
 onBeforeMount(() => {
   getMenuTree()
   if (route.query.id) {
+    // 有id表示是编辑，请求详情，回显
     getRoleDetail()
   }
 })

src/page/main/system/role/index.vue

@@ -22,20 +22,26 @@
             <el-button class="register_btn" type="primary" @click="deleteRows">
                 批量删除
             </el-button>
+            <div class="select_text">
+              <span>已选择</span>
+              <span class="num">{{selection.length}}</span>
+              <span>项</span>
+              <span class="can_click_text" @click="clearSelection">清空</span>
+            </div>
           </div>
         </template>
       </bg-filter-group>
       <div class="table_container">
         <div class="table bg-scroll">
           <bg-table 
-            ref="bgTable" 
+            ref="Bgtable" 
             :headers="headers" 
             :rows="tableRows" 
             :select="true" 
             :stripe="true" 
             canEdit
             canEditFlag='state' 
-            @select="selectRows"
+            @selectAc="selectRows"
           >
             <template v-slot:state="{ row }">
               <bg-switch 
@@ -50,13 +56,13 @@
               {{ row.created_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
             </template>
             <template v-slot:action="{ row }">
-              <bg-table-btn class="btn" :click="()=>{edit_row(row)}" :disabled="row.state == 1 || row.role_type == 1">
+              <bg-table-btn class="can_click_text" :click="()=>{edit_row(row)}" :disabled="row.state == 1 || row.role_type == 1">
                 编辑
               </bg-table-btn>
-              <bg-table-btn class="btn" :click="()=>{edit_row(row)}" :disabled="row.role_type == 1">
+              <bg-table-btn class="can_click_text" :click="()=>{distribute_user(row)}" :disabled="row.role_type == 1">
                 分配用户
               </bg-table-btn>
-              <bg-table-btn class="btn" :click="()=>{delete_row(row)}" :disabled="row.state == 1 || row.role_type == 1">
+              <bg-table-btn class="can_click_text" :click="()=>{delete_row(row)}" :disabled="row.state == 1 || row.role_type == 1">
                 删除
               </bg-table-btn>
             </template>
@@ -72,7 +78,7 @@
         </bg-pagination>
       </div>
     </div>
-     <!-- 删除弹窗 -->
+    <!-- 删除弹窗 -->
     <el-dialog
       custom-class="dialog_box"
       title="提示"
@@ -84,7 +90,7 @@
         }
       "
     >
-      <div>确定要选中的数据吗？</div>
+      <div>确定要删除选中的数据吗？</div>
       <template v-slot:footer>
         <div class="apaas_button">
           <el-button type="default" @click="delDialog = false">取 消</el-button>
@@ -92,22 +98,91 @@
         </div>
       </template>
     </el-dialog>
+    <!-- 分配用户 -->
+    <el-dialog
+      custom-class="distribute_dialog"
+      title="分配用户"
+      v-model="distributeDialog"
+      width="1062px"
+      :before-close="
+        () => {
+          distributeDialog = false;
+        }
+      "
+    >
+      <div class="distribute_box">
+        <div class="topFilter">
+          <div class="left">
+            <span>已选择</span>
+            <span class="num">0</span>
+            <span>项</span>
+            <span class="can_click_text" @click="clearSelection">清空</span>
+          </div>
+          <div class="right">
+            <el-select
+              v-model="userFilter.type"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option
+                v-for="(item, index) in userTypeList"
+                :key="'pushOptions' + index"
+                :label="item.name"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <el-select
+              v-model="userFilter.org"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option
+                v-for="(item, index) in orgList"
+                :key="'pushOptions' + index"
+                :label="item.name"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <el-input
+              v-model="userFilter.search"
+              placeholder="请输入内容"
+              style="width: 200px"
+              :prefix-icon="Search"
+            />
+            <el-button type="primary" @click="distribute">查询</el-button>
+            <el-button type="default" @click="distributeDialog = false">重置</el-button>
+          </div>
+        </div>
+        <div class="table_box">
+
+        </div>
+      </div>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="distributeDialog = false">取 消</el-button>
+          <el-button type="primary" @click="distribute">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import { Search } from '@element-plus/icons-vue'
 import { reactive, toRefs, ref, onBeforeMount, nextTick } from 'vue'
 import axios from '../../../../request/http.js'
 import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
 const router = useRouter()
+const Bgtable = ref(null)
 const state = reactive({
   filter: {
     page: 1,
     limit: 10,
     search: "",
-  },
-  
+  }, 
   headers: [
     {
       label: "角色名",
@@ -153,6 +228,35 @@ const state = reactive({
   selection: [],
   delDialog: false,
   delType: 1, // 删除类型  1-单条删除 2-批量删除
+  distributeDialog: false, // 分配用户弹窗
+})
+const userState = reactive({
+  userFilter: {
+    type: "",
+    org: "",
+    search: "",
+  },
+  userTypeList: [
+    {
+      name: "全部类型",
+      value: ""
+    },
+    {
+      name: "业务系统账号",
+      value: 1
+    },
+    {
+      name: "组织管理员账号",
+      value: 2
+    },
+    {
+      name: "平台用户账号",
+      value: 3
+    },
+  ],
+  orgList: [
+
+  ]
 })
 const getRoleRows = () => {
   let params = {...state.filter}
@@ -196,8 +300,12 @@ const changeUseRow = (row) => {
     })
 } // 更改启用禁用状态
 
-const selectRows = (rows) => {
-  state.selection = rows
+const selectRows = (data) => {
+  state.selection = data.selection
+} // 表格多选
+
+const clearSelection = () => {
+  Bgtable.value.clearSelection()
 }
 
 const register = () => {
@@ -215,6 +323,14 @@ const edit_row = (row) => {
   })
 } // 编辑角色
 
+const distribute_user = (row) => {
+  state.distributeDialog = true
+}
+
+const distribute = () => {
+  state.distributeDialog = false
+}
+
 const delete_row = (row) => {
   state.actionRow = row
   state.delType = 1
@@ -242,7 +358,6 @@ const deleteData = () => {
   let params = {
     ids: [...ids]
   }
-  console.log(params)
   axios
     .delete(`/apaas/system/v5/role/delete`,{data: {ids:[...ids]}})
     .then((res) => {
@@ -265,7 +380,15 @@ const {
   tableRows,
   tableTotal,
   delDialog,
+  selection,
+  distributeDialog,
 } = toRefs(state)
+
+const {
+  userFilter,
+  userTypeList,
+  orgList,
+} =toRefs(userState)
 </script>
 
 <style lang="scss" scoped>
@@ -297,7 +420,66 @@ const {
         max-height: calc(100% - 64px);
       }
     }
+    .select_text {
+      display: inline-block;
+      margin-left: 40px;
+      font-size: 14px;
+      color: #404a62;
+      .num {
+        color: #202531;
+        font-weight: 700;
+        margin: 0 3px;
+      }
+      .can_click_text {
+        margin-left: 24px;
+      }
+    }
+  }
+  .distribute_dialog {
+    .distribute_box {
+      width: 100%;
+      height: 626px;
+      .topFilter {
+        height: 68px;
+        padding: 16px;
+        border-bottom: 1px solid #e6e9ef;
+        display: flex;
+        text-align: left;
+        font-size: 14px;
+        align-items: center;
+        .left {
+          width: 240px;
+          padding-left: 15px;
+          color: #404a62;
+          .num {
+            color: #202531;
+            font-weight: 700;
+            margin: 0 3px;
+          }
+          .can_click_text {
+            margin-left: 24px;
+          }
+        }
+        .right {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .el-button {
+            margin: 0;
+            width: 64px;
+          }
+        }
+      }
+    }
   }
 }
-
+</style>
+<style>
+.distribute_dialog .el-dialog__footer {
+  padding: 16px!important;    
+}
+.distribute_dialog .el-dialog__body {
+  padding: 0px!important;    
+}
 </style>
\ No newline at end of file