• vue 前端 问题整理

    列表显示字典数据（方案1）

    template里面的vue代码

    1.  <el-table-column label="性别" align="center" prop="sex">
    2.               <template #default="scope">
    3. <!--                <dict-tag :options=sysUserSex :value="scope.row.sex"/>-->
    4.                 {{dictDataLabel( scope.row.sex,sysUserSex )}}
    5.               </template>
    6.             </el-table-column>
    7.            <el-table-column label="婚姻状况" align="center" prop="maritalStatus">
    8.               <template #default="scope">
    9. <!--                <dict-tag :options="sys_status" :value="scope.row.maritalStatus"/>-->
    10.                 {{dictDataLabel( scope.row.maritalStatus,maritalStatusList )}}
    11.               </template>
    12.             </el-table-column>
    13.             <el-table-column label="民族" align="center" prop="nation">
    14.               <template #default="scope">
    15. <!--                <dict-tag :options="sys_user_sex" :value="scope.row.nation"/>-->
    16.                 {{dictDataLabel( scope.row.nation,nationList )}}
    17.               </template>
    18.             </el-table-column>
    19.             <el-table-column label="政治面貌" align="center" prop="politicalOutlook">
    20.               <template #default="scope">
    21. <!--                <dict-tag :options="sys_status" :value="scope.row.politicalOutlook"/>-->
    22.                 {{dictDataLabel( scope.row.politicalOutlook,politicalOutlookList )}}
    23.               </template>
    24.             </el-table-column>

    获取数据（手动查询字典数据）

    1. // 查询字典集合，
    2. const sysUserSex = ref();
    3. dictByType();
    4. // 手动查询字典数据
    5. function dictByType(){
    6.   selectDictByKey( 'sys_user_sex' ).then(res => {
    7.     sysUserSex.value = res.data;
    8.   })
    9. }
    10.  
    11. // 查询字典集合，
    12. const maritalStatusList = ref();
    13. maritalStatusByType();
    14. function maritalStatusByType(){
    15.   selectDictByKey( 'marital_status' ).then(res => {
    16.     maritalStatusList.value = res.data;
    17.   })
    18. }
    19.  
    20. // 查询字典集合，
    21. const nationList = ref();
    22. nationListByType();
    23. function nationListByType(){
    24.   selectDictByKey( 'nation' ).then(res => {
    25.     nationList.value = res.data;
    26.   })
    27. }
    28.  
    29. // 查询字典集合，
    30. const politicalOutlookList = ref();
    31. politicalOutlookListByType();
    32. function politicalOutlookListByType(){
    33.   selectDictByKey( 'political_outlook' ).then(res => {
    34.     politicalOutlookList.value = res.data;
    35.   })
    36. }
    37.  
    38.  
    39.  
    40.  
    41.  
    42. // 获取字典数据和业务表的数据比对，如果是同一个key，会显示对应字典的value
    43. function dictDataLabel(dataValue, dataList) {
    44.     if (dataValue) {
    45.         let dictData = dataList;
    46.         let item = dictData.find(item => item.dictValue == dataValue)
    47.         if (item) {
    48.             return item.dictLabel;
    49.         }
    50.     }
    51. }

    // 获取字典数据和业务表的数据比对，如果是同一个key，会显示对应字典的value

    1. function dictDataLabel( dataValue ,dataList ){
    2.   if( dataValue ){
    3.     let dictData = dataList ;
    4.     let item = dictData.find( item=>item.dictValue == dataValue )
    5.     if( item){
    6.       return item.dictLabel;
    7.     }
    8.   }
    9. }

    校验文件上传大小

    1.       <el-row justify="center">
    2.         <el-col :span="24">
    3.           <el-form-item class="display-flex" label="企业LOGO" prop="companyLogoUr">
    4.             <el-upload
    5.                 class="avatar-uploader logo-img"
    6.                 :action=action
    7.                 :show-file-list="false"
    8.                 :on-success="uploadImgCompanyLogoUr"
    9.             >
    10.               <el-image v-if="companyLogoUr" :src="companyLogoUr" class="avatar logo-img"/>
    11.               <el-icon v-else class="avatar-uploader-icon logo-img">
    12.                 <Plus/>
    13.               </el-icon>
    14.             </el-upload>
    15.           </el-form-item>
    16.         </el-col>
    17.       </el-row>
    18.  
    19.  
    20. // 上传前校检格式和大小
    21. function handleBeforeUpload(file) {
    22. // 校验文件名长度
    23.   if( file.name.length > 50 ){
    24.     ElMessage.error('上传文件名长度不能超过50个汉字!')
    25.     return false
    26.   }
    27.   // 校检文件大小
    28.   if( file.size / 1024 / 1024 > 10 ) {
    29.     ElMessage.error('上传图片大小不能超过 10MB!')
    30.     return false
    31.   }
    32.   return true;
    33. }

    若依树结构下载选择添加

    添加下拉框的标签； dictOptionsShowAppType是数据

    1.  <el-form-item label="app移动端渲染类型" prop="showAppType">
    2.               <treeselect v-model="form.showAppType" :options="dictOptionsShowAppType" :show-count="true" placeholder="请选择app移动端渲染类型" />
    3.             </el-form-item>

    定义数据： dictOptionsShowAppType: undefined,

    引入jd

    1. import { getToken } from "@/utils/auth";
    2. import Treeselect from "@riophae/vue-treeselect";
    3. import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    4. import { dictTreeSelect,dictListSelect } from '@/api/lowCode/modelDict'

    获取数据

    1. getDictTreeShowAppType() {
    2.       let param = {
    3.         dictCode: 'render_type',
    4.       }
    5.       dictTreeSelect(param).then(response => {
    6.         this.dictOptionsShowAppType = response.data;
    7.       });
    8.     },
    9.  
    10.  
    11. // 查询下拉树结构
    12. export function dictTreeSelect(query) {
    13.   return request({
    14.     url: '/system/modelDict/dictTree',
    15.     method: 'get',
    16.     params: query
    17.   })
    18. }

    自定义form表单下拉树结构添加数据后，列表显示id或者key，不显示树的名字（方案2）

    解决方案： modelCategory是列表显示字段；sexFormat定义点击事件

    1.  <el-table-column label="模型分类" prop='modelCategory' :formatter="sexFormat" >
    2.       </el-table-column>
    3.  
    4.       <el-table-column label="模型类型" prop='modelType' :formatter="sexFormatModelType" >
    5.       </el-table-column>

    先查询字典树的所有列表数据，注意是列表，不是树结构

    1.  dictListOptions: [],
    2.  
    3.    /** 查询所有字典数据列表 */
    4.     getDictList() {
    5.       dictListSelect().then(response => {
    6.         this.dictListOptions = response.data;
    7.       });
    8.     },
    9.  
    10. // 编辑字典和列表返回的id或者字典key去比较，如果相同则发返回对应字典的dictLabel名字，然后渲染到列表
    11.     sexFormat(row) {
    12.       let obj = ''
    13.       this.dictListOptions.forEach((item) => {
    14.         if (row.modelCategory == item.id) {
    15.           obj = item.dictLabel
    16.         }
    17.       })
    18.       return obj
    19.     },
    20. // 编辑字典和列表返回的id或者字典key去比较，如果相同则发返回对应字典的dictLabel名字，然后渲染到列表
    21.     sexFormatModelType(row) {
    22.       let obj = ''
    23.       this.dictListOptions.forEach((item) => {
    24.         if (row.modelType == item.id) {
    25.           obj = item.dictLabel
    26.         }
    27.       })
    28.       return obj
    29.     },

    后端自定义树结构

    control代码
    /**
 * 获取字典树列表
 */
