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="value"
      :disabled="$props.disabled"
      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.bankNo">
                </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: null
    },
    disabled: {
      type: Boolean,
      default: null
    }
  },
  computed: {
    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.readOnly || !this.isEdit)
    },
    emptyArgs() {
      return { open: !this.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,::v-deep input {
        font-size: 14px;
        padding: 0;
        border:0;
        pointer-events: none;
    }

}

</style>