✨ feat: 部门选择组件添加快捷二次菜单

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

@@ -8,6 +8,11 @@
       placeholder="请选择组织部门"
       @select="handleDeptSelect"
     />
+    <el-button-group v-if="showQuickGroup">
+      <el-button v-for="child in firstChildList" :key="child.deptName" plain @click="quickSelect(child)">
+        {{ child.deptName }}
+      </el-button>
+    </el-button-group>
   </div>
 </template>
 
@@ -15,18 +20,25 @@
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import to from "@/utils/await-to.js";
-import { listDept} from "@/api/system/dept";
+import { listDept } from "@/api/system/dept";
 
 export default {
   name: "DeptTree",
   components: {
     Treeselect,
   },
+  props: {
+    showQuickGroup: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       deptId: "",
       // 部门树数据
       deptList: [],
+      firstChildList: [],
       normalizer(node) {
         return {
           id: node.deptId,
@@ -56,11 +68,14 @@ export default {
     //     this.$message.error("默认企业配置错误,请配置sys.user.defaultFactoryId");
     //   }
     // },
+    quickSelect(child) {
+      this.deptId = child.deptId;
+      this.$emit("deptChange", child);
+    },
     async initDeptList() {
       const [err, response] = await to(
         listDept({
           deptName: undefined,
-        
         })
       );
       if (err) {
@@ -71,7 +86,8 @@ export default {
       if (response.code === 200) {
         this.deptList = this.handleTree(response.data, "deptId");
         this.deptId = this.deptList[0].deptId;
-        this.$emit("deptChange",  this.deptList[0]);
+        this.firstChildList = this.deptList[0].children;
+        this.$emit("deptChange", this.deptList[0]);
       } else {
         console.error(response);
         this.$message.error(response.msg);
@@ -85,4 +101,14 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.dept-tree {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  .el-button-group {
+    margin-top: 5px;
+  }
+}
+</style>

ruoyi-ui/src/views/dataStatistics/realtime/search-bar.vue

@@ -1,24 +1,21 @@
 <template>
   <div class="data-monitor">
     <el-row :gutter="10">
-      <el-col :span="6" style="margin-top: 10px; margin-bottom: 10px">
-        <dept-tree @deptChange="handleDeptChange" />
+      <el-col :span="10" style="margin-top: 10px; margin-bottom: 10px">
+        <dept-tree @deptChange="handleDeptChange" :showQuickGroup="true" />
       </el-col>
       <el-col :span="6" style="margin-top: 10px; margin-bottom: 10px">
         <!-- 时间范围选择 -->
-        <el-date-picker v-model="dateValue" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
-          :default-time="['00:00:00', '23:59:59']" @change="handleDateChange">
+        <el-date-picker
+          v-model="dateValue"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="['00:00:00', '23:59:59']"
+          @change="handleDateChange"
+        >
         </el-date-picker>
       </el-col>
-      <el-col>
-        <el-radio-group v-model="deptId" @change="handleRadioDeptChange">
-  <el-radio-button :label="229">青岛港</el-radio-button>
-  <el-radio-button :label="230">日照港</el-radio-button>
-  <el-radio-button :label="231">烟台港</el-radio-button>
-  <el-radio-button  :label="232">渤海湾港</el-radio-button>
-</el-radio-group>
-
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -36,13 +33,6 @@ export default {
       // chooseDept:null,
       deptId: "",
       dateValue: [],
-      normalizer(node) {
-        return {
-          id: node.deptId,
-          label: node.deptName,
-          children: node.children,
-        };
-      },
     };
   },
   mounted() {
@@ -64,8 +54,8 @@ export default {
       ];
     },
     handleRadioDeptChange(value) {
-      this.deptId = value
-     this.emitChange();
+      this.deptId = value;
+      this.emitChange();
     },
     handleDeptChange(value) {
       this.deptId = value.deptId;