jiangping
2024-12-27 5506edbe54883b31db3cc8e4a1d9d0795a18a3c9
company/src/components/business/OperaContractDescWindow.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,169 @@
<template>
    <GlobalWindow
        :title="title"
        width="100%"
        :withFooter="false"
        :visible.sync="visible"
        :confirm-working="isWorking"
        @confirm="confirm"
    >
        <div class="info" v-if="info">
            <div class="info_label">
                <span>合同详情</span>
            </div>
            <div class="info_list">
                <div class="info_list_item">
                    <div class="info_list_item_label">合同名称:</div>
                    <div class="info_list_item_val">{{info.name}}</div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">合同时间:</div>
                    <div class="info_list_item_val">{{info.startTime}} - {{info.endTime}}</div>
                </div>
                <div class="info_list_item" v-if="userInfo.type === 0 || info.type === 2">
                    <div class="info_list_item_label">合同类型:</div>
                    <div class="info_list_item_val">
                        <template v-if="info.signType === 0">平台-商户</template>
                        <template v-if="info.signType === 1">平台-企业</template>
                        <template v-if="info.signType === 2">商户-企业</template>
                    </div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">企业名称:</div>
                    <div class="info_list_item_val">{{info.companyName}}</div>
                </div>
                <div class="info_list_item" style="width: 100%;" v-if="userInfo.type === 0 || info.type === 2">
                    <div class="info_list_item_label">签署方式:</div>
                    <div class="info_list_item_val">
                        <template v-if="info.type === 0">双方签章</template>
                        <template v-if="info.type === 1">仅我方签章</template>
                    </div>
                </div>
                <div class="info_list_item" style="width: 100%;">
                    <div class="info_list_item_label">原始附件:</div>
                    <div class="info_list_item_val" v-if="info.multifile">
                        <u @click.stop="openPDF(info.multifile.name, info.multifile.fileurlFull)">{{info.multifile.name}}</u>
                    </div>
                </div>
                <div class="info_list_item" style="width: 100%;">
                    <div class="info_list_item_label">备注:</div>
                    <div class="info_list_item_val">{{info.remark}}</div>
                </div>
            </div>
        </div>
        <div class="info" v-if="info && info.status !== 0">
            <div class="info_label">
                <span>合同签署情况</span>
            </div>
            <div class="info_list">
                <div class="info_list_item">
                    <div class="info_list_item_label">{{info.signType === 2 ? '商户' :  [0, 1].includes(info.signType) ? '平台' : ''}}签署人:</div>
                    <div class="info_list_item_val">{{info.firstSignUserName}}</div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">{{info.signType === 2 ? '商户' :  [0, 1].includes(info.signType) ? '平台' : ''}}签署时间:</div>
                    <div class="info_list_item_val">{{info.signDate}}</div>
                </div>
                <div class="info_list_item" v-if="info.type !== 1">
                    <div class="info_list_item_label">{{info.signType === 0 ? '商户' :  [1, 2].includes(info.signType) ? '企业' : ''}}签署人:</div>
                    <div class="info_list_item_val">{{info.doneSignUserName}}</div>
                </div>
                <div class="info_list_item" v-if="info.type !== 1">
                    <div class="info_list_item_label">{{info.signType === 0 ? '商户' :  [1, 2].includes(info.signType) ? '企业' : ''}}签署时间:</div>
                    <div class="info_list_item_val">{{info.comSignDate}}</div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">签署件:</div>
                    <div class="info_list_item_val">
                        <u v-if="info.multiDoneFile" @click.stop="openPDF(info.multiDoneFile.name, info.multiDoneFile.fileurlFull)">{{info.multiDoneFile.name}}</u>
                        <u v-else-if="info.multiFirstFile" @click.stop="openPDF(info.multiFirstFile.name, info.multiFirstFile.fileurlFull)">{{info.multiFirstFile.name}}</u>
                    </div>
                </div>
            </div>
        </div>
        <!-- é¢„览pdf -->
        <OperaPdfViewerWindow ref="OperaPdfViewerWindow"  />
    </GlobalWindow>
</template>
<script>
  import BaseOpera from '@/components/base/BaseOpera'
  import GlobalWindow from '@/components/common/GlobalWindow'
  import OperaPdfViewerWindow from '@/components/business/OperaPdfViewerWindow'
  import { contractId } from '@/api/business/contract'
  import { mapState } from 'vuex'
  export default {
    name: 'OperaContractDescWindow',
    extends: BaseOpera,
    computed: {
      ...mapState(['userInfo'])
    },
    components: { GlobalWindow, OperaPdfViewerWindow },
    data () {
      return {
        info: null
      }
    },
    methods: {
      open (title, id) {
        this.title = title
        this.info = null
        this.visible = true
        console.log(this.userInfo)
        contractId(id)
          .then(res => {
            console.log(res)
            this.info = res
          })
      },
      openPDF(name, url) {
        this.$refs.OperaPdfViewerWindow.open(name, url)
      },
    }
  }
</script>
<style lang="scss" scoped>
    .info {
        width: 100%;
        .info_label {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            span {
                font-size: 18px;
                font-weight: 600;
                color: #000000;
            }
        }
        .info_list {
            width: 100%;
            display: flex;
            align-items: start;
            flex-wrap: wrap;
            .info_list_item {
                width: 50%;
                display: flex;
                align-items: start;
                margin-bottom: 20px;
                .info_list_item_label {
                    flex-shrink: 0;
                    font-size: 16px;
                }
                .info_list_item_val {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    font-size: 16px;
                    u {
                        font-size: 16px;
                        color: #2E68EC;
                        cursor: pointer;
                    }
                }
            }
        }
    }
</style>