lzga-ui/src/views1/Personal/Space/SpaceView.vue

<template>
  <div class="containe">
    <div class="header">
      <span>个人设置</span>
      <img src="../../../assets/img/chevron-down.png" alt="" />
      <img src="../../../assets/img/slash.png" alt="" />
      <span class="top1">个人存储空间</span>
      <img src="../../../assets/img/chevron-up.png" alt="" class="top2" />
      <img src="../../../assets/img/slash.png" alt="" />
    </div>
    <div class="title">个人存储空间</div>
    <div class="main">
      <h3>目录列表</h3>
      <div class="main-main">
        <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>
        </div>
      </div>
    </div>
    <div class="footer">   
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5" class="mb8-col">
          个人存储空间：
          <el-progress :text-inside="true" :stroke-width="15" :percentage="percentage">
          </el-progress>
          {{ spaceData.avlCap}} G可用
          （共{{spaceData.spaceCap}}G）
          <el-button
            type="primary"
            plain
            size="mini"
            @click="handleExpand"
            class="capacity"
            >扩容</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
        v-if="flag"
      >
        <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>
  </div>
</template>
  
  <script>
import "@/styles1/element-ui1.scss";

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 {
      //判断是否弹出扩容界面
      flag:true,
      // 遮罩层
      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",
          },
        ],
        //baifenbi
      },
      percentage:0
    };
  },
  created() {
    this.getList();
    this.spaceInfo();
  },
//   mounted(){
//       if(this.spaceData.searchValue=="1"){
//        alert('已存在扩容申请')
//       }  
// },
  methods: {
    /** 查询个人空间相关信息 */
    spaceInfo() {
      this.loading = true;
      getPersonalSpace().then((response) => {
        this.spaceData = response.data;
        this.loading = false;
        // console.log(this.spaceData);
        // console.log(this.spaceData.searchValue);
        return this.percentage =(this.spaceData.usedCap
        /this.spaceData.spaceCap)*100;
      });
    },
    
    /** 查询目录信息列表 */
    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");
      });
    },
    
    /** 扩容申请 */
    handleExpand(row) {
      if(this.spaceData.isApply=="1"){
        this.$modal.alertWarning("扩容申请已经存在了") 
        this.flag=false
      }
      if(this.spaceData.isApply=="0"){
        this.flag=true
      }
      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 = "扩容申请";
      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();
            });
          }
        }
      });
    },
    /** 提交按钮 */
    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>
  
  <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));
  }
  .main {
    width: calc(100vw * (1876 / 1920));
    height: calc(100vh * (774 / 1080));
    background: url(../../../assets/img/Group-610.png);
    background-size: calc(100vw * (1876 / 1920)) calc(100vh * (774 / 1080));
    h3 {
      font-size: 0.2rem;
      color: #ffffffff;
      padding-top: calc(100vh * (21 / 1080));
      padding-left: calc(100vw * (30 / 1920));
    }
    .main-main {
      width: calc(100vw * (1845 / 1920));
      height: calc(100vh * (700 / 1080));
      margin-left: calc(100vw * (16 / 1920));
      margin-top: calc(100vh * (20 / 1080));
      // background: seagreen;
      .app-container {
        width: calc(100vw * (1845 / 1920));
        height: calc(100vh * (700 / 1080));
        padding: 0;
      }
      .el-table {
        width: calc(100vw * (1830 / 1920));
        height: calc(100vh * (646 / 1080));
        margin-left: calc(100vw * (8 / 1920));
        border: 1px solid #006C9AFF;
        overflow: auto;
        background: transparent;
        color: #7EA4C8;
      }
    }
    //滚动条样式
    ::-webkit-scrollbar {
      width: 3.5px;
    }
    ::-webkit-scrollbar-track {
      background-color: rgba(0, 0, 0, 0);
    }
    ::-webkit-scrollbar-thumb {
      background: #2e8aec;
      border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #2e8aec;
    }
  }
  //底部
  .footer {
    width: calc(100vw * (1876 / 1920));
    height: calc(100vh * (92 / 1080));
    margin-top: calc(100vh * (20 / 1080));
    background: url(../../../assets/img/Group-611.png);
    background-size: calc(100vw * (1876 / 1920)) calc(100vh * (92 / 1080));
    display: flex;
    align-items: center;
    padding-left: calc(100vw * (34 / 1920));
    color: #ffffffff;
    font-size: 0.16rem;
    .el-progress {
      width: calc(100vw * (270 / 1920));
      margin-right: calc(100vw * (10 / 1920));
    }
   .mb8-col{
    width: calc(100vw * (1800 / 1920));
    display: flex;
    align-items: center;
    height: calc(100vh * (60 / 1080));
    margin-top: calc(100vh * (15 / 1080));
   }
   .capacity{
    background: #2E8AECFF;
    color: white;
    margin-left: calc(100vw * (10 / 1920));
    text-align: center;
   }
  }
}
::v-deep .el-table th{
 background: linear-gradient(90deg, rgba(19,37,93,0) 0%, rgba(1,108,154,0.65) 52%, rgba(19,37,93,0) 100%, rgba(19,37,93,0) 100%);
 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--primary.is-plain { 
    background-color: #002A5CFF; 
    border: none;
}
::v-deep .el-button--info.is-plain { 
    background-color: #002A5CFF; 
    border: none;
    color: #1890ff;
}
::v-deep .el-table::before {
    width: 0;
}
//搜索刷新按钮颜色
::v-deep .el-button.is-circle{
    background: #006C9AFF;
    color: white;
}
//进度条样式
::v-deep .el-progress-bar__outer{
    background: transparent !important;
    border: 1px solid #2E8AECFF;
    border-radius: 0;
}
::v-deep .el-progress-bar__inner{
    border-radius: 0;
}
::v-deep .el-progress-bar__innerText{
    font-size: 0;
}
::v-deep .el-dialog__body{
    padding-bottom: 0;
}
::v-deep .el-dialog__title{
    color: white;
}
::v-deep .el-form-item__label{
    color: #2E8AECFF;
}
::v-deep .el-textarea__inner{
    background: transparent;
}
::v-deep .el-input--medium .el-input__inner{
    background: transparent;
}
::v-deep .el-input-number--medium .el-input-number__decrease {
    background: transparent;
}
::v-deep .el-input-number--medium .el-input-number__increase {
    background: transparent;
}
::v-deep label {
    color: white;
    margin-left: 10px;
}
</style>