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">{{typeFormatter(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.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.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.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" :btn-width="130" @delete="deletePayPlan" @editor="(row)=>{$refs['detailContractSign'].planId = row.id;$refs['detailContractSign'].isShow = true}"></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>

    <detailContractSign ref="detailContractSign" @editorSuccess="getDetail(id)"></detailContractSign>
  </div>
</template>

<script>
import {detailContract} from "@/api/contract/contract";
import {delContractSign, getContractSign} from "@/api/contractSign/contractSign"
import {parseTime} from "@/utils"
import {Message} from "element-ui";

import detailContractSign from "./detailContractSign"
export default {
  components:{
    detailContractSign
  },
  data() {
    return {
      //合同详情
      id:'',
      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){
      this.id = id
      let res = await detailContract({id:id})
      this.detail = res

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

    //删除付款计划
    deletePayPlan(row){
      delContractSign({id:row.id}).then(res=>{
        this.getSignPlan()
        Message({
          type:'success',
          message:"操作成功"
        })
      })
    },
  },
  computed:{
    typeFormatter(){
      return function (type){
        switch (type){
          case 1:
            return "服务"
            break;
          case 2:
            return "货品"
            break;
          case 3:
            return "工程"
            break;
          default:
            return "未知"
        }
      }
    }
  }
}
</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;

      display: flex;

      &>div{
        cursor: pointer;
        flex-basis: 16%;

        margin: 0 20px;
      }
    }
  }

  .journal{

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