refactor(front): 重构前端组件和 API

- 更新了多个组件的样式和结构 - 重命名了一些 API 文件 - 添加了新的 API 接口 - 优化了部分代码的可读性和性能
2025-07-23 20:58:15 +08:00
parent 091c056cd0
commit 902173a9e9
111 changed files with 1841 additions and 1198 deletions
@@ -9,7 +9,12 @@
          <div>
            <div style="text-align: center">
              <div class="el-upload">
-                <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" title="点击上传头像" class="avatar" @click="toggleShow">
+                <img
+                  :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar"
+                  title="点击上传头像"
+                  class="avatar"
+                  @click="toggleShow"
+                >
                <myUpload
                  v-model="show"
                  :headers="headers"
@@ -19,13 +24,36 @@
              </div>
            </div>
            <ul class="user-info">
-              <li><div style="height: 100%"><svg-icon icon-class="login" /> 登录账号<div class="user-right">{{ user.username }}</div></div></li>
-              <li><svg-icon icon-class="user1" /> 用户昵称 <div class="user-right">{{ user.nickName }}</div></li>
-              <li><svg-icon icon-class="dept" /> 所属部门 <div class="user-right"> {{ user.dept.name }}</div></li>
-              <li><svg-icon icon-class="phone" /> 手机号码 <div class="user-right">{{ user.phone }}</div></li>
-              <li><svg-icon icon-class="email" /> 用户邮箱 <div class="user-right">{{ user.email }}</div></li>
              <li>
-                <svg-icon icon-class="anq" /> 安全设置
+                <div style="height: 100%">
+                  <svg-icon icon-class="login" />
+                  登录账号
+                  <div class="user-right">{{ user.username }}</div>
+                </div>
+              </li>
+              <li>
+                <svg-icon icon-class="user1" />
+                用户昵称
+                <div class="user-right">{{ user.nickName }}</div>
+              </li>
+              <li>
+                <svg-icon icon-class="dept" />
+                所属部门
+                <div class="user-right"> {{ user.dept.name }}</div>
+              </li>
+              <li>
+                <svg-icon icon-class="phone" />
+                手机号码
+                <div class="user-right">{{ user.phone }}</div>
+              </li>
+              <li>
+                <svg-icon icon-class="email" />
+                用户邮箱
+                <div class="user-right">{{ user.email }}</div>
+              </li>
+              <li>
+                <svg-icon icon-class="anq" />
+                安全设置
                <div class="user-right">
                  <a @click="$refs.pass.dialog = true">修改密码</a>
                  <a @click="$refs.email.dialog = true">修改邮箱</a>
@@ -40,7 +68,14 @@
        <el-card class="box-card">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户资料" name="first">
-              <el-form ref="form" :model="form" :rules="rules" style="margin-top: 10px;" size="small" label-width="65px">
+              <el-form
+                ref="form"
+                :model="form"
+                :rules="rules"
+                style="margin-top: 10px;"
+                size="small"
+                label-width="65px"
+              >
                <el-form-item label="昵称" prop="nickName">
                  <el-input v-model="form.nickName" style="width: 35%" />
                  <span style="color: #C0C0C0;margin-left: 10px;">用户昵称不作为登录使用</span>
@@ -78,7 +113,10 @@
                  align="right"
                >
                  <template slot="header">
-                    <div style="display:inline-block;float: right;cursor: pointer" @click="init">创建日期<i class="el-icon-refresh" style="margin-left: 40px" /></div>
+                    <div style="display:inline-block;float: right;cursor: pointer" @click="init">创建日期<i
+                      class="el-icon-refresh"
+                      style="margin-left: 40px"
+                    /></div>
                  </template>
                  <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
@@ -111,10 +149,11 @@ import updatePass from './center/updatePass'
 import updateEmail from './center/updateEmail'
 import { getToken } from '@/utils/auth'
 import store from '@/store'
-import { isvalidPhone } from '@/utils/validate'
+import { isvalidPhone } from '@/utils/CsValidateUtil'
 import crud from '@/mixins/crud'
 import { editUser } from '@/api/system/user'
 import Avatar from '@/assets/images/avatar.png'
