Blame view

pages/apply/dynamicModel/components/parser/index.vue 5.43 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
  <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>