用户管理调整

src/components/ImportFile.vue

@@ -1,66 +1,79 @@
 <template>
-  <div :class="prefixCls">
-    <el-dialog
-      class="modify-data"
-      :visible.sync="modalIsShow"
-      :title="title"
-      top="10vh"
-      width="500px"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      append-to-body
-      @open="visibleChange"
-    >
-      <div style="footer"></div>
-      <div :class="[`${prefixCls}-footer`]" v-if="downloadUrl">
-        文件下载：
-        <a :href="downloadUrl" :download="dfilename">{{ dfilename }}</a>
-      </div>
-      <div :class="[`${prefixCls}-footer`]" v-if="downloadHandle">
-        文件下载：
-        <el-button type="text" @click="downloadHandle">{{
-          dfilename
-        }}</el-button>
-      </div>
-      <div :class="[`${prefixCls}-body`]">
-        <el-upload
-          drag
-          :action="uploadUrl"
-          :headers="headers"
-          :max-size="maxSize"
-          :format="format"
-          :accept="accept"
-          :data="uploadDataDict"
-          :before-upload="handleBeforeUpload"
-          :on-error="handleError"
-          :on-success="handleSuccess"
-          :http-request="upload"
-          :disabled="disabled || loading"
-          :show-file-list="false"
-          ref="UploadComp"
+  <el-dialog
+    :class="prefixCls"
+    :visible.sync="modalIsShow"
+    :title="title"
+    top="10vh"
+    width="500px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    @opened="visibleChange"
+  >
+    <div :class="[`${prefixCls}-footer`]" v-if="downloadUrl">
+      模板下载：
+      <a :href="downloadUrl" :download="dfilename">{{ dfilename }}</a>
+    </div>
+    <div :class="[`${prefixCls}-footer`]" v-else-if="downloadHandle">
+      模板下载：
+      <el-button type="text" @click="downloadHandle">{{ dfilename }}</el-button>
+    </div>
+    <slot></slot>
+    <div :class="[`${prefixCls}-body`]">
+      <el-upload
+        drag
+        :action="uploadUrl"
+        :headers="headers"
+        :max-size="maxSize"
+        :format="format"
+        :accept="accept"
+        :data="uploadDataDict"
+        :before-upload="handleBeforeUpload"
+        :on-error="handleError"
+        :on-success="handleSuccess"
+        :http-request="upload"
+        :disabled="disabled || loading"
+        :auto-upload="autoUpload"
+        :show-file-list="true"
+        :file-list="fileList"
+        :on-change="handleFileChange"
+        :on-remove="handleFileRemove"
+        ref="UploadComp"
+      >
+        <i class="el-icon-upload"></i><br />
+        <em class="el-upload__text">点击或将文件拖拽到这里上传</em>
+        <p
+          slot="tip"
+          :class="[
+            `${prefixCls}-tips`,
+            {
+              'cc-tips-success': res.success,
+              'cc-tips-error': !res.success
+            }
+          ]"
+          v-if="res.message"
         >
-          <i class="el-icon-upload"></i><br />
-          <em class="el-upload__text">将文件拖到此处，或<em>点击上传</em></em>
-          <p
-            slot="tip"
-            :class="[
-              `${prefixCls}-tips`,
-              {
-                'cc-tips-success': res.success,
-                'cc-tips-error': !res.success
-              }
-            ]"
-            v-if="res.msg"
-          >
-            {{ res.msg }}
-          </p>
-        </el-upload>
-      </div>
-    </el-dialog>
-  </div>
+          {{ res.message }}
+        </p>
+      </el-upload>
+    </div>
+
+    <div v-if="!autoUpload" slot="footer">
+      <el-button
+        type="primary"
+        :disabled="loading || !canUpload"
+        @click="submit"
+        >确认</el-button
+      >
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script>
+/**
+ * auto-upload为false时，手动调用ElUpload.Submit时会触发before-upload-handle
+ */
 import { fileMD5 } from "@/plugins/md5";
 import { $post } from "@/plugins/axios";
 
@@ -105,7 +118,15 @@ export default {
       type: String,
       default: "filename"
     },
