新疆马铃薯 1.首页问题：挪新系统ui，需要确认一下页面数据完整。 2.协同办公：挪新系统 3.营销管理：客户往来取消回款金额字段，改为点击左侧客户时...

gaoluyang

2026-05-30 6a415a072a98d64d2f95d16eef73b6d7270b8d56

 src/views/officeProcessAutomation/SysAdmin/user-manage/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,550 @@
<!--OA模块：用户管理-->
<template>
   <div class="app-container">
      <el-row :gutter="20" style="height: calc(100vh - 8em)">
         <splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme">
            <!--部门数据-->
            <pane size="16">
               <el-col style="padding: 10px">
                  <div class="head-container">
                     <el-input v-model="deptNames" placeholder="请输入部门名称" clearable prefix-icon="Search" style="margin-bottom: 20px" />
                  </div>
                  <div class="head-container">
                     <el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef" node-key="id" highlight-current default-expand-all @node-click="handleNodeClick" />
                  </div>
               </el-col>
            </pane>
            <!--用户数据-->
            <pane size="84">
               <el-col style="padding: 10px; height: 100%; display: flex; flex-direction: column;">
                  <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
                     <el-form-item label="登录账号" prop="userName">
                        <el-input v-model="queryParams.userName" placeholder="请输入登录账号" clearable style="width: 240px" @keyup.enter="handleQuery" />
                     </el-form-item>
                     <el-form-item label="手机号码" prop="phonenumber">
                        <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter="handleQuery" />
                     </el-form-item>
                     <el-form-item label="状态" prop="status">
                        <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
                           <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
                        </el-select>
                     </el-form-item>
                     <el-form-item label="创建时间" style="width: 308px">
                        <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                     </el-form-item>
                     <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                     </el-form-item>
                  </el-form>
						
                  <el-row :gutter="10" class="mb8">
                     <el-col :span="1.5">
                        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
                     </el-col>
                     <el-col :span="1.5">
                        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
                     </el-col>
                     <el-col :span="1.5">
                        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
                     </el-col>
                     <el-col :span="1.5">
                        <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
                     </el-col>
                     <el-col :span="1.5">
                        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
                     </el-col>
                     <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
                  </el-row>
						
                  <div style="flex: 1; overflow: hidden;">
                     <el-table v-loading="loading" :data="userList" height="100%" @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[0].visible" />
                        <el-table-column label="登录账号" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
                        <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
                        <el-table-column label="部门" align="center" key="deptNames" prop="deptNames" v-if="columns[3].visible" :show-overflow-tooltip="true" />
                        <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
                        <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
                           <template #default="scope">
                              <el-switch
                                 v-model="scope.row.status"
                                 active-value="0"
                                 inactive-value="1"
                                 @change="handleStatusChange(scope.row)"
                              ></el-switch>
                           </template>
                        </el-table-column>
                        <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
                           <template #default="scope">
                              <span>{{ parseTime(scope.row.createTime) }}</span>
                           </template>
                        </el-table-column>
                        <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 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 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 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 link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
                              </el-tooltip>
                           </template>
                        </el-table-column>
                     </el-table>
                  </div>
                  <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
               </el-col>
            </pane>
         </splitpanes>
      </el-row>
		
      <!-- æ·»åŠ æˆ–修改用户配置对话框 -->
      <el-dialog :title="title" v-model="open" width="600px" append-to-body>
         <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
            <el-row>
               <el-col :span="12">
                  <el-form-item v-if="form.userId == undefined" label="登录账号" prop="userName">
                     <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
                     <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row>
               <el-col :span="12">
                  <el-form-item label="用户昵称" prop="nickName">
                     <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="归属部门" prop="deptId">
                     <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" check-strictly />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row>
               <el-col :span="12">
                  <el-form-item label="岗位" prop="postIds">
                     <el-select v-model="form.postIds" multiple placeholder="请选择">
                        <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="角色" prop="roleIds">
                     <el-select v-model="form.roleIds" multiple placeholder="请选择">
                        <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row>
               <el-col :span="12">
                  <el-form-item label="手机号码" prop="phonenumber">
                     <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="邮箱" prop="email">
                     <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row>
               <el-col :span="12">
                  <el-form-item label="用户性别">
                     <el-select v-model="form.sex" placeholder="请选择">
                        <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="状态">
                     <el-radio-group v-model="form.status">
                        <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
                     </el-radio-group>
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row>
               <el-col :span="24">
                  <el-form-item label="备注">
                     <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">ç¡® å®š</el-button>
               <el-button @click="cancel">取 æ¶ˆ</el-button>
            </div>
         </template>
      </el-dialog>
		
      <!-- ç”¨æˆ·å¯¼å…¥å¯¹è¯æ¡† -->
      <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
         <el-upload ref="uploadRef" :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>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <template #tip>
               <div class="el-upload__tip text-center">
                  <div class="el-upload__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>
            </template>
         </el-upload>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitFileForm">ç¡® å®š</el-button>
               <el-button @click="upload.open = false">取 æ¶ˆ</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script setup name="User">
import { getToken } from "@/utils/auth"
import useAppStore from '@/store/modules/app'
import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"

const router = useRouter()
const appStore = useAppStore()
const { proxy } = getCurrentInstance()
const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex")

