jeecg-boot 開源代碼 讀碼

前端

 

 

 

 

 

 TableExpandeSub.vue  是當前內嵌table 主頁  里邊的create  還有導入 導出 增加是在jeecglistminxin.js 內  官網說為了簡便代碼

先看主頁新增功能

<div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>

點擊進入

handleAdd 函數 在本頁未定義  在

D:\demo\jeecg-boot\ant-design-vue-jeecg\src\mixins\JeecgListMixin.js

JeecgListMixin.js  中定義了 

handleAdd: function () {
      this.$refs.modalForm.add();   //
      this.$refs.modalForm.title = "新增";
      this.$refs.modalForm.disableSubmit = false;
    },

this.$refs 是什么鬼? 

ref 有三種用法：

　　1、ref 加在普通的元素上，用this.ref.name 獲取到的是dom元素

　　2、ref 加在子組件上，用this.ref.name 獲取到的是組件實例，可以使用組件的所有方法。

　　3、如何利用 v-for 和 ref 獲取一組數組或者dom 節點

主頁下 那個ref 標簽  意思是頁面加載完之后就可以用這個表單區域內代表頁面的內定義的值了 如下邊則是
JeecgOrderDMainModal.vue 這個編輯 添加頁的

 <!-- 表單區域 -->
    <jeecgOrderDMain-modal ref="modalForm" @ok="modalFormOk"></jeecgOrderDMain-modal>

回到上邊 

 

 add() 實際調用的

JeecgOrderDMainModal.vue 這個 增加 修改 跳出框的頁面的內容
add()內容為空 給edit函數傳空

   methods: {
      add() {
        this.edit({});
      },
      edit(record) {
        this.form.resetFields();  // 最終在是框架庫中的方法
        this.orderMainModel = Object.assign({}, record);
        //初始化明細表數據
        console.log(this.orderMainModel.id)
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.orderMainModel, 'orderCode', 'ctype', 'orderMoney', 'content'))
          this.form.setFieldsValue({orderDate: this.orderMainModel.orderDate ? moment(this.orderMainModel.orderDate) : null}) //時間格式化
        });
        console.log(this.orderMainModel)
      },

上邊 this.form.resetFields();  // 是如何調用的呢

JeecgOrderDMainModal.vue 內data 中定義的變量綁定了

form: this.$form.createForm(this), 算是新生成對象賦值給form 了

我們看一下

this.$form.createForm(this) 

 這個是ant-design-vue UI組件里面的form組件，創建form實例的方法

https://www.antdv.com/components/form-cn/ 

方法	說明	類型
getFieldDecorator	用於和表單進行雙向綁定，單文件 template 可以使用指令v-decorator進行綁定，詳見下方描述
getFieldError	獲取某個輸入控件的 Error	Function(name)
getFieldsError	獲取一組輸入控件的 Error ，如不傳入參數，則獲取全部組件的 Error	Function([names: string[]])
getFieldsValue	獲取一組輸入控件的值，如不傳入參數，則獲取全部組件的值	Function([fieldNames: string[]])
getFieldValue	獲取一個輸入控件的值	Function(fieldName: string)
isFieldsTouched	判斷是否任一輸入控件經歷過 getFieldDecorator 或 v-decorator 的值收集時機 options.trigger	(names?: string[]) => boolean
isFieldTouched	判斷一個輸入控件是否經歷過 getFieldDecorator 或 v-decorator 的值收集時機 options.trigger	(name: string) => boolean
isFieldValidating	判斷一個輸入控件是否在校驗狀態	Function(name)
resetFields	重置一組輸入控件的值（為 initialValue）與狀態，如不傳入參數，則重置所有組件	Function([names: string[]])
setFields	設置一組輸入控件的值與錯誤狀態。	Function({ [fieldName]: { value: any, errors: [Error] } })
setFieldsValue	設置一組輸入控件的值	Function({ [fieldName]: value })
validateFields	校驗並獲取一組輸入域的值與 Error，若 fieldNames 參數為空，則校驗全部組件	Function([fieldNames: string[]], [options: object], callback: Function(errors, values))
validateFieldsAndScroll	與 validateFields 相似，但校驗完后，如果校驗不通過的菜單域不在可見范圍內，則自動滾動進可見范圍	參考 validateFields

 

 this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.orderMainModel, 'orderCode', 'ctype', 'orderMoney', 'content'))
          this.form.setFieldsValue({orderDate: this.orderMainModel.orderDate ? moment(this.orderMainModel.orderDate) : null}) //時間格式化
        });