大屏项目初始化

screen-vue/src/views/database/screen/form.vue

@@ -0,0 +1,147 @@
+<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="moduleName">
+          <el-input 
+            v-model="formData.moduleName" 
+            placeholder="请输入模块名称"
+            clearable
+            :disabled="isEdit"  
+          />
+        </el-form-item>
+      </div>
+      <div class="form-col">
+        <el-form-item label="模块编码" prop="moduleCode">
+          <el-input 
+            v-model="formData.moduleCode" 
+            placeholder="请输入模块编码"
+            clearable
+            :disabled="isEdit"  
+          />
+        </el-form-item>
+      </div>
+    </div>
+	
+	<div class="form-row">
+	  <div class="form-col">
+		  <el-form-item label="大屏标题" prop="titleName">
+		    <el-input 
+		      v-model="formData.titleName" 
+		      placeholder="请输入大屏标题"
+		      clearable
+		      :disabled="isEdit"  
+		    />
+		  </el-form-item>
+	  </div>
+	  <div class="form-col">
+	    <el-form-item label="路由地址" prop="path">
+	      <el-input 
+	        v-model="formData.path" 
+	        placeholder="请输入路由地址"
+	        clearable
+	        :disabled="isEdit"  
+	      />
+	    </el-form-item>
+	  </div>
+	</div>
+	
+	
+	<div class="form-row">
+	  <div class="form-col">
+	    <el-form-item label="模块描述" prop="remark">
+	      <el-input 
+	        v-model="formData.remark" 
+	        placeholder="请输入模块描述"
+	        clearable
+	        :disabled="isEdit"  
+	      />
+	    </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'
+
+const props = defineProps({
+  formData: {
+    type: Object,
+    required: true,
+    default: () => ({
+      moduleName: '',
+      ustatus: '1',
+    })
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const formRef = ref(null)
+
+const formRules = {
+  moduleName: [ { required: true, message: '请输入角色名称', trigger: 'blur' } ],
+  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>