修改

jinlin

2024-02-23 1772fc5e211f9e9e0ab4cdc6c29b436aac178c2a

 web/packages/components/zt-dialog/src/zt-dialog.vue

@@ -1,237 +1,238 @@
<template>
    <el-dialog
            v-dialogDrag
            :class="{'dialog-column-1': column === '1', 'dialog-column-2': column === '2', 'dialog-column-3': column === '3', 'dialog-column-4': column === '4'}"
            :visible.sync="visible"
            v-if="visible"
            :title="_title"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :append-to-body="appendToBody"
            @open="onOpen"
            @close="onClose">
        <slot></slot>
        <template slot="footer">
          <template v-if="isView">
            <el-button type="info" @click="close()">{{ $t('close') }}</el-button>
          </template>
          <template v-else>
            <template v-if="stepMarker && stepMarker.indexOf('first')>0">
              <el-button type="warning" @click="formSubmit('zc')">暂存</el-button>
              <el-button type="warning" @click="formSubmit('tj')" v-if="">提交
              </el-button>
            </template>
            <template v-else-if="stepMarker">
              <el-button type="warning" @click="formSubmit('zc')">暂存</el-button>
              <el-button type="warning" @click="formSubmit('bl')">办理</el-button>
            </template>
            <el-button type="primary" @click="formSubmit('qd')" v-preventReClick v-else-if="editAble && hasConfirm">{{
                $t('confirm') }}
            </el-button>
            <el-button type="warning" @click="formSubmit('bc')" v-else-if="editAble">保存
            </el-button>

            <el-button @click="visible = false" v-if="editAble||stepMarker">{{ $t('cancel') }}</el-button>
            <el-button type="info" @click="close()" v-else>{{ $t('close') }}</el-button>
          </template>
            <slot name="footer"></slot>
  <el-dialog
    v-dialogDrag
    :class="{'dialog-column-1': column === '1', 'dialog-column-2': column === '2', 'dialog-column-3': column === '3', 'dialog-column-4': column === '4'}"
    :visible.sync="visible"
    v-if="visible"
    :title="_title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="appendToBody"
    @open="onOpen"
    @close="onClose">
    <slot></slot>
    <template slot="footer">
      <template v-if="isView">
        <el-button type="info" @click="close()">{{ $t('close') }}</el-button>
      </template>
      <template v-else>
        <template v-if="stepMarker && stepMarker.indexOf('first')>0">
          <el-button type="warning" @click="formSubmit('zc')">暂存</el-button>
          <el-button type="warning" @click="formSubmit('tj')" v-if="">提交
          </el-button>
        </template>
    </el-dialog>
        <template v-else-if="stepMarker">
          <el-button type="warning" @click="formSubmit('zc')">暂存</el-button>
          <el-button type="warning" @click="formSubmit('bl')">办理</el-button>
        </template>
        <el-button v-else-if="hasConfirm" type="primary" @click="formSubmit('qd')" v-preventReClick>{{
          $t('confirm') }}
        </el-button>
        <el-button v-else-if="editAble" type="warning" @click="formSubmit('bc')">保存
        </el-button>

        <el-button type="info" @click="visible = false" v-if="editAble||stepMarker">{{ $t('cancel') }}</el-button>
        <el-button type="info" @click="close()" v-else>{{ $t('close') }}</el-button>
      </template>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>
<script>
    import cloneDeep from 'lodash/cloneDeep'
  import cloneDeep from 'lodash/cloneDeep'

    export default {
        name: 'ZtDialog',
        props: {
            title: String,
            column: { // 几列
                type: String,
                default: '1'
            },
            stepMarker: {},
            appendToBody: {
                type: Boolean,
                default: false
            },
            hasConfirm: {
                type: Boolean,
                default: false
            },
            editAble: {
                type: Boolean,
                default: true
            },
            hasSubmit: {
                type: Boolean,
                default: false
            },
            hasSave: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                dataFormBack: null,
                visible: false,
                isView:true,
                //editAble: true // 是否可编辑
            }
        },
        computed: {
            _title() {
                if (this.title) {
                    return this.title
                } else if (!this.editAble) {
                    return this.$t('view')
                } else if (this.$parent.dataForm !== undefined) {
                    return !this.$parent.dataForm.id ? this.$t('add') : this.$t('update')
                }
            }
        },
        mounted() {
            this.dataFormBack = cloneDeep(this.$parent.dataForm)
        },
        methods: {
            init(id, row, isView) {
                this.$nextTick(() => {
                    // 清空表单校验
                    console.log(this.$parent.$refs.dataForm, id, row, isView, 'this.$parent.$refs.dataForm')
                    if (this.$parent.$refs.dataForm) { // dialog里面的form
                        this.$parent.$refs.dataForm.resetFields()
                    }

                    // this.editAble = isView !== true // 是否可编辑

                    // 设置dialog父页面初始化表单
                    this.$parent.dataForm = cloneDeep(this.dataFormBack)
                    if (this.$parent.dataForm) {
                        this.$parent.dataForm.id = id
                        this.$parent.dataForm.disabled = isView === true // 表单是否可编辑
                    }

                    if (this.$parent.init) {
                        console.log(id, row,this.stepMarker, 'id row')
                        this.$parent.init(id, row)
                    }
                    if (id && this.$parent.getInfo) {
                        this.$parent.getInfo()
                    }
                })
                this.open()
            },
            // 表单提交
            formSubmit(submitType) {
                let dataForm = this.$parent.$refs.dataForm
                if (dataForm) {
                    dataForm.validate(async valid => {
                        if (valid) {
                            this.$emit('confirm', submitType)
                        } else {
                            this.$nextTick(() => {
                                let isError = document.getElementsByClassName('is-error')
                                isError[0].scrollIntoView({
                                    // 滚动到指定节点
                                    // 值有start,center,end，nearest，当前显示在视图区域中间
                                    block: 'center',
                                    // 值有auto、instant,smooth，缓动动画（当前是慢速的）
                                    behavior: 'smooth'
                                })
                            })
                        }
                    })
                } else {
                    this.$emit('confirm', submitType)
                }
            },
            open() {
                this.visible = true
            },
            close() {
                this.visible = false
            },
            onOpen() {
                this.$emit('open')
            },
            onClose() {
                this.$emit('close')
            }
  export default {
    name: 'ZtDialog',
    props: {
      title: String,
      column: { // 几列
        type: String,
        default: '1'
      },
      stepMarker: {},
      appendToBody: {
        type: Boolean,
        default: false
      },
      hasConfirm: {
        type: Boolean,
        default: false
      },
      editAble: {
        type: Boolean,
        default: true
      },
      hasSubmit: {
        type: Boolean,
        default: false
      },
      hasSave: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        dataFormBack: null,
        visible: false,
        isView: false,
        //editAble: true // 是否可编辑
      }
    },
    computed: {
      _title() {
        if (this.title) {
          return this.title
        } else if (!this.editAble) {
          return this.$t('view')
        } else if (this.$parent.dataForm !== undefined) {
          return !this.$parent.dataForm.id ? this.$t('add') : this.$t('update')
        }
      }
    },
    mounted() {
      this.dataFormBack = cloneDeep(this.$parent.dataForm)
    },
    methods: {
      init(id, row, isView) {
        this.isView = isView


        this.$nextTick(() => {
          // 清空表单校验
          console.log(this.$parent.$refs.dataForm, id, row, isView, 'this.$parent.$refs.dataForm')
          if (this.$parent.$refs.dataForm) { // dialog里面的form
            this.$parent.$refs.dataForm.resetFields()
          }


          this.$parent.dataForm = cloneDeep(this.dataFormBack)
          if (this.$parent.dataForm) {
            this.$parent.dataForm.id = id
            this.$parent.dataForm.disabled = isView === true // 表单是否可编辑
          }

          if (this.$parent.init) {
            console.log(id, row, this.stepMarker, 'id row')
            this.$parent.init(id, row)
          }
          if (id && this.$parent.getInfo) {
            this.$parent.getInfo()
          }
        })
        this.open()
      },
      // 表单提交
      formSubmit(submitType) {
        let dataForm = this.$parent.$refs.dataForm
        if (dataForm) {
          dataForm.validate(async valid => {
            if (valid) {
              this.$emit('confirm', submitType)
            } else {
              this.$nextTick(() => {
                let isError = document.getElementsByClassName('is-error')
                isError[0].scrollIntoView({
                  // 滚动到指定节点
                  // 值有start,center,end，nearest，当前显示在视图区域中间
                  block: 'center',
                  // 值有auto、instant,smooth，缓动动画（当前是慢速的）
                  behavior: 'smooth'
                })
              })
            }
          })
        } else {
          this.$emit('confirm', submitType)
        }
      },
      open() {
        this.visible = true
      },
      close() {
        this.visible = false
      },
      onOpen() {
        this.$emit('open')
      },
      onClose() {
        this.$emit('close')
      }
    }
  }
</script>
<style lang="scss" scoped>
    .dialog-column-1 {
        /deep/ .el-dialog {
            position: fixed;
            margin-top: 0 !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%);
            width: 50%;
            /*margin-top:7vh !important;*/
            .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
                width: 75%;
            }
        }
  .dialog-column-1 {
    /deep/ .el-dialog {
      position: fixed;
      margin-top: 0 !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%);
      width: 50%;
      /*margin-top:7vh !important;*/
      .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
        width: 75%;
      }
    }
  }

    .dialog-column-2 {
        /deep/ .el-dialog {
            width: 60%;
            position: fixed;
            margin-top: 0 !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%);
  .dialog-column-2 {
    /deep/ .el-dialog {
      width: 60%;
      position: fixed;
      margin-top: 0 !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%);

            .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
                width: 50%;
                float: left;
            }
        }
      .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
        width: 50%;
        float: left;
      }
    }
  }

    .dialog-column-3 {
        /deep/ .el-dialog {
            width: 75%;
            position: fixed;
            margin-top: 0 !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%);
  .dialog-column-3 {
    /deep/ .el-dialog {
      width: 75%;
      position: fixed;
      margin-top: 0 !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%);

            .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
                //width: 33.33333%;
                float: left;
            }
        }
      .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
        //width: 33.33333%;
        float: left;
      }
    }
  }

    .dialog-column-4 {
        /deep/ .el-dialog {
            width: 90%;
            position: fixed;
            margin-top: 0 !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%);
  .dialog-column-4 {
    /deep/ .el-dialog {
      width: 90%;
      position: fixed;
      margin-top: 0 !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%);

            .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
                //width: 33.33333%;
                float: left;
            }
        }
      .el-form > .el-form-item, .el-form .el-collapse-item__content > .el-form-item {
        //width: 33.33333%;
        float: left;
      }
    }
  }

    /deep/ .el-form {
        padding: 15px;
  /deep/ .el-form {
    padding: 15px;

        .item-line-divider {
            width: 100%;
            height: 0px;
            float: left;
        }
    .item-line-divider {
      width: 100%;
      height: 0px;
      float: left;
    }
  }

</style>