分组空间，存储空间管理

src/api/doc/dir.js

@@ -15,6 +15,27 @@ export function personalList() {
     method: 'get',
   })
 }
+// 查询目录信息列表
+export function publicList() {
+  return request({
+    url: '/doc/dir/list/public',
+    method: 'get',
+  })
+}
+// 查询目录信息列表
+export function deptList() {
+  return request({
+    url: '/doc/dir/list/dept',
+    method: 'get',
+  })
+}
+// 查询目录信息列表
+export function groupList(groupId) {
+  return request({
+    url: '/doc/dir/list/group/' + groupId,
+    method: 'get',
+  })
+}
 
 // 查询目录信息详细
 export function getDir(dirId) {
@@ -48,4 +69,4 @@ export function delDir(dirId) {
     url: '/doc/dir/' + dirId,
     method: 'delete'
   })
-}
+}

src/api/doc/group.js

@@ -8,6 +8,14 @@ export function listGroup(query) {
     params: query
   })
 }
+// 查询分组列表
+export function selectGroup(query) {
+  return request({
+    url: '/doc/group/select',
+    method: 'get',
+    params: query
+  })
+}
 
 // 查询分组详细
 export function getGroup(groupId) {
@@ -41,4 +49,4 @@ export function delGroup(groupId) {
     url: '/doc/group/' + groupId,
     method: 'delete'
   })
-}
+}

src/api/doc/space.js

@@ -49,4 +49,25 @@ export function getPersonalSpace() {
     url: '/doc/space/personal',
     method: 'get'
   })
+}
+// 查询公共存储空间
+export function getPublicSpace() {
+  return request({
+    url: '/doc/space/public',
+    method: 'get'
+  })
+}
+// 查询部门存储空间
+export function getDeptSpace() {
+  return request({
+    url: '/doc/space/dept',
+    method: 'get'
+  })
+}
+// 查询分组存储空间
+export function getGroupSpace(groupId) {
+  return request({
+    url: '/doc/space/group/' + groupId,
+    method: 'get'
+  })
 }

src/router/index.js

@@ -321,6 +321,20 @@ export const dynamicRoutes = [{
     }
   }]
 }, {
+  path: '/doc/group-space/',
+  component: Layout,
+  hidden: true,
+  permissions: ['doc:groupSpace'],
+  children: [{
+    path: 'space/:groupId(\\d+)',
+    component: () => import('@/views/doc/dir/groupSpace'),
+    name: 'GroupSpace',
+    meta: {
+      title: '分组空间',
+      activeMenu: '/doc/groupSpace'
+    }
+  }]
+}, {
   path: '/doc/share-user/',
   component: Layout,
   hidden: true,
@@ -348,4 +362,4 @@ export default new Router({
     y: 0
   }),
   routes: constantRoutes
-})
+})

src/views/doc/dir/deptSpace.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+          v-hasPermi="['doc:dir:add']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-if="refreshTable" v-loading="loading" :data="dirList" row-key="dirId" :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+      <el-table-column label="目录名称" align="left" prop="dirName" />
+      <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="['doc:dir:add']">新增</el-button>
+          <el-button v-if="scope.row.parentId != 0" size="mini" type="text" icon="el-icon-edit"
+            @click="handleUpdate(scope.row)" v-hasPermi="['doc:dir:edit']">修改</el-button>
+          <el-button v-if="scope.row.parentId != 0" size="mini" type="text" icon="el-icon-delete"
+            @click="handleDelete(scope.row)" v-hasPermi="['doc:dir:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改目录信息对话框 -->
+    <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="parentId">
+          <treeselect v-model="form.parentId" :options="dirOptions" :normalizer="normalizer" placeholder="请选择上级目录" />
+        </el-form-item>
+        <el-form-item label="目录名称" prop="dirName">
+          <el-input v-model="form.dirName" placeholder="请输入目录名称" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import {
+    listDir,
+    getDir,
+    delDir,
+    addDir,
+    updateDir,
+    personalList
+  } from "@/api/doc/dir";
+
+  import {
+    getPersonalSpace
+  } from "@/api/doc/space";
+
+  import {
+    listExpand,
+    getExpand,
+    delExpand,
+    addExpand,
+    updateExpand
+  } from "@/api/doc/expand";
+
+  import Treeselect from "@riophae/vue-treeselect";
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+  export default {
+    name: "Dir",
+    components: {
+      Treeselect
+    },
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 目录信息表格数据
+        dirList: [],
+        // 目录信息树选项
+        dirOptions: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        openSpace: false,
+        // 是否展开，默认全部展开
+        isExpandAll: true,
+        // 重新渲染表格状态
+        refreshTable: true,
+        // 查询参数
+        queryParams: {
+          parentId: null,
+          dirName: null,
+        },
+        //个人空间数据
+        spaceData: {},
+        // 表单参数
+        form: {},
+        formSpace: {},
+        // 表单校验
+        rules: {
+          dirName: [{
+            required: true,
+            message: "目录名称不能为空",
+            trigger: "blur"
+          }],
+          parentId: [{
+            required: true,
+            message: "上级目录不能为空",
+            trigger: "blur"
+          }],
+        },
+        // 表单校验
+        rulesSpace: {
+          expandCap: [{
+            required: true,
+            message: "扩容容量不能为空",
+            trigger: "blur"
+          }],
+          remark: [{
+            required: true,
+            message: "申请理由不能为空",
+            trigger: "blur"
+          }],
+        }
+      };
+    },
+    created() {
+      this.getList();
+      this.spaceInfo();
+    },
+    methods: {
+      /** 查询个人空间相关信息 */
+      spaceInfo() {
+        this.loading = true;
+        getPersonalSpace().then(response => {
+          this.spaceData = response.data;
+          this.loading = false;
+        });
+      },
+      /** 查询目录信息列表 */
+      getList() {
+        this.loading = true;
+        personalList().then(response => {
+          this.dirList = this.handleTree(response.data, "dirId");
+          this.loading = false;
+        });
+      },
+      /** 转换目录信息数据结构 */
+      normalizer(node) {
+        if (node.children && !node.children.length) {
+          delete node.children;
+        }
+        return {
+          id: node.dirId,
+          label: node.dirName,
+          children: node.children
+        };
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 取消按钮
+      cancelSpace() {
+        this.openSpace = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          dirId: null,
+          spaceId: null,
+          parentId: null,
+          dirName: null,
+          dirPath: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null,
+          remark: null,
+          isDel: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      /** 新增按钮操作 */
+      handleAdd(row) {
+        this.reset();
+        // this.getTreeselect();
+        if (row != null && row.dirId) {
+          this.form.parentId = row.dirId;
+          // } else {
+          // 	this.form.parentId = 0;
+        }
+        this.open = true;
+        this.title = "添加目录信息";
+        personalList().then(response => {
+          this.form.spaceId = response.data[0].spaceId;
+          this.dirOptions = this.handleTree(response.data, "dirId");
+        });
+      },
+      /** 展开/折叠操作 */
+      toggleExpandAll() {
+        this.refreshTable = false;
+        this.isExpandAll = !this.isExpandAll;
+        this.$nextTick(() => {
+          this.refreshTable = true;
+        });
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.reset();
+        if (row != null) {
+          this.form.parentId = row.dirId;
+        }
+        getDir(row.dirId).then(response => {
+          this.form = response.data;
+          this.open = true;
+          this.title = "修改目录信息";
+        });
+        personalList().then(response => {
+          this.dirOptions = this.handleTree(response.data, "dirId");
+        });
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.dirId != null) {
+              updateDir(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              });
+            } else {
+              addDir(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              });
+            }
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        this.$modal.confirm('是否确认删除目录信息编号为"' + row.dirId + '"的数据项？').then(function() {
+          return delDir(row.dirId);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+      }
+    }
+  };
+</script>

src/views/doc/dir/groupSpace.vue