const userList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const dateRange = ref([])
const deptNames = ref("")
const deptOptions = ref(undefined)
const enabledDeptOptions = ref(undefined)
const initPassword = ref(undefined)
const postOptions = ref([])
const roleOptions = ref([])
/*** ç”¨æˆ·å¯¼å…¥å‚æ•° */
const upload = reactive({
   // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚（用户导入）
   open: false,
   // å¼¹å‡ºå±‚标题（用户导入）
   title: "",
   // æ˜¯å¦ç¦ç”¨ä¸Šä¼ 
   isUploading: false,
   // æ˜¯å¦æ›´æ–°å·²ç»å­˜åœ¨çš„用户数据
   updateSupport: 0,
   // è®¾ç½®ä¸Šä¼ çš„请求头部
   headers: { Authorization: "Bearer " + getToken() },
   // ä¸Šä¼ çš„地址
   url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
})
// åˆ—显隐信息
const columns = ref([
   { key: 0, label: `用户编号`, visible: true },
   { key: 1, label: `登录账号`, visible: true },
   { key: 2, label: `用户昵称`, visible: true },
   { key: 3, label: `部门`, visible: true },
   { key: 4, label: `手机号码`, visible: true },
   { key: 5, label: `状态`, visible: true },
   { key: 6, label: `创建时间`, visible: true }
])

const data = reactive({
   form: {},
   queryParams: {
      pageNum: 1,
      pageSize: 10,
      userName: undefined,
      phonenumber: undefined,
      status: undefined,
      deptId: undefined
   },
   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" }, { 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" }],
      deptId: [{ required: true, message: "归属部门不能为空", trigger: "change" }],
      postIds: [{ required: true, message: "岗位不能为空", trigger: "change" }],
      roleIds: [{ required: true, message: "角色不能为空", trigger: "change" }]
   }
})

const { queryParams, form, rules } = toRefs(data)

/** é€šè¿‡æ¡ä»¶è¿‡æ»¤èŠ‚点  */
const filterNode = (value, data) => {
   if (!value) return true
   return data.label.indexOf(value) !== -1
}

/** æ ¹æ®åç§°ç­›é€‰éƒ¨é—¨æ ‘ */
watch(deptNames, val => {
   proxy.$refs["deptTreeRef"].filter(val)
})

/** æŸ¥è¯¢ç”¨æˆ·åˆ—表 */
function getList() {
   loading.value = true
   listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
      loading.value = false
      userList.value = res.rows
      total.value = res.total
   })
}

/** æŸ¥è¯¢éƒ¨é—¨ä¸‹æ‹‰æ ‘结构 */
function getDeptTree() {
   deptTreeSelect().then(response => {
      deptOptions.value = response.data
      enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
   })
}

/** è¿‡æ»¤ç¦ç”¨çš„部门 */
function filterDisabledDept(deptList) {
   return deptList.filter(dept => {
      if (dept.disabled) {
         return false
      }
      if (dept.children && dept.children.length) {
         dept.children = filterDisabledDept(dept.children)
      }
      return true
   })
}

/** èŠ‚点单击事件 */
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
   proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
      return delUser(userIds)
   }).then(() => {
      getList()
      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" ? "启用" : "停用"
   proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
      return changeUserStatus(row.userId, row.status)
   }).then(() => {
      proxy.$modal.msgSuccess(text + "成功")
   }).catch(function () {
      row.status = row.status === "0" ? "1" : "0"
   })
}

/** æ›´å¤šæ“ä½œ */
function handleCommand(command, row) {
   switch (command) {
      case "handleResetPwd":
         handleResetPwd(row)
         break
      case "handleAuthRole":
         handleAuthRole(row)
         break
      default:
         break
   }
}

/** è·³è½¬è§’色分配 */
function handleAuthRole(row) {
   const userId = row.userId
   router.push("/system/user-auth/role/" + userId)
}

/** é‡ç½®å¯†ç æŒ‰é’®æ“ä½œ */
function handleResetPwd(row) {
   proxy.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      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"].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 reset() {
   form.value = {
      userId: undefined,
      deptId: undefined,
      userName: undefined,
      nickName: undefined,
      password: undefined,
      phonenumber: undefined,
      email: undefined,
      sex: undefined,
      status: "0",
      remark: undefined,
      postIds: [],
      roleIds: []
   }
   proxy.resetForm("userRef")
}

/** å–消按钮 */
function cancel() {
   open.value = false
   reset()
}

/** æ–°å¢žæŒ‰é’®æ“ä½œ */
function handleAdd() {
   reset()
   getUser().then(response => {
      postOptions.value = response.posts
      roleOptions.value = response.roles
      open.value = true
      title.value = "添加用户"
      form.value.password = initPassword.value
   })
}

/** ä¿®æ”¹æŒ‰é’®æ“ä½œ */
function handleUpdate(row) {
   reset()
   const userId = row.userId || ids.value
   getUser(userId).then(response => {
      form.value = response.data
      postOptions.value = response.posts
      roleOptions.value = response.roles
      form.value.postIds = response.postIds
      form.value.roleIds = response.roleIds
      open.value = true
      title.value = "修改用户"
      form.password = ""
   })
}

/** æäº¤æŒ‰é’® */
function submitForm() {
   proxy.$refs["userRef"].validate(valid => {
      if (valid) {
         // å½’属部门虽然是单选，但后端需要传数组字段 deptIds
         const payload = {
            ...form.value,
            deptIds: form.value.deptId ? [form.value.deptId] : []
         }
         if (form.value.userId != undefined) {
            updateUser(payload).then(response => {
               proxy.$modal.msgSuccess("修改成功")
               open.value = false
               getList()
            })
         } else {
            addUser(payload).then(response => {
               proxy.$modal.msgSuccess("新增成功")
               open.value = false
               getList()
            })
         }
      }
   })
}

getDeptTree()
getList()
</script>