@GetMapping("/dictTree")
public AjaxResult deptTree(LowModelDict dept)  {
    return success(lowModelDictService.selectLowModelDictTreeList(dept));
}

    service实现类

    @Override
    public List selectLowModelDictTreeList(LowModelDict dept) {
        // 如果不传父级结构，指定一个父级结构
        if( StringUtils.isBlank( dept.getDictCode() )){
            dept.setDictCode("increment_type");
        }
        // 查询单条父级数据
        LowModelDict lowModelDict = lowModelDictMapper.selectOneModelDict(dept);
        // 查询全部数据
        List depts = lowModelDictMapper.selectLowModelDictList(dept);
        List treeSelects = buildDeptTreeSelect(depts, lowModelDict );
        return treeSelects;
    }



    public List buildDeptTreeSelect(List depts, LowModelDict lowModelDict ) {
        List deptTrees = buildDeptTree(depts , lowModelDict );
        return deptTrees.stream().map(TreeSelect::new).collect(Collectors.toList());
    }


    public List buildDeptTree(List depts, LowModelDict lowModelDict) {
        List returnList = new ArrayList();
//        List tempList = depts.stream().map(LowModelDict::getId).collect(Collectors.toList());  // 获取所有的树结构数据
        Long id = lowModelDict.getId();
        for (LowModelDict dept : depts) {
            // 如果是顶级节点, 遍历该父节点的所有子节点
//            if (!tempList.contains(dept.getParentId())) {  // 获取所有的树结构数据
//            if ( id.longValue() == dept.getParentId().longValue() ) {   // 不包括父级
            if (   id.longValue() == dept.getId().longValue() ) {    // 包括父级
                recursionFn(depts, dept);
                returnList.add(dept);
            }
        }
        if (returnList.isEmpty()) {
            returnList = depts;
        }
        return returnList;
    }

    /**
     * 递归列表
     */
    private void recursionFn(List list, LowModelDict t) {
        // 得到子节点列表
        List childList = getChildList(list, t);
        t.setChildren(childList);
        for (LowModelDict tChild : childList) {
            if (hasChild(list, tChild)) {
                recursionFn(list, tChild);
            }
        }
    }


    private boolean hasChild(List list, LowModelDict t) {
        return getChildList(list, t).size() > 0;
    }

    /**
     * 得到子节点列表
     */
    private List getChildList(List list, LowModelDict t) {
        List tlist = new ArrayList();
        Iterator it = list.iterator();
        while (it.hasNext()) {
            LowModelDict n = (LowModelDict) it.next();
            if (StringUtils.isNotNull(n.getParentId()) && n.getParentId().longValue() == t.getId().longValue()) {
                tlist.add(n);
            }
        }
        return tlist;
    }

    mapper接口

    /**
 * 查询数据字典列表
 *
 * @param lowModelDict 数据字典
 * @return 数据字典集合
 */
