1

avue常用场景记录 - 邹琼俊

 2 years ago
source link: https://www.cnblogs.com/jiekzou/p/16719797.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

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

弹窗表单级联

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

413851-20220922161639110-589263532.png

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

自定义搜索

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

413851-20220922161229996-1251273544.png

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

 弹窗表单中字段间的交互

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

413851-20220922162156528-288964661.png413851-20220922162736247-1276744953.png

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。

413851-20220922163542119-1000445262.png

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

弹窗表单自定义验证

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

413851-20220922165134315-1641631998.png

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

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


report

Recommend

  • 8
    • Github github.com 7 years ago
    • Cache

    GitHub - nmxiaowei/avue

    README.md avue1.0发布了！！！欢迎点击演示地址体验 简体中文 欢迎加入QQ交流群，互相学习 前端avue交流群：606410437 后台微服务群：23754102 演示地址:http:/...

  • 61
    • www.cnblogs.com 6 years ago
    • Cache

    从.Net到Java学习第一篇 - 邹琼俊

  • 64
    • www.cnblogs.com 6 years ago
    • Cache

    从.Net到Java学习第四篇——spring boot+redis - 邹琼俊

  • 50
    • www.cnblogs.com 6 years ago
    • Cache

    这个月干啥去了？ - 邹琼俊

    又到了公司一年当中最忙的时刻了，为了赶项目，现在居然开启了996模式，这是我从业多年来第一次遇见的。 一转眼，一个月又过了，回头一看，这个月一篇文章都没有发，上个月忙着一个人做项目，项目忙完了还不忘发

  • 28
    • www.cnblogs.com 6 years ago
    • Cache

    犹豫了许久，还是写个年总结记录一下吧 - 邹琼俊

    旧的一年很快就过去，新的一年即将开始，年复一年，一个又一个的轮回。看到许多人都在写年终总结和新年计划了，回首自己过去这一年，感觉平平无奇，也没什么作为。惟稍作记录，聊以慰藉！我从来没有想过三十岁时会是

  • 26
    • studygolang.com 4 years ago
    • Cache

    常用镜像记录

    基础镜像 Scratch 空镜像，也是源镜像，本身镜像不占空间。 市场上所有的镜像都是基于它扩展的。使用它构建的镜像大小几乎和二进制文件本身一样大，适合运行一个包含所有依赖的二进制文件，如 Gola...

  • 5
    • segmentfault.com 3 years ago
    • Cache

    记录一些 IntelliJ IDEA 中的常用配置

    毋庸置疑 IntelliJ IDEA 已经成为 Java 开发最好用的开发工具，这篇文章主要记录自己使用 idea 开发过程中的一些常用配置，主要是根据自己的开发习惯进行的配置，记录这篇文章的目的是为了便于自己查询配置，并且希望对看这篇文章的小伙伴提供一些参考。

  • 7
    • www.hehuapei.com 3 years ago
    • Cache

    K8S 常用命令记录

    K8S 常用命令记录 Wiken 2021-07-30 (Updated: 2021-07-30) # 获取nod...

  • 6
    • www.hehuapei.com 3 years ago
    • Cache

    Docker 常用命令记录

    Docker 常用命令记录 Wiken 2021-07-30 (Updated: 2021-07-30) # 获取...

  • 7
    • www.cnblogs.com 2 years ago
    • Cache

    vue3项目，记录我是如何用1h实现产品预估1天工作量的界面需求 - 邹琼俊

    　　最近在编写前端界面，硬是一人一周时间加班加点写完了一个项目的前端界面（一级菜单有12个页面+一个控制台大屏，二三级界面有N个），之前预估前端界面的编写需要一个月，我是自己把自己卷死了（没有办法，项目经理说项目要1周写界面，2周发版，我这个项目前端只...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK