qmx_page_admin/src/views/create-order/components/order-detail-submodule/ContractInfo.vue

<template>
  <div class="contract-info">
    <InfoCard title="协议签订信息">
      <div class="contract-info-card">
        <div class="contract-info-card-item">
          协议签订状态：{{contractRes?.contract_status === 1 ? '签协议' : '不签协议'}}
        </div>
        <div class="contract-info-card-item">
          签约主体：{{ setSigningSubject || '-' }}
        </div>
        <div class="contract-info-card-item" v-if="contractResStatus">
          协议签订时间：{{ contractRes?.contract_time || '-' }}
        </div>
        <div class="contract-info-card-item" v-if="contractResStatus">
          协议编号：{{ contractRes?.contract_code || '-'  }}
        </div>
      </div>
    </InfoCard>
    <InfoCard v-if="contractResStatus">
      <template #title>
        <div class="contract-info-card-title">
          <span>协议归档信息</span>
          <button @click="editContractArchive('1')" v-if="contractRes?.contract_archive_status !== 1" class="edit-btn">编辑</button>
        </div>
      </template>
      <div class="contract-info-card">
        <div class="contract-info-card-item">
          协议归档状态：{{contractRes?.contract_archive_status === 1 ? '已归档' : '未归档' }}
        </div>
        <div class="contract-info-card-item" v-if="contractRes?.contract_archive_status === 1">
          归档时间：{{ contractRes?.contract_archive_time || '-'  }}
        </div>
        <div class="contract-info-card-item" v-if="contractRes?.contract_archive_status === 1">
          归档份数：{{ contractRes?.contract_archive_num || '-'  }}
        </div>
        <div class="contract-info-card-item" v-if="contractRes?.contract_archive_status === 1">
          归档协议：{{ contractRes?.contract_file_url || '-'  }}
        </div>
      </div>
    </InfoCard>
    <InfoCard v-if="contractResStatus">
      <template #title>
        <div class="contract-info-card-title">
          <span>电子归档信息</span>
          <button @click="editContractArchive('2')" class="edit-btn">编辑</button>
        </div>
      </template>
      <div class="contract-info-card card-noflex">
        <div class="contract-info-card-item">
          电子协议备注：{{ contractRes?.remark || '-'  }}
        </div>
        <div class="arow">
          <div class="contract-info-card-item">
            电子协议类型：{{ contractRes?.seal_type === 1 ? '有电子章' : '无电子章'}}
          </div>
          <div class="contract-info-card-item">
            协议甲方类型：{{ contractRes?.partyA_type === 2 ? '企业' : '个人' }}
          </div>
        </div>
        <div class="contract-info-card-item">
          协议甲方：{{ contractRes?.partyA_name || '-' }}
        </div>
        <div class="arow">
          <div class="contract-info-card-item">
            协议甲方联系人：{{ contractRes?.partyA_person || '-'}}
          </div>
          <div class="contract-info-card-item">
            协议乙方联系人：{{ contractRes?.partyB_person || '-'}}
          </div>
        </div>
        <div class="contract-info-card-item">
          协议甲方地址：{{ contractRes?.partyA_address || '-' }}
        </div>
      </div>
    </InfoCard>
    <Dialog
      ref="editContractArchiveDialog"
      :visible="editContractArchiveDialogVisible"
      title="编辑电子协议信息"
      width="90%"
    >
      <contractInfoModule></contractInfoModule>
    </Dialog>
  </div>
</template>

<script>
import InfoCard from '../../ui/InfoCard.vue';
import { signUnitOptions } from '@/views/create-order/data/index.js'
import contractInfoModule from '../contractInfoModule.vue';
import Dialog from '@/components/Dialog.vue';
export default {
  name: 'ContractInfo',
  components: {
    InfoCard,
    contractInfoModule,
    Dialog
  },
  props: {
    orderDetail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    setSigningSubject() {
      return signUnitOptions.find(item => item.value === this.orderDetail?.orderData?.signing_subject)?.label || '-';
    },
    contractResStatus() {
      return this.contractRes?.contract_status === 1
    }
  },
  data() {
    return {
      editContractArchiveDialogVisible: false,
      contractRes: this.orderDetail?.contractRes || {}
    }
  },
  methods: {
    editContractArchive(type) {
      const userAdmin = this.orderDetail?.userIdentity === 1 || this.orderDetail?.userIdentity === 2;
      if(!userAdmin) {
        if(type === '1') {
          // 协议归档信息
        } else if(type === '2') {
          // 电子归档信息
          this.editContractArchiveDialogVisible = true;
        }
      } else {
        this.$message.error('暂无权限')
      }
    } 
  }
}

</script>

<style lang="scss" scoped>
.contract-info {
  background: #F2F2F4;
  ::v-deep {
    .info-card {
      margin-bottom: 16px;
    }
  }
}
.contract-info-card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .edit-btn { 
    padding: 4px 31px;
    background: $color_main;
    color: $white;
    border-radius: 4px;
    font-size: 14px;
    line-height: 22px;
    border: none;
    cursor: pointer;
  }
}
.contract-info-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  &.card-noflex {
    display: block;
  }
  &-item {
    display: flex;
    align-items: center;
    margin-right: 32px;
    min-width: 255px;
    font-size: 14px;
    line-height: 22px;
    color: $gray_10;
  }
  .arow {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
}
</style>