新项目新知识总结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="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=" 100%;">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="项目状态" prop="project_status">
　　　　　　  <!--选择器的使用方式-->
            <el-select v-model="createProjectData.project_status" placeholder="请选择项目状态" style="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还在研究中，后续继续