优化代码

RuoYi

2024-06-28 6666ce5526b1ed17f5c3906c94620cad586745a5

 src/views/system/user/index.vue

@@ -19,6 +19,8 @@
                  :expand-on-click-node="false"

                  :filter-node-method="filterNode"

                  ref="deptTreeRef"

                  node-key="id"

                  highlight-current

                  default-expand-all

                  @node-click="handleNodeClick"

               />

@@ -152,36 +154,16 @@
               <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">

                  <template #default="scope">

                     <el-tooltip content="修改" placement="top" v-if="scope.row.userId !== 1">

                        <el-button

                           type="text"

                           icon="Edit"

                           @click="handleUpdate(scope.row)"

                           v-hasPermi="['system:user:edit']"

                        ></el-button>

                        <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"></el-button>

                     </el-tooltip>

                     <el-tooltip content="删除" placement="top" v-if="scope.row.userId !== 1">

                        <el-button

                           type="text"

                           icon="Delete"

                           @click="handleDelete(scope.row)"

                           v-hasPermi="['system:user:remove']"

                        ></el-button>

                        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"></el-button>

                     </el-tooltip>

                     <el-tooltip content="重置密码" placement="top" v-if="scope.row.userId !== 1">

                        <el-button

                           type="text"

                           icon="Key"

                           @click="handleResetPwd(scope.row)"

                           v-hasPermi="['system:user:resetPwd']"

                        ></el-button>

                         <el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button>

                     </el-tooltip>

                     <el-tooltip content="分配角色" placement="top" v-if="scope.row.userId !== 1">

                        <el-button

                           type="text"

                           icon="CircleCheck"

                           @click="handleAuthRole(scope.row)"

                           v-hasPermi="['system:user:edit']"

                        ></el-button>

                        <el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)" v-hasPermi="['system:user:edit']"></el-button>

                     </el-tooltip>

                  </template>

               </el-table-column>

@@ -207,11 +189,13 @@
               </el-col>

               <el-col :span="12">

                  <el-form-item label="归属部门" prop="deptId">

                     <tree-select

                        v-model:value="form.deptId"

                        :options="deptOptions"

                     <el-tree-select

                        v-model="form.deptId"

                        :data="deptOptions"

                        :props="{ value: 'id', label: 'label', children: 'children' }"

                        value-key="id"

                        placeholder="请选择归属部门"

                        :objMap="{ value: 'id', label: 'label', children: 'children' }"

                        check-strictly

                     />

                  </el-form-item>

               </el-col>

@@ -347,8 +331,7 @@


<script setup name="User">

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

import { treeselect } from "@/api/system/dept";

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

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



const router = useRouter();

const { proxy } = getCurrentInstance();

@@ -408,7 +391,7 @@
  rules: {

    userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],

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

    password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }],

    password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],

    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],

    phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]

  }

@@ -421,16 +404,19 @@
  if (!value) return true;

  return data.label.indexOf(value) !== -1;

};



/** 根据名称筛选部门树 */

watch(deptName, val => {

  proxy.$refs["deptTreeRef"].filter(val);

});



/** 查询部门下拉树结构 */

function getTreeselect() {

  treeselect().then(response => {

function getDeptTree() {

  deptTreeSelect().then(response => {

    deptOptions.value = response.data;

  });

};



/** 查询用户列表 */

function getList() {

  loading.value = true;

@@ -440,22 +426,28 @@
    total.value = res.total;

  });

};



/** 节点单击事件 */

function handleNodeClick(data) {

  queryParams.value.deptId = data.id;

  handleQuery();

};



/** 搜索按钮操作 */

function handleQuery() {

  queryParams.value.pageNum = 1;

  getList();

};



/** 重置按钮操作 */

function resetQuery() {

  dateRange.value = [];

  proxy.resetForm("queryRef");

  queryParams.value.deptId = undefined;

  proxy.$refs.deptTreeRef.setCurrentKey(null);

  handleQuery();

};



/** 删除按钮操作 */

function handleDelete(row) {

  const userIds = row.userId || ids.value;

@@ -466,12 +458,14 @@
    proxy.$modal.msgSuccess("删除成功");

  }).catch(() => {});

};



/** 导出按钮操作 */

function handleExport() {

  proxy.download("system/user/export", {

    ...queryParams.value,

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

};



/** 用户状态修改  */

function handleStatusChange(row) {

  let text = row.status === "0" ? "启用" : "停用";

@@ -483,6 +477,7 @@
    row.status = row.status === "0" ? "1" : "0";

  });

};



/** 更多操作 */

function handleCommand(command, row) {

  switch (command) {

@@ -496,11 +491,13 @@
      break;

  }

};



/** 跳转角色分配 */

function handleAuthRole(row) {

  const userId = row.userId;

  router.push("/system/user-auth/role/" + userId);

};



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

function handleResetPwd(row) {

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

@@ -509,53 +506,56 @@
    closeOnClickModal: false,

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

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

    inputValidator: (value) => {

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

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

      }

    },

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

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

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

    });

  }).catch(() => {});

};



/** 选择条数  */

function handleSelectionChange(selection) {

  ids.value = selection.map(item => item.userId);

  single.value = selection.length != 1;

  multiple.value = !selection.length;

};



/** 导入按钮操作 */

function handleImport() {

  upload.title = "用户导入";

  upload.open = true;

};



/** 下载模板操作 */

function importTemplate() {

  proxy.download("system/user/importTemplate", {

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

};



/**文件上传中处理 */

const handleFileUploadProgress = (event, file, fileList) => {

  upload.isUploading = true;

};



/** 文件上传成功处理 */

const handleFileSuccess = (response, file, fileList) => {

  upload.open = false;

  upload.isUploading = false;

  proxy.$refs["uploadRef"].clearFiles();

  proxy.$refs["uploadRef"].handleRemove(file);

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

  getList();

};



/** 提交上传文件 */

function submitFileForm() {

  proxy.$refs["uploadRef"].submit();

};

/** 初始化部门数据 */

function initTreeData() {

  // 判断部门的数据是否存在，存在不获取，不存在则获取

  if (deptOptions.value === undefined) {

    treeselect().then(response => {

      deptOptions.value = response.data;

    });

  }

};



/** 重置操作表单 */

function reset() {

  form.value = {

@@ -574,27 +574,28 @@
  };

  proxy.resetForm("userRef");

};



/** 取消按钮 */

function cancel() {

  open.value = false;

  reset();

};



/** 新增按钮操作 */

function handleAdd() {

  reset();

  initTreeData();

  getUser().then(response => {

    postOptions.value = response.posts;

    roleOptions.value = response.roles;

    open.value = true;

    title.value = "添加用户";

    form.password.value = initPassword.value;

    form.value.password = initPassword.value;

  });

};



/** 修改按钮操作 */

function handleUpdate(row) {

  reset();

  initTreeData();

  const userId = row.userId || ids.value;

  getUser(userId).then(response => {

    form.value = response.data;

@@ -607,6 +608,7 @@
    form.password = "";

  });

};



/** 提交按钮 */

function submitForm() {

  proxy.$refs["userRef"].validate(valid => {

@@ -628,6 +630,6 @@
  });

};



getTreeselect();

getDeptTree();

getList();

</script>