新增示例页面

src/views/form/basicForm/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="基础表单">
+        表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。表单域标签也可支持响应式。
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard mt-4">
+      <n-grid cols="2 s:1 m:3 l:3 xl:3 2xl:3" responsive="screen">
+        <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
+          <n-form
+            :label-width="80"
+            :model="formValue"
+            :rules="rules"
+            label-placement="left"
+            ref="formRef"
+            class="py-8"
+          >
+            <n-form-item label="预约姓名" path="name">
+              <n-input v-model:value="formValue.name" placeholder="输入姓名"/>
+            </n-form-item>
+            <n-form-item label="预约号码" path="mobile">
+              <n-input placeholder="电话号码" v-model:value="formValue.mobile"/>
+            </n-form-item>
+            <n-form-item label="预约时间" path="datetime">
+              <n-date-picker type="datetime" v-model:value="formValue.datetime"/>
+            </n-form-item>
+            <n-form-item label="预约医生" path="doctor">
+              <n-select
+                placeholder="请选择预约医生"
+                :options="doctorList"
+                v-model:value="formValue.doctor"
+              />
+            </n-form-item>
+            <n-form-item label="预约事项" path="matter">
+              <n-select
+                placeholder="请选择预约事项"
+                :options="matterList"
+                v-model:value="formValue.matter"
+                multiple
+              />
+            </n-form-item>
+            <n-form-item label="性别" path="sex">
+              <n-radio-group v-model:value="formValue.sex" name="sex">
+                <n-space>
+                  <n-radio :value="1">男</n-radio>
+                  <n-radio :value="2">女</n-radio>
+                </n-space>
+              </n-radio-group>
+            </n-form-item>
+            <n-form-item label="预约备注" path="remark">
+              <n-input
+                v-model:value="formValue.remark"
+                type="textarea"
+                placeholder="请输入预约备注"
+              />
+            </n-form-item>
+            <div style="margin-left:80px">
+              <n-space>
+                <n-button type="primary" @click="formSubmit">提交预约</n-button>
+                <n-button @click="resetForm">重置</n-button>
+              </n-space>
+            </div>
+          </n-form>
+        </n-grid-item>
+      </n-grid>
+    </n-card>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+const matterList = [
+  {
+    label: '种牙',
+    value: 1
+  },
+  {
+    label: '补牙',
+    value: 2
+  },
+  {
+    label: '根管',
+    value: 3
+  }
+]
+
+const doctorList = [
+  {
+    label: '李医生',
+    value: 1
+  },
+  {
+    label: '黄医生',
+    value: 2
+  },
+  {
+    label: '张医生',
+    value: 3
+  }
+]
+
+export default defineComponent({
+  setup() {
+    const formRef = ref(null)
+    const message = useMessage()
+
+    return {
+      formRef,
+      formValue: ref({
+        name: '',
+        mobile: '',
+        remark: '',
+        sex: 1,
+        matter: null,
+        doctor: null,
+        datetime: [],
+      }),
+      rules: {
+        name: {
+          required: true,
+          message: '请输入预约姓名',
+          trigger: 'blur'
+        },
+        remark: {
+          required: true,
+          message: '请输入预约备注',
+          trigger: 'blur'
+        },
+        mobile: {
+          required: true,
+          message: '请输入预约电话号码',
+          trigger: ['input']
+        },
+        datetime: {
+          required: true,
+          type: 'number',
+          message: '请选择预约时间',
+          trigger: ['blur', 'change'],
+        },
+        doctor: {
+          required: true,
+          type: 'number',
+          message: '请选择预约医生',
+          trigger: 'change'
+        },
+      },
+      doctorList,
+      matterList,
+      formSubmit(e) {
+        formRef.value.validate((errors) => {
+          if (!errors) {
+            message.success('验证成功')
+          } else {
+            message.error('验证失败，请填写完整信息')
+          }
+        })
+      },
+      resetForm() {
+        formRef.value.restoreValidation()
+      }
+    }
+  }
+})
+</script>

