目录

src/components/XyTable/index.vue

@@ -213,11 +213,13 @@ export default {
       let clientHeight = document.documentElement.clientHeight;
       let lxheader = document.querySelector(".v-header")?.getBoundingClientRect();
       let lxHeader_height = lxheader.height + 25; //查询 头部
-      let paginationHeight = 37; //分页的高度
+      console.log("this.isPage",this.isPage)
-      let topHeight = 50; //页面 头部
+      let paginationHeight = this.isPage ? 37 : 0; //分页的高度
+      let topHeight = 20; //页面 头部
       this.tableHeight =
         clientHeight - lxHeader_height - topHeight - paginationHeight - 20 - 25;
       //console.log(this.tableHeight)
+      this.$emit("getHeight",this.tableHeight)
     },
     async getTableData(isRefresh = false) {
       if (isRefresh) {

src/styles/sidebar.scss

@@ -92,7 +92,9 @@
           color: $subMenuActiveText;
         }
 
-
+    .el-menu-item.is-active{
+      color:$menuActiveBg!important
+    }
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $sideBarWidth !important;

src/views/catalog/components/addCatalog.vue

@@ -8,7 +8,13 @@
             <span style="color: red;font-weight: bold;padding-right: 4px;"></span>上级目录：
           </div>
           <div class="xy-table-item-content">
-            <el-input v-model="form.pName" disabled clearable style="width: 100%;"></el-input>
+            <el-input v-if="type==='add'" v-model="form.pName" disabled clearable style="width: 100%;"></el-input>
+            <div v-else  style="height:150px;overflow: scroll;">
+              <el-tree v-if="isShow" :default-checked-keys="checkArr" :check-strictly="true" @check="getSelectedNodes"
+                :data="catalogList" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current
+                :props="defaultProps">
+              </el-tree>
+            </div>
           </div>
         </div>
       </template>
@@ -40,7 +46,8 @@
 <script>
   import {
     save,
-    show
+    show,
+    index
   } from "@/api/system/baseForm.js"
   import {
     deepCopy,
@@ -55,6 +62,12 @@
         isShow: false,
         type: 'add',
         id: '',
+        catalogList: [],
+        checkArr: [],
+        defaultProps: {
+          children: 'children',
+          label: 'name'
+        },
         table_name: 'catalogs',
         form: {
           pName: '根目录',
@@ -70,12 +83,41 @@
         }
       }
     },
-    created() {},
+    created() {
-    methods: {
+
+    },
+    methods: {
+      async getCatalogList() {
+        const res = await index({
+          page_size: 999,
+          page: 1,
+          sort_type: 'ASC',
+          sort_name: 'sort',
+          table_name: 'catalogs',
+          is_auth: 1
+        })
+        if (res.data.length > 0) {
+          this.catalogList = this.base.buildTree(res.data)
+          this.catalogList.unshift({
+            id:0,
+            name:'根目录'
+          })
+        }
+      },
+      getSelectedNodes(data, node) {
+        console.log("data", data)
+        this.$refs.tree.setCheckedKeys([]); // 删除所有选中节点
+        this.$refs.tree.setCheckedNodes([data]); // 选中已选中节点
+        this.form.pName = data.name
+        this.form.pid = data.id
+        this.$forceUpdate()
+      },
       // 子目录
       setPid(pid, pName) {
+        console.log("pid", pid, pName)
         this.form.pid = pid ? pid : 0
-        this.form.pName = pName ? pName : '根目录'
+        this.form.pName = pName ? pName : '根目录'
+        this.checkArr = pid ? [pid] : []
       },
       submit() {
         if (this.id) {
@@ -83,6 +125,12 @@
         }
         if (this.type == 'add' || this.type == "child") {
           this.form.id = ''
+        }
+        if(this.type==='editor'){
+          if(this.form.pid===this.form.id){
+            this.$Message.warning("上级目录不能为自身")
+            return
+          }
         }
         console.log("this.form", this.form)
         save({
@@ -103,13 +151,15 @@
           id: this.id,
           table_name: this.table_name,
         }).then(res => {
-          this.form = this.base.requestToForm(res, this.form)
+          this.form = this.base.requestToForm(res, this.form)
+          this.checkArr = res.pid ? [res.pid] : []
         })
       }
     },
     watch: {
       isShow(newVal) {
-        if (newVal) {
+        if (newVal) {
+          this.getCatalogList()
           if (this.type === 'editor') {
             this.getDetail()
           } else if (this.type === 'add') {
@@ -118,7 +168,8 @@
           }
         } else {
           this.id = ''
-          this.type = "add"
+          this.type = "add"
+          this.checkArr = []
           this.form = {
             pName: '根目录',
             name: '',
@@ -144,4 +195,8 @@
   ::v-deep .xy-table-item-content {
     width: calc(100% - 140px);
   }
+
+  ::v-deep .el-checkbox__input .el-checkbox__inner {
+    border-radius: 50%;
+  }
 </style>

src/views/catalog/index.vue

@@ -66,6 +66,11 @@
           prop: 'name',
           label: '目录名称',
           align: 'left',
+        },{
+          prop: 'sort',
+          label: '排序',
+          align: 'center',
+          width:50
         }]
 
       }

src/views/record/components/showRecord.vue

@@ -90,7 +90,6 @@
       isShow(newVal) {
         if (newVal) {
           this.getDetail()
-
         } else {
           this.id = ''
           this.form = {}

src/views/record/index.vue

@@ -26,13 +26,14 @@
     </div>
 
     <div class="catalog">
-      <div class="catalog_left">
+      <div class="catalog_left" :style="{'height': myHeight+'px',overflow:'scroll'}">
         <el-tree @node-click="getSelectedNodes" :data="catalogList" default-expand-all node-key="id" ref="tree"
           highlight-current :props="defaultProps">
         </el-tree>
-      </div>
+      </div>
+
       <div class="catalog_right">
-        <xy-table :list="list" :total="total" @pageIndexChange="pageIndexChange" @pageSizeChange="pageSizeChange"
+        <xy-table @getHeight="initHeight" :list="list" :total="total" @pageIndexChange="pageIndexChange" @pageSizeChange="pageSizeChange"
           :table-item="table_item">
           <template v-slot:catalog_name>
             <el-table-column align='left' label="所属目录" width="120" header-align="center">
@@ -110,6 +111,7 @@
           page_size: 10,
           catalog_id: ''
         },
+        myHeight:0,
         stateObj:{},
         total: 0,
         list: [],
@@ -163,7 +165,12 @@
       this.getCatalogList()
       this.getList()
     },
-    methods: {
+    methods: {
+      initHeight(e){
+        console.log("e",e)
+
+        this.myHeight = e + 37
+      },
       async getCatalogList() {
         const res = await index({
           page_size: 999,

vue.config.js

@@ -25,7 +25,7 @@ module.exports = {
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
   publicPath: process.env.ENV === 'staging' ? '/admin_test' : '/admin',
-  outputDir: '/Users/mac/Documents/朗业/2024/s-四世同堂-档案/sstt_dangan/public/admin',
+  outputDir: '/Users/mac/Documents/朗业/2024/s-四世同堂-档案/sstt_dangan/public/admin_test',
   assetsDir: 'static',
   css: {
     loaderOptions: { // 向 CSS 相关的 loader 传递选项