记录使用ruoyi-flowable开发部署中出现的问题以及解决方法(二)

最新推荐文章于 2025-12-10 11:05:52 发布

原创最新推荐文章于 2025-12-10 11:05:52 发布 · 543 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

1.vform的使用与传值

使用动态表单，把当前的用户名传值进动态表单，另外动态表单的上传组件成功后传值会父组件。
在父组件的加载函数中增加：

mounted(){
    this.$refs.vFormRef.addEC("getuploadfile",this);
  },

该方法为给表单加载外部组件。如下：
现在我们到表单设置的页面中
在这里插入图片描述

在这里插入图片描述

const getatt=this.getFormRef().getEC("getuploadfile");
const info=getatt.getuserinfo();
this.getWidgetRef("name",showError=true).setValue(info)

该语句的含义为，先获取外部组件，然后调用外部组件的方法。

this.getWidgetRef(“name”,showError=true).setValue(info)中的name是组件的名，见图。
在这里插入图片描述
然后，再看上传组件的方法

this.getWidgetRef("table_id",showError=true).setValue(result.msg)
const getatt=this.getFormRef().getEC("getuploadfile");
getatt.getattlist(result.msg)

在这里插入图片描述

含义为上传文件成功为调用父组件的getattlist（）方法

getattlist(param){
      this.tableId=param
      this.attqueryParams.tableId=param
      listAttendance(this.attqueryParams).then(res => {
          res.rows.forEach(item=>item.savebtn=1);
          this.attendanceList = res.rows;
          this.total = res.total;
     });
    },

通过this.$refs.vFormRef.addEC(“name”,this);方法给父组件定义一个名称；
表单内部使用this.getFormRef().getEC(“name”)可以获取到这个父组件。进而可以调用父组件的所有方法。

2.el-table中的行动态改变样式

查询资料使用 :row-class-name="函数"这个方法来动态改变样式。
代码片段如下：

<el-table  :data="attendanceList"  :row-class-name="rowStyle" @cell-mouse-enter="handleCellEnter" @cell-mouse-leave="handleCellLeave" >
                  <el-table-column type="selection" width="55" align="center"  />

在组件的方法中定义rowStyle

rowStyle({row, rowIndex}){
        const date=new Date();
        date.setDate(date.getDate()-15)
        if(new Date(row.entryTime)>date){
           return 'success__class';
        }else if(new Date(row.leaveDate)>date){
           return 'error__class';
        }
         if(row.remark !=''){
         }
         return '';
       },

避坑

需要定义success__class和error__class的样式

.el-table .success__class{
		   color:white;
		   background-color:red;
		  }
    .el-table .error__class{
      text-decoration: line-through;
      background-color:grey
    }

本来写到了使用el-table的父组件中的样式表中，结果样式不发生变化，从浏览器里面调试查看 table tr 的class中已经根据条件出现了success__class和error__class，但样式没有变化！！
几经排查发现，主要是因为父组件中的

import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css

我们把success__class和error__class的样式写到/assets/styles/index.scss中，保存即可生效。

3.静态资料下载

想法把系统说明书放到前端中，直接使用URL下载，
在这里插入图片描述
前端页面代码如：

<p>
    <i class="el-icon-shopping-bag-2"></i> 生产运营流程帮助文档下载：<a style="color: #365be4" href="/static/doc/用户手册-生产运营.docx" target="_blank"
            >点我下载</a>
        </p>

避坑

尝试把《用户手册-生产运营.docx》放到ruoyi-ui/src/assets/doc/中，doc文件夹是新建，结果测试无法下载，查询资料，需要把《用户手册-生产运营.docx》放到ruoyi-ui/public/static/doc/中，测试成功。
打包之后/public/static/doc目录一样存在。部署测试下载说明书成功！！
特此记录上述三点。