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

<template>
  <!-- 组件功能：新增编辑（含有主子表）参数配置从api获取 -->
  <el-dialog
    :visible.sync="show"
    :modal="false"
    :modal-append-to-body="false"
    :show-close="false"
    @close="close"
    class="searchPageComponents"
    :fullscreen="true"
    style="width:calc(100% - 28px);left:14px;top:14px;height:calc(100% - 28px)"
    v-loading="Loading.addEditApiLoading"
  >
    <!-- 数据填写 -->
    <div v-if="active === 0" style="height: 100%;">
      <div class="centerInnerContent">
        <!-- 主表 -->
        <div class="leftMainForm">
          <div class="dialogOuterTitle">
            {{formTitle}} <span v-if="isHaveDetail()">【主表信息】</span>
            <div class="buttonBox" v-if="isHaveDetail()">
              <el-button @click="detailPopShow = true" size="small" type="warning">编辑子表信息</el-button> 
            </div>
          </div>
          <!-- 表单 -->
          <el-form 
            class="addEditFrom"
            ref="addEditFrom_Ref"
            v-if="formData"
            :model="formData"
            :rules="formRules"
          >
            <el-row :gutter="40">
              <el-col
                :span="item.colSpan || 12"
                v-for="(item, index) in formItemData"
                :key="index"
              >
                <el-form-item 
                  :label="item.label"
                  :prop="item.prop"
                  v-if="item.label.toUpperCase() != 'DETAILS'"
                >
                  <!-- 数值 -->
                  <el-input-number
                    v-if="item.apiBaseType === 'number'"
                    v-model="formData[item.prop]"
                    :min="item.minimum || undefined"
                    :max="item.maximum || undefined"
                    :maxlength="item.maxLength || undefined"
                    :minlength="item.minLength || undefined"
                    :disabled="Boolean(item.disabled)"
                    :placeholder="item.placeholder || '请输入' + item.label"
                    @change="changeValue(item.prop,item,$event)"
                    @clear="clearValue(item.prop,$event)"
                  ></el-input-number>

                  <!-- 时间转换 -->
                  <el-date-picker
                    v-else-if="item.apiBaseType === 'datetime'"
                    v-model="formData[item.prop]"
                    type="datetime"
                    placeholder="选择日期时间"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-ddTHH:mm:ss"
                    :disabled="Boolean(item.disabled)"
                  ></el-date-picker>

                  <!-- 布尔、枚举 -->
                  <el-select 
                    v-else-if="item.isEnums || item.apiBaseType === 'boolean'"
                    v-model="formData[item.prop]" 
                    :placeholder="item.placeholder || '请选择' + item.label"
                    :disabled="Boolean(item.disabled)"
                  >
                    <el-option
                      v-for="item in item.enums_list"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>

                  <!-- 文本框 -->
                  <!-- <el-input
                    v-else
                    type="textarea"
                    autosize
                    resize="none"
                    v-model="formData[item.prop]"
                    :placeholder="item.placeholder || '请输入' + item.label"
                    :disabled="Boolean(item.disabled)"
                  ></el-input> -->
                  <el-input 
                    v-else
                    v-model="formData[item.prop]"
                    :placeholder="item.placeholder || '请输入' + item.label"
                    :disabled="Boolean(item.disabled)"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <!-- 操作按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="submitHandle()">确 定</el-button>
      </div>
      
      <!-- 模拟子表弹窗遮罩层（为处理切换tab消失问题）-->
      <div class="imitateDetailPopModal" v-if="detailPopShow"></div>
      <!-- 子表弹窗 -->
      <el-dialog
        :visible.sync="detailPopShow"
        :show-close="false"
        @close="closeDetailPop"
        :append-to-body="false"
        :modal-append-to-body="false"
        width="95%"
        top="2vh"
        class="detailPop"
        :modal="false"
      >
        <div class="rightDetailTable">
          <div class="dialogOuterTitle">{{formTitle}} 【子表信息】</div>
          <currenTableFlex
            ref="currenTableFlex_Ref"
            :isShowIndex="true"
            :isEditable="true"
            :setUTableHeight="290"
            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" v-if="flexTableData && flexTableData.length > 0" @click="sureDetailHandle()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 成功提示 -->
    <div v-if="active === 1">
      <el-result icon="success" title="成功提示" :subTitle="formTitle + '成功'">
        <template slot="extra">
          <el-button type="primary" size="medium" @click="exitHandle"
            >退出</el-button
          >
        </template>
      </el-result>
    </div>
    <!-- 错误提示 -->
    <div v-if="active === 2">
      <el-result icon="error" title="错误提示" :subTitle="formTitle + '失败'">
        <template slot="extra">
          <el-button type="primary" size="medium" @click="changeActive(0)"
            >返回</el-button
          >
          <el-button type="primary" size="medium" @click="exitHandle"
            >退出</el-button
          >
        </template>
      </el-result>
    </div>
  </el-dialog>
