<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="icon" type="image/png" href="logo.png" />
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-container>
<el-header style="font-family: Helvetica,微软雅黑,Arial,sans-serif; font-size: 36px;">
<img src="logo.png" alt="深目智寻" style="height: 40px;width: 40px; border: 0px;">
深目智寻
</el-header>
<el-main style="width: 90%;">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" clearable></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="form.sex">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="身份证号" prop="id">
<el-input v-model="form.id" clearable></el-input>
</el-form-item>
<el-form-item label="起始时间" prop="date1">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择起始日期" v-model="form.date1" style="width: 100%;">
</el-date-picker>
</el-col>
<el-col class="line" :span="2"> </el-col>
<el-col :span="11">
<el-time-picker placeholder="选择起始时间" v-model="form.time1" style="width: 100%;">
</el-time-picker>
</el-form-item>
<el-form-item label="终止时间" prop="date2">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择终止日期" v-model="form.date2" style="width: 100%;">
</el-date-picker>
</el-col>
<el-col class="line" :span="2"> </el-col>
<el-col :span="11">
<el-time-picker placeholder="选择终止时间" v-model="form.time2" style="width: 100%;">
</el-time-picker>
</el-form-item>
<el-form-item label="活动区域" prop="area">
<el-checkbox-group v-model="form.area">
<el-checkbox label="东湖区" name="area"></el-checkbox>
<el-checkbox label="西湖区" name="area"></el-checkbox>
<el-checkbox label="青山湖区" name="area"></el-checkbox>
<el-checkbox label="青云谱区" name="area"></el-checkbox>
<el-checkbox label="红谷滩区" name="area"></el-checkbox>
<el-checkbox label="新建区" name="area"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<!-- </el-form-item>
<el-form-item label="体态描述">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item> -->
<el-form-item label="上传搜索对象照片">
<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
</el-form-item>
<el-form-item label="高精度" prop="delivery">
<el-switch v-model="form.delivery"></el-switch>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button @click="clearAll">重置</el-button>
<!-- @click="clearAll" -->
</el-form-item>
</el-form>
</el-main>
</el-container>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<i class="el-icon-circle-check"></i>
<span>提交成功</span>
<span slot="footer" class="dialog-footer">
<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</body>
<script>
var Main = {
data() {
return {
form: {
name: '',
sex: '',
id: '',
date1: '',
time1: '',
date2: '',
time2: '',
delivery: false,
area: [],
resource: '',
},
dialogVisible: false
}
},
methods: {
onSubmit() {
console.log('submit!');
this.dialogVisible = true;
this.$refs['form'].resetFields();
}, clearAll() {
this.$refs['form'].resetFields();
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</html> 
快手公司福利 926人发布
