WMS_IAC_FE/PC/UI.WinIn.FasterZ.Inventory/src/components/newAndEdiDialog/index.vue

<template>
  <el-dialog
    v-loading="loading"
    element-loading-text="加载中..."
    v-if="displayDialog"
    :visible="true"
    :fullscreen="true"
    :modal="false"
    :modal-append-to-body="false"
    :show-close="false"
    style="width:calc(100% - 28px);left:14px;top:14px;height:calc(100% - 28px)"
  >
    <div class="dialogOuterTitle">{{formTitle}}</div>
    <curren-Form
      v-if="active === 0"
      size="medium"
      class="newAndEdiDialog"
      :searchData="FormData"
      :searchForm="Form"
      :searchOptions="Options"
      :searchHandle="Handle"
      :rules="Rules"
      @changeInput="changeInput"
      @push="DataPush(arguments)"
      @submitForm="FormClick(arguments)"
      @radioChange="radioChange"
      @changeSelect="changeSelect"
    >
    <template v-if="showmyTable">
      <el-form-item class="formTable-box" prop="details">
        <currenTable
          :tableData="FormData.details"
          :tableColumns="myTableColumns"
          :selectionTable="selectionTable"
          :tableLoading="tableLoading"
          :isShowIndex="isShowIndex"
          @handleSelectionChange="handleSelectionChange"
        >
          <template>
            <el-table-column
              fixed="right"
              label="操作"
              width="120">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, FormData.details)"
                  type="text"
                  size="small">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </template>
        </currenTable>
      </el-form-item>
    </template>
    </curren-Form>
    <div v-if="active === 1 && pageStatus == 'success'" class="page4">
      <el-result icon="success" title="成功提示" :subTitle="formTitle + '成功'">
        <template slot="extra">
          <el-button type="primary" size="medium" @click="close"
            >退出</el-button
          >
        </template>
      </el-result>
    </div>
    <div v-if="active === 2 && pageStatus == 'error'" class="page4">
      <el-result icon="error" title="错误提示" :subTitle="formTitle + '失败'">
        <template slot="extra">
          <el-button type="primary" size="medium" @click="goBack"
            >返回</el-button
          >
          <el-button type="primary" size="medium" @click="close"
            >退出</el-button
          >
        </template>
      </el-result>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    //控制步骤
    active: {
      type: Number,
      default: 0
    },
    //结合active控制返回结果
    pageStatus: {
      type: String,
      default: ""
    },
    //显示返回结果
    formReveal: {
      type: Boolean,
    },
    //dialog标题
    formTitle: {
      type: String,
      default: ''
    },
    //dialog是否显示
    displayDialog: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    //表单数据
    FormData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    //绑定表单数据
    Form: {
      type: Array,
      default: () => {
        return []
      }
    },
    //下拉框数据
    Options: {
      type: Object,
      default: () => {
        return {}
      }
    },
    //表单按钮
    Handle: {
      type: Array,
      default: () => {
        return []
      }
    },
    //表单验证
    Rules: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 列表字段
    myTableColumns: {
      type: Array,
      default: () => {
        return []
      }
    },
    showmyTable: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    selectionTable: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    tableLoading: {
      type: Boolean,
      default: false
    },
    isShowIndex: {
      type: Boolean,
      default: false,
    }
  },
  data () {
    return {
      session: null
    }
  },
  mounted () {
    this.session = JSON.parse(JSON.stringify(this.FormData))
  },
  methods: {
    //点击表单提交(新增或编辑)
    FormClick (val) {
      if (val[0] == 0) {
        this.close()
      } else {
        val[1].validate((valid) => {
          if (valid) {
            this.$emit('FormSubmit', val);
          } else {
            this.$errorMsg('请按照提示继续操作')
            return false;
          }
        });
      }
    },
    close () {
      const data = JSON.parse(JSON.stringify(this.session))
      this.$emit('close', data)
    },
    goBack () {
      this.$emit('goBack')
    },
    DataPush (val) {
      this.$emit('push', val)
    },
    deleteRow(index, tableData) {
      this.$emit('deleteRow', index, tableData)
    },
    radioChange(prop,val){
      this.$emit('radioChange', prop, val)
    },
    changeInput(prop, val) {
      this.$emit("changeInput", prop, val)
    },
    //点击selection框
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    // form表单下拉框change事件
    changeSelect(prop,val ) {
      this.$emit("changeSelect", prop, val)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__header{
  padding:  0 !important;
}
::v-deep .el-dialog__body{
  padding-top: 0;
}
::v-deep .newAndEdiDialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 60px);
  .el-form {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    overflow: hidden;
    overflow-y: auto;
    padding-right: 40px;
  }
  .screen-push {
    color: rgb(64, 158, 255);
    span {
      cursor: pointer;
      &:hover {
        color: blue;
      }
    }
  }
  .formButton {
    padding: 20px 20px 20px 0;
  }
  .formTable-box {
      height: 40%;

      .el-form-item__content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin: 0 !important;
      }
    }
}
</style>