contract-business-web/src/views/contract/components/detailContract.vue

<template>
  <div>
    <!--    合同详情-->
    <xy-dialog :is-show.sync="isShowDetail" type="normal" title="详情" class="contract-detail" v-if="detail">
      <template v-slot:normalContent>
        <div class="base-info">
          <div class="base-info-title">项目基本信息</div>
          <div class="base-info-item">
            <div class="base-info-item-title">项目名称</div>
            <div class="base-info-item-content">{{detail.name}}</div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-title">项目类型</div>
            <div class="base-info-item-content">{{detail.type}}</div>
          </div>
          <div style="display: flex;justify-content: space-between;">
            <div class="base-info-item" style="flex-basis: 50%">
              <div class="base-info-item-title">采购形式</div>
              <div class="base-info-item-content">{{detail && detail.purchase_way.value}}</div>
            </div>
            <div class="base-info-item" style="flex-basis: 50%">
              <div class="base-info-item-title">采购方式</div>
              <div class="base-info-item-content">{{detail && detail.purchase_type.value}}</div>
            </div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-title">项目预算</div>
            <div class="base-info-item-content">{{detail.plan_price}}</div>
            <div class="base-info-item-unit">(万)</div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-title">资金渠道</div>
            <div class="base-info-item-content">{{detail && detail.money_way.value}}</div>
          </div>
        </div>
        <div class="link-budget-plan">
          <div class="link-budget-plan-title">关联预算计划</div>
          <xy-table :height="260" :table-item="linkBudgetPlanTable" :show-index="false" :list="detail.plans">
            <template v-slot:btns>
              <div></div>
            </template>
          </xy-table>
        </div>
        <div class="sign-info">
          <div class="sign-info-title">签订信息</div>
          <div class="sign-info-item">
            <div class="sign-info-item-title">合同金额</div>
            <div class="sign-info-item-content">{{detail.money}}</div>
            <div class="sign-info-item-unit">（万）</div>
          </div>
          <div style="display: flex;justify-content: space-between">
            <div class="sign-info-item" style="flex-basis: 50%">
              <div class="sign-info-item-title">承包商\供应商</div>
              <div class="sign-info-item-content">{{detail.supply}}</div>
            </div>
            <div class="sign-info-item" style="flex-basis: 50%">
              <div class="sign-info-item-title">执行部门</div>
              <div class="sign-info-item-content">{{detail.carry_department}}</div>
            </div>
          </div>
        </div>
        <div class="pay-plan">
          <div class="pay-plan-title">付款计划</div>
          <xy-table :height="240" :list="signPlan" :table-item="planTable" :show-index="false">
            <template v-slot:btns>
              <div></div>
            </template>
          </xy-table>
        </div>
        <div class="related-processes">
          <div class="related-processes-title">相关流程</div>
          <div class="related-processes-item">
            <div>采购流程查看</div>
            <div>合同会签流程</div>
            <div>招标审批流程</div>
          </div>
        </div>
        <div class="journal">
          <div class="journal-title">日志</div>
          <xy-table :height="240" :table-item="journalTable" :list="detail.log" :show-index="false">
            <template v-slot:btns>
              <div></div>
            </template>
          </xy-table>
        </div>
      </template>

      <template v-slot:footerContent>
        <div></div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {detailContract} from "@/api/contract/contract";
import {getContractSign} from "@/api/contractSign/contractSign"

import {parseTime} from "@/utils"
export default {
  data() {
    return {
      //合同详情
      detail:null,
      isShowDetail:false,
      linkBudgetPlanTable:[
        {
          label:"ID",
          sortable:false,
          prop:'id',
          width:160
        },
        {
          label:"类型",
          width:100,
          sortable: false,
          customFn:(row)=>{
            return (
              <div>
                <Tag color="primary">
                  {row.type === 1 ? '部门预算' : '水务计划'}
                </Tag>
              </div>
            )
          }
        },
        {
          label:"项目",
          width: 140,
          sortable: false,
          prop:'name'
        },
        {
          label:"金额",
          sortable: false,
          prop:'money',
          align:'right'
        }
      ],
      journalTable:[
        {
          label:'ID',
          sortable:false,
          prop:'id'
        },
        {
          label:"日志类型",
          sortable:false
        },
        {
          label:"日志内容",
          sortable:false
        },
        {
          label:"操作人",
          sortable:false
        },
        {
          label:"时间",
          sortable:false,
          prop:'created_at',
          formatter:(cell,data,value)=>{
            return parseTime(new Date(value),'{y}-{m}-{d}')
          }
        }
      ],
      signPlan:[],
      planTable:[
        {
          prop:'date',
          label:'日期',
          sortable:false,
          formatter:(cell,data,value)=>{
            return parseTime(new Date(value),'{y}-{m}-{d}')
          }
        },
        {
          prop:'money',
          label:'金额（元）',
          align:'right',
          sortable:false,
        },
        {
          prop:'content',
          label:'内容',
          align:'left',
          sortable:false,
        },
        {
          prop:'remark',
          label:'备注',
          align:'left',
          sortable:false,
        }
      ]
    }
  },
  methods: {
    async getDetail(id){
      let res = await detailContract({id:id})
      this.detail = res

      let plan = await getContractSign({contract_id:id})
      this.signPlan = plan.data
    },
  },

}
</script>

<style scoped lang="scss">
.contract-detail{

  .base-info{

    &-title{
      font-weight: 600;

      padding: 0 10px;
    }
    &-item{
      display: flex;

      margin-top: 8px;
      &-title{

        padding: 0 20px;
      }
      &-content{

      }
      &-unit{

        margin-left: 20px;
      }
    }
  }

  .link-budget-plan{

    margin-top: 20px;
    &-title{
      @extend .base-info-title;

      padding-bottom: 10px;
    }
  }

  .sign-info{

    &-title{
      @extend .link-budget-plan-title;
    }
    &-item{
      @extend .base-info-item;
      &-title{
        @extend .base-info-item-title;
      }
      &-content{
        @extend .base-info-item-content;
      }
      &-unit{
        @extend .base-info-item-unit;
      }
    }
  }

  .pay-plan{
    margin-top: 20px;
    &-title{
      @extend .link-budget-plan-title;
    }
  }

  .related-processes{

    margin-top: 20px;
    &-title{
      @extend .link-budget-plan-title;
    }
    &-item{
      color: red;
      cursor: pointer;
      display: flex;

      &>div{
        flex-basis: 25%;

        padding: 0 20px;
      }
    }
  }

  .journal{

    margin-top: 20px;
    &-title{
      @extend .link-budget-plan-title;
    }
  }
}
</style>