@idooel/components 0.0.2-beta.26 → 0.0.2-beta.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idooel/components",
-  "version": "0.0.2-beta.26",
+  "version": "0.0.2-beta.28",
   "description": "",
   "private": false,
   "main": "dist/@idooel/components.umd.js",

package/packages/composite-components/modal-form/src/index.vue

@@ -211,9 +211,9 @@ export default {
     validateFields () {
       return this.$refs[this.formRef].validateFields()
     },
-    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
+    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
       if (this.globalDisabled) return
-      const status = this.$refs[this.formRef].validateFields()
+      const status = await this.$refs[this.formRef].validateFields()
       if (status) {
         //TODO fieldMap
         return this.submitRequestTrigger(props)

package/packages/form/src/index.vue

@@ -3,37 +3,37 @@
     <a-form :form="form" layout="vertical" class="ant-advanced-search-form">
       <a-row :gutter="24">
         <template v-for="ele in elements">
-          <a-col v-if="executeExpression(ele._show)" :span="ele.span" :key="ele.name">
+          <a-col v-if="ele._show" :span="ele.span" :key="`${ele.name}_${ele._rulesVersion || 0}`">
             <template v-if="ele.type == 'ele-input' || ele.type == 'Input'">
-              <a-form-item :label="`${ele.label}：`">
+              <a-form-item :label="`${ele.label}：`" :required="ele._required">
                 <ele-input 
                   @change="onChange($event, ele)" 
-                  :disabled="executeExpression(ele._disabled)" 
+                  :disabled="ele._disabled" 
                   :max-length="ele.maxLength" 
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele) }]" 
                   style="width:100%;">
                 </ele-input>
               </a-form-item>
             </template>
             <template v-else-if="ele.type == 'ele-textarea' || ele.type == 'Textarea'">
-              <a-form-item :label="`${ele.label}：`">
+              <a-form-item :label="`${ele.label}：`" :required="ele._required">
                 <ele-textarea 
                   @change="onChange($event, ele)"
                   :max-length="ele.maxLength"
                   :autosize="ele.autosize"
-                  :disabled="executeExpression(ele._disabled)"
+                  :disabled="ele._disabled"
                   :allow-clear="ele.allowClear"
                   :placeholder="ele.placeholder"
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]"
+                  v-decorator="[ele.name, { rules: rebuildRules(ele) }]"
                   style="width:100%;">
                 </ele-textarea>
               </a-form-item>
             </template>
             <template v-else-if="ele.type == 'ele-select' || ele.type == 'Select'">
-              <a-form-item :label="`${ele.label}：`">
+              <a-form-item :label="`${ele.label}：`" :required="ele._required">
                 <ele-select 
                   :data-source="ele.optionList" 
-                  :disabled="executeExpression(ele._disabled)"
+                  :disabled="ele._disabled"
                   :multiple="ele.multiple"
                   :mode="ele.mode"
                   :code="ele.code"
@@ -41,14 +41,14 @@
                   :url="ele.url"
                   :params="ele.params" 
                   @change="onChange($event, ele)"
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele) }]" 
                   style="width:100%;">
                 </ele-select>
               </a-form-item>
             </template>
             <template v-else-if="ele.type == 'ele-upload'">
-              <a-form-item :label="`${ele.label}：`">
-                <ele-upload v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+              <a-form-item :label="`${ele.label}：`" :required="ele._required">
+                <ele-upload v-decorator="[ele.name, { rules: rebuildRules(ele) }]" 
                   :ext="ele.ext"
                   :multiple="ele.multiple"
                   :accept="ele.accept"
@@ -62,71 +62,71 @@
               </a-form-item>
             </template>
             <template v-else-if="ele.type == 'ele-date-range'">
-              <a-form-item :label="`${ele.label}：`">
+              <a-form-item :label="`${ele.label}：`" :required="ele._required">
                 <ele-date-range 
-                :disabled="executeExpression(ele._disabled)" 
-                v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                :disabled="ele._disabled" 
+                v-decorator="[ele.name, { rules: rebuildRules(ele) }]" 
                 style="width:100%;">
               </ele-date-range>
               </a-form-item>
             </template>
             <template v-else-if="ele.type == 'ele-date'">
-              <a-form-item :label="`${ele.label}：`">
+              <a-form-item :label="`${ele.label}：`" :required="ele._required">
                 <ele-date
                   :format="ele.format"
                   :mode="ele.mode"
                   :show-time="ele.showTime"
                   :show-today="ele.showToday"
                   :value-format="ele.valueFormat"
