feat: add switch component

Author: suqi

locales/en.yml

@@ -4,9 +4,41 @@ button:
   methods: Get Table Component Instance
   edit: Edit
   delete: Delete
+  
 text: 
   hope: Hope
   help: can help you. If you like it, please give it a star
   empty: No Data
   sure: Whether to confirm the deletion?
-  console: Please open the console to watch
+  console: Please open the console to watch
+  search: Search
+  addUser: Add User
+  name: Name
+  age: Age
+  address: Address
+  date: Date
+  startDate: Start Date
+  endDate: End Date
+  username: Username
+  password: Password
+  email: Email
+  phone: Phone
+  role: Role
+  account: Account
+  status: Status
+  all: All
+  abel: Able
+  disable: Disable
+
+placeholder:
+  name: Please enter name
+  age: Please enter age
+  address: Please enter address
+  date: Please enter date
+  username: Please enter username
+  password: Please enter password
+  email: Please enter email
+  phone: Please enter phone
+  role: Please enter role
+  account: Please enter account
+  status: Please enter status

locales/zh-CN.yml

@@ -9,4 +9,35 @@ text:
   help: 能帮你。如果你喜欢它，请给它一个star
   empty: 暂无数据
   sure: 是否确认删除？
-  console: 请打开浏览器控制台查看打印信息
+  console: 请打开浏览器控制台查看打印信息
+  search: 搜索
+  addUser: 成员添加
+  name: 姓名
+  age: 年龄
+  address: 地址
+  date: 日期
+  startDate: 开始日期
+  endDate: 结束日期
+  username: 用户名
+  password: 密码
+  email: 邮箱
+  phone: 手机
+  role: 角色
+  account: 账号
+  status: 状态
+  all: 全部
+  abel: 启用
+  disable: 禁用
+
+placeholder:
+  name: 请输入姓名
+  age: 请输入年龄
+  address: 请输入地址
+  date: 请输入日期
+  username: 请输入用户名
+  password: 请输入密码
+  email: 请输入邮箱
+  phone: 请输入手机
+  role: 请输入角色
+  account: 请输入账号
+  status: 请输入状态

packages/components/form/index.tsx

@@ -1,6 +1,7 @@
 import { defineComponent, ref, PropType, reactive, computed } from "vue";
 // import type { FormInstance, FormRules } from "element-plus";
 import { formBuilderProps } from "../../types";
+// import { getPlusName, renderElement } from "../helper";
 import {
   ElForm,
   ElFormItem,
@@ -13,6 +14,7 @@ import {
   ElDatePicker,
   ElTimePicker,
   ElInputNumber,
+  ElSwitch,
   type FormInstance,
   type FormRules
 } from "element-plus";
@@ -49,7 +51,7 @@ export default defineComponent({
     const ruleFormRef = ref<FormInstance>();
     const form = reactive(
       props.formItems.reduce((acc, item: any) => {
-        acc[item.value] = "";
+        acc[item.value] = item.defaultValue;
         return acc;
       }, {})
     );
@@ -107,6 +109,12 @@ export default defineComponent({
             v-model={form[item.value]}
           />
         </ElFormItem>
+      ),
+      // Switch
+      renderSwitch: (item: any) => (
+        <ElFormItem label={item.label} prop={item.value}>
+          <ElSwitch {...(item.attribute || {})} v-model={form[item.value]} />
+        </ElFormItem>
       )
     };
 
@@ -133,6 +141,8 @@ export default defineComponent({
                             return renderElement.renderSelect(item);
                           } else if (item.type === "date") {
                             return renderElement.renderDatePicker(item);
+                          } else if (item.type === "switch") {
+                            return renderElement.renderSwitch(item);
                           }
                         })}
                     </ElCol>
@@ -146,6 +156,8 @@ export default defineComponent({
                   return renderElement.renderSelect(item);
                 } else if (item.type === "date") {
                   return renderElement.renderDatePicker(item);
+                } else if (item.type === "switch") {
+                  return renderElement.renderSwitch(item);
                 }
               })}
           <ElFormItem>

packages/components/helper.ts

@@ -4,3 +4,10 @@
 export function isFunction(val: unknown): val is Function {
   return typeof val === "function";
 }
+
+/**
+ * @description get element plus name
+ */
+export function getPlusName(name: string): string {
+  return `El${name.replace(/( |^)[a-z]/g, L => L.toUpperCase())}`;
+}

packages/types/index.ts

@@ -1,9 +1,8 @@
-
 export interface formBuilderProps {
   label?: string;
   type?: string;
   value?: string;
-  defaultValue?: string;
+  defaultValue?: any;
   attribute?: any;
   rowIndex?: number;
-}
+}

src/App.vue

@@ -24,37 +24,39 @@
     </el-tooltip>
   </el-space>
 
