index.vue
4.5 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
<template>
<div class="CommonForm-container app-container nohead">
<div class="dataForm">
<el-alert title="普通文本、普通数值、日期时间主键的使用" type="warning" :closable="false" />
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="110px" class="mt-10">
<el-divider content-position="left">普通文本框的使用</el-divider>
<el-form-item label="普通文本框">
<el-input v-model="dataForm.CommonText" placeholder="" />
</el-form-item>
<el-form-item label="座机号码">
<el-input v-model="dataForm.TelePhone" placeholder="" />
</el-form-item>
<el-form-item label="当前登录人">
<el-input v-model="dataForm.RealName" placeholder="" />
</el-form-item>
<el-divider content-position="left">普通数值框的使用</el-divider>
<el-form-item label="自然数">
<el-input v-model="dataForm.Natural" placeholder="" type="number" />
</el-form-item>
<el-form-item label="报销款">
<el-input v-model="dataForm.Reimbursement" placeholder="" type="number">
<template slot="append">元</template>
</el-input>
</el-form-item>
<el-form-item label="产品价格">
<el-input v-model="dataForm.ProductPrice" placeholder="" type="number">
<el-button slot="append" @click="redy">随机设定</el-button>
</el-input>
</el-form-item>
<el-divider content-position="left">日期时间主键的使用</el-divider>
<!-- format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" -->
<el-form-item label="生产日期">
<el-date-picker v-model="dataForm.ProductionDate" type="date" placeholder="选择日期"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item label="回款日期">
<el-date-picker v-model="dataForm.ReturnMoneyDate" type="datetime" placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-form-item>
<el-form-item label="计划执行日期">
<el-date-picker v-model="dataForm.PlanExecutionDate" type="datetime" placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-form-item>
<el-form-item label="统计月份">
<el-date-picker v-model="dataForm.StatisticalMonth" type="month" placeholder="选择日期"
value-format="yyyy-MM">
</el-date-picker>
</el-form-item>
<el-form-item label="规划日期">
<el-date-picker v-model="dataForm.Programme" type="date" placeholder="选择日期"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item label="日期时间范围">
<el-date-picker v-model="dataForm.Dates" type="datetimerange" start-placeholder="开始日期"
end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: 'extend-formDemo-fieldForm1',
data() {
return {
dataForm: {
CommonText: '',
TelePhone: '0000-00000000',
RealName: '',
Natural: '',
Reimbursement: '',
ProductPrice: '',
ProductionDate: '',
ReturnMoneyDate: '',
PlanExecutionDate: '',
StatisticalMonth: '',
Programme: '',
Dates: '',
},
dataRule: {},
}
},
methods: {
init() {
this.$refs['dataForm'].resetFields()
},
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
// this.$message({
// message: '验证成功',
// type: 'success',
// duration: 1500,
// })
}
})
},
redy() {
function GetRandomNum(Min, Max) {
let Range = Max - Min;
let Rand = Math.random();
return (Min + Math.round(Rand * Range));
}
let num = GetRandomNum(1, 100);
this.dataForm.ProductPrice = num
}
}
}
</script>
<style lang="scss" scoped>
.CommonForm-container {
.NCC-common-head {
height: 50px;
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
}
.dataForm {
flex: 1;
overflow: auto;
.el-input {
width: 300px;
}
.tip {
margin-left: 10px;
color: darkgray;
}
}
}
</style>