学习资料代码提交

src/views/system/materials/index.vue

@@ -1,6 +1,39 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-row :gutter="20">
+      <!--机构数据-->
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input
+            v-model="deptName"
+            placeholder="请输入机构名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="tree-container">
+          <div style="margin-bottom: 10px;">
+            <el-checkbox v-model="queryParams.checkSub" @change="changeCheckBox">是否关联下级机构</el-checkbox>
+          </div>
+          <el-tree
+            :data="deptOptions"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="tree"
+            node-key="id"
+            :default-expanded-keys="defaultKeys"
+            :default-checked-keys="defaultKeys"
+            @node-click="handleNodeClick"
+          />
+        </div>
+      </el-col>
+      <!--用户数据-->
+      <el-col :span="20" :xs="24">
+
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="资料类型" prop="knowledgeId">
         <el-input
           v-model="queryParams.knowledgeId"
@@ -117,7 +150,8 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-
+      </el-col>
+    </el-row>
     <!-- 添加或修改学习资料对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -147,7 +181,10 @@
 
 <script>
 import { listMaterials, getMaterials, delMaterials, addMaterials, updateMaterials } from "@/api/system/materials";
-
+import { deptTreeSelect } from "@/api/system/public";
+import { getToken } from "@/utils/auth";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
   name: "Materials",
   data() {
@@ -170,6 +207,16 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      // 机构树选项
+      deptOptions: undefined,
+      // 机构名称
+      deptName: undefined,
+      //是否关联下级
+      checked: false,
+      defaultProps: {
+        children: "children",
+        label: "name"
+      },
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -188,10 +235,22 @@ export default {
       form: {},
       // 表单校验
       rules: {
-      }
+      },
+      //默认选中节点
+      defaultKeys:[]
     };
   },
+  watch: {
+    // 根据名称筛选机构树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
   created() {
+    this.getDeptTree();
+    this.getConfigKey("sys.user.initPassword").then(response => {
+      this.initPassword = response.msg;
+    });
     this.getList();
   },
   methods: {
@@ -204,6 +263,10 @@ export default {
         this.loading = false;
       });
     },
+    /** 下穿状态改变*/
+    changeCheckBox(){
+      this.getList();
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -229,6 +292,26 @@ export default {
       };
       this.resetForm("form");
     },
+    /** 查询机构下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then(response => {
+        this.deptOptions = response.data;
+        console.log( this.deptOptions,' this.deptOptions')
+        this.defaultKeys.push(response.data[0].id);
+        this.queryParams.orgId = response.data[0].id;
+        this.handleQuery();
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.orgId = data.id;
+      this.handleQuery();
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;