From 59db41697ee112c4e64480cee185ac2d826242e8 Mon Sep 17 00:00:00 2001
From: wanglei <wl2666675>
Date: Mon, 13 May 2024 10:10:04 +0800
Subject: [PATCH] =?UTF-8?q?=E7=89=A9=E7=90=86=E4=B9=A6=E6=9E=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/dangan/bookshelf/index.vue      | 147 +++++++++++-------
 1 file changed, 93 insertions(+), 54 deletions(-)

diff --git a/dangan-ui/src/views/dangan/bookshelf/index.vue b/dangan-ui/src/views/dangan/bookshelf/index.vue
index 5c77da7..5513379 100644
--- a/dangan-ui/src/views/dangan/bookshelf/index.vue
+++ b/dangan-ui/src/views/dangan/bookshelf/index.vue
@@ -9,7 +9,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="父目录ID" prop="pid">
+<!--      <el-form-item label="父目录ID" prop="pid">
         <el-input
           v-model="queryParams.pid"
           placeholder="请输入父目录ID"
@@ -32,7 +32,7 @@
           clearable
           @keyup.enter.native="handleQuery"
         />
-      </el-form-item>
+      </el-form-item>-->
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -52,49 +52,38 @@
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['dangan:bookshelf:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['dangan:bookshelf:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
+          type="info"
           plain
-          icon="el-icon-download"
+          icon="el-icon-sort"
           size="mini"
-          @click="handleExport"
-          v-hasPermi="['dangan:bookshelf:export']"
-        >导出</el-button>
+          @click="toggleExpandAll"
+        >展开/折叠</el-button>
       </el-col>
+
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="bookshelfList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="书架id" align="center" prop="shelfId" />
+    <el-table v-if="refreshTable"
+              v-loading="loading"
+              :data="list"
+              row-key="shelfId"
+              :default-expand-all="isExpandAll"
+              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+      <el-table-column label="书架Id" align="center" prop="shelfId" />
       <el-table-column label="名称" align="center" prop="name" />
-      <el-table-column label="父目录ID" align="center" prop="pid" />
-      <el-table-column label="祖级列表" align="center" prop="ancestors" />
+<!--      <el-table-column label="父目录ID" align="center" prop="pid" />-->
+<!--      <el-table-column label="祖级列表" align="center" prop="ancestors" />-->
       <el-table-column label="显示顺序" align="center" prop="orderNum" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-plus"
+            @click="handleAdd(scope.row)"
+            v-hasPermi="['dangan:bookshelf:add']"
+          >新增</el-button>
           <el-button
             size="mini"
             type="text"
@@ -112,7 +101,7 @@
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -124,12 +113,18 @@
     <!-- 添加或修改物理书架对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="上级书架" prop="pid">
+          <treeselect
+            v-model="form.pid"
+            :options="muOptions"
+            :normalizer="normalizer"
+            :show-count="true"
+            placeholder="选择上级书架"
+          />
+        </el-form-item>
         <el-form-item label="名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入名称" />
         </el-form-item>
-        <el-form-item label="父目录ID" prop="pid">
-          <el-input v-model="form.pid" placeholder="请输入父目录ID" />
-        </el-form-item>
         <el-form-item label="显示顺序" prop="orderNum">
           <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
         </el-form-item>
@@ -147,45 +142,49 @@
 
 <script>
 import { listBookshelf, getBookshelf, delBookshelf, addBookshelf, updateBookshelf } from "@/api/dangan/bookshelf";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "Bookshelf",
+  components: { Treeselect },
   data() {
     return {
       // 遮罩层
       loading: true,
       // 选中数组
       ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
       // 显示搜索条件
       showSearch: true,
-      // 总条数
-      total: 0,
       // 物理书架表格数据
-      bookshelfList: [],
+      list: [],
+      // 目录树选项
+      muOptions: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
       open: false,
+      // 是否展开，默认全部折叠
+      isExpandAll: false,
+      // 重新渲染表格状态
+      refreshTable: true,
       // 查询参数
       queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        name: null,
-        pid: null,
-        ancestors: null,
-        orderNum: null,
+        name: null
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
+        pid: [
+          { required: true, message: "上级书架不能为空", trigger: "blur" }
+        ],
         name: [
           { required: true, message: "名称不能为空", trigger: "blur" }
         ],
+        orderNum: [
+          { required: true, message: "显示顺序不能为空", trigger: "blur" }
+        ],
       }
     };
   },
@@ -197,11 +196,36 @@ export default {
     getList() {
       this.loading = true;
       listBookshelf(this.queryParams).then(response => {
-        this.bookshelfList = response.rows;
-        this.total = response.total;
+        this.list = response.rows;
+        this.list.forEach(item=>{
+          item['children']=[]
+        })
+        this.list = this.handleTree(response.rows, "shelfId","pid");
         this.loading = false;
       });
     },
+    /** 转换目录数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.shelfId,
+        label: node.name,
+        children: node.children
+      };
+    },
+    /** 查询目录下拉树结构 */
+    getTreeselect() {
+      listBookshelf().then(response => {
+        debugger
+        this.muOptions = [];
+        const menu = { shelfId: 0, name: '主类目', children: [] };
+        menu.children = this.handleTree(response.rows, "shelfId", "pid");
+        this.muOptions.push(menu);
+        console.log(this.muOptions);
+      });
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -240,14 +264,29 @@ export default {
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
-    handleAdd() {
+    handleAdd(row) {
       this.reset();
+      this.getTreeselect();
+      if (row != null && row.shelfId) {
+        this.form.pid = row.shelfId;
+      } else {
+        this.form.pid = 0;
+      }
       this.open = true;
       this.title = "添加物理书架";
     },
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
+      this.getTreeselect();
       const shelfId = row.shelfId || this.ids
       getBookshelf(shelfId).then(response => {
         this.form = response.data;