随记

基于jeecg前端框架的可编辑表格中弹窗数据报表控件的修改使用

微信公众号h5完成支付的前后端实现

基于jeecgboot前端框架制作。.env文件中加入变量定义：VUE_APP_MAP_KEY= 你的key项目中config文件夹中的index.js中增加一个变量，引用这个key//腾讯地图keywindow._CONFIG['qqMapKey'] = process.env.VUE_APP_MAP_KEYindex.html中增加腾讯地图的js文件引用<script src="https://map.qq.com/api/gljs?v=1.exp&key=<%=

首先，设置websocket可接收内容大小，默认的设置太小，前端截取的视频转字符串传不了，会报错：WebSocket is already in CLOSING or CLOSED state.百度后，找到的springboot下设置的方法，测试可以使用@Configurationpublic class WebSocketConfig implements ServletContextInitializer { /** * 注入ServerEndpointExporter，

setState(id,title,content,url,color){ let that = this this.$confirm({ title: title, content: h =>{ return h('div',{style:{color:color},domProps:{innerHTML:content}})}, okText: '是', cancelText: '否', onO

data() { return { height: '', } }, created() { window.addEventListener('resize', this.getHeight) this.getHeight() }, methods: { getHeight() { this.height = window.innerHeight - 200 +'px' }, }<div :style=

表单：<a-form-model ref="form" :model="form" layout="horizontal" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }"> <a-form-model-item label="论证结果" prop="lzResult" :rules="{required:true,message:'请选择结果'}">

完成了springboot+vue+onlyoffice的集成，实现用户上传文件，编辑文件的基本操作。后续将完成协作编辑，版本管理，文件加密，解密打开等相关操作。文件界面实例图：1、部署onlyoffice的dockerdocker run -i -t -d --name onlyoffice --privileged -p 9999:80 -p 5432:5432 --restart=always -v /e/publish/onlyoffice/DocumentServer/logs:/

基于jeecgboot开源框架，添加了flowable做工作流，KFormDesign做自定义表单设计。实现效果如图：新增表单预置数据配置功能，分四个数据类型:1、当前登录用户属性；2、数据字典；3、分类字典；4、Api地址，用其字段名称给表单控件/动态数据源命名，生成表单时解析出相应的命名控件，为其赋值、设置数据源。对KFormDesign进行的修改包含下列文件：KBatch/batch.vue 动态表格控件KBatch/module/KFormModelI

本例用于角色赋值权限，由于权限粒度到按钮，所以菜单没有设置父子关联，有些设置了子权限的，父级看不出来，需要在节点后边显示出来各级子菜单已设置的数量 getSelCount(data, node, parent) { if (!node.count) { node.count = 0 node.tmp = node.title node.scopedSlots = {title: 'custom'} }

试了几次，才搞定，记录一下<vxe-modal title="菜单" v-model="visible" resize :width="1200" :height="600" showFooter @confirm="handleSubmit" @close="handleCancel" :zIndex="9999"> <template v-slot> 。。。。 </te

<a-table rowKey="id" bordered :dataSource="dataSource" :columns="columns" :pagination="ipagination" :loading="loading" @change="handleTableChange"> <span slot="serial" slot-scope="text,record,index"&.

select 的数据是从后台获取的，用v-model做了绑定，获取数据后给绑定值设置了值，也实现了默认选择，但是却不能再选择了，始终都是设置的那个值，在绑定对象中加了设置初始值后才能正常选择<a-select v-model="queryParam.pcId" style="width:300px;"> <a-select-option v-for="p in pcData" :key="p.id" :value="p.id">{{p.pcName}}</a-selec

vue文件：<template> <div class="components-container"> <split-pane :min-percent='20' :default-percent='20' split="vertical"> <template slot="paneL"> <a-card> </a-card> </tem

<template> <a-layout :style="{height:height}"> <a-layout-sider :style="{overflow: 'auto',width:width,maxWidth:width,minWidth: width,height:'100%',background: '#fff'}"> <a-menu mode="horizontal"> <a-menu-

同一个组件，接收不同参数，得到不同结果，但是打开一次后，再次打开，地址是变化的，内容没变，组件被缓存重用了，需要监听route的变化来更新组件内容watch: { '$route'(to, from) { this.getData() } }并且在created中也使用更新组件方法 created() { this.getData() },这样在初次打开和以后再回到组件时，都会变化了...

从数据字典获取数据<j-dict-select-tag type="list" v-decorator="['ydyym']" :trigger-change="true" dictCode="XJYDYYM" placeholder="请选择"/>从表中获取，带排序：<j-dict-select-tag type="list" v-model="queryParam.njid" dictCode="xg_nj,n

在修改记录中的一个值时发现修改不了，该值在界面中使用的下拉框，设置了allowClear，在清空时其他控件值要跟着变动，清空触发不了select事件，就用了change事件，在change事件中用setFildsValue给下拉框设置了空字符串，结果提交后台时这个值成了undefined，mybatisplus更新策略是not-null，不更新值为null的字段，导致这个值无法更新，仔细查看文档，经多次尝试，发现了options.getValueFromEvent这个属性可以使用，代码如下 <a-s

原本checkboxgroup的选中值只是checkbox项里的值，无法加其他的值，变通了一下，加上了其他的值是在list中使用的，加上了list项中的属性值<a-list item-layout="horizontal" :data-source="dataSource"> <a-list-item slot="renderItem" slot-scope="item, index"> <a-list-item-meta>

控件代码：<template> <a-auto-complete :data-source="dataSource" :placeholder="placeholder" :filter-option="filterOption" @change="change" @select="select" allowClear v-model="selId" ref="auto" option-label-prop="t

数据中有 type 字段，需根据值取出显示项，customRender中用this访问不到data中定义的数组，将数组定义在script中就可以了<script> let liveTypes = []; export default { ... data() { return { innerColumns: [ ... { title: '类型', align: 'center',

<a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: s..

后端action ，参数使用了@RequestParam @PostMapping(value = "/addMy") public Result<?> addMy(@RequestParam String ids){ List<String> list =Arrays.asList(ids.split(",")); ... return Result.ok("已提交!"); }前端 封装的post方法：expor

尝试了多次，在customRender的函数中用不了this，用slot来代替解决了html:<a-table :columns="columns"> <span slot="serial" slot-scope="text,record,index"> {{(ipagination.current-1)*ipagination.pageSize+index+1}} </span> </a-tab

html： <a-checkbox v-decorator="['isValid',{valuePropName:'checked',initialValue:false}]"></a-checkbox>js：this.form.setFieldsValue({'isValid',true});用valuePropName加属性，设置初始值，在编辑中就能用setFieldsValue设置需要的值...

字段名为type , 数据库中为int型，前端获取到的也是数字，使用form.setFieldsValue设置值，结果一直显示为数字，不显示文字标题，设置值前将数字转换为字符串，可正确显示字段：<a-select v-decorator="[ 'type', validatorRules.type]" placeholder="请选择租户类型" :disabled="isEdit" >

学生基本信息管理操作中，有照片，可以上传也可以不上传，在表单界面可以修改照片，el-upload控件可以带额外参数提交，jquery的post模拟不了成表单带文件提交的方式，因此，判断如果有上传文件时，用el-upload的submit方法，没有文件时使用post提交页面部分： <el-form-item label-width="30px"> ...

<div id="app"> <el-table ref="tabletree" size="mini" :data="data" :height="tableheight" row-key="code" border v-load...

样式如图最上边是搜索条件与操作按钮，中间是查询结果表格，下边是分页，要在浏览器大小改变时控件可以折行，但是不能被其他层遮盖，需要动态计算header与表格的高度，footer的高度设置各固定值就可以@{ ViewBag.Title = "学生基本信息"; Layout = "~/Views/Shared/_vueLayout.cshtml";}<script sr...

后端返回的是一条一条的数据，前端需要在一行中显示三个记录，并且每列的排序号需要依次排table代码： <table class="t4" border="1" cellpadding="1" cellspacing="1" align="center" style="width:100%;"> <tr> ...

百度查出几个 this.$nextTick(function () { this.$refs.tabs.$children[0].$refs.tabs[2].style.display="none"; })开始时只用了 this.$refs.tabs.$children[0].$refs.tabs[2].style.display="n...

非单页结构，是在mvc视图中引用vue和elementui来使用的，打印el-table表格内容时，可能是因为样式的原因，打印的格式很难调整，在界面中增加一个隐藏的div，里面放个table，获取数据后填充table，打印这个table的内容，样式就好调整了。@{ViewBag.Title = "学生基本信息统计";Layout = "~/Views/Shared/_vueLayout.cs...

母版中：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title&...

项目使用springboot做后端开发，前端使用vue，ui部分使用了element和easyui结合，页面使用spring mvc的路由控制，js是写在jsp文件中的，没有使用vue的cli工具搭建单页面框架，是考虑到使用后端做权限控制只做一套就可以了，vue中的vuex和store用起来比较麻烦，没有专业的前端开发配合，不好搞。 先来个header.jsp的引用部分<%@ p...

Vue.component('grade-input', { data: function () { return { items: [], value: '', page: 1, rows: 50, timeout: null } ...

这个组件中使用了elementui的两个图标组件Js：/**工作区组件调用示例：<work-container v-bind:height="80"> <template v-slot:tbar> 查询表单 </template> <template v-slot:work&...

Vue.component('weiji-input', { model: { prop: 'wjlx', event:'selectweiji' }, props:['wjlx'], data: function () { return { }; }, computed:{ ...

子组件：Vue.component('term-combo', { model: { prop: 'term', event: 'selectterm' }, props: ['term', 'getall', 'defaultall'], data: function () { return { ...

通过一些代码过滤验证，与前端使用交互token实现限制访问端，避免使用非正常工具访问，应可满足一些等保需求。控制器代码： /// <summary> /// 所有方法只支持post方式 /// </summary> public class StunController : BaseController { #reg...

watch: { 'formkc.courseid': { handler: function (newVal, oldVal) { if (this.formkc.courseid) { if (this.$refs.course) { ...