大屏项目初始化

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

@@ -0,0 +1,187 @@
+<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 label="管理员" value="0" />
+            <el-option label="普通用户" value="1" />
+            <el-option label="访客" value="2" />
+          </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 } from 'vue'
+
+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 })
+</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>