v1.9 oa 工作流表單必填問題處理

src/components/oa/newOaWorkflowForm.vue

@@ -11,28 +11,28 @@
           <!-- 文本框 -->
           <el-form-item v-if="item.type == 'textfield'" :label="item.label" :prop="item.key"
             :rules="getValidationRules(item)">
-            <el-input v-model="item.value" :placeholder="item.description" clearable>
+            <el-input v-model="formData[item.key]" :placeholder="item.description" clearable>
             </el-input>
           </el-form-item>
 
           <!-- 数字框 -->
           <el-form-item v-if="item.type == 'number'" :label="item.label" :prop="item.key"
             :rules="getValidationRules(item)">
-            <el-input-number v-model="item.value" :placeholder="item.description" :min="0" style="width: 100%">
+            <el-input-number v-model="formData[item.key]" :placeholder="item.description" :min="0" style="width: 100%">
             </el-input-number>
           </el-form-item>
 
           <!-- 文本域 -->
           <el-form-item v-if="item.type == 'textarea'" :label="item.label" :prop="item.key"
             :rules="getValidationRules(item)">
-            <el-input v-model="item.value" type="textarea" :rows="4" :placeholder="item.description">
+            <el-input v-model="formData[item.key]" type="textarea" :rows="4" :placeholder="item.description">
             </el-input>
           </el-form-item>
 
           <!-- 日期选择 -->
           <el-form-item v-if="item.type == 'textdate'" :label="item.label" :prop="item.key"
             :rules="getValidationRules(item)">
-            <el-date-picker v-model="item.value" type="date" :placeholder="item.description" format="yyyy-MM-dd"
+            <el-date-picker v-model="formData[item.key]" type="date" :placeholder="item.description" format="yyyy-MM-dd"
               value-format="yyyy-MM-dd" style="width: 100%">
             </el-date-picker>
           </el-form-item>
@@ -40,7 +40,7 @@
           <!-- 时间选择 -->
           <el-form-item v-if="item.type == 'textdatetime'" :label="item.label" :prop="item.key"
             :rules="getValidationRules(item)">
-            <el-time-picker v-model="item.value" :placeholder="item.description" format="HH:mm"
+            <el-time-picker v-model="formData[item.key]" :placeholder="item.description" format="HH:mm"
               value-format="HH:mm" style="width: 100%">
             </el-time-picker>
           </el-form-item>
@@ -48,7 +48,7 @@
           <!-- 单选框 -->
           <el-form-item v-if="item.type == 'radio'" :label="item.label" :prop="item.key"
             :rules="getValidationRules(item)">
-            <el-radio-group v-model="item.value">
+            <el-radio-group v-model="formData[item.key]">
               <el-radio v-for="(option, optionIndex) in item.values" :key="optionIndex" :label="option.value">
                 {{ option.label }}
               </el-radio>
@@ -58,7 +58,7 @@
           <!-- 下拉选择 -->
           <el-form-item v-if="item.type == 'select'" :label="item.label" :prop="item.key"
             :rules="getValidationRules(item)">
-            <el-select v-model="item.value" :placeholder="item.description" style="width: 100%" clearable>
+            <el-select v-model="formData[item.key]" :placeholder="item.description" style="width: 100%" clearable>
               <el-option v-for="(option, optionIndex) in item.values" :key="optionIndex" :label="option.label"
                 :value="option.value">
               </el-option>
@@ -68,7 +68,7 @@
           <!-- 复选框 -->
           <el-form-item v-if="item.type == 'checkbox'" :label="item.label" :prop="item.key"
             :rules="getValidationRules(item)">
-            <el-checkbox-group v-model="item.value">
+            <el-checkbox-group v-model="formData[item.key]">
               <el-checkbox v-for="(option, optionIndex) in item.values" :key="optionIndex" :label="option.value">
                 {{ option.label }}
               </el-checkbox>
@@ -91,7 +91,7 @@
           </el-form-item>
 
           <!-- 重置按钮 -->
-          <el-form-item v-if="item.type == 'button' && item.action == 'reset'"  class="text-right">
+          <el-form-item v-if="item.type == 'button' && item.action == 'reset'" class="text-right">
             <el-button @click="_doReset">
               <i class="el-icon-refresh"></i>
               {{ item.label }}
@@ -122,7 +122,8 @@ export default {
       callBackListener: 'newOaWorkflowForm',
       callBackFunction: 'fileName',
       submitLoading: false,
-      showUploadComponent: false
+      showUploadComponent: false,
+      flowId: null
     }
   },
 
@@ -143,8 +144,10 @@ export default {
           flowId: this.flowId
         })
         console.log(res)
+
         this.formJson = JSON.parse(res.data[0].formJson)
         this.initForm()
+
       } catch (error) {
         console.error('获取表单配置失败:', error)
         this.$message.error('获取表单配置失败')
@@ -152,21 +155,22 @@ export default {
     },
 
     initForm() {
-      this.components = this.formJson.components
+
+      let _components = this.formJson.components
       this.formData = {}
 
-      this.components.forEach(item => {
+      _components.forEach(item => {
         if (item.type !== 'button' && item.type !== 'text') {
-          // 初始化表单数据
           if (item.type === 'checkbox') {
-            this.formData[item.key] = []
+            this.$set(this.formData, item.key, []);
           } else if (item.type === 'radio' || item.type === 'select') {
-            this.formData[item.key] = item.values && item.values.length > 0 ? item.values[0].value : ''
+            this.$set(this.formData, item.key, item.values && item.values.length > 0 ? item.values[0].value : '');
           } else {
-            this.formData[item.key] = ''
+            this.$set(this.formData, item.key, '');
           }
         }
-      })
+      });
+      this.components = _components
     },
 
     getValidationRules(item) {
@@ -175,9 +179,19 @@ export default {
         rules.push({
           required: true,
           message: `${item.label}不能为空`,
+          trigger: item.type === 'select' ? 'change' : 'blur'
+        })
+      }
+
+      // 添加其他验证规则，如正则表达式
+      if (item.validate && item.validate.pattern) {
+        rules.push({
+          pattern: new RegExp(item.validate.pattern),
+          message: item.validate.customMessage || `${item.label}格式不正确`,
           trigger: 'blur'
         })
       }
+
       return rules
     },
 
@@ -216,18 +230,14 @@ export default {
     },
 
     _doReset() {
-      let _that = this;
+      this.$refs.form.resetFields()
-      _that.components.forEach(item => {
+      // 特殊处理复选框
-        item.value = "";
+      Object.keys(this.formData).forEach(key => {
-        if (item.type == 'textdate' || item.type == 'textdatetime') {
+        const component = this.components.find(c => c.key === key)
-          item.value = "请选择";
+        if (component && component.type === 'checkbox') {
+          this.formData[key] = []
         }
-
+      })
-        if (item.type == "radio" || item.type == "select") {
-          item.valueIndex = 0;
-        }
-      });
-      this.$forceUpdate();
     },
 
     _doUploadFile() {