-    disabled: { type: Boolean, default: false }
+    autoUpload: {
+      type: Boolean,
+      default: true
+    },
+    disabled: { type: Boolean, default: false },
+    beforeSubmitHandle: {
+      type: Function,
+      default: null
+    }
   },
   data() {
     return {
@@ -114,12 +135,14 @@ export default {
       headers: {
         md5: ""
       },
+      selectFileName: "",
       loading: false,
       uploadDataDict: {},
       res: {
         success: true,
-        msg: ""
-      }
+        message: ""
+      },
+      fileList: []
     };
   },
   computed: {
@@ -128,27 +151,37 @@ export default {
     },
     accept() {
       return this.format.map(el => `.${el}`).join();
+    },
+    canUpload() {
+      return this.fileList.length > 0;
     }
   },
   methods: {
     visibleChange() {
       this.res = {
         success: true,
-        msg: ""
+        message: ""
       };
       this.headers = { md5: "" };
       this.loading = false;
       this.uploadDataDict = {};
+      this.$refs.UploadComp.clearFiles();
     },
     checkFileFormat(fileType) {
       const _file_format = fileType
         .split(".")
         .pop()
-        .toLowerCase();
+        .toLocaleLowerCase();
       return this.format.length
-        ? this.format.some(item => item.toLowerCase() === _file_format)
+        ? this.format.some(item => item.toLocaleLowerCase() === _file_format)
         : true;
     },
+    handleFileChange(file) {
+      this.fileList = [file];
+    },
+    handleFileRemove(file, fileList) {
+      this.fileList = fileList;
+    },
     async handleBeforeUpload(file) {
       this.uploadDataDict = {
         ...this.uploadData
@@ -184,7 +217,7 @@ export default {
       this.loading = false;
       this.res = {
         success: false,
-        msg: error.message
+        message: error.message
       };
       this.$emit("upload-error", error);
     },
@@ -192,23 +225,30 @@ export default {
       this.loading = false;
       this.res = {
         success: true,
-        msg: "导入成功！"
+        message: "导入成功！"
       };
       this.cancel();
-      this.$emit("upload-success", responseData);
+      this.$emit("upload-success", {
+        data: responseData,
+        filename: this.uploadDataDict[this.addFilenameParam]
+      });
     },
     handleFormatError() {
+      const content = "只支持文件格式为" + this.format.join("/");
       this.res = {
         success: false,
-        msg: "只支持文件格式为" + this.format.join("/")
+        message: content
       };
+      this.$emit("valid-error", this.res);
       this.$refs.UploadComp.clearFiles();
     },
     handleExceededSize() {
       this.res = {
         success: false,
-        msg: "文件大小不能超过" + Math.floor(this.maxSize / (1024 * 1024)) + "M"
+        message:
+          "文件大小不能超过" + Math.floor(this.maxSize / (1024 * 1024)) + "M"
       };
+      this.$emit("valid-error", this.res);
       this.$refs.UploadComp.clearFiles();
     },
     cancel() {
@@ -216,6 +256,16 @@ export default {
     },
     open() {
       this.modalIsShow = true;
+    },
+    async submit() {
+      if (this.beforeSubmitHandle) {
+        let handleResult = true;
+        await this.beforeSubmitHandle().catch(() => {
+          handleResult = false;
+        });
+        if (!handleResult) return;
+      }
+      this.$refs.UploadComp.submit();
     }
   }
 };

src/modules/admin/components/ModifySchoolSet.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-    class="modify-school-set"
+    class="modify-school-set page-dialog"
     :visible.sync="modalIsShow"
     :title="title"
     :close-on-click-modal="false"
@@ -20,7 +20,9 @@
       </el-button>
     </div>
 
-    <component :is="compName" :school="school"></component>
+    <div class="part-box part-box-pad">
+      <component :is="compName" :school="school"></component>
+    </div>
 
     <div slot="footer"></div>
   </el-dialog>

src/modules/base/api.js

@@ -30,6 +30,9 @@ export const ableUser = ({ id, enable }) => {
 export const resetPwd = id => {
   return $post("/api/admin/sys/user/reset_password", { id });
 };
+export const deleteUser = id => {
+  return $postParam("/api/admin/sys/user/remove", { id });
+};
 export const updatePwd = datas => {
   return $post("/api/admin/sys/user/update_password", datas);
 };

src/modules/base/views/OrganizationManage.vue

@@ -1,26 +1,23 @@
 <template>
   <div class="organization-manage">
-    <div class="box-justify mb-2">
+    <div class="part-box part-box-pad part-box-flex">
       <div></div>
       <div>
         <el-button
-          type="success"
+          v-if="checkPrivilege('button', 'export')"
+          type="primary"
           icon="el-icon-download"
-          v-if="checkPrivilege('button', 'import')"
-          ><a :href="downloadUrl" :download="dfilename">模板下载</a></el-button
+          :loading="loading"
+          @click="toExportOrg"
+          >导出组织架构</el-button
         >
-        <upload-button
+        <el-button
           v-if="checkPrivilege('button', 'import')"
-          btn-icon="el-icon-circle-plus-outline"
-          btn-content="导入组织架构"
-          btn-type="success"
-          :upload-url="uploadUrl"
-          :format="['xls', 'xlsx']"
-          accept=".xls,.xlsx"
-          @valid-error="validError"
-          @upload-success="uploadSuccess"
+          type="success"
+          icon="el-icon-upload2"
+          @click="toImport"
+          >批量导入</el-button
         >
-        </upload-button>
       </div>
     </div>
     <div class="part-box part-box-pad part-box-border">
@@ -89,17 +86,29 @@
       :org-types="orgTypes"
       @confirm="getList"
     ></modify-organization>
+    <!-- ImportFile -->
+    <import-file
+      v-if="checkPrivilege('button', 'import')"
+      ref="ImportFile"
+      title="导入组织架构"
+      :upload-url="uploadUrl"
+      :format="['xls', 'xlsx']"
+      :download-url="downloadUrl"
+      :download-filename="dfilename"
+      :auto-upload="false"
+      @upload-success="uploadSuccess"
+    ></import-file>
   </div>
 </template>
 
 <script>
 import { organizationList, deleteOrganization } from "../api";
 import ModifyOrganization from "../components/ModifyOrganization";
-import UploadButton from "../../../components/UploadButton";
+import ImportFile from "../../../components/ImportFile.vue";
 
 export default {
   name: "organization-manage",
-  components: { ModifyOrganization, UploadButton },
+  components: { ModifyOrganization, ImportFile },
   data() {
     return {
       orgs: [],
@@ -108,6 +117,7 @@ export default {
       defaultProps: {
         label: "name"
       },
+      loading: false,
       // import
       uploadUrl: "/api/admin/sys/org/import",
       downloadUrl: "/temps/orgTemplate.xlsx",
@@ -184,7 +194,20 @@ export default {
         })
         .catch(() => {});
     },
+    async toExportOrg() {
+      // TODO:
+      if (this.loading) return;
+      this.loading = true;
+      const res = await syncUserToEcs().catch(() => {});
+      this.loading = false;
+
+      if (!res) return;
+      this.$message.success("导出任务已经提交！");
+    },
     // import
+    toImport() {
+      this.$refs.ImportFile.open();
+    },
     validError(errorData) {
       this.$message.error(errorData.message);
     },

src/modules/base/views/UserManage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="user-manage">
-    <div class="part-box part-box-filter part-box-flex">
+    <div class="part-box part-box-filter">
       <el-form ref="FilterForm" label-position="left" label-width="85px" inline>
         <template v-if="checkPrivilege('condition', 'condition')">
           <el-form-item label="所在机构：">
@@ -59,40 +59,41 @@
           >
         </el-form-item>
       </el-form>
-      <div class="part-box-action">
-        <el-button
-          v-if="checkPrivilege('button', 'SyncUser')"
-          type="primary"
-          icon="el-icon-refresh"
-          :loading="loading"
-          @click="syncUser"
-          >同步用户</el-button
-        >
-        <el-button
-          type="success"
-          icon="el-icon-download"
-          v-if="checkPrivilege('button', 'export')"
-          ><a :href="downloadUrl" :download="dfilename">模板下载</a></el-button
-        >
-        <upload-button
-          v-if="checkPrivilege('button', 'export')"
-          btn-icon="el-icon-circle-plus-outline"
-          btn-content="导入用户"
-          btn-type="success"
-          :upload-url="uploadUrl"
-          :format="['xls', 'xlsx']"
-          accept=".xls,.xlsx"
-          @valid-error="validError"
-          @upload-success="uploadSuccess"
-        >
-        </upload-button>
-        <el-button
-          v-if="checkPrivilege('button', 'add')"
-          type="primary"
-          icon="el-icon-circle-plus-outline"
-          @click="toAdd"
-          >新增用户</el-button
-        >
+      <div class="box-justify">
+        <div>
+          <el-button
+            v-if="checkPrivilege('button', 'SyncUser')"
+            type="primary"
+            icon="el-icon-refresh"
+            :loading="loading"
+            @click="toSyncUser"
+            >同步用户</el-button
+          >
+          <el-button
+            v-if="checkPrivilege('button', 'export')"
+            type="primary"
+            icon="el-icon-download"
+            :loading="loading"
+            @click="toExportUser"
+            >导出用户</el-button
+          >
+        </div>
+        <div>
+          <el-button
+            v-if="checkPrivilege('button', 'import')"
+            type="success"
+            icon="el-icon-upload2"
+            @click="toImport"
+            >导入用户</el-button
+          >
+          <el-button
+            v-if="checkPrivilege('button', 'add')"
+            type="primary"
+            icon="el-icon-circle-plus-outline"
+            @click="toAdd"
+            >新增用户</el-button
+          >
+        </div>
       </div>
     </div>
 
@@ -130,7 +131,7 @@
         <el-table-column
           class-name="action-column"
           label="操作"
-          width="160px"
+          width="200px"
           fixed="right"
         >
           <template slot-scope="scope">
@@ -148,6 +149,13 @@
               @click="toEnable(scope.row)"
               >{{ scope.row.enable ? "禁用" : "启用" }}</el-button
             >
+            <el-button
+              v-if="checkPrivilege('link', 'reset')"
+              class="btn-danger"
+              type="text"
+              @click="toDelete(scope.row)"
+              >删除</el-button
+            >
             <el-button
               v-if="checkPrivilege('link', 'reset')"
               class="btn-danger"
@@ -178,25 +186,38 @@
       :roles="roles"
       @modified="getList"
     ></modify-user>
+    <!-- ImportFile -->
+    <import-file
+      v-if="checkPrivilege('button', 'import')"
+      ref="ImportFile"
+      title="导入用户"
+      :upload-url="uploadUrl"
+      :format="['xls', 'xlsx']"
+      :download-url="downloadUrl"
+      :download-filename="dfilename"
+      :auto-upload="false"
+      @upload-success="uploadSuccess"
+    ></import-file>
   </div>
 </template>
 
 <script>
 import ModifyUser from "../components/ModifyUser";
+import ImportFile from "../../../components/ImportFile.vue";
 import { ABLE_TYPE } from "@/constants/enumerate";
 import {
   userListPage,
   ableUser,
+  deleteUser,
   resetPwd,
   userRoleListPage,
   syncUserToEcs
 } from "../api";
 // import { logout } from "@/modules/login/api";
-import UploadButton from "../../../components/UploadButton";
 
 export default {
   name: "user-manage",
-  components: { ModifyUser, UploadButton },
+  components: { ModifyUser, ImportFile },
   data() {
     return {
       filter: {
@@ -284,6 +305,27 @@ export default {
       this.curUser = {};
       this.$refs.ModifyUser.open();
     },
+    toImport() {
+      this.$refs.ImportFile.open();
+    },
+    async toDelete(row) {
+      // 自己不可以删除自己
+      const userId = this.$ls.get("user", { id: "" }).id;
+      if (row.id === userId) {
+        this.$message.error("不可以删除自己");
+        return;
+      }
+
+      this.$confirm(`确定要删除用户【${row.realName}】吗?`, "提示", {
+        type: "warning"
+      })
+        .then(async () => {
+          await deleteUser(row.id);
+          this.$message.success("操作成功！");
+          this.getList();
+        })
+        .catch(() => {});
+    },
     async toResetPwd(row) {
       await resetPwd(row.id);
       this.$message.success("密码重置成功！");
@@ -293,7 +335,7 @@ export default {
       // if (row.id !== userId) return;
       // this.toLogout();
     },
-    async syncUser() {
+    async toSyncUser() {
       if (this.loading) return;
       this.loading = true;
       const res = await syncUserToEcs().catch(() => {});
@@ -302,6 +344,16 @@ export default {
       if (!res) return;
       this.$message.success("同步任务已经提交！");
     },
+    async toExportUser() {
+      // TODO:
+      if (this.loading) return;
+      this.loading = true;
+      const res = await syncUserToEcs().catch(() => {});
+      this.loading = false;
+
+      if (!res) return;
+      this.$message.success("导出任务已经提交！");
+    },
     // async toLogout() {
     //   await logout();
     //   this.$ls.clear();