新專案新知識總結03
阿新 • • 發佈:2021-07-21
新專案前端技術運用的總結,梳理進行記錄。
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還在研究中,後續繼續