标签:自定义 form elementui required trigger blur var true visualStatObject
<template>
<!-- 新增/修改进度计划 -->
<div class="addPlan" id="quxiao">
<el-form :model="dataModel" :rules="rules" ref="addPlan" label-width="135px">
<el-form-item label="项目名称:" prop="projectIdArry">
<el-cascader :options="projectList" v-model="dataModel.projectIdArry" :props="defaultProp" size="small" placeholder="请选择项目" style="width:100%;" @change="changeProject" clearable :disabled="iscompany"></el-cascader>
</el-form-item>
<el-form-item label="选择统计项:" prop="visualStatId">
<!-- <el-select filterable size="small" v-model="dataModel.visualStatId" placeholder="请选择形象进度统计项" style="width:100%;" @change="changeVisu" clearable>
<el-option v-for="(item,index) in statisList" :label="item.statName" :value="item.id" :key="index" ></el-option>
</el-select> -->
<el-cascader id="testid" :options="statisList" v-model="dataModel.visualStatId" :props="defaultProp1" size="small" placeholder="选择统计项" style="width:100%;" @change="changeVisu" clearable ></el-cascader>
<span v-if="visualStatObject&&JSON.stringify(visualStatObject) != '{}'" style="color:rgb(64, 158, 255);">分部分项:{{visualStatObject.subFullName}}</span>
<div v-if="visualStatObject&&JSON.stringify(visualStatObject) != '{}'" class="visualSpan">
<span>预算工程量:{{visualStatObject.budgetTotal}}{{visualStatObject.unitName}}</span>
<span>已完成工程量:{{visualStatObject.finishBudget}}{{visualStatObject.unitName}}</span>
<span>剩余工程量:{{(visualStatObject.budgetTotal - visualStatObject.finishBudget).toFixed(2)}}{{visualStatObject.unitName}}</span>
</div>
</el-form-item>
<el-form-item label="任务名称:" prop="planName">
<el-input v-model="dataModel.planName" size="small"></el-input>
</el-form-item>
<el-form-item label="开始时间:" prop="planStartTime">
<el-date-picker format="yyyy 年 MM 月 dd 日" size="small" v-model="dataModel.planStartTime" type="date" placeholder="选择日期" style="width:100%;"></el-date-picker>
</el-form-item>
<el-form-item label="完成时间:" prop="planEndTime">
<el-date-picker :picker-options="pickerOptions1" format="yyyy 年 MM 月 dd 日" size="small" v-model="dataModel.planEndTime " type="date" placeholder="选择日期" style="width:100%;"></el-date-picker>
</el-form-item>
<el-form-item label="计划完成工程量:" prop="planFinish">
<el-input v-model="dataModel.planFinish " size="small"></el-input>
</el-form-item>
<el-form-item label="跟踪频率:" prop="trackCycle">
<el-select size="small" v-model="dataModel.trackCycle" placeholder="请选择跟踪频率:" clearable style="width:100%;">
<el-option v-for="(item,index) in trackList" :label="item.name" :value="item.number" :key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="施工负责人:" prop="respUser">
<el-select size="small" v-model="dataModel.respUser" placeholder="请选择负责人" clearable style="width:100%;">
<el-option v-for="(item,index) in userList" :label="item.trueName" :value="item.id" :key="index"></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="clickBtn">
<el-button @click="close" size="small">取消</el-button>
<el-button @click="commit" size="small" type="primary" :disabled="isSuccess">保存</el-button>
</div>
</div>
</template>
<script>
import { addConstructPlan,updateConstructPlan,getConstructPlanById,getVisualStatItemListTree,listUserInfo,getMonthAddoption} from "../api/system_interface.js";
import { mapState, mapActions } from 'vuex'
export default {
name: "addPlan",
data() {
var valiNumberPass = (rule, value, callback) => {
let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
if (value === '') {
callback(new Error('请输入计划完成工程量'));
} else if (!reg.test(value)) {
callback(new Error('请输入数字'));
} else {
callback();
}
};
return {
dataModel: {
projectId: [],
planEndTime: "",
planFinish: null,
planName: "",
planStartTime: "",
respUser: null,
trackCycle: null,
visualStatId: null,
projectIdArry:[]
},
visualStatObject:null,
iscompany:false,
isSuccess:false,
statisList:[],
//数据校验
rules: {
projectIdArry: [{ required: true, message: "请选择项目", trigger: "blur" }],
visualStatId: [{ required: true, message: "请选择统计项", trigger: "blur" }],
planName: [{ required: true, message: "请输入任务名称:", trigger: "blur" }],
planStartTime: [{ required: true, message: "请选择开始时间", trigger: "blur" }],
planEndTime: [{ required: true, message: "请选择完成时间", trigger: "blur" }],
planFinish: [{ required: true, validator:valiNumberPass, trigger: "change" }],
trackCycle: [{ required: true, message: "请选择跟踪频率", trigger: "blur" }],
respUser: [{ required: true, message: "请选择负责人", trigger: "blur" }]
},
radio: "",
progressList: [],
defaultProp: {
children: "child",
label: "name",
value: "id"
},
defaultProp1:{
children: "child",
label: "regionName",
value: "id"
},
userList:[],
pickerOptions1: {
disabledDate:(time) => {
var date = new Date(this.dataModel.planStartTime);
var y = 1900+date.getYear();
var m = "0"+(date.getMonth()+1);
var d = "0"+date.getDate();
var satrtTime = y+"-"+ m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length);
var arr = satrtTime.split("-"); //将获取的时间按“-”拆分成字符串数组
var year = parseInt(arr[0]); //开分字符串数组的第一个地址的内容是年份
var month = parseInt(arr[1]); //开分字符串数组的第二个地址的内容是月份
var prevmonthLastday = (new Date(year, month, 1)).getTime() - 86400000;
var valueData = new Date(prevmonthLastday); //结束时间
return time.getTime() <this.dataModel.planStartTime || time.getTime() > valueData;
}
}
};
},
computed: {
...mapState([
'projectList'
]),
},
methods: {
...mapActions([
'changeListChOrgInfo'
]),
}
};
</script>
标签:自定义,form,elementui,required,trigger,blur,var,true,visualStatObject 来源: https://blog.csdn.net/qq_37899792/article/details/89880923
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。