sz-kjsxy-web/src/components/XyDialog/index.vue

<script>
export default {
  props:{
    zIndex:Number,
    type:{
      type:String,
      default:"normal"
      //"normal" "form"
    },
    width:{
      type:Number,
      default:55
    },
    isShow:{
      type:Boolean,
      default:false
    },
    title:{
      type:String,
      default: ''
    },
    form:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    rules:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    okText:{
      type:String
    },
    hasIscheck:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {

    }
  },
  methods: {
    footerRender(){
      if(this.type === 'form'){
        return (
          <div>
            <Button ghost type="primary" on-click={this.reset}>重置</Button>
            <Button type="primary" on-click={this.submit}>{this.okText || '确定'}</Button>
          </div>
        )
      }
      if(this.type === 'normal'){
        return (
          <div>
            <Button ghost type="primary" on-click={()=>{this.$emit('update:isShow',false),this.$emit('update:hasIscheck',false)}}>取消</Button>
            <Button type="primary" on-click={()=>{this.$emit('on-ok')}}>{this.okText || '确定'}</Button>
          </div>
        )
      }
    },
    showChange(e){
      this.$emit('update:isShow',e)
      this.$emit('on-visible-change',e)
      this.$emit('update:hasIscheck',e)

    },
    validate(){
      return new Promise((resolve,reject)=>{
        this.$refs['elForm'].validate().then(res=>{
          if(res){
            resolve(res)
          }else{
            reject(res)
          }
        }).catch(err=>{
          reject(err)
          this.$Message.warning({
            content:'请填写完整信息',
            duration:1
          })
        })
      })
    },
    reset(){
      this.$emit('reset')
      if(this.type === 'normal'){
        return
      }
      this.$refs['elForm'].resetFields()
    },
    submit(ischeck){
      // ischeck  自定义提交验证
      if(this.type === 'normal'){
        return
      }
      this.$refs['elForm'].validate().then(res=>{
        if(res){
          console.log("res",res)
          console.log("ischeck",this.hasIscheck)
          if(this.hasIscheck){
            this.$emit('mysubmit',true)
          }else{
            this.$emit('submit')
          }
        }
      }).catch(err => {
        this.$Message.warning({
          content: "请填写完整信息",
          background: true,
          duration: 1
        })
        if(this.hasIscheck){
          this.$emit('mysubmit',false)
        }
      })
    },
    okClick(){
      this.$emit('on-ok')
    },
    clearValidate() {
      this.$refs['elForm'].clearValidate();
    }
  },
  watch:{
    isShow(val){
      if(!val && this.type === 'form'){
        this.reset()

      }
    }
  },
  render(h) {
    /*
    type='form' slot:
      extraFormTop
      extraFormBottom
      {表单名}
    type='normal' slot:
      normalContent
    footer slot:
      footerContent
     */
    const {okText,okClick,footerRender,width,type,$scopedSlots,rules,form,showChange,isShow,title} = this
    return (
      <Modal
        z-index={this.zIndex}
        ok-text={okText}
        class-name={'vertical-center-modal'}
        width={width}
        title={title}
        value={isShow}
        on={{['on-visible-change']:showChange,['on-ok']:okClick}}
        scopedSlots={{
          default(){
            if(type === "form"){
              let formItems = []
              for(let key in form){
                if(form.hasOwnProperty(key) && $scopedSlots[key]){
                  formItems.push(
                    <el-form-item
                      prop={key}
                      class={key}>
                      {eval(`{$scopedSlots.${key} ? $scopedSlots.${key}() : ''}`)}
                    </el-form-item>
                  )
                }
              }
              return (
                <el-form
                  style={title.length === 0 ? {'margin-top':'32px'} : {}}
                  ref="elForm"
                  props={{
                    model:form,
                    rules
                  }}>

                  {$scopedSlots.extraFormTop ? $scopedSlots.extraFormTop() : ''}

                  <div
                    style={
                      {
                        'display':'flex',
                        'align-items':'center',
                        'flex-wrap':'wrap',
                        'min-width':'380px'
                      }
                    }>
                    {
                      formItems.map(item=>{
                        return item
                      })
                    }
                  </div>

                  {$scopedSlots.extraFormBottom ? $scopedSlots.extraFormBottom() : ''}
                </el-form>
              )
            }else{
              return (
                <div
                  style={title.length === 0 ? {'margin-top':'32px'} : {}}>
                  {$scopedSlots.default ? $scopedSlots.default() : ''}
                </div>
              )
            }
          },
          header(){
            if($scopedSlots.headerContent){
              return $scopedSlots.headerContent()
            }
          },
          footer(){
            {
              if(type === 'form' || type === 'normal') return ($scopedSlots.footerContent ? $scopedSlots.footerContent() : footerRender())
            }
          }
        }}>
      </Modal>
    )
  }
}
</script>

<style lang="scss">
// .xy-table-item-label{
//   width: 140px;
//   text-align: right;
// }
.xy-table-item-min{
  position: relative;
  &::after{
    z-index: 1;
    position: absolute;
    right: 0;
    top: 0;
    content:'（分钟）'
  }
  ::v-deep .el-input__clear{
    position: relative;
    right: 46px;
    z-index: 2;
  }
}
.xy-table-item-price{
  position: relative;
  &::after{
    z-index: 1;
    position: absolute;
    right: 0;
    top: 0;
    content:'（元）'
  }
  ::v-deep .el-input__clear{
    position: relative;
    right: 30px;
    z-index: 2;
  }
}
.xy-table-item-price-wan{
  position: relative;
  &::after{
    position: absolute;
    right: 0;
    top: 0;
    content:'（万元）'
  }
  ::v-deep .el-input__clear{
    position: relative;
    right: 46px;
    z-index: 2;
  }
}

.vertical-center-modal{
  display: flex;
  align-items: center;
  justify-content: center;

  .ivu-modal{
    top: 0;
  }
}
.ivu-modal-body{
  max-height: 65vh !important;
  min-height: 300px;
  overflow: scroll;

}
.xy-table-item{
  display: flex;
  align-items: center;

  // padding-right: 80px;
      padding: 0 60px;
      flex-direction: column;
  &-label{
    width:100%;
    // padding: 0 20px;
  }
  &-content{
    width:100%;
  }
}
.el-form-item{
  flex-shrink: 0;
  flex-basis: 50%;
}
.el-form-item__error{
  white-space: nowrap;
  word-break: keep-all !important;
  top: 100% !important;
  left: calc(100% - 80px) !important;
  transform: translateX(-100%);
}
.ivu-message{
  z-index: 5000 !important;
}
</style>