Skip to content

Commit a33fcce

Browse files
cq-pandacq-panda
committed
表单组件增加iview time组件
1 parent a77f8ef commit a33fcce

File tree

2 files changed

+340
-124
lines changed

2 files changed

+340
-124
lines changed

‎Vol.Vue/src/components/basic/VolForm.vue‎

Lines changed: 170 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,195 +1,298 @@
11
<template>
22
<Form
33
ref="formValidate"
4-
:style="{width:width>0?(width+'px'):'100%'}"
4+
:style="{ width: width > 0 ? width + 'px' : '100%' }"
55
:model="_formFields"
66
:label-width="labelWidth"
77
>
88
<!-- :rules="ruleValidate" -->
99
<slot name="header"></slot>
10-
<Row class="line-row" v-for="(row,findex) in formRules" :key="findex">
11-
<Col :span="(item.colSize?item.colSize*2:24/span)" v-for="(item,index) in row" :key="index">
10+
<Row class="line-row" v-for="(row, findex) in formRules" :key="findex">
11+
<Col
12+
:span="item.colSize ? item.colSize * 2 : 24 / span"
13+
v-for="(item, index) in row"
14+
:key="index"
15+
>
1216
<!-- 2020.06.18增加render渲染自定义内容 -->
13-
<form-expand v-if="item.render&&typeof item.render=='function'" :render="item.render"></form-expand>
17+
<form-expand
18+
v-if="item.render && typeof item.render == 'function'"
19+
:render="item.render"
20+
></form-expand>
1421
<FormItem
1522
v-else
16-
:rules="getRule(item,_formFields)"
17-
:label="item.title?(item.title+'：'):''"
23+
:rules="getRule(item, _formFields)"
24+
:label="item.title ? item.title + '：' : ''"
1825
:prop="item.field"
1926
>
20-
<template v-if="isReadonlyImgFile(item,_formFields)">
21-
<div v-if="item.type=='img'||item.columnType=='img'" class="form-imgs">
27+
<template v-if="isReadonlyImgFile(item, _formFields)">
28+
<div
29+
v-if="item.type == 'img' || item.columnType == 'img'"
30+
class="form-imgs"
31+
>
2232
<div
2333
class="img-item"
24-
v-for="(img,imgIndex) in _formFields[item.field]"
34+
v-for="(img, imgIndex) in _formFields[item.field]"
2535
:key="imgIndex"
2636
>
27-
<img :src="getSrc(img.path)" :onerror="errorImg" @click="previewImg(img.path)" />
37+
<img
38+
:src="getSrc(img.path)"
39+
:onerror="errorImg"
40+
@click="previewImg(img.path)"
41+
/>
2842
</div>
2943
</div>
3044
<template v-else>
3145
<div
3246
class="form-file-list"
33-
v-for="(file,fileIndex) in _formFields[item.field]"
47+
v-for="(file, fileIndex) in _formFields[item.field]"
3448
:key="fileIndex"
3549
>
36-
<a @click="dowloadFile(_formFields[item.field][fileIndex])">{{file.name}}</a>
50+
<a @click="dowloadFile(_formFields[item.field][fileIndex])">{{
51+
file.name
52+
}}</a>
3753
</div>
3854
</template>
3955
</template>
4056
<label
41-
v-else-if="item.disabled||item.readonly"
57+
v-else-if="item.disabled || item.readonly"
4258
class="readonly-input"
43-
>{{getText(_formFields,item)}}</label>
44-
<div v-else :class="{'form-item-extra':item.extra}">
59+
>{{ getText(_formFields, item) }}</label
60+
>
61+
<div v-else :class="{ 'form-item-extra': item.extra }">
4562
<!--下拉框绑定时如果key为数字，请将key+''转换为字符串-->
4663
<template
47-
v-if="item.type=='select'||item.type=='selectList'||item.type=='drop'||item.type=='dropList'"
64+
v-if="
65+
item.type == 'select' ||
66+
item.type == 'selectList' ||
67+
item.type == 'drop' ||
68+
item.type == 'dropList'
69+
"
4870
>
4971
<!--select绑定默认值时，如果设置了默认值，数据源也有数据，但没绑定上，问题在于key与默认值类型不一致，如:默认值是字符串，数据源的key是数字，类型不至会导致绑定失败-->
5072
<template>
5173
<!-- {{ item.remote||item.url?"1":"0"}} -->
5274
<!-- 远程搜索 -->
5375
<!-- 从后台字典搜索remote -->
5476
<Select
55-
v-if="item.remote||item.url"
77+
v-if="item.remote || item.url"
5678
:transfer="true"
5779
v-model="_formFields[item.field]"
5880
filterable
5981
remote
60-
@on-clear="()=>{onClear(item,_formFields)}"
61-
:remote-method="(val)=>{remoteSearch(item,_formFields,val)}"
82+
@on-clear="
83+
() => {
84+
onClear(item, _formFields);
85+
}
86+
"
87+
:remote-method="
88+
(val) => {
89+
remoteSearch(item, _formFields, val);
90+
}
91+
"
6292
:loading="item.loading"
63-
:placeholder="item.placeholder?item.placeholder:( '请选择'+item.title)"
64-
@on-change="onRemoteChange(item,_formFields[item.field])"
93+
:placeholder="
94+
item.placeholder ? item.placeholder : '请选择' + item.title
95+
"
96+
@on-change="onRemoteChange(item, _formFields[item.field])"
6597
clearable
6698
>
6799
<Option
68-
v-for="(kv,kvIndex) in getData(item)"
100+
v-for="(kv, kvIndex) in getData(item)"
69101
:key="kvIndex"
70102
:value="kv.key"
71-
>{{kv.value}}</Option>
103+
>{{ kv.value }}</Option
104+
>
72105
</Select>
73106
<Select
74107
v-else
75108
:transfer="true"
76109
v-model="_formFields[item.field]"
77-
:multiple="(item.type=='select'||item.type=='drop')?false:true"
78-
:filterable="(item.filter||item.data.length>10)?true:false"
79-
:placeholder="item.placeholder?item.placeholder:( '请选择'+item.title)"
80-
@on-change="onChange(item,_formFields[item.field])"
110+
:multiple="
111+
item.type == 'select' || item.type == 'drop' ? false : true
112+
"
113+
:filterable="
114+
item.filter || item.data.length > 10 ? true : false
115+
"
116+
:placeholder="
117+
item.placeholder ? item.placeholder : '请选择' + item.title
118+
"
119+
@on-change="onChange(item, _formFields[item.field])"
81120
clearable
82121
>
83122
<Option
84-
v-for="(kv,kvIndex) in item.data"
123+
v-for="(kv, kvIndex) in item.data"
85124
:key="kvIndex"
86125
:value="kv.key"
87-
>{{kv.value}}</Option>
126+
>{{ kv.value }}</Option
127+
>
88128
</Select>
89129
</template>
90130
</template>
91131
<i-switch
92-
v-else-if="item.type=='switch'"
93-
:true-value="typeof _formFields[item.field]=='boolean' ? true:1"
94-
:false-value="typeof _formFields[item.field]=='boolean' ? false:0"
132+
v-else-if="item.type == 'switch'"
133+
:true-value="
134+
typeof _formFields[item.field] == 'boolean' ? true : 1
135+
"
136+
:false-value="
137+
typeof _formFields[item.field] == 'boolean' ? false : 0
138+
"
95139
v-model="_formFields[item.field]"
96140
>
97141
<span slot="open">是</span>
98142
<span slot="close">否</span>
99143
</i-switch>
100-
<Row v-else-if="item.type=='date'||item.type=='datetime'||item.columnType=='datetime'">
144+
<Row
145+
v-else-if="
146+
item.type == 'date' ||
147+
item.type == 'datetime' ||
148+
item.columnType == 'datetime'
149+
"
150+
>
101151
<Col span="24">
102152
<FormItem :prop="item.field">
103153
<DatePicker
104154
:transfer="true"
105-
:type="item.range?(item.type+'range'):item.type"
106-
:format="item.type=='date'? 'yyyy-MM-dd':'yyyy-MM-dd HH:mm:ss'"
107-
:placeholder="item.placeholder||item.title"
155+
:type="item.range ? item.type + 'range' : item.type"
156+
:format="
157+
item.type == 'date' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'
158+
"
159+
:placeholder="item.placeholder || item.title"
108160
:value="_formFields[item.field]"
109-
@on-change="(time)=>{_formFields[item.field]=time; validateField(item); return time}"
161+
@on-change="
162+
(time) => {
163+
_formFields[item.field] = time;
164+
validateField(item);
165+
return time;
166+
}
167+
"
110168
></DatePicker>
111169
</FormItem>
112170
</Col>
113171
</Row>
172+
<!-- 2020.10.17增加iview time组件 -->
173+
<TimePicker
174+
confirm
175+
v-else-if="item.type == 'time'"
176+
type="time"
177+
:format="item.format"
178+
v-model="_formFields[item.field]"
179+
:placeholder="item.placeholder || item.title"
180+
>
181+
</TimePicker>
114182
<CheckboxGroup
115-
@on-change="(arr)=>{item.onChange&&item.onChange(arr)}"
116-
v-else-if="item.type=='checkbox'"
183+
@on-change="
184+
(arr) => {
185+
item.onChange && item.onChange(arr);
186+
}
187+
"
188+
v-else-if="item.type == 'checkbox'"
117189
v-model="_formFields[item.field]"
118190
>
119191
<Checkbox
120-
v-for="(kv,kvIndex) in item.data"
192+
v-for="(kv, kvIndex) in item.data"
121193
:key="kvIndex"
122194
:label="kv.key"
123-
>{{kv.value}}</Checkbox>
195+
>{{ kv.value }}</Checkbox
196+
>
124197
</CheckboxGroup>
125198
<vol-upload
126-
v-else-if="isFile(item,_formFields)"
199+
v-else-if="isFile(item, _formFields)"
127200
:desc="item.desc"
128201
:multiple="item.multiple"
129202
:max-file="item.maxFile"
130203
:max-size="item.maxSize"
131204
:autoUpload="item.autoUpload"
132205
:fileInfo="_formFields[item.field]"
133206
:url="item.url"
134-
:img="item.type=='img'||item.columnType=='img'"
135-
:excel="item.type=='excel'"
136-
:fileTypes="item.fileTypes?item.fileTypes:[]"
207+
:img="item.type == 'img' || item.columnType == 'img'"
208+
:excel="item.type == 'excel'"
209+
:fileTypes="item.fileTypes ? item.fileTypes : []"
137210
:upload-before="item.uploadBefore"
138211
:upload-after="item.uploadAfter"
139-
:append="item.append?true:false"
212+
:append="item.append ? true : false"
140213
:on-change="item.onChange"
141214
:file-click="item.fileClick"
142215
:remove-before="item.removeBefore"
143-
:down-load="item.downLoad?true:false"
216+
:down-load="item.downLoad ? true : false"
144217
></vol-upload>
145218
<!-- 2020.05.31增加iview组件Cascader -->
146219
<!--2020.09.19增加级联 @on-change="item.onChange"事件 -->
147220
<Cascader
148-
v-else-if="item.type=='cascader'"
221+
v-else-if="item.type == 'cascader'"
149222
:load-data="item.loadData"
150-
@on-change="(value, selectedData)=>{item.onChange&&item.onChange(value, selectedData)}"
223+
@on-change="
224+
(value, selectedData) => {
225+
item.onChange && item.onChange(value, selectedData);
226+
}
227+
"
151228
:data="item.data"
152229
filterable
153230
:render-format="item.formatter"
154231
v-model="_formFields[item.field]"
155232
></Cascader>
156233
<!--2020.09.05增加textarea标签的最小高度item.minRows属性 -->
157234
<Input
158-
v-else-if="item.type=='textarea'"
235+
v-else-if="item.type == 'textarea'"
159236
v-model="_formFields[item.field]"
160237
type="textarea"
161-
@on-keypress="($event)=>{item.onKeyPress&&item.onKeyPress($event)}"
238+
@on-keypress="
239+
($event) => {
240+
item.onKeyPress && item.onKeyPress($event);
241+
}
242+
"
162243
clearable
163-
:autosize="{minRows:item.minRows||2,maxRows:item.maxRows||10}"
164-
:placeholder="item.placeholder?item.placeholder:( '请输入'+item.title)"
244+
:autosize="{
245+
minRows: item.minRows || 2,
246+
maxRows: item.maxRows || 10,
247+
}"
248+
:placeholder="
249+
item.placeholder ? item.placeholder : '请输入' + item.title
250+
"
165251
:ref="item.field"
166252
/>
167253
<Input
168254
clearable
169-
v-else-if="item.type=='password'"
255+
v-else-if="item.type == 'password'"
170256
type="password"
171257
autocomplete="off"
172258
v-model.number="_formFields[item.field]"
173-
@on-keypress="($event)=>{item.onKeyPress&&item.onKeyPress($event)}"
174-
:placeholder="item.placeholder?item.placeholder:( '请输入'+item.title)"
259+
@on-keypress="
260+
($event) => {
261+
item.onKeyPress && item.onKeyPress($event);
262+
}
263+
"
264+
:placeholder="
265+
item.placeholder ? item.placeholder : '请输入' + item.title
266+
"
175267
:ref="item.field"
176268
/>
177269
<Input
178270
clearable
179271
v-else
180-
@on-keypress="($event)=>{item.onKeyPress&&item.onKeyPress($event)}"
272+
@on-keypress="
273+
($event) => {
274+
item.onKeyPress && item.onKeyPress($event);
275+
}
276+
"
181277
v-model="_formFields[item.field]"
182-
:placeholder="item.placeholder?item.placeholder:( '请输入'+item.title)"
278+
:placeholder="
279+
item.placeholder ? item.placeholder : '请输入' + item.title
280+
"
183281
:ref="item.field"
184282
/>
185283

