页面修改

src/components/common/tree.vue → src/components/common/select-tree.vue

 <template>
   <q-card style="width: 360px;">
     <q-input ref="selectTree" standout="bg-primary text-white" v-model="showMsg" :label="tipText"
-      @click.native="isShowSelect = !isShowSelect" />
-    <q-tree v-if="isShowSelect"
-      style="width:100%;height:250px;overflow-y: scroll;position:absolute;z-index:99999;background:#fff;border:1px solid rgba(0, 0, 0, 0.12);"
-      :nodes="treeData" :node-key="nodeKey" :label-key="labelKey" :children-key="childrenKey" tick-strategy="strict"
-      :default-expand-all="defaultExpandAll" no-connectors :ticked.sync="chooseArray">
+      @click.native="isShowSelect = !isShowSelect">
+      <template v-slot:append>
+        <q-btn round dense flat icon="search" />
+      </template>
+    </q-input>
+    <q-card style="width:100%;position:absolute;z-index:99999;background:#fff;border:1px solid rgba(0, 0, 0, 0.12);">
+      <q-btn-group push v-if="isShowSelect" :spread="true">
+        <q-btn push label="全选" @click="checkAll()" />
+        <q-btn push label="清空" @click="clearMsg()" />
+        <q-btn push label="确认" @click="getCheckValue()" />
+        <q-btn push label="关闭" @click="isShowSelect=false" />
+      </q-btn-group>
+      <q-tree style="height:250px;overflow-y: scroll;" v-if="isShowSelect" :nodes="treeData" :node-key="nodeKey"
+        :label-key="labelKey" :children-key="childrenKey" tick-strategy="strict" :default-expand-all="defaultExpandAll"
+        no-connectors :ticked.sync="chooseArray">
       </q-tree>
     </q-card>
+  </q-card>
 </template>
 <script>
   export default {
@@ -61,7 +72,7 @@
         },
         showMsg: "",
         chooseArray: [],
-        resultObj: {},
+        resultObj: "",
       }
     },
     watch: {
@@ -95,6 +106,26 @@
       this.setTreeCheckNode();
     },
     methods: {
+      //全选
+      checkAll() {
+        var tempArray = [];
+        var nodes = this.findTreeNode(this.treeData);
+        if (nodes && nodes.length > 0) {
+          nodes.forEach(item => {
+            tempArray.push(item.value)
+          });
+        }
+        this.chooseArray = tempArray;
+      },
+      //清空选中
+      clearMsg() {
+        this.chooseArray = [];
+      },
+      //返回选中的值
+      getCheckValue() {
+        this.isShowSelect = false;
+        this.$emit('getChild', this.resultObj);
+      },
       //设置下拉框选择
       setTreeCheckNode() {
         var that = this;
@@ -128,7 +159,6 @@
             this.showMsg = tempStr.substring(1, tempStr.length);
           }
         }
-        that.$emit('getChild', this.resultObj);
       },
       //获取所有节点
       findTreeNode(tree) {

src/components/system/role-form.vue

@@ -12,17 +12,20 @@
           <q-input filled stack-label maxlength="100" :dense="false" v-model="objOption.RoleIntro" ref="RoleIntro"
             class="col-6 q-pr-lg q-pb-lg" label="角色介绍" />
           <div class="col-12 q-pr-lg q-pb-lg q-pt-lg">
-            <q-toggle size="md" label="状态" color="primary" :false-value="1" :true-value="0"
-              v-model="objOption.Status" title="注意：关闭后，角色将无法正常使用." />
+            <q-toggle size="md" label="状态" color="primary" :false-value="1" :true-value="0" v-model="objOption.Status"
+              title="注意：关闭后，角色将无法正常使用." />
           </div>
         </div>
         <div class="text-caption q-mb-lg q-px-md text-grey-6">权限设置</div>
         <div class="row wrap">
-          <div class="q-pa-md q-gutter-sm">
+          <!-- <div class="q-pa-md q-gutter-sm">
             <q-tree :nodes="TreeMenuList" node-key="MenuId" label-key="MenuName" children-key="SubList"
               tick-strategy="leaf-filtered" default-expand-all :ticked.sync="checkMenuArray" no-connectors>
             </q-tree>
-          </div>
+          </div> -->
+          <select-tree v-if="TreeMenuList&&TreeMenuList.length>0" :treeData='TreeMenuList' :id.sync="returnString"
+            nodeKey="MenuId" :multiple="true" labelKey="MenuName" childrenKey="SubList" tipText="课程分类"
+            @getChild="getChild"></select-tree>
         </div>
       </q-card-section>
       <q-separator />
@@ -41,6 +44,7 @@
     queryRoleInfo,
     saveRoleInfo,
   } from '../../api/system/index'
+  import selectTree from '../common/select-tree'
   export default {
     props: {
       saveObj: {
@@ -48,6 +52,9 @@
         default: null
       }
     },
+    components: {
+      selectTree
+    },
     data() {
       return {
         persistent: true,
@@ -58,6 +65,7 @@
           RoleAuth: "", //角色权限
           Status: 0, //状态(0-正常,1-禁用)},
         },
+        returnString: "",
         optionTitle: "",
         //菜单列表
         TreeMenuList: [],
@@ -71,7 +79,9 @@
       this.initObj()
     },
     methods: {
-
+      getChild(obj) {
+        console.log("obj", obj);
+      },
       //获取菜单列表
       queryMenuList() {
         this.TreeMenuList = [];

src/pages/course/course.vue

@@ -58,7 +58,7 @@
     queryCourseCategoryTree,
   } from '../../api/course/index'
   import courseForm from '../../components/course/course-form'
-  import selectTree from '../../components/common/tree'
+  import selectTree from '../../components/common/select-tree'
   export default {
     meta: {
       title: "课程管理"