avue常用场景记录

时间：2022-09-24 00:53:44

　　接手的一个项目使用的是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')
}

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

相关文章