121 lines
3.0 KiB
Vue
121 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div class="app-container">
|
||
|
|
<el-container>
|
||
|
|
<el-header>
|
||
|
|
<div>新增渠道</div>
|
||
|
|
<el-divider/>
|
||
|
|
</el-header>
|
||
|
|
<el-main>
|
||
|
|
<el-form ref="elForm" :model="formData" :rules="rules" label-width="100px" size="medium">
|
||
|
|
<el-form-item label="APP" prop="field101">
|
||
|
|
<el-input v-model="formData.field101" :style="{width: '100%'}" clearable placeholder="请输入APP">
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="版本号" prop="field102">
|
||
|
|
<el-select v-model="formData.field102" :style="{width: '100%'}" clearable placeholder="请选择版本号">
|
||
|
|
<el-option v-for="(item, index) in field102Options" :key="index" :disabled="item.disabled"
|
||
|
|
:label="item.label" :value="item.value"
|
||
|
|
></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="下载市场" prop="field103">
|
||
|
|
<el-radio-group v-model="formData.field103" size="medium">
|
||
|
|
<el-radio v-for="(item, index) in field103Options" :key="index" :disabled="item.disabled"
|
||
|
|
:label="item.value"
|
||
|
|
>{{ item.label }}
|
||
|
|
</el-radio>
|
||
|
|
</el-radio-group>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item size="large">
|
||
|
|
<el-button type="primary" @click="submitForm">提交</el-button>
|
||
|
|
<el-button @click="resetForm">重置</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</el-main>
|
||
|
|
</el-container>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
components: {},
|
||
|
|
props: [],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
formData: {
|
||
|
|
field101: undefined,
|
||
|
|
field102: undefined,
|
||
|
|
field103: undefined
|
||
|
|
},
|
||
|
|
rules: {
|
||
|
|
field101: [{
|
||
|
|
required: true,
|
||
|
|
message: '请输入APP',
|
||
|
|
trigger: 'blur'
|
||
|
|
}],
|
||
|
|
field102: [{
|
||
|
|
required: true,
|
||
|
|
message: '请选择版本号',
|
||
|
|
trigger: 'change'
|
||
|
|
}],
|
||
|
|
field103: [{
|
||
|
|
required: true,
|
||
|
|
message: '下载市场不能为空',
|
||
|
|
trigger: 'change'
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
field102Options: [{
|
||
|
|
'label': '选项一',
|
||
|
|
'value': 1
|
||
|
|
}, {
|
||
|
|
'label': '选项二',
|
||
|
|
'value': 2
|
||
|
|
}],
|
||
|
|
field103Options: [{
|
||
|
|
'label': '应用市场',
|
||
|
|
'value': 1
|
||
|
|
}, {
|
||
|
|
'label': '阿里云',
|
||
|
|
'value': 2
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
watch: {},
|
||
|
|
created() {
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
submitForm() {
|
||
|
|
this.$refs['elForm'].validate(valid => {
|
||
|
|
if (!valid) return
|
||
|
|
// TODO 提交表单
|
||
|
|
})
|
||
|
|
},
|
||
|
|
resetForm() {
|
||
|
|
this.$refs['elForm'].resetFields()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.app-container {
|
||
|
|
background: #ffffff;
|
||
|
|
margin: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-main {
|
||
|
|
width: 700px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner {
|
||
|
|
border: 1px solid #E4E7ED !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-upload__tip {
|
||
|
|
line-height: 1.2;
|
||
|
|
}
|
||
|
|
</style>
|