index_1.vue
5.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<template>
<u-form :model="formData" ref="dataForm" :errorType="['toast']" label-position="left" label-width="150">
<u-form-item :label="item.__config__.label" :prop="item.__vModel__" v-for="(item, i) in formConfCopy" :key="i">
<block v-if="useInputList.indexOf(item.__config__.nccKey) > -1">
<u-input v-model="formData[item.__vModel__]" :placeholder="'请输入'+item.__config__.label" />
</block>
<block v-if="item.__config__.nccKey==='numInput'||item.__config__.nccKey==='calculate'">
<ncc-num-range v-model="formData[item.__vModel__]" />
</block>
<view v-if="item.__config__.nccKey==='switch'" class="u-flex u-form-item-switch">
<ncc-switch v-model="formData[item.__vModel__]"></ncc-switch>
</view>
<block v-if="['select','radio','checkbox'].indexOf(item.__config__.nccKey) > -1">
<ncc-select v-model="formData[item.__vModel__]" :placeholder="'请选择'+item.__config__.label"
:options="item.__slot__.options" :props="item.__config__.props">
</ncc-select>
</block>
<block v-if="item.__config__.nccKey==='cascader'">
<ncc-cascader v-model="formData[item.__vModel__]" :placeholder="'请选择'+item.__config__.label"
:options="item.options" :props="item.props.props">
</ncc-cascader>
</block>
<block v-if="item.__config__.nccKey==='time'">
<ncc-time-range v-model="formData[item.__vModel__]" />
</block>
<block v-if="useDateList.indexOf(item.__config__.nccKey) > -1">
<ncc-date-range v-model="formData[item.__vModel__]" />
</block>
<block v-if="item.__config__.nccKey==='rate'">
<u-rate v-model="formData[item.__vModel__]" size="40" :count="item.max">
</u-rate>
</block>
<block v-if="item.__config__.nccKey==='slider'">
<u-slider v-model="formData[item.__vModel__]" :step="item.step" :min="item.min||0" :max="item.max||100"
style="width: 100%;">
<view class="slider-badge-button">{{formData[item.__vModel__]}}</view>
</u-slider>
</block>
<block v-if="item.__config__.nccKey==='comSelect'||item.__config__.nccKey==='currOrganize'">
<ncc-org-select type="organize" v-model="formData[item.__vModel__]"
:placeholder="'请选择'+item.__config__.label">
</ncc-org-select>
</block>
<block v-if="item.__config__.nccKey==='depSelect'||item.__config__.nccKey==='currDept'">
<ncc-org-select type="department" v-model="formData[item.__vModel__]"
:placeholder="'请选择'+item.__config__.label">
</ncc-org-select>
</block>
<block v-if="item.__config__.nccKey==='posSelect'||item.__config__.nccKey==='currPosition'">
<ncc-org-select type="position" v-model="formData[item.__vModel__]"
:placeholder="'请选择'+item.__config__.label">
</ncc-org-select>
</block>
<block v-if="['userSelect','createUser', 'modifyUser'].indexOf(item.__config__.nccKey) > -1">
<ncc-org-select v-model="formData[item.__vModel__]" :placeholder="'请选择'+item.__config__.label">
</ncc-org-select>
</block>
<block v-if="item.__config__.nccKey==='treeSelect'">
<ncc-tree-select v-model="formData[item.__vModel__]" :options="item.options" :props="item.props.props"
:placeholder="'请选择'+item.__config__.label">
</ncc-tree-select>
</block>
<block v-if="item.__config__.nccKey==='address'">
<ncc-city-select v-model="formData[item.__vModel__]" :placeholder="'请选择'+item.__config__.label"
:level="item.level">
</ncc-city-select>
</block>
</u-form-item>
</u-form>
</template>
<script>
import {
getDictionaryDataSelector,
previewDataInterface
} from '@/api/common'
const dyOptionsList = ['radio', 'checkbox', 'select', 'cascader', 'treeSelect']
const useInputList = ['comInput', 'textarea', 'nccText', 'billRule']
const useDateList = ['date', 'createTime', 'modifyTime']
const useArrList = ['cascader', 'address', 'numInput', 'calculate', ...useDateList]
export default {
props: ['formConf'],
data() {
const data = {
useInputList,
useDateList,
formConfCopy: this.$u.deepClone(this.formConf),
formData: {}
}
this.initFormData(data.formConfCopy, data.formData)
return data
},
methods: {
initFormData(componentList, formData) {
componentList.forEach(cur => {
const config = cur.__config__
const defaultValue = useArrList.indexOf(config.nccKey) > -1 ? [] : undefined
if (cur.__vModel__) formData[cur.__vModel__] = defaultValue
if (dyOptionsList.indexOf(config.nccKey) > -1) {
let isTreeSelect = config.nccKey === 'treeSelect' || config.nccKey === 'cascader'
if (config.dataType === 'dictionary') {
if (!config.dictionaryType) return
getDictionaryDataSelector(config.dictionaryType).then(res => {
isTreeSelect ? cur.options = res.data.list : cur.__slot__.options = res
.data.list
})
}
if (config.dataType === 'dynamic') {
if (!config.propsUrl) return
previewDataInterface(config.propsUrl).then(res => {
isTreeSelect ? cur.options = res.data : cur.__slot__.options = res.data
})
}
}
})
},
submitForm() {
this.$refs.dataForm.validate(valid => {
if (!valid) return
for (let key in this.formData) {
if (!this.formData[key]) this.formData[key] = undefined
if (this.formData[key] && Array.isArray(this.formData[key]) && !this.formData[key]
.length) {
this.formData[key] = undefined
}
}
this.$emit('submit', this.formData)
})
},
resetForm() {
this.$refs.dataForm.resetFields()
}
}
}
</script>