public List selectLowModelDictList(LowModelDict lowModelDict);
    // 查询单条父级数据
LowModelDict selectOneModelDict(LowModelDict lowModelDict);

     xml的sql

    // 查询单条父级数据

    查询数据字典列表

    
    select id, parent_id, dict_code, dict_label, dict_sort, dict_flag, dict_1, dict_2, dict_3, dict_4, dict_5, dict_seq, status, create_by, create_date, update_by, update_date, remarks from low_model_dict

    实体类；注意这里是继承 BaseEntity 

    1. package com.ruoyi.common.core.domain.entity;
    2.  
    3. import com.ruoyi.common.annotation.Excel;
    4. import com.ruoyi.common.core.domain.BaseEntity;
    5. import com.ruoyi.common.core.domain.TreeEntity;
    6. import org.apache.commons.lang3.builder.ToStringBuilder;
    7. import org.apache.commons.lang3.builder.ToStringStyle;
    8.  
    9. import java.util.ArrayList;
    10. import java.util.Date;
    11. import java.util.List;
    12.  
    13. /**
    14.  * 数据字典对象 low_model_dict
    15.  *
    16.  * @author ruoyi
    17.  * @date 2023-10-24
    18.  */
    19. public class LowModelDict extends BaseEntity {
    20.     private static final long serialVersionUID = 1L;
    21.  
    22.     /**
    23.      * 字典编号主键
    24.      */
    25.     private Long id;
    26.  
    27.  
    28.     /** 父部门ID */
    29.     private Long parentId;
    30.  
    31.     /**
    32.      * 字典代码 唯一
    33.      */
    34.     @Excel(name = "字典代码 唯一")
    35.     private String dictCode;
    36.  
    37.     /**
    38.      * 字典名称
    39.      */
    40.     @Excel(name = "字典名称")
    41.     private String dictLabel;
    42.  
    43.     /**
    44.      * 字典顺序
    45.      */
    46.     private Long dictSort;
    47.  
    48.     /**
    49.      * 字典标记 1 有效 0 失效
    50.      */
    51.     private Long dictFlag;
    52.  
    53.     /**
    54.      * 扩展字段1
    55.      */
    56.     private String dict1;
    57.  
    58.     /**
    59.      * 扩展字段2
    60.      */
    61.     private String dict2;
    62.  
    63.     /**
    64.      * 扩展字段3
    65.      */
    66.     private String dict3;
    67.  
    68.     /**
    69.      * 扩展字段4
    70.      */
    71.     private String dict4;
    72.  
    73.     /**
    74.      * 扩展字段5
    75.      */
    76.     private String dict5;
    77.  
    78.     /**
    79.      * 字典序列
    80.      */
    81.     @Excel(name = "字典序列")
    82.     private String dictSeq;
    83.  
    84.     /**
    85.      * 状态（0正常 1删除 2停用）
    86.      */
    87.     private String status;
    88.  
    89.     /**
    90.      * 创建时间
    91.      */
    92.     private Date createDate;
    93.  
    94.     /**
    95.      * 更新时间
    96.      */
    97.     private Date updateDate;
    98.  
    99.     /**
    100.      * 备注信息
    101.      */
    102.     private String remarks;
    103.  
    104.     private List<LowModelDict> children = new ArrayList<LowModelDict>();
    105.  
    106.     public List<LowModelDict> getChildren() {
    107.         return children;
    108.     }
    109.  
    110.     public void setChildren(List<LowModelDict> children) {
    111.         this.children = children;
    112.     }
    113.  
    114.     public Long getParentId() {
    115.         return parentId;
    116.     }
    117.  
    118.  
    119.     public void setParentId(Long parentId) {
    120.         this.parentId = parentId;
    121.     }
    122.  
    123.     public void setId(Long id) {
    124.         this.id = id;
    125.     }
    126.  
    127.     public Long getId() {
    128.         return id;
    129.     }
    130.  
    131.     public void setDictCode(String dictCode) {
    132.         this.dictCode = dictCode;
    133.     }
    134.  
    135.     public String getDictCode() {
    136.         return dictCode;
    137.     }
    138.  
    139.     public void setDictLabel(String dictLabel) {
    140.         this.dictLabel = dictLabel;
    141.     }
    142.  
    143.     public String getDictLabel() {
    144.         return dictLabel;
    145.     }
    146.  
    147.     public void setDictSort(Long dictSort) {
    148.         this.dictSort = dictSort;
    149.     }
    150.  
    151.     public Long getDictSort() {
    152.         return dictSort;
    153.     }
    154.  
    155.     public void setDictFlag(Long dictFlag) {
    156.         this.dictFlag = dictFlag;
    157.     }
    158.  
    159.     public Long getDictFlag() {
    160.         return dictFlag;
    161.     }
    162.  
    163.     public void setDict1(String dict1) {
    164.         this.dict1 = dict1;
    165.     }
    166.  
    167.     public String getDict1() {
    168.         return dict1;
    169.     }
    170.  
    171.     public void setDict2(String dict2) {
    172.         this.dict2 = dict2;
    173.     }
    174.  
    175.     public String getDict2() {
    176.         return dict2;
    177.     }
    178.  
    179.     public void setDict3(String dict3) {
    180.         this.dict3 = dict3;
    181.     }
    182.  
    183.     public String getDict3() {
    184.         return dict3;
    185.     }
    186.  
    187.     public void setDict4(String dict4) {
    188.         this.dict4 = dict4;
    189.     }
    190.  
    191.     public String getDict4() {
    192.         return dict4;
    193.     }
    194.  
    195.     public void setDict5(String dict5) {
    196.         this.dict5 = dict5;
    197.     }
    198.  
    199.     public String getDict5() {
    200.         return dict5;
    201.     }
    202.  
    203.     public void setDictSeq(String dictSeq) {
    204.         this.dictSeq = dictSeq;
    205.     }
    206.  
    207.     public String getDictSeq() {
    208.         return dictSeq;
    209.     }
    210.  
    211.     public void setStatus(String status) {
    212.         this.status = status;
    213.     }
    214.  
    215.     public String getStatus() {
    216.         return status;
    217.     }
    218.  
    219.     public void setCreateDate(Date createDate) {
    220.         this.createDate = createDate;
    221.     }
    222.  
    223.     public Date getCreateDate() {
    224.         return createDate;
    225.     }
    226.  
    227.     public void setUpdateDate(Date updateDate) {
    228.         this.updateDate = updateDate;
    229.     }
    230.  
    231.     public Date getUpdateDate() {
    232.         return updateDate;
    233.     }
    234.  
    235.     public void setRemarks(String remarks) {
    236.         this.remarks = remarks;
    237.     }
    238.  
    239.     public String getRemarks() {
    240.         return remarks;
    241.     }
    242.  
    243.     @Override
    244.     public String toString() {
    245.         return new ToStringBuilder(this, ToStringStyle.MULTI_LINE_STYLE)
    246.                 .append("id", getId())
    247.                 .append("parentId", getParentId())
    248.                 .append("dictCode", getDictCode())
    249.                 .append("dictLabel", getDictLabel())
    250.                 .append("dictSort", getDictSort())
    251.                 .append("dictFlag", getDictFlag())
    252.                 .append("dict1", getDict1())
    253.                 .append("dict2", getDict2())
    254.                 .append("dict3", getDict3())
    255.                 .append("dict4", getDict4())
    256.                 .append("dict5", getDict5())
    257.                 .append("dictSeq", getDictSeq())
    258.                 .append("status", getStatus())
    259.                 .append("createBy", getCreateBy())
    260.                 .append("createDate", getCreateDate())
    261.                 .append("updateBy", getUpdateBy())
    262.                 .append("updateDate", getUpdateDate())
    263.                 .append("remarks", getRemarks())
    264.                 .toString();
    265.     }
    266. }

     主键是 Long 类型的时候数据库字段是 bigint 由于长度超过16；返回前端会有精度丢失，导致后端返回的时间id和前端接受的实际id不一致，导致修改失败，需要在启动类添加配置代码

    // 处理Long 类型 返回前端精度丢失问题
