🎨合并编译打包

web-src/src/layout/components/lay-navbar/component/user.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { FormInstance } from "element-plus";
+
+// 声明 props 类型
+export interface FormProps {
+  formInline: {
+    id: string;
+    avatar: string;
+    name: string;
+    account: string;
+    email: string;
+    isAdmin: number;
+    status: number;
+  };
+}
+
+// 声明 props 默认值
+// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    id: "",
+    avatar: "",
+    name: "",
+    account: "",
+    email: "",
+    isAdmin: 0,
+    status: 1
+  })
+});
+
+// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
+// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
+// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
+// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
+// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
+const userEditForm = ref(props.formInline);
+const userEditFormRef = ref<FormInstance>();
+
+function getUserEditFormRef() {
+  return userEditFormRef.value;
+}
+
+defineExpose({ getUserEditFormRef });
+</script>
+
+<template>
+  <el-form ref="userEditFormRef" :model="userEditForm" label-width="20%">
+    <el-form-item
+      prop="name"
+      label="名称"
+      :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]"
+    >
+      <el-input
+        v-model="userEditForm.name"
+        class="!w-[220px]"
+        placeholder="名称"
+      />
+    </el-form-item>
+    <el-form-item
+      prop="account"
+      label="账号"
+      :rules="[{ required: true, message: '账号不能为空', trigger: 'blur' }]"
+    >
+      <el-input
+        v-model="userEditForm.account"
+        disabled
+        class="!w-[220px]"
+        placeholder="账号"
+      />
+    </el-form-item>
+    <el-form-item prop="email" label="邮箱">
+      <el-input
+        v-model="userEditForm.email"
+        class="!w-[220px]"
+        placeholder="邮箱"
+      />
+    </el-form-item>
+    <el-form-item
+      prop="isAdmin"
+      label="超管"
+      :rules="[
+        { required: true, message: '是否为超管不能为空', trigger: 'blur' }
+      ]"
+    >
+      <el-select v-model="userEditForm.isAdmin" disabled class="!w-[220px]">
+        <el-option label="否" :value="0" />
+        <el-option label="是" :value="1" />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      prop="status"
+      label="状态"
+      :rules="[{ required: true, message: '状态不能为空', trigger: 'blur' }]"
+    >
+      <el-select v-model="userEditForm.status" disabled class="!w-[220px]">
+        <el-option label="禁用" :value="0" />
+        <el-option label="启用" :value="1" />
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>