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

<script>
export default {
  props:{
    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
    }
  },
  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)}}>取消</Button>
            <Button type="primary" on-click={()=>{this.$emit('on-ok')}}>{this.okText || '确定'}</Button>
          </div>
        )
      }
    },
    showChange(e){
      this.$emit('update:isShow',e)
    },
    reset(){
      if(this.type === 'normal'){
        return
      }
      this.$refs['elForm'].resetFields()
    },
    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,footerRender,width,type,$scopedSlots,rules,form,showChange,isShow,title} = this
    return (
      <Modal
        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 = []
              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 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;

}
.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>