components/pc/wcarrier/comp/invoice.vue

<template>
  <div class="invoice defbb" :class="{ 'read-only':!this.$props.disabled&& isReadOnly }">
    <div class="gray-color s-fz">[ 说明：用于发票补充展示 ]</div>
    <el-form ref="form" :model="value" :disabled="disabledFinal" size="mini" label-width="110px" label-position="left"
      class="p-spac pb-spacd4">
      <div class="flex">
        <el-form-item prop="fpAddress" label="购方地址：" label-width="85px" class="mr-spac">
          <el-input v-model="value.fpAddress" placeholder="请输入" v-empty="emptyArgs"></el-input>
        </el-form-item>
        <el-form-item prop="fpBank" label="购方开户银行：">
          <el-select v-model="value.fpBank" filterable placeholder="请选择" v-empty="emptyArgs">
            <el-option v-for="(item, index) in banks" :key="index" :label="item.bankName" :value="item.bankName">
            </el-option>
          </el-select>
          <!-- <el-input v-model="value.fpBank" v-empty="emptyArgs"></el-input> -->
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item prop="fpPhone" label="购方电话：" label-width="85px" class="mr-spac">
          <el-input v-model="value.fpPhone" placeholder="请输入" v-empty="emptyArgs"></el-input>
        </el-form-item>
        <el-form-item prop="fpBankAccount" label="购方银行账号：">
          <el-input v-model="value.fpBankAccount" placeholder="请输入" v-empty="emptyArgs"></el-input>
        </el-form-item>
        <div class="ml-spac pt-spac" v-if="showOpers">
          <template v-if="!isEdit">
            <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 {
      banks: [],
      isEdit: false
    }
  },
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    disabledFinal() {
      return !this.$props.readOnly && this.$props.disabled
    },
    showOpers() {
      if (this.$props.disabled) {
        return false
      }
      if (this.$props.readOnly) {
        return !this.isReadOnly
      }
      return true
    },
    saved() {
      return this.value.fpStatus === 2
    },
    isReadOnly() {
      return this.$props.readOnly || !this.isEdit
    },
    emptyArgs() {
      // el-form :disabled 变化后，之前的变化会保留，导致空内容请不掉，所以添加此参数
      return { open: !this.$props.disabled && this.isReadOnly, text: '[ 暂无内容 ]' }
    }
  },
  watch: {
    disabled() {
      console.log('disabled', this.disabled)
    },
    value() {
      staticData.formDataRaw = { ...this.value }
      this.isEdit = !this.saved
    },
    isEdit: {
      handler(val) {
        console.log('isEdit', val)
        if (val) {
          staticData.formDataRaw = { ...this.value }
        }
      }
    }
  },
  mounted() {
    this.$http(this.$interfaces.user.list_by_keywords, { keywords: '' }).then(res => {
      this.banks = res
    })
  },
  methods: {
    save() {
      this.$http(this.$interfaces.user.carrier_fp_save, this.value).then(res => {
        this.isEdit = false
      })
    },
    cancel() {
      Object.keys(this.value).forEach(key => {
        this.value[key] = staticData.formDataRaw[key]
      })
      this.isEdit = false
    }
  }
}
</script>
<style lang="scss" scoped>
.el-input,
.el-select {
  width: 300px;
}

.el-select--mini {
  font-size: 12px;
}

.el-form-item--mini.el-form-item {
  margin-bottom: 6px;
}

.read-only {
  ::v-deep .el-input__suffix {
    display: none;
  }

  .el-input,
  .el-select {
    font-size: 14px;
    pointer-events: none;
    ::v-deep input {
      font-size: 14px;
      padding: 0;
      border: 0;
      color: inherit;
    }
  }

}
</style>