feat:新增判断类型获取类型方法

CHANGELOG.md

+## -alpha
+
+- 新增判断类型获取类型方法
+
 ## 2023-01-18
 
 - 提示框样式修改

src/common/constants/index.ts

 /**
- * Define the common constant
  * 定义公共常数
  */
 

src/common/types/dialog-layout-props.ts

 interface DialogLayoutProps {
+  title?: any;
   width?: number;
+  maxWidth?: number;
+  minWidth?: number;
   height?: number;
-  [proppName: string]: any;
+  maxHeight?: number;
+  minHeight?: number;
 }
 
 export type { DialogLayoutProps };

src/common/utils/del-empty-objkey.ts

+import { isEmpty } from './isEmpty';
+
 /**
  * 删除对象中为空的属性值 返回一个新对象
  * @param data - 原始对象
@@ -5,13 +7,7 @@
 export const delEmptyObjkey = function (data: any) {
   const obj = {} as any;
   for (const key in data) {
-    if (
-      data[key] !== null &&
-      data[key] !== undefined &&
-      data[key] !== '' &&
-      JSON.stringify(data[key]) !== '[]' &&
-      JSON.stringify(data[key]) !== '{}'
-    ) {
+    if (!isEmpty(data[key])) {
       obj[key] = data[key];
     }
   }

src/common/utils/get-type.ts

+export const getType = function (value: any): string {
+  const typeofs = Object.prototype.toString.call(value);
+
+  switch (typeofs) {
+    case '[object Number]':
+      return 'Number';
+
+    case '[object String]':
+      return 'String';
+
+    case '[object Boolean]':
+      return 'Boolean';
+
+    case '[object Null]':
+      return 'Null';
+
+    case '[object Undefined]':
+      return 'Undefined';
+
+    case '[object Array]':
+      return 'Array';
+
+    case '[object Object]':
+      return 'Object';
+
+    default:
+      return typeofs;
+  }
+};

src/common/utils/index.ts

@@ -8,6 +8,8 @@ export * from './json-str';
 export * from './isEmpty';
 export * from './maths';
 export * from './myCloneDeep';
+export * from './get-type';
+export * from './is';
 export {
   cloneDeep,
   orderBy,

src/common/utils/is.ts

+import { getType } from './get-type';
+
+const typeCheck = function (type: string, val: any): boolean {
+  if (getType(val) === type) {
+    return true;
+  } else {
+    return false;
+  }
+};
+
+type TypeChecking = {
+  number: (val: any) => boolean;
+  string: (val: any) => boolean;
+  array: (val: any) => boolean;
+  object: (val: any) => boolean;
+};
+
+export const is: TypeChecking = {
+  number: (val: any) => {
+    return typeCheck('Number', val);
+  },
+  string: (val: any) => {
+    return typeCheck('String', val);
+  },
+  array: (val: any) => {
+    return typeCheck('Array', val);
+  },
+  object: (val: any) => {
+    return typeCheck('Object', val);
+  },
+};

src/components/DateRange.vue

@@ -171,7 +171,7 @@ function updateProxy() {
 }
 
 function onClickDate() {
-  console.log('点击确定', dateProxyDate.value);
+  // console.log('点击确定', dateProxyDate.value);
   // 多选
   if (props.config?.multiple) {
     if (isEmpty(dateProxyDate.value)) {

src/components/MyForm.vue

@@ -378,9 +378,6 @@ function reset() {
   margin-bottom: 2px;
   display: inline-block;
 }
-.form-label-padding-bottom {
-  padding-bottom: 20px;
-}
 
 // :deep(.my-select
 //     > :nth-child(1)

src/components/dialog-layout/DialogLayout.vue

@@ -60,39 +60,72 @@ function onSave() {
 }
 </script>
 <template>
-  <q-card class="my-card" :style="myCardStyle">
-    <div class="card-content">
-      <div class="title">{{ title }}</div>
-      <div class="content">
-        <q-scroll-area
-          style="height: 100%; max-width: 100%"
-          :thumb-style="thumbStyle"
-          :bar-style="barStyle"
-        >
-          <slot></slot>
-        </q-scroll-area>
-      </div>
-      <div class="bottom-action">
-        <q-btn flat style="color: #64b3f4" label="取消" @click="onCancel" />
-        <q-btn
-          unelevated
-          style="background: #64b3f4; color: white"
-          label="确定"
-          @click="onSave()"
-        />
+  <q-card class="box" :style="myCardStyle">
+    <div class="main" :style="myCardStyle">
+      <div class="card-content">
+        <div class="title"></div>
+        <div class="content">
+          <q-scroll-area
+            style="height: 100%; max-width: 100%"
+            :thumb-style="thumbStyle"
+            :bar-style="barStyle"
+          >
+            <slot></slot>
+          </q-scroll-area>
+        </div>
+        <div class="bottom-action">
+          <q-btn flat style="color: #64b3f4" label="取消" @click="onCancel" />
+          <q-btn
+            unelevated
+            style="background: #64b3f4; color: white"
+            label="确定"
+            @click="onSave()"
+          />
+        </div>
       </div>
     </div>
+    <div class="title-mask">
+      <span>{{ title }}</span>
+    </div>
   </q-card>
 </template>
 
 <style lang="scss" scoped>
-.my-card {
+.box {
+  position: relative;
+}
+.title-mask {
+  box-sizing: border-box;
+  position: absolute;
+  top: 29.5px;
+  height: 30.5px;
+  border-radius: 0 !important;
+  border-top-right-radius: 15px !important;
+  border-bottom-right-radius: 15px !important;
+  background-color: #64b3f4;
+  padding-left: 20px;
+  display: flex;
+  align-items: center;
+  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
+    rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
+    rgba(0, 0, 0, 0.07) 0px 16px 16px;
+
+  > span {
+    color: white;
+    font-size: 15px;
+    font-weight: bold;
+    padding-left: 8px;
+    padding-right: 17px;
+  }
+}
+.main {
+  position: relative;
   padding: 20px;
   background-image: linear-gradient(60deg, #c2e59c 0%, #64b3f4 100%);
   box-sizing: border-box;
-
   display: flex;
 }
+
 .card-content {
   width: 100%;
   background-color: #fff;
@@ -103,13 +136,12 @@ function onSave() {
   overflow: hidden;
 
   .title {
+    box-sizing: border-box;
     height: 40px;
-    padding: 8px;
-    font-size: 16px;
     font-weight: bolder;
-    color: #c2e59c;
     display: flex;
-    align-items: center;
+    align-items: flex-end;
+    // border: 1px solid red;
   }
   .content {
     flex: 1;

src/css/app.scss

@@ -45,6 +45,9 @@ a:hover {
   transform: scale(1.5) translateY(1px);
   // transform: translateY(5px);
 }
+.form-label-padding-bottom {
+  padding-bottom: 20px;
+}
 
 // tooltip样式
 .com-tooltip-sty {

src/modules/form-test/config.ts

@@ -60,50 +60,21 @@ export const form_config = [
     label: '开始日期~结束日期',
     col: 'col-4',
     type: 'dateRange',
+    required: true,
     bind: {
       filled: true,
       clearable: true,
       dateMask: 'YYYY-MM-DD',
+      rules: [(val: any) => !isEmpty(val) || '必填'],
     },
   },
   {
-    fild: 'platform',
-    label: '平台',
+    solt: 'days',
     col: 'col-4',
-    type: 'select',
-    bind: {
-      filled: true,
-      multiple: true,
-      clearable: true,
-      emitValue: true,
-      mapOptions: true,
-      options: [
-        {
-          label: '微信',
-          value: 'WeChat',
-        },
-        {
-          label: '微博',
-          value: 'Microblog',
-        },
-        {
-          label: '哔哩哔哩',
-          value: 'bilibili',
-        },
-        {
-          label: 'Twitter',
-          value: 'Twitter',
-        },
-        {
-          label: 'Facebook',
-          value: 'Facebook',
-        },
-        {
-          label: 'AAA',
-          value: 'aaa',
-        },
-      ],
-    },
+  },
+  {
+    solt: 'social',
+    col: 'col-12',
   },
   {
     fild: 'remark',

src/modules/form-test/element/FormDialog.vue

 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted, computed } from 'vue';
+import { date } from 'quasar';
 import { useMessage } from 'src/common/hooks';
 import Com from 'src/components';
-import { isEmpty } from 'src/common/utils';
+import { isEmpty, is } from 'src/common/utils';
 
 import { form_config } from '../config';
 import type { DialogLayoutProps } from 'src/common/types';
@@ -21,7 +22,9 @@ const show = ref(false);
 const state = reactive({
   readonly: false,
   formConfig: [] as any[],
-  formData: {} as any,
+  formData: {
+    social: [],
+  } as any,
 });
 
 const pagestate = reactive<DialogLayoutProps>({
@@ -39,12 +42,62 @@ const sexOpt = reactive([
   },
 ]);
 
+const socialOpt = reactive([
+  {
+    value: 'instagram',
+    label: 'Instagram',
+    icon: 'bi-instagram',
+  },
+  {
+    value: 'weibo',
+    label: '微博',
+    icon: 'bi-sina-weibo',
+  },
+  {
+    value: 'wechat',
+    label: '微信',
+    icon: 'bi-wechat',
+  },
+  {
+    value: 'qq',
+    label: 'QQ',
+    icon: 'bi-tencent-qq',
+  },
+  {
+    value: 'twitter',
+    label: 'Twitter',
+    icon: 'bi-twitter',
+  },
+]);
+
+const days = computed(() => {
+  const DATE = state.formData.dateRange;
+  if (isEmpty(DATE)) {
+    return '';
+  } else {
+    let re;
+    if (is.object(DATE)) {
+      const date1 = new Date(DATE.from);
+      const date2 = new Date(DATE.to);
+      const unit = 'days';
+      const diff = date.getDateDiff(date2, date1, unit);
+      re = diff + 1;
+    } else {
+      re = 1;
+    }
+
+    return re;
+  }
+});
+
 onMounted(() => {
   initFormConfig();
 });
 
 function initDialog() {
-  state.formData = {};
+  state.formData = {
+    social: [],
+  };
 }
 
 function initFormConfig() {
@@ -66,6 +119,7 @@ function onSave() {
     if (!suc) return;
 
     if (isEmpty(formData.sex)) return warn('性别必填');
+    if (formData.social.length < 1) return warn('至少选择一个社交平台');
 
     console.log('formData >>>>', formData);
     closeDialog();
@@ -100,6 +154,38 @@ function onCancel() {
             </div>
           </div>
         </template>
+        <template #days>
+          <div class="item-content">
+            <div class="label-title text-required">天数</div>
+            <div class="label-content q-pl-sm">{{ days }}</div>
+          </div>
+        </template>
+        <template #social>
+          <div class="item-content form-label-padding-bottom">
+            <div class="label-title text-required">社交</div>
+            <div class="label-content">
+              <q-option-group
+                v-model="state.formData.social"
+                type="checkbox"
+                :options="socialOpt"
+                inline
+                :disable="state.readonly"
+              >
+                <template v-slot:label="opt">
+                  <div class="row items-center">
+                    <q-icon
+                      :name="opt.icon"
+                      size="1.5em"
+                      class="q-mr-sm"
+                      color="grey-8"
+                    />
+                    <span>{{ opt.label }}</span>
+                  </div>
+                </template>
+              </q-option-group>
+            </div>
+          </div>
+        </template>
       </Com.MyForm>
     </Com.DialogLayout>
   </q-dialog>
@@ -107,7 +193,6 @@ function onCancel() {
 
 <style lang="scss" scoped>
 .item-content {
-  height: 40px;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -122,6 +207,8 @@ function onCancel() {
   display: inline-block;
 }
 .label-content {
+  height: 40px;
+  min-height: 40px;
   flex: 1;
   display: flex;
   flex-direction: row;