由于项目开发,需要在前端项目以外新建一个单页面,做数据处理。
用纯HTML开发,最麻烦的就是处理样式问题以及事件,由于开发单页面没有技术要求,所以直接使用element ui +vue 来开发
链接:
element-ui: https://unpkg.com/browse/element-ui@2.7.2/lib/ (版本统一,不然出现样式不生效问题)
1) element-ui/lib 包,先选择想要的版本,只下载index.js 即可,因为index.js文件是其他所有文件的汇总
2) element-ui/lib/theme-chalk 组件样式包;下载 index.css文件
3) element-ui/lib/theme-chalk/fonts 字体包;(element-icons.woff、element-icons.ttf)两个文件,都要下载
vue: https://cdn.jsdelivr.net/npm/vue@2.7.2/dist/ 选择版本,下载 vue.js
axios: https://unpkg.com/axios@0.27.2/dist/axios.min.js (打开右键另存为即可或者直接右键链接另存为)
axios(github):https://github.com/axios/axios/tree/v1.x/dist
文件结构:
引入文件需要注意的问题;
顺序问题: vue.js 要在 element.js 之前,不然不会生效
在引用elementUI 的css文件时,需要修改字体样式的url:
如果还不生效,可能是因为在script标签创建vue,在div标签 设置id为【app】
效果:
测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>elementUI本地引入测试</title>
<script src="./element/vue.js"></script>
<script src="./element/element.js"></script>
<link rel="stylesheet" href="./element/element.css">
<script src="./axios/axios.min.js"></script>
</head>
<body>
<div id="app" style="margin: auto;">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;">
</el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;">
</el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: function () {
return {
serverUrl: 'http://127.0.0.1:9001/', //服务器地址
multipleSelection: [], //多选数据列
dialogFormVisible: false,
formLabelWidth: '100px',
align: "center",
businessIdList: [],
businessAddressList: [],
clientNameList: [],
currentPage: 1, //当前所在页面
total: 0, //总条数
tableData: [],
param: {
key: "maintenanceCompany",
page: {
pageNum: 1,
pageSize: 10
}
},
autosize: { minRows: 2, maxRows: 6 },
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
searchForm: {
sign: '',
customerAddress: '',
userCustomerName: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
}
},
methods: {
submitForm(formName) {
let that = this
this.$refs[formName].validate((valid) => {
if (valid) {
axios.post(that.serverUrl + '/test/insert', that.ruleForm).then(res => {
let data = res.data;
if (data.code == 100000) {
that.$message({
message: '添加成功',
type: 'success'
})
that.resetForm("ruleForm")
} else {
that.$error(data.message)
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
cancel(formName) {
this.dialogFormVisible = false
this.$refs[formName].resetFields();
},
resetForm(formName) {
this.$refs[formName].resetFields();
console.log(this.$refs[formName]);
},
handleSelectionChange(val) {
this.multipleSelection = val;
let data = ''
this.idList = []
this.businessAddressList = []
this.clientNameList = []
for (const key in val) {
this.idList.push(val[key].sign)
this.businessAddressList.push(val[key].customerAddress)
this.clientNameList.push(val[key].userCustomerName)
}
},
search() {
let param = Object.assign(this.searchForm, this.param);
axios.post(this.serverUrl + '/import-fault-business-sign/findAll', param).then(res => {
let result = res.data.data.pageResult;
this.tableData = result.datas
this.total = result.total
})
},
selectList() {
this.ruleForm.businessId = this.idList.join(',')
this.ruleForm.businessAddress = this.businessAddressList.join(',')
this.ruleForm.clientName = this.clientNameList.join(',')
this.dialogFormVisible = false
console.log(this.idList.join(','));
console.log(this.businessAddressList.join(','));
console.log(this.clientNameList.join(','));
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.param.page.pageSize = val
this.findAll()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val
this.param.page.pageNum = val
this.findAll()
},
queryBusiness() {
this.findAll()
this.dialogFormVisible = true
},
//获取数据
findAll() {
axios.post(this.serverUrl + '/test/findAll', this.param).then(res => {
let result = res.data.data.pageResult;
this.tableData = result.datas
this.total = result.total
console.log('data', this.tableData);
})
}
}
})
</script>
</html>