+
 export default {
  name: 'Center',
  components: { updatePass, updateEmail, myUpload },
@@ -159,7 +198,8 @@ export default {
  },
  created() {
    this.form = { id: this.user.id, nickName: this.user.nickName, gender: this.user.gender, phone: this.user.phone }
-    store.dispatch('GetInfo').then(() => {})
+    store.dispatch('GetInfo').then(() => {
+    })
  },
  methods: {
    toggleShow() {
@@ -175,7 +215,8 @@ export default {
      return true
    },
    cropUploadSuccess(jsonData, field) {
-      store.dispatch('GetInfo').then(() => {})
+      store.dispatch('GetInfo').then(() => {
+      })
    },
    doSubmit() {
      if (this.$refs['form']) {
@@ -184,7 +225,8 @@ export default {
            this.saveLoading = true
            editUser(this.form).then(() => {
              this.editSuccessNotify()
-              store.dispatch('GetInfo').then(() => {})
+              store.dispatch('GetInfo').then(() => {
+              })
              this.saveLoading = false
            }).catch(() => {
              this.saveLoading = false
@@ -198,24 +240,28 @@ export default {
 </script>

 <style rel="stylesheet/scss" lang="scss">
-  .avatar {
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
+.avatar {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+}
+
+.user-info {
+  padding-left: 0;
+  list-style: none;
+
+  li {
+    border-bottom: 1px solid #F0F3F4;
+    padding: 11px 0;
+    font-size: 13px;
  }
-  .user-info {
-    padding-left: 0;
-    list-style: none;
-    li{
-      border-bottom: 1px solid #F0F3F4;
-      padding: 11px 0;
-      font-size: 13px;
-    }
-    .user-right {
-      float: right;
-      a{
-        color: #317EF3;
-      }
+
+  .user-right {
+    float: right;
+
+    a {
+      color: #317EF3;
    }
  }
+}
 </style>
@@ -1,10 +1,21 @@
 <template>
  <div style="display: inline-block;">
-    <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="title" append-to-body width="475px" @close="cancel">
+    <el-dialog
+      :visible.sync="dialog"
+      :close-on-click-modal="false"
+      :before-close="cancel"
+      :title="title"
+      append-to-body
+      width="475px"
+      @close="cancel"
+    >
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
        <el-form-item label="新邮箱" prop="email">
          <el-input v-model="form.email" auto-complete="on" style="width: 200px;" />
-          <el-button :loading="codeLoading" :disabled="isDisabled" size="small" @click="sendCode">{{ buttonName }}</el-button>
+          <el-button :loading="codeLoading" :disabled="isDisabled" size="small" @click="sendCode">{{
+            buttonName
+          }}
+          </el-button>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="form.code" style="width: 320px;" />
@@ -23,9 +34,10 @@

 <script>
 import store from '@/store'
-import { validEmail } from '@/utils/validate'
+import { validEmail } from '@/utils/CsValidateUtil'
 import { updateEmail } from '@/api/system/user'
 import { sendResetEmailCaptcha } from '@/api/system/code'
+
 export default {
  props: {
    email: {
@@ -109,7 +121,8 @@ export default {
              type: 'success',
              duration: 1500
            })
-            store.dispatch('GetInfo').then(() => {})
+            store.dispatch('GetInfo').then(() => {
+            })
          }).catch(err => {
            this.loading = false
            console.log(err.response.data.message)
@@ -1,6 +1,14 @@
 <template>
  <div style="display: inline-block">
-    <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="title" append-to-body width="500px" @close="cancel">
+    <el-dialog
+      :visible.sync="dialog"
+      :close-on-click-modal="false"
+      :before-close="cancel"
+      :title="title"
+      append-to-body
+      width="500px"
+      @close="cancel"
+    >
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
        <el-form-item label="旧密码" prop="oldPass">
          <el-input v-model="form.oldPass" type="password" auto-complete="on" style="width: 370px;" />
@@ -23,6 +31,7 @@
 <script>
 import store from '@/store'
 import { updatePass } from '@/api/system/user'
+
 export default {
  data() {
    const confirmPass = (rule, value, callback) => {
@@ -52,7 +52,14 @@
          </crudOperation>
        </div>
        <!--表单渲染-->
-        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="555px">
+        <el-dialog
+          append-to-body
+          :close-on-click-modal="false"
+          :before-close="crud.cancelCU"
+          :visible.sync="crud.status.cu > 0"
+          :title="crud.status.title"
+          width="555px"
+        >
          <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username" @keydown.native="keydown($event)" />
@@ -104,7 +111,8 @@
                  v-for="item in dict.user_status"
                  :key="item.id"
                  :label="item.value"
-                >{{ item.label }}</el-radio>
+                >{{ item.label }}
+                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item style="margin-bottom: 0;" label="角色" prop="roleDatas" class="is-required">
@@ -133,7 +141,13 @@
          </div>
        </el-dialog>
        <!--表格渲染-->
-        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
+        <el-table
+          ref="table"
+          v-loading="crud.loading"
+          :data="crud.data"
+          style="width: 100%;"
+          @selection-change="crud.selectionChangeHandler"
+        >
          <el-table-column :selectable="checkboxT" type="selection" width="55" />
          <el-table-column :show-overflow-tooltip="true" prop="username" label="用户名" />
          <el-table-column :show-overflow-tooltip="true" prop="nickName" label="昵称" />
@@ -182,24 +196,35 @@

 <script>
 import crudUser from '@/api/system/user'
-import { isvalidPhone } from '@/utils/validate'
+import { isvalidPhone } from '@/utils/CsValidateUtil'
 import { queryDeptList, queryDeptSuperiorTree } from '@/api/system/dept'
-import { queryRoleList, getLevel } from '@/api/system/role'
+import { getLevel, queryRoleList } from '@/api/system/role'
 import { queryAllEnableJob } from '@/api/system/job'
-import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import CRUD, { crud, form, header, presenter } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import udOperation from '@crud/UD.operation'
 import pagination from '@crud/Pagination'
 import DateRangePicker from '@/components/DateRangePicker'
-import Treeselect from '@riophae/vue-treeselect'
+import Treeselect, { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 import { mapGetters } from 'vuex'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 import CuteDeptTree from '@/views/components/business/CuteDeptTree'
+
 let userRoles = []
 let userJobs = []
-const defaultForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 'false', roles: [], jobs: [], dept: { id: null }, phone: null }
+const defaultForm = {
+  id: null,
+  username: null,
+  nickName: null,
+  gender: '男',
+  email: null,
+  enabled: 'false',
+  roles: [],
+  jobs: [],
+  dept: { id: null },
+  phone: null
+}
 export default {
  name: 'User',
  components: { CuteDeptTree, Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker },
@@ -446,19 +471,22 @@ export default {
    getRoles() {
      queryRoleList().then(res => {
        this.roles = res
-      }).catch(() => { })
+      }).catch(() => {
+      })
    },
    // 获取弹窗内岗位数据
    getJobs() {
      queryAllEnableJob().then(res => {
        this.jobs = res.content
-      }).catch(() => { })
+      }).catch(() => {
+      })
    },
    // 获取权限级别
    getRoleLevel() {
      getLevel().then(res => {
        this.level = res.level
-      }).catch(() => { })
+      }).catch(() => {
+      })
    },
    checkboxT(row, rowIndex) {
      return row.id !== this.user.id
@@ -476,7 +504,8 @@ export default {
        console.log(ids)
        crudUser.resetPwd(ids).then(() => {
          this.crud.notify('重置成功, 用户新密码:123456', CRUD.NOTIFICATION_TYPE.SUCCESS)
-        }).catch(() => {})
+        }).catch(() => {
+        })
      }).catch(() => {
      })
    }
@@ -485,8 +514,8 @@ export default {
 </script>

 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
-    height: 30px;
-    line-height: 30px;
-  }
+::v-deep .vue-treeselect__control, ::v-deep .vue-treeselect__placeholder, ::v-deep .vue-treeselect__single-value {
+  height: 30px;
+  line-height: 30px;
+}
 </style>