@@ -0,0 +1,334 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['doc:dir:add']"
+          v-hasRole="['group.manager']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-if="refreshTable" v-loading="loading" :data="dirList" row-key="dirId" :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+      <el-table-column label="目录名称" align="left" prop="dirName" />
+      <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="['doc:dir:add']" v-hasRole="['group.manager']">新增</el-button>
+          <el-button v-if="scope.row.parentId != 0" size="mini" type="text" icon="el-icon-edit"
+            @click="handleUpdate(scope.row)" v-hasPermi="['doc:dir:edit']" v-hasRole="['group.manager']">修改</el-button>
+          <el-button v-if="scope.row.parentId != 0" size="mini" type="text" icon="el-icon-delete"
+            @click="handleDelete(scope.row)" v-hasPermi="['doc:dir:remove']"
+            v-hasRole="['group.manager']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 个人空间相关信息 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        总容量：{{spaceData.spaceCap}} GB 已使用容量：{{spaceData.usedCap}} GB 可用容量：{{spaceData.avlCap}} GB
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleExpand">扩容申请</el-button>
+      </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">
+        <el-form-item label="上级目录" prop="parentId">
+          <treeselect v-model="form.parentId" :options="dirOptions" :normalizer="normalizer" placeholder="请选择上级目录" />
+        </el-form-item>
+        <el-form-item label="目录名称" prop="dirName">
+          <el-input v-model="form.dirName" placeholder="请输入目录名称" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+    <!-- 扩容申请对话框 -->
+    <el-dialog :title="title" :visible.sync="openSpace" width="500px" append-to-body>
+      <el-form ref="formSpace" :model="formSpace" :rules="rulesSpace" label-width="80px">
+        <el-form-item label="扩充容量" prop="expandCap">
+          <el-input-number v-model="formSpace.expandCap" placeholder="扩充容量"></el-input-number><label>GB</label>
+        </el-form-item>
+        <el-form-item label="申请理由" prop="remark">
+          <el-input v-model="formSpace.remark" type="textarea" rows="5" placeholder="请输入申请理由" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFormSpace">确 定</el-button>
+        <el-button @click="cancelSpace">取 消</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+  import {
+    listDir,
+    getDir,
+    delDir,
+    addDir,
+    updateDir,
+    groupList
+  } from "@/api/doc/dir";
+
+  import {
+    getGroupSpace
+  } from "@/api/doc/space";
+
+  import {
+    listExpand,
+    getExpand,
+    delExpand,
+    addExpand,
+    updateExpand
+  } from "@/api/doc/expand";
+
+  import Treeselect from "@riophae/vue-treeselect";
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+  export default {
+    name: "GroupSpace",
+    components: {
+      Treeselect
+    },
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 目录信息表格数据
+        dirList: [],
+        // 目录信息树选项
+        dirOptions: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        openSpace: false,
+        // 是否展开，默认全部展开
+        isExpandAll: true,
+        // 重新渲染表格状态
+        refreshTable: true,
+        // 查询参数
+        queryParams: {
+          parentId: null,
+          dirName: null,
+        },
+        //个人空间数据
+        spaceData: {},
+        // 表单参数
+        form: {},
+        formSpace: {},
+        // 表单校验
+        rules: {
+          dirName: [{
+            required: true,
+            message: "目录名称不能为空",
+            trigger: "blur"
+          }],
+          parentId: [{
+            required: true,
+            message: "上级目录不能为空",
+            trigger: "blur"
+          }],
+        },
+        // 表单校验
+        rulesSpace: {
+          expandCap: [{
+            required: true,
+            message: "扩容容量不能为空",
+            trigger: "blur"
+          }],
+          remark: [{
+            required: true,
+            message: "申请理由不能为空",
+            trigger: "blur"
+          }],
+        }
+      };
+    },
+    created() {
+      console.log(this.$cache.local.get('USERNAME')) // 输出'local value'
+      const groupId = this.$route.params && this.$route.params.groupId;
+      if (groupId) {
+        this.queryParams.groupId = groupId;
+        this.getList();
+      }
+      this.spaceInfo();
+    },
+    methods: {
+      /** 查询个人空间相关信息 */
+      spaceInfo() {
+        this.loading = true;
+        getGroupSpace(this.queryParams.groupId).then(response => {
+          this.spaceData = response.data;
+          this.loading = false;
+        });
+      },
+      /** 查询目录信息列表 */
+      getList() {
+        this.loading = true;
+        groupList(this.queryParams.groupId).then(response => {
+          this.dirList = this.handleTree(response.data, "dirId");
+          this.loading = false;
+        });
+      },
+      /** 转换目录信息数据结构 */
+      normalizer(node) {
+        if (node.children && !node.children.length) {
+          delete node.children;
+        }
+        return {
+          id: node.dirId,
+          label: node.dirName,
+          children: node.children
+        };
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 取消按钮
+      cancelSpace() {
+        this.openSpace = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          dirId: null,
+          spaceId: null,
+          parentId: null,
+          dirName: null,
+          dirPath: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null,
+          remark: null,
+          isDel: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      /** 新增按钮操作 */
+      handleAdd(row) {
+        this.reset();
+        // this.getTreeselect();
+        if (row != null && row.dirId) {
+          this.form.parentId = row.dirId;
+          // } else {
+          // 	this.form.parentId = 0;
+        }
+        this.open = true;
+        this.title = "添加目录信息";
+        groupList(this.queryParams.groupId).then(response => {
+          this.form.spaceId = response.data[0].spaceId;
+          this.dirOptions = this.handleTree(response.data, "dirId");
+        });
+      },
+      /** 扩容申请 */
+      handleExpand(row) {
+        this.formSpace.currentCap = this.spaceData.spaceCap;
+        this.formSpace.spaceId = this.spaceData.spaceId;
+        this.formSpace.spaceName = this.spaceData.spaceName;
+        this.reset();
+        // this.getTreeselect();
+        if (row != null && row.dirId) {
+          this.form.parentId = row.dirId;
+          // } else {
+          // 	this.form.parentId = 0;
+        }
+        this.openSpace = true;
+        this.title = "扩容申请";
+        groupList(this.queryParams.groupId).then(response => {
+          this.form.spaceId = response.data[0].spaceId;
+          this.dirOptions = this.handleTree(response.data, "dirId");
+        });
+      },
+      /** 展开/折叠操作 */
+      toggleExpandAll() {
+        this.refreshTable = false;
+        this.isExpandAll = !this.isExpandAll;
+        this.$nextTick(() => {
+          this.refreshTable = true;
+        });
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.reset();
+        if (row != null) {
+          this.form.parentId = row.dirId;
+        }
+        getDir(row.dirId).then(response => {
+          this.form = response.data;
+          this.open = true;
+          this.title = "修改目录信息";
+        });
+        personalList().then(response => {
+          this.dirOptions = this.handleTree(response.data, "dirId");
+        });
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.dirId != null) {
+              updateDir(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              });
+            } else {
+              addDir(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              });
+            }
+          }
+        });
+      },
+      /** 提交按钮 */
+      submitFormSpace() {
+        console.log(this.formSpace);
+        this.$refs["formSpace"].validate(valid => {
+          if (valid) {
+            addExpand(this.formSpace).then(response => {
+              this.$modal.msgSuccess("扩容申请提交成功");
+              this.openSpace = false;
+            });
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        this.$modal.confirm('是否确认删除目录信息编号为"' + row.dirId + '"的数据项？').then(function() {
+          return delDir(row.dirId);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+      }
+    }
+  };
+</script>

src/views/doc/dir/groupSpaceSelect.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="分组名称" prop="groupName">
+        <el-input v-model="queryParams.groupName" placeholder="请输入分组名称" clearable @keyup.enter.native="handleQuery" />
+      </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>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="groupList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="分组名称" align="center" prop="groupName" />
+      <el-table-column label="分组管理员" align="center" prop="groupManagerName" />
+      <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-user" @click="handleGroupSpace(scope.row)">分组空间</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
+
+  </div>
+</template>
+
+<script>
+  import {
+    listGroup,
+    selectGroup,
+    getGroup,
+    delGroup,
+    addGroup,
+    updateGroup
+  } from "@/api/doc/group";
+
+  export default {
+    name: "GroupSpaceSelect",
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 分组表格数据
+        groupList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          groupName: null,
+          groupManager: null,
+          groupManagerName: null,
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {}
+      };
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 查询分组列表 */
+      getList() {
+        this.loading = true;
+        selectGroup(this.queryParams).then(response => {
+          this.groupList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          groupId: null,
+          groupName: null,
+          groupManager: null,
+          groupManagerName: null,
+          creater: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null,
+          remark: null,
+          isDel: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.groupId)
+        this.single = selection.length !== 1
+        this.multiple = !selection.length
+      },
+      /** 分组空间按钮操作 */
+      handleGroupSpace(row) {
+        const groupId = row.groupId;
+        this.$router.push("/doc/group-space/space/" + groupId);
+      }
+    }
+  };
+</script>

src/views/doc/dir/publicSpace.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+          v-hasPermi="['doc:dir:add']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-if="refreshTable" v-loading="loading" :data="dirList" row-key="dirId" :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+      <el-table-column label="目录名称" align="left" prop="dirName" />
+      <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="['doc:dir:add']">新增</el-button>
+          <el-button v-if="scope.row.parentId != 0" size="mini" type="text" icon="el-icon-edit"
+            @click="handleUpdate(scope.row)" v-hasPermi="['doc:dir:edit']">修改</el-button>
+          <el-button v-if="scope.row.parentId != 0" size="mini" type="text" icon="el-icon-delete"
+            @click="handleDelete(scope.row)" v-hasPermi="['doc:dir:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改目录信息对话框 -->
+    <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="parentId">
+          <treeselect v-model="form.parentId" :options="dirOptions" :normalizer="normalizer" placeholder="请选择上级目录" />
+        </el-form-item>
+        <el-form-item label="目录名称" prop="dirName">
+          <el-input v-model="form.dirName" placeholder="请输入目录名称" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import {
+    listDir,
+    getDir,
+    delDir,
+    addDir,
+    updateDir,
+    personalList
+  } from "@/api/doc/dir";
+
+  import {
+    getPersonalSpace
+  } from "@/api/doc/space";
+
+  import {
+    listExpand,
+    getExpand,
+    delExpand,
+    addExpand,
+    updateExpand
+  } from "@/api/doc/expand";
+
+  import Treeselect from "@riophae/vue-treeselect";
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+  export default {
+    name: "Dir",
+    components: {
+      Treeselect
+    },
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 目录信息表格数据
+        dirList: [],
+        // 目录信息树选项
+        dirOptions: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        openSpace: false,
+        // 是否展开，默认全部展开
+        isExpandAll: true,
+        // 重新渲染表格状态
+        refreshTable: true,
+        // 查询参数
+        queryParams: {
+          parentId: null,
+          dirName: null,
+        },
+        //个人空间数据
+        spaceData: {},
+        // 表单参数
+        form: {},
+        formSpace: {},
+        // 表单校验
+        rules: {
+          dirName: [{
+            required: true,
+            message: "目录名称不能为空",
+            trigger: "blur"
+          }],
+          parentId: [{
+            required: true,
+            message: "上级目录不能为空",
+            trigger: "blur"
+          }],
+        },
+        // 表单校验
+        rulesSpace: {
+          expandCap: [{
+            required: true,
+            message: "扩容容量不能为空",
+            trigger: "blur"
+          }],
+          remark: [{
+            required: true,
+            message: "申请理由不能为空",
+            trigger: "blur"
+          }],
+        }
+      };
+    },
+    created() {
+      this.getList();
+      this.spaceInfo();
+    },
+    methods: {
+      /** 查询个人空间相关信息 */
+      spaceInfo() {
+        this.loading = true;
+        getPersonalSpace().then(response => {
+          this.spaceData = response.data;
+          this.loading = false;
+        });
+      },
+      /** 查询目录信息列表 */
+      getList() {
+        this.loading = true;
+        personalList().then(response => {
+          this.dirList = this.handleTree(response.data, "dirId");
+          this.loading = false;
+        });
+      },
+      /** 转换目录信息数据结构 */
+      normalizer(node) {
+        if (node.children && !node.children.length) {
+          delete node.children;
+        }
+        return {
+          id: node.dirId,
+          label: node.dirName,
+          children: node.children
+        };
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 取消按钮
+      cancelSpace() {
+        this.openSpace = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          dirId: null,
+          spaceId: null,
+          parentId: null,
+          dirName: null,
+          dirPath: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null,
+          remark: null,
+          isDel: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      /** 新增按钮操作 */
+      handleAdd(row) {
+        this.reset();
+        // this.getTreeselect();
+        if (row != null && row.dirId) {
+          this.form.parentId = row.dirId;
+          // } else {
+          // 	this.form.parentId = 0;
+        }
+        this.open = true;
+        this.title = "添加目录信息";
+        personalList().then(response => {
+          this.form.spaceId = response.data[0].spaceId;
+          this.dirOptions = this.handleTree(response.data, "dirId");
+        });
+      },
+      /** 展开/折叠操作 */
+      toggleExpandAll() {
+        this.refreshTable = false;
+        this.isExpandAll = !this.isExpandAll;
+        this.$nextTick(() => {
+          this.refreshTable = true;
+        });
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.reset();
+        if (row != null) {
+          this.form.parentId = row.dirId;
+        }
+        getDir(row.dirId).then(response => {
+          this.form = response.data;
+          this.open = true;
+          this.title = "修改目录信息";
+        });
+        personalList().then(response => {
+          this.dirOptions = this.handleTree(response.data, "dirId");
+        });
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.dirId != null) {
+              updateDir(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              });
+            } else {
+              addDir(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              });
+            }
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        this.$modal.confirm('是否确认删除目录信息编号为"' + row.dirId + '"的数据项？').then(function() {
+          return delDir(row.dirId);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+      }
+    }
+  };
+</script>

src/views1/File/Individual/IndividualView.vue

@@ -15,96 +15,45 @@
           <el-col :span="4" :xs="24" class="main-left">
             <div class="head-top">个人文档</div>
             <div class="head-container">
-              <el-tree
-                :data="dirList"
-                :props="defaultProps"
-                :expand-on-click-node="false"
-                ref="tree"
-                node-key="id"
-                default-expand-all
-                highlight-current
-                @node-click="handleNodeClick"
-              />
+              <el-tree :data="dirList" :props="defaultProps" :expand-on-click-node="false" ref="tree" node-key="id"
+                default-expand-all highlight-current @node-click="handleNodeClick" />
             </div>
           </el-col>
           <!--文件数据-->
           <el-col :span="20" :xs="24" class="main-right">
             <p>个人文档</p>
-            <el-form
-              :model="queryParams"
-              ref="queryForm"
-              size="small"
-              :inline="true"
-              v-show="showSearch"
-              label-width="68px"
-              class="main-right-top"
-            >
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+              label-width="68px" class="main-right-top">
               <el-form-item label="文件名称" prop="docName">
-                <el-input
-                  v-model="queryParams.docName"
-                  placeholder="请输入文件名称"
-                  clearable
-                  @keyup.enter.native="handleQuery"
-                />
+                <el-input v-model="queryParams.docName" placeholder="请输入文件名称" clearable
+                  @keyup.enter.native="handleQuery" />
               </el-form-item>
               <el-form-item label="文件级别" prop="docLevel">
                 <el-select v-model="queryParams.docLevel" placeholder="请选择文件级别" @change="handleQuery">
-              <el-option v-for="item in levelOptions" :key="item.levelId" :label="item.levelName"
-                :value="item.levelId"></el-option>
-            </el-select>
+                  <el-option v-for="item in levelOptions" :key="item.levelId" :label="item.levelName"
+                    :value="item.levelId"></el-option>
+                </el-select>
               </el-form-item>
               <el-form-item label="文件年份" prop="createYear">
-                <el-input
-                  v-model="queryParams.createYear"
-                  placeholder="请输入文件创建年份"
-                  clearable
-                  @keyup.enter.native="handleQuery"
-                />
+                <el-input v-model="queryParams.createYear" placeholder="请输入文件创建年份" clearable
+                  @keyup.enter.native="handleQuery" />
               </el-form-item>
               <el-form-item label="标签" prop="params">
-              <el-select
-               v-model="queryParams.params"
-               placeholder="请输入标签名称"
-               @change="handleQuery"
-               style="width: 180px"
-            >
-              <el-option
-              v-for="item in tags"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-              />
-            </el-select>
+                <el-select v-model="queryParams.params.tagId" placeholder="请输入标签名称" @change="handleQuery"
+                  style="width: 180px">
+                  <el-option v-for="item in tags" :key="item.id" :label="item.name" :value="item.id" />
+                </el-select>
               </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"
-                  class="reset1"
-                  >重置</el-button
-                >
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="reset1">重置</el-button>
               </el-form-item>
             </el-form>
 
             <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
-                <el-button
-                  type="primary"
-                  plain
-                  icon="el-icon-plus"
-                  size="mini"
-                  @click="handleAdd"
-                  v-hasPermi="['doc:info:add']"
-                  >上传</el-button
-                >
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                  v-hasPermi="['doc:info:add']">上传</el-button>
               </el-col>
               <!-- <el-col :span="1.5">
                 <el-button
@@ -141,82 +90,47 @@
                   >导出</el-button
                 >
               </el-col> -->
-              <right-toolbar
-                :showSearch.sync="showSearch"
-                @queryTable="getList"
-              ></right-toolbar>
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
             </el-row>
 
-            <el-table
-              v-loading="loading"
-              :data="infoList"
-              @selection-change="handleSelectionChange"
-              class="main-right-table"
-              height="calc(100vh * (630 / 1080))"
-              align="left"
-              :header-cell-style="{'text-align':'center'}"
-            >
+            <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange"
+              class="main-right-table" height="calc(100vh * (630 / 1080))" align="left"
+              :header-cell-style="{'text-align':'center'}">
               <el-table-column type="selection" width="55" align="center" />
               <el-table-column label="文件名称" align="left" prop="docName" />
-              <el-table-column
-                label="文件大小"
-                align="center"
-                prop="docSize"
-                :formatter="fileSizeData"
-                width="100"
-              />
-              <el-table-column
-                label="修改时间"
-                align="center"
-                prop="updateTime"
-              />
-              <el-table-column
-                label="文件级别"
-                align="center"
-                prop="docLevel"
-                :formatter="fileLevelData"
-                width="90"
-              />
-              <el-table-column
-                label="文件年份"
-                align="center"
-                prop="createYear"
-                width="90"
-              />
+              <el-table-column label="文件大小" align="center" prop="docSize" :formatter="fileSizeData" width="100" />
+              <el-table-column label="修改时间" align="center" prop="updateTime" />
+              <el-table-column label="文件级别" align="center" prop="docLevel" :formatter="fileLevelData" width="90" />
+              <el-table-column label="文件年份" align="center" prop="createYear" width="90" />
               <el-table-column label="标签" align="center" prop="tagName" width="250">
                 <template slot-scope="scope">
-              <div v-if="scope.row.tagList!=[]">
-                <el-tag v-for="(item,index) in scope.row.tagList" :key="index">
-                  {{item.tagName}}
-                </el-tag>
-              </div>
-               
+                  <div v-if="scope.row.tagList!=[]">
+                    <el-tag v-for="(item,index) in scope.row.tagList" :key="index">
+                      {{item.tagName}}
+                    </el-tag>
+                  </div>
+
                 </template>
               </el-table-column>
-              <el-table-column
-                label="操作"
-                align="center"
-                class-name="small-padding fixed-width"
-              >
+              <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-view"
-                    @click="handlePreview(scope.row)"
-                    v-if="checkLevel(scope.row, 'view')"
-                    >预览</el-button>
-                <el-dropdown size="mini">
-                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item icon="el-icon-view" @click.native="handleShare(scope.row)" v-if="checkLevel(scope.row, 'share')">分享</el-dropdown-item>
-                  <el-dropdown-item icon="el-icon-view" @click.native="handleDownload(scope.row)" v-if="checkLevel(scope.row, 'download')">下载</el-dropdown-item>
-                  <el-dropdown-item   icon="el-icon-view" @click.native="handleEdit(scope.row)" v-if="checkLevel(scope.row, 'edit')">在线编辑</el-dropdown-item>
-                  <el-dropdown-item icon="el-icon-edit" @click.native="handleUpdate(scope.row)" v-hasPermi="['doc:info:edit']"
-                    v-if="checkLevel(scope.row, 'modify')">修改</el-dropdown-item>
-                  <el-dropdown-item   icon="el-icon-delete" @click.native="handleDelete(scope.row)" v-hasPermi="['doc:info:remove']" v-if="checkLevel(scope.row, 'del')">删除</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
+                  <el-button size="mini" type="text" icon="el-icon-view" @click="handlePreview(scope.row)"
+                    v-if="checkLevel(scope.row, 'view')">预览</el-button>
+                  <el-dropdown size="mini">
+                    <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item icon="el-icon-view" @click.native="handleShare(scope.row)"
+                        v-if="checkLevel(scope.row, 'share')">分享</el-dropdown-item>
+                      <el-dropdown-item icon="el-icon-view" @click.native="handleDownload(scope.row)"
+                        v-if="checkLevel(scope.row, 'download')">下载</el-dropdown-item>
+                      <el-dropdown-item icon="el-icon-view" @click.native="handleEdit(scope.row)"
+                        v-if="checkLevel(scope.row, 'edit')">在线编辑</el-dropdown-item>
+                      <el-dropdown-item icon="el-icon-edit" @click.native="handleUpdate(scope.row)"
+                        v-hasPermi="['doc:info:edit']" v-if="checkLevel(scope.row, 'modify')">修改</el-dropdown-item>
+                      <el-dropdown-item icon="el-icon-delete" @click.native="handleDelete(scope.row)"
+                        v-hasPermi="['doc:info:remove']" v-if="checkLevel(scope.row, 'del')">删除</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
                   <!-- <el-button
                     size="mini"
                     type="text"
@@ -233,7 +147,7 @@
                     v-if="checkLevel(scope.row, 'download')"
                     >下载</el-button
                   > -->
-                  
+
                   <!-- <el-button
                     size="mini"
                     type="text"
@@ -264,93 +178,47 @@
               </el-table-column>
             </el-table>
 
-            <pagination
-              v-show="total > 0"
-              :total="total"
-              :page.sync="queryParams.pageNum"
-              :limit.sync="queryParams.pageSize"
-              @pagination="getList"
-            />
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+              :limit.sync="queryParams.pageSize" @pagination="getList" />
           </el-col>
         </el-row>
 
         <!-- 添加或修改文件基本信息对话框 -->
-        <el-dialog
-          :title="title"
-          :visible.sync="open"
-          width="500px"
-          append-to-body
-          custom-class="el-dialog5"
-        >
+        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body custom-class="el-dialog5">
           <el-form ref="form" :model="form" :rules="rules" label-width="80px">
             <el-form-item label="" prop="docPath">
               <!-- <el-input v-model="form.docPath" placeholder="请输入文件路径" /> -->
               <file-upload v-model="form.docPath" />
             </el-form-item>
             <el-form-item label="文件目录" prop="dirId">
-              <treeselect
-                v-model="form.dirId"
-                :options="dirList"
-                :normalizer="normalizer"
-                placeholder="请选择文件目录"
-              />
+              <treeselect v-model="form.dirId" :options="dirList" :normalizer="normalizer" placeholder="请选择文件目录" />
             </el-form-item>
             <el-form-item label="文件名称" prop="docName">
               <el-input v-model="form.docName" placeholder="请输入文件名称" />
             </el-form-item>
             <el-form-item label="文件描述">
-              <el-input
-                v-model="form.docDesc"
-                type="textarea"
-                placeholder="请输入内容"
-              />
+              <el-input v-model="form.docDesc" type="textarea" placeholder="请输入内容" />
             </el-form-item>
             <el-form-item label="文件级别" prop="docLevel">
               <el-select v-model="form.docLevel" placeholder="请选择文件级别">
-                <el-option
-                  v-for="item in levelOptions"
-                  :key="item.levelId"
-                  :label="item.levelName"
-                  :value="item.levelId"
-                ></el-option>
+                <el-option v-for="item in levelOptions" :key="item.levelId" :label="item.levelName"
+                  :value="item.levelId"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="选择标签(最多5个)" prop="tagName" color="red">
-              <el-tag
-                :key="tag"
-                v-for="tag in dynamicTags"
-                closable
-                :disable-transitions="false"
-                @close="handleClose(tag)"
-              >
+              <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
+                @close="handleClose(tag)">
                 {{ tag }}
               </el-tag>
-              <el-input
-                class="input-new-tag"
-                v-if="inputVisible"
-                v-model="inputValue"
-                ref="saveTagInput"
-                size="small"
-                @keyup.enter.native="handleInputConfirm"
-                @blur="handleInputConfirm"
-              >
+              <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
+                @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
               </el-input>
-              <el-button
-                v-else
-                class="button-new-tag"
-                size="small"
-                @click="showInput"
-                >添加标签</el-button
-              >
+              <el-button v-else class="button-new-tag" size="small" @click="showInput">添加标签</el-button>
             </el-form-item>
             <el-form-item label="文件标签" color="red">
-              <el-tag
-                 v-for="tag in tags"
-                 :key="tag.name"
-                 :type="tag.type"
-                 @click="handleInputConfirm1(tag)">
-                 {{ tag.name }}
-            </el-tag>
+              <el-tag v-for="tag in tags" :key="tag.name" :type="tag.type" @click="handleInputConfirm1(tag)">
+                {{ tag.name }}
+              </el-tag>
             </el-form-item>
           </el-form>
           <div slot="footer" class="dialog-footer">
@@ -362,632 +230,689 @@
     </div>
   </div>
 </template>
-  
+
 <script>
-import "@/styles1/element-ui1.scss";
-
-import {
-  listInfo,
-  getInfo,
-  delInfo,
-  addInfo,
-  updateInfo,
-} from "@/api/doc/info";
-import {
-  listDir,
-  getDir,
-  delDir,
-  addDir,
-  updateDir,
-  personalList,
-} from "@/api/doc/dir";
-import { listLevel } from "@/api/doc/level";
-
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-
-export default {
-  name: "Info",
-  components: {
-    Treeselect,
-  },
-  data() {
-    return {
-    //标签列表
-    tags: [
-          { name: '十四大', id:0 },
-          { name: '领导讲话', id:1 },
-          { name: '会议精神', id:2 },
-          { name: '党章', id:3 },
-          { name: '212专案', id:4 }
-        ],
+  import "@/styles1/element-ui1.scss";
 
-      //选择标签
-      dynamicTags: [],
-      inputVisible: false,
-      inputValue: "",
-
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 文件基本信息表格数据
-      infoList: [],
-      //目录ID
-      dirId: undefined,
-      //目录数据
-      dirList: undefined,
-      //文件等级数据
-      levelOptions: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        docName: null,
-        docLevel: null,
-        createYear: null,
-      },
-      // 表单参数
-      form: {},
-      defaultProps: {
-        children: "children",
-        label: "dirName",
-        id: "dirId",
-      },
-      // 表单校验
-      rules: {
-        docName: [
+  import {
+    listInfo,
+    getInfo,
+    delInfo,
+    addInfo,
+    updateInfo,
+  } from "@/api/doc/info";
+  import {
+    listDir,
+    getDir,
+    delDir,
+    addDir,
+    updateDir,
+    personalList,
+  } from "@/api/doc/dir";
+  import {
+    listLevel
+  } from "@/api/doc/level";
+
+  import Treeselect from "@riophae/vue-treeselect";
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+  export default {
+    name: "Info",
+    components: {
+      Treeselect,
+    },
+    data() {
+      return {
+        //标签列表
+        tags: [{
+            name: '十四大',
+            id: 0
+          },
+          {
+            name: '领导讲话',
+            id: 1
+          },
+          {
+            name: '会议精神',
+            id: 2
+          },
+          {
+            name: '党章',
+            id: 3
+          },
           {
+            name: '212专案',
+            id: 4
+          }
+        ],
+
+        //选择标签
+        dynamicTags: [],
+        inputVisible: false,
+        inputValue: "",
+
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 文件基本信息表格数据
+        infoList: [],
+        //目录ID
+        dirId: undefined,
+        //目录数据
+        dirList: undefined,
+        //文件等级数据
+        levelOptions: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          docName: null,
+          docLevel: null,
+          createYear: null,
+          params: {
+            tagId: null
+          }
+        },
+        // 表单参数
+        form: {},
+        defaultProps: {
+          children: "children",
+          label: "dirName",
+          id: "dirId",
+        },
+        // 表单校验
+        rules: {
+          docName: [{
             required: true,
             message: "文件名称不能为空",
             trigger: "blur",
-          },
-        ],
-        dirId: [
-          {
+          }, ],
+          dirId: [{
             required: true,
             message: "文件目录不能为空",
             trigger: "blur",
-          },
-        ],
-        docLevel: [
-          {
+          }, ],
+          docLevel: [{
             required: true,
             message: "文件级别不能为空",
             trigger: "blur",
-          },
-        ],
-      },
-    };
-  },
-  created() {
-    this.dirTree();
-  },
-  watch: {
-    "form.docPath": function (path, old) {
-      if (path && path.lastIndexOf("/") > -1) {
-        let name = path.slice(path.lastIndexOf("/") + 1);
-        this.form.docName = name.split("_")[0];
-      }
-    },
-  },
-  methods: {
-    //选择标签
-    handleClose(tag) {
-      this.form.tagList.map((i,index)=>{
-       if(tag==i.tagName){
-        this.form.tagList.splice(index,1)
-       }   
-      })
-      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
-    },
-    
-    showInput() {
-      this.inputVisible = true;
-      this.$nextTick((_) => {
-        this.$refs.saveTagInput.$refs.input.focus();
-      });
-    },
-    //固定的标签
-    handleInputConfirm1(tag) {
-      this.dynamicTags.push(
-      // {
-      //   tagId:tag.id,
-      //   tagName:tag.name,
-      tag.name
-      // }
-      );  
-      this.form.tagList.push({
-        tagId:tag.id,
-        tagName:tag.name,
-      });  
-    },
-    //自定义标签
-    handleInputConfirm() {
-      let inputValue = this.inputValue;
-      if (inputValue) {
-        this.dynamicTags.push(inputValue);
-      }
-      this.inputVisible = false;
-      this.inputValue = "";
-      this.form.tagList.push({
-        tagName:inputValue,
-      });  
-    },
-
-    /** 转换目录信息数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
-      }
-      return {
-        id: node.dirId,
-        label: node.dirName,
-        children: node.children,
+          }, ],
+        },
       };
     },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.dirId = data.dirId;
-      this.queryParams.dirId = this.dirId;
-      this.queryParams.searchValue = this.spaceId;
-      this.handleQuery();
-    },
-    //分享
-    handleShare(row) {
-      this.$router.push("/home/file/individual/share/user/" + row.docId);
-    },
-    /**下载按钮操作*/
-    handleDownload(row) {
-      location.href = row.docPath;
-    },
-    //预览
-    handlePreview(row) {
-      row.isEdit = false;
-      this.$tab.openPage("文件[" + row.docName + "]预览", '/doc/oo-edit/index/' + row.docId, row);
+    created() {
+      this.dirTree();
     },
-    //在线编辑
-    handleEdit(row) {
-      row.isEdit = true;
-      this.$tab.openPage(
-        "文件[" + row.docName + "]在线编辑",
-        "/doc/oo-edit/index/" + row.docId,
-        row
-      );
+    watch: {
+      "form.docPath": function(path, old) {
+        if (path && path.lastIndexOf("/") > -1) {
+          let name = path.slice(path.lastIndexOf("/") + 1);
+          this.form.docName = name.split("_")[0];
+        }
+      },
     },
-    //先获取左边目录树，拿到目录ID和spaceId才能查询
-    dirTree() {
-      this.loading = true;
-      personalList().then((response) => {
-        this.dirId = response.data[0].dirId;
-        this.spaceId = response.data[0].spaceId;
-        this.dirList = this.handleTree(response.data, "dirId");
+    methods: {
+      //选择标签
+      handleClose(tag) {
+        this.form.tagList.map((i, index) => {
+          if (tag == i.tagName) {
+            this.form.tagList.splice(index, 1)
+          }
+        })
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      },
 
+      showInput() {
+        this.inputVisible = true;
+        this.$nextTick((_) => {
+          this.$refs.saveTagInput.$refs.input.focus();
+        });
+      },
+      //固定的标签
+      handleInputConfirm1(tag) {
+        this.dynamicTags.push(
+          // {
+          //   tagId:tag.id,
+          //   tagName:tag.name,
+          tag.name
+          // }
+        );
+        this.form.tagList.push({
+          tagId: tag.id,
+          tagName: tag.name,
+        });
+      },
+      //自定义标签
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        if (inputValue) {
+          this.dynamicTags.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = "";
+        this.form.tagList.push({
+          tagName: inputValue,
+        });
+      },
+
+      /** 转换目录信息数据结构 */
+      normalizer(node) {
+        if (node.children && !node.children.length) {
+          delete node.children;
+        }
+        return {
+          id: node.dirId,
+          label: node.dirName,
+          children: node.children,
+        };
+      },
+      // 节点单击事件
+      handleNodeClick(data) {
+        this.dirId = data.dirId;
         this.queryParams.dirId = this.dirId;
         this.queryParams.searchValue = this.spaceId;
+        this.handleQuery();
+      },
+      //分享
+      handleShare(row) {
+        this.$router.push("/home/file/individual/share/user/" + row.docId);
+      },
+      /**下载按钮操作*/
+      handleDownload(row) {
+        location.href = row.docPath;
+      },
+      //预览
+      handlePreview(row) {
+        row.isEdit = false;
+        this.$tab.openPage("文件[" + row.docName + "]预览", '/doc/oo-edit/index/' + row.docId, row);
+      },
+      //在线编辑
+      handleEdit(row) {
+        row.isEdit = true;
+        this.$tab.openPage(
+          "文件[" + row.docName + "]在线编辑",
+          "/doc/oo-edit/index/" + row.docId,
+          row
+        );
+      },
+      //先获取左边目录树，拿到目录ID和spaceId才能查询
+      dirTree() {
+        this.loading = true;
+        personalList().then((response) => {
+          this.dirId = response.data[0].dirId;
+          this.spaceId = response.data[0].spaceId;
+          this.dirList = this.handleTree(response.data, "dirId");
+
+          this.queryParams.dirId = this.dirId;
+          this.queryParams.searchValue = this.spaceId;
+          this.getList();
+          //获取文件级别数据
+          listLevel().then((response) => {
+            this.levelOptions = response.rows;
+          });
+          this.loading = false;
+        });
+      },
+      /**处理文档级别数据*/
+      fileLevelData(row, col, value) {
+        const obj = this.levelOptions.find((item) => item.levelId == value);
+        return obj.levelName;
+      },
+      /**根据文档级别显示数据*/
+      checkLevel(row, role) {
+        try {
+          const obj = this.levelOptions.find(
+            (item) => item.levelId == row.docLevel
+          );
+          if (obj.levelRole.indexOf(role) != -1) {
+            return true;
+          } else {
+            return false;
+          }
+        } catch (e) {}
+      },
+      /** 查询文件基本信息列表 */
+      getList() {
+        this.loading = true;
+        listInfo(this.queryParams).then((response) => {
+          this.infoList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          docId: null,
+          dirId: this.dirId,
+          docName: null,
+          docType: null,
+          docSize: null,
+          classifyId: null,
+          docDesc: null,
+          docPath: null,
+          docLevel: null,
+          allowEdit: null,
+          docOf: null,
+          owner: null,
+          createYear: null,
+          createBy: null,
+          createTime: null,
+          updateBy: null,
+          updateTime: null,
+          remark: null,
+          isDel: null,
+          searchValue: this.spaceId,
+          tagList: [],
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        // const para = {
+        //   tagId: 123,
+        // }
+        console.log(this.queryParams);
+        // this.queryParams.params = para;
+
+        this.queryParams.pageNum = 1;
         this.getList();
-        //获取文件级别数据
-        listLevel().then((response) => {
-          this.levelOptions = response.rows;
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.queryParams.dirId = this.dirId;
+        this.queryParams.searchValue = this.spaceId;
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map((item) => item.docId);
+        this.single = selection.length !== 1;
+        this.multiple = !selection.length;
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.reset();
+        this.open = true;
+        this.title = "添加文件基本信息";
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        this.reset();
+        const docId = row.docId || this.ids;
+        getInfo(docId, row.createYear).then(response => {
+          this.form = response.data;
+          this.open = true;
+          this.title = "修改文件基本信息";
         });
-        this.loading = false;
-      });
-    },
-    /**处理文档级别数据*/
-    fileLevelData(row, col, value) {
-      const obj = this.levelOptions.find((item) => item.levelId == value);
-      return obj.levelName;
-    },
-    /**根据文档级别显示数据*/
-    checkLevel(row, role) {
-      try {
-        const obj = this.levelOptions.find(
-          (item) => item.levelId == row.docLevel
+      },
+      /** 提交按钮 */
+      submitForm() {
+        // console.log(this.form);
+        // console.log(this.dynamicTags);
+        this.$refs["form"].validate((valid) => {
+          if (valid) {
+            if (this.form.docId != null) {
+              updateInfo(this.form).then((response) => {
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              });
+            } else {
+              addInfo(this.form).then((response) => {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              });
+            }
+          }
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const docIds = row.docId || this.ids;
+        this.$modal
+          .confirm('是否确认删除文件基本信息编号为"' + docIds + '"的数据项？')
+          .then(function() {
+            return delInfo(docIds);
+          })
+          .then(() => {
+            this.getList();
+            this.$modal.msgSuccess("删除成功");
+          })
+          .catch(() => {});
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        this.download(
+          "doc/info/export", {
+            ...this.queryParams,
+          },
+          `info_${new Date().getTime()}.xlsx`
         );
-        if (obj.levelRole.indexOf(role) != -1) {
-          return true;
+      },
+      /**格式化文件大小数据*/
+      fileSizeData(row, col, value) {
+        const KB = 1;
+        const MB = KB * 1024;
+        const GB = MB * 1024;
+        if (value < MB) {
+          return `${(value / KB).toFixed(2)} KB`;
+        } else if (value < GB) {
+          return `${(value / MB).toFixed(2)} MB`;
         } else {
-          return false;
+          return `${(value / GB).toFixed(2)} GB`;
         }
-      } catch (e) {}
-    },
-    /** 查询文件基本信息列表 */
-    getList() {
-      this.loading = true;
-      listInfo(this.queryParams).then((response) => {
-        this.infoList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
+      },
     },
+  };
+</script>
 
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        docId: null,
-        dirId: this.dirId,
-        docName: null,
-        docType: null,
-        docSize: null,
-        classifyId: null,
-        docDesc: null,
-        docPath: null,
-        docLevel: null,
-        allowEdit: null,
-        docOf: null,
-        owner: null,
-        createYear: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null,
-        remark: null,
-        isDel: null,
-        searchValue: this.spaceId,
-        tagList:[],
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      const para = {
-        tagId: 123, 
+<style scoped lang='scss'>
+  .containe {
+    color: #7ea4c8;
+    font-size: 0.14rem;
+    font-family: PingFang SC-Medium, PingFang SC;
+    font-weight: 500;
+    padding-left: calc(100vw * (20 / 1920));
+
+    .header {
+      width: calc(100vw * (300 / 1920));
+      height: calc(100vh * (22 / 1080));
+      margin-top: calc(100vh * (20 / 1080));
+      margin-bottom: calc(100vh * (20 / 1080));
+      display: flex;
+      align-items: center;
+
+      img {
+        width: calc(100vw * (16 / 1920));
+        height: calc(100vh * (16 / 1080));
+        border: 1px dashed grey;
+        margin-left: 3px;
+        margin-right: 3px;
       }
-      console.log(this.queryParams.params);
-      this.queryParams.params = para;
 
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.queryParams.dirId = this.dirId;
-      this.queryParams.searchValue = this.spaceId;
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.docId);
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加文件基本信息";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const docId = row.docId || this.ids;
-      getInfo(docId, row.createYear).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改文件基本信息";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      // console.log(this.form);
-      // console.log(this.dynamicTags);
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-          if (this.form.docId != null) {
-            updateInfo(this.form).then((response) => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addInfo(this.form).then((response) => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const docIds = row.docId || this.ids;
-      this.$modal
-        .confirm('是否确认删除文件基本信息编号为"' + docIds + '"的数据项？')
-        .then(function () {
-          return delInfo(docIds);
-        })
-        .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        })
-        .catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download(
-        "doc/info/export",
-        {
-          ...this.queryParams,
-        },
-        `info_${new Date().getTime()}.xlsx`
-      );
-    },
-    /**格式化文件大小数据*/
-    fileSizeData(row, col, value) {
-      const KB = 1;
-      const MB = KB * 1024;
-      const GB = MB * 1024;
-      if (value < MB) {
-        return `${(value / KB).toFixed(2)} KB`;
-      } else if (value < GB) {
-        return `${(value / MB).toFixed(2)} MB`;
-      } else {
-        return `${(value / GB).toFixed(2)} GB`;
+      .top1 {
+        color: #2e8aecff;
       }
-    },
-  },
-};
-</script>
-  
-<style scoped lang='scss'>
-.containe {
-  color: #7ea4c8;
-  font-size: 0.14rem;
-  font-family: PingFang SC-Medium, PingFang SC;
-  font-weight: 500;
-  padding-left: calc(100vw * (20 / 1920));
-  .header {
-    width: calc(100vw * (300 / 1920));
-    height: calc(100vh * (22 / 1080));
-    margin-top: calc(100vh * (20 / 1080));
-    margin-bottom: calc(100vh * (20 / 1080));
-    display: flex;
-    align-items: center;
-    img {
-      width: calc(100vw * (16 / 1920));
-      height: calc(100vh * (16 / 1080));
-      border: 1px dashed grey;
-      margin-left: 3px;
-      margin-right: 3px;
     }
-    .top1 {
-      color: #2e8aecff;
+
+    .title {
+      height: calc(100vh * (22 / 1080));
+      margin-top: calc(100vh * (20 / 1080));
+      margin-bottom: calc(100vh * (20 / 1080));
+      color: #ffffffff;
+      font-size: 0.16rem;
+      font-weight: bold;
+      line-height: calc(100vh * (22 / 1080));
     }
-  }
-  .title {
-    height: calc(100vh * (22 / 1080));
-    margin-top: calc(100vh * (20 / 1080));
-    margin-bottom: calc(100vh * (20 / 1080));
-    color: #ffffffff;
-    font-size: 0.16rem;
-    font-weight: bold;
-    line-height: calc(100vh * (22 / 1080));
-  }
-  .main {
-    width: calc(100vw * (1876 / 1920));
-    height: calc(100vh * (930 / 1080));
-    .app-container {
+
+    .main {
       width: calc(100vw * (1876 / 1920));
       height: calc(100vh * (930 / 1080));
-      padding: 0;
-    }
-    .main-left {
-      width: calc(100vw * (260 / 1920));
-      height: calc(100vh * (930 / 1080));
-      margin-right: calc(100vw * (20 / 1920));
-      margin-left: calc(100vw * (10 / 1920));
-      background: url(../../../assets/img/Group-609.png);
-      background-size: calc(100vw * (260 / 1920)) calc(100vh * (930 / 1080));
-      .head-top {
-        color: #ffffffff;
-        font-size: 0.2rem;
-        padding-left: calc(100vw * (15 / 1920));
-        padding-top: calc(100vh * (18 / 1080));
-      }
-      //左边下拉菜单
-      .head-container {
-        margin-top: -5px;
+
+      .app-container {
+        width: calc(100vw * (1876 / 1920));
+        height: calc(100vh * (930 / 1080));
+        padding: 0;
       }
-    }
-    .main-right {
-      width: calc(100vw * (1600 / 1920));
-      height: calc(100vh * (930 / 1080));
-      background: url(../../../assets/img/Group-610.png);
-      background-size: calc(100vw * (1600 / 1920)) calc(100vh * (930 / 1080));
-      p {
-        color: #ffffffff;
-        font-size: 0.16rem;
-        padding-left: calc(100vw * (15 / 1920));
-        padding-top: calc(100vh * (18 / 1080));
+
+      .main-left {
+        width: calc(100vw * (260 / 1920));
+        height: calc(100vh * (930 / 1080));
+        margin-right: calc(100vw * (20 / 1920));
+        margin-left: calc(100vw * (10 / 1920));
+        background: url(../../../assets/img/Group-609.png);
+        background-size: calc(100vw * (260 / 1920)) calc(100vh * (930 / 1080));
+
+        .head-top {
+          color: #ffffffff;
+          font-size: 0.2rem;
+          padding-left: calc(100vw * (15 / 1920));
+          padding-top: calc(100vh * (18 / 1080));
+        }
+
+        //左边下拉菜单
+        .head-container {
+          margin-top: -5px;
+        }
       }
-      .main-right-top {
-        height: calc(100vh * (60 / 1080));
-        margin-top: calc(100vw * (25 / 1920));
-        .reset1 {
-          color: #2e8aecff;
+
+      .main-right {
+        width: calc(100vw * (1600 / 1920));
+        height: calc(100vh * (930 / 1080));
+        background: url(../../../assets/img/Group-610.png);
+        background-size: calc(100vw * (1600 / 1920)) calc(100vh * (930 / 1080));
+
+        p {
+          color: #ffffffff;
+          font-size: 0.16rem;
+          padding-left: calc(100vw * (15 / 1920));
+          padding-top: calc(100vh * (18 / 1080));
+        }
+
+        .main-right-top {
+          height: calc(100vh * (60 / 1080));
+          margin-top: calc(100vw * (25 / 1920));
+
+          .reset1 {
+            color: #2e8aecff;
+            background: transparent;
+            border: 1px solid #2E8AECFF;
+          }
+        }
+
+        .mb8 {
+          margin-top: 20px;
+        }
+
+        .main-right-table {
           background: transparent;
-          border: 1px solid #2E8AECFF;
+          color: #7ea4c8ff;
+        }
+
+        //表格底部
+        .pagination-container {
+          width: calc(100vw * (1540 / 1920));
+          height: calc(100vh * (50 / 1080));
+          background: transparent;
+          padding: 0 !important;
+          margin: 0;
+          margin-left: calc(100vw * (20 / 1920));
+          margin-top: calc(100vh * (10 / 1080));
         }
-      }
-      .mb8 {
-        margin-top: 20px;
-      }
-      .main-right-table {
-        background: transparent;
-        color: #7ea4c8ff;
-      }
-      //表格底部
-      .pagination-container {
-        width: calc(100vw * (1540 / 1920));
-        height: calc(100vh * (50 / 1080));
-        background: transparent;
-        padding: 0 !important;
-        margin: 0;
-        margin-left: calc(100vw * (20 / 1920));
-        margin-top: calc(100vh * (10 / 1080));
       }
     }
   }
-}
-//标签按钮
-::v-deep .el-tag {
-  color: #DF9439FF;
-  border: 1px solid #FF9839FF;
-  background: #BBA99240;
-  margin-left: 3px;
-  margin-bottom: 3px;
-  height: calc(100vh * (35 / 1080));
-  line-height: calc(100vh * (35 / 1080));
-}
-//左边下拉菜单样式
-::v-deep .el-tree {
-  width: calc(100vw * (200 / 1920));
-  margin-top: calc(100vh * (30 / 1080));
-  background: transparent;
-  color: #7ea4c8ff;
-}
-::v-deep .el-tree-node {
-  width: calc(100vw * (232 / 1920));
-}
-//悬停时的样式
-::v-deep .el-tree-node__content:hover {
-  background: #293667ff;
-}
-//右边顶部字体样式
-::v-deep .el-form-item__label {
-  color: #2e8aecff;
-}
-//右边顶部搜索框样式
-::v-deep .el-input__inner {
-  background-color: transparent;
-  border: 1px solid #01d1ffff;
-  color: #ffffffcc;
-}
-::v-deep .el-form-item--small .el-form-item__content {
-  width: calc(100vw * (220 / 1920));
-}
-//右边顶部标签搜索
-::v-deep .el-select > .el-input {
+
+  //标签按钮
+  ::v-deep .el-tag {
+    color: #DF9439FF;
+    border: 1px solid #FF9839FF;
+    background: #BBA99240;
+    margin-left: 3px;
+    margin-bottom: 3px;
+    height: calc(100vh * (35 / 1080));
+    line-height: calc(100vh * (35 / 1080));
+  }
+
+  //左边下拉菜单样式
+  ::v-deep .el-tree {
+    width: calc(100vw * (200 / 1920));
+    margin-top: calc(100vh * (30 / 1080));
+    background: transparent;
+    color: #7ea4c8ff;
+  }
+
+  ::v-deep .el-tree-node {
+    width: calc(100vw * (232 / 1920));
+  }
+
+  //悬停时的样式
+  ::v-deep .el-tree-node__content:hover {
+    background: #293667ff;
+  }
+
+  //右边顶部字体样式
+  ::v-deep .el-form-item__label {
+    color: #2e8aecff;
+  }
+
+  //右边顶部搜索框样式
+  ::v-deep .el-input__inner {
+    background-color: transparent;
+    border: 1px solid #01d1ffff;
+    color: #ffffffcc;
+  }
+
+  ::v-deep .el-form-item--small .el-form-item__content {
+    width: calc(100vw * (220 / 1920));
+  }
+
+  //右边顶部标签搜索
+  ::v-deep .el-select>.el-input {
     width: calc(100vw * (180 / 1920));
-}
-//右边表格线条隐藏
-::v-deep .el-table::before {
-  height: 0;
-}
-//table样式
-::v-deep .el-table th {
-  background: #016c9aa6;
-  color: #2e8aec;
-}
-::v-deep .el-table tr {
-  background: transparent;
-}
-::v-deep .el-table tbody tr:hover > td {
-  background-color: #016c9a78 !important;
-}
-::v-deep .el-table td.el-table__cell {
-  border-bottom: 1px solid #006c9aff;
-}
-::v-deep .el-table th.el-table__cell.is-leaf {
-  border-bottom: 1px solid #006c9aff;
-}
-//搜索刷新按钮颜色
-::v-deep .el-button.is-circle {
-  background: #006c9aff;
-  color: white;
-}
-//按钮的样式
-::v-deep .el-button--primary.is-plain,
-.el-button--success.is-plain.is-disabled,
-.el-button--danger.is-plain.is-disabled,
-.el-button--warning.is-plain,
-.el-button--success.is-plain,
-.el-button--danger.is-plain {
-  background-color: #002a5cff;
-  border: none;
-  color: #2e8aec;
-}
-//新增/修改弹窗样式
-::v-deep .el-dialog__title {
-  color: white;
-}
-::v-deep .el-dialog .el-form-item {
-  margin-top: calc(100vw * (30 / 1920));
-}
-::v-deep .el-upload-list__item:hover {
-  background: #002659ff;
-}
-//建议框样式
-::v-deep .el-textarea__inner {
-  background: transparent;
-  resize: none;
-}
-//传文件的内容颜色
-::v-deep .el-link.el-link--default {
-  color: #006c9aff;
-}
-//上传弹窗位置高度
-::v-deep .el-dialog:not(.is-fullscreen) {
-  margin-top: 1vh !important;
-}
-::v-deep .el-form {
- height: calc(100vh * (800 / 1080));
-}
-//弹窗底部按钮的位置
-::v-deep .el-dialog__footer {
-  padding: 0;
-}
-::v-deep .el-dialog5 {
-  width: calc(100vw * (800 / 1920)) !important;
-  height: calc(100vh * (1050 / 1080)) !important;
-  background: url(../../../assets/img/Group-585.png);
-  background-size: calc(100vw * (800 / 1920)) calc(100vh * (1050 / 1080));
-  .el-dialog__header {
-    padding-bottom: 0;
   }
-  .el-upload__tip {
-    font-size: 12px;
+
+  //右边表格线条隐藏
+  ::v-deep .el-table::before {
+    height: 0;
+  }
+
+  //table样式
+  ::v-deep .el-table th {
+    background: #016c9aa6;
+    color: #2e8aec;
+  }
+
+  ::v-deep .el-table tr {
+    background: transparent;
+  }
+
+  ::v-deep .el-table tbody tr:hover>td {
+    background-color: #016c9a78 !important;
+  }
+
+  ::v-deep .el-table td.el-table__cell {
+    border-bottom: 1px solid #006c9aff;
+  }
+
+  ::v-deep .el-table th.el-table__cell.is-leaf {
+    border-bottom: 1px solid #006c9aff;
+  }
+
+  //搜索刷新按钮颜色
+  ::v-deep .el-button.is-circle {
+    background: #006c9aff;
+    color: white;
+  }
+
+  //按钮的样式
+  ::v-deep .el-button--primary.is-plain,
+  .el-button--success.is-plain.is-disabled,
+  .el-button--danger.is-plain.is-disabled,
+  .el-button--warning.is-plain,
+  .el-button--success.is-plain,
+  .el-button--danger.is-plain {
+    background-color: #002a5cff;
+    border: none;
+    color: #2e8aec;
+  }
+
+  //新增/修改弹窗样式
+  ::v-deep .el-dialog__title {
+    color: white;
+  }
+
+  ::v-deep .el-dialog .el-form-item {
+    margin-top: calc(100vw * (30 / 1920));
+  }
+
+  ::v-deep .el-upload-list__item:hover {
+    background: #002659ff;
+  }
+
+  //建议框样式
+  ::v-deep .el-textarea__inner {
+    background: transparent;
+    resize: none;
+  }
+
+  //传文件的内容颜色
+  ::v-deep .el-link.el-link--default {
     color: #006c9aff;
-    margin-top: 0px;
   }
-  .el-upload-list__item {
-    margin: 0;
+
+  //上传弹窗位置高度
+  ::v-deep .el-dialog:not(.is-fullscreen) {
+    margin-top: 1vh !important;
   }
 
-  .el-tag + .el-tag {
-    margin-left: 10px;
+  ::v-deep .el-form {
+    height: calc(100vh * (800 / 1080));
   }
-  .button-new-tag {
-    margin-left: 10px;
-    height: 32px;
-    line-height: 30px;
-    padding-top: 0;
-    padding-bottom: 0;
+
+  //弹窗底部按钮的位置
+  ::v-deep .el-dialog__footer {
+    padding: 0;
   }
-  .input-new-tag {
-    width: 90px;
-    margin-left: 10px;
-    vertical-align: bottom;
+
+  ::v-deep .el-dialog5 {
+    width: calc(100vw * (800 / 1920)) !important;
+    height: calc(100vh * (1050 / 1080)) !important;
+    background: url(../../../assets/img/Group-585.png);
+    background-size: calc(100vw * (800 / 1920)) calc(100vh * (1050 / 1080));
+
+    .el-dialog__header {
+      padding-bottom: 0;
+    }
+
+    .el-upload__tip {
+      font-size: 12px;
+      color: #006c9aff;
+      margin-top: 0px;
+    }
+
+    .el-upload-list__item {
+      margin: 0;
+    }
+
+    .el-tag+.el-tag {
+      margin-left: 10px;
+    }
+
+    .button-new-tag {
+      margin-left: 10px;
+      height: 32px;
+      line-height: 30px;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .input-new-tag {
+      width: 90px;
+      margin-left: 10px;
+      vertical-align: bottom;
+    }
   }
-}
 </style>
-  

vue.config.js

@@ -35,8 +35,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.188.99:8080`,
-        // target: `http://192.168.1.11:8080`,
+        // target: `http://192.168.188.99:8080`,
+        target: `http://localhost:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''