JEECG BOOT 前端记录

菜鸟程序员yang

已于 2024-01-12 14:55:03 修改

阅读量509

点赞数

分类专栏： java jeecg-boot 文章标签：前端

于 2023-11-15 16:00:06 首次发布

本文链接：https://blog.csdn.net/qq_60782107/article/details/134201806

版权

java 同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

jeecg-boot

1 篇文章 0 订阅

订阅专栏

查询

1、模糊搜索中文

<a-form-item label="所属班级名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <j-search-select-tag
             placeholder="请输入所属班级名称"
             v-model="queryParam.classId"
             dict="school_class,name,id"
             :async="true"
             style="width: 100%"
           ></j-search-select-tag>
</a-form-item>

//dict:表名school_class,name显示的班级信息，classId得跟id相关联，才能查出name值

2、下拉框选择

<a-form-item label="请选择发布状态">
           <j-dict-select-tag
             v-model="queryParam.publishStatus"
             placeholder="请选择"
             dictCode="publish_status"
           />
</a-form-item>

//dictCode:字典表里的字段

3、文本框

<a-form-item label="学生姓名">
           <a-input placeholder="请输入学生姓名" v-model="queryParam.name"></a-input>
</a-form-item>

新增

1、添加文本框

<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="content" label="学生姓名">
       <a-input v-model="model.name" rows="4" placeholder='请输入学生姓名'/>
</a-form-model-item>

2、图片上传

<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="picUrl" label="活动图片">
      <j-image-upload text="上传活动图片" v-model="model.picUrl" :isMultiple="true"></j-image-upload>
</a-form-model-item>

//:isMultiple="true" 允许上传多张

3、文件上传

<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="videoUrl" label="视频链接">
       <j-upload  v-model="model.videoUrl" ></j-upload>
</a-form-model-item>


//引入工具包
<script>
  import { httpAction } from '@/api/manage'
  import moment from "moment"
  import JImageUpload from '@/components/jeecg/JImageUpload'
  import JUpload from '@/components/jeecg/JUpload'

  export default {
    name: "SchoolSpreadModal",
    components:{
      JImageUpload,
      JUpload
    },

4、富文本

<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="content" label="活动内容">
       <a-textarea v-model="model.content" rows="4" placeholder='请输入活动内容'/>
</a-form-model-item>

5、下拉框数字回显文字

第一种：

<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="visible" label="是否给家长可见">
       <j-dict-select-tag v-model="model.visible" dictCode="visible_status" />
</a-form-model-item>

//dictCode去查字典表里对的值
如：值为 0不可见 1可见

第二种：

<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="classId" label="班级名称">
       <j-dict-select-tag v-model="model.classId" dictCode="school_class,name,id" placeholder = '请选择班级名称'/>
</a-form-model-item>

//dictCode这里是查询表 一共有三个值
1.表名 2.你要显示在下拉框的值（我想显示中文） 3.表的id 这里是你的classId值和这张表的id是有关联的才会查出来

展示

1、字典翻译注解@Dict

字典翻译注解@Dict：用于列表字段字典翻译（比如字段sex存的值是1，会自动生成一个翻译字段 sex_dictText 值是‘男’）

比如：用户表有一字段:发布状态,数据库存储的1,2分别表示未发布,已发布,当数据被查询展示在列表上时,就需要将1,2翻译成未已,这就要用到@Dict

后端实体属性上加注解(此处dicCode 对应上述字典编码)

 /**
  * 发布状态（0：未发布 1：已发布）
  */
 @Dict(dicCode = "publish_status")
 private Integer publishStatus;

前端定义column(此处dataIndex原字段名为publishStatus,这里需要定义为publishStatus_dictText,即原字段名+'__dictText')

 columns: [
    //...省略其他列
    {
     title: '发布状态',
     align:"center",
     dataIndex: 'publishStatus_dictText'
    }]

如下两张对比：

1.2、字典表翻译用法

可通过这个注解来查询出来映射上去班级名称 dictTable=表名，dicCode=当前这个classId和这个表里面的id相对比相同，dicText=映射出来的班级名称

@Dict(dictTable = "school_class", dicCode = "id" ,dicText = "name")
private String classId;

2、点击事件调接口

<a @click="publish(record)">发布</a>


methods: {
      publish(record){
        let params ={
          id : record.id,
          publishStatus : 1,
        }
        console.log(params);
        postAction('/aigoes/schooldwadwa/edit',params).then((res)=>{
          message.success({ content: '发布成功!', duration: 1 });
          console.log(res)
          this.loadData();
        })
      }
    }

待更新...