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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../../js/lib/element-ui/index.css">
<link rel="stylesheet" href="../../../css/common.css">
<title>参数配置</title>
</head>
<body>
<div id="app" class="container">
<el-row class="parame">
<el-col :span="14" :offset="4">
<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="rule-form">
<el-form-item label="logo" prop="logo">
<el-input v-model="formData.logo"></el-input>
</el-form-item>
<el-form-item label="是否门户" prop="isGateway">
<el-select v-model="formData.isGateway" class="db">
<el-option label="是" :value="1"></el-option>
<el-option label="否" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="主题风格" prop="themeStyle">
<el-select v-model="formData.themeStyle" class="db">
<el-option v-for="item in skins" :key="item.id" :label="item.label" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" v-text="'立即创建'"></el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
<script src="../../../js/lib/jquery.min.js"></script>
<script src="../../../js/lib/vue.min.js"></script>
<script src="../../../js/lib/element-ui/index.js"></script>
<script src="../../../js/util/index.js"></script>
<!-- 数据处理 -->
<script src="../../../js/lib/mock.js"></script>
<script src="../../../mock/index.js"></script>
<script src="../../../mock/system/parame.js"></script>
<!-- 数据处理 -->
<script>
var app = new Vue({
el: '#app',
data: function () {
return {
formData: {
logo: '',
isGateway: '',
themeStyle: ''
},
rules: {
logo: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
isGateway: [
{ required: true, message: '不能为空', trigger: 'change' }
],
themeStyle: [
{ required: true, message: '不能为空', trigger: 'change' }
]
},
skins: [],
documentClientHeight: document.clientHeight,
}
},
created: function () {
this.getData()
this.getSkin()
},
methods: {
onSubmit: function () {
let data = clonedeep(this.formData)
this.$refs.ruleForm.validate((valid) => {
if (valid) {
console.log('submit!', data)
} else {
return false
}
})
},
getSkin: function () {
var self = this
api({
url: '/sys/parame/skin',
type: 'get',
successFuc: function (res) {
self.skins = res.data
}
})
},
getData: function () {
var self = this
api({
url: '/sys/parame/list',
type: 'get',
successFuc: function (res) {
self.formData = res.data
}
})
}
}
})
</script>
</body>
</html>