Blame view

components/ncc/ncc-parser/Item_1.vue 8.79 KB
290144e9   易尊强   第一次
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>