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

<template>
  <div class="contract-info">
    <InfoCard title="协议签订信息">
      <ContractInfoSignModule></ContractInfoSignModule>
    </InfoCard>
    <InfoCard v-if="contractResStatus">
      <template #title>
        <div class="contract-info-card-title">
          <span>协议归档信息</span>
          <button @click="editContractArchive" 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">
          归档时间：{{ formatDate(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" @click="viewfileEvent" v-if="contractRes?.contract_archive_status === 1">
          归档协议：<span class="column-cell">{{ contractRes?.contract_file_name || '-'  }}</span>
        </div>
      </div>
    </InfoCard>
    <ContractInfoElectronModule @refresh="doRefresh"></ContractInfoElectronModule>
    <new-d-model :data="orderDetail"  ref="detailModelContract" @refresh="doRefresh"></new-d-model>
  </div>
</template>

<script>
import InfoCard from '../../ui/InfoCard.vue';
import NewDModel from "@/views/order/components/new-detailModel.vue";
import ContractInfoSignModule from './ContractInfoSignModule.vue';
import ContractInfoElectronModule from './ContractInfoElectronModule.vue';
import { mapState } from 'vuex'
export default {
  name: 'ContractInfo',
  components: {
    NewDModel,
    InfoCard,
    ContractInfoSignModule,
    ContractInfoElectronModule
  },
  computed: {
    ...mapState({
      orderDetail: state => state.order.orderDetail
    }),
    contractResStatus() {
      return this.contractRes?.contract_status === 1
    },
    isAdmin() {
      const list = this.orderDetail?.userIdentity || [];
      return list.includes(1) || list.includes(2);
    },
    contractRes () {
      return this.orderDetail?.contractRes || {}
    },
    contractStatus() {
      let tip = '-'
      if(this.contractRes?.contract_status === 1) {
        if (this.contractRes?.contract_archive_status === 0) {
          tip = '未归档'
        }
        if (this.contractRes?.contract_archive_status === 1) {
          tip = '已归档'
        }
      }
      return tip
    }
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    doRefresh (type = '') {
      this.$emit('refresh', type)
    },
    editContractArchive() {
      // userIdentity 1超级管理员 2销管
      if(this.isAdmin) {
        // 协议归档信息
          this.$refs.detailModelContract.pShow = true;
      } else {
        this.$message.error('暂无权限')
      }
    },
    formatDate(timeString) {
      if (!timeString) return '-';
      // 只取空格前的日期部分
      return timeString.split(' ')[0];
    },
    // 查看归档协议
    viewfileEvent() {
      const url = this.contractRes?.contract_file_url;
      if(url) {
        const urls = this.$router.resolve(url)
        const fileUrl = '/shareFile' + urls.href.split('/shareFile')[1]
        this.$confirm("确定下载该归档协议吗？", "提示").then(() => {
          const a1 = document.createElement('a')
          a1.download = this.contractRes.contract_file_name
          a1.href = fileUrl
          a1.click()
        })
      }
    }
  }
}

</script>

<style lang="scss" scoped>
.contract-info {
  background: #f5f7f9;
  ::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;
    .red-chong {
      color: $red_light;
    }
  }
  .arow {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
}
.edit-contract-archive-dialog {
    width: 100%;
    ::v-deep {
      .el-dialog {
        width: 100%;
        .dialog-footer {
          justify-content: center;
        }
        .action-button {
          flex: none;
          width: 132px;
        }
      }
    }

  }
.column-cell {
  color: $color_main;
  cursor: pointer;
  text-decoration: underline;
}
</style>