my-bigScreen/screen-vue/src/views/system/user/form.vue

<template>
  <el-form 
    :model="formData" 
    :rules="formRules" 
    ref="formRef"
    label-width="100px"
    class="dialog-form-container"
  >
    <div class="form-row">
      <div class="form-col">
        <el-form-item label="登录账户" prop="userName">
          <el-input 
            v-model="formData.userName" 
            placeholder="请输入登录账户"
            clearable
            :disabled="isEdit"  
          />
        </el-form-item>
      </div>
      <div class="form-col">
        <el-form-item label="用户名称" prop="uname">
          <el-input 
            v-model="formData.uname" 
            placeholder="请输入用户名称"
            clearable
          />
        </el-form-item>
      </div>
    </div>

    <div class="form-row">
      <div class="form-col">
        <el-form-item label="性别" prop="sex">
          <el-select 
            v-model="formData.sex" 
            placeholder="请选择性别"
            clearable
          >
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
            <el-option label="未知" value="未知" />
          </el-select>
        </el-form-item>
      </div>
      <div class="form-col">
        <el-form-item label="电子邮箱" prop="email">
          <el-input 
            v-model="formData.email" 
            placeholder="请输入电子邮箱"
            clearable
            type="email"
          />
        </el-form-item>
      </div>
    </div>

    <div class="form-row">
      <div class="form-col">
        <el-form-item label="联系电话" prop="phone">
          <el-input 
            v-model="formData.phone" 
            placeholder="请输入联系电话"
            clearable
            type="tel"
          />
        </el-form-item>
      </div>
      <div class="form-col">
        <el-form-item label="用户角色" prop="roleId">
          <el-select 
            v-model="formData.roleId" 
            placeholder="请选择用户角色"
            clearable
          >
            <el-option
			  v-for="item in roleData" 
			  :key="item.roleId" 
			  :label="item.roleName" 
			  :value="item.roleId" 
			/>
          </el-select>
        </el-form-item>
      </div>
    </div>

    <div class="form-row">
      <div class="form-col">
        <el-form-item label="系统模块" prop="groupModuleId">
          <el-select 
            v-model="formData.groupModuleId" 
            placeholder="请选择系统模块"
            clearable
          >
            <el-option label="模块A" value="0" />
            <el-option label="模块B" value="1" />
            <el-option label="模块C" value="2" />
          </el-select>
        </el-form-item>
      </div>
      <div class="form-col">
        <el-form-item label="登录状态" prop="ustatus">
          <el-select 
            v-model="formData.ustatus" 
            placeholder="请选择登录状态"
            clearable
          >
            <el-option label="停用" value="0" />
            <el-option label="在用" value="1" />
            <el-option label="锁定" value="2" />
          </el-select>
        </el-form-item>
      </div>
    </div>
  </el-form>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getHomeRoleList } from '@/api/bizRole'

const roleData = ref([]);

const getListRole = async () => {
  try {
    const res = await getHomeRoleList();
	roleData.value = res || []
  } catch (error) {
	console.log(error);
  }
}

const props = defineProps({
  formData: {
    type: Object,
    required: true,
    default: () => ({
      uname: '',
      userName: '',
      sex: '',
      email: '',
      phone: '',
      roleId : '',
      groupModuleId: '',
      ustatus: '1',
    })
  },
  isEdit: {
    type: Boolean,
    default: false
  }
})

const formRef = ref(null)

const formRules = {
  uname: [ { required: true, message: '请输入用户名称', trigger: 'blur' } ],
  userName: [ { required: true, message: '请输入登录账户', trigger: 'blur' } ],
  sex: [ { required: true, message: '请选择性别', trigger: 'change' } ],
  roleId: [ { required: true, message: '请选择用户角色', trigger: 'change' } ],
  groupModuleId: [ { required: true, message: '请选择系统模块', trigger: 'change' } ],
  ustatus: [ { required: true, message: '请选择登录状态', trigger: 'change' } ],
}

const validate = async () => {
  if (!formRef.value) return false
  try {
    const valid = await formRef.value.validate()
    return valid
  } catch (error) {
    console.error('表单验证失败:', error)
    return false
  }
}

const resetForm = () => {
  if (formRef.value) formRef.value.resetFields()
}

defineExpose({ validate, resetForm })

onMounted(() => {
	getListRole();
})
</script>

<style scoped>
.dialog-form-container {
  width: 100%;
  padding: 16px;
  margin: 0;
  border: 1px solid rgba(64, 158, 255, 0.15);
  border-radius: 8px;
  box-sizing: border-box;
}

/* 布局样式 */
.form-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 16px 0;
  gap: 20px;
}
.form-row:last-child { margin-bottom: 0; }
.form-col { flex: 1; min-width: 180px; }
</style>