src/views/form/detail/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="表单详情">
+        表单除了提交数据，有时也用于显示只读信息。
+      </n-card>
+    </div>
+    <n-card :bordered="false" title="基本信息" class="proCard mt-4" size="small" :segmented="{content: 'hard'}">
+      <n-descriptions label-placement="left" class="py-2">
+        <n-descriptions-item><template #label>收款人姓名</template>啊俊</n-descriptions-item>
+        <n-descriptions-item label="收款账户">NaiveUiAdmin@qq.com</n-descriptions-item>
+        <n-descriptions-item label="付款类型">支付宝</n-descriptions-item>
+        <n-descriptions-item label="付款账户">NaiveUiAdmin@163.com</n-descriptions-item>
+        <n-descriptions-item label="转账金额">￥1980.00</n-descriptions-item>
+        <n-descriptions-item label="状态"><n-tag type="success"> 已到账 </n-tag></n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+    <n-card :bordered="false" title="其它信息" class="proCard mt-4" size="small" :segmented="{content: 'hard'}">
+      <n-descriptions label-placement="left" class="py-2">
+        <n-descriptions-item><template #label>城市</template>深圳</n-descriptions-item>
+        <n-descriptions-item label="性别">男</n-descriptions-item>
+        <n-descriptions-item label="邮箱">NaiveUiAdmin@qq.com</n-descriptions-item>
+        <n-descriptions-item label="地址">广东省深圳市南山区</n-descriptions-item>
+        <n-descriptions-item label="生日">1991-06-04</n-descriptions-item>
+        <n-descriptions-item label="认证"><n-tag type="success"> 已认证 </n-tag></n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+    <n-card :bordered="false" title="表格信息" class="proCard mt-4" size="small" :segmented="{content: 'hard'}">
+      <n-table :bordered="false" :single-line="false">
+        <thead>
+        <tr>
+          <th>姓名</th>
+          <th>性别</th>
+          <th>城市</th>
+          <th>生日</th>
+          <th width="150">操作</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td>Ah jung</td>
+          <td>男</td>
+          <td>深圳</td>
+          <td>1993-11-09</td>
+          <td>
+            <n-space>
+              <n-button size="small" type="error">删除</n-button>
+              <n-button size="small" type="info">查看</n-button>
+            </n-space>
+          </td>
+        </tr>
+        <tr>
+          <td>西门飞雪</td>
+          <td>男</td>
+          <td>广州</td>
+          <td>1991-09-11</td>
+          <td>
+            <n-space>
+              <n-button size="small" type="error">删除</n-button>
+              <n-button size="small" type="info">查看</n-button>
+            </n-space>
+          </td>
+        </tr>
+        <tr>
+          <td>泰坦巨人</td>
+          <td>男</td>
+          <td>北京</td>
+          <td>1990-11-03</td>
+          <td>
+            <n-space>
+              <n-button size="small" type="error">删除</n-button>
+              <n-button size="small" type="info">查看</n-button>
+            </n-space>
+          </td>
+        </tr>
+        <tr>
+          <td>猎魔人</td>
+          <td>女</td>
+          <td>上海</td>
+          <td>1992-03-11</td>
+          <td>
+            <n-space>
+              <n-button size="small" type="error">删除</n-button>
+              <n-button size="small" type="info">查看</n-button>
+            </n-space>
+          </td>
+        </tr>
+        </tbody>
+      </n-table>
+    </n-card>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return {}
+  }
+})
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/form/stepForm/Step1.vue

