avue常用場景記錄

来源:https://www.cnblogs.com/jiekzou/archive/2022/09/22/16719797.html
-Advertisement-
Play Games

接手的一個項目使用的是avue這個傻瓜式的專門給後端人員用的框架,文檔不夠友好,使用起來各種蛋疼(咱專業前端基本上不使用)。為此,專門記錄一下。當前avue版本2.8.12,如果要切換avue的版本,可以去https://cdn.jsdelivr.net/npm/@smallwei/[email protected] ...


  接手的一個項目使用的是avue這個傻瓜式的專門給後端人員用的框架,文檔不夠友好,使用起來各種蛋疼(咱專業前端基本上不使用)。為此,專門記錄一下。當前avue版本2.8.12,如果要切換avue的版本,可以去https://cdn.jsdelivr.net/npm/@smallwei/[email protected]/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')
}

後面後再不斷補充.......

博客地址:http://www.cnblogs.com/jiekzou/
博客版權:本文以學習、研究和分享為主,歡迎轉載,但必須在文章頁面明顯位置給出原文連接。
如果文中有不妥或者錯誤的地方還望高手的你指出,以免誤人子弟。如果覺得本文對你有所幫助不如【推薦】一下!如果你有更好的建議,不如留言一起討論,共同進步!
再次感謝您耐心的讀完本篇文章。
其它: .net-QQ群4:612347965 java-QQ群:805741535 H5-QQ群:773766020
我的拙作《ASP.NET MVC企業級實戰》《H5+移動應用實戰開發》 《Vue.js 2.x實踐指南》 《JavaScript實用教程 》 《Node+MongoDB+React 項目實戰開發》 已經出版,希望大家多多支持!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前記 (可跳過這段來自本up的羅里吧嗦。。。) 在做上一個項目的時候,需要用到本地資料庫,以前做公司項目用的是輕量級資料庫Realm,做自己小項目用的是greenDAO,大學學的是SQL server,但是在flutter中,相關插件用的資料庫是SQLite(sqflite插件),但本人還沒接觸過S ...
  • 7月28日,在袋鼠雲2022產品發佈會上,袋鼠雲技術負責人思樞正式宣佈旗下產品「大數據基礎平臺EasyMR」發佈。 EasyMR是袋鼠雲自研的大數據基礎平臺,提供Hadoop、Hive、Spark、Trino、HBase、Kafka等組件,完全相容Apache開源生態;支持企業級安全管控,一鍵開啟L ...
  • 日常開發我們對一條DML語句較為熟悉,很多開發人員都瞭解sql的執行過程,比較熟悉,但是DDL是如何執行的呢,大部分開發人員可能不太關心,也認為沒必要瞭解,都交給DBA吧。 其實不然,瞭解一些能儘量避開一些ddl的坑,那麼下麵帶大家一起瞭解一下DDL執行的方式,。 ...
  • 2022-09-22 (4)set操作 ①添加操作(sadd): 例: sadd student A B ②查看操作(smembers):例: smembers student ③移除操作(srem):例: srem student A (5)zset(有序集合而且裡面的元素是不能重覆的)操作 ①添 ...
  • 最新版Other問題,請查看我最近的一片文章 我主要開發小型應用,周期較短,提審較頻,使用帳號也多,正常申請的三方購買的都有使用。提審時經常會遇到這樣那樣的問題,單獨說other-other,也曾遇到過不下10次,我將會導致出現這個問題的原因分為幾類: 1、帳號問題: 大概半年前的那段時間蘋果對帳號 ...
  • AU上傳ipa出現下圖紅框提示說明成功上傳,如果App Store後臺沒有出現構建版本, 請登錄 apple賬號對應的郵箱查看反饋,特別留意垃圾郵箱,無論成功還是失敗,apple都會發郵件 一、首先登錄iTunes Connect 後臺、查看ipa構建情況 https://appstoreconne ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 async await 語法是 ES7出現的,是基於ES6的 promise和generator實現的 generator函數 在之前我專門講個generator的使用與原理實現,大家沒瞭解過的可以先看那個手寫generator核心 ...
  • Common JS 是模塊化規範之一。每個文件都是一個作用域,文件裡面定義的變數/函數都是私有的,對其他模塊不可見。Common JS 規範在 Node 端和瀏覽器端有不同的實現。 ...
一周排行
    -Advertisement-
    Play Games
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...