yunyubang-web/src/components/XyDialog/index.vue

<script>
export default {
  props:{
    type:{
      type:String,
      default:"normal"
      //"normal" "form"
    },
    width:{
      type:Number,
      default:55
    },
    // isFullScreen:{
    //   type:Boolean,
    //   default:false
    // },
    isShow:{
      type:Boolean,
      default:false
    },
    title:{
      type:String,
      default: ''
    },
    form:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    rules:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    okText:{
      type:String
    }
  },
  data() {
    return {
      isFullScreen:false
    }
  },
  mounted(){},
  methods: {
    headerRender(){
      return (
        <div>
        {this.title}
        <a class="ivu-modal-close" on-click={this.closeshowChange}><i class="ivu-icon ivu-icon-ios-close"></i></a>
        <a class="ivu-modal-screen" on-click={this.fullScreen}><i class={this.isFullScreen?'el-icon-aim':'el-icon-full-screen'}></i></a>
        </div>
      )
    },
    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)}}>取消</Button>
            <Button type="primary" on-click={()=>{this.$emit('on-ok')}}>{this.okText || '确定'}</Button>
          </div>
        )
      }
    },
    closeshowChange(){
      this.$emit('update:isShow',false)
    },
    showChange(e){
      this.$emit('update:isShow',e)
    },
    reset(){
      if(this.type === 'normal'){
        return
      }
      this.$refs['elForm'].resetFields()
    },
    fullScreen(){
      this.isFullScreen = !this.isFullScreen
      // this.width = 100
      // this.height = '100vh'
    },
    submit(){
      if(this.type === 'normal'){
        return
      }
      this.$refs['elForm'].validate().then(res=>{
        if(res) this.$emit('submit')
      }).catch(err=>{
        this.$Message.warning({
          content:'请填写完整信息',
          duration:1
        })
      })
    },
    okClick(){
      this.$emit('on-ok')
    }
  },
  render(h) {
    /*
    type='form' slot:
      extraFormTop
      extraFormBottom
      {表单名}
    type='normal' slot:
      normalContent
    footer slot:
      footerContent
     */
    const {okText,okClick,headerRender,footerRender,width,isFullScreen,type,$scopedSlots,rules,form,showChange,isShow,title} = this
    return (
      <Modal
        ok-text={okText}
        draggable
        reset-drag-position
        class-name={!isFullScreen?'vertical-center-modal':'vertical-center-modal vertical-full-modal'}
        width={width}
        title={title}
        value={isShow}
        on={{['on-visible-change']:showChange,['on-ok']:okClick}}

        scopedSlots={{
          header(){
            {
              return headerRender()
            }
          },
          default(){
            if(type === "form"){
              let formItems = []
              Object.keys(form).map((key)=>{
                formItems.push(
                  <el-form-item
                    prop={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>
              )
            }
          },
          footer(){
            {
              if(type === 'form' || type === 'normal') return ($scopedSlots.footerContent ? $scopedSlots.footerContent() : footerRender())
            }
          }
        }}>
      </Modal>
    )
  }
}
</script>
<style scoped>
  /deep/ .vertical-center-modal .ivu-modal{
   width:100%!important;
    height:100%!important;
  }

</style>
<style lang="scss">
.xy-table-item-label{
  width: 140px;
}
.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;

}
  .ivu-modal-screen{
        z-index: 1;
font-size: 15px;
    position: absolute;
    right: 40px;
    top: 17px;
        cursor: pointer;
        color:#bf617c
  }
.ivu-modal-fullscreen{
  .ivu-modal{
    width:100%!important
  }
  .ivu-modal-content{
    height:100vh
  }
  .ivu-modal-body{
    max-height: 100vh !important;
    min-height: 300px;
    overflow: scroll;

  }
}
.vertical-full-modal{
  .ivu-modal{
    width:100%!important
  }
  .ivu-modal-content{
    height:100vh;
    width:100%!important
  }
  .ivu-modal-body{
    max-height: 80vh !important;
    min-height: 300px;
    overflow: scroll;

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

  padding-right: 80px;
  &-label{

    padding: 0 20px;
  }
  &-content{

  }
}
.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%);
}
</style>