image-info.vue

<template>
  <div class="invoice-image-info">
    <div class="title-wrapper">
      <ImageTab :options="tabList" v-model="tabKey" />
      <div class="button-wrapper">
        <Button :disabled="isInfoEdit || imageInfo.checkFlag == 2" size="small" @click="isInfoEdit = true">修改</Button>
        <Button :disabled="!isInfoEdit" size="small" @click="handleSave">保存</Button>
        <Button
          v-if="!hideVerification(imageInfo)"
          :disabled="isInfoEdit || imageInfo.checkFlag == 2"
          size="small"
          @click="handleVerification"
        >
          查验
        </Button>
      </div>
    </div>
    <ImageInfoPanel :loading="loading" :imageInfo="imageInfo" :isInfoEdit="isInfoEdit" />
  </div>
</template>

<script>
import ImageTab from './image-tab.vue'
import ImageInfoPanel from './image-info-panel.vue'
import { verificationTypeList } from '../utils'
export default {
  components: {
    ImageTab,
    ImageInfoPanel,
  },
  props: {
    currentSelectedRow: {
      type: Object,
      default: () => ({}),
    }
  },
  data() {
    
    return {
      isInfoEdit: false,
      imageInfoList: [],
      imageInfo: {},
      tabKey: 0,
      tabList: [],
      loading: false,
    }
  },
  computed: {
  },
  watch: {
    tabKey(val) {
      this.imageInfo = { ...this.imageInfoList[val] }
    },
  },
  created() {
    this.queryImageInfo()
  },
  methods: {
    
    hideVerification(imageInfo) {
      if (verificationTypeList.includes(imageInfo.billType)) {
        return false
      }
      return true
    },
    handleVerification() {
      this.loading = true
      window.GMS.$http.post(
        `/yxgl/verification`,
        { ...this.imageInfo }
      ).then((res) => {
        if (res.data && res.data.code != 0) {
          this.$Message.error(res.data.msg)
        }
      }).finally(() => {
        this.queryImageInfo()
      })
    },
    handleSave() {
      this.isInfoEdit = false
      window.GMS.$http.post(
        `/yxgl/saveDetails`,
        { ...this.imageInfo }
      ).finally(() => {
        this.queryImageInfo()
      })
    },
    queryImageInfo() {
      this.loading = true
      window.GMS.$http.post(
        `/yxgl/selectDetails`,
        { ...this.currentSelectedRow }
      ).then((res) => {
        this.loading = false
        this.imageInfoList = res?.data?.rows || []
        this.tabList = this.imageInfoList.map((o, index) => ({
          label: `发票${index + 1}`,
          value: index,
        }))
        this.tabKey = 0
        this.imageInfo = { ...(res?.data?.rows?.[this.tabKey] || {}) }
        this.$emit('load-info', this.imageInfoList)
      })
    },
  },
};
</script>

<style lang="less">
.invoice-image-info {
  padding: 16px 16px 0px 16px;
  .title-wrapper {
    position: relative;
    height: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 16px;
    &::before {
      position: absolute;
      left: 0;
      top: 15px;
      content: "";
      width: 3px;
      height: 16px;
      background: #4bc0c6;
    }
    .title {
      margin-left: 12px;
      height: 22px;
      font-size: 16px;
      font-weight: 500;
      color: #555555;
      line-height: 22px;
    }
    .button-wrapper {
      button {
        &:not(:last-child) {
          margin-right: 10px;
        }
      }
    }
  }
  
}
</style>