@@ -0,0 +1,131 @@
+<template>
+  <n-form
+    :label-width="90"
+    :model="formValue"
+    :rules="rules"
+    label-placement="left"
+    ref="form1Ref"
+    style="max-width: 500px; margin: 40px auto 0;"
+  >
+    <n-form-item label="付款账户" path="myAccount">
+      <n-select
+        placeholder="请选择付款账户"
+        :options="myAccountList"
+        v-model:value="formValue.myAccount"
+      />
+    </n-form-item>
+    <n-form-item label="收款账户" path="account">
+      <n-input-group>
+        <n-select
+          placeholder="请选择"
+          :options="accountTypeList"
+          :style="{ width: '20%' }"
+          v-model:value="formValue.accountType"
+        />
+        <n-input placeholder="请输入收款账户" :style="{ width: '80%' }" v-model:value="formValue.account"/>
+      </n-input-group>
+
+
+    </n-form-item>
+    <n-form-item label="收款人姓名" path="name">
+      <n-input placeholder="请输入收款人姓名" v-model:value="formValue.name"/>
+    </n-form-item>
+    <n-form-item label="转账金额" path="money">
+      <n-input placeholder="请输入转账金额" v-model:value="formValue.money">
+        <template #prefix>
+          <span class="text-gray-400">￥</span>
+        </template>
+      </n-input>
+    </n-form-item>
+    <div style="margin-left:80px">
+      <n-space>
+        <n-button type="primary" @click="formSubmit">下一步</n-button>
+      </n-space>
+    </div>
+  </n-form>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+const myAccountList = [
+  {
+    label: 'NaiveUiAdmin@163.com',
+    value: 1
+  },
+  {
+    label: 'NaiveUiAdmin@qq.com',
+    value: 2
+  },
+]
+
+const accountTypeList = [
+  {
+    label: '微信',
+    value: 1
+  },
+  {
+    label: '支付宝',
+    value: 2
+  },
+]
+
+export default defineComponent({
+  emits: ['nextStep'],
+  setup(_, { emit }) {
+    const form1Ref: any = ref(null)
+    const message = useMessage()
+    const current = ref(1)
+
+    return {
+      form1Ref,
+      current,
+      formValue: ref({
+        accountType: 1,
+        myAccount: null,
+        account: 'xioama@qq.com',
+        money: "1980",
+        name: 'Ah jung',
+      }),
+      rules: {
+        name: {
+          required: true,
+          message: '请输入收款人姓名',
+          trigger: 'blur'
+        },
+        account: {
+          required: true,
+          message: '请输入收款账户',
+          trigger: 'blur'
+        },
+        money: {
+          required: true,
+          message: '请输入转账金额',
+          trigger: 'blur'
+        },
+        myAccount: {
+          required: true,
+          type: 'number',
+          message: '请选择付款账户',
+          trigger: 'change'
+        },
+      },
+      myAccountList,
+      accountTypeList,
+      formSubmit() {
+        form1Ref.value.validate((errors) => {
+          if (!errors) {
+            emit('nextStep')
+          } else {
+            message.error('验证失败，请填写完整信息')
+          }
+        })
+      },
+      resetForm() {
+        form1Ref.value.restoreValidation()
+      }
+    }
+  }
+})
+</script>

src/views/form/stepForm/Step2.vue

@@ -0,0 +1,81 @@
+<template>
+  <n-form
+    :label-width="90"
+    :model="formValue"
+    :rules="rules"
+    label-placement="left"
+    ref="form2Ref"
+    style="max-width: 500px; margin: 40px auto 0;"
+  >
+    <n-form-item label="付款账户" path="myAccount">
+      <span>NaiveUiAdmin@163.com</span>
+    </n-form-item>
+    <n-form-item label="收款账户" path="account">
+      <span>NaiveUiAdmin@qq.com</span>
+    </n-form-item>
+    <n-form-item label="收款人姓名" path="name">
+      <span>Ah jung</span>
+    </n-form-item>
+    <n-form-item label="转账金额" path="money">
+      <span>￥1980</span>
+    </n-form-item>
+    <n-divider/>
+    <n-form-item label="支付密码" path="password">
+      <n-input type="password" v-model:value="formValue.password"/>
+    </n-form-item>
+    <div style="margin-left:80px">
+      <n-space>
+        <n-button type="primary" :loading="loading" @click="formSubmit">提交</n-button>
+        <n-button @click="prevStep">上一步</n-button>
+      </n-space>
+    </div>
+  </n-form>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  emits: ['prevStep', 'nextStep'],
+  setup(_, { emit }) {
+    const form2Ref: any = ref(null)
+    const message = useMessage()
+    const loading = ref(false)
+
+    function prevStep() {
+      emit('prevStep')
+    }
+
+    function formSubmit() {
+      loading.value = true
+      form2Ref.value.validate((errors) => {
+        if (!errors) {
+          setTimeout(() => {
+            emit('nextStep')
+          }, 1500)
+        } else {
+          message.error('验证失败，请填写完整信息')
+        }
+      })
+    }
+
+    return {
+      form2Ref,
+      loading,
+      formValue: ref({
+        password: '086611'
+      }),
+      rules: {
+        password: {
+          required: true,
+          message: '请输入支付密码',
+          trigger: 'blur'
+        },
+      },
+      prevStep,
+      formSubmit,
+    }
+  }
+})
+</script>

