【东阳主子表】新增编辑，子表表单验证-暂存

WinIn.FasterZ.Wms.Fe/src/components/addEditFromApiPop/index.vue

@@ -130,12 +130,13 @@
             class="currenTableFlex"
             :flexTableData="flexTableData"
             :flexTableColumns="flexTableColumns"
+            :border="true"
           ></currenTableFlex>
         </div>
         <!-- 操作按钮 -->
         <div slot="footer" class="dialog-footer">
           <el-button @click="closeDetailPop">取 消</el-button>
-          <el-button type="primary" @click="sureDetailHandle()">确 定</el-button>
+          <el-button type="primary" v-if="flexTableData && flexTableData.length > 0" @click="sureDetailHandle()">确 定</el-button>
         </div>
       </el-dialog>
     </div>
@@ -215,8 +216,9 @@ export default {
       detailPopShow:false,//子表信息弹窗
       flexTableData:null,//子表table
       flexTableData_stag:null,//子表table暂存数据
-      // flexTableColumns:null,//子表table列
-      flexTableColumns: null,
+      detailFormRules: {},//子表表单验证
+      flexTableColumns:null,//子表table列
+      showDetailRulesTipper:false,//子表规则提示是否正在显示（处理提示重复叠加问题）
     }
   },
   mounted(){
@@ -272,13 +274,23 @@ export default {
         })
       }
 
-      // 表单验证格式化
+      // 主表-表单验证格式化
       this.formRules={}
       _dtoList.forEach(item=>{
         if(item.isRequired){
           this.formRules[item.prop] = [{ required: true, trigger: "blur", message: "不可为空" }]
         }
       })
+
+      // 子表-表单验证格式化
+      // todo:detailFormRules从配置文件格式化
+      this.detailFormRules = {
+        itemCode:[{ required: true, trigger: "blur", message: "不可为空" }],
+        rawQty:[
+          { required: true, trigger: "blur", message: "不可为空" },
+          { valid:(val)=>{return this.numberOverControl(val,1,20)}, trigger: "blur", message: "必须大于0，且小于等于20" }
+        ]
+      }
     },
     // 判断是否存在子表
     isHaveDetail(){
@@ -296,8 +308,72 @@ export default {
       this.detailPopShow = false
       this.$emit("closeDetailPop")
     },
+    // 数字值处理
+    numberOverControl(value,min,max){
+      let val = Number(value)
+      if(min && max){ return val >= min && val <= max }
+      if(min && !max){ return val >= min }
+      if(!min && max){ return val <= max }
+    },
     // 子表确定
     sureDetailHandle(){
+      let _hasNoVaild = false
+      // 检验规则判断处理
+      for(let i=0;i<this.flexTableData.length;i++){
+        for(let r in this.flexTableData[i]){
+          if(this.detailFormRules[r]){
+            for(let v = 0;v<this.detailFormRules[r].length;v++){
+              // 必填项处理
+              if(
+                this.detailFormRules[r][v].required && 
+                ((!this.flexTableData[i][r] && this.flexTableData[i][r] != 0) || this.flexTableData[i][r].length <= 0)
+              ){
+                _hasNoVaild = true
+                break
+                // if(!_hasNoVaild[r]){_hasNoVaild[r] = []}
+                // _hasNoVaild[r].push(this.detailFormRules[r][v])
+              }
+              // 其他规则处理
+              if(this.detailFormRules[r][v].valid){
+                let _valid = this.detailFormRules[r][v].valid(this.flexTableData[i][r])
+                if(!_valid){
+                  _hasNoVaild = true
+                  break
+                }
+              }
+            }
+          }
+        }
+      }
+      // 如果有检测规则未通过的，全部规则提示处理
+      if(_hasNoVaild){
+        let vaild_zh = {}
+        // rule的prop转义
+        this.flexTableColumns.forEach(item=>{
+          vaild_zh[item.prop] = item.label
+        })
+        // 全部提示整合
+        let _tipper = "所有列检验规则:<br/>"
+        for(var i in this.detailFormRules){
+          this.detailFormRules[i].forEach(item=>{
+            _tipper += `【${vaild_zh[i]}】列${item.message};<br/>`;
+          })
+        }
+        _tipper += '请按照要求填写'
+        if(!this.showDetailRulesTipper){
+          this.showDetailRulesTipper = _tipper
+          this.$message({
+            dangerouslyUseHTMLString: true,
+            message: _tipper,
+            type: 'error',
+            showClose:true,
+            onClose:(()=>{
+              this.showDetailRulesTipper = null
+            })
+          }) 
+        }
+        return
+      }
       this.flexTableData_stag = JSON.parse(JSON.stringify(this.flexTableData))
       this.detailPopShow = false
       this.$emit("sureDetailPop")
@@ -309,9 +385,9 @@ export default {
           this.submitForm(valid,this.formData,this.handleType,this.formItemData,this.formRules)
           return
         }
-        this.formData.details = this.flexTableData
-        this.Loading.addEditApiLoading = true
         if (valid) {
+          this.formData.details = this.flexTableData
+          this.Loading.addEditApiLoading = true
           // 新增
           if(this.handleType == 'add'){
             ApiTypePost(

WinIn.FasterZ.Wms.Fe/src/components/currenTableFlex/index.vue

@@ -278,7 +278,12 @@
     methods: {
       //添加行
       flexOpenAddNew() {
-        let _oneRow =  Object.assign({}, this.flexTableData[0])
+        // 则从表头中取值，设置默认参数为null
+        let _oneRow =  {}
+        this.flexTableColumns.forEach(item=>{
+          _oneRow[item.prop] = null
+        })
+        // _oneRow =  Object.assign({}, this.flexTableData[0])
         for(let key in _oneRow){
           _oneRow[key]  = null
         }

WinIn.FasterZ.Wms.Fe/src/components/umyTable/index.vue

@@ -250,7 +250,7 @@ export default {
     // table是否有border
     tableBorder: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     // 是否为第一个浮动，如果是，则item中的fixed无效（应用场景：主列表，因为用户排序不定元素为第一项）
     firstFixed: {