# 青农集团

**Repository Path**: WuHaojavaCode/qingnong-group-git

## Basic Information

- **Project Name**: 青农集团
- **Description**: No description available
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-16
- **Last Updated**: 2026-01-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 初始项目框架
### Hutool文档地址:https://hutool.cn/docs
### ruoyi文档地址:http://doc.ruoyi.vip/ruoyi/
### 框架集成了lombok，请注意安装工具插件 
## 前端部分
### 表单部分
#### radio选择框组件

 - 所需文件

> * css文件：jquery.richUI.min.css
> * js文件：jquery.browser.min.js、jquery.richUI.min.js

 - 代码
```
<div  class="form-group switch">
	<label class="col-sm-3 control-label">你的标题：</label>
	<div class="col-sm-8">
	 <div style="width: 100%;">
		<input name="goodTypeVisible_check" value="0" type="radio" lab="否" />
		<input name="goodTypeVisible_check" value="1" type="radio" lab="是" />
	 </div>
	</div>
</div>
```
 - 初始化
```
//初始化
$("input[name='goodTypeVisible_check']").richradio({selected : "0"});
//值发生变化后取值
$("input:radio[name='goodTypeVisible_check']").change(function() {
    var checkValue = $("input[name='goodTypeVisible_check']:checked").val();
});
```
#### 图片上传控件
 - 所需文件
 

> * css文件:`<th:block th:include="include :: jasny-bootstrap-css" />`
> * js文件: `<th:block th:include="include :: jasny-bootstrap-js" />`

 - 代码
```
<div class="form-group">
			<label class="col-sm-2 control-label">商品头图：</label>
			<div class="col-sm-10">
				<div class="fileinput fileinput-new" data-provides="fileinput">
					<div id="pic" class="fileinput-new thumbnail" style="width: 250px;display: none;">
					</div>
					<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 200px;"></div>
					<div>
						<span class="btn btn-white btn-file"> <span class="fileinput-new">选择图片</span> <span class="fileinput-exists">更改</span>
							<input id="fileBanImage" type="file"></span> <a href=" " class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
					</div>
				</div>
			</div>
		</div>
```
 - 上传请求部分
```
$('#fileBanImage').on('change.bs.fileinput ', function(e) {
	$.modal.loading("图片上传中");
	var formData = new FormData();
	formData.append('file', $('#fileBanImage')[0].files[0]);
	$.ajax({
		url: ctx + '/api/config/upload',
		data: formData,
		type: "post",
		processData: false,
		contentType: false,
		success: function(result) {
	    	if (result.code == 0) {
		    	var picValue = result.msg;
			    $("#pic").css("display", "");
			    $("#pic").append("<img src='" + result.msg + "'>")
			    $.modal.closeLoading();
		    }
    	}
	});
});
```
#### 多图片上传
- 所需文件

> * css文件: `<th:block th:include="include :: bootstrap-fileinput-css" />`
> * js文件: `<th:block th:include="include :: bootstrap-fileinput-js" />`

- 页面代码

```
<div  class="form-group" >
	<input id="shopPiclist" name="shopPiclist" th:field="*{shopPiclist}" class="form-control" type="hidden">
	<label class="col-sm-2 control-label">店铺宣传图：</label>
	<div class="col-sm-10">
		<input id="fileinput-demo-1" name="file" type="file" multiple>
	</div>
</div>
```
- js开始上传
```
var slide = new Array();
$(document).ready(function() {
	var piclist=$("#shopPiclist").val();
	var stringArr= piclist.split(",");
	$("#fileinput-demo-1").fileinput({
		'theme' : 'explorer-fas',
		'uploadUrl' : ctx+'/api/config/uploadFj',
		overwriteInitial: false,
		initialPreview:stringArr,
		initialPreviewAsData: true,
		layoutTemplates:{
			actionUpload:"",
		},
		fileuploaded:$("#fileinput-demo-1").on("fileuploaded", function (event, data, previewId, index) {
			slide.push(data.response.msg);
			$("#fileinput-demo").parent().parent().css("display","none");
		}),
	});
});
```
#### 标签组件
 - 所需文件

> * css文件：taginput.css
> * 外部文件：`<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>`
> * 内置js：taginput.js

 - 页面代码
```
<div class="form-group">
	<label class="col-sm-2 control-label">店铺标签：</label>
	<div class="col-sm-10">
	    <input name="shopLable" id="tagsinputval" class="tagsinput" data-role="tagsinput" th:field="*{shopLable}" placeholder="输入后回车"/>
	</div>
</div>
```
#### 时间轴组件
- 所需文件
> * css文件： setup/css/less/style.css
> * js文件：setup/js/lib/lib.js
- 页面代码
```
<style>
		.nav>li.active {
			 border-left: 0px solid #19aa8d00;
			 background: #19aa8d00;
		}
		.step-square.nav-justified >  a:after, .step-square.nav-stacked > li:hover a:after, .step-square.nav-justified > li:active a:after, .step-square.nav-stacked > li:active a:after, .step-square.nav-justified >  a:after, .step-square.nav-stacked >  a:after {
			background-color: #007bff;
			left: 50%;
		}
		.lable{
			display: flex;
			margin-top: 20px;
			margin-left: -90px;
			align-items: baseline;
		}
		.tabledata{
			margin-top: 5px;
			margin-left: -79px;
			margin-right: -77px;
		}
	</style>
	
	<ul id="step_0" class="nav nav-pills nav-justified step step-square" data-step="1">
		<li>
			<a class="firsta">提交订单</a>
			<div></div>
		</li>
		<li>
			<a>商家待接单</a>
		</li>
	</ul>
```
- js初始化
```
//控制时间轴进度
$("#step_0").attr("data-step","进度值");
//初始化
bsStep();
```
#### 富文本编辑器
 - 所需文件