src/views/form/stepForm/Step3.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <n-result status="success" title="操作成功" description="预计两小时内到账" class="step-result">
+      <template #default>
+        <div class="information">
+          <n-grid cols="2 s:2 m:3 l:3 xl:3 2xl:3" responsive="screen" class="my-1">
+            <n-gi>付款账户：</n-gi>
+            <n-gi>NaiveUiAdmin@163.com</n-gi>
+          </n-grid>
+          <n-grid cols="2 s:2 m:3 l:3 xl:3 2xl:3" responsive="screen" class="my-1">
+            <n-gi>收款账户：</n-gi>
+            <n-gi>xiaoma@qq.com</n-gi>
+          </n-grid>
+          <n-grid cols="2 s:2 m:3 l:3 xl:3 2xl:3" responsive="screen" class="my-1">
+            <n-gi>收款人姓名：</n-gi>
+            <n-gi>啊俊</n-gi>
+          </n-grid>
+          <n-grid cols="2 s:2 m:3 l:3 xl:3 2xl:3" responsive="screen" class="my-1">
+            <n-gi>转账金额：</n-gi>
+            <n-gi>￥<span class="money">1980</span> 元</n-gi>
+          </n-grid>
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-center">
+          <n-button type="primary" @click="finish" class="mr-4">再转一笔</n-button>
+          <n-button @click="prevStep">查看账单</n-button>
+        </div>
+      </template>
+    </n-result>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  emits: ['finish', 'prevStep'],
+  setup(_, { emit }) {
+    const router = useRouter()
+
+    function prevStep() {
+      emit('prevStep')
+    }
+
+    function finish() {
+      emit('finish')
+    }
+
+    function toOrderList() {
+      router.push('/form/step-form')
+    }
+
+    return {
+      prevStep,
+      finish,
+      toOrderList
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.step-result {
+  max-width: 560px;
+  margin: 40px auto 0;
+
+  ::v-deep(.n-result-content) {
+    background-color: #fafafa;
+    padding: 24px 40px;
+  }
+
+  .information {
+    line-height: 22px;
+
+    .ant-row:not(:last-child) {
+      margin-bottom: 24px;
+    }
+  }
+
+  .money {
+    font-family: "Helvetica Neue", sans-serif;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 14px;
+  }
+}
+</style>

src/views/form/stepForm/stepForm.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="分步表单">
+        将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard mt-4">
+      <n-space vertical class="steps">
+        <n-steps :current="currentTab" :status="currentStatus">
+          <n-step
+            title="填写转账信息"
+            description="确保填写正确"
+          />
+          <n-step
+            title="确认转账信息"
+            description="确认转账信息"
+          />
+          <n-step
+            title="完成"
+            description="恭喜您，转账成功"
+          />
+        </n-steps>
+        <step1 v-if="currentTab === 1" @nextStep="nextStep"/>
+        <step2 v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep"/>
+        <step3 v-if="currentTab === 3" @prevStep="prevStep" @finish="finish"/>
+      </n-space>
+    </n-card>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import step1 from './Step1.vue'
+import step2 from './Step2.vue'
+import step3 from './Step3.vue'
+
+export default defineComponent({
+  components: { step1, step2, step3 },
+  setup() {
+    const currentTab = ref(1)
+    const currentStatus = ref('process')
+
+    function nextStep() {
+      if (currentTab.value < 3) {
+        currentTab.value += 1
+      }
+    }
+
+    function prevStep() {
+      if (currentTab.value > 1) {
+        currentTab.value -= 1
+      }
+    }
+
+    function finish() {
+      currentTab.value = 1
+    }
+
+    return {
+      currentTab,
+      currentStatus,
+      nextStep,
+      prevStep,
+      finish
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.steps {
+  max-width: 750px;
+  margin: 16px auto;
+}
+</style>