资源管理

src/modules/basic/routes/routes.js

@@ -10,6 +10,7 @@ import app_list from "../view/app_list.vue";
 import privilege_group_list from "../view/privilege_group_list.vue";
 import privilege_tree from "../view/privilege_tree.vue";
 import role_privilege_settings from "../view/role_privilege_settings.vue";
+import resource_list from "../view/resource_list.vue";
 
 export default [
   {
@@ -69,6 +70,11 @@ export default [
         path: "role_privilege_settings", //角色权限设置
         meta: { privilegeCodes: "index_role_privilege_settings" },
         component: role_privilege_settings
+      },
+      {
+        path: "resource_list", //资源列表
+        meta: { privilegeCodes: "index_resource_list" },
+        component: resource_list
       }
     ]
   }

src/modules/basic/view/privilege_tree.vue

@@ -107,6 +107,7 @@
             title="修改权限"
             width="450px"
             :visible.sync="updateDialog.show"
+            :close-on-click-modal="false"
           >
             <el-form
               :model="updateDialog.privilege"

src/modules/basic/view/resource_list.vue

@@ -0,0 +1,540 @@
+<template>
+  <section class="content">
+    <div class="box box-info">
+      <div
+        class="box-body"
+        v-loading.body="fileLoading"
+        v-loading.fullscreen="fileLoading"
+        element-loading-text="请稍后..."
+      >
+        <!-- 表单 -->
+        <el-form inline :model="formSearch">
+          <el-form-item v-if="isSuperAdmin" label="学校">
+            <el-select
+              v-model="formSearch.rootOrgId"
+              placeholder="请选择"
+              style="width: 180px"
+            >
+              <el-option
+                v-for="item in rootOrgList"
+                :label="item.name"
+                :value="item.id"
+                :key="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="名称">
+            <el-input
+              placeholder="请输入名称"
+              v-model="formSearch.name"
+              style="width: 180px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              size="small"
+              type="primary"
+              icon="el-icon-search"
+              @click="handleSearchBtn"
+            >
+              查询
+            </el-button>
+          </el-form-item>
+        </el-form>
+
+        <div class="block-seperator"></div>
+
+        <span>当前目录：{{ this.curDir }}</span>
+        <span style="float:right">
+          <el-button
+            size="small"
+            type="primary"
+            @click="parentDir"
+            :disabled="this.parentDirBtn()"
+          >
+            上一级
+          </el-button>
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-plus"
+            @click="addDir"
+          >
+            新增目录
+          </el-button>
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-plus"
+            @click="addFile"
+          >
+            新增文件
+          </el-button>
+        </span>
+        <div style="width: 100%; margin-bottom: 10px;"></div>
+
+        <!-- 页面列表 -->
+        <el-table
+          :data="tableData"
+          border
+          resizable
+          stripe
+          style="width: 100%;"
+        >
+          <el-table-column width="50" label="ID">
+            <span slot-scope="scope">{{ scope.row.id }}</span>
+          </el-table-column>
+          <el-table-column width="250" label="名称">
+            <span slot-scope="scope">
+              <span style="width: 30px;height: 20px;display:block;float:left">
+                <img
+                  v-if="scope.row.isFile == 0"
+                  src="../assets/img/dir.png"
+                  style="height: 20px;width: 20px;"
+                />
+              </span>
+              <span
+                ><a
+                  v-if="scope.row.isFile == 0"
+                  href="javascript:void(0)"
+                  @click="toDir(scope.row)"
+                  >{{ scope.row.name }}</a
+                ><a
+                  v-if="scope.row.isFile == 1"
+                  target="_blank"
+                  :href="scope.row.fileUrl"
+                  >{{ scope.row.name }}</a
+                ></span
+              ></span
+            >
+          </el-table-column>
+          <el-table-column label="路径">
+            <span slot-scope="scope">{{ scope.row.filePath }}</span>
+          </el-table-column>
+          <el-table-column width="180" label="创建时间">
+            <span slot-scope="scope">{{ scope.row.creationTime }}</span>
+          </el-table-column>
+          <el-table-column :context="_self" label="操作" width="150">
+            <div slot-scope="scope">
+              <el-button
+                size="mini"
+                type="danger"
+                plain
+                @click="deleteRes(scope.row)"
+              >
+                <i class="el-icon-delete"></i> 删除
+              </el-button>
+            </div>
+          </el-table-column>
+        </el-table>
+        <div class="page pull-right">
+          <el-pagination
+            v-if="paginationShow"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :page-sizes="[10, 20, 50, 100]"
+            @size-change="handleSizeChange"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          />
+        </div>
+      </div>
+      <el-dialog
+        title="新增目录"
+        width="500px"
+        :visible.sync="dirModel"
+        :close-on-click-modal="false"
+        @close="closeDirModel"
+      >
+        <el-form
+          :inline="true"
+          :model="dirForm"
+          ref="dirForm"
+          :rules="dirRules"
+          label-width="90px"
+          :key="dirModelKey"
+        >
+          <el-row>
+            <el-form-item label="目录名称" prop="dirName">
+              <el-input
+                class="pull-length"
+                v-model="dirForm.dirName"
+                maxlength="50"
+                placeholder="可输入字母,数字,-,_"
+              />
+            </el-form-item>
+          </el-row>
+          <el-row class="pull-center">
+            <el-button
+              type="primary"
+              @click="subDir"
+              :loading="this.dirForm.loading"
+              >确定</el-button
+            >
+            <el-button @click="closeDirModel">取消</el-button>
+          </el-row>
+        </el-form>
+      </el-dialog>
+      <el-dialog
+        title="新增文件"
+        width="550px"
+        :visible.sync="fileModel"
+        :close-on-click-modal="false"
+        @close="closeFileModel"
+      >
+        <el-form
+          :inline="true"
+          :model="fileForm"
+          ref="fileForm"
+          :rules="fileRules"
+          label-width="90px"
+          :key="fileModelKey"
+        >
+          <el-row>
+            <el-form-item label="文件" prop="dataFile">
+              <el-input
+                class="pull-length"
+                v-model="fileForm.fileName"
+                :readonly="true"
+                placeholder="文件最大限制50M"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-upload :before-upload="handleUploadFile" action="/upload">
+                <el-button
+                  type="primary"
+                  size="small"
+                  icon="ios-cloud-upload-outline"
+                  >请选择文件
+                </el-button>
+              </el-upload>
+            </el-form-item>
+          </el-row>
+          <el-row class="pull-center">
+            <el-button
+              type="primary"
+              @click="subFile"
+              :loading="this.fileForm.loading"
+              >确定</el-button
+            >
+            <el-button @click="closeFileModel">取消</el-button>
+          </el-row>
+        </el-form>
+      </el-dialog>
+    </div>
+  </section>
+</template>
+<script>
+import { CORE_API } from "@/constants/constants.js";
+import { mapState } from "vuex";
+
+export default {
+  name: "ResourceList",
+  data() {
+    var validateFile = function(rule, value, callback) {
+      if (value) {
+        var upFileName = value.name;
+        var reg = /^[a-zA-Z\\-_0-9.]{1,50}$/;
+        if (!upFileName.match(reg)) {
+          return callback(
+            new Error("文件名长度最大为50且只能包含字母,数字,'-','_','.'")
+          );
+        } else if (value.size > 1024 * 1024 * 50) {
+          return callback(new Error("文件大小限制为50M"));
+        } else {
+          callback();
+        }
+      } else {
+        callback();
+      }
+    };
+    return {
+      fileLoading: false,
+      dirModel: false,
+      dirModelKey: Math.random(),
+      fileModel: false,
+      fileModelKey: Math.random(),
+      curDir: "",
+      parentIds: [],
+      paginationShow: false,
+      rootOrgList: [],
+      formSearch: {
+        parentId: -1,
+        rootOrgId: null,
+        code: "",
+        name: ""
+      },
+      dirForm: {
+        dirName: "",
+        loading: false
+      },
+      fileForm: {
+        fileName: null,
+        dataFile: null,
+        loading: false
+      },
+      loading: true,
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 10,
+
+      dirRules: {
+        dirName: [
+          { required: true, message: "请输入目录名称", trigger: "blur" },
+          {
+            pattern: /^[a-zA-Z\\-_0-9]{1,50}$/,
+            message: "目录名称必须为1-50位字母,数字,'-','_'组合",
+            trigger: "blur"
+          }
+        ]
+      },
+      fileRules: {
+        dataFile: [
+          {
+            required: true,
+            type: "object",
+            message: "请选择文件",
+            trigger: "change"
+          },
+          {
+            validator: validateFile,
+            type: "object",
+            trigger: "change"
+          }
+        ]
+      }
+    };
+  },
+  computed: {
+    ...mapState({ user: state => state.user }),
+    isSuperAdmin() {
+      return this.user.roleList.some(role => role.roleCode == "SUPER_ADMIN");
+    }
+  },
+  methods: {
+    handleUploadFile(file) {
+      this.fileForm.dataFile = file;
+      this.fileForm.fileName = file.name;
+      return false;
+    },
+    async subFile() {
+      const res = await this.$refs.fileForm.validate();
+
+      if (res === false) {
+        return;
+      }
+      this.fileForm.loading = true;
+      var params =
+        "?parentId=" +
+        this.formSearch.parentId +
+        "&rootOrgId=" +
+        this.formSearch.rootOrgId;
+      var url = CORE_API + "/resource/addFile" + params;
+      let formData = new FormData();
+      formData.append("dataFile", this.fileForm.dataFile);
+      this.$httpWithMsg
+        .post(url, formData)
+        .then(() => {
+          this.$notify({
+            type: "success",
+            message: "上传成功！"
+          });
+          this.closeFileModel();
+          this.searchForm();
+        })
+        .finally(() => (this.fileForm.loading = false));
+    },
+    closeFileModel() {
+      this.fileModel = false;
+      this.$refs.fileForm.resetFields();
+      this.fileModelKey = Math.random();
+      this.fileForm.fileName = null;
+      this.fileForm.dataFile = null;
+    },
+    closeDirModel() {
+      this.dirModel = false;
+      this.dirForm.dirName = null;
+      this.dirModelKey = Math.random();
+    },
+    async subDir() {
+      let res = await this.$refs.dirForm.validate();
+      if (!res) {
+        return;
+      }
+      this.dirForm.loading = true;
+      var url = CORE_API + "/resource/addDir";
+      this.$httpWithMsg
+        .post(url, {
+          parentId: this.formSearch.parentId,
+          rootOrgId: this.formSearch.rootOrgId,
+          name: this.dirForm.dirName
+        })
+        .then(() => {
+          this.$notify({
+            type: "success",
+            message: "新增成功！"
+          });
+          this.closeDirModel();
+          this.searchForm();
+        })
+        .finally(() => (this.dirForm.loading = false));
+    },
+    lastCurDir() {
+      this.curDir = this.curDir.substring(0, this.curDir.length - 1);
+      var index = this.curDir.lastIndexOf("/");
+      this.curDir = this.curDir.substring(0, index + 1);
+    },
+    toDir(row) {
+      this.curDir = this.curDir + row.name + "/";
+      this.parentIds.push(this.formSearch.parentId);
+      this.formSearch.parentId = row.id;
+      this.currentPage = 1;
+      this.searchForm();
+    },
+    parentDirBtn() {
+      if (this.curDir == "/" || this.curDir == "") {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    deleteRes(row) {
+      this.$confirm("确定删除？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        var url = CORE_API + "/resource/" + row.id;
+        this.$httpWithMsg.delete(url).then(() => {
+          this.$notify({
+            type: "success",
+            message: "删除成功！"
+          });
+          this.searchForm();
+        });
+      });
+    },
+    parentDir() {
+      this.formSearch.parentId = this.parentIds.pop();
+      this.lastCurDir();
+      this.currentPage = 1;
+      this.searchForm();
+    },
+    addFile() {
+      if (this.formSearch.rootOrgId == null) {
+        this.$notify({
+          type: "warning",
+          message: "请选择学校"
+        });
+        return;
+      }
+      this.fileModel = true;
+    },
+    addDir() {
+      if (this.formSearch.rootOrgId == null) {
+        this.$notify({
+          type: "warning",
+          message: "请选择学校"
+        });
+        return;
+      }
+      this.dirModel = true;
+    },
+    handleSearchBtn() {
+      this.currentPage = 1;
+      this.searchForm();
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.searchForm();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.searchForm();
+    },
+    //查询
+    searchForm() {
+      if (this.formSearch.rootOrgId == null) {
+        this.$notify({
+          type: "warning",
+          message: "请选择学校"
+        });
+        return;
+      }
+      this.loading = true;
+      this.fileLoading = true;
+      var param = new URLSearchParams(this.formSearch);
+      var url =
+        CORE_API +
+        "/resource/page/" +
+        (this.currentPage - 1) +
+        "/" +
+        this.pageSize +
+        "?" +
+        param;
+      this.$httpWithMsg
+        .get(url)
+        .then(response => {
+          this.tableData = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+
+          this.$nextTick(function() {
+            this.paginationShow = true;
+          });
+        })
+        .finally(() => (this.fileLoading = false));
+    },
+    init() {
+      if (this.isSuperAdmin) {
+        this.$httpWithMsg
+          .get(CORE_API + "/org/getRootOrgList")
+          .then(response => {
+            this.rootOrgList = response.data;
+          });
+      } else {
+        this.formSearch.rootOrgId = this.user.rootOrgId;
+        this.searchForm();
+      }
+    }
+  },
+  watch: {
+    "formSearch.rootOrgId": {
+      immediate: false,
+      handler(val) {
+        if (val == null) {
+          this.curDir = "";
+        } else {
+          this.curDir = "/";
+          this.formSearch.parentId = -1;
+          this.handleSearchBtn();
+        }
+      }
+    }
+  },
+  //初始化查询
+  created() {
+    this.init();
+  }
+};
+</script>
+
+<style scoped>
+.page {
+  margin-top: 10px;
+}
+
+.el-upload {
+  width: 80px;
+}
+
+.pull-length {
+  width: 300px;
+}
+.pull-center {
+  margin-top: 20px;
+}
+</style>