> * css文件：`<th:block th:include="include :: summernote-css" />`
> * js文件： `<th:block th:include="include :: summernote-js" />`

注意：同一个页面使用 bootstrap-fileinput 与 summernote 时会影响fileinput的按钮样式需要加入内部css样式修正`<style> .hidden-xs{ display: inherit!important; } </style>`

 - 页面代码
```
<div class="form-group">	
	<label class="col-sm-2 control-label">商品详情：</label>
	<div class="col-sm-10">
		<div class="summernote_2"></div>
	</div>
</div>
```
 - js富文本上传图片
```
$('.summernote_1').summernote({
	placeholder : '请输入详情内容',
	height : 192,
	lang : 'zh-CN',
	followingToolbar : false,
	callbacks : {
		onImageUpload : function(files) {
		//上传图片到服务器
		var formData = new FormData();
		formData.append('file', files[0]);
		$.ajax({
			url : ctx + '/api/config/upload',
			type : 'POST',
			data : formData,
			processData : false,
			contentType : false,
			success : function(path) {
				$('.summernote_1').summernote('insertImage',
											path.msg);
				},
				error : function() {
					alert("上传失败");
				}
			});
		}
	}
});
```
 - 取值与赋值
```
//取值
var value = $('.summernote_1').summernote('code')
//赋值
$('.summernote_1').summernote('code', $("#goodsParam").val());

```
 
 
### 表格部分
 #### 初始页面带参查询
```
//$.table.init()中需加入queryParams: queryParams,
function queryParams(params) {
    var search = $.table.queryParams(params);
	search.orderType = 0;
	return search;
}
```
#### 树形表格
> 第一步：修改bootstrap-table为bootstrap-tree-table

> 第二步：修改options如下所示
```
//头部加入
  code: "groupUserId",
  parentCode: "groupUserPid",
  uniqueId: "groupUserId",
//columns参数中修改第一个值
 {
    field: 'selectItem',
    radio: true
 }
//尾部修改
 $.treeTable.init(options);
```
#### 表格中使用switch开关
```
  formatter: function (value, row, index) {
        return statusTools(row);
  }
  //申明方法
  function statusTools(row) {
        if (row.groupUserState == 0) {
            return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.groupUserId + '\')"></i> ';
        } else {
            return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.groupUserId + '\')"></i> ';
        }
    }
```

### 页面跳转与弹层
 - ruoyi原生的弹层
```
$.modal.open('修改图标', prefix + "/edit/"+shoptypeId, '800', '350');
```
 - layer页面弹层(避免出现确定按钮)
```
 layer.open({
	type: 2,
	skin: 'layui-layer-demo', //样式类名
	title: '订单详情',
	closeBtn: 0, //不显示关闭按钮
	anim: 2,
	area: ['973px', '600px'],
	shadeClose: true, //开启遮罩关闭
	content:prefix + "/detail/"+orderId,
	btn: ['关闭'],
	yes: function(index, layero){
		layer.close(index)
	}
});
```
 - 原生的询问框
```
$.modal.confirm("确认要通过审核吗？", function() {
	$.operate.post(prefix + "/edit", { "shopId": shopId, "shopState": 1 , "shopUid":shopUid});
})
```
 - layer询问框
```
layer.prompt({title: '确认要驳回该审核吗？请填写驳回意见', formType: 2}, function(text, index){
	layer.close(index);
	$.operate.post(prefix + "/edit", { "shopId": shopId, "shopState": 2,"shopAuditnotes": text});
});[link](https://note.youdao.com/)[link](https://note.youdao.com/)
```
- ruoyi原生的打开页面
> 页面代码
```
//打开时传参
function f1(shopId) {
    //控制器路径
	var urls = prefix + '/wxCommodityTypeList/'+shopId;
	createMenuItem(urls, "页面名称");
}
```
> 控制器代码
```
/**
 * 进入新页面列表
 */
@RequiresPermissions("wechat:wxCommodityType:view")
@GetMapping("/wxCommodityTypeList/{shopId}")
public String WxCommodityTypeList(@PathVariable("shopId") Integer shopId, ModelMap mmap)
{
	mmap.put("shopId", shopId);
	//页面路径
	return  "wechat/wxCommodityType/wxCommodityType";
}
```
> 加载页面参数
```
//此处用input标签接受参数
<input type="hidden"  th:value="*{shopId}"/>
```
 
>附件地址：(https://gitee.com/baigekeji/houduanuifujiancangku.git)