@Bean
public ObjectMapper jacksonObjectMapper(Jackson2ObjectMapperBuilder builder) {
    ObjectMapper objectMapper = builder.createXmlMapper(false).build();
    SimpleModule simpleModule = new SimpleModule();
    simpleModule.addSerializer(Long.class, ToStringSerializer.instance);
    objectMapper.registerModule(simpleModule);
    return objectMapper;
}

    若依框架集成 MybatisPlusConfig 添加依赖

     commin 模块 pom.xml

    


    com.baomidou
    mybatis-plus-boot-starter

     最外层的pom.xml

    


    com.baomidou
    mybatis-plus-boot-starter
    ${mybatis-plus.version}




    com.github.pagehelper
    pagehelper-spring-boot-starter
    ${pagehelper.boot.version}
    
        
            org.mybatis
            mybatis

    注释原来 MyBatisConfig

    添加 MybatisPlus 的配置类 MybatisPlusConfig

    1. package com.ruoyi.framework.config;
    2.  
    3.  
    4. import com.baomidou.mybatisplus.annotation.DbType;
    5. import com.baomidou.mybatisplus.core.config.GlobalConfig;
    6. import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
    7. import com.baomidou.mybatisplus.extension.plugins.inner.BlockAttackInnerInterceptor;
    8. import com.baomidou.mybatisplus.extension.plugins.inner.OptimisticLockerInnerInterceptor;
    9. import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
    10. import com.baomidou.mybatisplus.extension.spring.MybatisSqlSessionFactoryBean;
    11. import org.springframework.context.annotation.Bean;
    12. import org.springframework.context.annotation.Configuration;
    13. import org.springframework.transaction.annotation.EnableTransactionManagement;
    14.  
    15. import javax.sql.DataSource;
    16. import java.io.IOException;
    17.  
    18. /**
    19.  * Mybatis Plus 配置
    20.  *
    21.  * @author ruoyi
    22.  */
    23. @EnableTransactionManagement(proxyTargetClass = true)
    24. @Configuration
    25. public class MybatisPlusConfig {
    26.  
    27.     @Bean
    28.     public MybatisPlusInterceptor mybatisPlusInterceptor() {
    29.         MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
    30.         // 分页插件
    31.         interceptor.addInnerInterceptor(paginationInnerInterceptor());
    32.         // 乐观锁插件
    33.         interceptor.addInnerInterceptor(optimisticLockerInnerInterceptor());
    34.         // 阻断插件
    35.         interceptor.addInnerInterceptor(blockAttackInnerInterceptor());
    36.         return interceptor;
    37.     }
    38.  
    39.     /**
    40.      * 分页插件，自动识别数据库类型 https://baomidou.com/guide/interceptor-pagination.html
    41.      */
    42.     public PaginationInnerInterceptor paginationInnerInterceptor() {
    43.         PaginationInnerInterceptor paginationInnerInterceptor = new PaginationInnerInterceptor();
    44.         // 设置数据库类型为mysql
    45.         paginationInnerInterceptor.setDbType(DbType.MYSQL);
    46.         // 设置最大单页限制数量，默认 500 条，-1 不受限制
    47.         paginationInnerInterceptor.setMaxLimit(-1L);
    48.         return paginationInnerInterceptor;
    49.     }
    50.  
    51.     /**
    52.      * 乐观锁插件 https://baomidou.com/guide/interceptor-optimistic-locker.html
    53.      */
    54.     public OptimisticLockerInnerInterceptor optimisticLockerInnerInterceptor() {
    55.         return new OptimisticLockerInnerInterceptor();
    56.     }
    57.  
    58.     /**
    59.      * 如果是对全表的删除或更新操作，就会终止该操作 https://baomidou.com/guide/interceptor-block-attack.html
    60.      */
    61.     public BlockAttackInnerInterceptor blockAttackInnerInterceptor() {
    62.         return new BlockAttackInnerInterceptor();
    63.     }
    64.  
    65. }

    修改  BaseEntity 类 ；移除部分不用的字段；不移除 mp 查询会报错；因为数据库没相关字段 @TableField(exist = false)

    修改配置 application.yml 文件；移除mybatis的配置，添加mybatisPlus的配置

    1. # MyBatis配置
    2. #mybatis:
    3. #  # 搜索指定包别名
    4. #  typeAliasesPackage: com.ruoyi.**.domain
    5. #  # 配置mapper的扫描，找到所有的mapper.xml映射文件
    6. #  mapperLocations: classpath*:mapper/**/*Mapper.xml
    7. #  # 加载全局的配置文件
    8. #  configLocation: classpath:mybatis/mybatis-config.xml
    9.  
    10. # MyBatis Plus配置
    11. mybatis-plus:
    12.   # 搜索指定包别名
    13.   typeAliasesPackage: com.ruoyi.**.domain.**
    14.   # 配置mapper的扫描，找到所有的mapper.xml映射文件
    15.   mapperLocations: classpath*:mapper/**/*Mapper.xml
    16.   # 加载全局的配置文件
    17.   configLocation: classpath:mybatis/mybatis-config.xml
    18.  
    19. # PageHelper分页插件
    20. pagehelper:
    21.   helperDialect: mysql
    22.   supportMethodsArguments: true
    23.   params: count=countSql

    集成 mybatisplus 的分页查询 IPage

    基础实体类继承分页参数类；BaseEntity extends PageDomain

    注意、注意、注意 

    PageDomain 分页类要移除相关字段，数据库表没有相关字段，否则mp查询报错

    集成创建时间、创建人、修改时间、修改人等自动填充

    添加依赖 ruoyi-framework 

    

    org.slf4j
    slf4j-api
    1.7.25


    org.slf4j
    slf4j-log4j12
    1.7.25


    org.projectlombok
    lombok
    1.18.22

    添加自动填充配置类 MyMetaObjectHandler；注意 createTime、createDate等字段在实体类要配置注解；

    1. package com.ruoyi.framework.config;
    2.  
    3. import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler;
    4. import com.ruoyi.common.utils.SecurityUtils;
    5. import lombok.extern.slf4j.Slf4j;
    6. import org.apache.ibatis.reflection.MetaObject;
    7. import org.springframework.stereotype.Component;
    8.  
    9. import java.util.Date;
    10.  
    11. @Component
    12. @Slf4j
    13. public class MyMetaObjectHandler implements MetaObjectHandler {
    14.  
    15.  
    16.     @Override
    17.     public void insertFill(MetaObject metaObject) {
    18.         String operator = null;
    19.         try {
    20.             operator = SecurityUtils.getUsername();
    21.         } catch (Exception e) {
    22.             log.error(e.getMessage(), e);
    23.         }
    24.         this.setFieldValByName("createBy", operator, metaObject);
    25.         this.setFieldValByName("createDate", new Date(), metaObject);
    26.         this.setFieldValByName("updateBy", operator, metaObject);
    27.         this.setFieldValByName("updateDate", new Date(), metaObject);
    28.         this.setFieldValByName("createTime", new Date(), metaObject);
    29.         this.setFieldValByName("updateTime", new Date(), metaObject);
    30.     }
    31.  
    32.     @Override
    33.     public void updateFill(MetaObject metaObject) {
    34.         String operator = null;
    35.         try {
    36.             operator = SecurityUtils.getUsername();
    37.         } catch (Exception e) {
    38.             log.error(e.getMessage(), e);
    39.         }
    40.         this.setFieldValByName("updateBy", operator, metaObject);
    41.         this.setFieldValByName("updateData", new Date(), metaObject);
    42.     }
    43. }

    基础实体类 BaseEntity 字段要添加注解；

      @TableField(value = "create_time",fill = FieldFill.INSERT)  // 要和数据库一致

    如果业务实体类 LowModelCode  里面有需要自动填充的字段；也要添加注解

      @TableField(value = "create_time",fill = FieldFill.INSERT)  // 要和数据库一致

    一个vue文件里面执行方法（包括有异步的情况）

    在 onMounted 里面先执行 singleLogin 登录方法，等登录成功后再执行 init() 初始化的方法，登录的同时判断是否有token ，有直接返回，没有就执行登录方法获取token

    1. onMounted(() => {
    2.   singleLogin().then(() => {
    3.     // singleLogin 执行完毕后再执行 init()
    4.     init();
    5.   });
    6. });
    7.  
    8. // 登录
    9. function singleLogin() {
    10.   return new Promise((resolve, reject) => {
    11.     if (getToken() == undefined || getToken() == null || getToken() == '') {
    12.       let param = {
    13.         "encryptionStr": getEncryptionStr()
    14.       }
    15.       singlePointLogin(param).then(res => {
    16.         setToken(res.token);
    17.         // 注意：在此上下文中，可能无法使用 "this" 来引用当前组件实例
    18.         // 如果需要，可以修改为适当的方式引用组件实例
    19.         resolve();
    20.       }).catch(error => {
    21.         // 如果登录过程中发生错误，可以在这里处理
    22.         reject(error);
    23.       });
    24.     } else {
    25.       // 如果已经有 Token，直接 resolve
    26.       resolve();
    27.     }
    28.   });
    29. }

    若依前端 form表单多tab页

    1.          <!--人脸识别服务tab页-->
    2.           <el-tab-pane label="人脸识别服务配置" name="successUrl"  v-if="callbackUrl">
    3.             <el-form-item label="成功回调" prop="successUrl" required>
    4.               <el-input v-model="form.successUrl" placeholder="请输入人脸识别成功回调地址" />
    5.             </el-form-item>
    6.             <el-form-item label="失败回调" prop="failedUrl" required>
    7.               <el-input v-model="form.failedUrl" placeholder="请输入人脸识别失败回调地址" />
    8.             </el-form-item>
    9.           </el-tab-pane>
    10.  
    11.  
    12.  
    13. js 代码 
    14. 定义
    15. const callbackUrl = ref(false);
    16.  
    17.  
    18. // 取消按钮 未保存，去掉已经选择的人脸服务数据 使 人脸识别服务tab页 变为默认空值
    19. function cancel() {
    20.   open.value = false;
    21.   callbackUrl.value=false;
    22.   reset();
    23. }
    24.  
    25.  
    26. 点击下拉框 动态获取数据，并根据是否选中人脸服务 决定是否显示 人脸识别服务tab页
    27. function getChangeClick(data) {
    28.   let ids = form.value.serviceArr?.map(item => item.value);
    29.   getChargeType(ids).then(res => {
    30.     listDict.value = res.data.list;
    31.     isExitEiis.value=res.data.isExitEiis;
    32.   });
    33.   let label = form.value.serviceArr?.map(item => item.label);
    34.   if( label.includes('人脸识别') ||  label.includes('人脸识别服务')  ||  label.includes('人脸')  ){
    35.     callbackUrl.value=true;
    36.   }else {
    37.     callbackUrl.value=false;
    38.   }
    39. }
    40.  
    41.  
    42.  
    43. 修改按钮操作 根据返回数据判断是否已经选择人脸服务选项 决定是否显示  人脸识别服务tab页
    44. function handleUpdate(row) {
    45.   reset();
    46.   const _id = row.id || ids.value;
    47.   getAppinfo(_id).then((response) => {
    48.     form.value = response.data;
    49.     let label = form.value.serviceArr?.map(item => item.label); 
    50.     if( label.includes('人脸识别') ||  label.includes('人脸识别服务')  ||  label.includes('人脸')  ){
    51.       callbackUrl.value=true;
    52.     }else {
    53.       callbackUrl.value=false;
    54.     }
    55.     open.value = true;
    56.     title.value = "修改企业应用";
    57.     listDict.value = response.data.listDict;
    58.   });
    59.   callbackUrl.value=true;
    60. }
    61.  
    62.

  • 相关阅读:
    04 随机梯度下降
    全网最全Python系列教程（非常详细）---数值篇讲解（学Python入门必收藏）
    几个数组相关常见算法题
    哪些不得不记下的汇编指令
    【操作系统】进程控制
    MIUI13 USB调试Android应用失败INSTALL_FAILED_USER_RESTRICTED
    牛客 2024 【牛客&赛文X】春招冲刺 ONT73 体育课测验(二) 【中等 图/拓扑排序 Java,Go,PHP】
    react写一个从下往上划出的弹框弹窗组件
    vue+three.js中使用Ammo.js
    医生接诊时间难分配？看DHTMLX Scheduler如何助力门诊管理系统优化升级
  • 原文地址：https://blog.csdn.net/qq_36961226/article/details/132752248