人员绑定系统用户

web/src/views/gas/personnel/PersonnelForm.vue

@@ -13,8 +13,15 @@
       <el-form-item label="工号" prop="employeeId">
         <el-input v-model="formData.employeeId" placeholder="请输入工号" />
       </el-form-item>
-      <el-form-item label="关联的系统用户" prop="userId">
-        <el-input v-model="formData.userId" placeholder="" />
+      <el-form-item label="系统用户" prop="userId">
+        <el-select v-model="formData.userId" clearable filterable placeholder="请选择关联的系统用户">
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="联系电话" prop="phone">
         <el-input v-model="formData.phone" placeholder="请输入联系电话" />
@@ -43,6 +50,8 @@
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { PersonnelApi, Personnel } from '@/api/gas/personnel'
+import { UserVO, getSimpleUserList } from '@/api/system/user'
+
 
 /** 人员信息 表单 */
 defineOptions({ name: 'PersonnelForm' })
@@ -68,6 +77,12 @@ const formRules = reactive({
   status: [{ required: true, message: '状态 (1-在职, 0-离职)不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
+const userList = ref<UserVO[]>([]) // 系统用户列表
+function getUserList() {
+  getSimpleUserList().then((res) => {
+    userList.value = res || []
+  })
+}
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -75,6 +90,7 @@ const open = async (type: string, id?: number) => {
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
+  getUserList()
   // 修改时，设置数据
   if (id) {
     formLoading.value = true

web/src/views/gas/personnel/index.vue

@@ -26,14 +26,21 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="关联的系统用户" prop="userId">
-        <el-input
+      <el-form-item label="系统用户" prop="userId">
+        <el-select
           v-model="queryParams.userId"
-          placeholder="请输入关联的系统用户ID  "
+          placeholder="请选择关联的系统用户"
           clearable
-          @keyup.enter="handleQuery"
+          filterable
           class="!w-240px"
+        >
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
           />
+        </el-select>
       </el-form-item>
       <el-form-item label="联系电话" prop="phone">
         <el-input
@@ -126,10 +133,17 @@
  
       <el-table-column label="姓名" align="center" prop="name" />
       <el-table-column label="工号" align="center" prop="employeeId" />
-      <el-table-column label="关联的系统用户" align="center" prop="userId" />
+      <el-table-column label="关联的系统用户" align="center" prop="userId" >
+        <template #default="scope">
+          <span v-if="scope.row.userId">
+            {{ userList.find(user => user.id === scope.row.userId)?.nickname || '-' }}
+          </span>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
       <el-table-column label="联系电话" align="center" prop="phone" />
       <el-table-column label="电子邮箱" align="center" prop="email" />
-      <el-table-column label="状态 (1-在职, 0-离职)" align="center" prop="status">
+      <el-table-column label="状态" align="center" prop="status">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.EMPLOYMENT_STATUS" :value="scope.row.status" />
         </template>
@@ -182,6 +196,7 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { PersonnelApi, Personnel } from '@/api/gas/personnel'
 import PersonnelForm from './PersonnelForm.vue'
+import { UserVO, getSimpleUserList } from '@/api/system/user'
 
 /** 人员信息 列表 */
 defineOptions({ name: 'Personnel' })
@@ -206,6 +221,13 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 
+const userList = ref<UserVO[]>([]) // 系统用户列表
+function getUserList() {
+  getSimpleUserList().then((res) => {
+    userList.value = res || []
+  })
+}
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -283,5 +305,6 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  getUserList()
 })
 </script>