wechat
parent
ff41fb1e0f
commit
934212f5bf
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
{{ formModel }}
|
||||
<u-dropdown>
|
||||
<u-dropdown ref="dropdownRef">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
23
yarn.lock
23
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:
|
||||
version "8.0.2"
|
||||
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
|
||||
integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==
|
||||
sass-loader@^13.3.2:
|
||||
version "13.3.2"
|
||||
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.3.2.tgz#460022de27aec772480f03de17f5ba88fa7e18c6"
|
||||
integrity sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==
|
||||
dependencies:
|
||||
clone-deep "^4.0.1"
|
||||
loader-utils "^1.2.3"
|
||||
neo-async "^2.6.1"
|
||||
schema-utils "^2.6.1"
|
||||
semver "^6.3.0"
|
||||
neo-async "^2.6.2"
|
||||
|
||||
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==
|
||||
|
|
|
|||
Loading…
Reference in New Issue