186284
<div class="form-extra" v-if="item.extra">
187285
<a
188286
:style="item.extra.style"
189-
@click="()=>{item.extra.click&&item.extra.click(item,_formFields[item.field])}"
287+
@click="
288+
() => {
289+
item.extra.click &&
290+
item.extra.click(item, _formFields[item.field]);
291+
}
292+
"
190293
>
191294
<Icon v-if="item.extra.icon" :type="item.extra.icon" />
192-
{{item.extra.text}}
295+
{{ item.extra.text }}
193296
</a>
194297
</div>
195298
</div>
@@ -474,11 +577,16 @@ export default {
474577
return;
475578
//弹出框或初始化表单时给data设置数组默认值2
476579
//2020.09.26修复远程搜索自定义url不起作用的问题
477-
let url ;
580+
let url;
478581
if (typeof item.url == "function") {
479582
url = item.url(val, item.dataKey, item);
480583
} else {
481-
url = (item.url || "/api/Sys_Dictionary/GetSearchDictionary") + "?dicNo=" +item.dataKey + "&value=" + val;
584+
url =
585+
(item.url || "/api/Sys_Dictionary/GetSearchDictionary") +
586+
"?dicNo=" +
587+
item.dataKey +
588+
"&value=" +
589+
val;
482590
}
483591
this.http.post(url).then((dicData) => {
484592
this.$set(item, "loading", false);

0 commit comments

Comments
 (0)