index.vue
6.33 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
<template>
<div class="page-index">
<div class="cpt-title">代码编辑器 eagle-code</div>
<div class="cpt-content">
<eagle-code :height="100"></eagle-code>
</div>
<div class="cpt-title">确认框 eagle-confirm</div>
<div class="cpt-content">
<eagle-confirm @confirm="handleConfirm" @cancel="handleCancel">
<el-button size="small">操作</el-button>
</eagle-confirm>
</div>
<div class="cpt-title">省市区选择器 eagle-dist-picker</div>
<div class="cpt-content">
<eagle-dist-picker></eagle-dist-picker>
</div>
<div class="cpt-title">文件上传 eagle-file-upload</div>
<div class="cpt-content">
<eagle-file-upload url="test"></eagle-file-upload>
</div>
<div class="cpt-title">图片上传 eagle-image-upload</div>
<div class="cpt-content">
<eagle-image-upload url="test"></eagle-image-upload>
</div>
<div class="cpt-title">多图上传 eagle-image-upload-multiple</div>
<div class="cpt-content">
<eagle-image-upload-multiple url="test" value="http://yiche-erp-test.oss-cn-hangzhou.aliyuncs.com/image/web/549df1ee-651f-4ad3-83cb-e812a7dda4a5.png,http://yiche-erp-test.oss-cn-hangzhou.aliyuncs.com/image/web/0f150013-ec3c-43cd-a4dc-d63d1261a082.png"></eagle-image-upload-multiple>
</div>
<div class="cpt-title">图片查看 eagle-image-view</div>
<div class="cpt-content">
<eagle-image-view value="http://yiche-erp-test.oss-cn-hangzhou.aliyuncs.com/image/web/549df1ee-651f-4ad3-83cb-e812a7dda4a5.png"></eagle-image-view>
</div>
<div class="cpt-title">单选按钮组 eagle-radio-group</div>
<div class="cpt-content">
<eagle-radio-group v-model="radioGroupValue" :dataSource="[{ label: '是', value: true }, { label: '否', value: false }]"></eagle-radio-group>
</div>
<div class="cpt-title">下拉选择 eagle-select</div>
<div class="cpt-content">
<eagle-select v-model="selectValue" :dataSource="[{ label: '选项A', value: 'A' }, { label: '选项B', value: 'B' }]"></eagle-select>
</div>
<div class="cpt-title">状态指示点 eagle-status-indicator</div>
<div class="cpt-content">
<eagle-status-indicator></eagle-status-indicator>
<eagle-status-indicator active></eagle-status-indicator>
<eagle-status-indicator positive></eagle-status-indicator>
<eagle-status-indicator intermediary></eagle-status-indicator>
<eagle-status-indicator negative></eagle-status-indicator>
<eagle-status-indicator pulse></eagle-status-indicator>
<eagle-status-indicator active pulse></eagle-status-indicator>
<eagle-status-indicator positive pulse></eagle-status-indicator>
<eagle-status-indicator intermediary pulse></eagle-status-indicator>
<eagle-status-indicator negative pulse></eagle-status-indicator>
</div>
<div class="cpt-title">开关 eagle-switch-button</div>
<div class="cpt-content">
<eagle-switch-button></eagle-switch-button>
</div>
<div class="cpt-title">树形选择器 eagle-tree-select</div>
<div class="cpt-content">
<eagle-tree-select v-model="treeSelectValue" :dataSource="treeSelectDataSource"></eagle-tree-select>
</div>
<div class="cpt-title">表单生成器 eagle-form</div>
<div class="cpt-content">
{{ formValue }}
<eagle-form ref="form" v-model="formValue" :list="formList" :form-props="{ size: 'large', 'label-width': '80px' }" submit-pure>
<template #group-not-bad="{ label, list }">
<div style="background: deepskyblue">哎哟 - {{ label }} - 标题 [{{ list.length }} 项]</div>
</template>
<template #group-default="{ label }">
<div style="background: deeppink">{{ label }} - 默认标题</div>
</template>
<template #item-name="{ model, key }">
<el-select v-model="model[key]">
<el-option value="A">A</el-option>
<el-option value="B">B</el-option>
</el-select>
</template>
</eagle-form>
</div>
</div>
</template>
<script>
export default {
name: 'home',
data() {
return {
radioGroupValue: true,
selectValue: undefined,
treeSelectValue: undefined,
treeSelectDataSource: [
{ id: 0, label: '一级菜单', children: [{ id: 1, label: '二级菜单-1' }, { id: 2, label: '二级菜单-2', children: [{ id: 3, label: '三级菜单' }] }] }
],
formValue: {},
// formList: [
// { type: 'el-input', key: 'name', label: '名称', group: '基本信息', span: 12 },
// { type: 'el-input', key: 'gender', label: '性别', group: '基本信息', span: 12 },
// { type: 'el-input', key: 'address', label: '住址', group: '家庭住址' },
// { type: 'el-input', key: 'postcode', label: '邮编', group: '家庭住址' },
// { type: 'el-input', key: 'political', label: '政治面貌', group: { key: 'pol', label: '政治审查' } },
// ]
formList: [
{ type: 'el-input', key: 'name', label: '名称', group: '那啥' },
{ type: 'el-input', key: 'gender', label: '性别', group: { label: '不错哦', key: 'not-bad' }, tip: '周某人说的', props: { disabled: true } },
{ type: 'eagle-select', key: 'address', label: '住址', default: '123', props: { dataSource: [{ label: '第一个', value: 'No.1' }, { label: '第二个', value: 'No.2' }] } },
{ type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '随便挑', placement: "left" } },
{ type: 'el-input', key: 'political', label: '政治面貌', visible: (model) => model.name === 'B' },
]
}
},
mounted() {
setTimeout(() => {
this.formValue.name = "B"
this.formValue.name2 = "B"
this.formValue.name3 = "B"
this.formValue.name4 = "B"
this.formValue.name5 = "B"
this.formValue.name6 = "B"
this.formValue.political = "B11111111111111111111111"
}, 5000)
// setTimeout(() => {
// this.$refs.form.reset()
// }, 8000)
},
methods: {
handleText(val) {
console.log(val)
},
handleConfirm() {
alert('确认')
},
handleCancel() {
alert('取消')
}
},
}
</script>
<style>
.page-index {
padding: 10px;
}
.cpt-title {
padding: 5px 10px;
margin-bottom: 10px;
border-left: 4px solid deepskyblue;
font-size: 16px;
font-weight: bold;
}
.cpt-content {
padding: 5px 15px;
margin-bottom: 15px;
}
</style>