-  <div>
-    <ElpForm
-      :formItems="formItems"
-      :rules="rules"
-      :submitLoading="submitLoading"
-      :layoutConfig="layoutConfig"
-      @resetForm="resetForm"
-      @search="search"
-    >
-      1212</ElpForm
-    >
-  </div>
-  <div>
-    <h2>添加用户</h2>
-    <el-button type="primary" @click="dialogVisible = true">添加账号</el-button>
-    <el-dialog v-model="dialogVisible" title="添加账号" width="40%">
+  <div class="container">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <span>{{ t("text.search") }}</span>
+        </div>
+      </template>
+      <ElpForm
+        :formItems="formItems"
+        :rules="rules"
+        :submitLoading="submitLoading"
+        :formAttr="{ inline: true }"
+        @resetForm="resetForm"
+        @search="search"
+      >
+      </ElpForm>
+    </el-card>
+
+    <el-card class="box-card" style="width: 480px">
+      <template #header>
+        <div class="card-header">
+          <span>{{ t("text.addUser") }}</span>
+        </div>
+      </template>
       <ElpForm
         :formItems="addUserForm"
         :rules="rules"
         :submitLoading="submitLoading"
         @resetForm="resetForm"
         @search="search"
-      />
-    </el-dialog>
-    <ElpForm
-      :formItems="addUserForm"
-      :rules="rules"
-      :submitLoading="submitLoading"
-      @resetForm="resetForm"
-      @search="search"
-    />
+      >
+      </ElpForm>
+    </el-card>
   </div>
 </template>
 
@@ -108,20 +110,20 @@ const rules = reactive<FormRules>({
 });
 const formItems = reactive([
   {
-    label: "姓名",
+    label: t("text.name"),
     type: "input",
     value: "name",
     defaultValue: "",
 
     attribute: {
       maxlength: 20,
       clearable: true,
-      placeholder: "请输入姓名"
+      placeholder: t("text.name")
     },
     rowIndex: 0
   },
   {
-    label: "电话",
+    label: t("text.phone"),
     type: "input",
     value: "mobile",
     defaultValue: "",
@@ -130,44 +132,44 @@ const formItems = reactive([
       maxlength: 11,
       showWordLimit: true,
       clearable: true,
-      placeholder: "请输入电话"
+      placeholder: t("text.phone")
     },
     rowIndex: 1
   },
   {
-    label: "状态",
+    label: t("text.status"),
     type: "select",
     value: "selectValue",
     defaultValue: "0",
 
     attribute: {
-      placeholder: "请选择状态"
+      placeholder: t("text.status")
     },
     options: [
       {
-        label: "全部",
+        label: t("text.all"),
         value: "0"
       },
       {
-        label: "启用",
+        label: t("text.abel"),
         value: "1"
       },
       {
-        label: "禁用",
+        label: t("text.disable"),
         value: "2"
       }
     ],
     rowIndex: 2
   },
   // 日期
   {
-    label: "日期",
+    label: t("text.date"),
     type: "date",
     value: "date",
     defaultValue: "",
     attribute: {
-      startPlaceholder: "开始日期",
-      endPlaceholder: "结束日期",
+      startPlaceholder: t("text.startDate"),
+      endPlaceholder: t("text.endDate"),
       type: "datetimerange",
       // "value-format": "yyyy-MM-dd HH:mm:ss",
       "range-separator": "至",
@@ -183,39 +185,49 @@ const formItems = reactive([
 ]);
 const addUserForm = [
   {
-    label: "姓名",
+    label: t("text.username"),
+    type: "switch",
+    value: "switch",
+    defaultValue: false,
+    attribute: {
+      // placeholder: t("placeholder.username"),
+    },
+    rowIndex: 10
+  },
+  {
+    label: t("text.username"),
     type: "input",
     value: "username",
     defaultValue: "",
 
     attribute: {
-      placeholder: "请输入姓名",
+      placeholder: t("placeholder.username"),
       maxlength: 20,
       clearable: true
     },
     rowIndex: 0
   },
   {
-    label: "账号",
+    label: t("text.account"),
     type: "input",
     value: "password",
     defaultValue: "",
 
     attribute: {
-      placeholder: "请输入账号",
+      placeholder: t("placeholder.account"),
       maxlength: 20,
       clearable: true
     },
     rowIndex: 1
   },
   {
-    label: "密码",
+    label: t("text.password"),
     type: "input",
     value: "password",
     defaultValue: "",
 
     attribute: {
-      placeholder: "请输入密码",
+      placeholder: t("placeholder.password"),
       maxlength: 20,
       clearable: true
     },
@@ -263,7 +275,7 @@ const layoutConfig = [
 onMounted(() => {});
 </script>
 
-<style>
+<style lang="scss">
 .el-empty__description {
   margin: 0 !important;
 }
@@ -275,4 +287,12 @@ onMounted(() => {});
   align-items: center;
   align-content: center;
 }
+
+.container {
+  // background: red;
+  margin-top: 1.5rem;
+  .box-card:not(:last-child) {
+    margin-bottom: 20px;
+  }
+}
 </style>