From 450234e7ea90cbfda4778fc944af267c5ebc058e Mon Sep 17 00:00:00 2001
From: Ah jung <735878602@qq.com>
Date: Thu, 5 Aug 2021 21:38:32 +0800
Subject: [PATCH] Fixes bug

---
 CHANGELOG.md                  |   4 +-
 src/utils/Drag.ts             |   3 +-
 src/views/comp/form/basic.vue | 184 ++++++++++++++++++++++++++++++++++
 3 files changed, 187 insertions(+), 4 deletions(-)
 create mode 100644 src/views/comp/form/basic.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f619fee..f1e192e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,4 @@
-# 1.5.1 (2021-08-07)
+# 1.5.1 (2021-08-05)
 ### 🐛 Bug Fixes
 - 修复windows系统获取项目换行符问题
 - 修复表格分页计算问题 [@Chika99](https://github.com/Chika99)
@@ -6,8 +6,6 @@
 - 依赖 dayjs 移除，用date-fns，和UI框架底层保持一致
 - 修复已知bug 
 
-
-
 - ### ✨ Features
 - 新增 `baseForm` 组件，和`基础`，`useForm`使用方式
 - 新增 `baseModal`，组件，和 `useForm`使用方式  
diff --git a/src/utils/Drag.ts b/src/utils/Drag.ts
index 5a9e50d..c70761a 100644
--- a/src/utils/Drag.ts
+++ b/src/utils/Drag.ts
@@ -1,5 +1,6 @@
 //获取相关CSS属性
 const getCss = function (o, key) {
+  // @ts-ignore
   return o.currentStyle
     ? o.currentStyle[key]
     : document.defaultView.getComputedStyle(o, false)[key];
@@ -57,7 +58,7 @@ const startDrag = function (bar, target, callback) {
     }
   };
   document.onmousemove = function (event) {
-    const e = event ? event : window.event;
+    const e: any = event ? event : window.event;
     if (params.flag) {
       const nowX = e.clientX,
         nowY = e.clientY;
diff --git a/src/views/comp/form/basic.vue b/src/views/comp/form/basic.vue
new file mode 100644
index 0000000..3e6dda3
--- /dev/null
+++ b/src/views/comp/form/basic.vue
@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="基础表单"> 基础表单，用于向用户收集表单信息 </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard mt-4">
+      <div class="BasicForm">
+        <BasicForm
+          submitButtonText="提交预约"
+          layout="horizontal"
+          :gridProps="{ cols: 1 }"
+          :schemas="schemas"
+        >
+          <template #statusSlot="{ model, field }">
+            <n-input v-model:value="model[field]" />
+          </template>
+        </BasicForm>
+      </div>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { BasicForm, FormSchema } from '@/components/Form/index';
+  import { useMessage } from 'naive-ui';
+
+  const schemas: FormSchema[] = [
+    {
+      field: 'name',
+      component: 'NInput',
+      label: '姓名',
+      labelMessage: '这是一个提示',
+      componentProps: {
+        placeholder: '请输入姓名',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
+    },
+    {
+      field: 'mobile',
+      component: 'NInputNumber',
+      label: '手机',
+      componentProps: {
+        placeholder: '请输入手机号码',
+        showButton: false,
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'type',
+      component: 'NSelect',
+      label: '类型',
+      componentProps: {
+        placeholder: '请选择类型',
+        options: [
+          {
+            label: '舒适性',
+            value: 1,
+          },
+          {
+            label: '经济性',
+            value: 2,
+          },
+        ],
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeDate',
+      component: 'NDatePicker',
+      label: '预约时间',
+      componentProps: {
+        type: 'date',
+        clearable: true,
+        defaultValue: 1183135260000,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeTime',
+      component: 'NTimePicker',
+      label: '停留时间',
+      componentProps: {
+        clearable: true,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeProject',
+      component: 'NCheckbox',
+      label: '预约项目',
+      componentProps: {
+        placeholder: '请选择预约项目',
+        options: [
+          {
+            label: '种牙',
+            value: 1,
+          },
+          {
+            label: '补牙',
+            value: 2,
+          },
+          {
+            label: '根管',
+            value: 3,
+          },
+        ],
+        onUpdateChecked: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeSource',
+      component: 'NRadioGroup',
+      label: '来源',
+      componentProps: {
+        options: [
+          {
+            label: '网上',
+            value: 1,
+          },
+          {
+            label: '门店',
+            value: 2,
+          },
+        ],
+        onUpdateChecked: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'status',
+      label: '状态',
+      //插槽
+      slot: 'statusSlot',
+    },
+  ];
+
+  export default defineComponent({
+    components: { BasicForm },
+    setup() {
+      const formRef: any = ref(null);
+      const message = useMessage();
+
+      function handleSubmit(values: Recordable) {
+        console.log(values);
+        message.success(JSON.stringify(values));
+      }
+
+      function handleReset(values: Recordable) {
+        console.log(values);
+      }
+
+      return {
+        schemas,
+        formRef,
+        handleSubmit,
+        handleReset,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .BasicForm {
+    width: 550px;
+    margin: 0 auto;
+    overflow: hidden;
+    padding-top: 20px;
+  }
+</style>