avue常用场景记录

  • avue常用场景记录已关闭评论
  • 188 次浏览
  • A+
所属分类:Web前端
摘要

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

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

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

弹窗表单级联

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

avue常用场景记录

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           };         });       }     },

自定义搜索

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

avue常用场景记录

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

 弹窗表单中字段间的交互

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

avue常用场景记录avue常用场景记录

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。

avue常用场景记录

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();     },

弹窗表单自定义验证

 需求,需要验证所选的日期范围是自然周,还是在一个月内,或者是一个月内的自然周内。

avue常用场景记录

 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') }

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