接手的一个项目使用的是avue这个傻瓜式的专门给后端人员用的框架,文档不够友好,使用起来各种蛋疼(咱专业前端基本上不使用)。为此,专门记录一下。当前avue版本2.8.12,如果要切换avue的版本,可以去https://cdn.jsdelivr.net/npm/@smallwei/avue@2.8.12/lib/这个地址去选择自己要的版本,然后进行下载,我这里是通过cdn的方式引用的。

  avue官网地址:https://www.avuejs.com/

弹窗表单级联

先选择来源系统,根据所选择的来源系统,自动加载来源表,如下图所示:

js代码如下:

 {
label: this.$t("sourceDatasource"),
prop: "sourceDatasource",
type: "select",
clearable: false,
dicData: [],
cascaderItem: ["sourceTable"],
// dicUrl: `/emptech-middle/dataSource/list`,
// dicQuery: { current: 1, size: 100 , descs: "create_time",dsType:"ORACLE"},
// props: {
// label: "dsName",
// value: "id"
// },
// dicFormatter: res => {
// return res.data.records; //返回字典的层级结构
// },
span: 24,
rules: [
{
required: true,
message: this.$t("sourceSysMessage"),
trigger: "blur"
}
]
},
{
label: this.$t("sourceTable"),
prop: "sourceTable",
type: "select",
clearable: false,
dicFlag: false,
dicUrl:
"/emptech-middle/dataTable/getTablesByDataBase?dsId={{key}}",
props: {
label: "tableName",
value: "tableName"
},
search: true,
searchslot: true, //使用插槽
span: 24,
rules: [
{
required: true,
message: this.$t("sourceTbMessage"),
trigger: "blur"
}
]
},

级联这里,第一个字段要配置cascaderItem属性,指定要关联的字段,然后被关联的字段,属性要配置dicFlag: false,否则界面第一次加载时,被关联的字典接口就会自动请求一次。

