components/pc/wcarrier/comp/invoice.vue

<template>
  <div class="invoice defbb" :class="{ 'read-only': isReadOnly }">
    <div class="gray-color s-fz">[ 说明：用于发票补充展示 ]</div>
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      size="mini"
      label-width="110px"
      label-position="left"
      :disabled="$props.disabled"
      class="p-spac pb-spacd4"
    >
      <div class="flex">
        <el-form-item prop="addr" label="购方地址：" label-width="85px" class="mr-spac">
          <el-input v-model="formData.addr" v-empty="emptyArgs"></el-input>
        </el-form-item>
        <el-form-item prop="bank" label="购方开户银行：">
          <el-input v-model="formData.bank" v-empty="emptyArgs"></el-input>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item prop="addr" label="购方电话：" label-width="85px" class="mr-spac">
          <el-input v-model="formData.addr" v-empty="emptyArgs"></el-input>
        </el-form-item>
        <el-form-item prop="bank" label="购方银行账号：">
          <el-input v-model="formData.bank" v-empty="emptyArgs"></el-input>
        </el-form-item>
        <div class="ml-spac pt-spac" v-if="!$props.disabled">
            <template v-if="isReadOnly">
                <el-button type="text" @click="isEdit=true">修改</el-button>
            </template>
            <template v-else>
          <el-button type="text" @click="save()">保存</el-button>
          <el-button type="text" @click="cancel()">取消</el-button>
          </template>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>

const staticData = {
  formDataRaw: {}
}
export default {
  name: 'invoice',
  data() {
    return {
      formData: {
        addr: '',
        bank: '66'
      },
      rules: {

      },
      isEdit: false
    }
  },
  props: {
    readOnly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isReadOnly() {
      return this.readOnly || !this.isEdit
    },
    emptyArgs() {
      return { open: this.isReadOnly, text: '[ 暂无内容 ]' }
    }
  },
  watch: {
    isEdit(val) {
      if (val) {
        staticData.formDataRaw = { ...this.formData }
      }
    }
  },
  created() {
    this.isEdit = !Object.keys(this.formData).some(key => this.formData[key])
  },
  methods: {
    save() {
      this.isEdit = false
    },
    cancel() {
      this.formData = staticData.formDataRaw
      this.isEdit = false
    }
  }
}
</script>
<style lang="scss" scoped>
.el-input {
  width: 300px;
}
.el-form-item--mini.el-form-item {
    margin-bottom: 6px;
}
.read-only {
    ::v-deep input {
        padding: 0;
        border:0;
        pointer-events: none;
    }

}

</style>