1.验证手机号/电话/身份证
//html
<el-form :model="newForm" status-icon :rules="newRules" ref="newForm" label-width="100px">
<el-Row>
<el-Col :span='24'>
<el-form-item label="机构电话" prop="orgMobile" size="small">
<el-input v-model.number="newForm.orgMobile" style="width:208px" :disabled='isLook' clearable></el-input>
</el-form-item>
</el-Col>
<el-Col :span='12'>
<el-form-item label="负责人手机" prop="managerMobile" size="small">
<el-input v-model.number="newForm.managerMobile" clearable></el-input>
</el-form-item>
</el-Col>
<el-Col :span='12'>
<el-form-item label="身份证" prop="cardId" size="small">
<el-input v-model.number="newForm.cardId" clearable></el-input>
</el-form-item>
</el-Col>
</el-Row>
<el-form-item class="tr">
<el-button @click="dialogNewVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="submitNewForm('newForm')" size="small">提交</el-button>
</el-form-item>
</el-form>
// export default上面
var checkTel = (rule, value, callback) => {
if (!value) {
return callback(new Error('电话不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
callback();
}
}, 1000);
};
var checkPhone = (rule, value, callback) => {
if (!value) {
return callback(new Error('手机不能为空'));
}
let regIdPhone = /^1\d{10}$/;
setTimeout(()=>{
if(!regIdPhone.test(value)){
callback(new Error('手机格式错误'));
}else{
callback()
}
},1000)
};
//身份证
var checkCardId = (rule, value, callback) => {
if (!value) {
return callback(new Error('身份证不能为空'));
}
let regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
if(!regIdCard.test(value)){
callback(new Error('身份证格式错误'));
}else{
callback();
}
};
//身份证-为空非必选-有值验证格式
var checkCardId = (rule, value, callback) => {
if (value) {
let regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
if(!regIdCard.test(value)){
callback(new Error('身份证格式错误'));
}else{
callback();
}
}else{
callback();
}
};
//data
newForm:{
loading:false,
dialogNewVisible:false,
orgMobile:'',
managerMobile:'',
cardId:''
},
newRules: {
orgMobile:[{ required: true,validator:checkTel, trigger: 'blur'}],
managerMobile:[{ required: true,validator:checkPhone, trigger: 'blur'}],
cardId: [{ validator: checkCardId, trigger: 'change' }],
}
//方法
submitNewForm(formName){ //新增提交
this.$refs[formName].validate((valid) => {
if (valid) {
let data ={
...this.newForm
}
this.$axios.post(this.$my.api + '/xxx', data).then(res => {
if(res.data&&res.data.code === 200){
this.loading = false;
this.dialogNewVisible = false
this.$message({
message: res.data.message,
type: 'success',
duration: 1500
})
//...this.formInline 搜索条件,新增完跟新列表数据
this.getList({...this.formInline})
this.$refs[formName].resetFields();
}else{
this.loading = false
this.dialogNewVisible = false
this.$message({
message: res.data.message,
type: 'error',
duration: 1500
})
return false
}
}).catch(function (error) {
this.loading = false
})
} else {
console.log('error submit!!');
return false;
}
});
},
2.模糊搜索
//html
<el-form size="small" :model="workForm" ref="workForm" :rules='workFormRules' label-position="top" class='clear'>
<el-form-item label="患者名称:" prop='patientId'>
<el-select
v-model="workForm.patientId"
clearable
placeholder="请选择"
filterable
remote
:remote-method="getPatient"
:loading="loading">
<el-option
v-for="item in patientOptions"
:key="item.id"
:label="item.patientName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-row class="fr mb10" type="flex" justify="start">
<el-button type="primary" class="mr10" @click.stop="submit('workForm')" size="small" icon="el-icon-check">提交</el-button>
<el-button type="info" size="small" icon="el-icon-close">取消</el-button>
</el-row>
</el-form>
//data
patientOptions:[],
workForm:{
patientId: '',
}
workFormRules:{
patientId:[{ required: true,message: '请选择', trigger: 'blur'}],
}
//methods
getPatient(val){
if(val){
this.loading = true;
let data = {
projectId:this.$route.query.proId,
rows:20,
page:1,
patientName:val
}
this.$axios.post(this.$api + 'patient/getPatientList',data).then(res => {
if(res.data&&res.data.code === 200){
this.patientOptions = res.data.data.rows
}else{
this.$message({
message: res.data.message,
type: 'error',
duration: 1500
})
}
this.loading = false;
}).catch(function (error) {})
}else{
this.patientOptions = []
}
},
3.多选
//html
<el-form-item label="处理人:">
//allow-create 把用输入当作选项
<el-select v-model="workForm.dealEmployeeId" clearable placeholder="请选择" multiple filterable style='width:350px'>
<el-option
v-for="item in dealEmployeeOptions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
//data
dealEmployeeId:[],
4.日期选择
//html
<el-form-item label="要求完成时间:">
<el-date-picker
v-model="workForm.shouldFinishTime"
:picker-options="pickerOptions"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="填报日期:">
<el-date-picker
v-model="date"
@change="setDate"
size="small"
type="daterange"
value-format='yyyy-MM-dd'
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
//data
workForm:{
shouldFinishTime: '',
},
date:[],
form1:{
startDate:'',
endDate:'',
}
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;//当天之后的时间可选
},
},
setDate(date){
if(date){
this.form1.startDate = date[0]
this.form1.endDate = date[1]
}else{
this.formInline.startDate = ''
this.formInline.endDate = ''
}
},
5.三级联动
//html
<el-form :model="newForm" status-icon :rules="newRules" ref="newForm" label-width="100px">
<el-Row>
<el-Col :span='24'>
<el-form-item label="省份:" prop="provinceId" size="small">
<el-select v-model.number="newForm.provinceId" @change="provinceChange">
<el-option :label="item.name" :value="item.id" v-for="(item,index) in provincesArr" :key="index"></el-option>
</el-select>
</el-form-item>
</el-Col>
<el-Col :span='24'>
<el-form-item label='城市:' prop="cityId" size="small">
<el-select v-model.number="newForm.cityId" @change="cityChange">
<el-option :label="item.name" :value="item.id" v-for="(item,index) in cityArr" :key="index"></el-option>
</el-select>
</el-form-item>
</el-Col>
<el-Col :span='24'>
<el-form-item label="药房:" prop="name" size="small">
<el-input v-model="newForm.name" clearable></el-input>
</el-form-item>
</el-Col>
</el-Row>
<div class="tr">
<el-button @click="dialogNewVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="submitNewForm('newForm')" size="small">提交</el-button>
</div>
</el-form>
//data
newForm:{
provinceId:'',
provinceName:'',
cityId:'',
cityName:'',
name:'',
},
newRules: {
provinceId: [{ required: true, message: '请选择', trigger: 'change'}],
cityId:[{ required: true, message: '请选择',trigger: 'blur'}],
name:[{ required: true, message: '请输入', trigger: 'blur'}]
},
dialogNewVisible:false,
provincesArr:[],
cityArr:[]
//created
created () {
this.getPro()
},
//methods
getPro(){
let that = this
this.$axios.get(this.$my.api+'/bms/basePharmacy/getAllList')
.then(res => {
if(res.data&&res.data.code == 200){
this.provincesArr= res.data.data
that.getCityList(res.data.data[0].code)
}else{
that.$message({
message: res.data.message,
type: 'error',
duration: 1500
})
}
}, response => {console.log("error");})
},
getCityList(code){
let that = this
this.$axios.get(this.$my.api+'/bms/basePharmacy/getListByProCode?provinceCode='+code)
.then(res => {
if(res.data&&res.data.code == 200){
this.cityArr = res.data.data
}else{
that.$message({
message: res.data.message,
type: 'error',
duration: 1500
})
}
}, response => {console.log("error");});
},
provinceChange(val){
let current = this.provincesArr.find(item=>item.id == val)
this.newForm.cityId = ''
this.newForm.cityName = ''
this.newForm.provinceId = val
this.newForm.provinceName = current.name
this.getCityList(current.code)
},
cityChange(val){
let current = this.cityArr.find(item=>item.id == val)
this.newForm.cityId = val
this.newForm.cityName = current.name
},
备注:方便我自己复制粘贴 —2019/10/23