需要主意的是,如果sourceDatasource配置为dicUrl加载字典的方式,每次界面加载的时候,会调用这个字典接口两次,所以可以采用dicData: []的形式,在mounted中获取字典数据,然后给字典数据赋值的方式,如下代码所示:

  async mounted() {//添加字典
await this.initDictData();
let sourceSysColumn = this.findObject(
this.option.column,
"sourceDatasource"
);
sourceSysColumn.dicData = this.sourceSysDicData;
},
methods: {
//初始化字典数据
async initDictData() {
let res = await getDataSourceList(1, 100, {
descs: "create_time",
dsType: "ORACLE"
});
if (res.data.code == 200) {
this.sourceSysDicData = res.data.data.records.map(m => {
return {
value: m.id,
label: m.dsName
};
});
}
},

自定义搜索

如下图所示,原表是一个下拉框字典,搜索的时候,需要是一个文本框模糊搜索:

js代码如下:

 {
label: this.$t("sourceTable"),
prop: "sourceTable",
type: "select",
clearable: false,
dicFlag: false,
dicUrl:
"/emptech-middle/dataTable/getTablesByDataBase?dsId={{key}}",
props: {
label: "tableName",
value: "tableName"
},
search: true,
searchslot: true, //使用插槽
span: 24,
rules: [
{
required: true,
message: this.$t("sourceTbMessage"),
trigger: "blur"
}
]
},

html代码如下:

    <avue-crud
:search.sync="query"
:option="option"
:table-loading="loading"
:data="tbData"
ref="crud"
v-model="form"
:permission="permissionList"
:before-open="beforeOpen"
:before-close="beforeClose"
@row-del="rowDel"
@row-update="rowUpdate"
@row-save="rowSave"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
@on-load="onLoad"
:page.sync="page"
>
<template slot-scope="scope" slot="sourceTableSearch">
<el-input
:placeholder="$t('sourceTbSearchPlaceholder')"
:size="size"
col="6"
v-model="query.sourceTable"
></el-input>
</template>

通过插槽,插槽名字为字段名称+Search,此处为sourceTableSearch

弹窗表单中字段间的交互

如下图所示,当最大可同步范围选择“自然月”时,下面展示是否支持跨周,否则不展示:

js代码:

          {
label: this.$t("taskManage.maxSynchronizedRange"),
prop: "maxSyncType",
type: "select",
hide: true,
span: 24,
value: "1", //默认值,自然周
clearable: false,
rules: [
{
required: true,
message: this.$t("taskManage.maxSynchronizedRangeMessage"),
trigger: "blur"
}
],
dicData: [],
// dicUrl:
// "/emptech-system/dict-biz/dictionary?code=data_sync_max_scope_type",
// props: {
// label: "dictValue",
// value: "dictKey"
// },
control: (val, form) => {
console.log("数据", val);
if (val == 2) {
//自然月
return {
isCrossWeek: {
display: true
}
};
} else {
return {
isCrossWeek: {
display: false
}
};
}
}
},
{
label: this.$t("taskManage.isCrossWeek"),
prop: "isCrossWeek",
type: "radio",
value: "1", //默认值,是
viewDisabled: true,
dicUrl:
"/emptech-system/dict-biz/dictionary?code=data_sync_is_cross_week",
props: {
label: "dictValue",
value: "dictKey"
},
hide: true,
span: 24
},

html代码如下所示:

 <template slot-scope="{ row, disabled }" slot="maxSyncTypeForm">
<div class="form-row">
<avue-select
v-model="form.maxSyncType"
:clearable="false"
type="select"
:dic="maxSyncTypeDicData"
:disabled="disabled"
></avue-select>
<el-tooltip placement="right-start">
<div slot="content">
自然周内:如2022年8月1日到2022年8月7日为一个自然周,自然周内则表示可选时间范围为在8月1日到8月7日之间;
<br />
自然月内:如2022年8月为一个自然月,自然月内则表示可选时间范围为<=8月自然月天数。
</div>
<i class="el-icon-question icon"></i>
</el-tooltip>
</div>
</template>

在最大可同步范围字段中可以配置control方法来控制其它字段的隐藏或者显示,当然也可以通过watch的方式,后面会说到。

自定义日期时间范围搜索条件

需求如下图所示,这个执行时间范围只是一个搜索条件,并不会在表格中进行展示,日期时间范围组件默认显示当前时间+00:00:00 到当前时间23:59:59,选择其它日期时,起止时间的时分秒的范围也默认是00:00:00到23:59:59。

js代码如下:

          {
label: this.$t("executingTimeRange"),
prop: "executingTimeRange",
type: "datetimerange",
format: "yyyy-MM-dd HH:mm:ss",
valueFormat: "yyyy-MM-dd HH:mm:ss",
hide: true,
display: false,
search: true,
searchSpan: 5,
searchslot: true, //使用插槽
searchRange: true,
span: 24,
searchSpan: 8
},

html代码:

      <!-- 自定义搜索卡槽 -->
<template slot="executingTimeRangeSearch" slot-scope="scope">
<el-date-picker
style="width:360px"
v-model="executingTimeRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
:default-time="['00:00:00', '23:59:59']"
>
</el-date-picker>
</template>

data代码:

      executingTimeRange: [getCurTimeStart(), getCurTimeEnd()], //执行时间范围

查询代码需要改造:

    //查询
searchChange(params, done) {
if (this.executingTimeRange&&this.executingTimeRange.length == 2) {
params.startExecuteTime = getStrToDatetime(this.executingTimeRange[0]);
params.endExecuteTime = getStrToDatetime(this.executingTimeRange[1]);
}
this.page.currentPage = 1;
this.query = params;
this.onLoad(this.page, params);
done();
},

弹窗表单自定义验证

运行

js代码如下:

    //新增
rowSave(row, done, loading) {
console.log("新增", row);
let flag = this.dataValidate(row);
if (!flag) {
loading();
return;
}
// retrun;
let item = this.createItem(row);
add(item).then(
res => {
this.$message({
type: "success",
message: this.$t("successMessage")
});
// 数据回调进行刷新
this.onLoad(this.page);
done();
},
error => {
window.console.log(error);
loading();
}
);
},
//数据校验
dataValidate(row) {
console.log("查询", row, this.query);
let dateRange = row.dateRange;
if (dateRange.length < 2) {
this.$message({
message: "请选择日期范围",
type: "warning"
});
return false;
}
let res = true;
let message = "";
if (this.maxSynchronizedRange == MAXSYNCRANGE.week) {
//周
res = isSameWeek(dateRange);
message = "选择的日期范围必须是在同一周内";
} else {
//月
if (this.isCrossWeek == 0) {
//不跨周
res = isSameMonthNoCrossWeek(dateRange);
message = "选择的日期范围必须是在同一月同一周内";
} else {
//跨周
res = isSameMonth(dateRange);
message = "选择的日期范围必须是在同一月内";
}
}if (res == false) {
this.$message({
message: message,
type: "warning"
});
}
return res;
},

注意这个loading()是关闭按钮的loading的意思。done()方法是关闭弹窗的意思。

文档中没有说明的一些隐藏属性

column中

hide:不在表格列表中显示。

用到的一些日期相关的方法

日期处理使用的是moment.js,网址:http://momentjs.cn/

/*
*判断是否在同一个星期里
*dateArr:时间字符串数组
*return:true/false
*/
export function isSameWeek(dateArr) {
return moment(dateArr[0]).isSame(dateArr[1], 'week');
}
/*
*判断是否在同一个月
*dateArr:时间字符串数组
*return:true/false
*/
export function isSameMonth(dateArr) {
return moment(dateArr[0]).isSame(dateArr[1], 'month');
}
/**
* 判断是否在一个月内,且不跨周
* @param {*} dataArr
*/
export function isSameMonthNoCrossWeek(dateArr) {
let start = moment(dateArr[0]).isoWeekday();
let end = moment(dateArr[1]).isoWeekday(); let startDay = moment(dateArr[0]).dayOfYear();
let endDay = moment(dateArr[1]).dayOfYear(); let sameMonth = isSameMonth(dateArr);
let sameWeek = (endDay - startDay < 7) && (start <= end);
return sameMonth && sameWeek; //同月同周
}
/**
* 获取当天开始时间
* @returns
*/
export function getCurTimeStart() {
return moment(moment().format('YYYY-MM-DD') + ' 00:00:00').toDate();
}
/**
* 获取当天结束时间
* @returns
*/
export function getCurTimeEnd() {
return moment(moment().format('YYYY-MM-DD') + ' 23:59:59').toDate();
}
/**
* 字符串
* @param str
* @returns
*/
export function getStrToDatetime(str) {
return moment(str).format('YYYY-MM-DD HH:mm:ss')
}

后面后再不断补充.......

avue常用场景记录的更多相关文章

  1. Git——常用场景解析

    总结:本篇文章从初识GitHub.Git,实践GitHub的五种常用场景,分别是:git for windows安装,git配置,克隆远程代码到本地,上传本地代码到远程以及Git的常用指令.相信Jam ...

  2. git常用操作记录

    之前的多人项目大多使用了SVN作为版本控制,自己只会用eclipse连接GitHub的操作.这次项目采用了git作为版本控制系统,所以学会了很多新操作,这里权当记录,以备后用. git的一些基本操作可 ...

  3. WPF DataGrid常用属性记录

    WPF DataGrid常用属性记录 组件常用方法: BeginEdit:使DataGrid进入编辑状态. CancelEdit:取消DataGrid的编辑状态. CollapseRowGroup:闭 ...

  4. android布局常用属性记录

    android布局常用属性记录   http://blog.csdn.net/xn4545945/article/details/7717086这里有一部分别人总结的其余的: align:对齐 par ...

  5. Hbase常用操作记录

    Hbase常用操作记录 Hbase 创建表 查看表结构 修改表结构 删除表 创建表 语法:create <table>, {NAME => <family>, VERSI ...

  6. 转 My97日历控件常用功能记录

    My97相信大家都不陌生,应该是我所见过的最强大的一个日历控件了,最近的项目中也比较多地用到了此控件,而且项目中经常会有不同时间范围的需求,在此列出一些比较常用的日期范围格式的设置,尽管在My97的官 ...

  7. git常用命令常用场景

    在使用git之前,一直用的是svn版本管理:与svn最大不同的是,git有两个仓库,一个是本地仓库,一个是服务器上共享的仓库:本地仓库是每个开发者自己独有的,即使commit提交也只是提交到本地仓库: ...

  8. Intent 常用场景 FileProvider 拍照 裁剪 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  9. 前端常用功能记录(二)—datatables表格(转)

    前端常用功能记录(二)—datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是 ...

  10. MVC中验证码的实现(经常用,记录备用)

    一.目录 1.多层架构+MVC+EF+AUTOFAC+AUTOMAPPER: 2.MVC中验证码的实现(经常用,记录备用) 3.Ligerui首页的快速搭建 二 正文 Ok,我们的验证码开始,这篇文章 ...

随机推荐

  1. 删除github账号的方法

    如果你不想使用自己的github账号了,github官网允许你删除账号,具体操作步骤为: 1.登录github网站,网站右上角的头像,在下拉菜单中选择"Settings"(设置): ...

  2. 第四章——SQLServer2008-2012资源及性能监控(3)

    原文:第四章--SQLServer2008-2012资源及性能监控(3) 本文为本系列最后一章,监控内存使用.监控服务器的内存是非常重要的事情,有很多情况会引起内存消耗.所以要经常性地做检查. 本文将 ...

  3. 爬楼梯问题-斐波那契序列的应用.md

    N 阶楼梯,一次可以爬1.2.3...n步,求爬楼梯的种类数 /** * 斐波那契序列 */ public class ClimbingStairs { // Sol 1: 递归 // 递归 公式:F ...

  4. jq交叉淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 移动端H5地图矢量SHP网格切分打包方案

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 与离线瓦片方案一样,同样是为了解决移动端网速和流量问题,但是却 ...

  6. eclipse maven 构建简单springmvc项目

    环境:eclipse Version: Oxygen.3a Release (4.7.3a) 创建maven Project项目,目录结构 修改工程的相关编译属性 修改pop.xml,引入spring ...

  7. 痞子衡嵌入式:飞思卡尔i.MX RT系列MCU开发那些事 - 索引

    大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是飞思卡尔i.MX RT系列微控制器相关知识. 飞思卡尔半导体(现恩智浦半导体)于2017年开始推出的i.MX RT系列开启了高性能MC ...

  8. 关于C语言学习的一些感想(初学者)

    C语言是一门通用计算机编程语言,广泛应用于底层开发.C语言的设计目标是提供一种能以简易的方式编译.处理低级存储器.产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言. 尽管C语言提供了许多低 ...

  9. Positioning

      boxPostion.html <html><head> <title>Box Position</title><meta charset=& ...

  10. 【python27】猜随机数的小游戏

    游戏规则: 猜一个随机数,如果猜对了就给出相应的猜成功提示语(自定义文字),如果猜大或者是猜小了,给出对应的提示,但总的猜次数为三次,每猜错一次重新猜时,给用户提示所剩余的猜次数 实现如下: # -* ...