-                  :disabled="executeExpression(ele._disabled)" 
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  :disabled="ele._disabled" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele) }]" 
                   style="width:100%;">
                 </ele-date>
               </a-form-item>
             </template>
             <template v-else-if="ele.type == 'ele-select-entity' || ele.type == 'SelectEntity'">
-              <a-form-item :label="`${ele.label}：`">
+              <a-form-item :label="`${ele.label}：`" :required="ele._required">
                 <ele-select-entity 
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele) }]" 
                   style="width:100%;">
                 </ele-select-entity>
               </a-form-item>
             </template>
             <template v-else-if="ele.type == 'InputNumber' || ele.type == 'ele-input-number'">
-              <a-form-item :label="`${ele.label}：`">
+              <a-form-item :label="`${ele.label}：`" :required="ele._required">
                 <ele-input-number 
                   @change="onChange($event, ele)" 
                   :precision="ele.precision" 
-                  :disabled="executeExpression(ele._disabled)" 
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  :disabled="ele._disabled" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele) }]" 
                   v-bind="ele.props" 
                   style="width:100%;">
                 </ele-input-number>
               </a-form-item>
             </template>
             <template v-else-if="ele.type == 'ele-Checkbox' || ele.type == 'Checkbox'">
-              <a-form-item :label="`${ele.label}：`">
+              <a-form-item :label="`${ele.label}：`" :required="ele._required">
                 <ele-checkbox 
                   :data-source="ele.optionList" 
-                  :disabled="executeExpression(ele._disabled)" 
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  :disabled="ele._disabled" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele) }]" 
                   style="width:100%;">
                 </ele-checkbox>
               </a-form-item>
             </template>
             <template v-else-if="ele.type == 'ele-radio' || ele.type == 'Radio'">
-              <a-form-item :label="`${ele.label}：`">
+              <a-form-item :label="`${ele.label}：`" :required="ele._required">
                 <ele-radio 
                   @change="onChange($event, ele)" 
-                  :disabled="executeExpression(ele._disabled)" 
+                  :disabled="ele._disabled" 
                   :data-source="ele.optionList" 
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele) }]" 
                   style="width:100%;">
                 </ele-radio>
               </a-form-item>
             </template>
             <template v-else-if="ele.type == 'ele-form-img-crop'">
-              <a-form-item :label="`${ele.label}：`">
+              <a-form-item :label="`${ele.label}：`" :required="ele._required">
                 <ele-form-img-crop
                   @change="onChange($event, ele)"
                   :width="ele.width"
@@ -135,30 +135,30 @@
                   :cropper-config="ele.cropperConfig"
                   :uploadFileConfig="ele.uploadFileConfig"
                   :oper-text="ele.operText"
-                  :disabled="executeExpression(ele._disabled)" 
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  :disabled="ele._disabled" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele) }]" 
                   style="width:100%;">
                 </ele-form-img-crop>
               </a-form-item>
             </template>
             <template v-else-if="ele.type == 'ele-tree-select'">
-              <a-form-item :label="`${ele.label}：`">
+              <a-form-item :label="`${ele.label}：`" :required="ele._required">
                 <ele-tree-select
                   @change="onChange($event, ele)"
-                  :disabled="executeExpression(ele._disabled)"
+                  :disabled="ele._disabled"
                   v-bind="ele.meta"
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele) }]" 
                   style="width:100%;">
                 </ele-tree-select>
               </a-form-item>
             </template>
             <template v-else-if="ele.type == 'ele-select-entity-modal-table'">
-              <a-form-item :label="`${ele.label}：`">
+              <a-form-item :label="`${ele.label}：`" :required="ele._required">
                 <ele-select-entity-modal-table
                   @change="onChange($event, ele)"
-                  :disabled="executeExpression(ele._disabled)"
+                  :disabled="ele._disabled"
                   v-bind="ele.meta"
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele) }]" 
                   style="width:100%;">
                 </ele-select-entity-modal-table>
               </a-form-item>
