用户密码支持自定义配置规则

RuoYi

2026-04-17 397971378357db417763bd388c25cdeeaed5d33c

 ruoyi-ui/src/views/system/user/index.vue

@@ -46,7 +46,11 @@
        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">

          <el-table-column type="selection" width="50" align="center" />

          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns.userId.visible" />

          <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns.userName.visible" :show-overflow-tooltip="true" />

          <el-table-column label="用户名称" align="center" key="userName" v-if="columns.userName.visible" :show-overflow-tooltip="true">

            <template slot-scope="scope">

              <a class="link-type" style="cursor:pointer" @click="handleViewData(scope.row)">{{ scope.row.userName }}</a>

            </template>

          </el-table-column>

          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns.nickName.visible" :show-overflow-tooltip="true" />

          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns.deptName.visible" :show-overflow-tooltip="true" />

          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns.phonenumber.visible" width="120" />

@@ -112,7 +116,7 @@
            </el-form-item>

          </el-col>

          <el-col :span="12">

            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">

            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password" :rules="pwdValidator">

              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />

            </el-form-item>

          </el-col>

@@ -163,38 +167,27 @@
      </div>

    </el-dialog>



    <!-- 用户详情抽屉 -->

    <user-view-drawer ref="userViewRef" />

    <!-- 用户导入对话框 -->

    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>

      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>

        <i class="el-icon-upload"></i>

        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

        <div class="el-upload__tip text-center" slot="tip">

          <div class="el-upload__tip" slot="tip">

            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据

          </div>

          <span>仅允许导入xls、xlsx格式文件。</span>

          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>

        </div>

      </el-upload>

      <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="submitFileForm">确 定</el-button>

        <el-button @click="upload.open = false">取 消</el-button>

      </div>

    </el-dialog>

    <excel-import-dialog ref="importUserRef" title="用户导入" action="/system/user/importData" template-action="/system/user/importTemplate" template-file-name="user_template" update-support-label="是否更新已经存在的用户数据" @success="getList" />

  </div>

</template>



<script>

import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user"

import { getToken } from "@/utils/auth"

import Treeselect from "@riophae/vue-treeselect"

import "@riophae/vue-treeselect/dist/vue-treeselect.css"

import TreePanel from "@/components/TreePanel"

import ExcelImportDialog from "@/components/ExcelImportDialog"

import UserViewDrawer from "./view"

import passwordRule from "@/utils/passwordRule"



export default {

  name: "User",

  mixins: [passwordRule],

  dicts: ['sys_normal_disable', 'sys_user_sex'],

  components: { Treeselect, TreePanel },

  components: { Treeselect, TreePanel, ExcelImportDialog, UserViewDrawer },

  data() {

    return {

      // 遮罩层

@@ -229,21 +222,6 @@
      roleOptions: [],

      // 表单参数

      form: {},

      // 用户导入参数

      upload: {

        // 是否显示弹出层（用户导入）

        open: false,

        // 弹出层标题（用户导入）

        title: "",

        // 是否禁用上传

        isUploading: false,

        // 是否更新已经存在的用户数据

        updateSupport: 0,

        // 设置上传的请求头部

        headers: { Authorization: "Bearer " + getToken() },

        // 上传的地址

        url: process.env.VUE_APP_BASE_API + "/system/user/importData"

      },

      // 查询参数

      queryParams: {

        pageNum: 1,

@@ -271,11 +249,6 @@
        ],

        nickName: [

          { required: true, message: "用户昵称不能为空", trigger: "blur" }

        ],

        password: [

          { required: true, message: "用户密码不能为空", trigger: "blur" },

          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },

          { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }

        ],

        email: [

          {

@@ -429,17 +402,11 @@
    },

    /** 重置密码按钮操作 */

    handleResetPwd(row) {

      this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {

      this.$prompt(`请输入「${row.userName}」的新密码`, "重置密码", {

        confirmButtonText: "确定",

        cancelButtonText: "取消",

        closeOnClickModal: false,

        inputPattern: /^.{5,20}$/,

        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",

        inputValidator: (value) => {

          if (/<|>|"|'|\||\\/.test(value)) {

            return "不能包含非法字符：< > \" ' \\\ |"

          }

        },

        inputValidator: this.pwdPromptValidator

      }).then(({ value }) => {

        resetUserPwd(row.userId, value).then(() => {

          this.$modal.msgSuccess("修改成功，新密码是：" + value)

@@ -487,36 +454,13 @@
        ...this.queryParams

      }, `user_${new Date().getTime()}.xlsx`)

    },

    /** 详情按钮操作 */

    handleViewData(row) {

      this.$refs.userViewRef.open(row.userId)

    },

    /** 导入按钮操作 */

    handleImport() {

      this.upload.title = "用户导入"

      this.upload.open = true

    },

    /** 下载模板操作 */

    importTemplate() {

      this.download('system/user/importTemplate', {

      }, `user_template_${new Date().getTime()}.xlsx`)

    },

    // 文件上传中处理

    handleFileUploadProgress(event, file, fileList) {

      this.upload.isUploading = true

    },

    // 文件上传成功处理

    handleFileSuccess(response, file, fileList) {

      this.upload.open = false

      this.upload.isUploading = false

      this.$refs.upload.clearFiles()

      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })

      this.getList()

    },

    // 提交上传文件

    submitFileForm() {

      const file = this.$refs.upload.uploadFiles

      if (!file || file.length === 0 || !file[0].name.toLowerCase().endsWith('.xls') && !file[0].name.toLowerCase().endsWith('.xlsx')) {

        this.$modal.msgError("请选择后缀为 “xls”或“xlsx”的文件。")

        return

      }

      this.$refs.upload.submit()

      this.$refs.importUserRef.open()

    }

  }

}