Item.vue
8.79 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<template>
<block v-if="itemCopy.__config__.nccKey==='nccText'">
<ncc-text v-model="value" :textStyle="itemCopy.textStyle"></ncc-text>
</block>
<block v-else-if="itemCopy.__config__.nccKey==='groupTitle'">
<ncc-group :content="itemCopy.content" :content-position="itemCopy['content-position']"></ncc-group>
</block>
<view class="ncc-divider" v-else-if="itemCopy.__config__.nccKey==='divider'">
<u-divider half-width="200" height="80">{{itemCopy.__slot__.default}}</u-divider>
</view>
<view v-else-if="isIgnore"></view>
<view v-else-if="itemCopy.__config__.nccKey==='editor'"></view>
<!-- <u-form-item label-width="0" v-else-if="itemCopy.__config__.nccKey==='editor'">
<ncc-editor v-model="value"></ncc-editor>
</u-form-item> -->
<view class="ncc-card" v-else-if="itemCopy.__config__.nccKey==='card'||itemCopy.__config__.nccKey==='row'">
<view class="ncc-card-cap u-line-1" v-if="itemCopy.header">{{itemCopy.header}}</view>
<item v-for="(child, index) in itemCopy.__config__.children" :key="index" :item="child" :formConf="formConf"
@input="setValue" />
</view>
<block v-else-if="itemCopy.__config__.nccKey==='table'">
<child-table v-model="value" :config="itemCopy" :ref="itemCopy.__vModel__"></child-table>
</block>
<view v-else-if="itemCopy.__config__.nccKey==='tab'||itemCopy.__config__.nccKey==='collapse'">
<template v-for="(item,i) in itemCopy.__config__.children">
<view class="ncc-card" :key="i" v-if="item.__config__.children.length">
<view class="ncc-card-cap u-line-1" v-if="item.title">{{item.title}}</view>
<item v-for="(child, index) in item.__config__.children" :key="index" :item="child" :formConf="formConf"
@input="setValue" />
</view>
</template>
</view>
<u-form-item :label="label" :prop="itemCopy.__vModel__" :required="itemCopy.__config__.required"
:label-width="labelWidth" v-else>
<block v-if="itemCopy.__config__.nccKey==='comInput'">
<u-input :type="itemCopy['show-password']?'password':'text'" v-model="value"
:placeholder="itemCopy.placeholder" :maxlength="itemCopy.maxlength?itemCopy.maxlength:140"
:disabled="itemCopy.disabled"></u-input>
</block>
<block v-if="itemCopy.__config__.nccKey==='textarea'">
<u-input v-model="value" type="textarea" :placeholder="itemCopy.placeholder"
:maxlength="itemCopy.maxlength?itemCopy.maxlength:140" :disabled="itemCopy.disabled" />
</block>
<block v-if="itemCopy.__config__.nccKey==='numInput'">
<u-number-box v-model="value" :step="itemCopy.step" :max="itemCopy.max||99999"
:min="itemCopy.min||itemCopy.min===0?itemCopy.min:-99999" :input-width="120" :input-height="60"
:positive-integer="false" :disabled="itemCopy.disabled">
</u-number-box>
</block>
<view v-if="itemCopy.__config__.nccKey==='switch'" class="u-flex u-form-item-switch">
<ncc-switch v-model="value" :disabled="itemCopy.disabled"></ncc-switch>
</view>
<block v-if="itemCopy.__config__.nccKey==='radio'">
<u-radio-group v-model="value" :disabled="itemCopy.disabled">
<u-radio v-for="(option, index) in itemCopy.__slot__.options" :key="index"
:name="option[itemCopy.__config__.props.value]">{{ option[itemCopy.__config__.props.label] }}
</u-radio>
</u-radio-group>
</block>
<block v-if="itemCopy.__config__.nccKey==='checkbox'">
<ncc-checkbox v-model="value" :options="itemCopy.__slot__.options" :props="itemCopy.__config__.props"
:disabled="itemCopy.disabled">
</ncc-checkbox>
</block>
<block v-if="itemCopy.__config__.nccKey==='select'">
<ncc-select v-model="value" :placeholder="itemCopy.placeholder" :options="itemCopy.__slot__.options"
:props="itemCopy.__config__.props" :multiple="itemCopy.multiple" :disabled="itemCopy.disabled">
</ncc-select>
</block>
<block v-if="itemCopy.__config__.nccKey==='cascader'">
<ncc-cascader v-model="value" :placeholder="itemCopy.placeholder" :options="itemCopy.options"
:props="itemCopy.props.props" :disabled="itemCopy.disabled">
</ncc-cascader>
</block>
<block v-if="itemCopy.__config__.nccKey==='time'">
<ncc-date-time type="time" v-model="value" :placeholder="itemCopy.placeholder"
:disabled="itemCopy.disabled">
</ncc-date-time>
</block>
<block v-if="itemCopy.__config__.nccKey==='date'">
<ncc-date-time :type="itemCopy.type||'date'" v-model="value" :placeholder="itemCopy.placeholder"
:disabled="itemCopy.disabled">
</ncc-date-time>
</block>
<block v-if="itemCopy.__config__.nccKey==='uploadImg'">
<ncc-upload v-model="value" :disabled="itemCopy.disabled"></ncc-upload>
</block>
<block v-if="itemCopy.__config__.nccKey==='uploadFz'">
<ncc-file :list="value" />
</block>
<block v-if="itemCopy.__config__.nccKey==='rate'">
<u-rate v-model="value" size="40" :count="itemCopy.max" :disabled="itemCopy.disabled"></u-rate>
</block>
<block v-if="itemCopy.__config__.nccKey==='slider'">
<u-slider v-model="value" :step="itemCopy.step" :min="itemCopy.min||0" :max="itemCopy.max||100"
style="width: 100%;" :disabled="itemCopy.disabled">
<view class="slider-badge-button">{{value}}</view>
</u-slider>
</block>
<block v-if="itemCopy.__config__.nccKey==='comSelect'">
<ncc-org-select type="organize" v-model="value" :multiple="itemCopy.multiple"
:placeholder="itemCopy.placeholder" :disabled="itemCopy.disabled">
</ncc-org-select>
</block>
<block v-if="itemCopy.__config__.nccKey==='depSelect'">
<ncc-org-select type="department" v-model="value" :multiple="itemCopy.multiple"
:placeholder="itemCopy.placeholder" :disabled="itemCopy.disabled">
</ncc-org-select>
</block>
<block v-if="itemCopy.__config__.nccKey==='posSelect'">
<ncc-org-select type="position" v-model="value" :multiple="itemCopy.multiple"
:placeholder="itemCopy.placeholder" :disabled="itemCopy.disabled">
</ncc-org-select>
</block>
<block v-if="itemCopy.__config__.nccKey==='userSelect'">
<ncc-org-select v-model="value" :multiple="itemCopy.multiple" :placeholder="itemCopy.placeholder"
:disabled="itemCopy.disabled">
</ncc-org-select>
</block>
<block v-if="itemCopy.__config__.nccKey==='treeSelect'">
<ncc-tree-select v-model="value" :options="itemCopy.options" :props="itemCopy.props.props"
:multiple="itemCopy.multiple" :placeholder="itemCopy.placeholder" :disabled="itemCopy.disabled">
</ncc-tree-select>
</block>
<block v-if="itemCopy.__config__.nccKey==='address'">
<ncc-city-select v-model="value" :placeholder="itemCopy.placeholder" :level="itemCopy.level"
:disabled="itemCopy.disabled">
</ncc-city-select>
</block>
<block v-if="isSystem">
<u-input v-model="value" placeholder="系统自动生成" disabled></u-input>
</block>
</u-form-item>
</template>
<script>
import childTable from './childTable.vue'
import Item from './Item'
const systemList = ['createUser', 'createTime', 'modifyUser', 'modifyTime', 'currOrganize', 'currDept', 'currPosition',
'billRule'
]
const ignoreList = ['colorPicker', 'relationForm', 'relationFormAttr', 'calculate', 'popupSelect']
export default {
name: 'Item',
model: {
event: 'input'
},
components: {
childTable,
Item
},
props: {
item: {
type: Object,
required: true
},
formConf: {
type: Object,
required: true
},
},
watch: {
value(val) {
this.itemCopy.__config__.defaultValue = this.value
this.$emit('input', this.itemCopy)
}
},
computed: {
itemCopy() {
return this.$u.deepClone(this.item)
},
isSystem() {
return systemList.indexOf(this.itemCopy.__config__.nccKey) > -1
},
isIgnore() {
return ignoreList.indexOf(this.itemCopy.__config__.nccKey) > -1
},
labelWidth() {
return this.itemCopy.__config__.labelWidth ? this.itemCopy.__config__.labelWidth * 1.5 : ''
},
label() {
return this.itemCopy.__config__.label
}
},
data() {
return {
value: ''
}
},
created() {
const nccKey = this.itemCopy.__config__.nccKey
if (nccKey === 'switch') {
this.value = this.itemCopy.__config__.defaultValue ? 1 : 0
} else if (nccKey === 'cascader') {
this.value = this.itemCopy.__config__.defaultValue || []
} else if (nccKey === 'rate') {
this.value = this.itemCopy.__config__.defaultValue || 0
} else if (nccKey === 'numInput') {
let value = 0
if (this.itemCopy.min) {
if (this.itemCopy.__config__.defaultValue && this.itemCopy.__config__.defaultValue > this.itemCopy
.min) {
value = this.itemCopy.__config__.defaultValue
} else {
value = this.itemCopy.min
}
if (this.itemCopy.max && this.itemCopy.min > this.itemCopy.max) {
this.itemCopy.max = this.itemCopy.min
}
} else {
value = this.itemCopy.__config__.defaultValue || 0
}
this.value = value
} else {
this.value = this.itemCopy.__config__.defaultValue
}
},
methods: {
setValue(item) {
this.$emit('input', item)
},
setDefaultValue(val) {
this.value = val
}
}
}
</script>