@@ -228,6 +228,7 @@ export default {
   methods: {
     onFieldsChange () {
       this.executeOptionListExpression()
+      this.dispatchExpression()
     },
     executeOptionListExpression () {
       this.elements.forEach(ele => {
@@ -253,20 +254,69 @@ export default {
       this.formModel = props
       this.dispatchExpression()
     },
-    rebuildRules (rules = []) {
-      //TODO
-      rules.map(rule => {
-        const { validator } = rule
+    rebuildRules (ele) {
+      const { rules = [] } = ele
+      const nextRules = rules.map(rule => {
+        const nextRule = { ...rule }
+        const { validator, required } = nextRule
+        // 支持 validator 函数
         if (validator) {
-          validator.formModel = this.getFieldsValue()
-          validator.exposed = this.exposedMethods
+          nextRule.validator = (rule, value, cb) => {
+            validator.formModel = this.getFieldsValue()
+            validator.exposed = this.exposedMethods
+            return validator(rule, value, cb)
+          }
+        }
+        // 支持 rules 内部的 required 表达式
+        if (required !== undefined && type.isStr(required)) {
+          nextRule.required = this.executeExpression(required)
         }
+        return nextRule
       })
-      return rules
+      // 支持顶层 required 表达式（优先级高于 rules 内部）
+      const { required } = ele
+      if (required !== undefined) {
+        const isRequired = this.executeExpression(required)
+        const hasRequiredRule = nextRules.some(r => Object.keys(r).includes('required'))
+        if (!hasRequiredRule) {
+          nextRules.unshift({ required: isRequired, message: `${ele.label}是必填项` })
+        } else {
+          nextRules.forEach(r => {
+            if (Object.keys(r).includes('required')) {
+              r.required = isRequired
+            }
+          })
+        }
+      }
+      return nextRules
     },
     dispatchExpression () {
       this.evalDisabledExpression()
       this.evalShowExpression()
+      this.evalRequiredExpression()
+    },
+    evalRequiredExpression () {
+      this.elements.forEach(ele => {
+        // 优先使用顶层 required 表达式
+        let requiredExpr = ele.required
+        // 如果顶层没有，则从 rules 中查找
+        if (requiredExpr === undefined && ele.rules) {
+          const requiredRule = ele.rules.find(r => r.required !== undefined)
+          if (requiredRule) {
+            requiredExpr = requiredRule.required
+          }
+        }
+        if (requiredExpr !== undefined) {
+          const ret = this.executeExpression(requiredExpr)
+          const oldRequired = ele._required
+          this.$set(ele, '_required', ret)
+          // 初始化或状态变化时更新版本号，强制组件重新渲染
+          if (oldRequired === undefined || oldRequired !== ret) {
+            const currentVersion = ele._rulesVersion || 0
+            this.$set(ele, '_rulesVersion', currentVersion + 1)
+          }
+        }
+      })
     },
     evalDisabledExpression () {
       this.elements.forEach(ele => {
@@ -286,7 +336,8 @@ export default {
     executeExpression (expression) {
       if (type.isBool(expression)) return expression
       if (type.isEmpty(expression)) return false
-      return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })
+      const scope = { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta }
+      return parse(expression, scope)
     },
     onChange (value, props) {
       const { name } = props
@@ -312,11 +363,11 @@ export default {
       this.setFieldsValue(defaultValues)
     },
     validateFields () {
-      let ret = false
-      this.form.validateFields((error, values) => {
-        ret = !error
+      return new Promise((resolve) => {
+        this.form.validateFields((error, values) => {
+          resolve(!error)
+        })
       })
-      return ret
     },
     setFieldsValue (props = {}) {
       this.$nextTick(() => {

package/packages/models/form-group-model/src/index.vue

@@ -192,11 +192,9 @@ export default {
         form.evalDisabledExpression(data[idx])
       })
     },
-    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
-      const status = this.getFormRefs.map(form => {
-        const status = form.validateFields()
-        return status
-      }).every(item => item)
+    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
+      const statusResults = await Promise.all(this.getFormRefs.map(form => form.validateFields()))
+      const status = statusResults.every(item => item)
       if (status) {
         return this.submitRequestTrigger(props)
       } else {

package/packages/models/form-model/src/index.vue

@@ -143,7 +143,7 @@ export default {
       const currentUrl = this.executeExpressionForUrl(url)
       if (!currentUrl) return
       const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {
-        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })
+        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, response: resp, formModel: { ...this.formModels(), ...resp.data || {} } })
         return resp.data
       })
       return ret
@@ -182,9 +182,9 @@ export default {
     validateFields () {
       return this.$refs[this.formRef].validateFields()
     },
-    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
+    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
       if (this.globalDisabled) return
-      const status = this.$refs[this.formRef].validateFields()
+      const status = await this.$refs[this.formRef].validateFields()
       if (status) {
         //TODO fieldMap
         return this.submitRequestTrigger(props)