</template>
<script>
import { ApiTypePost, ApiTypePut } from "@/api/wms-api"
import { LoadingMixins } from "@/mixins/LoadingMixins";
import currenTableFlex from "@/components/currenTableFlex"
import * as allUrlOption from '@/utils/baseData/urlOption'
export default {
  name:"addEditFromApiPop",
  mixins:[ LoadingMixins ],
  components: { currenTableFlex },
  props: {
    // 编辑行数据
    editRowData:{
      type: Object,
      default: null
    },
    // 操作类型：add/edit
    handleType:{
      type: String,
      default: null
    },
    // 提交事件
    submitForm:{
      type:Function,
      default:null
    },
    // 特殊的【新增】接口，如果没有就走路由下的配置文件
    addSubmitUrl:{
      type: String,
      default: null
    },
    // 特殊的【编辑】接口，如果没有就走路由下的配置文件
    editSubmitUrl:{
      type: String,
      default: null
    },
  },
  data () {
    return {
      //明细-列表
      URLOption_detailList:allUrlOption[this.$route.name].detailListURL,
      // 当前的dto
      currentDtos:this.$store.getters.dtoColumnTypes[this.$route.name],
      active:0,//显示内容：0表单 1成功 2失败
      show:true,
      formTitle:null,//form名称
      formData:{},//表单数据
      formItemData:null,//表单item配置
      formRules: {},//表单验证
      detailPopShow:false,//子表信息弹窗
      flexTableData:null,//子表table
      flexTableData_stag:null,//子表table暂存数据
      detailFormRules: {},//子表表单验证
      flexTableColumns:null,//子表table列
      showDetailRulesTipper:false,//子表规则提示是否正在显示（处理提示重复叠加问题）
    }
  },
  mounted(){
    this.initTitle()
    this.initFormItems()
  },
  methods: {
    // 初始化form名称
    initTitle(){
      if(this.handleType){
        this.formTitle = this.handleType == 'add' ? '新增'+this.$route.name : '编辑'+this.$route.name
      }
    },
    // 初始化表单配置、rules
    initFormItems(){
      let _dtoList_type = this.handleType == 'add' ? 'C' : 'U'
      let _dtoList = this.currentDtos[_dtoList_type].dtoList
      // 主表信息处理 除去【details】字段和【id】字段
      this.formItemData = []
      _dtoList.forEach(item=>{
        if(item.prop.toUpperCase() != "ID" && item.prop.toUpperCase() != 'DETAILS'){
          this.formItemData.push(item)
        }
      })
      // 编辑格式：特殊处理默认值
      if(this.handleType == 'edit' && this.editRowData){
        this.formData = JSON.parse(JSON.stringify(this.editRowData))
      }else{
        this.formData = {}
      }
      // 子表数据
      let detail_list = _dtoList.filter(item=>{
        return item.prop.toUpperCase() == 'DETAILS'
      })
      if(detail_list && detail_list.length > 0){
        if(this.handleType == 'edit'){
          this.flexTableData = this.formData[detail_list[0].prop]
        }else{
          this.flexTableData = []
        }
        this.flexTableData_stag = JSON.parse(JSON.stringify(this.flexTableData))
      }
      // 子表数据列
      if(this.URLOption_detailList){
        let _detailApi = this.URLOption_detailList.slice(0,this.URLOption_detailList.lastIndexOf('/'))
        let _detailDtos = this.$store.getters.dtoColumnTypes[_detailApi].S.dtoList
        this.flexTableColumns = []
        // 子表信息处理 除去【masterId】字段
        _detailDtos.forEach(item=>{
          if(item.prop.toUpperCase() != "MASTERID"){
            this.flexTableColumns.push(item)
          }
        })

        // 子表-表单验证格式化
        // todo:detailFormRules从配置文件格式化验证
        // this.detailFormRules={}
        // _detailDtos.forEach(item=>{
        //   if(item.isRequired){
        //     this.detailFormRules[item.prop] = [{ required: true, trigger: "blur", message: item.message }]
        //   }
        // })
        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" }
          ]
        }
      }

      // 主表-表单验证格式化
      this.formRules={}
      _dtoList.forEach(item=>{
        if(item.isRequired){
          this.formRules[item.prop] = [{ required: true, trigger: "blur", message: "不可为空" }]
        }
      })
    },
    // 判断是否存在子表
    isHaveDetail(){
      let _currentOption = allUrlOption[this.$route.name]
      return _currentOption.isMaster && _currentOption.hasDetail && this.flexTableData
    },
    // 关闭弹窗
    close() {
      this.show = false
      this.$emit("closePop")
    },
    // 关闭子表弹窗
    closeDetailPop() {
      this.flexTableData = JSON.parse(JSON.stringify(this.flexTableData_stag))
      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")
    },
    // 提交表单
    submitHandle(){
      this.$refs.addEditFrom_Ref.validate((valid) => {
        if(this.submitForm){
          this.submitForm(valid,this.formData,this.flexTableData,this.handleType,this.formItemData,this.formRules,this.detailFormRules)
          return
        }
        if (valid) {
          if(this.isHaveDetail() && (!this.flexTableData || this.flexTableData.length <=0 )){
            this.$confirm('您还未编辑子表信息, 是否确定提交?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.formData.details = this.flexTableData
              this.Loading.addEditApiLoading = true
              // 新增
              if(this.handleType == 'add'){
                ApiTypePost(
                  this.formData, 
                  this.currentDtos.C.actionsUrl
                ).then(res => {
                  this.changeActive(1)
                }).catch(err => {
                  this.changeActive(2)
                })
              }
              // 编辑
              else{
                ApiTypePut(
                  this.formData, 
                  this.formData.id, 
                  this.currentDtos.U.actionsUrl
                ).then(res => {
                  this.changeActive(1)
                }).catch(err => {
                  this.changeActive(2)
                })
              }
            }).catch(() => {
      
            });
          }
        } else {
          return false;
        }
      });
    },
    // 结果页退出
    exitHandle(){
      this.close()
      if(this.active == '1')this.oldSkipCount = 1;
      this.show = false
      this.$emit("exitAfterHandle")
      this.$nextTick(()=>{
        this.active = 0
      })
    },
    // 更改页面步骤
    changeActive(sta){
      this.active = sta
      this.Loading.addEditApiLoading = false
    },
    // 值更改函数
    changeValue(prop,item,val) {
      this.$emit("changeValue", prop, item, val)
    },
    // 值清除函数
    clearValue(prop,item,val) {
      this.$emit("clearValue", prop, item, val)
    },
  }
}
</script>
    
<style  lang="scss" scoped>
  ::v-deep .el-dialog__header{
    padding:  0 !important;
  }
  ::v-deep .el-row{
    width: 100%;
  }
  ::v-deep .addEditFrom{
    height: calc(100%);
    overflow: auto;
  }
  ::v-deep .el-form-item__label{
    float: unset;
  }

  ::v-deep .el-input,.el-select,.el-input-number{
    width: 100% !important;
  }

  .dialog-footer{
    padding-top: 15px;
    text-align: right;
  }
  .centerInnerContent{
    height: calc(100% - 60px);
    overflow: auto;

    .leftMainForm{
      height: calc(100% - 60px);
    }

    &.hasDetails{
      display: flex;

      .leftMainForm{
        width: 50%;
        flex-shrink: 0;
      }

      .rightDetailTable{
        height: calc(100% - 60px);
        width: calc(50%);
        padding-left:40px;
        border-left: #ddd solid 1px;
      }
    }
  }

  .detailPop{

    ::v-deep .el-dialog{
      margin-bottom:0
    }
  }

  .imitateDetailPopModal{
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>