封装

package.json

@@ -72,6 +72,7 @@
     "flv.js": "^1.6.2",
     "flyio": "^0.6.2",
     "lodash-es": "^4.17.21",
+    "portal-vue": "^2.1.7",
     "node-sass": "^6.0.1",
     "sass-loader": "^13.3.2",
     "uview-ui": "^1.8.8",

src/components/search-form/components/Calendar.vue

@@ -0,0 +1,129 @@
+<template>
+  <u-dropdown-item :title="label">
+    <view class="bg-white">
+      <view
+        class="p-30rpx flex items-center text-28rpx"
+        @click.stop="openCalendar"
+      >
+        <u-icon name="calendar" color="#333" size="32"></u-icon>
+        <text style="margin-left: 6rpx">选择日期：</text>
+        <template v-if="isRange">
+          <view class="flex flex-1 items-center">
+            <u-input
+              :value="status[0]"
+              :placeholder="placeholderStr[0]"
+              class="flex-1 !pointer-events-none"
+              disabled
+              input-align="center"
+            />
+            <view class="px-10rpx">至</view>
+            <u-input
+              :value="status[1]"
+              :placeholder="placeholderStr[1]"
+              class="flex-1 !pointer-events-none"
+              disabled
+              input-align="center"
+            />
+          </view>
+        </template>
+        <template v-else>
+          <u-input
+              :value="status"
+              :placeholder="placeholderStr"
+              class="flex-1 !pointer-events-none"
+              disabled
+              input-align="left"
+            />
+        </template>
+      </view>
+      <u-line></u-line>
+      <portal to="calendar-portal">
+        <u-calendar
+          v-model="show"
+          :mode="mode"
+          @change="handleChange"
+        ></u-calendar>
+      </portal>
+    </view>
+  </u-dropdown-item>
+</template>
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: [Array, Object, String, Number],
+    },
+    placeholder: {
+      type: [Array, String],
+      default: '请选择日期',
+    },
+    params: {
+      type: Object,
+      default: () => ({}),
+    },
+    mode: {
+      type: String,
+      default: 'date',
+    },
+  },
+  computed: {
+    isRange() {
+      return this.mode === 'range'
+    },
+    placeholderStr() {
+      if (this.isRange) {
+        return [this.placeholder?.[0] ?? '', this.placeholder?.[1] ?? '']
+      }
+      return this.placeholder
+    },
+    status() {
+      if (this.isRange) {
+        return [this.date?.[0] ?? '', this.date?.[1] ?? '']
+      }
+      return this.date
+    },
+  },
+  data() {
+    return {
+      show: false,
+      date: null,
+    }
+  },
+  methods: {
+    openCalendar() {
+      this.show = true
+    },
+    handleChange(e) {
+      let value
+      if (this.isRange) {
+        const { startDate, endDate } = e
+        value = [startDate, endDate]
+      } else {
+        value = e.result
+      }
+      this.$emit('change', value)
+      this.$emit('input', value)
+      this.date = value
+      this.$emit('close-dropdown',value)
+    },
+  },
+  watch:{
+    value:{
+      handler(val){
+        this.date = val
+      },
+      immediate:true,
+      deep:true
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.inp {
+  @apply border rounded-4rpx flex-1 h-60rpx px-10px leading-60rpx;
+}
+</style>

src/components/search-form/components/SearchItem.vue

@@ -3,6 +3,7 @@
 </template>
 <script> 
 import ApiSelect from './ApiSelect.vue'
+import Calendar from './Calendar.vue'
 import { upperFirst, kebabCase } from 'lodash-es'
 export default {
   props: {
@@ -25,20 +26,21 @@ export default {
   },
   components: {
     ApiSelect,
+    Calendar
   },
   created() {
     // this.fetch()
   },
   computed: {
     getValues() {
-      const { allDefaultValues, formModel, schema } = props
+      const { allDefaultValues, formModel, schema } = this
       // const { mergeDynamicData } = props.formProps
       return {
         field: schema.field,
         model: formModel,
         values: {
           // ...mergeDynamicData,
-          ...allDefaultValues,
+          // ...allDefaultValues,
           ...formModel,
         },
         schema: schema,
@@ -68,6 +70,9 @@ export default {
         [eventKey]: (value) => {
           this.setFormModel(field, value)
         },
+        ['onCloseDropdown']: () => {
+          this.$emit('close-dropdown')
+        },
       }
 
       const propsData = {
@@ -75,6 +80,9 @@ export default {
         label,
       }
 
+      propsData.codeField = field
+      propsData.formValues = this.getValues
+
       const bindValue = {
         [valueField || 'value']: this.formModel[field],
       }
@@ -85,19 +93,16 @@ export default {
         ...bindValue,
         ...on,
       }
-
       const onEventsObject = {}
       const bindObject = {}
       for (const key in originalObject) {
         if (key.startsWith('on') && typeof originalObject[key] === 'function') {
           const newKey = kebabCase(key.replace('on', ''))
-
           onEventsObject[newKey] = originalObject[key]
         } else {
           bindObject[key] = originalObject[key]
         }
       }
-
       return {
         bind: bindObject,
         on: onEventsObject,

src/components/search-form/components/aa.vue

@@ -1,46 +0,0 @@
-<template>
-  <u-dropdown-item :title="schema.label"></u-dropdown-item>
-</template>
-<script>
-export default {
-  props: {
-    schema: {
-      type: Object,
-      default: () => {},
-    },
-    setFormModel: {
-      type: Function,
-      default: () => {},
-    },
-    formModel: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  created() {
-    this.fetch()
-  },
-  methods: {
-    isFunction(obj) {
-      return typeof obj === 'function' && obj !== null
-    },
-    fetch() {
-      const { formModel, schema } = this
-      let { componentProps = {}, components } = schema
-      if (this.isFunction(componentProps)) {
-        componentProps = componentProps({ schema, formModel })
-      }
-
-      if (components === 'ApiSelect') {
-        const { api } = componentProps
-        if (!api || !this.isFunction(api)) return
-        // console.log(api);
-        try {
-        } catch (error) {}
-      } else if (conponents === 'Select') {
-      }
-      console.log(this.schema)
-    },
-  },
-}
-</script>

src/components/search-form/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
-    {{ formModel }}
+    <u-dropdown ref="dropdownRef">
-    <u-dropdown>
       <SearchItem
         v-for="schema in getSchema"
         :key="schema.field"
@@ -9,8 +8,10 @@
         :formModel="formModel"
         :setFormModel="setFormModel"
         :formActionType="formActionType"
+        @close-dropdown="handleCloseDropdown"
       ></SearchItem>
     </u-dropdown>
+    <portal-target name="calendar-portal" />
   </div>
 </template>
 <script>
@@ -65,7 +66,7 @@ export default {
                     // this.$set(this.formModel, nestKey, cloneDeep(
                     //   defaultValueRef.value[nestKey]
                     // ))
-                    
+
                     this.formModel[nestKey] = cloneDeep(
                       defaultValueRef.value[nestKey]
                     )
@@ -98,6 +99,9 @@ export default {
     this.initFormModel()
   },
   methods: {
+    handleCloseDropdown() {
+      this.$refs.dropdownRef?.close()
+    },
     initFormModel() {
       const { schemas } = this
       const formModel = {}
@@ -126,13 +130,48 @@ export default {
     isNumber(val) {
       return typeof val === 'number' && !isNaN(val)
     },
-
+    isArray(val) {
+      return Array.isArray(val)
+    },
+    isObject(val) {
+      return typeof val === 'object' && val !== null
+    },
+    isFunction(val) {
+      return typeof val === 'function'
+    },
     setFormModel(key, value) {
       // this.$set(this.formModel, key, value)
       // console.log(key, value);
       this.formModel[key] = value
       this.$emit('field-value-change', key, value)
     },
+    handleFormValues(values) {
+      if (!this.isObject(values)) return {}
+      const res = {}
+      for (const item of Object.entries(values)) {
+        let [, value] = item
+        const [key] = item
+        const pattern = /^\[(.+)\]$/
+        if (pattern.test(key)) {
+          const keyArr = key.match(pattern)[1].split(',')
+          keyArr.forEach((item, index) => {
+            res[item] = value?.[index] ?? ''
+          })
+        }
+      }
+      return Object.assign({}, values, res)
+    },
+  },
+  watch: {
+    formModel: {
+      handler(val) {
+        this.$u.debounce(() => {
+          const res = this.handleFormValues(val)
+          this.$emit('submit', res)
+        }, 300)
+      },
+      deep: true,
+    },
   },
 }
 </script>

src/main.js

@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App'
+import PortalVue from 'portal-vue'
 import './uni.promisify.adaptor'
 import uView from "uview-ui";
 Vue.use(uView);
+Vue.use(PortalVue)
 import {http,getFullUrl} from '@/api/index.js'
 import store from './store/index.js'
 Vue.config.productionTip = false
@@ -12,6 +14,8 @@ Vue.prototype.$http = http
 Vue.prototype.$getFullUrl = getFullUrl
 App.mpType = 'app'
 
+
+
 const app = new Vue({
   store,
   ...App

src/pages/index/insect-monitors.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <SearchForm :schemas="searchFormSchema"></SearchForm>
+    <SearchForm :schemas="searchFormSchema" @submit="handleSubmit"></SearchForm>
   </div>
 </template>
 <script>
@@ -28,7 +28,6 @@ export default {
               },
               onOptionsChange: (options) => {
                 const { setFieldsValue } = formActionType
-
                 if (options.length) {
                   setFieldsValue({
                     base: options[0].value,
@@ -77,8 +76,22 @@ export default {
             }
           },
         },
+        {
+          field: '[start_time, end_time]',
+          label: '日期',
+          component: 'Calendar',
+          componentProps: {
+            mode: 'range',
+            placeholder: ['开始时间', '结束时间'],
+          },
+        },
       ],
     }
   },
+  methods:{
+    handleSubmit(e){
+      console.log(e);
+    }
+  }
 }
 </script>

yarn.lock

@@ -7806,7 +7806,7 @@ negotiator@0.6.3:
   resolved "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.3.tgz"
   integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
 
-neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
+neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1, neo-async@^2.6.2:
   version "2.6.2"
   resolved "https://registry.npmmirror.com/neo-async/-/neo-async-2.6.2.tgz"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
@@ -8442,6 +8442,11 @@ pnp-webpack-plugin@^1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+portal-vue@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.7.tgz#ea08069b25b640ca08a5b86f67c612f15f4e4ad4"
+  integrity sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==
+
 portfinder@^1.0.20, portfinder@^1.0.26:
   version "1.0.32"
   resolved "https://registry.npmmirror.com/portfinder/-/portfinder-1.0.32.tgz"
@@ -9551,16 +9556,12 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-sass-loader@^8.0.2:
+sass-loader@^13.3.2:
-  version "8.0.2"
+  version "13.3.2"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.3.2.tgz#460022de27aec772480f03de17f5ba88fa7e18c6"
-  integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==
+  integrity sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==
   dependencies:
-    clone-deep "^4.0.1"
+    neo-async "^2.6.2"
-    loader-utils "^1.2.3"
-    neo-async "^2.6.1"
-    schema-utils "^2.6.1"
-    semver "^6.3.0"
 
 sass@^1.43.4:
   version "1.66.1"
@@ -9592,7 +9593,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.1, schema-utils@^2.6.5, schema-utils@^2.7.0:
+schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.5, schema-utils@^2.7.0:
   version "2.7.1"
   resolved "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz"
   integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==