储备项目管理业务开发Vue前端思考

一、流程结构图：

二、开发过程：

 

Vue前端重点难点：

1. 月报vue多级表头的合并以及数据渲染和保存以及状态的计算（规则晦涩难懂）；
2. 每个流程节点vue开发的多个页面嵌套：

1. 包含：notoffice画的响应式表单、vue开发的页面
2. 难点：2.1、builder上配容器

           2.2、几个多级表头新增页面只能用原生态的table实现导致后面的一系列开发困难

2.3、选择：A、调路由跳转页面 B、v-show展示隐藏

备注说明：最开始用跳转路由的方式调用页面，存在的问题是：从主页面点击“查看”进入子页面（这个时候是带有信息的），子页面是个组合页面：vue+响应式表单，点击“新增、查看、编辑”，到达三级子页面，点击公共组件“返回”，返回不到二级子页面，由于这个时候cookie没有相关页面的信息，二级子页面是没法展示的。只能把三级子页面做成组件，在二级子页面引用通过v-show隐藏展示进行功能实现，这个时候存在一个新的问题：新增“保存”之后，由于仅仅是隐藏，没触发事件，再次点击“新增”，之前保存过的数据还在，想办法清空。

1. 嵌套的开发步骤：

   用项目实施阶段具体说明：

1. 存在的页面：notoffice的响应式表单“项目基本信息”+vue页面：土地权属信息、动态成本审核、专项证券使用情况、资金审核情况、新增页面、查看页面、编辑页面

引响应式表单组件：

<content-netoffice-page :parameter="xmss" ref="showform"></content-netoffice-page>

引vue页面做组件：

<xmglxmsstdqsxx ref="tdForm"></xmglxmsstdqsxx>
<div style="width: 100%;height: 8px;background-color: #DCDFE6"></div>
<xmglXmssDtcbsh ref="shForm"></xmglXmssDtcbsh>
<div style="width: 100%;height: 8px;background-color: #DCDFE6"></div>
<xmglXmssZxzqsyqk ref="syForm"></xmglXmssZxzqsyqk>
<div style="width: 100%;height: 8px;background-color: #DCDFE6"></div>
<xmglxmsszjsqybf ref="bfForm"></xmglxmsszjsqybf>
<div style="width: 100%;height: 8px;background-color: #DCDFE6"></div>
<fmFilesList :parameter="fmData"></fmFilesList>

1. 理清父子关系，然后写方法调用子页面的方法，实现增删查改
2. 别忘了在portal-dynamic-form文件夹下的dynamic-form.js里面引用组合页面
3. 在builder里面配页面模板以及配容器
4. 把设计器里面操作栏的地址换成：component_xmglxmssindex?{IID}&{WIID}&{INPUT_INDEX}&{USERID}&pageName=项目实施阶段&ywlx=2003020002

1. 页面样式的注意事项：

（1）时间格式：

<el-date-picker
        align="right"
        v-model="addForm.RQ"
        type="date"
        value-format="yyyy-MM-dd"
        style="width: 100%"
        placeholder="选择日期"
>
</el-date-picker>

Value-format规范的是传入后台的值：“2021-7-21”

Format规范的仅仅是选择框展示的样式：“2021-7-21”传入后台的值“2021-7-20 DST16 00：:00:00”

1. 储备机构是个下拉框，查询到的值，只有一个：XXX区储备机构中心，要求是直接把结果默认到:

<el-select v-model="info.cbjg" placeholder="请选择" style="width: 100%">

由于v-model已经用了，不能再写个v-model，想要把option的value给select有点困难，我的做法是：把查到的name直接给v-model绑定的info.cbjg

queryCbjg(){
    let self = this;
    getCbjgList().then(function (data) {
        let result = myEval(data);
        for (let i = 0; i < result.length; i++) {
            result[i].value = result[i].value;
            result[i].label = result[i].name;
            self.info.cbjg = result[i].name;
        }
        self.dict.cbjgList = result;
    }).catch(function (error) {
        self.dict.cbjgList = [];
        self.$message({showClose: true, message: error.toString(), type: 'error'});
    });
},

1. 项目实施阶段--新增成本动态审核，这个页面牵扯到多级表头，整个表单还得取值并保存，vue的el-table只能查询展示、el-form不满足需求，最后我选择用HTML的原生态table，这样的话样式什么的还得跟其他页面保持一致有点困难，vue里面的一些方法也不能调用，比如：

resetForm() {
    this.$refs.addQkForm.resetFields();
},

清空的方法不能用，为了再次点击“新增”，打开的页面没有数据，得另外想方法写个清空功能，尝试了刷新、页面加载等等的方法都不满足需求，最后，就只能循环置空每一个值

resetForm() {
    for (let addFormKey in this.addForm) {
        this.addForm[addFormKey] = "";
    }
},

1. 专项证券使用情况，需求：加了*意思是必填的，必填的为空，不应该让他保存成功。

存在的问题：保存方法那块不能用：

this.$refs.addForm.validate(valid => {});

这种嵌套页面的子子页面这样写存在“保存”没反应的问题。故此，想要满足需求，就得重新找个方法，然后，我想到循环遍历统计必填项的空值数量，然后做判断，空值数量大于零就提示他必填项未填不能保存！反之，就让他调用保存的方法

rulesAdddate(){
    let self=this;
    let count=0;
    for (let addFormKey in self.addForm) {
        if(self.addForm[addFormKey]===""){
            count++;
        }
    }
    if(count>0){
        self.$message({
            type: "warning",
            message: "必填项未填！"
        });
    } else {
        self.addZxzqsyqk();//调用保存方法
    }
},

1. 统计分析模块：

 

这个最后决议是用帆软工具进行画，因为里面有统计图等，用帆软画比较简单。我要做的是什么呢？就是在builder上配容器，写组合页面：vue+URL地址，主要的任务是把行政区这个参数传过去，让他根据行政区查询数据。

 

第一点：建立一个页面xmgl-tjfx-list.vue引用相关的那两个页面：

<el-tabs v-model="activeName" class="custom-tabs">
    <el-tab-pane label="项目分布情况" name="first">
        <xmgltjfxxmfb v-if="this.activeName=== 'first'"></xmgltjfxxmfb>
    </el-tab-pane>
    <el-tab-pane label="储备状态情况" name="second">
        <xmgltjfxzjtj v-if="this.activeName=== 'second'"></xmgltjfxzjtj>
    </el-tab-pane>
</el-tabs>

第二点：在项目分布情况页面引notoffice的表单，传参数。

引用表单：

<contentPage v-if="parameter.ywlx != undefined && parameter.pageName != ''" :parameter="parameter" :frameNr="300" style="height: 100%"></contentPage>

传参数：

initQuery() {
    this.parameter.pageName = "土地储备-项目分布情况";
    this.parameter.ywlx = 'XMFBQK';
    this.parameter.XZQ = window.getCookie("f_site_id");
}

第三点：在builder上配置