新项目新知识总结03
新项目前端技术运用的总结，梳理进行记录。
form表单的使用
<div class="pro-form scroll-box-style" style="height:57vh; overflow:auto;">
<!--规则验证使用rules，注意rules在data里面不是method方法里面，下面会将验证方式进行展示，不需要验证时，直接删除即可-->
<el-form :model="createProjectData" :rules="rules" ref="createProjectData" label-width="100px" label-position="right" size="mini" class="demo-projectData">
<el-form-item label="项目名称" prop="name">
<!--input的使用方式-->
<el-input v-model="createProjectData.name" placeholder="请填写项目名称" :clearable="true"></el-input>
</el-form-item>
<el-form-item label="项目类型" prop="project_type">
<!--级联选择器的使用方式-->
<el-cascader
v-if="projectTypeData && projectTypeData.length"
v-model="createProjectData.project_type"
style="width:100%;"
placeholder="请选择项目类型"
:props="{label: 'value', value: 'id', children: 'child'}"
:options="projectTypeData"
@change="projectTypeSubSelect"
>
</el-cascader>
</el-form-item>
<el-form-item label="计划开始时间" prop="planning_start_time">
<!--时间选择器的使用方式-->
<el-date-picker
:picker-options="pickerOptionsStart"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择开始时间"
v-model="createProjectData.planning_start_time"
style="width: 100%;">
</el-date-picker>
</el-form-item>
<el-form-item label="项目状态" prop="project_status">
<!--选择器的使用方式-->
<el-select v-model="createProjectData.project_status" placeholder="请选择项目状态" style="width:100%;" filterable default-first-option>
<el-option
v-for="item in proStatusData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer flex-center">
<!--$t是挂到了Vue.prototype上的一个方法，接受一个字符串作为参数,其实直接写取消，提交即可，个人认为多此一举，不过为了全局统一可以这么写-->
<el-button @click="cancelForm('createProjectData')">{{$t('button.cancel')}}</el-button>
<el-button type="primary" @click="submitForm('createProjectData')" :disabled="isDisabled">{{$t('button.confirm')}}</el-button>
</div>
rules规则验证的使用
data() { return { createProjectData: { name: '', code: '', contract_amount: '', img_src: '', contract_path: '', planning_start_time: '', planning_end_time: '', project_type_id: '', project_type_sub_id: '', workflow_id: '', memo: '', project_status: 0, frame_rate: '', project_type: [], company_id: '' }, imageUrl: '', pickerOptionsStart: { disabledDate: (time) => { var date = new Date(this.createProjectData.planning_end_time); var timeEnd = date.getTime(); return time.getTime() > timeEnd; } }, pickerOptionsEnd: { disabledDate: (time) => { var date = new Date(this.createProjectData.planning_start_time); var timeStart = date.getTime(); return time.getTime() < timeStart; } },
<!--表单数据的验证，required是否为必填项（左边带红色*号），trigger验证触发事件，validator具体验证方法，不需要验证时，直接将rules同步删除即可--> rules: { name: [ { required: true, message: "项目名称不能为空", trigger: 'blur'}, { trigger: 'blur', validator(rule,value,callback){ if(value.length > 0 && value.length < 21){ callback(); } else { callback(new Error('请输入1-20个字符')); } }, } ], code: [ { required: true, message: "项目代号不能为空", trigger: 'blur' }, { trigger: 'blur', validator(rule,value,callback){ if(value.length > 0 && value.length < 21){ callback(); } else { callback(new Error('请输入1-20个字符')); } }, } ], project_type: [ { required: true, message: "项目类型不能为空", trigger: 'change'}, ], } ......省略部分代码 }; },
提交参数传递到后台的使用
// 查询项目提交 submitForm(formName) { this.isDisabled = true; this.$refs[formName].validate((valid) => { if (valid) { this.isDisabled = true; var postData = this.createProjectData;
<!--查询项目的方法（searchProjectList），处理参数的方法（delEmptyData），主要参数（postData）--> searchProjectList(delEmptyData(postData)) .then((res) => {
<!--请求成功后返回数据的处理--> this.$store.dispatch('searchProjectListData', res.data); this.isDisabled = true; //this.$store.dispatch('requestInitData', {company_id: this.companyId}); this.cancelForm('createProjectData'); this.proPostData.cp = 1; }).catch(error => { this.isDisabled = false; }) } else { this.isDisabled = false; this.$message.error("请检查下方是否有信息未填写！") return false; } }); },
前端项目中所有跟后台交互的接口使用（都写在一个js中，按照模块划分）
<!--使用时引入该js，js中会有具体方法-->
import { searchProjectList } from '@/api/project.js'
// 项目——项目下拉列表 export const projectSelectList = (data) => { return request({ url: '/project/projectInfo/proList', method: 'post', data }) } ......省略部分代码 // 项目——查询排序 export const searchProjectList = (data) => { return request({ url: '/project/projectInfo/search', method: 'post', data }) }
这样更加规范，更加容易找到想要找的方法，跟目录类似，分门别类，根据每个模块定义与后台交互的js，写好接口，方便前后端的协助工作。
参数处理的接口因为所有模块都会使用，属于通用的工具接口，所以直接放在公共js中。
<!--同样需要引入js,才能够使用js中定义的方法-->
import { delEmptyData, uploadPut, getWatermarkFromCookie } from '@/utils/util.js'
export const delEmptyData = (json) => { for (var i in json) { if (json[i] === '' || json[i] === undefined || json[i] === null || json[i].length === 0) { delete json[i]; } if(typeof json[i] === "object" && Object.prototype.toString.call(json[i]).toLowerCase() == "[object object]" && !json[i].length){ for (var k in json[i]) { if (json[i][k] === '' || json[i][k] === undefined || json[i][k] === null) { delete json[i][k]; } } if(isEmptyObject(json[i])){ delete json[i]; } } } return json; }
请求成功数数据的处理（使用到vuex）
<!--上边代码中有提到过，以下为提取的主要代码-->
this.$store.dispatch('searchProjectListData', res.data);
<!--vuex数据处理的中间步骤，以下两个方法均在store/modules/project.js中-->
searchProjectListData({ commit }, pData){ commit('SEARCH_PROJECT_LIST_DATA', pData); },
<!--最终将数据提供给data中定义的接收数据的变量中-->
SEARCH_PROJECT_LIST_DATA: (state, data) => { state.projectListData = data },
vuex还在研究中，后续继续
